/* Hallmark v2.0.0 · custom (marca cerrada en DIRECCION_ARTE.md) · genre editorial · signature: el error tachado con rotulador y corregido en amarillo · bocadillos como unidad visual */
/* critique: hecho a mano sobre papel crema, no plantilla; riesgo asumido = rotulación y garabatos propios solo 1 grupo por pantalla; titulares en mayúsculas apretadas sin tracking (no son etiquetas) */
/* waive 12: overshoot suave en botones y pestañas = el 'rebote' pedido en DIRECCION_ARTE §7; reason: marca lúdica, 250 ms */
/* waive 54: los lemas manuscritos (Gochi Hand) son rótulos de la marca, no etiquetas de interfaz; reason: identidad de Tiffany */

:root {
  --paper: #F6F1E9;
  --paper-deep: #EAE2D4;
  --ink: #0B0B0B;
  --ink-soft: #3B3732;
  --pink: #FF2D55;
  --sun: #FFD84D;
  --blush: #FFB3C4;
  --f-display: 'Bricolage Grotesque', 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --f-hand: 'Gochi Hand', 'Caveat Brush', 'Comic Sans MS', cursive;
  --f-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(1rem, 5vw, 3rem);
  --shadow: 5px 5px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --ease: cubic-bezier(.34, 1.56, .64, 1);
  --pen: 5px;
  --solid: #000;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink);
  font-family: var(--f-body); font-size: 1.0625rem; line-height: 1.6; font-weight: 450;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* grano de papel: fondo del body (antes era una capa fija sobre toda la página) */
body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.on-dark :focus-visible, .band-ink :focus-visible { outline-color: var(--sun); }
.skip { position: absolute; left: -999px; top: .5rem; z-index: 200; background: var(--ink); color: var(--sun); padding: .6rem 1rem; border-radius: 99px; }
.skip:focus { left: .5rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.sec { position: relative; padding-block: clamp(4.5rem, 10vw, 8rem); }

/* tipografía */
.display {
  font-family: var(--f-display); font-weight: 800; font-stretch: 82%; font-variation-settings: "opsz" 96, "wdth" 82;
  line-height: .9; letter-spacing: -.025em; overflow-wrap: break-word; min-width: 0; text-wrap: balance;
}
.h2 { font-size: clamp(2.6rem, 8.4vw, 6.4rem); }
.hand { font-family: var(--f-hand); font-weight: 400; line-height: 1.1; letter-spacing: 0; }
.lead { font-size: clamp(1.1rem, 2.2vw, 1.4rem); line-height: 1.5; max-width: 34ch; font-weight: 500; }

/* ====== garabatos ====== */
.doo { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.doo-solid { fill: currentColor; stroke: none; }
.draw path, .draw line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .draw path, .js .draw line { transition: stroke-dashoffset .7s ease-out; }
.draw.is-on path, .draw.is-on line, html:not(.js) .draw path, html:not(.js) .draw line { stroke-dashoffset: 0; }

/* rotulador: subrayado y tachado */
.uline { position: absolute; left: -2%; width: 104%; height: .32em; bottom: -.18em; color: var(--pink); fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round; pointer-events: none; overflow: visible; }
.has-uline { position: relative; display: inline-block; }
.strike { position: relative; display: inline-block; color: inherit; }
.strike svg { position: absolute; left: -6%; top: 50%; width: 112%; height: .5em; transform: translateY(-50%) rotate(-3deg); color: var(--pink); fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round; overflow: visible; }
.fix { font-family: var(--f-hand); background: var(--sun); color: var(--ink); padding: .05em .35em .1em; border-radius: .3em; transform: rotate(-2deg); display: inline-block; }

/* ====== bocadillos ====== */
.bub {
  position: relative; display: inline-block; padding: .75rem 1.15rem; border-radius: 1.6rem; background: var(--paper); color: var(--ink);
  font-weight: 600; line-height: 1.35; max-width: 100%; isolation: isolate;
}
.bub::after { content: ""; position: absolute; width: 20px; height: 20px; background: inherit; z-index: -1; }
.tail-bl::after { left: 18px; bottom: -11px; clip-path: polygon(0 0, 100% 0, 18% 100%); }
.tail-br::after { right: 18px; bottom: -11px; clip-path: polygon(0 0, 100% 0, 82% 100%); }
.tail-tl::after { left: 18px; top: -11px; clip-path: polygon(18% 0, 100% 100%, 0 100%); }
.tail-tr::after { right: 18px; top: -11px; clip-path: polygon(82% 0, 100% 100%, 0 100%); }
.tail-l::after { left: -11px; top: 22px; clip-path: polygon(0 40%, 100% 0, 100% 100%); }
.tail-r::after { right: -11px; top: 22px; clip-path: polygon(100% 40%, 0 0, 0 100%); }
.bub-pink { background: var(--pink); color: var(--ink); }
.bub-sun { background: var(--sun); color: var(--ink); }
.bub-blush { background: var(--blush); color: var(--ink); }
.bub-ink { background: var(--ink); color: var(--paper); }
.bub-line { background: transparent; border: 2.5px dashed currentColor; }
.bub-line::after { display: none; }
.bub-hard { box-shadow: var(--shadow-sm); }

/* "teclea": puntitos, luego el texto */
.dots { display: none; gap: 4px; align-items: center; height: 1em; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; animation: dot 1s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }
.js .typed .txt { transition: opacity .25s, transform .35s var(--ease); }
.js .typed:not(.is-on):not(.is-typing) { opacity: 0; transform: translateY(14px) scale(.9); }
.js .typed { transition: opacity .3s, transform .45s var(--ease); transform-origin: left bottom; }
.js .typed.is-typing .txt { opacity: 0; position: absolute; visibility: hidden; }
.js .typed.is-typing .dots { display: inline-flex; }
.typed.is-on .txt { opacity: 1; }

/* ====== botones ====== */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: .6rem; min-height: 3.25rem; padding: .7rem 1.5rem; border-radius: 99px;
  border: 2.5px solid var(--ink); background: var(--ink); color: var(--sun); font-weight: 800; font-size: 1.02rem; text-decoration: none; white-space: nowrap;
  box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .2s;
}
.btn:hover { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-wa { background: var(--pink); color: var(--ink); }
.btn-wa::after { content: ""; position: absolute; left: 22px; bottom: -13px; width: 18px; height: 14px; background: var(--pink); clip-path: polygon(0 0, 100% 0, 10% 100%); border-left: 0; }
.btn-line { background: transparent; color: var(--ink); }
.btn-sun { background: var(--sun); color: var(--ink); }
.btn .doo { width: 1.3rem; height: 1.3rem; stroke-width: 6; }
.bla-pop { position: fixed; z-index: 120; pointer-events: none; font-family: var(--f-hand); font-size: 1.25rem; color: var(--ink); background: var(--sun); padding: .1rem .6rem; border-radius: 99px; border: 2px solid var(--ink); animation: pop .9s ease-out forwards; }
@keyframes pop { 0% { transform: translate(-50%, 0) scale(.4) rotate(-6deg); opacity: 0; } 25% { transform: translate(-50%, -14px) scale(1.1) rotate(3deg); opacity: 1; } 100% { transform: translate(-50%, -48px) scale(1) rotate(0); opacity: 0; } }
.cursor-bub { position: fixed; z-index: 110; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity .2s; width: 46px; height: 32px; border-radius: 16px; background: var(--sun); border: 2px solid var(--ink); display: none; place-items: center; font-weight: 900; letter-spacing: 1px; }
.cursor-bub.on { opacity: 1; }
@media (pointer: fine) { .cursor-bub { display: grid; } }

/* ====== cabecera ====== */
.top { position: sticky; top: 0; z-index: 80; background: var(--paper); transition: transform .35s var(--ease-out); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }
.logo { display: inline-flex; flex-direction: column; align-items: flex-start; text-decoration: none; line-height: .86; font-family: var(--f-display); font-weight: 800; font-stretch: 82%; font-variation-settings: "opsz" 96, "wdth" 82; letter-spacing: -.03em; }
.logo-t { font-size: 1.7rem; display: flex; align-items: flex-end; gap: .08em; }
.logo-t .dots { display: inline-flex; margin-left: .15em; margin-bottom: .22em; height: auto; }
.logo-t .dots i { width: .2rem; height: .2rem; animation-iteration-count: 3; }
.logo-s { margin-top: .22rem; background: var(--pink); color: var(--ink); font-size: .95rem; letter-spacing: .01em; padding: .08em .5em .12em; border-radius: .2em; transform: rotate(-1.5deg); align-self: flex-start; }
.nav { display: none; }
.nav a { text-decoration: none; font-weight: 700; font-size: 1rem; padding: .7rem .2rem; position: relative; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: .1rem; height: 4px; border-radius: 4px; background: var(--pink); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.nav a:not(.btn):hover::after { transform: scaleX(1); }
.nav .btn { min-height: 2.75rem; padding: .35rem 1.2rem; font-size: .98rem; }
.tools { display: flex; align-items: center; gap: .6rem; }
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; min-height: 2.75rem; padding: .3rem .9rem; background: var(--sun); border: 2.5px solid var(--ink); border-radius: 99px; font-weight: 800; font-size: .95rem; }
.lang summary::-webkit-details-marker { display: none; }
.lang ul { position: absolute; right: 0; top: calc(100% + 10px); min-width: 11rem; background: var(--sun); border: 2.5px solid var(--ink); border-radius: 1.2rem; padding: .5rem; box-shadow: var(--shadow-sm); z-index: 5; }
.lang ul::before { content: ""; position: absolute; right: 22px; top: -10px; width: 16px; height: 10px; background: var(--ink); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.lang a { display: block; padding: .5rem .8rem; border-radius: .8rem; text-decoration: none; font-weight: 700; }
.lang a:hover, .lang a[aria-current] { background: var(--ink); color: var(--sun); }
.burger { min-height: 2.75rem; min-width: 2.75rem; padding: .3rem .9rem; background: var(--ink); color: var(--sun); border: 2.5px solid var(--ink); border-radius: 99px; font-weight: 800; }
.drawer { position: fixed; inset: 4.5rem 0 auto 0; z-index: 79; padding: 1rem var(--gutter) 1.5rem; display: none; }
.drawer.open { display: block; }
.drawer .bub { display: block; padding: 1.2rem; border: 2.5px solid var(--ink); box-shadow: var(--shadow); border-radius: 1.8rem; }
.drawer a { display: block; padding: .55rem .3rem; font-family: var(--f-display); font-weight: 800; font-stretch: 82%; font-size: 2.1rem; letter-spacing: -.02em; text-decoration: none; line-height: 1.05; }
.drawer a.btn { display: inline-flex; font-size: 1.1rem; font-family: var(--f-body); margin-top: .8rem; }
@media (min-width: 960px) {
  .nav { display: flex; align-items: center; gap: 1.5rem; }
  .burger, .drawer { display: none !important; }
}

/* ====== hero ====== */
.hero { position: relative; padding-top: clamp(.5rem, 2.5vw, 2rem); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-areas: "title" "photo" "rest"; align-items: end;
}
.hero-title { grid-area: title; position: relative; z-index: 2; font-size: clamp(2.9rem, 13.2vw, 8.6rem); text-transform: uppercase; line-height: 1; padding-top: .45em; }
.hero-title > span { display: block; }
.hero-title .l2 { white-space: nowrap; margin-top: .3em; }
.fixwrap { position: relative; display: inline-block; }
.was { position: absolute; left: 6%; bottom: 84%; font-size: .38em; text-transform: none; color: var(--ink); font-weight: 400; letter-spacing: 0; rotate: -5deg; white-space: nowrap; }
.was svg { position: absolute; left: -8%; top: 52%; width: 116%; height: .4em; translate: 0 -40%; color: var(--pink); fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; overflow: visible; }
.has-uline { position: relative; display: inline-block; }
.hero .uline { left: 0; width: 100%; height: .2em; bottom: -.08em; stroke-width: 10; }
.js .hero .was .draw path { transition-delay: .55s; }
.js .hero .uline path { transition-delay: 1.15s; transition-duration: .9s; }
.hero-rest { grid-area: rest; position: relative; z-index: 2; padding-bottom: clamp(1.6rem, 4vw, 3rem); }
.hero .lead { margin-top: 1.2rem; max-width: 30ch; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 1.6rem; }
.hand-link { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--f-hand); font-size: 1.45rem; text-decoration: none; min-height: 2.75rem; }
.hand-link span { background: linear-gradient(var(--sun), var(--sun)) 0 88% / 100% .32em no-repeat; padding-inline: .1em; transition: background-size .3s; }
.hand-link:hover span { background-size: 100% .9em; }
.hand-link .doo { width: 2.2rem; height: 1.6rem; stroke-width: 6; transition: transform .3s var(--ease); }
.hand-link:hover .doo { transform: translateX(4px) rotate(-6deg); }
.hero-photo { grid-area: photo; position: relative; justify-self: center; margin-top: .6rem; }
.hero-photo .photo { position: relative; z-index: 1; height: min(40svh, 340px); width: auto; -webkit-mask-image: linear-gradient(to right, transparent 0, var(--solid) 9%); mask-image: linear-gradient(to right, transparent 0, var(--solid) 9%); }
.hero .blob { position: absolute; z-index: 0; color: var(--blush); width: 125%; height: auto; left: -22%; top: 16%; animation: breathe 10s ease-in-out infinite; }
.hero .sparks { position: absolute; z-index: 2; width: 3.6rem; height: 3.6rem; left: 47%; top: 0%; color: var(--ink); stroke-width: 6; rotate: 8deg; }
.fl { position: absolute; z-index: 3; animation: bob 5.5s ease-in-out infinite; font-size: .92rem; padding: .55rem .9rem; }
.fl-1 { left: -18%; top: 6%; rotate: -6deg; }
.fl-2 { left: -16%; top: 52%; rotate: 3deg; animation-delay: -1.7s; }
.fl-3 { right: -14%; top: 70%; rotate: -4deg; animation-delay: -3.1s; }
.bub-paper { background: var(--paper); }
.fl .ok { color: var(--sun); font-weight: 800; }
.js .fl.typed { transform-origin: center bottom; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.err-line s { text-decoration: none; position: relative; }
.err-line s::after { content: ""; position: absolute; left: -12%; right: -12%; top: 50%; height: 4px; background: var(--pink); border-radius: 4px; rotate: -8deg; }
@keyframes breathe { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.05) rotate(3deg); } }
.facts { background: var(--ink); color: var(--paper); position: relative; z-index: 2; }
.facts ul { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .3rem 1rem; padding-block: 1rem; }
.facts li { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: .95rem; }
.facts .doo { color: var(--sun); flex: none; width: 1.2rem; height: 1.2rem; }
@media (min-width: 700px) { .facts ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 720px) {
  .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-areas: "title photo" "rest photo"; grid-template-rows: auto 1fr; }
  .hero-title { font-size: clamp(3.2rem, 8.2vw, 7.4rem); align-self: end; padding-top: clamp(2.5rem, 7vh, 5rem); }
  .hero-rest { align-self: start; }
  .hero-photo { align-self: end; justify-self: end; margin: 0 2% 0 0; }
  .hero-photo .photo { height: min(calc(100svh - 10.5rem), 600px, 62vw); }
  .fl { font-size: 1rem; padding: .7rem 1.1rem; }
  .fl-1 { left: -4%; top: 3%; } .fl-2 { left: -10%; top: 56%; } .fl-3 { right: -4%; top: 74%; }
}
@media (min-width: 1100px) { .fl { font-size: 1.08rem; } .fl-1 { left: -12%; top: 6%; } .fl-2 { left: -8%; top: 54%; } .fl-3 { right: -8%; top: 74%; } }

/* ====== marquee ====== */
.marq { background: var(--pink); color: var(--ink); overflow: hidden; border-block: 3px solid var(--ink); transform: rotate(-1.2deg); margin-block: 1.5rem; position: relative; z-index: 3; }
.marq-track { display: flex; width: max-content; animation: marq 28s linear infinite; }
.marq-set { display: flex; align-items: center; gap: 1.6rem; padding: .7rem 1.6rem .7rem 0; font-family: var(--f-hand); font-size: clamp(1.9rem, 5vw, 3.4rem); white-space: nowrap; }
.marq .doo { width: 1.3rem; height: 1.3rem; stroke-width: 7; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ====== meseta ====== */
.plateau { background: var(--sun); overflow: hidden; }
.plateau .h2 { margin-top: 0; }
.plateau .h2 .gray { color: var(--ink-soft); display: block; }
.plateau .h2 .live { display: block; position: relative; width: max-content; max-width: 100%; }
.plateau .h2 .live::before { content: ""; position: absolute; z-index: -1; inset: 8% -3% 0 -3%; background: var(--pink); border-radius: .18em; transform: rotate(-1.5deg); }
.plateau-grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
.plateau p.copy { font-size: clamp(1.15rem, 2.4vw, 1.5rem); max-width: 30ch; line-height: 1.4; font-weight: 600; }
.sentence { font-family: var(--f-display); font-weight: 800; font-stretch: 85%; font-size: clamp(2rem, 6vw, 3.8rem); line-height: 1.5; letter-spacing: -.02em; }
.sentence .fix { font-size: .72em; position: absolute; left: 50%; top: -.95em; translate: -50% 0; white-space: nowrap; transform: rotate(-4deg); opacity: 0; }
.sentence .strike { margin-inline: .1em; }
.js .sentence.is-on .fix { opacity: 1; transition: opacity .3s .8s, transform .4s var(--ease) .8s; }
html:not(.js) .sentence .fix { opacity: 1; }
.note { margin-top: 1.5rem; display: flex; align-items: center; gap: .6rem; font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
.plateau .arrow { position: absolute; right: 5%; bottom: 3%; width: 7rem; color: var(--ink); display: none; }
@media (min-width: 900px) { .plateau-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 4rem; } .plateau .arrow { display: block; } }

/* ====== 4 pasos ====== */
.steps { background: var(--ink); color: var(--paper); overflow: hidden; }
.steps .h2 { color: var(--paper); max-width: 10ch; }
.steps .h2 em { font-style: normal; color: var(--sun); }
.steps-grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.chat { display: flex; flex-direction: column; gap: 1.5rem; padding-bottom: 1rem; }
.msg { display: flex; flex-direction: column; gap: .45rem; max-width: min(30rem, 92%); }
.msg-who { font-size: .9rem; font-weight: 700; color: var(--blush); padding-inline: .5rem; }
.msg.me { align-self: flex-end; align-items: flex-end; }
.msg.me .msg-who { color: var(--sun); }
.msg .bub { font-size: 1.12rem; padding: .9rem 1.2rem; }
.msg .bub .mark { background: linear-gradient(transparent 62%, var(--pink) 62% 92%, transparent 92%); }
.step-n { display: inline-grid; place-items: center; background: var(--sun); color: var(--ink); width: 2rem; height: 2rem; border-radius: 50%; font-weight: 900; margin-right: .5rem; font-size: .95rem; }
.step-t { display: flex; align-items: center; font-family: var(--f-hand); font-size: 1.6rem; color: var(--paper); }
.msg.me .bub-sun .strike svg { color: var(--pink); }
@media (min-width: 960px) { .steps-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 5rem; } .steps-grid > :first-child { position: sticky; top: 7rem; } }

/* ====== diferencias ====== */
.diff-grid { display: grid; gap: 2rem; margin-top: 3.5rem; grid-template-columns: minmax(0, 1fr); }
.sticker, .plan { transition: opacity .55s ease-out, transform .3s var(--ease), box-shadow .2s; }
.sticker { position: relative; padding: 1.8rem 1.6rem 1.8rem; border: 3px solid var(--ink); border-radius: 1.8rem; box-shadow: var(--shadow); transition: transform .3s var(--ease), box-shadow .2s; }
.sticker:hover { transform: rotate(-1.5deg) translateY(-4px); box-shadow: 8px 8px 0 var(--ink); }
.sticker h3 { font-family: var(--f-display); font-weight: 800; font-stretch: 82%; font-size: clamp(1.8rem, 3.6vw, 2.5rem); line-height: .98; letter-spacing: -.02em; margin-top: 1rem; }
.sticker p { margin-top: .7rem; max-width: 26ch; font-weight: 500; }
.sticker .doo { width: 3rem; height: 3rem; stroke-width: 5; }
.st-1 { background: var(--sun); transform: rotate(-1deg); }
.st-2 { background: var(--blush); transform: rotate(1.2deg); }
.st-3 { background: var(--pink); transform: rotate(-.6deg); }
.st-4 { background: var(--paper); transform: rotate(.8deg); }
@media (min-width: 760px) { .diff-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem 3rem; } .sticker:nth-child(even) { margin-top: 3.5rem; } }

