/* ============================================================
   PanzaPack — hoja de estilos única.
   Dirección: «Fiesta sin disculpas». Regalo absurdo, colores de
   confeti, contornos gruesos y sombras duras. Nada de degradados.
   Cambia los tokens de :root y cambia toda la tienda.
   ============================================================ */

:root {
  --ink: #1b0a2a;
  --ink-2: #4a3a5c;
  --paper: #fff3dc;
  --white: #ffffff;
  --surface: #ffffff; /* bandas alternas en páginas interiores */
  --yel: #ffd23f;
  --pink: #ff5c9e;
  --purp: #5a1fd1;
  --purp-2: #4a16b3;
  --ora: #ff7b22;
  --grn: #2bd27f;
  --skin: #f3b089;
  --sky: #7fd4ff;
  --on-dark: #efe6ff;

  --disp: "Bricolage Grotesque", "Arial Black", Impact, sans-serif;
  --body: Figtree, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --line: 3px solid var(--ink);
  --line-gorda: 4px solid var(--ink);
  --wrap: 1240px;

  /* Movimiento: curvas de easing.dev. Nunca ease-in en interfaz. */
  --out: cubic-bezier(0.23, 1, 0.32, 1);
  --move: cubic-bezier(0.77, 0, 0.175, 1);

  /* Estrella de confeti para pegatinas y separadores */
  --burst: polygon(50% 0, 61.7% 13.9%, 79.4% 9.5%, 80.7% 27.7%, 97.6% 34.5%, 88% 50%, 97.6% 65.5%, 80.7% 72.3%, 79.4% 90.5%, 61.7% 86.1%, 50% 100%, 38.3% 86.1%, 20.6% 90.5%, 19.3% 72.3%, 2.4% 65.5%, 12% 50%, 2.4% 34.5%, 19.3% 27.7%, 20.6% 9.5%, 38.3% 13.9%);

  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; height: auto; }
/* Sin esto, cualquier clase con display:grid/flex gana al atributo hidden y
   lo «oculto» se ve (pasó con el resultado del test). */
[hidden] { display: none !important; }
picture { display: contents; }
a { color: inherit; text-underline-offset: 0.18em; }
p a, li a, td a { color: var(--purp); font-weight: 600; }
.dk p a, .dk li a { color: var(--yel); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--disp);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.dk :focus-visible { outline-color: var(--yel); }
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 1rem; top: -5rem; z-index: 200;
  background: var(--ink); color: #fff; padding: 0.9rem 1.1rem;
  border-radius: 0.6rem; font-weight: 800;
}
.skip:focus { top: 1rem; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

.section { padding: clamp(4rem, 9vw, 7rem) 0; }
.section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.dk { background: var(--purp); color: #fff; }
.section--ink { background: var(--ink); color: #fff; }
.section--pink { background: var(--pink); border-block: var(--line-gorda); }
.section--yel { background: var(--yel); }
.section--white { background: var(--white); border-block: var(--line-gorda); }

.eyebrow {
  --r: -3deg;
  display: inline-block;
  background: var(--grn);
  color: var(--ink);
  border: var(--line);
  border-radius: 0.6rem;
  padding: 0.35rem 0.75rem;
  font: 800 0.8rem/1.2 var(--body);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transform: rotate(var(--r));
  margin-bottom: 1.1rem;
}
.dk .eyebrow, .section--ink .eyebrow { background: var(--yel); }

.section-title { font-size: clamp(2.4rem, 6.5vw, 4.8rem); }
/* En fondo claro el énfasis va en morado; en fondo oscuro, en amarillo. */
.section-title em { font-style: normal; color: var(--purp); }
.dk .section-title em, .section--ink .section-title em, .closer__title em { font-style: normal; color: var(--yel); }
.rule { display: none; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.26rem); max-width: 38rem; margin-top: 1.2rem; }
.dk .lead, .section--ink .lead { color: var(--on-dark); }

.hg {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end;
  gap: 1rem 2.5rem; margin-bottom: clamp(2.4rem, 5vw, 3.6rem);
}
.hg .lead { max-width: 30rem; margin-top: 0; }

/* ---------- Botones ---------- */
.btn {
  --sh: var(--pink);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 52px; padding: 0.8rem 1.6rem;
  border: var(--line); border-radius: 999px;
  background: var(--ink); color: #fff;
  font: 800 1.05rem/1 var(--body); text-decoration: none; cursor: pointer;
  box-shadow: 5px 5px 0 var(--sh);
  transition: transform 220ms var(--out), box-shadow 220ms var(--out);
}
.btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--sh); }
.btn--primary { }
.btn--ghost { --sh: var(--ink); background: #fff; color: var(--ink); }
.btn--onDark { --sh: var(--ink); background: var(--yel); color: var(--ink); }
.dk .btn--onDark, .section--ink .btn--onDark { --sh: var(--pink); }
.btn--block { width: 100%; }
.btn--sm { min-height: 44px; padding: 0.55rem 1rem; font-size: 0.95rem; box-shadow: 3px 3px 0 var(--sh); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn.is-pressed { animation: press 280ms var(--out); }
@keyframes press { 40% { transform: translate(3px, 3px) scale(0.96); } }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem 1.2rem; margin-top: 2rem; }

/* ---------- Marquesina y estrellas ---------- */
.mq { display: flex; width: max-content; animation: mq 32s linear infinite; }
.mq > span { display: flex; align-items: center; gap: 1.4rem; padding-right: 1.4rem; white-space: nowrap; }
.mq--rev { animation-direction: reverse; }
@keyframes mq { to { transform: translateX(-50%); } }
.star { display: inline-block; width: 0.8em; height: 0.8em; flex: none; background: currentColor; clip-path: var(--burst); }

.announce {
  background: var(--ink); color: var(--yel);
  font: 800 0.85rem/1 var(--body); text-transform: uppercase; letter-spacing: 0.05em;
  overflow: hidden; padding: 0.75rem 0;
}

/* ---------- Cabecera ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }
.brand {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 800 1.65rem/1 var(--disp); letter-spacing: -0.03em; text-decoration: none;
}
.brand b {
  display: inline-block; margin-left: 0.12em; padding: 0.08em 0.32em 0.12em;
  background: var(--skin); border: var(--line); border-radius: 0.5em 0.5em 0.9em 0.9em;
  transform: rotate(-6deg); transition: transform 300ms var(--out);
}
.site-nav { display: none; gap: 0.15rem; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.85rem;
  border-radius: 999px; font-weight: 800; text-decoration: none;
  transition: background-color 160ms var(--out);
}
.site-nav a[aria-current="page"] { background: var(--yel); }
.site-header__actions { display: flex; align-items: center; gap: 0.6rem; }
.cart-btn {
  --sh: var(--ink);
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; padding: 0.45rem 0.6rem 0.45rem 1.1rem;
  background: var(--yel); border: var(--line); border-radius: 999px; box-shadow: 3px 3px 0 var(--sh);
  font-weight: 800; cursor: pointer; transition: transform 220ms var(--out);
}
.cart-btn:active { transform: translate(2px, 2px); }
.snipcart-items-count {
  display: inline-grid; place-items: center; min-width: 1.8rem; height: 1.8rem; padding: 0 0.3rem;
  border-radius: 999px; background: var(--ink); color: var(--yel); font-size: 0.9rem;
}
.snipcart-items-count.bump { animation: bump 300ms var(--out); }
@keyframes bump { 50% { transform: scale(1.4) rotate(-10deg); } }

.menu { position: relative; }
.menu summary {
  list-style: none; display: grid; place-items: center; width: 48px; height: 48px;
  border: var(--line); border-radius: 50%; background: #fff; cursor: pointer;
}
.menu summary::-webkit-details-marker { display: none; }
.menu__bars, .menu__bars::before, .menu__bars::after {
  display: block; width: 20px; height: 3px; background: var(--ink); border-radius: 2px;
  transition: transform 200ms var(--out), opacity 200ms var(--out);
}
.menu__bars { position: relative; }
.menu__bars::before, .menu__bars::after { content: ""; position: absolute; left: 0; }
.menu__bars::before { top: -7px; }
.menu__bars::after { top: 7px; }
.menu[open] .menu__bars { background: transparent; }
.menu[open] .menu__bars::before { transform: translateY(7px) rotate(45deg); }
.menu[open] .menu__bars::after { transform: translateY(-7px) rotate(-45deg); }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + 0.8rem); z-index: 60;
  display: grid; min-width: 230px; padding: 0.5rem;
  background: #fff; border: var(--line-gorda); border-radius: 1.2rem; box-shadow: 6px 6px 0 var(--purp);
  transform-origin: top right;
}
.menu[open] .menu__panel { animation: menu-in 220ms var(--out); }
@keyframes menu-in { from { opacity: 0; transform: scale(0.94) translateY(-6px); } }
.menu__panel a {
  display: flex; align-items: center; min-height: 48px; padding: 0 0.9rem;
  border-radius: 0.7rem; font-weight: 800; text-decoration: none;
}
.menu__panel a:focus-visible, .menu__panel a:active { background: var(--yel); }

@media (min-width: 1080px) {
  .site-nav { display: flex; }
  .menu { display: none; }
}

/* ---------- Portada ---------- */
.hero { position: relative; isolation: isolate; padding: clamp(2rem, 5vw, 4.5rem) 0 clamp(4rem, 8vw, 6rem); }
.hero__grid { display: grid; gap: clamp(3.4rem, 6vw, 4rem); align-items: center; }
.hero h1 { font-size: clamp(3rem, 12vw, 6rem); line-height: 0.88; margin: 0.3rem 0 1.5rem; }
.hero h1 .l { display: block; }
.hero h1 .hl {
  display: inline-block; padding: 0 0.12em 0.06em; background: var(--skin);
  border: var(--line-gorda); border-radius: 0.25em 0.25em 0.6em 0.6em; transform: rotate(-2deg);
}
.hero h1 .pk { color: var(--purp); }
.hero .lead { margin-top: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; margin-top: 1.6rem; }
.chips li { background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 0.35rem 0.9rem; font-weight: 600; }

.hero__art { position: relative; justify-self: center; width: min(100%, 480px); }
.frame {
  --r: 2.5deg;
  background: var(--yel); border: var(--line-gorda); border-radius: 2rem; overflow: hidden;
  box-shadow: 12px 12px 0 var(--purp); transform: rotate(var(--r));
  transition: transform 260ms var(--out);
}
.frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.frame.jig { animation: jig 750ms var(--out); }
@keyframes jig {
  18% { transform: rotate(-4deg) scale(1.04); }
  42% { transform: rotate(6deg) scale(0.98); }
  68% { transform: rotate(0.5deg) scale(1.015); }
  100% { transform: rotate(2.5deg); }
}
.stk {
  position: absolute; z-index: 2; display: grid; place-items: center; text-align: center;
  border: var(--line); font: 800 1rem/1 var(--disp); text-transform: uppercase;
}
.stk--spin { top: -1.8rem; left: -1rem; width: clamp(7rem, 22vw, 9.2rem); aspect-ratio: 1; border-radius: 50%; background: var(--pink); }
.stk--spin svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 16s linear infinite; }
.stk--spin strong { font-size: clamp(2rem, 6vw, 2.6rem); line-height: 0.8; }
.stk--spin small { display: block; font-size: 0.72rem; letter-spacing: 0.06em; margin-top: 0.15rem; }
@keyframes spin { to { transform: rotate(1turn); } }
.stk--flecha {
  right: -0.8rem; top: 58%; padding: 0.55rem 0.85rem; border-radius: 0.7rem;
  background: #fff; font-size: 1.05rem; transform: rotate(-8deg); box-shadow: 4px 4px 0 var(--ink);
}
.juguetes {
  position: absolute; z-index: 3; left: 50%; bottom: -1.6rem; transform: translateX(-50%);
  display: flex; gap: 0.6rem; white-space: nowrap;
}
.juguetes .btn { min-height: 48px; padding: 0.7rem 1.1rem; }
.poke { transform: rotate(-2deg); }
.poke:active { transform: translate(3px, 3px); }

