/* Aprende con Silvia — portada «libro pop-up» (assets/js/libro.js).
   El libro es el protagonista: fondo cálido y liso, texto editorial al
   lado (o debajo en pantallas estrechas) y una sola cosa a la vez en cada
   página. Sin animación (o sin WebGL) se ven páginas fijas en columna. */

/* ---------- Barra superior ---------- */
.libro-barra{position:fixed;inset:0 0 auto;z-index:40;background:rgba(250,246,239,.86);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(28,36,51,.06)}
.libro-barra .topnav{padding:12px 0}
.libro-barra .topnav .brand-mark{color:var(--ink)}
.libro-barra .topnav .links a{color:var(--ink-soft)}
.libro-barra .topnav .links a:hover{color:var(--ink)}
.libro-barra .topnav .links a::after{background:var(--brand-500)}

/* ---------- Escenario ---------- */
.libro{position:relative;background:#f4eee4}
.libro-escenario{position:relative;overflow:hidden;
  background:radial-gradient(ellipse 72% 68% at 64% 50%,#fffaf2 0%,var(--fondo,#ffe7c4) 58%,var(--fondo-borde,#ecd2ad) 100%)}
/* Manchas de luz de colores que flotan despacio detrás del libro */
.libro-mancha{position:absolute;z-index:0;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none;mix-blend-mode:multiply}
.libro-mancha.m1{width:42vw;height:42vw;left:44%;top:-18%;background:#a5b4fc;animation:mancha1 22s ease-in-out infinite alternate}
.libro-mancha.m2{width:34vw;height:34vw;left:70%;top:52%;background:#5eead4;animation:mancha2 26s ease-in-out infinite alternate}
.libro-mancha.m3{width:30vw;height:30vw;left:-8%;top:60%;background:#fdba74;animation:mancha1 30s ease-in-out infinite alternate-reverse}
@keyframes mancha1{to{transform:translate(-6vw,8vh) scale(1.12)}}
@keyframes mancha2{to{transform:translate(-8vw,-6vh) scale(.9)}}
html.libro-vuelo .libro-escenario{position:sticky;top:0;height:100vh;height:100lvh}
.libro-gl{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.libro-sombra{position:absolute;left:0;top:0;z-index:1;width:0;height:0;border-radius:12px;pointer-events:none;
  background:rgba(60,42,20,.28);filter:blur(28px);translate:10px 22px;display:none}
html.libro-vuelo .libro-sombra{display:block}

/* ---------- Textos ---------- */
.libro-textos{position:absolute;inset:0;z-index:5;pointer-events:none}
/* Se centran con «translate» porque «transform» lo anima libro.js. */
.libro-txt{position:absolute;left:max(16px,4vw);top:calc(50% + 30px);translate:0 -50%;width:min(36vw,460px);
  display:flex;flex-direction:column;align-items:flex-start;pointer-events:none}
html.libro-vuelo .libro-txt{opacity:0}
.libro-txt > *{pointer-events:auto}
.libro-ante{margin:0;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--acento,var(--brand-600))}
.libro-ante .num{color:var(--ink-soft);margin-right:10px;letter-spacing:.06em}
.libro-txt h1,.libro-txt h2{color:var(--ink);letter-spacing:-.015em}
.libro-txt h1{font-size:clamp(34px,3.7vw,54px);line-height:1.04;margin-top:14px}
.libro-txt h1 em{font-style:normal;color:var(--acento,var(--brand-600))}
.libro-txt h1[data-split] em.w{animation:none}
.libro-txt h2{font-size:clamp(28px,2.9vw,42px);line-height:1.08;margin-top:12px}
.libro-txt .lead{color:var(--ink-soft);font-size:17px;line-height:1.6;margin-top:16px;max-width:420px}
.libro-meta{margin:12px 0 0;color:var(--ink-soft);font-size:14px}
.libro-nota{margin:8px 0 0;color:var(--ink-soft);font-size:14px}
.libro-sello{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;padding:7px 14px 7px 12px;border-radius:999px;font-size:14px;font-weight:800;
  color:var(--acento,var(--teal-700));background:rgba(255,255,255,.72);box-shadow:0 1px 0 rgba(28,36,51,.06)}
.libro-sello::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.libro-txt .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:26px}
.btn-texto{font-weight:800;font-size:15px;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--acento,var(--brand-300));padding-bottom:2px}
.btn-texto:hover{color:var(--acento,var(--brand-600))}

/* La tarjeta de ejemplo vive en la página de Primaria, bajo su texto */
.libro-ejemplo{margin-top:22px;width:min(100%,320px)}
.libro-ejemplo .hero-card{padding:16px 18px;box-shadow:0 18px 40px -22px rgba(28,36,51,.45)}
.libro-ejemplo .hero-card .me{margin:10px 0 12px}

/* ---------- Kiwi: en la esquina, del lado del texto, todo el viaje ---------- */
.libro-kiwi{position:absolute;z-index:6;width:100px;display:none;left:max(14px,3vw);bottom:clamp(10px,2.4vh,26px)}
html.libro-vuelo .libro-kiwi{display:block}
.libro-kiwi .hero-kiwi{position:relative;left:auto;bottom:auto;width:100px}
.libro-kiwi .hero-bubble{left:96px;bottom:58px;width:max-content;max-width:calc(min(36vw,460px) - 120px)}

/* ---------- Ruta: una línea discreta de páginas ---------- */
.libro-ruta{position:absolute;z-index:7;right:clamp(10px,1.8vw,26px);top:50%;transform:translateY(-50%);display:none;flex-direction:column;gap:2px}
html.libro-vuelo .libro-ruta{display:flex}
.libro-ruta button{position:relative;width:26px;height:26px;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.libro-ruta button::before{content:"";width:2px;height:16px;border-radius:2px;background:rgba(28,36,51,.18);transition:background .3s,height .3s}
.libro-ruta button.activo::before{background:var(--brand-600);height:22px}
.libro-ruta span{position:absolute;right:28px;white-space:nowrap;font-size:12px;font-weight:700;color:var(--ink);background:#fff;
  padding:3px 9px;border-radius:6px;box-shadow:var(--shadow-sm);opacity:0;translate:4px 0;transition:opacity .2s,translate .2s;pointer-events:none}
.libro-ruta button:hover span,.libro-ruta button:focus-visible span{opacity:1;translate:0 0}
.libro-pista{position:absolute;z-index:7;left:50%;bottom:18px;translate:-50% 0;display:none;transition:opacity .4s}
html.libro-vuelo .libro-pista{display:block}
.libro-pista i{display:block;width:2px;height:34px;background:linear-gradient(var(--ink-soft),transparent);opacity:.5;animation:pista 2s ease-in-out infinite;transform-origin:top}
@keyframes pista{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.libro:not([data-pagina="0"]) .libro-pista,.libro--fuera .libro-ruta{opacity:0;pointer-events:none}

/* ---------- Texto al lado (pantallas apaisadas) ---------- */
html.libro-vuelo .libro--lado .libro-txt{left:max(14px,3.4vw);width:calc(min(36vw,470px) - 10px);
  top:calc(var(--barra-alto,64px) + (100% - var(--barra-alto,64px) - 120px) / 2);
  max-height:calc(100vh - var(--barra-alto,64px) - 150px);overflow:hidden}

/* ---------- Libro arriba y texto debajo (pantallas estrechas o altas) ---------- */
html.libro-vuelo .libro:not(.libro--lado) .libro-txt{top:calc(var(--libro-abajo,50vh) + 20px);translate:0 0;left:16px;right:40px;width:auto;
  max-height:calc(100vh - var(--libro-abajo,50vh) - 30px);overflow:hidden}
.libro:not(.libro--lado) .libro-txt h1{font-size:clamp(24px,6.6vw,34px);margin-top:8px}
.libro:not(.libro--lado) .libro-txt h2{font-size:clamp(22px,5.8vw,30px);margin-top:6px}
.libro:not(.libro--lado) .libro-txt .lead{font-size:14.5px;margin-top:8px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.libro:not(.libro--lado) .libro-txt .cta-row{margin-top:14px}
.libro:not(.libro--lado) .libro-sello{margin-top:10px;padding-top:8px}
html.libro-vuelo .libro:not(.libro--lado) .libro-nota,
html.libro-vuelo .libro:not(.libro--lado) .libro-ejemplo{display:none}
.libro:not(.libro--lado) .libro-kiwi,.libro:not(.libro--lado) .libro-kiwi .hero-kiwi{width:58px}
.libro:not(.libro--lado) .libro-kiwi{left:auto;right:42px;bottom:10px}
.libro:not(.libro--lado) .libro-kiwi .hero-bubble{display:none}
.libro:not(.libro--lado) .libro-ruta{right:2px}
.libro:not(.libro--lado) .libro-ruta span,html.libro-vuelo .libro:not(.libro--lado) .libro-pista{display:none}
/* Pantallas bajas con el texto al lado */
@media (max-height:680px){
  .libro--lado .libro-txt h1{font-size:clamp(26px,5vh,40px);margin-top:8px}
  .libro--lado .libro-txt h2{font-size:clamp(22px,4.4vh,34px)}
  .libro--lado .libro-txt .lead{font-size:14.5px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  html.libro-vuelo .libro--lado .libro-nota,html.libro-vuelo .libro--lado .libro-ejemplo{display:none}
}

/* ---------- Sin animación: páginas fijas una tras otra ---------- */
html:not(.libro-vuelo) .libro-textos{position:relative;display:grid;gap:56px;padding:110px 16px 70px;max-width:980px;margin:0 auto}
html:not(.libro-vuelo) .libro-txt{position:relative;left:auto;top:auto;translate:none;width:auto;opacity:1}
.libro-fig{display:none;margin:0 0 18px;width:100%}
html:not(.libro-vuelo) .libro-fig{display:block}
.libro-fig img{width:100%;height:auto;border-radius:10px;display:block;box-shadow:0 20px 40px -24px rgba(60,42,20,.5)}
.libro-txt--portada .libro-fig{max-width:340px}
html:not(.libro-vuelo) .libro-kiwi,html:not(.libro-vuelo) .libro-ruta,html:not(.libro-vuelo) .libro-pista{display:none}

/* Pantallas bajas: Kiwi más pequeño y su hueco reservado bajo el texto,
   para que ni él ni su bocadillo pisen el texto ni el libro. */
@media (max-height:700px){
  .libro--lado .libro-kiwi,.libro--lado .libro-kiwi .hero-kiwi{width:74px}
  .libro--lado .libro-kiwi .hero-bubble{left:70px;bottom:34px;font-size:13px;max-width:calc(min(36vw,460px) - 90px)}
  html.libro-vuelo .libro--lado .libro-txt{top:calc(var(--barra-alto,64px) + (100% - var(--barra-alto,64px) - 150px) / 2);
    max-height:calc(100vh - var(--barra-alto,64px) - 160px)}
  .libro--lado .libro-txt .cta-row{margin-top:16px;gap:12px}
}

/* ---------- Contenido de cada página (datos reales del currículo y el catálogo) ---------- */
html.libro-vuelo .libro--lado .libro-txt{width:calc(min(40vw,540px) - 10px)}
.libro-cifras{display:flex;gap:30px;margin:22px 0 0;padding:0}
.libro-cifras div{display:flex;flex-direction:column}
.libro-cifras dt{font-family:var(--font-display);font-size:40px;line-height:1;color:var(--acento,var(--brand-600));font-weight:800}
.libro-cifras dd{margin:4px 0 0;font-size:13px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em}
.libro-cursos{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:14px 0 0;padding:0}
.libro-cursos li{font-size:13px;font-weight:800;color:var(--acento,var(--ink));background:rgba(255,255,255,.75);padding:4px 10px;border-radius:999px}
.libro-sub{margin:20px 0 8px;font-family:var(--font-ui);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.libro-areas{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;list-style:none;margin:0;padding:0;width:100%}
.libro-areas li{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.3;color:var(--ink)}
.libro-areas li span{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.8);font-size:15px}
.libro-ejemplos{list-style:none;margin:0;padding:0;width:100%;display:grid;gap:6px}
.libro-ejemplos li{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:700;color:var(--ink);
  background:rgba(255,255,255,.62);padding:8px 12px;border-radius:10px}
.libro-ejemplos .tipo{flex:none;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;
  background:var(--acento,var(--brand-600));padding:3px 8px;border-radius:6px}
.libro-pares{display:grid;grid-template-columns:1fr 1fr;gap:8px;list-style:none;margin:18px 0 0;padding:0;width:100%}
.libro-pares li{background:rgba(255,255,255,.72);border-radius:10px;padding:9px 12px;font-size:14.5px;font-weight:700;color:var(--ink)}
.libro-pares li b{color:var(--acento,var(--brand-600));margin:0 4px}
.libro-pasos{list-style:none;counter-reset:paso;margin:18px 0 0;padding:0;display:grid;gap:10px}
.libro-pasos li{counter-increment:paso;display:flex;align-items:center;gap:12px;font-size:15px;font-weight:700;color:var(--ink)}
.libro-pasos li::before{content:counter(paso);flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--acento,var(--brand-600));color:#fff;font-size:13px;font-weight:800}
.libro-txt--final .libro-ejemplo{margin-top:18px}
.libro-txt .libro-sello{margin-top:16px}

/* Pantallas no muy altas: se recorta lo secundario antes que lo principal */
@media (max-height:820px){
  .libro--lado .libro-ejemplos li:nth-child(n+3){display:none}
  .libro--lado .libro-txt--final .libro-ejemplo{display:none}
  .libro-cifras dt{font-size:32px}
}
@media (max-height:700px){
  .libro--lado .libro-ejemplos,.libro--lado .libro-sub + .libro-ejemplos{display:none}
  .libro--lado .libro-areas{grid-template-columns:1fr 1fr 1fr}
  .libro--lado .libro-areas li{font-size:0;gap:0}
  .libro--lado .libro-areas li span{font-size:15px}
  .libro--lado .libro-txt--portada .lead{-webkit-line-clamp:3}
}
/* Texto debajo del libro (móvil): solo cursos, iconos de áreas y recuento */
.libro:not(.libro--lado) .libro-areas{display:flex;flex-wrap:wrap;gap:6px}
.libro:not(.libro--lado) .libro-areas li{font-size:0;gap:0}
.libro:not(.libro--lado) .libro-areas li span{font-size:15px}
html.libro-vuelo .libro:not(.libro--lado) .libro-ejemplos,
html.libro-vuelo .libro:not(.libro--lado) .libro-pares li:nth-child(n+3),
html.libro-vuelo .libro:not(.libro--lado) .libro-txt--final .libro-ejemplo{display:none}
.libro:not(.libro--lado) .libro-sub{margin:10px 0 6px}
.libro:not(.libro--lado) .libro-cifras{gap:20px;margin-top:10px}
.libro:not(.libro--lado) .libro-cifras dt{font-size:26px}
@media (max-height:700px){
  .libro--lado .libro-areas{display:flex;flex-wrap:wrap;gap:6px}
  .libro--lado .libro-cursos li{font-size:12px;padding:3px 8px}
  .libro--lado .libro-sub{margin:12px 0 6px}
  .libro--lado .libro-txt .libro-sello{margin-top:10px}
}