/* ====== juego ====== */
.game { background: var(--blush); overflow: hidden; }
.game-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.game .lead { margin-top: 1.2rem; }
.board { margin-top: 2.5rem; background: var(--paper); border: 3px solid var(--ink); border-radius: 2rem; box-shadow: var(--shadow); padding: clamp(1.2rem, 4vw, 2.5rem); position: relative; }
.tabs { display: flex; gap: .6rem; flex-wrap: wrap; }
.tab { min-height: 2.9rem; padding: .4rem 1.2rem; border: 2.5px solid var(--ink); border-radius: 99px; background: transparent; font-weight: 800; transition: background .2s, transform .25s var(--ease); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--sun); }
.tab:hover { transform: rotate(-1.5deg); }
.inst { margin-top: 1.6rem; font-family: var(--f-hand); font-size: clamp(1.4rem, 3vw, 1.9rem); }
.slot-line { margin-top: 1.2rem; min-height: 4.6rem; border-bottom: 4px solid var(--ink); padding: .4rem 0 .6rem; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; border-radius: 2px; }
.bank { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .7rem; min-height: 3.5rem; }
.chip { min-height: 3rem; padding: .35rem 1.1rem; background: var(--sun); border: 2.5px solid var(--ink); border-radius: 1.2rem; font-weight: 800; font-size: 1.1rem; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .2s, background .2s; }
.chip:hover { transform: translate(-1px, -2px) rotate(-1.5deg); }
.chip:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.chip.placed { background: var(--paper); }
.chip.ok { background: var(--sun); }
.chip.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-4px) rotate(-2deg); } 40%, 80% { transform: translateX(4px) rotate(2deg); } }
.row-act { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.feed { margin-top: 1.4rem; min-height: 3.2rem; }
.feed .bub { font-size: 1.05rem; }
.words { margin-top: 2.6rem; display: flex; flex-wrap: wrap; gap: .5rem .35rem; font-size: clamp(1.5rem, 4.2vw, 2.4rem); font-family: var(--f-display); font-weight: 700; font-stretch: 90%; line-height: 1.2; }
.w { position: relative; padding: .1rem .4rem .2rem; border-radius: .6rem; background: transparent; border: 0; font: inherit; letter-spacing: -.01em; transition: background .2s, transform .25s var(--ease); }
.w:hover { background: var(--sun); transform: rotate(-2deg); }
.w.corrected { background: transparent; color: var(--ink); }
.w.corrected .strike svg { color: var(--pink); }
.w .fix { position: absolute; left: 50%; top: -1.2em; translate: -50% 0; font-size: .7em; white-space: nowrap; z-index: 2; }
.w.soft { animation: shake .45s; background: var(--blush); }
.game .doo-deco { position: absolute; right: 1rem; top: 1rem; width: 3rem; color: var(--ink); }

/* ====== precios ====== */
.prices-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; align-items: flex-end; }
.plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; margin-top: 3.5rem; }
.plan { position: relative; display: flex; flex-direction: column; padding: 1.6rem; border: 3px solid var(--ink); border-radius: 1.8rem; background: var(--paper); box-shadow: var(--shadow); transition: transform .3s var(--ease); }
.plan:hover { transform: rotate(-1deg) translateY(-3px); }
.plan-name { font-weight: 800; font-size: 1.15rem; }
.plan-price { font-variant-numeric: tabular-nums; font-family: var(--f-display); font-weight: 800; font-stretch: 80%; font-size: clamp(4.2rem, 8vw, 6rem); line-height: .9; letter-spacing: -.04em; margin-top: .6rem; display: flex; align-items: flex-start; }
.plan-price sup { font-size: .4em; margin-top: .2em; margin-left: .06em; letter-spacing: 0; }
.plan ul { margin-top: 1rem; font-weight: 600; display: grid; gap: .25rem; }
.plan .per { font-family: var(--f-hand); font-size: 1.4rem; margin-top: .5rem; min-height: 1.5rem; }
.plan .btn { margin-top: 1.4rem; align-self: flex-start; }
.plan.star { background: var(--pink); }
.plan .starnote { position: absolute; top: -1.4rem; right: .8rem; font-family: var(--f-hand); font-size: 1.5rem; background: var(--sun); border: 2.5px solid var(--ink); border-radius: 99px; padding: .1rem .9rem; transform: rotate(4deg); }
.prices-foot { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: center; }
.prices-foot p { font-weight: 600; max-width: 36ch; }
@media (min-width: 640px) { .plans { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1040px) { .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; } .plan.star { margin-top: -1.5rem; padding-bottom: 2.4rem; } }

/* ====== sobre mí ====== */
.about { background: var(--pink); color: var(--ink); overflow: hidden; }
.about-grid { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
.about-photo { position: relative; width: min(80%, 340px); justify-self: center; }
.about-photo .frame { background: var(--paper); border: 4px solid var(--ink); border-radius: 46% 54% 44% 56% / 52% 46% 54% 48%; overflow: hidden; box-shadow: var(--shadow); transform: rotate(-3deg); aspect-ratio: 4/5; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.about-photo .bub { position: absolute; right: -12%; bottom: 8%; transform: rotate(4deg); font-family: var(--f-hand); font-weight: 400; font-size: 1.5rem; }
.about .copy { font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-weight: 600; max-width: 30ch; margin-top: 1.4rem; }
.about .copy + .copy { margin-top: 1rem; }
@media (min-width: 860px) { .about-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 5rem; } .about-photo { width: 100%; justify-self: start; } }

/* ====== reseñas ====== */
.reviews-row { display: grid; gap: 1.5rem; margin-top: 3rem; justify-items: start; }
.reviews-row .bub { font-size: 1.15rem; padding: 1.1rem 1.6rem; }
.reviews-row .big { font-family: var(--f-hand); font-weight: 400; font-size: clamp(1.6rem, 4vw, 2.4rem); }
.reviews-row .r2 { justify-self: end; }
.reviews .sub { margin-top: 2rem; font-weight: 600; max-width: 40ch; }
.reviews .r2 .dots { display: inline-flex; }

/* ====== reservar ====== */
.book { background: var(--ink); color: var(--paper); overflow: hidden; }
.book .h2 { font-size: clamp(3.4rem, 14vw, 11rem); color: var(--sun); }
.book-grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); margin-top: 1rem; }
.book .lead { color: var(--paper); }
.flow { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.flow li { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
.flow li b { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--pink); color: var(--ink); font-size: .9rem; }
.book .trial { display: grid; gap: 1rem; margin-top: 2.4rem; }
.trial li { display: flex; gap: 1rem; align-items: center; font-family: var(--f-hand); font-size: 1.7rem; }
.trial li .n { font-family: var(--f-display); font-weight: 800; font-size: 2.6rem; color: var(--pink); width: 2rem; line-height: 1; }
.book-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; }
.book .btn-sun { box-shadow: 4px 4px 0 var(--pink); border-color: var(--sun); }
.book .btn-wa { border-color: var(--pink); box-shadow: 4px 4px 0 var(--sun); }
.book .btn-wa::after { background: var(--pink); }
.book .blob2 { position: absolute; right: -12%; bottom: -14%; width: min(70vw, 460px); color: var(--pink); opacity: .9; z-index: 0; animation: breathe 11s ease-in-out infinite; }
.book .wrap { position: relative; z-index: 1; }
@media (min-width: 900px) { .book-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; align-items: end; } }

