/* =====================================================================
   HOME (Inicio) — Aberturas Giacomazzi
   Depende de los tokens definidos en externo.css (:root)

   Mobile-first: la base es el teléfono y los @media suman desde ahí.

   El orden de la página es el mensaje:
     hero → nosotros → conector → catálogo estándar → línea adapta →
     proyectos a medida

   Primero quiénes somos y, en un renglón cada una, las tres líneas
   (conector). Después el recorrido: lo ya resuelto que se cotiza solo,
   lo que se ajusta por encargo y, por último, el proyecto desde cero.
   Ningún camino le pide elegir antes de tener con qué elegir, y "a
   medida" no queda en media tarjeta: cierra con la franja entera.

   ── El ritmo de bandas ────────────────────────────────────────────
   La página alterna claro y oscuro, y ninguna banda es blanca por
   descarte. De arriba a abajo:

     hero       foto oscura
     nosotros   blanco              ← la presentación, en voz baja
     conector   VERDE lleno         ← el golpe de color de la marca
     catálogo   blanco              ← las fotos mandan, ver abajo
     adapta     verde profundo      ← rima con el conector, más oscuro
     medida     carbón + verde      ← cierra pesado

   Adapta y medida son las dos bandas oscuras seguidas, así que medida
   entra con un filete verde de 5px: sin él las dos se leían como una
   sola franja larga.

   El color entra en el conector y no antes: quiénes somos se cuenta en
   limpio y el verde aparece cuando la página empieza a ofrecer algo.
   El catálogo vuelve al blanco a propósito: las fotos de las
   categorías son el contenido de esa sección y cualquier tinte de
   fondo les compite.

   ── La textura, en singular ───────────────────────────────────────
   La firma de la marca es la cota del plano de taller (.g-cota) y su
   fondo es la grilla milimetrada (.g-plano, en externo.css). Es la
   única textura de la página: la llevan todas las bandas menos las dos
   que tienen foto a sangre —hero y medida—, siempre igual y siempre
   de borde a borde, que vive en externo.css junto con la clase y
   es la misma en todas las vistas. Nada más se suma encima: ni
   resplandores, ni tramas anidadas, ni filetes de color sobre las
   tarjetas.
   ===================================================================== */

/* ── Primitivas ────────────────────────────────────────────────────── */
/* .home-cota, .home-eyebrow, .home-title, .home-btn, .home-link y la
   aparición al scrollear ([data-reveal]) viven en externo.css: también
   las usa Nosotros y tener dos copias garantizaba que se separaran.
   Allá tienen doble nombre (.g-* nuevo, .home-* alias). */

/* Foco de los controles propios de esta página */
.home-rail-arrow:focus-visible,
.home-cat:focus-visible,
.home-linea:focus-visible,
.home-indice-row:focus-visible,
.rail-dot:focus-visible {
    outline: 2px solid var(--external-primary);
    outline-offset: 3px;
}

/* Sobre la franja verde el verde no se ve: el foco pasa a blanco */
.home-indice-row:focus-visible {
    outline-color: var(--external-white);
    outline-offset: -2px;
}

/* Las tarjetas del conector son blancas pero el aire alrededor es verde,
   así que el anillo de foco cae sobre el verde y tiene que ser blanco. */
.home-linea:focus-visible {
    outline-color: var(--external-white);
}

/* ── HERO ──────────────────────────────────────────────────────────── */
.home-hero {
    position: relative;
    display: flex;
    align-items: center;
    /* En teléfono el alto sale del ANCHO y no del alto de la pantalla:
       Safari en iPhone le descuenta sus barras a svh y también a lvh, y
       el hero quedaba ~110px más bajo que en DevTools, que no las simula.
       El ancho es el mismo en los dos. El techo de 92svh es para el
       teléfono en horizontal, donde 155vw sería más alto que la ventana. */
    min-height: clamp(400px, 156vw, 92svh);
    overflow: hidden;
    /* Cancela el padding-top de .external-main (1rem hasta 767.98px) */
    margin-top: -1rem;
}

.home-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.home-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Más denso abajo: es donde vive el texto en mobile */
    background: linear-gradient(to top,
            rgba(15, 17, 19, 0.64) 0%,
            rgba(15, 17, 19, 0.44) 42%,
            rgba(15, 17, 19, 0.14) 100%);
}

.home-hero-inner {
    position: relative;
    z-index: 2;
    padding-top: 3.5rem;
    /* El fondo del hero ya no es aire: abajo vive la señal de scroll, así
       que el texto se corre para arriba lo que ella ocupa (~90px). En
       teléfono el hero no cambia de alto por esto: manda el min-height y
       el contenido sobra, así que lo único que se mueve es el bloque. */
    padding-bottom: 4.25rem;
}

.home-hero-title {
    font-family: var(--font-display);
    font-size: var(--fs-hero);
    font-weight: 900;
    line-height: 1.03;
    letter-spacing: -0.035em;
    color: var(--external-white);
    margin: 0 0 1.1rem;
    max-width: 15ch;
}

.home-hero-cota {
    color: var(--external-primary-soft);
    max-width: 26rem;
    margin-bottom: 1.1rem;
}

.home-hero-text {
    font-size: var(--fs-body);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    max-width: 46ch;
    margin: 0 0 1.75rem;
}

