/* =====================================================================
   goodlook — estilos EXCLUSIVOS de la portada (la "vidriera")
   ---------------------------------------------------------------------
   Esta hoja se carga sólo en templates/tienda/portada.html y va DESPUÉS
   de tienda.css, así que puede apoyarse en todas sus variables
   (--marca, --tinta, --borde, --radio…) y en sus clases (.contenedor,
   .tarjeta, .boton…). Acá no se pisa nada de tienda.css: todo lo de
   abajo son clases nuevas.

   Índice:
     1. Medidas propias de la portada
     2. Barra de secciones (Mujer / Hombre / categorías)
     3. Filas de la vidriera (cabecera + carrusel)
     4. Carruseles horizontales SIN JavaScript
     5. Frases de marca
     6. Bloque editorial (foto grande + texto)
     7. Tarjetas de sección (Mujer / Hombre)
     8. Tira de servicios
     9. Cierre del catálogo
   ===================================================================== */


/* --- 1. Medidas propias ----------------------------------------------
   --aire-lateral tiene que valer EXACTAMENTE lo mismo que el padding
   horizontal de .contenedor (20px). Los carruseles se salen del
   contenedor con un margen negativo de esa medida para que las fotos
   lleguen al borde de la pantalla, y vuelven a meter ese aire como
   padding propio. Resultado: la primera tarjeta queda alineada con el
   resto de la página, pero la última se va "sangrando" fuera de la
   pantalla, que es lo que hace que se note que hay más para el costado.
   -------------------------------------------------------------------- */

.portada {
    --aire-lateral: 20px;
    --carrusel-gap: 20px;
}


/* --- 2. Barra de categorías ------------------------------------------
   Un renglón con las categorías que tienen prendas en la sección que se
   está mirando. Se desplaza de costado en el celular, igual que las
   categorías de cualquier tienda.
   -------------------------------------------------------------------- */

.barra-secciones {
    border-bottom: 1px solid var(--borde);
    background: var(--fondo);
}

.barra-secciones-fila {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    padding: 12px 0;
    scrollbar-width: none;
}

.barra-secciones-fila::-webkit-scrollbar { display: none; }

/* La etiqueta "Categorías" que abre el renglón. */
.barra-secciones-titulo {
    flex: 0 0 auto;
    margin: 0;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;

    /* --gris y NO --gris-claro: en texto de 11px el gris claro queda en
       3,66:1 de contraste y el mínimo legible es 4,5:1. El gris común da
       5,46:1. El gris claro es sólo para cosas apagadas o deshabilitadas. */
    color: var(--gris);
}


/* --- 3. Filas de la vidriera ----------------------------------------- */

.vidriera-fila { padding: 52px 0 0; }

/* La última fila antes de una franja oscura o del catálogo respira igual. */
.vidriera-fila:last-child { padding-bottom: 8px; }

.vidriera-cabecera {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 20px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.vidriera-titulo {
    font-family: var(--tipografia-titulo);
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.02em;
    margin: 0;
}

/* Volanta chiquita arriba del título: "Temporada FW26", "Recién llegado"… */
.vidriera-volanta {
    display: block;
    margin-bottom: 8px;
    font-family: var(--tipografia);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--marca);
}

.vidriera-bajada {
    margin: 6px 0 0;
    font-size: .9375rem;
    color: var(--gris);
    max-width: 52ch;
}

/* "Ver todo" con una flechita que se corre al pasar el mouse. */
.vidriera-vertodo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--tinta);
    transition: all var(--transicion);
}

.vidriera-vertodo:hover {
    border-color: var(--marca);
    color: var(--marca);
    text-decoration: none;
}

.vidriera-vertodo span {
    transition: transform var(--transicion);
}

.vidriera-vertodo:hover span { transform: translateX(3px); }


/* --- 4. Carruseles horizontales SIN JavaScript ------------------------
   Es un grid de una sola fila que desborda a lo ancho:

     · overflow-x: auto           -> aparece el scroll horizontal
     · scroll-snap-type: x mandatory + scroll-snap-align: start
                                  -> al soltar el dedo, la tarjeta queda
                                     encuadrada y no cortada a la mitad
     · overscroll-behavior-x: contain
                                  -> arrastrar el carrusel hasta el final
                                     no dispara el "atrás" del navegador
     · scrollbar-width: none      -> se esconde la barra fea, PERO el
                                     scroll sigue existiendo: con el dedo,
                                     con la rueda del trackpad y con las
                                     flechas del teclado (el contenedor
                                     lleva tabindex="0" en el HTML).

   Sin una línea de JavaScript.
   -------------------------------------------------------------------- */

.carrusel-marco { position: relative; }

