/* =========================================================================
   MOIRE - la portada
   -------------------------------------------------------------------------
   Nodos 1:113 (1920) y 815:14 (375). Cinco bloques: hero en video, banner
   con las cuatro fotos y la marquesina, el stop-motion, la coleccion y el
   pie.

   AQUI HABIA UN ENVOLTORIO .home__pantalla Y YA NO ESTA (29/09/2026). La
   portada anterior era un solo bloque y el encargo era que cabecera y foto
   sumaran una pantalla justa; para no repetir aqui el alto de la cabecera
   -que vive en nav.css y cambia en 1200- se envolvian las dos en una caja de
   100vh y la foto se quedaba con lo que sobrase.

   El diseno nuevo le da al hero un alto propio y debajo vienen otros cuatro
   bloques, asi que ese problema desaparecio con su solucion. Queda escrito
   porque el truco era bueno y puede volver a hacer falta.
   ========================================================================= */

/* --- El hero: el video "Moire has arrived to Barcelona" ------------------

   EL ALTO SE DECLARA COMO PROPORCION Y NO EN vh. En el diseno son 1031 de
   un lienzo de 1920 en escritorio, y un cuadrado en movil. Con aspect-ratio
   el navegador reserva el hueco ANTES de que llegue el video, asi que la
   pagina no da un salto cuando entra; con una altura en vh habria que
   elegir un numero que no esta en ningun sitio del diseno.

   object-fit: cover Y NO contain, que es lo que pidio el responsable: "haz
   que los videos cubran todo el espacio". El material es vertical (9:16) y
   estos huecos son apaisado y cuadrado, asi que el navegador recorta. El
   fichero se guarda con su proporcion nativa justo para que pueda hacerlo;
   ver el comentario de assets/video en tools/procesa-imagenes.php.

   OJO CON LA NITIDEZ DEL HERO: el original mide 720 de ancho y este hueco
   pide 1920 en escritorio, o sea 2,6x de ampliacion. Se vera blando y esta
   asumido (29/09/2026); se ha pedido a diseno un master mejor. El
   stop-motion no tiene ese problema: llega a 1920 justo. */
/* EL POSTER VIVE AQUI Y NO EN EL ATRIBUTO poster (30/09/2026).

   Desde que el hero son DOS piezas -el montaje horizontal de 1920x1080 de
   768 en adelante y el vertical de 720x1280 por debajo, ver home.php- hace
   falta un poster por cada una. Y poster es UN atributo que no entiende de
   anchuras: puesto el del horizontal, un movil veria un instante el 16:9
   recortado al cuadrado -justo lo que se evito al repartir las piezas- y
   acto seguido arrancaria otra toma.

   Como fondo si se puede: un navegador NO se baja la imagen de fondo de una
   consulta de medios que no casa, asi que cada pantalla pide solo el suyo.
   Hace exactamente lo que hacia el atributo -tapar el hueco mientras el
   video llega- porque el <video> no pinta nada hasta que tiene el primer
   fotograma y lo que se ve por debajo es esto.

   EL NEGRO SE QUEDA DEBAJO como ultimo respaldo: si el poster tarda o no
   llega, lo que se ve es negro y no un blanco que cortaria la pagina en
   dos. Va en el atajo de background, antes de la imagen, asi que el color
   sigue ahi cuando la imagen carga. */
.home__hero {
  position: relative;
  aspect-ratio: 1 / 1;          /* el cuadrado de 375x375 del diseno movil */
  background: var(--c-negro) url("../video/moire-as-arrived-poster.jpg")
              center / cover no-repeat;
}

.home__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .home__hero {
    aspect-ratio: 1920 / 1031;  /* el hueco del diseno de escritorio */

    /* El poster del montaje horizontal, que es el que suena aqui. Solo
       background-image: el color y el encuadre los hereda de la regla de
       arriba. */
    background-image: url("../video/moire-as-arrived-16x9-poster.jpg");
  }
}