/* ── Señal de scroll del hero ──────────────────────────────────────────
   Al pie del hero: rótulo y, debajo, una línea vertical corta por la que
   baja un destello en loop. El movimiento va en la dirección en la que
   queremos que vaya el dedo — no un ratón dibujado ni una flecha que
   rebota, que es lo que hace todo el mundo y no dice hacia dónde.

   La línea se desvanece hacia abajo (mask): termina en el borde del hero
   y apunta a lo que sigue en vez de cerrarse sobre sí misma.

   Desaparece apenas se scrollea: ya cumplió, y quedarse encima del hero
   mientras se lee el resto es ruido. El disparador es .is-scrolled, la
   clase que layout.js ya le pone al header (scrollY > 4) para la sombra
   del navbar; header y main son hermanos, así que alcanza con el
   selector — no hay JS nuevo para esto. */
.home-hero-cue-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.15rem;
    z-index: 3;
    /* Sólo el link recibe el toque: el wrap ocupa todo el ancho del hero
       y el .container de adentro es el que alinea. */
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s;
}

.home-hero-cue {
    pointer-events: auto;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.72);
    transition: color 0.2s ease;
}

.home-hero-cue:hover,
.home-hero-cue:focus-visible {
    color: var(--external-white);
}

.home-hero-cue:focus-visible {
    outline: 2px solid var(--external-white);
    outline-offset: 6px;
    border-radius: 2px;
}

.home-hero-cue-label {
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
}

.home-hero-cue-track {
    position: relative;
    display: block;
    width: 2px;
    height: 44px;
    background: rgba(255, 255, 255, 0.2);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

/* El destello: una porción de la línea, con degradé para que tenga
   cabeza y cola, bajando de punta a punta. */
.home-hero-cue-beam {
    position: absolute;
    inset: 0 0 auto;
    height: 45%;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0),
            var(--external-white));
    animation: home-cue-beam 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes home-cue-beam {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        transform: translateY(222%);
        opacity: 0;
    }
}

/* Apagado al scrollear. La visibilidad cambia recién al terminar el
   fundido (transition-delay), así que durante la salida se ve, y una vez
   afuera no queda un link invisible en el orden de tabulación. El
   destello se pausa: nada animándose en una capa que no se ve. */
.external-header.is-scrolled ~ .external-main .home-hero-cue-wrap {
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    transition-delay: 0s, 0s, 0.4s;
}

.external-header.is-scrolled ~ .external-main .home-hero-cue-beam {
    animation-play-state: paused;
}

/* Los anclajes de esta página —la señal del hero y la tercera tarjeta del
   conector, que va a #proyectos— se recorren, no saltan. Va en home.css y
   no en externo.css a propósito: es la única página con anclajes largos y
   así no le cambia el comportamiento a las demás. */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Con reduced-motion la señal se queda, pero quieta: el rótulo y la línea
   siguen diciendo que abajo hay más, sin nada que se mueva. */
@media (prefers-reduced-motion: reduce) {
    .home-hero-cue-wrap {
        transition: none;
    }

    .home-hero-cue-track {
        background: rgba(255, 255, 255, 0.42);
    }

    .home-hero-cue-beam {
        display: none;
    }
}

/* Teléfono: composición centrada con la marca arriba del título. Va en un
   max-width y no en el flujo mobile-first para que tablet y escritorio no
   necesiten deshacer nada. El párrafo de apoyo se oculta: acá hablan la
   marca y el título. */
@media (max-width: 767.98px) {
    /* Logo y bajada forman un solo bloque del mismo ancho. */
    .home-hero-inner {
        text-align: center;
        --marca-w: min(70vw, 16.5rem);
        --aura: 205, 208, 210;
    }

    /* Velo más liviano que el general: el logo es gris oscuro y sobre
       una foto muy apagada se pierde. */
    .home-hero-scrim {
        background: linear-gradient(to top,
                rgba(15, 17, 19, 0.42) 0%,
                rgba(15, 17, 19, 0.26) 42%,
                rgba(15, 17, 19, 0.06) 100%);
    }

    /* Aura gris clara detrás del logo: despega el gris de la marca del
       vidrio oscuro. Es un fondo radial pintado detrás del PNG
       transparente, como el de la bajada, y no un filter: drop-shadow:
       Safari en iPhone dibujaba el filtro como un recuadro hasta el
       primer toque en la pantalla. El margen de abajo separa la bajada
       para que no se lea como parte del logo. */
    .home-hero-marca {
        display: block;
        width: var(--marca-w);
        height: auto;
        margin: 0 auto 1.2rem;
        background: radial-gradient(closest-side,
                rgba(var(--aura), 0.7),
                rgba(var(--aura), 0.35) 60%,
                rgba(var(--aura), 0));
    }

    /* La bajada es parte de la marca: mismo gris que el logo, mayúsculas
       espaciadas como la cota y el mismo ancho que el logo. Su aura es un
       solo fondo que se abre del centro hacia los costados: un
       text-shadow pone un halo por letra, y con el tracking se pisaban
       entre sí hasta quedar todo blanco. */
    .home-hero-title {
        width: var(--marca-w);
        max-width: none;
        margin: 0 auto;
        padding-block: 0.7rem;
        background: radial-gradient(closest-side,
                rgba(var(--aura), 0.6),
                rgba(var(--aura), 0.3) 55%,
                rgba(var(--aura), 0));
        font-size: calc(var(--marca-w) * 0.0475);
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.16em;
        /* El tracking también se suma después de la última letra: el
           sangrado del mismo valor lo compensa y el texto queda centrado. */
        text-indent: 0.16em;
        text-transform: uppercase;
        white-space: nowrap;
        color: #3c3d3d;
    }

    .home-hero-text {
        display: none;
    }

    .home-hero-cue-wrap .container {
        display: flex;
        justify-content: center;
    }

    .home-hero-cue {
        align-items: center;
    }
}