/* ====== ficha (dialog) ====== */
.ficha { width: min(100%, 44rem); max-width: 100%; height: min(100dvh, 52rem); max-height: 100dvh; margin: auto; padding: 0; border: 3px solid var(--ink); border-radius: 2rem; background: var(--paper); color: var(--ink); overflow: hidden; box-shadow: 8px 8px 0 var(--ink); }
.ficha::backdrop { background: color-mix(in srgb, var(--ink) 72%, transparent); }
@media (max-width: 700px) { .ficha { width: 100%; height: 100dvh; border-radius: 0; border-inline: 0; } }
.f-wrap { display: flex; flex-direction: column; height: 100%; }
.f-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem .8rem; border-bottom: 3px solid var(--ink); background: var(--sun); }
.f-title { font-family: var(--f-display); font-weight: 800; font-stretch: 82%; font-size: 1.7rem; letter-spacing: -.02em; line-height: 1; }
.f-prog { display: flex; gap: .35rem; align-items: center; }
.f-prog i { width: 1.15rem; height: .95rem; border: 2px solid var(--ink); border-radius: .55rem .55rem .55rem .1rem; background: transparent; transition: background .25s; }
.f-prog i.on { background: var(--pink); }
.f-x { min-width: 2.75rem; min-height: 2.75rem; border: 2.5px solid var(--ink); background: var(--paper); border-radius: 50%; font-weight: 900; }
.f-body { flex: 1; overflow-y: auto; padding: 1.4rem 1.2rem 1.6rem; display: flex; flex-direction: column; gap: 1.4rem; overscroll-behavior: contain; }
.f-foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .9rem 1.2rem; border-top: 3px solid var(--ink); background: var(--paper); }
.f-foot small { font-size: .82rem; color: var(--ink-soft); flex: 1; line-height: 1.3; }
.f-body > * { flex-shrink: 0; }
.q { display: flex; flex-direction: column; gap: .7rem; animation: rise .45s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.q-l { display: flex; gap: .7rem; align-items: flex-start; }
.avatar { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--pink); }
.q-l .bub { font-size: 1.02rem; font-weight: 650; }
.q-a { align-self: flex-end; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; max-width: 100%; }
.opt { min-height: 2.8rem; padding: .3rem 1rem; border: 2.5px solid var(--ink); border-radius: 1.3rem 1.3rem .3rem 1.3rem; background: var(--paper); font-weight: 700; transition: background .2s, transform .25s var(--ease); }
.opt:hover { transform: rotate(-1.5deg); }
.opt[aria-pressed="true"] { background: var(--pink); }
.in { width: 100%; min-height: 3rem; padding: .6rem 1rem; border: 2.5px solid var(--ink); border-radius: 1.3rem 1.3rem .3rem 1.3rem; background: var(--blush); font: inherit; font-weight: 600; color: var(--ink); resize: vertical; }
.in::placeholder { color: var(--ink-soft); opacity: .85; }
.in:focus-visible { background: var(--sun); outline-offset: 2px; }
.q-a .in { max-width: 28rem; }
.q-err { align-self: flex-end; font-weight: 700; font-size: .95rem; background: var(--sun); border-radius: 1rem; padding: .3rem .8rem; }
.cal-days { display: flex; gap: .6rem; overflow-x: auto; padding: .4rem .2rem .8rem; scroll-snap-type: x proximity; }
.cal-d { flex: none; scroll-snap-align: start; width: 4.2rem; padding: .5rem .2rem; border: 2.5px solid var(--ink); border-radius: 1.2rem; background: var(--paper); text-align: center; line-height: 1.1; font-weight: 700; }
.cal-d b { display: block; font-family: var(--f-display); font-size: 1.8rem; font-weight: 800; }
.cal-d[aria-pressed="true"] { background: var(--ink); color: var(--sun); }
.cal-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); gap: .6rem; }
.tz { font-size: .92rem; font-weight: 600; background: var(--blush); border-radius: 99px; padding: .2rem .9rem; align-self: flex-start; }
.done { text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; padding-block: 1rem; }
.done h3 { font-family: var(--f-display); font-weight: 800; font-stretch: 82%; font-size: clamp(2.6rem, 9vw, 4.4rem); line-height: .92; letter-spacing: -.025em; }

/* ====== pie ====== */
.foot { padding-block: clamp(3rem, 7vw, 6rem) 7rem; overflow: hidden; }
.foot-mark { font-size: clamp(4.2rem, 19vw, 17.5rem); line-height: .82; letter-spacing: -.045em; white-space: nowrap; display: flex; align-items: flex-end; }
.foot-mark .dots { display: inline-flex; gap: .06em; height: auto; margin: 0 0 .09em .08em; color: var(--pink); }
.foot-mark .dots i { width: .13em; height: .13em; animation-duration: 1.6s; }
.foot-in { display: grid; gap: 1rem 2rem; align-items: end; margin-top: 1.6rem; border-top: 3px solid var(--ink); padding-top: 1.2rem; }
.foot .tag { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--ink); }
.foot-meta { display: grid; gap: .2rem; }
.foot small { display: block; color: var(--ink-soft); font-weight: 600; }
.foot a { font-weight: 700; }
@media (min-width: 800px) { .foot { padding-bottom: 3rem; } .foot-in { grid-template-columns: minmax(0, 1fr) auto; } .foot-meta { text-align: right; } }

/* flotante móvil */
.sticky-cta.off { opacity: 0; pointer-events: none; }
.sticky-cta { transition: opacity .25s; position: fixed; z-index: 70; right: 1rem; bottom: 1rem; }
.sticky-cta .btn { box-shadow: 4px 4px 0 var(--ink); }
@media (min-width: 960px) { .sticky-cta { display: none; } }

/* easter egg */
.egg { position: fixed; z-index: 130; pointer-events: none; font-family: var(--f-hand); font-size: clamp(1.4rem, 4vw, 2.6rem); padding: .1rem .8rem; border-radius: 1.2rem; border: 2.5px solid var(--ink); animation: egg 2.4s ease-out forwards; }
@keyframes egg { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 15% { transform: scale(1.1) rotate(4deg); opacity: 1; } 80% { opacity: 1; } 100% { transform: scale(1) translateY(-30px) rotate(-2deg); opacity: 0; } }

/* revelado suave (visible sin JS) */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .55s ease-out, transform .6s var(--ease); }
.js .rv.is-on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .marq-track { animation: none; flex-wrap: wrap; width: auto; }
  .marq-set[aria-hidden] { display: none; }
  .js .rv, .js .typed:not(.is-on) { opacity: 1; transform: none; }
  .js .typed.is-typing .txt { opacity: 1; position: static; visibility: visible; }
  .js .typed.is-typing .dots { display: none; }
  .draw path, .draw line { stroke-dashoffset: 0 !important; }
  .sentence .fix { opacity: 1 !important; }
}

/* ====== fondos con carácter (auditoría visual) ====== */
:root {
  --rule: color-mix(in srgb, var(--ink) 7%, transparent);
  --rule-pink: color-mix(in srgb, var(--pink) 45%, transparent);
  --chalk: color-mix(in srgb, var(--paper) 11%, transparent);
  --stripe: color-mix(in srgb, var(--ink) 6%, transparent);
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0H160V9C140 19 122 3 100 11S58 22 40 10S12 4 0 12Z'/%3E%3C/svg%3E");
}
/* hero: hoja de cuaderno pautada con margen fucsia, que se desvanece hacia la foto */
.hero::before {
  content: ""; position: absolute; inset: 0 0 0 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to right, transparent calc(var(--gutter) * .55), var(--rule-pink) calc(var(--gutter) * .55) calc(var(--gutter) * .55 + 2px), transparent calc(var(--gutter) * .55 + 2px)),
    repeating-linear-gradient(to bottom, transparent 0 41px, var(--rule) 41px 43px);
  -webkit-mask-image: linear-gradient(105deg, var(--solid) 30%, transparent 78%); mask-image: linear-gradient(105deg, var(--solid) 30%, transparent 78%);
}
.hero-grid { position: relative; z-index: 1; }
/* meseta: cuadrícula de cuaderno sobre amarillo (guiño al flyer de Tiffany) */
.plateau {
  background-color: var(--sun);
  background-image: linear-gradient(var(--rule) 1.5px, transparent 1.5px), linear-gradient(90deg, var(--rule) 1.5px, transparent 1.5px);
  background-size: 34px 34px; background-position: -1px -1px;
}
/* secciones negras: pizarra de puntos */
.steps, .book {
  background-image: radial-gradient(var(--chalk) 1.3px, transparent 1.8px);
  background-size: 26px 26px;
}
/* juego: papel rosa con lunares crema */
.game { background-image: radial-gradient(color-mix(in srgb, var(--paper) 55%, transparent) 2px, transparent 2.6px); background-size: 30px 30px; }
/* sobre mí: rayado de rotulador como el bocadillo de la portada */
.about { background-image: repeating-linear-gradient(-38deg, transparent 0 26px, var(--stripe) 26px 31px); }
/* bordes ondulados entre secciones (la sección anterior "gotea" sobre la siguiente) */
#clases { --prev: var(--paper); } #metodo { --prev: var(--sun); } #distintas { --prev: var(--ink); }
#juego { --prev: var(--paper); } #precios { --prev: var(--blush); } #sobre-mi { --prev: var(--paper); }
#alumnos { --prev: var(--pink); } #reservar { --prev: var(--paper); } .foot { --prev: var(--ink); position: relative; }
#clases::before, #metodo::before, #distintas::before, #juego::before, #precios::before, #sobre-mi::before, #alumnos::before, #reservar::before, .foot::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: clamp(14px, 2.2vw, 26px); z-index: 2; pointer-events: none;
  background: var(--prev); -webkit-mask: var(--wave) 0 0 / 160px 100% repeat-x; mask: var(--wave) 0 0 / 160px 100% repeat-x;
}
#metodo::before, #precios::before, #alumnos::before { -webkit-mask-position: 60px 0; mask-position: 60px 0; transform: scaleX(-1); }
.steps > .wrap, .book > .wrap, .about > .wrap, .game > .wrap, .plateau > .wrap { position: relative; z-index: 1; }
/* método: un bocadillo gigante de contorno como marca de agua */
.steps .wm { position: absolute; z-index: 0; right: -4%; top: 8%; width: min(55vw, 640px); height: auto; color: var(--paper); opacity: .07; stroke-width: 2.2; pointer-events: none; }
.book .wm { position: absolute; z-index: 0; left: -6%; top: -4%; width: min(48vw, 520px); height: auto; color: var(--sun); opacity: .1; stroke-width: 2.2; pointer-events: none; }

