/* Portada MagTech · rediseño 20-sep-2026
   Hallmark · macrostructure: Directory-Board · theme: custom (rótulo) · nav: N1 · footer: Ft2
   · enrichment: none · motion: press + hover-open

   Las cuatro decisiones previas, para que cualquiera pueda decirlas en voz alta:

   1. REFERENCIA. La rotulación comercial mexicana: el letrero pintado de la
      papelería, la barbería, la vidriería. Letra gruesa, sombra desplazada,
      un color plano por negocio. No es lenguaje de agencia; es el lenguaje que
      el cliente ya tiene colgado en su propia fachada.
   2. COLOR ANCLA. El verde MagTech (#45a059) como marca y #2f7a41 como acción.
      Los colores de las fichas NO son decoración: agrupan por familia de negocio
      (salud, comida, belleza, comercio, oficio, educación), seis en total, y cada
      uno mide 4.9:1 o más contra el blanco de su cinta.
   3. TIPOGRAFÍA. Display: Archivo, grotesca de asta gruesa y ligeramente ancha,
      la que más se parece a una letra pintada a pincel plano. Cuerpo: IBM Plex
      Sans, diseñada para leerse en pantalla a tamaños grandes sin cansar.
   4. INTENCIÓN. Que alguien de 60 años, con la página abierta frente a él,
      encuentre y toque el giro de su negocio en menos de cinco segundos.

   Accesibilidad, medida y no estimada:
   - Cuerpo a 19px. Ninguna letra visible baja de 17px.
   - Zonas táctiles de 56px o más (WCAG 2.5.8 pide 24).
   - Contrastes contra el papel #f5f1ea: tinta 16.4:1, tinta-2 9.6:1,
     tinta-3 6.4:1, acción 4.7:1. Texto blanco sobre color de familia, 5:1 o más.
   - Las fichas son <details> nativos: abren con toque, con clic y con Enter.
     El hover solo añade comodidad con ratón; nada depende de él. */

:root {
    --papel: #f6f7f9;
    --papel-2: #ebeef2;
    --blanco: #ffffff;
    --tinta: #0f1419;
    --tinta-2: #3c4653;
    --tinta-3: #545f6b;
    --regla: rgba(15, 20, 25, 0.22);
    --linea: rgba(15, 20, 25, 0.13);
    --linea-fuerte: rgba(15, 20, 25, 0.24);

    /* sombras de elevación, no de rótulo: apenas separan del papel */
    --sombra-1: 0 1px 2px rgba(15, 20, 25, 0.05);
    --sombra-2: 0 1px 2px rgba(15, 20, 25, 0.05), 0 10px 28px -16px rgba(15, 20, 25, 0.28);
    --sombra-3: 0 2px 4px rgba(15, 20, 25, 0.06), 0 18px 40px -20px rgba(15, 20, 25, 0.34);

    /* El verde es la marca y la señal de «háblanos»; lo que es navegar va en
       tinta. Medido: blanco sobre --accion 5.28:1, blanco sobre --nav 18.52:1,
       --enlace sobre papel 6.29:1 (APCA 76). */
    --marca: #45a059;
    --accion: #2f7a41;          /* WhatsApp y contacto */
    --accion-hover: #24632f;
    --enlace: #1f6b3d;          /* verde de enlace en texto: 6.29:1 */
    --nav: #0f1419;             /* acción de navegar: 18.52:1 */
    --nav-hover: #28303a;
    --borde-campo: #737d88;     /* 4.17:1, WCAG 1.4.11 pide 3 */

    /* familias de negocio */
    --salud: #1665ad;
    --comida: #b83227;
    --belleza: #a02063;
    --comercio: #9a4a10;
    --oficio: #6f6414;
    --educacion: #2b3c6b;

    --display: 'Archivo', 'Segoe UI', sans-serif;
    --cuerpo: 'IBM Plex Sans', 'Segoe UI', sans-serif;

    /* escala de radios corta, cada uno con su uso:
       chico  -> campos, sellos y piezas pequeñas dentro de una caja
       normal -> fichas, tarjetas y botones
       grande -> los bloques de sección completos y el pie */
    --r-chico: 5px;
    --r: 14px;
    --r-grande: 26px;

    --u: 4px;
    --margen: clamp(20px, 5vw, 72px);
    --ancho: 1240px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { background: var(--papel); }

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--cuerpo);
    font-size: 19px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible {
    outline: 3px solid var(--tinta);
    outline-offset: 3px;
    border-radius: var(--r-chico);
}