.home-nosotros {
    position: relative;
    overflow: hidden;
    background: var(--g-verde-tinte);
    color: var(--external-secondary);
    padding: 3.5rem 0;
}

.home-nosotros-inner {
    position: relative;
    z-index: 1;
}

.home-nosotros-lead {
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--external-secondary);
    font-weight: 500;
    max-width: 46ch;
    margin: 0 0 0.75rem;
}

.home-nosotros-figure {
    display: none;
    margin: 0;
}

.home-nosotros-plate {
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-nosotros-logo {
    display: block;
    width: 100%;
    max-width: 21rem;
    height: auto;
    /* contain y no cover: es un logo, recortarlo sería romperlo */
    object-fit: contain;
}

/* ── CONECTOR: las tres líneas ─────────────────────────────────────── */
/* La franja verde de la marca. Es el golpe de color de la página y cae
   donde tiene que caer: en el renglón donde se cuenta cómo trabajamos,
   entre la presentación en blanco y el catálogo, también blanco.

   El contenido de adentro no se tiñe: el acordeón y las tres tarjetas
   siguen siendo blancos sobre el verde. Es lo mismo que hace la placa de
   nosotros al revés, y es lo que mantiene legible un texto largo dentro
   de una banda de color. */
/* El verde en sí lo pone .g-banda-verde (externo.css): es la misma banda
   que cierra Nosotros y las fichas. */
.home-lineas {
    position: relative;
    overflow: hidden;
    padding: 3.5rem 0;
}

.home-lineas-inner {
    position: relative;
    z-index: 1;
}

.home-lineas-title {
    margin-top: 0.15rem;
}

.home-lineas-intro {
    font-size: var(--fs-body);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    max-width: 46ch;
    margin: 1rem 0 0;
}

/* ── Acordeón (teléfono) ───────────────────────────────────────────────
   Hasta 768px el conector es un acordeón y no tres tarjetas apiladas:
   apiladas se llevaban casi pantalla y media de scroll para decir tres
   cosas, y había que bajar hasta el final para saber cuántos caminos
   había. Plegado, el recorrido entero entra de un vistazo.

   Es una sola pieza continua con filetes entre filas, no tres cajas
   sueltas: son tres partes de una misma respuesta. Y no se parece ni al
   riel de tarjetas del catálogo (justo abajo) ni al índice de adapta —
   cada franja de la página sigue teniendo su propia forma.

   El mecanismo lo pone layout.js ([data-acordeon]); acá va cómo se ve y
   la transición de alto que ese script anima. */
.home-lineas-acordeon {
    /* La sangría del panel arranca donde arranca el nombre, así que el
       margen se mide una sola vez y lo usan las dos. */
    --lin-pad: 1.1rem;
    --lin-gap: 0.85rem;

    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    background: var(--external-white);
    border: 1px solid rgba(40, 116, 82, 0.12);
    border-radius: 4px;
    /* Recorta los paneles plegados y las esquinas de la primera fila */
    overflow: hidden;
}

.home-lin+.home-lin {
    border-top: 1px solid rgba(40, 116, 82, 0.12);
}

/* La fila abierta se tiñe apenas: con tres renglones iguales hace falta
   algo que diga cuál es el que estás leyendo. */
.home-lin.open {
    background: rgba(40, 116, 82, 0.04);
}

.home-lin-head {
    display: flex;
    align-items: center;
    gap: var(--lin-gap);
    width: 100%;
    padding: 0.95rem var(--lin-pad);
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.home-lin-head:focus-visible {
    outline: 2px solid var(--external-primary);
    outline-offset: -3px;
}

.home-lin-titles {
    flex: 1 1 auto;
    min-width: 0;
}

.home-lin-name {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-sub);
    font-weight: 700;
    line-height: 1.2;
    color: var(--external-secondary);
}

/* Lo que la fila dice estando cerrada. Al abrirla se va: abajo está el
   texto completo y el resumen pasa a ser una repetición.

   No alcanza con apagarlo —invisible seguía ocupando su renglón y dejaba
   un hueco entre el nombre y el texto—, así que también se pliega. El
   max-height es el tope de dos renglones: de 'auto' no se puede animar y
   el resumen nunca pasa de ahí. */
.home-lin-resumen {
    display: block;
    margin-top: 0.15rem;
    max-height: 2.5rem;
    overflow: hidden;
    font-size: var(--fs-small);
    line-height: 1.35;
    color: rgba(63, 63, 63, 0.72);
    transition: opacity 0.2s ease, max-height 0.3s ease, margin-top 0.3s ease;
}

.home-lin.open .home-lin-resumen {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
}

/* La flecha va sola, sin pastilla: el área que se toca es el renglón
   entero, así que el círculo no agrandaba el blanco —sólo dibujaba un
   botón donde no hay uno. Lo que dice que la fila está abierta es el
   giro. */
.home-lin-chevron {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--external-primary);
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.home-lin-chevron svg {
    width: 1.2rem;
    height: 1.2rem;
    stroke-width: 2;
}

.home-lin.open .home-lin-chevron {
    transform: rotate(180deg);
}

/* El alto lo maneja layout.js sobre scrollHeight y lo deja en 'auto' al
   terminar; acá va sólo la transición que anima ese cambio y el overflow
   que recorta el contenido mientras el alto es menor al real. */
.home-lin-panel {
    height: 0;
    overflow: hidden;
    transition: height 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.home-lin-panel-in {
    /* Alineado con el nombre: el texto es la continuación de ese
       renglón. */
    padding: 0 var(--lin-pad) 1.15rem;
}

.home-lin-text {
    font-size: var(--fs-small);
    line-height: 1.6;
    color: var(--external-secondary);
    margin: 0;
}

.home-lin-go {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
    color: var(--external-primary);
    font-family: var(--font-display);
    font-size: var(--fs-small);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.home-lin-go svg {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
}

.home-lin-go:focus-visible {
    outline: 2px solid var(--external-primary);
    outline-offset: 3px;
}

/* ── Tarjetas (768px para arriba) ──────────────────────────────────────
   Un renglón por línea, y cada tarjeta es el link a su destino: las dos
   primeras al índice de su línea, la tercera al ancla de la franja de
   proyectos. Es el guion hablado del recorrido que viene abajo, con el
   atajo puesto donde se lo nombra.

   En teléfono no se muestran —manda el acordeón de arriba— y el display
   real se lo da el @media de 768px. */
.home-lineas-list {
    display: none;
    list-style: none;
    margin: 2.25rem 0 0;
    padding: 0;
    gap: 1rem;
}

.home-linea {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem 1.35rem 1.4rem;
    border-radius: 4px;
    background: var(--external-white);
    /* Sobre el verde la tarjeta blanca ya se recorta sola: el borde es
       apenas la definición del canto. El filete verde de 3px que llevaba
       arriba se fue —cortaba la tarjeta en dos justo en el borde
       superior y las tres se leían como recortadas. Lo que dice que son
       una de tres es que son iguales, no que tengan una marca encima. */
    border: 1px solid rgba(40, 116, 82, 0.1);
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease,
                border-color 0.25s ease;
}

.home-linea-name {
    font-family: var(--font-display);
    font-size: var(--fs-sub);
    font-weight: 700;
    line-height: 1.2;
    color: var(--external-secondary);
    margin: 0 0 0.35rem;
}

.home-linea-text {
    /* Empuja el pie hacia abajo: con tres textos de largo distinto, los
       renglones de acción quedan igual alineados en las tres tarjetas. */
    flex: 1 1 auto;
    font-size: var(--fs-small);
    line-height: 1.6;
    color: var(--external-secondary);
    max-width: 54ch;
    margin: 0;
}

/* El pie es la señal de que la tarjeta se toca. Va separado por una
   línea y ocupa el ancho completo: un link suelto al final del párrafo
   se leía como parte del texto. */
.home-linea-go {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(40, 116, 82, 0.16);
    color: var(--external-primary);
    font-family: var(--font-display);
    font-size: var(--fs-small);
    font-weight: 700;
    line-height: 1.2;
}

.home-linea-go svg {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

/* ── CATÁLOGO ESTÁNDAR ─────────────────────────────────────────────── */
/* Banda blanca por una razón: las fotos de las categorías son el
   contenido acá y un fondo teñido les compite. La trama entra igual que
   en el resto de la página y se apaga antes de llegar al riel.

   Ya no lleva el filete verde de 5px: arriba quedó la franja verde
   entera, así que el filete se fundía con ella. Lo que separa las dos
   bandas ahora es el corte de color. */
.home-catalogo {
    position: relative;
    overflow: hidden;
    background: var(--g-verde-tinte);
    padding: 3.5rem 0;
}

.home-catalogo .container {
    position: relative;
    z-index: 1;
}

.home-catalogo-head {
    margin-bottom: 1.75rem;
}

.home-catalogo-intro {
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--external-secondary);
    max-width: 52ch;
    margin: 1rem 0 0;
}

/* Riel de categorías — scroll nativo con snap.
   El gesto es el swipe; las flechas son un extra de desktop. */
.home-rail-wrap {
    --rail-pad: 0.75rem;
    margin-top: 1.75rem;
}

.home-rail {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--rail-pad);
    /* Sangra hasta el borde de la pantalla: en mobile las tarjetas
       llegan al filo y se lee que hay más al costado. */
    margin: 0 calc(var(--rail-pad) * -1);
    padding: 0.5rem var(--rail-pad) 0.75rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.home-rail::-webkit-scrollbar {
    display: none;
}

.home-rail-item {
    flex: 0 0 72%;
    scroll-snap-align: start;
}

.home-cat {
    display: block;
    position: relative;
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    border-bottom: 3px solid var(--external-primary);
    background: linear-gradient(135deg, var(--external-primary) 0%, var(--external-primary-soft) 100%);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.home-cat-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 4:3 y no 16:9: una abertura es un objeto vertical y el panorámico
       la recortaba justo donde se entiende. */
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.home-cat-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.home-cat-icon {
    color: rgba(255, 255, 255, 0.92);
}

.home-cat-icon svg {
    width: 2.4rem;
    height: 2.4rem;
}

.home-cat-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.18) 48%,
            transparent 72%);
}

.home-cat-label {
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    bottom: 0.75rem;
    z-index: 2;
    color: var(--external-white);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-body);
    line-height: 1.25;
}

