/* Estudio MagStudio · hoja compartida del inicio, 3D y Medios · 22-sep-2026
   GENERADA por herramientas/hacer_estudio_css.py: no se edita a mano.

   Pedido de Raúl: que el sitio entero se sienta uno solo, con el diseño de la
   portada de Tech, sin perder lo propio de cada división.

   De dónde sale: la barra, el pie, los tokens y los bloques comunes están
   COPIADOS TAL CUAL de tech/portada.css. Si cambian allá, se vuelve a correr
   el script: son la costura que hace que no se sienta el salto entre páginas.

   Hallmark pide barra y pie distintos entre páginas; aquí se desoye a
   propósito, porque lo que se busca es justo lo contrario.

   Lo que cambia por división es una sola variable, --division, el acento:
     Tech    #45a059  el verde de su marca
     3D      #8f6a1f  el dorado de la lámpara del portafolio, oscurecido
     Medios  #1665ad  azul
   Va en el subrayado del titular, los símbolos y las rayas de sección. El
   verde de acción (#2f7a41) es igual en todas: es WhatsApp y contacto.
   Contraste contra el papel #f6f7f9, medido: 3D 4.6:1, Medios 5.6:1. Los dos
   pasan AA para texto (4.5), así que sirven también en letra, no solo en rayas. */

: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 */


    --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; }

.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;
}

/* ---------- 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); }

/* ---------- 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); }

/* ---------- el acento de cada división ---------- */