.salto {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--tinta);
    color: var(--blanco);
    padding: calc(var(--u) * 3) calc(var(--u) * 5);
    font-weight: 600;
    z-index: 20;
}
.salto:focus { left: 0; }

/* ---------- barra ---------- */

/* La barra se queda arriba todo el rato: es la que deja saltar a 3D y a
   Marca sin volver al inicio, y la que tiene el WhatsApp siempre a mano. */
.barra-fija {
    position: sticky;
    top: 0;
    z-index: 10;
    background: color-mix(in srgb, var(--papel) 88%, transparent);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.barra-fija.compacta {
    border-bottom-color: var(--linea);
    box-shadow: var(--sombra-1);
}

.barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--u) * 4);
    padding: calc(var(--u) * 4) var(--margen);
    max-width: var(--ancho);
    margin: 0 auto;
    transition: padding 200ms var(--ease);
}
.compacta .barra { padding-top: calc(var(--u) * 2); padding-bottom: calc(var(--u) * 2); }

/* conmutador: las tres divisiones del estudio, con la actual marcada */
.divisiones-nav {
    display: flex;
    gap: 2px;
    padding: 3px;
    background: var(--papel-2);
    border-radius: 999px;
}
.divisiones-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 calc(var(--u) * 5);
    border-radius: 999px;
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--tinta-2);
    text-decoration: none;
    transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.divisiones-nav a:hover { background: color-mix(in srgb, var(--tinta) 8%, transparent); }
.divisiones-nav a[aria-current="page"] {
    background: var(--nav);
    color: #fff;
}
.divisiones-nav a[aria-current="page"]:hover { background: var(--nav); }

.marca-mag {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 3);
    text-decoration: none;
    min-height: 56px;
}
.marca-mag img { width: 40px; height: 40px; flex: none; }
.marca-mag span {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.35rem;
    font-variation-settings: 'wdth' 112;
    letter-spacing: -0.01em;
}

.barra-wa {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 2);
    min-height: 56px;
    padding: 0 calc(var(--u) * 5);
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--r);
    background: var(--blanco);
    box-shadow: var(--sombra-1);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    transition: transform 120ms var(--ease), box-shadow 120ms var(--ease);
}
.barra-wa svg { width: 22px; height: 22px; fill: var(--accion); flex: none; }
.barra-wa:active { transform: translateY(1px); }

/* ---------- letrero (hero) ---------- */

.letrero {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: calc(var(--u) * 6) var(--margen) calc(var(--u) * 14);
    display: grid;
    gap: calc(var(--u) * 10);
    align-items: center;
}

@media (min-width: 900px) {
    .letrero {
        grid-template-columns: 1.05fr 0.95fr;
        gap: calc(var(--u) * 14);
        padding-top: calc(var(--u) * 10);
    }
}

/* lleva al tablero: es navegar, así que va en tinta y deja el verde
   para los botones que abren WhatsApp */
.boton-hero { margin-top: calc(var(--u) * 8); }
.boton-hero svg { stroke: #fff; fill: none; }

.respaldo {
    margin: calc(var(--u) * 5) 0 0;
    color: var(--tinta-3);
    font-size: 1rem;
}
.respaldo b { color: var(--tinta-2); font-weight: 600; }

/* dos pantallas de verdad, tomadas de las demos que el cliente puede abrir
   en ese momento; sin marco de teléfono dibujado */
.muestra {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--u) * 4);
    align-items: start;
}
.muestra img {
    width: 100%;
    border: 1px solid var(--linea-fuerte);
    border-radius: 10px;
    background: var(--blanco);
    box-shadow: var(--sombra-3);
}
.muestra img:last-of-type { margin-top: calc(var(--u) * 10); }
.muestra figcaption {
    grid-column: 1 / -1;
    margin-top: calc(var(--u) * 4);
    color: var(--tinta-3);
    font-size: 0.95rem;
}

