/* =====================================================================
   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í.
   (Antes era al revés, con max-width, y el caso más usado quedaba
   armado a fuerza de excepciones.)

   El orden de la página es el mensaje:
     hero → catálogo estándar → fabricación a medida → nosotros

   Primero se recorre lo que ya está resuelto y se cotiza solo; recién
   después aparece el proyecto desde cero, que es cuando el visitante
   ya sabe si algo del catálogo le sirve. Ningún camino le pide elegir
   antes de tener con qué elegir, y "a medida" no queda en media
   tarjeta: se lleva una franja entera.

   Firma visual: la línea de cota del plano de taller (.home-cota).
   Aparece en tres lugares —hero, catálogo y a medida— y en ninguno
   más: acá se mide en milímetros, así que la cota dice algo, no
   decora.
   ===================================================================== */

/* ── Primitivas ────────────────────────────────────────────────────── */
/* .home-cota, .home-eyebrow, .home-title, .home-btn y .home-link se
   mudaron a externo.css: ahora también las usa Nosotros y tener dos
   copias garantizaba que se separaran. Allá viven con doble nombre
   (.g-* nuevo, .home-* alias), así que este archivo no cambió nada. */

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

/* ── HERO ──────────────────────────────────────────────────────────── */
.home-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    /* En teléfono el hero no se lleva la pantalla entera: a 82svh el
       catálogo quedaba tan abajo que la primera pantalla era sólo foto.
       Con 68svh la banda verde del catálogo ya asoma sin scrollear.
       El recorte vertical que sirve el <picture> en mobile es 3:4, así
       que acá el alto ya no le come ancho a la foto — cuando la caja
       era alta y la foto apaisada, cover recortaba a los costados y por
       eso hubo que bajarla en su momento.
       El piso de 400px protege pantallas muy cortas: es lo que mide el
       contenido del hero, así que por debajo de eso manda el texto. */
    min-height: max(400px, 68svh);
    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;
    padding-bottom: 2.75rem;
}

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

/* Acciones: el catálogo va primero y sólido. No porque valga más,
   sino porque es por donde se empieza a mirar.
   En fila y del ancho de su texto: apilados a todo lo ancho pesaban
   más que el título y el hero se leía como una pantalla de botones.
   Si no entran (pantallas muy angostas), wrap los apila igual. */
.home-hero-actions {
    display: flex;
    flex-flow: row wrap;
    gap: 0.55rem;
}

/* ── CATÁLOGO ESTÁNDAR ─────────────────────────────────────────────── */
.home-catalogo {
    background: var(--g-vidrio);
    padding: 3.5rem 0;
    border-top: 5px solid var(--external-primary);
}

.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: 3px;
    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 */
.home-rail-controls {
    display: flex;
    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: el paso siguiente del camino estándar */
.home-catalogo-foot {
    margin-top: 2rem;
}

.home-catalogo-foot .home-btn {
    width: 100%;
}

/* ── A MEDIDA ──────────────────────────────────────────────────────── */
/* Franja oscura y entera. Llega después del catálogo, pero no llega
   más chica: es el otro negocio de la fábrica, no un plan B. */
.home-medida {
    background: var(--g-carbon);
    color: var(--external-white);
    padding: 3.5rem 0;
}

.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 0 1.75rem;
}

.home-medida-actions {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

/* La figura va acotada como un plano de taller: el dibujo dice
   "vos ponés las medidas" mejor que una línea de copy. */
.home-medida-figure {
    display: flex;
    align-items: stretch;
    gap: 0.85rem;
    margin: 2.25rem 0 0;
}

.home-medida-figure-cota-v {
    display: none;
    color: var(--external-primary-soft);
}

.home-medida-figure-body {
    flex: 1 1 auto;
    min-width: 0;
}

.home-medida-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 3px;
    display: block;
}

.home-medida-figure-cota-h {
    color: var(--external-primary-soft);
    margin-top: 0.85rem;
}

/* ── NOSOTROS (mini) ───────────────────────────────────────────────── */
/* Cierre callado y sin imagen: después de la franja oscura conviene
   bajar el volumen, no volver a subirlo. */
.home-nosotros {
    background: var(--external-white);
    padding: 3.5rem 0;
}

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

/* ── ≥576px ────────────────────────────────────────────────────────── */
@media (min-width: 576px) {
    .home-medida-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .home-catalogo-foot .home-btn {
        width: auto;
    }

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

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

    .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-catalogo,
    .home-medida,
    .home-nosotros {
        padding: 5rem 0;
    }

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

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

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

    /* Copy e imagen lado a lado; la cota vertical aparece recién acá,
       cuando hay ancho para que se lea como cota y no como adorno. */
    .home-medida-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 3rem;
    }

    .home-medida-figure {
        margin-top: 0;
    }

    .home-medida-figure-cota-v {
        display: flex;
    }

    .home-catalogo-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 2rem;
        margin-bottom: 0;
    }

    .home-catalogo-intro {
        margin-top: 0;
        flex: 0 1 26rem;
    }

    /* Centrado y angosto: en pantalla ancha, alineado a la izquierda
       dejaba dos tercios vacíos y parecía una sección sin terminar. */
    .home-nosotros-inner {
        max-width: 60ch;
        margin-inline: auto;
        text-align: center;
    }

    .home-nosotros-inner .home-eyebrow,
    .home-nosotros-inner .home-link {
        justify-content: center;
    }

    .home-nosotros-lead {
        max-width: none;
    }
}

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

    .home-cat:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14);
    }

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

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

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

    .home-btn,
    .home-link,
    .home-cat,
    .home-cat-img,
    .home-rail-arrow,
    .rail-dot {
        transition: none;
    }

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

    .home-cat:hover .home-cat-img {
        transform: none;
    }
}