/* LA TIENDA PÚBLICA de Start Deco.
   Hoja aparte de la del panel a propósito: son dos productos distintos, con
   dos públicos distintos, y no queremos que tocar una rompa la otra.

   La identidad sale del logo: azul eléctrico, rosa, y la tipografía de arcade
   para los detalles chicos. Las fotos mandan; el texto acompaña. */

:root {
  --azul: #0000ff;
  --rosa: #ec268f;
  --rosa-suave: #fde6f2;
  --azul-suave: #e8e8ff;
  --tinta: #232326;
  --tinta-suave: #6b6d72;
  --gris: #a9abae;
  --fondo: #f4f5f8;
  --papel: #e6e6f6;   /* antes blanco puro: quemaba contra el azul */
  --borde: #e2e4ea;
  --verde: #1a8a52;
  --ambar: #b06a00;
  --ambar-suave: #fdf1de;
  /* El blanco puro contra el azul puro es el contraste más fuerte que existe:
     vibra y cansa la vista. La salida está en el propio logo, donde la mesita
     es LAVANDA sobre azul. Esa es la paleta: azul, lavanda, rosa y tinta.
     Nada de blanco puro sobre azul salvo en el título grande. */
  --lavanda: #e6e6f6;        /* las tarjetas y todo lo que antes era blanco */
  --lavanda-clara: #f0f0fb;  /* títulos sobre azul */
  --lavanda-media: #cfcfe9;  /* texto secundario sobre azul */
  --lavanda-tenue: #a9a9d6;  /* rótulos chiquitos sobre azul */
  --radio: 14px;
  --sombra: 0 1px 2px rgba(20, 20, 40, .06), 0 8px 24px rgba(20, 20, 40, .06);
  --ancho: 1240px;
  --arcade: "Press Start 2P", ui-monospace, monospace;
  --titulo: "Archivo Black", "Arial Black", system-ui, sans-serif;
  /* El aspecto del boceto aprobado: titulares de trazo regular, no de palo
     grueso en mayúsculas. Poppins tiene ese ancho y esa redondez. */
  --titular: "Poppins", "Century Gothic", system-ui, sans-serif;
  --manuscrita: "Caveat", "Segoe Script", cursive;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--titulo); font-weight: 400; margin: 0; letter-spacing: -.01em; }
a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--rosa); }
img { max-width: 100%; }
button { font: inherit; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 20px; width: 100%; }
.empuje { flex-grow: 1; }
.arcade { font-family: var(--arcade); letter-spacing: .02em; }

/* ------------------------------------------------------------- cabecera */

/* La cinta de arriba. Se mueve sola, con la misma tanda de mensajes repetida
   dos veces: cuando la primera termina de salir, la segunda ya está en su
   lugar y el movimiento no corta nunca. */
.promo {
  background: var(--azul); color: #fff;
  padding: 11px 0; font-family: var(--arcade); font-size: .56rem; line-height: 1.7;
  overflow: hidden;
}
.promo-cinta { display: flex; width: max-content; animation: correr 38s linear infinite; }
.promo-tanda { display: flex; flex-shrink: 0; }
.promo-tanda span { padding: 0 26px; white-space: nowrap; }
.promo-tanda span::after { content: "·"; margin-left: 26px; opacity: .55; }
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.promo:hover .promo-cinta { animation-play-state: paused; }

/* Si el sistema pide menos movimiento, se queda quieta y centrada. */
@media (prefers-reduced-motion: reduce) {
  .promo-cinta { animation: none; width: 100%; justify-content: center; }
  .promo-tanda:last-child { display: none; }
}

/* Tiras de fotos: personalizadas ya hechas, entregas reales. Se arrastran de
   costado en el celular en vez de apilarse y comerse la pantalla. */
.tira {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr);
  gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory;
}
.tira.chicas { grid-auto-columns: minmax(150px, 1fr); }
.tira-item { margin: 0; scroll-snap-align: start; }
.tira-item img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block;
  border-radius: var(--radio); background: var(--papel);
}
.tira-item figcaption {
  font-size: .82rem; color: var(--tinta-suave); margin-top: 8px; line-height: 1.4;
}
.tira.chicas .tira-item figcaption { font-size: .74rem; }

/* Los clientes: de a una foto, entera.
   Las fotos llegan como salen del celular —verticales, horizontales, alguna
   cuadrada— y meterlas a la fuerza en un molde les corta la cabeza a las
   personas o las patas a la mesa, que es justo lo que hay para mostrar. Así
   que se muestran completas (contain) y el hueco que sobra al costado lo
   llena la misma foto borroneada: se apoya en el fondo oscuro sin barras
   negras ni recortes. */
/* La franja de clientes: el título a un lado y el visor al otro, más chica
   que antes. Ocupando toda la pantalla parecía una sección aparte pegada al
   final; así entra en el ritmo de la página. */

.visor {
  position: relative; aspect-ratio: 16/10; border-radius: var(--radio);
  overflow: hidden; background: #15161b;
  /* Deslizar de costado pasa las fotos; el dedo hacia arriba sigue
     desplazando la página. */
  touch-action: pan-y pinch-zoom;
}
/* 700 ms, como pide el encargo: se nota el cambio sin que parezca un corte. */
.toma { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.toma.viendo { opacity: 1; }

/* La misma foto, agrandada y borroneada, tapando el hueco de los costados. */
.toma-fondo {
  position: absolute; inset: -8%;
  background-size: cover; background-position: center;
  filter: blur(34px) brightness(.5) saturate(1.1);
}
.toma img {
  position: absolute; inset: 0; margin: auto; display: block;
  max-width: 100%; max-height: 100%; width: auto; height: auto;
}
.toma figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 22px 16px; font-size: .88rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, .65));
}


@media (prefers-reduced-motion: reduce) { .toma { transition: none; } }

@media (max-width: 760px) {
  .visor { aspect-ratio: 4/5; }
  /* En el celular no hay "pasar el mouse": las flechas se ven siempre. */
}

.cabecera {
  background: var(--papel); border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 62;
  transition: background .2s ease, border-color .2s ease;
}

/* Arriba de todo en el inicio, la cabecera va encima del azul: sin fondo y
   con las letras claras. Apenas se baja, vuelve a ser blanca. La clase la
   pone tienda.js según el scroll. */
