/* Las páginas de la web (montadas con el kit de piezas de abajo) y el blog (artículos, portada del blog y categorías).
   Usa las letras, colores y botones de reddu.css: aquí solo va cómo se colocan las cosas.
   Cada categoría del blog lleva el color de uno de los cuatro ejes del juego (pastel de fondo, saturado de acento). */

.color-menta   { --pastel: var(--menta-pastel);   --acento: var(--menta);    --acento-texto: var(--menta-texto); }
.color-rosa    { --pastel: var(--rosa-pastel);    --acento: var(--magenta);  --acento-texto: var(--magenta-texto); }
.color-crema   { --pastel: var(--crema-pastel);   --acento: var(--amarillo); --acento-texto: var(--amarillo-texto); }
.color-lavanda { --pastel: var(--lavanda-pastel); --acento: var(--azul);     --acento-texto: var(--azul); }

/* ---------- Texto largo (artículos y páginas): cómodo para quien lee con dislexia ---------- */
.prosa { font-size: 18px; line-height: 1.7; }
.prosa > * { max-width: 72ch; }
.prosa h2 { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -.015em; margin: 1.6em 0 .5em; }
.prosa h3 { font-size: clamp(22px, 2.2vw, 27px); margin: 1.5em 0 .4em; }
.prosa h4 { font: 700 19px/1.35 var(--cuerpo); margin: 1.4em 0 .3em; }
.prosa > :first-child { margin-top: 0; }
.prosa p, .prosa li { text-align: left; hyphens: none; }
.prosa ul, .prosa ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prosa li { margin: .35em 0; }
.prosa li::marker { color: var(--acento, var(--magenta)); font-weight: 700; }
.prosa a { color: inherit; text-decoration-color: var(--acento, var(--magenta)); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prosa a:hover { color: var(--acento-texto, var(--magenta-texto)); }
.prosa a.boton { text-decoration: none; color: var(--texto); }
.prosa strong { font-weight: 700; }
.prosa blockquote { margin: 1.6em 0; padding: 20px 24px; border-radius: var(--radio); background: var(--pastel, var(--rosa-pastel)); font-size: 19px; }
.prosa blockquote > :last-child { margin-bottom: 0; }
.prosa figure { margin: 1.8em 0; max-width: 100%; }
.prosa figure img, .prosa figure video { display: block; border-radius: var(--radio); width: auto; max-width: 100%; height: auto; max-height: 560px; object-fit: contain; }
.prosa figcaption { font-size: 15px; color: var(--gris); margin-top: 10px; }
.prosa table { border-collapse: collapse; width: 100%; max-width: 100%; font-size: 16px; margin: 1.5em 0; display: block; overflow-x: auto; }
.prosa th, .prosa td { border: 1px solid var(--linea); padding: 10px 12px; text-align: left; vertical-align: top; }
.prosa th { background: var(--suave); }
.prosa iframe { border: 0; }
.video { position: relative; aspect-ratio: 16 / 9; margin: 1.8em 0; border-radius: var(--radio); overflow: hidden; background: var(--negro); max-width: 100% !important; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- El kit de las páginas (la estética de la portada v5, en piezas) ----------
   Cada página se monta con estas piezas, como con Lego: portada (.pg-portada), secciones (.pg-seccion),
   texto con imagen (.pg-dos), tarjetas, pasos, cifras, opiniones, logos, galería, preguntas y el final (.pg-final).
   El movimiento lo pone movimiento.js (GSAP + Lenis, en /vendor); sin JS, o en el editor, todo se ve quieto.
   La guía de cada pieza, con su HTML: web/LEEME-kit.md */
:root { --suave-e: cubic-bezier(.16, 1, .3, 1); --crema-web: #FBFAF6; }
.mano { font: 400 1em/1 var(--mano); color: var(--magenta-texto); display: inline-block; rotate: -2deg; letter-spacing: 0; }
.antes { display: block; margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--gris); letter-spacing: .02em; }
.sub { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: #333; max-width: 46ch; margin: 0 0 1em; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin: 28px 0 0; }
.centrada { text-align: center; }
.centrada .sub, .centrada .pg-cabeza, .centrada h2, .centrada h1 { margin-inline: auto; }
.centrada .acciones { justify-content: center; }
/* las palabras de los titulares suben desde detrás de una línea (lo prepara movimiento.js) */
.pal { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.pal > span { display: inline-block; will-change: transform; }

/* Portada de cada página: blanca, con el brillo menta de abajo, como la de inicio */
.pg-portada { position: relative; overflow: hidden; background: var(--blanco); padding: clamp(56px, 8vw, 120px) 0 clamp(64px, 8vw, 120px); }
.pg-portada::before { content: ""; position: absolute; left: 50%; bottom: -45%; width: 130%; height: 80%; translate: -50% 0; pointer-events: none;
  background: radial-gradient(closest-side, var(--brillo, rgba(82,225,199,.18)), transparent); }
.pg-portada-in { position: relative; z-index: 1; display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
.pg-portada.con-visual .pg-portada-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.pg-portada h1 { font-size: clamp(42px, 5.8vw, 84px); line-height: .98; letter-spacing: -.02em; max-width: 15ch; margin: 0 0 18px; }
.pg-portada.centrada h1 { max-width: 17ch; }
.pg-portada .sub { font-size: clamp(18px, 1.6vw, 21px); }
.pg-portada-visual { position: relative; }
.pg-portada-visual .marco img { max-height: 520px; object-fit: cover; }
/* un grupo de personajes en vez de foto: tres que se solapan, el del centro más grande */
.pg-pjs { display: flex; justify-content: center; align-items: flex-end; min-height: 320px; }
.pg-pjs img { width: clamp(120px, 14vw, 200px); height: auto; max-width: none; filter: drop-shadow(0 18px 20px rgba(0,0,0,.18)); }
.pg-pjs img:nth-child(2) { width: clamp(150px, 18vw, 250px); margin: 0 -28px; position: relative; z-index: 1; }
/* premios pequeños que flotan alrededor (decoración) */
.pg-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.pg-deco img { position: absolute; left: var(--x); top: var(--y); width: var(--t, 64px); height: auto; max-width: none; filter: drop-shadow(0 12px 14px rgba(0,60,50,.18)); }
@media (max-width: 860px) { .pg-deco { display: none; } }

/* Secciones: blanco o crema (el fondo del mapa de la app); una oscura para lo que tiene que destacar */
.pg-seccion { position: relative; padding: clamp(80px, 10vw, 136px) 0; background: var(--blanco); }
.pg-seccion.crema { background: var(--crema-web); }
.pg-seccion.oscura { background: #0b0b0b; color: var(--blanco); }
.pg-seccion.oscura .sub, .pg-seccion.oscura p { color: #d6d6d6; }
.pg-seccion.oscura .antes { color: var(--menta); }
.pg-seccion.oscura .mano { color: var(--menta); }
.pg-seccion:not(.crema):not(.oscura) + .pg-seccion:not(.crema):not(.oscura) { padding-top: 0; }
.pg-seccion.crema + .pg-seccion.crema { padding-top: 0; }
.pg-cabeza { max-width: 780px; margin-bottom: clamp(40px, 5vw, 64px); }
.pg-cabeza.centrada, .centrada > .pg-cabeza { margin-inline: auto; }
.pg-cabeza h2, .pg-texto h2 { font-size: clamp(34px, 4.2vw, 60px); line-height: 1; letter-spacing: -.015em; margin: 0 0 16px; }
.pg-cabeza > :last-child, .pg-texto > :last-child { margin-bottom: 0; }
.pg-cabeza .sub { color: var(--gris); }
.pg-seccion h3 { letter-spacing: -.01em; }
.pg-texto p { font-size: 18px; line-height: 1.6; color: #333; max-width: 52ch; }
.pg-texto h3 { font-size: clamp(22px, 2.2vw, 28px); margin: 1.4em 0 .4em; }
.pg-texto h3:first-child { margin-top: 0; }
.pg-texto ul { padding-left: 1.2em; font-size: 17px; color: #333; }
.pg-texto li { margin: .35em 0; }
.pg-texto li::marker { color: var(--magenta); }

/* Texto con imagen al lado (.al-reves: la imagen a la izquierda) */
.pg-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.pg-dos + .pg-dos { margin-top: clamp(72px, 9vw, 120px); }
.pg-dos.al-reves .pg-visual { order: -1; }
.pg-visual { position: relative; }

/* El marco de las fotos y capturas: esquinas de la app y sombra suave. .limpio: sin marco (dibujos con fondo transparente) */
.marco { position: relative; margin: 0; border-radius: 28px; overflow: hidden; background: #f1efe8; box-shadow: 0 34px 60px -38px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.04); }
.marco img, .marco video { display: block; width: 100%; height: auto; max-width: 100%; }
.marco.limpio { border-radius: 0; overflow: visible; background: none; box-shadow: none; }
.marco.limpio img { max-height: 560px; width: auto; margin-inline: auto; object-fit: contain; }
.marco figcaption { padding: 12px 18px 16px; font-size: 15px; color: var(--gris); background: var(--blanco); }
.pg-video { aspect-ratio: 16 / 9; background: var(--negro); }
.pg-video video, .pg-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }

/* Tarjetas: una por idea, cada una con el color de un eje del juego */
.pg-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.pg-tarjeta { --c: var(--menta); --p: var(--menta-pastel); position: relative; border-radius: 28px; padding: 30px 28px 32px; background: var(--p);
  transition: transform .7s var(--suave-e), box-shadow .7s var(--suave-e); }
.pg-tarjeta:nth-child(4n+2) { --c: var(--magenta); --p: var(--rosa-pastel); }
.pg-tarjeta:nth-child(4n+3) { --c: var(--amarillo); --p: var(--crema-pastel); }
.pg-tarjeta:nth-child(4n+4) { --c: var(--azul); --p: var(--lavanda-pastel); }
.pg-tarjeta:hover { transform: translateY(-8px); box-shadow: 0 30px 50px -34px rgba(0,0,0,.35); }
.pg-tarjeta::before { content: ""; display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--c); margin-bottom: 22px; box-shadow: 0 0 0 6px rgba(255,255,255,.7); }
.pg-tarjeta.con-icono::before { display: none; }
.pg-tarjeta > img:first-child { display: block; width: 64px; height: 64px; object-fit: contain; margin-bottom: 18px; }
.pg-tarjeta h3 { font-size: clamp(21px, 1.9vw, 25px); line-height: 1.12; margin: 0 0 10px; }
.pg-tarjeta p, .pg-tarjeta li { font-size: 16px; line-height: 1.55; color: #2a2a2a; }
.pg-tarjeta p { margin: 0 0 .7em; } .pg-tarjeta > :last-child { margin-bottom: 0; }
.pg-tarjeta ul { padding-left: 1.1em; margin: 0; }
.pg-tarjeta .marco { margin-top: 20px; border-radius: 18px; }
.oscura .pg-tarjeta { background: #1a1a1a; } .oscura .pg-tarjeta p, .oscura .pg-tarjeta li { color: #d6d6d6; } .oscura .pg-tarjeta::before { box-shadow: none; }
.crema .pg-tarjeta.blanca, .pg-tarjeta.blanca { background: var(--blanco); box-shadow: 0 0 0 1px rgba(0,0,0,.05); }

/* Pasos numerados, unidos por una línea que se va llenando al bajar */
.pg-pasos { --avance: 0; position: relative; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px clamp(20px, 3vw, 40px); counter-reset: paso; }
.pg-pasos::before, .pg-pasos::after { content: ""; position: absolute; left: 26px; right: 26px; top: 25px; height: 2px; background: #e6e3d9; }
.pg-pasos::after { background: var(--negro); transform-origin: 0 50%; transform: scaleX(var(--avance)); }
.pg-paso { position: relative; z-index: 1; counter-increment: paso; }
.pg-paso::before { content: counter(paso); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--negro); color: var(--blanco);
  font: 900 22px/1 var(--titular); margin-bottom: 22px; box-shadow: 0 0 0 8px var(--fondo-paso, var(--blanco)); }
.crema .pg-paso { --fondo-paso: var(--crema-web); }
.pg-paso h3 { font-size: clamp(21px, 1.9vw, 25px); margin: 0 0 8px; }
.pg-paso p { font-size: 16px; color: #333; margin: 0 0 .6em; }
.pg-paso .marco { margin-top: 18px; border-radius: 18px; }
@media (max-width: 760px) {
  .pg-pasos { grid-template-columns: 1fr; }
  .pg-pasos::before, .pg-pasos::after { left: 25px; right: auto; top: 26px; bottom: 26px; width: 2px; height: auto; }
  .pg-pasos::after { transform-origin: 50% 0; transform: scaleY(var(--avance)); }
  .pg-paso { padding-left: 76px; } .pg-paso::before { position: absolute; left: 0; top: 0; }
}

/* Cifras grandes («+1.500»), que cuentan al aparecer */
.pg-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px clamp(24px, 4vw, 56px); }
.pg-cifra { border-top: 2px solid currentColor; padding-top: 22px; }
.pg-cifra strong { display: block; font: 900 clamp(56px, 6.4vw, 96px)/.95 var(--titular); letter-spacing: -.03em; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.pg-cifra span { display: block; font-size: 16px; line-height: 1.5; color: var(--gris); max-width: 30ch; }
.oscura .pg-cifra span { color: #bdbdbd; }

/* Opiniones de familias, docentes y profesionales */
.pg-opiniones { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; list-style: none; padding: 0; margin: 0; }
.pg-opiniones:has(> :nth-child(4):last-child) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.pg-opinion { position: relative; margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 34px 30px 28px; border-radius: 28px; background: var(--crema-web); }
.crema .pg-opinion { background: var(--blanco); }
.pg-opinion::before { content: "“"; position: absolute; right: 26px; top: 6px; font: 900 96px/1 var(--titular); color: var(--magenta); opacity: .9; }
.pg-opinion:nth-child(3n+2)::before { color: var(--menta); } .pg-opinion:nth-child(3n)::before { color: var(--amarillo); }
.pg-opinion blockquote { margin: 0; font-size: 18px; line-height: 1.55; color: #1a1a1a; padding-right: 30px; }
.pg-opinion blockquote p { margin: 0; }
.pg-opinion figcaption { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--gris); line-height: 1.35; }
.pg-opinion figcaption img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.pg-opinion figcaption b { display: block; font-size: 16px; color: var(--negro); }

/* Cinta de logos de los centros (reddu.js la duplica para que gire sin cortes) */
.logos-cinta { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.logos-pista { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 64px; width: max-content; animation: cintaLogos 40s linear infinite; }
@keyframes cintaLogos { to { transform: translateX(calc(-50% - 32px)) } }
.logos-pista img { height: 52px; width: auto; max-width: 200px; object-fit: contain; display: block; filter: grayscale(1); opacity: .7; transition: filter .3s, opacity .3s; }
.logos-pista li:hover img { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .logos-pista { flex-wrap: wrap; justify-content: center; width: auto; gap: 28px 40px; } .logos-pista [aria-hidden="true"] { display: none; } .logos-cinta { -webkit-mask-image: none; mask-image: none; } }
.en-editor .logos-pista { animation: none; flex-wrap: wrap; width: auto; }
/* pocos logos (menos de 5): en fila, quietos */
.logos-fila { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px clamp(32px, 6vw, 80px); }
.logos-fila img { height: 60px; width: auto; max-width: 220px; object-fit: contain; display: block; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; }
.logos-fila li:hover img { filter: none; opacity: 1; }
.pg-logos { padding: clamp(56px, 7vw, 88px) 0; } .pg-logos .antes { margin-bottom: 28px; }
/* la misma cinta, con fotos grandes (las fichas de alumnos, capturas…) en vez de logos */
.logos-pista.fotos { gap: 18px; animation: cintaFotos 80s linear infinite; }
@keyframes cintaFotos { to { transform: translateX(calc(-50% - 9px)) } }
.logos-pista.fotos img { height: clamp(220px, 26vw, 320px); max-width: none; filter: none; opacity: 1; border-radius: 22px; box-shadow: 0 24px 40px -30px rgba(0,0,0,.45); }
.logos-cinta:hover .logos-pista.fotos { animation-play-state: paused; }

/* Galería de capturas (pantallas del juego o de la plataforma): en el móvil se desliza de lado */
.pg-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.pg-galeria .marco { border-radius: 20px; }
.pg-galeria .marco img { aspect-ratio: auto; }
@media (max-width: 760px) {
  .pg-galeria { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; margin-inline: -16px; padding-inline: 16px; }
  .pg-galeria > * { flex: 0 0 62%; scroll-snap-align: center; }
}

/* Separación extra entre bloques de una misma sección */
.pg-separa { margin-top: clamp(56px, 7vw, 96px); }
.pg-pasos + .pg-dos { margin-top: clamp(72px, 9vw, 120px); }

/* Lista con el check menta (.pg-lista-fila: en fila, para el final) */
.pg-lista { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.pg-lista li { position: relative; padding-left: 38px; font-size: 17px; line-height: 1.5; }
.pg-lista-fila { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 6px auto 22px; }
.pg-lista li::before { content: ""; position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--menta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/15px no-repeat; }

/* Una frase grande, sola (una cita o la misión) */
.pg-frase { font: 900 clamp(30px, 3.8vw, 52px)/1.1 var(--titular); letter-spacing: -.015em; max-width: 24ch; margin: 0; text-wrap: balance; }
.centrada .pg-frase { margin-inline: auto; }

/* Tabla sencilla (dos o tres columnas), con la sombra de las tarjetas */
.pg-tabla-caja { max-width: 860px; margin: 0 auto; overflow-x: auto; border-radius: 28px; background: var(--blanco); box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 40px 70px -50px rgba(0,0,0,.4); }
.pg-tabla { width: 100%; border-collapse: collapse; font-size: 17px; }
.pg-tabla th, .pg-tabla td { padding: 18px 28px; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.pg-tabla thead th { font: 600 14px/1.2 var(--cuerpo); color: var(--gris); letter-spacing: .02em; padding-top: 22px; }
.pg-tabla tbody th { font-weight: 500; }
.pg-tabla tr:last-child th, .pg-tabla tr:last-child td { border-bottom: 0; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: 15px; }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chip-nubo { background: var(--lavanda-pastel); color: var(--azul); }
.chip-reddu { background: var(--menta-pastel); color: var(--menta-texto); }
.pie-video { margin: 12px 0 0; font-size: 15px; color: var(--gris); }
.oscura .pie-video { color: #bdbdbd; }
.pg-opinion .inicial { width: 48px; height: 48px; border-radius: 50%; background: var(--menta); color: var(--negro); display: grid; place-items: center; font: 900 20px/1 var(--titular); flex: none; }
.pg-opinion:nth-child(3n+2) .inicial, li:nth-child(3n+2) > .pg-opinion .inicial { background: var(--amarillo); }
li:nth-child(3n) > .pg-opinion .inicial { background: var(--rosa-pastel); }

/* Escuelas: Nubo + Reddu, dos tarjetas que se juntan */
.es-union { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 340px; }
.union-tarjeta { position: relative; width: clamp(170px, 17vw, 230px); aspect-ratio: 4 / 5; border-radius: 28px; padding: 22px; display: flex; flex-direction: column; justify-content: flex-start; gap: 8px;
  box-shadow: 0 40px 60px -40px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.04); }
.union-tarjeta span { font-size: 14px; font-weight: 600; }
.union-nubo { background: var(--blanco); rotate: -5deg; }
.union-nubo img { width: 110px; height: auto; }
.union-nubo span { color: var(--azul); }
.union-reddu { background: var(--menta); rotate: 4deg; overflow: visible; }
.union-reddu b { font: 900 30px/1 var(--titular); letter-spacing: -.02em; }
.union-pj { position: absolute; right: -18px; bottom: -14px; width: 70%; max-width: none; filter: drop-shadow(0 16px 18px rgba(0,0,0,.25)); }
.union-lista { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 7px; }
.union-lista li { padding: 8px 12px; border-radius: 12px; background: var(--lavanda-pastel); color: var(--azul); font-size: 13px; font-weight: 600; }
.union-mas { font: 900 44px/1 var(--titular); color: var(--gris); }
/* Escuelas · «Cada uno, a lo que mejor sabe hacer»: Nubo (el cole, en la tinta de Nubo) + Reddu (casa, en menta) y, debajo, los dos juntos */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 18px; }
.duo-panel { position: relative; overflow: hidden; border-radius: 36px; padding: clamp(28px, 3.4vw, 44px); display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 50px 80px -50px rgba(0,0,0,.5); }
.duo-panel h3 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1; letter-spacing: -.02em; margin: 6px 0 0; }
.duo-panel > p { margin: 0; font-size: 17px; max-width: 44ch; }
.duo-cab { display: flex; align-items: center; justify-content: space-between; }
.duo-cab img { width: 110px; height: auto; }
.duo-donde { padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.duo-logo { font: 900 30px/1 var(--titular); letter-spacing: -.02em; }
.duo-chips { list-style: none; padding: 0; margin: 6px 0 4px; display: flex; flex-wrap: wrap; gap: 8px; }
.duo-chips li { padding: 9px 14px; border-radius: 14px; font-size: 14px; line-height: 1.3; }
.duo-chips b { font-weight: 700; }
.duo-panel .enlace-flecha { align-self: flex-start; margin-top: auto; }
.enlace-blanco { color: var(--blanco); }

.duo-nubo { background: #1C141D; color: var(--blanco); }
.duo-nubo::before { content: ""; position: absolute; inset: -30% -20% auto auto; width: 90%; height: 80%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(196,38,217,.45), transparent 70%), radial-gradient(closest-side at 30% 70%, rgba(1,119,227,.4), transparent 70%); filter: blur(10px); }
.duo-nubo > * { position: relative; }
.duo-nubo > p { color: #d9d3da; }
.duo-nubo .mano { color: #01CD9D; }
.duo-nubo .duo-donde { background: rgba(255,255,255,.1); color: #e7e1e8; }
.duo-nubo .duo-chips li { background: rgba(255,255,255,.08); color: #e7e1e8; box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset; }

/* el documento que se adapta solo: líneas grises → texto claro con las palabras clave marcadas */
.doc { position: relative; margin: 8px 0 6px; background: #FBF9FC; color: #1C141D; border-radius: 22px; padding: 14px 18px 20px; box-shadow: 0 30px 50px -30px rgba(0,0,0,.6); }
.doc-barra { display: flex; align-items: center; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid #E1DCE1; font-size: 12px; }
.doc-barra span { width: 9px; height: 9px; border-radius: 50%; background: #E1DCE1; }
.doc-barra b { margin-left: 8px; font-weight: 600; color: #4D494E; }
.doc-cuerpo { position: relative; height: 150px; margin-top: 14px; overflow: hidden; }
.doc-antes, .doc-despues { position: absolute; inset: 0; }
.doc-antes { display: grid; align-content: start; gap: 9px; animation: docAntes 7s var(--suave-e) infinite; }
.doc-antes i { display: block; height: 8px; width: var(--w); border-radius: 4px; background: #d8d2d9; }
.doc-despues { opacity: 0; animation: docDespues 7s var(--suave-e) infinite; }
.doc-despues p { margin: 0 0 10px; font-size: 17px; line-height: 1.45; letter-spacing: .01em; word-spacing: .06em; }
.doc-despues .doc-t { font: 700 19px/1.2 var(--cuerpo); }
.doc mark { padding: 0 .2em; border-radius: 6px; color: inherit; }
.doc .m1 { background: rgba(196,38,217,.18); } .doc .m2 { background: rgba(1,205,157,.28); } .doc .m3 { background: rgba(1,119,227,.16); }
.doc-scan { position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #C426D9, #0177E3, #01CD9D); box-shadow: 0 0 18px #0177E3; opacity: 0;
  animation: docScan 7s ease-in-out infinite; }
.doc-chip { position: absolute; right: 16px; bottom: -14px; padding: 8px 14px; border-radius: 999px; background: #01CD9D; color: #00261c; font-size: 13px; font-weight: 700;
  box-shadow: 0 10px 20px -8px rgba(1,205,157,.8); animation: docChip 7s var(--suave-e) infinite; }
@keyframes docScan { 0%, 12% { top: 0; opacity: 0 } 16% { opacity: 1 } 40% { top: 100%; opacity: 1 } 44%, 100% { top: 100%; opacity: 0 } }
@keyframes docAntes { 0%, 18% { opacity: 1; filter: none } 40%, 92% { opacity: 0; filter: blur(4px) } 100% { opacity: 1; filter: none } }
@keyframes docDespues { 0%, 30% { opacity: 0; transform: translateY(10px) } 44%, 90% { opacity: 1; transform: none } 98%, 100% { opacity: 0; transform: none } }
@keyframes docChip { 0%, 42% { opacity: 0; transform: scale(.6) } 50%, 90% { opacity: 1; transform: none } 98%, 100% { opacity: 0; transform: scale(.9) } }
.en-editor .doc-antes, html:not(.js) .doc-antes { display: none; }
.en-editor .doc-despues, .en-editor .doc-chip, html:not(.js) .doc-despues, html:not(.js) .doc-chip { animation: none; opacity: 1; }
.en-editor .doc-scan, html:not(.js) .doc-scan { display: none; }
@media (prefers-reduced-motion: reduce) { .doc-antes, .doc-scan { display: none; } .doc-despues, .doc-chip { animation: none !important; opacity: 1; } }

.duo-mas { display: grid; place-items: center; }
.duo-mas span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--blanco); font: 900 38px/1 var(--titular);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.05); }

.duo-reddu { background: var(--menta); color: var(--negro); }
.duo-reddu > p { color: #0d3a33; }
.duo-reddu .mano { color: var(--negro); }
.duo-reddu .duo-donde { background: rgba(255,255,255,.55); }
.duo-reddu .duo-chips li { background: rgba(255,255,255,.55); }

/* Reddu: los personajes y, a su lado, una actividad del juego (maqueta, no se juega) que va cambiando sola */
.duo-escena { position: relative; height: 240px; margin: 4px 0 0; }
.duo-pj { position: absolute; bottom: 0; height: auto; max-width: none; filter: drop-shadow(0 18px 18px rgba(0,60,50,.3)); }
.pj-a { left: -2%; width: 29%; bottom: 6px; } .pj-b { left: 21%; width: 21%; z-index: 2; } .pj-c { left: 37%; width: 22%; bottom: 10px; }
.minis { position: absolute; right: 0; top: 18px; width: min(40%, 230px); height: 158px; z-index: 3; }
.mini { position: absolute; inset: 0; border-radius: 20px; padding: 14px 16px; background: var(--app-crema); border: 2px solid #e3e1d8; box-shadow: 0 4px 0 #e3e1d8, 0 26px 40px -24px rgba(0,60,50,.5);
  display: flex; flex-direction: column; gap: 6px; rotate: 3deg; transition: opacity .7s var(--suave-e), transform .7s var(--suave-e); }
.js .mini:not(.activa) { opacity: 0; transform: translateY(14px) scale(.96); }
.mini small { align-self: flex-start; padding: 4px 9px; border-radius: 999px; background: var(--rosa-pastel); color: var(--magenta-texto); font-size: 11px; font-weight: 700; }
.mini p { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.3; color: #222; }
.fichas { display: flex; gap: 6px; margin-top: auto; }
.fichas span { flex: 1; display: grid; place-items: center; height: 38px; border-radius: 12px; background: var(--app-morado); color: var(--blanco); font-weight: 700; font-size: 16px; box-shadow: 0 4px 0 var(--app-morado-borde); }
.mini-tiempo { position: absolute; left: 16px; right: 16px; bottom: 10px; height: 4px; border-radius: 4px; background: #ebe6d3; overflow: hidden; }
.mini-tiempo::after { content: ""; position: absolute; inset: 0; background: var(--amarillo); transform-origin: left; animation: tiempoMini 5s linear infinite; }
@keyframes tiempoMini { from { transform: scaleX(1) } to { transform: scaleX(0) } }
.pares { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pares b { display: grid; place-items: center; height: 44px; border-radius: 12px; background: var(--blanco); border: 2px solid #e3e1d8; font-size: 17px; }
.escucha { margin-top: auto; display: flex; gap: 8px; align-items: center; }
.altavoz { display: grid; place-items: center; width: 42px; height: 40px; border-radius: 12px; background: var(--app-morado); box-shadow: 0 4px 0 var(--app-morado-borde); font-size: 18px; }
.hueco { flex: 1; height: 40px; border-radius: 12px; background: var(--blanco); border: 2px solid #e3e1d8; display: flex; align-items: center; padding: 0 12px; font-weight: 600; }
@media (max-width: 560px) { .duo-escena { height: 330px; } .minis { left: 0; right: 0; width: auto; top: 0; } .duo-pj { bottom: 0; } .pj-a { width: 34%; } .pj-b { left: 33%; width: 25%; } .pj-c { left: 60%; width: 27%; } }

/* los dos juntos: el cole y casa, con lo que va y lo que vuelve */
.juntos { margin-top: 18px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(24px, 4vw, 56px);
  border-radius: 36px; padding: clamp(28px, 3.6vw, 48px); background: var(--blanco); box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 40px 70px -50px rgba(0,0,0,.4); }
.juntos h3 { font-size: clamp(30px, 3vw, 44px); line-height: 1; letter-spacing: -.02em; margin: 0 0 12px; }
.juntos p { color: #333; font-size: 17px; margin: 0; }
.bucle { position: relative; width: 460px; height: 220px; justify-self: center; }
.bucle-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bucle-svg path { fill: none; stroke: #e2ded3; stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; }
.punto { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; offset-rotate: 0deg; }
.p-ida { background: #0177E3; box-shadow: 0 0 0 5px rgba(1,119,227,.18); offset-path: path("M95,90 C170,10 290,10 365,90"); animation: viaje 3.2s ease-in-out infinite; }
.p-vuelta { background: var(--menta); box-shadow: 0 0 0 5px rgba(82,225,199,.25); offset-path: path("M365,130 C290,210 170,210 95,130"); animation: viaje 3.2s ease-in-out infinite; }
.punto.d2 { animation-delay: -1.6s; }
@keyframes viaje { from { offset-distance: 0%; opacity: 0 } 12% { opacity: 1 } 88% { opacity: 1 } to { offset-distance: 100%; opacity: 0 } }
.en-editor .punto, html:not(.js) .punto { display: none; }
.nodo { position: absolute; top: 50%; translate: 0 -50%; width: 120px; height: 120px; border-radius: 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; box-shadow: 0 24px 40px -24px rgba(0,0,0,.45); }
.nodo-cole { left: 0; background: #1C141D; color: var(--blanco); }
.nodo-cole img { width: 76px; filter: brightness(0) invert(1); }
.nodo-casa { right: 0; background: var(--menta); }
.nodo-casa .duo-logo { font-size: 24px; }
.bucle-pj { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 96px; height: auto; max-width: none; filter: drop-shadow(0 12px 14px rgba(0,0,0,.2)); }
.bucle-et { position: absolute; left: 50%; translate: -50% 0; white-space: nowrap; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.et-ida { top: -18px; background: rgba(1,119,227,.1); color: #0055A6; }
.et-vuelta { bottom: -18px; background: var(--menta-pastel); color: var(--menta-texto); }

@media (max-width: 960px) {
  .duo { grid-template-columns: 1fr; }
  .duo-mas { margin: -34px 0; position: relative; z-index: 2; }
  .juntos { grid-template-columns: 1fr; }
  .bucle { zoom: .72; }
}

/* Preguntas (acordeón) */
.acordeon { max-width: 860px; }
.centrada .acordeon { margin-inline: auto; text-align: left; }
.acordeon details { border-bottom: 2px solid var(--linea); }
.acordeon details:first-child { border-top: 2px solid var(--linea); }
.acordeon summary { list-style: none; cursor: pointer; padding: 22px 52px 22px 0; position: relative; font: 600 19px/1.35 var(--cuerpo); }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: "+"; position: absolute; right: 4px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: var(--suave); display: grid; place-items: center; font-size: 22px; transition: transform .35s var(--suave-e), background .25s; }
.acordeon details[open] summary::after { transform: rotate(45deg); background: var(--menta); }
.acordeon details > :not(summary) { padding-right: 52px; color: #222; }

/* Final de cada página: la ola que respira y los premios que orbitan alrededor de un personaje (como el final de la portada) */
.pg-final { position: relative; overflow: hidden; background: var(--blanco); text-align: center; padding-top: clamp(80px, 10vw, 130px); }
.pg-final h2 { font-size: clamp(38px, 5vw, 72px); line-height: .98; letter-spacing: -.02em; margin: 0 auto 16px; max-width: 16ch; }
.pg-final .sub { color: var(--gris); margin: 0 auto; }
.pg-final .acciones { justify-content: center; }
.final-escena { position: relative; height: clamp(380px, 40vw, 520px); margin-top: 24px; }
.final-escena svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; }
.final-pj { position: absolute; left: 50%; bottom: 0; translate: -50% 0; z-index: 3; width: clamp(170px, 18vw, 240px); height: auto; max-width: none; filter: drop-shadow(0 24px 24px rgba(0,60,50,.25)); }
.orbita { position: absolute; left: 50%; top: 44%; width: 0; height: 0; z-index: 2; }
.orbita.delante { z-index: 4; }
.orbita img { position: absolute; left: 0; top: 0; max-width: none; height: auto; will-change: transform; filter: drop-shadow(0 16px 18px rgba(0,60,50,.22)); }
html:not(.js) .orbita, .en-editor .orbita { display: none; }

@media (max-width: 860px) {
  .pg-portada.con-visual .pg-portada-in, .pg-dos { grid-template-columns: 1fr; }
  .pg-dos.al-reves .pg-visual { order: 0; }
  .pg-pjs { min-height: 0; } .pg-pjs img { width: 110px; } .pg-pjs img:nth-child(2) { width: 140px; }
  .pg-texto p { font-size: 17px; }
  .prosa { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .pg-tarjeta, .acordeon summary::after { transition: none; } }

/* ---------- Migas de pan ---------- */
.migas { font-size: 15px; color: var(--gris); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 6px; }
.migas a { color: var(--gris); text-decoration: none; }
.migas a:hover { color: var(--negro); text-decoration: underline; }
.migas [aria-current] { color: var(--negro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }

/* ---------- Artículo del blog ---------- */
.articulo { --pastel: var(--menta-pastel); --acento: var(--menta); --acento-texto: var(--menta-texto); }
.articulo-cabecera { padding: 32px 0 24px; max-width: 860px !important; }
.articulo-categoria { margin: 0 0 16px; }
.articulo-categoria a { display: inline-block; padding: 8px 14px; border-radius: 999px; background: var(--pastel); color: var(--negro); text-decoration: none; font: 600 15px/1 var(--cuerpo); }
.articulo-categoria a::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--acento); margin-right: 8px; vertical-align: 1px; }
.articulo-cabecera h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1; letter-spacing: -.02em; }
.articulo-meta { color: var(--gris); font-size: 16px; }
.articulo-portada { margin: 8px auto 40px; max-width: 1000px !important; }
.articulo-portada img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: cover; border-radius: 32px; background: var(--pastel); box-shadow: 0 40px 70px -46px rgba(0,0,0,.5); }
.articulo-cuerpo { width: min(760px, 100% - 32px); margin: 0 auto; padding-bottom: 56px; }
.articulo-cuerpo > * { max-width: 100%; }
.articulo-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; max-width: 1000px !important; padding: clamp(28px, 4vw, 48px);
  border-radius: var(--radio-g); background: var(--negro); color: var(--blanco); margin-bottom: 72px; }
.articulo-cta h2 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: .3em; }
.articulo-cta p { color: #ddd; margin: 0; max-width: 52ch; }
.articulo-cta .boton-negro { --fondo: var(--menta); --texto: var(--negro); --borde: var(--menta); box-shadow: 0 4px 0 #2f9f8b; }
.relacionados { padding-bottom: 96px; }
.relacionados h2 { font-size: clamp(32px, 3.8vw, 48px); letter-spacing: -.015em; }

/* ---------- Portada del blog y categorías ---------- */
.listado-cabecera { padding: 32px 0 8px; }
.listado-cabecera h1 { font-size: clamp(44px, 6vw, 84px); line-height: .98; letter-spacing: -.02em; max-width: 15ch; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px auto 36px; }
.filtros a { padding: 10px 18px; border-radius: 999px; border: 2px solid var(--negro); text-decoration: none; font-weight: 600; font-size: 15px; background: var(--blanco); transition: background .2s; }
.filtros a:hover { background: var(--pastel, var(--suave)); }
.filtros a[aria-current="page"] { background: var(--negro); color: var(--blanco); }
.rejilla-articulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; padding-bottom: 96px; }
.relacionados .rejilla-articulos { padding-bottom: 0; }
.tarjeta-articulo { display: flex; flex-direction: column; text-decoration: none; border-radius: 28px; overflow: hidden; background: var(--pastel); transition: transform .7s var(--suave-e), box-shadow .7s var(--suave-e); }
.tarjeta-articulo:hover { transform: translateY(-8px); box-shadow: 0 30px 50px -34px rgba(0,0,0,.35); }
.tarjeta-articulo-img { display: block; aspect-ratio: 16 / 9; background: var(--pastel); overflow: hidden; }
.tarjeta-articulo-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--suave-e); }
.tarjeta-articulo:hover .tarjeta-articulo-img img { transform: scale(1.06); }
.tarjeta-articulo-texto { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 24px; }
.tarjeta-articulo small { font-size: 14px; color: #333; }
.tarjeta-articulo strong { font: 900 22px/1.2 var(--titular); }
.tarjeta-articulo-texto > span { font-size: 16px; line-height: 1.5; color: #222; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.destacado { margin-bottom: 24px; }
.tarjeta-destacada { display: grid; grid-template-columns: 1.2fr 1fr; }
.tarjeta-destacada .tarjeta-articulo-img { aspect-ratio: auto; min-height: 320px; position: relative; }
.tarjeta-destacada .tarjeta-articulo-img img { position: absolute; inset: 0; }
.tarjeta-destacada .tarjeta-articulo-texto { justify-content: center; padding: clamp(24px, 4vw, 48px); }
.tarjeta-destacada strong { font-size: clamp(28px, 3.2vw, 40px); }
@media (max-width: 760px) { .tarjeta-destacada { grid-template-columns: 1fr; } .tarjeta-destacada .tarjeta-articulo-img { min-height: 0; aspect-ratio: 16 / 9; } }

/* ---------- Página de "no existe" ---------- */
.no-existe .pg-portada { min-height: calc(100svh - 72px); display: flex; align-items: center; }
.no-existe .pg-portada-in { width: min(var(--ancho), 100% - 32px); }
.no-existe .pg-portada-visual img { width: clamp(180px, 22vw, 300px); }

/* El gesto de marca que traían algunas páginas de Wix: «Divertido y ~~efectibo~~ efectivo» */
.pg h1 s, .pg h2 s, .legado h1 s, .legado h2 s { color: var(--magenta-texto); text-decoration-color: var(--magenta); text-decoration-thickness: .08em; }

/* Tres o más imágenes seguidas (logos de colegios, capturas): rejilla de piezas pequeñas */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; margin: 1.6em 0; max-width: none !important; }
.galeria figure { margin: 0 !important; display: grid; place-items: center; background: var(--blanco); border-radius: var(--radio); padding: 16px; aspect-ratio: 4 / 3; box-shadow: 0 1px 0 var(--linea); }
.galeria img { max-height: 110px !important; width: auto; max-width: 100%; object-fit: contain; border-radius: 8px !important; }

/* ---------- Escuelas · la escena «Nubo en el cole, Reddu en casa» ----------
   Se queda fija mientras bajas (movimiento.js) y cuenta la unión en tres pasos: el examen se adapta (Nubo),
   vuela al móvil y se convierte en partida (Reddu) y, al final, cole y casa quedan unidos. Sin JS o en el editor: los tres textos en fila. */
.magia { --fondo: #1C141D; --tinta: #ffffff; --acento-m: #01CD9D; position: relative; background: var(--fondo); color: var(--tinta); overflow: hidden; }
.magia-in { min-height: 100svh; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(24px, 4vw, 64px); padding: 90px 0 60px; box-sizing: border-box; }
.magia-textos { position: relative; }
.magia .antes { color: inherit; opacity: .7; }
.m-paso h3 { font-size: clamp(36px, 4.2vw, 62px); line-height: 1; letter-spacing: -.02em; margin: 0 0 18px; }
.m-paso p { font-size: 18px; line-height: 1.6; max-width: 40ch; margin: 0 0 18px; opacity: .85; }
.m-paso .mano { color: var(--acento-m); }
.js .magia:not(.quieta) .magia-textos { height: 360px; }
.js .magia:not(.quieta) .m-paso { position: absolute; left: 0; right: 0; top: 34px; }
.m-barra { position: absolute; left: 0; bottom: 0; width: 160px; height: 3px; border-radius: 3px; background: currentColor; opacity: .25; overflow: hidden; }
.m-barra i { position: absolute; inset: 0; background: currentColor; transform-origin: 0 50%; transform: scaleX(0); }
.magia.quieta .m-barra, html:not(.js) .m-barra { display: none; }
html:not(.js) .m-paso, .magia.quieta .m-paso { margin-bottom: 40px; }

.magia-escena { position: relative; width: 520px; height: 520px; justify-self: center; }
.m-halo { position: absolute; inset: 40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(196,38,217,.45), rgba(1,119,227,.25) 55%, transparent 72%); filter: blur(8px); }
.m-doc { position: absolute; left: 95px; top: 130px; width: 330px; margin: 0; z-index: 5; transform-origin: 50% 50%; }
.magia .doc-antes, .magia .doc-despues, .magia .doc-scan, .magia .doc-chip { animation: none; }
.magia .doc-despues, .magia .doc-chip, .magia .doc-scan { opacity: 0; }
.m-movil { position: absolute; left: 155px; top: 45px; width: 210px; height: 430px; border-radius: 40px; padding: 8px; background: #111; z-index: 4; opacity: 0;
  box-shadow: 0 0 0 2px #2b2b2b inset, 0 50px 80px -40px rgba(0,0,0,.6); }
.m-movil::before { content: ""; position: absolute; top: 15px; left: 50%; width: 64px; height: 18px; margin-left: -32px; border-radius: 12px; background: #111; z-index: 2; }
.m-pantalla { position: relative; height: 100%; border-radius: 32px; background: var(--app-crema); overflow: hidden; padding: 44px 14px 14px; color: var(--negro); display: flex; flex-direction: column; gap: 10px; }
.m-juego-cab { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #9a9a9a; }
.m-prog { flex: 1; height: 8px; border-radius: 8px; background: #e9e4d2; overflow: hidden; } .m-prog i { display: block; width: 45%; height: 100%; background: var(--menta); border-radius: 8px; }
.m-etq { align-self: flex-start; padding: 4px 9px; border-radius: 999px; background: var(--rosa-pastel); color: var(--magenta-texto); font-size: 11px; font-weight: 700; }
.m-enunciado { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.m-hueco, .m-fichas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.m-hueco { margin-top: 22px; } .m-hueco span { height: 44px; border-radius: 12px; border: 2px dashed #d8d2bd; }
.m-fichas { margin-top: 14px; }
.m-fichas span { display: grid; place-items: center; height: 44px; border-radius: 12px; background: var(--app-morado); color: var(--blanco); font-weight: 700; font-size: 16px; box-shadow: 0 4px 0 var(--app-morado-borde); will-change: transform; }
.m-ok { margin-top: auto; padding: 12px; border-radius: 14px; background: var(--menta); text-align: center; font-weight: 700; font-size: 14px; opacity: 0; }
.m-pj { position: absolute; height: auto; max-width: none; z-index: 6; filter: drop-shadow(0 18px 18px rgba(0,0,0,.3)); opacity: 0; }
.m-pj1 { left: 40px; top: 300px; width: 150px; } .m-pj2 { left: 350px; top: 280px; width: 130px; } .m-pj3 { left: 70px; top: 60px; width: 100px; z-index: 3; } .m-pj4 { left: 360px; top: 70px; width: 120px; z-index: 3; }
.m-nodo { position: absolute; z-index: 7; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 16px; font-size: 13px; font-weight: 700; opacity: 0; box-shadow: 0 20px 30px -18px rgba(0,0,0,.4); }
.m-nubo { left: 34px; top: 104px; background: #1C141D; color: #fff; } .m-nubo img { width: 70px; }
.m-reddu { right: 30px; top: 30px; background: var(--menta); color: var(--negro); } .m-reddu b { font: 900 20px/1 var(--titular); }
.m-lazo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; opacity: 0; }
.m-lazo path { fill: none; stroke: rgba(0,0,0,.18); stroke-width: 3; stroke-dasharray: 2 10; stroke-linecap: round; }
.magia .punto { z-index: 3; opacity: 0; }
.m-p1, .m-p2 { background: #0177E3; box-shadow: 0 0 0 5px rgba(1,119,227,.18); offset-path: path("M110,220 C170,50 350,50 410,220"); }
.m-p3, .m-p4 { background: var(--menta-texto); box-shadow: 0 0 0 5px rgba(82,225,199,.3); offset-path: path("M410,300 C350,470 170,470 110,300"); }
.magia.juntos-ya .punto { animation: viaje 3.2s ease-in-out infinite; }
.m-p2, .m-p4 { animation-delay: -1.6s !important; }
/* sin JS o en el editor: se ve el final (examen adaptado + móvil) y los tres textos */
html:not(.js) .magia, .magia.quieta { --fondo: var(--crema-web); --tinta: var(--negro); }
html:not(.js) .m-movil, .magia.quieta .m-movil { opacity: 1; left: 290px; scale: .8; }
html:not(.js) .m-doc, .magia.quieta .m-doc { left: 0; scale: .75; }
html:not(.js) .doc-antes, .magia.quieta .doc-antes { display: none; }
html:not(.js) .magia .doc-despues, .magia.quieta .doc-despues { opacity: 1; }
@media (min-width: 1200px) { .magia-escena { zoom: 1.12; } }
@media (max-width: 960px) {
  .magia-in { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 76px 0 24px; gap: 0; justify-items: center; }
  .js .magia:not(.quieta) .magia-textos { height: 250px; width: 100%; }
  .m-paso h3 { font-size: 30px; margin-bottom: 10px; } .m-paso p { font-size: 15px; margin-bottom: 10px; }
  .magia-escena { zoom: .66; }
}

/* ---------- Nosotros ----------
   Habla como equipo: la ciencia detrás, el recorrido (cuatro tarjetas que pasan en horizontal al bajar, con Alex
   corriendo por la vía de debajo; movimiento.js, [data-viaje]) y quién nos acompaña. */
.nos-hero { position: relative; display: grid; place-items: center; min-height: 420px; }
.nos-hero::before { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, var(--menta-pastel), #d4f5ee); }
.nos-hero-alex { position: relative; width: min(360px, 80%); height: auto; filter: drop-shadow(0 24px 28px rgba(0,0,0,.18)); }
.nos-chip { position: absolute; z-index: 2; padding: 10px 16px; border-radius: 999px; background: var(--blanco); font-weight: 600; font-size: 14px; box-shadow: 0 16px 30px -16px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.05); white-space: nowrap; }
.nos-chip::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; background: var(--c); }
.nos-chip.c1 { --c: var(--magenta); left: 0; top: 18%; rotate: -4deg; } .nos-chip.c2 { --c: var(--menta); right: 0; top: 40%; rotate: 3deg; } .nos-chip.c3 { --c: var(--azul); left: 10%; bottom: 8%; rotate: -2deg; }

/* sin JS o en el editor: el recorrido entero, todo encendido */

.logos-grandes img { height: 64px; max-width: 200px; filter: none; opacity: .9; }
.refs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-bottom: 28px; }
.refs .pg-tarjeta p { font-size: 15px; color: #444; }
.nos-logo { background: var(--blanco); border-radius: 32px; padding: clamp(28px, 4vw, 48px); box-shadow: 0 40px 70px -40px rgba(0,0,0,.6); rotate: -2deg; }
.nos-logo img { display: block; width: 100%; height: auto; }

@media (max-width: 960px) {
  .nos-hero { min-height: 330px; } .nos-hero::before { width: 280px; height: 280px; } .nos-chip { font-size: 12px; padding: 8px 12px; }
}

/* El recorrido: cuatro hitos en tarjetas grandes que pasan en horizontal mientras bajas; Alex corre por la vía */
.viaje { position: relative; overflow: hidden; background: var(--crema-web); padding: 100px 0 24px; min-height: 100svh; box-sizing: border-box; }
.viaje-cab { margin-bottom: 24px; }
.viaje-cab h2 { font-size: clamp(34px, 4.2vw, 60px); line-height: 1; letter-spacing: -.015em; margin: 0; }
.viaje-ventana { overflow: hidden; }
.viaje-pista { list-style: none; margin: 0; padding: 0 max(16px, calc((100vw - var(--ancho)) / 2)); display: flex; gap: 22px; width: max-content; will-change: transform; }
.hito { flex: none; width: min(540px, 78vw); height: min(520px, calc(100svh - 330px)); min-height: 380px; border-radius: 36px; overflow: hidden; display: grid; grid-template-rows: 1fr auto; position: relative;
  box-shadow: 0 40px 70px -46px rgba(0,0,0,.45); }
.h-menta { background: var(--menta); } .h-rosa { background: var(--rosa-pastel); } .h-nubo { background: #1C141D; color: var(--blanco); } .h-ambar { background: var(--amarillo); }
.h-nubo::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 80%; height: 80%; background: radial-gradient(closest-side, rgba(196,38,217,.5), rgba(1,119,227,.25) 60%, transparent 75%); }
.hito-arte { position: relative; display: grid; place-items: center; min-height: 0; padding: 24px; }
.hito-arte > img { max-height: 100%; width: auto; max-width: 70%; filter: drop-shadow(0 24px 26px rgba(0,0,0,.22)); }
.hito-texto { position: relative; padding: 0 32px 30px; }
.hito-cuando { display: inline-block; padding: 7px 14px; border-radius: 999px; background: var(--negro); color: var(--blanco); font-weight: 700; font-size: 14px; margin-bottom: 12px; }
.h-nubo .hito-cuando { background: var(--blanco); color: var(--negro); }
.hito h3 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 10px; }
.hito p { margin: 0; font-size: 16px; line-height: 1.5; max-width: 42ch; opacity: .85; }
.libro-blanco { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; margin: 40px 0 48px; padding: clamp(24px, 4vw, 44px); border-radius: 32px; background: var(--blanco); box-shadow: 0 34px 60px -40px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.05); }
.libro-portada { display: block; rotate: -3deg; transition: rotate .4s var(--suave-e), transform .4s var(--suave-e); }
.libro-portada:hover { rotate: 0deg; transform: translateY(-4px); }
.libro-portada img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 30px 40px -24px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.06); }
.libro-texto h3 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1; letter-spacing: -.02em; margin: 6px 0 14px; }
.libro-texto > p:not(.antes) { font-size: 18px; line-height: 1.55; max-width: 52ch; margin: 0 0 22px; }
.refs-titulo { font-weight: 700; margin: 0 0 16px; }
.libro-texto { min-width: 0; } .libro-texto .boton { white-space: normal; text-align: center; }
@media (max-width: 720px) { .libro-blanco { grid-template-columns: minmax(0, 1fr); } .libro-portada { max-width: 220px; } }
.viaje-cab .sub { margin: 10px 0 0; font-size: 18px; opacity: .8; }
.hito-moviles > img { position: absolute; height: 92%; width: auto; max-width: none; top: 6%; filter: drop-shadow(0 24px 26px rgba(0,0,0,.25)); }
.hito-moviles > img:nth-child(1) { left: 14%; rotate: -6deg; } .hito-moviles > img:only-child { left: 50%; translate: -50% 0; rotate: -4deg; } .hito-moviles > img:nth-child(2) { right: 14%; top: 10%; height: 84%; rotate: 6deg; z-index: 2; }
.hito-ciencia { display: flex; align-items: center; justify-content: center; gap: 18px; }
.hito-ciencia > img { max-width: 40%; width: auto; height: auto; max-height: 88%; }
.ciencia-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ciencia-chips li { padding: 7px 14px; border-radius: 999px; background: var(--blanco); font-weight: 600; font-size: 14px; box-shadow: 0 6px 14px -10px rgba(0,0,0,.35); }
.hito-resultados { align-content: center; gap: 16px; padding: 28px 32px 8px; }
.res-cifras { display: flex; gap: 14px; width: 100%; }
.res-cifras p { flex: 1; margin: 0; padding: 14px 16px; border-radius: 20px; background: var(--blanco); max-width: none; opacity: 1; }
.res-cifras b { display: block; font: 900 clamp(30px, 3vw, 42px)/1 var(--titular); letter-spacing: -.02em; }
.res-cifras span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.3; }
.hito-resultados .res-nota { width: 100%; text-align: left; margin: 8px 2px 0; font-size: 12px; line-height: 1.35; opacity: .7; max-width: none; }
.res-cita { margin: 0; padding: 14px 18px; border-radius: 20px; background: rgba(255,255,255,.55); }
.res-cita p { margin: 0; font-size: 16px; line-height: 1.45; font-weight: 600; max-width: none; opacity: 1; }
.res-cita cite { display: block; margin-top: 6px; font-style: normal; font-size: 13px; opacity: .75; }
@media (min-width: 721px) and (max-height: 800px) {
  .hito-ciencia { padding: 10px 24px; } .ciencia-chips { gap: 5px; } .ciencia-chips li { font-size: 12px; padding: 4px 10px; }
  .hito h3 { font-size: clamp(24px, 2.4vw, 32px); }
  .res-cifras b { font-size: 30px; } .res-cita { padding: 10px 14px; } .res-cita p { font-size: 14px; }
}
.hito-trofeos > img { position: absolute; width: 38%; max-width: none; height: auto; }
.hito-trofeos > img:nth-child(1) { left: 6%; top: 18%; rotate: -8deg; } .hito-trofeos > img:nth-child(2) { left: 31%; top: 4%; width: 44%; z-index: 2; } .hito-trofeos > img:nth-child(3) { right: 6%; top: 20%; rotate: 8deg; }
.hito-logo { display: inline-block; padding: 12px 18px; border-radius: 18px; background: var(--blanco); box-shadow: 0 20px 30px -20px rgba(0,0,0,.4); }
.hito-trofeos .hito-logo { position: absolute; left: 50%; bottom: 8%; translate: -50% 0; z-index: 3; rotate: -3deg; }
.hito-logo img { display: block; width: 170px; height: auto; }
.hito-logo.grande { padding: 26px 32px; rotate: -3deg; } .hito-logo.grande img { width: min(340px, 60vw); }
.hito-temps > img { position: absolute; width: 34%; max-width: none; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; box-shadow: 0 20px 30px -16px rgba(0,0,0,.45); }
.hito-temps > img:nth-child(1) { left: 6%; top: 16%; rotate: -10deg; } .hito-temps > img:nth-child(2) { left: 24%; top: 8%; rotate: -3deg; }
.hito-temps > img:nth-child(3) { left: 42%; top: 10%; rotate: 4deg; } .hito-temps > img:nth-child(4) { left: 58%; top: 18%; rotate: 10deg; z-index: 2; }
.viaje-via { position: relative; height: 96px; margin-top: 6px; }
.via-linea { position: absolute; left: 0; right: 0; bottom: 22px; height: 6px; border-radius: 6px; background: #e3ded0; overflow: hidden; }
.via-linea i { position: absolute; inset: 0; background: var(--negro); transform-origin: 0 50%; transform: scaleX(0); }
.via-casilla { position: absolute; bottom: 11px; width: 28px; height: 28px; margin-left: -14px; border-radius: 9px; background: #d9d4c6; box-shadow: 0 3px 0 #bdb8aa; transition: background .4s, transform .4s var(--suave-e); }
.via-casilla:nth-of-type(1) { left: 0%; margin-left: 0; } .via-casilla:nth-of-type(2) { left: 33.33%; } .via-casilla:nth-of-type(3) { left: 66.66%; } .via-casilla:nth-of-type(4) { left: 100%; margin-left: -28px; }
.via-casilla.si { transform: scale(1.15); } .via-casilla.si:nth-of-type(1) { background: var(--menta); } .via-casilla.si:nth-of-type(2) { background: var(--magenta); } .via-casilla.si:nth-of-type(3) { background: var(--azul); } .via-casilla.si:nth-of-type(4) { background: var(--amarillo); }
.via-alex { position: absolute; left: 0; bottom: 36px; width: 56px; height: auto; max-width: none; filter: drop-shadow(0 8px 8px rgba(0,0,0,.2)); }
/* sin JS, en el editor o en el móvil: las tarjetas se deslizan con el dedo */
html:not(.js) .viaje-ventana, .en-editor .viaje-ventana { overflow-x: auto; }
html:not(.js) .viaje-via, .en-editor .viaje-via { display: none; }

.mision { background: var(--blanco); }
.mision-frase { font-size: clamp(44px, 6.4vw, 96px) !important; line-height: .95 !important; letter-spacing: -.03em !important; }
.mision .sub { font-size: clamp(18px, 1.6vw, 21px); }
.mision-ideas { margin-top: 8px; }

.fundadores-mini { background: var(--blanco); }
.fm-fila { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(28px, 6vw, 96px); }
.fm { width: 280px; text-align: center; }
.fm-foto { width: 200px; height: 200px; margin: 0 auto 18px; border-radius: 50%; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.fm-menta { background: var(--menta-pastel); } .fm-ambar { background: var(--crema-pastel); }
.fm-foto img { width: 92%; height: auto; max-width: none; }
.fm h3 { font-size: 22px; margin: 0; } .fm .cargo { margin: 4px 0 10px; }
.fm p:not(.cargo) { font-size: 15px; color: #444; margin: 0 0 12px; }

@media (max-width: 960px) {
  .viaje-ventana { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .hito { scroll-snap-align: center; height: 520px; }
  .hito:has(.hito-ciencia), .hito:has(.hito-resultados) { height: auto; min-height: 520px; }
  .hito-ciencia { padding: 22px 18px 16px; } .ciencia-chips li { font-size: 12px; padding: 5px 10px; }
  .hito-resultados { padding: 22px 20px 14px; } .res-cifras { gap: 10px; } .res-cifras p { padding: 12px; } .res-cifras span { font-size: 12px; }
  .res-cita p { font-size: 14px; }
  .viaje-via { display: none; }
}


/* ---------- Familias (le habla al padre o la madre) ----------
   La escena «Lo que tú ves»: un móvil con el WhatsApp de Reddu donde llegan, al bajar, los mensajes de la semana
   (movimiento.js, [data-wa]). Los datos son los de la cuenta de ejemplo de la portada. */
.fa-hero { position: relative; min-height: 420px; display: grid; place-items: center; }
.fa-hero::before { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, var(--rosa-pastel), #ffd9ec); }
.fa-hero-alex { position: relative; width: 210px; height: auto; max-width: none; filter: drop-shadow(0 24px 26px rgba(0,0,0,.2)); translate: -110px 40px; }
.fa-bocadillo { position: absolute; right: -20px; top: 0; z-index: 2; width: 270px; margin: 0; padding: 20px 22px; border-radius: 24px 24px 24px 6px; background: var(--blanco);
  box-shadow: 0 30px 50px -30px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.05); rotate: 3deg; }
.fa-bocadillo blockquote { margin: 0 0 10px; font: 600 17px/1.4 var(--cuerpo); }
.fa-bocadillo figcaption { font-size: 13px; color: var(--gris); }

.wa { --fondo-w: #E9F7F2; position: relative; overflow: hidden; background: var(--fondo-w); }
.wa-in { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px); padding: 90px 0 50px; box-sizing: border-box; }
.wa-paso h3 { font-size: clamp(34px, 4vw, 56px); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 16px; }
.wa-paso p { font-size: 18px; line-height: 1.6; max-width: 40ch; margin: 0; color: #333; }
.js .wa:not(.quieta) .wa-textos { position: relative; height: 340px; }
.js .wa:not(.quieta) .wa-paso { position: absolute; left: 0; right: 0; top: 34px; }
.wa-barra { position: absolute; left: 0; bottom: -24px; width: 160px; height: 3px; border-radius: 3px; background: rgba(0,0,0,.12); overflow: hidden; }
.wa-barra i { position: absolute; inset: 0; background: var(--negro); transform-origin: 0 50%; transform: scaleX(0); }
html:not(.js) .wa-paso, .wa.quieta .wa-paso { margin-bottom: 32px; } html:not(.js) .wa-barra, .wa.quieta .wa-barra { display: none; }
.wa-escena { justify-self: center; text-align: center; }
.wa-movil { width: 340px; height: 640px; border-radius: 46px; padding: 10px; background: #111; box-shadow: 0 0 0 2px #2b2b2b inset, 0 50px 80px -40px rgba(0,60,50,.5); text-align: left; }
.wa-pantalla { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: #ECE5DD; display: flex; flex-direction: column; }
.wa-cab { display: flex; align-items: center; gap: 10px; padding: 46px 14px 12px; background: #075E54; color: var(--blanco); }
.wa-cab b { display: block; font-size: 15px; } .wa-cab small { font-size: 12px; opacity: .8; }
.wa-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--menta); color: var(--negro); display: grid; place-items: center; font: 900 18px/1 var(--titular); }
.wa-chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 12px; overflow: hidden; }
.wa-msg { align-self: flex-start; max-width: 86%; padding: 9px 12px 10px; border-radius: 4px 14px 14px 14px; background: var(--blanco); font-size: 13.5px; line-height: 1.4; color: #111; box-shadow: 0 1px 1px rgba(0,0,0,.12); }
.wa-msg b { display: block; font-size: 12px; color: #075E54; margin-bottom: 2px; }
.wa-msg.yo { align-self: flex-end; border-radius: 14px 4px 14px 14px; background: #DCF8C6; }
.wa-escribe { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--blanco); }
.wa-escribe i { width: 7px; height: 7px; border-radius: 50%; background: #9aa; animation: escribe 1.2s infinite ease-in-out; }
.wa-escribe i:nth-child(2) { animation-delay: .2s; } .wa-escribe i:nth-child(3) { animation-delay: .4s; }
@keyframes escribe { 0%, 80%, 100% { opacity: .3; transform: none } 40% { opacity: 1; transform: translateY(-3px) } }
.wa-nota { margin: 14px 0 0; font-size: 13px; color: var(--gris); }

.fa-habilidades { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fa-habilidades li { padding: 9px 14px; border-radius: 999px; background: var(--suave); font-weight: 600; font-size: 14px; }
.fa-habilidades li:nth-child(4n+1) { background: var(--menta-pastel); } .fa-habilidades li:nth-child(4n+2) { background: var(--rosa-pastel); } .fa-habilidades li:nth-child(4n+3) { background: var(--crema-pastel); } .fa-habilidades li:nth-child(4n+4) { background: var(--lavanda-pastel); }
.fa-temps { position: relative; min-height: 380px; }
.fa-temps img { position: absolute; width: 62%; height: auto; border-radius: 24px; box-shadow: 0 30px 50px -30px rgba(0,0,0,.5); }
.fa-temps img:nth-child(1) { left: 0; top: 0; rotate: -4deg; z-index: 2; } .fa-temps img:nth-child(2) { right: 0; bottom: 0; rotate: 5deg; }
.fa-no { margin: 0; } .fa-no li { font-size: 17px; color: #e6e6e6; } .fa-no b { color: var(--blanco); }
.fa-puertas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 18px; max-width: 900px; margin: 0 auto; }
.fa-puerta { display: flex; flex-direction: column; gap: 6px; text-decoration: none; border-radius: 32px; padding: 30px 30px 28px; background: var(--suave); transition: transform .7s var(--suave-e), box-shadow .7s var(--suave-e); }
.fa-puerta:hover { transform: translateY(-8px); box-shadow: 0 30px 50px -34px rgba(0,0,0,.35); }
.fa-nubo { background: var(--menta-pastel); }
.fa-etq { align-self: flex-start; padding: 6px 12px; border-radius: 10px; background: var(--negro); color: var(--blanco); font-size: 13px; font-weight: 700; }
.fa-nubo .fa-etq { background: var(--menta); color: var(--negro); }
.fa-puerta b { font: 900 clamp(56px, 6vw, 80px)/1 var(--titular); letter-spacing: -.03em; margin-top: 10px; }
.fa-per { font-weight: 600; color: var(--gris); }
.fa-puerta p { margin: 8px 0 14px; color: #333; font-size: 16px; }
.fa-puerta .enlace-flecha { align-self: flex-start; margin-top: auto; }
.fa-faq { align-items: start; }

@media (max-width: 960px) {
  .fa-hero { min-height: 340px; } .fa-hero::before { width: 280px; height: 280px; } .fa-hero-alex { width: 150px; translate: -90px 40px; } .fa-bocadillo { width: 200px; padding: 14px 16px; right: 0; } .fa-bocadillo blockquote { font-size: 14px; }
  .wa-in { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 76px 0 16px; gap: 0; justify-items: center; }
  .js .wa:not(.quieta) .wa-textos { height: 220px; width: 100%; }
  .wa-paso h3 { font-size: 28px; margin-bottom: 8px; } .wa-paso p { font-size: 15px; }
  .wa-escena { zoom: .7; }
  .fa-temps { min-height: 260px; }
}
@media (min-width: 1200px) { .wa-escena { zoom: 1.05; } }

/* ---------- El juego para la dislexia (le habla al adolescente) ----------
   La escena «Tu colección»: los amigos pasan de gris a color reto a reto, se abre el cofre y llega la temporada
   (movimiento.js, [data-coleccion-escena]), igual que en la app. */
.jd-cartas { position: relative; min-height: 440px; }
.jd-cartas img { position: absolute; width: 46%; height: auto; max-width: none; filter: drop-shadow(0 20px 24px rgba(0,0,0,.2)); }
.jd-cartas img:nth-child(1) { left: 0; top: 30%; rotate: -14deg; } .jd-cartas img:nth-child(2) { left: 18%; top: 8%; rotate: -6deg; }
.jd-cartas img:nth-child(3) { left: 30%; top: 30%; z-index: 2; width: 52%; } .jd-cartas img:nth-child(4) { right: 6%; top: 6%; rotate: 8deg; } .jd-cartas img:nth-child(5) { right: 0; top: 40%; rotate: 14deg; }
.col { --fondo-c: #FBFAF6; position: relative; overflow: hidden; background: var(--fondo-c); }
.col-in { min-height: 100svh; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(24px, 4vw, 64px); padding: 90px 0 50px; box-sizing: border-box; }
.col-paso h3 { font-size: clamp(34px, 4vw, 56px); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 16px; }
.col-paso p { font-size: 18px; line-height: 1.6; max-width: 40ch; margin: 0; color: #333; }
.js .col:not(.quieta) .col-textos { position: relative; height: 340px; }
.js .col:not(.quieta) .col-paso { position: absolute; left: 0; right: 0; top: 34px; }
.col-barra { position: absolute; left: 0; bottom: -24px; width: 160px; height: 3px; border-radius: 3px; background: #e2ded3; overflow: hidden; }
.col-barra i { position: absolute; inset: 0; background: var(--negro); transform-origin: 0 50%; transform: scaleX(0); }
html:not(.js) .col-paso, .col.quieta .col-paso { margin-bottom: 32px; } html:not(.js) .col-barra, .col.quieta .col-barra { display: none; }
.col-escena { position: relative; width: 520px; height: 520px; justify-self: center; display: grid; place-items: center; }
.col-rejilla { display: grid; grid-template-columns: repeat(3, 150px); gap: 18px 14px; }
.col-amigo { display: grid; justify-items: center; gap: 4px; padding: 12px 6px 10px; border-radius: 22px; background: var(--blanco); box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 18px 30px -24px rgba(0,0,0,.35); }
.col-fotos { position: relative; width: 110px; height: 110px; }
.col-fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.col-color { opacity: 0; }
.col-rayos { display: flex; gap: 3px; } .col-rayos svg { width: 16px; height: 16px; fill: #D9D9D9; }
.col-amigo span { font-size: 13px; font-weight: 700; }
.col-cofre { position: absolute; left: 50%; top: 50%; width: 220px; height: auto; max-width: none; translate: -50% -50%; opacity: 0; z-index: 3; filter: drop-shadow(0 24px 26px rgba(0,0,0,.3)); }
.col-temp { position: absolute; left: 50%; top: 50%; width: 400px; height: auto; max-width: none; translate: -50% -50%; opacity: 0; z-index: 4; border-radius: 28px; box-shadow: 0 40px 70px -30px rgba(0,0,0,.55); }
html:not(.js) .col-color, .col.quieta .col-color { opacity: 1; } html:not(.js) .col-rayos svg, .col.quieta .col-rayos svg { fill: var(--amarillo); }
@media (min-width: 1200px) { .col-escena { zoom: 1.06; } }
.jd-etq { margin: 0 0 10px !important; font-size: 13px !important; font-weight: 700; color: var(--gris) !important; letter-spacing: .03em; }
.jd-juegos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.jd-mas { margin: 28px 0 0; max-width: 70ch; color: #333; } .jd-mas .enlace-flecha { margin-left: 8px; }
.jd-alex-img { display: grid; place-items: center; } .jd-alex-img img { width: min(340px, 80%); height: auto; filter: drop-shadow(0 24px 30px rgba(0,0,0,.4)); }
.jd-trampas h3 { font-size: clamp(32px, 3.4vw, 44px) !important; letter-spacing: -.02em; }
@media (max-width: 960px) {
  .jd-cartas { min-height: 300px; }
  .col-in { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 76px 0 16px; gap: 0; justify-items: center; }
  .js .col:not(.quieta) .col-textos { height: 230px; width: 100%; }
  .col-paso h3 { font-size: 28px; margin-bottom: 8px; } .col-paso p { font-size: 15px; }
  .col-escena { zoom: .66; }
}

/* ---------- Historias de famosos: la colección de cartas ----------
   Las cartas las monta construir.mjs desde los artículos de «Historias de disléxitos» (<!--famosos-->).
   Entran dándose la vuelta, se inclinan con el ratón y se filtran por ámbito (movimiento.js). */
.fam-abanico { display: flex; justify-content: center; margin-top: 18px; }
.fam-abanico img { width: clamp(110px, 13vw, 180px); height: auto; margin: 0 -18px; filter: drop-shadow(0 18px 18px rgba(0,0,0,.25)); }
.fam-abanico img:nth-child(1) { rotate: -12deg; translate: 0 26px; } .fam-abanico img:nth-child(2) { rotate: -6deg; translate: 0 8px; } .fam-abanico img:nth-child(3) { z-index: 2; scale: 1.12; }
.fam-abanico img:nth-child(4) { rotate: 6deg; translate: 0 8px; } .fam-abanico img:nth-child(5) { rotate: 12deg; translate: 0 26px; }
.fam-filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 32px; }
.fam-filtros button { font: 600 14px/1 var(--cuerpo); padding: 10px 16px; border-radius: 999px; border: 2px solid var(--negro); background: var(--blanco); color: var(--negro); cursor: pointer; transition: background .2s; }
.fam-filtros button small { font-size: 12px; opacity: .6; margin-left: 4px; }
.fam-filtros button[aria-pressed="true"] { background: var(--negro); color: var(--blanco); }
.fam-rejilla { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; perspective: 1200px; }
.fam[hidden] { display: none; }
.fam > a { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: 26px; overflow: hidden; text-decoration: none; background: var(--blanco);
  box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 24px 40px -30px rgba(0,0,0,.4); transform-style: preserve-3d; transition: transform .5s var(--suave-e), box-shadow .5s var(--suave-e); will-change: transform; }
.fam > a:hover { box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 40px 60px -30px rgba(0,0,0,.45); }
.fam-cara { display: block; aspect-ratio: 16 / 11; background: var(--pastel); overflow: hidden; }
.fam-cara img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .8s var(--suave-e); }
.fam > a:hover .fam-cara img { transform: scale(1.08) translateY(-4px); }
.fam-texto { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 18px; }
.fam-texto small { font-size: 12px; font-weight: 700; color: var(--acento-texto, var(--gris)); letter-spacing: .03em; }
.fam-texto b { font: 900 21px/1.1 var(--titular); letter-spacing: -.01em; }
.fam-texto span { font-size: 14px; line-height: 1.4; color: #444; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fam-dorso { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 26px; background: var(--menta) url(/assets/inicio/patron-juguetes.webp) center / 140px; font: 900 34px/1 var(--titular); color: var(--negro);
  backface-visibility: hidden; transform: rotateY(180deg); }
.fam-herr .acciones { gap: 10px 20px; margin-top: 16px; }

/* ---------- Portada del blog ---------- */
.listado-cabecera .antes { margin-bottom: 14px; }
.listado-cabecera .sub { color: var(--gris); }
.blog-busca { display: block; max-width: 560px; margin-top: 22px; }
.blog-busca input { width: 100%; font: 400 17px/1 var(--cuerpo); padding: 16px 20px 16px 50px; border-radius: 18px; border: 2px solid var(--linea); background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'%3E%3Cpath d='M15.5 14h-.8l-.3-.3A6.5 6.5 0 1 0 9.5 16a6.5 6.5 0 0 0 4.2-1.6l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z'/%3E%3C/svg%3E") 16px center / 22px no-repeat; transition: border-color .2s; }
.blog-busca input:focus { outline: none; border-color: var(--negro); }
.mas-leidos { margin: 8px auto 36px; }
.mas-leidos h2 { font-size: clamp(24px, 2.4vw, 30px); margin: 0 0 16px; }
.mas-leidos ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; counter-reset: ml; }
.mas-leidos li { counter-increment: ml; }
.mas-leidos a { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 12px 12px 16px; border-radius: 22px; background: var(--suave); text-decoration: none; transition: transform .5s var(--suave-e), background .3s; }
.mas-leidos a:hover { transform: translateY(-6px); background: var(--menta-pastel); }
.mas-leidos a::before { content: counter(ml); position: absolute; left: 18px; top: 14px; z-index: 1; width: 34px; height: 34px; border-radius: 50%; background: var(--negro); color: var(--blanco); display: grid; place-items: center; font: 900 17px/1 var(--titular); }
.ml-img { display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--linea); }
.ml-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ml-texto small { display: block; font-size: 12px; color: var(--gris); margin-bottom: 4px; }
.ml-texto b { font: 700 16px/1.25 var(--cuerpo); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sin-resultados { padding: 0 0 60px; color: var(--gris); }
.franja-famosos { padding-bottom: 96px; }
.franja-famosos > a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 24px; padding: clamp(24px, 4vw, 44px); border-radius: 32px; background: var(--crema-pastel); text-decoration: none; overflow: hidden;
  transition: transform .6s var(--suave-e); }
.franja-famosos > a:hover { transform: translateY(-6px); }
.ff-texto small { display: block; font-weight: 700; color: var(--amarillo-texto); margin-bottom: 8px; }
.ff-texto b { display: block; font: 900 clamp(26px, 3vw, 40px)/1.05 var(--titular); letter-spacing: -.02em; margin-bottom: 16px; }
.ff-caras { display: flex; justify-content: flex-end; }
.ff-caras img { width: 30%; max-width: 150px; height: auto; margin-left: -8%; border-radius: 18px; background: var(--blanco); box-shadow: 0 16px 30px -18px rgba(0,0,0,.5); }
.ff-caras img:nth-child(odd) { rotate: -5deg; } .ff-caras img:nth-child(even) { rotate: 5deg; translate: 0 10px; }
@media (max-width: 760px) { .franja-famosos > a { grid-template-columns: 1fr; } .ff-caras { justify-content: center; } .ff-caras img:nth-child(n+5) { display: none; } }
[hidden] { display: none !important; }
.fam-cara, .fam-texto { backface-visibility: hidden; }
@media (max-width: 560px) {
  .fam-rejilla { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fam-texto { padding: 10px 12px 14px; } .fam-texto b { font-size: 17px; } .fam-texto span { display: none; }
  .mas-leidos ol { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 0 16px 8px; }
  .mas-leidos li { flex: 0 0 72%; scroll-snap-align: start; }
}

/* ---------- Dislexia en adolescentes: la ciencia ----------
   La escena de los datos (movimiento.js, [data-datos]): el 52 % llena el círculo, las gráficas de evaluación e intervención
   se dibujan de izquierda a derecha y, al final, los tres niveles. */
.datos { position: relative; overflow: hidden; background: #0f1a2b; color: var(--blanco); }
.datos-in { min-height: 100svh; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(24px, 4vw, 64px); padding: 90px 0 50px; box-sizing: border-box; }
.datos .antes { color: var(--menta); }
.d-paso h3 { font-size: clamp(34px, 4vw, 56px); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 16px; }
.d-paso .mano { color: var(--menta); }
.d-paso p { font-size: 18px; line-height: 1.6; max-width: 42ch; margin: 0 0 12px; color: #d5dbe6; }
.d-paso .d-fuente { font-size: 13px; color: #8d99ad; }
.js .datos:not(.quieta) .datos-textos { position: relative; height: 380px; }
.js .datos:not(.quieta) .d-paso { position: absolute; left: 0; right: 0; top: 40px; }
.d-barra { position: absolute; left: 0; bottom: -24px; width: 160px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; }
.d-barra i { position: absolute; inset: 0; background: var(--menta); transform-origin: 0 50%; transform: scaleX(0); }
html:not(.js) .d-paso, .datos.quieta .d-paso { margin-bottom: 32px; } html:not(.js) .d-barra, .datos.quieta .d-barra { display: none; }
.datos-escena { position: relative; width: 520px; height: 460px; justify-self: center; }
.d-carta { position: absolute; inset: 0; margin: 0; border-radius: 32px; background: var(--blanco); color: var(--negro); padding: 28px; box-shadow: 0 50px 80px -40px rgba(0,0,0,.6); display: flex; flex-direction: column; justify-content: center; }
.js .datos:not(.quieta) .d-carta { opacity: 0; }
.d-pastel { flex-direction: row; align-items: center; gap: 22px; }
.d-donut { width: 190px; height: 190px; flex: none; rotate: -90deg; }
.d-donut circle { fill: none; stroke-width: 26; }
.d-fondo { stroke: #eef1f5; } .d-arco { stroke: var(--menta); stroke-dasharray: 100; stroke-dashoffset: 48; stroke-linecap: round; }
.d-cifra b { display: block; white-space: nowrap; font: 900 72px/.9 var(--titular); letter-spacing: -.04em; color: var(--menta-texto); }
.d-cifra > span { display: block; margin-top: 10px; font-size: 17px; font-weight: 600; max-width: 16ch; }
.d-graf figcaption { font-size: 14px; font-weight: 700; color: var(--gris); margin-bottom: 12px; }
.d-dibujo { overflow: hidden; border-radius: 16px; background: #f4f4f4; }
.d-dibujo img { display: block; width: 100%; height: auto; }
.d-tiers { align-items: center; gap: 10px; background: #fbf6e6; }
.t { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 14px 16px; border-radius: 18px; color: var(--negro); }
.t b { font: 900 22px/1 var(--titular); } .t span { font-size: 14px; font-weight: 600; margin-top: 4px; }
.t1 { width: 100%; background: #ffe6a6; } .t2 { width: 78%; background: var(--amarillo); box-shadow: 0 0 0 4px var(--negro); } .t3 { width: 56%; background: #f29d00; }
html:not(.js) .d-carta, .datos.quieta .d-carta { position: relative; inset: auto; margin-bottom: 16px; }
html:not(.js) .datos-escena, .datos.quieta .datos-escena { height: auto; }
.d-cita { font: 400 22px/1.3 var(--mano); color: var(--magenta-texto); text-align: center; max-width: 34ch; margin: 10px auto 0; }
.ado-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 18px; }
.ado-pieza { border-radius: 36px; padding: clamp(28px, 3.4vw, 44px); display: flex; flex-direction: column; gap: 14px; }
.ado-pieza h3 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.05; letter-spacing: -.02em; margin: 0; }
.ado-pieza p { margin: 0; font-size: 16px; }
.ado-pieza .acciones { margin-top: auto; padding-top: 10px; }
.ado-nubo { background: #1C141D; color: var(--blanco); } .ado-nubo p { color: #d9d3da; } .ado-nubo img { width: 110px; height: auto; }
.ado-nubo blockquote { margin: 4px 0 0; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.08); font-size: 15px; line-height: 1.5; }
.ado-nubo blockquote footer { margin-top: 8px; font-size: 13px; color: #b9b2ba; }
.ado-reddu { background: var(--menta); } .ado-logo { font: 900 30px/1 var(--titular); letter-spacing: -.02em; }
.ado-reddu .fa-habilidades { margin: 0; } .ado-reddu .fa-habilidades li { background: rgba(255,255,255,.6) !important; }
@media (min-width: 1200px) { .datos-escena { zoom: 1.06; } }
@media (max-width: 960px) {
  .datos-in { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 76px 0 16px; gap: 0; justify-items: center; }
  .js .datos:not(.quieta) .datos-textos { height: 280px; width: 100%; }
  .d-paso h3 { font-size: 28px; margin-bottom: 8px; } .d-paso p { font-size: 15px; }
  .datos-escena { zoom: .66; }
}

/* ---------- Principios metodológicos ----------
   A la izquierda, fijo, el contador (03 / 10) y el índice; a la derecha, los diez principios. Al bajar se marca el que toca. */
.pi-diez { position: relative; display: grid; place-items: center; min-height: 400px; }
.pi-diez b { position: absolute; font: 900 clamp(220px, 26vw, 360px)/1 var(--titular); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 3px var(--menta); opacity: .9; }
.pi-diez img { position: relative; width: min(300px, 70%); height: auto; filter: drop-shadow(0 24px 28px rgba(0,0,0,.2)); }
.pi-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.pi-lado { position: sticky; top: 110px; }
.pi-contador { margin: 0 0 18px; display: flex; align-items: baseline; gap: 10px; }
.pi-contador b { font: 900 clamp(90px, 10vw, 150px)/.9 var(--titular); letter-spacing: -.05em; color: var(--magenta); display: inline-block; min-width: 2ch; }
.pi-contador span { font: 900 32px/1 var(--titular); color: var(--gris); }
.pi-indice { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.pi-indice a { display: flex; gap: 12px; align-items: baseline; padding: 8px 12px; border-radius: 12px; text-decoration: none; color: var(--gris); font-weight: 600; font-size: 15px; transition: background .3s, color .3s; }
.pi-indice a span { font: 900 14px/1 var(--titular); }
.pi-indice a:hover { background: var(--blanco); color: var(--negro); }
.pi-indice a.activo { background: var(--negro); color: var(--blanco); }
.pi-cartas { display: grid; gap: 18px; }
.pi-carta { --c: var(--menta); --p: var(--menta-pastel); position: relative; scroll-margin-top: 110px; border-radius: 32px; padding: clamp(28px, 3.4vw, 44px); background: var(--blanco); box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 30px 50px -40px rgba(0,0,0,.35); overflow: hidden; transition: transform .6s var(--suave-e); }
.pi-carta:nth-child(4n+2) { --c: var(--magenta); --p: var(--rosa-pastel); } .pi-carta:nth-child(4n+3) { --c: var(--amarillo); --p: var(--crema-pastel); } .pi-carta:nth-child(4n+4) { --c: var(--azul); --p: var(--lavanda-pastel); }
.pi-carta::before { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: var(--p); }
.pi-num { position: relative; display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--c); color: var(--negro); font: 900 22px/1 var(--titular); margin-bottom: 18px; }
.pi-carta:nth-child(4n+4) .pi-num { color: var(--blanco); }
.pi-carta h3 { position: relative; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 12px; }
.pi-carta p { position: relative; font-size: 17px; line-height: 1.6; color: #333; margin: 0 0 10px; max-width: 60ch; }
.pi-carta p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .pi-in { grid-template-columns: 1fr; } .pi-lado { position: static; } .pi-indice { display: none; } .pi-contador { display: none; } .pi-diez { min-height: 300px; } }

/* ---------- Desde dónde jugar: los tres aparatos con el juego dentro ---------- */
.tiendas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.tienda { display: inline-flex; flex-direction: column; justify-content: center; min-width: 170px; padding: 10px 20px; border-radius: 14px; background: var(--negro); color: var(--blanco); text-decoration: none; box-shadow: 0 4px 0 #3a3a3a; transition: transform .15s; }
.tienda:hover { transform: translateY(-2px); }
.tienda small { font-size: 11px; opacity: .8; } .tienda b { font-size: 19px; line-height: 1.1; }
.dispositivos { position: relative; min-height: 420px; }
.disp { position: absolute; background: #111; box-shadow: 0 40px 60px -36px rgba(0,0,0,.55); }
.disp .pantalla { overflow: hidden; width: 100%; height: 100%; background: var(--app-crema); }
.disp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portatil { left: 0; top: 30px; width: 74%; aspect-ratio: 16 / 10; border-radius: 16px 16px 4px 4px; padding: 10px; }
.portatil .pantalla { border-radius: 8px; }
.portatil .base { position: absolute; left: -8%; right: -8%; bottom: -16px; height: 16px; border-radius: 0 0 14px 14px; background: linear-gradient(#d9d9d9, #b9b9b9); }
.tableta { right: 6%; bottom: 10px; width: 44%; aspect-ratio: 4 / 3; border-radius: 22px; padding: 10px; z-index: 2; }
.tableta .pantalla { border-radius: 14px; }
.movilito { right: 0; top: 0; width: 22%; aspect-ratio: 9 / 19; border-radius: 26px; padding: 6px; z-index: 3; }
.movilito .pantalla { border-radius: 20px; }
.guia { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
@media (max-width: 860px) { .dispositivos { min-height: 280px; } }

/* ---------- Pegatinas: página de campaña (ahora, Navidad con el Taller de Juguetes) ----------
   Aquí llega el QR de las pegatinas impresas. La nieve la pinta movimiento.js ([data-nieve]), suave. */
.navidad { --rojo-nv: #E4362B; }
.navidad .mano { color: var(--rojo-nv); }
.nv-portada { background: linear-gradient(180deg, #fff7ef, #ffffff); }
.nv-portada::before { background: radial-gradient(closest-side, rgba(228,54,43,.14), transparent); }
.nieve { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.nv-hero { position: relative; min-height: 440px; }
.nv-insignia { position: absolute; left: 50%; top: 50%; width: 82%; height: auto; max-width: none; translate: -50% -50%; rotate: -4deg; border-radius: 28px; box-shadow: 0 40px 60px -36px rgba(0,0,0,.5); }
.nv-alex { position: absolute; left: -2%; bottom: -20px; width: 40%; height: auto; max-width: none; z-index: 2; filter: drop-shadow(0 20px 22px rgba(0,0,0,.3)); }
.nv-cascanueces { position: absolute; right: -2%; bottom: -10px; width: 30%; height: auto; max-width: none; z-index: 2; filter: drop-shadow(0 20px 22px rgba(0,0,0,.3)); }
.nv-pjs { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.nv-pjs li { width: 170px; display: grid; justify-items: center; gap: 8px; padding: 18px 12px 14px; border-radius: 26px; background: var(--blanco); box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 24px 40px -30px rgba(0,0,0,.4); transition: transform .6s var(--suave-e); }
.nv-pjs li:hover { transform: translateY(-8px) rotate(-2deg); }
.nv-pjs img { height: 130px; width: auto; object-fit: contain; }
.nv-pjs b { font: 900 18px/1 var(--titular); }
.nv-dos { display: grid; place-items: center; } .nv-dos img { width: min(300px, 70%); height: auto; filter: drop-shadow(0 24px 28px rgba(0,0,0,.25)); }
.nv-final .final-pj { width: clamp(140px, 14vw, 190px); }
@media (max-width: 860px) { .nv-hero { min-height: 320px; } }