.carrusel-productos {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 62%;          /* celular: una tarjeta y media */
    gap: var(--carrusel-gap);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    /* Sangrado: las fotos llegan al borde de la pantalla. */
    margin-inline: calc(-1 * var(--aire-lateral));
    padding-inline: var(--aire-lateral);
    scroll-padding-inline: var(--aire-lateral);

    /* Un respiro abajo para que la sombra del hover no quede cortada. */
    padding-bottom: 6px;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.carrusel-productos::-webkit-scrollbar { display: none; }

.carrusel-productos > * {
    scroll-snap-align: start;
    min-width: 0;   /* si no, una tarjeta con texto largo estira la columna */
}

/* El foco del teclado tiene que VERSE: el contenedor es navegable con
   Tab y se recorre con las flechas ← →. */
.carrusel-productos:focus-visible {
    outline: 2px solid var(--marca);
    outline-offset: 6px;
    border-radius: var(--radio);
}

/* Ayudita para el celular. En escritorio no hace falta: se arrastra con
   el trackpad o con Shift + rueda. */
.carrusel-ayuda {
    margin: 10px 0 0;
    font-size: .78rem;
    letter-spacing: .04em;
    color: var(--gris);   /* texto para leer: nunca --gris-claro */
}

@media (min-width: 641px) {
    .carrusel-ayuda { display: none; }
}

/* Cuántas tarjetas se ven según el ancho. Siempre queda una asomando:
   es lo que le avisa al cliente que hay más para el costado. */
@media (min-width: 560px) {
    .carrusel-productos { grid-auto-columns: 38%; }
}

@media (min-width: 900px) {
    .carrusel-productos { grid-auto-columns: 27%; }
}

@media (min-width: 1100px) {
    .carrusel-productos {
        /* 4 tarjetas y media a lo ancho del contenedor. */
        grid-auto-columns: calc((100% - 4 * var(--carrusel-gap)) / 4.4);
    }
}

/* Quien pidió menos movimiento en su sistema no ve el desplazamiento
   suave: el carrusel salta directo a destino. */
@media (prefers-reduced-motion: reduce) {
    .carrusel-productos { scroll-behavior: auto; }
}

/* Flechas nativas del navegador, si las banca (Chrome moderno).
   Son botones que genera el propio CSS con ::scroll-button: no hay
   JavaScript de por medio. En los navegadores que todavía no las
   soportan simplemente no aparecen y el carrusel se usa igual. */
@supports selector(::scroll-button(*)) {
    .carrusel-productos::scroll-button(left),
    .carrusel-productos::scroll-button(right) {
        position: absolute;
        top: 28%;
        z-index: 2;
        width: 42px;
        height: 42px;
        border: 1px solid var(--borde);
        border-radius: 999px;
        background: rgba(255, 255, 255, .94);
        box-shadow: var(--sombra);
        color: var(--tinta);
        font-size: 1rem;
        cursor: pointer;
        transition: all var(--transicion);
    }

    .carrusel-productos::scroll-button(left)  { content: "‹"; left: 4px; }
    .carrusel-productos::scroll-button(right) { content: "›"; right: 4px; }

    .carrusel-productos::scroll-button(left):hover,
    .carrusel-productos::scroll-button(right):hover {
        border-color: var(--marca);
        color: var(--marca);
    }

    /* Cuando ya no hay para dónde seguir —o cuando la fila tiene tan pocas
       prendas que entran todas— el botón desaparece del todo. */
    .carrusel-productos::scroll-button(left):disabled,
    .carrusel-productos::scroll-button(right):disabled {
        opacity: 0;
        visibility: hidden;
    }

    /* En el celular estorban: ahí se usa el dedo. */
    @media (max-width: 899px) {
        .carrusel-productos::scroll-button(left),
        .carrusel-productos::scroll-button(right) { display: none; }
    }
}


/* --- 5. Frases de marca ----------------------------------------------
   Una frase sola, centrada, con mucho aire alrededor. Es el respiro
   entre dos bloques de producto: sin esto la portada es una pila de
   grillas.
   -------------------------------------------------------------------- */

.frase-marca {
    padding: 96px 0;
    text-align: center;
}

.frase-marca-texto {
    max-width: 20ch;
    margin: 0 auto;
    font-family: var(--tipografia-titulo);
    font-size: clamp(1.9rem, 4.6vw, 3.2rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.02em;
}

.frase-marca-pie {
    margin: 22px 0 0;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gris);   /* texto para leer: nunca --gris-claro */
}

/* Variante angosta, para la frase corta del medio. */
.frase-marca-suelta .frase-marca-texto { max-width: 26ch; }

@media (max-width: 640px) {
    .frase-marca { padding: 64px 0; }
}


/* --- 6. Bloque editorial ---------------------------------------------
   Foto grande de la temporada a un lado y texto del otro. Corta el ritmo
   de "título + carrusel, título + carrusel" y le da aire de campaña.
   -------------------------------------------------------------------- */

.editorial {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
    gap: 44px;
    padding: 56px 0;
}

.editorial-foto {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radio);
    background: var(--fondo-hueco);
}

