/* Super3D · tienda de impresión 3D
   Paleta tomada del logo real: rojo, amarillo y celeste. */

:root {
  --rojo: #e01b10;
  --rojo-hondo: #a81008;
  --rojo-btn: #c11109;
  --amarillo: #fdc201;
  --amarillo-hondo: #b88a00;
  --celeste: #0096ea;
  --celeste-btn: #0176b8;
  --celeste-hondo: #015a8c;

  --sobre-rojo: #ffffff;
  --sobre-amarillo: #1f1600;
  --sobre-celeste: #ffffff;

  --tinta: #14121a;
  --tinta-suave: #5a5866;
  --papel: #ffffff;
  --papel-alto: #ffffff;
  --linea: rgba(20, 18, 26, 0.14);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --gutter: 28px;
  --max: 1400px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0;
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- Barra ---------- */

.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--linea);
}
.nav-in { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.marca img { width: 38px; height: 38px; border-radius: 9px; transition: transform 220ms var(--ease-out); }
.marca-texto { display: flex; flex-direction: column; line-height: 1; }
.marca-texto b { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -0.045em; }
.marca-texto > span { font-size: 10px; font-weight: 700; letter-spacing: 0.11em; color: var(--tinta-suave); margin-top: 3px; }
.nav-links { display: flex; align-items: center; gap: 24px; font-size: 15px; font-weight: 600; }
.nav-links a { text-decoration: none; padding: 7px 0; border-bottom: 2px solid transparent; transition: border-color 160ms ease; }
.nav-links a:hover, .nav-links a[aria-current='page'] { border-bottom-color: var(--tinta); }
/* WhatsApp a la derecha de la barra (sólo si está cargado el número): los links se corren con él */
.nav-links { margin-left: auto; }
.nav-in .nav-wa { flex: none; min-height: 40px; padding: 8px 16px 8px 13px; gap: 8px; font-size: 14.5px; }
.nav-in .nav-wa svg { width: 20px; height: 20px; flex: none; }
@media (max-width: 720px) {
  .nav-in .nav-wa { width: 40px; padding: 0; }
  .nav-in .nav-wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 374px) {
  .nav-in .nav-wa { width: 34px; min-height: 34px; }
  .nav-in .nav-wa svg { width: 18px; height: 18px; }
  .nav:has(.nav-wa) .nav-in { gap: 8px; }
  .nav:has(.nav-wa) .nav-links { gap: 10px; }
}
@media (max-width: 359px) {
  .nav-in .nav-wa { width: 32px; min-height: 32px; }
  .nav:has(.nav-wa) .nav-links { gap: 7px; }
}
/* Instagram al lado de WhatsApp (Santi 02/10): sólo el ícono, con el degradé de Instagram.
   Los dos van juntos (10px entre ellos). En la barra entra desde 410px: en celulares más
   angostos no hay lugar sin apretar el logo, y queda en el pie. */
.nav-in .nav-ig {
  flex: none; width: 40px; min-height: 40px; padding: 0; color: #fff;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.nav-in .nav-ig svg { width: 21px; height: 21px; flex: none; }
.nav:has(.nav-ig) .nav-wa { margin-left: -10px; }
.nav:has(.nav-ig) .nav-links a { white-space: nowrap; }
@media (max-width: 960px) { .nav:has(.nav-ig) .nav-links a.opcional { display: none; } }
/* con el texto "WhatsApp" a la vista, entre 721 y 799 no entra "Más pedidos" */
@media (min-width: 721px) and (max-width: 799px) { .nav:has(.nav-ig) .nav-links a.nav-mas { display: none; } }
@media (max-width: 720px) { .nav:has(.nav-ig) .nav-wa { margin-left: -4px; } }
@media (max-width: 409px) { .nav-in .nav-ig { display: none; } .nav:has(.nav-ig) .nav-wa { margin-left: 0; } }

/* ---------- El nombre del logo ----------
   Cada letra es un span. Al cargar, las siete suben una detrás de otra
   (340ms, escalonadas 26ms). Al pasar el mouse, cada letra se levanta y le
   crece una extrusión celeste capa por capa: las letras se imprimen. Sólo
   en la barra; en el pie el mismo nombre queda quieto. */
.marca-nombre .letras { display: inline-block; }
.marca-nombre .letras span {
  display: inline-block;
  transition: transform 200ms var(--ease-out), text-shadow 200ms var(--ease-out);
  transition-delay: calc(var(--i) * 28ms);
}
@media (hover: hover) and (pointer: fine) {
  .marca:hover .letras span {
    transform: translateY(-2px);
    text-shadow: 1px 1px 0 var(--celeste), 2px 2px 0 var(--celeste), 3px 3px 0 var(--celeste);
  }
  .marca:hover img { transform: rotate(-8deg) scale(1.06); }
}
@media (prefers-reduced-motion: no-preference) {
  .nav .letras span { animation: letra-entra 340ms var(--ease-out) backwards; animation-delay: calc(var(--i) * 26ms + 40ms); }
}
@keyframes letra-entra {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- El menú de Catálogo ----------
   El botón vive en la barra; el panel cuelga de la barra entera (no del
   grupo de links, que en pantalla chica scrollea y lo recortaría). */
.menu-cat-boton {
  appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  padding: 7px 0; font: inherit; color: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: border-color 160ms ease;
}
.menu-cat-boton:hover, .menu-cat-boton.actual, .menu-cat-boton[aria-expanded='true'] { border-bottom-color: var(--tinta); }
.menu-cat-boton:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 4px; }
.menu-cat-boton .flechita { transition: transform 180ms var(--ease-out); }
.menu-cat-boton[aria-expanded='true'] .flechita { transform: rotate(180deg); }

.menu-cat {
  position: absolute; z-index: 45;
  top: calc(100% + 6px);
  right: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  width: min(1000px, calc(100% - 2 * var(--gutter)));
  background: var(--papel); color: var(--tinta);
  border: 2px solid var(--tinta); border-radius: 18px; padding: 10px;
  box-shadow: 8px 8px 0 var(--amarillo);
  transform-origin: top right;
}
/* Doce categorías en tres filas de cuatro y el botón en una fila propia.
   Ancho y bajo, aprovechando la barra a lo largo. */
.menu-cat-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 8px; align-items: center; }
.menu-cat-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  text-decoration: none; color: var(--tinta);
  transition: background-color 120ms ease;
}
.menu-cat-item svg { flex: none; color: var(--c-fuerte, var(--c)); transition: transform 220ms var(--ease-out); }
.menu-cat-item b { display: block; font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: 16px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.menu-cat-item small { display: block; font-size: 12.5px; color: var(--tinta-suave); margin-top: 2px; }
.menu-cat-item:hover { background: rgba(20, 18, 26, 0.06); }
.menu-cat-item:hover svg { transform: scale(1.14) rotate(-6deg); }
/* La miniatura del render de la categoría; sin render, el dibujo de siempre. */
.menu-cat-fig { flex: none; width: 44px; height: 44px; display: grid; place-items: center; }
.menu-cat-fig img { max-width: 44px; max-height: 44px; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(20, 18, 26, 0.2)); transition: transform 220ms var(--ease-out); }
.menu-cat-fig svg { display: none; }
.menu-cat-item.sin-foto .menu-cat-fig img { display: none; }
.menu-cat-item.sin-foto .menu-cat-fig svg { display: block; }
.menu-cat-item:hover .menu-cat-fig img { transform: scale(1.12) rotate(-6deg); }
.menu-cat-item:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--tinta); }
.menu-cat-item[aria-current='page'] { box-shadow: inset 0 0 0 2px var(--tinta); }
.menu-cat-todo { width: 100%; margin: 6px 0 2px; grid-column: 1 / -1; }
@media (max-width: 1000px) {
  .menu-cat-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .menu-cat { left: 12px; right: 12px; width: auto; max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain; }
  /* Con el menú abierto la bandeja se esconde: la barra es su propio contexto de apilado y no alcanza con z-index. */
  body:has(.menu-cat-boton[aria-expanded="true"]) .bandeja,
  body:has(.menu-cat-boton[aria-expanded="true"]) .bandeja-menu { display: none; }
}
@media (max-width: 520px) {
  .menu-cat-lista { grid-template-columns: 1fr; }
  .menu-cat-item { padding: 8px 10px; }
}

/* ---------- Botones ---------- */

.btn {
  appearance: none; border: 0; cursor: pointer; text-decoration: none;
  font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  padding: 15px 28px; min-height: 48px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  /* --c-fuerte es la version del color que aguanta texto blanco encima:
     el celeste de marca puro se queda en 3,2:1 y no pasa. */
  background: var(--c-fuerte, var(--c, var(--celeste-btn))); color: var(--sobre, #fff);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.66),
    inset 0 0 0 5px rgba(255, 255, 255, 0.13),
    inset 0 -5px 9px rgba(0, 0, 0, 0.2),
    0 5px 12px rgba(20, 18, 26, 0.2);
  transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.7px rgba(255,255,255,0.8), inset 0 0 0 6px rgba(255,255,255,0.18), inset 0 -5px 9px rgba(0,0,0,0.2), 0 10px 20px rgba(20,18,26,0.24); }
}
.btn:active { transform: scale(0.97) translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }   /* currentColor era blanco sobre la página blanca (auditoría 04/10) */
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-chico { font-size: 15px; padding: 12px 22px; min-height: 44px; }
.btn-grande { font-size: 18px; padding: 18px 34px; min-height: 56px; }
.btn-claro { background: #fff; color: var(--tinta); }
.btn-fantasma { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 2px rgba(20,18,26,0.42); }
@media (hover: hover) and (pointer: fine) {
  .btn-fantasma:hover { transform: none; box-shadow: inset 0 0 0 2px var(--tinta); }
}
.btn-borde-claro { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.7); }
@media (hover: hover) and (pointer: fine) {
  .btn-borde-claro:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px #fff; }
}

/* ---------- Portada: el logo manda ---------- */

.portada {
  background: var(--papel);
  padding: clamp(26px, 4vw, 48px) 0 clamp(32px, 5vw, 60px);
  text-align: center;
}
.portada-logo {
  max-width: min(900px, 100%); margin: 0 auto;
  border-radius: clamp(16px, 2.5vw, 28px); overflow: hidden;
  box-shadow: 0 18px 44px rgba(20, 18, 26, 0.22);
}
.portada-logo img { width: 100%; height: auto; }
.portada .pie-portada { color: var(--tinta); font-size: clamp(15px, 2vw, 19px); font-weight: 600; margin: clamp(20px, 3vw, 30px) auto 0; max-width: 52ch; }

/* ---------- Las baldosas de categoría: editorial ----------
   Calcadas de la referencia "Estilo 4 · Editorial moderno": tres columnas
   iguales, cada card apaisada (1,45:1) sobre un pastel opaco que rota
   celeste / crema / rosa, sin borde y con una sombra casi nula. Arriba a
   la izquierda el número en pastel, debajo el nombre y la línea corta;
   abajo a la izquierda la flechita. El producto (un render con fondo
   transparente) ocupa la mitad derecha y se sale de la card; detrás hay
   un resplandor radial apenas más saturado, el único degradado del sitio.
   Cada producto va parado según su forma (ENCUADRE_CAT en super3d.js):
   los altos asoman por arriba, los anchos quedan adentro. Sin render
   todavía (.sin-foto), la pieza dibujada va en un cuadrado en la mitad
   derecha, con la misma sombra. */

.cat-tiles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Entre filas hay más aire que entre columnas: lo que asoma por arriba
     (hasta un 10 % del alto, unos 26px) no llega a la card de arriba. */
  gap: 30px 18px; margin-top: clamp(26px, 3vw, 40px);
  /* Aire para lo que se sale por arriba en la primera fila. */
  padding-top: 26px;
}
.cat-tile {
  position: relative; display: block; aspect-ratio: 1.45 / 1; padding: 22px;
  text-decoration: none; color: var(--tinta); text-align: left;
  border-radius: 22px; border: 0;
  background:
    radial-gradient(46% 58% at 75% 52%, var(--brillo) 0%, transparent 100%),
    var(--fondo);
  box-shadow: 0 1px 2px rgba(20, 18, 26, 0.04);
  transition: transform 300ms var(--ease-out);
}
/* El número: pastel opaco, pegado al padding de arriba. */
.cat-tile-num {
  display: block; margin: -4px 0 0;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-variation-settings: 'opsz' 96;
  font-size: 52px; font-weight: 800; letter-spacing: -0.05em; line-height: 1;
  color: var(--num);
}
.cat-tile-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 6px; max-width: 48%; }
.cat-tile-texto b {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-variation-settings: 'opsz' 96;
  font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05;
  color: #14121a; text-wrap: balance;
}
.cat-tile-texto small {
  font-size: 12.5px; font-weight: 500; line-height: 1.35; color: #5f6470;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-tile-ir {
  position: absolute; left: 22px; bottom: 20px; z-index: 1;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--acento); color: #fff;
  display: grid; place-items: center;
  transition: transform 300ms var(--ease-out);
}
.cat-tile-ir svg { width: 12px; height: 12px; stroke-width: 2; }
/* El producto, parado en la mitad derecha. La caja mide lo mismo que el
   render: el alto sale de la card (--alto veces su alto) y el ancho de la
   proporción del archivo (--ar), así que la pieza nunca se estira ni cambia
   de tamaño con el ancho de la columna. Se apoya por abajo a la derecha
   (--abajo, --der) y gira sobre su base (--giro). */
.cat-tile-fig {
  position: absolute; z-index: 2;
  height: calc(var(--alto, 0.62) * var(--escala, 1) * 100%);
  aspect-ratio: var(--ar, 1);
  right: max(calc(var(--der, 6%) - var(--corrida, 0%)), 0px);  /* nunca se sale por el costado: lo que asoma, asoma por arriba (Santi 02/10: el vaso, el cuchillo y la pokebola se salían) */
  bottom: var(--abajo, 16%);
  color: var(--c-pieza);
  filter: drop-shadow(0 14px 18px rgba(20, 18, 26, 0.18));
  transform: rotate(var(--giro, 0deg)); transform-origin: 50% 100%;
  transition: transform 300ms var(--ease-out);
}
.cat-tile-fig img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.cat-tile-fig svg { display: none; width: 100%; height: 100%; }
/* Sin render, la pieza dibujada en un cuadrado centrado en la mitad derecha. */
.cat-tile.sin-foto .cat-tile-fig { --ar: 1; --alto: 0.62; --der: 6%; --abajo: 16%; --giro: 0deg; }
.cat-tile.sin-foto .cat-tile-fig img { display: none; }
.cat-tile.sin-foto .cat-tile-fig svg { display: block; }

/* Escritorio ancho: filas de cuatro (Santi: "3 hacia abajo y 4 a lo largo").
   Con cuatro por fila la card queda de ~290px, así que el número y el
   nombre bajan con el ancho de pantalla para que los nombres largos entren. */
@media (min-width: 1200px) {
  .cat-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cat-tile { padding: 20px; }
  .cat-tile-num { font-size: clamp(40px, 3.3vw, 52px); }
  .cat-tile-texto { max-width: 52%; margin-top: 5px; gap: 5px; }
  .cat-tile-texto b { font-size: clamp(18px, 1.55vw, 22px); }
  .cat-tile-texto small { font-size: 12px; }
  .cat-tile-ir { left: 20px; bottom: 18px; }
}

@media (hover: hover) and (pointer: fine) {
  .cat-tile:hover { transform: translateY(-3px); }
  .cat-tile:hover .cat-tile-fig { transform: translate(4px, -4px) rotate(var(--giro, 0deg)); }
  .cat-tile:hover .cat-tile-ir { transform: translateX(4px); }
}
.cat-tile:active { transform: translateY(-1px); }
.cat-tile:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }

/* "Todo lo que imprimimos": la primera sección de la portada (Santi 04/10). */
.categoria-todo { scroll-margin-top: 76px; }
}

@media (max-width: 1023px) {
  .cat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Dos por fila en pantallas de 600 a 730px: la card queda de menos de 310px
   y un nombre de una sola palabra larga ("Personalizables") se pasaba de su
   columna y llegaba al producto. El nombre baja con el ancho, como en las
   filas de cuatro. */
@media (min-width: 600px) and (max-width: 1023px) {
  .cat-tile-texto b { font-size: clamp(19px, 3vw, 22px); }
}
@media (max-width: 599px) {
  .cat-tiles { grid-template-columns: minmax(0, 1fr); }
  /* La card es más alta para su ancho: el producto se achica un 10 % para
     ocupar el mismo ancho que en las otras. */
  .cat-tile { aspect-ratio: 1.3 / 1; --corrida: 4%; }
  .cat-tile-texto { max-width: 54%; }
}

/* ---------- Secciones ---------- */

/* padding-block y no el shorthand: como shorthand pisaba el padding
   lateral de .wrap y las nueve secciones que llevan las dos clases
   quedaban pegadas al borde de la pantalla. */
.seccion { padding-block: clamp(56px, 8vw, 100px); }
.seccion-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 34px; }
.seccion .sub { margin: 12px 0 0; color: #3d3b48; max-width: 54ch; font-size: 18px; font-weight: 500; }

/* Cada categoría es una parada del scroll, con su color */
.categoria { background: var(--papel); color: var(--tinta); padding: clamp(40px, 5vw, 66px) 0 clamp(36px, 4.6vw, 60px); position: relative; }
.categoria + .categoria::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: var(--c); opacity: 0.9;
}
.categoria .sub { color: #3d3b48; }

/* ---------- Card de producto ---------- */

.grilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1023px) { .grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 599px)  { .grilla { grid-template-columns: minmax(0, 1fr); } }

/* La card: blanca, esquinas grandes, sombra suave y un borde fino del
   color del producto. Al pasar el mouse se despega 4px y la pieza sube. */
.prod {
  position: relative; display: flex; flex-direction: column; color: var(--tinta);
  background: var(--papel-alto);
  border: 1.5px solid var(--c-borde, rgba(20, 18, 26, 0.1));
  border-radius: 22px; padding: 12px 14px 16px;
  box-shadow: 0 1px 2px rgba(20, 18, 26, 0.04), 0 10px 30px rgba(20, 18, 26, 0.07);
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .prod:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(20, 18, 26, 0.05), 0 22px 44px rgba(20, 18, 26, 0.12); }
  .prod:hover .foto-prod, .prod:hover .fig > svg { transform: translateY(-4px) scale(1.03); }
}
.prod:active { transform: translateY(-1px); }

/* El área de producto: tinte leve del color y la pieza flotando con su
   sombra. Nada más (Santi 04/10: sin los trazos alrededor de la foto). */
.prod .fig {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 0.9; padding: 11%;
  border-radius: 16px; background: var(--c-tinte, #f4f5f7);
  color: var(--c-pieza, var(--c-fuerte, var(--c)));
  overflow: hidden;
}
.prod .foto-prod, .prod .fig > svg {
  position: relative; z-index: 1; display: block;
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  filter: drop-shadow(0 14px 16px rgba(20, 18, 26, 0.16));
  transition: transform 320ms var(--ease-out);
}
.prod .foto-prod { height: 100%; }
.prod .fig > svg { width: 58%; }
.prod .chip { position: absolute; z-index: 2; top: 12px; left: 12px; background: var(--c-fuerte, var(--c)); color: var(--sobre); font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 999px; }

/* Corazón y flechas: botones blancos chicos, encima de la pieza. */
.prod .fav, .prod .fig-flecha {
  position: absolute; z-index: 2; appearance: none; border: 0; padding: 0; cursor: pointer;
  background: var(--papel); color: var(--tinta); border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(20, 18, 26, 0.14);
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.prod .fav { top: 10px; right: 10px; width: 36px; height: 36px; }
.prod .fav svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; transition: fill 160ms ease, stroke 160ms ease; }
.prod .fav[aria-pressed='true'] svg { fill: var(--rojo); stroke: var(--rojo); }
.prod .fav.late { animation: latir 360ms var(--ease-out); }
.prod .fig-flecha { top: 50%; width: 32px; height: 32px; transform: translateY(-50%); }
.prod .fig-flecha.ant { left: 8px; }
.prod .fig-flecha.sig { right: 8px; }
.prod .fig-flecha svg { width: 13px; height: 13px; }
.prod .fig-flecha.ant svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .prod .fav:hover { transform: scale(1.08); box-shadow: 0 4px 12px rgba(20, 18, 26, 0.18); }
  .prod .fig-flecha:hover { transform: translateY(-50%) scale(1.08); }
}
.prod .fav:active { transform: scale(0.94); }
.prod .fig-flecha:active { transform: translateY(-50%) scale(0.94); }
.prod .fav:focus-visible, .prod .fig-flecha:focus-visible, .prod .mini:focus-visible, .prod .punto:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }

/* Variantes: miniaturas (fotos) o puntos (color). Van por encima del link
   estirado del nombre, por eso el z-index. */
.prod .variantes { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; margin-top: 12px; min-height: 46px; }
.prod .mini {
  width: 46px; height: 46px; padding: 4px; border-radius: 12px; cursor: pointer;
  border: 2px solid rgba(20, 18, 26, 0.1); background: var(--c-tinte, #f4f5f7);
  display: grid; place-items: center;
  transition: border-color 160ms ease, transform 160ms var(--ease-out);
}
.prod .mini img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.prod .mini[aria-pressed='true'] { border-color: var(--c, var(--celeste)); }
.prod .mini:hover { transform: translateY(-2px); }
.prod .punto {
  width: 22px; height: 22px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--c);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6), 0 0 0 2px transparent, 0 0 0 4px transparent;
  transition: box-shadow 160ms ease, transform 160ms var(--ease-out);
}
.prod .punto[aria-pressed='true'] { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7), 0 0 0 2px var(--papel), 0 0 0 4px var(--tinta); }
.prod .punto:hover { transform: scale(1.1); }

/* Nombre, medida, valoración y precio. flex: 1 empuja el botón al piso de
   la card, así en una fila todos los botones quedan a la misma altura. */
.prod .card-datos { display: flex; flex-direction: column; min-width: 0; margin-top: 14px; flex: 1 0 auto; }
.prod .nom {
  font-size: 17px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25;
  color: inherit; text-decoration: none; display: inline-block;
}
.prod .nom::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.prod .nom:focus-visible { outline: none; }
.prod:has(.nom:focus-visible) { outline: 3px solid var(--tinta); outline-offset: 3px; }
.prod .med, .prod .pre { display: block; }
.prod .med { font-size: 13px; color: var(--tinta-suave); margin-top: 3px; }
.prod .rating { display: flex; align-items: center; gap: 2px; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--tinta-suave); }
.prod .rating i { display: block; width: 13px; height: 13px; color: rgba(20, 18, 26, 0.18); }
.prod .rating i.llena { color: var(--amarillo); }
.prod .rating i svg { display: block; width: 100%; height: 100%; }
.prod .rating span { margin-left: 4px; }
.prod .pre { font-weight: 800; font-size: 22px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 8px; }

/* Abajo de la card: "Ver producto" grande y el botón chico que suma al
   carrito (o abre el personalizador). Los dos por encima del link estirado
   del nombre (z-index 2). */
.card-acciones { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.card-acciones .al-carrito { flex: 1 1 auto; min-width: 0; margin-top: 0; }
/* Los dos botones de la card (Santi, 2026-09-28): "Ver producto" delineado y
   "Añadir" lleno. Si la card es muy angosta, se apilan. */
.card-acciones { flex-wrap: wrap; }
.card-acciones .al-carrito { padding: 0 14px; font-size: 14.5px; }
/* (2026-09-29) Tres: "Añadir al carrito" lleno a todo el ancho y, abajo, "Personalizar" y "Ver más"
   delineados y más bajos (se apilan si la card es angosta). */
.card-acciones .card-sumar { flex: 1 1 100%; }
.card-acciones .card-perso, .card-acciones .card-ver { flex: 1 1 104px; height: 40px; font-size: 14px; padding: 0 10px; }

.al-carrito {
  position: relative; z-index: 2; margin-top: 14px;
  appearance: none; border: 0; cursor: pointer; font-family: inherit; text-decoration: none;
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1;
  height: 46px; width: 100%; border-radius: 999px; padding: 0 18px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--c-fuerte, var(--c)); color: var(--sobre);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.6), inset 0 -4px 8px rgba(0,0,0,0.16), 0 4px 10px rgba(20,18,26,0.14);
  transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out), background-color 160ms ease, color 160ms ease;
}
.al-carrito svg { width: 18px; height: 18px; flex: none; }
.al-carrito .flecha-ir { width: 16px; height: 16px; margin-left: -2px; transition: transform 160ms var(--ease-out); }
.al-carrito > span { display: inline-block; }
.al-carrito.sumado { background: var(--tinta); color: var(--papel); }
.al-carrito:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
/* Los que llevan texto propio van delineados en su color: primero se escribe, después se suma. */
.al-carrito-ir { background: var(--papel); color: var(--c-fuerte, var(--c)); box-shadow: inset 0 0 0 2px var(--c-fuerte, var(--c)); }
@media (hover: hover) and (pointer: fine) {
  .al-carrito:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.75), inset 0 -4px 8px rgba(0,0,0,0.16), 0 9px 18px rgba(20,18,26,0.2); }
  .al-carrito:hover .flecha-ir { transform: translateX(3px); }
  .al-carrito-ir:hover { box-shadow: inset 0 0 0 2px var(--c-fuerte, var(--c)), 0 9px 18px rgba(20,18,26,0.12); }
}
.al-carrito:active { transform: translateY(1px) scale(0.98); transition-duration: 80ms; }

.saltar { animation: salto 420ms var(--ease-out); }
@keyframes salto {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-20px) scale(1.1); }
  100% { transform: translateY(0) scale(1); }
}

/* ---------- Entrada al scrollear ---------- */

@media (prefers-reduced-motion: no-preference) {
  .rev { opacity: 0; transform: translateY(18px); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
  .rev.visible { opacity: 1; transform: none; }
  .rev-hijos > * { opacity: 0; transform: translateY(16px); transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out); }
  .rev-hijos.visible > * { opacity: 1; transform: none; }
  .rev-hijos.visible > *:nth-child(2) { transition-delay: 45ms; }
  .rev-hijos.visible > *:nth-child(3) { transition-delay: 90ms; }
  .rev-hijos.visible > *:nth-child(4) { transition-delay: 135ms; }
  .rev-hijos.visible > *:nth-child(5) { transition-delay: 180ms; }
  .rev-hijos.visible > *:nth-child(6) { transition-delay: 225ms; }
}

/* ---------- Cinta ---------- */

.cinta { overflow: hidden; padding: 6px 0 14px; }
@supports (overflow: clip) {
  .cinta { overflow-x: clip; overflow-y: visible; }
}
.cinta-pista { display: flex; gap: 20px; width: max-content; animation: correr 46s linear infinite; }
@keyframes correr { to { transform: translateX(calc(-50% - 10px)); } }
.cinta .prod { width: 272px; flex: none; }

/* ---------- Cómo comprar y datos ---------- */

.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 26px; }
.paso { border-top: 4px solid var(--c); padding-top: 20px; }
.paso h3 { font-size: 23px; margin-bottom: 8px; }
.paso p { margin: 0; color: var(--tinta-suave); font-size: 15px; }