/* Pistas de la cremallera: la primera se va en cuanto alguien la abre */
.stk--pista {
  left: -1rem; top: 57%; padding: 0.5rem 0.8rem; border-radius: 0.7rem;
  background: var(--yel); font-size: 0.95rem; transform: rotate(6deg); box-shadow: 4px 4px 0 var(--ink);
  transition: opacity 240ms var(--out), transform 240ms var(--out);
}
.stk--pista::after { content: " →"; }
[data-frame][data-tocada] ~ .stk--pista { opacity: 0; transform: rotate(6deg) scale(0.9); }
.stk--dentro {
  left: 50%; top: 80%; padding: 0.5rem 0.8rem; border-radius: 0.7rem; background: var(--grn); font-size: 0.95rem;
  box-shadow: 4px 4px 0 var(--ink); opacity: 0; transform: translate(-50%, 8px) rotate(-3deg);
  transition: opacity 240ms var(--out), transform 320ms var(--out); pointer-events: none;
}
[data-frame][data-abierta] ~ .stk--dentro { opacity: 1; transform: translate(-50%, 0) rotate(-3deg); }
.panzudo__tirador { cursor: grab; touch-action: none; }
.panzudo[data-arrastrando] .panzudo__tirador { cursor: grabbing; }
@media (hover: hover) and (pointer: fine) {
  .panzudo__tirador:hover rect { fill: #fff; }
}
.cf { position: absolute; z-index: -1; border: var(--line); animation: bob 3.8s var(--move) infinite alternate; }
.cf1 { top: 8%; left: 46%; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--sky); }
.cf2 { bottom: 7%; left: 3%; width: 2.2rem; height: 2.2rem; background: var(--ora); animation-delay: -1.4s; }
.cf3 { top: 30%; right: 2%; width: 3rem; height: 3rem; background: var(--grn); clip-path: var(--burst); border: 0; animation-delay: -2.2s; }
@keyframes bob { from { transform: translateY(0) rotate(0); } to { transform: translateY(-18px) rotate(40deg); } }
/* En móvil el confeti caería encima del titular: fuera. */
@media (max-width: 899px) { .cf { display: none; } }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.08fr 0.92fr; }
  .hero h1 { font-size: clamp(3.4rem, 6vw, 5.8rem); }
}

.tapes { overflow: hidden; padding: 2.2rem 0; }
.tape {
  width: 112%; margin-left: -6%; padding: 0.95rem 0; border-block: var(--line-gorda);
  font: 800 clamp(1.4rem, 4vw, 2.6rem)/1 var(--disp); text-transform: uppercase; overflow: hidden;
}
.tape--1 { background: var(--pink); transform: rotate(-2.5deg); }
.tape--2 { background: var(--yel); transform: rotate(1.8deg); margin-top: -0.4rem; }
.tape .mq { animation-duration: 24s; }