/* Controles del riel */
/* En teléfono los puntos van centrados y el link "Ver los productos"
   baja a su propio renglón (ver .home-rail-ver). Desde 768px pasa a la
   misma fila: ver el bloque de esa media query. */
.home-rail-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin-top: 1rem;
    min-height: 12px;
}

.home-rail-arrow {
    /* En mobile no aparecen: el dedo ya hace el trabajo y ocupaban
       espacio para repetir un gesto que el usuario tiene a mano. */
    display: none;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: var(--external-white);
    color: var(--external-primary);
    cursor: pointer;
    transition: color 0.2s ease, box-shadow 0.2s ease,
                opacity 0.2s ease, transform 0.2s ease;
}

.home-rail-arrow:hover:not(:disabled) {
    color: var(--external-primary-dark);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.12);
}

.home-rail-arrow:disabled {
    opacity: 0.32;
    cursor: default;
}

.home-rail-arrow[hidden] {
    display: none;
}

.home-rail-arrow svg {
    width: 1.15rem;
    height: 1.15rem;
}

.home-rail-dots {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.home-rail-dots[hidden] {
    display: none;
}

.rail-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--external-secondary-soft);
    opacity: 0.5;
    cursor: pointer;
    transition: background 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.rail-dot:hover {
    opacity: 0.85;
}

