/* ==========================================================================
   DOUI — Hoja de estilo principal
   Dirección: vitrina nocturna. Azul noche de base, un solo tono por galleta.
   Nada de esta hoja mezcla dos tonos de galleta sobre una misma superficie.
   ========================================================================== */

/* ------------------------------------------------------------- tipografía
   Las tres fuentes van servidas desde el propio proyecto. El sitio no hace
   ninguna petición externa: se puede abrir sin conexión y no se cae si un
   proveedor de fuentes falla. */

@font-face {
  font-family: 'Fredoka';
  src: url('../fonts/fredoka-variable.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('../fonts/sora-variable.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-variable.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-display: swap;
}

:root {
  /* Base de marca */
  --noche:      #060C26;
  --noche-hondo:#03071A;
  --azul:       #0A1136;
  --azul-alto:  #101A4B;
  --crema:      #F8F4EC;
  --cereza:     #E8203A;
  --humo:       #C2CBD8;
  --humo-bajo:  #9AA5B6;
  --tinta:      #191C21;

  /* Tono activo de la vitrina — lo reescribe el script */
  --tono:   #101A4B;
  --logo:   #5C7CFF;
  --sombra: #050A22;

  /* Ritmo */
  --marco: 1360px;
  --aire:  clamp(3.5rem, 7vw, 7rem);
  --curva: cubic-bezier(0.32, 0.72, 0, 1);
}


/* ------------------------------------------------------------------ fondo -- */
/* Cuatro manchas de azul a la deriva sobre azul noche, mas un reflejo que
   sigue al puntero. Va en position: fixed, asi que el desplazamiento de la
   pagina no lo repinta, y sólo se animan transform y opacidad. */

.fondo-vivo {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% -10%, #12224F 0%, transparent 60%),
    linear-gradient(180deg, #081035 0%, #060C26 45%, #03071A 100%);
  --mx: 50%;
  --my: 30%;
  --desliz: 0px;
}

.fondo-vivo .luz {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
  transform: translate3d(0, var(--desliz), 0);
}
.fondo-vivo .a {
  width: 62vw; height: 62vw;
  left: -14vw; top: -12vw;
  background: radial-gradient(circle, rgba(46, 84, 200, 0.55), transparent 68%);
  animation: deriva-a 34s ease-in-out infinite alternate;
}
.fondo-vivo .b {
  width: 54vw; height: 54vw;
  right: -12vw; top: 8vh;
  background: radial-gradient(circle, rgba(20, 52, 140, 0.6), transparent 68%);
  animation: deriva-b 41s ease-in-out infinite alternate;
}
.fondo-vivo .c {
  width: 70vw; height: 70vw;
  left: 6vw; bottom: -26vw;
  background: radial-gradient(circle, rgba(12, 34, 96, 0.68), transparent 70%);
  animation: deriva-c 48s ease-in-out infinite alternate;
}
.fondo-vivo .d {
  width: 34vw; height: 34vw;
  right: 14vw; bottom: 6vh;
  background: radial-gradient(circle, rgba(92, 124, 255, 0.28), transparent 66%);
  animation: deriva-d 29s ease-in-out infinite alternate;
}

/* El unico toque de cereza del fondo, muy contenido, para que el azul no
   se lea gris. */
.fondo-vivo .reflejo {
  position: absolute;
  inset: 0;
  display: block;
  background:
    radial-gradient(46vw 46vw at var(--mx) var(--my),
      rgba(120, 152, 255, 0.20) 0%, rgba(120, 152, 255, 0.07) 38%, transparent 66%),
    radial-gradient(30vw 30vw at calc(100% - var(--mx)) calc(100% - var(--my)),
      rgba(232, 32, 58, 0.07) 0%, transparent 62%);
  transition: background 0.5s linear;
}

@keyframes deriva-a {
  from { transform: translate3d(0, var(--desliz), 0) scale(1); }
  to   { transform: translate3d(9vw, calc(var(--desliz) + 7vh), 0) scale(1.14); }
}
@keyframes deriva-b {
  from { transform: translate3d(0, var(--desliz), 0) scale(1.08); }
  to   { transform: translate3d(-11vw, calc(var(--desliz) + 11vh), 0) scale(1); }
}
@keyframes deriva-c {
  from { transform: translate3d(0, var(--desliz), 0) scale(1); }
  to   { transform: translate3d(13vw, calc(var(--desliz) - 9vh), 0) scale(1.18); }
}
@keyframes deriva-d {
  from { transform: translate3d(0, var(--desliz), 0) scale(0.92); opacity: 0.7; }
  to   { transform: translate3d(-9vw, calc(var(--desliz) - 13vh), 0) scale(1.2); opacity: 1; }
}

@media (max-width: 700px) {
  /* Menos superficie desenfocada en telefono: es lo que cuesta caro. */
  .fondo-vivo .d { display: none; }
  .fondo-vivo .luz { filter: blur(64px); }
}


/* ------------------------------------------------------------ acceso -- */

/* Salto al contenido: primer tabulador de la pagina. */
.saltar {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 30;
  background: var(--cereza);
  color: #fff;
  padding: 0.85rem 1.4rem;
  border-radius: 0 0 0.8rem 0.8rem;
  text-decoration: none;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  transition: top 0.18s var(--curva);
}
.saltar:focus { top: 0; }

/* Sólo para lectores de pantalla. */
.solo-lectura {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sin script, el contenido no puede quedarse escondido. */
.sin-script .entra { opacity: 1; transform: none; }

/* Alto contraste del sistema: se quitan translucidos y se suben bordes. */
@media (prefers-contrast: more) {
  :root { --humo: #E4EAF3; --humo-bajo: #C6D0DE; }
  .fondo-vivo { display: none; }
  html, body { background: #03071A; }
  .nav { background: #03071A; backdrop-filter: none; }
  .dos article, .probador {
    background: #060C26;
    backdrop-filter: none;
  }
  .btn-linea { border-color: var(--crema); }
  .rail li a { color: #fff; }
  .vista, .paso, .carrusel-paso { border-color: var(--crema); }
  .pieza, .par-textura, .vitrina { --t-bajo: #fff; --t-medio: #fff; }
}

/* Zonas tactiles: nada por debajo de 44 px de alto util. */
.rail li a { min-height: 44px; display: flex; align-items: center; }
.nav-enlaces a { min-height: 44px; display: flex; align-items: center; }
.indice a { min-height: 44px; display: inline-flex; align-items: center; }

/* Reflow: a 320 px y con zoom al 400 % no puede haber scroll horizontal
   ni texto cortado. */
@media (max-width: 360px) {
  .marco { padding-inline: 1rem; }
  .hero .marca { font-size: clamp(3.6rem, 20vw, 5rem); }
  .par-pie h3 { font-size: 1rem; }
}

/* Espaciado de texto forzado por el usuario (WCAG 1.4.12): las cajas
   crecen en vez de recortar. */
.pieza-cuerpo, .par-pie, .ficha, .dos article {
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }

html { background: var(--noche-hondo); }

body {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--crema);
  background: transparent;
  position: relative;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--cereza); color: #fff; }

:focus-visible {
  outline: 3px solid var(--cereza);
  outline-offset: 3px;
  border-radius: 3px;
}
/* Sobre el rojo cereza y sobre el verde lima el propio cereza no se
   distingue: ahi el foco va en crema. */
.veda :focus-visible,
.claro :focus-visible {
  outline-color: var(--crema);
  box-shadow: 0 0 0 6px rgba(19, 26, 5, 0.55);
}

/* ----------------------------------------------------------- tipografía -- */

.display {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.92;
}

.tecnica {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.titulo {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(2.1rem, 5.2vw, 3.9rem);
  letter-spacing: -0.03em;
  line-height: 1.0;
}

.bajada {
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  color: var(--humo);
  max-width: 54ch;
  line-height: 1.7;
}

/* El logotipo es el archivo real de la marca, no tipografia: son letras
   dibujadas y Fredoka no las reproduce. Se pinta con dos mascaras —relleno
   y sombra— para que siga tomando el color de cada superficie, que es lo
   que exige el sistema. La inclinacion y el desplazamiento de la sombra ya
   vienen dentro del archivo.
   El tamaño lo sigue mandando font-size, asi que nada de lo que ya estaba
   escrito cambia de sitio. */
.marca {
  --marca-tinta:  var(--crema);
  --marca-sombra: #2A3A8C;
  position: relative;
  display: inline-block;
  width: 2.55em;
  aspect-ratio: 2974 / 1282;
  vertical-align: middle;
  flex: none;
}
.marca::before,
.marca::after {
  content: '';
  position: absolute;
  inset: 0;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.marca::after {
  content: '';
  position: absolute;
  inset: 0;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.marca::before {
  -webkit-mask-image: url('../iconos/mascara-sombra.png');
          mask-image: url('../iconos/mascara-sombra.png');
  background-color: var(--marca-sombra);
}
.marca::after {
  -webkit-mask-image: url('../iconos/mascara-relleno.png');
          mask-image: url('../iconos/mascara-relleno.png');
  background-color: var(--marca-tinta);
}
/* Si el navegador no admite mascaras, se ve el logotipo completo en sus
   colores originales antes que nada. */
@supports not ((-webkit-mask-image: url('')) or (mask-image: url(''))) {
  .marca::before { display: none; }
  .marca::after {
    background: url('../iconos/doui-logo.png') center/contain no-repeat;
  }
}

/* ------------------------------------------------------------ estructura -- */

.marco {
  width: 100%;
  max-width: var(--marco);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3.5rem);
}

/* El aire va arriba y no a los dos lados. Cada seccion lo ponia arriba y
   abajo, asi que entre dos seguidas habia dos: 230 px de nada a 1280, que
   es lo que hacia que debajo de Las cajas pareciera que se habia acabado la
   pagina. Con el aire solo arriba, la distancia entre el final de una y el
   principio de la siguiente es exactamente una vez el aire.

   Las que llevan color o borde propio si lo necesitan a los dos lados: sin
   el de abajo, su contenido toca el canto de la banda. */
.bloque { padding-block: var(--aire) 0; }
.bloque.tinta { padding-block: var(--aire); }

/* Detras de una con banda propia no hace falta aire arriba: la banda ya
   puso el suyo abajo. Sin esto, las dos secciones con color -Bites y La
   Bites- volvian a sumar dos aires y eran las que mas separadas se veian
   de todas. */
.bloque.tinta + .bloque { padding-top: 0; }

/* La ultima antes del pie: ahi no hay una seccion siguiente que ponga la
   distancia, asi que la pone ella. */
.bloque:last-of-type { padding-bottom: var(--aire); }

.eyebrow {
  color: var(--cereza);
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: currentColor;
  flex: none;
}

/* ------------------------------------------------------------ navegación -- */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(6, 12, 38, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(248, 244, 236, 0.07);
}
.nav-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 62px;
}
.nav .marca {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1.5rem;
  --marca-tinta: #7A93FF;
  --marca-sombra: var(--noche);
  text-decoration: none;
}
.nav-enlaces {
  display: flex;
  min-width: 0;
  gap: clamp(1rem, 2.4vw, 2.2rem);
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-enlaces::-webkit-scrollbar { display: none; }
.nav-enlaces a {
  color: var(--humo);
  text-decoration: none;
  white-space: nowrap;
  padding-block: 0.5rem;
  transition: color 0.18s var(--curva);
}
.nav-enlaces a:hover { color: var(--crema); }

/* ------------------------------------------------------------------ hero -- */

/* El hero es solo palabra. La imagen del producto la pone el carrusel,
   que va debajo y a lo ancho: dieciseis sabores en dos texturas necesitan
   sitio, y encajonarlos en una columna estrecha los desperdiciaba. */
.hero {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
}
.hero::before {
  content: '';
  position: absolute;
  inset: -20% 0 auto -30%;
  height: 80%;
  background: radial-gradient(ellipse at 25% 40%, rgba(92, 124, 255, 0.10), transparent 62%);
  pointer-events: none;
}
.hero-texto {
  position: relative;
  max-width: 62ch;
  display: grid;
  justify-items: center;
}
.hero .marca {
  font-size: clamp(5rem, 15vw, 12rem);
  margin-bottom: 1.4rem;
}
.hero-lema {
  font-size: clamp(1.35rem, 3.1vw, 2.35rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 0.9rem;
}
.hero-lema em {
  font-style: normal;
  color: var(--cereza);
  font-weight: 500;
}
.hero-pie {
  color: var(--humo);
  max-width: 56ch;
  margin-bottom: 2rem;
}
/* La banda del carrusel: lo primero que se ve despues del nombre, a todo
   lo ancho, que es lo que pedian dieciseis sabores en dos texturas. */
/* Sin relleno abajo: la seccion que viene detras pone su aire arriba, y
   los dos juntos sumaban 167 px. Es el mismo criterio que .bloque. */
.banda-carrusel {
  padding-block: 0;
}
.banda-carrusel .carrusel-pista { border-radius: 1.6rem; }

/* --------------------------------------------------------------- botones -- */

.acciones { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.btn {
  /* appearance y background van aqui porque .btn lo llevan tanto <a> como
     <button>, y un <button> sin fondo declarado se queda con el gris del
     navegador. Pasaba en «O pagar en linea»: texto crema sobre #F0F0F0,
     que no se leia. En los <a> no se notaba, y por eso habia durado. */
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--curva), box-shadow 0.18s var(--curva),
              background-color 0.18s var(--curva), color 0.18s var(--curva);
}
.btn-lleno {
  background: var(--cereza);
  color: #fff;
  box-shadow: 0 5px 0 #6E0A1B;
}
.btn-lleno:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #6E0A1B; }
.btn-lleno:active { transform: translateY(2px); box-shadow: 0 2px 0 #6E0A1B; }

.btn-linea {
  color: var(--crema);
  border-color: rgba(248, 244, 236, 0.28);
}
.btn-linea:hover { border-color: var(--crema); background: rgba(248, 244, 236, 0.07); }
.btn-linea:active { transform: translateY(1px); }

/* ------------------------------------------------------------- la regla -- */

.regla { border-top: 1px solid rgba(248, 244, 236, 0.08); }
.regla-cuerpo {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.regla-texto p { color: var(--humo); margin-bottom: 1.1rem; max-width: 56ch; }
.regla-texto p:last-child { margin-bottom: 0; }
.regla-texto strong { color: var(--crema); font-weight: 500; }

/* Demostración viva: mismas letras, catorce trajes. */
.probador {
  border: 1px solid rgba(248, 244, 236, 0.12);
  border-radius: 1.75rem;
  overflow: hidden;
  background: rgba(248, 244, 236, 0.04);
  backdrop-filter: blur(6px);
}
.probador-lienzo {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background-color: var(--tono);
  transition: background-color 0.6s var(--curva);
}
.probador-lienzo .marca {
  font-size: clamp(3rem, 8vw, 5.5rem);
}
.probador-tira {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid rgba(248, 244, 236, 0.1);
}
.probador-tira button {
  aspect-ratio: 1;
  border: 0;
  border-right: 1px solid rgba(5, 10, 34, 0.35);
  border-bottom: 1px solid rgba(5, 10, 34, 0.35);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: transform 0.2s var(--curva);
}
.probador-tira button:hover,
.probador-tira button[aria-pressed='true'] { transform: scale(1.14); z-index: 1; }
.probador-tira button::after {
  content: '';
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.2s var(--curva);
}
.probador-tira button[aria-pressed='true']::after { opacity: 1; }
.probador-pie {
  padding: 0.85rem 1.1rem;
  color: var(--humo-bajo);
  border-top: 1px solid rgba(248, 244, 236, 0.1);
}

/* -------------------------------------------------------------- vitrina -- */
/* El elemento firma: la sala entera se pinta del tono de la galleta activa. */

.vitrina,
.pieza,
.probador {
  --t-alto:  #fff;
  --t-medio: rgba(255, 255, 255, 0.92);
  --t-bajo:  rgba(255, 255, 255, 0.85);
  --t-linea: rgba(255, 255, 255, 0.18);
  --t-borde: rgba(255, 255, 255, 0.3);
}
/* Verde lima claro: la tinta se invierte para que siga leyendose. */
.vitrina.claro,
.pieza.claro,
.probador.claro {
  --t-alto:  #131A05;
  --t-medio: rgba(19, 26, 5, 0.92);
  --t-bajo:  rgba(19, 26, 5, 0.82);
  --t-linea: rgba(19, 26, 5, 0.22);
  --t-borde: rgba(19, 26, 5, 0.38);
}

.vitrina .marca,
.probador .marca {
  --marca-tinta:  var(--logo);
  --marca-sombra: var(--sombra);
  transition: none;
}

.vitrina {
  /* Cabe en una pantalla. La galleta es lo que hay que ver, y para verla no
     se debe tener que bajar: el sabor se elige mirandola.

     svh y no vh: en el movil, vh cuenta la barra del navegador que luego se
     esconde, asi que con vh la seccion siempre sale un poco mas alta que la
     pantalla y la galleta queda cortada justo por abajo.

     El relleno se mide en svh y no en rem por lo mismo: en una pantalla
     baja tiene que encogerse, o se come el sitio de la foto. */
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-block: clamp(1.25rem, 4svh, 3.5rem);
  background-color: var(--tono);
  transition: background-color 0.75s var(--curva);
  position: relative;
  overflow: hidden;
}
.vitrina::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 22% 12%, rgba(255, 255, 255, 0.09), transparent 58%);
  pointer-events: none;
}
.vitrina-cuerpo {
  position: relative;
  display: grid;
  grid-template-columns: 230px 1fr 1.05fr;
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: center;
  /* Sin suelo de altura: el que mandaba antes -640 px- sumaba al relleno y
     sacaba la seccion de la pantalla. Ahora la altura la fija la foto. */
  min-height: 0;
}
.vitrina-cuerpo > * { min-width: 0; }

/* La tercera columna: la ficha y, debajo, el boton de anadir. Van juntos
   pero separados, porque la ficha es una region viva que se lee entera en
   cada cambio de sabor y el boton no tiene por que leerse con ella. */
.vitrina-lado {
  display: grid;
  gap: clamp(0.9rem, 2.2svh, 1.6rem);
  align-content: center;
}

.rail { border-left: 1px solid var(--t-linea); max-width: 100%; }
.rail li a {
  display: block;
  padding: 0.42rem 0 0.42rem 1rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--t-bajo);
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.35;
  cursor: pointer;
  transition: color 0.25s var(--curva), border-color 0.25s var(--curva),
              padding-left 0.25s var(--curva);
}
.rail li a:hover { color: var(--t-alto); padding-left: 1.35rem; }
.rail li a[aria-current='true'] {
  color: var(--t-alto);
  font-weight: 500;
  border-left-color: var(--logo);
  padding-left: 1.35rem;
}

.escena { position: relative; }
/* El nombre grande encima de la foto se encoge con la pantalla: en una
   baja, cada linea que ocupa se la quita a la galleta. */
.escena-marca {
  font-size: clamp(1.9rem, min(5vw, 6svh), 4rem);
  margin-bottom: clamp(0.6rem, 1.6svh, 1.5rem);
}
/* La foto la manda el alto disponible, no el ancho de su columna: es la
   unica forma de que quepa en pantallas bajas sin recortarla. Con
   max-width: 100 % vuelve a mandar el ancho cuando la columna es lo
   estrecho, y entonces el alto baja solo por la proporcion. */
.escena-foto {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  height: min(58svh, 520px);
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.42);
}
.escena-foto img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.55s var(--curva), transform 0.9s var(--curva);
  transform: scale(1.05);
}
.escena-foto img.activa { opacity: 1; transform: scale(1); }

.ficha { color: var(--t-medio); }
/* Todo lo de la ficha se mide contra el alto de la pantalla ademas del
   ancho: en un portatil bajo la letra encoge y la galleta se queda entera,
   que es lo que se ha venido a ver. */
.ficha-contador { color: var(--t-bajo); margin-bottom: clamp(0.4rem, 1.2svh, 1rem); }
.ficha-nombre {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.6rem, min(4.4vw, 5svh), 3.2rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--t-alto);
  margin-bottom: clamp(0.45rem, 1.2svh, 0.9rem);
}
.ficha-nota {
  max-width: 40ch;
  margin-bottom: clamp(0.9rem, 2.4svh, 1.8rem);
  font-size: clamp(0.88rem, 1.9svh, 1rem);
  line-height: 1.5;
}
.ficha-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: 1px;
  background: var(--t-linea);
  border: 1px solid var(--t-linea);
  border-radius: 0.85rem;
  overflow: hidden;
  margin-bottom: clamp(0.9rem, 2.4svh, 1.8rem);
}
.ficha-datos div {
  background-color: var(--tono);
  padding: 0.85rem 0.9rem;
  transition: background-color 0.75s var(--curva);
}
.ficha-datos dt { color: var(--t-bajo); margin-bottom: 0.3rem; }
.ficha-datos dd {
  margin: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--t-alto);
  font-variant-numeric: tabular-nums;
}
.texturas {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: var(--t-linea);
  margin-bottom: 1.3rem;
}
.texturas button {
  border: 0;
  background: transparent;
  color: var(--t-alto);
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  min-height: 44px;
  padding: 0 1.25rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s var(--curva), color 0.2s var(--curva);
}
.texturas button:hover { background: var(--t-linea); }
.texturas button[aria-pressed='true'] {
  background: var(--t-alto);
  color: var(--tono);
}
.vistas {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1.6rem;
}
.vista {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.85rem 0.35rem 0.35rem;
  border: 1.5px solid var(--t-borde);
  border-radius: 999px;
  background: transparent;
  color: var(--t-bajo);
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 0.88rem;
  min-height: 44px;
  cursor: pointer;
  transition: border-color 0.2s var(--curva), background-color 0.2s var(--curva),
              color 0.2s var(--curva);
}
.vista img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.vista:hover { border-color: var(--t-alto); background: var(--t-linea); }
.vista[aria-pressed='true'] {
  background: var(--t-alto);
  border-color: var(--t-alto);
  color: var(--tono);
  font-weight: 500;
}
.ficha-pasos { display: flex; gap: 0.6rem; }
.paso {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--t-borde);
  background: transparent;
  color: var(--t-alto);
  cursor: pointer;
  transition: background-color 0.2s var(--curva), border-color 0.2s var(--curva),
              transform 0.2s var(--curva);
}
.paso:hover { background: var(--t-linea); border-color: var(--t-alto); }
.paso:active { transform: scale(0.94); }
.paso svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ------------------------------------------------------------- texturas -- */

.texturas-bloque {
  border-top: 1px solid rgba(248, 244, 236, 0.08);
}
.dos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: 1rem;
}
.dos article {
  border: 1px solid rgba(248, 244, 236, 0.14);
  border-radius: 1.35rem;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  background: rgba(248, 244, 236, 0.05);
  backdrop-filter: blur(6px);
}
.dos h3 {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.8rem;
}
.dos p { color: var(--humo); margin-bottom: 1rem; }
.dos p:last-child { margin-bottom: 0; }
.dos .marcador {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: var(--cereza);
  color: #fff;
  margin-bottom: 1.1rem;
}


/* -------------------------------------------------------------- carrusel -- */

.carrusel {
  position: relative;
  margin-top: 2.5rem;
  overflow: hidden;
  border-radius: 1.5rem;
  padding-bottom: 3.6rem;
}
.carrusel:focus-visible { outline: 2px solid var(--cereza); outline-offset: 4px; }

.carrusel-pista {
  display: flex;
  will-change: transform;
  cursor: grab;
  touch-action: pan-y;          /* el gesto horizontal es nuestro, el vertical del navegador */
  user-select: none;
  -webkit-user-select: none;
}
.carrusel.arrastrando .carrusel-pista { cursor: grabbing; }

/* <picture> es solo el envoltorio que deja al navegador elegir formato y
   tamano. Que no ocupe sitio: asi cada regla escrita para el <img> sigue
   valiendo sin tocar nada. */
picture { display: contents; }

/* Aqui hubo un content-visibility: auto con su contain-intrinsic-size, para
   que el navegador no pintara las cuarenta y seis tarjetas que no se ven.
   Se quito: el tamano de reserva le fijaba 520 px de alto a todas, tambien
   a las que si se ven, y como el contenido mide 409 quedaban 111 px de
   color muerto debajo de cada tarjeta. Un tamano de reserva fijo no puede
   seguir a un alto que depende del ancho de la tarjeta, y ese ancho lo
   calcula el script segun la pantalla.

   Sale barato quitarlo: las fotos del carrusel se bajan ahora en AVIF de
   320 px, unos 14 kB cada una, asi que descodificarlas ya no cuesta lo que
   costaba cuando eran los JPEG de 784 px. */
.par-textura {
  --t-alto:  #fff;
  --t-bajo:  rgba(255, 255, 255, 0.85);
  --t-linea: rgba(255, 255, 255, 0.18);
  flex: none;
  background-color: var(--tono);
  border-radius: 1.35rem;
  overflow: hidden;
  color: var(--t-alto);
}
.par-textura.claro {
  --t-alto:  #131A05;
  --t-bajo:  rgba(19, 26, 5, 0.82);
  --t-linea: rgba(19, 26, 5, 0.22);
}

.par-fotos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--t-linea);
}
.par-fotos figure {
  position: relative;
  margin: 0;
  background-color: var(--tono);
}
.par-fotos img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.par-fotos figcaption {
  position: absolute;
  left: 0.7rem;
  bottom: 0.7rem;
  background: var(--t-alto);
  color: var(--tono);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

/* El pie de la tarjeta: antes eran 1,3 rem de aire por los cuatro costados
   para decir un nombre y dos pesos. Ahora dice tambien de que es la
   galleta, en menos alto del que ocupaba sin decirlo. */
.par-pie {
  padding: 0.5rem 0.8rem 0.55rem;
  display: grid;
  gap: 0.1rem;
}
.par-pie-alto {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.par-pie h3 {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--t-alto);
  min-width: 0;
  overflow-wrap: anywhere;
}
.par-pesos {
  color: var(--t-bajo);
  font-size: 0.62rem;
  white-space: nowrap;
  flex: none;
}
.par-descriptor {
  color: var(--t-bajo);
  font-size: 0.72rem;
  line-height: 1.3;
  /* Dos lineas como maximo: las tarjetas tienen que medir todas igual o la
     pista del carrusel cambia de alto al pasar. */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.carrusel-paso {
  position: absolute;
  top: calc(50% - 2.6rem);
  transform: translateY(-50%);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 0;
  background: rgba(5, 10, 34, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--crema);
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.2s var(--curva), transform 0.2s var(--curva);
}
.carrusel-paso:hover { background: rgba(5, 10, 34, 0.92); }
.carrusel-paso:active { transform: translateY(-50%) scale(0.94); }
.carrusel-paso svg { width: 18px; height: 18px; }
.carrusel-paso.izq { left: 0.9rem; }
.carrusel-paso.der { right: 0.9rem; }

.carrusel-mandos {
  position: absolute;
  left: 0; right: 0; bottom: 0.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.carrusel-pausa {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(248, 244, 236, 0.28);
  background: transparent;
  color: var(--humo);
  cursor: pointer;
  transition: border-color 0.2s var(--curva), color 0.2s var(--curva),
              background-color 0.2s var(--curva);
}
.carrusel-pausa:hover { color: var(--crema); border-color: var(--crema); background: rgba(248, 244, 236, 0.08); }
.carrusel-pausa svg { width: 13px; height: 13px; fill: currentColor; }
.carrusel-pausa .icono-play { display: none; }
.carrusel-pausa[aria-pressed='true'] .icono-play { display: block; }
.carrusel-pausa[aria-pressed='true'] .icono-pausa { display: none; }

.carrusel-pie {
  position: static;
  text-align: center;
  color: var(--humo);
  margin: 0;
}

@media (max-width: 700px) {
  .par-pie { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
  .carrusel-paso { width: 44px; height: 44px; }
  .carrusel-paso.izq { left: 0.5rem; }
  .carrusel-paso.der { right: 0.5rem; }
}

/* ---------------------------------------------------------------- carta -- */

.carta-cabeza {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 3rem;
}
.rejilla {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
}
.pieza {
  --tono: #101A4B;
  --logo: #5C7CFF;
  grid-column: span 2;
  position: relative;
  border-radius: 1.35rem;
  overflow: hidden;
  background-color: var(--tono);
  text-decoration: none;
  color: var(--t-medio);
  display: flex;
  flex-direction: column;
  transition: transform 0.32s var(--curva), box-shadow 0.32s var(--curva);
}
.pieza.firma { grid-column: span 3; }
.pieza.ancha {
  grid-column: span 6;
  flex-direction: row;
  align-items: stretch;
}
.pieza.ancha .pieza-foto { aspect-ratio: auto; flex: 0 0 42%; }
.pieza.ancha .pieza-cuerpo { justify-content: center; padding: clamp(1.4rem, 3vw, 2.6rem); }
.pieza.ancha .pieza-nombre { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.pieza.ancha .pieza-nota { font-size: 0.95rem; max-width: 46ch; }
.pieza.ancha .pieza-tono { margin-top: 1.2rem; padding-top: 0; }
.pieza:hover { transform: translateY(-5px); box-shadow: 0 26px 52px rgba(0, 0, 0, 0.45); }
.pieza:active { transform: translateY(-1px); }
/* Las fotografias son 2:3 verticales. En una tarjeta ancha, un hueco 4:3
   recorta la mitad de arriba y la de abajo y todavia se ve bien la galleta.
   En telefono la tarjeta mide 169 px: ese mismo 4:3 la deja en 127 px de
   alto, o sea una franja de galleta. Mas abajo se corrige. */
.pieza-foto {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--tono);
}
.pieza.firma .pieza-foto { aspect-ratio: 16 / 9; }
.pieza-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--curva);
}
.pieza:hover .pieza-foto img { transform: scale(1.05); }
.pieza-cuerpo {
  padding: 1.15rem 1.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.pieza-orden { color: var(--t-bajo); }
.pieza-nombre {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  color: var(--t-alto);
  font-size: 1.32rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.pieza-nota {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--t-medio);
}
.pieza-tono {
  margin-top: auto;
  padding-top: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--t-bajo);
}
.pieza-aviso {
  font-size: 0.86rem;
  color: var(--t-bajo);
  padding: 0.45rem 0.65rem;
  border-radius: 0.5rem;
  background: var(--t-linea);
  align-self: flex-start;
}
.pieza-tono i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--logo);
  flex: none;
}

