/* =====================================================================
   carrusel.css — la fila de prendas que se desliza de costado
   ---------------------------------------------------------------------
   Es el ".carrusel-marco" que la portada repite en cada fila de la
   vidriera. El HTML lo escribe portada.html y es siempre este:

       <div class="carrusel-marco">
           <div class="carrusel-productos" tabindex="0" role="region"
                aria-label="…">
               … las tarjetas de producto …
           </div>
       </div>
       <p class="carrusel-ayuda">Deslizá para ver más →</p>

   (El texto de ayuda de abajo lo estila portada.css, no este archivo.)

   ESTE ARCHIVO ESTÁ ARMADO EN TRES CAPAS, y el orden importa:

     CAPA 1 — el carrusel SIN NADA (puntos 1 a 3).
       Un grid de una sola fila que desborda a lo ancho. Se desliza con
       el dedo, con el trackpad y con las flechas del teclado. Cero
       JavaScript. Si todo lo demás fallara, esto sigue funcionando.

     CAPA 2 — las flechas que dibuja el propio navegador (punto 4).
       Los navegadores nuevos saben poner botones de "ir para allá" con
       una línea de CSS (::scroll-button). Es el plan B para el caso de
       que el JavaScript no cargue.

     CAPA 3 — lo que enciende js/carrusel.js (puntos 5 a 8).
       Flechas propias que se apagan solas, arrastre con el mouse,
       avance de a una página entera y el velo que se desvanece en los
       bordes.

   Esa forma de trabajar se llama MEJORA PROGRESIVA: se arranca por lo
   que funciona siempre y cada capa de arriba es un extra que, si no
   está, no se extraña. Es lo contrario de armar todo con JavaScript y
   que sin él quede una página en blanco.

   Cómo se enciende la capa 3
   --------------------------
   Cuando carrusel.js encuentra un marco le agrega la clase
   `carrusel-listo` y le va escribiendo unos atributos:

       <div class="carrusel-marco carrusel-listo"
            data-desbordado="si"     ¿sobra contenido para el costado?
            data-hay-izq="no"        ¿queda algo para la izquierda?
            data-hay-der="si">       ¿queda algo para la derecha?

   Todo el punto 5 en adelante cuelga de esa clase. El JavaScript dice
   QUÉ pasa; el CSS decide CÓMO se ve. Si mañana hay que cambiar el
   degradado o el tamaño de las flechas se toca sólo este archivo.

   Índice:
     1. Medidas propias
     2. La pista: el grid que se desliza
     3. El foco del teclado
     4. Flechas nativas (el plan B sin JavaScript)
     5. Velo en los bordes
     6. Cursor de arrastre
     7. Las flechas de verdad
     8. Menos movimiento / celular
   ===================================================================== */


/* --- 1. Medidas propias ----------------------------------------------
   --aire-lateral y --carrusel-gap los define portada.css en .portada y
   se heredan hasta acá. Igual van siempre con un valor de reserva
   (var(--x, 20px)): si mañana este carrusel aparece en otra página que
   no tenga esas variables, no se descoloca nada.
   -------------------------------------------------------------------- */

.carrusel-marco {
    /* position: relative es lo que convierte al marco en el "punto cero"
       de las flechas: sin esto, un elemento con position:absolute adentro
       se ubicaría respecto de la página entera y las flechas terminarían
       en cualquier lado. */
    position: relative;

    /* Ancho del degradado de los costados (punto 5). */
    --carrusel-velo: 64px;

    /* Alto al que quedan las flechas. Lo mide el JavaScript con la foto
       de la primera tarjeta y lo pisa acá mismo, para que la flecha
       quede centrada sobre la IMAGEN y no sobre la tarjeta entera (que
       abajo de la foto tiene nombre, colores y precio). El 30% es el
       plan B para el instante anterior a que el JS mida. */
    --carrusel-flecha-y: 30%;
}


