/**
 * DES Slider — hoja del front.
 *
 * Sin variables del tema a proposito: el modulo tiene que verse bien en
 * cualquier tienda, no solo en la que se estreno. Lo que el diseño deja
 * editable por slide (color del bloque de texto, opacidad y color de la
 * tipografia) llega como estilo en linea desde la plantilla.
 *
 * El slider ocupa el ANCHO COMPLETO DE SU PADRE. No lleva el truco del
 * `100vw` + `margin-left:-50vw` para escaparse de un contenedor: `100vw`
 * incluye la barra de scroll, y como esta pagina SI tiene scroll el slider
 * salia unos 15 px mas ancho que la ventana y aparecia scroll horizontal.
 *
 * Es el tema quien tiene que darle el ancho: la pagina que use este modulo
 * no debe envolverlo en un contenedor con `max-width`. En este proyecto eso
 * se resuelve en `_dev/css/components/_home.scss`.
 *
 * Los slides se APILAN de verdad, uno debajo de otro, y quien se desplaza es
 * la pagina. Es lo que hace el prototipo, que mueve el scrollTop de su
 * contenedor en vez de trasladar una pista: asi el pie queda justo debajo del
 * ultimo slide y se llega con scroll nativo, sin trucos.
 */

.deslider {
  position: relative;
  width: 100%;
  background: #d9d6d0;
  outline: none;
}

/* Sin `overscroll-behavior: contain`: con `overflow:hidden` el slider ES un
   contenedor de scroll, y `contain` corta el encadenado hacia la pagina. Eso
   dejaba la web clavada en el ultimo slide, sin poder bajar al pie. */

.deslider__slide {
  position: relative;
  width: 100%;
  height: 100vh;   /* para el navegador que no entienda las unidades nuevas */
  height: 100svh;
  overflow: hidden;
}

/* ------------------------------------- tactil: una imagen cada vez

   EN EL MOVIL PASA DE UNA EN UNA, como con la rueda. Lo pidio el cliente:
   apiladas con `sticky` la saliente se quedaba quieta mientras la entrante la
   tapaba, y eso es que «se pisen».

   LO HACE `scroll-snap`, NO EL JS, y en eso esta todo. El scroll lo sigue
   llevando el navegador —se desplaza de seguido, con su inercia— y lo unico
   que se le dice es donde puede descansar. Asi no hay ni un `preventDefault`
   ni un transform escrito a mano mientras el dedo se mueve, que es de donde
   salian los parpadeos de los dos intentos anteriores.

   MANDATORY Y NO PROXIMITY: con `proximity` el navegador decide si encaja o
   no, y lo que se pide es que SIEMPRE caiga una imagen entera. Y
   `scroll-snap-stop: always` encima, para que un gesto largo no se salte dos.

   Y EL PIE SIGUE ALCANZABLE. `mandatory` obliga a descansar en un punto de
   parada, y el pie no es ninguno, asi que por si solo dejaria la pagina
   clavada en el ultimo slide. Lo resuelve `front.js`: desde el principio del
   ultimo slide quita la clase de <html> y el encaje se apaga, igual que con
   la rueda el ultimo slide pasa a scroll libre.

   DOS CONDICIONES QUE NO SE PUEDEN ROMPER:
     1. El encaje va en <html>, que es quien se desplaza. Ponerlo en
        `.deslider` lo convertiria en un contenedor de scroll propio, y en iOS
        pasar de un scroll anidado al de la pagina obliga a levantar el dedo y
        volver a deslizar.
     2. Nada de `overscroll-behavior: contain` por el camino: corta el
        encadenado y deja la web clavada en el ultimo slide. */

html.deslider-nativo { scroll-snap-type: y mandatory; }

