/* Portada de bienvenida EnglIA: presentación + animación al hacer scroll. */
@font-face{font-family:"EnglIA Display";src:url(/fonts/poppins-700.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"EnglIA Serif";src:url(/fonts/lora-600i.woff) format("woff");font-style:italic;font-weight:600;font-display:swap}

.hero-wrap{position:relative;height:calc(100svh + 70vh);background:#070f2b}
.hero{--p:0;position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;color:#fff;isolation:isolate;
  background:radial-gradient(70vw 70vh at 18% 42%,#11296f 0%,rgba(17,41,111,0) 72%),radial-gradient(60vw 70vh at 88% 60%,#0e2268 0%,rgba(14,34,104,0) 70%),#070f2b}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-bg span{position:absolute;display:block}
.hero-ring{border-radius:50%;border:clamp(24px,3.2vw,46px) solid #1b3a9a;opacity:.5}
.hero-ring.r1{width:min(46vw,560px);aspect-ratio:1;left:-14vw;top:-22vh}
.hero-ring.r2{width:min(26vw,320px);aspect-ratio:1;right:-7vw;bottom:-12vh;border-color:#c8102e;opacity:.32}
.hero-tri{width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:23px solid #e8bb55}
.hero-tri.t1{left:52%;top:13%;transform:rotate(-24deg)}
.hero-tri.t2{right:6%;top:9%;transform:rotate(18deg) scale(.85)}
.hero-dot{width:14px;height:14px;border-radius:50%;background:#e8bb55;left:58%;bottom:17%}
.hero-dot.d2{width:9px;height:9px;background:#fff;opacity:.45;left:auto;right:9%;bottom:auto;top:38%}
.hero-grid{inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(180deg,#000,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%)}

.hero-inner{position:relative;height:100%;max-width:1430px;margin:auto;padding:0 max(4.7vw,22px) 80px;display:flex;flex-direction:column;justify-content:center}
.hero-copy{max-width:640px;transform:translateY(calc(var(--p) * -70px));opacity:calc(1 - var(--p) * 2.1);will-change:transform,opacity}
.hero-pill{display:inline-flex;align-items:center;gap:10px;padding:9px 17px;border:1.5px solid rgba(232,187,85,.5);border-radius:99px;background:rgba(232,187,85,.08);color:#f1d38b;font-size:12.5px;font-weight:700;letter-spacing:.14em}
.hero-pill i{width:8px;height:8px;border-radius:50%;background:#e8bb55;box-shadow:0 0 12px #e8bb55}
.hero h1{font-family:"EnglIA Display",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-weight:700;font-size:clamp(46px,7.4vw,108px);line-height:.98;letter-spacing:-.045em;margin:22px 0 20px;color:#fff}
.hero h1 em{display:inline-block;font-family:"EnglIA Serif",Georgia,"Times New Roman",serif;font-style:italic;font-weight:600;letter-spacing:-.01em;color:#e8bb55;padding-right:.08em}
.hero-lead{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:#c3cde8;max-width:540px;margin:0 0 30px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:38px}
.hero-btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border-radius:12px;font-weight:700;font-size:16px;transition:transform .15s ease,background .15s ease,box-shadow .15s ease}
.hero-btn-primary{background:#e8bb55;color:#012169;box-shadow:0 6px 0 #a57b22}
.hero-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 0 #a57b22}
.hero-btn-primary:active{transform:translateY(4px);box-shadow:0 2px 0 #a57b22}
.hero-btn-ghost{border:1.5px solid rgba(255,255,255,.28);color:#fff;background:rgba(255,255,255,.04)}
.hero-btn-ghost:hover{background:rgba(255,255,255,.1)}
.hero-btn-ghost .ai{color:#e8bb55}
.hero a:focus-visible{outline:3px solid #e8bb55;outline-offset:4px}
.hero-stats{display:grid;grid-template-columns:repeat(4,max-content);gap:12px 30px;justify-content:start;margin:0;padding:0;list-style:none}
.hero-stats li{display:flex;flex-direction:column;gap:3px;padding-left:14px;border-left:2px solid rgba(232,187,85,.45)}
.hero-stats strong{font-family:"EnglIA Display",system-ui,sans-serif;font-size:26px;line-height:1.1;letter-spacing:-.03em;color:#fff}
.hero-stats span{font-size:13px;color:#9fb0d6;white-space:nowrap}

/* Fichas: se colocan con JS (dispersas → forman "EnglIA" al hacer scroll). */
.hero-tiles{position:absolute;inset:0;pointer-events:none}
.hero-tile{opacity:0;transition:opacity .6s ease;position:absolute;left:0;top:0;width:var(--s,120px);height:var(--s,120px);will-change:transform}
.hero-tile b{position:absolute;inset:0;display:grid;place-items:center;border-radius:22%;font-family:"EnglIA Display",system-ui,sans-serif;font-weight:700;font-size:calc(var(--s,120px) * .5);letter-spacing:-.04em;animation:tileFloat 6s ease-in-out infinite;animation-delay:var(--d,0s)}
.hero-tile b:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 40%);pointer-events:none}
.tile-blue b{background:linear-gradient(155deg,#4c77ee,#2b52c9 45%,#1c3ba3);color:#fff;box-shadow:0 calc(var(--s) * .09) 0 #13297a,0 calc(var(--s) * .1) 0 #0d1d5a,0 24px 44px rgba(0,0,0,.5),inset 0 4px 7px rgba(255,255,255,.35)}
.tile-gold b{background:linear-gradient(155deg,#f8da8c,#ecc062 45%,#d6a13a);color:#012169;box-shadow:0 calc(var(--s) * .09) 0 #9b7020,0 calc(var(--s) * .1) 0 #7d5a18,0 24px 44px rgba(0,0,0,.5),inset 0 4px 7px rgba(255,255,255,.55)}
.tile-red b{background:linear-gradient(155deg,#f2566a,#d61b39 45%,#a80f2a);color:#fff;box-shadow:0 calc(var(--s) * .09) 0 #760b1f,0 calc(var(--s) * .1) 0 #560717,0 24px 44px rgba(0,0,0,.5),inset 0 4px 7px rgba(255,255,255,.35)}
.hero.is-ready .hero-tile{opacity:1}
@keyframes tileFloat{0%,100%{translate:0 0}50%{translate:0 calc(var(--float,1) * -10px)}}

.hero-reveal{position:absolute;left:0;right:0;bottom:calc(50% - 150px);text-align:center;font-size:clamp(16px,1.6vw,20px);color:#c3cde8;opacity:calc((var(--p) - .62) * 3.2);transform:translateY(calc((1 - var(--p)) * 30px))}
.hero-reveal strong{color:#fff}
.hero-reveal em{font-family:"EnglIA Serif",Georgia,serif;font-style:italic;color:#e8bb55}

.hero-scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.2em;color:#9fb0d6;opacity:calc(1 - var(--p) * 5)}
.hero-scroll i{width:24px;height:38px;border:2px solid rgba(255,255,255,.4);border-radius:14px;position:relative}
.hero-scroll i:after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#e8bb55;animation:scrollCue 1.8s ease-in-out infinite}
@keyframes scrollCue{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}80%,100%{opacity:0;transform:translateY(12px)}}

/* La primera sección sube por encima de la portada. */
.hero-wrap + .learning-section{position:relative;z-index:2;margin-top:-56px;box-shadow:0 -18px 50px rgba(3,8,30,.35)}

@media(max-width:900px){
  .hero-wrap{height:calc(100svh + 60vh)}
  .hero-inner{justify-content:flex-start;padding-top:max(88px,15vh);padding-bottom:0}
  .hero-copy{max-width:none}
  .hero-stats{grid-template-columns:repeat(2,max-content);gap:14px 26px}
  .hero-tri.t1{left:auto;right:9%;top:3.5%}
  .hero-tri.t2{display:none}
  .hero-dot{left:8%;bottom:10%}
}
@media(max-width:600px){
  .hero-inner{padding-top:max(64px,10vh)}
  .hero h1{margin:18px 0 16px}
  .hero-lead{margin-bottom:24px}
  .hero-actions{margin-bottom:28px}
  .hero-btn{flex:1 1 auto;justify-content:center}
  .hero-stats strong{font-size:22px}
  .hero-scroll{display:none}
  .hero-reveal{bottom:calc(50% - 95px)}
}
@media(max-height:680px) and (min-width:901px){.hero h1{font-size:clamp(46px,6vw,84px)}.hero-lead{margin-bottom:22px}.hero-actions{margin-bottom:26px}}

/* Visitas desde un reto compartido o con ancla: sin portada. */
.skip-hero .hero-wrap{display:none}

@media(prefers-reduced-motion:reduce){
  .hero-wrap{height:auto}
  .hero{position:relative;height:auto;min-height:100svh}
  .hero-inner{min-height:100svh;padding-block:80px}
  .hero-tile b,.hero-scroll i:after{animation:none}
  .hero-reveal{display:none}
  .hero-copy,.hero-scroll{opacity:1;transform:none}
}

/* Si la portada se omite (enlace con ancla o reto compartido), sin solapamiento con la cabecera. */
.skip-hero .hero-wrap + .learning-section{margin-top:24px;box-shadow:none}
.skip-hero .hero-wrap + .teacher-page{margin-top:0;box-shadow:none;border-radius:0}
@media(max-width:600px){.skip-hero .hero-wrap + .learning-section{margin-top:12px}}