/* --- 2. La pista: el grid que se desliza ------------------------------
   Es un grid de UNA SOLA FILA que desborda a lo ancho. Pieza por pieza:

     · grid-auto-flow: column
         las tarjetas se acomodan una al lado de la otra, en fila, en vez
         de ir bajando. Es lo que hace que sea una tira y no una grilla.

     · grid-auto-columns: un porcentaje
         cuánto mide cada tarjeta. Y acá está el truco del oficio: el
         número NUNCA cierra justo (62%, 38%, 27%…), así siempre queda
         media tarjeta asomando en el borde. Esa media tarjeta cortada es
         lo que le avisa al cliente, sin decírselo, que hay más para el
         costado. Si entraran cuatro justas, la fila parecería terminar
         ahí y nadie deslizaría.

     · overflow-x: auto
         lo que sobra no se recorta: se puede deslizar.

     · scroll-snap-type: x mandatory + scroll-snap-align: start
         el "imán". Al soltar el dedo, la tarjeta más cercana se acomoda
         encuadrada contra el borde en vez de quedar cortada al medio.
         Es la diferencia entre un carrusel de tienda y un scroll pelado.

     · overscroll-behavior-x: contain
         al llegar al final de la fila y seguir empujando, el navegador
         NO interpreta eso como "volver a la página anterior". En el
         celular esto salva más de una venta.

     · scrollbar-width: none
         se esconde la barra gris de abajo, que es fea y no hace falta.
         OJO: esconderla NO desactiva el desplazamiento; sigue andando
         con el dedo, con el trackpad y con el teclado.

     · margin-inline negativo + padding-inline
         el "sangrado": la fila se sale del contenedor para que las fotos
         lleguen al borde de la pantalla, y se vuelve a meter ese mismo
         aire como padding para que la PRIMERA tarjeta quede alineada con
         el título de arriba. Se ve grande sin desalinear nada.

     · scroll-padding-inline
         le avisa al imán que el borde "de verdad" no es el del elemento
         sino ese aire adentro. Sin esto la primera tarjeta encajaría
         pegada al borde de la pantalla y quedaría desalineada del título.
   -------------------------------------------------------------------- */

.carrusel-productos {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 62%;          /* celular: una tarjeta y media */
    gap: var(--carrusel-gap, 20px);

    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    margin-inline: calc(-1 * var(--aire-lateral, 20px));
    padding-inline: var(--aire-lateral, 20px);
    scroll-padding-inline: var(--aire-lateral, 20px);

    /* Un respiro abajo: la sombra que levanta la tarjeta al pasar el
       mouse necesita lugar o queda cortada contra el borde. */
    padding-bottom: 6px;

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

/* La versión de lo mismo para los navegadores con motor de Safari y
   Chrome viejos, que no entienden scrollbar-width. */
.carrusel-productos::-webkit-scrollbar { display: none; }

.carrusel-productos > * {
    scroll-snap-align: start;

    /* Sin esto, una tarjeta con un nombre largo estira su columna y
       rompe la medida pareja de toda la fila. Es una particularidad de
       los grids: por defecto una columna nunca se achica más que su
       contenido. */
    min-width: 0;
}

/* Cuántas tarjetas se ven según el ancho de la pantalla. Repito porque
   es la decisión de diseño más importante del archivo: el número está
   elegido para que SIEMPRE quede una asomando. */

@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 {
        /* Cuatro tarjetas y media a lo ancho del contenedor. El 4.4 (y
           no 4) es, otra vez, la media tarjeta que asoma. */
        grid-auto-columns: calc((100% - 4 * var(--carrusel-gap, 20px)) / 4.4);
    }
}


/* --- 3. El foco del teclado ------------------------------------------
   La fila lleva tabindex="0" en el HTML: se llega con Tab y se recorre
   con ← →. Eso TIENE que verse, o queda un carrusel imposible de usar
   sin mouse.
   -------------------------------------------------------------------- */

.carrusel-productos:focus-visible {
    outline: 2px solid var(--marca);
    outline-offset: 6px;
    border-radius: var(--radio);
}