/* ====== más vida: animación y respuesta ====== */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }
/* entrada del hero */
.js .hero-title > span { animation: lineUp .9s var(--ease-out) both; }
.js .hero-title > span + span { animation-delay: .14s; }
.js .hero-rest { animation: lineUp .9s var(--ease-out) .3s both; }
.js .hero-photo .photo { animation: photoIn 1s var(--ease-out) .1s both; }
.js .hero .blob { animation: blobIn 1.1s var(--ease-out) both, breathe 10s ease-in-out 1.1s infinite; }
@keyframes lineUp { from { opacity: 0; transform: translateY(40px); } }
@keyframes photoIn { from { opacity: 0; transform: translateY(30px) scale(.94) rotate(-3deg); } }
@keyframes blobIn { from { opacity: 0; transform: scale(.6) rotate(-20deg); } }
.hero .photo, .hero .blob, .hero .fl { transition: translate .5s var(--ease-out); }
/* titulares por palabras */
.split .wd { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em .02em .12em; margin: -.14em -.02em -.12em; }
.split .wi { display: inline-block; transform: translateY(110%) rotate(4deg); transition: transform .8s var(--ease-out); }
.split.is-on .wi { transform: none; }
.js .h2.split.rv { opacity: 1; transform: none; }
/* pegatinas: entrada escalonada e inclinación 3D */
.js .sticker.rv { transform: translateY(40px) rotate(-5deg) scale(.95); }
.js .sticker.rv.is-on { transform: var(--rest, none); }
.st-1 { --rest: rotate(-1deg); } .st-2 { --rest: rotate(1.2deg); } .st-3 { --rest: rotate(-.6deg); } .st-4 { --rest: rotate(.8deg); }
.diff-grid .sticker:nth-child(2) { transition-delay: .08s; } .diff-grid .sticker:nth-child(3) { transition-delay: .16s; } .diff-grid .sticker:nth-child(4) { transition-delay: .24s; }
.sticker.tilting, .plan.tilting { transform: perspective(700px) rotateX(var(--tx)) rotateY(var(--ty)) translateY(-4px) !important; box-shadow: 9px 9px 0 var(--ink); transition: transform .12s linear, box-shadow .2s; transition-delay: 0s !important; }
.sticker .doo { transition: transform .5s var(--ease); }
.sticker:hover .doo, .sticker.tap .doo { transform: rotate(-14deg) scale(1.15); }
.tap { animation: tapPop .35s var(--ease); }
@keyframes tapPop { 40% { scale: .96; } }
.js .plans .plan.rv:nth-child(2) { transition-delay: .08s; } .js .plans .plan.rv:nth-child(3) { transition-delay: .16s; } .js .plans .plan.rv:nth-child(4) { transition-delay: .24s; }
.plan.star .starnote { animation: wiggle 2.8s ease-in-out infinite; }
@keyframes wiggle { 0%, 82%, 100% { rotate: 0deg; } 86% { rotate: -6deg; } 90% { rotate: 5deg; } 94% { rotate: -3deg; } }
/* botones: magnéticos (translate) y destello al pulsar */
.btn, .hand-link { transition: transform .25s var(--ease), box-shadow .2s, translate .35s var(--ease-out), background .2s; }
.btn::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: var(--sun); opacity: 0; transform: scale(.6); pointer-events: none; }
.btn:active::before { animation: flash .4s ease-out; }
@keyframes flash { 0% { opacity: .55; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.35); } }
/* celebración */
.conf { position: fixed; z-index: 140; width: 14px; height: 11px; border-radius: 6px 6px 6px 1px; pointer-events: none; border: 1.5px solid var(--ink); animation: conf .95s var(--ease-out) forwards; }
@keyframes conf { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)) scale(1); opacity: 0; } }
/* barra de lectura */
.readbar { position: absolute; left: 0; right: 0; bottom: -2px; height: 4px; background: var(--pink); transform: scaleX(0); transform-origin: left; border-radius: 0 4px 4px 0; pointer-events: none; }
/* juego y ficha */
.slot-line .chip { animation: chipIn .35s var(--ease) both; }
.bank .chip { animation: chipIn .3s var(--ease) both; }
@keyframes chipIn { from { transform: scale(.6) rotate(-8deg); opacity: 0; } }
.chip.ok { animation: okJump .5s var(--ease) both; }
.slot-line .chip.ok:nth-child(2) { animation-delay: .05s; } .slot-line .chip.ok:nth-child(3) { animation-delay: .1s; } .slot-line .chip.ok:nth-child(4) { animation-delay: .15s; } .slot-line .chip.ok:nth-child(5) { animation-delay: .2s; } .slot-line .chip.ok:nth-child(6) { animation-delay: .25s; } .slot-line .chip.ok:nth-child(7) { animation-delay: .3s; }
@keyframes okJump { 40% { transform: translateY(-10px) rotate(-4deg); } }
.feed .bub { animation: rise .4s var(--ease) both; }
.opt[aria-pressed="true"] { animation: optPop .3s var(--ease); }
@keyframes optPop { 50% { scale: 1.08; } }
.f-prog i.on:last-of-type, .f-prog i.on + i:not(.on) { transition: background .25s; }
.f-prog i.on { animation: pip .45s var(--ease) both; }
@keyframes pip { 50% { transform: translateY(-4px) scale(1.15); } }
.echo { animation: rise .45s var(--ease) both; }
/* cabecera: el logo "habla" al pasar */
.logo:hover .logo-t .dots i { animation-iteration-count: infinite; }
.logo-s { transition: transform .3s var(--ease); }
.logo:hover .logo-s { transform: rotate(2deg) scale(1.05); }
.facts li .doo { transition: transform .6s var(--ease); }
.facts li:hover .doo { transform: rotate(180deg) scale(1.2); }
@media (prefers-reduced-motion: reduce) {
  .split .wi { transform: none; }
  .js .sticker.rv { transform: var(--rest, none); }
  .readbar, .conf { display: none; }
}


/* ====== pantalla de carga ====== */
.loader { display: none; }
.is-loading { overflow: hidden; }
.is-loading .loader {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; align-content: center; gap: 1.1rem;
  background: var(--paper); clip-path: circle(150% at 50% 50%); transition: clip-path .65s cubic-bezier(.7, 0, .2, 1);
}
.loader::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0 41px, var(--rule) 41px 43px); pointer-events: none; }
.loader.out { clip-path: circle(0% at 50% 46%); }
.ld-stage { position: relative; width: 15rem; height: 8.5rem; }
.ld-b { position: absolute; display: inline-flex; align-items: center; gap: .2em; font-family: var(--f-display); font-weight: 800; font-stretch: 82%; letter-spacing: -.03em; padding: .2em .55em .28em; border-radius: 1.2rem; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); opacity: 0; transform: scale(.2) rotate(-20deg); animation: ldPop .55s var(--ease) forwards; }
.ld-b::after { content: ""; position: absolute; width: 16px; height: 13px; background: inherit; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); bottom: -9px; transform: skewX(-25deg); }
.ld-b1 { background: var(--pink); font-size: 2.6rem; left: 0; top: .6rem; --r: -8deg; }
.ld-b1::after { left: 22px; }
.ld-b2 { background: var(--sun); font-size: 1.9rem; left: 7.6rem; top: 0; --r: 6deg; animation-delay: .16s; }
.ld-b2::after { left: 18px; }
.ld-b3 { background: var(--blush); font-size: 1.7rem; left: 5.2rem; top: 4.6rem; --r: -3deg; animation-delay: .32s; }
.ld-b3::after { right: 22px; transform: skewX(25deg); border-left: 0; border-right: 3px solid var(--ink); }
.ld-b3 .dots { display: inline-flex; height: auto; margin-left: .1em; }
.ld-b3 .dots i { width: .22em; height: .22em; }
@keyframes ldPop { 0% { opacity: 0; transform: scale(.2) rotate(-20deg); } 60% { opacity: 1; transform: scale(1.12) rotate(var(--r)); } 100% { opacity: 1; transform: scale(1) rotate(var(--r)); } }
.ld-word { font-family: var(--f-display); font-weight: 800; font-stretch: 82%; letter-spacing: -.035em; font-size: clamp(2.4rem, 9vw, 3.6rem); line-height: 1; display: flex; align-items: flex-end; clip-path: inset(0 100% 0 0); animation: ldWipe .6s var(--ease-out) .55s forwards; }
.ld-dots { display: inline-flex; gap: .08em; margin: 0 0 .1em .08em; }
.ld-dots i { width: .16em; height: .16em; border-radius: 50%; background: var(--pink); opacity: 0; animation: ldDot .25s ease-out forwards; }
.ld-dots i:nth-child(1) { animation-delay: 1s; } .ld-dots i:nth-child(2) { animation-delay: 1.12s; } .ld-dots i:nth-child(3) { animation-delay: 1.24s; }
@keyframes ldDot { from { opacity: 0; transform: translateY(-10px) scale(.4); } to { opacity: 1; transform: none; } }
@keyframes ldWipe { to { clip-path: inset(0 -10% 0 0); } }
.ld-sub { font-family: var(--f-hand); font-size: clamp(1.3rem, 4.5vw, 1.7rem); position: relative; padding: 0 .3em; clip-path: inset(0 100% 0 0); animation: ldWipe .7s ease-out .95s forwards; }
.ld-sub::after { content: ""; position: absolute; left: 0; right: 0; bottom: .05em; height: .32em; z-index: -1; background: var(--sun); border-radius: .2em; transform: scaleX(0); transform-origin: left; animation: ldLine .5s var(--ease-out) 1.25s forwards; }
@keyframes ldLine { to { transform: scaleX(1); } }
.loader.out .ld-stage, .loader.out .ld-word, .loader.out .ld-sub { transition: transform .5s cubic-bezier(.7, 0, .2, 1); transform: scale(.85); }
/* el hero espera a que termine la intro */
.is-loading .hero *, .is-loading .hero { animation-play-state: paused !important; }
@media (min-width: 720px) {
  .ld-stage { scale: 1.55; margin-bottom: 3rem; }
  .ld-word { font-size: clamp(4rem, 6vw, 5.6rem); }
  .ld-sub { font-size: 2rem; }
}


/* ====== vídeo de Tiffany ====== */
.vid { margin-top: 1.8rem; max-width: 26rem; }
.vid video { width: 100%; border: 3px solid var(--ink); border-radius: 1.6rem 1.6rem 1.6rem .3rem; box-shadow: var(--shadow); background: var(--ink); }
.vid figcaption { margin-top: .6rem; font-size: 1.4rem; }
.vid-soon { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.3rem; background: var(--paper); border: 3px solid var(--ink); border-radius: 1.6rem 1.6rem 1.6rem .3rem; box-shadow: var(--shadow); }
.vid-play { flex: none; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--sun); border: 3px solid var(--ink); position: relative; animation: pulse 2.2s ease-in-out infinite; }
.vid-play::after { content: ""; position: absolute; left: 54%; top: 50%; translate: -50% -50%; border-left: 15px solid var(--ink); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.vid-t { display: grid; gap: .1rem; flex: 1; }
.vid-t b { font-size: 1.45rem; font-weight: 400; line-height: 1.1; }
.vid-t small { font-weight: 700; color: var(--ink-soft); }
.vid-soon .dots { display: inline-flex; color: var(--pink); }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sun) 70%, transparent); } 50% { box-shadow: 0 0 0 12px transparent; } }
/* ====== pie: legales ====== */
.foot-legal { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin-bottom: .4rem; }
.foot-legal a { font-weight: 700; font-size: .95rem; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (min-width: 800px) { .foot-legal { justify-content: flex-end; } }
/* ====== página legal ====== */
.legal-body { max-width: 760px; padding-block: 3rem 5rem; }
.legal-body h2.display { font-size: clamp(2rem, 5vw, 3rem); margin-top: 3rem; scroll-margin-top: 6rem; }
.legal-body section { display: grid; gap: .9rem; margin-top: 1.2rem; }
.legal-body ul { list-style: disc; padding-left: 1.3rem; display: grid; gap: .3rem; }
.legal-note { font-family: var(--f-hand); font-size: 1.3rem; background: var(--sun); display: inline-block; padding: .2rem .8rem; border-radius: .6rem; margin-bottom: 1.5rem; }
mark.ph { background: var(--blush); color: var(--ink); padding: 0 .3em; border-radius: .3em; }
.legal .top .btn { min-height: 2.75rem; padding: .35rem 1.1rem; }


/* ====== auditoría: rendimiento, accesibilidad y UX ====== */
.offscreen *, .offscreen::before, .offscreen::after { animation-play-state: paused !important; }
.top.hide { transform: translateY(-110%); }
.was::before { content: attr(data-was); }
.chip { min-height: 2.75rem; }
.foot-legal a { display: inline-block; padding: .65rem .1rem; }
.nav a[aria-current]:not(.btn)::after { transform: scaleX(1); }
.reviews { padding-block: clamp(3.5rem, 8vw, 6rem); }
.f-body .tz { margin-top: .2rem; }


/* ====== ronda 2: nivel, clases, credenciales, reseñas, falsos amigos ====== */
/* selector de nivel (dentro de la meseta) */
.levels { position: relative; z-index: 1; margin-top: clamp(2.5rem, 6vw, 4rem); display: grid; gap: 1rem; }
.lvl-q { font-size: clamp(1.7rem, 4vw, 2.4rem); }
.lvl-opts { display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); }
.lvl { text-align: left; display: grid; gap: .1rem; padding: .9rem 1.2rem; background: var(--paper); border: 3px solid var(--ink); border-radius: 1.4rem 1.4rem 1.4rem .3rem; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), background .2s, box-shadow .2s; min-height: 3.5rem; }
.lvl b { font-family: var(--f-display); font-weight: 800; font-stretch: 82%; font-size: 1.55rem; letter-spacing: -.02em; line-height: 1.05; }
.lvl small { font-weight: 600; font-size: .95rem; color: var(--ink-soft); }
.lvl:hover { transform: translate(-1px, -2px) rotate(-1deg); }
.lvl[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: 0 0 0 var(--ink); transform: translate(3px, 3px); }
.lvl[aria-pressed="true"] small { color: var(--sun); }
.lvl-r { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem; margin-top: .6rem; }
.lvl-r .bub { max-width: 34rem; font-size: 1.1rem; }
.lvl-r.pop { animation: rise .45s var(--ease) both; }
@media (min-width: 760px) { .lvl-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* así son las clases */
.classes { background: var(--paper); overflow: hidden; }
.classes-grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
.motto { font-size: clamp(1.8rem, 4.5vw, 2.8rem); margin-top: 1.2rem; background: linear-gradient(var(--sun), var(--sun)) 0 92% / 100% .38em no-repeat; display: inline; padding-inline: .1em; }
.pts { display: grid; gap: 1rem; margin-top: 2.2rem; max-width: 32rem; }
.pts li { display: flex; gap: .8rem; align-items: flex-start; font-weight: 600; font-size: 1.12rem; }
.pts .doo { flex: none; width: 1.6rem; height: 1.6rem; color: var(--pink); margin-top: .1rem; }
.clip { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; width: 100%; border: 3px solid var(--ink); border-radius: 1.8rem 1.8rem 1.8rem .4rem; box-shadow: 8px 8px 0 var(--pink); overflow: hidden; background: var(--ink); margin: 0; }
.clip video { width: 100%; height: 100%; object-fit: cover; }
.clip-soon { background-color: var(--ink); background-image: radial-gradient(var(--chalk) 1.3px, transparent 1.8px); background-size: 22px 22px; color: var(--paper); gap: 1rem; align-content: center; justify-items: center; text-align: center; }
.clip-soon .vid-play { width: 4.6rem; height: 4.6rem; }
.clip-t { display: grid; gap: .15rem; }
.clip-t b { font-size: clamp(1.5rem, 3.5vw, 2.1rem); font-weight: 400; line-height: 1.1; }
.clip-t small { font-weight: 700; color: var(--sun); }
@media (min-width: 900px) { .classes-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 4rem; } }

