/* ─────────────────────────────────────────────────────────────────────────
   /paquetes · "Del papel al salón" (20-oct-2026)
   La campaña de videos hecha página: los materiales salen de la librería de
   los videos (repo de contenido, kidsclub-cumpleanos-videos/src/styles/papel.css):
   papel con sombra según lo levantado, cinta con bordes irregulares, letras
   recortadas solo para el nombre de cada propuesta, íconos de línea propios,
   letra a mano en magenta solo para lo que resuelve Kids Club.

   Movimiento (/js/paquetes.js, GSAP): cada escena se arma UNA vez cuando entra
   en pantalla y queda quieta. Nada se repite en bucle (en /paquetes, la página
   "mareaba" cuando había 10 animaciones a la vez). Sin JS o con "reducir
   movimiento", todo se ve en su estado final: el CSS ES el estado final.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --pq-fondo: #F4EFE7;
  --pq-crema: #FFF8EC;
  --pq-papel: #FFFEFA;
  --pq-tinta: #392B3A;
  --pq-gris: #6B5F6A;          /* 5,6 sobre el fondo */
  --pq-hilo: #B9A99C;
  --pq-magenta: #C8237F;       /* botones y texto chico (blanco encima: 5,25) */
  --pq-magenta-mano: #D72C83;  /* la letra a mano, siempre grande */
  --pq-navy: #262848;
  --pq-cian: #0EBBEC;
  --pq-amarillo: #F6BE3E;
  --pq-naranja: #F08527;
  --pq-verde: #3DA585;
  --pq-rosa-p: #F5DBF0;
  --pq-celeste-p: #B8DCEC;
  --pq-amarillo-p: #FFF1C8;
  --pq-display: 'Baloo 2', system-ui, sans-serif;
  --pq-mano: 'Caveat', 'Comic Sans MS', cursive;
  --pq-texto: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pq-resorte: cubic-bezier(.34, 1.42, .64, 1);
  --pq-suave: cubic-bezier(.22, .61, .36, 1);
  /* Grano de papel pre-renderizado (antes un filtro SVG que el navegador recalculaba en cada pintado). */
  --pq-grano: url("/img/paquetes/grano.webp");
  --pq-sombra-papel: 0 1px 1px rgba(57,43,58,.08), 0 6px 14px rgba(57,43,58,.10);
  --pq-sombra-aire: 0 18px 30px rgba(57,43,58,.16), 0 4px 8px rgba(57,43,58,.06);
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-d: max(16px, env(safe-area-inset-right, 0px));
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--pq-texto); color: var(--pq-tinta); line-height: 1.5;
  background: var(--pq-grano), radial-gradient(120% 80% at 50% 0%, #FBF7F0 0%, var(--pq-fondo) 60%) 50% 0 / 100% 900px no-repeat, var(--pq-fondo);
  /* Sin background-attachment: fixed: obligaba a repintar toda la pantalla en cada scroll. */
  overflow-x: hidden;
}
/* clip (no hidden) en html y body: lo que asoma por la derecha (banderines, K,
   sello) no agranda el área de la página en el celular, y sticky sigue andando. */
@supports (overflow: clip) { html, body { overflow-x: clip; } }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
a { color: var(--pq-navy); }
:focus-visible { outline: 3px solid var(--pq-navy); outline-offset: 3px; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: fixed; left: 16px; top: 12px; z-index: 1100; transform: translateY(-200%); background: var(--pq-navy); color: #fff; padding: 10px 14px; border-radius: 10px; font-weight: 800; text-decoration: none; }
.saltar:focus { transform: none; }

/* ── Material ─────────────────────────────────────────────────────────── */
.papel {
  background: var(--pq-grano), var(--pq-papel);
  --lift: 0;
  box-shadow:
    0 calc(1px + var(--lift) * 2px) calc(2px + var(--lift) * 3px) rgba(57, 43, 58, .09),
    0 calc(8px + var(--lift) * 22px) calc(18px + var(--lift) * 36px) calc(-6px - var(--lift) * 6px) rgba(57, 43, 58, .26);
}
.cinta, .pq-cinta {
  position: absolute; z-index: 3; width: 78px; height: 24px; background: rgba(246, 190, 62, .66); box-shadow: 0 1px 2px rgba(57, 43, 58, .12);
  clip-path: polygon(0% 8%, 4% 0%, 96% 4%, 100% 0%, 98% 92%, 100% 100%, 3% 96%, 0% 100%);
  top: -11px; left: 50%; margin-left: -39px; transform: rotate(-3deg);
}
.mano { font-family: var(--pq-mano); font-weight: 700; color: var(--pq-magenta-mano); }
.dato { font-family: var(--pq-texto); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--pq-gris); }
.titular { font-family: var(--pq-display); font-weight: 800; color: var(--pq-tinta); font-size: clamp(34px, 9.2vw, 58px); line-height: .98; letter-spacing: -.012em; text-wrap: balance; }
.titular .mano { display: block; font-size: 1.12em; line-height: .95; margin-top: .06em; letter-spacing: 0; }
.titular-chico { font-size: clamp(28px, 7vw, 40px); }
.titular-grande { font-size: clamp(40px, 11vw, 72px); }
.bajada { margin-top: 14px; max-width: 34em; color: var(--pq-gris); font-size: 16px; font-weight: 600; line-height: 1.55; }