.rail-dot.is-active {
    background: var(--external-primary);
    opacity: 1;
    transform: scale(1.45);
}

/* Cierre del catálogo. En teléfono el ::before fuerza el salto de renglón
   y el link cae abajo, a la izquierda como estaba antes. El link no se
   estira a lo ancho: así sólo el texto es clickeable. */
.home-rail-controls::before {
    content: "";
    order: 1;
    flex-basis: 100%;
}

.home-rail-ver {
    order: 2;
    margin-right: auto;
    margin-top: 0.3rem;
}

/* ── LÍNEA ADAPTA ──────────────────────────────────────────────────── */
/* El verde es la franja entera, no un recuadro adentro de una franja: un
   panel flotando dejaba un marco de color alrededor que no decía nada y
   le sacaba ancho al contenido.

   Las categorías van como índice y no como riel de fotos ni como
   pastillas. La versión con tarjetas repetía el catálogo justo debajo
   del catálogo; la de pastillas era una lista de botones sin jerarquía.
   Un índice —número, nombre en tipografía de título, flecha— es lo que
   realmente es esto: entradas a un listado. Y es lo más distinto que
   puede ser del riel de arriba sin dejar de ser navegable. */
.home-adapta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(150deg,
            var(--external-primary-dark) 0%,
            var(--g-carbon) 100%);
    color: var(--external-white);
    padding: 3.5rem 0;
}

/* Acá había además un resplandor radial en la esquina. Se fue: era la
   única banda de la página con dos texturas encima y la trama ya hace
   ese trabajo. Una textura por sección, la misma en todas. */

.home-adapta-inner {
    position: relative;
    z-index: 1;
}

.home-adapta-head .home-eyebrow .bi {
    font-size: 0.95rem;
    line-height: 1;
}

.home-adapta-text {
    font-size: var(--fs-body);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.82);
    max-width: 52ch;
    margin: 1rem 0 0;
}

/* El índice: una caja de alto fijo con las categorías adentro.

   Antes se cortaba en seis y avisaba "4 categorías más" al pie. Ahora
   están todas y la franja mide siempre lo mismo: lo que cambia es
   cuánto hay que scrollear adentro, no cuánto empuja la página hacia
   abajo. El alto es max-height y no height: con pocas categorías la
   caja se achica en vez de dejar un hueco verde.

   Cada categoría ocupa lo que necesita su nombre —de media caja a caja
   entera— así que entran dos por renglón cuando los nombres son cortos
   y una sola cuando son largos. Nunca tres: a esa altura el nombre
   compite con el número y la flecha y el renglón deja de leerse de un
   golpe. */
.home-indice-wrap {
    position: relative;
    margin-top: 2.5rem;
}