.letrero h1 {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    font-variation-settings: 'wdth' 106;
    font-size: clamp(2.15rem, 5.8vw, 3.9rem);
    line-height: 1.1;
    letter-spacing: -0.022em;
    max-width: 17ch;
    text-wrap: balance;
}

.letrero h1 b {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--marca);
    text-decoration-thickness: 0.085em;
    text-underline-offset: 0.08em;
    text-decoration-skip-ink: none;
}

.lema {
    margin: calc(var(--u) * 6) 0 0;
    font-size: clamp(1.15rem, 2.1vw, 1.5rem);
    color: var(--tinta-2);
    max-width: 34ch;
    line-height: 1.35;
}
.lema b { color: var(--tinta); font-weight: 600; }

/* ---------- tablero de giros ---------- */

.tablero {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 var(--margen) calc(var(--u) * 16);
}

.titulo {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    font-variation-settings: 'wdth' 110;
    font-size: clamp(1.8rem, 4vw, 2.9rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
}

.bajada {
    margin: calc(var(--u) * 2) 0 calc(var(--u) * 8);
    color: var(--tinta-2);
    font-size: 1.1rem;
    max-width: 52ch;
}

.rejilla {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: calc(var(--u) * 6);
}

.rejilla > li { position: relative; }

/* Cada ficha es un <details> nativo: abre con toque, con clic y con Enter.
   Con ratón, el guion de index.html la abre al pasar por encima; por eso el
   cuerpo se despliega en lámina absoluta y la rejilla nunca salta. */
.ficha {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--r);
    box-shadow: var(--sombra-1);
    transition: box-shadow 140ms var(--ease), border-color 140ms var(--ease);
}
.rejilla > li:hover .ficha,
.rejilla > li:focus-within .ficha { border-color: var(--linea-fuerte); box-shadow: var(--sombra-2); }

.cinta {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 3);
    min-height: 68px;
    padding: calc(var(--u) * 4) calc(var(--u) * 5);
    background: transparent;
    color: var(--tinta);
    border-radius: calc(var(--r) - 1px);
    font-family: var(--display);
    font-weight: 600;
    font-variation-settings: 'wdth' 106;
    font-size: 1.15rem;
    line-height: 1.2;
    letter-spacing: -0.008em;
}
.cinta::-webkit-details-marker { display: none; }
/* el color de familia vive aquí: identifica el giro sin pintar la caja */
.cinta > svg {
    width: 34px;
    height: 34px;
    flex: none;
    padding: 4px;
    border-radius: 50%;
    stroke: var(--color-familia, var(--tinta));
    background: color-mix(in srgb, var(--color-familia, var(--tinta)) 11%, transparent);
}
.nombre { flex: 1; }

.signo {
    flex: none;
    width: 26px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    color: var(--tinta-3);
}
.signo::after { content: "+"; }
.ficha[open] .signo::after { content: "–"; }

.ficha[open] > .cinta {
    border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
}

.cuerpo {
    border-top: 1px solid var(--linea);
    background: var(--blanco);
    border-radius: 0 0 calc(var(--r) - 1px) calc(var(--r) - 1px);
    overflow: hidden;
}

.retrato {
    margin: 0;
    background: var(--papel-2);
    border-bottom: 1px solid var(--linea);
    aspect-ratio: 5 / 4;
    overflow: hidden;
    display: grid;
    place-items: start center;
}
.retrato img {
    width: 74%;
    max-width: 230px;
    border: 1px solid var(--linea-fuerte);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    box-shadow: var(--sombra-2);
    margin-top: calc(var(--u) * 5);
}