body { --division: var(--marca); }
body.d-3d { --division: #8f6a1f; }
body.d-medios { --division: #1665ad; }
.letrero h1 b { text-decoration-color: var(--division); }

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

/* ---------- la imagen del hero: trabajo de verdad, sin marco dibujado ---------- */

.pieza-hero { margin: 0; display: grid; justify-items: center; }
.pieza-hero img { width: min(100%, 520px); height: auto; }
.pieza-hero figcaption { margin-top: calc(var(--u) * 3); color: var(--tinta-3); font-size: 0.95rem; text-align: center; }
.gato-hero img { width: min(78%, 380px); }

/* ---------- las tres divisiones, en filas y no en tarjetas ----------
   Cada fila: a la izquierda quién es, a la derecha qué hace. Filas para
   escanear; tres tarjetas iguales con icono arriba, no. */

.divisiones-filas { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tinta); }
.division-fila {
    display: grid;
    gap: calc(var(--u) * 6);
    padding: calc(var(--u) * 10) 0;
    border-bottom: 1px solid var(--linea-fuerte);
}
@media (min-width: 900px) {
    .division-fila { grid-template-columns: 0.85fr 1.15fr; gap: calc(var(--u) * 14); }
}
.division-fila h3 {
    margin: 0;
    font-family: var(--display);
    font-weight: 800;
    font-variation-settings: 'wdth' 112;
    font-size: clamp(2rem, 4.4vw, 3rem);
    line-height: 1;
    letter-spacing: -0.02em;
}
.division-fila h3::after {
    content: "";
    display: block;
    width: 56px;
    height: 5px;
    margin-top: calc(var(--u) * 4);
    background: var(--acento-fila, var(--marca));
    border-radius: 3px;
}
.division-fila.f-3d { --acento-fila: #8f6a1f; }
.division-fila.f-medios { --acento-fila: #1665ad; }
.division-fila > div > p { margin: calc(var(--u) * 4) 0 0; color: var(--tinta-2); font-size: 1.1rem; max-width: 34ch; }
.ir {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 2);
    min-height: 56px;
    margin-top: calc(var(--u) * 4);
    font-weight: 600;
    color: var(--enlace);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}
.ir svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.2; flex: none; }

/* lista de servicios: filas con su símbolo. En la fila de división caben
   dos por renglón; suelta en su propia página, dos anchas, para que ninguna
   descripción se parta en cuatro renglones. */
.servicios {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: calc(var(--u) * 6) calc(var(--u) * 8);
}
.seccion > .servicios { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: calc(var(--u) * 7) calc(var(--u) * 14); }
.seccion > .servicios b { font-size: 1.15rem; }
.servicios li { display: grid; grid-template-columns: 30px 1fr; gap: calc(var(--u) * 3); align-items: start; }
.servicios .ic { width: 26px; height: 26px; stroke: var(--division); margin-top: 2px; }
.division-fila .servicios .ic { stroke: var(--acento-fila, var(--marca)); }
.servicios b { display: block; font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.servicios span { display: block; color: var(--tinta-2); font-size: 1rem; line-height: 1.45; margin-top: 2px; }

/* ---------- tecnología de vanguardia ---------- */

.vanguardia-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
    column-gap: calc(var(--u) * 14);
    border-top: 2px solid var(--tinta);
}
.vanguardia-lista li {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: calc(var(--u) * 4);
    padding: calc(var(--u) * 6) 0;
    border-bottom: 1px solid var(--linea);
}
.vanguardia-lista .ic { width: 32px; height: 32px; stroke: var(--division); margin-top: 2px; }
.vanguardia-lista b {
    display: block;
    font-family: var(--display);
    font-weight: 700;
    font-variation-settings: 'wdth' 110;
    font-size: 1.2rem;
    line-height: 1.2;
}
.vanguardia-lista span { display: block; margin-top: calc(var(--u) * 2); color: var(--tinta-2); font-size: 1rem; }

/* ---------- cuando se juntan las tres: la única superficie oscura ---------- */

.juntas {
    background: var(--tinta);
    color: var(--blanco);
    border-radius: var(--r);
    margin: 0 var(--margen) calc(var(--u) * 16);
    padding: calc(var(--u) * 12) 0;
}
.juntas-caja {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 clamp(24px, 3.2vw, 48px);
    display: grid;
    gap: calc(var(--u) * 8);
    align-items: center;
}
@media (min-width: 900px) { .juntas-caja { grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 14); } }
.juntas .titulo { color: var(--blanco); }
.juntas-caja > div > p { margin: calc(var(--u) * 4) 0 0; color: #ced5dd; font-size: 1.1rem; max-width: 44ch; }
.juntas ol { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 4); }
.juntas li {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: calc(var(--u) * 4);
    padding-bottom: calc(var(--u) * 4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.juntas li b { font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 112; font-size: 1.15rem; }
.juntas li span { color: #ced5dd; }

/* ---------- el trabajo de verdad ---------- */

.video {
    margin: calc(var(--u) * 8) 0 0;
    aspect-ratio: 16 / 9;
    border-radius: var(--r);
    overflow: hidden;
    border: 1px solid var(--linea);
    background: var(--tinta);
}
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.redes { margin: calc(var(--u) * 5) 0 0; color: var(--tinta-2); }
.redes a { color: var(--enlace); font-weight: 600; text-underline-offset: 4px; }

/* ---------- el trabajo, sin recuadros ----------
   Nada de tarjetas blancas con borde y sombra: es el patrón más gastado de la
   web hecha en serie. El dibujo va suelto sobre el papel, como en un libro. */

/* portada de Medios: las tres fundas en abanico, encimadas. Todo en % del
   ancho de la columna: con alturas fijas la tercera se salía de la pantalla
   entre 900 y 1200 px de ancho. */
.abanico { margin: 0; position: relative; display: flex; justify-content: center; align-items: flex-end; padding: calc(var(--u) * 4) 0 calc(var(--u) * 11); }
.abanico img { width: 33%; height: auto; margin: 0 -2.5%; filter: drop-shadow(0 18px 24px rgba(15, 20, 25, 0.22)); }
.abanico img:nth-child(1) { transform: rotate(-9deg) translateY(4%); z-index: 1; }
.abanico img:nth-child(2) { transform: translateY(-3%); z-index: 3; }
.abanico img:nth-child(3) { transform: rotate(9deg) translateY(4%); z-index: 2; }
.abanico figcaption { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; color: var(--tinta-3); font-size: 0.95rem; }

/* pinturas: una grande y dos chicas, como la doble página de un libro. Las
   columnas van 2.2 a 1 para que la grande mida lo mismo que las dos chicas
   apiladas; lo que falte o sobre lo absorbe la grande (object-fit), así no
   queda hueco debajo de ella. */
.pinturas { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 6); }
@media (min-width: 900px) {
    .pinturas { grid-template-columns: 2.2fr 1fr; column-gap: calc(var(--u) * 6); }
    .pinturas li:first-child { grid-row: span 2; display: flex; }
    .pinturas li:first-child figure { display: flex; flex-direction: column; flex: 1; }
    .pinturas li:first-child img { flex: 1 1 0; min-height: 0; height: 100%; object-fit: cover; }
}
.pinturas figure { margin: 0; }
.pinturas img { width: 100%; height: auto; border-radius: var(--r-chico); display: block; }
.pinturas figcaption { margin-top: calc(var(--u) * 2); color: var(--tinta-2); font-size: 0.98rem; }
.pinturas figcaption b { color: var(--tinta); font-weight: 600; }

/* el reparto: todos parados sobre la misma línea de piso, un poco encimados.
   Cada figura trae su altura en --h (px a tamaño completo) y --k la escala
   con la pantalla, para que la fila nunca se desborde ni se deformen. */
.reparto { margin: calc(var(--u) * 16) 0 0; --k: 1; }
.reparto ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-bottom: 2px solid var(--tinta);
}
.reparto li { flex: 0 0 auto; margin: 0 -10px; }
.reparto img { display: block; width: auto; height: calc(var(--h) * var(--k) * 1px); position: relative; z-index: 1; }
.reparto figcaption { margin-top: calc(var(--u) * 3); color: var(--tinta-2); font-size: 0.98rem; }
@media (max-width: 1100px) { .reparto { --k: 0.8; } }

/* el sistema de íconos, en tira: ellos ya son color y forma */
.iconos-material { margin: calc(var(--u) * 16) 0 0; }
.iconos-material ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: calc(var(--u) * 2); }
.iconos-material img { width: 100%; height: auto; display: block; }
.iconos-material p { margin: calc(var(--u) * 3) 0 0; color: var(--tinta-2); font-size: 0.98rem; }
.iconos-material p b { color: var(--tinta); font-weight: 600; }