.cabecera.sobre-portada {
  background: transparent; border-bottom-color: transparent;
}
.cabecera.sobre-portada .menu a { color: #d6d6ff; }
.cabecera.sobre-portada .menu a:hover,
.cabecera.sobre-portada .menu a.activo { color: #fff; border-bottom-color: #fff; }
.cabecera.sobre-portada .menu a.resaltado { color: var(--rosa); }
.cabecera.sobre-portada .carrito-boton { color: #fff; }
/* La pastilla del código de pedido: lavanda con letras azules, igual arriba
   del azul de la portada que con la cabecera normal. Antes, sobre la
   portada, le ponía letras blancas sobre fondo claro y no se leía. */
.pedido-guardado, .cabecera.sobre-portada .pedido-guardado {
  background: var(--lavanda); border: 1px solid var(--lavanda); color: var(--azul);
}
/* Tres columnas y el menú en la del medio: así queda centrado respecto de
   toda la página, no del hueco que sobra entre el logo —angosto— y los
   botones de la derecha —anchos—, que era lo que pasaba con los empujes
   flexibles de antes. Las columnas laterales valen `1fr` cada una, o sea el
   mismo ancho, y el centro cae exactamente en la mitad.

   `minmax(max-content, 1fr)` y no `1fr` a secas: si algún día el contenido
   de un costado no entra en su mitad —un código de pedido largo, otro
   idioma— la columna crece en vez de superponerse con el menú. Ahí el menú
   se corre, pero nada se pisa, que es lo que importa. */
.barra-cabecera {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center; gap: 18px;
  padding-top: 10px; padding-bottom: 10px;
}
.barra-cabecera .marca { justify-self: start; }
.barra-cabecera .menu { justify-self: center; }
.barra-acciones { justify-self: end; display: flex; align-items: center; gap: 14px; }

/* La cabecera y la portada comparten el ancho útil del diseño aprobado:
   márgenes laterales de alrededor del 5,5% de la pantalla, más anchos que
   el contenedor de 1240 px del resto de la tienda. El logo arranca donde
   arranca el título de abajo. */
.cabecera .contenedor { max-width: none; padding-inline: clamp(20px, 5.5vw, 120px); }
/* El orden del boceto: símbolo, START, deco. Estaba al revés —el símbolo
   quedaba a la derecha— por el `row-reverse` de antes. */
.barra-cabecera .marca { display: flex; align-items: center; gap: 10px; color: inherit; flex-shrink: 0; }

/* El botón de la derecha de la cabecera, el mismo que en el diseño. */
.boton-cabecera {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  border: 2px solid var(--azul); color: var(--azul); border-radius: 22px;
  padding: 9px 18px; font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.boton-cabecera:hover { background: var(--azul); color: #fff; }
.cabecera.sobre-portada .boton-cabecera { border-color: rgba(255, 255, 255, .8); color: #fff; }
.cabecera.sobre-portada .boton-cabecera:hover { background: #fff; color: var(--azul); }
/* El logo, tal como vino: una sola pieza vectorial. No se reconstruye con
   fuentes ni se le agrega el ícono de la mesa. Proporción 210:44, blanco
   sobre el azul de la cabecera y azul sobre superficies claras. */
.marca-logo { display: block; width: 196px; height: auto; }
.pie-logo { display: block; width: 168px; height: auto; margin-bottom: 14px; }

.menu { display: flex; gap: 28px; align-items: center; overflow-x: auto; min-width: 0; }
.menu a {
  font-size: .875rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-suave); white-space: nowrap; padding-bottom: 3px; border-bottom: 2px solid transparent;
}
.menu a:hover { color: var(--tinta); }
.menu a.activo { color: var(--tinta); border-bottom-color: var(--azul); }
.menu a.resaltado { color: var(--rosa); font-weight: 700; }
.menu a.resaltado.activo { border-bottom-color: var(--rosa); }

/* El botón de las tres rayas: sólo existe en el celular, donde los tres
   nombres del menú no entran al lado del logo y del carrito. */
.menu-boton {
  display: none; background: none; border: 0; padding: 6px; margin: -6px;
  color: var(--tinta); cursor: pointer; line-height: 0;
}
.cabecera.sobre-portada .menu-boton { color: #fff; }
.menu-boton:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 6px; }
/* El enlace que sólo sirve adentro del desplegable: en pantalla grande el
   botón de "Diseñá la tuya" sigue estando en la barra. */
.menu .solo-compacto { display: none; }

.carrito-boton { position: relative; color: var(--tinta); display: flex; align-items: center; }
.burbuja {
  position: absolute; top: -7px; right: -9px;
  background: var(--rosa); color: #fff; font-size: .62rem; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; padding: 0 5px;
}
.pedido-guardado {
  padding: 8px 14px; border-radius: 22px; font-size: .78rem; font-weight: 700; white-space: nowrap;
}

/* --------------------------------------------------------------- piezas */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 16px 28px; border-radius: 12px; border: 2px solid transparent;
  font-size: .86rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; background: var(--papel); color: var(--tinta); text-align: center;
  min-height: 48px;
}
.boton.primario { background: var(--azul); color: #fff; }
.boton.rosa { background: var(--rosa); color: #fff; }
.boton.rosa:hover, .boton.primario:hover { color: #fff; filter: brightness(1.08); }
.boton.borde { border-color: var(--borde); }
.boton.borde-rosa { border-color: var(--rosa); color: var(--rosa); background: transparent; }
.boton.verde { background: var(--verde); color: #fff; }
.boton.verde:hover { color: #fff; filter: brightness(1.08); }
.boton.ancho { width: 100%; }
.boton[disabled] { opacity: .5; cursor: default; }

.tarjeta { background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio); }
.seccion-titulo { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 22px; }
.seccion-titulo h2 { font-size: 1.85rem; }
.apagado { color: var(--tinta-suave); }
.chico { font-size: .82rem; }

.cargando { padding: 80px 0; text-align: center; color: var(--gris); font-family: var(--arcade); font-size: .7rem; }

/* -------------------------------------------------------------- portada */

/* La portada es azul de punta a punta, con el recorte flotando encima. Tres
   cosas la sostienen y conviene no tocarlas a la ligera:
   - el recorte TIENE que ser una imagen calada (fondo transparente);
   - la sombra la hace drop-shadow, que sigue el contorno del calado, así que
     si mañana se cambia la foto la sombra sale sola;
   - el texto está pensado para no tapar la cara ni los botones de la consola:
     por eso el título arranca a media altura y no crece más allá de su columna. */

.portada {
  position: relative; overflow: hidden;
  background: var(--azul); color: var(--lavanda-media);
  display: flex; align-items: stretch;
  /* Se sube abajo de la cabecera y se compensa con padding: así el azul
     arranca arriba de todo y la cabecera flota encima. --cab lo mide
     tienda.js, porque el alto de la cabecera cambia entre celular y pantalla
     grande. */
  margin-top: calc(var(--cab, 0px) * -1);
  padding-top: var(--cab, 0px);
  /* La portada ocupa la pantalla entera. Así el azul se ve pleno y la franja
     de destinos queda abajo del pliegue en vez de cortarlo: antes asomaba
     una banda clara al pie y partía la imagen justo donde no hay que
     partirla. `svh` y no `vh` porque en el celular `vh` cuenta la barra de
     direcciones aunque esté a la vista, y la portada quedaba más alta que la
     pantalla. */
  min-height: 100svh;
}

/* ---- El fondo aprobado: azul plano, halo tenue y hondo índigo abajo ----

   Las dos capas van detrás del canvas, que ahora es transparente. No son
   luces del render ni sombras de la mesa: si fueran parte de la escena
   blanquearían el vidrio y la impresión, que es justo lo que no se quiere.
   Ninguna recibe el mouse. */
.halo-azul, .hondo-azul {
  position: absolute; z-index: 0; pointer-events: none;
}
/* El halo: amplísimo y sin borde reconocible, detrás de la mesa. El encargo
   proponía empezar en 6–10% y ajustar mirando; en 10% sobre un azul puro no
   se veía nada, así que quedó en 17% en el centro, que es donde recién se
   nota que el azul respira detrás de la mesa. Sigue sin foco blanco y sin
   borde: a mitad de camino ya está en 9% y se apaga del todo antes del
   borde de la caja. Se corre 13 px en un ciclo de 21 segundos, tan lento
   que no se ve moverse. */
.halo-azul {
  left: 34%; top: -18%; width: 78%; height: 128%;
  background: radial-gradient(closest-side,
    rgba(176, 184, 255, .17), rgba(164, 174, 255, .09) 48%, rgba(150, 160, 255, 0) 74%);
  animation: halo-azul 21s ease-in-out infinite;
  will-change: transform;
}
/* Y el cuarto de abajo, índigo transparente. Nunca negro puro: sobre el azul
   el negro ensucia, el índigo lo hunde. Igual que el halo, el 12–18% del
   encargo no se distinguía del azul liso; en 30% el pie de la portada se
   hunde de verdad y la mesa queda apoyada sobre algo. */
.hondo-azul {
  left: 0; right: 0; bottom: 0; height: 36%;
  /* Tres paradas y no dos: con una recta el degradado se notaba recién en el
     último centímetro. Así el azul empieza a hundirse desde bastante más
     arriba y abajo de todo llega a un índigo oscuro de verdad, como en la
     lámina aprobada. */
  background: linear-gradient(to top,
    rgba(6, 6, 74, .62), rgba(8, 8, 84, .34) 42%, rgba(10, 10, 92, 0));
}
@keyframes halo-azul {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-13px, 9px, 0); }
}
/* Fuera de pantalla no tiene sentido que siga andando. La clase la pone
   tienda.js con un observador. */
.portada.quieta .halo-azul,
.coleccion.quieta .halo-azul { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .halo-azul { animation: none; }
}

/* La foto se mide por el ALTO de la portada, no por el ancho: así la cara
   queda siempre a la misma altura y la consola se va por la derecha lo mismo
   en una pantalla ancha que en una angosta. */
.portada-foto {
  position: absolute; margin: 0; left: 0; right: auto; top: -48px; bottom: auto;
  width: 88%; height: auto; max-width: none;
  pointer-events: none;
}
.portada-foto img {
  /* Medida por el ANCHO, igual que la figura que la contiene. Antes decía
     `height: 100%` —de cuando la figura se medía por el alto— y eso, contra
     un padre de alto automático, Safari de iPhone lo resuelve estirando la
     foto. En Chrome no se notaba. */
  display: block; width: 100%; height: auto;
  filter: drop-shadow(16px 20px 16px rgba(0, 0, 42, .42));
}
/* El crédito de quien prestó la foto: su letra, blanca con contorno violeta. */
.portada-credito {
  position: absolute; left: 33.5%; top: 64%;
  pointer-events: auto;
  /* La tipografía de él es Anton, condensada. Mientras baja, el navegador
     usa la de repuesto: si esa es gorda, las letras se empastan. Arial
     Narrow es lo más parecido que hay instalado en todos lados. */
  font-family: "Anton", "Arial Narrow", "Haettenschweiler", var(--titulo);
  font-size: .78rem; letter-spacing: .01em;
  color: #fff;
  /* El contorno con text-shadow y no con -webkit-text-stroke: la sombra
     siempre se pinta DETRÁS de la letra, así que el blanco nunca queda
     tapado por el violeta, ni siquiera mientras la fuente está cargando.
     Con text-stroke eso dependía de `paint-order`, que no todos respetan. */
  text-shadow:
    .15em 0 0 #6411ff, -.15em 0 0 #6411ff, 0 .15em 0 #6411ff, 0 -.15em 0 #6411ff,
    .11em .11em 0 #6411ff, -.11em .11em 0 #6411ff,
    .11em -.11em 0 #6411ff, -.11em -.11em 0 #6411ff;
  transform: rotate(-8deg); text-decoration: none; white-space: nowrap;
}
.portada-credito:hover { color: #fff; filter: brightness(1.15); }

/* El texto a la izquierda y la mesa a la derecha. La mesa manda un poco más
   de ancho porque adentro del cuadro le sobra aire por los costados: el
   encuadre le reserva lugar para girar en cualquier dirección. */
.portada-adentro {
  position: relative; z-index: 2; width: 100%;
  /* El mismo ancho útil que la cabecera: el logo de arriba y el título de
     acá arrancan en la misma vertical. */
  padding-inline: clamp(20px, 5.5vw, 120px);
  display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  align-items: center; gap: clamp(12px, 2.4vw, 40px);
}
.portada-texto { max-width: 560px; padding-block: 24px; }

/* El visor de la portada: sin botón ni pista, sólo la mesa. Se desarma
   pasando el mouse o manteniendo apretado, y se gira arrastrando. */
/* La mesa se mide también por el ALTO de la ventana, no sólo por el ancho de
   su columna. En una notebook —que es ancha y baja— medirla sólo por el
   ancho la hacía más alta que la pantalla y las patas quedaban cortadas
   abajo. Con `min()` gana la que sea más chica de las dos. */
/* Debajo de la mesa: cómo se llama y el control chico para abrirla. Es el
   "control secundario pequeño" del encargo, con el mismo estado que la
   animación: dice Explorar / Armar según cómo esté. */
.portada-pie {
  grid-column: 2; justify-self: center; text-align: center;
  margin-top: -6px; display: grid; gap: 12px; justify-items: center;
}

.portada .mesa3d {
  /* Más ancho que alto a propósito. El alto es lo que está racionado —tiene
     que entrar en la ventana— y la mesa, acostada, aprovecha el ancho.
     El margen negativo la saca del contenedor hasta el borde mismo de la
     ventana: en la referencia la mesa llega al filo derecho de la página, y
     quedándose adentro del margen se veía la mitad de grande. */
  /* Más alta que el 3/2 de antes: la portada ahora ocupa la pantalla
     entera y con una caja tan baja la mesa quedaba chica, flotando en el
     medio de un montón de azul vacío. Con 4/3 la silueta llena el alto que
     tiene, como en el boceto aprobado. */
  aspect-ratio: 4/3; background: transparent;
  width: auto; justify-self: stretch;
  /* A la derecha se reserva una franja para las etiquetas de materiales.
     Es un espacio fijo del diseño, no algo que aparezca y desaparezca con
     ellas: la mesa mide lo mismo con etiquetas y sin etiquetas. */
  margin-right: clamp(52px, 5.2vw, 88px);
  max-height: 78vh;
  /* Las etiquetas viven pegadas al borde derecho del visor y lo pasan un
     poco; el recorte lo hace la portada, no esta caja. */
  overflow: visible;
}

/* El título del boceto: trazo regular, en caja baja, no el palo grueso en
   mayúsculas que había antes. */
.portada h1 {
  font-family: var(--titular); font-weight: 400;
  /* La presencia del boceto aprobado: unos 80 px en una pantalla de 1505,
     que es lo que da 5,3vw. El corte en dos renglones lo pone el HTML. */
  font-size: clamp(2.6rem, 5.3vw, 5.1rem); line-height: 1.1; letter-spacing: -.025em;
  /* Los dos renglones ya vienen cortados del HTML; el navegador no tiene que
     cortar nada más. Sin esto, "hecha mesa." se parte en dos y el remate del
     título queda solo en un renglón. */
  text-wrap: nowrap; white-space: nowrap;
  color: var(--lavanda-clara);
  text-transform: none;
}
.portada .bajada { font-family: var(--titular); font-weight: 300; }
.portada .bajada {
  font-size: 1.08rem; line-height: 1.55; color: var(--lavanda-media); margin: 18px 0 0; max-width: 470px;
  /* La bajada puede caer encima de la foto: la sombra la mantiene legible
     sin tener que ponerle una caja atrás. */
  text-shadow: 0 1px 12px rgba(0, 0, 60, .55), 0 0 26px rgba(0, 0, 60, .4);
}
.portada-acciones { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 26px; }
/* El botón va al final de la portada, abajo de las categorías: ahí no se
   mete en el medio del dibujo ni tapa nada. */
.portada-acciones { margin-top: 26px; }
.portada-aparte { font-size: .95rem; color: var(--lavanda-media); text-shadow: 0 1px 12px rgba(0, 0, 60, .6); }

.boton.negro { background: #14141c; color: #fff; border-color: #14141c; gap: 10px; }
.boton.negro:hover { background: #000; color: #fff; }

.portada-rubros { margin-top: 46px; border-top: 1px solid rgba(255, 255, 255, .28); padding-top: 16px; }
.portada-rubros .rotulo {
  display: block; font-family: var(--arcade); font-size: .5rem;
  color: var(--lavanda-tenue); letter-spacing: .12em; margin-bottom: 12px;
}
.portada-rubros .rubros { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
.portada-rubros a {
  color: var(--lavanda-clara); font-weight: 700; font-size: 1.05rem; letter-spacing: .01em; padding: 2px 0;
  /* Sin encoger: si no, el flex angosta "PLAYSTATION" por debajo de su texto
     y la palabra queda cortada en vez de pasar al renglón de abajo. */
  flex: 0 0 auto;
}
.portada-rubros a:hover { color: var(--lavanda-clara); text-decoration: underline; text-underline-offset: 4px; }
.portada-rubros a + a::before { content: "·"; color: var(--rosa); margin-right: 10px; }

/* El sello, arriba del título y en el flujo, como en el boceto. */
.portada-ojo {
  display: flex; align-items: center; gap: 11px; margin-bottom: 16px;
  font-family: var(--arcade); font-size: .5rem; letter-spacing: .12em; color: var(--lavanda-media);
}
.portada-ojo .punto { width: 9px; height: 9px; background: var(--rosa); flex-shrink: 0; }

/* En pantallas anchas pero bajas (una notebook típica) la portada entera no
   entra si se mantiene el aire del diseño: se aprieta todo un poco en vez de
   dejar que las patas de la mesa se corten abajo. El espacio grande de
   arriba que había acá era para no taparle la cabeza al chico de la foto
   calada; sin foto, sólo empujaba el texto fuera de la pantalla. */
@media (min-width: 761px) and (max-height: 860px) {
  .portada-texto { padding-block: 16px; }
  .portada h1 { font-size: clamp(2.4rem, 4.6vw, 4.4rem); }
  .portada .bajada { font-size: 1rem; margin: 12px 0 0; }
  .portada-rubros { margin-top: 26px; padding-top: 12px; }
  .portada-rubros a { font-size: 1rem; }
  .portada-acciones { margin-top: 18px; }
}

.ojo { font-family: var(--arcade); font-size: .56rem; color: var(--rosa); letter-spacing: .1em; margin-bottom: 20px; }

/* Sigue el azul de la portada en vez de cortarlo con una franja oscura: la
   página baja de corrido y recién después pasa al claro. */
.beneficios { background: var(--azul); color: var(--lavanda-media); border-top: 1px solid rgba(255, 255, 255, .16); }
.beneficios .resaltar { color: var(--lavanda-clara); font-weight: 700; }
.beneficios-grilla {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
  padding-block: 20px; text-align: center; font-size: .85rem;
}
.beneficios strong { font-size: .95rem; }

/* -------------------------------------------------------------- tarjetas */

.grilla-mesas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.mesa { overflow: hidden; display: flex; flex-direction: column; color: inherit; }
.mesa:hover { border-color: var(--azul); color: inherit; }
.mesa-foto { position: relative; background: var(--fondo); }
.mesa-foto img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.etiqueta-off {
  position: absolute; top: 11px; left: 11px;
  background: var(--rosa); color: #fff; font-size: .68rem; font-weight: 700;
  padding: 5px 9px; border-radius: 7px;
}
.mesa-cuerpo { padding: 15px 15px 17px; display: flex; flex-direction: column; gap: 3px; flex-grow: 1; }
.mesa-categoria { font-size: .68rem; color: var(--gris); letter-spacing: .08em; text-transform: uppercase; }
.mesa-nombre { font-size: .98rem; font-weight: 700; line-height: 1.3; margin-bottom: 6px; }
.mesa-medidas { font-size: .78rem; color: var(--tinta-suave); margin-bottom: 8px; }
.precio-lista { font-size: .8rem; color: var(--gris); text-decoration: line-through; }
.precio { font-size: 1.28rem; font-weight: 700; color: var(--azul); font-family: var(--titulo); }
.precio-nota { font-size: .7rem; color: var(--tinta-suave); }

.tarjeta-personalizada {
  background: var(--rosa); color: #fff; border-radius: var(--radio); padding: 26px 22px;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
}
.tarjeta-personalizada h3 { font-size: 1.5rem; line-height: 1.1; color: #fff; }
.tarjeta-personalizada p { font-size: .84rem; line-height: 1.55; margin: 0; opacity: .92; }

/* ------------------------------------------------------------ categorías */

.grilla-categorias { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.categoria {
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 20px 14px; text-align: center; color: inherit;
}
.categoria:hover { border-color: var(--azul); color: inherit; }
.categoria .nombre { font-size: 1rem; font-weight: 700; margin-bottom: 3px; }
.categoria .cuantas { font-size: .74rem; color: var(--gris); }
.categoria.rosa { background: var(--rosa); border-color: var(--rosa); color: #fff; }
.categoria.rosa .cuantas { color: rgba(255, 255, 255, .85); }

.franja-personalizadas {
  background: var(--azul); border-radius: var(--radio); padding: 44px 46px; color: #fff;
  display: grid; grid-template-columns: 1.25fr minmax(0, 1fr); gap: 40px; align-items: center;
}
.franja-personalizadas h2 { font-size: 2.2rem; line-height: 1.05; color: #fff; }
.franja-personalizadas p { font-size: .95rem; line-height: 1.6; opacity: .88; margin: 16px 0 24px; max-width: 420px; }
.franja-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.franja-fotos img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 12px; display: block; }

.filtros { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 24px; }
.filtro {
  background: var(--papel); border: 1px solid var(--borde); color: var(--tinta);
  padding: 10px 17px; border-radius: 22px; font-size: .82rem; white-space: nowrap;
}
.filtro:hover { border-color: var(--azul); color: var(--tinta); }
.filtro.activo { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 700; }
.filtro.rosa { background: var(--rosa-suave); border-color: var(--rosa); color: var(--rosa); font-weight: 700; }

/* --------------------------------------------------------------- ficha */

.migas { font-size: .8rem; color: var(--gris); padding: 20px 0 0; }
.migas a { color: var(--gris); }
.migas a:hover { color: var(--rosa); }

.ficha { display: grid; grid-template-columns: 92px minmax(0, 1fr) 400px; gap: 20px; align-items: start; padding-top: 20px; }
.miniaturas { display: flex; flex-direction: column; gap: 10px; }
.miniaturas button {
  padding: 0; border: 1px solid var(--borde); border-radius: 10px; overflow: hidden;
  background: var(--papel); cursor: pointer; display: block; width: 92px; height: 92px;
}
.miniaturas button.activa { border: 2px solid var(--azul); }
.miniaturas img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* El zoom: la foto se agranda y sigue al mouse dentro del marco. Sin librería
   ni segunda imagen: es la misma, escalada, con el origen donde está el dedo. */
.foto-grande {
  position: relative; overflow: hidden; border-radius: var(--radio);
  border: 1px solid var(--borde); background: var(--papel);
}
.foto-grande img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block;
  transition: transform .25s ease;
}
.foto-grande.zoom img { transform: scale(2.4); transition: transform .12s ease-out; }
.pista-zoom {
  position: absolute; left: 14px; bottom: 14px;
  background: rgba(35, 35, 38, .82); color: #fff; font-size: .74rem;
  padding: 7px 13px; border-radius: 20px; display: flex; align-items: center; gap: 7px;
  pointer-events: none; transition: opacity .2s;
}
.foto-grande.zoom .pista-zoom { opacity: 0; }

/* El cartelito no puede decir "mouse" en un celular. Se escriben las dos
   frases y el navegador elige según si el aparato tiene o no puntero fino. */
.pista-zoom .con-dedo { display: none; }
@media (hover: none), (pointer: coarse) {
  .pista-zoom .con-mouse { display: none; }
  .pista-zoom .con-dedo { display: inline; }
}
/* Mientras está apretado, el dedo mueve el zoom y no la página. */
.foto-grande { touch-action: pan-y; }
.foto-grande.zoom { touch-action: none; }

.panel-compra { display: flex; flex-direction: column; gap: 16px; }
.bloque-precio { padding: 20px; }
.bloque-precio .precio { font-size: 2.2rem; line-height: 1.15; }
.fila-precio { display: flex; align-items: center; gap: 11px; }

.cantidad { display: flex; align-items: center; border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; }
.cantidad button {
  padding: 13px 16px; font-size: 1.05rem; background: none; border: 0; color: var(--tinta-suave);
  cursor: pointer; min-height: 48px;
}
.cantidad button:hover { color: var(--tinta); }
.cantidad .valor { padding: 0 8px; font-weight: 700; min-width: 28px; text-align: center; }

.datos { padding: 20px; }
.datos .linea { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: .9rem; }
.datos .linea + .linea { border-top: 1px solid var(--fondo); }
.datos .linea .que { color: var(--tinta-suave); }
.datos .linea .cuanto { font-weight: 500; text-align: right; }
.datos p { font-size: .84rem; line-height: 1.6; color: var(--tinta-suave); margin: 14px 0 0; }

.puente-personalizadas {
  background: var(--rosa-suave); border: 1px solid var(--rosa); border-radius: var(--radio);
  padding: 16px 18px; display: flex; align-items: center; gap: 14px; color: inherit;
}
.puente-personalizadas:hover { color: inherit; filter: brightness(.98); }
.puente-personalizadas .titulo { font-size: .88rem; font-weight: 700; color: var(--rosa); }
.puente-personalizadas .sub { font-size: .82rem; color: var(--tinta-suave); }

/* -------------------------------------------------------------- carrito */

.dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 22px; align-items: start; }
.renglon { display: flex; gap: 16px; align-items: center; padding: 16px 0; }
.renglon + .renglon { border-top: 1px solid var(--fondo); }
.renglon img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; display: block; }
.renglon .quitar { background: none; border: 0; color: var(--gris); font-size: 1.2rem; cursor: pointer; padding: 8px; }
.renglon .quitar:hover { color: var(--rosa); }

.entrega-opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.entrega {
  border: 1px solid var(--borde); border-radius: 12px; padding: 15px 16px;
  display: flex; align-items: center; gap: 12px; cursor: pointer; background: var(--papel);
  text-align: left; min-height: 48px;
}
.entrega .marca { width: 18px; height: 18px; border-radius: 10px; border: 2px solid #d5d7de; flex-shrink: 0; }
.entrega.elegida { border: 2px solid var(--azul); background: #f2f2ff; }
.entrega.elegida .marca { border: 5px solid var(--azul); }
.entrega .nombre { font-size: .88rem; font-weight: 700; }

.campo { display: block; margin-bottom: 16px; }
.campo span { display: block; font-size: .8rem; font-weight: 700; margin-bottom: 7px; }
.campo input, .campo textarea {
  width: 100%; padding: 14px 16px; border: 1px solid var(--borde); border-radius: 12px;
  font: inherit; font-size: .95rem; background: var(--papel); color: var(--tinta); min-height: 48px;
}
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--azul); outline-offset: -1px; }
.campo textarea { min-height: 96px; resize: vertical; }

.aviso {
  background: var(--ambar-suave); border: 1px solid #f0d9ae; border-radius: 12px;
  padding: 13px 15px; display: flex; gap: 11px; align-items: flex-start;
  font-size: .84rem; line-height: 1.55; color: #7a4e08;
}

.resumen .linea { display: flex; justify-content: space-between; font-size: .88rem; padding: 8px 0; }

/* La caja del código de descuento, en el resumen del carrito. */
.caja-codigo-descuento { border-top: 1px solid var(--fondo); padding-top: 14px; }
.caja-codigo-descuento .campo span { font-size: .78rem; }
.codigo-puesto {
  display: flex; align-items: center; gap: 10px;
  background: #e5f5ec; border: 1px solid var(--verde); border-radius: 12px;
  padding: 12px 14px; font-size: .86rem; color: var(--verde);
}
.codigo-puesto span { flex-grow: 1; }
.codigo-puesto .quitar {
  background: none; border: 0; color: var(--verde); font-size: 1.2rem;
  cursor: pointer; padding: 0 4px; line-height: 1;
}
.resumen .total { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0 4px; }
.resumen .total .precio { font-size: 1.7rem; }

.mensaje-previo {
  /* El verde de WhatsApp era el único color ajeno que quedaba en la compra.
     La burbuja se queda —se entiende que es un mensaje— pero en la paleta. */
  background: var(--lavanda); border: 1px solid rgba(0, 0, 255, .12);
  border-radius: 12px; border-top-left-radius: 4px; color: var(--tinta);
  padding: 16px 18px; font-size: .86rem; line-height: 1.7; white-space: pre-wrap;
}

.vacio { text-align: center; padding: 60px 20px; color: var(--tinta-suave); }
.vacio h2 { font-size: 1.5rem; margin-bottom: 10px; color: var(--tinta); }

/* ------------------------------------------------------- personalizadas */

/* Personalizadas quedó con el diseño viejo cuando se rehizo el inicio: el
   fucsia macizo de punta a punta y el titular de palo grueso. Pasa a la
   paleta aprobada —lavanda claro con letra azul— y el rosa vuelve a ser lo
   que es en el resto de la página: un detalle, no un fondo. */
.hero-personalizadas { background: var(--lavanda-clara); color: var(--azul); }
.hero-personalizadas .hero-grilla {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px;
  align-items: center; padding-block: 56px 64px;
}
.hero-personalizadas .hero-fotos { display: grid; gap: 12px; }
.hero-personalizadas .hero-fotos img {
  width: 100%; height: 100%; min-height: 0; object-fit: cover;
  border-radius: var(--radio); display: block; background: rgba(255, 255, 255, .12);
}
.hero-personalizadas .hero-fotos.de-1 { grid-template-columns: 1fr; aspect-ratio: 4/5; }
.hero-personalizadas .hero-fotos.de-2 { grid-template-columns: 1.25fr 1fr; aspect-ratio: 5/4; }
.hero-personalizadas h1 {
  font-family: var(--titular); font-weight: 400; text-transform: none;
  font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: 1.06; letter-spacing: -.02em;
  color: var(--azul);
}
.hero-personalizadas p {
  font-size: 1rem; line-height: 1.65; opacity: .8; margin: 20px 0 0;
  max-width: 460px; color: var(--azul);
}
.hero-personalizadas .ojo { color: var(--rosa); }
.hero-personalizadas .hero-fotos img { background: rgba(0, 0, 255, .08); }
.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.paso { background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 26px; }
.paso .numero { font-family: var(--arcade); font-size: 1.2rem; color: var(--azul); margin-bottom: 16px; }
.paso h3 { font-size: 1.15rem; margin-bottom: 8px; }
.paso p { font-size: .87rem; line-height: 1.6; color: var(--tinta-suave); margin: 0; }
.fichas { display: flex; gap: 9px; flex-wrap: wrap; }
.ficha-chica { background: var(--papel); border: 1px solid var(--borde); padding: 10px 18px; border-radius: 22px; font-size: .85rem; }
.caja-precio { background: var(--tinta); color: #fff; border-radius: var(--radio); padding: 26px; }
.caja-precio .desde { font-size: .92rem; opacity: .8; }
.caja-precio .monto { font-size: 2.3rem; font-weight: 700; font-family: var(--titulo); line-height: 1.15; }
.caja-precio p { font-size: .8rem; line-height: 1.6; opacity: .65; margin: 12px 0 0; }

/* -------------------------------------------------------------- confirmación */

.listo { text-align: center; padding: 40px 0; }
.listo .tilde {
  width: 76px; height: 76px; border-radius: 40px; background: #e5f5ec;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 22px;
}
.listo h1 { font-size: 2.1rem; margin-bottom: 12px; }
.listo p { font-size: 1rem; line-height: 1.65; color: var(--tinta-suave); max-width: 380px; margin: 0 auto 24px; }
.caja-codigo {
  background: var(--azul-suave); border: 1px solid var(--azul); border-radius: 12px;
  padding: 18px 20px; text-align: left; max-width: 420px; margin: 0 auto 24px;
}
.caja-codigo .rotulo { font-size: .7rem; color: var(--azul); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 7px; }
.caja-codigo .codigo { font-family: var(--arcade); font-size: 1.05rem; margin-bottom: 9px; }
.caja-codigo .link { background: var(--papel); border: 1px solid #c8c8ff; border-radius: 9px; padding: 10px 12px; font-size: .78rem; color: var(--azul); word-break: break-all; }

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

.pie { margin-top: 64px; background: var(--tinta); color: #fff; }
.pie-grilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding-block: 42px 28px; }
.pie-grilla a { color: rgba(255, 255, 255, .85); }
.pie-grilla a:hover { color: var(--rosa); }
.pie-grilla .rotulo { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .5; margin-bottom: 11px; }
.pie-grilla .lista { display: flex; flex-direction: column; gap: 9px; font-size: .88rem; }
.pie-grilla img { width: 52px; height: 52px; display: block; margin-bottom: 12px; }
.pie-fondo { border-top: 1px solid rgba(255, 255, 255, .12); }
.pie-linea { display: flex; align-items: center; gap: 14px; padding-block: 14px; font-size: .76rem; color: rgba(255, 255, 255, .45); }
.pie-linea a { color: rgba(255, 255, 255, .45); }
.pie-linea a:hover { color: #fff; }

/* WhatsApp dejó de ser un botón verde flotando solo: ahora es un botón más
   de la barra de abajo, con la misma piel que el carrito y las rayitas. Su
   forma la da `.boton-redondo`; acá no queda nada que decir. */

.mesa3d {
  position: relative; width: 100%;
  aspect-ratio: 1/1; background: var(--azul);
  /* Mantener apretado en el celular abría el menú de "copiar / consultar /
     traducir", como si se estuviera marcando un texto o guardando una foto.
     Acá adentro no hay nada que copiar: es un dibujo que se maneja con el
     dedo. */
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  /* El dedo puede desplazar la página aunque empiece el gesto acá. */
  touch-action: pan-y pinch-zoom;
  cursor: grab;
}
.mesa3d:active { cursor: grabbing; }

/* El hundido y el pop los maneja mesa3d.js cuadro a cuadro, con el mismo
   resorte que mueve la mesa: no hay transición ni animación de CSS acá, o
   competirían por la misma propiedad. Acá sólo queda el punto de apoyo de la
   transformación y el respeto por "reducir movimiento". */
.mesa3d { transform-origin: center 58%; }
@media (prefers-reduced-motion: reduce) {
  .mesa3d { transform: none !important; }
}
/* El visor se enfoca con el tabulador —ahí las flechas lo abren y lo
   cierran—, así que tiene que verse cuál está enfocado. */
.mesa3d:focus { outline: none; }
.mesa3d:focus-visible { outline: 2px solid var(--lavanda-clara); outline-offset: 6px; border-radius: 8px; }
/* El canvas va fuera del flujo. Si quedara adentro, su alto —que lo fija
   three en píxeles— empujaría el alto del contenedor, que a su vez decide el
   alto del canvas: se retroalimentan y el visor crece sin parar. Con
   `absolute`, el contenedor manda y el canvas obedece. */
.mesa3d canvas {
  position: absolute; inset: 0; display: block;
  opacity: 0; transition: opacity .5s ease;
}
.mesa3d.listo canvas { opacity: 1; }
/* La foto de respaldo, para la máquina que no puede con WebGL. Arranca
   invisible: cuando se mostraba mientras cargaba el modelo, se veía una mesa
   chica que de golpe se agrandaba al aparecer el 3D —dos encuadres
   distintos, uno sacado de un render viejo y el otro calculado para el
   tamaño real del visor—. Contra un fondo del mismo azul, no mostrar nada y
   dejar que la mesa aparezca fundiéndose es más prolijo que ese salto. */
.mesa3d-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; opacity: 0; transition: opacity .5s ease;
  /* Que el dedo apoyado no la trate como una foto para guardar. */
  pointer-events: none; -webkit-touch-callout: none; -webkit-user-drag: none;
}
.mesa3d.sin-3d .mesa3d-poster { opacity: 1; }
.mesa3d.sin-3d canvas { display: none; }

/* La pista de que se puede mantener apretado. Sólo donde no hay mouse: con
   mouse el gesto es pasar por arriba y se descubre sin que nadie lo diga.
   Nada anuncia que la mesa gira: eso se encuentra solo. */
/* El botón principal del boceto: pastilla blanca, letra azul. */
.boton.claro {
  background: var(--lavanda-clara); color: var(--azul); border: 0;
  font-family: var(--titular); font-weight: 500; font-size: 1.02rem;
  text-transform: none; letter-spacing: 0; padding: 15px 26px;
}
.boton.claro:hover { background: #fff; color: var(--azul); }

/* Y el secundario: contorno finito sobre el azul. */
.mesa3d-boton {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid rgba(240, 238, 255, .55);
  color: var(--lavanda-clara); border-radius: 24px; padding: 10px 20px;
  font: inherit; font-size: .9rem; cursor: pointer;
}
.mesa3d-boton:hover { border-color: var(--lavanda-clara); background: rgba(240, 238, 255, .1); }
.mesa3d-boton:focus-visible { outline: 2px solid var(--lavanda-clara); outline-offset: 3px; }

.mesa3d-pista {
  display: none;
  grid-column: 2; justify-self: center;
  align-items: center; gap: 8px; margin: -12px 0 0;
  font-size: .82rem; color: var(--lavanda-tenue);
  transition: opacity .45s ease;
}
@media (hover: none) {
  .mesa3d-pista { display: flex; }
}
.mesa3d-pista.oculta { opacity: 0; }

/* El guiño de la ruedita, sobre el centro visual de la mesa. Sin caja y sin
   fondo: sólo el dibujito y la frase, en blanco flojo. No recibe el mouse,
   así que no se mete en el medio de nada. */
.mesa3d-guino {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  color: #fff; opacity: 0; visibility: hidden;
  transition: opacity .7s ease, visibility 0s linear .7s;
  pointer-events: none; z-index: 2;
}
/* Blanco pleno: el pedido era "baja opacidad pero legible", y sobre la tapa
   clara de la consola con .88 se perdía. Lo que lo mantiene discreto es el
   tamaño y que dure cuatro segundos, no que esté desvaído. */
.mesa3d-guino.viendose { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }
.mesa3d-guino span {
  font-size: .92rem; font-weight: 500; letter-spacing: .01em; white-space: nowrap;
  /* Blanco sobre blanco: el guiño cae justo encima de la tapa de la
     PlayStation, que es la parte más clara de toda la pantalla. Con una
     sombra suave se perdía —parecía que no aparecía nunca—. Ahora lleva
     contorno oscuro pegado a la letra (los dos primeros desenfoques, casi
     sin radio) más el halo ancho de antes, que es el que lo despega del
     azul. Sigue sin caja: es contorno, no recuadro. */
  text-shadow:
    0 0 2px rgba(0, 0, 40, .95), 0 0 4px rgba(0, 0, 40, .9),
    0 1px 3px rgba(0, 0, 50, .85), 0 2px 14px rgba(0, 0, 50, .75);
}
.mesa3d-guino svg {
  filter:
    drop-shadow(0 0 1.5px rgba(0, 0, 40, .95)) drop-shadow(0 0 3px rgba(0, 0, 40, .85))
    drop-shadow(0 1px 3px rgba(0, 0, 50, .85)) drop-shadow(0 2px 10px rgba(0, 0, 50, .6));
}
/* La ruedita del dibujo sube y baja, despacio. */
.mesa3d-guino-rueda { animation: guino-rueda 2.1s ease-in-out infinite; }
@keyframes guino-rueda {
  0%, 100% { transform: translateY(0); }
  35%      { transform: translateY(-2.2px); }
  70%      { transform: translateY(1.4px); }
}
@media (prefers-reduced-motion: reduce) {
  .mesa3d-guino-rueda { animation: none; }
  .mesa3d-guino { transition: opacity .01s linear; }
}

/* ------------------------------------------ etiquetas de los materiales

   Cuatro nombres al costado derecho, con una línea fina y un punto que toca
   la pieza. Aparecen de a poco mientras la mesa se desarma y se van con el
   mismo fundido al armarse: la opacidad la maneja mesa3d.js con el progreso
   real del despiece, no con transiciones de CSS, porque tiene que poder
   quedarse a mitad de camino y volver para atrás sin reiniciar nada.

   El texto se queda quieto en la pantalla; lo único que persigue a la pieza
   es el punto y el recorrido de la línea. Nada de esto recibe el mouse: la
   rueda, el arrastre y el toque siguen llegando al visor. */
.mesa3d-anotaciones {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  overflow: visible;
}
.mesa3d-anotaciones svg {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
}
.mesa3d-anotaciones line { stroke: rgba(226, 230, 255, .75); stroke-width: 1; }
.mesa3d-anotaciones circle { fill: #e6e9ff; }
.mesa3d-etiqueta {
  position: absolute; left: 100%; top: 0;
  /* Alineadas a la izquierda y lo bastante anchas para que cada nombre entre
     en un renglon: "Madera multilaminada" partido en dos y centrado quedaba
     desprolijo. */
  margin-left: 10px; width: max-content; max-width: clamp(96px, 9.6vw, 152px);
  font-size: .82rem; line-height: 1.3; color: #e8ebff; text-align: left;
  text-shadow: 0 1px 6px rgba(0, 0, 60, .55);
  opacity: 0;
}
.mesa3d-etiqueta i { display: block; font-style: normal; color: rgba(226, 230, 255, .72); }

/* En el celular no hay margen derecho donde poner cuatro renglones: se
   muestra uno solo, el de la pieza que se está separando, en un lugar de
   alto fijo debajo del visor. Sin líneas ni puntos, que ahí no se leen. */
/* La franja del celular: un renglón de alto fijo debajo del visor con un
   punto y el material que se está separando. El alto no cambia nunca —ni
   cuando no dice nada—, así que nada salta de lugar mientras se desarma. Sin
   caja, sin fondo y sin líneas hacia las piezas: en una pantalla de 390 px
   esas líneas cruzarían la mesa entera. */
.mesa3d-nota {
  display: none; align-items: center; justify-content: center; gap: 10px;
  margin: 10px 0 0; height: 40px;
  /* En un renglon y nada mas: partido en dos se sale del alto fijo y la
     franja deja de ser estable, que es todo el punto. */
  white-space: nowrap;
  font-size: clamp(.8rem, 3.6vw, .88rem); color: var(--lavanda-media); text-align: center;
}
.mesa3d-nota .punto {
  width: 7px; height: 7px; border-radius: 50%; background: #e6e9ff;
  flex-shrink: 0; opacity: 0; transition: opacity .28s ease;
}
.mesa3d-nota .cual {
  margin-left: 4px; font-variant-numeric: tabular-nums;
  color: var(--lavanda-tenue); opacity: 0; transition: opacity .28s ease;
}
.mesa3d-nota span.texto { opacity: 0; transition: opacity .28s ease; }
@media (max-width: 760px) {
  .mesa3d-nota { display: flex; }
  .mesa3d-anotaciones { display: none; }
  /* Una sola franja: la pista del gesto vive adentro de la misma, así no hay
     dos renglones apilados debajo de la mesa. */
  .mesa3d-pista { display: none; }
}


/* ---------------------------------------------- la colección y el cierre */

/* El fondo y los colores de la colección están más abajo, con el resto de su
   piel azul: acá quedan nada más los espacios. Fue lavanda clara un tiempo,
   para que hiciera de respiro entre el azul de la portada y el del pie; ahora
   comparte el azul con las dos, que es lo que pidió Dani. */
.coleccion { padding-block: 54px 48px; }
/* Metida adentro de la colección, la franja va pegada al borde de arriba y se
   come el padding de la sección; si no, quedaba flotando en el medio. */
.coleccion > .destinos { margin: -54px 0 34px; border-top: 0; }
.coleccion-titulo {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 28px);
  flex-wrap: wrap; margin-bottom: clamp(14px, 2.4vh, 24px);
}
.coleccion-titulo .filtros-pastilla { margin: 0; flex: 0 1 auto; }
.coleccion h2 {
  font-family: var(--titular); font-weight: 400; color: var(--azul);
  font-size: clamp(1.9rem, 3vw, 2.7rem); letter-spacing: -.02em; text-transform: none;
}
.coleccion-todas {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  color: var(--azul); font-size: .95rem; text-decoration: none;
}
.coleccion-todas:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Las categorías dejan de ser una grilla aparte: son los filtros de acá. */
.filtros-pastilla { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.pastilla {
  border: 1px solid rgba(0, 0, 255, .3); border-radius: 22px; padding: 8px 18px;
  color: var(--azul); text-decoration: none; font-size: .92rem; white-space: nowrap;
}
.pastilla:hover { border-color: var(--azul); }
.pastilla.activa { background: var(--azul); border-color: var(--azul); color: var(--lavanda-clara); }

.grilla-coleccion { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pieza-coleccion { text-decoration: none; color: inherit; display: block; }
.pieza-foto {
  aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; background: #dcdcee;
}
.pieza-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pieza-coleccion:hover .pieza-foto img { transform: scale(1.03); transition: transform .4s ease; }
.pieza-nombre { margin-top: 14px; font-size: 1.02rem; color: var(--azul); }
.pieza-precio { margin-top: 3px; font-size: 1.02rem; color: var(--azul); opacity: .78; }
.coleccion-nota {
  margin: 30px 0 0; padding-top: 18px; text-align: center;
  border-top: 1px solid rgba(0, 0, 255, .14);
  font-size: .9rem; color: var(--azul); opacity: .72;
}

/* ============================================ la colección, también en azul

   Estaba sobre lavanda clara y quedaba como un sitio distinto pegado abajo de
   la portada. Ahora comparte fondo con la primera pantalla —el mismo azul, el
   mismo halo detrás, el mismo índigo hundiéndose al pie— así que lo que se lee
   al bajar es la misma página siguiendo, no otra.

   Todo lo que acá abajo se repinta es lo mismo de siempre dado vuelta: lo que
   era azul sobre claro pasa a ser claro sobre azul. El contenido no cambia. */
.coleccion {
  position: relative; overflow: hidden;
  background: var(--azul); color: var(--lavanda-media);
}
/* El contenido por encima de las dos capas del fondo. */
.coleccion > .contenedor, .coleccion > .destinos { position: relative; z-index: 1; }

.coleccion h2, .coleccion-todas { color: #fff; }
.coleccion .pastilla { border-color: rgba(255, 255, 255, .34); color: #fff; }
.coleccion .pastilla:hover { border-color: #fff; }
/* La activa se da vuelta: sobre claro era azul llena, acá es blanca llena. */
.coleccion .pastilla.activa { background: #fff; border-color: #fff; color: var(--azul); }
.coleccion .pieza-nombre { color: #fff; }
.coleccion .pieza-precio { color: var(--lavanda-media); }
/* El hueco de la foto mientras carga, en un azul más oscuro y no en gris: el
   gris claro sobre el azul se veía como cuatro agujeros. */
.coleccion .pieza-foto { background: rgba(4, 4, 60, .45); }
.coleccion-nota { border-top-color: rgba(255, 255, 255, .18); color: var(--lavanda-media); opacity: .8; }

/* La franja de destinos, sin fondo propio. Era una banda lavanda maciza y
   cortaba la pantalla en dos —la misma queja de cuando partía la portada—.
   Probé con un velo claro y seguía leyéndose como una banda. Sin fondo y con
   una sola raya finita abajo, los nombres flotan sobre el mismo azul y lo
   único que separa es la raya. */
.coleccion > .destinos {
  background: none; color: #fff;
  border-top: 0; border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.coleccion > .destinos .destinos-titulo { opacity: .7; }

/* ================================================== la ficha, también en azul

   Entrar a una mesa no tiene que sentirse como salir del sitio. Acá no hay
   pantallas ni imán —una ficha se lee de corrido, con sus fotos y sus datos—
   pero el fondo es el mismo azul con el mismo halo. Sin el sombreado del pie,
   que acá taparía las características.

   Las tarjetas blancas —el precio, las características— se quedan blancas: son
   lo que hay que leer y decidir, y sobre el azul flotan. Lo único que se
   repinta es lo que estaba suelto sobre el fondo. */
.pagina-azul {
  position: relative; overflow: hidden;
  background: var(--azul); color: var(--lavanda-media);
  min-height: 100svh;
  /* Se sube detrás de la cabecera y se compensa con padding, igual que la
     portada. Sin esto, el azul arrancaba recién abajo de la cabecera —que
     está en el flujo, porque es pegajosa— y quedaba una banda clara arriba de
     todo con una raya dura en el medio. Así la cabecera flota sobre el azul. */
  margin-top: calc(var(--cab, 0px) * -1);
  padding-top: calc(var(--cab, 0px) + clamp(10px, 2vh, 28px));
  padding-bottom: clamp(30px, 6vh, 70px);
}
.pagina-azul > .contenedor, .pagina-azul > section { position: relative; z-index: 1; }
.pagina-azul .migas, .pagina-azul .migas a { color: var(--lavanda-media); }
.pagina-azul .migas a:hover { color: #fff; }
.pagina-azul .ficha-titulo, .pagina-azul h1, .pagina-azul h2, .pagina-azul h3 { color: #fff; }
.pagina-azul .seccion-titulo h2 { color: #fff; }
.pagina-azul .mesa-nombre { color: #fff; }
/* Las miniaturas, con el borde claro: el azul oscuro sobre el azul no se veía. */
.pagina-azul .miniaturas button { border-color: rgba(255, 255, 255, .28); }
.pagina-azul .miniaturas button.activa { border-color: #fff; }

/* ------------------------------------------ el catálogo, pantalla por pantalla

   Cada pantalla es una sección `.coleccion` más, así que hereda todo: el azul,
   el halo, los colores dados vuelta y el imán de la rueda. Lo único propio es
   cuánto puede medir cada foto, que no es lo mismo con una fila que con dos.

   El tamaño de las fotos lo hereda de `.coleccion`, que ya lo tiene resuelto
   para un renglón de cuatro. */
/* La PRIMERA pantalla se sube detrás de la cabecera.
   Sin esto, la sección empieza abajo de la cabecera —que está en el flujo,
   porque es pegajosa— y arriba de todo quedaba una banda del color del fondo
   de la página: 232 px de claro sobre el azul, con el título adentro. Encima,
   la cabecera se medía contra esa banda y se pintaba como si estuviera sobre
   claro. Sólo la primera: a las demás, subirlas las metería encima de la
   anterior. */
.pantalla-mesas:first-child { margin-top: calc(var(--cab, 0px) * -1); }

/* Personalizadas: una sola sección, sobre claro. El padding de arriba lo pone
   el bloque del ritmo de pantallas, que además le deja lugar a la cabecera. */
.idea { background: #e9e7fb; color: var(--azul); padding-block: 48px; }
.idea-grilla { display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: 36px; align-items: center; }
.idea h2 {
  font-family: var(--titular); font-weight: 400; color: var(--azul);
  font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.06; letter-spacing: -.02em; text-transform: none;
}
.idea-texto p { margin: 14px 0 24px; font-size: 1rem; line-height: 1.55; color: var(--azul); opacity: .8; }
.boton.azul {
  background: var(--azul); color: var(--lavanda-clara); border: 0;
  font-family: var(--titular); font-weight: 500; text-transform: none; letter-spacing: 0;
  padding: 14px 24px;
}
.boton.azul:hover { background: #1414ff; color: #fff; }
.idea-foto { margin: 0; }
.idea-foto img { width: 100%; border-radius: 12px; display: block; }
.idea .franja-clientes figcaption { color: var(--azul); opacity: .7; }

/* Quiénes somos. */
.somos {
  background: #fff; color: var(--tinta); padding-block: 56px;
  /* Al entrar por "Quiénes somos" la sección se alinea arriba de todo y la
     cabecera pegajosa le tapaba la volanta. Con este margen de scroll queda
     justo debajo. --cab lo mide tienda.js. */
  scroll-margin-top: calc(var(--cab, 0px) + 18px);
}
/* El titular es una frase de dos tiempos, no un rótulo: un punto menos de
   cuerpo para que "Terminé creando START deco." entre en un renglón y no
   deje "deco." solo abajo. */
.somos .ojo { color: var(--rosa); }
.somos-grilla {
  display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  gap: 44px; align-items: center;
}
.somos h2 {
  font-family: var(--titular); font-weight: 400; color: var(--azul);
  /* Dos renglones, no tres. Medido: en la columna de 520 px, "Terminé creando
     START deco." necesita 592 px con el cuerpo de 40 que tenía, así que se
     partía y el titular entero caía en tres renglones —eso era lo que se veía
     desacomodado—. Entra en uno con 35 px o menos; el tope quedó en 34,4. */
  font-size: clamp(1.6rem, 2.45vw, 2.15rem); line-height: 1.14; letter-spacing: -.02em;
  text-transform: none; margin-bottom: 18px;
}
.somos-texto p { margin: 0 0 14px; font-size: 1rem; line-height: 1.65; color: var(--tinta); }
.somos-texto p b { color: var(--azul); font-weight: 600; }
.somos-cierre { color: var(--tinta-suave) !important; font-size: .95rem !important; }
/* Dos fotos, una alta y una apaisada: la de alguien usando la mesa y una
   mesa terminada. Cada una con su propio encuadre, sin recortar caras. */
.somos-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.somos-fotos figure { margin: 0; border-radius: var(--radio); overflow: hidden; background: var(--lavanda); }
.somos-fotos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.somos-fotos figure:first-child { aspect-ratio: 3/4; }
.somos-fotos figure:last-child { aspect-ratio: 3/4; }
@media (max-width: 760px) {
  .somos-grilla { grid-template-columns: 1fr; gap: 24px; }
  .somos-fotos figure { aspect-ratio: 4/3; }
}

/* Lo práctico, plegado. */
.antes { background: var(--lavanda-clara); color: var(--azul); padding-block: 44px 54px; }
.antes h2 {
  font-family: var(--titular); font-weight: 400; color: var(--azul);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem); letter-spacing: -.02em;
  text-transform: none; margin-bottom: 20px;
}
.plegable {
  border: 1px solid rgba(0, 0, 255, .16); border-radius: 12px;
  margin-bottom: 12px; background: rgba(255, 255, 255, .5);
}
.plegable summary {
  cursor: pointer; list-style: none; padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 1rem; color: var(--azul);
}
.plegable summary::-webkit-details-marker { display: none; }
.plegable summary::after { content: "+"; font-size: 1.3rem; line-height: 1; opacity: .6; }
.plegable[open] summary::after { content: "−"; }
.plegable-cuerpo { padding: 0 20px 18px; font-size: .95rem; line-height: 1.6; color: var(--azul); opacity: .82; }
.plegable-cuerpo p { margin: 0 0 10px; }
.plegable-cuerpo ul { margin: 0; padding-left: 18px; }

@media (max-width: 760px) {
  .grilla-coleccion { grid-template-columns: 1fr; gap: 20px; }
  .idea-grilla { grid-template-columns: 1fr; gap: 22px; }
  .coleccion-titulo { flex-wrap: wrap; gap: 8px; }
}

/* ------------------------------------------------ la franja de destinos */

/* "Ya llegamos a…": una línea fina entre la portada y la colección. Sólo
   aparece si el sistema pudo confirmar destinos; si no, no se dibuja nada. */
.destinos {
  background: var(--lavanda-clara); color: var(--azul);
  border-block: 1px solid rgba(0, 0, 255, .1);
  overflow: hidden;
}
.destinos-marco, .destinos-adentro {
  display: flex; align-items: center; gap: 22px;
  padding: 11px 20px; max-width: var(--ancho); margin: 0 auto;
}
.destinos-titulo {
  flex: 0 0 auto; font-family: var(--arcade); font-size: .46rem;
  letter-spacing: .12em; opacity: .62;
}
.destinos-riel {
  display: flex; align-items: center; gap: 0; overflow: hidden; flex: 1 1 auto;
  /* Las puntas se desvanecen. La tira se corta contra el borde del riel, así
     que sin esto los nombres aparecen y desaparecen partidos al medio —"ón ·
     Ayolas"— y se lee como un error de maquetación en vez de como algo que se
     está moviendo. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px,
                                      #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 28px,
                                      #000 calc(100% - 28px), transparent 100%);
}
.destinos-tira, .destinos-lista { display: flex; align-items: center; gap: 0; white-space: nowrap; }
.destino, .destinos-lista { font-size: .92rem; }
.destinos i { opacity: .38; margin: 0 14px; font-style: normal; }

/* La tira va dos veces y el recorrido es exactamente la mitad: al terminar,
   la copia está donde arrancó la primera y el salto no se ve. */
.destinos-riel { --paso: 46s; }
.destinos-riel > .destinos-tira { animation: destinos-correr var(--paso) linear infinite; }
@keyframes destinos-correr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.destinos:hover .destinos-riel > .destinos-tira { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .destinos-riel > .destinos-tira { animation: none; }
  .destinos-riel { overflow-x: auto; }
}

/* ------------------------------------------------------ pausa del visor */

.visor-pausa {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  background: rgba(10, 10, 40, .5); color: #fff; border: 0;
  border-radius: 20px; padding: 6px 13px; font: inherit; font-size: .72rem;
  cursor: pointer; opacity: .55; transition: opacity .2s ease;
}
.visor-pausa:hover, .visor-pausa:focus-visible { opacity: 1; }

/* ------------------------------------------- azul arriba, claro al bajar */

/* La portada es azul. De ahí para abajo —y en todo el recorrido de compra:
   ficha, opciones, carrito, formulario, confirmación y seguimiento— la
   página es clara. El azul se queda en los títulos, los botones y los
   detalles, que es como se leen las secciones claras de la portada.
   Va al final a propósito: pisa lo de más arriba. */

body { background: var(--lavanda-clara); color: var(--tinta); }

/* La cabecera sigue siendo una banda azul: es lo que la ata a la portada, y
   sobre el azul de arriba desaparece sola. */
.cabecera { background: var(--azul); border-bottom-color: rgba(255, 255, 255, .18); }
.cabecera .menu a { color: var(--lavanda-media); }
.cabecera .menu a:hover, .cabecera .menu a.activo { color: var(--lavanda-clara); border-bottom-color: var(--lavanda-clara); }
.cabecera .menu a.resaltado { color: var(--rosa); }
.cabecera .carrito-boton { color: var(--lavanda-clara); }
/* El botón de las tres rayas va del mismo color que el carrito: la cabecera
   es una banda azul en toda la tienda, y en tinta oscura no se veía. */
.cabecera .menu-boton { color: var(--lavanda-clara); }
.cabecera .boton-cabecera { border-color: rgba(230, 230, 246, .75); color: var(--lavanda-clara); }
.cabecera .boton-cabecera:hover { background: var(--lavanda); color: var(--azul); }
.cabecera.sobre-portada { background: transparent; border-bottom-color: transparent; }

/* Los títulos, en azul. Los de la portada —que sí va sobre azul— se aclaran
   más abajo, que es la única excepción. */
h1, h2, h3 { color: var(--azul); }
.portada h1, .portada h2, .portada h3 { color: var(--lavanda-clara); }
.apagado, .chico-texto, .cargando { color: var(--tinta-suave); }
.juego { background: transparent; }

/* Las tarjetas: blancas sobre la lavanda, con el borde apenas marcado. */
.mesa, .tarjeta, .paso, .caja, .caja-codigo, .categoria, .plegable {
  background: #fff; color: var(--tinta); border-color: rgba(0, 0, 255, .12);
}
.mesa h3, .tarjeta h3, .paso h3, .categoria h3 { color: var(--azul); }
.mesa-foto { background: #e4e2f5; }

.seccion-titulo a { color: var(--azul); }
.vacio { color: var(--tinta-suave); }

/* Los campos del formulario de compra sobre fondo claro. */
input, textarea, select {
  background: #fff; color: var(--tinta); border-color: rgba(0, 0, 255, .18);
}
input::placeholder, textarea::placeholder { color: var(--tinta-suave); opacity: .7; }
input:focus, textarea:focus, select:focus { border-color: var(--azul); outline-color: var(--azul); }
label, .rotulo { color: var(--tinta); }

/* Avisos, errores y estados vacíos: el mismo lenguaje que el resto. */
.aviso, .error, .mensaje {
  background: #fff; color: var(--tinta); border: 1px solid rgba(0, 0, 255, .14);
}
.error { border-color: rgba(236, 38, 143, .5); color: #b3006b; }

/* Las fotos de clientes. */
.franja-clientes { margin: 0; }
.franja-clientes .visor {
  aspect-ratio: 4/3; border-radius: var(--radio); background: #d9d7ee;
}
.franja-clientes figcaption {
  margin-top: 12px; font-size: .84rem; color: var(--tinta-suave); text-align: center;
}

/* El pie, claro y separado por una línea. */
.pie { background: var(--lavanda); border-top: 1px solid rgba(0, 0, 255, .14); color: var(--tinta); }
.pie a { color: var(--azul); }
.pie a:hover { color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }
.pie .rotulo { color: var(--tinta-suave); }

/* ------------------------------------------------------------- celular */

@media (max-width: 1080px) {
  .grilla-mesas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grilla-categorias { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ficha { grid-template-columns: 80px minmax(0, 1fr); }
  .panel-compra { grid-column: 1 / -1; }
  .dos-columnas { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .hero-personalizadas .hero-grilla { grid-template-columns: 1fr; gap: 28px; padding-block: 36px 40px; }

  /* En el celular el recorte va arriba y el texto abajo. La foto se ancla por
     la cara —que nunca se corta— y se deja que la consola se vaya por la
     derecha: achicarla para que entre entera dejaría todo del tamaño de una
     estampilla. */
  .portada { min-height: 0; display: block; }
  /* `align-items: stretch` y no el `center` que hereda de la reja de
     escritorio: centrado, el bloque de texto se encogía al ancho de su
     contenido y quedaba flotando en el medio, cuando el boceto lo quiere
     pegado al margen izquierdo igual que en la pantalla grande. */
  .portada-adentro { display: flex; flex-direction: column; align-items: stretch; }
  /* De borde a borde, como la de más abajo: es lo primero que se ve. */
  /* Adentro de los márgenes y más baja que ancha: de borde a borde y
     cuadrada quedaba enorme, y entre la última pata y el título había un
     palmo de azul vacío. */
  /* El orden del celular: primero lo que hay que leer —volanta, título,
     descripción y botón—, y después la mesa. Estaba al revés: el visor y los
     dos renglones de ayuda empujaban el título hasta los 444 px de una
     pantalla de 844, y en un teléfono con las barras de Safari a la vista el
     botón quedaba en el filo. El orden del HTML ya es este, así que no hace
     falta ningún `order`: alcanza con sacar los que había. */
  .portada .mesa3d {
    aspect-ratio: 5/4; width: 100%; margin: 6px 0 0;
  }
  .portada-adentro { padding-inline: 20px; }
  /* La pista va pegada abajo de la mesa; sin darle su lugar en la fila caía
     después de todo el texto, que es donde ya no sirve de nada. El margen
     negativo se comía el aire que el encuadre dejaba debajo de las patas;
     ahora que la sombra no reserva lugar, la mesa llega más abajo y ese
     margen le pasaba las patas por encima al texto. */
  .mesa3d-pista { order: 0; margin: 6px 0 0; }
  .portada-pie { order: 0; grid-column: auto; margin: 6px 0 0; }
  /* En el celular entra menos ancho, así que se elige qué se muestra: se
     corta al de la foto donde empieza la cabeza (el hombro y el brazo
     quedan afuera) y se gana lugar para la consola, que es lo que se vende. */
  .portada-foto {
    position: relative; left: 0; transform: none;
    width: 158%; margin-left: -33%; margin-top: 8px;
  }
  .portada-foto img { filter: drop-shadow(8px 10px 10px rgba(0, 0, 42, .42)); }
  /* La posición sale de la foto, no de la pantalla: con los mismos porcentajes
     que en grande cae en el mismo lugar del cuello. Sólo cambia el tamaño. */
  .portada-credito { font-size: .68rem; }
  .portada-texto { max-width: none; padding-block: 18px 0; margin-top: 0; }
  /* 36 px: el tamaño del boceto del celular. El de escritorio —46 px acá—
     hacía un título de tres renglones que se comía media pantalla. Sin alto
     fijo y sin recortes: si alguien agranda la letra del sistema, el bloque
     crece y la página se desplaza, que es lo que tiene que pasar. */
  .portada h1 { font-size: 2.25rem; line-height: 1.12; }
  .portada .bajada { font-size: 1rem; margin: 12px 0 0; }
  /* El botón, del ancho de su texto y pegado al título, como en el boceto.
     Estirado de borde a borde parecía una barra de formulario. */
  .portada-acciones { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; margin-top: 18px; }
  .portada-acciones .boton { justify-content: center; }
  .portada-aparte { text-align: center; }
  .portada-rubros { margin-top: 30px; }
  /* El botón de WhatsApp flota abajo a la derecha: se le deja el lugar para
     que no se pare encima de la última categoría. */
  .portada-rubros .rubros { padding-right: 66px; }
  .portada-rubros a { font-size: .92rem; }
  /* El sello va al final de todo: metido entre la mesa y el título separaba
     justo lo que hay que tener junto. */
  .portada-ojo {
    position: static; order: 2; margin: 16px 0 0; font-size: .5rem;
  }
  .beneficios-grilla { grid-template-columns: 1fr; gap: 10px; text-align: left; }
  .grilla-mesas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .grilla-categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .franja-personalizadas { grid-template-columns: 1fr; padding: 32px 24px; }
  .franja-personalizadas h2 { font-size: 1.7rem; }
  .pasos { grid-template-columns: 1fr; }
  .entrega-opciones { grid-template-columns: 1fr; }
  .pie-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }

  .seccion-titulo h2 { font-size: 1.45rem; }

  /* En el celular las miniaturas van abajo, en fila */
  .ficha { grid-template-columns: 1fr; }
  .miniaturas { flex-direction: row; overflow-x: auto; order: 2; }
  .miniaturas button { width: 70px; height: 70px; flex-shrink: 0; }
  .foto-grande { order: 1; }
  .renglon { flex-wrap: wrap; }
  .renglon img { width: 64px; height: 64px; }
}

/* En pantalla chica el pulgar llega antes al botón que a la cabecera */
@media (max-width: 760px) {
  /* La cabecera del celular: logo a la izquierda, carrito y las tres rayas a
     la derecha. Los tres nombres del menú ya no se arrastran de costado
     —quedaban cortados contra el carrito—: ahora se despliegan. */
  .barra-cabecera { display: flex; gap: 12px; padding-block: 15px; }
  .barra-acciones { margin-left: auto; gap: 16px; }
  .cabecera .contenedor { padding-inline: 20px; }
  .boton-cabecera { display: none; }
  .menu-boton { display: inline-flex; }
  /* 145-165 px en el celular, como pide la guía del logo. */
  .marca-logo { width: 152px; }
  .pedido-guardado {
    max-width: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* El desplegable cuelga de la cabecera y ocupa el ancho entero. Cerrado no
     existe —`display: none`—, así que no se lo puede tabular sin querer. */
  .cabecera { position: sticky; }
  .barra-cabecera { position: relative; }
  /* `fixed` y no `absolute`: colgado del contenedor, el panel se quedaba del
     ancho de su texto en vez de estirarse de borde a borde. Fijo al ancho de
     la ventana y arrancando justo abajo de la cabecera —que es pegajosa, así
     que siempre está en el borde de arriba— no hay ninguna caja intermedia
     que lo encoja. --cab es el alto real de la cabecera, que mide tienda.js. */
  .barra-cabecera .menu {
    display: none;
    position: fixed; top: var(--cab, 60px); left: 0; width: 100vw;
    /* El ancho va en `vw` y no con `left: 0; right: 0`: dejándolo en auto
       entre los dos bordes, el panel se quedaba del ancho de su texto
       —174 px— en vez de estirarse. Con una medida explícita no hay nada que
       interpretar. Y sin el scroll horizontal que traía el menú de la barra,
       que acá adentro no tiene sentido. */
    overflow: visible;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px 20px 14px;
    background: var(--papel); border-bottom: 1px solid var(--borde);
    box-shadow: 0 18px 30px rgba(0, 0, 40, .18);
  }
  .cabecera.sobre-portada .menu {
    background: var(--azul); border-bottom-color: rgba(255, 255, 255, .22);
  }
  .cabecera.menu-abierto .menu { display: flex; }
  .barra-cabecera .menu a {
    font-size: .95rem; letter-spacing: .04em; white-space: nowrap;
    padding: 14px 0; border-bottom: 0;          /* el subrayado del activo no va acá */
    border-top: 1px solid rgba(128, 128, 170, .22);
  }
  .barra-cabecera .menu a:first-child { border-top: 0; }
  .barra-cabecera .menu a.activo { border-bottom-color: transparent; }
  /* Con `.cabecera .menu a` pisándolo, el rosa no llegaba: por eso el
     selector repite la cabecera. */
  .menu .solo-compacto { display: block; }
  .cabecera .menu .solo-compacto { color: var(--rosa); font-weight: 700; }
}

/* ---------------------------------------------------------------- juego */
/* El jueguito de la portada: se funde con el fondo de la página, sin caja ni
   banda de color. Todo el dibujo lo hace juego.js adentro del canvas. */

.juego { background: var(--fondo); }
.juego-caja { padding-block: 10px 6px; }
.juego-lona {
  display: block; width: 100%; margin: 0 auto; cursor: pointer;
  touch-action: manipulation;             /* que tocar no haga zoom ni scroll */
}
.juego-lona:focus-visible { outline: 2px solid var(--azul); outline-offset: 4px; border-radius: 6px; }


/* --------------------------------------------- el aviso de "lo sumé" ---- */
/* Una barra que aparece abajo cuando se suma una mesa y se va sola. Existe
   para que sumar no tenga que sacar a nadie de la página: se ve que quedó
   guardado, se puede entrar al carrito si uno quiere, y si no, se sigue
   mirando. Va sobre el botón de WhatsApp y le deja lugar. */
.aviso-carrito {
  position: fixed; left: 50%; bottom: 18px; z-index: 60;
  transform: translate(-50%, 130%);
  display: flex; align-items: center; gap: 14px;
  width: min(520px, calc(100vw - 32px));
  padding: 13px 16px; border-radius: 14px;
  background: var(--azul); color: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 60, .3);
  opacity: 0; visibility: hidden;
  transition: transform .34s cubic-bezier(.32, .72, 0, 1), opacity .28s ease, visibility 0s linear .34s;
}
.aviso-carrito.viendose {
  transform: translate(-50%, 0); opacity: 1; visibility: visible; transition-delay: 0s, 0s, 0s;
}
.aviso-carrito .tilde {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--verde); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 700;
}
.aviso-carrito .que { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.aviso-carrito .que strong { font-size: .94rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aviso-carrito .que .apagado { font-size: .78rem; color: var(--lavanda-media); }
.aviso-carrito .ir {
  margin-left: auto; flex-shrink: 0;
  background: #fff; color: var(--azul); border-radius: 20px;
  padding: 8px 16px; font-size: .84rem; font-weight: 700; white-space: nowrap;
}
.aviso-carrito .ir:hover { color: var(--azul); filter: brightness(.95); }
/* En el celular no puede taparle el botón de WhatsApp. */
@media (max-width: 760px) {
  .aviso-carrito { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); padding-right: 12px; }
  body:not(.en-portada) .aviso-carrito { width: calc(100vw - 92px); left: 16px; transform: translate(0, 130%); }
  body:not(.en-portada) .aviso-carrito.viendose { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .aviso-carrito { transition: opacity .01s linear, visibility 0s; }
}


/* ==================================================== el ritmo de pantallas

   El problema, medido: la portada era la única sección atada al alto de la
   ventana. Todas las demás median lo que medía su contenido, así que la
   proporción cambiaba con cada monitor —la colección ocupaba 1,28 pantallas
   en una ventana de 590 px y 0,70 en una de 1080—. Bajando con la rueda uno
   caía siempre a mitad de camino: el título arriba y las mesas cortadas.

   Se arregla con dos cosas, y las dos las hace el navegador solo:

   1. UN IMÁN SUAVE. `proximity` y no `mandatory`: si venís cerca del borde de
      una sección, te acomoda; si estás leyendo en el medio de una larga, te
      deja en paz. El duro secuestra el scroll y en el celular se vuelve
      insoportable.

   2. CADA SECCIÓN ANCLA POR SU PRINCIPIO, con el alto de la cabecera
      descontado, así el título nunca queda tapado por la banda azul.

   Y las secciones que entran en una pantalla la ocupan entera. Las que no
   entran —"Quiénes somos" son seis párrafos— no se achican a la fuerza: se
   las deja largas y lo que importa es que el scroll caiga en su principio.
   No toda sección puede medir una pantalla, y fingir que sí sería empeorar
   el texto para ganar una simetría. */

@media (min-width: 761px) {
  /* SIN el imán del navegador.
     Estaban trabajando los dos a la vez: el de la página lleva a la sección
     de al lado con un deslizamiento suave, y apenas terminaba, el del
     navegador volvía a tironear para acomodar por su cuenta. Eso era el
     temblequeo de arriba y abajo al final de cada salto. El de la página cae
     exacto, así que el otro sobra. */
  html { scroll-snap-type: none; }

  .portada, .coleccion, .clientes, .cierre {
    /* Cada sección ancla con su borde en el borde de arriba de la ventana, y
       se ocupa ella misma de dejarle lugar a la cabecera con su padding.
       Anclando más abajo —para "no taparle el título"— quedaba visible una
       franja de la sección anterior detrás de la cabecera transparente: con
       la portada azul arriba, eso se leía como si la cabecera siguiera siendo
       una banda azul. Que cada sección llegue hasta arriba de todo y pase por
       debajo de la cabecera es lo que hace que la cabecera desaparezca. */
    scroll-snap-align: start;
    scroll-margin-top: 0;
  }

  /* Todas llenan la pantalla y centran lo suyo. Lo que no entra no se
     estira: se aprieta el contenido hasta que entra —ver más abajo—, porque
     una sección que mide pantalla y media obliga a scrollear adentro de ella
     y eso es exactamente lo que se quería sacar. */
  .coleccion, .cierre {
    min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    /* El lugar de la cabecera lo pone cada sección, no el ancla. */
    padding-top: calc(var(--cab-quieta, var(--cab, 0px)) + clamp(12px, 2.5vh, 36px));
  }

  /* La franja de destinos ahora vive adentro de la colección (ver tienda.js):
     como sección suelta medía 45 px y el imán paraba en una pantalla con un
     solo renglón. Acá arriba es el encabezado natural de la sección. */
  .destinos { scroll-snap-align: none; }
}

/* En el celular no hay imán: la pantalla es angosta, las secciones son mucho
   más altas que la ventana y acomodar el scroll a la fuerza pelea con el
   dedo. Ahí lo que sirve es que el scroll sea normal. */
@media (max-width: 760px) {
  html { scroll-snap-type: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
}


/* ======================================== que cada sección entre en una pantalla

   La medición que lo motivó: en una ventana de 1366×660 —una notebook común—
   la colección ocupaba 1,18 pantallas y "Quiénes somos" 1,31. Entrar en una
   sección y tener que scrollear adentro de ella es justamente lo que rompía
   la sensación de que la página cae parada.

   No se arregla estirando: se arregla apretando. Cada cosa de acá abajo es un
   recorte concreto medido contra esa ventana. En pantallas altas todo vuelve
   a respirar solo, porque las medidas están en `clamp` contra el alto. */

@media (min-width: 761px) {

  /* --- la colección --------------------------------------------------- */
  .coleccion { padding-bottom: clamp(16px, 3.5vh, 48px); }
  .coleccion > .destinos { margin-top: 0; margin-bottom: clamp(14px, 3vh, 34px); }
  .coleccion h2 { font-size: clamp(1.7rem, 3.4vh, 2.7rem); }
  .coleccion-titulo { margin-bottom: clamp(10px, 2vh, 20px); }
  .filtros-pastilla { margin-bottom: clamp(12px, 2.4vh, 26px); gap: 8px; }
  .pastilla { padding: clamp(5px, 1.1vh, 8px) clamp(12px, 2vw, 18px); }
  /* La foto va CUADRADA y no se discute: apaisada le corta las patas, y las
     patas hairpin son media mesa. Lo probé apaisado para ganar alto y estaba
     mal. El alto se gana en otro lado —ver más abajo, la grilla se angosta en
     pantallas bajas y los cuadrados se achican solos—. */
  .coleccion .pieza-nombre { margin-top: clamp(6px, 1.4vh, 14px); font-size: clamp(.9rem, 2vh, 1.02rem); }
  .coleccion .pieza-precio { font-size: clamp(.9rem, 2vh, 1.02rem); }
  .coleccion-nota { margin-top: clamp(12px, 2.6vh, 30px); padding-top: clamp(8px, 1.8vh, 18px); }

  /* --- quiénes somos --------------------------------------------------- */
  .somos { padding-bottom: clamp(20px, 4vh, 56px); }
  /* El texto en dos columnas. Seis párrafos en una sola miden 700 px de alto y
     no hay ventana baja que los aguante; en dos, entran.

     Las columnas van en el CONTENEDOR, no en cada párrafo: puestas en el
     párrafo, cada uno se partía por la mitad y se leía "Soy Daniel... de su"
     y al lado "gente, del cariño...". Y `break-inside: avoid` para que
     ningún párrafo quede cortado entre una columna y la otra. */
  .somos-texto { columns: 2; column-gap: 30px; }
  .somos-texto p { break-inside: avoid; font-size: clamp(.86rem, 1.85vh, 1rem);
    line-height: 1.55; margin-bottom: 10px; }
  /* El titular y la volanta cruzan las dos columnas: son el encabezado. */
  .somos-texto h2, .somos-texto .ojo { column-span: all; }
  .somos h2 { font-size: clamp(1.4rem, 3vh, 2.15rem); margin-bottom: clamp(8px, 1.6vh, 18px); }
  .somos .ojo { margin-bottom: clamp(6px, 1.4vh, 20px); }
  .somos-grilla { gap: clamp(20px, 3vw, 44px); }

  /* --- el cierre ------------------------------------------------------- */
  .cierre { background: var(--azul); color: var(--lavanda-clara); padding-bottom: clamp(24px, 5vh, 64px); }
  .cierre-grilla {
    display: grid; grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
    gap: clamp(24px, 4vw, 64px); align-items: center;
  }
  .cierre h2 {
    font-family: var(--titular); font-weight: 400; color: #fff;
    font-size: clamp(1.9rem, 5vh, 3.4rem); line-height: 1.08; letter-spacing: -.025em;
    text-transform: none; margin: 0 0 14px;
  }
  .cierre .ojo { color: var(--rosa); margin-bottom: 14px; }
  .cierre p { color: var(--lavanda-media); font-size: clamp(.92rem, 2vh, 1.08rem); margin: 0 0 clamp(16px, 3vh, 30px); max-width: 30ch; }
  .cierre-botones { display: flex; flex-wrap: wrap; gap: 12px; }
  .cierre-datos { margin: 0; display: grid; gap: clamp(12px, 2.4vh, 24px); }
  .cierre-datos > div { border-top: 1px solid rgba(255, 255, 255, .22); padding-top: clamp(8px, 1.6vh, 14px); }
  .cierre-datos dt {
    font-family: var(--arcade); font-size: .52rem; letter-spacing: .1em;
    color: var(--rosa); margin-bottom: 6px;
  }
  .cierre-datos dd {
    margin: 0; font-size: clamp(.84rem, 1.8vh, .96rem); line-height: 1.5;
    color: var(--lavanda-media);
  }
}

/* En el celular el cierre es una columna, sin alto forzado: ahí se scrollea
   normal y apretar el texto sólo lo haría menos legible. */
@media (max-width: 760px) {
  .cierre { background: var(--azul); color: var(--lavanda-clara); padding-block: 40px 46px; }
  .cierre-grilla { display: flex; flex-direction: column; gap: 30px; }
  .cierre h2 { font-family: var(--titular); font-weight: 400; color: #fff;
    font-size: 2rem; line-height: 1.1; text-transform: none; margin: 0 0 12px; }
  .cierre .ojo { color: var(--rosa); margin-bottom: 12px; }
  .cierre p { color: var(--lavanda-media); margin: 0 0 20px; }
  .cierre-botones { display: flex; flex-direction: column; gap: 10px; }
  .cierre-botones .boton { justify-content: center; }
  .cierre-datos { margin: 0; display: grid; gap: 18px; }
  .cierre-datos > div { border-top: 1px solid rgba(255, 255, 255, .22); padding-top: 12px; }
  .cierre-datos dt { font-family: var(--arcade); font-size: .5rem; letter-spacing: .1em;
    color: var(--rosa); margin-bottom: 6px; }
  .cierre-datos dd { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--lavanda-media); }
}


/* ============================================ la cabecera, siempre transparente

   Antes: transparente sobre la portada y banda azul sólida en cuanto bajabas.
   Esa banda te seguía por toda la página y, con secciones que ahora ocupan la
   pantalla entera, se comía el borde de arriba de cada una.

   Ahora no tiene fondo nunca. Lo único que cambia es el color de la letra,
   según lo que haya debajo: blanca sobre el azul de la portada y del cierre,
   azul sobre las secciones claras. La clase la pone tienda.js mirando qué
   sección está tapando la cabecera en cada momento.

   El costado oscuro de esto —letras sueltas sobre una foto— no nos toca: la
   cabecera nunca queda sobre una foto, siempre sobre un color plano. */
.cabecera, .cabecera.sobre-portada {
  background: transparent; border-bottom-color: transparent;
  transition: color .28s ease;
}

/* Sobre claro: letras azules. */
.cabecera.sobre-claro .menu a { color: var(--azul); }
.cabecera.sobre-claro .menu a:hover,
.cabecera.sobre-claro .menu a.activo { color: var(--azul); border-bottom-color: var(--azul); }
.cabecera.sobre-claro .carrito-boton,
.cabecera.sobre-claro .menu-boton,
.cabecera.sobre-claro .marca { color: var(--azul); }
.cabecera.sobre-claro .boton-cabecera { border-color: var(--azul); color: var(--azul); }
.cabecera.sobre-claro .boton-cabecera:hover { background: var(--azul); color: #fff; }
/* El logo es un SVG blanco. Sobre claro se cambia por el azul que ya existe
   en la carpeta: teñirlo con un filtro daba magenta —los filtros de CSS no
   saben de colores de marca— y el logo es lo último que puede salir de otro
   color. El cambio de archivo lo hace tienda.js. */

/* Sobre oscuro: letras claras, que es como venía. */
.cabecera.sobre-oscuro .menu a { color: var(--lavanda-media); }
.cabecera.sobre-oscuro .menu a:hover,
.cabecera.sobre-oscuro .menu a.activo { color: #fff; border-bottom-color: #fff; }
.cabecera.sobre-oscuro .carrito-boton,
.cabecera.sobre-oscuro .menu-boton { color: var(--lavanda-clara); }
.cabecera.sobre-oscuro .boton-cabecera { border-color: rgba(255, 255, 255, .8); color: #fff; }
.cabecera.sobre-oscuro .boton-cabecera:hover { background: #fff; color: var(--azul); }

/* El desplegable del celular sí necesita fondo: cuelga sobre el contenido. */
@media (max-width: 760px) {
  .cabecera.sobre-claro .menu { background: var(--papel); border-bottom-color: var(--borde); }
  .cabecera.sobre-oscuro .menu { background: var(--azul); border-bottom-color: rgba(255, 255, 255, .22); }
}


/* En una notebook baja —660 px de ventana— la colección quedaba en 1,06
   pantallas: le sobraban 41. El desglose decía dónde estaban: la nota del
   precio con 30 px de márgenes, y las fotos, que son lo que más alto ocupa.
   Con las fotos un poco más apaisadas y la nota más ajustada, entra. */
@media (min-width: 761px) and (max-height: 780px) {
  /* Con el logo grande arriba, el aire que se le suma a la cabecera es lo
     primero que sobra. Y en una ventana baja el logo cede unos puntos: entre
     un logo enorme y que la sección de abajo entre entera, entra la sección.
     En un monitor normal vuelve a su tamaño grande solo. */
  .coleccion, .cierre { padding-top: var(--cab-quieta, var(--cab, 0px)); }
  .barra-cabecera { padding-block: 6px; }
  /* (el alto de la marca ya lo resuelven los clamp en vh de más abajo, que
     además distinguen la portada del resto; acá no hace falta nada) */
  .coleccion-nota { margin-top: 10px; padding-top: 8px; }
  .idea-grilla { gap: 20px; }
  /* Los cuadrados se miden contra el ALTO de la ventana, no sólo contra el
     ancho. Son lo más alto de la sección, así que en una ventana baja hay que
     limitarlos o la sección se pasa —y cuando se pasa, el imán la trata como
     una sección larga y deja de saltar de una a la otra, que es lo que se
     sentía como "no me llega"—. Cuatro lados de 38vh más los huecos. */
  .coleccion .grilla-coleccion {
    gap: 16px;
    max-width: min(100%, calc(38vh * 4 + 48px));
    margin-inline: auto;
  }
  .coleccion-nota { font-size: .8rem; }
  /* "Tu idea, hecha mesa" se pasaba por 19 px: el padding de abajo que traía
     de antes no estaba contemplado. */
  .idea { padding-bottom: clamp(14px, 3vh, 48px); }
  .idea-grilla { gap: 24px; }
}


/* ============================================== el logo en el medio, arriba

   Como en la referencia: la marca centrada arriba de todo y los controles a
   los costados. La reja pasa a tres columnas iguales —menú a la izquierda,
   logo en el medio, acciones a la derecha— y el centro es el centro de la
   página, no el del hueco que sobra.

   En el celular no: con el carrito y las rayitas al lado, un logo centrado no
   tiene dónde ir. Ahí se queda a la izquierda, como estaba. */
@media (min-width: 761px) {
  .barra-cabecera {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
  /* La fila hay que decirla. En el HTML la marca viene primero, así que al
     mandarla a la columna 2 el navegador dejaba el cursor pasado y metía el
     menú y las acciones en una SEGUNDA fila: la cabecera pasaba de 62 a 118
     px de alto y, como las secciones le reservan ese lugar, dejaban de
     entrar en una pantalla. */
  .barra-cabecera .menu { grid-column: 1; grid-row: 1; justify-self: start; }
  .barra-cabecera .marca { grid-column: 2; grid-row: 1; justify-self: center; }
  .barra-acciones { grid-column: 3; grid-row: 1; justify-self: end; }
}

/* ======================================= las tres rayitas y su desplegable

   Reemplazan al pie de cuatro columnas. La idea, tomada de la referencia: lo
   que hace falta tener a mano pero no merece media pantalla al final —las
   categorías, el carrito, el contacto, la entrada al panel— vive detrás de un
   botón, no abajo de todo.

   El botón va abajo a la derecha, arriba del de WhatsApp: los dos del mismo
   lado, apilados. WhatsApp abajo porque es el que cierra ventas y tiene que
   ser el más fácil de tocar. */
/* Las rayitas son un botón redondo más de la barra de abajo; su forma sale de
   `.boton-redondo`. Antes flotaban solas 68 px más arriba que WhatsApp. */

/* Con el desplegable abierto, la página de atrás no se mueve. */
body.con-menu { overflow: hidden; }

.panel-menu { position: fixed; inset: 0; z-index: 70; display: flex; justify-content: flex-end; }
/* `hidden` lo esconde el navegador con `display: none`, pero cualquier
   `display` que uno escriba le gana. Sin esta línea el panel quedaba invisible
   pero por delante de todo, tapando el botón que lo abre. */
.panel-menu[hidden] { display: none; }
.panel-menu-fondo { position: absolute; inset: 0; background: rgba(0, 0, 40, .5); }
.panel-menu-caja {
  position: relative; width: min(420px, 100%); height: 100%;
  background: var(--azul); color: var(--lavanda-clara);
  padding: 22px 26px 26px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 26px;
  animation: panel-menu-entra .32s cubic-bezier(.32, .72, 0, 1);
}
@keyframes panel-menu-entra { from { transform: translateX(100%); } to { transform: none; } }
.panel-menu-arriba { display: flex; align-items: center; }
.panel-menu-logo { width: 150px; height: auto; display: block; }
.panel-menu-cerrar {
  margin-left: auto; background: none; border: 0; color: #fff;
  font-size: 1.9rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
/* Los tres destinos grandes: es a lo que la gente viene. */
.panel-menu-grande { display: grid; gap: 4px; }
.panel-menu-grande a {
  font-family: var(--titular); font-weight: 400; font-size: 1.9rem;
  color: #fff; letter-spacing: -.02em; padding: 4px 0;
}
.panel-menu-grande a:hover { color: var(--rosa); }
.panel-menu-columnas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 22px;
  border-top: 1px solid rgba(255, 255, 255, .22); padding-top: 22px;
}
.panel-menu-columnas .rotulo {
  font-family: var(--arcade); font-size: .5rem; letter-spacing: .1em;
  color: var(--rosa); margin-bottom: 10px;
}
.panel-menu-columnas a, .panel-menu-columnas span {
  display: block; font-size: .92rem; color: var(--lavanda-media); padding: 4px 0;
}
.panel-menu-columnas a:hover { color: #fff; }
.panel-menu-pie {
  margin-top: auto; display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, .22); padding-top: 16px;
  font-size: .8rem; color: var(--lavanda-tenue);
}
.panel-menu-pie a { color: var(--lavanda-media); margin-left: auto; }

@media (max-width: 760px) {
  .panel-menu-caja { width: 100%; }
  .panel-menu-grande a { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .panel-menu-caja { animation: none; }
}

/* ================================================= la entrada de la página

   Como en la referencia: la página no aparece de golpe ya armada. Primero el
   título, y detrás el resto acomodándose, cada cosa un instante después de la
   anterior. Son 18 px de subida y un fundido; nada da vueltas ni rebota.

   La escalera de tiempos es a propósito corta —el último llega a los 0,42 s—
   porque esto tiene que sentirse como que la página terminó de acomodarse,
   no como una animación que hay que esperar. */
@keyframes entra-acomodando {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.portada .portada-ojo,
.portada h1,
.portada .bajada,
.portada .portada-acciones,
.portada .mesa3d {
  animation: entra-acomodando .62s cubic-bezier(.22, .68, 0, 1) backwards;
}
.portada h1                 { animation-delay: .05s; }
.portada .portada-ojo       { animation-delay: .16s; }
.portada .bajada            { animation-delay: .24s; }
.portada .portada-acciones  { animation-delay: .32s; }
.portada .mesa3d            { animation-delay: .42s; }

/* Y las secciones de abajo, cuando les toca aparecer. La clase la pone
   tienda.js con un observador: animarlas todas al cargar no serviría de nada
   —no se ven— y animarlas cada vez que uno pasa marea. Se hace una sola vez. */
.seccion-entra > * { opacity: 0; transform: translateY(20px); }
.seccion-entra.adentro > * {
  animation: entra-acomodando .66s cubic-bezier(.22, .68, 0, 1) forwards;
}
.seccion-entra.adentro > *:nth-child(2) { animation-delay: .08s; }
.seccion-entra.adentro > *:nth-child(3) { animation-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
  .portada .portada-ojo, .portada h1, .portada .bajada,
  .portada .portada-acciones, .portada .mesa3d { animation: none; }
  .seccion-entra > *, .seccion-entra.adentro > * { opacity: 1; transform: none; animation: none; }
}

/* ===================================== arriba, sólo la marca y el carrito

   Como en la referencia: la primera pantalla es el logo y la mesa, y nada
   más. Los enlaces y el botón de "Diseñá la tuya" viven en las tres rayitas
   de abajo; el aviso del pedido guardado también bajó. Lo que queda arriba es
   una marca grande, centrada, y el carrito al costado.

   EL LOGO ES NEGRO, SIEMPRE. Cambiar de blanco a azul al pasar de una sección
   a la otra se notaba como un parpadeo, y el logo es lo único que no puede
   parpadear. Negro se lee sobre el azul de la portada y sobre las secciones
   claras, que son los dos fondos que hay. Se consigue con `brightness(0)`
   sobre el SVG blanco: apaga el color y deja negro puro, sin los desvíos de
   tono que tienen los filtros que inventan un color (el primer intento de
   teñirlo de azul salió magenta). */
@media (min-width: 761px) {
  .cabecera .menu { display: none; }        /* los enlaces están en las rayitas */
  .boton-cabecera { display: none; }
  .barra-cabecera { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .barra-cabecera .marca { grid-column: 2; grid-row: 1; justify-self: center; }
  .barra-acciones { grid-column: 3; grid-row: 1; justify-self: end; }

  /* La marca, grande. Se mide por el ALTO y no por el ancho, que es como la
     mide la referencia: el suyo ocupa un 13% del alto de la ventana. Medido
     por ancho, en una notebook baja el logo se comía media pantalla y las
     secciones de abajo dejaban de entrar. Por alto se agranda en los
     monitores grandes y se porta bien en los chicos. */
  /* La marca, lo más grande que se puede sin comerse la mesa.
     Se mide por el ALTO y no por el ancho: el logo es casi cinco veces más
     ancho que alto, así que pedirle un ancho fijo lo deforma o lo desborda
     según la ventana. Pidiéndole el alto, el ancho sale solo y nunca se
     estira sin querer. En 21% del alto ocupa cerca de la mitad del ancho en
     una notebook y casi dos tercios en un monitor grande, que es la presencia
     que pedía Dani —"que ocupe casi todo arriba"— sin empujar la mesa fuera
     de la primera pantalla. */
  /* El tamaño grande es SÓLO el de la portada. Pegada sobre las demás
     secciones, una marca de 139 px de alto se comía un cuarto de cada
     pantalla y empujaba la colección fuera de la ventana. Arriba de todo es
     enorme; apenas se baja, se encoge y se queda de un tamaño de cabecera. */
  /* La marca mide lo mismo en todas las secciones.
     Estuvo un rato encogiendo al salir de la portada —quedaba lugar para la
     colección y era lo que hace la referencia— pero Dani lo miró y dijo que
     no: la marca es del mismo tamaño siempre. Así que el lugar lo cede el
     resto; ver el encabezado de la colección, que pasó a un solo renglón. */
  .cabecera .marca-logo {
    height: clamp(46px, 19.5vh, 220px); width: auto;
    /* Sin transición a propósito. Animar el ALTO de la marca anima el alto de
       la cabecera, y de ahí sale `--cab`, que es lo que reserva la portada:
       durante el medio segundo de la animación el contenido de la portada se
       movía mientras uno estaba haciendo scroll, que es exactamente el
       temblor que veníamos sacando. El cambio es instantáneo y pasa fuera de
       la pantalla, cuando uno ya está mirando la sección siguiente. */
  }
  .cabecera.sobre-portada .marca-logo {
    height: clamp(46px, 19.5vh, 220px); width: auto;
  }
}

/* ========================================= la marca se estira, letra por letra

   El primer intento fue un `scaleX` sobre el logo entero. Anda, pero engorda
   las letras mientras se mueve, y Dani lo miró y dijo que no se estiraba: lo
   que veía era el logo cambiando de grosor, no las letras separándose.

   Estirarse de verdad es que las letras se alejen entre sí sin deformarse, y
   para eso hace falta que cada letra sea un elemento. Por eso el logo dejó de
   ser un <img> y está escrito adentro del HTML, partido en seis grupos —S, T,
   A, R, T y "deco"—. Cada uno lleva su `--d`: la distancia de su centro al
   centro del logo. Alejar a cada letra una fracción de SU `--d` separa todo
   proporcionalmente, que es exactamente lo que hace un tipógrafo al abrir el
   interletrado, y ninguna letra cambia de forma. */
/* Más gruesa. Los bloques del logo son cuadraditos de 4,22 y el trazo de cada
   letra tiene uno solo de ancho: en chico se lee bien, pero a 130 px de alto
   se ve flaquísimo. En vez de redibujar la tipografía, cada bloque se
   contornea con su mismo color: el trazo crece hacia afuera y engorda el palo
   un 60% sin mover ni un bloque de lugar. */
.marca-bloques {
  fill: currentColor; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: miter;
}
.marca-letra {
  /* Primero se abre, después sigue estirándose. La segunda arranca cuando
     termina la primera —1,8s de retraso— así que no se pelean por el
     `transform` aunque las dos lo usen. El ritmo de la segunda lo ponen sus
     propios fotogramas, por eso acá no hay curva. */
  animation: marca-abre 1.8s cubic-bezier(.16, .84, .1, 1) backwards,
             marca-estira 9s 1.8s infinite;
}
/* El reposo es JUNTO, no el que trae el archivo.
   Las letras venían con 4,2 de aire entre una y otra y se leían sueltas. Cada
   una arranca corrida hacia el centro de "START" —eso es su `--base`, que
   está escrito en el HTML— hasta casi tocarse. Así el gesto tiene de dónde
   partir: se abre de "juntas" a "abiertas" y se vuelve a cerrar, que es lo
   que hace la referencia. Si el reposo ya fuera el ancho normal, abrirse
   sería sólo separarse un poco más.

   `--base` es la corrección de reposo y `--d` la distancia al centro que
   manda el estirón. Son dos cosas distintas: "deco" se corre con el último
   palo de la T —si no, se le monta encima— pero se estira desde mucho más
   lejos, porque está mucho más lejos del centro. */
.marca-letra { transform: translateX(var(--base, 0px)); }
@keyframes marca-abre {
  from { transform: translateX(calc(var(--base, 0px) + var(--abre) * -.3)); opacity: 0; }
  55%  { opacity: 1; }
  to   { transform: translateX(var(--base, 0px)); opacity: 1; }
}
/* Abre RÁPIDO y cierra más despacio.
   Con una curva pareja el logo parecía respirar —iba y venía al mismo ritmo—
   y no era eso: es un gesto, se abre de golpe y después se vuelve a juntar
   con calma. El reparto del ciclo de 9 segundos: un segundo quieto, un
   segundo y medio para abrirse del todo, un rato abierto, y más de tres para
   cerrarse. Las curvas van en los fotogramas y no en la declaración de
   arriba, que es la única forma de que la ida y la vuelta tengan ritmos
   distintos. */
@keyframes marca-estira {
  0%, 11%   { transform: translateX(var(--base, 0px));
              animation-timing-function: cubic-bezier(.13, .9, .22, 1); }
  28%, 44%  { transform: translateX(calc(var(--base, 0px) + var(--abre)));
              animation-timing-function: cubic-bezier(.55, .02, .38, 1); }
  82%, 100% { transform: translateX(var(--base, 0px)); }
}
/* Quien pidió menos movimiento en su sistema no quiere tres cosas
   respirando en bucle. La entrada se queda —es una sola vez y ayuda a
   entender qué apareció— pero convertida en un fundido, sin viaje. */
@media (prefers-reduced-motion: reduce) {
  .marca-letra { animation: marca-aparece .4s ease-out backwards; }
  .clientes .toma img { animation: none; }
}
@keyframes marca-aparece { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 761px) {
}
/* Negro siempre, en cualquier fondo. Con el logo adentro del HTML esto es
   `color` y no un filtro: el filtro era un arreglo para teñir una imagen
   ajena —y el primer intento salió magenta—. */
.cabecera .marca-logo,
.cabecera.sobre-claro .marca-logo,
.cabecera.sobre-oscuro .marca-logo { color: #000; }
/* Pero "deco" va en blanco sobre los fondos oscuros: los bloques de START en
   negro y la firma en blanco. Sobre el azul se separan las dos mitades del
   logo y la cursiva deja de pelearse con los bloques.
   Sobre fondo claro —las páginas de adentro: mesas, carrito— vuelve al negro,
   que en blanco ahí no se vería. */
.cabecera.sobre-oscuro .marca-deco { color: #fff; }

/* El carrito y las rayitas, en negro también, por lo mismo. */
.cabecera .carrito-boton,
.cabecera.sobre-claro .carrito-boton,
.cabecera.sobre-oscuro .carrito-boton { color: #000; }

/* El aviso del pedido guardado se fue abajo a la izquierda: arriba competía
   con la marca, y quien tiene un pedido en curso lo busca, no necesita que se
   le cruce en la primera pantalla. */



/* =============================================== la barra de abajo, alineada

   Todo lo que no es la marca, en una sola línea abajo a la derecha: el pedido
   en curso, WhatsApp, el carrito y las tres rayitas. Todos del mismo tamaño,
   con la misma piel —contorno fino, sin relleno— y el mismo color, que sigue
   al fondo de la sección que se esté mirando.

   Antes estaban sueltos y a distinta altura: las rayitas 68 px más arriba que
   WhatsApp, el carrito arriba de todo, y WhatsApp verde, que era el único
   color ajeno a la paleta. */
.barra-abajo {
  position: fixed; right: 20px; bottom: 20px; z-index: 55;
  display: flex; align-items: center; gap: 10px;
}
.boton-redondo {
  position: relative; flex-shrink: 0;
  width: 50px; height: 50px; border-radius: 25px;
  border: 1.5px solid currentColor; background: transparent; cursor: pointer;
  color: var(--azul);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease;
}
.boton-redondo:hover { background: var(--azul); color: var(--papel); }
.boton-redondo:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Sobre el azul de la portada y del cierre, en blanco. La clase la pone
   tienda.js, la misma que decide el color de la marca. */
/* Sobre fondo oscuro los botones son blancos, y encima del azul se ven
   perfecto. Pero flotan sobre lo que haya debajo, y en la ficha lo que hay
   debajo a la derecha es la tarjeta blanca de las características: blanco
   sobre blanco, los botones desaparecían. Un vidrio oscuro detrás los
   sostiene sobre cualquier cosa —azul, foto o tarjeta— sin taparla. */
body.sobre-fondo-oscuro .boton-redondo {
  color: #fff;
  background: rgba(2, 2, 46, .34);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
body.sobre-fondo-oscuro .boton-redondo:hover { background: #fff; color: var(--azul); }
body.sobre-fondo-oscuro .boton-redondo:hover { background: #fff; color: var(--azul); }

/* Las tres rayitas son un botón más: mismo círculo, con las líneas adentro. */
.rayitas { flex-direction: column; gap: 5px; box-shadow: none; }
.rayitas span {
  display: block; width: 19px; height: 1.6px; background: currentColor; border-radius: 2px;
  transition: transform .26s ease, opacity .2s ease;
}
.rayitas.abierta span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.rayitas.abierta span:nth-child(2) { opacity: 0; }
.rayitas.abierta span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* El aviso del pedido en curso: una pastilla del mismo alto que los botones,
   para que la fila quede pareja. */
/* `hidden` lo esconde el navegador con `display: none`, y cualquier `display`
   que uno escriba le gana. Sin esta línea quedaba una pastilla blanca vacía
   al lado de los botones cuando no había ningún pedido en curso. */
.barra-abajo .pedido-guardado[hidden] { display: none; }
/* `hidden` solo no alcanza: `.boton-redondo` declara `display: flex` y
   cualquier `display` le gana al atributo. Ya pasó dos veces en esta página
   —con el panel del menú y con el aviso del pedido— así que acá va explícito
   para los botones que pueden no existir. */
.barra-abajo .boton-redondo[hidden] { display: none; }
.barra-abajo .pedido-guardado {
  position: static; height: 50px; display: flex; align-items: center;
  padding: 0 18px; border-radius: 25px;
  background: var(--lavanda); border: 1.5px solid var(--lavanda); color: var(--azul);
  box-shadow: none; font-size: .8rem; font-weight: 700; white-space: nowrap;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 760px) {
  .barra-abajo { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
  .boton-redondo { width: 46px; height: 46px; border-radius: 23px; }
  .barra-abajo .pedido-guardado { height: 46px; padding: 0 14px; font-size: .74rem; max-width: 120px; }
}

/* ============================================ el título, que se va estirando

   El titular de la portada respira: cada tanto las letras se separan un poco,
   ocupan más, y vuelven. Es lo que hace la referencia con su logo, que está
   cortado en letras sueltas con una transición cada una.

   Acá es texto de verdad, así que se anima `letter-spacing`, que es
   exactamente "estirarse ocupando más espacio". No se usa `scaleX` —que sería
   más barato— porque deforma las letras: las engorda a lo ancho y se nota.

   Los tiempos: 9 segundos de vuelta entera, con el estirón ocupando el tercio
   del medio. Lento a propósito. Si estuviera todo el tiempo moviéndose
   cansaría, y si fuera rápido parecería un error. */
/* El recorrido era de -0,025em a 0,012em: medido, eso son 2 px de diferencia
   en todo el título y no se ve. Ahora va hasta 0,075em, que en un titular de
   72 px son 7 px por letra y unos 90 px de estirón en el renglón entero: eso
   sí se nota. */
@keyframes titulo-respira {
  0%, 16%   { letter-spacing: -.028em; }
  50%, 62%  { letter-spacing:  .075em; }
  92%, 100% { letter-spacing: -.028em; }
}
/* El titular NO se estira.
   Durante un tiempo el que respiraba era éste. Dani lo vio y fue al revés de
   lo que quería: "se estira el 'tu nostalgia, hecha mesa'. Eso no debería
   estirarse". El que se estira es la marca de arriba, con sus letras. Acá
   queda la animación de entrada y nada más. */

/* ================================= las fotos de clientes, a pantalla completa

   Antes eran media columna adentro de "Tu idea, hecha mesa" y se veían del
   tamaño de una estampilla. Son la mejor prueba que hay —la mesa ya en la
   casa de alguien— así que se llevan una pantalla entera.

   EL PANEO. Una foto de un living no entra en la proporción de un monitor sin
   recortar algo: o se pierden las patas o se pierde la gente. En vez de
   elegir qué se pierde, la foto se agranda un poco y se mueve muy despacio,
   así que a lo largo de los segundos que está en pantalla se termina viendo
   todo. 18 segundos por foto, que es lento como para no marear. */
.clientes {
  position: relative; overflow: hidden;
  min-height: 100svh; background: var(--azul);
}
.clientes .visor { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.clientes .toma { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.clientes .toma.viendo { opacity: 1; }
.clientes .toma img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform-origin: center;
}
/* El recorrido va de la mesa a la persona.
   Antes era un vaivén en diagonal, igual para todas las fotos y sin empezar
   ni terminar en ningún lado: se movía, nomás. Dani pidió otra cosa —que
   arranque en la mesa y después suba a la cara de quien está ahí— y eso sí
   tiene sentido: primero lo que se vende, después de quién es.

   Acá no hay detección de caras ni de mesas: eso el navegador no lo hace de
   forma confiable en un iPhone. Lo que hay es la regla que cumplen estas
   fotos —la mesa abajo, la persona arriba— así que el recorrido va de abajo
   hacia arriba, cerrado al principio y abriéndose al final. Si alguna foto
   viniera al revés, la que falla es la regla, no el código: para eso haría
   falta guardar un punto de interés por foto (se puede, es trabajo de panel).

   6,4 segundos: cada foto está 6 en pantalla, así que llega arriba justo
   antes de cambiar. Sin `alternate` y sin `infinite`, porque es un recorrido
   con principio y final, no un vaivén; queda quieto en la cara al terminar.
   La animación arranca de cero con cada foto, cuando le ponen `viendo`. */
/* Arranca cuando la sección ENTRA en pantalla, no cuando se dibuja la página.
   Es un recorrido de una sola pasada, y la primera foto ya tiene puesta la
   clase `viendo` desde que se arma el inicio: sin esperar a `adentro`, los
   6,4 segundos se consumían mientras la persona todavía estaba mirando la
   portada, y al llegar acá la foto ya estaba quieta en la última posición.
   Se veía exactamente como que las fotos no se mueven. */
.clientes.adentro .toma.viendo img {
  /* Ida y vuelta, sin parar, y despacio.
     Los dos pedidos de Dani tiran para lados opuestos: que se vea bien la
     mesa Y la cara pide un recorrido largo, y que vaya más despacio pide uno
     corto —recorrer más en el mismo tiempo es ir más rápido—. Se resuelve
     dándole más tiempo a cada foto: el tramo pasó de 4,5 a 9 segundos y el
     recorrido casi se duplicó, así que en píxeles por segundo va más lento
     que antes y aun así llega a los dos extremos. Las fotos ahora se quedan
     9,5 segundos cada una (está en tienda.js), que es lo que tarda el viaje
     entero de la mesa a la persona. */
  animation: clientes-paneo 9s ease-in-out infinite alternate;
}
/* Lo que se mueve es `object-position` y no un `translate`.
   Con `translate` el recorrido se acababa enseguida: la foto está recortada
   por `object-fit: cover`, y correrla sólo alcanza para mostrar la franja que
   sobra —un 4% de la altura— así que en una foto vertical la cara quedaba
   afuera del recorte y el paneo terminaba en el pecho. `object-position`
   mueve el recorte en sí, o sea recorre la foto ENTERA de abajo hacia arriba.
   Arranca en 70% y no más abajo: a 82% se veía el piso debajo de la mesa, no
   la mesa. Termina en 14%, que es donde cae una cara en una foto de cuerpo
   entero.
   El `scale` acompaña: cerrado sobre la mesa al principio, más abierto al
   final, que es lo que hace que se lea como acercarse y después abrirse. */
/* De 74% a 16%: casi la foto entera.
   Con el recorrido corto de antes —62 a 32— en la foto del muchacho de barba
   señalando la mesa no se llegaba ni a la mesa ni a la cara: se quedaba
   dando vueltas por el medio. Estos dos extremos son el pie y la cabeza de
   una foto de cuerpo entero. */
@keyframes clientes-paneo {
  from { object-position: 50% 74%; transform: scale(1.12); }
  to   { object-position: 50% 16%; transform: scale(1.03); }
}
/* Un velo abajo para que el texto se lea sobre cualquier foto. */
.clientes::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 40, .62), rgba(0, 0, 40, .1) 42%, rgba(0, 0, 40, .28));
}
/* El bloque de "ya están en casa" se queda abajo a la izquierda, que es donde
   un pie de foto no molesta. */
.clientes-texto {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 0 clamp(20px, 5.5vw, 120px) clamp(80px, 12vh, 120px);
  color: #fff;
}
/* Pero la invitación a personalizar sube al medio de la pantalla: abajo a la
   derecha quedaba en un rincón, discutiendo el lugar con los botones fijos, y
   es lo único de esta pantalla en lo que se puede hacer clic. */
.clientes-idea {
  position: absolute; right: clamp(20px, 5.5vw, 120px); top: 50%;
  transform: translateY(-50%); z-index: 3;
  margin: 0; text-align: right;
}
.clientes-texto .ojo { color: var(--rosa); margin-bottom: 10px; }
.clientes-texto h2 {
  font-family: var(--titular); font-weight: 400; color: #fff;
  font-size: clamp(1.9rem, 5vh, 3.4rem); line-height: 1.06; letter-spacing: -.025em;
  text-transform: none; margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .clientes .toma.viendo img { animation: none; transform: scale(1.02); object-position: 50% 42%; }
}

/* ==================================== los botones de abajo, uno de cada lado

   WhatsApp solo a la izquierda y el carrito con las tres rayitas a la
   derecha. Los tres juntos en una esquina se leían como un bloque; separados,
   cada lado tiene su función: a la izquierda hablar, a la derecha comprar y
   navegar. Siguen todos a la misma altura y del mismo tamaño. */
.barra-abajo { right: 20px; left: 20px; justify-content: flex-end; pointer-events: none; }
.barra-abajo > * { pointer-events: auto; }
.barra-abajo .whatsapp-flotante { margin-right: auto; }
@media (max-width: 760px) {
  .barra-abajo { right: 16px; left: 16px; }
}

/* La invitación a personalizar, adentro de la pantalla de clientes. */
.clientes-idea p {
  font-family: var(--titular); font-weight: 400; color: #fff;
  font-size: clamp(1.1rem, 2.6vh, 1.6rem); margin: 0 0 12px; letter-spacing: -.02em;
}
@media (max-width: 760px) {
  /* La franja de destinos, debajo de la cabecera y no atrás.
     Arriba tiene un margen negativo para pegarse al borde de la sección, que
     en pantalla grande está bien. Pero en el celular la cabecera es pegajosa
     —se queda arriba mientras uno baja— así que "el borde de arriba de la
     sección" es exactamente el lugar donde la cabecera aterriza, y los
     nombres de las ciudades terminaban pasando por detrás del logo. Acá la
     sección le reserva su lugar y la franja arranca abajo de todo eso. */
  .coleccion { padding-top: calc(var(--cab, 55px) + 12px); }
  .coleccion > .destinos { margin-top: 0; }

  /* Un solo menú.
     En el celular la cabecera ya trae su propio botón de tres rayas —así se
     aprobó el encargo móvil— y la barra de abajo traía otro, que además abría
     un desplegable distinto. Dos botones iguales que hacen cosas parecidas en
     la misma pantalla es peor que cualquiera de los dos solo. Abajo quedan
     WhatsApp y el carrito, que no están arriba. */
  .barra-abajo .rayitas { display: none; }

  /* En el celular, al medio y centrada: al costado no hay ancho para nada. */
  .clientes-idea { right: 20px; left: 20px; text-align: center; }
}


/* ======================================================= la cortina de entrada

   Un telón azul que tapa la página mientras la marca sube desde abajo hasta
   su lugar. Dura poco menos de dos segundos y después no existe más.

   Va DEBAJO de la cabecera en el apilado y por encima de todo lo demás: así la
   marca —que es la de verdad, la de la cabecera— se ve por encima del telón
   mientras sube, y no hace falta una segunda copia del logo que después haya
   que mantener igual que la primera. El 58 no es cualquier número: los botones
   de abajo están en 55 y asomaban por encima del telón —se veía el globito del
   carrito flotando en el azul— así que el telón tiene que estar más arriba que
   ellos, y la cabecera más arriba que el telón.

   Se va sola con `forwards`: aunque el JS no llegue a correr, a los 1,9
   segundos la página queda destapada igual. */
.cortina {
  position: fixed; inset: 0; z-index: 58; pointer-events: none;
  background: var(--azul);
  animation: cortina-se-va .55s ease-in 1.35s forwards;
}
@keyframes cortina-se-va {
  from { opacity: 1; }
  to   { opacity: 0; visibility: hidden; }
}

/* Y la marca sube desde el pie de la pantalla hasta su lugar.
   Sube la `.marca` entera —el enlace— y no las letras: las letras ya tienen lo
   suyo (se abren), y dos animaciones sobre el mismo `transform` se pisan. Con
   el viaje en el padre y la apertura en los hijos, las dos pasan a la vez y
   ninguna molesta a la otra: el logo sube mientras se despliega. */
.marca { animation: marca-sube 1.5s cubic-bezier(.2, .8, .15, 1) backwards; }
@keyframes marca-sube {
  from { transform: translateY(78vh); }
  to   { transform: translateY(0); }
}
/* Quien pidió menos movimiento no quiere que le muevan la pantalla entera:
   la cortina se funde rápido y la marca aparece donde va. */
@media (prefers-reduced-motion: reduce) {
  .cortina { animation: cortina-se-va .3s ease-in .1s forwards; }
  .marca { animation: none; }
}


/* ------------------------------------------------- un poco de rosa, no todo

   La primera pantalla y la de la colección quedaron blancas sobre azul y así
   se ven frías. El rosa ya es de la casa —está en el cuadradito de "hechas a
   mano" y en las etiquetas de descuento— y acá aparece en dos lugares y nada
   más: el remate del titular y el rótulo de las ciudades. Si se pinta de rosa
   todo lo que se podría, deja de resaltar nada. */
.portada h1 .remate { color: var(--rosa); }
.coleccion > .destinos .destinos-titulo { color: var(--rosa); opacity: 1; }

/* El fondo de la página, según la ruta. Lo pone tienda.js antes de dibujar,
   así el rato que tarda en cargar ya es del color de lo que va a aparecer. */
body.fondo-azul { background: var(--azul); }

/* Y "deco" en rosa. El logo queda en dos colores: los bloques de START en
   negro, firmes, y la firma en el rosa de la casa. Es el mismo rosa del
   remate del titular y del cuadradito de "hechas a mano", así que el logo
   deja de ser una isla y pasa a ser parte de la paleta. */
.cabecera .marca-deco,
.cabecera.sobre-claro .marca-deco,
.cabecera.sobre-oscuro .marca-deco { color: var(--rosa); }