.retrato.sin-foto { place-items: center; }
.retrato.sin-foto svg {
    width: 76px;
    height: 76px;
    stroke: var(--color-familia, var(--tinta-3));
    opacity: 0.55;
}

.pie-ficha {
    padding: calc(var(--u) * 4);
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 3);
}

.que {
    margin: 0;
    color: var(--tinta-2);
    font-size: 1rem;
    line-height: 1.4;
}

.abrir {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--u) * 2);
    min-height: 56px;
    background: var(--nav);
    color: #fff;
    border-radius: var(--r-chico);
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
}
.abrir:hover { background: var(--nav-hover); }
.abrir svg { width: 20px; height: 20px; stroke: #fff; flex: none; }

.sello {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    border: 1px dashed var(--linea-fuerte);
    border-radius: var(--r-chico);
    color: var(--tinta-3);
    font-size: 1rem;
    font-weight: 500;
}

/* sin demo todavía: se avisa en la cinta cerrada, para que nadie la abra
   esperando entrar */
.ficha.pendiente { background: transparent; box-shadow: none; }
.ficha.pendiente .cinta { color: var(--tinta-2); }
.ficha.pendiente .cinta > svg { opacity: 0.6; }
.ficha.pendiente .nombre::after {
    content: "en preparación";
    display: block;
    font-family: var(--cuerpo);
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.3;
    color: var(--tinta-3);
}

/* --- modo venta: lista compacta a la izquierda, pantalla grande a la derecha.
   Se arma con el guion de index.html solo cuando hay ratón y espacio; en
   celular y tablet el tablero se queda como acordeón. --- */

@media (hover: hover) and (min-width: 900px) {
    .tablero-caja.con-panel {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: calc(var(--u) * 10);
        align-items: start;
    }
    .con-panel .rejilla {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: calc(var(--u) * 3);
    }
    .con-panel .cinta { min-height: 62px; font-size: 1.05rem; }
    .con-panel .cinta > svg { width: 30px; height: 30px; }
    .con-panel .signo { display: none; }
    .con-panel .cuerpo { display: none; }

    .con-panel .ficha.activa {
        border-color: var(--nav);
        box-shadow: var(--sombra-2), inset 3px 0 0 var(--nav);
    }
    .con-panel .ficha.activa .cinta { color: var(--tinta); font-weight: 700; }

    .panel {
        position: sticky;
        top: 96px;            /* deja libre la barra fija */
        background: var(--papel-2);
        border: 1px solid var(--linea);
        border-radius: var(--r);
        padding: calc(var(--u) * 7);
        display: flex;
        flex-direction: column;
        gap: calc(var(--u) * 5);
    }
    .panel-giro {
        margin: 0;
        font-family: var(--display);
        font-weight: 700;
        font-variation-settings: 'wdth' 106;
        font-size: 1.35rem;
        letter-spacing: -0.01em;
    }
    .panel .retrato {
        background: transparent;
        border: 0;
        aspect-ratio: auto;
        place-items: center;
        padding: 0;
    }
    .panel .retrato img {
        width: 100%;
        max-width: 300px;
        margin: 0;
        border: 1px solid var(--linea-fuerte);
        border-radius: 10px;
        box-shadow: var(--sombra-3);
    }
    .panel .retrato.sin-foto svg { width: 96px; height: 96px; }
    .panel .pie-ficha { padding: 0; gap: calc(var(--u) * 4); }
    .panel .que { font-size: 1.08rem; color: var(--tinta-2); }
    .panel .abrir { min-height: 60px; font-size: 1.1rem; }
}

/* Con ratón: fichas compactas, las once a la vista, y la lámina encima. */
@media (hover: hover) and (min-width: 900px) {
    .rejilla { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }

    /* la ficha abierta se pinta encima de sus vecinas; :has cubre el caso de
       abrirla con clic o con teclado, cuando el ratón ya no está encima */
    .rejilla > li:hover,
    .rejilla > li:focus-within,
    .rejilla > li:has(details[open]) { z-index: 5; }

    .con-panel .ficha[open] { border-radius: var(--r); }
    .ficha[open] {
        border-radius: var(--r) var(--r) 0 0;
        border-color: var(--linea-fuerte);
        box-shadow: var(--sombra-2);
    }
    .ficha[open] .cuerpo {
        position: absolute;
        left: -1px;
        right: -1px;
        top: 100%;
        background: var(--blanco);
        border: 1px solid var(--linea-fuerte);
        border-top: 0;
        border-radius: 0 0 var(--r) var(--r);
        box-shadow: var(--sombra-3);
    }
}

.otro {
    margin: calc(var(--u) * 8) 0 0;
    font-size: 1.1rem;
}
.otro a {
    font-weight: 600;
    color: var(--enlace);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* ---------- franja de hechos ---------- */

.hechos {
    background: var(--tinta);
    color: var(--blanco);
    border-radius: var(--r);
    padding: calc(var(--u) * 12) 0;
    margin: 0 var(--margen) calc(var(--u) * 16);
}
.hechos ul {
    list-style: none;
    margin: 0 auto;
    padding: 0 clamp(24px, 3.2vw, 48px);
    max-width: var(--ancho);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: calc(var(--u) * 8);
}
.hechos li {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 2);
}
.hechos svg { width: 30px; height: 30px; stroke: var(--marca); }
.hechos b {
    font-family: var(--display);
    font-weight: 700;
    font-variation-settings: 'wdth' 110;
    font-size: 1.25rem;
    line-height: 1.15;
}
.hechos span { color: #ced5dd; font-size: 1rem; }

/* ---------- clientes ---------- */

.clientes {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 var(--margen) calc(var(--u) * 16);
}
.clientes ul {
    list-style: none;
    margin: calc(var(--u) * 8) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: calc(var(--u) * 8);
}
.clientes > ul > li {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--r);
    box-shadow: var(--sombra-1);
    padding: calc(var(--u) * 7);
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 5);
}