.home-indice {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0.75rem 0.25rem 0;
    max-height: 16.5rem;
    overflow-y: auto;
    /* Al llegar al final el gesto no sigue de largo arrastrando la
       página: la caja se come el sobrante. */
    overscroll-behavior-y: contain;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    /* La barra fina y clara es la señal en escritorio; en teléfono no se
       dibuja hasta que se arrastra, y de eso se encargan el velo y el
       renglón de abajo. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

.home-indice::-webkit-scrollbar {
    width: 6px;
}

.home-indice::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 3px;
}

.home-indice:focus-visible {
    outline: 2px solid var(--external-white);
    outline-offset: 4px;
}

/* El mínimo es media caja —menos el hueco— así que dos entran justas y
   tres no entran nunca; el máximo es la caja entera. Entre esos dos
   valores manda el largo del nombre.

   Crecen para terminar de llenar su renglón (flex-grow) en vez de
   quedarse en el ancho exacto del texto. Es lo que evita el borde
   derecho desparejo: si en un ancho dado entra una sola, esa una ocupa
   el renglón entero y se lee como la lista de siempre; si entran dos, se
   reparten. Nunca queda un hueco muerto al costado. */
.home-indice>li {
    flex: 1 1 auto;
    min-width: calc(50% - 0.25rem);
    max-width: 100%;
}

/* Con anchos distintos el filete de abajo solo quedaba desparejo —tres
   subrayados de largos que no coinciden se leen como un error—, así que
   cada categoría cierra su propio contorno. Adentro no cambió nada:
   número, nombre y flecha, igual que antes. */
/* En teléfono el renglón es compacto —48px, el mínimo táctil— pero no
   apretado: en un ancho de 390px casi ningún nombre entra en media
   caja, así que cada categoría se queda con el renglón entero. Achicar
   la tipografía y la flecha para forzar dos por fila daría dos
   categorías ilegibles en vez de una que se lee. */
.home-indice-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.35rem 0.85rem;
    min-height: 48px;
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--external-white);
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.home-indice-num {
    font-family: var(--font-display);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--external-primary-soft);
}

.home-indice-name {
    font-family: var(--font-display);
    font-size: var(--fs-sub);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--external-white);
}

.home-indice-go {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--external-white);
    transition: background-color 0.2s ease, border-color 0.2s ease,
                color 0.2s ease, transform 0.2s ease;
}

.home-indice-go svg {
    width: 0.95rem;
    height: 0.95rem;
}

/* ── Que se note que la caja scrollea ──────────────────────────────────
   Las dos señales cuelgan de .is-scrollable, que scroller.js pone sólo
   cuando sobra contenido: si las categorías entran todas, acá no pasa
   nada. Y las dos se apagan con .is-end, cuando ya no queda nada abajo.

   El desvanecido va como máscara sobre la caja y no como un velo de
   color encima: la franja es un degradado de verde a carbón, así que
   cualquier color fijo que le pusiera arriba iba a pegar en un solo
   punto de la página. Enmascarado, lo que se transparenta es el fondo
   que haya, sea cual sea. */
.home-indice.is-scrollable {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5rem), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5rem), transparent 100%);
}

.home-indice.is-scrollable.is-end {
    -webkit-mask-image: none;
    mask-image: none;
}

/* El renglón dice lo que el corte insinúa. No reserva lugar cuando no
   hay nada que scrollear (display:none), y cuando lo hay se apaga al
   llegar al final sin devolver el espacio: si desapareciera del todo, la
   franja daría un salto justo al terminar de scrollear. */
.home-indice-hint {
    display: none;
    align-items: center;
    gap: 0.4rem;
    margin: 0.7rem 0 0;
    font-size: var(--fs-small);
    color: rgba(255, 255, 255, 0.62);
    transition: opacity 0.25s ease;
}

.home-indice.is-scrollable~.home-indice-hint {
    display: flex;
    opacity: 1;
}

.home-indice.is-scrollable.is-end~.home-indice-hint {
    opacity: 0;
}

.home-indice-hint svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    animation: home-hint-bob 1.8s ease-in-out infinite;
}

@keyframes home-hint-bob {
    0%, 100% {
        transform: translateY(-2px);
    }

    50% {
        transform: translateY(2px);
    }
}

.home-adapta-foot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    margin-top: 2rem;
}

/* El renglón de "N categorías más" se fue con el tope de seis: ahora
   están todas adentro de la caja. */

/* ── PROYECTOS A MEDIDA ────────────────────────────────────────────── */
/* Cierra con la foto a sangre y el texto encima, no con un color plano y
   la foto al costado. Es lo que la separa de la línea adapta, que queda
   justo arriba y también es oscura: adapta es color, esto es obra.

   El velo es neutro —gris casi negro— a propósito. Teñirlo de verde la
   habría vuelto la tercera banda verde seguida, y acá el color lo pone
   la foto. El único verde es el filete de 5px de arriba, que es el que
   divide las dos bandas oscuras. */
.home-medida {
    position: relative;
    overflow: hidden;
    background: var(--g-carbon);
    color: var(--external-white);
    padding: 3.5rem 0;
    border-top: 5px solid var(--external-primary);
}

.home-medida-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* En teléfono la franja es vertical y sólo entra la mitad del ancho
       de hero_adapta: 75% se queda con la mitad derecha de la casa. */
    object-position: 75% 55%;
    z-index: 0;
}

/* En teléfono el degradado es vertical y denso: el texto ocupa el ancho
   completo y necesita fondo parejo abajo de cada renglón. */
.home-medida-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top,
            rgba(18, 20, 22, 0.82) 0%,
            rgba(18, 20, 22, 0.74) 55%,
            rgba(18, 20, 22, 0.56) 100%);
}

.home-medida-inner {
    position: relative;
    z-index: 2;
}