/* --- 4. Flechas nativas: el plan B sin JavaScript ---------------------
   ::scroll-button es una cosa nueva y muy linda: el navegador dibuja él
   solo los botones de "ir para allá", con su lógica de habilitado y
   deshabilitado incluida, sin una línea de JavaScript.

   ¿Y entonces para qué existe js/carrusel.js? Porque estas flechas
   nativas todavía no las tienen todos los navegadores, avanzan de a un
   pedacito y no traen ni arrastre con el mouse ni el velo de los
   bordes. Así que quedan como RED: si el JavaScript carga, el punto 8
   las apaga y mandan las nuestras; si no carga, éstas aparecen y el
   carrusel igual tiene flechas.

   El @supports es la pregunta "¿este navegador entiende esto?". Los que
   no, se saltean el bloque entero y no pasa nada.
   -------------------------------------------------------------------- */

@supports selector(::scroll-button(*)) {

    .carrusel-productos::scroll-button(left),
    .carrusel-productos::scroll-button(right) {
        position: absolute;
        top: var(--carrusel-flecha-y, 30%);
        z-index: 2;
        width: 44px;
        height: 44px;
        border: 1px solid var(--borde);
        border-radius: 999px;
        background: rgba(255, 255, 255, .92);
        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, el botón desaparece. */
    .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; }
    }
}


/* =====================================================================
   DE ACÁ PARA ABAJO: sólo cuando carrusel.js está andando.
   ===================================================================== */


/* --- 5. Velo en los bordes -------------------------------------------
   El detalle que más hace por la sensación de "hay más para el costado":
   el contenido se desvanece contra los bordes del marco.

   No es un rectángulo blanco encima. Eso quedaría mal, porque el fondo
   de la página es un degradado gris azulado y no blanco, y se vería el
   parche. Es una MÁSCARA: hace TRANSPARENTE el contenido en los bordes
   y deja pasar el fondo que haya atrás, sea el que sea. Si mañana
   cambia el color de la página, el velo lo sigue solo.

   Cómo se lee la máscara: es un degradado horizontal donde el negro
   significa "esto se ve" y el transparente "esto se borra".

       transparente en 0        -> el borde izquierdo se borra
       negro a --velo-izq       -> a partir de ahí se ve entero
       negro hasta 100% - der   -> hasta acá se sigue viendo
       transparente en 100%     -> el borde derecho se borra

   Y --velo-izq / --velo-der valen 0px o 64px según los atributos que
   escribe el JavaScript. O sea: el velo de la izquierda aparece recién
   cuando hay algo escondido para ese lado. Un velo fijo en el borde
   izquierdo estando la fila en el arranque taparía media primera
   tarjeta al pedo.
   -------------------------------------------------------------------- */

/* @property le AVISA al navegador que estas dos variables son largos y
   no texto suelto. Sin eso una variable no se puede animar y el velo
   aparecería de golpe; con esto entra y sale suave. Los navegadores que
   no lo entienden ignoran el bloque: el velo aparece de una y listo. */
@property --carrusel-velo-izq {
    syntax: "<length>";
    inherits: true;
    initial-value: 0px;
}

@property --carrusel-velo-der {
    syntax: "<length>";
    inherits: true;
    initial-value: 0px;
}

.carrusel-marco.carrusel-listo {
    --carrusel-velo-izq: 0px;
    --carrusel-velo-der: 0px;
    transition: --carrusel-velo-izq 220ms ease,
                --carrusel-velo-der 220ms ease;
}

.carrusel-marco.carrusel-listo[data-hay-izq="si"] {
    --carrusel-velo-izq: var(--carrusel-velo);
}

.carrusel-marco.carrusel-listo[data-hay-der="si"] {
    --carrusel-velo-der: var(--carrusel-velo);
}

/* La máscara se pone SÓLO cuando hay desborde. Si las prendas de la
   fila entran todas en pantalla no hay nada que insinuar, y de paso el
   navegador se ahorra el trabajo de dibujarla. */
.carrusel-listo[data-desbordado="si"] > .carrusel-productos {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--carrusel-velo-izq),
        #000 calc(100% - var(--carrusel-velo-der)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--carrusel-velo-izq),
        #000 calc(100% - var(--carrusel-velo-der)),
        transparent 100%
    );
}