.deslider--tactil .deslider__slide {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* --------------------------------------------------------------- medios *//* --------------------------------------------------------------- medios */

.deslider__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.deslider__img,
.deslider__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* -------------------------------------------------------------- caption */

.deslider__caption {
  position: absolute;
  left: 48px;
  bottom: 56px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 560px;
  padding: 28px 32px;
  /* EL PREFIJO NO SOBRA: Safari no entendio `backdrop-filter` sin el hasta la
     18. Sin desenfoque el texto se queda sobre el color traslucido que elige
     el slide, que en una foto clara se lee regular. */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Medidas del lienzo: 12/.18em el antetitulo y 34/-.01em/1.1 el titulo. */
.deslider__kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.deslider__title {
  margin: 0;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-wrap: pretty;
}

.deslider__meta {
  margin: 0;
  font-size: 16px;
  opacity: .8;
}

/* El enlace del lienzo: 14 px, peso 500, subrayado con borde y 4 px de
   separacion. No va en mayusculas. */
.deslider__cta {
  /* Flex con hueco de 10: el lienzo pone la flecha a la derecha del texto y
     el subrayado por debajo de los dos. */
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: 8px;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

/* El boton de «ver imagen completa»: 13 px y sin borde, como en el lienzo. */
.deslider__full {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 8px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  opacity: .75;
  cursor: pointer;
}

.deslider__full:hover,
.deslider__full:focus-visible {
  border-bottom-color: currentColor;
  opacity: 1;
}

/* ------------------------------------------------------------ indicador */

/* El lienzo lo pone a la DERECHA y centrado en vertical, en columna, y le
   da el color del slide (`color: s.ink`). Nada de mix-blend-mode.

   Va FIJO: los slides se apilan y .deslider mide varias pantallas, asi que
   un `absolute` lo centraria respecto a toda la pila. */
.deslider__nav {
  position: fixed;
  right: 48px;
  top: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  letter-spacing: .1em;
  color: #111;
  transform: translateY(-50%);
  transition: color .3s ease, opacity .25s ease;
}

/* El color lo marca el tono del slide, igual que en la cabecera. */
.deslider.is-dark .deslider__nav { color: #fff; }

.deslider__bars {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.deslider__bar {
  width: 2px;
  height: 16px;
  padding: 0;
  border: 0;
  background: currentColor;
  opacity: .35;
  cursor: pointer;
  transition: height .3s ease, opacity .3s ease;
}

.deslider__total { opacity: .5; }

.deslider__bar.is-current {
  height: 40px;
  opacity: 1;
}

/* --------------------------------------------------------------- video */

/* El lienzo los pone abajo a la derecha, en fila y con el color del slide. */
.deslider__vcontrols {
  position: absolute;
  right: 48px;
  bottom: 56px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 16px;
}

.deslider__vbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.deslider__vprogress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 2px;
  background: rgba(255, 255, 255, .25);
}

.deslider__vprogress span {
  display: block;
  width: 0;
  height: 100%;
  background: #fff;
}

/* ------------------------------------------------------------ lightbox */

.deslider__lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(0, 0, 0, .92);
}

.deslider__lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.deslider__lbclose {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

/* ---------------------------------------------------------------- movil */

@media (max-width: 767px) {
  /* Las tres cosas que van pegadas al borde de abajo se suben por encima de
     la zona segura: en los iPhone con barra de inicio y en los Android con
     navegacion por gestos, esos 34 px de abajo se los come el sistema y el
     enlace de «ver obras» quedaba justo debajo. `env()` vale 0 donde no hay
     recorte, asi que no hace falta distinguir. */
  .deslider__caption {
    left: 20px;
    right: 76px;
    bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    max-width: none;
    padding: 20px 22px;
  }

  .deslider__title {
    font-size: 28px;
  }

  .deslider__meta {
    font-size: 14px;
  }

  .deslider__bar {
    height: 10px;
  }

  .deslider__bar.is-current {
    height: 28px;
  }

  .deslider__vcontrols {
    right: 20px;
    bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
  }

  /* El indicador va fijo y centrado: con el teclado abierto o la barra de
     direcciones puesta, `50%` de una ventana mas baja lo deja igual de
     centrado. Lo unico que hay que respetar es el recorte lateral del movil
     en horizontal, donde la muesca se mete por el lado. */
  .deslider__nav {
    right: calc(20px + env(safe-area-inset-right, 0px));
    gap: 10px;
  }

  /* El area pulsable de cada barra es de 2x10 px: imposible de acertar con el
     dedo. La barra se ve igual y la zona sensible pasa a 24x24 con un
     pseudoelemento, sin tocar la maquetacion de la columna. */
  .deslider__bar {
    position: relative;
  }

  .deslider__bar::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
  }
}

/* ------------------------------------------------- reducir movimiento */

@media (prefers-reduced-motion: reduce) {
  .deslider__media,
  .deslider__caption {
    transform: none !important;
    opacity: 1 !important;
  }

  .deslider__bar {
    transition: none;
  }
}

/* ------------------------------------------------------------------ el pie */

/* Al bajar del slider al pie el indicador desaparece: lo pide la nota 6 del
   lienzo. La cabecera la tiñe el tema, avisado por `deslider:foot`. */
.deslider.is-foot .deslider__nav,
.deslider.is-foot .deslider__vcontrols {
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}