/* ── Botones ──────────────────────────────────────────────────────────── */
.btn, .pq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 13px 24px;
  border: 0; border-radius: 16px; cursor: pointer; text-decoration: none; touch-action: manipulation;
  font-family: var(--pq-display); font-weight: 800; font-size: 17px; line-height: 1.1; text-align: center;
  transition: transform .18s var(--pq-suave), box-shadow .18s var(--pq-suave), background .18s;
}
.btn:active, .pq-btn:active { transform: scale(.97); }
.btn small, .pq-btn small { font-family: var(--pq-texto); font-weight: 700; font-size: 12px; opacity: .9; }
.btn-principal, .pq-btn--principal { background: var(--pq-magenta); color: #fff; box-shadow: 0 10px 24px -6px rgba(200, 35, 127, .5); }
.btn-principal:hover, .pq-btn--principal:hover { background: #A51D6B; }
.btn-segundo, .pq-btn--segundo { background: var(--pq-papel); color: var(--pq-navy); box-shadow: inset 0 0 0 2px var(--pq-navy); }
.btn-wa { background: transparent; color: #18794A; box-shadow: inset 0 0 0 2px #25D366; font-size: 15px; min-height: 46px; }
.btn-ancho { width: 100%; }

/* ── Escenas ──────────────────────────────────────────────────────────── */
.esc { position: relative; padding-block: 64px; }
.esc-in { max-width: 1080px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-d); }
.esc-cab { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 34px; }
.esc-cab .bajada { margin-top: 2px; }
.banderines { position: relative; height: 54px; pointer-events: none; }
.banderines svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.banderines-sec { max-width: 760px; margin: -30px auto 18px; }

/* ── ESCENA 1 · Hero ──────────────────────────────────────────────────── */
/* Termina en la cinta de cuotas, la bajada y los dos caminos (ver "Embudo", al final). */
.esc-hero { padding-block: 22px 40px; }
.hero-in { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-d); display: grid; gap: 14px; align-items: center; }
.hero-texto { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.esc-hero .titular { font-size: clamp(38px, 10.4vw, 66px); }
.esc-hero .titular .linea { display: block; }
/* Barrido de la letra a mano sin clip-path: el marco entra desde la izquierda y
   el contenido desde la derecha, a la vez (solo transform). */
.rev { display: inline-block; overflow: hidden; vertical-align: bottom; margin: -.14em -.08em; }
.rev-in { display: inline-block; padding: .14em .08em; }
.subrayado { display: block; width: 92%; height: 14px; margin: -2px auto 0; overflow: visible; transform-origin: 0 50%; }
.subrayado path { fill: none; stroke: var(--pq-magenta-mano); stroke-width: 5; stroke-linecap: round; }
.hero-bajada { max-width: 34em; margin: 2px auto 0; padding-left: var(--gutter); padding-right: var(--gutter-d); text-align: center; }
.hero-datos { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.hero-datos li { font-size: 12.5px; font-weight: 700; color: var(--pq-tinta); background: rgba(255, 254, 250, .8); border: 1px solid rgba(57, 43, 58, .1); border-radius: 999px; padding: 6px 12px; }

.hero-escena { position: relative; width: min(100%, 410px); aspect-ratio: 4 / 4.5; margin: 0 auto; }
.hero-escena .banderines { position: absolute; left: -7%; right: -7%; top: 0; height: 15%; z-index: 4; }
.postal { position: absolute; left: 7%; right: 7%; top: 10%; bottom: 2%; z-index: 1; padding: 11px 11px 48px; border-radius: 6px; transform: rotate(-2deg);
  background: var(--pq-grano), var(--pq-papel); box-shadow: 0 2px 3px rgba(57, 43, 58, .1), 0 22px 40px -10px rgba(57, 43, 58, .32); }
.postal-marco { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 3px; background: #E9E1D6; }
.postal-marco img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; }
.postal-pie { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 28px; line-height: 1.2; }
.sello { position: absolute; right: 1%; top: 7%; width: 76px; height: 76px; z-index: 5; transform: rotate(9deg); }
.sello img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* El taco de notas (solo con JS y movimiento: sin eso se ve el póster). Cada hoja
   trae una duda que resuelve el All Inclusive; se arranca y deja la siguiente. */
.taco { display: none; }
.hero-anima .taco { display: block; position: absolute; left: 11px; right: 11px; top: 11px; bottom: 48px; z-index: 2; }
.taco-lomo { position: absolute; left: -2px; right: -2px; top: -3px; height: 28px; z-index: 9; border-radius: 4px 4px 0 0; background: var(--pq-navy);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 3px rgba(38, 40, 72, .3); }
.taco-lomo span { font: 800 14px/1 var(--pq-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--pq-amarillo); }
.taco-cantos { position: absolute; left: 4px; right: 4px; bottom: -7px; height: 7px; }
.taco-cantos i { position: absolute; left: 0; right: 0; height: 1.5px; background: #E8DED0; border-radius: 1px; }
.taco-cantos i:nth-child(1) { bottom: 6px; } .taco-cantos i:nth-child(2) { bottom: 4.5px; left: 1px; right: 1px; } .taco-cantos i:nth-child(3) { bottom: 3px; left: 2px; right: 2px; }
.taco-cantos i:nth-child(4) { bottom: 1.5px; left: 3px; right: 3px; } .taco-cantos i:nth-child(5) { bottom: 0; left: 4px; right: 4px; }
.hoja-taco { position: absolute; left: 0; right: 0; top: 16px; bottom: 0; padding: 22px 16px 16px; border-radius: 0 0 4px 4px;
  background: var(--pq-grano), var(--c, var(--pq-papel)); box-shadow: 0 1px 2px rgba(57, 43, 58, .12);
  display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; }
/* Solo la hoja de arriba y la siguiente existen (las demás, display: none: no suman capas). */
.hoja-taco.activa { display: flex; }
/* Borde de arriba perforado: forma quieta, sin clip-path (que obliga a enmascarar la capa). */
.hoja-taco::before { content: ''; position: absolute; left: 0; right: 0; top: -5px; height: 6px;
  background: radial-gradient(circle at 6px 0, transparent 3.5px, var(--c, var(--pq-papel)) 4px) 0 0 / 12px 6px repeat-x; }
.hoja-taco--final::before { background-image: radial-gradient(circle at 6px 0, transparent 3.5px, var(--pq-papel) 4px); }
.ht-preg { font-family: var(--pq-display); font-weight: 800; font-size: clamp(22px, 6.6vw, 27px); line-height: 1.08; color: var(--pq-tinta); text-wrap: balance; }
.hoja-taco .caja { position: absolute; left: 14px; top: 18px; width: 24px; height: 24px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 2px rgba(57, 43, 58, .18); }
.hoja-taco .caja svg { position: absolute; inset: -6px; width: 36px; height: 36px; overflow: visible; }
.hoja-taco .caja path { fill: none; stroke: var(--pq-magenta-mano); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.ht-resp { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; }
.ht-resp .circ { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--cc); }
.ht-resp .circ svg { width: 28px; height: 28px; }
.ht-resp .mano { font-size: clamp(23px, 6.4vw, 27px); line-height: 1.05; text-align: left; }
.hoja-taco--final { background: var(--pq-grano), var(--pq-papel); box-shadow: inset 0 0 0 3px var(--pq-magenta-mano); }
.hoja-taco--final .ht-preg { font-size: clamp(25px, 7.4vw, 31px); }

@media (min-width: 900px) {
  .esc-hero { padding-block: 48px 52px; }
  .hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .hero-texto { text-align: left; align-items: flex-start; }
  .subrayado { margin-left: 0; }
  .hero-escena { width: 100%; max-width: 470px; }
  .hero-bajada { font-size: 18px; }
}

/* ── Cinta de cuotas: tickets troquelados que se deslizan y se dan vuelta ── */
/* Solo transform (la pista se traslada, cada ticket gira en Y). Con JS se arma
   un grupo que llena el ancho y su copia; sin JS quedan dos tickets quietos. */
.cuotas { position: relative; z-index: 1; margin: -26px 0 6px; padding: 18px 0 14px; overflow: hidden; }
.cuotas-cinta { position: relative; width: 116%; margin-left: -8%; transform: rotate(-2.2deg); padding: 10px 0; overflow: hidden;
  background: var(--pq-grano), var(--pq-navy); box-shadow: 0 12px 26px -10px rgba(38, 40, 72, .5); }
.cuotas-cinta::before, .cuotas-cinta::after { content: ''; position: absolute; left: 0; right: 0; border-top: 2px dashed rgba(255, 255, 255, .22); }
.cuotas-cinta::before { top: 4px; } .cuotas-cinta::after { bottom: 4px; }
.cuotas-pista { display: flex; width: max-content; }
.cuotas:not(.anima) .cuotas-pista { width: 100%; justify-content: center; }
.cuotas-grupo { display: flex; align-items: center; flex: none; }
.tk { position: relative; flex: none; width: 200px; height: 50px; margin: 0 5px; }
.cuotas:not(.anima) .tk { width: min(42vw, 200px); }
.tk-in { display: contents; }
.tk-cara { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 6px;
  background: radial-gradient(circle at 0 50%, transparent 6px, var(--cara) 6.5px) left / 51% 100% no-repeat,
              radial-gradient(circle at 100% 50%, transparent 6px, var(--cara) 6.5px) right / 51% 100% no-repeat; }
.tk-a { --cara: var(--pq-papel); color: var(--pq-navy); }
.tk-b { --cara: var(--pq-amarillo); color: var(--pq-tinta); }
.tk-cara b { font: 800 17px/1 var(--pq-display); }
.tk-b b { font-size: 23px; }
.tk-cara small { margin-top: 3px; max-width: 88%; font: 800 10px/1.1 var(--pq-texto); letter-spacing: .07em; text-transform: uppercase; }
.tk-a small { color: var(--pq-gris); }
.tk-sep { flex: none; width: 14px; font-style: normal; text-align: center; color: var(--pq-amarillo); font-size: 14px; }
/* Cara visible: los tickets impares muestran "6 cuotas" y los pares "18% OFF";
   con .dorso (lo alterna el JS cada 4 s) se invierten. La vuelta es una transición
   2D: la cara que se va se angosta y la otra se abre con un rebote de papel. Entre
   vueltas no hay nada animándose (salvo el deslizamiento de la pista). */
.tk-a { transform: scaleX(1); transition: transform .32s cubic-bezier(.25, 1.7, .55, 1) calc(var(--d, 0s) + .24s); }
.tk-b { transform: scaleX(0); transition: transform .24s cubic-bezier(.55, 0, .9, .45) var(--d, 0s); }
.cuotas:not(.dorso) .tk:nth-of-type(2n) .tk-a, .cuotas.dorso .tk:nth-of-type(2n+1) .tk-a { transform: scaleX(0); transition: transform .24s cubic-bezier(.55, 0, .9, .45) var(--d, 0s); }
.cuotas:not(.dorso) .tk:nth-of-type(2n) .tk-b, .cuotas.dorso .tk:nth-of-type(2n+1) .tk-b { transform: scaleX(1); transition: transform .32s cubic-bezier(.25, 1.7, .55, 1) calc(var(--d, 0s) + .24s); }
.cuotas.anima .cuotas-pista { animation: cuotas-deriva var(--dur, 14s) linear infinite; will-change: transform; }
.cuotas.fuera .cuotas-pista, .cuotas.pausada .cuotas-pista { animation-play-state: paused; }
@media (hover: hover) { .cuotas.anima:hover .cuotas-pista { animation-play-state: paused; } }
@keyframes cuotas-deriva { to { transform: translate3d(-50%, 0, 0); } }
.cuotas-pausa { position: absolute; right: 12px; top: 50%; z-index: 2; transform: translateY(-50%); opacity: 0; pointer-events: none;
  border: 0; border-radius: 999px; padding: 8px 12px; background: var(--pq-papel); color: var(--pq-navy); font: 800 12px/1 var(--pq-texto); }
.cuotas-pausa:focus-visible, .cuotas.pausada .cuotas-pausa { opacity: 1; pointer-events: auto; }
.cuotas:not(.anima) .cuotas-pausa { display: none; }
@media (min-width: 900px) { .cuotas { margin-top: -12px; } .tk { width: 236px; height: 58px; } .tk-cara b { font-size: 20px; } .tk-b b { font-size: 27px; } .tk-cara small { font-size: 11px; } }

/* ── ESCENA 2 · Propuestas: "tu lista se achica" ──────────────────────── */
.prop-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: start; }
@media (min-width: 960px) { .prop-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 40px; } .prop-der { position: sticky; top: 132px; }
  .esc-propuestas .selector { max-width: 760px; margin-left: auto; margin-right: auto; } }

/* Pestañas pegajosas: una píldora navy se desliza por debajo de la elegida. */
.sel-centinela { display: block; height: 1px; margin-bottom: -1px; }
.selector { position: sticky; top: 8px; z-index: 6; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 5px; margin: 12px 0 14px;
  background: var(--pq-papel); border-radius: 18px; box-shadow: 0 0 0 1.5px #E6DACB; transition: box-shadow .25s; }
.selector.pegado { box-shadow: 0 0 0 1.5px #E6DACB, 0 14px 26px -12px rgba(57, 43, 58, .45); }
.selector-pildora { position: absolute; left: 5px; top: 5px; bottom: 5px; width: calc((100% - 10px) / 3); border-radius: 14px; background: var(--pq-navy);
  transform: translateX(calc(var(--p, 2) * 100%)) scale(var(--ps, 1)); transition: transform .35s cubic-bezier(.65, 0, .35, 1); }
.selector button { position: relative; z-index: 1; border: 0; background: transparent; border-radius: 14px; min-height: 80px; padding: 10px 3px 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; color: var(--pq-tinta); transition: color .2s; }
.sel-nom { font: 800 clamp(13.5px, 3.9vw, 16px)/1.05 var(--pq-display); }
.sel-quedan { font: 800 11.5px/1.15 var(--pq-texto); color: var(--pq-gris); }
.sel-desde { display: flex; flex-direction: column; align-items: center; margin-top: 2px; font: 800 14.5px/1.05 var(--pq-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sel-desde small { font: 700 10px/1.2 var(--pq-texto); color: var(--pq-gris); }
.sel-desde i { font-style: normal; font: 700 10px var(--pq-texto); color: var(--pq-gris); }
.selector button[aria-selected="true"] { color: #fff; }
.selector button[aria-selected="true"] small, .selector button[aria-selected="true"] .sel-desde i { color: rgba(255, 255, 255, .82); }
.selector button[aria-selected="true"]::after {
  content: '✓'; position: absolute; top: -8px; right: -4px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--pq-amarillo); color: var(--pq-navy); font: 900 14px/24px var(--pq-texto); text-align: center;
}
.sel-pegatina { position: absolute; top: -15px; left: -4px; transform: rotate(-5deg); white-space: nowrap; font-size: 16px; line-height: 1;
  padding: 3px 9px 4px; border-radius: 999px; background: var(--pq-papel); color: var(--pq-magenta-mano); box-shadow: 0 3px 8px -2px rgba(57, 43, 58, .3); }
.en-las-tres { position: relative; margin: 0 0 14px; padding: 10px 12px 10px 16px; border-radius: 10px; background: var(--pq-amarillo-p);
  font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--pq-tinta); transform-origin: 0 50%; }
.en-las-tres b { font-weight: 800; }

/* La hoja: arriba tu lista (papel rayado); desde abajo sube la hoja de Kids Club
   por capas. Alto fijo: solo se mueve con translateY y rotateX. */
.hoja-lista { --r: 38px; --cab: 52px; --kc: 42px; position: relative; overflow: hidden; border-radius: 14px;
  height: calc(var(--cab) + 12 * var(--r) + var(--kc));
  background: var(--pq-grano),
    linear-gradient(90deg, transparent 33px, var(--pq-rosa-p) 33px 35px, transparent 35px),
    repeating-linear-gradient(transparent 0 calc(var(--r) - 1px), var(--pq-celeste-p) calc(var(--r) - 1px) var(--r)) 0 var(--cab) / 100% calc(100% - var(--cab)) no-repeat,
    var(--pq-crema);
  box-shadow: 0 2px 3px rgba(57, 43, 58, .09), 0 18px 34px -14px rgba(57, 43, 58, .32); }
.hl-cab { position: relative; z-index: 3; height: var(--cab); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px 0 44px;
  font: 800 17px/1 var(--pq-display); color: var(--pq-tinta); }
.hl-quedan { display: inline-flex; align-items: center; gap: 7px; font: 800 13px/1 var(--pq-texto); color: var(--pq-gris); }
.hl-num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pq-navy); color: #fff; font: 800 16px/1 var(--pq-display); }
.hl-kc { position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: calc(var(--kc) + 12 * var(--r) + 10px);
  background: var(--pq-grano), var(--pq-papel); box-shadow: 0 -10px 18px -12px rgba(57, 43, 58, .4);
  transform: translateY(calc(var(--cab) + var(--n) * var(--r))); transition: transform .6s cubic-bezier(.16, 1, .3, 1) var(--dkc, .1s); }
.hl-kc::before { content: ''; position: absolute; left: 0; right: 0; top: -7px; height: 8px; background: var(--pq-papel);
  clip-path: polygon(0 100%, 0 40%, 3% 75%, 6% 20%, 9% 70%, 12% 30%, 15% 80%, 18% 25%, 21% 65%, 24% 15%, 27% 70%, 30% 35%, 33% 80%, 36% 20%, 39% 60%, 42% 30%, 45% 75%, 48% 10%, 51% 65%, 54% 35%, 57% 80%, 60% 25%, 63% 70%, 66% 15%, 69% 60%, 72% 30%, 75% 75%, 78% 20%, 81% 65%, 84% 35%, 87% 80%, 90% 25%, 93% 70%, 96% 30%, 100% 60%, 100% 100%); }
.hl-kc-cab { height: var(--kc); display: flex; align-items: center; gap: 9px; padding: 0 14px; font: 800 15px/1 var(--pq-display); color: var(--pq-tinta); }
.hl-kc-num { margin-left: auto; display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 14px; background: var(--pq-magenta); color: #fff; font: 800 15px/1 var(--pq-display); }
.tilde-kc { position: relative; flex: none; display: inline-block; width: 20px; height: 20px; border-radius: 50%; background: var(--pq-magenta); }
.tilde-kc::after { content: ''; position: absolute; left: 7px; top: 3.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.hl-tareas { list-style: none; }
.tarea { position: absolute; left: 0; right: 0; z-index: 2; height: var(--r); top: calc(var(--cab) + var(--i) * var(--r)); perspective: 600px;
  transition: transform .45s var(--pq-suave) var(--d, 0s); }
.tarea.cubierta { transform: translateY(var(--kc)); }
.tarea-in { position: relative; display: block; height: 100%; transform-style: preserve-3d; transition: transform .5s var(--pq-resorte) var(--d, 0s); }
.tarea.cubierta .tarea-in { transform: rotateX(-180deg); }
.cara { position: absolute; inset: 0; display: flex; align-items: center; gap: 9px; padding: 0 30px 0 10px; white-space: nowrap;
  -webkit-backface-visibility: hidden; backface-visibility: hidden; font: 600 14.5px/1.1 var(--pq-texto); color: var(--pq-tinta); }
.cara-vos { padding-left: 44px; }
.cara-vos .caja { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 2px rgba(57, 43, 58, .28); }
.cara-kc { transform: rotateX(180deg); font-weight: 700; padding-left: 14px; box-shadow: inset 4px 0 0 var(--franja); }
.tarea[data-nivel="esc"] { --franja: var(--pq-cian); } .tarea[data-nivel="exp"] { --franja: var(--pq-naranja); } .tarea[data-nivel="ai"] { --franja: var(--pq-magenta); }
.tarea-tuya .cara-vos { font-weight: 700; }
.circulo { position: absolute; left: 34px; top: -3px; width: 186px; height: calc(var(--r) + 6px); overflow: visible; pointer-events: none; opacity: 0; }
.circulo path { fill: none; stroke: var(--pq-magenta-mano); stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.y-disf { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 22px; line-height: 1; opacity: 0; }
.insercion { position: relative; display: inline-block; width: 0; height: 0; vertical-align: top; }
.insercion .rev { position: absolute; left: -3px; bottom: 8px; white-space: nowrap; font-size: 17px; line-height: 1; opacity: 0; }
.hoja-lista[data-estado="allinclusive"] .circulo, .hoja-lista[data-estado="allinclusive"] .y-disf, .hoja-lista[data-estado="allinclusive"] .insercion .rev { opacity: 1; }
.solapa { position: absolute; right: 0; z-index: 3; width: 22px; overflow: hidden; }
.solapa > span { display: flex; align-items: center; justify-content: center; width: 22px; height: 100%; writing-mode: vertical-rl; transform: translateX(100%);
  font: 800 10px/1 var(--pq-texto); letter-spacing: .06em; text-transform: uppercase; border-radius: 6px 0 0 6px; transition: transform .35s var(--pq-resorte); }
.solapa[data-nivel="esc"] { top: calc(var(--cab) + var(--kc) + 8 * var(--r)); height: calc(4 * var(--r)); }
.solapa[data-nivel="exp"] { top: calc(var(--cab) + var(--kc) + 5 * var(--r)); height: calc(3 * var(--r)); }
.solapa[data-nivel="ai"] { top: calc(var(--cab) + var(--kc) + 1 * var(--r)); height: calc(4 * var(--r)); }
.solapa[data-nivel="esc"] > span { background: var(--pq-cian); color: var(--pq-navy); }
.solapa[data-nivel="exp"] > span { background: var(--pq-naranja); color: var(--pq-navy); }
.solapa[data-nivel="ai"] > span { background: var(--pq-magenta); color: #fff; }
.hoja-lista[data-estado="escapada"] .solapa[data-nivel="esc"] > span,
.hoja-lista[data-estado="experiencia"] .solapa[data-nivel="esc"] > span, .hoja-lista[data-estado="experiencia"] .solapa[data-nivel="exp"] > span,
.hoja-lista[data-estado="allinclusive"] .solapa > span { transform: none; }
.hl-nota { margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--pq-gris); line-height: 1.5; }
@media (max-width: 359px) { .cara { font-size: 13px; } .y-disf { font-size: 19px; right: 8px; } .circulo { width: 168px; } .hl-cab { font-size: 15.5px; } }
@media (min-width: 960px) { .hoja-lista { --r: 44px; --cab: 58px; --kc: 46px; } .cara { font-size: 16px; } .circulo { width: 206px; } .y-disf { font-size: 25px; } .selector { top: 16px; } }

/* Ticket de la propuesta: el precio, ligado a lo que se ve en la hoja. */
.ticket-prop { position: relative; border-radius: 22px; padding: 22px 18px 0; display: grid; gap: 14px; overflow: hidden; transform-origin: 50% 50%; }
.ticket-prop::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: var(--acento); }
.tp-cab { position: relative; display: grid; justify-items: center; gap: 6px; padding-top: 2px; }
.tp-cab .letras { --fs: clamp(28px, 8.4vw, 38px); }
.tp-nombre { font: 800 30px/1 var(--pq-display); }
.tp-promesa { font: 700 14.5px/1.2 var(--pq-display); color: var(--pq-gris); text-align: center; }
.tp-cab .pegatina { right: -6px; top: -10px; }
.tp-tit { font: 800 clamp(21px, 5.8vw, 25px)/1.12 var(--pq-display); color: var(--pq-tinta); text-align: center; text-wrap: balance; }
.tp-tit .mano { display: block; font-size: 1.12em; margin-top: 2px; }
.tp-para { margin-top: -6px; text-align: center; font-size: 14px; font-weight: 600; color: var(--pq-gris); line-height: 1.5; }
.tp-periodos:empty { display: none; }
.tp-precio { display: grid; justify-items: center; gap: 2px; min-height: 86px; padding: 12px 10px; border-radius: 14px; background: #FBF6EE; text-align: center; font-variant-numeric: tabular-nums; }
.tp-grande { font: 800 clamp(30px, 8.6vw, 38px)/1 var(--pq-display); color: var(--pq-tinta); }
.tp-grande small { font: 800 15px var(--pq-texto); color: var(--pq-gris); }
.tp-sub { font-size: 13px; font-weight: 700; color: var(--pq-gris); }
.tp-otra { font-size: 12.5px; font-weight: 600; color: var(--pq-gris); }
.tp-escalon { border: 0; border-radius: 14px; padding: 12px 14px; cursor: pointer; text-align: left; background: var(--pq-rosa-p); color: var(--pq-tinta);
  font: 600 14px/1.4 var(--pq-texto); box-shadow: inset 4px 0 0 var(--pq-magenta); }
.tp-escalon b { font-weight: 800; }
.tp-escalon[data-ir=""] { cursor: default; }
.tp-nota { font-size: 12.5px; font-weight: 600; color: var(--pq-gris); line-height: 1.5; }
.tp-talon { position: relative; margin: 0 -18px; padding: 18px 18px 18px; border-top: 2px dashed #E6DACB; display: grid; gap: 8px; }
.tp-talon::before, .tp-talon::after { content: ''; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--pq-fondo); }
.tp-talon::before { left: -11px; } .tp-talon::after { right: -11px; }
.tp-sena { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--pq-gris); }
@media (min-width: 960px) { .ticket-prop { padding: 26px 24px 0; } .tp-talon { margin: 0 -24px; padding: 18px 24px; } }

/* Mazo de tickets: los de abajo asoman, el elegido arriba */
.mazo { position: relative; height: 158px; margin: 6px auto 24px; max-width: 470px; }
.ticket {
  position: absolute; left: 4%; right: 4%; top: 22px; height: 126px; border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 40px 0 22px;
  transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--tr, 0deg));
}
.ticket::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 13px; background: var(--acento); }
.ticket::after { content: ''; position: absolute; right: 26px; top: 16px; bottom: 16px; border-left: 3px dashed var(--pq-hilo); opacity: .6; }
.ticket .dato { font-size: 10.5px; }
.ticket-promesa { font-family: var(--pq-display); font-weight: 700; font-size: clamp(14px, 3.8vw, 17px); color: var(--pq-tinta); white-space: nowrap; }
.letras { display: flex; justify-content: center; align-items: center; font-family: var(--pq-display); font-weight: 800; line-height: 1; white-space: nowrap; font-size: var(--fs, 38px); }
.letras i { font-style: normal; display: inline-block; min-width: .56em; text-align: center; padding: .08em .1em 0; margin: 0 .025em; border-radius: .07em;
  box-shadow: 0 .02em .05em rgba(57, 43, 58, .24); transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)); }
.letras .esp { width: .28em; }
.pegatina { position: absolute; z-index: 6; right: 1%; top: 2px; transform: rotate(8deg); background: var(--pq-magenta); color: #fff;
  font-family: var(--pq-mano); font-weight: 700; font-size: 21px; line-height: 1; padding: 6px 13px 7px; border-radius: 999px; box-shadow: 0 4px 10px -2px rgba(57, 43, 58, .3); }

/* Piezas: qué incluye */
.piezas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.etq { position: relative; display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 16px; min-height: 66px; transform: rotate(var(--r, 0deg)); }
.etq .circ { flex: none; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--c); }
.etq .circ svg { width: 27px; height: 27px; }
.etq b { display: block; font-family: var(--pq-display); font-weight: 700; font-size: 16px; line-height: 1.1; }
.etq span { display: block; font-size: 12px; font-weight: 600; color: var(--pq-gris); line-height: 1.2; margin-top: 2px; }
.etq.base { grid-column: 1 / -1; }
.etq .etq-mas { position: absolute; z-index: 2; left: -9px; top: -9px; width: 24px; height: 24px; border-radius: 50%; background: var(--pq-magenta);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(57, 43, 58, .25); }
.etq .etq-mas svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; }
/* All Inclusive: rompecabezas de seis piezas en sus casilleros */
.piezas.rompe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.casillero-base { grid-column: 1 / -1; aspect-ratio: auto !important; height: 74px; }
.casillero-base .etq { flex-direction: row !important; justify-content: flex-start !important; text-align: left !important; padding: 11px 14px !important; }
.casillero { position: relative; aspect-ratio: 1 / .78; border-radius: 16px; outline: 2.5px dashed rgba(185, 169, 156, .7); outline-offset: -2px; }
.casillero .etq { position: absolute; inset: 0; flex-direction: column; justify-content: center; text-align: center; gap: 6px; padding: 8px 6px; min-height: 0; }
.casillero .etq .circ { width: 40px; height: 40px; }
.casillero .etq b { font-size: 14.5px; }
.casillero .etq span { font-size: 11px; }
.piezas-pie { grid-column: 1 / -1; text-align: center; margin-top: 4px; font-size: 26px; }