/* misma altura de logo para los tres, no mismo ancho: así ninguno pesa
   más que otro aunque sus proporciones sean distintas */
.clientes .logo {
    height: 44px;
    width: auto;
    max-width: 70%;
    object-fit: contain;
    object-position: left center;
}

/* lo que se construyó para cada cliente: iconos, sin párrafo */
.hecho {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: calc(var(--u) * 3);
}
.hecho li {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 3);
    font-size: 1rem;
    color: var(--tinta-2);
}
.hecho svg {
    width: 24px;
    height: 24px;
    flex: none;
    stroke: var(--accion);
}

.clientes .desde {
    margin: auto 0 0;
    padding-top: calc(var(--u) * 4);
    border-top: 1px solid var(--linea);
    color: var(--tinta-3);
    font-size: 0.98rem;
    font-variant-numeric: tabular-nums;
}
.clientes .desde a { color: var(--enlace); font-weight: 600; }

/* ---------- lo que construimos, cómo trabajamos, preguntas ---------- */

.construimos,
.pasos,
.preguntas {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 var(--margen) calc(var(--u) * 16);
}

.piezas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: calc(var(--u) * 7);
}
.piezas li {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 2);
    padding: calc(var(--u) * 6);
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--r);
}
.piezas .ic {
    width: 30px;
    height: 30px;
    stroke: var(--accion);
    margin-bottom: calc(var(--u) * 1);
}
.piezas b {
    font-family: var(--display);
    font-weight: 700;
    font-variation-settings: 'wdth' 110;
    font-size: 1.15rem;
    line-height: 1.2;
}
.piezas span { color: var(--tinta-2); font-size: 1rem; }

