:root{ --green:#6CC24A; --teal:#2FA7A8; --blue:#1584C9; --dark:#04141a; --dark2:#07202a; }
*{ scroll-behavior:smooth; }
html{ background:var(--dark); }
html,body{ margin:0; color:#fff; }
.poppins{ font-family:'Poppins',system-ui,sans-serif; }
.inter{ font-family:'Inter',system-ui,sans-serif; }
.serif{ font-family:'Instrument Serif',serif; font-style:italic; }
body{ font-family:'Inter',system-ui,sans-serif; overflow-x:hidden; }

/* Brand gradient text */
.grad-text{ background:linear-gradient(100deg,var(--green),var(--teal),var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Liquid glass */
.glass{ position:relative; background:rgba(255,255,255,0.02); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.08), 0 20px 40px rgba(0,0,0,0.35); border-radius:20px; overflow:hidden; }
.glass::before{ content:""; position:absolute; inset:0; padding:1.4px; border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,0.55),rgba(255,255,255,0.06));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; pointer-events:none; }

.navlink{ transition:color .2s; }
.navlink:hover{ color:var(--green); }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s } .reveal.d3{ transition-delay:.24s } .reveal.d4{ transition-delay:.32s }

/* Floating / motion */
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }
.float{ animation:float 6s ease-in-out infinite; }
@keyframes floatSlow{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(0,-22px) } }
@keyframes gradientShift{ 0%{ background-position:0% 50% } 50%{ background-position:100% 50% } 100%{ background-position:0% 50% } }
.animated-gradient{ background-size:200% 200%; animation:gradientShift 8s ease infinite; }
@keyframes pulseGlow{ 0%,100%{ opacity:.5; transform:scale(1) } 50%{ opacity:.8; transform:scale(1.06) } }

/* Blobs */
.blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; z-index:0; }

/* ---- Fondo animado global (aurora + malla) ---- */
.bg-fx{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.aurora{ position:absolute; border-radius:50%; filter:blur(85px); opacity:.34; will-change:transform; }
.a1{ width:52vw; height:52vw; background:var(--green); top:-12vw; left:-8vw; animation:drift1 16s ease-in-out infinite; }
.a2{ width:48vw; height:48vw; background:var(--blue); top:28vh; right:-14vw; animation:drift2 20s ease-in-out infinite; }
.a3{ width:42vw; height:42vw; background:var(--teal); bottom:-14vw; left:32vw; animation:drift3 24s ease-in-out infinite; }
.a4{ width:32vw; height:32vw; background:var(--green); top:118vh; right:10vw; animation:drift1 22s ease-in-out infinite; }
@keyframes drift1{ 0%,100%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(6vw,8vh) scale(1.15) } }
@keyframes drift2{ 0%,100%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(-8vw,-6vh) scale(1.12) } }
@keyframes drift3{ 0%,100%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(5vw,-10vh) scale(1.2) } }
.bg-mesh{ position:absolute; inset:-2px;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 20%, #000 35%, transparent 78%);
  mask-image:radial-gradient(ellipse at 50% 20%, #000 35%, transparent 78%);
  animation:meshPan 40s linear infinite; }
@keyframes meshPan{ from{ background-position:0 0 } to{ background-position:72px 72px } }
@keyframes spin{ to{ transform:translate(-50%,-50%) rotate(360deg) } }
@keyframes blobMove1{ 0%,100%{ transform:translate(0,0) scale(1) } 33%{ transform:translate(60px,-40px) scale(1.1) } 66%{ transform:translate(-40px,30px) scale(.95) } }
@keyframes blobMove2{ 0%,100%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(-70px,-50px) scale(1.12) } }
.spin-glow{ position:absolute; left:50%; top:50%; width:840px; height:840px; border-radius:50%; filter:blur(45px); opacity:.32;
  background:conic-gradient(from 0deg, transparent 0deg, var(--green) 55deg, var(--teal) 110deg, var(--blue) 165deg, transparent 245deg, transparent 360deg);
  transform:translate(-50%,-50%); animation:spin 9s linear infinite; will-change:transform; }

