/* ================================================================
   ARM EMPRENDEDORES — BASE.CSS
   Reset, tipografía, accesibilidad y utilidades transversales.
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
    -webkit-text-size-adjust: 100%;
    /* Sin scroll horizontal: en un celular angosto una tabla que se
       sale rompe toda la navegación con el pulgar. */
    overflow-x: hidden;
}

body {
    font-family: var(--font);
    font-size: var(--f-base);
    line-height: 1.5;
    color: var(--tx-1);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    min-height: 100dvh;
    /* Evita el rebote elástico que hace sentir la PWA como una web. */
    overscroll-behavior-y: none;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

button { background: none; border: none; cursor: pointer; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.25; font-weight: var(--fw-b); color: var(--tx-1); }
h1 { font-size: var(--f-2xl); }
h2 { font-size: var(--f-xl); }
h3 { font-size: var(--f-lg); }
h4 { font-size: var(--f-base); }

ul, ol { list-style: none; }

table { border-collapse: collapse; width: 100%; }

/* ================================================================
   ACCESIBILIDAD
   ================================================================ */

/* Foco visible SIEMPRE que se navegue con teclado. Se usa
   :focus-visible para no dibujar el anillo al tocar con el dedo. */
:focus-visible {
    outline: 3px solid var(--bd-focus);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* Texto solo para lectores de pantalla. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Salto directo al contenido, primer tabulable de cada página. */
.skip-link {
    position: absolute;
    top: -100px; left: var(--s-3);
    z-index: 999;
    background: var(--brand);
    color: var(--brand-contrast);
    padding: var(--s-3) var(--s-4);
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    font-weight: var(--fw-sb);
    transition: top var(--t);
}
.skip-link:focus { top: 0; text-decoration: none; }

/* Respeta a quien pidió menos movimiento en su sistema. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Más contraste para quien lo pidió en su sistema. */
@media (prefers-contrast: more) {
    :root { --bd: var(--bd-strong); --tx-3: var(--tx-2); }
}

/* ================================================================
   ANIMACIONES REUTILIZABLES
   ================================================================ */
@keyframes fade-in     { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-up    { from { transform: translateY(14px); opacity: 0; }
                         to   { transform: translateY(0);    opacity: 1; } }
@keyframes sheet-up    { from { transform: translateY(100%); }
                         to   { transform: translateY(0); } }
@keyframes pop         { 0% { transform: scale(0.94); opacity: 0; }
                         60% { transform: scale(1.02); }
                         100% { transform: scale(1); opacity: 1; } }
@keyframes spin        { to { transform: rotate(360deg); } }
@keyframes shimmer     { 100% { transform: translateX(100%); } }
@keyframes pulse-soft  { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

.anim-slide-up { animation: slide-up var(--t-lg) both; }
.anim-fade     { animation: fade-in var(--t-md) both; }
.anim-pop      { animation: pop var(--t-md) both; }

/* ================================================================
   UTILIDADES
   ================================================================ */
.flex     { display: flex; }
.col      { flex-direction: column; }
.center   { align-items: center; }
.between  { justify-content: space-between; }
.wrap     { flex-wrap: wrap; }
.grow     { flex: 1; }
.gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); }
.gap-6 { gap: var(--s-6); }

.hidden   { display: none !important; }
.tx-sm    { font-size: var(--f-sm); }
.tx-xs    { font-size: var(--f-xs); }
.tx-lg    { font-size: var(--f-lg); }
.tx-2     { color: var(--tx-2); }
.tx-3     { color: var(--tx-3); }
.tx-ok    { color: var(--ok); }
.tx-alert { color: var(--alert); }
.tx-warn  { color: var(--warn); }
.tx-brand { color: var(--brand); }
.bold     { font-weight: var(--fw-sb); }
.bolder   { font-weight: var(--fw-b); }
.right    { text-align: right; }
.centrado { text-align: center; }
.mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); }
.mb-2 { margin-bottom: var(--s-2); } .mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }

/* Cifras de dinero alineadas: todas ocupan el mismo ancho por
   dígito, así una columna de precios queda pareja. */
.num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* Corta el texto largo en una línea sin romper el layout. */
.truncar {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.truncar-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}