/* 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); }

/* ---------- 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); }
.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; }
}
@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 currentColor; outline-offset: 3px; }
.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.
   De card en card cambia la pose del producto, no el layout: pose-a
   inclinado y saliéndose por arriba y por la derecha, pose-b por arriba,
   pose-c por la derecha. Sin render todavía (.sin-foto), la pieza
   dibujada ocupa el mismo lugar con la misma sombra. */

.cat-tiles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 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: #6b7280;
  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: la mitad derecha de la card, saliéndose por el borde. */
.cat-tile-fig {
  position: absolute; z-index: 2; width: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-pieza);
  filter: drop-shadow(0 14px 18px rgba(20, 18, 26, 0.18));
  transform: rotate(var(--giro, 0deg));
  transition: transform 300ms var(--ease-out);
}
.cat-tile-fig img { width: 100%; height: 100%; object-fit: contain; }
/* Los símbolos son cuadrados: ocupan el ancho de la caja, no se estiran. */
.cat-tile-fig svg { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.cat-tile-fig svg { display: none; }
.cat-tile.sin-foto .cat-tile-fig img { display: none; }
.cat-tile.sin-foto .cat-tile-fig svg { display: block; }
/* El producto siempre va centrado en su caja; lo que se sale de la card lo
   da la caja (más alta que la card y corrida hacia arriba) y la inclinación,
   no un apoyo en el borde: un render cuadrado queda centrado, uno alto
   (2:3, llenando el cuadro) asoma por arriba. La salida por la derecha se
   mide para que en la última columna no se corte con el borde de la página. */
.pose-a .cat-tile-fig { top: -10%; bottom: 0; right: 0; --giro: 12deg; }
.pose-b .cat-tile-fig { top: -16%; bottom: 4%; right: 0; }
.pose-c .cat-tile-fig { top: -4%; bottom: -4%; right: -7%; }

/* 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; }

@media (max-width: 1023px) {
  .cat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pose-a .cat-tile-fig { --giro: 10deg; }
}
@media (max-width: 599px) {
  .cat-tiles { grid-template-columns: minmax(0, 1fr); }
  .cat-tile { aspect-ratio: 1.3 / 1; }
  .cat-tile-texto { max-width: 54%; }
  .pose-a .cat-tile-fig { --giro: 8deg; }
  .pose-c .cat-tile-fig { right: -5%; }
}

/* ---------- 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); }
.prod.agarrada { transition: none; z-index: 60; cursor: grabbing; box-shadow: 0 26px 50px rgba(20, 18, 26, 0.22); }

/* El área de producto: tinte leve del color, la pieza flotando con su
   sombra, y tres trazos de la marca alrededor. Nada más. */
.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 .fig-trazos i { position: absolute; width: 22px; height: 6px; border-radius: 999px; background: var(--c); }
.prod .fig-trazos i:nth-child(1) { left: 9%; top: 24%; width: 18px; transform: rotate(-38deg); }
.prod .fig-trazos i:nth-child(2) { right: 8%; top: 36%; transform: rotate(-16deg); }
.prod .fig-trazos i:nth-child(3) { right: 12%; top: 48%; width: 16px; transform: rotate(32deg); }
.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: 30px; }
.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(--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; }
.agregar-chico {
  flex: none; width: 46px; height: 46px; border-radius: 50%; padding: 0;
  appearance: none; border: 2px solid var(--tinta); background: var(--papel); color: var(--tinta); cursor: pointer;
  display: grid; place-items: center;
  transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out), background-color 160ms ease, color 160ms ease;
}
.agregar-chico svg { width: 20px; height: 20px; }
.agregar-chico.sumado { background: var(--tinta); color: var(--papel); }
.agregar-chico.late { animation: latir 360ms var(--ease-out); }
.agregar-chico:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .agregar-chico:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(20, 18, 26, 0.16); }
}
.agregar-chico:active { transform: translateY(1px) scale(0.95); transition-duration: 80ms; }

.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; }
.cinta:hover .cinta-pista, .cinta:focus-within .cinta-pista { animation-play-state: paused; }
@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; }
.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; }

/* ---------- 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.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.lista { transform: translateY(-8px); background: var(--amarillo); color: var(--sobre-amarillo); }
.bandeja.encima { transform: translateY(-8px) scale(1.06); border-color: var(--sobre-amarillo); }
.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; }

/* ---------- 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; }
  .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; }
  .cinta-pista { animation: none; }
}

/* 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; }

.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; } }


/* ---------- Botón de velocidad del carrusel ---------- */

.cinta-cabeza { display: flex; align-items: center; justify-content: flex-end; }
.vel-boton {
  appearance: none; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--tinta);
  background: var(--papel); border: 2px solid rgba(20,18,26,0.42);
  border-radius: 999px; padding: 10px 16px; min-height: 44px;
  transition: border-color 160ms ease, transform 140ms var(--ease-out);
}
.vel-boton:hover { border-color: var(--tinta); }
.vel-boton:active { transform: scale(0.96); }
.vel-boton:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.vel-boton svg { transition: transform 200ms var(--ease-out); }
.vel-boton[aria-pressed='true'] { border-color: var(--tinta); background: var(--tinta); color: var(--papel); }
.vel-boton[aria-pressed='true'] svg { transform: translateX(2px); }

.cinta-pista { animation-duration: var(--vel, 46s); }
/* Pausar de verdad, no solo al pasar el mouse. */
.cinta.parada .cinta-pista { animation-play-state: paused; }

/* ---------- 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(620px, 100%); }
.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; }
#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 .fig-trazos, .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: 74px; transform: translateX(-50%); display: flex; gap: 8px; }
.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, 36px) clamp(22px, 3vw, 36px) 0; overflow-y: auto; 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: 47vh minmax(0, 1fr); }
  .p3d-mandos { position: relative; left: auto; bottom: auto; transform: none; margin: -46px auto 0; z-index: 1; width: max-content; }
  .p3d-ayuda { padding: 10px 14px 4px; }
  .p3d-dos { grid-template-columns: 1fr; }
}
.p3d-mando { white-space: nowrap; }
.fila-fig .fila-3d { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; }