.editorial-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Velo violeta muy suave: hermana la foto con la identidad de goodlook
   sin ensuciar el color real de la prenda. */
.editorial-foto::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg,
                rgba(109, 91, 158, .18), rgba(109, 91, 158, 0) 62%);
    pointer-events: none;
}

.editorial-volanta {
    margin: 0 0 14px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--marca);
}

.editorial-titulo {
    font-family: var(--tipografia-titulo);
    font-size: clamp(1.9rem, 3.6vw, 2.8rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.02em;
    margin: 0 0 14px;
}

.editorial-texto {
    color: var(--tinta-suave);
    font-size: 1.02rem;
    line-height: 1.6;
    margin: 0 0 24px;
    max-width: 42ch;
}

@media (max-width: 900px) {
    .editorial {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 40px 0;
    }

    .editorial-foto { aspect-ratio: 5 / 4; }
}


/* --- 7. Tarjetas de sección (Mujer / Hombre) -------------------------- */

.tarjetas-genero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* La proporción cambia con el ancho para que las dos tarjetas LLENEN sus
   columnas: con una proporción fija y alta, en escritorio quedaba un hueco
   enorme entre las dos. */
.tarjeta-genero {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radio);
    background: var(--marca);
    color: #fff;
}

.tarjeta-genero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms ease;
}

.tarjeta-genero:hover img { transform: scale(1.05); }

.tarjeta-genero:hover { text-decoration: none; }

/* Degradado oscuro abajo para que el título se lea sobre cualquier foto. */
.tarjeta-genero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
                rgba(10, 10, 10, .72) 0%,
                rgba(10, 10, 10, .30) 42%,
                rgba(10, 10, 10, 0) 72%);
}

.tarjeta-genero-texto {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 24px;
}

.tarjeta-genero-titulo {
    font-family: var(--tipografia-titulo);
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    margin: 0 0 8px;
}

.tarjeta-genero-detalle {
    margin: 0;
    font-size: .9rem;
    color: rgba(255, 255, 255, .82);
}

.tarjeta-genero-flecha {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    transition: all var(--transicion);
}

.tarjeta-genero:hover .tarjeta-genero-flecha {
    background: #fff;
    border-color: #fff;
    color: var(--tinta);
}

/* Foco visible: son links grandes, tienen que marcarse enteros. */
.tarjeta-genero:focus-visible {
    outline: 3px solid var(--marca);
    outline-offset: 3px;
}

@media (max-width: 640px) {
    .tarjetas-genero { gap: 12px; }
    .tarjeta-genero { aspect-ratio: 4 / 5; }
    .tarjeta-genero-texto { padding: 16px 14px; }

    /* En dos columnas de teléfono la tarjeta mide unos 170px: el título y el
       detalle van más chicos para que no se le monten encima. */
    .tarjeta-genero-titulo { font-size: 1.5rem; }
    .tarjeta-genero-detalle { font-size: .8rem; }
    .tarjeta-genero-flecha { margin-top: 10px; padding: 7px 12px; font-size: .75rem; }
}


/* --- 8. Tira de servicios --------------------------------------------
   Las tres razones para comprar acá, en una franja finita sobre fondo
   suave. Va abajo de la vidriera, cuando el cliente ya vio la ropa y
   está por decidir.
   -------------------------------------------------------------------- */

.tira-servicios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin: 64px 0 0;
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--borde);
}

.servicio {
    background: var(--fondo-suave);
    padding: 26px 24px;
}

.servicio h3 {
    font-family: var(--tipografia-titulo);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 6px;
}

.servicio p {
    margin: 0;
    font-size: .875rem;
    color: var(--gris);
}

@media (max-width: 760px) {
    .tira-servicios {
        grid-template-columns: 1fr;
        margin-top: 44px;
    }

    .servicio { padding: 20px; }
}


/* --- 9. Cierre del catálogo ------------------------------------------- */

/* Separador fino antes del "Todo el catálogo": marca que ahí termina la
   vidriera curada y empieza el listado completo. */
.catalogo-completo {
    margin-top: 72px;
    padding-top: 48px;
    border-top: 1px solid var(--borde);
}

@media (max-width: 640px) {
    .vidriera-fila { padding-top: 38px; }

    .catalogo-completo {
        margin-top: 48px;
        padding-top: 34px;
    }
}