/* credenciales en «Sobre mí» */
.creds { display: grid; gap: .7rem; margin-top: 1.8rem; max-width: 30rem; }
.creds li { display: grid; gap: .05rem; padding: .7rem 1.1rem; background: var(--paper); border: 3px solid var(--ink); border-radius: 1.2rem; box-shadow: var(--shadow-sm); }
.creds li:nth-child(2) { rotate: .8deg; } .creds li:nth-child(3) { rotate: -.6deg; }
.creds b { font-family: var(--f-display); font-weight: 800; font-stretch: 85%; font-size: 1.3rem; letter-spacing: -.01em; line-height: 1.1; }
.creds small { font-weight: 600; color: var(--ink-soft); font-size: .95rem; }

/* reseñas provisionales */
.prov { display: inline-block; margin-top: 1.4rem; font-size: 1.35rem; background: var(--sun); border: 2.5px dashed var(--ink); border-radius: .8rem; padding: .15rem .9rem; rotate: -1.5deg; }
.rv-grid { display: grid; gap: 1.4rem; margin-top: 2rem; grid-template-columns: minmax(0, 1fr); }
.rv-card { display: grid; gap: 1rem; align-content: space-between; padding: 1.4rem; border: 3px dashed var(--ink); border-radius: 1.6rem 1.6rem 1.6rem .3rem; background: color-mix(in srgb, var(--blush) 30%, var(--paper)); min-height: 11rem; }
.rv-q { font-family: var(--f-hand); font-size: 1.5rem; line-height: 1.2; color: var(--ink-soft); }
.rv-w { display: flex; gap: .6rem; align-items: center; font-weight: 700; font-size: .95rem; }
.av { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 2.5px dashed var(--ink); background: var(--paper); }
.rv-2 { rotate: .6deg; } .rv-3 { rotate: -.5deg; }
@media (min-width: 800px) { .rv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* falsos amigos */
.ff-pick { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.6rem; }
.ff-pick .hand { font-size: 1.4rem; margin-right: .3rem; }
.ff-w { margin-top: 1.8rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; }
.ff-w .hand { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.ff-w b { font-size: clamp(2.6rem, 8vw, 4.6rem); line-height: 1; text-transform: uppercase; }
.ff-o { font-size: 1.15rem; }
.ff-note { display: block; margin-top: 1.4rem; font-weight: 600; color: var(--ink-soft); }

/* legal: campos pendientes bien visibles */
mark.ph { background: var(--sun); outline: 2px dashed var(--ink); outline-offset: 1px; font-weight: 700; }
[hidden] { display: none !important; }


/* ====== ronda 3: fotos reales y textos de Tiffany ====== */
/* hero: recorte apaisado con transparencia + mancha fucsia propia */
.hero-photo { width: min(88vw, 440px); }
.hero-photo .photo { width: 100%; height: auto; max-height: none; -webkit-mask-image: none; mask-image: none; filter: drop-shadow(5px 5px 0 var(--ink)); }
.hero .blob-pink { position: absolute; z-index: 0; width: 104%; height: auto; left: -2%; top: 2%; color: var(--pink); rotate: 12deg; animation: breathe 11s ease-in-out infinite; }
.hero .blob { width: 120%; left: -30%; top: 24%; }
@media (min-width: 720px) {
  .hero-photo { width: min(100%, 560px); justify-self: end; margin: 0 1% 0 0; }
  .hero-photo .photo { height: auto; }
  .hero .blob-pink { width: 98%; left: 4%; top: -2%; }
  .hero .blob { width: 110%; left: -26%; top: 30%; }
}
@media (max-width: 719px) { .hero-photo .photo { filter: drop-shadow(4px 4px 0 var(--ink)); } }
.hero .sparks { left: 62%; top: -6%; }
@media (min-width: 720px) { .fl-1 { left: -2%; top: 10%; } .fl-2 { left: -12%; top: 56%; } .fl-3 { right: -2%; top: 76%; } }
@media (min-width: 1100px) { .fl-1 { left: -8%; top: 8%; } .fl-2 { left: -16%; top: 56%; } .fl-3 { right: -4%; top: 76%; } }

/* clases cocinadas con amor */
.classes .tagline { font-size: clamp(1.5rem, 3.4vw, 2.1rem); color: var(--pink); margin-top: .9rem; line-height: 1.1; }
.classes .motto { display: block; margin-top: .6rem; background: none; padding: 0; font-size: clamp(1.4rem, 3vw, 1.8rem); color: var(--ink-soft); }
.talk { display: grid; gap: 1.6rem; margin-top: 2rem; }
.talk .bub { display: block; font-size: 1.05rem; font-weight: 550; line-height: 1.5; padding: 1rem 1.3rem; max-width: 38rem; }
.talk .me { justify-self: end; }
.bub-line-solid { border: 2.5px solid var(--ink); box-shadow: var(--shadow-sm); }
.classes-media { display: grid; gap: 2rem; align-content: start; }
.polaroid { margin: 0; padding: .6rem .6rem 1.8rem; background: var(--paper); border: 3px solid var(--ink); border-radius: .6rem; box-shadow: 7px 7px 0 var(--ink); rotate: 2deg; position: relative; }
.polaroid::before { content: ""; position: absolute; left: 50%; top: -.9rem; translate: -50% 0; width: 6.5rem; height: 1.7rem; background: color-mix(in srgb, var(--sun) 82%, transparent); rotate: -3deg; border-radius: .2rem; }
.polaroid img { width: 100%; height: auto; border-radius: .25rem; }
.classes-grid { align-items: start; }
@media (min-width: 900px) { .classes-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 4rem; } .classes-media { position: sticky; top: 6.5rem; } }

/* tras las cámaras */
.behind { background-color: var(--sun); background-image: linear-gradient(var(--rule) 1.5px, transparent 1.5px), linear-gradient(90deg, var(--rule) 1.5px, transparent 1.5px); background-size: 34px 34px; overflow: hidden; }
.behind-grid { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
.behind .copy { font-size: 1.12rem; font-weight: 550; max-width: 36rem; margin-top: 1.1rem; }
.behind-pics { position: relative; min-height: 28rem; justify-self: center; width: min(100%, 24rem); }
.pola { margin: 0; padding: .5rem .5rem 1.5rem; background: var(--paper); border: 3px solid var(--ink); border-radius: .5rem; box-shadow: 6px 6px 0 var(--ink); position: absolute; }
.pola img { width: 100%; height: auto; border-radius: .2rem; }
.pola figcaption { position: absolute; left: .7rem; right: .7rem; bottom: .15rem; font-size: 1.1rem; text-align: center; line-height: 1.1; }
.pola-1 { width: 62%; left: 0; top: 0; rotate: -4deg; z-index: 1; }
.pola-2 { width: 54%; right: 0; bottom: 0; rotate: 5deg; z-index: 2; }
.chips-s { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.chips-s li { padding: .4rem 1rem; border: 2.5px solid var(--ink); border-radius: 99px; font-weight: 700; font-size: .98rem; box-shadow: 3px 3px 0 var(--ink); background: var(--paper); }
.chips-s li:nth-child(2) { background: var(--pink); rotate: -1.5deg; } .chips-s li:nth-child(3) { background: var(--blush); rotate: 1deg; } .chips-s li:nth-child(4) { rotate: -1deg; }
.behind-go { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 2rem; }
.behind .sign { font-size: 2rem; display: inline-flex; align-items: center; gap: .4rem; }
.behind .sign .doo { color: var(--pink); width: 1.6rem; height: 1.6rem; }
@media (min-width: 900px) { .behind-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 5rem; } .behind-pics { min-height: 34rem; width: min(100%, 28rem); } }

/* ondas de las secciones nuevas */
#asi-son { --prev: var(--ink); } #tras-camaras { --prev: var(--pink); } #alumnos { --prev: var(--sun); }
#asi-son::before, #tras-camaras::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: clamp(14px, 2.2vw, 26px); z-index: 2; pointer-events: none; background: var(--prev); -webkit-mask: var(--wave) 0 0 / 160px 100% repeat-x; mask: var(--wave) 0 0 / 160px 100% repeat-x; }
#tras-camaras { position: relative; } #tras-camaras > .wrap { position: relative; z-index: 1; }
/* avatar de la ficha con el retrato real */
.avatar { background: var(--pink) url('img/avatar.webp') center / cover no-repeat; }
.hero-photo .photo { -webkit-mask-image: linear-gradient(to right, transparent 0, var(--solid) 16%); mask-image: linear-gradient(to right, transparent 0, var(--solid) 16%); }


/* ====== ronda 3: maximalismo con orden ====== */
.sec { overflow-x: clip; }
/* burbujas «bla bla bla» por toda la página */
.deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.db { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; rotate: var(--r); isolation: isolate; font-family: var(--f-display); font-weight: 800; font-stretch: 82%; font-size: clamp(1.1rem, 2.6vw, 2.2rem); line-height: 1; padding: .4em .8em .5em; border: 3px solid var(--ink); border-radius: 1.3em; box-shadow: 4px 4px 0 var(--ink); white-space: nowrap; animation: dbob 7s ease-in-out infinite; opacity: .22; }
.db::after { content: ""; position: absolute; left: 22%; bottom: -11px; width: 18px; height: 14px; background: inherit; clip-path: polygon(0 0, 100% 0, 18% 100%); z-index: -1; }
.db:nth-child(2) { animation-delay: -2.3s; } .db:nth-child(3) { animation-delay: -4.6s; }
@keyframes dbob { 0%, 100% { translate: -50% -50%; } 50% { translate: -50% calc(-50% - 10px); } }
.db-pink { background: var(--pink); color: var(--ink); } .db-sun { background: var(--sun); color: var(--ink); } .db-blush { background: var(--blush); color: var(--ink); }
.db-ink { background: var(--ink); color: var(--paper); } .db-paper { background: var(--paper); color: var(--ink); }
.sec > .wrap { position: relative; z-index: 1; }
@media (min-width: 900px) { .db { opacity: 1; } }
/* espiral de cuaderno en el hero */
.hero::after { content: ""; display: none; position: absolute; left: 0; top: 0; bottom: 0; width: 34px; z-index: 1; pointer-events: none; background: radial-gradient(circle at 17px 50%, transparent 0 5px, var(--ink) 5.5px 8px, transparent 8.5px) 0 0 / 34px 46px repeat-y; }
@media (min-width: 900px) { .hero::after { display: block; } }
/* botón «habla conmigo» al final de cada apartado */
.sec-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.sec-cta-n { font-size: 1.4rem; display: inline-flex; align-items: center; gap: .4rem; }
.sec-cta-n .doo { width: 2.2rem; height: 1.6rem; stroke-width: 6; rotate: 180deg; scale: 1 -1; }

/* ====== estantería de precios ====== */
.js .plans { display: none; }
.shelf { margin-top: 3rem; position: relative; }
.books { display: flex; align-items: flex-end; justify-content: center; gap: .55rem; min-height: 19.5rem; padding-inline: 1rem; position: relative; z-index: 2; }
.vol { position: relative; width: clamp(4rem, 11vw, 6.2rem); height: var(--h); padding: .9rem .1rem .8rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; border: 3px solid var(--ink); border-radius: .55rem .55rem .15rem .15rem; box-shadow: 5px 0 0 var(--ink); font-family: var(--f-display); color: var(--ink); background: var(--bg); transform-origin: bottom center; transition: transform .45s var(--ease), box-shadow .25s; cursor: pointer; }
.vol::before { content: ""; position: absolute; left: 0; right: 0; top: 2.2rem; height: 2.5rem; border-block: 3px solid var(--ink); background: color-mix(in srgb, var(--ink) 10%, transparent); pointer-events: none; }
.bk-n { writing-mode: vertical-rl; rotate: 180deg; white-space: nowrap; font-weight: 800; font-stretch: 82%; font-size: clamp(1.2rem, 3.2vw, 1.55rem); letter-spacing: -.01em; line-height: 1; margin-top: 3.2rem; }
.bk-p { font-weight: 800; font-size: 1.05rem; position: relative; z-index: 1; }
.vol:hover { transform: translateY(-10px) rotate(-2deg); }
.vol[aria-pressed="true"] { transform: translateY(-22px) rotate(-4deg) scale(1.04); box-shadow: 8px 8px 0 var(--ink); z-index: 3; }
.vol[aria-pressed="true"] ~ .vol { transform: translateX(8px); }
.bk-1 { --h: 15rem; --bg: var(--paper); } .bk-2 { --h: 14rem; --bg: var(--sun); } .bk-3 { --h: 17.2rem; --bg: var(--pink); } .bk-4 { --h: 19rem; --bg: var(--blush); }
.bk-star { position: absolute; top: -1.6rem; left: 50%; translate: -50% 0; font-family: var(--f-hand); font-size: 1.15rem; background: var(--sun); border: 2.5px solid var(--ink); border-radius: 99px; padding: 0 .6rem; white-space: nowrap; rotate: 4deg; font-weight: 400; z-index: 4; }
.shelf-cup { position: relative; align-self: flex-end; width: 4.4rem; height: 4.4rem; margin-left: .8rem; color: var(--ink); stroke-width: 5; }
.shelf-board { position: relative; z-index: 1; height: 1.2rem; margin-top: -.2rem; background: var(--ink); border-radius: .3rem; box-shadow: 0 10px 0 color-mix(in srgb, var(--ink) 22%, transparent); }
.bk-detail { position: relative; margin: 2.6rem auto 0; max-width: 36rem; display: grid; gap: .4rem; justify-items: start; padding: 1.5rem 1.7rem; background: var(--paper); border: 3px solid var(--ink); border-radius: 1.8rem; box-shadow: var(--shadow); }
.bk-detail::before { content: ""; position: absolute; top: -12px; left: 0; width: 22px; height: 12px; background: var(--ink); clip-path: polygon(50% 0, 100% 100%, 0 100%); translate: calc(var(--tail, 50%) - 50%) 0; transition: translate .4s var(--ease); }
.bk-d-n { font-weight: 800; font-size: 1.15rem; }
.bk-d-p { font-family: var(--f-display); font-weight: 800; font-stretch: 80%; font-size: clamp(4rem, 12vw, 6rem); line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.bk-d-p sup { font-size: .4em; letter-spacing: 0; }
.bk-d-l { display: grid; gap: .1rem; font-weight: 600; }
.bk-d-per { font-family: var(--f-hand); font-size: 1.5rem; min-height: 1.6rem; }
.bk-detail .btn { margin-top: .6rem; }
.bk-detail.pop { animation: rise .4s var(--ease) both; }
@media (max-width: 479px) { .books { gap: .3rem; } .shelf-cup { display: none; } }

/* ====== ficha estilo cuaderno ====== */
.ficha { background-color: var(--paper); background-image: repeating-linear-gradient(to bottom, transparent 0 35px, var(--rule) 35px 37px); overflow: hidden; }
.ficha::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 34px; z-index: 5; pointer-events: none; background: radial-gradient(circle at 17px 50%, transparent 0 5px, var(--ink) 5.5px 8px, transparent 8.5px) 0 0 / 34px 46px repeat-y; }
.ficha .f-wrap { padding-left: 34px; }
.f-head { background: transparent; border-bottom: 0; padding: 1.2rem 1.2rem .4rem 1.4rem; align-items: flex-start; }
.f-title { font-family: var(--f-hand); font-weight: 400; font-stretch: 100%; font-size: clamp(1.8rem, 5vw, 2.4rem); letter-spacing: 0; line-height: 1.05; }
.f-prog { margin-top: .5rem; }
.f-prog i { width: 1.9rem; height: .55rem; border-radius: 99px; border: 2px solid var(--ink); }
.f-body { padding: 1rem 1.2rem 1.6rem 3.6rem; background: linear-gradient(to right, transparent 2.6rem, var(--rule-pink) 2.6rem calc(2.6rem + 3px), transparent calc(2.6rem + 3px)); gap: 2rem; }
.f-foot { background: color-mix(in srgb, var(--paper) 94%, transparent); }
.q { gap: .5rem; }
.q-l { display: block; }
.q-l .avatar { display: none; }
.q-l .bub { background: none; box-shadow: none; border: 0; padding: 0; font-family: var(--f-hand); font-size: clamp(1.4rem, 3.8vw, 1.7rem); font-weight: 400; line-height: 1.15; display: block; }
.q-l .bub::after { display: none; }
.q-l .bub-pink { display: inline-block; background: var(--sun); padding: .25rem .9rem; border-radius: .5rem; rotate: -1deg; font-size: 1.35rem; }
.q-a { align-self: flex-start; justify-content: flex-start; width: 100%; }
.in { background: transparent; border: 0; border-bottom: 3px solid var(--ink); border-radius: 0; padding: .45rem .15rem; font-size: 1.1rem; max-width: 28rem; }
.in:focus-visible { background: color-mix(in srgb, var(--sun) 35%, transparent); outline-offset: 4px; }
textarea.in { border: 3px solid var(--ink); border-radius: .8rem; padding: .6rem .8rem; background: color-mix(in srgb, var(--paper) 80%, var(--blush)); }
.opt { border-radius: 99px; box-shadow: 2px 2px 0 var(--ink); background: var(--paper); }
.opt[aria-pressed="true"] { background: var(--pink); box-shadow: 0 0 0 var(--ink); translate: 2px 2px; }
.q-err { align-self: flex-start; }
.cal-d { box-shadow: 2px 2px 0 var(--ink); }
.tz { margin-top: .4rem; }

.bk-fav { position: absolute; top: -1.1rem; right: 1.2rem; font-family: var(--f-hand); font-size: 1.4rem; background: var(--sun); border: 2.5px solid var(--ink); border-radius: 99px; padding: .05rem .9rem; rotate: 4deg; }

.f-sub { font-size: 1.25rem; color: var(--ink-soft); margin-top: .1rem; line-height: 1.1; }
.fl-2 { max-width: 12.5rem; white-space: normal; }
@media (min-width: 720px) { .fl-2 { left: -2%; top: 62%; max-width: 13rem; } }
@media (min-width: 1100px) { .fl-2 { left: -6%; top: 60%; max-width: 14rem; } }
@media (max-width: 719px) {
  .fl-1 { left: 1%; top: -3%; } .fl-2 { left: 2%; top: 64%; max-width: 10.5rem; font-size: .86rem; padding: .5rem .8rem; } .fl-3 { right: 1%; top: 84%; font-size: .86rem; }
}


/* ====== ronda 4: fondos por capas, sin zonas vacías ====== */
:root {
  --chalk-b: color-mix(in srgb, var(--paper) 18%, transparent);
  --tile-bub: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130' viewBox='0 0 130 130' fill='none' stroke='%23FF2D55' stroke-opacity='.3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 30c0-8 6-12 22-12s24 3 24 16-8 16-22 16H30l-10 12 2-12c-6-2-8-8-8-20z'/%3E%3Cpath d='M72 88c0-7 5-10 18-10s20 3 20 13-7 13-18 13H86l-8 10 2-10c-5-1-8-6-8-16z'/%3E%3Ccircle cx='96' cy='30' r='3'/%3E%3Ccircle cx='106' cy='30' r='3'/%3E%3Ccircle cx='116' cy='30' r='3'/%3E%3C/svg%3E");
}
/* scroll suave (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
html:has(dialog[open]) { overflow: hidden; }

/* patrones por sección */
.about { background-image: radial-gradient(color-mix(in srgb, var(--ink) 16%, transparent) 2px, transparent 2.6px), repeating-linear-gradient(-38deg, transparent 0 26px, var(--stripe) 26px 31px); background-size: 30px 30px, auto; }
.plateau { background-image: radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--paper) 55%, transparent) 0, transparent 30%), linear-gradient(var(--rule) 1.5px, transparent 1.5px), linear-gradient(90deg, var(--rule) 1.5px, transparent 1.5px); background-size: auto, 34px 34px, 34px 34px; }
.steps { background-image: radial-gradient(var(--chalk) 1.3px, transparent 1.8px), linear-gradient(112deg, transparent 0 38%, color-mix(in srgb, var(--paper) 5%, transparent) 38% 46%, transparent 46% 70%, color-mix(in srgb, var(--paper) 4%, transparent) 70% 76%, transparent 76%); background-size: 26px 26px, auto; }
.classes { background-color: var(--paper); background-image: linear-gradient(to right, transparent 6.5%, var(--rule-pink) 6.5% calc(6.5% + 2px), transparent calc(6.5% + 2px)), repeating-linear-gradient(to bottom, transparent 0 41px, var(--rule) 41px 43px); }
.behind { background-image: radial-gradient(circle at 10% 92%, color-mix(in srgb, var(--pink) 24%, transparent) 0 13rem, transparent 13rem), radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--paper) 50%, transparent) 0 9rem, transparent 9rem), linear-gradient(var(--rule) 1.5px, transparent 1.5px), linear-gradient(90deg, var(--rule) 1.5px, transparent 1.5px); background-size: auto, auto, 34px 34px, 34px 34px; }
#distintas { background-color: var(--paper); background-image: radial-gradient(color-mix(in srgb, var(--pink) 32%, transparent) 3.5px, transparent 4px), radial-gradient(color-mix(in srgb, var(--sun) 70%, transparent) 3.5px, transparent 4px); background-size: 38px 38px; background-position: 0 0, 19px 19px; }
#precios { background-color: var(--paper); background-image: linear-gradient(to top, color-mix(in srgb, var(--ink) 9%, transparent) 0 11%, transparent 11%), repeating-linear-gradient(90deg, color-mix(in srgb, var(--blush) 30%, transparent) 0 44px, transparent 44px 88px); }
.game { background-image: radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--paper) 45%, transparent) 0 11rem, transparent 11rem), radial-gradient(color-mix(in srgb, var(--paper) 55%, transparent) 2px, transparent 2.6px); background-size: auto, 30px 30px; }
.reviews { background-color: var(--paper); background-image: var(--tile-bub); background-size: 130px 130px; }
.book { background-image: radial-gradient(circle at 18% 86%, color-mix(in srgb, var(--pink) 26%, transparent) 0, transparent 38%), radial-gradient(circle at 90% 6%, color-mix(in srgb, var(--sun) 16%, transparent) 0, transparent 30%), radial-gradient(var(--chalk) 1.3px, transparent 1.8px); background-size: auto, auto, 26px 26px; }
.foot { background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px); background-size: 30px 30px; position: relative; }
.foot > .wrap { position: relative; z-index: 1; }