/* ---------- protección de los diseños ----------
   No se puede impedir una captura de pantalla. Esto quita lo fácil: clic
   derecho, arrastrar la imagen y el «guardar imagen» del celular. Solo en los
   diseños; el resto de la página se usa normal. Las imágenes van además a
   tamaño de pantalla y con firma (herramientas/protege_imagenes.py). */
.protegida { position: relative; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.protegida img { -webkit-user-drag: none; user-drag: none; pointer-events: none; -webkit-touch-callout: none; }
@media print { .protegida img { visibility: hidden; } }

/* el gato es negro: en el pie oscuro se volvía invisible */
.pie-marca img { filter: invert(1); }

/* ---------- 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; }
    .boton-hero, .revision .boton-wa { width: 100%; justify-content: center; }
    .clientes > ul > li { padding: calc(var(--u) * 5); }
    .juntas li { grid-template-columns: 1fr; gap: calc(var(--u) * 1); }
    .abanico { max-width: 420px; margin: 0 auto; }
    /* en el celular el reparto va en dos renglones, cada uno con su piso */
    .reparto { --k: 0.5; }
    .reparto ul { flex-wrap: wrap; row-gap: calc(var(--u) * 6); border-bottom: 0; }
    .reparto li { margin: 0 4px; border-bottom: 2px solid var(--tinta); }
    .iconos-material ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 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; }
    }

}

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

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