.pasos-lista {
    list-style: none;
    counter-reset: paso;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
    gap: calc(var(--u) * 8) calc(var(--u) * 14);
}
.pasos-lista li {
    counter-increment: paso;
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: calc(var(--u) * 4);
    align-items: start;
}
.pasos-lista li::before {
    content: counter(paso);
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.7rem;
    line-height: 52px;
    color: var(--enlace);
    text-align: center;
    border: 1px solid var(--linea-fuerte);
    border-radius: 50%;
    background: var(--blanco);
}
.pasos-lista b { display: block; font-size: 1.08rem; }
.pasos-lista span { color: var(--tinta-2); font-size: 1rem; }

.lista-preguntas {
    margin: calc(var(--u) * 8) 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    column-gap: calc(var(--u) * 14);
    row-gap: calc(var(--u) * 7);
}
.lista-preguntas > div {
    max-width: 52ch;
    padding-top: calc(var(--u) * 4);
    border-top: 1px solid var(--linea);
}
.lista-preguntas dt {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: calc(var(--u) * 2);
}
.lista-preguntas dd {
    margin: 0;
    color: var(--tinta-2);
    font-size: 1rem;
}

/* ---------- revisión ---------- */

.revision {
    background: var(--papel-2);
    border-radius: var(--r);
    padding: calc(var(--u) * 14) 0;
    margin: 0 var(--margen) calc(var(--u) * 16);
}
.revision-caja {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 clamp(24px, 3.2vw, 48px);
}
.revision > .revision-caja > p {
    margin: calc(var(--u) * 3) 0 calc(var(--u) * 8);
    color: var(--tinta-2);
    max-width: 48ch;
    font-size: 1.1rem;
}

.boton-wa {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 3);
    min-height: 64px;
    padding: 0 calc(var(--u) * 8);
    background: var(--accion);
    color: #fff;
    border: 1px solid transparent;
    border-radius: var(--r-chico);
    box-shadow: var(--sombra-2);
    font-family: var(--display);
    font-weight: 600;
    font-variation-settings: 'wdth' 106;
    font-size: 1.15rem;
    text-decoration: none;
    transition: transform 120ms var(--ease), box-shadow 120ms var(--ease), background-color 120ms var(--ease);
}
.boton-wa svg { width: 26px; height: 26px; fill: #fff; flex: none; }
.boton-wa:hover { background: var(--accion-hover); }

/* el del hero lleva al tablero: es navegar, así que va en tinta y deja el
   verde para los botones que abren WhatsApp */
.boton-wa.boton-hero { background: var(--nav); }
.boton-wa.boton-hero:hover { background: var(--nav-hover); }
.boton-wa:active { transform: translateY(1px); box-shadow: var(--sombra-1); }

.revision details { margin-top: calc(var(--u) * 6); }
.revision summary {
    cursor: pointer;
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    color: var(--enlace);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.revision-form {
    display: grid;
    gap: calc(var(--u) * 5);
    max-width: 560px;
    margin-top: calc(var(--u) * 5);
}
.revision-form label {
    display: grid;
    min-width: 0;
    gap: calc(var(--u) * 2);
    font-weight: 600;
    font-size: 1.02rem;
}
.revision-form input,
.revision-form select,
.revision-form textarea {
    font: inherit;
    font-weight: 400;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 56px;
    padding: calc(var(--u) * 3) calc(var(--u) * 4);
    border: 1px solid var(--borde-campo);
    background: var(--blanco);
    color: var(--tinta);
    border-radius: var(--r-chico);
}
.revision-form textarea { min-height: 96px; resize: vertical; }
.revision-form button { justify-self: start; cursor: pointer; }
.revision-nota { font-size: 0.95rem; color: var(--tinta-3); margin: 0; }

/* ---------- quiénes somos ---------- */

.somos {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 var(--margen) calc(var(--u) * 16);
}
.somos p { margin: calc(var(--u) * 3) 0 0; color: var(--tinta-2); max-width: 46ch; font-size: 1.1rem; }
.divisiones {
    list-style: none;
    margin: calc(var(--u) * 8) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: calc(var(--u) * 5);
}
.divisiones a {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 1);
    min-height: 56px;
    padding: calc(var(--u) * 5);
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--r);
    text-decoration: none;
}
.divisiones b {
    font-family: var(--display);
    font-weight: 700;
    font-variation-settings: 'wdth' 110;
    font-size: 1.15rem;
}
.divisiones span { color: var(--tinta-2); font-size: 0.98rem; }

