/* Perú Lector · landing «recortes de libro». Fuente: platform/prototypes/landing-recortes-2026-10-02. */

@font-face{font-family:'Circular XX';src:url('/fonts/CircularXX-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Circular XX';src:url('/fonts/CircularXX-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Circular XX';src:url('/fonts/CircularXX-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Homemade Apple';src:url('/fonts/HomemadeApple.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  --ink:#10283c;
  --ink-soft:#40566a;
  --navy:var(--pl-color-blue-900);
  --paper:var(--pl-color-paper-100);
  --paper-white:#fffdf8;
  --coral:var(--pl-color-coral-500);
  --gutter:clamp(16px,5vw,72px);
  --shadow-paper:0 4px 16px rgba(33,32,28,.1);
  --shadow-soft:0 1px 2px rgba(33,32,28,.05),0 4px 16px rgba(33,32,28,.09);
  --ease-out:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Circular XX',system-ui,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto}
/* <picture> solo elige el formato (AVIF o WebP): no agrega caja, así cada img se ubica como antes. */
picture{display:contents}
svg{width:1em;height:1em;flex:none}
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.02em;line-height:1.08}
p{margin:0}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:60;background:var(--navy);color:#fff;padding:10px 16px;border-radius:8px}
.skip:focus{top:16px}
:focus-visible{outline:3px solid var(--pl-color-blue-500);outline-offset:3px;border-radius:6px}

.paper-surface{position:fixed;inset:0;z-index:40;width:100%;height:100%;pointer-events:none;opacity:.32}
/* En pantallas chicas no hay textura: va sobre el texto y, de cerca, se lee como ruido; el papel ya lo dan los recortes. */
@media (max-width:760px){.paper-surface{display:none}}

.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:10px;background:var(--navy);color:#fff;text-decoration:none;font-weight:500;font-size:17px;transition:background .2s,transform .2s var(--ease-out)}
.button:hover{background:var(--pl-color-blue-800)}
.button:active{transform:translateY(1px)}
.button svg{font-size:22px}

.eyebrow{font-size:15px;font-weight:500;color:var(--pl-color-blue-700);margin-bottom:12px}
.eyebrow-light{color:var(--pl-color-blue-200)}
.section-head{text-align:center;max-width:780px;margin:0 auto clamp(40px,6vw,64px)}
.section-head h2{font-size:clamp(2rem,1.4rem + 2.4vw,3.1rem);text-wrap:balance}
.section-head h2+p{margin-top:16px;color:var(--ink-soft);font-size:18px}

/* ---------- Papel rasgado ----------
   Un solo rasgado. La capa rasgada siempre es la de color liso y se monta
   sobre la sección vecina, con una sombra tenue de papel encima. */
.edge{position:absolute;left:0;right:0;height:36px;z-index:2;pointer-events:none;color:var(--edge,var(--paper))}
.edge>span{position:absolute;inset:0;background:currentColor;-webkit-mask:url('/images/landing/recortes/edge-top.png') 0 0/auto 100% repeat-x;mask:url('/images/landing/recortes/edge-top.png') 0 0/auto 100% repeat-x}
.edge-top{top:0;translate:0 -35px;filter:drop-shadow(0 -3px 4px rgba(30,20,15,.1))}
.edge-bottom{bottom:0;translate:0 35px;filter:drop-shadow(0 3px 4px rgba(30,20,15,.12))}
.edge-bottom>span{-webkit-mask-image:url('/images/landing/recortes/edge-bottom.png');mask-image:url('/images/landing/recortes/edge-bottom.png');-webkit-mask-position:-310px 0;mask-position:-310px 0}

/* ---------- Cabecera ---------- */
.header{position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px var(--gutter);transition:background .3s,box-shadow .3s,padding .3s}
.header.is-solid{background:rgba(247,245,239,.94);box-shadow:0 1px 0 rgba(16,40,60,.08);padding-block:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.brand{position:relative;z-index:1;display:block}
.brand img{display:block;width:clamp(132px,12vw,165px);height:auto}
.brand .brand-inverse{position:absolute;inset:0;opacity:0}
.nav{display:flex;align-items:center;gap:clamp(24px,4vw,64px)}
.nav a:not(.button){text-decoration:none;font-size:17px;color:var(--ink);padding:6px 0;background:linear-gradient(currentColor 0 0) left bottom/0 1.5px no-repeat;transition:background-size .3s var(--ease-out)}
.nav a:not(.button):hover{background-size:100% 1.5px}
.header-access,.menu-button{display:none}
.menu-icon{display:inline-flex}
.menu-icon svg{width:22px;height:22px}
.menu-icon-close,.header.is-open .menu-icon-open{display:none}
.header.is-open .menu-icon-close{display:inline-flex}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:clamp(680px,100svh,1000px);overflow:hidden;display:flex;flex-direction:column;align-items:center}
.hero-sky{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;z-index:0}
.hero-copy{position:relative;z-index:3;text-align:center;padding:clamp(150px,24vh,240px) 20px 0;max-width:900px}
.hero h1{font-size:clamp(2.6rem,1rem + 4vw,4.6rem);text-wrap:balance}
.hero-lead{max-width:620px;margin:20px auto 0;font-size:clamp(18px,1.4vw,21px);line-height:1.45;text-wrap:pretty}
.seed{margin-top:clamp(28px,4vh,44px);display:flex;flex-direction:column;align-items:center;gap:12px}
.seed-label{font-size:18px}
.seed-label b{font-weight:500;color:var(--pl-color-blue-800)}
.seed-strip{position:relative;isolation:isolate;width:min(440px,86vw);height:62px;display:flex;align-items:center;justify-content:center;padding:0 34px;font-size:19px;font-weight:500;color:var(--navy);filter:drop-shadow(0 1px 1px rgba(33,32,28,.06)) drop-shadow(0 4px 12px rgba(33,32,28,.07))}
/* El papel va en un pseudo-elemento rasgado arriba y abajo; la sombra (muy suave) sigue el recorte. */
.seed-strip::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper-white);-webkit-mask:url('/images/landing/recortes/seed-mask.png') center/100% 100% no-repeat;mask:url('/images/landing/recortes/seed-mask.png') center/100% 100% no-repeat}
.seed-caret{display:inline-block;width:2px;height:1.1em;margin-left:2px;vertical-align:-.18em;background:var(--coral);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.button-hero{display:none}

.scene{position:absolute;inset:auto 0 0;height:0;z-index:2}
/* Recortes pegados: sombra corta y nítida, como papel sobre papel; nada de halos que hagan flotar. */
.cut{position:absolute;display:block;height:auto;max-width:none}
.prop{z-index:1;filter:drop-shadow(0 1px 1px rgba(40,30,20,.22))}
.plant{z-index:2;filter:drop-shadow(0 1px 1px rgba(40,30,20,.2))}
.sticker{z-index:3;filter:drop-shadow(0 1px 1px rgba(20,25,30,.3)) drop-shadow(0 3px 5px rgba(20,25,30,.12))}
/* Desktop: medidas tomadas del draft (1282 px de ancho → vw). */
.prop-gradas{left:6vw;width:17vw;bottom:-3.4vw}
.plant-costa{left:-2.6vw;width:14.5vw;bottom:-1.6vw}
.sticker-mama{left:8.6vw;width:10.4vw;bottom:-.9vw}
.prop-banca{left:38.4vw;width:19.4vw;bottom:-3.1vw}
.sticker-hermanos{left:42.2vw;width:11.8vw;bottom:2.2vw}
.prop-tarima{left:76.5vw;width:30vw;bottom:-8.2vw}
.plant-selva{display:none}
.sticker-amigos{left:80.4vw;width:12.2vw;bottom:1.9vw}

/* ---------- Cifras ---------- */
.figures{position:relative;z-index:5;margin:-24px 0 0}
/* La franja se monta directamente sobre el azul: un solo rasgado entre ambas. */
.figures{filter:drop-shadow(0 -3px 4px rgba(30,20,15,.1)) drop-shadow(0 4px 6px rgba(30,20,15,.12))}
.tear-book{--t:30px}
.tear-book .tear-face{position:relative;-webkit-mask:url('/images/landing/recortes/edge-top.png') -420px 0/auto var(--t) repeat-x,linear-gradient(#000 0 0) center/100% calc(100% - 2 * var(--t) + 2px) no-repeat,url('/images/landing/recortes/edge-bottom.png') 0 100%/auto var(--t) repeat-x;mask:url('/images/landing/recortes/edge-top.png') -420px 0/auto var(--t) repeat-x,linear-gradient(#000 0 0) center/100% calc(100% - 2 * var(--t) + 2px) no-repeat,url('/images/landing/recortes/edge-bottom.png') 0 100%/auto var(--t) repeat-x;background:#ece6dc url('/images/landing/recortes/pagina-libro-720.webp') center/520px auto repeat;background-image:image-set(url('/images/landing/recortes/pagina-libro-720.avif') type('image/avif'),url('/images/landing/recortes/pagina-libro-720.webp') type('image/webp'));padding:calc(var(--t) + 30px) var(--gutter) calc(var(--t) + 26px)}
.tear-book .tear-face::before{content:"";position:absolute;inset:0;background:rgba(250,247,240,.9)}
.figures-list{position:relative;list-style:none;margin:0 auto;padding:0;max-width:1180px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.figures-list strong{display:block;font-size:clamp(2.6rem,1.8rem + 2vw,3.7rem);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.figures-list span:not([data-count]){display:block;max-width:220px;margin:10px auto 0;font-size:16px;line-height:1.35;color:var(--ink-soft)}
.figures-note{position:relative;margin-top:26px;text-align:center;font-size:14px;color:var(--ink-soft)}

/* ---------- Video ---------- */
.video{position:relative;z-index:2;--edge:var(--navy);margin-top:-34px;background:var(--navy);color:#fff;text-align:center;padding:clamp(96px,10vw,130px) var(--gutter) clamp(72px,8vw,110px)}
.video h2{font-size:clamp(2rem,1.4rem + 2.4vw,3.1rem);margin-bottom:clamp(36px,5vw,56px)}
.video-frame{position:relative;margin:0 auto;max-width:880px;aspect-ratio:16/9;background:var(--paper-white);padding:12px;border-radius:4px;box-shadow:0 4px 16px rgba(0,0,0,.18),0 24px 48px -24px rgba(0,0,0,.35)}
.frame-tape{position:absolute;top:-16px;left:50%;z-index:2;width:clamp(84px,10vw,124px);translate:-50% 0;rotate:-2deg;opacity:.96}
.video-poster{position:relative;width:100%;height:100%;overflow:hidden}
.video-poster video{display:block;width:100%;height:100%;object-fit:cover;background:var(--navy)}
.video-poster video::cue{font-family:'Circular XX',sans-serif;font-size:clamp(15px,1.7vw,22px);line-height:1.35;background:rgba(16,40,60,.78);color:#fff}
.video-frame.is-playing .video-play{display:none}
/* Botón como sticker: triángulo de papel coral con borde blanco rasgado. */
.video-play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:clamp(84px,9vw,112px);aspect-ratio:1;border:0;padding:0;background:none;cursor:pointer;
  filter:drop-shadow(0 1px 1px rgba(20,25,30,.3)) drop-shadow(0 6px 12px rgba(20,25,30,.22));transition:transform .25s var(--ease-out)}
.video-play svg{width:100%;height:100%}
.video-play:hover{transform:scale(1.06)}
.video-play:focus-visible{outline-offset:6px;border-radius:12px}
.video-status{position:absolute;left:50%;bottom:-48px;translate:-50% 0;font-size:15px;color:var(--pl-color-blue-200);white-space:nowrap}

/* ---------- Herramientas ---------- */
.tools{position:relative;padding:clamp(96px,9vw,130px) var(--gutter) clamp(96px,9vw,130px);
  background-color:#eef3f8;background-image:linear-gradient(rgba(53,112,190,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(53,112,190,.13) 1px,transparent 1px);background-size:28px 28px;background-position:-1px -1px}
.bento{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,24px)}
/* Card: una sola superficie tintada y translúcida (el cuadriculado se asoma), esquinas amplias,
   arte que sangra hasta el borde y se funde con la card, sombra amplia y muy suave. */
.card{--tint:#e6e0d2;position:relative;display:flex;flex-direction:column;height:clamp(460px,40vw,520px);padding:30px;border-radius:30px;overflow:hidden;
  background:color-mix(in srgb,var(--tint) 74%,transparent);box-shadow:var(--shadow-soft)}
.card-generator{grid-column:span 7;--tint:#dcd3ec}
.card-plan{grid-column:span 5;--tint:#d3e6d6}
.card-library{grid-column:span 12;--tint:#f1e2c4;height:auto;min-height:340px;display:grid;grid-template-columns:minmax(260px,4fr) 8fr;align-items:center;padding:0}
.card-progress{grid-column:span 7;--tint:#d3e2ef}
.card-more{grid-column:span 5;--tint:#f6e7b6}
.card-practice{grid-column:span 5;--tint:#f5d6c8}
.card-tutor{grid-column:span 7;--tint:#e4ddcc}
.card-art{position:relative;flex:1;min-height:0;margin:-30px -30px 0;
  -webkit-mask:linear-gradient(to top,transparent 0,#000 44px);mask:linear-gradient(to top,transparent 0,#000 44px)}
.card-copy{position:relative;padding-top:8px}
.card-copy h3{font-size:clamp(1.45rem,1.15rem + .7vw,1.65rem);letter-spacing:-.025em}
.card-copy p:not(.tag){margin-top:8px;color:var(--ink-soft);max-width:50ch;line-height:1.6;text-wrap:pretty}
.tag{display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.62);color:var(--pl-color-violet-700);font-size:14px;font-weight:500}
.tag svg{font-size:16px}
.tag-soon{color:var(--pl-color-gold-900)}

/* Trazos de crayón detrás del arte: forma de la máscara, color = tono profundo de la card, opacidad baja. */
.card-brush{position:absolute;z-index:0;pointer-events:none;background:var(--brush);opacity:.5;
  -webkit-mask:var(--brush-img) center/contain no-repeat;mask:var(--brush-img) center/contain no-repeat}
.card-art>:not(.card-brush){z-index:1}
.slip,.question,.bubble,.covers-track{position:relative;z-index:1}
.card-generator .card-brush{--brush:#a993d6;--brush-img:url('/images/landing/recortes/trazo-1.webp');left:-6%;top:-2%;width:62%;height:62%}
.card-plan .card-brush{--brush:#8fc39b;--brush-img:url('/images/landing/recortes/trazo-3.webp');left:-10%;top:-6%;width:56%;height:96%}
.card-progress .card-brush{--brush:#8fb6db;--brush-img:url('/images/landing/recortes/trazo-2.webp');left:-6%;top:-2%;width:62%;height:58%}
.card-more .card-brush{--brush:#e3c04f;--brush-img:url('/images/landing/recortes/trazo-6.webp');left:18%;top:6%;width:64%;height:88%}
.card-practice .card-brush{--brush:#e99a80;--brush-img:url('/images/landing/recortes/trazo-4.webp');left:28%;top:30%;width:76%;height:62%}
.card-tutor .card-brush{--brush:#c4b182;--brush-img:url('/images/landing/recortes/trazo-7.webp');left:-2%;top:2%;width:42%;height:96%}
.covers .card-brush{--brush:#d8b06a;--brush-img:url('/images/landing/recortes/trazo-8.webp');left:4%;top:8%;width:92%;height:84%}

/* Capturas: sangran por la derecha y por abajo, como una hoja apoyada dentro de la card. */
.art-shot img{position:absolute;top:50px;left:58px;width:calc(100% + 60px);max-width:none;height:auto;border-radius:14px;box-shadow:var(--shadow-soft)}
.card-plan .art-shot img,.card-progress .art-shot img{width:auto;height:calc(100% + 40px)}
.note{position:absolute;right:34px;bottom:58px;padding:12px 16px;border-radius:10px;background:#fff6c9;font-size:15px;line-height:1.3;rotate:2deg;box-shadow:var(--shadow-soft)}
.note b{font-weight:500}

.card-library .card-copy{padding:40px 8px 40px 40px}
.covers{position:relative;overflow:hidden;padding:36px 0;height:100%;display:flex;align-items:center;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 94%,transparent)}
.covers-track{list-style:none;margin:0;padding:0 16px;display:flex;gap:20px;width:max-content}
.covers-track li{flex:none}
.covers-track img{display:block;width:138px;height:207px;object-fit:cover;border-radius:8px;box-shadow:var(--shadow-soft)}

.art-slips,.art-question,.art-chat{display:flex;align-items:center;justify-content:center;padding:44px 34px 24px}
.art-slips{flex-wrap:wrap;align-content:center;gap:12px}
.slip{padding:10px 18px;border-radius:10px;background:rgba(255,255,255,.85);font-size:18px;font-weight:500;box-shadow:var(--shadow-soft)}
.slip:nth-child(odd){rotate:-2deg}
.slip:nth-child(even){rotate:2deg}
.question{width:min(100%,340px);padding:20px 22px;border-radius:16px;background:rgba(255,255,255,.9);box-shadow:var(--shadow-soft)}
.question-meta{font-size:13px;color:var(--ink-soft)}
.question-text{margin-top:6px;font-weight:500;line-height:1.3}
.question ol{list-style:upper-alpha;margin:12px 0 0;padding-left:22px;font-size:15px;display:grid;gap:6px}
.question li{padding:4px 8px;border-radius:8px}
.question li.is-picked{background:var(--pl-color-green-100);color:var(--pl-color-green-800)}
.art-chat{flex-direction:column;align-items:stretch;gap:14px}
.bubble{max-width:82%;padding:12px 16px;font-size:15px;line-height:1.45;box-shadow:var(--shadow-soft)}
.bubble-me{align-self:flex-end;background:var(--navy);color:#fff;border-radius:18px 18px 6px 18px}
.bubble-tutor{align-self:flex-start;background:rgba(255,255,255,.92);border-radius:18px 18px 18px 6px}

/* ---------- Para quién ---------- */
.audience{scroll-margin-top:72px;position:relative;z-index:2;background:var(--paper);padding:clamp(80px,10vw,140px) var(--gutter) 0}
.audience-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);align-items:start}
.persona{display:flex;flex-direction:column;align-items:center;text-align:center;scroll-margin-top:110px}
.persona-kicker{font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.persona h3{margin-top:6px;font-size:clamp(2rem,1.6rem + 1.2vw,2.6rem)}
/* Trazo de pincel seco detrás del título (máscara propia, estirada al ancho de la palabra). */
.marker{position:relative;isolation:isolate;display:inline-block;padding:0 .08em}
.marker::before{content:"";position:absolute;z-index:-1;left:-.28em;right:-.34em;top:.34em;bottom:-.06em;background:var(--hl);rotate:-1.2deg;
  -webkit-mask:url('/images/landing/recortes/brush.png') center/100% 100% no-repeat;mask:url('/images/landing/recortes/brush.png') center/100% 100% no-repeat}
.persona-estudiantes .marker::before{rotate:.8deg}
.marker-blue{--hl:var(--pl-color-blue-200)}
.marker-green{--hl:var(--pl-color-green-200)}
.marker-yellow{--hl:#f6dd8f}
.persona-art{position:relative;z-index:1;height:300px;width:auto;max-width:100%;margin:14px 0 -30px;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(33,32,28,.14)) drop-shadow(0 4px 10px rgba(33,32,28,.1))}
/* Collage de Docentes: página de libro rasgada → comillas de papel → docente → pincelada del color del panel,
   que corta la figura y se funde con el panel de abajo. Medidas en % del contenedor (escala junta). */
.persona-collage{position:relative;z-index:1;width:300px;max-width:100%;aspect-ratio:9/10;margin:14px 0 -63px}
.persona-collage>*,.persona-collage>picture>img{position:absolute}
.pc-page{left:46%;top:16%;width:44%;height:61%;filter:drop-shadow(0 1px 1px rgba(33,32,28,.12))}
.pc-page img{width:100%;height:100%;object-fit:cover;object-position:20% 30%;-webkit-mask:url('/images/landing/recortes/page-mask-600.webp') center/100% 100% no-repeat;mask:url('/images/landing/recortes/page-mask-600.webp') center/100% 100% no-repeat}
.pc-quote{left:51%;top:1%;width:46%;filter:drop-shadow(0 1px 1px rgba(33,32,28,.15))}
.pc-figure{left:1%;top:10%;width:92%;filter:drop-shadow(0 1px 1px rgba(33,32,28,.18)) drop-shadow(0 4px 10px rgba(33,32,28,.08))}
.pc-tape{left:-3%;right:auto;bottom:10%;width:106%;rotate:-1.5deg;filter:drop-shadow(0 1px 1px rgba(33,32,28,.16)) drop-shadow(0 3px 8px rgba(33,32,28,.1))}
.pc-flower{filter:drop-shadow(0 1px 1px rgba(33,32,28,.15))}
/* Familias: página detrás, flor amarilla arriba a la derecha, papá e hija dibujando, kraft abajo. */
.persona-familias .pc-page{left:12%;top:11%;width:78%;height:62%}
.persona-familias .pc-page img{object-position:0 0}
.persona-familias .pc-flower{left:65%;top:0;width:34%;rotate:-6deg}
.persona-familias .pc-figure{left:6%;top:6%;width:86%}
.persona-familias .pc-tape{left:-3%;width:106%;bottom:10%;rotate:1.2deg}
/* Estudiantes: página ancha detrás, flor verde arriba a la derecha, chicos al centro, masking crema abajo. */
.persona-estudiantes .pc-page{left:8%;top:9%;width:78%;height:62%}
.persona-estudiantes .pc-page img{object-position:0 0}
.persona-estudiantes .pc-flower{left:61%;top:0;width:38%;rotate:8deg}
.persona-estudiantes .pc-figure{left:3%;top:8%;width:84%}
.persona-estudiantes .pc-tape{left:-3%;width:106%;bottom:10%;rotate:-.6deg}
.persona-list{list-style:none;margin:0;padding:72px clamp(20px,2.4vw,32px) 32px;width:100%;border-radius:30px;display:grid;gap:22px;text-align:left;flex:1}
.persona-docentes .persona-list{background:var(--pl-color-blue-100)}
.persona-estudiantes .persona-list{background:var(--pl-color-green-100)}
.persona-familias .persona-list{background:var(--pl-color-yellow-100)}
.persona-list li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.persona-icon{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.8);display:grid;place-items:center;color:var(--navy);font-size:22px}
.persona-list strong{font-weight:500;font-size:18px;line-height:1.3}
.persona-list p{margin-top:4px;color:var(--ink-soft);font-size:16px;line-height:1.45}

/* ---------- Testimonios ---------- */
.voices{padding:clamp(96px,11vw,150px) var(--gutter) 0}
.notes{list-style:none;margin:0 auto;padding:0;max-width:1180px;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);align-items:start}
/* Hojas de cuaderno reales (escaneadas): el texto se escribe encima, respetando perforaciones y rasgados. */
.paper-note{position:relative;background:center/100% 100% no-repeat;filter:drop-shadow(0 1px 1px rgba(33,32,28,.12)) drop-shadow(0 6px 14px rgba(33,32,28,.1))}
.note-a{aspect-ratio:760/634;background-image:url('/images/landing/recortes/hoja-crema-arriba.webp');padding:17% 11% 14% 9%;rotate:-1.6deg}
.note-b{aspect-ratio:760/658;background-image:url('/images/landing/recortes/hoja-cuadros-b.webp');padding:12% 9% 10% 15%;rotate:1.2deg;margin-top:28px}
.note-c{aspect-ratio:760/883;background-image:url('/images/landing/recortes/hoja-crema-lado.webp');padding:14% 10% 12% 17%;rotate:-.8deg}
.note-tape{position:absolute;top:-14px;width:36%;mix-blend-mode:multiply;opacity:.92}
.note-a .note-tape{left:-4%;rotate:-14deg}
.note-b .note-tape{left:50%;translate:-50% 0;rotate:-3deg}
.note-c .note-tape{right:-4%;rotate:11deg}
.paper-note blockquote{margin:0;font-family:'Homemade Apple',cursive;font-size:clamp(15px,1.15vw,18px);line-height:1.75;color:#1d3554}
.note-by{margin-top:14px;font-size:14px;color:var(--ink-soft)}

/* ---------- Preguntas ---------- */
.faq{padding:clamp(96px,11vw,150px) var(--gutter) clamp(64px,7vw,96px)}
.faq-inner{max-width:820px;margin:0 auto}
.faq-list{border-top:1px solid rgba(16,40,60,.14)}
.faq details{border-bottom:1px solid rgba(16,40,60,.14)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 4px;font-size:19px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq-mark{position:relative;width:16px;height:16px;flex:none}
.faq-mark::before,.faq-mark::after{content:"";position:absolute;inset:7px 0 auto;height:2px;background:currentColor;transition:rotate .25s var(--ease-out)}
.faq-mark::after{rotate:90deg}
.faq details[open] .faq-mark::after{rotate:0deg}
.faq details p{padding:0 4px 24px;max-width:62ch;color:var(--ink-soft)}
/* Contacto: franja de papel salvia a todo el ancho, rasgada arriba y abajo (una sola capa). */
.contact-band{position:relative;z-index:2;margin-bottom:clamp(8px,2vw,24px);filter:drop-shadow(0 -3px 4px rgba(30,20,15,.07)) drop-shadow(0 4px 6px rgba(30,20,15,.09))}
.contact-sheet{--t:30px;background:#d5e6d7;padding:calc(var(--t) + clamp(40px,5vw,64px)) var(--gutter);
  -webkit-mask:url('/images/landing/recortes/edge-top.png') -640px 0/auto var(--t) repeat-x,linear-gradient(#000 0 0) center/100% calc(100% - 2 * var(--t) + 2px) no-repeat,url('/images/landing/recortes/edge-bottom.png') -120px 100%/auto var(--t) repeat-x;
          mask:url('/images/landing/recortes/edge-top.png') -640px 0/auto var(--t) repeat-x,linear-gradient(#000 0 0) center/100% calc(100% - 2 * var(--t) + 2px) no-repeat,url('/images/landing/recortes/edge-bottom.png') -120px 100%/auto var(--t) repeat-x}
.contact-inner{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:32px}
.contact-inner h2{font-size:clamp(1.8rem,1.3rem + 1.6vw,2.6rem)}
.contact-inner p{margin-top:8px;font-size:18px;color:var(--ink-soft)}
.button-whatsapp{background:var(--pl-color-green-700);flex:none;white-space:nowrap;min-height:54px;padding:0 26px}
.button-whatsapp:hover{background:var(--pl-color-green-800)}

/* ---------- Pie ----------
   Colegio pegado al borde izquierdo y asentado detrás de la franja; el niño corre
   por delante y pisa la franja (profundidad). El contenido va libre, a la derecha. */
.footer{--band:112px;--school:min(47vw,680px);position:relative;padding-top:clamp(56px,7vw,96px);overflow:hidden}
/* Colegio y niño comparten un contenedor del tamaño del colegio: el niño se ancla en
   porcentajes a un punto del edificio (--kid-x = centro del niño) y escalan juntos. */
.footer-scene{--kid-x:95%;position:absolute;left:-1.5vw;bottom:calc(var(--band) - 26px);width:var(--school);aspect-ratio:1000/791}
.footer-school{position:absolute;inset:0;width:100%;z-index:1;filter:drop-shadow(0 1px 1px rgba(40,30,20,.18))}
.footer-kid{position:absolute;left:var(--kid-x);bottom:-11%;width:27%;translate:-50% 0;z-index:4;filter:drop-shadow(0 1px 1px rgba(20,25,30,.3)) drop-shadow(0 4px 8px rgba(20,25,30,.14))}
.footer-content{position:relative;z-index:2;margin-left:auto;margin-right:var(--gutter);width:max-content;max-width:calc(100% - var(--school) - 2 * var(--gutter));min-height:calc(var(--school) * .791 - 26px);padding-bottom:clamp(96px,10vw,150px);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;text-align:right}
.footer-logo{width:150px;height:auto}
.footer-tagline{margin-top:18px;max-width:16ch;margin-left:auto;font-size:clamp(1.7rem,1.2rem + 1.4vw,2.5rem);font-weight:500;line-height:1.1;letter-spacing:-.025em;text-wrap:balance}
.footer-cols{margin-top:clamp(28px,3vw,44px);display:flex;gap:clamp(40px,6vw,88px)}
.footer-cols nav,.footer-cols div{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
/* Explora en 2 × 2: los dos grupos quedan con la misma altura. */
.footer-cols{text-align:right}
.footer-cols nav{display:grid;grid-template-columns:repeat(2,max-content);justify-items:end;column-gap:clamp(28px,3vw,44px);row-gap:10px}
.footer-cols nav .footer-label{grid-column:1/-1;justify-self:end}
.footer-label{font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
.footer-cols a{text-decoration:none;font-size:17px;width:max-content;background:linear-gradient(currentColor 0 0) right bottom/0 1.5px no-repeat;transition:background-size .3s var(--ease-out)}
.footer-cols a:hover{background-size:100% 1.5px}
.footer-band{position:relative;z-index:3;height:var(--band);--edge:var(--navy);background:var(--navy);color:var(--pl-color-blue-200);display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:0 var(--gutter) 26px;font-size:14px}
.footer-band p:last-child{display:flex;gap:24px}
.footer-band a{color:inherit}
.footer-band a:hover{color:#fff}

/* ---------- Acentos de papel ---------- */
.accent{position:absolute;pointer-events:none;filter:drop-shadow(0 6px 8px rgba(16,40,60,.18))}
.seed{position:relative}
.accent-video{width:clamp(70px,9vw,110px);right:-34px;bottom:-30px;z-index:3;rotate:-10deg}

/* ---------- Lo lejano llega después ----------
   landing.js marca .is-near cuando una tarjeta, un panel o los testimonios se acercan a la pantalla. Hasta entonces
   no se piden sus máscaras de crayón, la página del collage, las hojas de cuaderno ni la letra manuscrita. */
.wait-near .card:not(.is-near) .card-brush,.wait-near .persona:not(.is-near) .pc-page{display:none}
.wait-near .voices:not(.is-near) .paper-note{background-image:none}
.wait-near .voices:not(.is-near) .paper-note blockquote{font-family:cursive}

/* ---------- Movimiento (solo con JS y sin «reducir movimiento») ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .cut{animation:paste .8s cubic-bezier(.2,.9,.25,1.1) both}
  .js .prop{animation-name:settle}
  .js .prop-gradas{animation-delay:.05s}.js .prop-banca{animation-delay:.12s}.js .prop-tarima{animation-delay:.19s}
  .js .plant{animation-delay:.3s}
  .js .sticker-mama{animation-delay:.45s}.js .sticker-hermanos{animation-delay:.58s}.js .sticker-amigos{animation-delay:.71s}
  .js .reveal{opacity:0;translate:0 18px;transition:opacity .8s var(--ease-out),translate .8s var(--ease-out)}
  .js .reveal.is-in{opacity:1;translate:0 0}
  .covers-track.is-moving{animation:drift 80s linear infinite}
  .covers:hover .covers-track,.covers:focus-within .covers-track{animation-play-state:paused}
  @supports (animation-timeline:view()){
    .hero-sky{animation:sky-drift linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    .scene{animation:scene-rise linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  }
}
@media (prefers-reduced-motion:reduce){.seed-caret{animation:none}html{scroll-behavior:auto}}
@keyframes menu-in{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes menu-item-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes paste{from{opacity:0;transform:translateY(-10px) rotate(-4deg) scale(1.08)}}
@keyframes settle{from{opacity:0;transform:translateY(14px)}}
@keyframes drift{to{transform:translateX(-50%)}}
@keyframes sky-drift{to{transform:translateY(14%) scale(1.05)}}
@keyframes scene-rise{to{transform:translateY(-40px)}}

/* ---------- Tablet ---------- */
@media (max-width:1020px){
  .nav{gap:24px}
  .figures-list{grid-template-columns:repeat(2,1fr);row-gap:32px}
  .card-generator,.card-plan,.card-progress,.card-more,.card-practice,.card-tutor{grid-column:span 6}
  .card-library{grid-template-columns:1fr}
  .audience-grid{grid-template-columns:1fr;max-width:560px;gap:56px}
  .notes{grid-template-columns:1fr;max-width:520px;gap:40px}
    .note-b{margin-top:0}
}

/* ---------- Mobile ---------- */
@media (max-width:760px){
  body{font-size:16px}
  .header{padding:16px 20px}
  .header.is-solid{padding-block:10px}
  /* Menú a pantalla completa (como la landing anterior): panel azul que se revela por recorte,
     enlaces grandes centrados y el acceso abajo. */
  .menu-button{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-right:-6px;padding:0 6px;border:0;background:none;color:var(--ink);font:500 16px/1 'Circular XX',sans-serif;cursor:pointer;position:relative;z-index:1}
  .header.is-open{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .header.is-open .menu-button{color:#fff}
  .header.is-open .brand-blue{opacity:0}
  .header.is-open .brand-inverse{opacity:1}
  body.menu-open{overflow:hidden}
  .nav{position:fixed;inset:0;z-index:0;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:96px 20px calc(24px + env(safe-area-inset-bottom));background:var(--navy);opacity:0;visibility:hidden;pointer-events:none}
  .nav.is-open{opacity:1;visibility:visible;pointer-events:auto;animation:menu-in 420ms var(--ease-out) both}
  .nav a:not(.button){padding:12px 14px;color:#fff;font-size:clamp(1.75rem,8vw,2.15rem);letter-spacing:-.02em;line-height:1.15;text-align:center;background:none}
  .nav a:not(.button):first-child{margin-top:auto}
  .nav.is-open a{animation:menu-item-in 380ms var(--ease-out) both}
  .nav.is-open a:nth-child(1){animation-delay:90ms}.nav.is-open a:nth-child(2){animation-delay:140ms}.nav.is-open a:nth-child(3){animation-delay:190ms}.nav.is-open a:nth-child(4){animation-delay:240ms}.nav.is-open a:nth-child(5){animation-delay:290ms}
  .nav-access{margin-top:auto;width:100%;min-height:54px;background:#fff;color:var(--navy);font-size:18px}
  .nav-access:hover{background:var(--pl-color-blue-100)}

  .hero{min-height:clamp(640px,100svh,920px)}
  .hero-copy{padding-top:clamp(120px,20vh,180px)}
  .hero h1{font-size:clamp(2.4rem,10.5vw,3.2rem)}
  .seed{display:none}
  .button-hero{display:inline-flex;margin-top:32px;min-height:54px;padding:0 28px;font-size:19px}
  [data-region=costa] .hero-sky{object-position:3% 100%}
  [data-region=sierra] .hero-sky{object-position:50% 100%}
  [data-region=selva] .hero-sky{object-position:97% 100%}
  .cut{display:none}
  [data-region=costa] [data-region-item=costa],[data-region=sierra] [data-region-item=sierra],[data-region=selva] [data-region-item=selva]{display:block}
  .prop-gradas{left:30vw;width:84vw;bottom:-22vw}
  .plant-costa{left:-12vw;width:50vw;bottom:-7vw}
  .sticker-mama{left:46vw;width:46vw;bottom:-3vw}
  .prop-banca{left:12vw;width:96vw;bottom:-15vw}
  .sticker-hermanos{left:28vw;width:58vw;bottom:11vw}
  .prop-tarima{left:22vw;width:112vw;bottom:-30vw}
  .plant-selva{left:-8vw;width:38vw;bottom:-5vw}
  .sticker-amigos{left:33vw;width:60vw;bottom:8vw}
  .figures{margin-top:-20px}
  .figures-list{gap:28px 12px}
  .figures-list span:not([data-count]){font-size:14px}
  .bento{grid-template-columns:1fr}
  .card-generator,.card-plan,.card-progress,.card-more,.card-practice,.card-tutor,.card-library{grid-column:auto}
  .card-generator{order:1}.card-library{order:2}.card-plan{order:3}.card-progress{order:4}.card-more{order:5}.card-practice{order:6}.card-tutor{order:7}
  .card{height:auto;padding:24px;border-radius:24px}
  .card-art{flex:none;height:250px;margin:-24px -24px 0}
  .card-library{padding:0}
  .card-library .card-copy{padding:28px 24px 8px}
  .covers-track img{width:112px;height:168px}
  .covers{padding:20px 0 28px}
  .notes{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:20px;max-width:none;margin:0 calc(-1 * var(--gutter));padding:24px var(--gutter) 32px}
  .paper-note{flex:0 0 82%;scroll-snap-align:center}
  .accent-video{right:-8px;bottom:-24px}
  .faq summary{font-size:17px}
  .contact-inner{flex-direction:column;align-items:stretch;gap:24px}
  .contact-inner .button{width:100%}
  .footer{--school:96vw;--band:96px;padding-top:72px}
  .footer-content{margin:0 var(--gutter);width:auto;max-width:none;align-items:flex-start;text-align:left;min-height:0;padding-bottom:calc(var(--school) * .791 + 12px)}
  .footer-scene{left:-6vw}
  .footer-tagline{margin-left:0}
  .footer-cols nav,.footer-cols div{align-items:flex-start}
  .footer-cols{flex-direction:column;gap:28px;width:100%;text-align:left}
  .footer-cols nav .footer-label{justify-self:start}
  .footer-cols a{background-position:left bottom}
  .footer-cols nav,.footer-cols div{display:grid;grid-template-columns:1fr 1fr;justify-items:start;column-gap:16px;row-gap:10px}
  .footer-cols .footer-label{grid-column:1/-1}
  .footer-band{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:6px;padding-bottom:20px}
}