/* --------------------------------------------------------------- docena -- */

.docena {
  background: linear-gradient(180deg, rgba(6, 12, 38, 0.55), rgba(3, 7, 26, 0.75));
  border-top: 1px solid rgba(248, 244, 236, 0.08);
  border-bottom: 1px solid rgba(248, 244, 236, 0.08);
}

/* -------------------------------------------------------------- sistema -- */

.sistema-lamina {
  border-radius: 1.35rem;
  overflow: hidden;
  border: 1px solid rgba(248, 244, 236, 0.1);
  margin-bottom: 3rem;
}
.sistema-lamina img { width: 100%; height: auto; }

.sistema-cols {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}


.lista-regla li {
  padding: 0.7rem 0 0.7rem 1.6rem;
  border-bottom: 1px solid rgba(248, 244, 236, 0.07);
  color: var(--humo);
  position: relative;
  font-size: 1rem;
}
.lista-regla li::before {
  content: '';
  position: absolute;
  left: 0; top: 1.2rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cereza);
}
.lista-regla li strong { color: var(--crema); font-weight: 500; }


.paleta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
}
.color {
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(248, 244, 236, 0.1);
}
.color span {
  display: block;
  height: 76px;
}
.color p {
  padding: 0.8rem 0.9rem 0.9rem;
  font-size: 0.95rem;
  color: var(--crema);
  background: rgba(248, 244, 236, 0.04);
}