/* ==========================================================================
   EL BANNER: CUATRO FOTOS Y LA MARQUESINA
   --------------------------------------------------------------------------
   Nodos 810:2014 (1920) y 810:2239 (375). Todo el bloque es un enlace a
   /about; el marcado esta en inc/home-banner.php.

   LAS MEDIDAS DE MOVIL SON EXACTAMENTE DOS TERCIOS DE LAS DE ESCRITORIO, y
   no por casualidad: 20->13,333, 48->32, 80->53,333, 12->8. Es la misma
   composicion reescalada. Por eso aqui no hay un @media con dos juegos de
   numeros: hay un clamp por medida, con el vw calculado para que a 1920 de
   el valor del diseno y el suelo puesto en el de 375. Cinco medidas que
   crecen juntas en vez de cinco pares que hay que mantener sincronizados.

   1,0417vw = 20/1920.  2,5vw = 48/1920.  4,1667vw = 80/1920.  0,625vw = 12/1920.

   NO HAY BLOQUE prefers-reduced-motion: base.css ya deja toda animacion del
   sitio en 0,01ms y una sola repeticion cuando el sistema lo pide. Aqui eso
   deja las pistas en translateX(-50%), que con el contenido duplicado se ve
   IGUAL que en el origen: la marquesina queda quieta y legible, que es
   justo lo que hay que hacer.
   ========================================================================== */

.banner {
  display: block;
  overflow: hidden;   /* lo que se sale de la pista no asoma por los lados */
}

/* --- La tira de fotos --------------------------------------------------- */

/* MOVIL: las cuatro no caben -302 cada una sobre 375- asi que se desplazan.
   Es lo que pide la nota del artboard de movil, y es ademas la unica forma
   de que se puedan ver las cuatro. */
.banner__fotos {
  display: flex;
  width: max-content;
  animation: banner-desliza 45s linear infinite;
  will-change: transform;
}

.banner__foto {
  display: block;
  width: 302px;       /* del diseno de 375; el alto sale de la proporcion */
  height: auto;
  flex-shrink: 0;
}

/* --- La marquesina ------------------------------------------------------ */

.banner__marquesina {
  overflow: hidden;
  background: var(--c-crema);
  padding-block: clamp(13.333px, 1.0417vw, 20px);
}

/* 25s contra los 45s de las fotos, y esa diferencia ES el encargo: la nota
   del artboard de movil pide que las dos bandas corran a ritmos distintos
   para que haya parallax. Mismas velocidades = una sola banda ancha. */
.banner__pista {
  display: flex;
  width: max-content;
  animation: banner-desliza 25s linear infinite;
  will-change: transform;
}

.banner__juego {
  display: flex;
}

/* EL HUECO VA EN UN margin-right Y NO EN UN gap, y es lo que hace que el
   bucle no tenga costura.

   La animacion mueve la pista un -50%, o sea exactamente la mitad de su
   ancho, y eso solo cae en el principio de la copia si las dos mitades
   miden lo mismo. Con gap, la pista seria [juego][hueco][juego]: la mitad
   cae a medio hueco del sitio y en cada vuelta se ve un salto. Con el hueco
   dentro de cada item -incluido el ultimo- los dos juegos son identicos y
   quedan pegados, asi que el -50% es exacto. */
.banner__item {
  display: flex;
  align-items: flex-end;
  gap: clamp(8px, 0.625vw, 12px);
  margin-right: clamp(53.333px, 4.1667vw, 80px);
  white-space: nowrap;
}

.banner__conector {
  font-size: clamp(13.333px, 1.0417vw, 20px);
  line-height: 1.2;
  font-weight: var(--peso-regular);
  color: var(--c-burdeos);
}

.banner__palabra {
  font-size: clamp(32px, 2.5vw, 48px);
  line-height: 1;
  font-weight: var(--peso-bold);
  color: var(--c-rojo);
}

@keyframes banner-desliza {
  to { transform: translateX(-50%); }
}


/* --- De 768 en adelante: las fotos se paran ------------------------------
   Aqui las cuatro suman el ancho de la ventana, asi que no hay nada que
   desplazar: la nota del diseno de escritorio dice que solo corre la
   marquesina. La copia que hace el bucle sobra y se quita del todo, que en
   una pagina con video y stop-motion no es un detalle.

   25% Y NO 480px: en el diseno cada foto mide 480 y las cuatro suman los
   1920 del lienzo. En una pantalla mas ancha, 480 fijos dejarian una franja
   blanca a la derecha; en porcentaje siguen llenando la fila. */
@media (min-width: 768px) {
  .banner__fotos {
    width: 100%;
    animation: none;
  }

  .banner__foto {
    width: 25%;
  }

  .banner__foto--copia {
    display: none;
  }
}


