/* ============================================================
   v2.50 · La landing nueva y /docentes (LANDING-NUEVA.md). Solo la cargan esas dos páginas (body.ic-landing).
   Letras: Baloo 2 (títulos) y Nunito (texto), guardadas en el sitio. Colores: luz #F5C542, tinta #17203D,
   antetítulos #9A5A00 sobre fondo claro. Primero el teléfono (360 px), toques de 48 px, texto de 18 px.
   ============================================================ */
@font-face{font-family:'Baloo 2';font-weight:700;font-display:swap;src:url('fonts/baloo-2-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Baloo 2';font-weight:800;font-display:swap;src:url('fonts/baloo-2-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-weight:400;font-display:swap;src:url('fonts/nunito-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-weight:700;font-display:swap;src:url('fonts/nunito-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-weight:800;font-display:swap;src:url('fonts/nunito-latin-800-normal.woff2') format('woff2')}

body.ic-landing{
  --display:'Baloo 2','Andika','Trebuchet MS',sans-serif; --texto:'Nunito','Atkinson Hyperlegible','Segoe UI',system-ui,sans-serif;
  --luz:#f5c542; --tinta:#17203d; --ante:#9a5a00; --crema:#fff8ec;
  font-size:18px; line-height:1.6;
}
.ic-landing h1,.ic-landing h2,.ic-landing h3{font-weight:800;letter-spacing:-.01em}
.ic-landing .btn{font-family:var(--display);font-weight:800}

/* ---- 1 · El héroe fijo ---- */
.lx-heroe{position:relative;isolation:isolate;min-height:max(560px,min(46.8vw,78vh));display:flex;align-items:center;color:#fff;background:var(--noche);overflow:hidden;padding:112px 0 56px}
.lx-heroe-arte,.lx-heroe-arte img{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.lx-heroe-arte img{object-fit:cover;object-position:100% 50%}
.lx-heroe::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(9,14,40,.92) 0%,rgba(9,14,40,.86) 34%,rgba(9,14,40,.5) 46%,rgba(9,14,40,0) 60%)}
.lx-heroe.sin-arte{background:radial-gradient(ellipse at 70% 40%,#24357a,var(--noche) 70%)}
.lx-heroe-in{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.lx-heroe h1{font-size:clamp(36px,4.3vw,62px);line-height:1.04;max-width:12.5ch;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.lx-heroe h1 em{font-style:normal;color:var(--luz)}
.lx-heroe-sub{font-size:clamp(18px,1.6vw,22px);max-width:30ch;color:#f4f2ff;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.lx-botones{display:flex;flex-wrap:wrap;gap:12px 16px}
.lx-heroe .btn-borde{background:rgba(9,14,40,.35)}
.lx-heroe-mas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:6px}
.lx-heroe .puerta-nino{padding:8px 24px 8px 8px}
.lx-heroe .puerta-nino img{width:48px;height:48px}
.lx-heroe .puerta-nino b{font-size:20px}
.lx-heroe .puerta-nino small{font-size:14px}
.lx-docente{color:#fff;font-weight:800;text-decoration:none;min-height:48px;display:inline-flex;align-items:center;font-size:18px;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.lx-docente:hover{color:var(--luz);text-decoration:underline}

/* ---- 2 · Franja de confianza ---- */
.lx-confianza{background:var(--tinta);color:#fff}
.lx-confianza ul{list-style:none;margin:0 auto;padding:14px 0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;font-weight:800;font-size:16px}
.lx-confianza li{display:inline-flex;align-items:center;gap:8px}
.lx-confianza li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--luz);flex:none}

/* ---- Secciones ---- */
.lx-sec{padding:72px 0}
.lx-sec h2{font-size:clamp(30px,3.4vw,46px);line-height:1.08;margin:0 0 24px;color:var(--tinta)}
.lx-antetitulo{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--ante);margin:0 0 6px}
.lx-grande{font-size:21px;line-height:1.5;margin:0 0 14px}
.lx-sec p{margin:0 0 12px}
.lx-dos{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.lx-dos-inv > :first-child{order:0}
.lx-foto{margin:0;border-radius:24px;overflow:hidden;box-shadow:0 18px 50px rgba(23,32,61,.18)}
.lx-foto img{width:100%;height:auto}
.lx-lista{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:10px}
.lx-lista li{position:relative;padding-left:30px}
.lx-lista li::before{content:"";position:absolute;left:0;top:.42em;width:18px;height:18px;border-radius:50%;background:var(--luz);box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}

/* ---- 3 · Así funciona ---- */
.lx-pasos{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:paso}
.lx-pasos li{background:#fff;border:1px solid var(--linea);border-radius:24px;padding:0 0 22px;overflow:hidden;display:flex;flex-direction:column}
.lx-pasos figure{margin:0 0 4px;background:var(--crema);aspect-ratio:1}
.lx-pasos figure img{width:100%;height:100%;object-fit:cover}
.lx-pasos h3,.lx-pasos p{padding:0 22px}
.lx-pasos h3{font-size:24px;margin:6px 0 8px}
.lx-num{display:grid;place-items:center;width:44px;height:44px;margin:-26px 0 0 22px;border-radius:50%;background:var(--luz);color:var(--tinta);font-family:var(--display);font-weight:800;font-size:22px;position:relative;box-shadow:0 4px 12px rgba(0,0,0,.15)}

/* ---- 4 · Los tres mundos ---- */
.lx-mundos-sec{background:var(--noche);color:#fff}
.lx-mundos-sec h2{color:#fff}
.lx-mundos-sec .lx-antetitulo{color:var(--luz)}
.lx-mundos{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.lx-mundo{position:relative;display:block;border-radius:24px;overflow:hidden;aspect-ratio:3/4;color:#fff;text-decoration:none;background:var(--noche-2);box-shadow:0 18px 40px rgba(0,0,0,.35);transition:transform .2s}
a.lx-mundo:hover{transform:translateY(-4px)}
.lx-mundo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lx-mundo-txt{position:absolute;inset:auto 0 0;padding:64px 20px 20px;display:flex;flex-direction:column;gap:6px;background:linear-gradient(180deg,rgba(9,14,40,0),rgba(9,14,40,.88) 45%)}
.lx-mundo-txt b{font-family:var(--display);font-size:30px;line-height:1.05}
.lx-mundo-txt b small{font-size:18px;color:var(--luz)}
.lx-mundo-ir{font-weight:800;color:var(--luz);min-height:32px;display:flex;align-items:center}

/* ---- 5 · Cuentos ---- */
.lx-cuentos{background:var(--crema)}
.lx-cuentos-arte{margin:0;border-radius:24px;overflow:hidden;box-shadow:0 18px 50px rgba(23,32,61,.18);background:#fff}
.lx-cuentos-arte img,.lx-cuentos-arte video{width:100%;height:auto;display:block}

/* ---- 6 y 7 · Familias y docentes ---- */
.lx-docentes{background:#f1f4ff}

/* ---- 8 · Privacidad ---- */
.lx-iconos{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.lx-iconos li{background:#fff;border:1px solid var(--linea);border-radius:24px;padding:20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.lx-ico{width:112px;height:112px;object-fit:contain}
.lx-iconos b{font-family:var(--display);font-size:20px;line-height:1.15;color:var(--tinta)}
.lx-iconos p{color:var(--gris);font-size:16px;margin:0}

.lx-priv .priv-prueba{margin:28px 0 0}

/* ---- 9 · Detrás de IC ---- */
.lx-detras{background:var(--crema);border-block:1px solid var(--linea)}
.lx-detras p{padding:22px 0;text-align:center;font-size:19px;font-style:italic;color:var(--tinta)}

/* ---- 10 · Preguntas ---- */
.lx-faq-lista{display:grid;gap:12px;max-width:860px}
.lx-faq details{background:#fff;border:1px solid var(--linea);border-radius:18px;padding:0 20px}
.lx-faq summary{cursor:pointer;min-height:56px;display:flex;align-items:center;font-family:var(--display);font-weight:800;font-size:20px;list-style:none;gap:12px}
.lx-faq summary::-webkit-details-marker{display:none}
.lx-faq summary::after{content:"+";margin-left:auto;font-size:26px;color:var(--ante)}
.lx-faq details[open] summary::after{content:"−"}
.lx-faq details p{padding:0 0 18px;margin:0}

/* ---- /docentes ---- */
.lx-sec.lx-doc-heroe{padding-top:128px;background:var(--crema)}
.lx-doc-heroe h1{font-size:clamp(36px,4.6vw,58px);line-height:1.04;margin:0 0 16px;color:var(--tinta)}
.lx-doc-heroe .btn-borde{border-color:var(--tinta);color:var(--tinta)}
.lx-doc-heroe .btn-borde:hover{background:var(--tinta);color:#fff}
.lx-clase{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:c}
.lx-clase li{background:#fff;border:1px solid var(--linea);border-radius:24px;padding:20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.lx-clase h3{font-size:21px;margin:0}
.lx-clase p{margin:0;color:var(--gris);font-size:16px}
.lx-tarjetas3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.lx-tarjetas3 article{background:#fff;border:1px solid var(--linea);border-radius:24px;padding:24px}
.lx-tarjetas3 h3{font-size:22px;margin:0 0 8px}
.lx-tarjetas3 p{margin:0;color:var(--gris)}

/* ---- Teléfono ---- */
@media (max-width:1000px){
  .lx-iconos,.lx-clase{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .lx-dos{grid-template-columns:1fr;gap:28px}
  .lx-dos-inv > .lx-foto{order:-1}
  .lx-pasos,.lx-mundos,.lx-tarjetas3{grid-template-columns:1fr}
  .lx-mundo{aspect-ratio:4/5;max-width:520px;margin-inline:auto}
}
@media (max-width:767px){
  /* En el teléfono: el texto arriba, sobre la noche, y la imagen entera abajo (su cielo se funde con el fondo) */
  .lx-heroe{min-height:0;flex-direction:column;align-items:stretch;padding:96px 0 0;background:linear-gradient(180deg,#0b1430 0%,#0a2260 70%,#052c7c 100%)}   /* v2.50.1 · termina en el azul del cielo de la foto (#052c7c): sin corte de color */
  .lx-heroe::before{display:none}
  .lx-heroe-in{order:1}
  .lx-heroe-in{padding-bottom:12px}
  .lx-heroe-arte{position:relative;inset:auto;order:2;display:block;margin-top:0;z-index:-1}
  .lx-heroe-arte img{position:static;width:100%;height:auto;object-fit:contain;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 72px);mask-image:linear-gradient(180deg,transparent 0,#000 72px)}
  .lx-heroe h1{font-size:clamp(32px,9vw,42px);max-width:none}
  .lx-botones{width:100%;flex-direction:column}
  .lx-botones .btn{width:100%}
  .lx-sec{padding:52px 0}
  .lx-sec.lx-doc-heroe{padding-top:96px}
  .lx-mundo-txt b{font-size:26px}
  .lx-grande{font-size:19px}
}
@media (max-width:420px){
  .lx-iconos,.lx-clase{grid-template-columns:1fr}
  .lx-confianza ul{gap:6px 18px;font-size:15px}
}
/* v2.98 · Jugar ya, sin cuenta + los clásicos a la vista */
.lx-sincuenta{margin:10px 0 0;font-size:15px;font-weight:700;color:#f4f2ff;text-shadow:0 1px 8px rgba(0,0,0,.55);max-width:42ch}
.lx-clasicos-arte{display:block;max-width:340px;justify-self:center}
.lx-clasicos-arte img{border-radius:22px;box-shadow:0 10px 30px rgba(11,20,48,.18)}
@media (max-width:767px){.lx-clasicos-arte{max-width:240px}}

/* v2.99.2 · el libro (la tapa alta, como la de los clásicos) */
.lx-libro-tapa{max-width:300px;margin-inline:auto}
.lx-libro-tapa img{width:100%;height:auto;border-radius:18px;box-shadow:0 14px 30px rgba(0,0,0,.28)}
@media (max-width:760px){.lx-libro-tapa{max-width:220px}}

/* v2.99.8 · LAS SECCIONES DE DOS COLUMNAS: la imagen se turna de lado (lx-dos-inv la pasa a la derecha), todas del mismo tamaño (4:3),
   con algo que se mueve: la imagen respira despacito y suben lucecitas. En el teléfono, la imagen siempre arriba. */
.lx-dos > .lx-marco { order: 0; }
.lx-dos.lx-dos-inv > .lx-marco { order: 2; }
.lx-marco { position: relative; display: block; margin: 0; width: 100%; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #2b3f86, #101a3f 75%); box-shadow: 0 18px 50px rgba(23,32,61,.2); isolation: isolate; }
.lx-marco picture { display: contents; }
.lx-marco > img, .lx-marco picture img, .lx-marco > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lx-marco > img, .lx-marco picture img { animation: lx-respira 14s ease-in-out infinite alternate; transform-origin: 50% 60%; }
.lx-marco-alto > img { object-fit: contain; padding: 4% 0; animation-name: lx-flota; }
.lx-vivo { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.lx-vivo i { position: absolute; bottom: -12px; width: 8px; height: 8px; border-radius: 50%; background: #ffe48a; box-shadow: 0 0 10px 3px rgba(255,214,110,.75);
  opacity: 0; animation: lx-sube 7s linear infinite; }
.lx-vivo i:nth-child(1) { left: 8%;  animation-delay: 0s;   } .lx-vivo i:nth-child(2) { left: 19%; animation-delay: -2.4s; width: 6px; height: 6px; }
.lx-vivo i:nth-child(3) { left: 31%; animation-delay: -4.8s; } .lx-vivo i:nth-child(4) { left: 44%; animation-delay: -1.2s; width: 5px; height: 5px; }
.lx-vivo i:nth-child(5) { left: 57%; animation-delay: -3.6s; } .lx-vivo i:nth-child(6) { left: 68%; animation-delay: -6s;   width: 6px; height: 6px; }
.lx-vivo i:nth-child(7) { left: 79%; animation-delay: -0.6s; } .lx-vivo i:nth-child(8) { left: 88%; animation-delay: -3s;   width: 5px; height: 5px; }
.lx-vivo i:nth-child(9) { left: 95%; animation-delay: -5.4s; }
.lx-docentes .lx-vivo i, .lx-familias .lx-vivo i { background: #bfe8ff; box-shadow: 0 0 10px 3px rgba(120,200,255,.7); }
@keyframes lx-sube { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .9; } 50% { transform: translate(10px, -45cqh); } 85% { opacity: .7; }
  100% { transform: translate(-6px, -90cqh); opacity: 0; } }
.lx-marco { container-type: size; }
@keyframes lx-respira { from { transform: scale(1); } to { transform: scale(1.06) translate(-1%, -1%); } }
@keyframes lx-flota { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-2.5%) rotate(1deg); } }
/* v2.99.9 · fondo quieto + capa que flota (posición de cada una medida sobre su fondo 4:3) */
.lx-marco > img.lx-quieto { animation: none; }
.lx-marco > img.lx-capa { inset: auto; height: auto; object-fit: contain; z-index: 2; pointer-events: none;
  filter: drop-shadow(0 0 1.4cqw rgba(110,210,255,.85)); animation: lx-chispa 3.2s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.lx-marco > img.lx-capa-familias { left: 43.8%; bottom: 44%; width: 13%; }
.lx-marco > img.lx-capa-libro { filter: drop-shadow(0 .6cqw .8cqw rgba(60,30,0,.35)); }
.lx-marco > img.lx-capa-libro-perro { left: 45%; bottom: 7%; width: 14.5%; animation: lx-perro 4s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.lx-marco > img.lx-capa-libro-cola { left: 55.5%; bottom: 33%; width: 8.5%; animation: lx-cola .9s ease-in-out infinite alternate; transform-origin: 15% 95%; }
.lx-marco > img.lx-capa-libro-rama { left: 6%; top: -1%; bottom: auto; width: 17%; filter: none; animation: lx-rama 5s ease-in-out infinite alternate; transform-origin: 0% 8%; }
@keyframes lx-perro { from { transform: scaleY(1); } to { transform: scaleY(1.018); } }
@keyframes lx-cola { from { transform: rotate(-14deg); } to { transform: rotate(12deg); } }
@keyframes lx-rama { from { transform: rotate(-2.5deg); } to { transform: rotate(3deg); } }
/* clásicos: la pieza entra a su lugar y dos cartas se dan vuelta (atrás y frente, cada una en su lugar del fondo) */
.lx-marco > img.lx-capa-clasicos { filter: drop-shadow(.3cqw .5cqw .5cqw rgba(80,40,0,.4)); }
.lx-marco > img.lx-capa-clasicos-pieza { left: 32.7%; top: 28.3%; bottom: auto; width: 13.5%; height: 17.3%; object-fit: fill; animation: lx-pieza 7s ease-in-out infinite; }
.lx-marco > img[class*="lx-capa-clasicos-carta"] { top: 5.5%; bottom: auto; width: 13.5%; height: 22%; object-fit: fill; animation: lx-atras 6s ease-in-out infinite; }
.lx-marco > img[class*="lx-capa-clasicos-carta-frente"] { animation-name: lx-frente; }
.lx-marco > img.lx-capa-clasicos-carta-atras-1, .lx-marco > img.lx-capa-clasicos-carta-frente-1 { left: 52.9%; }
.lx-marco > img.lx-capa-clasicos-carta-atras-2, .lx-marco > img.lx-capa-clasicos-carta-frente-2 { left: 67.85%; animation-delay: -4.6s; }
@keyframes lx-pieza { 0%, 12% { transform: translate(55%, 75%) rotate(14deg); opacity: 0; } 22% { opacity: 1; } 42%, 78% { transform: none; opacity: 1; } 92%, 100% { transform: translate(55%, 75%) rotate(14deg); opacity: 0; } }
@keyframes lx-atras { 0%, 20% { transform: scaleX(1); } 26%, 70% { transform: scaleX(0); } 76%, 100% { transform: scaleX(1); } }
@keyframes lx-frente { 0%, 26% { transform: scaleX(0); } 32%, 64% { transform: scaleX(1); } 70%, 100% { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .lx-marco > img[class*="lx-capa-clasicos-carta-frente"] { display: none; } .lx-marco > img.lx-capa-docentes-tarjeta-1 { opacity: 1 !important; } }
/* docentes: la chispita saluda en la tele y las tarjetas suben por turnos (los dos de adelante y una mano de cerca) */
.lx-marco > img.lx-capa-docentes-chispa { left: 65%; bottom: 70%; width: 8.5%; }
.lx-marco > img[class*="lx-capa-docentes-tarjeta"] { filter: drop-shadow(0 .4cqw .6cqw rgba(60,30,0,.35)); animation: lx-tarjeta 9s ease-in-out infinite; opacity: 0; }
.lx-marco > img.lx-capa-docentes-tarjeta-1 { left: 29%; bottom: 15.5%; width: 19.3%; }
.lx-marco > img.lx-capa-docentes-tarjeta-2 { left: 63.9%; bottom: 15%; width: 19.3%; animation-delay: 3s; }
.lx-marco > img.lx-capa-docentes-tarjeta-3 { left: 43.5%; bottom: -4%; width: 23%; animation-delay: 6s; }
@keyframes lx-tarjeta { 0% { transform: translateY(30%); opacity: 0; } 6%, 28% { transform: none; opacity: 1; } 31% { transform: translateY(-3%); opacity: 1; } 36%, 100% { transform: translateY(30%); opacity: 0; } }
@keyframes lx-chispa { 0% { transform: translateY(0) rotate(-4deg) scale(1); } 50% { transform: translateY(-9%) rotate(3deg) scale(1.04); } 100% { transform: translateY(-4%) rotate(-2deg) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .lx-marco > img, .lx-marco > img.lx-capa, .lx-marco picture img, .lx-vivo i { animation: none; } .lx-vivo { display: none; } }
@media (max-width: 860px) { .lx-dos > .lx-marco, .lx-dos.lx-dos-inv > .lx-marco { order: -1; } }