/* ---------------------------------------------------------------- pedir -- */

.pedir {
  border-top: 1px solid rgba(248, 244, 236, 0.08);
}
.pasos-pedir {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin: 2.5rem 0;
  counter-reset: paso;
}
.pasos-pedir li {
  counter-increment: paso;
  border: 1px solid rgba(248, 244, 236, 0.14);
  border-radius: 1.35rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: rgba(248, 244, 236, 0.05);
  backdrop-filter: blur(6px);
}
.pasos-pedir li::before {
  content: counter(paso, decimal-leading-zero);
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--cereza);
  margin-bottom: 0.9rem;
}
.pasos-pedir h3 {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.pasos-pedir p { color: var(--humo); font-size: 0.97rem; }

.pie-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  justify-content: center;
  margin-bottom: 2rem;
}
.pie-enlaces a {
  color: var(--humo);
  text-decoration: none;
  font-size: 0.95rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-underline-offset: 3px;
}
.pie-enlaces a:hover { color: var(--crema); text-decoration: underline; }
.pie-enlaces a[aria-current='page'] { color: var(--crema); }

@media (max-width: 780px) {
  .pasos-pedir { grid-template-columns: 1fr; }
}

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

.pie {
  padding-block: clamp(4rem, 8vw, 7rem) 3rem;
  text-align: center;
}
.pie .marca {
  font-size: clamp(4rem, 13vw, 9rem);
  margin-bottom: 1.5rem;
}
.pie-lema { font-size: 1.15rem; color: var(--humo); margin-bottom: 0.4rem; }
.pie-cierre { color: var(--cereza); font-weight: 500; margin-bottom: 3rem; }
.pie-legal {
  border-top: 1px solid rgba(248, 244, 236, 0.09);
  padding-top: 1.8rem;
  color: var(--humo);
  font-size: 0.9rem;
  line-height: 1.8;
  max-width: 62ch;
  margin-inline: auto;
}