/* marca de agua de cada sección + marco de tiza */
.sec[data-wm]::after { content: attr(data-wm); position: absolute; right: -1vw; bottom: -.08em; z-index: 0; pointer-events: none; font-family: var(--f-display); font-weight: 800; font-stretch: 82%; font-size: clamp(9rem, 26vw, 24rem); line-height: .78; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 3px var(--wm-c, color-mix(in srgb, var(--ink) 11%, transparent)); rotate: -5deg; white-space: nowrap; translate: var(--wmx, 0) 0; }
.on-dark[data-wm] { --wm-c: color-mix(in srgb, var(--paper) 13%, transparent); }
.about[data-wm] { --wm-c: color-mix(in srgb, var(--ink) 18%, transparent); }
.chalk { position: absolute; inset: 1rem; border: 3px dashed var(--chalk-b); border-radius: 1.8rem; pointer-events: none; z-index: 0; }
@media (min-width: 900px) { .chalk { inset: 1.6rem; } }

/* doodles y recortes de papel como decoración */
.dd { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; rotate: var(--r); width: calc(4.2rem * var(--s, 1)); height: calc(4.2rem * var(--s, 1)); stroke-width: 5; opacity: .4; animation: ddspin 10s ease-in-out infinite; }
.dd-ink { color: var(--ink); } .dd-pink { color: var(--pink); } .dd-paper { color: var(--paper); }
.dd-chalk { color: color-mix(in srgb, var(--paper) 62%, transparent); }
@keyframes ddspin { 0%, 100% { rotate: var(--r); } 50% { rotate: calc(var(--r) + 9deg); } }
.cut { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; rotate: var(--r); width: calc(11rem * var(--s, 1)); height: calc(8rem * var(--s, 1)); opacity: .35; clip-path: polygon(0 4%, 6% 0, 14% 5%, 24% 0, 36% 4%, 48% 0, 60% 5%, 72% 0, 84% 4%, 94% 0, 100% 5%, 99% 30%, 100% 55%, 98% 80%, 100% 100%, 0 100%, 2% 70%, 0 40%); }
.cut-sun { background: var(--sun); } .cut-pink { background: var(--pink); } .cut-paper { background: var(--paper); } .cut-blush { background: var(--blush); }
@media (min-width: 900px) { .dd { opacity: .85; } .cut { opacity: .9; } }
.hero > .deco { z-index: 0; }
.hero > .wrap { position: relative; z-index: 1; }

/* parallax con variables (compatible con rotate/transform existentes) */
.polaroid, .pola, .about-photo, .clip { translate: 0 var(--py, 0px); }