.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 18px; margin-top: 36px; }
.dato-caja { background: var(--papel-alto); border: 2px solid var(--tinta); border-radius: 18px; padding: 22px; box-shadow: 5px 5px 0 var(--c); }
.dato-caja h3 { font-size: 21px; margin-bottom: 8px; }
.dato-caja p { margin: 0; font-size: 15px; color: #3d3b48; }

/* ---------- A medida ---------- */

.medida {
  background: var(--papel); color: var(--tinta);
  border: 3px solid var(--tinta); border-radius: 28px;
  box-shadow: 10px 10px 0 var(--amarillo);
  padding: clamp(30px, 5vw, 60px); display: flex; gap: 40px; align-items: center; flex-wrap: wrap;
}
.medida h2 { font-size: clamp(28px, 4.5vw, 46px); }
.medida p { color: var(--tinta-suave); max-width: 46ch; margin: 16px 0 28px; font-size: 17px; }
.medida .lado { flex: 1 1 340px; min-width: 0; }  /* min-width 0: el título sticker no empuja la columna más allá de la pantalla */
.medida .figuras { flex: 0 0 auto; display: flex; gap: 20px; align-items: flex-end; }

/* ---------- Ficha ---------- */

.ficha { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; padding: 48px 0 0; }
.ficha-visor {
  background: var(--papel-alto); border: 2px solid var(--tinta); border-radius: 26px;
  box-shadow: 8px 8px 0 var(--c);
  min-height: 430px; display: grid; place-items: center; position: relative; padding: 32px;
}
.ficha-visor svg { color: var(--c); transition: transform 380ms var(--ease-out); }
.ficha-visor .escala { position: absolute; left: 22px; top: 22px; font-size: 12px; font-weight: 700; color: var(--tinta-suave); }
.ficha h1 { font-size: clamp(30px, 4.4vw, 46px); }
.ficha .precio { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; margin: 14px 0 4px; }
.ficha .dato { color: var(--tinta-suave); font-size: 14.5px; }
.campo { margin-top: 28px; }
.campo > label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.colores { display: flex; gap: 12px; }
.color-op { position: relative; }
.color-op input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.color-op input + span {
  display: block; width: 52px; height: 52px; border-radius: 50%; background: var(--c);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.6), inset 0 -4px 8px rgba(0,0,0,0.2), 0 0 0 2px transparent;
  transition: box-shadow 160ms ease, transform 160ms var(--ease-out);
}
.color-op input:checked + span { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.7), inset 0 -4px 8px rgba(0,0,0,0.2), 0 0 0 3px var(--tinta); transform: scale(1.06); }
.color-op input:focus-visible + span { outline: 3px solid var(--tinta); outline-offset: 4px; }

