/* Club Recreo · landing de Leo con Tuli (solo index.html).
   Va después de marca.css y sitio.css. Mobile primero (375 px), se abre en 760 y 1080 px.
   Lenguaje del kit: contorno de tinta, colores planos, papel. Sin sombras difusas ni degradés.
   Movimiento: solo transform, opacity y clip-path. Con prefers-reduced-motion queda todo quieto
   y los videos esperan a que los pidan (js/inicio.js). Las entradas dependen de la clase .mov,
   que pone el JS: sin JS la página se ve completa. */

:root {
  --curva-resorte: cubic-bezier(.34, 1.56, .64, 1);
  --punteado: radial-gradient(circle, var(--cr-tinta) 2.4px, transparent 2.9px);
}

/* ---------- Papel: grano muy suave detrás del contenido, fijo ---------- */
html { background: var(--cr-crema); }
body { background: transparent; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .34 0 0 0 0 .2 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.seccion { padding-block: 76px 80px; }
@media (min-width: 1080px) { .seccion { padding-block: 128px 136px; } }
.h2 { font-size: clamp(2rem, 1.25rem + 3.2vw, 3.5rem); line-height: 1.03; letter-spacing: -.024em; max-width: 18ch; font-weight: 650; }
.cab { max-width: 760px; }
.bajada { font-size: 1.125rem; }

/* ---------- Entradas al bajar (las activa js/inicio.js) ---------- */
.mov [data-revela], .mov .libro {
  opacity: 0; transform: translateY(32px);
  transition: opacity 700ms var(--curva-salida), transform 900ms var(--curva-salida);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.mov [data-revela].visto, .mov .libro.visto { opacity: 1; transform: none; }

/* ---------- Tuli recorre la página (barra de avance) ---------- */
.avance { display: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .avance { display: block; position: fixed; z-index: 15; inset: 0 0 auto; height: 30px; pointer-events: none;
      animation: avance-aparece linear both; animation-timeline: scroll(root); }
    .avance::before { content: ""; position: absolute; inset: 7px 0 auto; height: 4px; opacity: .45;
      background: radial-gradient(circle, var(--cr-tinta) 1.7px, transparent 2.1px) 0 50% / 11px 4px repeat-x; }
    .avance::after { content: ""; position: absolute; inset: 6px 0 auto; height: 6px; border-radius: 0 3px 3px 0;
      background: var(--cr-verde-boton); transform-origin: left; animation: avance-llena linear both; animation-timeline: scroll(root); }
    .avance__oruga { position: absolute; z-index: 1; top: 0; left: 0; width: 44px;
      animation: avance-camina linear both; animation-timeline: scroll(root); }
    .avance__oruga svg { width: 100%; }
  }
}
@keyframes avance-aparece { 0% { opacity: 0; } 4%, 100% { opacity: 1; } }
@keyframes avance-llena { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes avance-camina { from { transform: translateX(-6px); } to { transform: translateX(calc(100vw - 46px)); } }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 4px 0 64px; }
.hero .ancho { display: grid; gap: 6px; }
@media (min-width: 1080px) {
  .hero { padding-bottom: 96px; }
  .hero .ancho { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: 48px; padding-top: 28px; }
}
.hero__huevo { width: 70px; margin: 0 0 2px -8px; transform-origin: 50% 85%; }
.hero h1 { font-size: clamp(2.75rem, 1.55rem + 5.4vw, 5.1rem); line-height: .98; letter-spacing: -.032em; max-width: 12ch; font-weight: 650; }
.hero h1 em { font-style: normal; color: var(--cr-verde-texto); }
.subraya { position: relative; display: inline-block; white-space: nowrap; z-index: 0; }
.subraya svg { position: absolute; z-index: -1; left: -5%; bottom: -.06em; width: 110%; height: .42em; overflow: visible; }
.subraya path { fill: none; stroke: var(--nivel-2); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 240; }
.hero .bajada { color: var(--cr-tinta); font-size: 1.1875rem; max-width: 34ch; margin-top: 18px; }
@media (min-width: 1080px) { .hero .bajada { font-size: 1.3125rem; } }
.hero__accion { margin-top: 26px; }

.hero__visual { position: relative; margin: 14px -16px 0; }
@media (min-width: 760px) { .hero__visual { margin: 18px 0 0; } }
.hero__visual > picture img { width: 100%; }
.hero__visual figcaption { margin: 12px 16px 0; padding-right: 40%; font-size: .875rem; color: var(--cr-tinta-suave); }
@media (min-width: 760px) { .hero__visual figcaption { margin-inline: 0; } }
@media (min-width: 1080px) { .hero__visual figcaption { padding-right: 250px; margin-top: 18px; } }

.hero__visual .clip--hero { position: absolute; right: 20px; bottom: -40px; width: 31%; max-width: 168px; transform: rotate(4deg); }
@media (min-width: 1080px) { .hero__visual .clip--hero { right: -8px; bottom: -70px; width: 200px; max-width: none; } }
.hero__nota { display: none; }
@media (min-width: 1080px) {
  .hero__nota { display: flex; align-items: flex-end; gap: 4px; position: absolute; right: 214px; bottom: 34px;
    font: 700 1.125rem/1 var(--fuente-lectura); color: var(--cr-tinta); transform: rotate(-4deg); }
  .hero__nota svg { width: 52px; height: 36px; margin-bottom: -18px; fill: none; stroke: var(--cr-tinta); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
}

@media (prefers-reduced-motion: no-preference) {
  .entra { animation: entrar var(--dur-larga) var(--curva-salida) both; animation-delay: calc(var(--i, 0) * 80ms); }
  .hero__visual.entra { animation-name: entrar-visual; animation-duration: 1000ms; }
  .hero__huevo { animation: entrar var(--dur-larga) var(--curva-salida) both, tambaleo 1.6s var(--curva-suave) 900ms 2; }
  .subraya path { animation: subrayar 900ms var(--curva-salida) 650ms both; }
  .clip--hero { animation: clip-cae 1100ms var(--curva-resorte) 500ms both; }
  .hero__nota { animation: entrar 700ms var(--curva-salida) 1300ms both; }
}
@keyframes entrar { from { opacity: 0; transform: translateY(16px); } }
@keyframes entrar-visual { from { opacity: 0; transform: translateY(22px) scale(.97); } }
@keyframes tambaleo { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-7deg); } 40% { transform: rotate(6deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(2deg); } }
@keyframes subrayar { from { stroke-dashoffset: 240; } to { stroke-dashoffset: 0; } }
@keyframes clip-cae { from { opacity: 0; transform: translateY(40px) rotate(14deg) scale(.9); } }

/* ---------- Videos en loop ---------- */
.clip { position: relative; aspect-ratio: 9 / 16; overflow: hidden; isolation: isolate;
  border: var(--trazo-fuerte) solid var(--cr-tinta); border-radius: 22px; background: var(--cr-gris-papel); }
.clip video { display: block; width: 100%; height: 100%; object-fit: cover; }
.clip__pausa { position: absolute; z-index: 1; right: 8px; bottom: 8px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: var(--trazo) solid var(--cr-tinta); border-radius: 50%; background: var(--cr-papel); cursor: pointer;
  opacity: .92; transition: transform var(--dur-corta) var(--curva-salida), opacity var(--dur-corta) var(--curva-salida); -webkit-tap-highlight-color: transparent; }
.clip__pausa::after { content: ""; position: absolute; inset: -6px; }       /* área táctil de 46 px */
.clip__pausa::before { content: ""; width: 10px; height: 12px; border-inline: 3.5px solid var(--cr-tinta); box-sizing: border-box; }
.clip[data-pausado="si"] .clip__pausa::before { width: 11px; height: 13px; margin-left: 3px; border: 0; background: var(--cr-tinta); clip-path: polygon(0 0, 100% 50%, 0 100%); }
@media (hover: hover) { .clip__pausa:hover { transform: scale(1.08); opacity: 1; } }
.clip__pausa:active { transform: scale(.92); }

/* ---------- Cinta con lo que trae el kit ---------- */
.cinta-marco { overflow: hidden; padding-block: 14px; margin-top: 4px; }
.cinta { display: flex; overflow: hidden; margin-left: -2%; width: 104%; transform: rotate(-1.4deg);
  background: var(--nivel-2-claro); border-block: var(--trazo-fuerte) solid var(--cr-tinta); padding-block: 15px; }
.cinta__pista { flex: none; display: flex; gap: 40px; padding-right: 40px; list-style: none; }
.cinta li { display: flex; align-items: center; gap: 12px; white-space: nowrap; font: 600 1.0625rem/1 var(--fuente-titulo); }
.cinta i { width: 15px; height: 15px; flex: none; border: 2.5px solid var(--cr-tinta); border-radius: 50%; background: var(--c); }
@media (min-width: 1080px) { .cinta li { font-size: 1.25rem; } .cinta { padding-block: 18px; } }
/* La cinta avanza con el scroll (no se mueve sola): sin animación automática que haya que pausar. */
.cinta__pista[aria-hidden] { display: none; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cinta__pista[aria-hidden] { display: flex; }
    .cinta__pista { animation: cinta linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes cinta { from { transform: translateX(0); } to { transform: translateX(-45%); } }

/* ---------- Problema: m + a = ma ---------- */
.problema { background: var(--cr-papel); border-block: var(--trazo-fuerte) solid var(--cr-tinta); margin-top: 40px; }
@media (min-width: 1080px) { .problema { margin-top: 56px; } }
.problema .ancho { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 1080px) { .problema .ancho { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 72px; } }
.problema .h2 { max-width: 17ch; }
.problema .texto p + p { margin-top: 14px; }
.problema .texto p { max-width: 50ch; }
.union__fichas { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 30px 10px 32px;
  border: var(--trazo-fuerte) solid var(--cr-tinta); border-radius: 28px; background: var(--nivel-2-claro); transform: rotate(-1.5deg); }
.ficha { display: grid; place-items: center; width: 64px; height: 64px; border: var(--trazo-fuerte) solid var(--cr-tinta); border-radius: 50%; background: var(--cr-papel); font: 700 2.3rem/1 var(--fuente-lectura); }
.ficha--sil { width: auto; min-width: 88px; padding: 0 16px; border-radius: var(--radio-pildora); background: var(--nivel-2); }
.signo { font: 600 1.6rem/1 var(--fuente-titulo); }
.union .nota { margin-top: 16px; font-size: .9375rem; color: var(--cr-tinta-suave); text-align: center; }
@media (min-width: 420px) { .union__fichas { gap: 10px; } .ficha { width: 84px; height: 84px; font-size: 3rem; } .ficha--sil { width: auto; min-width: 118px; } .signo { font-size: 2rem; } }
@media (min-width: 1080px) { .ficha { width: 96px; height: 96px; font-size: 3.4rem; } .ficha--sil { min-width: 136px; } .union__fichas { padding-block: 44px 46px; } }
.mov .union .ficha, .mov .union .signo { opacity: 0; }
.mov .visto > .union .ficha--m { animation: desde-izq 700ms var(--curva-salida) 200ms both; }
.mov .visto > .union .ficha--a { animation: desde-der 700ms var(--curva-salida) 200ms both; }
.mov .visto > .union .signo--mas { animation: brota 500ms var(--curva-resorte) 650ms both; }
.mov .visto > .union .signo--igual { animation: brota 500ms var(--curva-resorte) 950ms both; }
.mov .visto > .union .ficha--sil { animation: brota 700ms var(--curva-resorte) 1150ms both; }
@keyframes desde-izq { from { opacity: 0; transform: translateX(-48px) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes desde-der { from { opacity: 0; transform: translateX(48px) rotate(12deg); } to { opacity: 1; transform: none; } }
@keyframes brota { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

/* ---------- El camino de Tuli ---------- */
.camino { margin-top: 48px; display: grid; }
@media (min-width: 1080px) { .camino { grid-template-columns: 300px minmax(0, 1fr); gap: 72px; align-items: start; margin-top: 64px; } }
.guia-tuli { display: none; }
@media (min-width: 1080px) {
  .guia-tuli { display: grid; justify-items: center; gap: 18px; position: sticky; top: calc(50vh - 200px); }
}
.guia-tuli__circulo { position: relative; width: 280px; aspect-ratio: 1; border: var(--trazo-fuerte) solid var(--cr-tinta); border-radius: 50%;
  background: var(--nivel-1-claro); transition: background-color 600ms var(--curva-suave); }
.camino[data-nivel="2"] .guia-tuli__circulo { background: var(--nivel-2-claro); }
.camino[data-nivel="3"] .guia-tuli__circulo { background: var(--nivel-3-claro); }
.camino[data-nivel="4"] .guia-tuli__circulo { background: var(--nivel-4-claro); }
.guia-tuli__etapa { position: absolute; inset: 15%; display: grid; place-items: center; opacity: 0; transform: scale(.55) rotate(-10deg);
  transition: opacity 360ms var(--curva-salida), transform 720ms var(--curva-resorte); }
.guia-tuli__etapa.activa { opacity: 1; transform: none; }
.guia-tuli__etapa svg { width: 100%; height: 100%; }
.guia-tuli__nombre { text-align: center; }
.guia-tuli__nombre b { display: block; font: 650 1.875rem/1 var(--fuente-titulo); }
.guia-tuli__nombre span { display: block; margin-top: 6px; font-size: .9375rem; color: var(--cr-tinta-suave); }
.guia-tuli__puntos { list-style: none; display: flex; gap: 10px; }
.guia-tuli__puntos li { width: 16px; height: 16px; border: 2.5px solid var(--cr-tinta); border-radius: 50%; background: var(--cr-papel); transition: background-color 400ms var(--curva-salida), transform 500ms var(--curva-resorte); }
.guia-tuli__puntos li.activo { background: var(--cr-verde-boton); transform: scale(1.12); }

.libros { list-style: none; display: grid; gap: 34px; }
@media (min-width: 1080px) { .libros { gap: 40px; } }
.libro { position: relative; display: grid; gap: 14px; padding: 22px 18px 24px;
  background: var(--claro); border: var(--trazo-fuerte) solid var(--cr-tinta); border-radius: 28px; }
.libro + .libro::before {                      /* el punteado que une un libro con el siguiente */
  content: ""; position: absolute; left: 50px; top: -37px; width: 5px; height: 34px; background: var(--punteado) 0 0 / 5px 11px repeat-y; }
@media (min-width: 760px) {
  .libro { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); grid-template-rows: auto 1fr; gap: 14px 28px; padding: 30px; align-items: start; }
  .libro__medios { grid-column: 2; grid-row: 1 / span 2; }
}
@media (min-width: 1080px) {
  .libro + .libro::before { left: 64px; }
  .libro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 36px 32px 36px 40px; }
  .libro h3 { font-size: 1.875rem; }
  .libro__medios { min-height: 330px; }
  .hoja { width: 58%; } .clip--libro { width: 40%; }
}
.nivel--1 { --claro: var(--nivel-1-claro); --texto: #A8402A; --color: var(--nivel-1); }   /* #A8402A sobre el rosa claro: 5,04:1 (el texto de nivel 1 da 4,46) */
.nivel--2 { --claro: var(--nivel-2-claro); --texto: var(--nivel-2-texto); --color: var(--nivel-2); }
.nivel--3 { --claro: var(--nivel-3-claro); --texto: var(--nivel-3-texto); --color: var(--nivel-3); }
.nivel--4 { --claro: var(--nivel-4-claro); --texto: var(--nivel-4-texto); --color: var(--nivel-4); }
.libro__cab { display: flex; align-items: center; gap: 14px; }
.libro__ico { flex: none; display: grid; place-items: center; width: 68px; height: 68px; border: var(--trazo) solid var(--cr-tinta); border-radius: 50%; background: var(--cr-papel); }
.libro__ico svg { width: 54px; }
@media (min-width: 1080px) { .libro__ico { display: none; } }
.libro h3 { display: flex; align-items: center; gap: 10px; font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem); }
.libro h3 .num { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: var(--trazo) solid var(--cr-tinta); border-radius: 50%; background: var(--color); font-size: 1.125rem; }
.nivel--4 h3 .num { color: #fff; }   /* tinta sobre violeta da 3:1; blanco da 5:1 */
.libro__dato { margin-top: 6px; font-size: .9375rem; }
.libro__dato b { color: var(--texto); }
.libro__txt { color: var(--cr-tinta-suave); max-width: 42ch; font-size: 1.0625rem; }
@media (min-width: 1080px) { .libro__txt { font-size: 1.125rem; } }

.libro__medios { position: relative; height: 270px; margin-top: 6px; }
@media (min-width: 760px) { .libro__medios { height: 100%; min-height: 300px; margin-top: 0; } }
.hoja { position: absolute; width: 50%; transition: transform 700ms var(--curva-salida); }
.hoja img { border: var(--trazo) solid var(--cr-tinta); border-radius: 10px; background: #fff; }
.hoja--atras { left: 6%; top: 10px; transform: rotate(-6deg); }
.hoja--frente { right: 6%; top: 26px; transform: rotate(5deg); }
.clip--libro { position: absolute; right: 8%; top: 0; width: 36%; transform: rotate(5deg); transition: transform 700ms var(--curva-salida); }
@media (min-width: 760px) { .hoja { width: 56%; } .hoja--atras { left: 0; } .hoja--frente { right: 0; } .clip--libro { right: 2%; width: 42%; } }
@media (hover: hover) {
  .libro:hover .hoja--atras, .mov .libro.visto:hover .hoja--atras { transform: rotate(-9deg) translateX(-10px); transition-delay: 0s; }
  .libro:hover .hoja--frente, .mov .libro.visto:hover .hoja--frente { transform: rotate(8deg) translateX(10px); transition-delay: 0s; }
  .libro:hover .clip--libro, .mov .libro.visto:hover .clip--libro { transform: rotate(2deg) translateY(-6px); transition-delay: 0s; }
}
.mov .libro .hoja--atras, .mov .libro .hoja--frente, .mov .libro .clip--libro { transform: rotate(0) translate(0, 24px); opacity: 0; transition: transform 900ms var(--curva-resorte) 250ms, opacity 500ms var(--curva-salida) 250ms; }
.mov .libro.visto .hoja--atras { transform: rotate(-6deg); opacity: 1; }
.mov .libro.visto .hoja--frente, .mov .libro.visto .clip--libro { transform: rotate(5deg); opacity: 1; transition-delay: 380ms; }

.logro { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 44px; padding: 18px;
  border: var(--trazo) dashed var(--cr-tinta); border-radius: 28px; }
@media (min-width: 1080px) { .logro { margin-left: 372px; grid-template-columns: 140px minmax(0, 1fr); gap: 32px; padding: 26px 32px; } }
.clip--logro { transform: rotate(-4deg); border-radius: 18px; }
@media (max-width: 399px) { .logro { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 14px; } }
.logro h3 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.625rem); }
.logro p { margin-top: 8px; color: var(--cr-tinta-suave); max-width: 52ch; }
.logro p span { color: var(--cr-verde-texto); font: 600 1.0625rem/1.2 var(--fuente-titulo); }

/* ---------- La guía: el único momento con renglones ---------- */
.guia { background: var(--cr-verde-claro); border-block: var(--trazo-fuerte) solid var(--cr-tinta); }
.guia .ancho { display: grid; gap: 64px; }
@media (min-width: 1080px) { .guia .ancho { grid-template-columns: .95fr 1.05fr; gap: 72px; align-items: center; } }
.renglon { position: relative; padding: 26px 18px 18px; background: var(--cr-papel); border: var(--trazo-fuerte) solid var(--cr-tinta); border-radius: 28px; rotate: 1deg; }
@media (min-width: 760px) { .renglon { padding: 34px 30px 26px; } }
.renglon__tuli { position: absolute; left: 14px; top: -54px; width: 108px; }
@media (min-width: 760px) { .renglon__tuli { width: 130px; top: -66px; } }
.renglon__linea { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; padding: 10px 4px 2px; border-top: 2px dashed var(--cr-gris-claro); border-bottom: 2.5px solid var(--cr-gris); }
.renglon__linea + .renglon__linea { margin-top: 10px; }
.renglon__si { font: 700 clamp(2.4rem, 1.8rem + 3vw, 3.6rem)/1 var(--fuente-lectura); }
.renglon__no { position: relative; font: 700 clamp(1.7rem, 1.3rem + 2vw, 2.5rem)/1 var(--fuente-lectura); color: var(--cr-gris-texto); }
.renglon__no::after { content: ""; position: absolute; left: -4px; right: -4px; top: 52%; height: 4px; border-radius: 2px; background: var(--nivel-1); transform: rotate(-8deg); transform-origin: left; }
.renglon__nota { margin-left: auto; font-size: .875rem; color: var(--cr-tinta-suave); text-align: right; }
.renglon figcaption { margin-top: 16px; font-size: .9375rem; color: var(--cr-tinta-suave); }
.mov .renglon .renglon__si { clip-path: inset(0 100% 0 0); transition: clip-path 900ms var(--curva-suave) 300ms; }
.mov .renglon .renglon__linea:nth-child(3) .renglon__si { transition-delay: 1300ms; transition-duration: 1100ms; }
.mov .renglon.visto .renglon__si { clip-path: inset(0 -4px 0 0); }
.mov .renglon .renglon__no::after { transform: rotate(-8deg) scaleX(0); transition: transform 500ms var(--curva-salida) 1000ms; }
.mov .renglon.visto .renglon__no::after { transform: rotate(-8deg) scaleX(1); }
.pasos { list-style: none; margin-top: 28px; display: grid; gap: 20px; }
.pasos li { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 14px; align-items: start; }
.pasos .icono { width: 50px; height: 50px; padding: 7px; background: var(--cr-papel); border: var(--trazo) solid var(--cr-tinta); border-radius: 50%; }
.pasos b { display: block; font: 600 1.25rem/1.2 var(--fuente-titulo); }
.pasos span { color: var(--cr-tinta-suave); }

/* ---------- Muestra de páginas ---------- */
.muestra__cabeza { display: grid; gap: 22px; }
@media (min-width: 1080px) { .muestra__cabeza { grid-template-columns: 1fr auto; align-items: end; } }
.carril-marco { position: relative; }
.carril { margin-top: 36px; display: grid; grid-auto-flow: column; grid-auto-columns: min(68%, 260px); gap: 18px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
  padding: 10px 16px 24px; margin-inline: -16px; list-style: none; scrollbar-width: none; }
.carril::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .carril { margin-inline: -32px; padding-inline: 32px; scroll-padding-inline: 32px; grid-auto-columns: 260px; } }
@media (min-width: 1160px) { .carril { margin-inline: calc((100vw - 1096px) / -2); padding-inline: calc((100vw - 1096px) / 2); scroll-padding-inline: calc((100vw - 1096px) / 2); } }
.carril li { scroll-snap-align: start; }
.carril li:nth-child(odd) .hoja-boton { --r: -1.2deg; } .carril li:nth-child(even) .hoja-boton { --r: 1deg; }
.hoja-boton { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 10px; background: none; cursor: zoom-in;
  transform: rotate(var(--r, 0)); transition: transform 500ms var(--curva-salida); -webkit-tap-highlight-color: transparent; }
.hoja-boton img { width: 100%; border: var(--trazo) solid var(--cr-tinta); border-radius: 10px; background: #fff; }
@media (hover: hover) { .hoja-boton:hover { transform: rotate(0) translateY(-6px); } }
.hoja-boton:active { transform: scale(.98); }
.lupa { position: absolute; left: 0; top: 0; width: 140px; height: 140px; border: var(--trazo-fuerte) solid var(--cr-tinta); border-radius: 50%;
  background: #fff no-repeat; pointer-events: none; opacity: 0; scale: .6; transition: opacity 160ms var(--curva-salida), scale 300ms var(--curva-resorte); }
.con-lupa .lupa { opacity: 1; scale: 1; }
.carril figcaption { margin-top: 12px; font-size: .875rem; line-height: 1.4; color: var(--cr-tinta-suave); }
.carril figcaption b { color: var(--cr-tinta); font-family: var(--fuente-titulo); font-weight: 600; }
.muestra__pie { margin-top: 4px; min-height: 52px; display: flex; align-items: center; padding-right: 0; }
.muestra__pie p { font-size: .9375rem; color: var(--cr-tinta-suave); }
.carril-flechas { display: none; }
@media (min-width: 1080px) {
  .carril-flechas { display: flex; gap: 10px; position: absolute; right: 0; bottom: -60px; }
  .muestra__pie { padding-right: 140px; }
}
.redondo { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: var(--trazo-fuerte) solid var(--cr-tinta); border-radius: 50%;
  background: var(--cr-papel); cursor: pointer; transition: transform var(--dur-corta) var(--curva-salida), background-color var(--dur-corta) var(--curva-salida), opacity var(--dur-corta); }
.redondo svg { width: 22px; height: 22px; fill: none; stroke: var(--cr-tinta); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .redondo:hover:not(:disabled) { background: var(--cr-verde-claro); } }
.redondo:active:not(:disabled) { transform: scale(.92); }
.redondo:disabled { opacity: .3; cursor: default; }

/* Visor de una página en grande */
.con-visor { overflow: hidden; }
.visor { margin: auto; padding: 0; border: 0; background: transparent; width: min(92vw, 620px); max-height: 96dvh; overflow: visible; }
.visor::backdrop { background: rgba(35, 38, 47, .82); }
.visor figure { display: grid; gap: 12px; }
.visor img { width: auto; max-width: 100%; max-height: calc(96dvh - 150px); margin-inline: auto; border: var(--trazo-fuerte) solid var(--cr-tinta); border-radius: 12px; background: #fff; }
.visor figcaption { color: var(--cr-crema); text-align: center; font-size: 1rem; }
.visor figcaption b { color: #fff; font-family: var(--fuente-titulo); font-weight: 600; }
.visor__botones { display: flex; justify-content: center; gap: 14px; margin-top: 14px; }
.redondo--cerrar { background: var(--cr-verde-boton); }
@media (prefers-reduced-motion: no-preference) {
  .visor[open] { animation: visor-entra 380ms var(--curva-salida); }
  .visor[open]::backdrop { animation: aparece 300ms var(--curva-salida); }
}
@keyframes visor-entra { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes aparece { from { opacity: 0; } }

/* ---------- Qué incluye: bento ---------- */
.incluye { background: var(--nivel-2-claro); border-block: var(--trazo-fuerte) solid var(--cr-tinta); }
.bento { margin-top: 40px; display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.b { position: relative; grid-column: 1 / -1; padding: 24px 20px; background: var(--cr-papel); border: var(--trazo-fuerte) solid var(--cr-tinta); border-radius: 26px; overflow: hidden; }
.b h3 { font-size: 1.5rem; }
.b--clip { grid-column: span 1; padding: 0; overflow: visible; display: grid; gap: 10px; align-content: start; background: none; border: 0; border-radius: 0; }
@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
  .b { padding: 28px; }
  .b--cifra, .b--guia { grid-column: span 3; }
  .b--clip { grid-column: span 2; }
}
@media (min-width: 1080px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
  .b--libros { grid-column: 1 / span 7; grid-row: 1 / span 2; }
  .b--cifra, .b--guia { grid-column: 8 / span 5; }
  .b--bonos { grid-column: 1 / span 6; grid-row: 3; }
  .b--clip { grid-column: span 2; grid-row: 3; }
}
.b--libros { padding: 0; }
.b--libros__foto { border-bottom: var(--trazo-fuerte) solid var(--cr-tinta); background: var(--nivel-2-claro); }
.b--libros__foto img { width: 100%; }
.b__cuerpo { padding: 22px 20px 24px; }
@media (min-width: 760px) { .b__cuerpo { padding: 28px 32px 32px; } }
.filas { list-style: none; margin-top: 8px; }
.filas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 11px 0; border-bottom: 2px dotted rgba(35, 38, 47, .28); }
.filas li:last-child { border-bottom: 0; }
.filas li span:last-child { font-size: .9375rem; color: var(--cr-tinta-suave); text-align: right; white-space: nowrap; }
.b .mas { margin-top: 10px; font-size: .9375rem; color: var(--cr-tinta-suave); }
.punto { display: inline-block; width: 13px; height: 13px; margin-right: 9px; border: 2px solid var(--cr-tinta); border-radius: 50%; background: var(--c); vertical-align: -1px; }
.b--cifra { display: grid; align-content: center; background: var(--cr-verde-claro); }
.cifra { font: 650 clamp(5rem, 3.2rem + 7vw, 8.5rem)/.86 var(--fuente-titulo); letter-spacing: -.045em; color: var(--cr-verde-texto); }
.cifra__txt { margin-top: 10px; max-width: 17ch; font: 600 1.375rem/1.2 var(--fuente-titulo); }
.b--guia { background: var(--nivel-4-claro); }
.b--guia h3 { padding-right: 120px; min-height: 64px; }
.b--guia__tuli { position: absolute; right: 12px; top: 10px; width: 118px; }
.b--bonos h3 { padding-bottom: 4px; }
.b--clip .clip { border-radius: 20px; }
.b--clip figcaption { font: 600 .9375rem/1.2 var(--fuente-titulo); text-align: center; }
.b--clip figcaption::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 7px; border: 2px solid var(--cr-tinta); border-radius: 50%; background: var(--color); vertical-align: -1px; }
@media (max-width: 759px) { .b--clip figcaption { font-size: .8125rem; } .b--clip figcaption::before { display: none; } }

/* ---------- Para quién ---------- */
.quien { display: grid; gap: 20px; margin-top: 36px; }
@media (min-width: 760px) { .quien { grid-template-columns: 1fr 1fr; gap: 24px; } }
.quien__col { padding: 26px 22px; border: var(--trazo-fuerte) solid var(--cr-tinta); border-radius: 26px; background: var(--cr-papel); }
@media (min-width: 1080px) { .quien__col { padding: 34px 32px; } }
.quien__col--no { background: transparent; border-style: dashed; border-width: var(--trazo); }
.quien__col h3 { font-size: 1.5rem; display: flex; align-items: center; gap: 10px; }
.quien__col h3 svg { width: 36px; height: 36px; flex: none; }
.quien__col ul { list-style: none; margin-top: 16px; display: grid; gap: 13px; }
.quien__col li { padding-left: 22px; position: relative; }
.quien__col li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--cr-tinta); }
.quien__col--no li::before { background: transparent; border: 2px solid var(--cr-tinta); }

/* ---------- Así te llega ---------- */
.recibes { padding-top: 24px; }
@media (min-width: 1080px) { .recibes { padding-top: 40px; } }
.recibes .ancho { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .recibes .ancho { grid-template-columns: minmax(0, 1fr) 280px; gap: 80px; } .recibes__txt { max-width: 620px; } }
.recibes__pasos { list-style: none; counter-reset: paso; margin-top: 30px; display: grid; }
.recibes__pasos li { position: relative; counter-increment: paso; display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 18px; padding-bottom: 28px; }
.recibes__pasos li:last-child { padding-bottom: 0; }
.recibes__pasos li::before { content: counter(paso); grid-row: span 2; display: grid; place-items: center; width: 54px; height: 54px;
  border: var(--trazo-fuerte) solid var(--cr-tinta); border-radius: 50%; background: var(--c); font: 650 1.375rem/1 var(--fuente-titulo); }
.recibes__pasos li:not(:last-child)::after { content: ""; position: absolute; left: 25px; top: 60px; bottom: 6px; width: 5px; background: var(--punteado) 0 0 / 5px 11px repeat-y; }
.recibes__pasos b { padding-top: 6px; font: 600 1.3125rem/1.2 var(--fuente-titulo); }
.recibes__pasos span { margin-top: 4px; color: var(--cr-tinta-suave); max-width: 46ch; }
.clip--recibes { width: min(250px, 66%); justify-self: center; rotate: 3deg; }
@media (min-width: 900px) { .clip--recibes { width: 100%; } }

/* ---------- Precio: la pila de lo que te llevas + la caja de compra ---------- */
.precio { padding-top: 56px; }
.precio__grid { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.precio .cab { margin-inline: auto; text-align: center; }
.precio .cab .h2, .precio .cab .bajada { margin-inline: auto; }
.precio__grid { max-width: 620px; margin-inline: auto; }
@media (min-width: 1080px) { .precio__grid { margin-top: 56px; gap: 22px; } }
.precio__lado { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }

.pila { padding: 22px 18px 20px; background: var(--cr-papel); border: var(--trazo-fuerte) solid var(--cr-tinta); border-radius: 30px; }
@media (min-width: 760px) { .pila { padding: 32px; } }
.pila__grupo + .pila__grupo { margin-top: 26px; padding-top: 22px; border-top: 2px dotted rgba(35, 38, 47, .3); }
.pila h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 1.3125rem; }
.pila h3 span { font: 400 .9375rem/1 var(--fuente-adulto); color: var(--cr-tinta-suave); white-space: nowrap; }
.pila ul { list-style: none; margin-top: 14px; display: grid; gap: 16px 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pila__grupo--libros ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; }
@media (min-width: 760px) { .pila ul, .pila__grupo--libros ul { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .pila ul, .pila__grupo--libros ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pila__grupo--bonos ul { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-right: 12%; } }
.pila li { display: grid; align-content: start; gap: 2px; }
.pila picture { display: block; margin-bottom: 8px; transform: rotate(var(--r, 0deg)); transition: transform 500ms var(--curva-resorte); }
.pila li:nth-child(3n+1) picture { --r: -2.5deg; }
.pila li:nth-child(3n+2) picture { --r: 1.5deg; }
.pila li:nth-child(3n) picture { --r: -1deg; }
.pila img { width: 100%; border: 2.5px solid var(--cr-tinta); border-radius: 7px; background: #fff; }
@media (hover: hover) { .pila li:hover picture { transform: rotate(0) translateY(-5px) scale(1.04); } }
.pila b { font: 600 .875rem/1.2 var(--fuente-titulo); }
.pila li span { font-size: .8125rem; color: var(--cr-tinta-suave); }
@media (min-width: 760px) { .pila b { font-size: .9375rem; } }
.pila__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 24px; padding: 14px 18px; border: var(--trazo) solid var(--cr-tinta); border-radius: 16px; background: var(--nivel-2-claro); }
.pila__total > span { font: 600 1.0625rem/1.2 var(--fuente-titulo); }
.pila__total b { font: 650 1.625rem/1 var(--fuente-titulo); letter-spacing: -.02em; }

.caja-precio { position: relative; padding: 28px 20px 22px; background: var(--cr-papel); border: var(--trazo-fuerte) solid var(--cr-tinta); border-radius: 30px; }
@media (min-width: 760px) { .caja-precio { padding: 34px 32px 28px; } }
.caja-precio__tuli { position: absolute; z-index: 1; right: 14px; top: -48px; width: 104px; }
@media (min-width: 760px) { .caja-precio__tuli { width: 130px; top: -62px; right: 26px; } }
.caja-precio__nombre { font: 600 1.375rem/1.15 var(--fuente-titulo); max-width: 12ch; }
.monto { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
.monto b { font: 650 clamp(4rem, 3rem + 4vw, 5.75rem)/1 var(--fuente-titulo); letter-spacing: -.04em; }
.monto span { font: 600 1.375rem/1 var(--fuente-titulo); }
.por-sesion { display: inline-block; margin-top: 12px; padding: 8px 14px; border: var(--trazo) solid var(--cr-tinta); border-radius: 12px; background: var(--nivel-2); font-size: 1rem; rotate: -1.2deg; }
.por-sesion b { font-family: var(--fuente-titulo); font-weight: 600; }
.caja-precio .lista-corta { list-style: none; margin-top: 18px; display: grid; gap: 10px; }
.caja-precio .lista-corta li { display: flex; gap: 10px; align-items: flex-start; }
.caja-precio .lista-corta svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.caja-precio .boton { margin-top: 22px; }

/* Formas de pago y confianza, junto a los botones */
.medios { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.medios li { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px 0 9px; border: 2px solid var(--cr-tinta); border-radius: var(--radio-pildora); background: var(--cr-papel); font: 600 .875rem/1 var(--fuente-titulo); white-space: nowrap; }
.medios svg, .confia svg { width: 19px; height: 19px; flex: none; fill: none; stroke: var(--cr-tinta); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.medios--chico { margin-top: 12px; gap: 6px; }
.medios--chico li { min-height: 30px; padding: 0 10px 0 8px; font-size: .8125rem; border-width: 1.8px; }
.medios--chico svg { width: 17px; height: 17px; }
.caja-precio .medios { justify-content: center; }
.confia { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 12px; font-size: .875rem; color: var(--cr-tinta-suave); }
.confia span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Franja de compra a mitad de página ---------- */
.franja { position: relative; display: grid; gap: 16px; justify-items: start; margin-top: 64px; padding: 26px 22px 24px; background: var(--nivel-2); border: var(--trazo-fuerte) solid var(--cr-tinta); border-radius: 30px; }
@media (min-width: 760px) { .franja { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 24px 28px 24px 22px; } }
@media (min-width: 1080px) { .franja { margin-left: 372px; } }
.franja__tuli { width: 92px; margin: -58px 0 -6px -4px; }
@media (min-width: 760px) { .franja__tuli { width: 110px; margin: -30px 0 -18px; } }
.franja__txt b { display: block; font: 650 clamp(1.375rem, 1.2rem + .8vw, 1.75rem)/1.12 var(--fuente-titulo); }
.franja__txt span { display: block; margin-top: 6px; font-size: .9375rem; }
.franja .boton { background: var(--cr-papel); }
@media (hover: hover) { .franja .boton:hover { background: var(--cr-verde-claro); } }
@media (max-width: 759px) { .franja .boton { width: 100%; } }

/* ---------- Comparación honesta ---------- */
.compara__marco { margin-top: 44px; }
.compara__tabla { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.compara__tabla th, .compara__tabla td { padding: 14px 6px; text-align: center; vertical-align: middle; border-bottom: 2px dotted rgba(35, 38, 47, .3); }
.compara__tabla tbody tr:last-child > * { border-bottom: 0; }
.compara__tabla thead th { vertical-align: bottom; padding-bottom: 14px; font: 600 .875rem/1.15 var(--fuente-titulo); border-bottom: var(--trazo) solid var(--cr-tinta); }
.compara__tabla thead td { width: 34%; border-bottom: var(--trazo) solid var(--cr-tinta); }
.compara__tabla tbody th { text-align: left; padding-left: 0; font: 600 .9375rem/1.25 var(--fuente-titulo); }
.compara__tabla .es-tuli { background: var(--cr-verde-claro); border-inline: var(--trazo-fuerte) solid var(--cr-tinta); }
.compara__tabla thead .es-tuli { border-top: var(--trazo-fuerte) solid var(--cr-tinta); border-radius: 20px 20px 0 0; font-size: 1rem; }
.compara__tabla tbody tr:last-child .es-tuli { border-bottom: var(--trazo-fuerte) solid var(--cr-tinta); border-radius: 0 0 20px 20px; }
.compara__tuli { display: block; width: 54px; margin: -34px auto 6px; }
.marca { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 600 .9375rem/1 var(--fuente-titulo); }
.marca--si::before, .marca--no::before, .marca--talvez::before { content: ""; flex: none; width: 24px; height: 24px; border: 2px solid var(--cr-tinta); border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: 14px; }
.marca--si::before { background-color: var(--cr-verde-cuerpo); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323262F' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.marca--no::before { background-color: var(--cr-papel); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323262F' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); }
.marca--talvez::before { background-color: var(--nivel-2-claro); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323262F' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
.marca--precio { font: 650 1.375rem/1 var(--fuente-titulo); color: var(--cr-verde-texto); }
.compara__tabla small { display: none; margin-top: 6px; font-size: .8125rem; line-height: 1.3; color: var(--cr-tinta-suave); }
@media (max-width: 599px) {
  .marca { flex-direction: column; font-size: .75rem; }
  .marca--precio { font-size: 1.125rem; }
  .compara__tabla thead th { font-size: .75rem; }
  .compara__tabla tbody th { font-size: .8125rem; }
}
@media (min-width: 600px) {
  .compara__tabla small { display: block; }
  .compara__tabla th, .compara__tabla td { padding: 18px 14px; }
  .compara__tabla tbody th { font-size: 1.0625rem; padding-left: 0; }
  .compara__tabla thead th { font-size: 1rem; }
}
@media (min-width: 1080px) { .compara__tabla thead td { width: 31%; } .compara__tabla tbody th { font-size: 1.1875rem; } }

.garantia { display: grid; gap: 16px; align-items: center; padding: 22px 20px; border-radius: 30px; background: var(--cr-verde-claro); border: var(--trazo) solid var(--cr-tinta); }
@media (min-width: 440px) { .garantia { grid-template-columns: 108px minmax(0, 1fr); gap: 20px; } }
.sello { position: relative; display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; background: var(--cr-papel); border: var(--trazo-fuerte) solid var(--cr-tinta); }
.sello__anillo { position: absolute; inset: 0; width: 100%; height: 100%; }
.sello__anillo text { font: 600 9.6px var(--fuente-titulo); fill: var(--cr-tinta); text-transform: uppercase; letter-spacing: .4px; }
.sello__centro { text-align: center; font: 600 .75rem/1 var(--fuente-titulo); }
.sello__centro b { display: block; font: 650 2.125rem/.9 var(--fuente-titulo); }
@media (prefers-reduced-motion: no-preference) { .sello__anillo { animation: girar 26s linear infinite; } }
@keyframes girar { to { transform: rotate(360deg); } }
.garantia h3 { font-size: 1.375rem; }
.garantia p { margin-top: 8px; }

/* ---------- Preguntas ---------- */
.preguntas .ancho { display: grid; gap: 28px; }
@media (min-width: 1080px) {
  .preguntas .ancho { grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; }
  .preguntas__lado { position: sticky; top: 48px; }
}
.preguntas__tuli { display: none; }
@media (min-width: 1080px) { .preguntas__tuli { display: block; width: 190px; margin-top: 28px; } }
.preguntas__otra { margin-top: 14px; color: var(--cr-tinta-suave); }
.faq { border-top: var(--trazo-fuerte) solid var(--cr-tinta); interpolate-size: allow-keywords; }
.faq details { border-bottom: var(--trazo) solid var(--cr-tinta); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 2px; font: 600 1.1875rem/1.3 var(--fuente-titulo); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .mas-menos { position: relative; flex: none; width: 34px; height: 34px; border: var(--trazo) solid var(--cr-tinta); border-radius: 50%; background: var(--cr-papel); transition: transform var(--dur-media) var(--curva-salida), background-color var(--dur-corta) var(--curva-salida); }
.faq summary .mas-menos::before, .faq summary .mas-menos::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2.5px; margin: -1.25px 0 0 -6px; background: var(--cr-tinta); border-radius: 2px; }
.faq summary .mas-menos::after { transform: rotate(90deg); transition: transform var(--dur-media) var(--curva-salida); }
.faq details[open] summary .mas-menos { background: var(--cr-verde-cuerpo); transform: rotate(180deg); }
.faq details[open] summary .mas-menos::after { transform: rotate(0deg); }
@media (hover: hover) { .faq summary:hover .mas-menos { background: var(--cr-verde-claro); } }
.faq .respuesta { padding: 0 2px 22px; max-width: 62ch; color: var(--cr-tinta-suave); }
.faq .respuesta p + p { margin-top: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size 420ms var(--curva-salida), content-visibility 420ms allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}

/* ---------- Cierre: Tuli sale volando ---------- */
.cierre { text-align: center; padding-bottom: 96px; overflow: hidden; }
.cierre__vuelo { position: relative; width: min(520px, 100%); height: 168px; margin: 0 auto 6px; }
.cierre__ruta { position: absolute; left: 0; top: 34px; width: 82%; height: 120px; overflow: visible; }
.cierre__ruta path { fill: none; stroke: var(--cr-tinta); stroke-width: 4; stroke-linecap: round; stroke-dasharray: .1 13; vector-effect: non-scaling-stroke; }
.cierre__tuli { position: absolute; right: 0; top: 0; width: 132px; }
@media (min-width: 760px) { .cierre__tuli { width: 160px; top: -14px; } }
.mov .cierre__ruta { clip-path: inset(0 100% 0 0); transition: clip-path 1400ms var(--curva-suave); }
.mov .cierre__vuelo.visto .cierre__ruta { clip-path: inset(-10px -10px -10px -10px); }
.mov .cierre__tuli { opacity: 0; transform: translate(-260px, 90px) scale(.5) rotate(-16deg); transition: transform 1500ms var(--curva-suave), opacity 400ms var(--curva-salida); }
.mov .cierre__vuelo.visto .cierre__tuli { opacity: 1; transform: none; animation: aletear 2.4s var(--curva-suave) 1600ms 3; }
@keyframes aletear { 50% { transform: translateY(-8px) rotate(3deg); } }
.cierre .h2 { margin-inline: auto; max-width: 16ch; }
.cierre .bajada { margin-inline: auto; }
.cierre .boton { margin-top: 28px; }
.cierre .pago { justify-content: center; }

/* ---------- Problema: lo que vive la familia, en globos ---------- */
.dolor { list-style: none; margin-top: 24px; display: grid; gap: 10px; justify-items: start; }
.dolor li { position: relative; max-width: 34ch; padding: 11px 16px 12px 44px; border: var(--trazo) solid var(--cr-tinta); border-radius: 20px 20px 20px 6px;
  background: var(--cr-crema); font: 600 1.0625rem/1.3 var(--fuente-titulo); }
.dolor li::before { content: "?"; position: absolute; left: 12px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 22px; height: 22px;
  border: 2px solid var(--cr-tinta); border-radius: 50%; background: var(--nivel-2); font: 650 .875rem/1 var(--fuente-titulo); }
.dolor li:nth-child(even) { margin-left: 18px; rotate: .8deg; }
.dolor li:nth-child(odd) { rotate: -.6deg; }
@media (min-width: 1080px) { .dolor li { font-size: 1.1875rem; } }
.problema .texto .bajada { margin-top: 22px; }
.mecanismo h3 { margin-top: 28px; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); max-width: 22ch; }
.mecanismo p { margin-top: 10px; color: var(--cr-tinta-suave); max-width: 48ch; }

/* ---------- Qué recibes: la pila + la mesa + los bonos en video ---------- */
.incluye__grid { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 1080px) { .incluye__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 28px; align-items: start; margin-top: 48px; } .incluye__lado { position: sticky; top: 28px; } }
.incluye__lado { display: grid; gap: 18px; }
.incluye__foto { overflow: hidden; border: var(--trazo-fuerte) solid var(--cr-tinta); border-radius: 30px; background: var(--nivel-2-claro); }
.incluye__foto img { width: 100%; }
.incluye__clips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.incluye__clips .b--clip { grid-column: auto; grid-row: auto; }
.pila__nota { margin-top: 6px; font-size: .9375rem; color: var(--cr-tinta-suave); max-width: 52ch; }
.pila__total { flex-wrap: wrap; }
.pila__total > span { font-size: .9375rem; }

/* ---------- Cierre: resumen y ayuda ---------- */
.resumen { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px auto 0; max-width: 520px; }
.resumen li { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 14px 0 10px; border: 2px solid var(--cr-tinta); border-radius: var(--radio-pildora); background: var(--cr-papel); font: 600 .9375rem/1 var(--fuente-titulo); }
.resumen li::before { content: ""; width: 16px; height: 16px; border: 2px solid var(--cr-tinta); border-radius: 50%; background: var(--cr-verde-cuerpo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323262F' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat; }
.cierre__ayuda { margin-top: 14px; font-size: .9375rem; color: var(--cr-tinta-suave); }
@media (min-width: 1080px) { .hero h1 { max-width: 14.5ch; } }

/* ---------- Valor de los bonos: su precio real por separado ---------- */
.pila__precio { white-space: nowrap; justify-self: start; margin-top: 4px; padding: 3px 8px; border: 1.8px solid var(--cr-tinta); border-radius: 8px; background: var(--nivel-2-claro); font: 600 .75rem/1.1 var(--fuente-titulo); font-style: normal; }
@media (min-width: 760px) { .pila__precio { font-size: .8125rem; } }
.pila__grupo--bonos h3 span { font: 600 .9375rem/1 var(--fuente-titulo); color: var(--cr-tinta); padding: 4px 10px; border: 2px solid var(--cr-tinta); border-radius: var(--radio-pildora); background: var(--nivel-2); }
.ancla { margin-top: 14px; padding: 12px 14px; border: 2px dashed var(--cr-tinta); border-radius: 14px; font-size: .9375rem; }
.ancla b { font: 650 1.0625rem/1 var(--fuente-titulo); }

/* ---------- Comprar ahora: los botones de compra llaman la atención ----------
   Cada 4,5 s el botón late dos veces y una onda de tinta sale del borde; la flecha empuja hacia la derecha.
   Solo transform y opacity. Con prefers-reduced-motion queda quieto. */
.boton[data-compra] { isolation: isolate; }
.boton[data-compra]::after { content: ""; position: absolute; z-index: -1; inset: calc(var(--trazo-fuerte) * -1); border: var(--trazo-fuerte) solid var(--cr-verde-boton); border-radius: inherit; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .boton[data-compra] { animation: latido 4.5s var(--curva-suave) 2.5s infinite; }
  .boton[data-compra]::after { animation: onda 4.5s var(--curva-salida) 2.5s infinite; }
  .boton[data-compra] .flecha { animation: empuje 4.5s var(--curva-suave) 2.5s infinite; }
  .boton[data-compra]:hover, .boton[data-compra]:focus-visible { animation-play-state: paused; }
  .boton[data-compra]:hover::after, .boton[data-compra]:hover .flecha { animation-play-state: paused; }
}
@keyframes latido { 0%, 62%, 100% { transform: scale(1); } 68% { transform: scale(1.05); } 74% { transform: scale(.985); } 80% { transform: scale(1.035); } 86% { transform: scale(1); } }
@keyframes onda { 0%, 64% { opacity: 0; transform: scale(1); } 68% { opacity: .9; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(1.18, 1.5); } }
@keyframes empuje { 0%, 62%, 90%, 100% { transform: translateX(0); } 70% { transform: translateX(5px); } 78% { transform: translateX(0); } 84% { transform: translateX(4px); } }

/* "Ahora": acceso inmediato debajo del botón del hero */
.ya { display: flex; align-items: center; gap: 7px; margin-top: 12px; font: 600 .9375rem/1.3 var(--fuente-titulo); color: var(--cr-verde-texto); }
.ya svg { width: 18px; height: 18px; flex: none; fill: var(--nivel-2); stroke: var(--cr-tinta); stroke-width: 2; stroke-linejoin: round; }

/* Botón al final de la muestra y de "Todo lo que recibes" */
.cta-linea { display: grid; justify-items: center; gap: 10px; margin-top: 36px; text-align: center; }
.cta-linea p { max-width: 44ch; font-size: .9375rem; color: var(--cr-tinta-suave); }
@media (max-width: 759px) { .cta-linea .boton { width: 100%; } }

/* Qué pasa después de pagar, dentro de la caja de precio */
.pasos-compra { list-style: none; counter-reset: pc; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 2px dotted rgba(35, 38, 47, .3); }
.pasos-compra li { counter-increment: pc; display: grid; justify-items: center; gap: 2px; text-align: center; }
.pasos-compra li::before { content: counter(pc); display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 4px; border: 2px solid var(--cr-tinta); border-radius: 50%; background: var(--cr-verde-claro); font: 650 .9375rem/1 var(--fuente-titulo); }
.pasos-compra b { font: 600 .875rem/1.15 var(--fuente-titulo); }
.pasos-compra span { font-size: .75rem; line-height: 1.25; color: var(--cr-tinta-suave); }

/* Barra fija de compra: también en escritorio, como una píldora flotante */
.barra-compra .boton { white-space: nowrap; }
@media (min-width: 1080px) {
  .barra-compra { display: flex; left: 50%; right: auto; bottom: 18px; width: 520px; padding: 10px 10px 10px 24px; border: var(--trazo-fuerte) solid var(--cr-tinta); border-radius: var(--radio-pildora); transform: translate(-50%, 140%); }
  .barra-compra.visible { transform: translate(-50%, 0); }
  html { scroll-padding-bottom: 96px; }
}
.franja { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .franja { grid-template-columns: auto minmax(0, 1fr) auto; } }
@media (max-width: 359px) { .boton { font-size: 1.0625rem; padding-left: 18px; gap: 8px; } .franja { padding-inline: 16px; } }

/* ---------- Opiniones de familias (oculta hasta tener opiniones reales) ----------
   Celular: tarjetas que se deslizan de lado. Escritorio: muro en 3 columnas, cada tarjeta un poco girada,
   como notas pegadas. Cada tarjeta toma el color de un nivel. Sin estrellas. */
.opiniones-sec { background: var(--nivel-4-claro); border-block: var(--trazo-fuerte) solid var(--cr-tinta); }
.opiniones { list-style: none; margin: 36px -16px 0; padding: 10px 16px 24px; display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 340px); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; overscroll-behavior-x: contain; scrollbar-width: none; }
.opiniones::-webkit-scrollbar { display: none; }
.opinion { scroll-snap-align: start; }
@media (min-width: 900px) {
  .opiniones { display: block; columns: 3 300px; column-gap: 22px; margin: 44px 0 0; padding: 0; overflow: visible; }
  .opinion { break-inside: avoid; padding-top: 26px; }
  .opinion:nth-child(3n+1) figure { rotate: -1.2deg; } .opinion:nth-child(3n+2) figure { rotate: .9deg; } .opinion:nth-child(3n) figure { rotate: -.5deg; }
}
.opinion figure { position: relative; height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 24px 20px 20px;
  background: var(--cr-papel); border: var(--trazo-fuerte) solid var(--cr-tinta); border-radius: 26px; transition: rotate 500ms var(--curva-resorte), transform 500ms var(--curva-resorte); }
@media (hover: hover) { .opinion figure:hover { rotate: 0deg; transform: translateY(-4px); } }
.opinion figure::before { content: "“"; position: absolute; top: -22px; left: 18px; display: grid; place-items: center; width: 44px; height: 44px;
  border: var(--trazo) solid var(--cr-tinta); border-radius: 50%; background: var(--color); font: 650 2.25rem/1 var(--fuente-titulo); padding-top: 14px; }
.opinion blockquote p { font: 500 1.1875rem/1.4 var(--fuente-titulo); }
.opinion__foto img { width: 100%; max-height: 260px; object-fit: cover; object-position: center; border: 2.5px solid var(--cr-tinta); border-radius: 14px; background: #fff; }
.opinion figcaption { display: grid; gap: 2px; margin-top: auto; padding-top: 12px; border-top: 2px dotted rgba(35, 38, 47, .3); }
.opinion figcaption b { font: 650 1.0625rem/1.2 var(--fuente-titulo); }
.opinion figcaption span { font-size: .875rem; color: var(--cr-tinta-suave); }
.opinion .opinion__libro { justify-self: start; margin-top: 6px; padding: 3px 10px; border: 2px solid var(--cr-tinta); border-radius: var(--radio-pildora); background: var(--claro); font: 600 .8125rem/1.2 var(--fuente-titulo); color: var(--cr-tinta); }
.opinion__nota { font-size: .8125rem; color: var(--cr-tinta-suave); font-style: italic; }

/* Una opinión corta junto al botón del precio */
.opinion-mini { position: relative; margin-top: 18px; padding: 14px 16px 12px 50px; border: 2px solid var(--cr-tinta); border-radius: 18px 18px 18px 6px; background: var(--nivel-4-claro); }
.opinion-mini::before { content: "“"; position: absolute; left: 12px; top: 10px; font: 650 2.5rem/1 var(--fuente-titulo); color: var(--nivel-4-texto); }
.opinion-mini blockquote p { font: 600 1rem/1.35 var(--fuente-titulo); }
.opinion-mini figcaption { margin-top: 4px; font-size: .8125rem; color: var(--cr-tinta-suave); }

/* Solo en la vista previa (_fuente/previa/resenas.html) */
.opinion__ejemplo { position: absolute; z-index: 1; top: -12px; right: 16px; padding: 3px 9px; border: 2px solid var(--cr-tinta); border-radius: 8px; background: #FFE066; font: 650 .75rem/1 var(--fuente-titulo); text-transform: uppercase; letter-spacing: .06em; }
.aviso-previa { position: sticky; top: 0; z-index: 40; padding: 10px 16px; background: #FFE066; border-bottom: var(--trazo-fuerte) solid var(--cr-tinta); font: 600 .9375rem/1.3 var(--fuente-titulo); text-align: center; }

/* ---------- Carril: invitación a deslizar (la quita js/inicio.js al primer toque) ---------- */
.carril.sin-tocar li:first-child .hoja-boton::after { content: ""; position: absolute; inset: -4px; border: var(--trazo-fuerte) solid var(--cr-verde-boton); border-radius: 13px; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .carril.sin-tocar li:first-child .hoja-boton { animation: latido-hoja 3.6s var(--curva-suave) 1.8s infinite; }
  .carril.sin-tocar li:first-child .hoja-boton::after { animation: onda-hoja 3.6s var(--curva-salida) 1.8s infinite; }
}
@keyframes latido-hoja { 0%, 60%, 100% { transform: rotate(var(--r, 0)) scale(1); } 68% { transform: rotate(0) scale(1.045); } 76% { transform: rotate(0) scale(.99); } 84% { transform: rotate(0) scale(1.03); } 92% { transform: rotate(var(--r, 0)) scale(1); } }
@keyframes onda-hoja { 0%, 62% { opacity: 0; transform: scale(1); } 68% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(1.08); } }
.carril-pista { display: none; }
@media (hover: none) {
  .carril-pista { position: absolute; z-index: 2; right: 0; top: 46%; display: flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px;
    border: var(--trazo) solid var(--cr-tinta); border-radius: var(--radio-pildora); background: var(--nivel-2); font: 600 .9375rem/1 var(--fuente-titulo);
    pointer-events: none; transition: opacity 300ms var(--curva-salida), transform 300ms var(--curva-salida); }
  .carril-pista svg { width: 24px; height: 24px; fill: #fff; stroke: var(--cr-tinta); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .carril-pista.oculta { opacity: 0; transform: translateX(16px); }
}
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .carril-pista svg { animation: deslizar 1.6s var(--curva-suave) infinite; }
}
@keyframes deslizar { 0%, 100% { transform: translateX(6px); } 50% { transform: translateX(-8px) rotate(-8deg); } }

/* ---------- Celular: todo centrado (pedido de Dante, 10/10) ----------
   Se centran títulos, bajadas, botones y bloques. Las listas largas (preguntas, filas de la tabla,
   puntos de "¿Es para ustedes?") quedan alineadas a la izquierda dentro de su caja, para leerse bien. */
@media (max-width: 759px) {
  .hero__texto, .cab, .problema .texto, .mecanismo, .guia .ancho > div, .muestra__cabeza, .logro > div,
  .franja, .caja-precio, .garantia, .cta-linea, .preguntas__lado, .libro__cab, .libro__txt, .pila h3, .pila__nota { text-align: center; }
  .hero__huevo { margin-inline: auto; }
  .hero h1, .hero .bajada, .h2, .bajada, .mecanismo h3, .mecanismo p, .libro__txt, .pila__nota, .caja-precio__nombre { margin-inline: auto; }
  .hero__accion { display: grid; justify-items: center; }
  .ya, .pago, .medios, .confia { justify-content: center; }
  .ya { text-align: left; }
  .dolor { justify-items: center; }
  .dolor li:nth-child(even) { margin-left: 0; }
  .libro__cab { flex-direction: column; gap: 8px; }
  .libro h3 { justify-content: center; }
  .logro { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .clip--logro { width: 130px; }
  .franja { justify-items: center; }
  .franja__tuli { margin: -58px auto -6px; }
  .pila h3 { flex-direction: column; align-items: center; gap: 6px; }
  .pila li { justify-items: center; text-align: center; }
  .pila__precio { justify-self: center; }
  .pila__total { justify-content: center; text-align: center; }
  .monto { justify-content: center; }
  .caja-precio .lista-corta { justify-items: center; }
  .caja-precio .lista-corta li { text-align: left; }
  .garantia { justify-items: center; }
  .sello { margin-inline: auto; }
  .quien__col h3 { justify-content: center; }
  .incluye__clips .b--clip figcaption { text-align: center; }
  .muestra__pie { justify-content: center; text-align: center; }
  .renglon__tuli { left: 50%; translate: -50% 0; }
  .preguntas__otra { text-align: center; }
  .pie .ancho { text-align: center; justify-items: center; }
  .pie nav ul { justify-content: center; }
}
.opinion-mini:has(.opinion-mini__foto) { padding-left: 86px; min-height: 92px; }
.opinion-mini:has(.opinion-mini__foto)::before { display: none; }
.opinion-mini__foto { position: absolute; left: 12px; top: 12px; width: 60px; height: 70px; object-fit: cover; border: 2px solid var(--cr-tinta); border-radius: 8px; rotate: -3deg; }
/* Opiniones en el celular: cada tarjeta con su alto, y espacio arriba para el círculo de las comillas */
@media (max-width: 899px) { .opiniones { align-items: start; padding-top: 32px; margin-top: 20px; } }

/* ---------- Lanzamiento (oferta.json): tachado, OFF, regalo y reloj ---------- */
.sin-lanzamiento .solo-lanz { display: none !important; }
.ico-regalo { width: 22px; height: 22px; flex: none; fill: var(--cr-papel); stroke: var(--cr-tinta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lanz-barra { background: var(--nivel-2); border-bottom: var(--trazo-fuerte) solid var(--cr-tinta); }
.lanz-barra p { max-width: 1160px; margin-inline: auto; padding: 9px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; text-align: center; font: 500 .9375rem/1.3 var(--fuente-titulo); }
.lanz-barra p > span:first-of-type { display: inline-flex; gap: 6px; }
.lanz-barra b { font-weight: 650; }
.lanz-barra__fin { padding: 2px 10px; border: 2px solid var(--cr-tinta); border-radius: var(--radio-pildora); background: var(--cr-papel); font-size: .875rem; white-space: nowrap; }
@media (min-width: 760px) { .lanz-barra p { font-size: 1rem; } }

s.solo-lanz, .monto s, .barra-compra__precio s { font-family: var(--fuente-titulo); font-weight: 600; color: var(--cr-gris-texto); text-decoration: line-through; text-decoration-color: var(--nivel-1); text-decoration-thickness: 3px; }
.off { display: inline-block; padding: 3px 8px; border: 2px solid var(--cr-tinta); border-radius: 8px; background: var(--nivel-1); color: var(--cr-tinta); font: 650 .875rem/1 var(--fuente-titulo); font-style: normal; rotate: -3deg; vertical-align: 2px; }
.monto { flex-wrap: wrap; row-gap: 6px; }
.monto s { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); align-self: center; }
.monto .off { font-size: 1.125rem; padding: 6px 10px; align-self: center; }
.barra-compra__precio s { font-size: .9375rem; margin-right: 4px; }

.reloj { margin-top: 16px; padding: 14px 14px 12px; border: var(--trazo) solid var(--cr-tinta); border-radius: 18px; background: var(--nivel-1-claro); text-align: center; }
.reloj__titulo { font: 600 .9375rem/1.3 var(--fuente-titulo); }
.reloj__cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.reloj__cifras span { display: grid; gap: 2px; padding: 8px 4px 6px; border: 2px solid var(--cr-tinta); border-radius: 12px; background: var(--cr-papel); font-size: .75rem; color: var(--cr-tinta-suave); }
.reloj__cifras b { font: 650 1.75rem/1 var(--fuente-titulo); color: var(--cr-tinta); font-variant-numeric: tabular-nums; }
.reloj__despues { margin-top: 8px; font-size: .8125rem; color: var(--cr-tinta-suave); }
.fecha-de-prueba .reloj__despues::after { content: " (Fecha de prueba: falta poner la fecha real en oferta.json.)"; color: var(--nivel-1-texto); font-weight: 700; }
.regalo-li { align-items: center !important; }
.regalo-li b { font-family: var(--fuente-titulo); font-weight: 600; }

.pila__grupo--regalo { padding: 16px; border: var(--trazo) dashed var(--cr-tinta) !important; border-radius: 20px; background: var(--nivel-2-claro); }
.pila__grupo + .pila__grupo--regalo { margin-top: 22px; }
.pila__grupo--regalo h3 { justify-content: flex-start; align-items: center; gap: 8px; }
.pila__grupo--regalo h3 span { margin-left: auto; }
.regalo { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 12px; text-align: left; }
.regalo img { width: 100%; border: 2.5px solid var(--cr-tinta); border-radius: 7px; background: #fff; rotate: -3deg; }
.regalo b { font: 650 1.0625rem/1.2 var(--fuente-titulo); }
.regalo p { margin-top: 4px; font-size: .875rem; color: var(--cr-tinta-suave); }
.regalo .pila__precio { display: inline-block; margin-top: 8px; background: var(--cr-verde-cuerpo); }
@media (max-width: 759px) { .pila__grupo--regalo h3 { flex-direction: row; justify-content: center; } .pila__grupo--regalo h3 span { margin-left: 0; } }
@media (max-width: 380px) {
  .barra-compra { gap: 8px; padding-inline: 10px; }
  .barra-compra__precio s { display: none; }
  .barra-compra .boton { min-width: 0; padding: 0 10px; font-size: .9375rem; }
}

/* Sello del lanzamiento: 35% OFF + regalo, bien visible (hero, franja, caja de precio) */
.lanz-sello { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 14px; }
.off--grande { padding: 7px 12px 6px; border-width: var(--trazo-fuerte); border-radius: 12px; font-size: 1.25rem; rotate: -4deg; vertical-align: 0; }
.chip-regalo { white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 9px; border: var(--trazo-fuerte) solid var(--cr-tinta); border-radius: var(--radio-pildora);
  background: var(--cr-verde-cuerpo); font: 650 1rem/1.1 var(--fuente-titulo); font-style: normal; rotate: 1.5deg; }
.chip-regalo .ico-regalo { width: 22px; height: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .lanz-sello .off--grande { animation: sello-late 4.5s var(--curva-suave) 3s infinite; }
}
@keyframes sello-late { 0%, 70%, 100% { transform: scale(1); } 76% { transform: scale(1.12); } 84% { transform: scale(.97); } 90% { transform: scale(1.05); } }
.franja__txt { display: grid; justify-items: start; }
.franja__txt > span { display: block; margin-top: 6px; font-size: .9375rem; }
.franja .lanz-sello { margin-bottom: 10px; }
.franja .chip-regalo { background: var(--cr-papel); }
.lanz-sello--caja { justify-content: flex-start; margin: 14px 0 0; }
@media (max-width: 759px) {
  .lanz-sello, .lanz-sello--caja { justify-content: center; }
  .franja__txt { justify-items: center; }
}
.regalo .pila__precio { white-space: normal; }