/* ====== biblioteca: libro por precio ====== */
.vol-wrap { position: relative; flex: none; width: clamp(4rem, 11vw, 6.2rem); height: var(--h); }
.vol-wrap .vol { width: 100%; height: 100%; }
.gsap-on .vol { transition: none; }
.shelf:not(.gsap-on) .vol-wrap:hover .vol { transform: translateY(-14px) rotate(-3deg); }
.shelf:not(.gsap-on) .vol[aria-pressed="true"] { transform: translateY(-22px) rotate(-4deg) scale(1.04); }
.vol-tip { position: absolute; left: 50%; bottom: calc(100% + 1rem); translate: -50% 0; z-index: 6; background: var(--ink); color: var(--sun); font-family: var(--f-display); font-weight: 800; font-stretch: 82%; font-size: 1.6rem; line-height: 1; padding: .35rem 1rem .45rem; border-radius: 1.1rem; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; box-shadow: 3px 3px 0 var(--pink); }
.vol-tip::after { content: ""; position: absolute; left: 50%; bottom: -9px; translate: -50% 0; width: 18px; height: 10px; background: var(--ink); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.shelf:not(.gsap-on) .vol-wrap:hover .vol-tip { opacity: 1; visibility: visible; }
.shelf-board { background-image: repeating-linear-gradient(90deg, transparent 0 38px, color-mix(in srgb, var(--paper) 12%, transparent) 38px 40px); }
.books { min-height: 22rem; padding-top: 4rem; }
@media (max-width: 719px) { .fl-1 { top: 3%; } }


/* ====== banderas de cómic para el selector de idioma ====== */
:root { --fl-red: var(--pink); --fl-gold: var(--sun); --fl-white: var(--paper); --fl-black: var(--ink); --fl-blue: #2F5DFF; --fl-green: #13A05A; }
.flag { flex: none; width: 2.5rem; height: 2.2rem; color: var(--ink); rotate: -5deg; transition: rotate .3s var(--ease), scale .3s var(--ease); overflow: visible; }
.lang summary { gap: .5rem; padding-inline: .6rem .95rem; }
.lang summary .flag { width: 2.3rem; height: 2rem; }
.lang a { display: flex; align-items: center; gap: .7rem; }
.lang li:nth-child(even) .flag { rotate: 4deg; }
.lang a:hover .flag, .lang a:focus-visible .flag { rotate: 8deg; scale: 1.18; }
.lang a[aria-current] .flag { scale: 1.1; }


/* ====== pasada de gusto (Opus) ====== */
/* «Clases cocinadas»: menos altura, lectura en mosaico */
.cl-top { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
.cl-b1 { display: block; margin-top: 1.8rem; max-width: 36rem; font-size: 1.08rem; font-weight: 550; line-height: 1.55; padding: 1.1rem 1.4rem; }
.cl-talk { display: grid; gap: 1.6rem; margin-top: clamp(2.6rem, 6vw, 4rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
.cl-talk .bub { display: block; font-size: 1.02rem; font-weight: 500; line-height: 1.6; padding: 1.2rem 1.4rem; }
.cl-talk .bub:nth-child(2) { rotate: .6deg; } .cl-talk .bub:nth-child(3) { rotate: -.5deg; }
.cl-video { max-width: 46rem; margin: clamp(2.6rem, 6vw, 4rem) auto 0; }
.cl-video .clip { box-shadow: 8px 8px 0 var(--ink); }
@media (min-width: 900px) { .cl-top { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 4rem; } }
@media (min-width: 1000px) { .cl-talk { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cl-talk .bub:nth-child(2) { margin-top: 2.2rem; } }

/* «Sobre mí»: entrada clara, lectura más ligera, foto fija al hacer scroll */
.about .copy { font-weight: 500; font-size: 1.1rem; line-height: 1.6; max-width: 38rem; margin-top: 1rem; }
.about h2 + .copy { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 650; line-height: 1.45; margin-top: 1.6rem; }
.about-grid { align-items: start; }
@media (min-width: 860px) {
  .about-photo { position: sticky; top: 6.5rem; }
  .creds { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: 1rem; }
  .creds li { rotate: 0deg !important; }
}
/* textos largos de «Tras las cámaras» igual de ligeros */
.behind .copy { font-weight: 500; }
.behind h2 + .copy { font-size: clamp(1.2rem, 1.9vw, 1.4rem); font-weight: 650; }

/* flecha de «Gratis, 20 min» apuntando al botón */
.sec-cta-n .doo { rotate: 0deg; scale: -1 1; }

/* ritmo: el título de cada sección algo más cerca de su contenido y aire uniforme */
.sec { padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.h2 + .lead, .h2 + .copy { margin-top: 1.2rem; }
.cl-media { position: relative; padding-bottom: 1rem; }
.cl-media .clip { box-shadow: 8px 8px 0 var(--ink); }
.cl-media .polaroid { position: relative; width: 72%; margin: -2.5rem 0 0 auto; rotate: 3deg; z-index: 2; }
@media (min-width: 900px) { .cl-media { padding-bottom: 7rem; } .cl-media .polaroid { position: absolute; width: 52%; left: -10%; bottom: 0; margin: 0; rotate: -4deg; } }
@media (min-width: 900px) { .cl-media { padding-bottom: 9rem; } .cl-media .polaroid { width: 40%; left: -8%; } }
.board { background-color: var(--paper); background-image: linear-gradient(to right, transparent 2.4rem, var(--rule-pink) 2.4rem calc(2.4rem + 3px), transparent calc(2.4rem + 3px)), repeating-linear-gradient(to bottom, transparent 0 39px, var(--rule) 39px 41px); padding-left: clamp(3.6rem, 6vw, 4.4rem); }
.board::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 30px; background: radial-gradient(circle at 15px 50%, transparent 0 4.5px, var(--ink) 5px 7.5px, transparent 8px) 0 0 / 30px 42px repeat-y; pointer-events: none; }
@media (max-width: 899px) { .cl-media .polaroid { margin: 1.4rem auto 0; width: 78%; } }


/* ====== precios: biblioteca 3D premium ====== */
.shelf, .vol-wrap { display: none !important; }
.lib { position: relative; margin-top: 2.6rem; }
.lib-wall { position: relative; height: 6.5rem; max-width: 46rem; margin: 0 auto; pointer-events: none; }
.frame-pic { position: absolute; top: 0; display: grid; place-items: center; width: 5.2rem; height: 4.2rem; background: var(--paper); border: 3px solid var(--ink); border-radius: .4rem; box-shadow: 4px 4px 0 var(--ink); }
.frame-pic::before { content: ""; position: absolute; left: 50%; top: -1.1rem; width: 2px; height: 1.1rem; background: var(--ink); }
.frame-pic .doo { width: 2.4rem; height: 2.4rem; stroke-width: 6; }
.fp-1 { left: 8%; rotate: -4deg; color: var(--pink); } .fp-2 { right: 10%; top: .8rem; rotate: 5deg; color: var(--ink); background: var(--sun); }
.lamp { position: absolute; left: 50%; top: -2.5rem; width: 34rem; height: 22rem; translate: -50% 0; background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--sun) 45%, transparent), transparent 62%); filter: blur(4px); }
.lib-books { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: center; gap: .35rem; perspective: 1500px; perspective-origin: 50% 30%; min-height: 20rem; padding: 0 1rem; }
.vol3 { position: relative; flex: none; width: var(--w); height: var(--h); padding: 0; border: 0; background: none; cursor: pointer; transform-style: preserve-3d; color: var(--ink); }
.v-in { position: absolute; inset: 0; transform-style: preserve-3d; }
.v-spine, .v-cover { position: absolute; top: 0; height: 100%; border: 3px solid var(--ink); backface-visibility: hidden; background-color: var(--bg); }
.v-spine { left: 0; width: 100%; border-radius: .45rem .45rem .2rem .2rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 0 .1rem .8rem; box-shadow: inset -7px 0 0 color-mix(in srgb, var(--ink) 14%, transparent), inset 4px 0 0 color-mix(in srgb, var(--paper) 30%, transparent); }
.v-band { width: 100%; height: 2.6rem; margin-top: 1.4rem; border-block: 3px solid var(--ink); background: repeating-linear-gradient(90deg, transparent 0 5px, color-mix(in srgb, var(--ink) 12%, transparent) 5px 7px); }
.v-name { writing-mode: vertical-rl; rotate: 180deg; white-space: nowrap; font-family: var(--f-display); font-weight: 800; font-stretch: 82%; font-size: clamp(1.2rem, 2.6vw, 1.55rem); letter-spacing: -.01em; line-height: 1; }
.v-price { display: grid; place-items: center; min-width: 2.6rem; height: 2.6rem; padding-inline: .3rem; border: 2.5px solid var(--ink); border-radius: 99px; background: var(--paper); color: var(--ink); font-family: var(--f-display); font-weight: 800; font-size: .95rem; }
.v-cover { left: 100%; width: var(--d); transform-origin: left center; transform: rotateY(90deg); border-radius: .2rem .55rem .55rem .2rem; display: flex; flex-direction: column; justify-content: center; gap: .4rem; padding: 1rem; background-image: linear-gradient(90deg, color-mix(in srgb, var(--ink) 16%, transparent) 0 8px, transparent 8px); }
.v-c-n { font-family: var(--f-display); font-weight: 800; font-stretch: 82%; font-size: 1.7rem; line-height: 1; letter-spacing: -.02em; }
.v-c-p { font-family: var(--f-display); font-weight: 800; font-stretch: 80%; font-size: 3rem; line-height: .9; letter-spacing: -.04em; }
.v-c-l { font-family: var(--f-hand); font-size: 1.15rem; }
.v-ribbon { position: absolute; left: 30%; bottom: -1.6rem; width: .9rem; height: 2.4rem; background: var(--sun); border: 2px solid var(--ink); border-top: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); transform: translateZ(1px); }
.v-1 { --w: clamp(2.6rem, 6vw, 3.2rem); --h: 14rem; --d: 9rem; --bg: var(--paper); }
.v-2 { --w: clamp(3.4rem, 8vw, 4.4rem); --h: 15.5rem; --d: 9.5rem; --bg: var(--sun); }
.v-3 { --w: clamp(4.2rem, 10vw, 5.6rem); --h: 17rem; --d: 10rem; --bg: var(--pink); }
.v-4 { --w: clamp(5rem, 12vw, 7rem); --h: 18.5rem; --d: 10.5rem; --bg: var(--ink); color: var(--paper); }
.v-4 .v-price { background: var(--sun); }
.v-4 .v-band { background: repeating-linear-gradient(90deg, transparent 0 5px, color-mix(in srgb, var(--paper) 22%, transparent) 5px 7px); border-color: var(--paper); }
.vol3:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
.lib:not(.gsap-on) .vol3 { transition: transform .45s var(--ease); }
.lib:not(.gsap-on) .vol3:hover, .lib:not(.gsap-on) .vol3:focus-visible { transform: translateY(-24px) rotateY(-38deg); }
.lib:not(.gsap-on) .vol3[aria-pressed="true"] { transform: translateY(-16px); }
.lib-mark { position: relative; align-self: flex-end; flex: none; width: 8.6rem; margin-right: 1rem; padding: .9rem .9rem 1rem; text-align: left; background: var(--paper); border: 3px solid var(--ink); border-radius: .6rem; box-shadow: 5px 5px 0 var(--ink); rotate: -7deg; transform-origin: bottom left; display: grid; gap: .25rem; cursor: pointer; transition: rotate .4s var(--ease), translate .4s var(--ease); }
.lib-mark::before { content: ""; position: absolute; top: -.8rem; left: 50%; translate: -50% 0; width: 4rem; height: 1.3rem; background: color-mix(in srgb, var(--pink) 75%, transparent); rotate: 3deg; }
.lib-mark small { font-family: var(--f-hand); font-size: 1.1rem; color: var(--ink-soft); }
.lib-mark b { font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: 1.15rem; line-height: 1.05; }
.lib-mark:hover { rotate: -2deg; translate: 0 -6px; }
.lib-cup { flex: none; align-self: flex-end; width: 4.6rem; height: 4.6rem; margin-left: .8rem; color: var(--ink); stroke-width: 5; }
.lib-board { position: relative; z-index: 1; max-width: 50rem; height: 1.3rem; margin: -.15rem auto 0; background: var(--ink); border-radius: .35rem; box-shadow: 0 12px 0 color-mix(in srgb, var(--ink) 18%, transparent); }
.lib-board::before, .lib-board::after { content: ""; position: absolute; top: 100%; width: 1.4rem; height: 2.4rem; background: var(--ink); clip-path: polygon(0 0, 100% 0, 100% 30%, 25% 100%, 0 100%); }
.lib-board::before { left: 12%; } .lib-board::after { right: 12%; scale: -1 1; }
.lib-hint { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 2.2rem; font-size: 1.35rem; color: var(--ink-soft); }
.lib-hint .doo { width: 2rem; height: 1.6rem; rotate: -90deg; stroke-width: 6; }
/* libro abierto */
.spread { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); max-width: 56rem; margin: 1.6rem auto 0; perspective: 1800px; }
.spread::after { content: ""; position: absolute; left: 1%; right: 1%; bottom: -10px; height: 14px; z-index: -1; border: 3px solid var(--ink); border-top: 0; border-radius: 0 0 1rem 1rem; background: repeating-linear-gradient(0deg, var(--paper) 0 2px, color-mix(in srgb, var(--ink) 20%, transparent) 2px 3px); }
.pg { position: relative; min-height: 18rem; padding: 1.8rem 1.8rem 2rem; background-color: var(--paper); background-image: repeating-linear-gradient(to bottom, transparent 0 33px, var(--rule) 33px 35px); border: 3px solid var(--ink); }
.pg-l { border-radius: 1.2rem 1.2rem 0 0; border-bottom-width: 1.5px; }
.pg-r { border-radius: 0 0 1.2rem 1.2rem; border-top-width: 1.5px; display: grid; align-content: start; justify-items: start; gap: .5rem; }
.pg-k { display: inline-block; font-size: 1.3rem; background: var(--sun); padding: .05rem .7rem; border-radius: .4rem; rotate: -2deg; }
.pg-t { font-family: var(--f-display); font-weight: 800; font-stretch: 82%; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: .95; letter-spacing: -.025em; margin-top: .8rem; }
.pg-l-list { display: grid; gap: .45rem; margin-top: 1.2rem; font-weight: 650; font-size: 1.08rem; }
.pg-l-list li { display: flex; align-items: center; gap: .55rem; }
.pg-l-list .doo { width: 1.1rem; height: 1.1rem; color: var(--pink); stroke-width: 9; }
.pg-note { margin-top: .9rem; font-size: .95rem; color: var(--ink-soft); font-weight: 500; max-width: 26rem; }
.pg-p { display: flex; align-items: flex-start; font-family: var(--f-display); font-weight: 800; font-stretch: 78%; font-size: clamp(5rem, 11vw, 7.5rem); line-height: .85; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.pg-p sup { font-size: .38em; margin-top: .2em; letter-spacing: 0; }
.pg-each { font-size: 1.5rem; }
.pg-save { display: grid; gap: .05rem; padding: .5rem 1rem .6rem; background: var(--pink); border: 2.5px solid var(--ink); border-radius: .8rem; box-shadow: 3px 3px 0 var(--ink); rotate: -2deg; margin: .3rem 0 .4rem; }
.pg-save b { font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: 1.35rem; line-height: 1; }
.pg-save small { font-weight: 600; font-size: .85rem; }
.pg-r .btn { margin-top: .6rem; }
@media (min-width: 760px) {
  .spread { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pg-l { border-radius: 1.2rem 0 0 1.2rem; border-bottom-width: 3px; border-right-width: 1.5px; box-shadow: inset -26px 0 26px -24px color-mix(in srgb, var(--ink) 40%, transparent); }
  .pg-r { border-radius: 0 1.2rem 1.2rem 0; border-top-width: 3px; border-left-width: 1.5px; box-shadow: inset 26px 0 26px -24px color-mix(in srgb, var(--ink) 40%, transparent); padding-left: 2.4rem; }
}
/* gráfico precio por clase */
.ppc { max-width: 40rem; margin: 3.4rem auto 0; padding: 1.4rem 1.6rem; background: var(--paper); border: 3px solid var(--ink); border-radius: 1.4rem; box-shadow: var(--shadow); rotate: -.5deg; }
.ppc-t { font-size: clamp(1.35rem, 3vw, 1.7rem); line-height: 1.15; }
.ppc ul { display: grid; gap: .55rem; margin-top: 1rem; }
.ppc li { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr) 3.4rem; align-items: center; gap: .8rem; font-weight: 700; font-size: .98rem; transition: opacity .3s; }
.ch-bar { height: 1.05rem; border: 2.5px solid var(--ink); border-radius: 99px; overflow: hidden; background: var(--paper-deep); }
.ch-bar i { display: block; height: 100%; width: var(--v); background: var(--blush); border-right: 2.5px solid var(--ink); }
.ppc li.on .ch-bar i { background: var(--pink); }
.ppc li.on .ch-v { background: var(--sun); border-radius: .3rem; padding-inline: .3rem; }
.ch-v { font-family: var(--f-display); font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 759px) {
  .lib-wall { height: 4.5rem; } .frame-pic { width: 4rem; height: 3.3rem; } .lamp { width: 22rem; }
  .lib-books { min-height: 17rem; gap: .25rem; padding: 0; }
  .lib-mark { position: absolute; left: .2rem; top: -4.2rem; width: auto; max-width: 13rem; rotate: -3deg; display: flex; flex-wrap: wrap; gap: .1rem .4rem; padding: .5rem .8rem; }
  .lib-cup { display: none; }
  .v-1 { --h: 11.5rem; } .v-2 { --h: 12.8rem; } .v-3 { --h: 14rem; } .v-4 { --h: 15.2rem; }
  .v-band { height: 1.8rem; margin-top: 1rem; }
  .ppc li { grid-template-columns: 5.2rem minmax(0, 1fr) 2.8rem; font-size: .9rem; }
}

/* ====== bugs de la auditoría ====== */
/* la mancha fucsia entra con el resto del hero (no queda sola al cerrar la intro) */
.js .hero .blob-pink { animation: blobIn 1.1s var(--ease-out) both, breathe 11s ease-in-out 1.1s infinite; }
/* botón flotante compacto en móvil: solo icono, no tapa contenido */
.sticky-cta .btn { width: 3.7rem; height: 3.7rem; min-height: 0; padding: 0; justify-content: center; border-radius: 50%; }
.sticky-cta .btn::after { left: 10px; }
.sticky-cta .sc-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sticky-cta .btn .doo { width: 1.6rem; height: 1.6rem; }
.v-1 .v-name { font-size: clamp(1rem, 2.2vw, 1.2rem); }
.v-1 .v-price { min-width: 2.2rem; height: 2.2rem; font-size: .78rem; }
@media (min-width: 1100px) {
  .lib-wall { height: 8rem; max-width: 56rem; } .frame-pic { width: 6.2rem; height: 5rem; } .lamp { width: 44rem; height: 26rem; }
  .lib-books { min-height: 25rem; gap: .5rem; }
  .v-1 { --w: 3.6rem; --h: 17.5rem; --d: 11.5rem; } .v-2 { --w: 4.8rem; --h: 19rem; --d: 12rem; }
  .v-3 { --w: 6rem; --h: 21rem; --d: 12.5rem; } .v-4 { --w: 7.6rem; --h: 23rem; --d: 13rem; }
  .v-name { font-size: 1.8rem; } .v-1 .v-name { font-size: 1.3rem; }
  .v-c-n { font-size: 2rem; } .v-c-p { font-size: 3.6rem; }
  .lib-mark { width: 10.5rem; margin-right: 1.6rem; } .lib-mark b { font-size: 1.3rem; }
  .lib-cup { width: 5.6rem; height: 5.6rem; }
  .lib-board { max-width: 62rem; height: 1.5rem; }
}
@media (min-width: 1100px) { .lib-mark { margin-right: 2.6rem; } }
@media (min-width: 720px) { html[lang="de"] .hero-title { font-size: clamp(3rem, 7vw, 6.6rem); } }


/* ====== precios v2: libros con volumen y personalidad ====== */
/* canto superior con páginas (se ve al inclinar el libro) */
.v-top { position: absolute; left: 0; top: 0; width: 100%; height: var(--d); transform-origin: top center; transform: rotateX(-90deg); background-color: var(--paper); background-image: repeating-linear-gradient(90deg, transparent 0 3px, color-mix(in srgb, var(--ink) 18%, transparent) 3px 4px); border: 3px solid var(--ink); border-radius: .2rem; }
.v-spine { overflow: hidden; }
.v-band-b { margin-top: auto; margin-bottom: .6rem; height: 1rem; }
.v-sticker { position: relative; z-index: 1; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; margin-top: .5rem; border-radius: 50%; background: var(--sun); border: 2.5px solid var(--ink); font-size: .95rem; rotate: -8deg; }
.v-c-i { width: 2.6rem; height: 2.6rem; display: block; margin-bottom: .2rem; }
.v-c-i .doo { width: 100%; height: 100%; stroke-width: 6; }
.v-clasp { display: none; }
/* Clase suelta: cuaderno de espiral */
.v-1 .v-spine { padding-left: .55rem; background-image: radial-gradient(circle at .4rem 50%, var(--ink) 0 .17rem, transparent .2rem); background-size: 100% .95rem; background-repeat: repeat-y; border-radius: .35rem; }
.v-1 .v-band { display: none; }
.v-1 .v-c-i { color: var(--pink); }
/* Pack 5: tapa blanda con esquina doblada */
.v-2 .v-spine { border-width: 2.5px; border-radius: .25rem; }
.v-2 .v-cover::after { content: ""; position: absolute; right: -3px; top: -3px; width: 2.2rem; height: 2.2rem; background: linear-gradient(225deg, var(--paper) 0 48%, var(--ink) 48% 54%, color-mix(in srgb, var(--ink) 18%, var(--sun)) 54%); }
.v-2 .v-c-i { color: var(--pink); }
/* Pack 10: tapa dura, doble banda, cinta y pegatina «favorito» */
.v-3 .v-spine { border-width: 3.5px; box-shadow: inset -9px 0 0 color-mix(in srgb, var(--ink) 18%, transparent), inset 5px 0 0 color-mix(in srgb, var(--paper) 30%, transparent); }
.v-3 .v-band { border-block-width: 3.5px; background: var(--sun); }
.v-3 .v-c-i { color: var(--sun); }
/* Pack 20: edición especial, banda dorada y cierre */
.v-4 .v-band { background: var(--sun); border-color: var(--ink); }
.v-4 .v-band-b { background: var(--sun); }
.v-4 .v-name { color: var(--sun); }
.v-4 .v-c-i { color: var(--sun); }
.v-4 .v-clasp { display: block; position: absolute; right: -.9rem; top: 50%; translate: 0 -50%; width: 1.6rem; height: 2.6rem; background: var(--sun); border: 3px solid var(--ink); border-radius: .4rem; }
.v-4 .v-c-n, .v-4 .v-c-p, .v-4 .v-c-l { color: var(--paper); }
.v-4 .v-top { background-color: var(--sun); }
/* libro volando hasta el libro abierto */
.fly-ghost { position: absolute; z-index: 30; pointer-events: none; display: grid; place-items: center; padding: .6rem; background: var(--bg); border: 3px solid var(--ink); border-radius: .4rem .7rem .7rem .4rem; box-shadow: 8px 8px 0 var(--ink); transform-style: preserve-3d; overflow: hidden; }
.fly-ghost .v-c-n { font-size: 1.4rem; text-align: center; }
.v-4.fly-ghost { color: var(--paper); }
.lib { perspective: 1800px; }
.lib-board { transform-origin: center top; }
.pg-num { display: inline-block; min-width: 2ch; }
/* móvil: carrusel deslizable con el libro del centro elegido */
@media (max-width: 759px) {
  .lib-books { justify-content: flex-start; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 3.2rem calc(50% - 2.5rem) .4rem; gap: 1.1rem; min-height: 21rem; perspective: none; -webkit-overflow-scrolling: touch; }
  .lib-books::-webkit-scrollbar { display: none; }
  .vol3 { scroll-snap-align: center; transition: transform .45s var(--ease), opacity .3s; opacity: .55; transform: scale(.88); }
  .vol3[aria-pressed="true"] { opacity: 1; transform: scale(1.06) translateY(-10px); }
  .v-1 { --w: 3.4rem; --h: 15rem; } .v-2 { --w: 4.4rem; --h: 16rem; } .v-3 { --w: 5.2rem; --h: 17rem; } .v-4 { --w: 6.2rem; --h: 18rem; }
  .lib-mark { position: relative; top: 0; left: 0; align-self: center; scroll-snap-align: none; display: grid; width: 7.5rem; max-width: none; margin-right: .4rem; }
  .lib-board { margin-top: -.6rem; }
}

/* biblioteca v3: elegido por delante, marca bajo el libro y giro de página */
.vol3 { z-index: 1; }
.vol3[aria-pressed="true"] { z-index: 3; }
.vol3::after { content: ""; position: absolute; left: 50%; bottom: -1.05rem; width: .9rem; height: .9rem; translate: -50% 0; background: var(--pink); border: 2.5px solid var(--ink); border-radius: 50%; scale: 0; transition: scale .35s var(--ease); pointer-events: none; }
.vol3[aria-pressed="true"]::after { scale: 1; }
.pg-sheet { position: absolute; z-index: 5; transform-style: preserve-3d; pointer-events: none; --lift: 0; filter: drop-shadow(calc(-14px * var(--lift)) calc(10px * var(--lift)) calc(18px * var(--lift)) color-mix(in srgb, var(--ink) 35%, transparent)); }
.pg-face { position: absolute !important; inset: 0; margin: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.pg-front { --lit: 0; }
.pg-front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 30%, transparent), transparent 60%); opacity: var(--lit); pointer-events: none; }
.pg-back { transform: rotateY(180deg); transform-origin: center; }
.pg-hold { z-index: 4; pointer-events: none; }
.pg-shade { position: absolute; z-index: 3; pointer-events: none; border-radius: 0 1.2rem 1.2rem 0; background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 45%, transparent), transparent 55%); }
@media (max-width: 759px) { .vol3::after { bottom: -.9rem; } }