/* EFECTO SECUNDARIO DE LA MÁSCARA, y hay que arreglarlo sí o sí: una
   máscara recorta TODO lo que se dibuje fuera de la caja del elemento,
   y el anillo de foco del punto 3 se dibuja justo ahí afuera
   (outline-offset: 6px). O sea que con la máscara puesta, el anillo
   desaparecería y el carrusel quedaría inusable con teclado.

   La solución: apagar el anillo de la fila y dibujarlo en el MARCO, que
   no tiene máscara. `:has()` se lee "el marco que TIENE adentro una
   fila enfocada".

   Todo va dentro de un @supports a propósito: si un navegador no
   entiende `:has()`, tampoco aplica el `outline: none` y se queda con
   el anillo del punto 3, que es lo correcto. Nunca puede quedarse sin
   ninguno de los dos. */
@supports selector(:has(*)) {

    .carrusel-listo > .carrusel-productos:focus-visible {
        outline: none;
    }

    .carrusel-listo:has(> .carrusel-productos:focus-visible) {
        outline: 2px solid var(--marca);
        outline-offset: 6px;
        border-radius: var(--radio);
    }
}


/* --- 6. Cursor de arrastre -------------------------------------------
   En el celular se arrastra con el dedo y se entiende solo. En la compu
   no hay ninguna pista de que la fila se puede agarrar, así que la
   damos con el cursor: manito abierta cuando se puede agarrar, manito
   cerrada mientras se arrastra. Es el mismo lenguaje que usa Google
   Maps y no hay que explicárselo a nadie.

   Sólo cuando hay desborde: ofrecer "agarrame" en una fila que no se
   mueve es mentirle al cliente.
   -------------------------------------------------------------------- */

.carrusel-listo[data-desbordado="si"] > .carrusel-productos {
    cursor: grab;
}

.carrusel-listo.arrastrando > .carrusel-productos {
    cursor: grabbing;

    /* Sin esto, arrastrar sobre los nombres de las prendas selecciona el
       texto y queda todo pintado de azul. */
    user-select: none;
    -webkit-user-select: none;
}

/* Mientras el JavaScript acomoda la fila (durante el arrastre y en el
   viaje hasta la tarjeta más cercana) hay que apagar dos cosas del
   punto 2, que si no pelean contra él:

     · scroll-snap-type: el imán. Prendido durante el arrastre tironea
       la fila de vuelta en cada pixel y se siente trabado.
     · scroll-behavior: smooth: hace que CADA movimiento sea una
       animación. Arrastrando, eso se siente como manejar sobre hielo:
       la fila llega tarde a donde está el mouse.

   Se prenden de nuevo apenas termina de acomodarse. */
.carrusel-listo.acomodando > .carrusel-productos {
    scroll-snap-type: none;
    scroll-behavior: auto;
}

/* El navegador tiene su propio "arrastrar imágenes" (el fantasmita
   translúcido para soltar la foto en otra ventana). Si no lo apagamos,
   se dispara apenas apretás sobre una foto y nuestro arrastre nunca
   arranca. El JavaScript también lo cancela; esto es el cinturón además
   del airbag. */
.carrusel-listo .carrusel-productos img {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}


/* --- 7. Las flechas de verdad -----------------------------------------
   Las crea el JavaScript y las mete adentro de `.carrusel-marco`, que
   tiene position: relative desde el punto 1: por eso el
   position: absolute de acá las ubica respecto del marco.

   ¿Por qué no están en el HTML? Porque si estuvieran y el JavaScript no
   cargara, quedarían dos botones dibujados que no hacen absolutamente
   nada. Creándolas desde el JS existen sólo si hay quien las haga
   funcionar.
   -------------------------------------------------------------------- */