/* ---------- pie ---------- */

.pie {
    background: var(--tinta);
    color: var(--blanco);
    padding: calc(var(--u) * 14) 0 calc(var(--u) * 24);
    margin-top: calc(var(--u) * 4);
}
.pie-caja {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 var(--margen);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: calc(var(--u) * 8);
}
.pie-marca img { width: 44px; height: 44px; }
.pie-nombre {
    margin: calc(var(--u) * 3) 0 0;
    font-family: var(--display);
    font-weight: 800;
    font-variation-settings: 'wdth' 112;
    font-size: 1.6rem;
}
.pie-lema { margin: calc(var(--u) * 2) 0 0; color: #ced5dd; font-size: 1rem; max-width: 34ch; }
.pie dl { margin: 0; display: grid; gap: calc(var(--u) * 4); }
.pie dt { color: #aab3bf; font-size: 0.95rem; }
.pie dd { margin: 0; font-size: 1.1rem; }
.pie a { color: var(--blanco); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pie-legal {
    max-width: var(--ancho);
    margin: calc(var(--u) * 10) auto 0;
    padding: 0 var(--margen);
    color: #aab3bf;
    font-size: 0.95rem;
}
.pie-legal a { color: #ced5dd; }
.punto { margin: 0 calc(var(--u) * 2); }

/* ---------- pantallas chicas ---------- */

@media (max-width: 720px) {
    body { font-size: 18px; }
    .marca-mag span { display: none; }
    .divisiones-nav a { padding: 0 calc(var(--u) * 4); font-size: 0.98rem; }
    .barra { gap: calc(var(--u) * 3); }
    /* el WhatsApp de la barra sobra: el botón flotante ya está siempre a mano */
    .barra-wa { display: none; }
    .barra-wa { padding: 0 calc(var(--u) * 4); }
    .rejilla { grid-template-columns: 1fr; gap: calc(var(--u) * 5); }
    .cinta { font-size: 1.08rem; padding: calc(var(--u) * 4); }
    .muestra img:last-of-type { display: none; }
    .muestra { grid-template-columns: minmax(0, 260px); justify-content: center; }
    .boton-hero { width: 100%; justify-content: center; }
    .clientes > ul > li { padding: calc(var(--u) * 5); }
    .clientes dl > div { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- movimiento ----------
   Todo lo de aquí abajo vive dentro de (prefers-reduced-motion: no-preference):
   si el sistema pide menos movimiento, la página se ve completa y quieta, sin
   nada escondido esperando una animación que no va a correr. */

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }

    /* una sola entrada, la del hero; el resto de la página ya está ahí */
    .entra > * {
        animation: sube 560ms var(--ease) backwards;
    }
    .letrero-texto.entra > *:nth-child(1) { animation-delay: 40ms; }
    .letrero-texto.entra > *:nth-child(2) { animation-delay: 110ms; }
    .letrero-texto.entra > *:nth-child(3) { animation-delay: 180ms; }
    .letrero-texto.entra > *:nth-child(4) { animation-delay: 250ms; }
    .muestra.entra > *:nth-child(1) { animation-delay: 160ms; }
    .muestra.entra > *:nth-child(2) { animation-delay: 260ms; }
    .muestra.entra > *:nth-child(3) { animation-delay: 360ms; }

    @keyframes sube {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: none; }
    }

    /* al cambiar de giro, la pantalla nueva entra en vez de aparecer de golpe */
    .panel.cambia > * { animation: panel-entra 240ms var(--ease) backwards; }
    .panel.cambia > *:nth-child(2) { animation-delay: 40ms; }
    .panel.cambia > *:nth-child(3) { animation-delay: 70ms; }

    @keyframes panel-entra {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: none; }
    }
}

html { scroll-padding-top: 88px; }

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}