.texto-propio {
  width: 100%; font-family: inherit; font-size: 16px; padding: 14px 16px;
  border: 2px solid rgba(20,18,26,0.42); border-radius: 14px; background: var(--papel-alto); color: var(--tinta);
  transition: border-color 160ms ease;
}
.texto-propio:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; border-color: var(--tinta); }
.texto-propio::placeholder { color: #6b6976; }
.ayuda { font-size: 13px; color: var(--tinta-suave); margin-top: 8px; display: flex; justify-content: space-between; gap: 12px; }
.error { color: #a81008; font-size: 13.5px; font-weight: 700; margin: 8px 0 0; }
.texto-propio[aria-invalid='true'] { border-color: #a81008; }
.ficha .acciones { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
/* El 3D, aparte (2026-09-29): una franja con su frase y su botón. */
.ficha-3d { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; margin-top: 22px; padding: 18px 20px;
  border-radius: 20px; background: color-mix(in srgb, var(--c, #0096ea) 9%, #ffffff); box-shadow: inset 0 0 0 2px rgba(21, 19, 28, 0.1); }
.ficha-3d-texto { flex: 1 1 260px; margin: 0; font-size: 15px; line-height: 1.45; color: var(--tinta-2, #3b3a46); }
.ficha-3d-texto b { color: var(--tinta); }
.ficha-3d .btn-3d { flex: none; }
@media (max-width: 600px) {
  .ficha .acciones > .btn, .ficha-3d .btn-3d { flex: 1 1 100%; justify-content: center; }
}

/* ---------- Bandeja ---------- */

.bandeja {
  position: fixed; right: 24px; bottom: 24px; z-index: 50;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px 12px 20px; border-radius: 20px;
  background: var(--tinta); color: var(--papel);
  border: 3px solid var(--tinta);
  box-shadow: 0 12px 28px rgba(20, 18, 26, 0.34);
  transition: transform 200ms var(--ease-out), background-color 200ms ease, border-color 200ms ease;
}
.bandeja .cuenta { font-size: 14px; font-weight: 500; }
.bandeja .total { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bandeja { cursor: pointer; text-decoration: none; font: inherit; text-align: left; }
.bandeja-abrir { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--celeste-btn); color: #fff; }
.bandeja-abrir svg { width: 16px; height: 16px; transition: transform 200ms var(--ease-out); }
.bandeja[aria-expanded="true"] .bandeja-abrir svg { transform: rotate(180deg); }
.bandeja.vacia .bandeja-abrir { width: 28px; height: 28px; background: rgba(246, 243, 238, 0.16); }
/* El menú del carrito: una tarjeta blanca que se abre arriba de la bandeja. */
.bandeja-menu {
  position: fixed; z-index: 51; right: 24px; bottom: 100px;
  width: min(340px, calc(100vw - 32px)); max-height: calc(100vh - 140px); overflow-y: auto;
  padding: 16px; border-radius: 20px; background: var(--papel); color: var(--tinta);
  box-shadow: 0 18px 44px rgba(20, 18, 26, 0.28), 0 0 0 1px rgba(20, 18, 26, 0.06);
}
.bm-titulo { margin: 0 0 12px; font-size: 16px; font-weight: 800; }
.bm-titulo span { font-weight: 500; color: var(--tinta-suave); }
.bm-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bm-lista li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 40px; gap: 10px; align-items: center; }
.bm-quitar {
  width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; background: transparent; color: var(--tinta-suave);
  display: grid; place-items: center; cursor: pointer; transition: background-color 150ms ease, color 150ms ease;
}
.bm-quitar svg { width: 16px; height: 16px; }
.bm-quitar:hover { background: #fdeeec; color: #b3150d; }
.bm-quitar:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.bm-fig { width: 44px; height: 44px; border-radius: 11px; overflow: hidden; display: grid; place-items: center; background: var(--c-tinte, #f4f5f7); color: var(--c-pieza, var(--tinta)); }
.bm-fig img { width: 100%; height: 100%; object-fit: cover; }
.bm-fig svg { width: 28px; height: 28px; }
.bm-datos { min-width: 0; }
.bm-datos b { display: block; font-size: 14px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-datos small { display: block; font-size: 12.5px; color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-precio { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bm-mas { margin: 10px 0 0; font-size: 13px; color: var(--tinta-suave); }
.bm-total { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0; padding-top: 12px; border-top: 1px solid var(--linea); font-weight: 700; }
.bm-total b { font-size: 20px; font-variant-numeric: tabular-nums; }
.bm-vacio { margin: 0 0 14px; font-size: 14px; color: var(--tinta-suave); }
.bm-acciones { display: grid; gap: 8px; }
.bm-acciones .btn { width: 100%; }
.bm-acciones .btn svg { width: 17px; height: 17px; }
#form-pedido { scroll-margin-top: 92px; }
.bandeja:hover { transform: translateY(-2px); }
.bandeja:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; }
.bandeja.vacia { padding: 12px 20px; border-style: dashed; border-color: rgba(246, 243, 238, 0.45); }
.bandeja.vacia .total { font-size: 12px; font-weight: 500; opacity: 0.7; }
.bandeja.vacia .cuenta { font-weight: 700; }
.bandeja.vacia .pila { display: none; }
.bandeja.late { animation: latir 400ms var(--ease-out); }
/* scale y no transform: asi el latido convive con el translate del arrastre
   en vez de pisarlo y hacer saltar la bandeja. */
@keyframes latir { 0%, 100% { scale: 1; } 40% { scale: 1.08; } }
.bandeja .pila { display: flex; }
.bandeja .pila span { width: 26px; height: 26px; border-radius: 7px; margin-left: -9px; border: 2px solid var(--tinta); display: grid; place-items: center; }
.bandeja .pila span:first-child { margin-left: 0; }

/* ---------- Pie ---------- */

.pie-sitio { background: var(--papel); color: #3d3b48; border-top: 2px solid var(--tinta); padding: 44px 0 92px; font-size: 15px; margin-top: 0; }
.pie-sitio .filas { display: flex; gap: 44px; flex-wrap: wrap; justify-content: space-between; }
.pie-sitio a { color: var(--tinta); text-decoration: underline; text-decoration-color: rgba(20,18,26,0.35); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pie-sitio a:hover { text-decoration-color: var(--tinta); }
.pie-sitio a:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 4px; }
/* Canal sin link: mejor decir el canal que poner un link que no lleva a nada. */
.canal-off { color: #3d3b48; }
.pie-sitio .marca-texto b { color: var(--tinta); }
.pie-sitio .marca-texto > span { color: var(--tinta-suave); }
.pie-sitio strong { color: var(--tinta); display: block; margin-bottom: 8px; font-size: 14px; }
/* Los canales con su ícono (Instagram muestra el usuario, así se puede buscar a mano) */
.pie-canal { margin: 0 0 2px; }
.pie-sitio .pie-canal a:not(.marca), .pie-canal .canal-off { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; }
.pie-canal svg { width: 20px; height: 20px; flex: none; }

/* ---------- Chico ---------- */

@media (max-width: 860px) { .ficha { grid-template-columns: minmax(0, 1fr); } .ficha-visor { min-height: 320px; } }
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .nav-in { height: 64px; }
  .nav-links { gap: 15px; font-size: 14px; }
  .nav-links a.opcional { display: none; }
  .marca img { width: 34px; height: 34px; }
  .bandeja { right: 16px; left: 16px; bottom: 14px; justify-content: space-between; }
  .bandeja-menu { left: 16px; right: 16px; width: auto; }
  /* La ficha en celulares bajos: el visor más chico para que el nombre del
     producto quede arriba de la bandeja del carrito. */
  .ficha { padding-top: 24px; }
  .ficha-visor { min-height: 240px; }
  .medida { gap: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.08ms !important; }
  .ts, .ts * { transition: none !important; }
}

/* La barra fija no puede tapar el titulo al saltar desde el menu */
[id] { scroll-margin-top: 86px; }
@media (max-width: 640px) { [id] { scroll-margin-top: 76px; } }

/* En pantalla chica la barra se aprieta: el tagline sale y el menu puede correrse */
@media (max-width: 720px) {
  .nav .marca-texto > span { display: none; }
  .nav .marca-texto b { font-size: 20px; }
  .nav-in { gap: 12px; }
  .nav-links {
    gap: 14px; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; white-space: nowrap;
  }
  .nav-links::-webkit-scrollbar { display: none; }
}

/* Franja de destacados: fondo blanco como toda la página; la separan dos líneas */
.franja { background: var(--papel); border-block: 1px solid var(--linea); }

/* ---------- Adorno de categoría ----------
   La composición la da rayos/rayos.css. Acá sólo se ubica en la página. */

.categoria, .cabecera-cat { position: relative; }

/* El adorno es la primera columna de la cabecera de la categoría: arriba,
   a la izquierda del título y sin pisar la grilla. */
.cabeza-con-pieza { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); }
.cabeza-con-pieza > div { min-width: 0; }
/* En la cabecera de sección la columna de texto cede ancho antes de que el
   botón "Ver todo en …" baje de renglón: queda siempre arriba a la derecha. */
@media (min-width: 768px) { .seccion-cabeza .cabeza-con-pieza { flex: 1 1 0; min-width: 0; } }

.adorno { flex: 0 0 auto; width: 210px; pointer-events: none; }
.adorno-foto { width: 250px; }
.adorno .rayos { --rayo-color: var(--amarillo); }

/* Las categorias sin foto muestran sus dos piezas: la grande manda y la
   chica se apoya abajo a la derecha. Es el mismo lugar del adorno con foto,
   asi las seis secciones tienen el mismo ancla. */
.adorno-piezas { display: block; padding-top: 6px; }
.adorno-piezas .pieza-grande { display: block; color: var(--c); }
.adorno-piezas .pieza-chica {
  display: block; color: var(--c-fuerte, var(--c));
  margin: -26px 0 0 92px; opacity: 0.78;
}

/* Del lado derecho: el texto primero y el adorno pegado a su derecha,
   espejo del otro lado. La pieza chica pasa abajo a la izquierda. El texto
   se reserva un poco de aire a la derecha para la ráfaga del remate. */
.cabeza-con-pieza.lado-der { flex-direction: row-reverse; justify-content: flex-end; }
.cabeza-con-pieza.lado-der > div:not(.adorno) { padding-right: 0.8em; }
.lado-der .adorno-piezas .pieza-chica { margin-left: 0; }

/* --- Movimiento del adorno ---------------------------------------
   Entra una vez (producto desde abajo, trazos apareciendo escalonados)
   y después queda vivo: el producto flota y los trazos laten apenas.
   Los keyframes de los trazos repiten el transform del recurso para no
   pisarle el posicionamiento. */

/* Por defecto todo está VISIBLE y sólo respira. La entrada se suma
   con .animar, que el script pone únicamente si la página está a la
   vista: en una pestaña de fondo el reloj de las animaciones no corre
   y una entrada desde opacidad 0 dejaría los trazos invisibles. */
.adorno .rayos > img, .adorno-piezas .pieza-grande { animation: adorno-flota 7s ease-in-out infinite; }
.adorno-piezas .pieza-chica { animation: adorno-flota 9s 1.2s ease-in-out infinite; }
.adorno .rayo { animation: rayo-late 6.5s ease-in-out infinite; }
.adorno .rayo:nth-child(2) { animation-delay: .3s; }
.adorno .rayo:nth-child(3) { animation-delay: .6s; }
.adorno .rayo:nth-child(4) { animation-delay: .9s; }
.adorno .rayo:nth-child(5) { animation-delay: 1.2s; }
.adorno .rayo:nth-child(6) { animation-delay: 1.5s; }

.adorno.animar .rayos > img {
  animation:
    adorno-entra 720ms cubic-bezier(.23, 1, .32, 1) backwards,
    adorno-flota 7s 720ms ease-in-out infinite;
}
.adorno.animar .rayo {
  animation:
    rayo-entra 520ms cubic-bezier(.23, 1, .32, 1) backwards,
    rayo-late 6.5s ease-in-out infinite;
}
.adorno.animar .rayo:nth-child(1) { animation-delay: 300ms, 1.0s; }
.adorno.animar .rayo:nth-child(2) { animation-delay: 355ms, 1.3s; }
.adorno.animar .rayo:nth-child(3) { animation-delay: 410ms, 1.6s; }
.adorno.animar .rayo:nth-child(4) { animation-delay: 465ms, 1.9s; }
.adorno.animar .rayo:nth-child(5) { animation-delay: 520ms, 2.2s; }
.adorno.animar .rayo:nth-child(6) { animation-delay: 575ms, 2.5s; }

@keyframes adorno-entra {
  from { opacity: 0; transform: translateY(22px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes adorno-flota {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes rayo-entra {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angulo)) scale(.35); }
  to   { opacity: 1; transform: translate(-50%, -50%) rotate(var(--angulo)) scale(1); }
}
@keyframes rayo-late {
  0%, 100% { transform: translate(-50%, -50%) rotate(var(--angulo)) scale(1); }
  50%      { transform: translate(-50%, -50%) rotate(var(--angulo)) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .adorno .rayos > img, .adorno .rayo { animation: none; }
}

/* El hueco del adorno sólo lo reserva la sección que efectivamente lo tiene */
@media (max-width: 1023px) { .adorno { display: none; } }




/* ---------- Cabecera de la página de categoría ---------- */

.cabecera-cat {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--linea);
  padding: clamp(28px, 4vw, 52px) 0 clamp(30px, 4vw, 48px);
}
.cabecera-cat .sub { margin: 14px 0 0; color: var(--tinta-suave); max-width: 56ch; font-size: 17px; }
.cabecera-cat .cuenta-cat { margin: 16px 0 0; font-size: 14px; font-weight: 700; color: var(--tinta-suave); }

.miga { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--tinta-suave); margin-bottom: 18px; }
.miga a { text-decoration: none; }
.miga a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.miga span[aria-current] { color: var(--tinta); font-weight: 700; }

/* ---------- Selector de estilo ---------- */

.estilos { display: flex; flex-wrap: wrap; gap: 10px; }
.estilo-op { position: relative; }
.estilo-op input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.estilo-op span {
  display: block; padding: 11px 18px; border-radius: 999px; font-size: 14.5px; font-weight: 700;
  background: var(--papel); color: var(--tinta); box-shadow: inset 0 0 0 2px var(--linea);
  transition: box-shadow 160ms ease, background-color 160ms ease, color 160ms ease, transform 140ms var(--ease-out);
}
.estilo-op input:checked + span { background: var(--tinta); color: var(--papel); box-shadow: inset 0 0 0 2px var(--tinta); }
.estilo-op input:focus-visible + span { outline: 3px solid var(--tinta); outline-offset: 3px; }
.estilo-op input:not(:checked) + span:hover { box-shadow: inset 0 0 0 2px var(--tinta); }
.estilo-op input:active + span { transform: scale(0.97); }

/* Todas las cards de una fila, a la misma altura. */
.grilla { grid-auto-rows: 1fr; }

/* La cabecera de categoría tiene que ser al menos tan alta como su adorno */

/* ---------- Títulos: ráfaga de remate ----------
   El título se resuelve solo con texto, en dos tiempos: el arranque en
   peso medio y el remate en 800, misma familia y mismo color. El énfasis
   es por PESO, nunca por color: ninguna palabra se pinta.
   El carácter lo pone la ráfaga: los mismos trazos del recurso rayos/,
   pero anclados al TEXTO y no a la caja de una foto.

   El texto no depende de nada para verse. Si el CSS de la ráfaga no
   carga, queda un título bien compuesto en dos pesos. */

.tit {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  /* El corte de display (opsz 96) también en pantalla chica: junta los
     encuentros y afila los terminales, y el título deja de ser un bloque
     de grotesca genérica. */
  font-variation-settings: 'opsz' 96;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.97;
  color: var(--tinta);
  margin: 0;
  /* inline-block: la caja se encoge hasta el texto, así la ráfaga cae
     siempre pegada a las palabras y no al ancho de la columna. */
  display: inline-block;
  text-wrap: balance;
}

/* El remate. */
.tit .remate { font-weight: 800; letter-spacing: -0.04em; }

/* En los dos títulos grandes el remate se lleva su propio renglón: así el
   título largo de categoría cae siempre en dos líneas limpias en vez de
   quedar donde lo deje el ancho de la ventana. */
.titulo-portada .remate,
.cabecera-cat .tit .remate,
.categoria .tit .remate { display: block; }

/* La escalera. El h1 siempre por encima del h2, en todos los anchos. */
.titulo-portada   { font-size: clamp(33px, 5.6vw, 58px); line-height: 0.95; max-width: min(26ch, 100%); }
.cabecera-cat h1  { font-size: clamp(30px, 4.8vw, 52px); line-height: 0.98; max-width: min(30ch, 100%); --r: 0.95; }
/* Las seis categorías van al mismo cuerpo que las secciones curadas: más
   grandes, lo repetido termina gritando más fuerte que lo elegido. */
.categoria h2,
.seccion h2       { font-size: clamp(24px, 3.5vw, 41px); max-width: min(28ch, 100%); --r: 0.92; }

/* ---------- La ráfaga ----------
   Un ancla inline de ancho cero. No empuja el texto ni abre corte de
   línea, y cae siempre donde ARRANCA la primera línea o donde TERMINA la
   última, tenga el título una línea o tres. Los trazos salen de ahí hacia
   afuera: nunca pasan por detrás del texto. */

.chispa {
  position: relative;
  display: inline-block;
  width: 0;
  height: 1em;
  vertical-align: -0.14em;
  pointer-events: none;
}

/* Misma gramática que rayos.css, recalibrada para texto: acá --largo y
   --grosor se miden en em del título y no en el ancho de la caja, porque
   un bloque de texto se estira a lo ancho y el trazo no tiene que
   estirarse con él. Proporción largo/grosor ~3,5:1, la misma que tienen
   los trazos que rodean al producto. */
.chispa i {
  position: absolute;
  display: block;
  left: calc(var(--dx) * 1em);
  top: calc(var(--dy) * 1em);
  width: calc(var(--largo) * 1em * var(--r, 1));
  height: calc(var(--grosor) * 1em * var(--r, 1));
  transform: translate(-50%, -50%) rotate(var(--angulo));
  background: var(--c, var(--amarillo));
  border-radius: 999px;
}

/* El remate: tres trazos abriéndose del final de la última palabra. */
.chispa i:nth-child(1) { --dx: .52; --dy: .06; --largo: .50; --grosor: .145; --angulo: -56deg; }
.chispa i:nth-child(2) { --dx: .92; --dy: .46; --largo: .70; --grosor: .175; --angulo: -16deg; }
.chispa i:nth-child(3) { --dx: .60; --dy: .88; --largo: .40; --grosor: .135; --angulo: 32deg; }

/* El arranque: dos trazos más chicos, arriba a la izquierda de la primera
   palabra. Va solo en el título grande de portada. Repartir seis parejo
   alrededor del bloque lo convierte en un marco; dos arriba a la izquierda
   y tres abajo a la derecha arman la diagonal por la que el ojo ya recorre
   el título. */
.chispa-ini i:nth-child(1) { --dx: -.52; --dy: .10; --largo: .46; --grosor: .14;  --angulo: 34deg; }
.chispa-ini i:nth-child(2) { --dx: -.88; --dy: .52; --largo: .62; --grosor: .165; --angulo: -8deg; }

/* En la cabecera de categoría el arranque no va: de ese lado ya está el
   adorno del producto con sus propios trazos. */
.cabecera-cat .chispa-ini,
.categoria .chispa-ini { display: none; }

/* ---------- Movimiento ----------
   Entra una vez y se queda quieta: el adorno del producto ya respira, y
   dos cosas latiendo en la misma cabecera es ruido. El trazo nace al 86%
   y no de la nada: un trazo de impacto que crece desde cero se lee como
   globo, no como golpe. */

@media (prefers-reduced-motion: no-preference) {
  .chispa i {
    animation: chispa-entra 240ms var(--ease-out) backwards;
  }
  .chispa i:nth-child(1) { animation-delay: 120ms; }
  .chispa i:nth-child(2) { animation-delay: 180ms; }
  .chispa i:nth-child(3) { animation-delay: 240ms; }
}
@keyframes chispa-entra {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angulo)) scale(.86); }
  to   { opacity: 1; transform: translate(-50%, -50%) rotate(var(--angulo)) scale(1); }
}

/* ---------- Pantalla chica ----------
   El arranque sale: del lado izquierdo no sobra margen y el trazo se
   comería el gutter. Queda el remate, más chico. */

@media (max-width: 760px) {
  .chispa-ini { display: none; }
  .tit { --r: .74; }
}

/* El titular de la portada: la nota alta que faltaba arriba de todo */
.titulo-portada {
  /* El cuerpo, el interlineado y la medida los pone el sistema de
     títulos de arriba. Acá sólo el aire que lo separa del logo. */
  margin: clamp(20px, 3vw, 32px) 0 0;
}
.portada .pie-portada {
  color: var(--tinta-suave);
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 500;
  margin: 14px auto 0;
  max-width: 46ch;
}


/* ---------- La portada entra en la primera pantalla ---------- */

.portada-logo { max-width: min(860px, 100%); }  /* logo apaisado 3:1 (2026-09-26): más ancho para que ocupe lo mismo que el 3:2 anterior */
.portada { padding-top: clamp(20px, 3vw, 34px); }

/* ---------- Foco visible en los dos bloques mas grandes ---------- */


/* ---------- La pieza viaja hasta la bandeja ---------- */

.vuela {
  position: fixed; z-index: 55; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px; overflow: hidden;
}

/* ---------- Preguntas ---------- */

.faq { display: grid; gap: 0; margin-top: 30px; border-top: 2px solid var(--tinta); }
.faq details { border-bottom: 2px solid var(--tinta); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 46px 20px 0; position: relative;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: clamp(18px, 2.2vw, 23px); font-weight: 800; letter-spacing: -0.03em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c, var(--celeste-btn)); color: var(--sobre, #fff);
  font-size: 20px; line-height: 1; transition: transform 200ms var(--ease-out);
}
.faq details[open] summary::after { content: '\2212'; transform: translateY(-50%) rotate(180deg); }
.faq summary:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.faq p { margin: 0 0 22px; color: #3d3b48; font-size: 16px; max-width: 62ch; }

/* ---------- La pagina del pedido ---------- */

.pedido-caja { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 52px); align-items: start; }
@media (max-width: 940px) { .pedido-caja { grid-template-columns: minmax(0, 1fr); } }

.lista-pedido { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tinta); }
.fila-pedido {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto auto;
  align-items: center; gap: 16px;
  padding: 16px 0; border-bottom: 2px solid var(--tinta);
}
.fila-fig {
  width: 72px; height: 72px; border-radius: 12px; display: grid; place-items: center;
  color: var(--c-pieza, var(--c)); overflow: hidden; background: none;
}
.fila-fig img { width: 100%; height: 100%; object-fit: contain; }
.fila-datos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fila-nom { font-weight: 700; font-size: 17px; text-decoration: none; }
.fila-nom:hover { text-decoration: underline; text-underline-offset: 3px; }
.fila-detalle { font-size: 14px; color: #3d3b48; }
.fila-precio { font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; min-width: 92px; text-align: right; }

.cant { display: inline-flex; align-items: center; gap: 4px; }
.cant-btn {
  appearance: none; cursor: pointer; font-family: inherit; font-size: 18px; font-weight: 800;
  width: 44px; height: 44px; border-radius: 50%; background: var(--papel); color: var(--tinta);
  border: 2px solid rgba(20,18,26,0.42); display: grid; place-items: center; line-height: 1;
  transition: border-color 140ms ease, transform 140ms var(--ease-out);
}
.cant-btn:hover { border-color: var(--tinta); }
.cant-btn:active { transform: scale(0.93); }
.cant-btn:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.cant-n { min-width: 26px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }

.quitar {
  appearance: none; border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 700; color: #3d3b48; padding: 12px 6px;
  text-decoration: underline; text-underline-offset: 3px;
}
.quitar:hover { color: var(--rojo-hondo); }
.quitar:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; border-radius: 6px; }

@media (max-width: 720px) {
  .fila-pedido { grid-template-columns: 60px minmax(0, 1fr) auto; row-gap: 10px; }
  .fila-fig { width: 60px; height: 60px; }
  .cant { grid-column: 2; }
  .fila-precio { grid-column: 3; grid-row: 2; }
  .quitar { grid-column: 3; grid-row: 1; justify-self: end; }
}

.resumen {
  border: 3px solid var(--tinta); border-radius: 24px; padding: 26px;
  box-shadow: 8px 8px 0 var(--amarillo); position: sticky; top: 96px;
}
.resumen h2 { font-size: 26px; }
.resumen .renglon { display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; font-size: 16px; }
.resumen .renglon.total { font-size: 22px; font-weight: 800; border-top: 2px solid var(--tinta); padding-top: 14px; }
.resumen .aclara { font-size: 14px; color: #3d3b48; margin: 14px 0 0; }
.campo-linea { margin-top: 16px; }
.campo-linea label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.campo-linea input, .campo-linea select, .campo-linea textarea {
  width: 100%; font-family: inherit; font-size: 16px; padding: 13px 15px;
  border: 2px solid rgba(20,18,26,0.42); border-radius: 13px; background: var(--papel); color: var(--tinta);
}
.campo-linea input:focus-visible, .campo-linea select:focus-visible, .campo-linea textarea:focus-visible {
  outline: 3px solid var(--tinta); outline-offset: 2px; border-color: var(--tinta);
}
.campo-linea textarea { min-height: 84px; resize: vertical; }
.campo-ayuda { display: block; font-size: 13px; color: var(--tinta-suave); margin-top: 6px; }
.resumen .renglon-cupon { color: #15803d; font-weight: 700; align-items: baseline; }
.resumen .renglon-cupon.sin-aplicar { color: var(--tinta-suave); font-weight: 600; }
.cupon-quitar {
  font: inherit; font-size: 13px; font-weight: 700; color: var(--tinta); background: none; border: 0;
  padding: 10px 6px; margin: -10px 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.cupon { margin-top: 14px; }
.cupon summary {
  cursor: pointer; font-size: 14.5px; font-weight: 700; padding: 10px 0; width: fit-content;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
.cupon summary:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; border-radius: 4px; }
.cupon-fila { display: flex; gap: 10px; margin-top: 6px; }
.cupon-fila input {
  flex: 1; min-width: 0; font-family: inherit; font-size: 16px; padding: 11px 14px; text-transform: uppercase; letter-spacing: .04em;
  border: 2px solid rgba(20,18,26,0.42); border-radius: 13px; background: var(--papel); color: var(--tinta);
}
.cupon-fila input:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; border-color: var(--tinta); }
.cupon-fila input[aria-invalid="true"] { border-color: #a81008; }
.cupon-estado { font-size: 13.5px; font-weight: 700; color: #a81008; margin: 8px 0 0; min-height: 0; }
.cupon-estado:empty { display: none; }
#salida-pedido {
  margin-top: 16px; padding: 14px 16px; border: 2px dashed var(--tinta); border-radius: 14px;
  font-size: 14.5px; white-space: pre-wrap;
}
.pedido-vacio { text-align: center; padding: clamp(40px, 7vw, 80px) 0; }
.pedido-vacio h2 { font-size: clamp(26px, 4vw, 40px); }
.pedido-vacio p { color: #3d3b48; margin: 14px auto 26px; max-width: 46ch; font-size: 17px; }

/* ---------- Controles de la cinta ---------- */

.cinta-controles { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- El "a medida" de la pagina de categoria ----------
   No repite la caja entera de la portada: una linea y listo. */

.linea-medida {
  margin: 0; padding: 22px 0 0; border-top: 2px solid var(--tinta);
  font-size: clamp(17px, 2vw, 21px); font-weight: 600; color: var(--tinta);
}
.linea-medida a { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; text-decoration-color: var(--amarillo); }
.linea-medida a:hover { text-decoration-color: var(--tinta); }
.linea-medida a:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 4px; }


/* Las piezas del adorno se quedan quietas cuando la seccion no esta en
   pantalla. Quietas, no escondidas: si el observer nunca reporta, se ven. */
.adorno:not(.en-vista) .rayos > img,
.adorno:not(.en-vista) .rayos .rayo,
.adorno:not(.en-vista) .pieza-grande,
.adorno:not(.en-vista) .pieza-chica { animation-play-state: paused; }

/* El rotulo de categoria en la ficha: un link, no una versalita apagada */
.ficha-cat { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.ficha-cat a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--c, var(--celeste)); }
.ficha-cat a:hover { text-decoration-color: var(--tinta); }
.ficha-cat a:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 4px; }

/* Las piezas del bloque "a medida" dejan de ser tres iconos en fila: se
   apoyan una sobre otra, con tamanos distintos, como un grupo de objetos. */
.medida .figuras { display: block; position: relative; width: 210px; height: 170px; }
.medida .figuras svg { position: absolute; }
.medida .figuras svg:nth-child(1) { left: 0; top: 34px; transform: rotate(-8deg); }
.medida .figuras svg:nth-child(2) { left: 74px; top: 0; transform: rotate(9deg); }
.medida .figuras svg:nth-child(3) { left: 84px; top: 62px; }
@media (max-width: 640px) { .medida .figuras { width: 180px; height: 150px; } }

/* ---------- Galería de la ficha ----------
   La foto grande, dos flechas y los puntos de posición. Las flechas sólo
   existen cuando el producto tiene dos fotos o más. */

.ficha-visor .visor-foto { display: block; max-width: 100%; max-height: 420px; width: auto; height: auto; object-fit: contain; transition: transform 380ms var(--ease-out); }
.visor-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; padding: 0;
  border: 2px solid var(--tinta); background: var(--papel); color: var(--tinta);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 3px 3px 0 var(--c);
}
.visor-flecha.ant { left: 14px; }
.visor-flecha.sig { right: 14px; }
.visor-flecha svg { width: 18px; height: 18px; color: inherit; transition: transform 160ms var(--ease-out); }
.visor-flecha.ant svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .visor-flecha:hover { transform: translateY(calc(-50% - 2px)); box-shadow: 5px 5px 0 var(--c); }
  .visor-flecha.sig:hover svg { transform: translateX(2px); }
  .visor-flecha.ant:hover svg { transform: rotate(180deg) translateX(2px); }
}
.visor-flecha:active { transform: translateY(calc(-50% + 1px)) scale(0.95); box-shadow: 1px 1px 0 var(--c); transition-duration: 80ms; }
.visor-flecha:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.visor-puntos { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; }
.visor-puntos i { width: 9px; height: 9px; border-radius: 50%; background: var(--papel); border: 2px solid var(--tinta); transition: background-color 160ms ease, transform 160ms var(--ease-out); }
.visor-puntos i.activo { background: var(--tinta); transform: scale(1.15); }
.ficha-visor:focus-visible { outline: 3px solid var(--tinta); outline-offset: 4px; }
@media (max-width: 860px) { .ficha-visor .visor-foto { max-height: 300px; } }

/* ---------- Botones vivos ----------
   Un solo lenguaje para todo lo que se aprieta: al pasar el mouse se
   despega dos píxeles del papel y la sombra crece; al apretar se hunde
   (1px abajo, 97%) y la sombra se achica. Sin rebote: el botón responde,
   no salta. Los íconos que señalan una dirección se corren hacia ella. */

.vel-boton, .cant-btn, .estilo-op span, .faq summary::after, .visor-flecha, .color-op input + span {
  transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .vel-boton:hover, .cant-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(20, 18, 26, 0.14); }
  .vel-boton:hover svg { transform: translateX(2px); }
  .estilo-op input:not(:checked) + span:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--tinta), 0 6px 12px rgba(20, 18, 26, 0.12); }
  .color-op input:not(:checked) + span:hover { transform: translateY(-2px) scale(1.04); }
  .faq summary:hover::after { transform: translateY(-50%) scale(1.1); }
  .faq details[open] summary:hover::after { transform: translateY(-50%) rotate(180deg) scale(1.1); }
  .quitar:hover { text-decoration-color: currentColor; }
}
.vel-boton:active, .cant-btn:active { transform: translateY(1px) scale(0.96); box-shadow: none; transition-duration: 80ms; }
.btn:active { transition-duration: 80ms; }

/* ---------- El personalizador ----------
   Un panel grande sobre la página: vista previa a la izquierda, opciones
   a la derecha. En pantalla chica es una hoja que sube desde abajo. */

body.sin-scroll { overflow: hidden; }
.perso { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; }
.perso-fondo { position: absolute; inset: 0; background: rgba(20, 18, 26, 0.58); }
.perso-caja {
  position: relative; z-index: 1;
  width: min(1040px, 100%); max-height: calc(100vh - 48px);
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  background: var(--papel); color: var(--tinta);
  border-radius: 28px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(20, 18, 26, 0.35);
}
.perso-cerrar {
  position: absolute; z-index: 3; top: 14px; right: 14px;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--papel); color: var(--tinta); display: grid; place-items: center;
  box-shadow: 0 2px 10px rgba(20, 18, 26, 0.18);
  transition: transform 160ms var(--ease-out);
}
.perso-cerrar svg { width: 16px; height: 16px; }
.perso-cerrar:hover { transform: scale(1.08); }
.perso-cerrar:active { transform: scale(0.94); }
.perso-cerrar:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }

.perso-vista { background: var(--c-tinte, #f4f5f7); padding: clamp(20px, 3vw, 36px); display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.perso-visor {
  position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 8%;
  color: var(--c-pieza, var(--c));
}
.perso-visor img, .perso-visor > svg { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(20, 18, 26, 0.18)); }
.perso-visor > svg { width: 62%; }
/* El texto se apoya sobre el cuerpo de la pieza, en la mitad de abajo. */
.perso-texto-vista {
  position: absolute; left: 50%; top: 63%; transform: translate(-50%, -50%);
  max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 1px rgba(0, 0, 0, 0.6);
  font-size: clamp(18px, 3.2vw, 30px); line-height: 1; pointer-events: none;
}
.perso-texto-vista.redonda { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.02em; }
.perso-texto-vista.mayuscula { font-family: 'Hanken Grotesk', system-ui, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: clamp(15px, 2.6vw, 24px); }
.perso-texto-vista[data-pos='atras'] { opacity: 0.45; }
.perso-texto-vista[data-pos='atras']:not(:empty)::after, .perso-texto-vista[data-pos='ambos']:not(:empty)::after {
  content: 'atrás'; display: block; margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85;
}
.perso-texto-vista[data-pos='ambos']:not(:empty)::after { content: 'y atrás'; }
.perso-logo-vista { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); width: 26%; aspect-ratio: 1; display: grid; place-items: center; pointer-events: none; }
.perso-logo-vista img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)); }
.perso-nota { margin: 0; font-size: 13px; color: var(--tinta-suave); text-align: center; }

.perso-form { padding: clamp(22px, 3vw, 36px) clamp(22px, 3vw, 36px) 0; overflow-y: auto; display: flex; flex-direction: column; }
.perso-titulo { font-size: clamp(24px, 3vw, 32px); margin: 4px 0 0; }
.perso-form .campo { margin-top: 22px; border: 0; padding: 0; min-width: 0; }
.perso-form .campo > legend, .perso-form .campo > label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 10px; padding: 0; }
.perso-form textarea.texto-propio { resize: vertical; min-height: 64px; }
.perso-archivo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.perso-archivo .btn svg { width: 18px; height: 18px; }
.perso-archivo-nom { font-size: 13px; color: var(--tinta-suave); }
.perso-form .error { margin-top: 14px; }
.perso-pie {
  position: sticky; bottom: 0; margin-top: 24px; padding: 16px 0 clamp(22px, 3vw, 36px);
  background: var(--papel); border-top: 2px solid var(--tinta);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.perso-precio { display: flex; flex-direction: column; line-height: 1.1; }
.perso-precio > span { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.perso-precio small { font-size: 12.5px; color: var(--tinta-suave); margin-top: 4px; }
.perso-pie .btn svg { width: 20px; height: 20px; }
.perso-pie .btn { flex: 1 1 240px; }

@media (max-width: 760px) {
  .perso { padding: 0; align-items: end; }
  .perso-caja { grid-template-columns: minmax(0, 1fr); width: 100%; max-height: 94vh; border-radius: 24px 24px 0 0; overflow-y: auto; }
  .perso-vista { padding: 18px 18px 8px; }
  .perso-visor { aspect-ratio: 4 / 3; }
  .perso-form { overflow: visible; }
}

/* En la ficha, el botón grande lleva su ícono. */
.ficha .acciones .btn svg { width: 20px; height: 20px; }

/* El clon que vuela a la bandeja se lleva sólo la pieza. */
.vuela button, .vuela .chip { display: none; }

/* La miniatura del logo en la fila del carrito. */
.fila-logo { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; border: 1px solid var(--linea); margin-top: 6px; background: var(--papel); }

/* En la ficha de un personalizable el precio es el del tamaño base. */
.ficha .precio .desde { font-size: 14px; font-weight: 600; color: var(--tinta-suave); letter-spacing: 0; }

/* ---------- Personalizador 3D ----------
   El botón que lleva al 3D es oscuro y con la flecha que se corre; el panel
   es como el del personalizador común pero más ancho, con el lienzo 3D a la
   izquierda sobre el tinte del color y el formulario a la derecha. */
.btn-3d { --c-fuerte: var(--tinta); --sobre: #fff; }
.btn-3d svg { width: 20px; height: 20px; }
.btn-3d .flecha-ir { width: 18px; height: 18px; margin-left: -2px; transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .btn-3d:hover .flecha-ir { transform: translateX(4px); } }
@media (prefers-reduced-motion: no-preference) {
  .btn-3d .flecha-ir { animation: flecha-3d 2.8s ease-in-out infinite; }
  @keyframes flecha-3d { 0%, 72%, 100% { transform: translateX(0); } 80% { transform: translateX(5px); } 88% { transform: translateX(0); } 94% { transform: translateX(3px); } }
}
.perso-a-3d { align-self: flex-start; margin-top: 14px; }
.p3d { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; }
.p3d-caja {
  position: relative; z-index: 1;
  width: min(1180px, 100%); height: min(780px, calc(100vh - 48px));
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  background: var(--papel); color: var(--tinta);
  border-radius: 28px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(20, 18, 26, 0.35);
}
.p3d-vista { position: relative; background: var(--c-tinte, #f4f5f7); display: flex; flex-direction: column; min-height: 0; }
.p3d-lienzo { flex: 1 1 auto; min-height: 0; position: relative; }
.p3d-lienzo canvas { display: block; }
.p3d-cargando { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); margin: 0; font-weight: 700; color: var(--tinta-suave); pointer-events: none; }
.p3d-mandos { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 1; }
.p3d-mando {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 14px;
  min-width: 40px; height: 40px; padding: 0 14px; border-radius: 999px;
  background: var(--papel); color: var(--tinta); box-shadow: 0 2px 8px rgba(20, 18, 26, 0.14);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.p3d-mando svg { width: 16px; height: 16px; }
.p3d-mando:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(20, 18, 26, 0.18); }
.p3d-mando:active { transform: scale(0.96); }
.p3d-mando:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.p3d-ayuda { margin: 0; padding: 10px 16px 6px; font-size: 13px; color: var(--tinta-suave); text-align: center; }
.p3d-fino { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 16px 14px; font-size: 13px; color: var(--tinta-suave); }
.p3d-fino .p3d-mando { min-width: 36px; height: 36px; padding: 0; font-size: 16px; }
.p3d-form { padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 36px) 0; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.p3d-form .campo { margin-top: 20px; border: 0; padding: 0; min-width: 0; }
.p3d-form .campo > legend, .p3d-form .campo > label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 10px; padding: 0; }
.p3d-form .campo .campo { margin-top: 0; }
.p3d-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.p3d-nota { margin: 8px 0 0; font-size: 13px; color: var(--tinta-suave); }
.p3d-nota:empty { display: none; }
.p3d-recargo { font-weight: 600; color: var(--tinta-suave); margin-left: 6px; }
.p3d-form input[type=range] { width: 100%; accent-color: var(--tinta); margin: 6px 0 0; }
.p3d-form textarea.texto-propio { resize: vertical; min-height: 64px; }
.p3d-form .error { margin-top: 14px; }
.p3d-form .perso-pie small { max-width: 26ch; }
@media (max-width: 760px) {
  .p3d { padding: 0; }
  .p3d-caja { width: 100%; height: 100dvh; max-height: none; border-radius: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: 41dvh minmax(0, 1fr); }
  .p3d-ayuda { padding: 10px 14px 4px; }
  .p3d-dos { grid-template-columns: 1fr; }
  /* El pie fijo del formulario en una sola fila, para que quede lugar a los campos. */
  .p3d-form .perso-pie { flex-wrap: nowrap; gap: 12px; padding: 10px 0 14px; }
  .p3d-form .perso-pie .btn { flex: 0 0 auto; min-width: 0; white-space: nowrap; padding-left: 20px; padding-right: 20px; }
  .p3d-form .perso-precio { flex: 1 1 0; min-width: 0; }
  .p3d-form .perso-precio > span { font-size: 22px; }
  #p3d-precio-detalle { white-space: normal; font-size: 11.5px; line-height: 1.2; }
}
.p3d-caja:focus, .perso-caja:focus { outline: none; }
.p3d-fino .p3d-mando:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
/* El botón de subir imagen muestra el foco del input escondido. */
.perso-archivo input.sr:focus-visible + .btn { outline: 3px solid var(--tinta); outline-offset: 3px; }
.p3d-mando { white-space: nowrap; }
.fila-fig .fila-3d { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; }

/* Colores por parte: un botón con muestra por parte (y uno para el texto) que abre la paleta debajo. */
.p3d-partes { display: flex; flex-wrap: wrap; gap: 8px; }
.p3d-color-btn {
  appearance: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 13px; color: var(--tinta);
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; min-height: 36px;
  border-radius: 999px; border: 1.5px solid var(--linea); background: var(--papel);
  transition: border-color 140ms var(--ease-out), transform 140ms var(--ease-out);
}
.p3d-color-btn:hover { border-color: var(--tinta); }
.p3d-color-btn[aria-expanded="true"] { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.p3d-color-btn:active { transform: scale(0.97); }
.p3d-color-btn:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.p3d-muestra { width: 24px; height: 24px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(20, 18, 26, 0.18); flex: none; }
.p3d-paleta { margin-top: 10px; padding: 12px 14px 14px; border-radius: 16px; background: #f4f5f7; }
.p3d-paleta-titulo { margin: 0 0 10px; font-size: 13px; font-weight: 700; }
.p3d-paleta-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.p3d-paleta-op { width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--c); box-shadow: inset 0 0 0 1px rgba(20, 18, 26, 0.18); transition: transform 140ms var(--ease-out); }
.p3d-paleta-op:hover { transform: scale(1.1); }
.p3d-paleta-op[aria-pressed="true"] { outline: 3px solid var(--tinta); outline-offset: 2px; }
.p3d-paleta-op:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.p3d-paleta-pie { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; }
/* Los tipos de manija: la pill lleva el dibujo del vaso de costado con su manija. */
.p3d-manijas .estilo-op { display: block; min-width: 0; }
.p3d-manijas .estilo-op > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 66px; padding: 7px 4px 8px; border-radius: 18px; text-align: center; font-size: 13.5px; line-height: 1.15; }
.p3d-manija-ico { width: 30px; height: 30px; flex: none; }
/* El llavero con nombre: los emojis rápidos debajo del nombre. */
.p3d-emojis { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.p3d-emoji {
  width: 38px; height: 38px; padding: 0; border-radius: 12px; border: 1.5px solid var(--linea); background: var(--papel);
  font-size: 19px; line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: border-color 140ms var(--ease-out), transform 140ms var(--ease-out);
}
.p3d-emoji:hover { border-color: var(--tinta); }
.p3d-emoji:active { transform: scale(0.94); }
.p3d-emoji:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.p3d-paleta-otro input:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.p3d-aviso { color: var(--rojo-hondo); font-weight: 600; }

/* ---------- Diseñador 3D en pasos (02/10) ----------
   Santi: "tiene que ser más cómodo". El formulario va en pasos: arriba, las
   pestañas fijas (un control segmentado: la píldora de tinta se desliza a la
   elegida, con el número en amarillo y una tilde celeste en los pasos por
   los que ya pasaste); en el medio, el paso, lo único que se desliza (y casi
   nunca hace falta); abajo, el precio y "Agregar al carrito", fijos como
   siempre. La ayuda y el ajuste fino viven en su paso: el 3D queda limpio. */
.p3d-pasos {
  --n: 4; --i: 0;
  position: relative; flex: none; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  margin-top: 12px; padding: 4px; border-radius: 999px;
  background: #eef0f4; box-shadow: inset 0 1px 2px rgba(20, 18, 26, 0.08);
}
.p3d-pasos::before {
  content: ''; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n));
  border-radius: 999px; background: var(--tinta);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16), inset 0 -3px 6px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(20, 18, 26, 0.22);
  transform: translateX(calc(100% * var(--i)));
  transition: transform 340ms var(--ease-out);
}
.p3d-paso-tab {
  position: relative; z-index: 1; appearance: none; border: 0; background: none; cursor: pointer;
  min-width: 0; min-height: 40px; padding: 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 14px; font-weight: 700; line-height: 1.1; color: var(--tinta-suave); white-space: nowrap;
  transition: color 200ms ease;
}
.p3d-paso-nom { overflow: hidden; text-overflow: ellipsis; }
.p3d-paso-tab:hover { color: var(--tinta); }
.p3d-paso-tab[aria-selected="true"] { color: #fff; }
.p3d-paso-tab:focus-visible { outline: 3px solid var(--celeste-btn); outline-offset: 2px; }
.p3d-paso-n {
  position: relative; flex: none; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; box-shadow: inset 0 0 0 1.5px currentColor;
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.p3d-paso-n svg { position: absolute; inset: 4px; width: 13px; height: 13px; opacity: 0; transform: scale(0.4); transition: opacity 180ms ease, transform 260ms var(--ease-out); }
.p3d-paso-tab[aria-selected="true"] .p3d-paso-n { background: var(--amarillo); color: var(--tinta); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9); }
.p3d-paso-tab.p3d-visto .p3d-paso-n { background: var(--celeste-btn); color: #fff; box-shadow: none; }
.p3d-visto .p3d-paso-n > span { opacity: 0; }
.p3d-visto .p3d-paso-n svg { opacity: 1; transform: none; }
/* El paso: las sombras de arriba y de abajo aparecen sólo si hay más para ver. */
.p3d-pasos-cuerpo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  margin: 0 -12px; padding: 2px 12px 16px; scroll-padding-bottom: 12px;
  background:
    linear-gradient(var(--papel) 30%, rgba(255, 255, 255, 0)) top / 100% 24px no-repeat local,
    linear-gradient(rgba(255, 255, 255, 0), var(--papel) 70%) bottom / 100% 24px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(20, 18, 26, 0.16), rgba(20, 18, 26, 0)) top / 100% 9px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(20, 18, 26, 0.16), rgba(20, 18, 26, 0)) bottom / 100% 9px no-repeat scroll;
  background-color: var(--papel);
}
.p3d-paso:focus { outline: none; }
.p3d-paso > :first-child, .p3d-paso > .p3d-nota:empty:first-child + * { margin-top: 14px; }
.p3d-form .p3d-paso .campo { scroll-margin-bottom: 12px; }
.p3d-paso-pie { display: flex; justify-content: flex-end; margin-top: 18px; }
.p3d-siguiente .flecha-ir { width: 18px; height: 18px; flex: none; transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .p3d-siguiente:hover .flecha-ir { transform: translateX(3px); } }
.p3d-form .perso-pie { margin-top: 0; }
@media (min-width: 761px) { .p3d-form .perso-pie { padding-bottom: clamp(18px, 2.2vw, 26px); } }
/* Los tipos de manija y los tamaños, en fichas parejas (cuatro y dos por fila). */
.p3d-manijas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.p3d-tamanos { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.p3d-tamanos .estilo-op { min-width: 0; }
.p3d-tamanos .estilo-op > span { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: 52px; padding: 8px 16px; border-radius: 18px; line-height: 1.15; }
.p3d-manijas small, .p3d-tamanos small { font-size: 12px; font-weight: 600; opacity: 0.78; white-space: nowrap; }
/* .estilo-op span pinta como píldora a todo span de adentro: el nombre de la ficha va liso. */
.estilo-op .p3d-op-nom { display: block; padding: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font-size: inherit; transition: none; }
/* Los colores del vaso: una ficha por parte, con la muestra arriba. */
.p3d-partes-grilla { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.p3d-partes-grilla .p3d-color-btn { flex-direction: column; justify-content: flex-start; gap: 6px; min-width: 0; min-height: 0; padding: 9px 4px 8px; border-radius: 18px; font-size: 12.5px; line-height: 1.15; text-align: center; }
.p3d-partes-grilla .p3d-muestra { width: 30px; height: 30px; }
.p3d-paleta-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.p3d-paleta-cabeza .p3d-paleta-titulo { margin: 0; }
.p3d-paleta-cabeza .btn { min-height: 34px; padding: 6px 16px; font-size: 14px; }
.p3d-paleta-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); gap: 7px; justify-items: center; }
.p3d-paleta-op { width: 30px; height: 30px; }
/* Los colores de los llaveros: todos a la vista, un toque y listo. */
.p3d-tono-nom { margin-left: 4px; font-weight: 600; color: var(--tinta-suave); }
.p3d-tono-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); gap: 9px 7px; justify-items: center; }
.p3d-tono-op { position: relative; display: block; width: 32px; height: 32px; }
.p3d-tono-op input { position: absolute; inset: -3px; z-index: 1; width: auto; height: auto; margin: 0; opacity: 0; cursor: pointer; }
.p3d-tono-op span { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(20, 18, 26, 0.18); transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out); }
.p3d-tono-op input:checked + span { box-shadow: inset 0 0 0 1px rgba(20, 18, 26, 0.18), 0 0 0 2.5px var(--papel), 0 0 0 5px var(--tinta); }
.p3d-tono-op input:focus-visible + span { outline: 3px solid var(--celeste-btn); outline-offset: 6px; }
.p3d-tono-op input:active + span { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) { .p3d-tono-op:hover span { transform: scale(1.12); } }
/* El ajuste fino, adentro de su paso (sobre papel blanco, los botones llevan borde). */
.p3d-paso .p3d-fino { justify-content: flex-start; gap: 8px; padding: 0; margin-top: 14px; }
.p3d-paso .p3d-fino > span { margin-right: 4px; font-size: 14px; font-weight: 700; color: var(--tinta); }
.p3d-paso .p3d-mando { box-shadow: inset 0 0 0 1.5px var(--linea); }
.p3d-paso .p3d-mando:hover { box-shadow: inset 0 0 0 1.5px var(--tinta), 0 4px 10px rgba(20, 18, 26, 0.12); }
.p3d-letras .estilo-op span { padding-inline: 16px; }
/* La letra y el color del texto, uno al lado del otro mientras entren; los deslizadores, con su rótulo al lado. */
.p3d-dos { display: flex; flex-wrap: wrap; gap: 0 24px; }
.p3d-rango { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; }
.p3d-form .p3d-rango > label { margin-bottom: 0; }
.p3d-form .p3d-rango input[type=range] { margin: 0; }
/* "Listo": el resumen como un ticket, cada fila lleva a su paso. */
.p3d-resumen { padding: 2px 14px; border-radius: 18px; background: #f5f6f8; box-shadow: inset 0 0 0 1.5px rgba(20, 18, 26, 0.06); }
.p3d-resumen:empty { display: none; }
.p3d-res-fila {
  appearance: none; border: 0; background: none; width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 12px 0; font: inherit; color: var(--tinta); text-align: left; cursor: pointer;
}
.p3d-res-fila + .p3d-res-fila { border-top: 1.5px dashed rgba(20, 18, 26, 0.16); }
.p3d-res-que { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.p3d-res-que b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 800; line-height: 1.2; }
.p3d-res-que small { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 7px; font-size: 12.5px; line-height: 1.3; color: var(--tinta-suave); }
.p3d-res-pre { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.p3d-res-pre small { font-size: 12.5px; font-weight: 700; color: var(--tinta-suave); }
.p3d-res-ir { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--papel); color: var(--tinta); box-shadow: 0 1px 4px rgba(20, 18, 26, 0.14); transition: transform 160ms var(--ease-out); }
.p3d-res-ir svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .p3d-res-fila:hover .p3d-res-ir { transform: translateX(3px); } }
.p3d-res-fila:active .p3d-res-ir { transform: scale(0.9); }
.p3d-res-fila:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; border-radius: 10px; }
.p3d-res-vacia b { font-weight: 700; color: var(--tinta-suave); }
.p3d-res-tonos { display: inline-flex; flex: none; }
.p3d-res-tonos i { width: 13px; height: 13px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(20, 18, 26, 0.2), 0 0 0 1.5px #f5f6f8; }
.p3d-res-tonos i + i { margin-left: -3px; }
.p3d-nom-corto { display: none; }
.p3d-res-img { flex: none; width: 40px; height: 40px; padding: 3px; object-fit: contain; border-radius: 10px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea); }
.p3d-nota-previa { margin-top: 12px; }
/* La medida de los llaveros, en una etiqueta sobre el 3D. */
.p3d-medida {
  position: absolute; top: 14px; left: 14px; z-index: 1; margin: 0;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.92); color: var(--tinta); box-shadow: 0 2px 8px rgba(20, 18, 26, 0.12);
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none;
}
.p3d-medida svg { width: 17px; height: 17px; flex: none; color: var(--celeste-btn); }
/* El título del panel, un escalón más chico: la columna es para los pasos. En
   las compus de pantalla baja (1366 × 768) va sin el cartel, que se comía 40 px. */