/* --------------------------------------------------------------- entrada -- */

.entra {
  opacity: 0;
  transform: translateY(20px);
}
.entra.dentro {
  opacity: 1;
  transform: none;
  transition: opacity 0.75s var(--curva), transform 0.75s var(--curva);
}

/* --------------------------------------------------------------- angosto -- */

@media (max-width: 1080px) {
  .vitrina-cuerpo { grid-template-columns: 190px 1fr 1fr; min-height: 0; }
  .rejilla { grid-template-columns: repeat(4, 1fr); }
  .pieza.firma { grid-column: span 2; }
  .pieza.ancha { grid-column: span 4; }
}

@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .regla-cuerpo,
  .sistema-cols { grid-template-columns: 1fr; }
  .vitrina-cuerpo { grid-template-columns: 1fr; gap: 2rem; }
  .rail {
    border-left: 0;
    border-top: 1px solid var(--t-linea);
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-top: 0.9rem;
    scrollbar-width: none;
    order: 3;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail li a {
    border-left: 0;
    border-top: 2px solid transparent;
    padding: 0.5rem 0.85rem;
    white-space: nowrap;
    border-radius: 999px;
    background: var(--t-linea);
  }
  .rail li a:hover,
  .rail li a[aria-current='true'] { padding-left: 0.85rem; }
  .rail li a[aria-current='true'] { background: #fff; color: var(--tono); border-top-color: transparent; }
  .escena { order: 1; }
  .escena-foto { aspect-ratio: 4 / 5; width: min(100%, 44vh); margin-inline: auto; }
  .ficha { order: 2; }
  .dos { grid-template-columns: 1fr; }
}

/* En telefono las tarjetas de la carta son estrechas y un hueco apaisado
   las deja ensenando una franja. Aqui el hueco se pone de pie y se parece
   al 2:3 de la fotografia: se ve la galleta entera o casi. */
@media (max-width: 880px) {
  .pieza-foto,
  .pieza.firma .pieza-foto { aspect-ratio: 4 / 5; }
}

@media (max-width: 620px) {
  .rejilla { grid-template-columns: repeat(2, 1fr); }
  .pieza, .pieza.firma, .pieza.ancha { grid-column: span 2; }
  .pieza.ancha { flex-direction: column; }
  .pieza.ancha .pieza-foto { flex: none; }
  /* 16:10 en una tarjeta de 169 px dejaba la foto en 105 px de alto: una
     franja del centro de una galleta que es 2:3 y esta de pie. De pie
     tambien el hueco, se ve la galleta. */
  .pieza-foto,
  .pieza.firma .pieza-foto,
  .pieza.ancha .pieza-foto { aspect-ratio: 4 / 5; }
  .probador-tira { grid-template-columns: repeat(7, 1fr); }
  .acciones .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------------------------------------------------------- menos motion -- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fondo-vivo .luz { animation: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .entra { opacity: 1; transform: none; }
}

/* ------------------------------------------------- las fotos del empaque -- */
/* Dos cosas que nadie sabe hasta que abre la caja: que hay dos tamanos, y
   que cada galleta viene en su propio papel. Van antes del armador, que es
   donde se decide cual de las dos cajas se lleva. */

.cajas-fotos {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 861px) {
  .cajas-fotos { grid-template-columns: 1fr 1fr; }
}

.caja-foto { margin: 0; }
.caja-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 1.2rem;
}
.caja-foto figcaption {
  margin-top: 0.7rem;
  color: var(--humo);
  font-size: 0.88rem;
  line-height: 1.5;
  max-width: 44ch;
}

/* ------------------------------------------- la vitrina en una pantalla -- */
/* En el telefono la seccion se apila, y apilada no cabe sola: hay que
   apretarla pieza a pieza. El orden de prioridad es el de la decision —
   primero con cual, luego como se ve, luego que lleva dentro— asi que el
   riel de sabores sube arriba del todo en vez de quedarse debajo, que era
   donde nadie lo veia sin bajar.

   Todo lo que aqui encoge esta medido contra svh, el alto real de la
   ventana. En un telefono bajo se aprieta mas; en uno alto respira. */

@media (max-width: 880px) {
  .vitrina { padding-block: clamp(0.9rem, 2.4svh, 1.75rem); }
  .vitrina-cuerpo { gap: clamp(0.7rem, 1.8svh, 1.2rem); }
  .vitrina-lado { gap: clamp(0.6rem, 1.6svh, 1rem); }

  /* El orden de la decision: primero con cual -el riel-, luego la galleta,
     luego lo que lleva. Los tres van escritos, no heredados: si solo se
     numera uno, los demas se quedan en cero y el que se numera acaba el
     ultimo, que es justo lo contrario de lo que se quiere. */
  .rail { order: 1; padding-top: 0; padding-bottom: 0.7rem; border-top: 0; }
  .escena { order: 2; }
  .vitrina-lado { order: 3; }

  .escena-foto { height: min(34svh, 300px); }
  .escena-marca {
    font-size: clamp(1.4rem, 4svh, 2.2rem);
    margin-bottom: clamp(0.35rem, 1svh, 0.8rem);
  }

  .ficha-contador { margin-bottom: clamp(0.2rem, 0.8svh, 0.5rem); }
  .ficha-nombre { margin-bottom: clamp(0.3rem, 0.9svh, 0.6rem); }
  .ficha-nota {
    font-size: clamp(0.82rem, 1.7svh, 0.95rem);
    line-height: 1.45;
    margin-bottom: clamp(0.6rem, 1.6svh, 1rem);
  }

  /* Dos columnas siempre: apilados, peso y alergenos se comian mas de cien
     pixeles ellos solos. */
  .ficha-datos {
    grid-template-columns: 1fr 1fr;
    margin-bottom: clamp(0.6rem, 1.6svh, 1rem);
  }
  .ficha-datos div { padding: clamp(0.5rem, 1.3svh, 0.85rem) 0.7rem; }

  /* El nombre grande de encima de la foto se va: aqui abajo ya esta el
     mismo nombre en la ficha, y repetirlo costaba cuarenta y cinco pixeles
     que le hacen falta a la galleta. */
  .escena-marca { display: none; }

  /* Las vistas y las flechas comparten fila. Son dos controles pequenos y
     uno debajo del otro costaba noventa pixeles. Todo lo demas de la ficha
     sigue ocupando el ancho entero. */
  .ficha {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  .ficha > * { grid-column: 1 / -1; }
  .vistas { grid-column: 1; margin-bottom: 0; }
  .ficha-pasos { grid-column: 2; margin-bottom: 0; }

  /* Los alergenos son la linea mas larga de la ficha y la que mas alto
     gana al envolverse. Aqui se leen igual un punto mas pequenos. */
  .ficha-datos dd { font-size: 0.86rem; line-height: 1.35; }
  /* 0,62 rem salian 9,9 px: apretar la vitrina para que cupiera no puede
     costar que no se lea de que es el peso. */
  .ficha-datos dt { font-size: 0.72rem; }

  /* La nota, a tres lineas. La galleta completa dice mas que la cuarta
     linea de su descripcion, y la descripcion entera esta en la carta. */
  .ficha-nota {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* En una pantalla de verdad baja -un movil apaisado, un portatil pequeno-
   la foto se lleva lo que queda y lo demas se apreta hasta el hueso. */
@media (max-height: 700px) and (max-width: 880px) {
  .escena-foto { height: min(30svh, 240px); }
  .vitrina-cuerpo { gap: 0.55rem; }
  .vitrina-lado { gap: 0.5rem; }
}

/* La fotografia de la tarjeta cambia con la textura elegida. Un fundido
   corto para que se lea como el mismo producto visto de otra manera y no
   como si la tarjeta se hubiera recargado. */
.pieza-foto img { transition: opacity 0.3s var(--curva); }
@media (prefers-reduced-motion: reduce) {
  .pieza-foto img { transition: none; }
}

/* ----------------------------------------------------------- tocadiscos -- */
/* El tema de Doui, en el pie. Pequeno a proposito: es un guino, no una
   funcion del sitio. Nada de barra fija flotando encima del contenido. */

/* Fija abajo, se mire donde se mire. Es una barra del sitio, no un trozo
   del pie: por eso ocupa el ancho entero y no lleva esquinas redondeadas.

   Va colgada de <body> por el mismo motivo que la burbuja de WhatsApp: un
   antepasado con backdrop-filter se convierte en el bloque contenedor de
   todo lo que lleve position: fixed, y entonces esto dejaria de estar fijo
   a la ventana.

   El sitio que ocupa se le devuelve al documento con padding-bottom en
   body; si no, tapa el final del pie. */
.tocadiscos {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.5rem clamp(0.75rem, 3vw, 1.5rem);
  /* Sobre el borde de abajo de un movil con barra de gestos. */
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(248, 244, 236, 0.14);
  background: rgba(6, 10, 30, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* El hueco que deja libre la barra. --alto-tocadiscos lo escribe el script
   midiendo la barra de verdad; el valor de aqui es lo que vale mientras
   tanto, y si no hubiera JavaScript tampoco habria barra que esquivar. */
body { padding-bottom: var(--alto-tocadiscos, 0px); }


/* 44 px, como todo lo que se toca en este sitio. */
.tocadiscos-boton {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--cereza);
  color: var(--crema);
  cursor: pointer;
  transition: transform 0.18s var(--curva), background 0.18s var(--curva);
}
.tocadiscos-boton:hover { transform: scale(1.06); }
.tocadiscos-boton:active { transform: scale(0.95); }
.tocadiscos-boton:focus-visible { outline: 3px solid var(--crema); outline-offset: 3px; }
.tocadiscos-boton svg { width: 18px; height: 18px; fill: currentColor; }

/* Un icono u otro, nunca los dos. */
.tocadiscos-boton .icono-pausa { display: none; }
.tocadiscos.sonando .tocadiscos-boton .icono-play { display: none; }
.tocadiscos.sonando .tocadiscos-boton .icono-pausa { display: block; }

/* Mientras baja el archivo, el boton late. Sin esto parece que no
   respondio: entre pulsar y sonar hay una espera real. */
.tocadiscos.cargando .tocadiscos-boton { animation: latido 1s ease-in-out infinite; }
@keyframes latido { 50% { opacity: 0.45; } }

.tocadiscos-cuerpo { min-width: 0; display: grid; gap: 0.3rem; }
.tocadiscos-titulo {
  margin: 0;
  font-size: 0.82rem;
  color: var(--crema);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* La barra: un range de verdad, para que funcione con el dedo y con el
   teclado sin escribir nada. El relleno se pinta con un degradado que
   corta en --llevado, que es lo unico que se puede estilar igual en todos
   los navegadores. */
.tocadiscos-barra {
  --llevado: 0%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;               /* zona tactil; la linea se pinta dentro */
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.tocadiscos-barra::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right,
    var(--cereza) var(--llevado), rgba(248, 244, 236, 0.22) var(--llevado));
}
.tocadiscos-barra::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right,
    var(--cereza) var(--llevado), rgba(248, 244, 236, 0.22) var(--llevado));
}
.tocadiscos-barra::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px; height: 12px;
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: var(--crema);
}
.tocadiscos-barra::-moz-range-thumb {
  width: 12px; height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--crema);
}
.tocadiscos-barra:focus-visible { outline: 3px solid var(--cereza); outline-offset: 4px; border-radius: 999px; }

.tocadiscos-tiempo {
  margin: 0;
  font-size: 0.7rem;
  color: var(--humo-bajo);
  font-variant-numeric: tabular-nums;
  min-width: 3.2ch;
  text-align: right;
}

@media (prefers-reduced-motion: reduce) {
  .tocadiscos-boton { transition: none; }
  .tocadiscos.cargando .tocadiscos-boton { animation: none; opacity: 0.6; }
}

/* --------------------------------------------- tallas en el telefono -- */
/* Medido en la pagina a 375 px. Lo que se toca tiene que poder tocarse, y
   lo que informa tiene que poder leerse: por debajo de 12 px, en un
   telefono en la mano, ya no se lee de pasada. */

@media (max-width: 700px) {
  /* La barra de la cancion tenia 18 px de alto tactil. La linea sigue
     siendo fina; lo que crece es la zona donde vale el dedo. */
  .tocadiscos-barra { height: 44px; }
  .tocadiscos-barra::-webkit-slider-thumb { margin-top: -4px; }
  .tocadiscos { padding-block: 0.35rem; }

}

/* --------------------------------------------------- botones del hero -- */
/* Cuatro caminos en vez de uno. En el telefono se ponen en dos filas de
   dos, que es lo que cabe sin que ninguno parta su palabra. */

.acciones-hero { gap: 0.6rem; }
.acciones-hero .btn { flex: 0 1 auto; }

@media (max-width: 620px) {
  .acciones-hero { display: grid; grid-template-columns: 1fr 1fr; }
  .acciones-hero .btn { width: 100%; justify-content: center; }
}

/* Lo que se acaba de senalar. Dura un momento y se va: es para encontrar
   la tarjeta, no para dejarla marcada. */
.recien-llegado {
  animation: senalar 2.2s var(--curva);
}
@keyframes senalar {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  15%, 70% { box-shadow: 0 0 0 3px var(--cereza); }
}
@media (prefers-reduced-motion: reduce) {
  .recien-llegado { animation: none; outline: 3px solid var(--cereza); outline-offset: 3px; }
}

/* ------------------------------------------------ respuesta al tacto -- */
/* Dos cosas que en el telefono se notan mucho y no cuestan nada.

   touch-action: manipulation quita la espera de 300 ms que algunos
   navegadores dejan por si el toque era un doble toque para hacer zoom.
   Sin eso, cada boton responde tarde aunque el codigo sea instantaneo.

   Y el resalte gris de Android sobre un boton que ya tiene su propio
   :active sobra: se pisan y queda sucio. */
.btn,
button,
a,
[role='button'],
input[type='radio'],
input[type='checkbox'],
label.opcion,
summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Que el dedo vea que paso algo, tambien donde no habia nada. */
.bite-punto:active,
.anadir-textura:active,
.vista:active { transform: scale(0.94); }

@media (prefers-reduced-motion: reduce) {
  .bite-punto:active,
  .anadir-textura:active,
  .vista:active { transform: none; }
}

/* La nota del peso, al pie de la carta. Va con el mismo aire que separa
   dos secciones, para que se lea como cierre de la carta y no como el
   principio de lo siguiente. */
.nota-peso {
  display: block;
  max-width: 58ch;
  margin-top: calc(var(--aire) * 0.45);
  color: var(--humo-bajo);
  font-size: 0.72rem;
  line-height: 1.6;
  text-transform: none;
  letter-spacing: 0;
}