.periodos { display: flex; gap: 6px; flex-wrap: wrap; }
.periodos button { border: 2px solid #E6DACB; background: #fff; border-radius: 10px; padding: 6px 10px; min-height: 40px; cursor: pointer; font-family: var(--pq-display); font-weight: 800; font-size: 14px; line-height: 1; }
.periodos button small { display: block; font: 700 10px var(--pq-texto); color: var(--pq-gris); margin-top: 2px; }
.periodos button[aria-pressed="true"] { background: var(--pq-navy); border-color: var(--pq-navy); color: #fff; }
.periodos button[aria-pressed="true"] small { color: rgba(255, 255, 255, .8); }
.modo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: #F1EADF; border-radius: 14px; padding: 5px; }
.modo button { border: 0; background: transparent; border-radius: 10px; padding: 8px 6px; min-height: 48px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.modo b { font-size: 13.5px; font-weight: 800; color: var(--pq-gris); }
.modo small { font-size: 11px; font-weight: 700; color: var(--pq-gris); }
.modo button[aria-pressed="true"] { background: var(--pq-navy); }
.modo button[aria-pressed="true"] b { color: #fff; }
.modo button[aria-pressed="true"] small { color: #FFD93D; }
.precios { display: grid; gap: 6px; }
.precios-cab, .precios-fila { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; }
.precios-cab span { font-size: 12px; font-weight: 800; color: var(--pq-tinta); text-align: center; line-height: 1.15; }
.precios-cab small { display: block; font-size: 10.5px; font-weight: 600; color: var(--pq-gris); }
.precios-fila { background: #FBF6EE; border-radius: 12px; padding: 7px 7px 7px 9px; }
.precios-dia { font-size: 12.5px; font-weight: 700; color: var(--pq-gris); line-height: 1.25; }
.precio { border: 0; background: #fff; border-radius: 10px; padding: 8px 2px; min-height: 52px; cursor: pointer; text-align: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(57, 43, 58, .1); position: relative; color: var(--pq-tinta); }
.precio[aria-pressed="true"] { background: var(--pq-navy); box-shadow: 0 6px 14px -4px rgba(38, 40, 72, .45); }
.precio[aria-pressed="true"] b, .precio[aria-pressed="true"] small { color: #fff; }
.precio[aria-pressed="true"]::after { content: '✓'; position: absolute; top: -7px; right: -5px; width: 20px; height: 20px; border-radius: 50%; background: var(--pq-amarillo); color: var(--pq-navy); font: 900 12px/20px var(--pq-texto); }
.precio b { display: block; font-family: var(--pq-display); font-weight: 800; font-size: clamp(13px, 3.5vw, 18px); line-height: 1.05; color: var(--pq-tinta); white-space: nowrap; }
.precio small { display: block; font-size: 10.5px; font-weight: 700; color: var(--pq-gris); margin-top: 2px; line-height: 1.2; }
.tarifa-nota { font-size: 12.5px; font-weight: 600; color: var(--pq-gris); line-height: 1.5; }

/* Desplegables */
.detalle { border-radius: 16px; }
.detalle summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding: 12px 16px;
  font-family: var(--pq-display); font-weight: 800; font-size: 16px; color: var(--pq-navy); border-radius: 14px; background: #FBF6EE; }
.detalle summary::-webkit-details-marker { display: none; }
.detalle summary::after { content: '+'; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--pq-navy); color: #fff; font: 800 20px/28px var(--pq-display); text-align: center; }
.detalle[open] summary::after { content: '−'; }
.detalle-in { padding: 14px 6px 4px; font-size: 14px; line-height: 1.55; color: var(--pq-tinta); display: grid; gap: 10px; }
.detalle-in ul { list-style: none; display: grid; gap: 6px; }
.detalle-in li { padding-left: 24px; position: relative; font-weight: 600; }
.detalle-in li::before { content: '✓'; position: absolute; left: 0; color: var(--pq-magenta); font-weight: 900; }
.detalle-in h4 { font-family: var(--pq-display); font-size: 15px; margin-top: 6px; }
.detalle-in .menu li::before { content: attr(data-l); color: #fff; background: var(--pq-magenta); border-radius: 6px; width: 18px; height: 18px; font-size: 11px; line-height: 18px; text-align: center; top: 2px; }
.detalle-in .nota { font-size: 12.5px; color: var(--pq-gris); font-weight: 600; }

/* ── ESCENA 3 · Salón ─────────────────────────────────────────────────── */
.esc-salon { padding-top: 80px; }
.postales { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 18px var(--gutter-d) 30px var(--gutter);
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.postales::-webkit-scrollbar { display: none; }
@media (min-width: 1000px) { .postales { justify-content: center; } }
.postal-sl { position: relative; flex: 0 0 min(76%, 300px); scroll-snap-align: center; padding: 10px 10px 62px; border-radius: 6px; transform: rotate(var(--g, 0deg));
  background: var(--pq-grano), var(--pq-papel); box-shadow: 0 2px 3px rgba(57, 43, 58, .09), 0 18px 30px -10px rgba(57, 43, 58, .3); }
.postal-sl img { width: 100%; height: auto; aspect-ratio: 4 / 4.6; object-fit: cover; border-radius: 3px; background: #E9E1D6; }
.postal-sl figcaption { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; line-height: 1; }
.postal-sl figcaption b { display: block; font-family: var(--pq-display); font-weight: 800; font-size: 21px; }
.postal-sl figcaption .mano { font-size: 25px; }
.espacio { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; margin: 10px auto 0; }
.espacio li { background: var(--pq-grano), var(--pq-papel); border-radius: 9px; padding: 8px 12px; font-size: 13px; font-weight: 700;
  box-shadow: 0 1px 1px rgba(57, 43, 58, .08), 0 6px 12px -6px rgba(57, 43, 58, .28); }

/* ── ESCENA 4 · Familias ──────────────────────────────────────────────── */
.resenas { display: grid; gap: 26px; max-width: 900px; margin: 0 auto; }
@media (min-width: 760px) { .resenas { grid-template-columns: 1fr 1fr; } }
.resena { position: relative; border-radius: 18px; padding: 24px 20px 18px; transform: rotate(var(--g, 0deg)); }
.resena .cinta { left: 26px; margin-left: 0; width: 60px; transform: rotate(-6deg); }
.estrellas { color: var(--pq-amarillo); font-size: 18px; letter-spacing: 2px; }
.resena-tit { font-family: var(--pq-display); font-weight: 700; font-size: 19px; line-height: 1.2; margin: 6px 0 8px; }
.resena blockquote p:not(.resena-tit) { font-size: 14.5px; color: var(--pq-gris); line-height: 1.55; }
.resena figcaption { margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--pq-gris); }
.seguidores { text-align: center; margin-top: 28px; font-weight: 800; color: var(--pq-navy); }

/* ── ESCENA 5 · Adicionales y shows ───────────────────────────────────── */
.extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 900px; margin: 0 auto; }
@media (min-width: 760px) { .extras { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1040px; } }
.extra { position: relative; border-radius: 16px; padding: 14px 12px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: center; transform: rotate(var(--r, 0deg)); }
.extra .circ { grid-row: span 2; width: 42px; height: 42px; border-radius: 50%; background: var(--c); display: flex; align-items: center; justify-content: center; }
.extra .circ svg { width: 27px; height: 27px; }
.extra b { font-family: var(--pq-display); font-weight: 700; font-size: 15.5px; line-height: 1.1; }
.extra span { font-size: 11.5px; font-weight: 600; color: var(--pq-gris); line-height: 1.25; }
.extra:last-child { grid-column: span 2; }
.extra em { grid-column: 1 / -1; font-style: normal; font-family: var(--pq-display); font-weight: 800; font-size: 18px; color: var(--pq-magenta); margin-top: 4px; }
.extras-nota { text-align: center; max-width: 36em; margin: 22px auto 0; font-size: 13.5px; font-weight: 600; color: var(--pq-gris); }

/* ── ESCENA 6 · Señar ─────────────────────────────────────────────────── */
.esc-senar .titular { font-size: clamp(30px, 8vw, 46px); margin-top: 8px; }
.pq-senar > .dato { text-align: left; }

/* ── ESCENA 7 · Otras opciones ────────────────────────────────────────── */
.esc-mas .titular { text-align: center; margin-bottom: 22px; }
.mas-grid { display: grid; gap: 16px; max-width: 640px; margin: 0 auto 18px; }
.mas { border-radius: 20px; padding: 20px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.mas-ic { width: 46px; height: 46px; border-radius: 50%; background: var(--c); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.mas h3 { font-family: var(--pq-display); font-weight: 800; font-size: 21px; line-height: 1.1; }
.mas p { font-size: 14px; color: var(--pq-gris); font-weight: 600; line-height: 1.55; }
.mas .mas-precio { color: var(--pq-tinta); font-weight: 700; font-size: 13px; }
.mas .btn { margin-top: auto; }
.esc-mas > .esc-in > .detalle { max-width: 640px; margin: 0 auto; padding: 6px; }
.condiciones { display: grid; gap: 4px 0; }
.condiciones dt { font-weight: 800; margin-top: 8px; }
.condiciones dd { color: var(--pq-gris); font-weight: 600; font-size: 13.5px; }

/* ── ESCENA 8 · Cierre ────────────────────────────────────────────────── */
.esc-cierre { text-align: center; padding-bottom: 40px; }
.esc-cierre .btn { margin-top: 26px; min-width: min(100%, 320px); }
.pie { margin-top: 48px; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 13px; color: var(--pq-gris); font-weight: 600; }
.pie b { color: var(--pq-tinta); font-family: var(--pq-display); font-size: 17px; }
.pie-k { position: relative; width: 54px; height: 54px; }
.pie-k img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* ── Barra fija ───────────────────────────────────────────────────────── */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; gap: 10px; align-items: center; justify-content: center;
  padding: 10px var(--gutter-d) calc(10px + env(safe-area-inset-bottom, 0px)) var(--gutter);
  background: rgba(244, 239, 231, .98); /* sin blur de fondo: en celular traba el scroll */
  box-shadow: 0 -6px 20px rgba(57, 43, 58, .12); transform: translateY(110%); transition: transform .35s var(--pq-suave);
}
.barra.visible { transform: none; }
.barra .btn { flex: 1 1 auto; max-width: 480px; }
.barra-wa { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 16px; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(37, 211, 102, .35); }
body.con-barra { padding-bottom: 84px; }

/* ── Movimiento: estados iniciales que pone el JS (solo con .js-escenas) ── */
@keyframes pq-caer-papel { from { opacity: 0; transform: translateY(-38px) rotate(var(--giro-ini, -8deg)) scale(1.04); } to { opacity: 1; transform: rotate(var(--giro, 0deg)); } }

/* ── PASO 3 · Elegí tu fecha y señá ───────────────────────────────────── */
.pq-senar {
  position: relative; max-width: 760px; margin: 34px auto 30px; padding: 26px 22px 24px;
  background: var(--pq-papel); border-radius: 26px; box-shadow: var(--pq-sombra-aire);
  scroll-margin-top: 16px;
}
.pq-senar > .pq-cinta { top: -11px; left: 28px; transform: rotate(-3deg); }
.pq-senar h2 { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: clamp(26px, 6vw, 34px); color: var(--pq-tinta); line-height: 1.05; }
.pq-senar h2 .paso-n { width: 30px; height: 30px; font-size: 16px; vertical-align: 3px; }
.pq-senar-bajada { margin-top: 6px; color: var(--pq-gris); font-size: 14.5px; font-weight: 600; line-height: 1.5; }
.pq-bloque { margin-top: 22px; }
.pq-bloque-tit { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pq-magenta); margin-bottom: 10px; }

.pq-paquetes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pq-opcion {
  position: relative; border: 2px solid #EADFD0; background: #fff; border-radius: 14px; padding: 12px 8px 10px; cursor: pointer;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 15px; color: var(--pq-tinta); line-height: 1.1;
  min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center;
}
.pq-opcion small { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 11px; color: var(--pq-gris); }
.pq-opcion[aria-pressed="true"] { background: var(--pq-navy); border-color: var(--pq-navy); color: #fff; }
.pq-opcion[aria-pressed="true"] small { color: rgba(255,255,255,.82); }
.pq-opcion[aria-pressed="true"]::after {
  content: '✓'; position: absolute; top: -9px; right: -7px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--pq-amarillo); color: var(--pq-navy); font: 900 14px/24px 'Plus Jakarta Sans', sans-serif; text-align: center;
}

/* Calendario */
.pq-cal { background: #FFFBF3; border: 1px solid #F1E4CF; border-radius: 18px; padding: 14px 12px 12px; }
.pq-cal-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pq-cal-mes { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 19px; color: var(--pq-tinta); text-transform: capitalize; }
.pq-cal-nav { width: 44px; height: 44px; border-radius: 12px; border: 0; background: #fff; box-shadow: var(--pq-sombra-papel); font-size: 20px; color: var(--pq-navy); cursor: pointer; }
.pq-cal-nav:disabled { opacity: .35; cursor: default; box-shadow: none; }
.pq-cal-sem, .pq-cal-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pq-cal-sem span { text-align: center; font-size: 11px; font-weight: 800; color: var(--pq-gris); text-transform: uppercase; padding: 4px 0; }
.pq-dia {
  position: relative; aspect-ratio: 1 / 1.05; min-height: 42px; border: 0; border-radius: 11px; cursor: pointer; background: #fff;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 17px; color: var(--pq-tinta);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0;
  box-shadow: 0 1px 2px rgba(57,43,58,.08);
}
.pq-dia:disabled { background: transparent; box-shadow: none; color: #B9AEB6; cursor: default; font-weight: 600; text-decoration: line-through; text-decoration-color: rgba(185,174,182,.5); }
.pq-dia.vacio { visibility: hidden; }
.pq-dia .puntos { display: flex; gap: 2px; height: 5px; }
.pq-dia .puntos i { width: 5px; height: 5px; border-radius: 50%; background: var(--pq-verde); }
.pq-dia .puntos i.no { background: #E5DCD3; }
.pq-dia.finde:not(:disabled) { background: #FFF4DE; }
.pq-dia[aria-pressed="true"] { background: var(--pq-navy); color: #fff; box-shadow: 0 6px 14px rgba(38,40,72,.3); }
.pq-dia.finde[aria-pressed="true"]:not(:disabled) { background: var(--pq-navy); } /* elegido le gana a "finde": sin esto, blanco sobre amarillo claro */
.pq-dia[aria-pressed="true"] .puntos i { background: var(--pq-amarillo); }
.pq-dia[aria-pressed="true"] .puntos i.no { background: rgba(255,255,255,.25); }
.pq-cal-ref { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 11.5px; font-weight: 700; color: var(--pq-gris); }
.pq-cal-ref i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pq-verde); margin-right: 5px; vertical-align: 1px; }
.pq-cal-ref .finde-ref { display: inline-block; width: 12px; height: 12px; border-radius: 4px; background: #FFF4DE; border: 1px solid #F1E4CF; margin-right: 5px; vertical-align: -2px; }
.pq-cal-estado { padding: 26px 8px; text-align: center; font-size: 14px; font-weight: 700; color: var(--pq-gris); }

/* Turnos */
.pq-turnos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pq-turno {
  position: relative; border: 2px solid #EADFD0; background: #fff; border-radius: 14px; padding: 12px 6px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; min-height: 92px; justify-content: center;
}
.pq-turno b { font-family: 'Baloo 2', sans-serif; font-size: 17px; color: var(--pq-tinta); line-height: 1; }
.pq-turno span { font-size: 12px; font-weight: 700; color: var(--pq-gris); }
.pq-turno em { font-style: normal; font-size: 13px; font-weight: 800; color: var(--pq-magenta); }
.pq-turno:disabled { background: #F7F2EA; border-style: dashed; cursor: default; }
.pq-turno:disabled b, .pq-turno:disabled span { color: #A79CA5; }
.pq-turno:disabled em { color: #A79CA5; font-weight: 700; }
.pq-turno[aria-pressed="true"] { background: var(--pq-navy); border-color: var(--pq-navy); }
.pq-turno[aria-pressed="true"] b, .pq-turno[aria-pressed="true"] span { color: #fff; }
.pq-turno[aria-pressed="true"] em { color: var(--pq-amarillo); }
.pq-turno[aria-pressed="true"]::after {
  content: '✓'; position: absolute; top: -9px; right: -7px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--pq-amarillo); color: var(--pq-navy); font: 900 14px/24px 'Plus Jakarta Sans', sans-serif; text-align: center;
}
@media (max-width: 420px) { .pq-turno b { font-size: 15.5px; } .pq-turno span { font-size: 11px; } .pq-turno em { font-size: 12px; } }

/* El ticket: el resumen se "imprime" cuando hay fecha y turno. */
.pq-ticket {
  position: relative; margin-top: 22px; background: var(--pq-crema); border-radius: 16px; padding: 18px 18px 16px;
  border: 2px dashed #E8D6B8;
}
.pq-ticket::before, .pq-ticket::after {
  content: ''; position: absolute; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--pq-papel);
}
.pq-ticket::before { left: -12px; } .pq-ticket::after { right: -12px; }
.pq-ticket-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pq-ticket-paq { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 21px; color: var(--pq-tinta); line-height: 1.05; }
.pq-ticket-fecha { font-size: 14px; font-weight: 800; color: var(--pq-navy); }
.pq-ticket-filas { margin-top: 12px; display: grid; gap: 7px; }
.pq-ticket-fila { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--pq-gris); }
.pq-ticket-fila b { color: var(--pq-tinta); font-weight: 800; text-align: right; }
.pq-ticket-fila.hoy { padding-top: 9px; margin-top: 3px; border-top: 1px dashed #E3D2B4; font-size: 15px; color: var(--pq-tinta); font-weight: 800; }
.pq-ticket-fila.hoy b { color: var(--pq-magenta); font-size: 19px; font-family: 'Baloo 2', sans-serif; }
.pq-ticket-fila small { font-size: 12px; font-weight: 700; color: var(--pq-gris); }
.pq-sello-ok {
  position: absolute; right: 14px; top: -16px; transform: rotate(8deg); background: var(--pq-amarillo); color: var(--pq-navy);
  font: 900 12px/1 'Plus Jakarta Sans', sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 7px 10px; border-radius: 8px;
  box-shadow: 0 3px 8px rgba(57,43,58,.18);
}
@media (prefers-reduced-motion: no-preference) {
  .pq-ticket.imprimir { animation: pq-imprimir .55s var(--pq-suave) both; }
  .pq-ticket.imprimir .pq-sello-ok { animation: pq-sellar .45s var(--pq-resorte) .35s both; }
  .pq-turnos.llegar .pq-turno { animation: pq-caer-papel .45s var(--pq-resorte) both; --giro-ini: -4deg; }
  .pq-turnos.llegar .pq-turno:nth-child(2) { animation-delay: .06s; }
  .pq-turnos.llegar .pq-turno:nth-child(3) { animation-delay: .12s; }
}
@keyframes pq-imprimir { from { opacity: 0; clip-path: inset(-40px -40px 100% -40px); transform: translateY(-8px); } to { opacity: 1; clip-path: inset(-40px -40px -40px -40px); transform: none; } }
@keyframes pq-sellar { from { opacity: 0; transform: scale(2.2) rotate(-12deg); } to { opacity: 1; transform: rotate(8deg); } }

/* Formulario */
.pq-form { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pq-campo { display: grid; gap: 5px; }
.pq-campo.ancho { grid-column: 1 / -1; }
.pq-campo label { font-size: 13px; font-weight: 800; color: var(--pq-tinta); }
.pq-campo label span { font-weight: 600; color: var(--pq-gris); }
.pq-campo input {
  width: 100%; min-height: 48px; border: 2px solid #E6DACA; border-radius: 12px; padding: 10px 13px; background: #fff;
  font: 600 16px 'Plus Jakarta Sans', sans-serif; color: var(--pq-tinta);
}
.pq-campo input:focus { outline: none; border-color: var(--pq-navy); box-shadow: 0 0 0 3px rgba(38,40,72,.15); }
@media (max-width: 520px) { .pq-form { grid-template-columns: minmax(0, 1fr); } }
.pq-pagar { width: 100%; margin-top: 18px; min-height: 58px; font-size: 18px; }
.pq-pagar:disabled { background: #B9AEB6; box-shadow: none; cursor: default; }
.pq-letra-chica { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--pq-gris); line-height: 1.55; text-align: center; }
.pq-letra-chica a { color: var(--pq-navy); font-weight: 800; }
.pq-aviso { margin-top: 12px; border-radius: 12px; padding: 11px 13px; font-size: 13.5px; font-weight: 700; line-height: 1.45; display: flex; gap: 8px; }
.pq-aviso.error { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.pq-aviso.info { background: #F0F9FF; color: #075985; border: 1px solid #BAE6FD; }

/* ── Barra fija de abajo: el camino a señar siempre a mano ────────────── */
/* En pantallas anchas los días no son cuadrados: con siete columnas de 95 px el
   calendario medía más que la pantalla. */
@media (min-width: 640px) {
  .pq-dia { aspect-ratio: auto; height: 52px; }
}

/* Página de vuelta de Mercado Pago (cumple-sena.html) */
.pq-guirnalda { display: block; width: min(100%, 520px); height: 34px; margin: 0 auto 6px; overflow: visible; }

/* ── ESCENA 2b · Cumple Express ───────────────────────────────────────── */
.express-grid { display: grid; gap: 22px; align-items: start; max-width: 1000px; margin: 0 auto; }
@media (min-width: 900px) { .express-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; } }
.mazo-express { height: 150px; margin-bottom: 10px; }
.mazo-express .ticket { top: 10px; }
.cafe-turno { position: relative; border-radius: 18px; padding: 22px 18px 16px; transform: rotate(-.8deg); }
.cafe-turno .cinta { left: 30px; margin-left: 0; width: 64px; }
.cafe-turno ul { list-style: none; display: grid; gap: 8px; margin-top: 10px; }
.cafe-turno li { position: relative; padding-left: 26px; font-size: 15px; font-weight: 600; }
.cafe-turno li::before { content: '☕'; position: absolute; left: 0; top: 0; font-size: 15px; }
.cafe-turno li:last-child::before { content: '🚫'; }
.express-der { display: grid; gap: 16px; }
.express-suma { font-size: 15.5px; font-weight: 600; line-height: 1.5; color: var(--pq-tinta); }
.piezas-express .etq:last-child { grid-column: 1 / -1; }
.express-carta { border-radius: 18px; padding: 16px 16px 16px; display: grid; gap: 12px; }
.express-carta p { font-size: 14px; font-weight: 600; color: var(--pq-gris); line-height: 1.55; }
.express-carta p b { color: var(--pq-tinta); }
.express-carta .btn { justify-self: start; min-height: 46px; font-size: 15.5px; }

/* ── ESCENA 1b · Lo que te sacás de encima ────────────────────────────── */
.preg-col { position: relative; max-width: 900px; margin: 0 auto; }
.preguntas { list-style: none; display: grid; gap: 18px; }
@media (min-width: 760px) and (max-width: 899px) { .preguntas { grid-template-columns: 1fr 1fr; gap: 22px; } }
.preg { position: relative; border-radius: 18px; padding: 18px 18px 16px; transform: rotate(var(--g, 0deg)); }
.preg-q { font-family: var(--pq-display); font-weight: 800; font-size: clamp(21px, 5.6vw, 24px); line-height: 1.12; color: var(--pq-tinta); padding-right: 108px; }
.preg-r { margin-top: 10px; padding-top: 10px; border-top: 2px dashed #E8DCCB; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--pq-gris); }
.preg-r b { color: var(--pq-tinta); }
.preg-r em { display: inline-block; font-style: normal; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 9px 2px 10px; white-space: nowrap; }
.etq-tres { background: var(--pq-celeste-p); color: var(--pq-navy); box-shadow: inset 4px 0 0 var(--pq-cian); }
.etq-exp { background: var(--pq-amarillo-p); color: var(--pq-tinta); box-shadow: inset 4px 0 0 var(--pq-naranja); }
.etq-exp-ai::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--pq-magenta); vertical-align: 1px; }
.etq-ai { background: var(--pq-rosa-p); color: var(--pq-tinta); box-shadow: inset 4px 0 0 var(--pq-magenta); }
.sello-res { position: absolute; top: 14px; right: 12px; transform: rotate(8deg); font: 800 12px/1 var(--pq-texto); letter-spacing: .1em; text-transform: uppercase;
  color: var(--pq-magenta); border: 2.5px solid var(--pq-magenta); border-radius: 9px; padding: 7px 8px; background: rgba(255, 254, 250, .9); }
.preg-tuya { position: relative; max-width: 560px; margin: 30px auto 0; border-radius: 22px; padding: 24px 20px 22px; text-align: center; transform: rotate(-.8deg);
  box-shadow: 0 0 0 3px var(--pq-magenta-mano), 0 22px 40px -14px rgba(215, 44, 131, .4); }
.preg-tuya .preg-q { padding: 0; font-size: 26px; }
.preg-tuya-r { font-size: 48px; line-height: 1; margin-top: 4px; }
.preg-tuya .preg-r { border: 0; padding: 0; margin-top: 6px; color: var(--pq-tinta); font-weight: 700; }
.corazon { position: absolute; right: -10px; top: -14px; width: 44px; height: 44px; border-radius: 50%; background: var(--pq-amarillo); color: var(--pq-magenta-mano);
  display: flex; align-items: center; justify-content: center; font-size: 22px; transform: rotate(12deg); box-shadow: 0 4px 10px -2px rgba(57, 43, 58, .3); }
.lista-pie { display: grid; justify-items: center; gap: 14px; margin-top: 30px; }
/* El sello viajero: baja pegado al centro de la pantalla y golpea cada pregunta
   al pasar. Altura 0: no agrega largo a la sección. */
.sello-viajero { display: none; }
.viajero .sello-viajero { display: block; position: sticky; top: 50svh; height: 0; z-index: 5; pointer-events: none; }
.sv-cuerpo { position: absolute; right: -10px; top: -30px; width: 44px; height: 54px; transform-origin: 50% 100%; }
.sv-mango { position: absolute; left: 50%; top: 0; width: 18px; height: 26px; margin-left: -9px; border-radius: 11px 11px 5px 5px; background: var(--pq-naranja);
  box-shadow: inset -4px 0 0 rgba(57, 43, 58, .14); }
.sv-mango::after { content: ''; position: absolute; left: -7px; right: -7px; bottom: -6px; height: 8px; border-radius: 4px; background: var(--pq-naranja); }
.sv-base { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; border-radius: 6px; background: var(--pq-magenta); color: #fff;
  font: 800 14px/22px var(--pq-display); text-align: center; box-shadow: 0 6px 12px -4px rgba(57, 43, 58, .4); }
@media (min-width: 900px) {
  .lista-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
  .lista-in > .esc-cab { position: sticky; top: 90px; text-align: left; align-items: flex-start; margin-bottom: 0; }
  .preg-col { max-width: 540px; margin: 0; }
  .sv-cuerpo { right: -34px; }
}

/* ── ESCENA 3b · Momento ──────────────────────────────────────────────── */
.esc-momento { padding-block: 70px 80px; overflow: hidden; }
.esc-momento .esc-in { position: relative; text-align: center; }
.momento { font-family: var(--pq-display); font-weight: 800; font-size: clamp(40px, 11vw, 84px); line-height: 1; letter-spacing: -.015em; color: var(--pq-tinta); }
.m-linea { display: block; }
.m-linea.mano { font-size: 1.12em; margin-top: .12em; letter-spacing: 0; }
.momento-sub { max-width: 30em; margin: 26px auto 0; font-size: 17px; font-weight: 600; color: var(--pq-gris); line-height: 1.55; }
/* La regla del marco de la puerta: las edades se marcan con el scroll. */
.regla { position: absolute; left: 0; top: 4px; bottom: 4px; width: 30px; border-radius: 4px;
  background: repeating-linear-gradient(to top, transparent 0 9px, rgba(57, 43, 58, .18) 9px 10px) right / 8px 100% no-repeat, var(--pq-grano), var(--pq-papel);
  box-shadow: 0 1px 2px rgba(57, 43, 58, .12); }
.marca { position: absolute; left: 0; bottom: calc(4% + var(--m) * 12.5%); display: flex; align-items: center; gap: 4px; }
.marca i { display: block; width: 34px; height: 3px; border-radius: 2px; background: var(--pq-tinta); transform-origin: 0 50%; }
.marca b { font: 700 17px/1 var(--pq-mano); color: var(--pq-gris); white-space: nowrap; }
.esc-momento .esc-in { padding-left: calc(var(--gutter) + 58px); }
@media (min-width: 900px) { .esc-momento .esc-in { padding-left: 110px; padding-right: 110px; } .regla { left: 30px; } }

/* Tranquilidad junto al pago */
.garantias { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; margin-top: 18px; font-size: 12.5px; font-weight: 700; color: var(--pq-tinta); }
.garantias + .pq-aviso[hidden] + .pq-pagar { margin-top: 12px; }
.pq-escasez { margin-top: 10px; font-size: 13px; font-weight: 800; color: #9A3412; background: #FFF4DE; border: 1px solid #F1D9A6; border-radius: 10px; padding: 8px 10px; text-align: center; }

/* Fluidez: lo que se mueve todo el tiempo va en su propia capa, así moverlo no
   repinta sombras ni grano. */
.hero-anima .esc-hero .postal { will-change: transform; }

/* ── Las tres lado a lado (tabla real, se lee sin JS) ─────────────────── */
.detalle-todo { margin-top: 26px; padding: 6px; }
.tabla-scroll { overflow-x: auto; margin: 0 -6px; }
.comparar { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.comparar caption { text-align: left; font: 800 15px var(--pq-display); padding: 0 6px 8px; }
.comparar th, .comparar td { padding: 8px 6px; border-bottom: 1px solid #EFE6D9; vertical-align: middle; }
.comparar thead th { font: 800 10.5px/1.15 var(--pq-texto); text-transform: uppercase; letter-spacing: .03em; color: var(--pq-navy); width: 56px; text-align: center; }
.comparar thead th:nth-child(2) { box-shadow: inset 0 -3px 0 var(--pq-cian); }
.comparar thead th:nth-child(3) { box-shadow: inset 0 -3px 0 var(--pq-naranja); }
.comparar thead th:nth-child(4) { box-shadow: inset 0 -3px 0 var(--pq-magenta); }
.comparar tbody th { text-align: left; font-weight: 600; color: var(--pq-tinta); line-height: 1.35; }
.comparar td { text-align: center; }
.comparar td.si { color: var(--pq-magenta); font-weight: 900; font-size: 15px; }
.comparar td.si small { display: block; font: 700 10px/1.1 var(--pq-texto); color: var(--pq-gris); }
.comparar td.no { color: var(--pq-gris); }
@media (min-width: 760px) { .comparar thead th { width: 110px; } .comparar { font-size: 14px; } }

/* ── Cumple Express: el ticket sale del turnero; barras de tiempo ─────── */
.turnero { position: relative; padding-top: 6px; overflow: hidden; }
.ranura { position: relative; z-index: 2; display: block; height: 10px; margin: 0 6%; border-radius: 5px; background: var(--pq-navy); box-shadow: inset 0 3px 3px rgba(0, 0, 0, .35); }
.turnero .mazo-express { margin-top: -6px; }
.barras { display: grid; gap: 10px; margin-top: 14px; }
.barra-t { position: relative; display: grid; gap: 4px; }
.barra-nom { font-size: 12.5px; font-weight: 800; color: var(--pq-tinta); }
.barra-riel { position: relative; display: block; height: 12px; border-radius: 6px; background: #EFE6D9; overflow: hidden; }
.barra-llena { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 6px 0 0 6px; background: var(--pq-cian); }
.barra-t--exp .barra-llena { background: var(--pq-naranja); }
.barra-extra { position: absolute; left: 75%; top: 0; bottom: 0; width: 25%; overflow: hidden; }
.barra-extra-in { position: absolute; inset: 0; border-radius: 0 6px 6px 0; background: var(--pq-magenta); }
.barra-mas { position: absolute; right: 0; top: -4px; font-size: 20px; line-height: 1; }

/* ── El salón: cada postal llega tapada por un recorte de papel que se pliega ── */
.recorte { position: absolute; inset: 10px 10px 62px; z-index: 2; border-radius: 3px; overflow: hidden; pointer-events: none; }
.recorte i { position: absolute; display: block; }
.recorte i:nth-child(1) { inset: 0; background: var(--pq-grano), var(--rc1, var(--pq-amarillo-p)); }
.recorte i:nth-child(2) { left: 0; right: 0; top: 0; height: 26%; background: var(--pq-grano), var(--rc2, var(--pq-celeste-p));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 92% 70%, 84% 100%, 76% 70%, 68% 100%, 60% 70%, 52% 100%, 44% 70%, 36% 100%, 28% 70%, 20% 100%, 12% 70%, 4% 100%, 0 75%); }
.recorte i:nth-child(3) { left: 22%; right: 22%; bottom: 0; height: 52%; border-radius: 999px 999px 0 0; background: var(--pq-grano), var(--rc3, var(--pq-naranja)); }

/* ── Reseñas: las estrellas se pegan como stickers ───────────────────── */
.estrellas span { display: inline-block; }

/* ── Adicionales: plancha de stickers con la esquina levantada ────────── */
.extra { overflow: visible; }
.extra::after { content: ''; position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; border-radius: 0 0 14px 0;
  background: linear-gradient(135deg, transparent 50%, #EDE3D4 50%); transform: scale(0); transform-origin: 100% 100%; }
.extras-levantados .extra::after { transform: scale(1); }

/* ── Seña: el ticket se imprime desde una ranura; "✓ elegida" ─────────── */
.pq-ticket-ranura { overflow: hidden; margin: 0 -6px; padding: 0 6px 6px; }
@keyframes pq-imprimir { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
.pq-opcion.recien::before { content: '✓ elegida'; position: absolute; left: 50%; top: -12px; margin-left: -38px; width: 76px; padding: 4px 0; border-radius: 6px;
  background: var(--pq-amarillo); color: var(--pq-navy); font: 900 11px/1 var(--pq-texto); text-align: center; animation: pq-sellar .45s var(--pq-resorte) both; }

/* ── Cierre: la última tarea de la lista ──────────────────────────────── */
.ultima { position: relative; display: inline-flex; align-items: center; gap: 12px; margin: 0 auto 26px; padding: 14px 18px 14px 14px; border-radius: 12px; transform: rotate(-1.5deg); }
.ultima .cinta { width: 56px; margin-left: -28px; top: -12px; }
.ult-caja { position: relative; flex: none; width: 26px; height: 26px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 2px rgba(57, 43, 58, .25); }
.ult-cor { position: absolute; inset: -6px; display: grid; place-items: center; font-style: normal; font-size: 26px; color: var(--pq-magenta-mano); }
.ult-txt { font: 700 17px/1.1 var(--pq-texto); color: var(--pq-tinta); }
.ult-mano { font-size: 25px; line-height: 1; }
@media (max-width: 400px) { .ultima { flex-wrap: wrap; justify-content: center; } }

/* ── Barra fija: el texto se da vuelta con la propuesta elegida ──────── */
.barra-btn { perspective: 400px; }
.bb-txt { display: inline-block; }

/* ── Reducir movimiento: todo quieto, en su estado final ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .hl-kc, .tarea, .tarea-in, .selector-pildora, .solapa > span, .barra { transition: none !important; }
  .cuotas .cuotas-pista { animation: none !important; } .tk-cara { transition: none !important; }
}

/* Cambios sin animar (estado inicial, reducir movimiento, salir del recorrido) */
.hoja-lista.sin-trans .hl-kc, .hoja-lista.sin-trans .tarea, .hoja-lista.sin-trans .tarea-in, .hoja-lista.sin-trans .solapa > span { transition: none !important; }
.tp-letras { width: 100%; display: flex; justify-content: center; }
/* Hasta que el JS prepara el titular, la primera línea y la letra a mano no se
   muestran (así no aparecen y desaparecen). Si el JS no corre, el <head> saca
   .js-escenas a los 4 s. */
.js-escenas:not(.hero-listo) .esc-hero .linea[data-h="1"], .js-escenas:not(.hero-listo) .esc-hero .escribir, .js-escenas:not(.hero-listo) .esc-hero .subrayado { opacity: 0; }

/* La hoja quieta se aplana a 2D: sin capas 3D por renglón mientras nadie la toca. */
.hoja-lista.plana .tarea { perspective: none; }
.hoja-lista.plana .tarea-in { transform: none !important; transition: none !important; transform-style: flat; }
.hoja-lista.plana .cara { -webkit-backface-visibility: visible; backface-visibility: visible; }
.hoja-lista.plana .cara-kc { transform: none; }
.hoja-lista.plana .tarea.cubierta .cara-vos, .hoja-lista.plana .tarea:not(.cubierta) .cara-kc { visibility: hidden; }

/* ── Ajustes de la revisión: pantallas chicas, lectura y accesibilidad ── */
.ticket-prop, .tp-cab { grid-template-columns: minmax(0, 1fr); }
.hl-pie { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none; }
.hl-quedan { white-space: nowrap; }
.ht-resp .mano, .hero-texto .dato, .momento .m-linea { text-wrap: balance; }
.postal { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* Pausa del taco: discreta; se ve al enfocarla, al pasar el mouse o cuando está pausado. */
.hero-pausa { position: absolute; right: 9%; bottom: 4%; z-index: 8; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(38, 40, 72, .78); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .2s; }
.hero-pausa span { display: block; width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.hero-pausa[aria-pressed="true"] span { width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
.hero-pausa:focus-visible, .hero-escena.pausada .hero-pausa { opacity: 1; }
@media (hover: hover) { .hero-escena:hover .hero-pausa { opacity: .9; } }
/* Pestaña pegada en el celular: más baja (el detalle ya está en la hoja). El
   margen compensa la diferencia de alto, así lo de abajo no salta. */
@media (max-width: 959px) {
  .selector button { height: 86px; min-height: 0; }
  .selector.pegado { margin-bottom: 46px; }
  .selector.pegado button { height: 54px; }
  .selector.pegado .sel-quedan, .selector.pegado .sel-desde small { display: none; }
}
@media (max-width: 759px) {
  .viajero .preguntas, .viajero .preg-tuya { margin-right: 26px; }
  .sv-cuerpo { right: -4px; }
}
@media (max-width: 400px) {
  .comparar thead th { letter-spacing: 0; font-size: 10px; padding: 8px 2px; width: auto; }
  .comparar th, .comparar td { padding: 8px 3px; }
  .comparar tbody th { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
}
@media (max-width: 389px) {
  .tp-cab .pegatina { top: -16px; right: -10px; }
  .selector button[aria-selected="true"]::after { top: -12px; right: -8px; }
  .sel-pegatina { left: -8px; }
  .hl-cab { font-size: 15px; padding-left: 40px; }
  .hl-quedan { font-size: 12px; }
}
.cuotas:not(.anima) .tk { width: min(44vw, 200px); height: 64px; }
@media (max-width: 374px) {
  .tk-cara b { font-size: 15px; }
  .tk-cara small { letter-spacing: .03em; }
  .y-disf { font-size: 18px; right: 6px; }
  .circulo { width: 172px; }
  .precio b { font-size: 13.5px; }
}
@media (max-width: 359px) {
  .extras, .piezas { grid-template-columns: minmax(0, 1fr); }
  .extra:last-child { grid-column: auto; }
  .circulo { width: 168px; }
  .ticket-promesa { white-space: normal; text-align: center; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .hero-pausa { display: none; } }

/* ── Salón: los rincones (fotos del Instagram, 23-oct-2026) ───────────── */
.rincones-tit { margin: 34px 0 4px; text-align: center; font: 800 clamp(24px, 6.4vw, 30px)/1.1 var(--pq-display); color: var(--pq-tinta); }
.rincones-tit .mano { font-size: 1.12em; }
.rincones { list-style: none; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter-d)) 0 calc(-1 * var(--gutter));
  padding: 14px var(--gutter-d) 22px var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rincones::-webkit-scrollbar { display: none; }
.rincones li { flex: 0 0 min(68%, 270px); scroll-snap-align: center; }
.rincones img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; background: #E9E1D6;
  box-shadow: 0 2px 3px rgba(57, 43, 58, .1), 0 14px 28px -12px rgba(57, 43, 58, .35); }
@media (min-width: 760px) { .rincones li { flex-basis: 240px; } }

/* Precios: siempre el total primero, con el contexto y las cuotas debajo. */
.tp-como { font-size: 14px; line-height: 1.5; text-align: center; }
.tp-paso { font: 800 16px/1.25 var(--pq-display); margin-top: 4px; }
.tp-ayuda { font-size: 12px; color: var(--pq-gris); margin-top: -9px; }
.tp-contexto { font-size: 12px; color: var(--pq-gris); line-height: 1.4; margin-bottom: 6px; }
.tp-etiqueta { font-weight: 800; font-size: 15px; }
.tp-precio { gap: 7px; padding: 18px 12px; }
.tp-sub { font-size: 14px; color: var(--pq-tinta); }
.tp-base { font-size: 12px; line-height: 1.5; }
.tp-otra { border-top: 1px solid #E6DACB; padding-top: 10px; margin-top: 4px; line-height: 1.5; }
.esc-rincones { padding-top: 38px; }
.rincon-postal { margin: 0; position: relative; }
.rincon-postal figcaption { position: absolute; bottom: 12px; left: 10px; right: 10px; background: var(--pq-papel); border-radius: 10px; padding: 12px; text-align: center; font: 800 21px/1.1 var(--pq-display); box-shadow: 0 3px 12px #392b3a20; }

/* ── Embudo (12-nov-2026): los dos caminos del hero y las fechas libres ── */
.hero-accion { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 660px; margin: 18px auto 0; padding-left: var(--gutter); padding-right: var(--gutter-d); }
.hero-accion .btn { flex: 1 1 240px; }
.fechas-libres { max-width: 620px; margin: 18px auto 0; padding: 14px var(--gutter-d) 0 var(--gutter); text-align: center; }
.fl-tit { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pq-magenta); }
.fl-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.fl-chip { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 88px; min-height: 52px; padding: 7px 12px; cursor: pointer;
  border: 2px solid #EADFD0; border-radius: 14px; background: var(--pq-papel); box-shadow: var(--pq-sombra-papel); color: var(--pq-tinta); }
.fl-chip b { font: 800 16px/1.1 var(--pq-display); text-transform: capitalize; }
.fl-chip small { font: 700 11px/1.2 var(--pq-texto); color: var(--pq-gris); }
.fl-chip:hover, .fl-chip:focus-visible { border-color: var(--pq-navy); outline: none; }
.fl-nota { margin-top: 10px; font-size: 13px; font-weight: 700; color: #9A3412; }
@media (min-width: 900px) { .hero-accion, .fechas-libres { margin-left: auto; margin-right: auto; } }

/* ── Conocé el salón: pedido de visita (misma hoja que la seña) ────────── */
.pq-visita {
  position: relative; max-width: 760px; margin: 0 auto; padding: 26px 22px 24px;
  background: var(--pq-papel); border-radius: 26px; box-shadow: var(--pq-sombra-aire); scroll-margin-top: 16px;
}
.pq-visita .titular { font-size: clamp(30px, 8vw, 46px); margin-top: 8px; }
.pq-visita > .dato { text-align: left; }
.pq-visita-dias, .pq-visita-franjas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pq-visita-dias .pq-opcion { text-transform: capitalize; min-height: 52px; }
.pq-ayuda { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--pq-gris); }
.pq-campo select {
  width: 100%; min-height: 48px; border: 2px solid #E6DACA; border-radius: 12px; padding: 10px 13px; background: #fff;
  font: 600 16px 'Plus Jakarta Sans', sans-serif; color: var(--pq-tinta);
}
.pq-campo select:focus { outline: none; border-color: var(--pq-navy); box-shadow: 0 0 0 3px rgba(38,40,72,.15); }
.pq-visita-ok { margin-top: 18px; padding: 18px; border-radius: 18px; background: #EEF8F3; border: 1px solid #BFE3D2; text-align: center; font-weight: 600; color: var(--pq-tinta); }
.pq-visita-ok:focus { outline: none; }
.pq-visita-ok-tit { font: 800 24px/1.1 var(--pq-display); color: #1E6B4E; margin-bottom: 6px; }

/* ── Lectura rápida (12-nov-2026): menos texto corrido, más pasos y chips ─ */
/* Barrita de progreso arriba: se llena al bajar (js/paquetes-embudo.js). */
.progreso { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 950; pointer-events: none; }
.progreso i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--pq-magenta), var(--pq-naranja), var(--pq-amarillo)); border-radius: 0 3px 3px 0; }
/* "En las tres": chips en vez de una oración larga. */
.tres-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.tres-chips li { background: var(--pq-papel); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; font-weight: 700; box-shadow: 0 1px 2px rgba(57, 43, 58, .1); }
/* Seña en tres pasos numerados. */
.pasos-sena { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; counter-reset: none; }
.pasos-sena li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 12px 6px 10px; border-radius: 14px; background: #FFF6E5; }
.pasos-sena b { width: 30px; height: 30px; border-radius: 50%; background: var(--pq-magenta); color: #fff; font: 800 16px/30px var(--pq-display); }
.pasos-sena span { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--pq-tinta); }
.pasos-sena strong { font-weight: 800; color: var(--pq-magenta); }
.pasos-sena small { display: block; font-size: 11px; font-weight: 600; color: var(--pq-gris); }
/* Preocupaciones resueltas: tarjetas más cortas en el celular. */
@media (max-width: 759px) {
  .preguntas { gap: 12px; }
  .preg { padding: 14px 15px 12px; }
  .preg-q { font-size: clamp(19px, 5.2vw, 22px); }
  .preg-r { margin-top: 8px; padding-top: 8px; font-size: 14.5px; }
}
.garantias li { text-align: center; }