.carrusel-flecha {
    position: absolute;
    top: var(--carrusel-flecha-y, 30%);
    z-index: 4;

    /* El translateY(-50%) es lo que CENTRA el botón en ese alto: sin él
       el botón arrancaría ahí y quedaría medio cuerpo más abajo. El
       scale es el rebotecito de entrada. */
    transform: translateY(-50%) scale(.92);

    display: none;              /* en celular ni existe: ver punto 8 */
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;

    border: 1px solid var(--borde);
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: var(--sombra);
    color: var(--tinta);
    cursor: pointer;

    /* Arrancan invisibles y "atravesables": aparecen al pasar el mouse
       por el marco. pointer-events: none es importante, si no un botón
       transparente se seguiría comiendo los clicks de la tarjeta que
       tiene debajo. */
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease,
                transform 180ms ease,
                color var(--transicion),
                border-color var(--transicion);
}

.carrusel-flecha svg { display: block; }

.carrusel-flecha-izq { left: 4px; }
.carrusel-flecha-der { right: 4px; }

/* Aparecen al pasar el mouse por el marco, y también cuando el foco del
   teclado está adentro: quien llegó con Tab las ve, aunque nunca haya
   tocado el mouse. */
.carrusel-listo:hover .carrusel-flecha:not(:disabled),
.carrusel-listo:focus-within .carrusel-flecha:not(:disabled) {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    pointer-events: auto;
}

.carrusel-flecha:not(:disabled):hover {
    border-color: var(--marca);
    color: var(--marca);
    background: #fff;
}

.carrusel-flecha:not(:disabled):active {
    transform: translateY(-50%) scale(.94);
}

/* Cuando ya no queda nada para ese lado, el JavaScript le pone
   `disabled` y acá desaparece del todo. Una flecha visible que no hace
   nada es lo peor que puede tener un carrusel: el cliente la aprieta,
   no pasa nada y piensa que la página está rota. */
.carrusel-flecha:disabled {
    opacity: 0;
    pointer-events: none;
}

.carrusel-flecha:focus-visible {
    opacity: 1;
    pointer-events: auto;
    outline: 2px solid var(--marca);
    outline-offset: 3px;
}

/* Con el JavaScript andando, las flechas nativas del punto 4 sobran:
   quedarían dos pares encimados. Van en reglas SEPARADAS a propósito:
   si se agrupan dos selectores y el navegador no entiende uno, tira la
   regla entera a la basura. */
@supports selector(::scroll-button(*)) {

    .carrusel-listo > .carrusel-productos::scroll-button(left) {
        display: none;
    }

    .carrusel-listo > .carrusel-productos::scroll-button(right) {
        display: none;
    }
}


/* --- 8. Menos movimiento / celular -----------------------------------
   En el celular las flechas sobran: se desliza con el dedo, y encima un
   botón de 44px tapando la foto de una tarjeta angosta es un estorbo.
   Aparecen sólo en pantallas grandes Y con mouse de verdad
   (`hover: hover` + `pointer: fine`): una tablet grande sigue siendo un
   dedo, no un puntero.

   El velo del punto 5 SÍ queda en el celular, y ahí es donde más
   trabaja: es lo que le avisa al cliente que la fila sigue.
   -------------------------------------------------------------------- */

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    .carrusel-listo .carrusel-flecha { display: grid; }
}

@media (max-width: 640px) {
    .carrusel-marco { --carrusel-velo: 30px; }
}

/* Quien pidió menos movimiento en su sistema no ve ni el desplazamiento
   suave, ni el fundido del velo, ni el rebotecito de las flechas: el
   carrusel salta directo a destino y los botones están o no están.

   tienda.css ya apaga las transiciones de todo el sitio con una regla
   global, pero acá se repite igual por dos motivos: el transition de
   una variable @property no es algo que nadie tenga en la cabeza, y si
   mañana esa regla global cambia, este archivo se sigue portando bien
   solo. */
@media (prefers-reduced-motion: reduce) {

    .carrusel-productos { scroll-behavior: auto; }

    .carrusel-marco.carrusel-listo { transition: none; }

    .carrusel-flecha {
        transition: none;
        transform: translateY(-50%);
    }

    .carrusel-listo:hover .carrusel-flecha:not(:disabled),
    .carrusel-listo:focus-within .carrusel-flecha:not(:disabled),
    .carrusel-flecha:not(:disabled):active {
        transform: translateY(-50%);
    }
}