.home-medida-title {
    margin-bottom: 1rem;
}

.home-medida-text {
    font-size: var(--fs-body);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.82);
    max-width: 52ch;
    margin: 0;
}

/* Los tipos de obra, como índice numerado: mismo patrón de lectura que
   el índice de la línea adapta (número + nombre), pero sin la caja de
   scroll —acá siempre entran los cuatro renglones— y con un filete
   como único separador, así se apoya en lo que ya hay debajo sin
   competir con la foto de fondo.

   En teléfono queda debajo del texto por el orden natural del flujo;
   el layout de dos columnas es el que se agrega en escritorio. */
.home-medida-list-wrap {
    margin-top: 2.25rem;
}

.home-medida-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.home-medida-list-item {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.home-medida-list-num {
    font-family: var(--font-display);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--external-primary-soft);
}

.home-medida-list-name {
    font-family: var(--font-display);
    font-size: var(--fs-sub);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--external-white);
}

.home-medida-nota {
    font-size: var(--fs-small);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    margin: 1rem 0 0;
}

.home-medida-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    margin-top: 1.75rem;
}
/* ── ≥576px ────────────────────────────────────────────────────────── */
@media (min-width: 576px) {
    .home-medida-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .home-adapta-foot {
        flex-direction: row;
        align-items: center;
        gap: 1.25rem;
    }

    .home-rail-item {
        flex-basis: 46%;
    }

    /* Desde acá el ancho ya alcanza para que dos nombres cortos compartan
       renglón. El hueco crece y el mínimo se recalcula solo: sigue
       siendo media caja. */
    .home-indice {
        gap: 0.75rem;
    }

    .home-indice>li {
        min-width: calc(50% - 0.375rem);
    }
}

/* ── ≥768px ────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .home-hero {
        /* .external-main pasa a padding-top: 1.5rem desde acá */
        margin-top: -1.5rem;
        /* El recorte bajo es sólo de teléfono: en escritorio la foto es
           apaisada y el hero sí se lleva casi la pantalla completa. */
        min-height: max(440px, 82svh);
        /* Y el contenido se centra en vez de apoyarse abajo. */
        align-items: center;
    }

    .home-hero-inner {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    /* Acá el contenido va centrado y el hero mide 82svh: hay lugar de
       sobra abajo, así que la señal se despega del borde y la línea se
       alarga a la escala de la pantalla. */
    .home-hero-cue-wrap {
        bottom: 2rem;
    }

    .home-hero-cue-track {
        height: 58px;
    }

    .home-hero-scrim {
        background: linear-gradient(105deg,
                rgba(15, 17, 19, 0.62) 0%,
                rgba(15, 17, 19, 0.36) 55%,
                rgba(15, 17, 19, 0.1) 100%);
    }

    .home-nosotros,
    .home-lineas,
    .home-catalogo,
    .home-adapta,
    .home-medida {
        padding: 5rem 0;
    }

    /* Casi tamaño de título: en la franja de apertura esto es una
       declaración, no un párrafo de apoyo. Va un 12% abajo de
       --fs-title-sm para no competir con el h2. El tope de 38ch es para
       que en pantalla ancha no se estire a un renglón larguísimo — abajo
       de eso manda el ancho de la columna. */
    .home-nosotros-lead {
        font-size: calc(var(--fs-title-sm) * 0.76);
        line-height: 1.4;
        max-width: 38ch;
    }

    /* Las tres líneas pasan a columnas: se leen de un vistazo como el
       índice del recorrido, en vez de una lista que hay que bajar. Acá
       ya no hay nada que plegar, así que el acordeón de teléfono se va y
       vuelven las tarjetas, con la tarjeta entera como link. */
    .home-lineas-acordeon {
        display: none;
    }

    .home-lineas-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
        margin-top: 2.75rem;
    }

    .home-lineas-head {
        max-width: 62ch;
    }

    .home-rail-wrap {
        --rail-pad: 0.75rem;
    }

    .home-rail-item {
        flex-basis: 31.5%;
    }

    .home-rail-arrow {
        display: inline-flex;
    }

    /* Link a la izquierda, en la fila de las flechas. Grilla y no flex:
       las dos columnas 1fr de los costados mantienen flechas y puntos
       centrados aunque de un lado esté el link y del otro nada. El aire
       entre flecha y puntos pasa a ser margen de los puntos: un gap sumaba
       espacio también alrededor de la columna vacía y los descentraba. */
    .home-rail-controls {
        display: grid;
        grid-template-columns: 1fr auto auto auto 1fr;
        gap: 0;
    }

    .home-rail-controls::before {
        content: none;
    }

    .home-rail-dots {
        margin-inline: 0.85rem;
    }

    .home-rail-ver {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        margin-top: 0;
    }

    /* Con el ancho de escritorio los renglones respiran un poco más que
       en teléfono, pero no mucho más: a tamaño de título (--fs-title-sm)
       y 64px de alto cada categoría pesaba como un bloque propio y la
       caja entera se leía más grande que la franja que la contiene. Un
       escalón abajo —nombre en --fs-lead, 54px de alto— sigue siendo un
       índice de entradas grandes y clickeables, no una lista apretada:
       la idea era bajarle el volumen, no sacarle el protagonismo. */
    .home-indice {
        max-height: 17.5rem;
        gap: 0.85rem;
    }

    .home-indice>li {
        min-width: calc(50% - 0.425rem);
    }

    .home-indice-row {
        min-height: 54px;
        padding: 0.7rem 0.9rem;
        gap: 0.3rem 0.9rem;
    }

    .home-indice-name {
        font-size: var(--fs-lead);
    }

    /* La flecha acompaña al renglón: 34px sobre 54px es la misma
       proporción que tenía en teléfono. El tamaño del ícono no cambia
       respecto de la base. */
    .home-indice-go {
        width: 34px;
        height: 34px;
    }

    /* La foto de fondo se ve del lado derecho: el degradado se inclina y
       deja destapada la mitad donde no hay texto. Mismo recurso que el
       hero, que es el otro bloque con foto a sangre de la página. */
    .home-medida {
        padding: 6rem 0;
    }

    /* La casa ocupa del 28% al 77% del alto: con 55% entra entera en
       laptop. */
    .home-medida-bg {
        object-position: 50% 55%;
    }

    .home-medida-scrim {
        background: linear-gradient(100deg,
                rgba(18, 20, 22, 0.82) 0%,
                rgba(18, 20, 22, 0.70) 42%,
                rgba(18, 20, 22, 0.30) 100%);
    }

    /* El texto no cruza la mitad: del otro lado tiene que verse la foto,
       que es lo que hace que esta franja no sea otro rectángulo de color. */
    .home-medida-copy {
        max-width: 34rem;
    }

    /* El índice pasa a la derecha, en la franja donde ya se ve la foto:
       por eso no lleva fondo propio, sólo el filete por renglón que ya
       tiene suficiente contraste sobre el velo oscuro. */
    .home-medida-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2.5rem;
    }

    .home-medida-list-wrap {
        flex: 0 0 20rem;
        max-width: 20rem;
        margin-top: 0;
    }
}