/* Card hover */
.course-card{ display:flex; border-radius:18px; padding:1px; background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02)); transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, background .4s; }
.course-card:hover{ transform:translateY(-8px); box-shadow:0 26px 50px rgba(0,0,0,.5); background:linear-gradient(180deg,rgba(108,194,74,.7),rgba(21,132,201,.18)); }
.cc-inner{ position:relative; width:100%; border-radius:17px; background:rgba(9,32,42,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); overflow:hidden; }
.cc-spot{ position:absolute; top:-45%; left:50%; width:80%; height:70%; transform:translateX(-50%); background:radial-gradient(ellipse at center, rgba(108,194,74,.20), transparent 70%); opacity:0; transition:opacity .45s; pointer-events:none; }
.course-card:hover .cc-spot{ opacity:1; }
.course-ic{ transition:transform .4s cubic-bezier(.2,.7,.2,1); box-shadow:0 8px 20px rgba(21,132,201,.28); }
.course-card:hover .course-ic{ transform:scale(1.1) rotate(-4deg); }
.cc-link i{ transition:transform .3s; }
.course-card:hover .cc-link i{ transform:translateX(4px); }

.btn-primary{ transition:transform .25s, box-shadow .25s, filter .25s; }
.btn-primary:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 12px 28px rgba(108,194,74,.35); filter:brightness(1.05); }
.btn-ghost{ transition:background .25s, border-color .25s, color .25s; }
.btn-ghost:hover{ background:rgba(108,194,74,.12); border-color:var(--green); color:var(--green); }

.grid-lines{ background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:64px 64px; }

/* Marquee testimonials */
.marquee{ display:flex; gap:20px; width:max-content; animation:scrollX 34s linear infinite; }
.marquee:hover{ animation-play-state:paused; }
@keyframes scrollX{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

.link-underline{ position:relative; }
.link-underline::after{ content:""; position:absolute; left:0; bottom:-3px; height:1.5px; width:0; background:var(--green); transition:width .3s; }
.link-underline:hover::after{ width:100%; }

/* Barra de progreso */
#scrollProgress{ position:fixed; top:0; left:0; height:3px; width:0%; z-index:65; background:linear-gradient(90deg,var(--green),var(--teal),var(--blue)); box-shadow:0 0 12px rgba(108,194,74,.5); transition:width .1s linear; }
/* Nav activo */
header nav a.navlink.active{ color:var(--green); }
/* Titular por palabras */
.hero-title .w{ display:inline-block; opacity:0; transform:translateY(26px); animation:wordUp .7s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes wordUp{ to{ opacity:1; transform:none; } }
/* Tilt tarjetas */
#coursesGrid{ perspective:1200px; }
.course-card{ transform-style:preserve-3d; }
/* WhatsApp flotante */
#waBtn{ animation:waPulse 2.4s ease-in-out infinite; transition:transform .25s; }
#waBtn:hover{ transform:scale(1.09); }
@keyframes waPulse{ 0%,100%{ box-shadow:0 10px 26px rgba(37,211,102,.4), 0 0 0 0 rgba(37,211,102,.5) } 50%{ box-shadow:0 10px 26px rgba(37,211,102,.4), 0 0 0 14px rgba(37,211,102,0) } }
/* Magnético */
.magnetic{ transition:transform .2s cubic-bezier(.2,.7,.2,1); }
/* Pasos / docentes */
.step-card,.teacher-card{ transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.step-card:hover,.teacher-card:hover{ transform:translateY(-6px); box-shadow:0 20px 42px rgba(0,0,0,.42); }
/* FAQ */
.faq-item .faq-a{ max-height:0; overflow:hidden; opacity:0; transition:max-height .4s ease, opacity .3s ease; }
.faq-item.open .faq-a{ max-height:340px; opacity:1; }
.faq-item.open .faq-ic{ transform:rotate(45deg); color:var(--green); }
.faq-ic{ transition:transform .3s, color .3s; }
/* Reguladores */
.reg-chip{ transition:border-color .3s, color .3s, background .3s; }
.reg-chip:hover{ border-color:var(--green); color:#fff; background:rgba(108,194,74,.08); }
::selection{ background:rgba(108,194,74,.35); }
input,textarea{ font-family:'Inter',sans-serif; }