.p3d-form .ts.ts--h2 { --ts-tamano: clamp(1.4rem, 0.9rem + 1.1vw, 1.95rem); }
@media (min-width: 761px) and (max-height: 820px) {
  .p3d-form .ts.ts--h2 { padding-top: 0.5em; padding-bottom: 0.3em; }
  .p3d-form .ts__etiqueta { display: none; }
}
/* Celular (y celular apaisado): el título en un renglón y sin el cartel, para
   que cada paso entre casi sin deslizar. */
@media (max-width: 760px), (max-height: 500px) {
  .p3d-form .ts.ts--h2 { --ts-tamano: 20px; margin-top: 0; padding-top: 0.45em; padding-bottom: 0.3em; }
  .p3d-caja .p3d-form h2.titulo-sticker:not(.ts__titulo) { --ts-tamano: 20px; padding-top: 0.45em; padding-bottom: 0.3em; }
  .p3d-form .ts__etiqueta { display: none; }
}
@media (max-width: 760px) {
  .p3d-form { padding: 6px 16px 0; }
  .p3d-pasos { margin-top: 4px; padding: 3px; }
  .p3d-pasos::before { top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n)); }
  .p3d-paso-tab { min-height: 36px; gap: 6px; padding: 4px; font-size: 13.5px; }
  .p3d-rango { column-gap: 14px; }
  .p3d-fuentes .estilo-op span { padding: 9px 13px; }
  /* los emojis rápidos, en una tira que se desliza de costado (siguen de 44 px para el dedo) */
  .p3d-emojis { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 2px 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .p3d-emojis::-webkit-scrollbar { display: none; }
  .p3d-emoji { flex: none; }
  .p3d-caja .p3d-form .perso-pie { padding-top: 8px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .p3d-pasos-cuerpo { margin: 0 -16px; padding: 0 16px 12px; }
  .p3d-form .campo { margin-top: 12px; }
  .p3d-paso > :first-child, .p3d-paso > .p3d-nota:empty:first-child + * { margin-top: 10px; }
  .p3d-form .campo > legend, .p3d-form .campo > label { margin-bottom: 6px; font-size: 13.5px; }
  .p3d-paso-pie { margin-top: 12px; }
  .p3d-siguiente { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
  .p3d-form .texto-propio { padding: 11px 14px; }
  .p3d-manijas .estilo-op > span { min-height: 58px; padding: 6px 2px 7px; font-size: 13px; }
  .p3d-manija-ico { width: 27px; height: 27px; }
  .p3d-tamanos .estilo-op > span { min-height: 48px; padding: 7px 14px; }
  .p3d-partes-grilla .p3d-color-btn { gap: 5px; padding: 8px 2px 7px; }
  .p3d-partes-grilla .p3d-muestra { width: 28px; height: 28px; }
  .p3d-partes-grilla .p3d-nom-largo { display: none; }
  .p3d-partes-grilla .p3d-nom-corto { display: inline; }
  .p3d-res-fila { padding: 9px 0; }
  .p3d-form .p3d-paso textarea.texto-propio { height: 52px; min-height: 0; }
  .p3d-dos { column-gap: 18px; }
  .p3d-letras .estilo-op span { padding: 9px 14px; }
  .p3d-form .perso-pie .btn { min-height: 50px; padding-top: 12px; padding-bottom: 12px; font-size: 17px; }
  .p3d-medida { top: 12px; left: 12px; }
}
/* Tablet y ventanas angostas (la columna del formulario mide unos 360 px): el
   precio y "Agregar al carrito" en una sola fila, como en el celular; partido en
   dos renglones se comía 70 px del paso. */
@media (min-width: 761px) and (max-width: 1000px) {
  .p3d-form .perso-pie { flex-wrap: nowrap; gap: 12px; }
  .p3d-form .perso-pie .btn { flex: 0 0 auto; min-width: 0; white-space: nowrap; padding-left: 20px; padding-right: 20px; }
  .p3d-form .perso-precio { flex: 1 1 0; min-width: 0; }
  .p3d-form .perso-precio > span { font-size: 24px; }
}
/* Si la barra de pasos queda angosta (celular, celular apaisado, ventana chica), los nombres sin el número. */
.p3d-pasos { container-type: inline-size; }
@container (max-width: 410px) { .p3d-pasos-4 .p3d-paso-n { display: none; } }
@container (max-width: 330px) { .p3d-paso-n { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .p3d-pasos::before, .p3d-paso-n, .p3d-paso-n svg { transition: none; }
}

/* ---------- La card del visor de la ficha, en el lenguaje nuevo ----------
   Igual que las cards de categoría: tinte pastel del color del producto, sin
   borde, sombra casi nula y la pieza con su sombra proyectada. Las flechas
   son pastillas blancas flotantes, como las del panel 3D. */
.ficha-visor {
  background: color-mix(in srgb, var(--c, #0096ea) 11%, #fff);
  border: 0; border-radius: 22px;
  box-shadow: 0 1px 2px rgba(20, 18, 26, 0.04);
}
.ficha-visor .visor-foto, .ficha-visor > svg { filter: drop-shadow(0 14px 18px rgba(20, 18, 26, 0.18)); }
.ficha-visor .visor-flecha {
  border: 0; background: var(--papel); color: var(--tinta);
  box-shadow: 0 2px 8px rgba(20, 18, 26, 0.14);
}
.ficha-visor .visor-flecha:hover { box-shadow: 0 5px 12px rgba(20, 18, 26, 0.18); }
.ficha-visor .visor-puntos i { border-color: transparent; }
.ficha-visor .visor-flecha:hover { transform: translateY(calc(-50% - 1px)); }
.ficha-visor .visor-flecha:active { transform: translateY(-50%) scale(0.95); box-shadow: 0 2px 6px rgba(20, 18, 26, 0.14); }

/* ---------- Personalizador común: arreglos de la revisión ----------
   En escritorio la caja tiene alto máximo pero la fila del grid no estaba
   acotada: el formulario crecía y el botón de agregar quedaba fuera de la
   pantalla, sin poder scrollear. Con la fila acotada, el form scrollea y el
   pie con el precio queda pegado abajo. En celular el pie va en una sola
   fila, como en el 3D. */
@media (min-width: 761px) {
  .perso-caja { grid-template-rows: minmax(0, 1fr); }
  .perso-form, .perso-vista { min-height: 0; }
}
@media (max-width: 760px) {
  .perso-form .perso-pie { flex-wrap: nowrap; gap: 12px; padding: 10px 0 14px; align-items: center; }
  .perso-form .perso-pie .btn { flex: 0 0 auto; min-width: 0; white-space: nowrap; padding-left: 20px; padding-right: 20px; }
  .perso-form .perso-precio { flex: 1 1 0; min-width: 0; }
  .perso-form .perso-precio > span { font-size: 22px; }
}

/* En celular cada categoría de la portada y del catálogo es una fila que se
   desliza de costado: la página baja de 40.000 px de alto a unos 12.000 y
   las cards conservan su tamaño. Las páginas de categoría siguen en lista. */
@media (max-width: 599px) {
  .categoria .grilla {
    display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory;
    padding: 4px var(--gutter) 12px; margin: 0 calc(-1 * var(--gutter));
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .categoria .grilla::-webkit-scrollbar { display: none; }
  .categoria .grilla > .prod { flex: 0 0 78%; scroll-snap-align: start; }
}

/* =====================================================================
   TÍTULOS DE CATEGORÍA: estilo sticker (Titulos/titulo-sticker, elegido
   por Santi el 2026-09-26). Va en el h1 de cada página de categoría y en
   el h2 de cada sección de categoría de la portada y del catálogo. Los
   colores salen de la paleta del sitio. Abajo del bloque original van los
   ajustes para convivir con el resto del CSS.
   ===================================================================== */
/* =====================================================================
   TÍTULO STICKER, variante B
   ---------------------------------------------------------------------
   Uso: <h1 class="titulo-sticker">Vasos térmicos</h1>
   Necesita:
     1. La tipografía Nunito 900 (Google Fonts, ver titulo-sticker-ejemplo.html)
     2. Este archivo CSS
     3. titulo-sticker.js al final del <body>
   Opcional en el título:
     data-etiqueta="Colección"   cambia el texto del cartel amarillo
     data-alinear="centro"       centra el título en su contenedor
   ===================================================================== */

.ts {
  /* Colores de marca */
  --ts-azul: var(--celeste, #0089D0);
  --ts-amarillo: var(--amarillo, #FFC400);
  --ts-rojo: var(--rojo, #E00000);
  --ts-negro: var(--tinta, #111111);
  --ts-blanco: #FFFFFF;

  display: block;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  /* Espacio para el cartel (arriba) y los dibujitos (costados y abajo) */
  padding: max(1.1em, 44px) 0.9em 0.45em;
  font-family: 'Nunito', 'Arial Rounded MT Bold', system-ui, sans-serif;
  /* Tamaño del título: mínimo, escala con la pantalla, máximo.
     Para cambiarlo, definí --ts-tamano en un contenedor, por ejemplo:
     .mi-banner { --ts-tamano: 64px; } */
  font-size: var(--ts-tamano, clamp(2.25rem, 1.25rem + 4.5vw, 4.5rem));
  font-weight: 900;
  line-height: 1;
  text-align: left;
}

.ts--centro {
  text-align: center;
}

/* Mientras carga la página (o si el JavaScript no corre) el título se ve
   igual de grande y en la misma posición, solo que sin el sticker */
.titulo-sticker:not(.ts__titulo) {
  box-sizing: border-box;
  margin: 0;
  padding: max(1.1em, 44px) 0.9em 0.45em;
  font-family: 'Nunito', 'Arial Rounded MT Bold', system-ui, sans-serif;
  font-size: var(--ts-tamano, clamp(2.25rem, 1.25rem + 4.5vw, 4.5rem));
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #111111;
}

.titulo-sticker[data-alinear="centro"]:not(.ts__titulo) {
  text-align: center;
}

.ts__pieza {
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-align: left;
}

/* El título real (texto para Google y lectores de pantalla) */
.ts .ts__titulo.ts__titulo {
  position: relative;
  z-index: 1;
  display: block;
  width: max-content;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: -0.01em;
  word-spacing: normal;
  text-transform: none;
  text-shadow: none;
  white-space: nowrap;
  color: var(--ts-negro);
}

/* ---------- Sticker: capas azul, blanca y negra ---------- */
.ts__sticker {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  letter-spacing: -0.01em;
  word-spacing: normal;
  filter: drop-shadow(0 0.05em 0.06em rgba(17, 17, 17, 0.2));
}

.ts__sticker text {
  dominant-baseline: central;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.ts__sticker rect {
  stroke-linejoin: round;
}

.ts__azul {
  fill: var(--ts-azul);
  stroke: var(--ts-azul);
  stroke-width: 0.38em;
}

.ts__blanco {
  fill: var(--ts-blanco);
  stroke: var(--ts-blanco);
  stroke-width: 0.3em;
}

.ts__blanco-int {
  fill: var(--ts-blanco);
  stroke: var(--ts-blanco);
  stroke-width: 0.2em;
}

.ts__tinta {
  fill: var(--ts-negro);
}

/* ---------- Cartel amarillo "CATEGORÍA" ---------- */
.ts__etiqueta {
  position: absolute;
  z-index: 3;
  left: -0.31em;
  bottom: calc(100% + 0.296em);
  transform: rotate(-6deg);
  transform-origin: 0 100%;
  pointer-events: none;
}

.ts__etiqueta-texto {
  display: block;
  padding: 0.52em 0.86em 0.48em 1.1em;
  /* Proporcional al título, pero nunca menos de 9px para que se lea en el celular */
  font-size: max(0.19em, 10px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #1f1600;   /* oscuro sobre el amarillo: blanco quedaba en 1,6:1 (auditoría 04/10) */
  background: var(--ts-amarillo);
  border: 0.3em solid var(--ts-blanco);
  border-radius: 1.2em 1.05em 1.25em 0.95em / 1.1em 1.25em 1em 1.2em;
  box-shadow: 0 0 0 0.2em var(--ts-azul), 0 0.35em 0.55em rgba(17, 17, 17, 0.16);
  text-shadow: 0 0.08em 0 rgba(168, 108, 0, 0.42);
}

/* ---------- Dibujitos ---------- */
.ts__deco {
  position: absolute;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

/* Rayitas azules a la izquierda */
.ts__deco--rayas {
  right: calc(100% + 0.28em);
  top: 0.1em;
  width: 0.52em;
  height: 0.6em;
  fill: none;
  stroke: var(--ts-azul);
  stroke-width: 7px;
  stroke-linecap: round;
}

/* Chispa roja arriba a la derecha */
.ts__deco--chispa {
  left: calc(var(--ts-fin1, 100%) + 0.12em);
  top: -0.44em;
  width: 0.42em;
  height: 0.42em;
  fill: none;
  stroke: var(--ts-rojo);
  stroke-width: 4.6px;
  stroke-linecap: round;
}

/* Estrella amarilla con borde sticker a la derecha */
.ts__deco--estrella {
  left: calc(var(--ts-fin1, 100%) + 0.34em);
  top: 0.34em;
  width: 0.34em;
  height: 0.425em;
  transform: rotate(8deg);
}

.ts__deco--estrella .ts__e1 {
  fill: var(--ts-azul);
  stroke: var(--ts-azul);
  stroke-width: 28px;
  stroke-linejoin: round;
}

.ts__deco--estrella .ts__e2 {
  fill: var(--ts-blanco);
  stroke: var(--ts-blanco);
  stroke-width: 20px;
  stroke-linejoin: round;
}

.ts__deco--estrella .ts__e3 {
  fill: var(--ts-amarillo);
}

/* Destello azul chiquito abajo a la izquierda */
.ts__deco--brillo {
  left: -0.44em;
  top: 1em;
  width: 0.15em;
  height: 0.188em;
  fill: var(--ts-azul);
}

/* ---------- Ajustes para Super3D ---------- */
/* Las reglas generales de h1/h2 del sitio (.seccion h2, .cabecera-cat h1)
   les ponen un ancho máximo: el sticker mide su propio ancho y no lo necesita. */
.ts .ts__titulo.ts__titulo, .titulo-sticker:not(.ts__titulo) { max-width: none; }
/* Dos escalones: el h1 de cada página al tamaño del archivo original, y los
   h2 de las secciones uno más chico (en la portada hay más de quince seguidos
   y el título principal tiene que seguir mandando). */
.ts--h2, h2.titulo-sticker:not(.ts__titulo) { --ts-tamano: clamp(1.6rem, 1rem + 3vw, 3.4rem); }
/* Con dos renglones, un poco de aire entre ellos: las colas de la q, la p o
   la g no se meten en el sticker del renglón de abajo. */
.ts--varios { line-height: 1.14; }
/* El título sticker no se parte solo en renglones: si su contenedor es un
   hijo flexible, tiene que poder achicarse por debajo del largo del título
   (si no, en un celular angosto empuja la página de costado). */
.seccion-cabeza > div:not(.cinta-controles) { min-width: 0; }
/* En celular, además, el título nunca le impone su ancho al contenedor:
   ocupa lo que haya y se achica o se parte él. */
@media (max-width: 599px) { .ts { contain: inline-size; } }
/* Centrado (el título de la portada): cada renglón centrado bajo el otro. */
.ts--centro .ts__titulo.ts__titulo { text-align: center; }
/* El título de la portada: sólo el aire que lo separa del logo. */
.portada .ts { margin-top: clamp(8px, 1.5vw, 16px); }

/* Títulos sticker adentro de los paneles de personalizar y del carrito: un
   escalón más chico, la columna es angosta. */
.perso-form .ts--h2, .p3d-form .ts--h2, .resumen .ts--h2,
.perso-form h2.titulo-sticker:not(.ts__titulo), .p3d-form h2.titulo-sticker:not(.ts__titulo), .resumen h2.titulo-sticker:not(.ts__titulo) {
  --ts-tamano: clamp(1.5rem, 1rem + 1.4vw, 2.3rem);
}
.perso-form .ts, .p3d-form .ts { margin-top: -6px; }

/* En los paneles, el título no se mete debajo de la X de cerrar. */
@media (min-width: 761px) { .perso-form .ts, .p3d-form .ts { margin-right: 44px; } }
/* Va al final para ganarle al max-height de 300px del bloque de la ficha en ≤860px. */
@media (max-width: 640px) {
  .ficha-visor .visor-foto { max-height: 220px; }
  /* El dibujo del producto mide 260px fijos: en celular, más chico, así el nombre
     del producto queda arriba de la bandeja del carrito aun en pantallas bajas. */
  .ficha-visor { padding: 20px; }
  .ficha-visor > svg { width: 190px; height: 190px; }
}

/* ---------- "Creá el tuyo" ----------
   El botón va a la derecha del encabezado de la categoría, oscuro como el de
   "Diseñalo en 3D", con tres piezas en abanico que se abren al pasar el
   mouse. El menú es una caja grande centrada (una hoja desde abajo en el
   celular) con una card pastel por pieza, agrupadas por categoría. */
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.cabecera-fila > .cabeza-con-pieza { flex: 1 1 auto; min-width: 0; }
.crear-tuyo {
  flex: none; display: flex; align-items: center; gap: 16px; margin-left: auto;
  padding: 16px 18px 16px 14px; border: 0; border-radius: 24px; cursor: pointer; font: inherit; text-align: left;
  background: var(--tinta); color: #fff;
  box-shadow: 0 18px 34px -16px rgba(20, 18, 26, 0.55);
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.crear-tuyo-figs { position: relative; width: 104px; height: 48px; flex: none; }
.crear-tuyo-fig {
  position: absolute; top: 0; left: calc(var(--i) * 28px); width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden; background: #fff; color: var(--c-fuerte, var(--celeste));
  box-shadow: 0 0 0 3px var(--tinta); transform: rotate(calc((var(--i) - 1) * 8deg));
  transition: transform 300ms var(--ease-out);
}
.crear-tuyo-fig img { width: 40px; height: 40px; object-fit: contain; }
.crear-tuyo-fig svg { width: 32px; height: 32px; }
.crear-tuyo-texto { display: flex; flex-direction: column; gap: 2px; }
.crear-tuyo-texto small { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amarillo); }
.crear-tuyo-texto b {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-variation-settings: 'opsz' 96;
  font-size: 24px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; white-space: nowrap;
}
.crear-tuyo-ir { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--amarillo); color: var(--tinta); flex: none; transition: transform 260ms var(--ease-out); }
.crear-tuyo-ir svg { width: 18px; height: 18px; stroke-width: 2.4; }
.crear-tuyo:focus-visible { outline: 3px solid var(--tinta); outline-offset: 4px; }
.crear-tuyo:active { transform: translateY(0) scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .crear-tuyo:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -16px rgba(20, 18, 26, 0.6); }
  .crear-tuyo:hover .crear-tuyo-fig { transform: translateX(calc((var(--i) - 1) * 5px)) translateY(-3px) rotate(calc((var(--i) - 1) * 14deg)); }
  .crear-tuyo:hover .crear-tuyo-ir { transform: translateX(3px); }
}
@media (max-width: 860px) {
  .cabecera-fila { flex-direction: column; align-items: stretch; gap: 20px; }
  .crear-tuyo { margin-left: 0; justify-content: flex-start; }
  .crear-tuyo-ir { margin-left: auto; }
}

.crear { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px 16px; }
.crear-fondo { position: absolute; inset: 0; background: rgba(20, 18, 26, 0.58); }  /* sin blur: con el sitio animado detrás, en celulares modestos traba */
.crear-caja {
  position: relative; width: min(1060px, 100%); max-height: min(88vh, 900px); overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(22px, 3vw, 36px); border-radius: 28px; background: var(--papel);
  box-shadow: 0 40px 80px -30px rgba(20, 18, 26, 0.55);
}
.crear-caja:focus { outline: none; }
.crear-cabeza { margin: 0 52px 22px 0; }
.crear-cabeza .sub { margin: 10px 0 0; max-width: 62ch; }
.crear-grupo + .crear-grupo { margin-top: 26px; }
.crear-grupo h3 {
  margin: 0 0 12px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-suave);
}
.crear-grupo-propio h3 { color: var(--tinta); }
.crear-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.crear-op {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0;
  padding: 12px 12px 14px; border: 0; border-radius: 20px; cursor: pointer; font: inherit; text-align: left; color: var(--tinta);
  background: radial-gradient(60% 55% at 50% 34%, var(--brillo) 0%, transparent 100%), var(--fondo);
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.crear-op-fig { align-self: stretch; height: 118px; display: grid; place-items: center; color: var(--c-pieza); }
.crear-op-fig img { width: 108px; height: 108px; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(20, 18, 26, 0.18)); transition: transform 300ms var(--ease-out); }
.crear-op-fig svg { width: 84px; height: 84px; filter: drop-shadow(0 8px 10px rgba(20, 18, 26, 0.15)); transition: transform 300ms var(--ease-out); }
.crear-op-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 30px; }
.crear-op-texto b { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-variation-settings: 'opsz' 96; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.crear-op-texto small { font-size: 12.5px; font-weight: 600; color: #5f6470; }
.crear-op-etqs { display: flex; flex-wrap: wrap; gap: 5px; }
.crear-etq { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: rgba(255, 255, 255, 0.75); }
.crear-etq-3d { background: var(--tinta); color: #fff; }
.crear-etq-3d svg { width: 12px; height: 12px; }
.crear-op-ir {
  position: absolute; right: 12px; bottom: 14px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--tinta); color: #fff; transition: transform 260ms var(--ease-out);
}
.crear-op-ir svg { width: 13px; height: 13px; stroke-width: 2.4; }
.crear-op:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.crear-op:active { transform: scale(0.98); }
.crear-op-cargando { cursor: progress; opacity: 0.8; }
@media (hover: hover) and (pointer: fine) {
  .crear-op:hover { transform: translateY(-3px); box-shadow: 0 16px 28px -18px rgba(20, 18, 26, 0.5); }
  .crear-op:hover .crear-op-fig img, .crear-op:hover .crear-op-fig svg { transform: translateY(-3px) scale(1.05); }
  .crear-op:hover .crear-op-ir { transform: translateX(3px); }
}
/* En el celular, una hoja que sube desde abajo, con dos piezas por fila. */
@media (max-width: 640px) {
  .crear { place-items: end stretch; padding: 0; }
  .crear-caja { width: 100%; max-height: 90vh; border-radius: 24px 24px 0 0; padding: 22px 16px 28px; }
  .crear-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .crear-op-fig { height: 90px; }
  .crear-op-fig img { width: 84px; height: 84px; }
  .crear-op-fig svg { width: 64px; height: 64px; }
  .crear-op-texto { padding-right: 0; }
  .crear-op-texto b { font-size: 15px; }
  .crear-op-ir { display: none; }
}

/* ---------- Arreglos de la revisión del 2026-09-27 ---------- */

/* Nada se sale de costado: en celular, el vaso girado de la card de Vasos
   agrandaba la página 14 px (y corría la bandeja). clip no crea scroll ni
   rompe los sticky. */
main { overflow-x: clip; }

/* El input escondido de "Subir imagen" quedaba posicionado contra la caja
   del panel y, al enfocarlo, la desplazaba para arriba (en el celular el
   panel quedaba en blanco). */
.perso-archivo { position: relative; }
.p3d-caja { overflow: clip; }

/* Lo que se enfoca con Tab no queda debajo de la barra fija ni de la bandeja,
   y en los paneles, el campo enfocado no queda debajo del pie fijo. */
.prod :is(a, button), .cat-tile, .fila-pedido :is(a, button), .ficha :is(a, button, input) { scroll-margin: 88px 0 110px; }
.p3d-form, .perso-form { scroll-padding-bottom: 110px; }
.p3d-form .campo, .perso-form .campo { scroll-margin-bottom: 110px; }
/* El anillo de foco no asoma a los costados del pie fijo. */
.perso-pie { box-shadow: -8px 0 0 var(--papel), 8px 0 0 var(--papel); }

/* La vista previa del panel común no corta el texto del cliente con "…". */
.perso-texto-vista { white-space: normal; text-wrap: balance; text-align: center; overflow: visible; max-width: 80%; }

/* El detalle de cada producto en el menú del carrito, en hasta dos renglones. */
.bm-datos small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Textos chicos: nada por debajo de 12 px fuera del sticker. */
.marca-texto > span { font-size: 11px; letter-spacing: 0.09em; }
.crear-etq { font-size: 12px; }
@media (max-width: 760px) { #p3d-precio-detalle { font-size: 12px; } }

/* Celulares angostos (320-374): SUPER3D no se parte y los links entran. */
.marca { flex: none; }
.nav .letras { white-space: nowrap; }
@media (max-width: 374px) {
  .nav .marca-texto b { font-size: 18px; }
  .nav .marca { gap: 8px; }
  .nav .marca img { width: 30px; height: 30px; }
  .nav-in { gap: 10px; }
  .nav-links { gap: 12px; font-size: 13px; }
}

/* Pie de los paneles en 320-359: el precio en un renglón y el botón abajo. */
@media (max-width: 359px) {
  .perso-form .perso-pie, .p3d-form .perso-pie { flex-wrap: wrap; }
  .perso-form .perso-pie .btn, .p3d-form .perso-pie .btn { flex: 1 1 100%; }
  .perso-precio > span { white-space: nowrap; }
}

/* Celular apaisado: el diseñador 3D en pantalla completa y el pie en una fila. */
@media (max-height: 500px) {
  .p3d { padding: 0; }
  .p3d-caja { height: 100dvh; border-radius: 0; }
  .p3d-form .perso-pie { flex-wrap: nowrap; padding: 8px 0 10px; }
  .p3d-form .perso-pie .btn { flex: 0 0 auto; }
  .p3d-ayuda { display: none; }
}

/* Blancos táctiles más grandes en el celular, sin cambiar cómo se ven. */
@media (max-width: 640px) {
  .pie-sitio a { display: inline-block; padding-block: 6px; }
  .miga a { padding-block: 5px; }
  .prod .punto { position: relative; }
  .prod .punto::after { content: ''; position: absolute; inset: -5px; }
}

/* Estilo de los productos que vienen en combinaciones (cuchillos): en la ficha. */
.ficha .campo .estilos { margin-top: 10px; }

/* ---------- Colores por categoría (2026-09-27) ----------
   Cada categoría tiene su color (CATEGORIAS en el JS) y lo usan su card,
   su sección de la portada, su página y las cards de sus productos. */

/* La foto del producto sin fondo: sólo el borde, así la pieza resalta. */
.prod .fig { background: transparent; border: 2px solid var(--c-borde, rgba(20, 18, 26, 0.12)); }
/* Bordes más gruesos para que la card se note (Santi, 2026-09-27). */
.prod { border-width: 3px; }
/* El contorno del título sticker, del color de la categoría. */
.categoria .ts, .cabecera-cat .ts, .ficha .ts { --ts-azul: var(--c-hondo, var(--celeste)); }
/* El color que eligió el cliente pinta la pieza de la ficha. */
.ficha-visor svg { color: var(--c-pieza, var(--c)); }
/* La página de la categoría arranca con una franja de su color. */
.cabecera-cat::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--c); }

/* Bordes en degradé: Cuchillos (morado y rojo) y Vasos térmicos (cambia de color). */
.tema-duo { --borde-grad: linear-gradient(135deg, color-mix(in srgb, var(--c) 60%, transparent), color-mix(in srgb, var(--duo) 60%, transparent)); }
.prod.tema-duo, .prod.tema-termo {
  border-color: transparent;
  background: linear-gradient(var(--papel-alto), var(--papel-alto)) padding-box, var(--borde-grad) border-box;
}
.prod.tema-duo .fig, .prod.tema-termo .fig {
  border-color: transparent;
  background: linear-gradient(var(--papel-alto), var(--papel-alto)) padding-box, var(--borde-grad) border-box;
}
.categoria.tema-duo::before, .cabecera-cat.tema-duo::before { background: linear-gradient(90deg, var(--c), var(--duo)); }
.cat-tile.tema-duo {
  background:
    radial-gradient(46% 58% at 75% 52%, var(--brillo) 0%, transparent 100%),
    linear-gradient(135deg, var(--fondo) 30%, var(--fondo2) 100%);
}
.cat-tile.tema-duo .cat-tile-num {
  background: linear-gradient(120deg, var(--num), color-mix(in srgb, var(--duo) 45%, #fff));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Vasos térmicos: como un vaso que cambia de color con el frío y el calor.
   La base es fría (celeste y violeta) y encima aparece y se va, despacio, la
   versión cálida (rosa y naranja). Sólo se anima la OPACIDAD de esa capa, que
   el navegador resuelve sin repintar nada; antes se corría el degradé y el
   celular repintaba cada card en cada cuadro (casi toda la CPU con la página
   quieta). Y sólo se anima lo que está en pantalla (.en-vista, desde el JS). */
.tema-termo {
  --termo-frio: linear-gradient(120deg, #5ab8f0, #a987f2);
  --termo-calor: linear-gradient(120deg, #f08cbd, #f9a66e);
  --borde-grad: var(--termo-frio);
}
.prod.tema-termo::after, .prod.tema-termo .fig::after {
  content: ''; position: absolute; border-radius: inherit; pointer-events: none;
  background: var(--termo-calor) border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0;
}
.prod.tema-termo::after { inset: -3px; padding: 3px; }
.prod.tema-termo .fig::after { inset: -2px; padding: 2px; }
/* El recuadro de la foto recorta en su borde (no adentro), así se ve su anillo. */
.prod.tema-termo .fig { overflow: clip; overflow-clip-margin: 2px; }
.cat-tile.tema-termo {
  isolation: isolate;
  background:
    radial-gradient(46% 58% at 75% 52%, rgba(255, 255, 255, 0.6) 0%, transparent 100%),
    linear-gradient(120deg, #e1f1fd, #ece4fd);
}
.cat-tile.tema-termo::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(46% 58% at 75% 52%, rgba(255, 255, 255, 0.6) 0%, transparent 100%),
    linear-gradient(120deg, #fde6f1, #feebdc);
  opacity: 0;
}
.prod.tema-termo.en-vista::after, .prod.tema-termo.en-vista .fig::after, .cat-tile.tema-termo.en-vista::after {
  animation: termo-calor 12s ease-in-out infinite; will-change: opacity;
}
@keyframes termo-calor { 0%, 8% { opacity: 0; } 42%, 58% { opacity: 1; } 92%, 100% { opacity: 0; } }
.cat-tile.tema-termo .cat-tile-num {
  background: linear-gradient(120deg, #8ecbf2, #c0aaf6, #f3aacd, #f8bd8f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cat-tile.tema-termo .cat-tile-ir { background: linear-gradient(120deg, #0096ea, #7c3aed, #ec4899, #f97316); }
.categoria.tema-termo::before, .cabecera-cat.tema-termo::before {
  background: linear-gradient(90deg, #0096ea, #7c3aed, #ec4899, #f97316);
}
@media (prefers-reduced-motion: reduce) {
  .tema-termo::after, .tema-termo .fig::after { animation: none !important; opacity: 0 !important; }
}

/* ---------- Badge de la card (imagenes/badges/) ----------
   Montada sobre el borde de arriba, a la izquierda (Santi, 2026-09-28): la
   mitad de arriba asoma de la card y la de abajo la pisa. */
.badge-img {
  position: absolute; z-index: 4; left: 2px; top: -34px;
  height: 66px; width: auto; max-width: none;
  pointer-events: none; user-select: none;
}
.vuela .badge-img { display: none; }
.badge-img > img { display: block; height: 100%; width: auto; }
/* El reflejo que cruza la badge cada tanto (Santi eligió "Brillo", 2026-09-28):
   recortado con la forma de la badge (mask) y sólo en las cards que están en
   pantalla (.en-vista, lo pone vigilarTermo). Cada tanto, no todas juntas. */
.badge-img::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  -webkit-mask: var(--badge) center / 100% 100% no-repeat; mask: var(--badge) center / 100% 100% no-repeat;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .8) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 140% 0;
}
.prod.en-vista .badge-img::after { opacity: 1; animation: badge-brillo 6s linear 3; }   /* tres pasadas cada vez que la card aparece */
.prod:nth-child(3n + 2) .badge-img::after { animation-delay: 2s; }
.prod:nth-child(3n) .badge-img::after { animation-delay: 4s; }
@keyframes badge-brillo { 0% { background-position: 140% 0; } 14%, 100% { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) { .badge-img::after { display: none; } }
/* Con badge, el chip de la foto ("Con tu texto", "2 estilos") baja un poco
   para no quedar debajo de ella. */
.prod.con-badge .chip { top: 26px; }
/* Lugar para la badge: entre filas, arriba de la grilla, en la cinta y en las
   filas que se deslizan en el celular (si no, las cortaría). */
.grilla { row-gap: 44px; padding-top: 16px; }
.cinta:has(.badge-img) { padding-top: 36px; }
@media (max-width: 599px) {
  .categoria .grilla { padding-top: 38px; margin-top: -14px; scroll-padding-inline: var(--gutter); }
}
/* El precio de antes, tachado. */
.pre-antes { font-size: 14px; font-weight: 600; color: var(--tinta-suave); letter-spacing: 0; margin-right: 4px; }
.ficha .precio .pre-antes { font-size: 20px; }

/* Botones de emoji del llavero: más grandes para el dedo. */
@media (pointer: coarse) { .p3d-emoji { width: 44px; height: 44px; font-size: 21px; } }
/* El aviso que queda al lado del botón "Compartir". */
.compartir-estado { display: block; margin-top: 8px; font-size: 14px; color: var(--tinta-suave); }
.compartir-estado:empty { display: none; }

/* La cinta "Los más pedidos" no corre mientras no se ve. */
/* La barra de la cinta (Santi, 2026-09-28): la manija es otra animación de la
   misma duración que la cinta; las dos se frenan juntas. */
.cinta-barra-mover { animation: correr-mango 46s linear infinite; }
@keyframes correr-mango { to { transform: translateX(100%); } }
.cinta-bloque:hover :is(.cinta-pista, .cinta-barra-mover),
.cinta-bloque:focus-within :is(.cinta-pista, .cinta-barra-mover),
.cinta-bloque.arrastrando :is(.cinta-pista, .cinta-barra-mover),
.cinta-bloque.fuera :is(.cinta-pista, .cinta-barra-mover) { animation-play-state: paused; }
.cinta-barra { --mango: 64px; position: relative; height: 32px; margin-top: 2px; cursor: pointer; touch-action: pan-y; border-radius: 999px; }
.cinta-barra::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px;
  border-radius: 999px; background: rgba(20, 18, 26, 0.1);
}
.cinta-barra-carril { position: absolute; left: 0; right: var(--mango); top: 0; bottom: 0; }
.cinta-barra-mover { position: absolute; inset: 0; }
.cinta-barra-mango {
  position: absolute; left: 0; top: 50%; width: var(--mango); height: 10px; margin-top: -5px;
  border-radius: 999px; background: var(--tinta); transition: transform 160ms var(--ease-out);
}
.cinta-barra:hover .cinta-barra-mango, .cinta-bloque.arrastrando .cinta-barra-mango { transform: scaleY(1.4); }
.cinta-bloque.arrastrando .cinta-barra { cursor: grabbing; }
.cinta-barra:focus-visible { outline: 3px solid var(--tinta); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  /* quieta, pero la barra la sigue moviendo */
  .cinta-pista, .cinta-barra-mover { animation-duration: 46s !important; animation-iteration-count: infinite !important; animation-play-state: paused !important; }
}

/* Celulares angostos (hasta 374 px): "Ver producto" en un renglón en las filas
   que se deslizan, el nombre de las cards de categoría sin chocar con el
   dibujo, y la flecha de "Creá el tuyo" adentro de su pastilla. */
@media (max-width: 374px) {
  .categoria .grilla .al-carrito { padding-inline: 12px; gap: 4px; font-size: 14px; white-space: nowrap; }
  .categoria .grilla .al-carrito .flecha-ir { display: none; }
  .crear-tuyo { gap: 10px; padding-inline: 12px; }
  .crear-tuyo-figs { width: 76px; }
  .crear-tuyo-fig { left: calc(var(--i) * 14px); }
  .crear-tuyo-texto b { font-size: 21px; }
}
@media (max-width: 420px) {
  .cat-tile-texto b { font-size: 19px; }
}

/* En las páginas que traen el contenido escrito en el HTML (portada, catálogo,
   carrito, 404), el lugar de la barra queda reservado hasta que el JS la dibuja:
   si no, en un celular lento todo saltaba 65 px para abajo al aparecer. */
body { display: flow-root; }  /* el margen de main queda adentro del body (si no, el body entero "saltaba") */
body > main, body > main.wrap { margin-top: 73px; }
@media (max-width: 640px) { body > main, body > main.wrap { margin-top: 65px; } }
body > .nav ~ main, body > .nav ~ main.wrap { margin-top: 0; }

/* ---------- Revisión en celulares (2026-09-28) ----------
   Blancos táctiles de 40 px o más, alturas en dvh para el Safari del iPhone,
   margen para la barra de inicio (safe-area) y arreglos de pantallas bajas.
   Lo invisible (el área de toque que crece por fuera del botón) va en todos
   los tamaños; lo que se nota a la vista, sólo en celular o pantalla táctil. */

/* iPhone: 100vh es el alto con las barras de Safari escondidas. Con las barras
   a la vista, las cajas medían más que la pantalla y se cortaban arriba (la X
   de cerrar incluida). dvh es el alto que se ve de verdad; el vh de antes queda
   de respaldo para navegadores viejos. */
.bandeja-menu { max-height: calc(100dvh - 140px); }
.perso-caja { max-height: calc(100dvh - 48px); }
.p3d-caja { height: min(780px, calc(100dvh - 48px)); }
.crear-caja { max-height: min(88dvh, 900px); }
@media (max-width: 760px) {
  .perso-caja { max-height: 94dvh; }
  .p3d-caja { height: 100dvh; }
}
@media (max-width: 640px) { .crear-caja { max-height: 90dvh; } }
@media (max-height: 500px) { .p3d-caja { height: 100dvh; } }

/* El menú Catálogo nunca pasa del borde de abajo en pantallas bajas (celular
   apaisado): cuelga de la barra fija, así que lo que quedara debajo del borde
   (con "Ver el catálogo completo") no se alcanzaría. Hoy, con seis
   categorías, entra; con doce ya no. Se desliza por dentro. */
@media (max-height: 600px) {
  .menu-cat { max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain; }
}

/* Celular apaisado: el menú del carrito mide unos 250 px y "Ir a pagar"
   quedaba escondido abajo, había que deslizar el menú para encontrarlo. Los
   botones quedan pegados abajo, a la vista; lo que se desliza es la lista. */
@media (max-height: 500px) {
  .bm-acciones { position: sticky; bottom: 0; z-index: 1; margin: 0 -16px -16px; padding: 10px 16px 16px; background: var(--papel); }
}

/* La barra de inicio del iPhone: la bandeja y los pies de las hojas que suben
   desde abajo no quedan pegados a ella. Hoy suma 0 (las páginas no usan
   viewport-fit=cover), pero queda listo si algún día se usa. */
.bandeja { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.pie-sitio { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 760px) {
  .perso-form .perso-pie, .p3d-form .perso-pie { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 640px) {
  .bandeja { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .crear-caja { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-height: 500px) {
  .p3d-form .perso-pie { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* Áreas de toque más grandes, sin que cambie nada a la vista: el corazón y las
   flechas de la card, el logo de la barra, el nombre en el carrito y el link
   del final de la página de categoría (en línea: el relleno no mueve el renglón). */
.prod .fav::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; }
.prod .fig-flecha::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
.nav .marca, .pie-sitio .marca { padding-block: 5px; margin-block: -5px; }
.fila-nom { padding-block: 7px; margin-block: -7px; }
.linea-medida a { padding-block: 9px; }

/* Los links de la barra en el celular: 42 px de alto (eran 37-38). */
@media (max-width: 720px) {
  .nav-links a, .menu-cat-boton { padding-block: 9px; }
}
/* Miga, puntos de color y pie en el celular y en pantallas táctiles. La miga
   crece hacia afuera (margen negativo): el renglón mide lo mismo. Los puntos
   de color quedan a 18 px uno de otro, así cada uno tiene 40 px propios. */
@media (max-width: 640px), (any-pointer: coarse) {
  .miga a { padding: 10px 5px; margin: -5px -5px; }
  .prod .punto { position: relative; }
  .prod .punto + .punto { margin-left: 10px; }
  .prod .punto::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; }
}
@media (max-width: 640px) {
  .pie-sitio a { padding-block: 8px; margin-block: -2px; }
  /* El inline-block de arriba apilaba el cubo sobre el nombre en el logo del
     pie; el logo vuelve a ser como en la compu. */
  .pie-sitio .marca { display: flex; }
}
@media (min-width: 641px) and (any-pointer: coarse) {
  .pie-sitio a:not(.marca) { display: inline-block; padding-block: 8px; margin-block: -2px; }
}

/* Carrito en 320-374 px: los botones − y + se aplastaban a 35 px de ancho
   (quedaban ovalados). La fila cede aire en otros lados. */
@media (max-width: 374px) {
  .fila-pedido { column-gap: 12px; }
  .fila-precio { min-width: 0; }
  .cant { gap: 2px; }
  .cant-n { min-width: 22px; }
  .cant-btn { flex: none; }
}
/* La imagen del diseño 3D en la fila del carrito medía 72 px en un hueco de
   60: se cortaba. */
@media (max-width: 720px) {
  .fila-fig .fila-3d { width: 100%; height: 100%; }
}

/* Ficha en celulares bajos (568 px de alto): el nombre del producto quedaba
   debajo de la bandeja. El visor se achica un poco más. */
@media (max-width: 640px) and (max-height: 600px) {
  .ficha { padding-top: 16px; }
  .ficha-visor { min-height: 0; }
  .ficha-visor .visor-foto { max-height: 176px; }
  .ficha-visor > svg { width: 150px; height: 150px; }
}
/* Ficha con el celular apaisado: el visor entra entero en la primera pantalla
   y la bandeja ya no le tapa la flecha. */
@media (min-width: 641px) and (max-width: 860px) and (max-height: 500px) {
  .ficha { padding-top: 24px; }
  .ficha-visor { min-height: 0; padding-block: 24px; }
  .ficha-visor .visor-foto { max-height: 220px; }
}

/* (Las listas de una columna del celular ya no necesitan arreglo propio: desde el 04/10 todas las
   cards miden lo mismo; ver "Cards todas iguales y más compactas" al final.) */


/* El pie fijo de los paneles (precio y "Agregar al carrito") va por encima de
   lo que pasa por debajo al deslizar: el título sticker tiene capas con
   z-index 1 a 3 y, en la hoja del personalizador de un celular bajo, se
   dibujaba encima del precio. */
.perso-pie { z-index: 4; }

/* El precio del pie de los paneles no se parte: con el celular apaisado
   quedaba "$" en un renglón y "7.600" en el otro. */
.perso-precio > span { white-space: nowrap; }
/* El recargo que acompaña al nombre de un campo ("+$ 1.200") medía 11,7 px. */
.p3d-recargo { font-size: 12px; }

/* Diseñador 3D en pantalla táctil: los botones de color de cada parte, el
   ajuste fino y los colores de la paleta, de 40 px. Los deslizadores de
   tamaño medían 16 px de alto: ahora 40, con márgenes negativos para que la
   barra quede en el mismo lugar. */
@media (max-width: 760px), (any-pointer: coarse) {
  .p3d-color-btn { min-height: 40px; }
  .p3d-fino .p3d-mando { min-width: 40px; height: 40px; }
  .p3d-paleta-op { position: relative; }
  .p3d-paleta-op::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; }
  .p3d-form input[type=range] { height: 40px; margin: -6px 0 -12px; }
}

/* Personalizador común con el celular apaisado (usa el diseño de la compu, en
   una caja de 340 px de alto): el visor cuadrado era más alto que la caja y la
   nota de abajo quedaba cortada. El visor se achica para que entre todo. */
@media (min-width: 761px) and (max-height: 500px) {
  .perso-visor { width: min(100%, calc(100vh - 160px)); width: min(100%, calc(100dvh - 160px)); margin-inline: auto; }
}

/* ---------- La impresora de la barra ----------
   Estilo ícono de línea (referencia de Santi): marco cuadrado, rieles,
   diagonales en las esquinas y el carro con la boquilla. Imprime el logo
   de Super3D (la imagen /imagenes/favicon-192.png) revelándolo de abajo
   hacia arriba con clip-path (.imp-logo); a la par sube una línea caliente
   (.imp-capa2) que cambia de color (azul, rojo, amarillo) según la parte
   que se está imprimiendo. El pórtico sube con la boquilla siguiendo esa
   línea mientras el carro va y viene.
   Al terminar, el carro queda arriba como en el ícono, el logo salta, sale
   la chispa y vuelve a empezar. Ciclo de 9s. Desde 1020px (antes no hay
   lugar entre el logo y los links); quieta con reducir movimiento. */
.nav-in { position: relative; }
.nav-impresora { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
@media (min-width: 1020px) { .nav-impresora { display: block; } }
/* con el botón de WhatsApp los links ocupan más: la impresora aparece desde 1200 px para no pisarlos */
@media (min-width: 1020px) and (max-width: 1199px) { .nav:has(.nav-wa) .nav-impresora { display: none; } }
/* y con Instagram también, desde 1320 px */
@media (min-width: 1020px) and (max-width: 1319px) { .nav:has(.nav-ig) .nav-impresora { display: none; } }
/* Con el botón de la cuenta los links se corren: la impresora del medio sólo sale si le quedan al menos
   48 px de aire hasta los links (Santi 03/10: "que no esté pegado a la animación"). En pantallas grandes
   la barra usa más ancho que el contenido, así los links quedan bien a la derecha. */
@media (min-width: 1440px) { .nav-in { max-width: 1760px; } }
@media (min-width: 1020px) and (max-width: 1119px) { .nav:has(.nav-cuenta) .nav-impresora { display: none; } }
@media (min-width: 1020px) and (max-width: 1379px) { .nav:has(.nav-cuenta):has(.nav-wa) .nav-impresora { display: none; } }
@media (min-width: 1020px) and (max-width: 1479px) { .nav:has(.nav-cuenta):has(.nav-ig) .nav-impresora { display: none; } }
.imp { display: block; overflow: visible; }
.imp-l { fill: none; stroke: var(--tinta); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.imp-cama { fill: none; stroke: var(--tinta); stroke-width: 2.6; stroke-linecap: round; opacity: 0.35; }
.imp-bloque { fill: var(--papel); stroke: var(--tinta); stroke-width: 3.4; stroke-linejoin: round; }
.imp-logo { clip-path: inset(0 0 0 0); transform-box: fill-box; transform-origin: 50% 100%; }
.imp-capa2 { opacity: 0; fill: #ffe066; }
.imp-punta { fill: #ff7a00; opacity: 0; }
.imp-portico { transform: translateY(22px); }
.imp-carro { transform: translateX(50px); }
.imp-chispa path { fill: none; stroke: var(--amarillo); stroke-width: 2.8; stroke-linecap: round; }
.imp-chispa { opacity: 0; transform-box: fill-box; transform-origin: 0% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .imp-portico, .imp-carro, .imp-chispa, .imp-punta {
    animation-duration: 9s; animation-iteration-count: 3; animation-timing-function: linear;
  }
  .imp-portico { animation-name: imp-y; }
  .imp-carro { animation-name: imp-x; animation-timing-function: ease-in-out; }
  .imp-chispa { animation-name: imp-chispa; animation-timing-function: ease-out; }
  .imp-punta { animation-name: imp-punta; }
  .imp-logo { animation: imp-reveal 9s linear 3, imp-hop 9s ease-out 3; }
  .imp-capa2 { animation: imp-capa2y 9s linear 3, imp-capa2c 9s linear 3; }
  /* (auditoría 04/10) imprime tres veces y queda quieta con el logo impreso: corriendo sin parar
     recalculaba la barra en cada cuadro. */
}
@keyframes imp-y { 0% { transform: translateY(65.76px); } 60% { transform: translateY(40.76px); } 66%, 88% { transform: translateY(22px); } 95%, 100% { transform: translateY(65.76px); } }
@keyframes imp-x { 0% { transform: translateX(34px); } 7.5% { transform: translateX(66px); } 15% { transform: translateX(34px); } 22.5% { transform: translateX(66px); } 30% { transform: translateX(34px); } 37.5% { transform: translateX(66px); } 45% { transform: translateX(34px); } 52.5% { transform: translateX(66px); } 60% { transform: translateX(34px); } 66%, 88% { transform: translateX(50px); } 95%, 100% { transform: translateX(34px); } }
@keyframes imp-reveal { 0% { clip-path: inset(100% 0 0 0); } 55% { clip-path: inset(0 0 0 0); } 94% { clip-path: inset(0 0 0 0); } 95%, 100% { clip-path: inset(100% 0 0 0); } }
@keyframes imp-hop { 0%, 66% { transform: none; opacity: 1; } 68% { transform: scale(1.08, 0.94); } 70% { transform: scale(0.98, 1.04); } 72%, 88% { transform: none; opacity: 1; } 95%, 99.9% { transform: translateY(2px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes imp-capa2y { 0% { transform: translateY(0); } 55% { transform: translateY(-40px); } 56%, 100% { transform: translateY(-40px); } }
@keyframes imp-capa2c { 0%, 19.2% { fill: #4cc0ff; opacity: 1; } 19.25%, 40.8% { fill: #ff5a4d; opacity: 1; } 40.85%, 56% { fill: #ffe066; opacity: 1; } 57%, 99.9% { opacity: 0; } 100% { fill: #4cc0ff; opacity: 1; } }
@keyframes imp-chispa { 0%, 67.5% { opacity: 0; transform: scale(0.4); } 70.5%, 82% { opacity: 1; transform: scale(1); } 88%, 100% { opacity: 0; transform: scale(1.1); } }
@keyframes imp-punta { 0%, 60% { opacity: 1; } 66%, 95% { opacity: 0; } 95.5%, 100% { opacity: 1; } }

/* ---------- El carrito: campos opcionales, privacidad y último pedido ---------- */
.opcional { font-weight: 500; color: var(--tinta-suave); }
.campo-linea input[type="date"] { display: block; min-height: 52px; line-height: 1.3; }
.campo-linea input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.campo-linea :is(input, select, textarea)[aria-invalid="true"] { border-color: #a81008; }
.privacidad { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 12px 0 0; font-size: 14px; font-weight: 700; color: var(--tinta); }
.privacidad svg { flex: none; color: #15803d; }
.ultimo-pedido { margin: 14px 0 0; font-size: 15px; color: #3d3b48; }
.ultimo-pedido a { color: var(--tinta); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--amarillo); }
.ultimo-pedido a:hover { text-decoration-color: var(--tinta); }
.ultimo-pedido a:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 4px; }

/* Un link que en realidad es un botón (Volver al carrito, Cambiar, Dejar los que estaban). */
.enlace-boton {
  appearance: none; background: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; color: var(--tinta);
  padding: 10px 2px; margin: -10px 0; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
  text-decoration-color: var(--amarillo);
}
.enlace-boton:hover { text-decoration-color: var(--tinta); }
.enlace-boton:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; border-radius: 4px; }

/* ---------- La pantalla de gracias (después de "Mandar el pedido") ---------- */
.gracias { padding-top: clamp(24px, 5vw, 56px); outline: none; }
.gracias-aviso {
  margin-top: 18px; max-width: 64ch; padding: 14px 16px; border: 2px dashed var(--tinta); border-radius: 14px;
  font-size: 15px; font-weight: 500;
}
.gracias-aviso a { font-weight: 700; text-underline-offset: 3px; }
.gracias-seguir { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.gracias-seguir > p { margin: 0; flex: 1 1 280px; max-width: 48ch; color: #3d3b48; font-size: 15px; }
.gracias-seguir .gracias-nota { flex-basis: 100%; max-width: 64ch; padding: 10px 14px; border-radius: 12px; background: #fff7d9; color: #4a3800; font-weight: 600; }
.gracias .btn svg { width: 20px; height: 20px; flex: none; }
.gracias .btn:focus-visible { outline-color: var(--tinta); }
.gracias-h2 { font-size: clamp(22px, 3vw, 30px); margin: clamp(40px, 6vw, 64px) 0 22px; }
.gracias-pasos { list-style: none; margin: 0; padding: 0; }
.gracias-volver { margin: 36px 0 0; font-size: 15px; color: #3d3b48; }
@media (max-width: 599px) {
  .gracias-seguir .btn { width: 100%; }
}

/* ---------- La ficha: listo para entregar / se imprime a pedido ---------- */
.ficha-stock {
  display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 12px; padding: 6px 13px 6px 11px;
  border-radius: 999px; font-size: 14px; font-weight: 700; background: #fff7d9; color: #4a3800;
}
.ficha-stock.hay { background: #e7f6ec; color: #0f5a2b; }
.ficha-stock-punto { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--amarillo-hondo); }
.ficha-stock.hay .ficha-stock-punto { background: #15803d; box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.2); }

/* ---------- La página del cliente (/p/<clave>) ----------
   Una columna en el celular (lo que hay que hacer arriba, después los pasos y
   lo que pidió); en la compu, pasos y pedido a la izquierda y las acciones a
   la derecha. Cajas con borde de tinta y la sombra dura de color, como el
   resumen del carrito. */
.pagina-seg { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.pagina-seg ::selection { background: #ffe58a; color: var(--tinta); }
.pagina-seg :is(input, textarea) { caret-color: var(--rojo); }
.pagina-seg .nav-in, .pagina-seg main.seg, .seg-pie .wrap { max-width: 1180px; }
.pagina-seg main.seg { flex: 1 0 auto; width: 100%; padding-top: clamp(18px, 4vw, 44px); padding-bottom: clamp(56px, 8vw, 96px); outline: none; }
.seg-ir { font-size: 15px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--amarillo); padding: 10px 0; white-space: nowrap; }
.seg-ir:hover { text-decoration-color: var(--tinta); }
.seg-ir:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 4px; }

.seg-estado { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: clamp(48px, 10vw, 110px) 0; }
.seg-estado > p { margin: 0; font-size: 17px; font-weight: 600; color: #3d3b48; max-width: 44ch; }
.seg-estado .imp { width: 96px; height: 96px; }
.seg-error-t { font-size: clamp(26px, 4vw, 36px); }
.seg-error .btn { margin-top: 6px; }

.seg-grilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; --etapa: rgba(0, 150, 234, 0.3); }
.seg-lado, .seg-principal { display: contents; }
.seg-hero { order: 0; min-width: 0; }
.seg-acciones { order: 1; display: grid; gap: 24px; min-width: 0; }
.seg-principal > :first-child { order: 2; }
.seg-principal > :nth-child(2) { order: 3; }
.seg-consultar { order: 4; }
@media (min-width: 900px) {
  .seg-grilla { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); column-gap: clamp(36px, 5vw, 72px); row-gap: 32px; align-items: start; }
  .seg-hero { grid-column: 1 / -1; }
  .seg-principal { display: grid; gap: 40px; grid-column: 1; grid-row: 2; min-width: 0; }
  .seg-lado { display: grid; gap: 24px; grid-column: 2; grid-row: 2; min-width: 0; }
}

.seg-esperando { --etapa: rgba(253, 194, 1, 0.62); }
.seg-listo { --etapa: rgba(21, 128, 61, 0.26); }
.seg-entregado { --etapa: rgba(20, 18, 26, 0.12); }
.seg-cancelado { --etapa: rgba(224, 27, 16, 0.2); }
.seg-etapa-fila { display: flex; align-items: center; gap: 16px; margin-top: 2px; }
.seg-imp { flex: none; width: 64px; height: 64px; }
.seg-imp .imp { width: 64px; height: 64px; }
.seg-etapa { margin: 0; font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; font-size: clamp(23px, 3.4vw, 32px); letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance; }
.seg-etapa span { background: linear-gradient(transparent 60%, var(--etapa) 60%, var(--etapa) 94%, transparent 94%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 0.06em; }
.seg-cuando { margin: 8px 0 0; font-size: 17px; font-weight: 600; color: #3d3b48; }

.seg-h2 { font-size: clamp(22px, 2.6vw, 28px); margin: 0 0 18px; }
.seg-h3 { font-size: 21px; margin: 0 0 10px; line-height: 1.15; }
.seg-h4 { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 12px; }
.seg-chico { font-size: 13.5px; color: var(--tinta-suave); margin: 12px 0 0; }
.seg-ancho { width: 100%; }

.seg-caja {
  min-width: 0; container-type: inline-size; background: var(--papel); border: 2px solid var(--tinta); border-radius: 20px;
  padding: 20px; box-shadow: 6px 6px 0 var(--c, var(--amarillo));
}
.seg-caja p { margin: 0 0 10px; color: #3d3b48; font-size: 15.5px; }
.seg-caja > :last-child { margin-bottom: 0; }
.seg-caja .seg-chico { font-size: 13.5px; color: var(--tinta-suave); margin: 12px 0 0; }
.seg-caja .seg-grande { font-size: 19px; font-weight: 700; color: var(--tinta); }
.seg-pagar { border-width: 3px; box-shadow: 8px 8px 0 var(--c); }
.seg-monto { white-space: nowrap; }
.seg-caja .btn svg, .seg-consultar .btn svg { width: 20px; height: 20px; flex: none; }

/* Datos para transferir, número de seguimiento: cada uno con su Copiar. */
.seg-cuenta { margin: 14px 0; border-top: 1px solid var(--linea); }
/* El nombre del dato y su Copiar arriba; el dato abajo, a lo ancho (un CBU entero no se parte). */
.seg-dato-fila {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "etq boton" "valor valor";
  align-items: center; column-gap: 10px; row-gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--linea);
}
.seg-dato-fila .seg-etq { grid-area: etq; }
.seg-dato-fila .seg-valor { grid-area: valor; }
.seg-dato-fila .seg-copiar { grid-area: boton; }
.seg-etq { font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--tinta-suave); }
.seg-valor { min-width: 0; font-weight: 800; font-size: 17px; color: var(--tinta); overflow-wrap: anywhere; }
.seg-mono { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.pagina-seg .btn:focus-visible { outline-color: var(--tinta); }
.seg-copiar {
  flex: none; appearance: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px;
  border-radius: 999px; border: 2px solid var(--tinta); background: var(--papel); color: var(--tinta);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, transform 140ms var(--ease-out);
}
.seg-copiar svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .seg-copiar:hover { background: #fff7d9; } }
.seg-copiar:active { transform: scale(0.96); }
.seg-copiar:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.seg-copiar.copiado { background: var(--tinta); color: var(--papel); }
.seg-caja .seg-link-p { margin: 14px 0 0; }
.seg-link { font-weight: 700; color: var(--tinta); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--celeste); padding: 6px 0; }
.seg-link:hover { text-decoration-color: var(--tinta); }
.seg-link svg { display: inline; width: 16px; height: 16px; margin-left: 5px; vertical-align: -2px; }
.seg-link:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; border-radius: 4px; }

/* Comprobantes mandados y la subida de uno nuevo. */
.seg-comps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.seg-comps li { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.seg-comps small { display: block; font-weight: 600; font-size: 13.5px; color: var(--tinta-suave); }
.seg-punto { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; background: var(--amarillo-hondo); }
.comp-confirmado .seg-punto { background: #15803d; }
.comp-rechazado .seg-punto { background: #a81008; }
.comp-rechazado small { color: #a81008; }
.seg-subir { margin-top: 18px; padding-top: 18px; border-top: 2px dashed rgba(20, 18, 26, 0.3); }
.seg-subir .campo-linea { margin-top: 14px; }
.seg-subir > .btn { margin-top: 16px; }
.seg-elegir { width: 100%; }
.seg-elegir.ocupado { opacity: 0.55; pointer-events: none; }
.seg-subir input.sr:focus-visible + .btn { outline: 3px solid var(--tinta); outline-offset: 3px; }
/* Ya mandó todos los comprobantes que se pueden: en lugar de la subida, qué hacer. */
.seg-caja .seg-tope { margin: 18px 0 0; padding-top: 16px; border-top: 2px dashed rgba(20, 18, 26, 0.3); color: var(--tinta); font-weight: 600; }
.seg-previa { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border: 2px solid var(--linea); border-radius: 14px; }
.seg-previa img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; flex: none; border: 1px solid var(--linea); }
.seg-previa-pdf { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 10px; background: #fdeeec; color: var(--rojo-hondo); }
.seg-previa-pdf svg { width: 28px; height: 28px; }
.seg-previa-txt { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.seg-previa-txt b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg-previa-txt small { font-size: 13px; color: var(--tinta-suave); }
.seg-previa .enlace-boton { flex: none; font-size: 14px; }
.seg-caja .seg-ok {
  display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; padding: 10px 12px; border-radius: 12px;
  background: #e7f6ec; color: #0f5a2b; font-weight: 700; font-size: 14.5px;
}
.seg-ok svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }

/* Datos de envío: el formulario y, ya guardados, tapados. */
.seg-dos { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 12px; row-gap: 16px; align-items: start; margin-top: 16px; }
.seg-caja p.error { color: #a81008; font-size: 13.5px; font-weight: 700; margin: 8px 0 0; }
.seg-dos > .campo-linea { margin-top: 0; }
.seg-caja > form > .seg-dos:first-child, .seg-buscar-form > .seg-dos:first-child { margin-top: 0; }
@container (min-width: 330px) { .seg-dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.seg-dos-fijo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.seg-envio > .campo-linea:first-child { margin-top: 6px; }
.seg-envio > .btn { margin-top: 20px; }
.seg-cancelar { display: block; margin: 16px auto 0; }
.seg-tapado { list-style: none; margin: 0 0 4px; padding: 0; border-top: 1px solid var(--linea); }
.seg-tapado li {
  display: grid; grid-template-columns: 6.2em minmax(0, 1fr); column-gap: 12px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--linea); font-weight: 700; overflow-wrap: anywhere;
}
.seg-caja > .btn { margin-top: 14px; }

/* Los pasos: una línea de tiempo vertical. */
.seg-pasos { list-style: none; margin: 0; padding: 0; }
.seg-pasos li {
  position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; column-gap: 14px;
  padding: 0 0 22px; color: var(--tinta-suave);
}
.seg-pasos li:last-child { padding-bottom: 0; }
.seg-pasos li::before { content: ''; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: rgba(20, 18, 26, 0.16); }
.seg-pasos li:last-child::before { display: none; }
.seg-pasos li.hecho::before { background: var(--celeste-btn); }
.seg-marca {
  position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid rgba(20, 18, 26, 0.3); background: var(--papel);
}
.seg-marca svg { width: 16px; height: 16px; }
.seg-pasos .hecho .seg-marca { background: var(--celeste-btn); border-color: var(--celeste-btn); color: #fff; }
.seg-pasos .actual .seg-marca { border: 3px solid var(--tinta); background: var(--amarillo); }
.seg-paso-nom { font-weight: 600; font-size: 16px; line-height: 1.3; }
.seg-pasos .hecho .seg-paso-nom { color: var(--tinta); }
.seg-pasos .actual .seg-paso-nom { color: var(--tinta); font-weight: 800; }
.seg-paso-fecha { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta-suave); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .seg-pasos .actual .seg-marca::after {
    content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--amarillo-hondo);
    animation: seg-late 2.6s var(--ease-out) infinite;
  }
}
@keyframes seg-late { 0% { transform: scale(0.75); opacity: 0.9; } 70%, 100% { transform: scale(1.3); opacity: 0; } }

/* Lo que pidió y las cuentas. */
.seg-lineas { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tinta); }
.seg-lineas li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.seg-cant { font-weight: 800; font-variant-numeric: tabular-nums; }
.seg-lin-nom { font-weight: 700; min-width: 0; }
.seg-lin-nom small { display: block; font-weight: 500; font-size: 13.5px; color: #3d3b48; margin-top: 3px; line-height: 1.45; overflow-wrap: anywhere; }
.seg-lin-pre { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.seg-lin-diseno { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--tinta); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.seg-lin-diseno img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; background: #f1f1f4; border: 1px solid var(--linea); }
.seg-lin-diseno:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 12px; }
.seg-cuentas { margin: 12px 0 0; }
.seg-cuentas div { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; font-size: 15.5px; }
.seg-cuentas dt { color: #3d3b48; }
.seg-cuentas dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.seg-cuentas .total { font-size: 20px; border-top: 2px solid var(--tinta); margin-top: 8px; padding-top: 12px; }
.seg-cuentas .total dt { color: var(--tinta); font-weight: 800; }
.seg-cuentas .total dt small { font-size: 13px; font-weight: 600; color: var(--tinta-suave); }
.seg-cuentas .total dd { font-weight: 800; }
.seg-cuentas .pagado dd { color: #15803d; }
.seg-cuentas .falta dt, .seg-cuentas .falta dd { color: #a81008; font-weight: 800; }

/* Buscar el pedido con el código y el WhatsApp. */
.seg-buscar { max-width: 640px; }
.seg-sub { font-size: 17px; color: #3d3b48; margin: 6px 0 22px; max-width: 52ch; }
.seg-nota { margin: 2px 0 14px; padding: 10px 14px; border-radius: 12px; background: #fdeeec; color: #8c0d06; font-weight: 700; font-size: 15px; max-width: 56ch; }
.seg-buscar-form { border-width: 3px; box-shadow: 8px 8px 0 var(--amarillo); }
.seg-buscar-form .campo-linea:first-child { margin-top: 0; }
.seg-buscar-form .btn { margin-top: 20px; }
.seg-ayuda { margin: 26px 0 0; font-size: 14.5px; color: var(--tinta-suave); max-width: 56ch; }

.seg-pie { border-top: 2px solid var(--tinta); padding: 22px 0 calc(22px + env(safe-area-inset-bottom, 0px)); font-size: 14px; color: #3d3b48; }
.seg-pie .wrap { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between; align-items: center; }
.seg-pie p { margin: 0; }
.seg-pie a { color: var(--tinta); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; padding: 8px 0; }
.seg-pie a:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; border-radius: 4px; }

/* ================================================================
   Tanda V2 (2026-09-29): dirección en el carrito, pagar con Mercado
   Pago, cotizaciones y el Vaso Chopper liso aparte.
   ================================================================ */

/* ---------- El carrito: la dirección de envío ---------- */
.envio-bloque { border: 0; margin: 0; padding: 0; min-width: 0; container-type: inline-size; }
.envio-bloque:not([data-modo="envio"]) .solo-envio { display: none; }
.envio-bloque:not([data-correo="sucursal"]) .solo-sucursal { display: none; }
.envio-titulo {
  float: left; width: 100%; padding: 0; margin: 18px 0 0;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: 18px; font-weight: 800; letter-spacing: -0.02em;
}
.envio-titulo + * { clear: both; }
.envio-bloque[data-modo="envio"] {
  margin-top: 18px; padding: 2px 0 4px; border-top: 2px dashed rgba(21, 19, 28, 0.18);
}
.envio-calle { display: grid; grid-template-columns: minmax(0, 1fr) 7.2em; column-gap: 12px; align-items: start; }
.envio-dos { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 12px; align-items: start; }
@container (min-width: 330px) { .envio-dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.envio-bloque:not([data-modo="envio"]) .envio-dos { grid-template-columns: minmax(0, 1fr); }
.envio-bloque .campo-linea input, .envio-bloque .campo-linea select { background: var(--papel); }
.resumen .renglon-envio { color: var(--tinta); }
.resumen .renglon-envio.es-gratis #envio-pedido { font-weight: 800; color: #15803d; }
.pedido-vacio .vacio-cotizar { margin: 22px auto 0; font-size: 16px; }
.vacio-cotizar a, .ficha-cotizar a, .ficha-link {
  color: var(--tinta); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 3px; text-decoration-color: var(--amarillo);
}
.vacio-cotizar a:hover, .ficha-cotizar a:hover, .ficha-link:hover { text-decoration-color: var(--tinta); }
.vacio-cotizar a:focus-visible, .ficha-cotizar a:focus-visible, .ficha-link:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 4px; }
.ficha-cotizar { margin: 18px 0 0; font-size: 15px; color: #3d3b48; }

/* ---------- La pantalla de gracias: WhatsApp, pagar y compartir ---------- */
.gracias-bajada { margin: 16px 0 0; max-width: 60ch; font-size: 18px; color: #3d3b48; }
.gracias-bajada b { color: var(--tinta); }
.gracias-provisorio { margin: 14px 0 0; display: inline-block; padding: 8px 14px; border-radius: 12px; background: #fff7d9; color: #4a3800; font-size: 15px; font-weight: 600; }
.gracias-wa { margin-top: 24px; }
.btn-wa { --c-fuerte: #15803d; --sobre: #fff; }
.btn-wa span { text-align: center; }
@media (max-width: 420px) { .gracias-wa .btn-grande { padding-inline: 20px; } }
.gracias-imagenes { margin-top: 22px; max-width: 64ch; }
.gracias-imagenes p { margin: 0; font-size: 15px; color: #3d3b48; }
.gracias-imagenes .btn { margin-top: 12px; }
.gracias-avisar { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.gracias-avisar p { margin: 0; font-size: 15px; color: #3d3b48; }
.gracias-pagar {
  margin-top: 26px; max-width: 560px; padding: 22px; border: 3px solid var(--tinta); border-radius: 22px;
  box-shadow: 8px 8px 0 var(--amarillo); container-type: inline-size;
}
.gracias-pagar > p { margin: 10px 0 0; font-size: 15.5px; color: #3d3b48; }
.gracias-h3 { font-size: 23px; margin: 0; }
.gracias-pagar .gracias-chico, .gracias-chico { font-size: 14px; color: var(--tinta-suave); margin: 6px 0 0; }
.gracias-mp { display: grid; gap: 10px; margin-top: 16px; }
.gracias-mp .btn { width: 100%; }
.gracias-mp .btn span, .seg-mp .btn span { display: flex; flex-direction: column; align-items: center; line-height: 1.2; text-align: center; }
.gracias-mp .btn small, .seg-mp .btn small { font-size: 13px; font-weight: 600; opacity: 0.92; margin-top: 3px; }
.gracias-o, .seg-caja .seg-o {
  display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; font-size: 14px; font-weight: 700; color: var(--tinta-suave);
}
.gracias-o::before, .gracias-o::after, .seg-o::before, .seg-o::after { content: ''; flex: 1; height: 2px; background: var(--linea); }
.gracias-pagar .seg-cuenta { margin: 8px 0 0; }
.gracias-pagar .error { margin-top: 10px; }
@media (max-width: 599px) {
  .gracias-wa .btn, .gracias-avisar .btn, .gracias-imagenes .btn { width: 100%; }
  .gracias-pagar { padding: 18px 16px; box-shadow: 6px 6px 0 var(--amarillo); }
}

/* ---------- La página del cliente: Mercado Pago, avisos y cotización ---------- */
.seg-principal > :nth-child(n+3) { order: 3; }
.seg-arriba {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 22px; padding: 14px 16px; border-radius: 14px;
  border: 2px solid currentColor; font-weight: 700; font-size: 16px; line-height: 1.4;
}
.seg-arriba svg { width: 22px; height: 22px; flex: none; }
.seg-arriba-ok { background: #e7f6ec; color: #0f5a2b; }
.seg-arriba-espera { background: #fff7d9; color: #4a3800; }
.seg-arriba-error { background: #fdeeec; color: #8c0d06; }
.seg-cuando.seg-auto { display: flex; align-items: flex-start; gap: 8px; color: #0f5a2b; font-weight: 700; }
.seg-auto svg { width: 18px; height: 18px; flex: none; margin-top: 4px; }
@media (max-width: 420px) {
  .seg-btn-mp, .seg-btn-aceptar, .gracias-mp .btn { padding-inline: 16px; font-size: 16px; }
  .seg-mp .btn > svg, .gracias-mp .btn > svg { display: none; }  /* el monto entra en un renglón */
}
.seg-mp { display: grid; gap: 10px; margin: 14px 0 0; }
.seg-caja .seg-mp p { margin: 0; }
.seg-caja .seg-mp .seg-chico { margin: 2px 0 0; }
.seg-btn-mp { --c-fuerte: var(--celeste-btn); --sobre: #fff; min-height: 54px; font-size: 17px; }
.seg-btn-aceptar { --c-fuerte: #c11109; --sobre: #fff; min-height: 54px; font-size: 17px; }
.seg-caja .seg-vence { margin: -4px 0 10px; }
.seg-caja > .btn-fantasma.seg-ancho { margin-top: 12px; }
.seg-cita {
  margin: 0; padding: 14px 16px; border-left: 4px solid var(--amarillo); border-radius: 0 12px 12px 0; background: #fffbea;
  font-size: 16px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
}
.seg-cita + .seg-pediste { margin-top: 14px; }
.seg-pediste li { grid-template-columns: 7.4em minmax(0, 1fr); font-weight: 600; }
.seg-nota-santi { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: #f4faff; box-shadow: inset 0 0 0 2px rgba(0, 150, 234, 0.25); }
.seg-nota-santi p { margin: 4px 0 0; font-size: 15.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.seg-cot-cotizada { --etapa: rgba(253, 194, 1, 0.62); }
.seg-cot-vencida, .seg-cot-cerrada { --etapa: rgba(224, 27, 16, 0.2); }

/* ---------- Pedí tu cotización (/cotizar/) ---------- */
.cot-caja { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 56px); align-items: start; }
@media (max-width: 940px) { .cot-caja { grid-template-columns: minmax(0, 1fr); } }
.cot-form {
  border: 3px solid var(--tinta); border-radius: 24px; padding: 26px; box-shadow: 8px 8px 0 var(--amarillo);
  container-type: inline-size; min-width: 0; position: relative;
}
.cot-form .cot-primero { margin-top: 0; }
.cot-form textarea { min-height: 128px; }
.cot-ayuda-fila { display: flex; justify-content: space-between; gap: 12px; }
.cot-ayuda-fila small:last-child { flex: none; font-variant-numeric: tabular-nums; }
.cot-rotulo { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.cot-form input.sr { width: 1px; height: 1px; padding: 0; border: 0; }
#cot-archivo:focus-visible ~ .cot-elegir { outline: 3px solid var(--tinta); outline-offset: 3px; }
.cot-elegir.ocupado { opacity: 0.55; pointer-events: none; }
.cot-elegir svg { flex: none; }
.cot-imagenes { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.cot-img { position: relative; display: grid; gap: 4px; justify-items: center; }
.cot-img img { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; border: 2px solid var(--tinta); }
.cot-img-sacar {
  appearance: none; border: 0; background: none; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 700;
  color: #3d3b48; text-decoration: underline; text-underline-offset: 3px; padding: 6px 8px; min-height: 36px;
}
.cot-img-sacar:hover { color: var(--rojo-hondo); }
.cot-img-sacar:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; border-radius: 6px; }
.cot-busca { position: relative; }
.cot-resultados {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); list-style: none; margin: 0; padding: 6px;
  background: var(--papel); border: 2px solid var(--tinta); border-radius: 16px; box-shadow: 6px 6px 0 var(--celeste);
  max-height: 340px; overflow-y: auto;
}
.cot-res {
  appearance: none; width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 8px 10px; border: 0; border-radius: 12px; background: none; cursor: pointer; font: inherit; text-align: left; color: var(--tinta);
}
.cot-res:hover, .cot-res:focus-visible { background: #f4faff; outline: none; box-shadow: inset 0 0 0 2px var(--celeste-btn); }
.cot-res-txt { min-width: 0; line-height: 1.25; }
.cot-res-txt b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cot-res-txt small { font-size: 13px; color: var(--tinta-suave); }
.cot-res-mas { font-size: 22px; font-weight: 800; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 2px solid rgba(20, 18, 26, 0.3); }
.cot-res-nada { padding: 10px 12px; font-size: 14.5px; color: var(--tinta-suave); }
.cot-res-fig {
  width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; flex: none;
  background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c);
}
.cot-res-fig img { width: 100%; height: 100%; object-fit: contain; }
.cot-refs { list-style: none; margin: 0 0 10px; padding: 0; border-top: 2px solid var(--tinta); }
.cot-ref { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.cot-ref-nom { font-weight: 700; font-size: 15px; text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.cot-ref-nom:hover { text-decoration: underline; text-underline-offset: 3px; }
.cot-ref .cant-btn { width: 40px; height: 40px; }
.cot-ref .quitar { padding: 10px 4px; }
@container (max-width: 360px) {
  .cot-ref { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .cot-ref .cant { grid-column: 2; }
  .cot-ref .quitar { grid-column: 3; grid-row: 1; }
}
.cot-dos { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 14px; align-items: start; }
@container (min-width: 440px) { .cot-dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cot-salida { margin-top: 16px; padding: 14px 16px; border: 2px dashed #a81008; border-radius: 14px; color: #8c0d06; font-weight: 600; font-size: 15px; }
.cot-lado { position: sticky; top: 96px; min-width: 0; }
.cot-lado-t { font-size: clamp(22px, 2.6vw, 28px); margin: 4px 0 18px; }
.cot-pasos { list-style: none; margin: 0; padding: 0; counter-reset: cot; display: grid; gap: 18px; }
.cot-pasos li { counter-increment: cot; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; }
.cot-pasos li::before {
  content: counter(cot); grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; font-size: 19px;
  background: var(--papel); border: 2px solid var(--tinta); box-shadow: 3px 3px 0 var(--c);
}
.cot-pasos b { font-size: 17px; line-height: 1.3; }
.cot-pasos span { font-size: 15px; color: var(--tinta-suave); }
.cot-directo { margin: 26px 0 0; font-size: 15px; color: #3d3b48; }
.cot-directo a { color: var(--tinta); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: #15803d; }
.cot-directo a:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 940px) { .cot-lado { position: static; } }
@media (max-width: 599px) { .cot-form { padding: 20px 16px; box-shadow: 6px 6px 0 var(--amarillo); } }
/* La etiqueta "Sumar imágenes" es un botón (no el rótulo de un campo). */
.cot-form .campo-linea label.cot-elegir { display: inline-flex; width: auto; margin: 0; font-size: 15px; }
/* En el celular la barra muestra Catálogo y Cotizar ("Más pedidos" está en la portada). */
@media (max-width: 440px) { .nav-links a.nav-mas { display: none; } }

/* ---------- Bloque 3 (Santi 02/10): "Pedí la tuya", "Creá el tuyo" y los productos que se diseñan ---------- */
/* La cabecera de la categoría: "Creá el tuyo" (si hay para diseñar) arriba de "Pedí la tuya" */
.cabecera-botones { flex: none; display: flex; flex-direction: column; gap: 12px; margin-left: auto; }
.cabecera-botones .crear-tuyo { margin-left: 0; }
.pedi-tuya { background: var(--pedi-c, var(--rojo-btn)); }
.pedi-tuya .crear-tuyo-texto small { color: rgba(255, 255, 255, 0.86); }
.pedi-tuya .crear-tuyo-ir { background: #fff; }
.pedi-tuya-icono {
  width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: #fff; color: var(--pedi-c, var(--rojo-btn)); box-shadow: 0 0 0 3px rgba(20, 18, 26, 0.12);
  transform: rotate(-8deg); transition: transform 300ms var(--ease-out);
}
.pedi-tuya-icono svg { width: 24px; height: 24px; }
/* "Pedí el tuyo personalizado" es largo: puede ir en dos renglones (en el celular no entraba con la flecha) */
.pedi-tuya .crear-tuyo-texto { min-width: 0; }
.pedi-tuya .crear-tuyo-texto b { white-space: normal; text-wrap: balance; }
@media (max-width: 420px) { .pedi-tuya .crear-tuyo-texto b { font-size: 20px; } }
@media (hover: hover) and (pointer: fine) { .pedi-tuya:hover .pedi-tuya-icono { transform: rotate(4deg) scale(1.06); } }
@media (max-width: 860px) {
  .cabecera-botones { margin-left: 0; }
  .cabecera-botones .crear-tuyo { justify-content: flex-start; }
}
/* La card y la ficha de lo que se diseña en 3D */
.card-3d svg { width: 18px; height: 18px; flex: none; }
.ficha-3d-nota { margin: 12px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--tinta-suave); }
.ficha-3d-link { display: block; text-decoration: none; color: inherit; }
.ficha-3d-link .btn { pointer-events: none; }
.ficha-cotizar .enlace-boton { font-weight: 700; }
/* "Creá el tuyo": con pocos van todos juntos, y al final "a medida" */
.crear-grilla-junta { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.crear-op-medida { background: #fff; box-shadow: inset 0 0 0 2px #e3e5ec; }
.crear-op-medida .crear-op-fig { display: grid; place-items: center; color: var(--rojo-btn); }
.crear-op-medida .crear-op-fig svg { width: 54px; height: 54px; }
@media (max-width: 560px) { .crear-grilla-junta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* El formulario flotante de "Pedí la tuya" */
.pedi { position: fixed; inset: 0; z-index: 92; display: grid; place-items: center; padding: 24px 16px; }
.pedi-fondo { position: absolute; inset: 0; background: rgba(20, 18, 26, 0.58); }
.pedi-caja {
  position: relative; width: min(640px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(24px, 3.4vw, 36px); border-radius: 28px; background: var(--papel);
  box-shadow: 0 40px 80px -30px rgba(20, 18, 26, 0.55);
  border-top: 8px solid var(--pedi-c, var(--rojo-btn));
}
.pedi-caja:focus { outline: none; }
.pedi-cabeza { margin: 0 48px 18px 0; }
.pedi-sub { margin: 10px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--tinta-suave); }
.pedi-form { display: grid; gap: 18px; }
.pedi-campo { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.pedi-rotulo { font-size: 14px; font-weight: 700; color: var(--tinta); padding: 0; }
.pedi-rotulo .opcional { font-weight: 500; color: var(--tinta-suave); }
.pedi-entrada {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 2px solid #d8dbe4; background: #fff;
  font: inherit; font-size: 16px; color: var(--tinta);
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
textarea.pedi-entrada { resize: vertical; min-height: 92px; line-height: 1.45; }
.pedi-entrada:focus { outline: none; border-color: var(--pedi-c, var(--celeste)); box-shadow: 0 0 0 4px rgba(0, 150, 234, 0.16); }
.pedi-entrada[aria-invalid='true'] { border-color: var(--rojo); }
.pedi-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pedi-error { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--rojo-hondo); }
.pedi-fotos { display: flex; flex-wrap: wrap; gap: 10px; }
.pedi-foto, .pedi-foto-sumar { position: relative; width: 84px; height: 84px; border-radius: 16px; flex: none; }
.pedi-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; display: block; }
.pedi-foto-sacar {
  position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--tinta); color: #fff; box-shadow: 0 2px 6px rgba(20, 18, 26, 0.3);
}
.pedi-foto-sacar svg { width: 12px; height: 12px; }
.pedi-foto-sumar {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer;
  border: 2px dashed #c9ccd6; color: var(--tinta-suave); font-size: 12.5px; font-weight: 700; text-align: center;
  transition: border-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
.pedi-foto-sumar svg { width: 26px; height: 26px; }
.pedi-foto-sumar:hover, .pedi-foto-sumar:focus-visible { border-color: var(--pedi-c, var(--celeste)); color: var(--tinta); outline: none; }
.pedi-mandar { width: 100%; --c-fuerte: var(--pedi-c, var(--rojo-btn)); --sobre: #fff; }
.pedi-mandar:disabled { opacity: 0.75; cursor: progress; }
.pedi-chico { margin: -6px 0 0; font-size: 13px; line-height: 1.45; color: var(--tinta-suave); }
.pedi-pausa, .pedi-listo { display: grid; gap: 12px; margin-top: 4px; }
.pedi-pausa .pedi-sub { margin: 0 0 6px; }
@media (max-width: 760px) {
  .pedi { padding: 0; place-items: end stretch; }
  .pedi-caja { width: 100%; max-height: 94dvh; border-radius: 26px 26px 0 0; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); }
  .pedi-dos { grid-template-columns: 1fr; }
}

/* ---------- Popup de bienvenida (Santi 02/10): el mail a cambio de un código único de descuento ----------
   A la izquierda la "vidriera": ráfaga celeste (como los títulos), el sello amarillo del descuento y tres
   piezas de la tienda asomando. A la derecha el formulario. En el celular es una hoja desde abajo y la
   vidriera queda como franja arriba. */
.bv { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 24px 16px; }
.bv-fondo { position: absolute; inset: 0; background: rgba(20, 18, 26, 0.58); }
.bv-caja {
  position: relative; width: min(820px, 100%); max-height: calc(100dvh - 48px); overflow: hidden auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  border-radius: 28px; background: var(--papel); box-shadow: 0 40px 80px -30px rgba(20, 18, 26, 0.55);
}
.bv-caja:focus { outline: none; }
.bv-cerrar { top: 14px; right: 14px; }
.bv-vidriera {
  position: relative; min-height: 400px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(58% 52% at 50% 50%, rgba(255, 255, 255, 0.3), transparent 72%),
    repeating-conic-gradient(from -4deg at 50% 50%, rgba(255, 255, 255, 0.14) 0 8deg, transparent 8deg 16deg),
    var(--celeste);
}
.bv-sello {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 158px; height: 158px; margin: -79px 0 0 -79px;
  border-radius: 50%; background: var(--amarillo); color: var(--tinta);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 0 0 6px #fff, 0 0 0 9px var(--tinta), 0 20px 34px -10px rgba(20, 18, 26, 0.5);
  transform: rotate(-9deg);
  font-family: 'Nunito', system-ui, sans-serif; font-weight: 900; line-height: 0.9;
}
.bv-sello b { font-size: 56px; letter-spacing: -0.045em; }
.bv-sello span { margin-top: 5px; font-size: 22px; letter-spacing: 0.14em; }
.bv-fig { position: absolute; z-index: 1; height: auto; pointer-events: none; user-select: none; filter: drop-shadow(0 16px 18px rgba(20, 18, 26, 0.3)); }
.bv-fig-a { width: 46%; left: -5%; bottom: -4%; rotate: -10deg; }   /* el vaso */
.bv-fig-b { width: 36%; right: -5%; top: -3%; rotate: 14deg; }      /* la pokebola */
.bv-fig-c { width: 44%; right: -6%; bottom: 0; rotate: -8deg; }     /* el llavero */
.bv-cuerpo { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 4vw, 46px) clamp(24px, 3.4vw, 40px); }
.bv .titulo-sticker { margin-right: 46px; }
.bv-texto { margin: 12px 0 20px; font-size: 15.5px; line-height: 1.55; color: var(--tinta-suave); }
.bv-texto b { color: var(--tinta); }
.bv-form { display: grid; gap: 10px; }
.bv-mail {
  min-height: 54px; padding: 14px 16px; border-radius: 16px; border: 2px solid #d8dbe4; background: #fff;
  font: inherit; font-size: 16px; color: var(--tinta);
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.bv-mail:focus { outline: none; border-color: var(--celeste); box-shadow: 0 0 0 4px rgba(0, 150, 234, 0.18); }
.bv-mail[aria-invalid='true'] { border-color: var(--rojo); }
.bv-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bv-boton { width: 100%; --c-fuerte: var(--rojo-btn); --sobre: #fff; }
.bv-boton:disabled { opacity: 0.75; cursor: progress; }
.bv-error { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--rojo-hondo); }
.bv-chico { margin: 12px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--tinta-suave); }
.bv-codigo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding: 14px 14px 14px 18px;
  border: 2px dashed var(--celeste); border-radius: 16px; background: #eef7fe;
}
.bv-codigo b { font: 800 26px/1.1 'Courier New', Courier, monospace; letter-spacing: 0.06em; color: var(--tinta); }
/* el botón del pie que lo abre */
.pie-regalo {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 700; color: var(--tinta);
  padding: 10px 16px; border-radius: 999px; background: #fff4cc; box-shadow: inset 0 0 0 2px var(--amarillo);
  transition: transform 140ms var(--ease-out), background-color 140ms var(--ease-out);
}
.pie-regalo:hover { transform: translateY(-1px); background: #ffecad; }
.pie-regalo:active { transform: scale(0.98); }
.pie-regalo:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
@media (max-width: 760px) {
  .bv { padding: 0; place-items: end stretch; }
  .bv-caja { width: 100%; max-height: 94dvh; grid-template-columns: minmax(0, 1fr); border-radius: 26px 26px 0 0; }
  /* más baja que en la compu: en el celular no puede tapar media página (Google lo castiga y molesta) */
  .bv-vidriera { min-height: 0; height: 112px; }
  .bv-sello { width: 88px; height: 88px; margin: -44px 0 0 -44px; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--tinta), 0 12px 20px -8px rgba(20, 18, 26, 0.5); }
  .bv-sello b { font-size: 31px; }
  .bv-sello span { margin-top: 2px; font-size: 13px; }
  .bv-fig-a { width: 26%; left: 4%; bottom: -34%; }
  .bv-fig-b { width: 17%; right: 16%; top: 12%; }
  .bv-fig-c { display: none; }
  .bv-cuerpo { padding: 18px 20px calc(16px + env(safe-area-inset-bottom)); }
  .bv-texto { margin: 8px 0 14px; font-size: 15px; }
  .bv-mail { min-height: 50px; }
  .bv-chico { margin-top: 10px; }
}

/* ---------- Tu cuenta (Santi, bloque 4, 03/10) ----------
   El botón de la barra, el carnet de cliente, la ventana "Entrá" (mail → código de 6 números), el aviso
   del carrito, la oferta después de comprar y la página /cuenta. Misma familia que el popup de bienvenida
   (.bv): vidriera con rayos, pero amarilla y con el carnet en vez del sello. */

/* la barra: la persona (sin sesión) o la inicial en amarillo (con sesión, con el puntito verde) */
.nav-in .nav-cuenta {
  flex: none; position: relative; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; text-decoration: none; color: var(--tinta); background: var(--papel);
  box-shadow: inset 0 0 0 2px rgba(20, 18, 26, 0.18);
  transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.nav-in .nav-cuenta svg { width: 22px; height: 22px; }
.nav-in .nav-wa + .nav-cuenta, .nav-in .nav-ig + .nav-cuenta { margin-left: -10px; }
@media (hover: hover) and (pointer: fine) {
  .nav-in .nav-cuenta:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 2px var(--tinta); }
}
.nav-in .nav-cuenta:active { transform: scale(0.94); }
.nav-in .nav-cuenta:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.nav-in .nav-cuenta.adentro { background: var(--amarillo); box-shadow: inset 0 0 0 2px var(--tinta), 0 3px 8px rgba(20, 18, 26, 0.16); }
.nav-in .nav-cuenta.adentro::after {
  content: ''; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
  background: #16a34a; box-shadow: 0 0 0 2px var(--papel);
}
.nav-cuenta-ini { font: 900 18px/1 'Nunito', system-ui, sans-serif; color: var(--tinta); translate: 0 1px; }
@media (max-width: 720px) { .nav-in .nav-wa + .nav-cuenta, .nav-in .nav-ig + .nav-cuenta { margin-left: -4px; } }
/* En el celular entran el logo, Catálogo y Cotizar, WhatsApp y la cuenta: todo un poco más compacto, e
   Instagram (que sigue en el pie) desde 440 px. */
@media (max-width: 479px) {
  .nav:has(.nav-cuenta) .nav-in { gap: 8px; }
  .nav:has(.nav-cuenta) .nav-links { gap: 12px; font-size: 14px; }
  .nav-in .nav-cuenta, .nav:has(.nav-cuenta) .nav-in .nav-wa, .nav:has(.nav-cuenta) .nav-in .nav-ig { width: 36px; height: 36px; min-height: 36px; }
  .nav-in .nav-cuenta svg { width: 20px; height: 20px; }
  .nav-cuenta-ini { font-size: 16px; }
  .nav-in .nav-wa + .nav-cuenta, .nav-in .nav-ig + .nav-cuenta, .nav:has(.nav-cuenta):has(.nav-ig) .nav-wa { margin-left: -2px; }
}
@media (max-width: 439px) { .nav:has(.nav-cuenta) .nav-in .nav-ig { display: none; } .nav:has(.nav-cuenta):has(.nav-ig) .nav-wa { margin-left: 0; } }
@media (max-width: 374px) {
  .nav-in .nav-cuenta, .nav:has(.nav-cuenta) .nav-in .nav-wa { width: 33px; height: 33px; min-height: 33px; }
  .nav-in .nav-cuenta svg { width: 18px; height: 18px; }
  .nav-cuenta-ini { font-size: 15px; }
  .nav:has(.nav-cuenta) .nav-links { gap: 10px; }
}
@media (max-width: 400px) {
  .nav:has(.nav-cuenta) .marca { gap: 8px; }
  .nav:has(.nav-cuenta) .marca img { width: 31px; height: 31px; }
  .nav:has(.nav-cuenta) .marca-texto b { font-size: 18px; }
}
@media (max-width: 379px) {
  .nav:has(.nav-cuenta) .nav-in { gap: 6px; }
  .nav:has(.nav-cuenta) .nav-links { gap: 7px; font-size: 13.5px; }
  .nav-in .nav-cuenta, .nav:has(.nav-cuenta) .nav-in .nav-wa { width: 32px; height: 32px; min-height: 32px; }
}
@media (max-width: 349px) { .nav:has(.nav-cuenta) .nav-links { font-size: 13px; } }

/* el carnet: medido en em (1em = 1/30 del ancho) para achicarlo entero con el font-size */
.carnet {
  position: relative; box-sizing: border-box; width: 30em; aspect-ratio: 1.586; font-size: 10px;
  display: flex; flex-direction: column; padding: 1.8em 2em 0; border-radius: 2em; overflow: hidden;
  color: var(--tinta); background: #fff radial-gradient(circle at 1px 1px, rgba(20, 18, 26, 0.075) 1px, transparent 0) 0 0 / 1.4em 1.4em;
  box-shadow: 0 0 0 2px var(--tinta), 0 2.4em 4em -1.8em rgba(20, 18, 26, 0.55), 0 0.6em 1.4em -0.6em rgba(20, 18, 26, 0.3);
  transform: rotate(-7deg); user-select: none;
}
.carnet-cab { display: flex; align-items: center; gap: 0.9em; }
.carnet-cab img { width: 3.4em; height: 3.4em; }
.carnet-cab b { font: 800 1.9em/1 'Bricolage Grotesque', system-ui, sans-serif; letter-spacing: -0.045em; }
.carnet-cab span {
  margin-left: auto; padding: 0.5em 0.8em 0.4em; border-radius: 0.6em; background: var(--celeste-btn); color: #fff;
  font: 900 1.05em/1 'Nunito', system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase;
}
.carnet-nombre {
  margin: auto 0 0.2em; font: 900 2.6em/1.08 'Nunito', system-ui, sans-serif; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.carnet:not(.lleno) .carnet-nombre { color: #b4b2be; }
.carnet-mail { margin: 0; font-size: 1.3em; font-weight: 600; color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carnet-pie { display: flex; gap: 2em; margin-top: 1.2em; padding: 1em 0 1.6em; border-top: 0.15em dashed rgba(20, 18, 26, 0.22); }
.carnet-dato small { display: block; font-size: 1em; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-suave); }
.carnet-dato b { display: block; font-size: 1.45em; font-weight: 800; line-height: 1.25; }
.carnet-franja { position: absolute; left: 0; right: 0; bottom: 0; height: 0.7em; background: linear-gradient(90deg, var(--celeste) 0 33.4%, var(--amarillo) 0 66.7%, var(--rojo) 0); }
.carnet-sello {
  position: absolute; right: 1.6em; bottom: 2.4em; display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.55em 0.9em 0.45em 0.7em; border: 0.25em solid #16a34a; border-radius: 0.9em; background: rgba(255, 255, 255, 0.9);
  color: #15803d; font: 900 1.3em/1 'Nunito', system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
  transform: rotate(-12deg); opacity: 0;
}
.carnet-sello svg { width: 1.25em; height: 1.25em; }
.carnet.sellado .carnet-sello { opacity: 1; }

/* la ventana "Entrá" (en el celular, hoja desde abajo) */
.cta { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; padding: 24px 16px; }
.cta-fondo { position: absolute; inset: 0; background: rgba(20, 18, 26, 0.58); }
.cta-caja {
  position: relative; width: min(820px, 100%); max-height: calc(100dvh - 48px); overflow: hidden auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  border-radius: 28px; background: var(--papel); box-shadow: 0 40px 80px -30px rgba(20, 18, 26, 0.55);
}
.cta-caja:focus { outline: none; }
.cta-cerrar { top: 14px; right: 14px; }
.cta-vidriera {
  position: relative; min-height: 430px; overflow: hidden; isolation: isolate; display: grid; place-items: center;
  background:
    radial-gradient(60% 55% at 50% 52%, rgba(255, 255, 255, 0.45), transparent 72%),
    repeating-conic-gradient(from -4deg at 50% 52%, rgba(255, 255, 255, 0.22) 0 8deg, transparent 8deg 16deg),
    var(--amarillo);
}
.cta-vidriera .carnet { font-size: clamp(8px, 2.2vw, 10.5px); }
/* todos los pasos del mismo alto: la ventana no salta al pasar del mail al código */
.cta-cuerpo { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 560px; padding: clamp(30px, 4vw, 46px) clamp(24px, 3.4vw, 40px); }
.cta .titulo-sticker { margin-right: 46px; }
.cta-texto { margin: 12px 0 20px; font-size: 15.5px; line-height: 1.55; color: var(--tinta-suave); }
.cta-texto b { color: var(--tinta); overflow-wrap: anywhere; }
.cta-form { display: grid; gap: 10px; }
.cta-boton { width: 100%; --c-fuerte: var(--celeste-btn); --sobre: #fff; }
.cta-boton:disabled { opacity: 0.75; cursor: progress; }
.cta-chico { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--tinta-suave); }
.cta-chico .enlace-boton { font-size: 13px; color: var(--tinta); }
.cta-chico .enlace-boton:disabled { cursor: default; text-decoration-color: transparent; color: var(--tinta-suave); }
.cta-acciones { display: grid; gap: 10px; }
.cta-acciones .btn-fantasma { width: 100%; }

/* las 6 celdas del código: un solo campo (así el celular ofrece el código del mail) encima de las celdas */
.cta-cod { position: relative; }
.cta-cod-in {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  opacity: 0; font-size: 16px; color: transparent; caret-color: transparent; background: transparent; cursor: text;
}
.cta-celdas { display: flex; gap: 8px; }
.cta-celdas span {
  flex: 1 1 0; min-width: 0; height: 62px; display: grid; place-items: center; border-radius: 14px;
  border: 2px solid #d8dbe4; background: #fff; color: var(--tinta);
  font: 900 28px/1 'Nunito', system-ui, sans-serif; font-variant-numeric: tabular-nums;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.cta-celdas span:nth-child(4) { margin-left: 8px; }
.cta-celdas span.lleno { border-color: var(--tinta); animation: cta-pop 180ms var(--ease-out); }
.cta-celdas span.actual { border-color: var(--celeste); box-shadow: 0 0 0 4px rgba(0, 150, 234, 0.18); }
.cta-celdas span.actual:not(.lleno)::after { content: ''; width: 2px; height: 28px; border-radius: 2px; background: var(--celeste); animation: cta-cursor 1s steps(1) infinite; }
.cta-cod-in[aria-invalid='true'] + .cta-celdas span { border-color: var(--rojo); }
@keyframes cta-pop { from { transform: scale(0.88); } }
@keyframes cta-cursor { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cta-celdas span.lleno { animation: none; }
  .cta-celdas span.actual:not(.lleno)::after { animation: none; }
}
@media (max-width: 760px) {
  .cta { padding: 0; place-items: end stretch; }
  .cta-caja { width: 100%; max-height: 94dvh; grid-template-columns: minmax(0, 1fr); border-radius: 26px 26px 0 0; }
  .cta-vidriera { min-height: 0; height: 120px; place-items: start center; }
  .cta-vidriera .carnet { font-size: 7.4px; margin-top: 22px; }
  .cta-cuerpo { min-height: 0; justify-content: flex-start; padding: 20px 20px calc(18px + env(safe-area-inset-bottom)); }
  .cta-texto { margin: 8px 0 14px; font-size: 15px; }
  .cta-celdas { gap: 6px; }
  .cta-celdas span { height: 56px; font-size: 25px; border-radius: 12px; }
  .cta-celdas span:nth-child(4) { margin-left: 6px; }
}

/* el popup de bienvenida: "¿Ya compraste? Entrá" */
.bv-ya { margin-top: 6px; }
.bv-ya .enlace-boton { font-size: 12.5px; }

/* el carrito: "¿Ya compraste? Entrá" o "Comprás como Martina" */
.cuenta-carrito {
  display: flex; align-items: center; gap: 12px; margin: 18px 0 0; padding: 11px 14px; border-radius: 16px;
  background: #fff8dc; box-shadow: inset 0 0 0 2px var(--amarillo); font-size: 15px; line-height: 1.4;
}
.cuenta-carrito-txt { flex: 1; min-width: 0; }
.cuenta-carrito-txt b { overflow-wrap: anywhere; }
.cuenta-carrito-ico, .cuenta-carrito-ini, .gracias-cuenta-ini {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; box-shadow: inset 0 0 0 2px var(--tinta); color: var(--tinta);
}
.cuenta-carrito-ico svg { width: 20px; height: 20px; }
.cuenta-carrito-ini, .gracias-cuenta-ini { background: var(--amarillo); font: 900 17px/1 'Nunito', system-ui, sans-serif; }
.cuenta-carrito.adentro { background: #eef7fe; box-shadow: inset 0 0 0 2px rgba(0, 150, 234, 0.45); }
.cuenta-carrito .enlace-boton { white-space: nowrap; }

/* después de comprar: "Guardá tus datos para la próxima" */
.gracias-cuenta {
  margin-top: 28px; max-width: 760px; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center;
  padding: 22px 24px 22px 18px; border-radius: 24px; background: #fff8dc; box-shadow: inset 0 0 0 2px var(--amarillo);
}
.gracias-cuenta-carnet { display: grid; place-items: center; padding: 10px 0; }
.gracias-cuenta-carnet .carnet { font-size: 6.4px; }
.gracias-cuenta-txt p { margin: 6px 0 16px; max-width: 48ch; color: #3d3b48; font-size: 15px; }
.gracias-cuenta-boton { --c-fuerte: var(--celeste-btn); --sobre: #fff; }
.gracias-cuenta.hecha { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #eef7fe; box-shadow: inset 0 0 0 2px rgba(0, 150, 234, 0.4); }
.gracias-cuenta.hecha p { margin: 0; font-size: 15px; }
.gracias-cuenta.hecha a { font-weight: 800; color: var(--tinta); text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--amarillo); }
@media (max-width: 600px) {
  .gracias-cuenta { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .gracias-cuenta-carnet { display: none; }
}

/* ---- la página /cuenta ---- */
.seccion.cuenta-cabeza { padding-top: clamp(26px, 4vw, 48px); padding-bottom: 22px; }
.cuenta-hola { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px 40px; }
.cuenta-hola .sub b { overflow-wrap: anywhere; }
.cuenta-hola .sub .enlace-boton { font-size: inherit; font-weight: 700; }
.cuenta-carnet { padding: 10px 26px 10px 0; }
.cuenta-carnet .carnet { font-size: 10.5px; }
.cuenta-entrar { padding-bottom: clamp(56px, 8vw, 100px); }
.cuenta-entrar-caja {
  max-width: 500px; padding: 26px 26px 24px; border-radius: 26px; background: var(--papel);
  box-shadow: 0 0 0 1.5px #e6e4ec, 0 18px 40px -24px rgba(20, 18, 26, 0.35);
}
.cuenta-panel { padding-bottom: clamp(56px, 8vw, 100px); }
.cuenta-tabs {
  position: sticky; top: 72px; z-index: 6; display: flex; gap: 8px; margin: 0 calc(var(--gutter) * -1) 18px; padding: 12px var(--gutter);
  background: linear-gradient(var(--papel) 78%, rgba(255, 255, 255, 0)); overflow-x: auto; scrollbar-width: none;
}
.cuenta-tabs::-webkit-scrollbar { display: none; }
.cuenta-tab {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-size: 15px; font-weight: 700; color: var(--tinta);
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px; white-space: nowrap;
  background: var(--papel); box-shadow: inset 0 0 0 2px rgba(20, 18, 26, 0.16);
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 140ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .cuenta-tab:hover { box-shadow: inset 0 0 0 2px var(--tinta); } }
.cuenta-tab:active { transform: scale(0.97); }
.cuenta-tab:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.cuenta-tab[aria-selected='true'] { background: var(--tinta); color: #fff; box-shadow: inset 0 0 0 2px var(--tinta); }
.cuenta-n {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center;
  background: var(--amarillo); color: var(--tinta); font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.cuenta-hoja:focus { outline: none; }
.cuenta-hoja:focus-visible { outline: 3px solid var(--tinta); outline-offset: 6px; border-radius: 12px; }
.cuenta-h2 { font-size: 20px; letter-spacing: -0.025em; margin: 4px 0 14px; }
.diss + .cuenta-h2 { margin-top: 36px; }
.cuenta-cargando { display: grid; gap: 12px; }
.cuenta-cargando span { height: 84px; border-radius: 20px; background: linear-gradient(90deg, #f1f2f6 30%, #f8f9fb 50%, #f1f2f6 70%) 0 0 / 300% 100%; animation: cuenta-brillo 1.3s linear infinite; }
@keyframes cuenta-brillo { to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .cuenta-cargando span { animation: none; } }

/* mis pedidos */
.peds { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ped {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 18px;
  padding: 14px 16px 14px 14px; border-radius: 22px; background: var(--papel);
  box-shadow: 0 0 0 1.5px #e6e4ec, 0 8px 20px -16px rgba(20, 18, 26, 0.35);
}
.ped-fotos { display: flex; padding-left: 3px; }
.ped-fotos img, .ped-sin-foto { width: 56px; height: 56px; border-radius: 16px; object-fit: contain; background: #f3f5fa; box-shadow: 0 0 0 3px var(--papel); }
.ped-fotos img + img { margin-left: -22px; }
.ped-sin-foto { display: grid; place-items: center; color: var(--tinta-suave); }
.ped-sin-foto svg { width: 26px; height: 26px; }
.ped-info { min-width: 0; }
.ped-cod { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.ped-cod b { font: 800 17px/1.2 'Bricolage Grotesque', system-ui, sans-serif; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.ped-cod span { font-size: 13.5px; font-weight: 600; color: var(--tinta-suave); }
.ped-cod .ped-tipo { padding: 2px 8px; border-radius: 999px; background: #e3f3fd; color: var(--celeste-hondo); font-size: 12px; font-weight: 800; }
.ped-que { margin: 3px 0 0; font-size: 14.5px; color: #3d3b48; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ped-etapa { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.ped-etapa[data-tono='celeste'] { background: #e3f3fd; color: var(--celeste-hondo); }
.ped-etapa[data-tono='amarillo'] { background: #fff1bf; color: #574100; }
.ped-etapa[data-tono='verde'] { background: #dcf5e4; color: #14532d; }
.ped-etapa[data-tono='gris'] { background: #eef0f4; color: #3d3b48; }
.ped-etapa[data-tono='apagado'] { background: #f3f3f5; color: #6b6878; }
.ped-total { font-size: 16px; font-weight: 800; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ped-total small { display: block; font-size: 12.5px; font-weight: 700; color: #8a3a00; }
.ped-ir { white-space: nowrap; }
.ped-ir svg { width: 18px; height: 18px; flex: none; }
.ped-ir-pagar { --c-fuerte: var(--rojo-btn); --sobre: #fff; }
.ped-cancelado .ped-fotos, .ped-cancelado .ped-info { opacity: 0.6; }
.ped-cancelado .ped-que { text-decoration: line-through; }
@media (max-width: 880px) {
  .ped { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'fotos info total' 'etapa etapa ir'; gap: 12px 14px; }
  .ped-fotos { grid-area: fotos; } .ped-info { grid-area: info; } .ped-total { grid-area: total; }
  .ped-etapa { grid-area: etapa; justify-self: start; } .ped-ir { grid-area: ir; }
}
@media (max-width: 480px) {
  .ped { padding: 12px; }
  .ped-fotos img, .ped-sin-foto { width: 46px; height: 46px; border-radius: 13px; }
  .ped-fotos img + img { margin-left: -20px; }
  .ped-ir { padding-inline: 14px; }
}

/* ¿te falta un pedido? */
.cuenta-reclamar { margin-top: 22px; max-width: 720px; padding: 2px 18px; border-radius: 18px; background: #f6f7fb; }
.cuenta-reclamar summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px 0; font-weight: 800; }
.cuenta-reclamar summary::-webkit-details-marker { display: none; }
.cuenta-reclamar summary::after {
  content: ''; width: 8px; height: 8px; margin-top: -4px; border-right: 2.5px solid; border-bottom: 2.5px solid;
  transform: rotate(45deg); transition: transform 180ms var(--ease-out);
}
.cuenta-reclamar[open] summary::after { transform: translateY(4px) rotate(-135deg); }
.cuenta-reclamar summary:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; border-radius: 8px; }
.cuenta-reclamar p { margin: 0 0 12px; max-width: 60ch; color: #3d3b48; font-size: 14.5px; }
.cuenta-reclamar-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 10px; padding-bottom: 16px; }
.cuenta-reclamar-form label span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.cuenta-reclamar-form input {
  width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 12px; border: 2px solid #d8dbe4; background: var(--papel);
  font: inherit; font-size: 16px; color: var(--tinta);
}
.cuenta-reclamar-form input:focus { outline: none; border-color: var(--celeste); box-shadow: 0 0 0 4px rgba(0, 150, 234, 0.18); }
.cuenta-reclamar-form .btn { --c-fuerte: var(--tinta); --sobre: #fff; }
.cuenta-reclamar-form .bv-error { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .cuenta-reclamar-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cuenta-reclamar-form .btn { grid-column: 1 / -1; }
}

/* lo que todavía no hay */
.cuenta-vacio { max-width: 720px; padding: clamp(26px, 5vw, 46px) clamp(20px, 4vw, 40px); border-radius: 24px; background: #f6f7fb; }
.cuenta-vacio-t { max-width: 24ch; font-size: clamp(22px, 3vw, 30px); line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
.cuenta-vacio-t span { color: var(--celeste-hondo); overflow-wrap: anywhere; }
.cuenta-vacio p { margin: 10px 0 20px; max-width: 54ch; color: #3d3b48; }
.cuenta-vacio .btn svg { width: 20px; height: 20px; flex: none; }
.cuenta-vacio-txt { color: #3d3b48; }

/* mis diseños */
.diss { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 16px; }
.dis { display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--papel); box-shadow: 0 0 0 1.5px #e6e4ec, 0 8px 22px -16px rgba(20, 18, 26, 0.35); }
.dis-foto { aspect-ratio: 1; background: #f3f5fa; }
.dis-foto img { width: 100%; height: 100%; object-fit: cover; }
.dis-info { display: grid; gap: 2px; padding: 12px 14px 4px; }
.dis-info b { font-size: 15.5px; line-height: 1.25; }
.dis-info span { font-size: 13.5px; color: var(--tinta-suave); overflow-wrap: anywhere; }
.dis-info .dis-precio { margin-top: 2px; font-size: 14.5px; font-weight: 800; color: var(--tinta); font-variant-numeric: tabular-nums; }
.dis-acciones { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 10px 14px 14px; }
.dis-acciones .btn { flex: 1; padding-inline: 14px; }
.dis-sumar { --c-fuerte: var(--tinta); --sobre: #fff; }
.dis-sumar svg { width: 18px; height: 18px; flex: none; }
.dis-borrar {
  flex: none; min-width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center; background: #f1f2f6; color: var(--tinta-suave); font: inherit; font-size: 13px; font-weight: 800;
  transition: background-color 160ms ease, color 160ms ease, transform 140ms var(--ease-out);
}
.dis-borrar svg { width: 19px; height: 19px; }
@media (hover: hover) and (pointer: fine) { .dis-borrar:hover { background: #fde8e7; color: var(--rojo-hondo); } }
.dis-borrar:active { transform: scale(0.94); }
.dis-borrar:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.dis-borrar.seguro { padding: 0 14px; background: var(--rojo-btn); color: #fff; }
.dis-no { flex: 1; font-size: 13px; font-weight: 600; color: var(--tinta-suave); }

/* favoritos: la grilla de la tienda, pero en el ancho de la página */
.cuenta-favs { padding-top: 6px; }

/* mis datos */
.cuenta-datos { max-width: 760px; display: grid; gap: 22px; }
.cuenta-datos-grupo { container-type: inline-size; padding: 22px 22px 24px; border-radius: 22px; background: var(--papel); box-shadow: 0 0 0 1.5px #e6e4ec; }
.cuenta-datos .cuenta-h2 { margin: 0 0 4px; }
.cuenta-ayuda { margin: 0; max-width: 58ch; font-size: 14.5px; color: var(--tinta-suave); }
.cuenta-datos input[readonly] { background: #f6f7fb; color: var(--tinta-suave); border-color: #d8dbe4; }
.cuenta-datos-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.cuenta-guardado { margin: 0; font-weight: 700; color: #15803d; }
.cuenta-salir { display: flex; flex-wrap: wrap; gap: 8px 26px; padding-top: 18px; border-top: 1px solid var(--linea); }

@media (max-width: 760px) {
  .cuenta-hola { grid-template-columns: minmax(0, 1fr); }
  .cuenta-hola { gap: 18px; }
  .cuenta-carnet { justify-self: center; padding: 0 0 4px; }
  .cuenta-carnet .carnet { font-size: 7.6px; }
  .cuenta-tabs { top: 64px; -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent); mask-image: linear-gradient(90deg, #000 84%, transparent); }
  .cuenta-tab { font-size: 14.5px; padding: 9px 15px; }
  .cuenta-entrar-caja { padding: 22px 18px 20px; }
}

/* ---------- Puntos y premios (Santi, bloque 5, 03/10) ----------
   El amarillo y la estrella son de los puntos: el premio en el carrito, la franja de puntos debajo del total
   y la pestaña "Mis puntos" (saldo grande sobre la vidriera amarilla, el próximo premio, premios, historial). */

/* un premio en el carrito */
.fila-premio {
  display: inline-flex; align-items: center; gap: 5px; width: fit-content; margin: 3px 0 2px; padding: 3px 10px 3px 7px; border-radius: 999px;
  background: var(--amarillo); color: var(--tinta); font-size: 12.5px; font-weight: 800; line-height: 1.3;
  box-shadow: inset 0 0 0 1.5px rgba(20, 18, 26, 0.85);
}
.fila-premio svg { width: 13px; height: 13px; flex: none; }
.fila-pedido.es-premio .fila-datos { display: flex; flex-direction: column; align-items: flex-start; }
.cant-premio {
  min-width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 999px;
  font-weight: 800; color: var(--tinta-suave); box-shadow: inset 0 0 0 2px rgba(20, 18, 26, 0.12);
}
.fila-pedido.es-premio .fila-precio { color: #15803d; font-weight: 800; }

/* el carrito: lo que suma este pedido y los premios */
.puntos-carrito { margin-top: 14px; padding: 12px 14px 14px; border-radius: 16px; background: #fff8dc; box-shadow: inset 0 0 0 2px var(--amarillo); }
.pc-linea { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 14.5px; line-height: 1.45; color: #3d3b48; }
.pc-linea b { color: var(--tinta); }
.pc-linea .enlace-boton { font-size: inherit; }
.pc-moneda {
  flex: none; width: 28px; height: 28px; margin-top: -2px; border-radius: 50%; display: grid; place-items: center;
  background: var(--amarillo); color: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta), 0 2px 5px rgba(184, 138, 0, 0.45);
}
.pc-moneda svg { width: 15px; height: 15px; }
.pc-titulo { margin: 12px 0 8px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-suave); }
.pc-premios { display: grid; gap: 8px; }
.pc-premio {
  appearance: none; border: 0; cursor: pointer; font: inherit; text-align: left; color: var(--tinta);
  display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 14px; background: var(--papel);
  box-shadow: 0 0 0 1.5px rgba(20, 18, 26, 0.12), 0 4px 10px -6px rgba(20, 18, 26, 0.3);
  transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.pc-premio img, .pc-premio-ico { width: 44px; height: 44px; flex: none; border-radius: 10px; object-fit: contain; background: #f3f5fa; display: grid; place-items: center; }
.pc-premio > span:not(.pc-premio-ico):not(.pc-premio-mas) { flex: 1; min-width: 0; display: grid; }
.pc-premio b { font-size: 14px; line-height: 1.25; }
.pc-premio small { font-size: 12.5px; font-weight: 700; color: var(--amarillo-hondo); }
.pc-premio-mas { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--tinta); color: #fff; }
.pc-premio-mas svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .pc-premio:hover { transform: translateY(-1px); box-shadow: 0 0 0 2px var(--tinta), 0 8px 16px -8px rgba(20, 18, 26, 0.35); } }
.pc-premio:active { transform: scale(0.98); }
.pc-premio:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.pc-falta { margin: 10px 0 0 38px; font-size: 13.5px; color: #3d3b48; }

/* /cuenta › Mis puntos */
.pts { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: 18px; align-items: stretch; max-width: 980px; }
.pts-saldo {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: center;
  min-height: 210px; padding: 26px 28px; border-radius: 26px; color: var(--tinta);
  background:
    radial-gradient(70% 80% at 85% 20%, rgba(255, 255, 255, 0.45), transparent 70%),
    repeating-conic-gradient(from -6deg at 85% 20%, rgba(255, 255, 255, 0.22) 0 8deg, transparent 8deg 16deg),
    var(--amarillo);
  box-shadow: 0 0 0 2px var(--tinta), 0 18px 36px -22px rgba(20, 18, 26, 0.6);
}
.pts-saldo::after {   /* la estrella grande, de fondo */
  content: ''; position: absolute; right: -18px; bottom: -26px; z-index: -1; width: 150px; height: 150px; opacity: 0.16; background: var(--tinta);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.7 5.6 6.1.8-4.5 4.2 1.1 6.1L12 16.4l-5.4 2.9 1.1-6.1L3.2 9l6.1-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.7 5.6 6.1.8-4.5 4.2 1.1 6.1L12 16.4l-5.4 2.9 1.1-6.1L3.2 9l6.1-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(-14deg);
}
.pts-rotulo { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.pts-n { margin: 2px 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.pts-n b { font: 900 clamp(56px, 7vw, 80px)/0.95 'Nunito', system-ui, sans-serif; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pts-n span { padding: 5px 12px 4px; border-radius: 999px; background: var(--papel); font: 900 15px/1 'Nunito', system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: inset 0 0 0 2px var(--tinta); }
.pts-pend { margin: 14px 0 0; width: fit-content; padding: 6px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.72); font-size: 14px; font-weight: 700; }
.pts-lado { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 22px 24px; border-radius: 26px; background: #f6f7fb; }
.pts-proximo p { margin: 0 0 10px; font-size: 16px; line-height: 1.4; }
.pts-barra { position: relative; height: 14px; border-radius: 999px; background: #e3e5ec; overflow: hidden; }
.pts-barra span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--celeste-btn); }
.pts-barra span::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.22) 0 8px, transparent 8px 16px); }
.pts-como { margin: 0; font-size: 14.5px; line-height: 1.55; color: #3d3b48; max-width: 60ch; }
.pts-como b { color: var(--tinta); }

.pts + .cuenta-h2, .prems + .cuenta-h2 { margin-top: 34px; }
.prems { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 14px; }
.prem {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--papel);
  box-shadow: 0 0 0 1.5px #e6e4ec, 0 8px 20px -16px rgba(20, 18, 26, 0.35);
}
.prem-foto { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: #f3f5fa; }
.prem-foto img { width: 100%; height: 100%; object-fit: contain; }
.prem:not(.alcanza) .prem-foto img { filter: saturate(0.55); opacity: 0.8; }
.prem-info { display: grid; gap: 4px; padding: 12px 14px 4px; }
.prem-info b { font-size: 15px; line-height: 1.25; }
.prem-pts { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 3px 9px 3px 7px; border-radius: 999px; background: #fff1bf; color: #574100; font-size: 13px; font-weight: 800; }
.prem-pts svg { width: 13px; height: 13px; flex: none; color: var(--amarillo-hondo); }
.prem-boton { margin: 10px 14px 14px; }
.prem-quiero { --c-fuerte: var(--tinta); --sobre: #fff; }
.prem-falta { margin: 10px 14px 16px; font-size: 13.5px; font-weight: 700; color: var(--tinta-suave); }

.pts-hist { list-style: none; margin: 0; padding: 0; max-width: 760px; border-radius: 20px; background: var(--papel); box-shadow: 0 0 0 1.5px #e6e4ec; }
.pts-mov { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 18px; }
.pts-mov + .pts-mov { border-top: 1px solid #eef0f4; }
.pts-mov-fecha { font-size: 13px; font-weight: 600; color: var(--tinta-suave); }
.pts-mov-que { font-size: 14.5px; color: #3d3b48; overflow-wrap: anywhere; }
.pts-mov-que b { color: var(--tinta); margin-right: 6px; }
.pts-mov-n { font: 900 16px/1 'Nunito', system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--tinta-suave); }
.pts-mov-n.mas { color: #15803d; }
.pts-mov-n.menos { color: var(--rojo-hondo); }

@media (max-width: 760px) {
  .pts { grid-template-columns: minmax(0, 1fr); }
  .pts-saldo { min-height: 0; padding: 22px; }
  .pts-lado { padding: 18px; }
  .pts-mov { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 14px; }
  .pts-mov-fecha { grid-column: 1; }
  .pts-mov-que { grid-column: 1; grid-row: 2; }
  .pts-mov-n { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------- Legales (Santi 04/10): términos, privacidad, botón de arrepentimiento y la franja del pie ---------- */
.legal { padding-bottom: clamp(48px, 7vw, 90px); }
.legal-cabeza { padding-bottom: clamp(18px, 3vw, 30px); }
.legal-cabeza .sub { max-width: 60ch; }
.legal-texto { max-width: 70ch; font-size: 16.5px; line-height: 1.65; color: #2e2c38; }
.legal-texto h2 { font-size: clamp(21px, 2.2vw, 26px); letter-spacing: -0.02em; margin: 34px 0 10px; color: var(--tinta); }
.legal-texto h2:first-child { margin-top: 0; }
.legal-texto p { margin: 0 0 12px; text-wrap: pretty; }
.legal-texto ul, .legal-texto ol { margin: 0 0 12px; padding-left: 1.3em; }
.legal-texto li { margin: 0 0 8px; }
.legal-texto a:not(.btn) { color: #0176b8; font-weight: 600; text-underline-offset: 3px; }
.legal-texto [hidden] { display: none; }
.legal-ojo { padding: 14px 16px; border-radius: 16px; background: #fff1cf; color: #4a3500; }
.legal-aaip { font-size: 14px; color: var(--tinta-suave); }
.legal-fecha { margin-top: 26px !important; font-size: 14px; color: var(--tinta-suave); }
.legal-arr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(28px, 5vw, 64px); align-items: start; }
.legal-form { padding: clamp(20px, 3vw, 28px); border-radius: 24px; background: #fff; box-shadow: 0 1px 2px rgba(20, 18, 26, 0.06), 0 18px 40px -26px rgba(20, 18, 26, 0.35); }
.legal-form h2 { font-size: 22px; margin: 0 0 4px; }
.legal-form label small { font-weight: 500; color: var(--tinta-suave); }
.legal-form .btn { margin-top: 20px; width: 100%; justify-content: center; }
.legal-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.legal-estado { margin-top: 14px; font-size: 15px; line-height: 1.5; }
.legal-estado:empty { display: none; }
.legal-estado.mal { color: #a01008; }
.legal-estado.listo { display: grid; gap: 8px; padding: 18px; border-radius: 18px; background: #e7f7ec; color: #14432a; }
.legal-codigo { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: 30px; font-weight: 800; letter-spacing: 0.04em; color: var(--tinta); }
@media (max-width: 859px) { .legal-arr { grid-template-columns: minmax(0, 1fr); } }

.pie-legal {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  margin-top: 26px; padding-top: 18px; padding-bottom: 6px; border-top: 1px solid rgba(20, 18, 26, 0.14);
  font-size: 13.5px;
}
.pie-sitio .pie-legal a:not(.marca) { display: inline; }
.pie-sitio .pie-legal > span { color: var(--tinta-suave); }
.pie-sitio .pie-legal a.pie-arrepentimiento {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; border-radius: 999px;
  background: var(--tinta); color: #fff; font-weight: 800; text-decoration: none;
}
.pie-sitio .pie-legal a.pie-arrepentimiento:hover { background: #c11109; }
.pie-arrepentimiento svg { width: 14px; height: 14px; transform: scaleX(-1); }

/* ---------- "Todo lo que imprimimos" cortado en la tercera fila (Santi 04/10) ----------
   Lo que pasa de la tercera fila se esconde y abajo va "Ver todo" con cuántas piezas son. */
.todo-mas { display: flex; justify-content: center; margin-top: 34px; }
.todo-mas[hidden] { display: none; }
.todo-mas .btn { min-width: 220px; }
.todo-mas .btn small { font-size: 13px; font-weight: 600; }
.todo-mas .btn svg { width: 18px; height: 18px; transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .todo-mas .btn:hover svg { transform: translateX(3px); } }
/* /catalogo/: todo en una grilla, sin secciones (en el celular, en lista: no es la fila que se desliza). */
.pagina-todo { padding-top: 40px; }
@media (max-width: 599px) {
  .pagina-todo .grilla { display: grid; overflow: visible; margin: 0; padding: 16px 0 0; }
}

/* ---------- Cards todas iguales y más compactas (Santi 04/10) ----------
   Antes, una foto alta estiraba su cuadro (hasta 357 px contra 252) y, como las cards de una grilla
   copian a la más alta, al resto le sobraban hasta 120 px vacíos arriba de los botones; y el renglón
   de colores/fotos quedaba vacío en casi todas. Ahora:
   - el cuadro de la foto mide siempre lo mismo y la foto se ajusta sola adentro (cualquier proporción);
   - los colores y las fotos de cada estilo van adentro del cuadro, abajo (con lugar reservado);
   - el nombre llega a dos renglones como mucho y la medida tiene su renglón aunque esté vacía; la
     grilla iguala las cards (el poquito que sobra queda arriba de los botones). */
.prod { padding: 10px 12px 14px; }
.prod .fig { min-height: 0; }
.prod .fig .foto-prod {
  position: absolute; z-index: 1; max-width: none; max-height: none;
  top: var(--ct, 12%); left: var(--cl, 11%);
  width: calc(100% - var(--cl, 11%) - var(--cr, 11%)); height: calc(100% - var(--ct, 12%) - var(--cb, 12%));
  object-fit: contain; object-position: var(--ox, 50%) var(--oy, 50%);
}
.prod .fig .variantes {
  position: absolute; z-index: 2; left: 50%; bottom: 10px; transform: translateX(-50%);
  margin: 0; min-height: 0; gap: 6px; max-width: calc(100% - 20px);
}
.prod .fig .variantes:has(.punto) {
  padding: 6px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(20, 18, 26, 0.12);
}
.prod .fig .mini { width: 40px; height: 40px; padding: 3px; border-radius: 11px; background: var(--papel); box-shadow: 0 2px 6px rgba(20, 18, 26, 0.1); }
.prod .fig .punto { width: 20px; height: 20px; }
.prod .fig .punto + .punto { margin-left: 0; }
/* el lugar de la fila de abajo: la foto queda arriba de ella */
.prod .fig.con-variantes { --cb: 58px; }
.prod .fig.con-variantes:has(.punto) { --cb: 48px; }
.prod .fig.con-variantes > svg { margin-bottom: 34px; }
.prod .card-datos { margin-top: 12px; }
.prod .nom:not(.nom-con-fx) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.prod .med { min-height: 1.35em; }
.prod .pre { margin-top: 6px; }
.prod .card-acciones { margin-top: 12px; }
.prod .card-acciones .card-sumar { height: 44px; }
.grilla { grid-auto-rows: 1fr; }
@media (max-width: 599px) { .grilla { grid-auto-rows: 1fr; } }

/* ---------- Fotos que vinieron cortadas (medirCorte en super3d.js) ----------
   La foto se apoya contra el borde del marco donde está cortada, así el corte coincide con el
   marco y la pieza parece asomarse; si toca los cuatro lados (foto con fondo), llena el marco. */
.prod .fig.con-corte .foto-prod { transform-origin: var(--ox, 50%) var(--oy, 50%); }
.fig.corte-arriba, .ficha-visor.corte-arriba { --ct: 0%; --oy: 0%; }
.fig.corte-abajo, .ficha-visor.corte-abajo { --cb: 0%; --oy: 100%; }
.fig.corte-arriba.corte-abajo, .ficha-visor.corte-arriba.corte-abajo { --oy: 50%; }
.fig.corte-izq, .ficha-visor.corte-izq { --cl: 0%; --ox: 0%; }
.fig.corte-der, .ficha-visor.corte-der { --cr: 0%; --ox: 100%; }
.fig.corte-izq.corte-der, .ficha-visor.corte-izq.corte-der { --ox: 50%; }
.prod .fig.corte-todo .foto-prod { object-fit: cover; filter: none; }
.prod .fig.corte-abajo .foto-prod { filter: none; }
/* con colores o estilos abajo, la foto deja su lugar aunque venga cortada abajo */
.prod .fig.con-variantes.corte-abajo { --cb: 58px; }
.prod .fig.con-variantes.corte-abajo:has(.punto) { --cb: 48px; }
/* al pasar el mouse crece desde el borde donde está apoyada: nunca se despega del marco */
@media (hover: hover) and (pointer: fine) {
  .prod:hover .fig.con-corte .foto-prod { transform: scale(1.04); }
}
/* La ficha: la foto ocupa el visor (sin el margen de los lados cortados; --vp es el margen de siempre). */
.ficha-visor.con-corte { --vp: 32px; overflow: hidden; min-height: 430px; }
.ficha-visor.con-corte .visor-foto {
  position: absolute; max-width: none; max-height: none;
  top: var(--ct, var(--vp)); left: var(--cl, var(--vp));
  width: calc(100% - var(--cl, var(--vp)) - var(--cr, var(--vp))); height: calc(100% - var(--ct, var(--vp)) - var(--cb, var(--vp)));
  object-fit: contain; object-position: var(--ox, 50%) var(--oy, 50%);
}
.ficha-visor.corte-todo .visor-foto { object-fit: cover; filter: none; }
.ficha-visor.corte-abajo .visor-foto { filter: none; }
@media (max-width: 860px) { .ficha-visor.con-corte { min-height: 340px; } }
@media (max-width: 640px) { .ficha-visor.con-corte { min-height: 260px; --vp: 20px; } }
@media (max-width: 640px) and (max-height: 600px) { .ficha-visor.con-corte { min-height: 210px; } }

/* ---------- Efecto en el nombre: neón y/o degradé (Santi 04/10; nombreFx en super3d.js) ----------
   Neón: sólo las letras, sin cartel. Van en el tono que se lee sobre la card y con su luz brillante
   alrededor (un brillo pegado a la letra y una copia difuminada detrás). La primera vez que la card
   aparece en pantalla se prenden titilando, como un tubo, y después la luz respira.
   Degradé: los colores corren por las letras, en un tramo de 9em que se repite (el loop no salta).
   Lo que se mueve sólo corre con la card en pantalla (.en-vista) y nunca con "menos movimiento". */
.prod .nom.nom-con-fx { align-self: flex-start; max-width: 100%; }
.nom-fx { position: relative; display: inline-block; max-width: 100%; }
.nom-fx-tubo { position: relative; display: block; }
.nom-fx-txt { position: relative; z-index: 1; }
.nom-fx-halo { position: absolute; inset: 0; z-index: 0; pointer-events: none; user-select: none; }
.nom-fx-luz { display: block; }

.fx-degrade .nom-fx-txt, .fx-degrade .nom-fx-luz {
  background: var(--fx-grad) 0 0 / 9em 100% repeat-x;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.fx-degrade .nom-fx-luz { background-image: var(--fx-grad-luz); }

.fx-neon:not(.fx-degrade) .nom-fx-txt { color: var(--fx-nucleo); text-shadow: 0 0 1.5px color-mix(in srgb, var(--fx1) 70%, transparent); }
.fx-neon .nom-fx-luz { color: var(--fx1); filter: blur(6px); opacity: 0.6; }   /* más tenue: la letra se sigue leyendo contra su propia luz */

/* Se prende: apagado mientras espera (sólo si el JS lo está vigilando), titila y queda encendido.
   Apagado, la letra se ve igual (un poco más tenue) y sin luz. */
.fx-neon[data-fx]:not(.encendido) .nom-fx-tubo { opacity: 0.6; }
.fx-neon[data-fx]:not(.encendido) .nom-fx-halo { opacity: 0; }
.fx-neon.encendido .nom-fx-tubo { animation: fx-prender 1s steps(1, end) var(--fx-espera, 0ms) both; }
.fx-neon.encendido .nom-fx-halo { animation: fx-prender-luz 1s steps(1, end) var(--fx-espera, 0ms) both; }
@keyframes fx-prender {
  0% { opacity: 0.6; }
  9% { opacity: 1; }
  14% { opacity: 0.65; }
  22% { opacity: 1; }
  27% { opacity: 0.75; }
  38%, 100% { opacity: 1; }
}
@keyframes fx-prender-luz {
  0% { opacity: 0; }
  9% { opacity: 1; }
  14% { opacity: 0.1; }
  22% { opacity: 0.9; }
  27% { opacity: 0.3; }
  38%, 100% { opacity: 1; }
}
/* Encendido respira apenas; el degradé corre. */
.prod.en-vista .fx-neon .nom-fx-luz { animation: fx-respirar 2.8s ease-in-out infinite alternate; will-change: opacity; }
/* el degradé corre tres vueltas cada vez que la card aparece (y sin parar con el mouse encima):
   animar el fondo de un texto repinta en cada cuadro (auditoría 04/10) */
.prod.en-vista .fx-degrade .nom-fx-txt { animation: fx-correr 5s linear 3; }
.prod.en-vista .fx-neon.fx-degrade .nom-fx-luz { animation: fx-correr 5s linear 3, fx-respirar 2.8s ease-in-out infinite alternate; will-change: opacity; }
@media (hover: hover) and (pointer: fine) {
  .prod.en-vista:hover .fx-degrade .nom-fx-txt { animation-iteration-count: infinite; }
  .prod.en-vista:hover .fx-neon.fx-degrade .nom-fx-luz { animation-iteration-count: infinite, infinite; }
}
@keyframes fx-respirar { from { opacity: 0.4; } to { opacity: 0.68; } }
@keyframes fx-correr { to { background-position: -9em 0; } }
@media (hover: hover) and (pointer: fine) {
  .fx-neon .nom-fx-halo { transition: filter 200ms ease; }
  .prod:hover .fx-neon .nom-fx-halo { filter: brightness(1.15) saturate(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-neon .nom-fx-tubo, .fx-neon .nom-fx-halo, .fx-neon .nom-fx-luz, .fx-degrade .nom-fx-txt { animation: none !important; opacity: 1; }
  .fx-neon .nom-fx-luz { opacity: 0.6; }
}

/* ---------- Auditoría 04/10: foco y pantallas bajas ---------- */
/* La bandeja es oscura: su anillo de foco va por fuera, en tinta sobre la página. */
.bandeja:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.bandeja .btn:focus-visible, .btn-borde-claro:focus-visible { outline-color: #fff; }
/* Con poca altura (celular acostado, zoom grande) la barra no queda fija: se va con la página. */
@media (max-height: 460px) { .nav { position: relative; } }
/* A 320 px "A medida" se cortaba: la barra se aprieta un poco más. */
@media (max-width: 359px) {
  .marca { gap: 8px; }
  .marca img { width: 32px; height: 32px; }
  .marca-texto b { font-size: 19px; }
  .nav-links { font-size: 14px; }
}
/* Las tarjetas de categoría reservan su lugar hasta que llega el JS (las pone el servidor vacías):
   en el celular la portada saltaba 1.900 px (CLS 0,40). */
.cat-tile-hueco { background: #f4f1ec; pointer-events: none; }
/* Tienda en pausa (crítica 04/10): el carrito lo dice al toque y el formulario no se muestra. */
.resumen.en-pausa > :not(h2, .ts, .renglon, .pausa-pedido) { display: none !important; }
.pausa-pedido { margin-top: 18px; padding: 16px 18px; border-radius: 16px; background: #fff7d9; border: 2px solid #fdc201; }
.pausa-pedido p { margin: 0 0 8px; font-size: 15px; line-height: 1.5; color: #3d3b48; }
.pausa-pedido .pausa-pedido-titulo { font-weight: 800; font-size: 17px; color: var(--tinta); }
.pausa-pedido .btn { margin-top: 6px; }
.bm-pausa { margin: 0 0 4px; font-size: 13.5px; line-height: 1.4; color: #3d3b48; flex: 1 1 100%; }
/* La ficha: lo que hay que saber antes de comprar, siempre en el mismo lugar (crítica 04/10). */
.ficha-datos { margin: 22px 0 0; padding: 4px 0; border-top: 1.5px solid var(--linea, rgba(20, 18, 26, 0.12)); }
.ficha-datos > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1.5px solid var(--linea, rgba(20, 18, 26, 0.12)); }
.ficha-datos dt { font-weight: 800; font-size: 14px; color: var(--tinta); }
.ficha-datos dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: #3d3b48; }
.ficha-mas { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 14px 0 0; font-size: 14.5px; font-weight: 600; }
.ficha-mas a { color: var(--tinta); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: rgba(20, 18, 26, 0.35); padding-block: 8px; }
.ficha-mas a:hover { text-decoration-color: var(--tinta); }
.ficha-mas span { color: var(--tinta-suave); }
@media (max-width: 420px) { .ficha-datos > div { grid-template-columns: 1fr; gap: 2px; } }