/* ── ≥992px ────────────────────────────────────────────────────────── */
@media (min-width: 992px) {
    .home-rail-item {
        flex-basis: 23.7%;
    }

    .home-nosotros-inner {
        gap: 4.5rem;
    }

    .home-lineas-list {
        gap: 1.75rem;
    }

    /* El isotipo aparece recién acá, con la franja a dos columnas. De 768
       a 991 la sección es sólo la declaración: meter la placa abajo del
       texto era estirarla sin ganar nada. La columna de la placa es la
       más angosta —un logo no necesita la mitad de la pantalla. */
    .home-nosotros-inner {
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        align-items: center;
    }

    .home-nosotros-figure {
        display: block;
    }

    /* ── Hovers ────────────────────────────────────────────────────
       Sólo desde acá: abajo de 992 la pantalla es táctil y un :hover
       que se queda pegado después del toque es peor que no tenerlo.

       El gesto es siempre el mismo, el de externo.css: las superficies
       flotan, los botones se hunden, y nada cambia de color — se mueve
       un escalón dentro de su propia escala. */
    .home-cat:hover {
        transform: var(--g-flota);
        box-shadow: var(--g-flota-sombra);
    }

    .home-cat:hover .home-cat-img {
        transform: scale(1.05);
    }

    /* La tarjeta del conector flota igual que la del catálogo. La sombra
       es más densa que la de una tarjeta sobre blanco: abajo hay verde
       oscuro y una sombra suave ahí no se ve. */
    .home-linea:hover {
        transform: var(--g-flota);
        border-color: rgba(40, 116, 82, 0.2);
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
    }

    .home-linea:hover .home-linea-go svg {
        transform: translateX(4px);
    }

    /* El renglón del índice no flota ni se corre: se enciende. Con
       anchos distintos, correrlo movía sólo a uno de los dos de la
       fila; y una fila que levanta sombra se lee como tarjeta. */
    .home-indice-row:hover {
        background: var(--g-hover-blanco);
        border-color: rgba(255, 255, 255, 0.45);
        color: var(--external-white);
    }

    .home-indice-row:hover .home-indice-go {
        background: var(--external-white);
        border-color: var(--external-white);
        color: var(--g-carbon);
        transform: translateX(3px);
    }
}

/* ── Movimiento reducido ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .home-rail {
        scroll-behavior: auto;
    }

    .home-btn,
    .home-link,
    .home-cat,
    .home-cat-img,
    .home-linea,
    .home-linea-go svg,
    .home-lin-panel,
    .home-lin-resumen,
    .home-indice-row,
    .home-indice-go,
    .home-rail-arrow,
    .rail-dot {
        transition: none;
    }

    /* La flecha salta a su posición en vez de girar. Sigue apuntando
       para arriba con la fila abierta —y lo sigue diciendo
       aria-expanded—, que es lo que hay que leer. */
    .home-lin-chevron {
        transition: none;
    }

    .home-cat:hover,
    .home-linea:hover {
        transform: none;
    }

    .home-cat:hover .home-cat-img,
    .home-linea:hover .home-linea-go svg,
    .home-indice-row:hover .home-indice-go {
        transform: none;
    }

    /* La flecha del aviso de scroll se queda quieta: lo que dice que hay
       más abajo es el corte desvanecido, y ese no se mueve. */
    .home-indice-hint svg {
        animation: none;
    }
}