/* =========================================================================
   EL STOP-MOTION
   -------------------------------------------------------------------------
   Nodos 804:2625 (1920x1024) y 815:83 (375x375). Mismo planteamiento que el
   hero: se declara la PROPORCION y no una altura, asi el navegador reserva
   el hueco antes de que llegue el video y la pagina no da el salto cuando
   entra. Un bloque de 1024px que aparece de golpe a media pagina empujaria
   hacia abajo todo lo que el visitante esta leyendo.

   Las dos proporciones son las dos del diseno: cuadrado en movil, 1920x1024
   de 768 en adelante. No es el mismo recorte estirado: son dos encuadres.
   ========================================================================= */

.home__stopmotion {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

@media (min-width: 768px) {
  .home__stopmotion {
    aspect-ratio: 1920 / 1024;
  }
}


/* =========================================================================
   LA COLECCION
   -------------------------------------------------------------------------
   Nodos 809:2221 (escritorio) y 815:84 + 810:2238 (movil).

   AQUI HAY DOS MAQUETACIONES DISTINTAS, no una encogida:

     MOVIL (hasta 1199)          ESCRITORIO (1200 en adelante)
     +---------------+           +----------------+---+---+
     |               |           |                | 1 | 2 |
     |     foto      |           |      foto      +---+---+
     | DISCOVER...   |           |                | 3 | 4 |
     +---------------+           | DISCOVER...    +---+---+
     | 1 | 2 | 3 |...|           |  (se queda)    | 5 | 6 |
     +---------------+           +----------------+---+---+
       se arrastra                 la foto quieta, las
       con el dedo                 tarjetas pasan al lado

   El corte esta en 1200 y no en los 768 del resto del sitio: por debajo de
   eso la columna de tarjetas se queda en unos 230px y el frasco tendria que
   encogerse tanto que dejaria de leerse el nombre. Que un bloque cambie en
   un ancho distinto a los demas no es una incoherencia; es que este necesita
   sitio para dos columnas AL LADO de una foto que se come la mitad.
   ========================================================================= */

.coleccion__descubre {
  position: relative;
  display: block;
}

/* La foto CUBRE su hueco. El fichero mide 1200x1500 (proporcion 0,80) y los
   dos huecos del diseno son 940x1186 (0,792) y 375x375: en ninguno de los
   dos encaja exacta, asi que o se recorta un poco o se deforma. Se recorta. */
.coleccion__foto {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* EL ROTULO, ENCIMA DE LA FOTO Y EN CREMA.
   Pegado a la esquina inferior izquierda con los margenes del diseno de
   movil (20 y 20). El color no se hereda del body: aqui el texto va sobre
   una fotografia, no sobre el blanco de la pagina. */
.coleccion__texto {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 20px 20px;
  color: var(--c-crema);

  /* ANCHO DE LA FOTO Y NI UN PIXEL MAS. Sin esto la caja mide lo que mida
     el texto y la frase se sale por la derecha de la fotografia -pasaba a
     1920 con la inglesa, que pinta mas ancho que la del diseno-. Con el
     ancho puesto, lo peor que puede pasar es que parta en dos renglones,
     que es feo pero se ve; salirse no se ve, se derrama sobre lo de al
     lado. border-box para que el padding cuente dentro. */
  width: 100%;
  box-sizing: border-box;
}

.coleccion__rotulo {
  font-size: 11px;
  line-height: 1.2;
  font-weight: var(--peso-bold);
  letter-spacing: 0.1em;
}

/* LA INGLESA. El diseno pide Edwardian Script ITC en escritorio y una
   cursiva de Financier en movil; las dos se sustituyen por Pinyon Script,
   que es la unica inglesa del proyecto -y el responsable confirmo el
   29/09/2026 que no hay ninguna italica-. El porque completo, en
   assets/css/fonts.css.

   line-height: 1 y no 1.2: Pinyon trae unos ascendentes larguisimos y con
   interlineado normal el bloque se separa de la esquina. */
.coleccion__claim {
  font-family: var(--font-script);
  font-size: 24px;
  line-height: 1;
}

/* --- Las tarjetas: en movil, una tira que se arrastra ---------------------
   Lo pide la nota del artboard de movil: "se desplazan horizontalmente
   arrastrando con el dedo (swipe tactil), no mediante scroll vertical".

   SCROLL NATIVO Y NO JAVASCRIPT. Un carrusel escrito a mano tendria que
   reimplementar la inercia, el rebote de los extremos, el arrastre con el
   raton, las flechas del teclado y el foco al tabular. overflow-x: auto las
   trae todas hechas y accesibles, y encima funciona antes de que cargue
   ningun script.

   LOS PUNTOS DE ANCLAJE (scroll-snap) hacen que el dedo siempre deje una
   tarjeta encuadrada en vez de media. 'mandatory' y no 'proximity' porque
   cada tarjeta ocupa la pantalla entera: media tarjeta a la vista no es un
   estado que tenga sentido dejar.

   LA BARRA SE ESCONDE pero el contenido NO deja de ser alcanzable: se puede
   arrastrar con el dedo, con el raton y con el tabulador -al enfocar una
   tarjeta el navegador la trae a la vista solo-. Esconder una barra que no
   se puede sustituir por nada seria distinto. */
.coleccion__tarjetas {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.coleccion__tarjetas::-webkit-scrollbar {
  display: none;
}

/* UNA PANTALLA POR TARJETA EN EL MOVIL, PERO CON TOPE. El diseno de 375
   dibuja la tarjeta a 375, o sea la ventana entera, y eso es lo que hace
   min(100%, 418px) por debajo de 418. De ahi para arriba -una tableta, una
   ventana de escritorio estrecha- la tarjeta se queda en los 418 del diseno
   de escritorio en vez de estirarse: a 1024 una sola tarjeta ocupaba la
   pantalla entera para ensenar un frasco de 262 centrado y un bloque de
   texto de 343, con medio metro de blanco a los lados. Con el tope se ven
   dos y media y se sigue arrastrando igual. */
.tarjeta-home {
  flex: 0 0 min(100%, 418px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 30px 16px;
  color: inherit;
  text-decoration: none;
}

/* EL FRASCO ENTERO Y A LA MISMA ALTURA EN TODAS.
   'contain' y no 'cover': un frasco recortado no sirve de nada. El alto
   fijo es lo que hace que los seis nombres empiecen a la misma altura
   aunque un frasco sea mas alto que otro; con alto automatico, la fila de
   tarjetas quedaria desalineada. */
.tarjeta-home__foto {
  display: block;
  width: 100%;
  height: 375px;
  object-fit: contain;
}

/* 343 es el ancho del bloque de texto en el diseno, mas estrecho que la
   caja de la tarjeta (386 en escritorio) y por eso centrado.
   min-height y no height: si manana una descripcion es mas larga, crece;
   con altura fija se saldria por debajo sin avisar. */
.tarjeta-home__info {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 343px;
  min-height: 122px;
}

.tarjeta-home__nombre {
  margin: 0;
  font-size: 38px;
  line-height: 42px;
  font-weight: var(--peso-bold);
  color: var(--c-rojo);
}

/* LA DESCRIPCION. El diseno la pone en Financier Display Medium, que no
   esta en el proyecto: --font-display resuelve a Neue Montreal, igual que
   en la ficha de producto (ver assets/css/producto.css). Se declara de
   todas formas -y no se deja heredar del body- para que quede escrito DONDE
   el diseno pide Financier, que es lo que hara falta el dia que se decida
   licenciarla o buscarle una serif de sustitucion. */
.tarjeta-home__claim {
  margin: 5px 0 0;
  font-family: var(--font-display);
  font-weight: var(--peso-medium);
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0.09em;
  color: var(--c-negro);
}

/* margin-top: auto lo empuja al fondo de los 122px, que es donde lo pone el
   diseno. Asi el formato queda alineado en las seis tarjetas aunque las
   descripciones ocupen dos lineas o tres. */
.tarjeta-home__formato {
  margin: auto 0 0;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: 0.09em;
  color: var(--c-negro);
}


/* --- De 1200 en adelante: la foto se queda quieta -------------------------
   Las medidas salen del lienzo de 1920: foto 940, hueco 48, las dos
   columnas de tarjetas, y 72 de margen a la derecha. A la izquierda no hay
   margen: la foto llega al borde.

   OJO CON DE QUE SON PORCENTAJE. El 48,9583% de la foto si es sobre el
   ancho de la pagina (940 de 1920), pero el hueco y el margen derecho van
   dentro de la columna de tarjetas, que mide 980 (1920-940): son 48/980 y
   72/980, no 48/1920 y 72/1920. Escritos sobre 1920 -que es el error que
   parece natural- el hueco salia casi la mitad de lo que toca.

   POR QUE ES SUFICIENTE CON position: sticky. El diseno dibuja 4 tarjetas
   -las que caben al lado de la foto- y la nota dice que el resto "entra de
   abajo hacia arriba dentro de este bloque". Con seis tarjetas la columna
   mide 1791 y la foto 1186: los 605 que sobran son exactamente lo que se
   recorre viendo entrar la tercera fila mientras la foto no se mueve. Es el
   efecto pedido, sin un renglon de JavaScript y sin secuestrar la rueda.

   EL top NEGATIVO NO ES UN APANO. La foto mide 61,77vw de alto -a 1920 son
   1186- y eso es MAS que la ventana de un portatil normal. Un sticky con
   top: 0 en un elemento mas alto que la ventana se pega por arriba y deja
   su parte de abajo fuera de la pantalla para siempre: justo donde esta el
   rotulo "Ready to take a bite?". Con top: 100vh - alto, la foto sube hasta
   que su pie toca el pie de la ventana y ahi se queda, que es lo que hace
   falta. El min(0px, ...) es para la ventana alta, donde la foto si cabe y
   el calculo daria un numero positivo que la empujaria hacia abajo. */
@media (min-width: 1200px) {
  .coleccion {
    display: grid;
    grid-template-columns: 48.9583% 1fr;
    align-items: start;
  }

  .coleccion__descubre {
    position: sticky;
    top: min(0px, calc(100vh - 61.7708vw));
  }

  .coleccion__foto {
    aspect-ratio: 940 / 1186;
  }

  /* Los margenes del diseno, en porcentaje DE LA FOTO y no de la pagina:
     74 a la izquierda y 55,7 a la derecha sobre los 940 de la foto. El de
     la derecha existe porque la caja de texto del diseno mide 810 y no 866:
     la frase termina antes del borde, no pegada a el. */
  .coleccion__texto {
    gap: clamp(6px, 0.55vw, 10.6px);
    padding: 0 5.928% clamp(40px, 4.4271vw, 85px) 7.872%;
  }

  .coleccion__rotulo {
    font-size: clamp(14px, 0.9799vw, 18.813px);
  }

  /* NO SON LOS 116,9 DEL DISENO, Y ES A PROPOSITO. Aquel cuerpo esta medido
     sobre Edwardian Script ITC, que no se puede usar; Pinyon pinta la misma
     frase un 6% mas ancha, y a 116,9 ocupaba 858 de los 810 que le reserva
     el diseno: llegaba pegada al borde de la foto.

     Y TAMPOCO SON LOS 108,8 QUE SALEN DE LA CUENTA. A ese cuerpo Pinyon
     ocupa 804,98 en una caja de 803,94: un pixel corto, o sea que la frase
     partia en dos renglones. Un ajuste que cuadra al pixel no aguanta nada
     -otra version de la fuente, otro navegador que redondee distinto, la
     frase en castellano el dia que marca la decida- y el sintoma no es un
     desbordamiento que se vea: es un renglon de mas.

     104,4 deja 31px de holgura, un 4%. La frase cabe en una linea con
     sitio de sobra, que es el encargo. */
  .coleccion__claim {
    font-size: clamp(56px, 5.48vw, 104.4px);
  }

  /* La tira se convierte en reticula. overflow y snap vuelven a su valor
     inicial: aqui no se arrastra nada, y dejar un contenedor con scroll
     horizontal que nunca desborda es una trampa para el dia que una tarjeta
     crezca un pixel de mas. */
  .coleccion__tarjetas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-left: 4.898%;
    padding-right: 7.347%;
  }

  /* El frasco se encoge con la columna. A 1200 la tarjeta se queda en unos
     230px y un alto de 375 dejaria el frasco -que es mas alto que ancho-
     apretado contra el texto. */
  .tarjeta-home__foto {
    height: clamp(260px, 19.5313vw, 375px);
  }

  .tarjeta-home__nombre {
    font-size: clamp(24px, 1.9792vw, 38px);
    line-height: 1.1;
  }
}