/* ronda 9: uniones entre bloques. En vez de pintar una onda del color «anterior» (que no casaba con los fondos con dibujo),
   cada bloque recorta su propio borde superior en onda y se monta sobre el anterior: se ve el fondo real del bloque de arriba. */
:root { --wv: clamp(18px, 2.6vw, 34px); --wave-in: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 34' preserveAspectRatio='none'%3E%3Cpath d='M0 8C116 8 204 28 320 28S524 8 640 8V34H0Z'/%3E%3C/svg%3E"); }
#clases::before, #metodo::before, #distintas::before, #juego::before, #precios::before, #sobre-mi::before, #alumnos::before, #reservar::before, .foot::before, #asi-son::before, #tras-camaras::before { content: none; display: none; }
#clases, #metodo, #asi-son, #tras-camaras, #distintas, #precios, #juego, #alumnos, #reservar, .foot {
  margin-top: calc(-1 * var(--wv));
  -webkit-mask: var(--wave-in) 0 0 / 640px var(--wv) repeat-x, linear-gradient(var(--ink) 0 0) 0 calc(var(--wv) - 1px) / 100% calc(100% - var(--wv) + 1px) no-repeat;
  mask: var(--wave-in) 0 0 / 640px var(--wv) repeat-x, linear-gradient(var(--ink) 0 0) 0 calc(var(--wv) - 1px) / 100% calc(100% - var(--wv) + 1px) no-repeat;
}
/* cada bloque desplaza un poco su onda para que no se repitan todas iguales */
#metodo, #juego { -webkit-mask-position: -210px 0, 0 calc(var(--wv) - 1px); mask-position: -210px 0, 0 calc(var(--wv) - 1px); }
#asi-son, #alumnos { -webkit-mask-position: -420px 0, 0 calc(var(--wv) - 1px); mask-position: -420px 0, 0 calc(var(--wv) - 1px); }
#distintas, .foot { -webkit-mask-position: -120px 0, 0 calc(var(--wv) - 1px); mask-position: -120px 0, 0 calc(var(--wv) - 1px); }
/* burbujas: las coloca app.js para que no pisen texto ni se corten */
.deco .db.db-off, .deco .cut.db-off { display: none; }

.measuring .rv, .measuring .rv *, .measuring .w, .measuring [data-w], .measuring .hero-title * { transform: none !important; translate: none !important; transition: none !important; }

/* palabras clave en los textos largos: subrayador amarillo, o color amarillo sobre fondos oscuros y rojos */
.kw { font-weight: 700; color: inherit; background: linear-gradient(transparent 56%, color-mix(in srgb, var(--sun) 92%, transparent) 56% 94%, transparent 94%); padding: 0 .1em; margin: 0 -.05em; border-radius: .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bub-pink .kw { background: none; color: var(--sun); text-shadow: 1px 1px 0 var(--ink); }
.bub-sun .kw { background: linear-gradient(transparent 56%, color-mix(in srgb, var(--pink) 85%, transparent) 56% 94%, transparent 94%); color: var(--ink); }
.on-dark .kw { background: none; color: var(--sun); }
.steps .kw, .book .kw { background: none; color: var(--sun); }

.pola { padding-bottom: 2.3rem; }
.pola figcaption { bottom: .35rem; }
.pola-1 figcaption { text-align: left; right: 46%; }
.pola-2 { z-index: 2; }

/* ronda 12: libros sin precio en el lomo ni en la portada (el precio sale al abrirlos) y títulos centrados */
.v-spine .v-name { margin-block: auto; }
.v-spine .v-band-b { margin-top: 0; }
.v-cover { align-items: center; text-align: center; justify-content: center; }