/* ---------- Tarjetas de producto ---------- */
.grid-products { display: grid; gap: 3rem 1.8rem; margin-top: 1rem; }
.card {
  --r: -1.5deg; --c: var(--yel);
  position: relative; display: flex; flex-direction: column;
  background: var(--c); border: var(--line-gorda); border-radius: 1.8rem;
  padding: 1rem 1rem 1.4rem; box-shadow: 8px 8px 0 var(--ink);
  transform: rotate(var(--r)); transition: transform 260ms var(--out);
}
.grid-products > .card:nth-child(3n + 2) { --r: 1.2deg; --c: var(--pink); }
.grid-products > .card:nth-child(3n + 3) { --r: -0.8deg; --c: var(--grn); }
.card__media { position: relative; display: block; border: var(--line); border-radius: 1.2rem; overflow: hidden; background: var(--paper); }
.card__media img { width: 100%; aspect-ratio: 1; object-fit: cover; mix-blend-mode: multiply; transition: transform 300ms var(--out); }
.card__code {
  position: absolute; z-index: 2; left: 0.7rem; top: 0.7rem;
  background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 0.15rem 0.6rem;
  font: 800 0.75rem/1.4 var(--body); letter-spacing: 0.04em;
}
.badge {
  position: absolute; z-index: 3; top: -1.3rem; right: -0.9rem;
  display: grid; place-items: center; text-align: center; width: 7rem; aspect-ratio: 1; padding: 1.35rem;
  background: var(--ink); color: var(--yel); clip-path: var(--burst);
  font: 800 0.8rem/1 var(--disp); text-transform: uppercase; transform: rotate(12deg);
}
.card__body { display: flex; flex: 1; flex-direction: column; }
.card__title { font-size: clamp(2rem, 3.4vw, 2.6rem); margin: 1.1rem 0 0.4rem; }
.card__title a { text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__sub { flex: 1; font-weight: 600; }
.card__foot { position: relative; z-index: 2; margin-top: 1rem; }
.card .btn { box-shadow: 4px 4px 0 #fff; --sh: #fff; }

.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.8rem; margin-bottom: 1rem; }
.price__now { font: 800 2.4rem/1 var(--disp); }
.price__was { font-weight: 600; }
.price__was s { text-decoration-thickness: 2px; }
.price__save {
  background: var(--grn); border: 2px solid var(--ink); border-radius: 999px; padding: 0.15rem 0.6rem;
  font-weight: 800; font-size: 0.9rem;
}
.price--lg .price__now { font-size: clamp(2.8rem, 6vw, 3.6rem); }

.note-specs { margin-top: 3rem; text-align: center; font-weight: 600; }

@media (min-width: 700px) {
  .grid-products { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .grid-products { grid-template-columns: repeat(3, 1fr); }
  .grid-products--2 { grid-template-columns: 1fr 1fr; max-width: 860px; }
}

/* ---------- Comparativa ---------- */
.compare-block { margin-top: clamp(3.5rem, 7vw, 5rem); }
.compare-block__title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 1.4rem; }
.table-scroll { overflow-x: auto; border: var(--line-gorda); border-radius: 1.4rem; background: #fff; box-shadow: 8px 8px 0 var(--purp); }
.compare { width: 100%; min-width: 600px; border-collapse: collapse; }
.compare caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.compare th, .compare td { padding: 0.85rem 1rem; text-align: left; border-bottom: 2px solid #eadcc4; vertical-align: middle; }
.compare thead th { background: var(--yel); border-bottom: var(--line); font: 800 1.2rem/1.1 var(--disp); }
.compare thead a { text-decoration: none; }
.compare tbody th { font-weight: 800; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare__code, .compare__label { display: block; font: 800 0.72rem/1.4 var(--body); text-transform: uppercase; letter-spacing: 0.05em; }
.compare__price td { font: 800 1.5rem/1 var(--disp); }

/* ---------- Entrega ---------- */
.dlv__grid { display: grid; gap: 3.5rem; align-items: center; }
.dlv p { font-size: 1.15rem; margin-top: 1.3rem; max-width: 36rem; color: var(--on-dark); }
.dlv .small { font-size: 1rem; }
.chart {
  --r: -1deg;
  background: var(--ink); border: var(--line-gorda); border-radius: 1.8rem;
  padding: clamp(1.3rem, 3vw, 2.3rem); box-shadow: 10px 10px 0 var(--yel); transform: rotate(var(--r));
}
.chart__row + .chart__row { margin-top: 1.8rem; }
.chart__row b { display: block; font: 800 1.35rem/1.1 var(--disp); }
.chart__row span { display: block; color: var(--on-dark); margin: 0.25rem 0 0.7rem; }
.track { position: relative; height: 3.2rem; border-radius: 0.8rem; background: #2e1d45; overflow: hidden; }
.fill { position: absolute; inset: 0; transition: transform 1.3s var(--move) 250ms; }
.chart__row + .chart__row .fill { transition-delay: 550ms; }
.fill i {
  position: absolute; top: 0; bottom: 0; border-radius: 0.8rem; background: var(--yel);
  left: calc(var(--a) / 21 * 100%); width: calc((var(--b) - var(--a)) / 21 * 100%);
}
.chart__row--lenta .fill i { background: var(--pink); }
.ax { display: flex; justify-content: space-between; margin-top: 0.9rem; color: var(--on-dark); font-size: 0.9rem; }
@media (min-width: 1000px) { .dlv__grid { grid-template-columns: 1fr 1.05fr; } }

/* ---------- El muñeco ---------- */
.panzudo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; }
.panzudo__pupila { transition: transform 140ms var(--out); }
.panzudo__ojo { transform-box: fill-box; transform-origin: 50% 60%; }
.panzudo__ojo.parpadeo { animation: parpadeo 190ms var(--move); }
@keyframes parpadeo { 50% { transform: scaleY(0.1); } }
.panzudo__panza { transform-box: fill-box; transform-origin: 50% 20%; cursor: pointer; }
.panzudo__panza.meneo { animation: meneo 620ms var(--out); }
@keyframes meneo {
  20% { transform: scale(1.06, 0.94); }
  45% { transform: scale(0.97, 1.04) rotate(-2deg); }
  70% { transform: scale(1.02, 0.99) rotate(1deg); }
}
.panzudo__tirador { transform-box: fill-box; transform-origin: 50% 0; }
.perdida__dibujo .panzudo { background: var(--sky); }

/* Botón flotante de la portada, solo en móvil */
.cta-flotante {
  position: fixed; left: 50%; bottom: 0.9rem; z-index: 45;
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 54px; padding: 0.7rem 1.4rem;
  background: var(--ink); color: #fff; border: 3px solid var(--yel); border-radius: 999px;
  box-shadow: 5px 5px 0 var(--pink); font-weight: 800; text-decoration: none; white-space: nowrap;
  transform: translate(-50%, 180%); transition: transform 320ms var(--out);
}
.cta-flotante span { color: var(--yel); font-weight: 600; }
.cta-flotante.esta-dentro { transform: translate(-50%, 0); }
html:not([data-motion]) .cta-flotante { display: none; }
@media (min-width: 960px) { .cta-flotante { display: none; } }

/* Transición entre páginas: navegar se siente como pasar de hoja, no como recargar */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: cabecera; }
  .announce { view-transition-name: marquesina; }
}

/* ---------- Test «¿Qué panza le regalo?» ---------- */
.test__grid { display: grid; gap: 2rem; align-items: start; }
.test__preguntas { display: grid; gap: 1.2rem; }
.test__pregunta {
  margin: 0; padding: 1.2rem 1.2rem 1.3rem; min-width: 0;
  background: var(--paper); border: var(--line-gorda); border-radius: 1.4rem; box-shadow: 6px 6px 0 var(--ink);
}
.test__pregunta legend { float: left; width: 100%; margin-bottom: 0.9rem; font: 800 clamp(1.3rem, 2.6vw, 1.6rem)/1.1 var(--disp); }
.test__n {
  display: inline-block; margin-right: 0.4rem; padding: 0.15rem 0.5rem; border-radius: 999px;
  background: var(--ink); color: var(--yel); font: 800 0.8rem/1.3 var(--body); vertical-align: middle;
}
.test__opciones { clear: both; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.opcion { position: relative; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcion span {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0.55rem 1rem;
  background: #fff; border: var(--line); border-radius: 999px; font-weight: 700;
  transition: background-color 160ms var(--out), color 160ms var(--out), transform 160ms var(--out);
}
.opcion input:checked + span { background: var(--ink); color: #fff; transform: rotate(-2deg); }
.opcion input:focus-visible + span { outline: 3px solid var(--purp); outline-offset: 3px; }
.test__resultado { position: relative; }
.test__vacio {
  display: grid; place-items: center; gap: 0.4rem; min-height: 320px; padding: 2rem; text-align: center;
  border: 4px dashed var(--ink); border-radius: 1.8rem; font-weight: 600;
}
.test__vacio-titulo { font: 800 1.8rem/1 var(--disp); }
.test__tarjeta {
  --r: 1.5deg;
  display: grid; gap: 0.7rem; padding: 1.2rem;
  background: var(--pink); border: var(--line-gorda); border-radius: 1.8rem; box-shadow: 10px 10px 0 var(--ink);
  transform: rotate(var(--r));
}
.test__tarjeta.revela { animation: pop 700ms var(--out) both; }
.test__veredicto { justify-self: start; background: var(--ink); color: var(--yel); border-radius: 999px; padding: 0.2rem 0.7rem; font-weight: 800; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }
.test__foto { border: var(--line); border-radius: 1.2rem; overflow: hidden; background: var(--paper); }
.test__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; mix-blend-mode: multiply; }
.test__nombre { font-size: clamp(2rem, 4vw, 2.6rem); }
.test__tarjeta .price { margin: 0; }
.test__acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.test__acciones .snipcart-add-item { flex: 1 1 100%; }
@media (min-width: 900px) {
  .test__grid { grid-template-columns: 1.2fr 0.8fr; }
  .test__resultado { position: sticky; top: 96px; }
}

/* ---------- Dedicatorias ---------- */
.dedicatoria {
  --r: -1deg;
  display: grid; gap: 1.2rem; max-width: 900px; padding: clamp(1.3rem, 4vw, 2.2rem);
  background: var(--purp); color: #fff; border: var(--line-gorda); border-radius: 1.8rem;
  box-shadow: 10px 10px 0 var(--yel); transform: rotate(var(--r));
}
.dedicatoria__titulo { font: 800 clamp(1.8rem, 4vw, 2.6rem)/1 var(--disp); }
.dedicatoria__ocasiones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.chip {
  min-height: 44px; padding: 0.4rem 0.95rem; border: 2px solid #fff; border-radius: 999px;
  background: transparent; color: #fff; font-weight: 800; cursor: pointer;
  transition: background-color 160ms var(--out), color 160ms var(--out);
}
.chip[aria-pressed="true"] { background: var(--yel); color: var(--ink); border-color: var(--ink); }
.chip:focus-visible { outline: 3px solid var(--yel); outline-offset: 3px; }
.dedicatoria__frase {
  margin: 0; padding: 1.2rem 1.4rem; background: var(--paper); color: var(--ink);
  border: var(--line); border-radius: 1.2rem; font: 800 clamp(1.4rem, 3.2vw, 2rem)/1.15 var(--disp); text-wrap: balance;
}
.dedicatoria__frase.cambia { animation: frase 360ms var(--out); }
@keyframes frase { from { opacity: 0; transform: translateY(8px) rotate(-1deg); } }
.dedicatoria__acciones { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.dedicatoria .btn--primary { background: var(--yel); color: var(--ink); --sh: var(--ink); }

/* Cabecera: al bajar marca su borde con sombra dura */
.site-header { transition: box-shadow 220ms var(--out); }
.site-header[data-bajado] { box-shadow: 0 5px 0 var(--ink); }

/* ---------- El vestidor ---------- */
.page-head--corta { padding-bottom: 0.5rem; }
.vestidor__escena { display: grid; gap: 1.6rem; padding: 1.5rem 0 3rem; }
.vestidor__lienzo { position: relative; display: grid; place-items: center; min-height: 0; }
.vestidor__svg {
  display: block; width: min(100%, 460px); height: auto; aspect-ratio: 3 / 4;
  background: var(--paper); border: var(--line-gorda); border-radius: 2rem; box-shadow: 10px 10px 0 var(--purp);
}
.vestidor__panel { display: grid; gap: 1.1rem; align-content: start; min-width: 0; }
.vestidor__prendas { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip--claro { border-color: var(--ink); color: var(--ink); background: #fff; }
.chip--claro[aria-pressed="true"] { background: var(--ink); color: var(--yel); border-color: var(--ink); }
.chip--claro:focus-visible { outline-color: var(--purp); }
.pasos { display: grid; gap: 0.6rem; list-style: none; padding: 0; margin: 0; }
.paso {
  display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 0.8rem; width: 100%; padding: 0.8rem 1rem;
  text-align: left; background: #fff; border: var(--line); border-radius: 1.1rem; cursor: pointer;
  transition: background-color 200ms var(--out), box-shadow 200ms var(--out), opacity 200ms var(--out), transform 200ms var(--out);
}
.paso__hora {
  grid-row: span 2; align-self: start; padding: 0.2rem 0.5rem; border-radius: 0.5rem;
  background: var(--ink); color: var(--yel); font: 800 0.85rem/1.3 var(--body); font-variant-numeric: tabular-nums;
}
.paso__titulo { font: 800 1.3rem/1.1 var(--disp); }
.paso__texto { font-size: 0.98rem; }
.vestidor__pie { display: grid; gap: 0.9rem; justify-items: start; }
.vestidor__barra { width: 100%; height: 12px; background: #fff; border: 3px solid var(--ink); border-radius: 999px; overflow: hidden; }
.vestidor__barra i { display: block; height: 100%; background: var(--pink); transform: scaleX(0); transform-origin: left; }
html:not([data-motion]) .vestidor__barra { display: none; }

/* Con movimiento: sección alta y escena fija mientras se recorre */
[data-motion] .vestidor { height: 560vh; }
[data-motion] .vestidor__escena {
  position: sticky; top: 72px; height: calc(100svh - 72px); padding: 1rem 0 1.2rem;
  grid-template-rows: minmax(0, 1fr) auto; align-items: stretch;
}
[data-motion] .vestidor__lienzo { order: -1; height: 100%; }
[data-motion] .vestidor__svg { width: auto; height: 100%; max-width: 100%; }
[data-motion] .paso:not(:hover) { opacity: 0.4; }
[data-motion] .pasos li.activo .paso { opacity: 1; background: var(--yel); box-shadow: 5px 5px 0 var(--ink); transform: translate(-2px, -2px); }
@media (max-width: 959px) {
  [data-motion] .pasos li:not(.activo) { display: none; }
  [data-motion] .vestidor__pie { grid-template-columns: 1fr auto; align-items: center; }
  [data-motion] .paso__texto { font-size: 0.92rem; }
}
/* Solo el paso activo enseña su texto: así la lista cabe en una pantalla */
[data-motion] .pasos li:not(.activo) .paso__texto { display: none; }
[data-motion] .pasos li:not(.activo) .paso__hora { grid-row: auto; }
@media (min-width: 960px) {
  .vestidor__escena { grid-template-columns: 0.85fr 1.15fr; align-items: center; }
  [data-motion] .vestidor__escena { grid-template-rows: minmax(0, 1fr); align-items: center; }
  [data-motion] .vestidor__lienzo { order: 0; }
  [data-motion] .vestidor__panel { max-height: 100%; }
}

/* Piezas de la escena */
.v-boca-silba, .v-nota, .v-ahi { opacity: 0; }
.v-cejas { transition: transform 300ms var(--out); }
.v-prenda.colgada .v-balanceo { animation: balanceo 3.2s ease-in-out infinite; transform-origin: 300px 150px; }
@keyframes balanceo { 50% { transform: rotate(4deg); } }
[data-disimula] .v-boca-recta { opacity: 0; }
[data-disimula] .v-boca-silba { opacity: 1; }
[data-disimula] .v-cejas { transform: translateY(-6px); }
[data-disimula] .v-cabeza { animation: silba 2.6s ease-in-out infinite; transform-origin: 300px 214px; }
@keyframes silba { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
[data-disimula] .v-pupila { animation: mira 2.6s ease-in-out infinite; }
@keyframes mira { 0%, 20% { transform: translateX(-5px); } 45%, 70% { transform: translateX(5px); } 100% { transform: translateX(-5px); } }
[data-disimula] .v-nota { animation: nota 1.8s var(--out) infinite; }
[data-disimula] .v-nota:nth-child(2) { animation-delay: 0.6s; }
[data-disimula] .v-nota:nth-child(3) { animation-delay: 1.2s; }
@keyframes nota {
  0% { opacity: 0; transform: translate(0, 0) rotate(-10deg); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(34px, -70px) rotate(18deg); }
}
[data-pillado] .v-pupila { transform: translate(5px, 3px); }
[data-pillado] .v-ahi { opacity: 1; transition: opacity 200ms var(--out); }
.v-tirador { transform-box: fill-box; transform-origin: 50% 0; }
[data-pillado] .v-tirador { animation: pillado 900ms var(--out) infinite; fill: #fff; }
@keyframes pillado { 50% { transform: scale(1.25) rotate(-8deg); } }
.v-hebilla { transform-box: fill-box; transform-origin: center; }
[data-clic] .v-hebilla { animation: clic 360ms var(--out); }
@keyframes clic { 40% { transform: scale(1.5) rotate(-12deg); } }

.stk--clic, .stk--sospecha {
  opacity: 0; pointer-events: none; padding: 0.5rem 0.85rem; border-radius: 0.7rem; box-shadow: 4px 4px 0 var(--ink);
  transition: opacity 220ms var(--out), transform 300ms var(--out);
}
.stk--clic { right: 8%; top: 56%; background: var(--grn); font-size: 1.3rem; transform: rotate(8deg) scale(0.85); }
.vestidor__svg[data-clic] ~ .stk--clic { opacity: 1; transform: rotate(8deg) scale(1); }
/* Abajo a la izquierda, sobre el suelo: arriba tapaba la cara justo cuando silba */
.stk--sospecha { left: 4%; bottom: 12%; background: var(--pink); transform: rotate(-6deg) translateY(8px); }
[data-motion] .vestidor__svg { max-height: calc(100svh - 72px - 3rem); }
.vestidor__svg[data-disimula] ~ .stk--sospecha { opacity: 1; transform: rotate(-6deg) translateY(0); }

/* ---------- Probador de la ficha ---------- */
.probador__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
.probador__marco {
  --r: -2deg;
  width: min(100%, 440px); justify-self: center; background: var(--yel);
  border: var(--line-gorda); border-radius: 2rem; overflow: hidden;
  box-shadow: 12px 12px 0 var(--ink); transform: rotate(var(--r));
}
@media (min-width: 900px) { .probador__grid { grid-template-columns: 1fr 0.9fr; } }

.upsell {
  display: block; margin-top: 1.2rem; padding: 0.9rem 1.1rem;
  background: var(--grn); color: var(--ink); border: var(--line); border-radius: 1rem;
  box-shadow: 4px 4px 0 var(--ink); text-decoration: none; font-weight: 600;
  transition: transform 220ms var(--out), box-shadow 220ms var(--out);
}
.upsell::after { content: " →"; font-weight: 800; }

/* Confeti al añadir a la cesta (lo crea Movimiento.astro) */
.confeti { position: fixed; z-index: 80; width: 10px; height: 10px; border: 2px solid var(--ink); pointer-events: none; }

/* Las cintas y la marquesina se paran al pasar el ratón o al enfocar dentro */
.announce:hover .mq, .announce:focus-within .mq, .tape:hover .mq { animation-play-state: paused; }

/* ---------- ¿Llega a tiempo? ---------- */
.llega {
  --r: 1deg;
  display: grid; gap: 1rem; align-items: end;
  background: var(--paper); color: var(--ink); border: var(--line-gorda); border-radius: 1.6rem;
  padding: clamp(1.2rem, 3vw, 1.8rem); box-shadow: 10px 10px 0 var(--pink); transform: rotate(var(--r));
}
.llega__titulo { font: 800 clamp(1.8rem, 4vw, 2.4rem)/1 var(--disp); }
.llega__sub { margin-top: 0.4rem; font-weight: 600; }
.llega__campo { display: grid; gap: 0.35rem; font-weight: 800; }
.llega__campo input {
  min-height: 52px; padding: 0.6rem 0.9rem; background: #fff; border: var(--line); border-radius: 0.9rem;
  font-weight: 800; font-variant-numeric: tabular-nums;
}
.llega__campo input:focus-visible { outline: 3px solid var(--purp); outline-offset: 2px; }
.llega__res {
  grid-column: 1 / -1; padding: 0.85rem 1rem; border: var(--line); border-radius: 1rem; background: #fff; font-weight: 600;
}
/* Dentro de secciones oscuras, los párrafos heredan texto claro: aquí no. */
.llega .llega__titulo, .llega .llega__sub, .llega .llega__res { color: var(--ink); max-width: none; }
.llega .llega__titulo, .llega .llega__res { margin-top: 0; }
.llega .llega__sub { font-size: 1rem; margin-top: 0.4rem; }
.llega .llega__res a { color: var(--purp); }
.llega__res[data-estado="ok"] { background: var(--grn); }
.llega__res[data-estado="justo"] { background: var(--yel); }
.llega__res[data-estado="no"] { background: var(--pink); }
.llega--compacto { --r: 0deg; box-shadow: 6px 6px 0 var(--ink); margin-top: 1.6rem; }
.llega--compacto .llega__titulo { font-size: 1.6rem; }
@media (min-width: 640px) { .llega:not(.llega--compacto) { grid-template-columns: 1fr auto; } }
.dlv__calc { margin-top: clamp(3rem, 6vw, 4.5rem); max-width: 860px; }

.compartir { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 1.4rem; font-weight: 600; }

/* ---------- 404 ---------- */
.perdida { display: grid; gap: 2.5rem; align-items: center; padding-bottom: clamp(3rem, 6vw, 5rem); }
.perdida__dibujo { --r: -3deg; width: min(100%, 340px); justify-self: center; border: var(--line-gorda); border-radius: 1.8rem; overflow: hidden; background: var(--sky); box-shadow: 10px 10px 0 var(--ink); transform: rotate(var(--r)); }
@media (min-width: 860px) { .perdida { grid-template-columns: 1.3fr 1fr; } }

/* ---------- Pasos ---------- */
.how__grid { display: grid; gap: 2.6rem; align-items: start; }
.steps { display: grid; gap: 1.1rem; list-style: none; padding: 0; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
  background: #fff; border: var(--line); border-radius: 1.3rem; padding: 1.15rem;
}
.step h3 { font-size: 1.65rem; margin: 0.25rem 0 0.35rem; }
.step__n {
  display: grid; place-items: center; width: 3.4rem; aspect-ratio: 1; border-radius: 50%;
  background: var(--ora); border: var(--line); font: 800 1.6rem/1 var(--disp);
}
.step:nth-child(2) .step__n { background: var(--sky); }
.step:nth-child(3) .step__n { background: var(--grn); }
.step:nth-child(4) .step__n { background: var(--pink); }
/* Pasos sin número (ocasiones, etc.): tarjetas en rejilla, título encima. */
div.steps { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; }
div.steps .step { display: block; border-width: 4px; box-shadow: 6px 6px 0 var(--ink); }
div.steps .step:nth-child(2) { background: var(--yel); }
div.steps .step:nth-child(3) { background: var(--sky); }
div.steps .step:nth-child(4) { background: var(--grn); }
div.steps .step h3 { margin: 0 0 0.5rem; }
.steps--grid { grid-template-columns: 1fr; }
@media (min-width: 760px) { .steps--grid { grid-template-columns: 1fr 1fr; } }

.foto-marco {
  --r: 1deg;
  border: var(--line-gorda); border-radius: 1.6rem; overflow: hidden; background: #fff;
  box-shadow: 8px 8px 0 var(--ink); transform: rotate(var(--r));
}
.foto-marco img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.foto-marco--paper { background: var(--paper); }
.foto-marco--paper img { mix-blend-mode: multiply; }
.foto-marco figcaption { padding: 0.9rem 1.2rem; border-top: var(--line); background: var(--yel); font-weight: 800; }
.duo { display: grid; gap: 2.2rem; }
.duo .foto-marco:nth-child(2) { --r: -1.4deg; }
.duo .foto-marco:nth-child(2) figcaption { background: var(--sky); }
@media (min-width: 700px) { .duo { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .how__grid { grid-template-columns: 1fr 1.1fr; } }

/* ---------- Para quién ---------- */
.who ul { display: grid; gap: 1.6rem; list-style: none; padding: 0; }
.who li {
  --r: -2deg;
  background: var(--paper); border: var(--line-gorda); border-radius: 1.6rem; padding: 1.5rem;
  box-shadow: 7px 7px 0 var(--ink); transform: rotate(var(--r)); transition: transform 260ms var(--out);
}
.who li:nth-child(2) { --r: 1.5deg; background: var(--yel); }
.who li:nth-child(3) { --r: -1deg; background: var(--sky); }
.who li:nth-child(4) { --r: 2deg; background: var(--grn); }
.who__k { display: block; height: 1.1em; overflow: hidden; margin-bottom: 0.7rem; font: 800 clamp(3.2rem, 8vw, 4.4rem)/1 var(--disp); }
.who__k span { display: inline-block; }
.who h3 { font-size: 1.8rem; margin-bottom: 0.5rem; }
@media (min-width: 640px) { .who ul { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .who ul { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Expedientes ---------- */
.aviso-honesto {
  max-width: 44rem; margin-top: 1.4rem; padding: 1rem 1.2rem;
  border: 3px dashed #6e5a88; border-radius: 1rem; color: var(--on-dark);
}
.aviso-honesto strong { color: #fff; }
.expedientes { display: grid; gap: 1.6rem; margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.expediente {
  --r: -1deg;
  display: flex; flex-direction: column; gap: 0.9rem;
  background: var(--paper); color: var(--ink); border: var(--line-gorda); border-radius: 1.4rem;
  padding: 1.3rem 1.3rem 1.4rem; box-shadow: 7px 7px 0 var(--pink); transform: rotate(var(--r));
}
.expediente:nth-child(2n) { --r: 1deg; box-shadow: 7px 7px 0 var(--yel); }
.expediente:nth-child(3n) { box-shadow: 7px 7px 0 var(--grn); }
.expediente__head { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: center; font-weight: 800; font-size: 0.9rem; }
.expediente__id { background: var(--ink); color: var(--yel); border-radius: 999px; padding: 0.15rem 0.6rem; }
.expediente__hora { margin-left: auto; font-variant-numeric: tabular-nums; }
.expediente__texto { flex: 1; }
.expediente__resultado {
  align-self: flex-start; background: var(--grn); border: 2px solid var(--ink); border-radius: 0.5rem;
  padding: 0.3rem 0.7rem; font: 800 0.95rem/1.1 var(--disp); text-transform: uppercase; transform: rotate(-2deg);
}
@media (min-width: 720px) { .expedientes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .expedientes { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Preguntas ---------- */
.faq { display: grid; gap: 0.9rem; margin-top: 2rem; max-width: 860px; }
.faq details { background: #fff; border: var(--line); border-radius: 1.2rem; transition: box-shadow 220ms var(--out); }
.faq details[open] { box-shadow: 6px 6px 0 var(--purp); }
.faq summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 60px; padding: 0.9rem 1.2rem; cursor: pointer; font: 800 1.25rem/1.15 var(--disp);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem;
  border: var(--line); border-radius: 50%; background: var(--yel); font: 800 1.4rem/1 var(--body);
  transition: transform 240ms var(--out);
}
.faq details[open] summary::after { transform: rotate(45deg); background: var(--pink); }
.faq details p { padding: 0 1.2rem 1.2rem; max-width: 64ch; }

/* ---------- Cierre ---------- */
.closer { background: var(--yel); padding: clamp(4rem, 9vw, 7rem) 0; }
.closer__box {
  --r: -1deg;
  position: relative; background: var(--ink); color: #fff; border-radius: 2.2rem;
  padding: clamp(2.2rem, 6vw, 5rem) clamp(1.3rem, 5vw, 4rem); text-align: center;
  box-shadow: 12px 12px 0 var(--pink); transform: rotate(var(--r));
}
.closer__title { font-size: clamp(2.3rem, 6.4vw, 5.2rem); max-width: 15ch; margin: 0 auto; }
.closer__meta { max-width: 40rem; margin: 1.5rem auto 2.2rem; color: var(--on-dark); font-size: 1.15rem; }
.closer__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.2rem; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; list-style: none; padding: 0; margin-top: 3rem; text-align: left; }
.facts li { border: 3px solid #6e5a88; border-radius: 1.2rem; padding: 1rem; }
.facts strong { display: block; color: var(--yel); font: 800 clamp(1.6rem, 4vw, 2.2rem)/1 var(--disp); margin-bottom: 0.3rem; }
@media (min-width: 860px) { .facts { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Cabecera de página interior ---------- */
.page-head { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.page-head h1 { font-size: clamp(2.6rem, 8vw, 5.4rem); max-width: 16ch; }
.page-head h1 em { font-style: normal; display: inline-block; padding: 0 0.12em; background: var(--skin); border: var(--line-gorda); border-radius: 0.25em 0.25em 0.55em 0.55em; transform: rotate(-2deg); }

.breadcrumb { padding-top: 1.4rem; font-weight: 600; font-size: 0.95rem; }
.breadcrumb a { color: var(--purp); }

/* ---------- Ficha de producto ---------- */
.pdp { display: grid; gap: clamp(2.5rem, 5vw, 4rem); padding: 1.6rem 0 clamp(3rem, 6vw, 5rem); align-items: start; }
.pdp__media { min-width: 0; }
.pdp__buy h1 { font-size: clamp(3rem, 8vw, 5rem); margin: 0.2rem 0 1.1rem; }
.pdp__note { font-size: 0.95rem; color: var(--ink-2); }
.pdp__prose { display: grid; gap: 1rem; margin-top: 2rem; }
.pdp__cta { margin-top: 1.4rem; }
@media (min-width: 960px) {
  .pdp { grid-template-columns: 1.1fr 0.9fr; }
  .pdp__media { position: sticky; top: 96px; }
}
.stock {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.1rem;
  background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 0.3rem 0.8rem; font-weight: 800; font-size: 0.95rem;
}
.stock::before { content: ""; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--grn); border: 2px solid var(--ink); }
.assurances { display: grid; gap: 0.6rem; list-style: none; padding: 0; margin-top: 1.6rem; }
.assurances li {
  display: flex; gap: 0.7rem; align-items: center; padding: 0.7rem 0.9rem;
  background: #fff; border: 2px solid var(--ink); border-radius: 0.9rem; font-weight: 600;
}
.assurances li::before { content: ""; flex: none; width: 1.1rem; height: 1.1rem; background: var(--pink); clip-path: var(--burst); }
.specs { width: 100%; margin-top: 2rem; border-collapse: separate; border-spacing: 0; background: #fff; border: var(--line); border-radius: 1.2rem; overflow: hidden; }
.specs th, .specs td { padding: 0.75rem 1rem; text-align: left; border-bottom: 2px solid #eadcc4; }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }
.specs th { width: 42%; font-weight: 800; background: var(--paper); }

/* Galería */
.gallery__stage {
  position: relative; background: var(--paper); border: var(--line-gorda); border-radius: 1.8rem; overflow: hidden;
  box-shadow: 10px 10px 0 var(--purp);
}
.gallery__stage img { width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; transition: opacity 240ms var(--out), transform 320ms var(--out); }
[data-motion] [data-cambiando] .gallery__stage img { opacity: 0; transform: scale(0.98); }
.gallery__code {
  position: absolute; z-index: 2; left: 1rem; top: 1rem;
  background: var(--yel); border: 2px solid var(--ink); border-radius: 999px; padding: 0.2rem 0.7rem; font-weight: 800; font-size: 0.85rem;
}
.gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 0.7rem; margin-top: 1.4rem; }
.gallery__thumb {
  display: grid; gap: 0.3rem; padding: 0.35rem; background: #fff; border: var(--line); border-radius: 0.9rem;
  cursor: pointer; font-size: 0.78rem; font-weight: 800; transition: transform 200ms var(--out), box-shadow 200ms var(--out);
}
/* Sin multiply en miniaturas: se mezclaría con el amarillo de la seleccionada. */
.gallery__thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0.55rem; background: #fff; }
.gallery__thumb[aria-selected="true"] { background: var(--yel); box-shadow: 4px 4px 0 var(--ink); transform: translate(-2px, -2px); }

/* Barra de compra */
.buybar {
  position: fixed; left: 0.8rem; right: 0.8rem; bottom: 0.8rem; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.6rem 0.6rem 0.6rem 1.1rem; background: var(--ink); color: #fff;
  border: 3px solid var(--yel); border-radius: 999px;
  transform: translateY(160%); transition: transform 320ms var(--out);
}
.buybar.esta-dentro { transform: translateY(0); }
.buybar__info { display: grid; line-height: 1.15; }
.buybar__name { font-weight: 800; }
.buybar__price { color: var(--yel); font: 800 1.2rem/1 var(--disp); }
.buybar .btn { min-height: 46px; --sh: var(--pink); background: var(--yel); color: var(--ink); }
@media (min-width: 960px) { .buybar { left: auto; width: 440px; right: 1.2rem; bottom: 1.2rem; } }
html:not([data-motion]) .buybar { position: static; margin: 0 1rem 1rem; transform: none; }

/* ---------- Bloques partidos ---------- */
.split { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse > :first-child { order: 2; }
}
.checklist { display: grid; gap: 0.6rem; list-style: none; padding: 0; margin-top: 1.6rem; }
.checklist li { display: flex; gap: 0.7rem; align-items: baseline; font-weight: 600; }
.checklist li::before { content: ""; flex: none; width: 0.95rem; height: 0.95rem; transform: translateY(0.1rem); background: var(--pink); clip-path: var(--burst); }

.notice {
  padding: 1.1rem 1.3rem; background: var(--yel); border: var(--line); border-radius: 1.1rem; box-shadow: 5px 5px 0 var(--ink);
}
.notice code { font-size: 0.9em; }

/* ---------- Texto largo ---------- */
.prose { max-width: 72ch; }
.prose h1 { font-size: clamp(2.6rem, 7vw, 4.4rem); margin-bottom: 1.4rem; }
.prose h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin: 2.6rem 0 0.8rem; }
.prose p, .prose ul { margin-top: 0.9rem; }
.prose ul { padding-left: 1.2rem; }
.prose li + li { margin-top: 0.45rem; }
.prose .notice { margin: 1.4rem 0; }

.article { max-width: 72ch; padding-bottom: clamp(3rem, 6vw, 5rem); }
.article__title { font-size: clamp(2.4rem, 6.5vw, 4.4rem); max-width: 20ch; }
.article__intro { font-size: 1.25rem; }
.article__block { margin-top: 2.6rem; }
.article__block h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: 0.8rem; }
.article__block p + p { margin-top: 0.9rem; }
.article__close {
  --r: -1deg;
  margin-top: 3rem; padding: 1.3rem 1.5rem; background: var(--skin); border: var(--line-gorda);
  border-radius: 1.3rem; box-shadow: 6px 6px 0 var(--ink); font-weight: 600; transform: rotate(var(--r));
}

/* ---------- Guías ---------- */
.guias { display: grid; gap: 1.8rem; margin-top: 2.4rem; }
.guia-card {
  --r: -1deg; --c: #fff;
  position: relative; background: var(--c); border: var(--line-gorda); border-radius: 1.5rem;
  box-shadow: 7px 7px 0 var(--ink); transform: rotate(var(--r)); transition: transform 260ms var(--out);
}
.guias > .guia-card:nth-child(2) { --r: 1deg; --c: var(--sky); }
.guias > .guia-card:nth-child(3) { --c: var(--yel); }
.guia-card a { display: flex; flex-direction: column; gap: 0.7rem; height: 100%; padding: 1.4rem; text-decoration: none; }
.guia-card__meta { display: flex; gap: 0.5rem; font-weight: 600; font-size: 0.9rem; }
.guia-card__title { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.guia-card__desc { flex: 1; }
.guia-card__more { align-self: flex-start; background: var(--ink); color: #fff; border-radius: 999px; padding: 0.5rem 1rem; font-weight: 800; }
@media (min-width: 800px) { .guias { grid-template-columns: repeat(3, 1fr); } .guias--2 { grid-template-columns: 1fr 1fr; } }

/* ---------- Contacto y formulario ---------- */
.contact { display: grid; gap: 1.4rem; margin-top: 2.4rem; }
.contact__card {
  --r: -1deg;
  display: grid; gap: 0.35rem; padding: 1.3rem; text-decoration: none;
  background: #fff; border: var(--line-gorda); border-radius: 1.4rem; box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(var(--r)); transition: transform 260ms var(--out);
}
.contact__card:nth-child(2) { --r: 1deg; background: var(--yel); }
.contact__card:nth-child(3) { background: var(--sky); }
.contact__card:nth-child(4) { --r: 1deg; background: var(--grn); }
.contact__label { font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; }
.contact__value { font: 800 clamp(1.3rem, 2.6vw, 1.7rem)/1.05 var(--disp); overflow-wrap: anywhere; }
@media (min-width: 700px) { .contact { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .contact { grid-template-columns: repeat(4, 1fr); } }

.form-wrap { margin-top: clamp(3rem, 6vw, 4.5rem); max-width: 760px; padding: clamp(1.3rem, 4vw, 2.2rem); background: #fff; border: var(--line-gorda); border-radius: 1.8rem; box-shadow: 10px 10px 0 var(--purp); }
.form-wrap__title { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 1.4rem; }
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__field { display: grid; gap: 0.4rem; font-weight: 800; }
.form__field em { font-weight: 400; font-style: normal; color: var(--ink-2); }
.form__field input, .form__field select, .form__field textarea {
  width: 100%; min-height: 52px; padding: 0.75rem 0.95rem; background: var(--paper);
  border: var(--line); border-radius: 0.9rem; font-weight: 400;
}
.form__field textarea { resize: vertical; }
.form__field :focus-visible { outline: 3px solid var(--purp); outline-offset: 2px; }
.form__trampa { position: absolute; left: -9999px; }
.form__legal { font-size: 0.9rem; color: var(--ink-2); }
.form .btn { justify-self: start; }
.form__estado { font-weight: 800; min-height: 1.5em; }
.form__estado--ok { color: #11794a; }
.form__estado--error { color: #b3123f; }

/* ---------- Pie ---------- */
.site-footer { background: var(--ink); color: #fff; padding: clamp(3rem, 6vw, 4.5rem) 0 1.8rem; }
.site-footer__grid { display: grid; gap: 2.2rem; }
.site-footer h4 { font-size: 1.5rem; margin-bottom: 0.8rem; color: var(--yel); }
.site-footer p { color: var(--on-dark); }
.site-footer ul { list-style: none; padding: 0; display: grid; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; text-decoration: none; }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 2rem;
  margin-top: 2.6rem; padding-top: 1.4rem; border-top: 2px solid #3a2a4f; color: var(--on-dark); font-size: 0.9rem;
}
@media (min-width: 800px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* ---------- Aviso emergente ---------- */
.toast {
  position: fixed; left: 50%; bottom: 1.2rem; z-index: 70; max-width: calc(100% - 2rem);
  background: var(--ink); color: #fff; border: 3px solid var(--yel); border-radius: 999px;
  padding: 0.85rem 1.4rem; font-weight: 800; pointer-events: none;
  opacity: 0; transform: translate(-50%, 130%); transition: transform 260ms var(--out), opacity 260ms var(--out);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Snipcart con los colores de la tienda ---------- */
#snipcart {
  --color-default: #1b0a2a;
  --color-alt: #4a3a5c;
  --color-link: #5a1fd1;
  --color-buttonPrimary-background: #1b0a2a;
  --color-buttonPrimary-backgroundHover: #5a1fd1;
  --color-buttonPrimary-color: #ffffff;
  --bgColor-default: #fff3dc;
  --bgColor-alt: #ffffff;
  --borderColor-default: #1b0a2a;
  --borderRadius-default: 14px;
}

/* ============================================================
   Movimiento
   Todo es visible por defecto. <html data-motion> lo pone un script
   en <head> y solo entonces escondemos lo que va a entrar.
   ============================================================ */
[data-motion] [data-r] { opacity: 0; }
[data-motion] [data-r].in { animation: pop 780ms var(--out) var(--d, 0ms) both; }
[data-motion] [data-r].done { animation: none; opacity: 1; }
@keyframes pop {
  0% { opacity: 0; transform: translateY(48px) rotate(calc(var(--r, 0deg) + 4deg)) scale(0.93); }
  60% { opacity: 1; transform: translateY(-8px) rotate(var(--r, 0deg)) scale(1.015); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)) scale(1); }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
[data-motion] .chart:not(.in) .fill { transform: translateX(-100%); }
html:not([data-motion]) .juguetes, html:not([data-motion]) .stk--pista { display: none; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: translate(-3px, -3px) rotate(-2deg); box-shadow: 8px 8px 0 var(--sh); }
  .cart-btn:hover { transform: translate(-2px, -2px) rotate(-3deg); }
  .brand:hover b { transform: rotate(6deg) scale(1.08); }
  .site-nav a:hover { background: var(--yel); }
  .poke:hover { transform: translate(-3px, -3px) rotate(3deg); }
  .card:hover { transform: translateY(-12px) rotate(0) scale(1.02); }
  .card:hover .card__media img { transform: scale(1.08) rotate(-3deg); }
  .frame:hover { transform: rotate(-2deg) scale(1.03); }
  .who li:hover { transform: rotate(calc(var(--r) * -2)) scale(1.05); }
  .guia-card:hover, .contact__card:hover { transform: translateY(-8px) rotate(0); }
  .upsell:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
  .gallery__thumb:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
  .faq summary:hover::after { transform: rotate(90deg); }
  .faq details[open] summary:hover::after { transform: rotate(45deg); }
}

/* Menos movimiento no es cero movimiento: quitamos desplazamientos y
   giros, y dejamos fundidos cortos que siguen explicando qué ha cambiado. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mq, .stk--spin svg, .cf { animation: none; }
  [data-motion] [data-r].in:not(.done) { animation: fade 400ms var(--out) both; }
  .fill { transition: opacity 600ms var(--out); }
  [data-motion] .chart:not(.in) .fill { transform: none; opacity: 0; }
  .toast, .toast.on { transform: translate(-50%, 0); }
  .buybar { transition: opacity 240ms var(--out); transform: none; opacity: 0; pointer-events: none; }
  .buybar.esta-dentro { opacity: 1; pointer-events: auto; }
  .poke { display: none; }
  .btn, .btn:active, .cart-btn:active { transform: none; }
  .btn.is-pressed, .snipcart-items-count.bump, .frame.jig, .menu[open] .menu__panel,
  .panzudo__ojo.parpadeo, .panzudo__panza.meneo { animation: none; }
  .test__tarjeta.revela, .dedicatoria__frase.cambia { animation: fade 300ms var(--out); }
  .opcion input:checked + span { transform: none; }
  .v-prenda.colgada .v-balanceo, [data-disimula] .v-cabeza, [data-disimula] .v-pupila,
  [data-pillado] .v-tirador, [data-clic] .v-hebilla { animation: none; }
  [data-disimula] .v-nota { animation: none; opacity: 1; }
  [data-disimula] .v-nota:nth-child(2) { transform: translate(14px, -30px); }
  [data-disimula] .v-nota:nth-child(3) { transform: translate(28px, -58px); }
  .cta-flotante { transition: opacity 240ms var(--out); transform: translate(-50%, 0); opacity: 0; pointer-events: none; }
  .cta-flotante.esta-dentro { opacity: 1; pointer-events: auto; }
  [data-cambiando] .gallery__stage img { transform: none; }
}