/* IziAcademy · estilos del sitio. Misma línea gráfica que el temario:
   paleta de mydatta.com, Poppins para leer y Press Start 2P para los guiños de videojuego. */
:root{--azul:#2563EB;--azul-claro:#3B7DF0;--azul-hondo:#1D4ED8;--azul-medio:#93B4F8;--tinta:#0F172A;--tinta-suave:#1E293B;--verde:#22C55E;--verde-hondo:#15803D;--menta:#A7F3D0;--menta-clara:#E2F5EC;--azul-luz:#EFF4FF;--nieve:#F8FAFF;--linea:#DDE6F8;--texto-2:#2D4070;--texto-3:#586D91;--cian:#67E8F9;--ambar:#F59E0B;--ambar-hondo:#B45309;--rojo:#E0445F;
--r-lg:18px;--r-xl:26px;--sombra:0 16px 34px rgba(15,23,42,.08);--sombra-alta:0 24px 54px rgba(15,23,42,.12);--sombra-azul:0 10px 26px rgba(37,99,235,.26);
--degradado-azul:linear-gradient(180deg,#3B7DF0 0%,#2563EB 52%,#1D4ED8 100%);--curva:cubic-bezier(.22,1,.36,1);--sale:cubic-bezier(.2,.7,.2,1);
--fuente:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;--mono:ui-monospace,'SFMono-Regular','Roboto Mono',monospace;--pixel:'Press Start 2P',var(--mono)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background-color:var(--nieve);background-image:linear-gradient(rgba(37,99,235,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.045) 1px,transparent 1px);background-size:40px 40px;color:var(--tinta);font:400 1rem/1.65 var(--fuente);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p,figure,ol,ul{margin:0}ol,ul{list-style:none;padding:0}
a{color:inherit}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--azul-claro);outline-offset:3px}
img{max-width:100%}
::selection{background:var(--cian);color:var(--tinta)}
.wrap{position:relative;width:min(1180px,calc(100% - 32px));margin-inline:auto}
/* Sin mayúsculas forzadas: la fuente pixelada no tiene vocales mayúsculas con tilde. */
.pixel{font-family:var(--pixel);letter-spacing:0}
.eyebrow{display:flex;align-items:center;gap:.8em;margin-bottom:16px;font:400 .62rem/1.6 var(--pixel);color:var(--azul)}
/* Flecha dibujada con CSS: queda centrada con el texto pixelado (el carácter ▶ venía de otra fuente y se desalineaba). */
.eyebrow::before{content:"";flex:none;width:0;height:0;border-left:.62em solid var(--ambar);border-top:.4em solid transparent;border-bottom:.4em solid transparent;position:relative;top:-.07em;animation:parpadeo 1.1s steps(2,start) infinite}
@keyframes parpadeo{to{visibility:hidden}}
h2.grande{font:800 clamp(1.9rem,4.4vw,3.2rem)/1.08 var(--fuente);letter-spacing:-.035em}
h2.grande em,h1 em{font-style:normal;background:linear-gradient(90deg,var(--azul),#06B6D4);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{margin-top:18px;max-width:720px;font-size:1.08rem;color:var(--texto-3)}
.seccion{padding:clamp(64px,9vw,110px) 0}
.oculto{display:none!important}

/* ---------- Botones ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 28px;border:0;border-radius:999px;font:700 .8rem/1 var(--fuente);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .3s var(--curva),box-shadow .3s,background .3s,color .3s}
.btn-azul{background:var(--degradado-azul);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.42),var(--sombra-azul)}
.btn-azul:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 16px 34px rgba(37,99,235,.4)}
.btn-azul::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg)}
.btn-azul:hover::after{animation:destello .7s ease-out}
@keyframes destello{to{left:130%}}
.btn-oro{background:linear-gradient(180deg,#FCD34D,var(--ambar));color:var(--tinta);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 26px rgba(245,158,11,.35)}
.btn-oro:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 16px 34px rgba(245,158,11,.5)}
.btn-vidrio{color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.btn-vidrio:hover{background:#fff;color:var(--tinta)}
.btn-borde{color:var(--azul);background:#fff;border:1.5px solid var(--azul-medio)}
.btn-borde:hover{border-color:var(--azul);background:var(--azul-luz)}
.btn-chico{padding:11px 18px;font-size:.7rem}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.btn svg{width:16px;height:16px;transition:transform .3s var(--curva)}.btn:hover svg{transform:translateX(3px)}
.botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ---------- Header ---------- */
.header{position:fixed;inset:0 0 auto;z-index:50;height:72px;display:flex;align-items:center;transition:background .4s,box-shadow .4s,border-color .4s;border-bottom:1px solid transparent}
.header .wrap{display:flex;align-items:center;gap:18px}
.marca{display:inline-flex;align-items:baseline;text-decoration:none;color:#fff;transition:color .4s}
.logo-izi{font:800 1.6rem/1 var(--fuente);letter-spacing:-.04em}
.logo-acad{font:500 1.6rem/1 var(--fuente);letter-spacing:-.04em;opacity:.92}
.logo-acad::after{content:"";display:inline-block;width:.1em;height:.82em;margin-left:.06em;vertical-align:-.06em;background:var(--cian);animation:parpadeo 1.1s steps(2,start) infinite}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{padding:8px 14px;border-radius:999px;font-size:.74rem;font-weight:700;text-decoration:none;color:rgba(255,255,255,.8);transition:color .3s,box-shadow .3s,background .3s}
.nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav a.activo{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.nav .nav-cuenta::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--texto-3);vertical-align:1px}
.nav .nav-cuenta.conectado::before{background:var(--verde);box-shadow:0 0 8px var(--verde)}
.header .btn{padding:12px 20px;font-size:.69rem;animation:pulso 2.6s ease-in-out infinite}
@keyframes pulso{50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 0 0 6px rgba(37,99,235,.16),0 0 24px rgba(103,232,249,.45)}}
.header.solido,body:not(.con-hero) .header{background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);border-color:var(--linea);box-shadow:0 2px 14px rgba(15,23,42,.05)}
.header.solido .marca,body:not(.con-hero) .marca{color:var(--tinta)}
.header.solido .logo-acad::after,body:not(.con-hero) .logo-acad::after{background:var(--azul)}
.header.solido .nav a,body:not(.con-hero) .nav a{color:var(--texto-2)}
.header.solido .nav a:hover,body:not(.con-hero) .nav a:hover{color:var(--azul);background:var(--azul-luz)}
.header.solido .nav a.activo,body:not(.con-hero) .nav a.activo{color:var(--azul);box-shadow:inset 0 0 0 1px rgba(37,99,235,.3),0 0 16px -5px rgba(37,99,235,.65)}
.menu-btn{display:none;width:44px;height:44px;margin-left:auto;border:0;border-radius:12px;background:rgba(255,255,255,.12);cursor:pointer;position:relative}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{position:absolute;left:12px;width:20px;height:2px;border-radius:2px;background:#fff;content:"";transition:transform .3s,background .3s}
.menu-btn span{top:21px}.menu-btn span::before{left:0;top:-6px}.menu-btn span::after{left:0;top:6px}
.header.solido .menu-btn,body:not(.con-hero) .menu-btn{background:var(--azul-luz)}
.header.solido .menu-btn span,.header.solido .menu-btn span::before,.header.solido .menu-btn span::after,body:not(.con-hero) .menu-btn span,body:not(.con-hero) .menu-btn span::before,body:not(.con-hero) .menu-btn span::after{background:var(--tinta)}
.menu-abierto .menu-btn span{background:transparent!important}
.menu-abierto .menu-btn span::before{transform:translateY(6px) rotate(45deg)}.menu-abierto .menu-btn span::after{transform:translateY(-6px) rotate(-45deg)}
.xpbar{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:rgba(37,99,235,.1)}
.xpbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cian),var(--azul));box-shadow:0 0 10px rgba(103,232,249,.8)}
.xp-hud{font:400 .55rem/1 var(--pixel);color:var(--azul);white-space:nowrap}
body.con-hero .header:not(.solido) .xp-hud{display:none}
@media(max-width:980px){
  .menu-btn{display:block}
  .header .btn,.xp-hud{display:none!important}
  .nav{position:fixed;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;gap:4px;margin:0;padding:16px;background:#fff;border-bottom:1px solid var(--linea);box-shadow:0 20px 40px rgba(15,23,42,.12);transform:translateY(-12px);opacity:0;visibility:hidden;transition:.3s}
  .menu-abierto .nav{transform:none;opacity:1;visibility:visible}
  .nav a,.header .nav a{padding:14px 16px;border-radius:12px;font-size:.95rem;color:var(--texto-2)}
  .nav a.activo,.header .nav a.activo{color:var(--azul);background:var(--azul-luz);box-shadow:none}
  .nav .nav-pack{display:block;margin-top:8px;text-align:center;background:var(--degradado-azul);color:#fff!important}
}
@media(min-width:981px){.nav .nav-pack{display:none}}

/* ---------- Hero (inicio) ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--tinta);color:#fff;isolation:isolate}
.hero-fondo{position:absolute;inset:-6% 0 0;z-index:-2;will-change:transform}
.hero-fondo picture{display:block;height:100%;animation:deriva 22s ease-in-out 2.6s infinite alternate}
@keyframes deriva{to{transform:scale(1.08) translate(-1.5%,-1%)}}
.hero-fondo img{width:100%;height:100%;object-fit:cover;object-position:65% 50%;animation:acercar 2.6s var(--sale) both,brillo 5s ease-in-out 2.6s infinite;transition:translate .8s var(--sale)}
@keyframes acercar{from{scale:1.14;filter:blur(6px) brightness(.6)}}
@keyframes brillo{50%{filter:brightness(1.14) saturate(1.2)}}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(15,23,42,.94) 0%,rgba(15,23,42,.78) 34%,rgba(15,23,42,.15) 68%,rgba(15,23,42,.35) 100%),linear-gradient(0deg,rgba(15,23,42,.85) 0%,transparent 30%)}
.hero-fx{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero-fx .scan{position:absolute;left:0;right:0;top:-20%;height:18%;background:linear-gradient(180deg,transparent,rgba(103,232,249,.07) 70%,rgba(103,232,249,.22) 98%,transparent);animation:escanear 7s linear infinite}
@keyframes escanear{to{top:110%}}
.hero-fx::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px)}
.pixeles span{position:absolute;bottom:-12px;background:var(--c);box-shadow:0 0 10px var(--c);opacity:0;animation:subir var(--d) linear var(--t) infinite}
@keyframes subir{0%{transform:translateY(0);opacity:0}12%{opacity:.85}80%{opacity:.6}100%{transform:translateY(-105svh);opacity:0}}
.hero .wrap{padding:110px 0 48px}
.chip{display:inline-flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;margin-bottom:26px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:.82rem;font-weight:500;color:rgba(255,255,255,.88)}
.chip img{width:28px;height:28px;border-radius:50%}
.hero h1{font:800 clamp(2.6rem,min(6.6vw,12svh),6.2rem)/1 var(--fuente);letter-spacing:-.04em;max-width:900px}
.hero h1 em{background:linear-gradient(90deg,#7FB0FF,var(--cian));-webkit-background-clip:text;background-clip:text}
.hero .sub{max-width:640px;margin-top:22px;font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:300;color:rgba(255,255,255,.82)}
.hero .sub strong{font-weight:600;color:#fff}
.hero-oferta{display:inline-flex;align-items:center;gap:12px;margin-top:26px;padding:10px 18px 10px 10px;border-radius:14px;background:rgba(251,191,36,.12);border:1.5px solid rgba(251,191,36,.6);color:#fff;text-decoration:none;font-size:.92rem;transition:background .3s}
.hero-oferta:hover{background:rgba(251,191,36,.22)}
.hero-oferta .pixel{padding:8px 10px;border-radius:8px;background:var(--ambar);color:var(--tinta);font-size:.55rem}
.hero-oferta b{color:#FCD34D}.hero-oferta s{color:rgba(255,255,255,.5)}
@media(max-width:700px){.hero-oferta{width:100%}}
/* Texto del hero que se escribe solo, con el cursor | parpadeando */
.hero h1 .tw{display:block}
.js .hero h1 .ch{visibility:hidden}.js .hero h1 .ch.on{visibility:visible}
.cursor-tw{display:inline-block;width:.07em;height:.86em;margin-left:.05em;vertical-align:-.06em;background:var(--cian);box-shadow:0 0 14px rgba(103,232,249,.8);animation:parpadeo 1s steps(2,start) infinite}
.hero.corto{min-height:58svh}.hero.corto .wrap{padding:120px 0 48px}
.hero.corto h1{font-size:clamp(2.2rem,min(5vw,9svh),4.4rem)}
.js .hero .entra{opacity:0;translate:0 16px;transition:opacity .9s .5s,translate .9s var(--sale) .5s}
.js body.listo .hero .entra{opacity:1;translate:none}
@media(max-width:700px){
  .hero{align-items:flex-end}
  .hero-fondo{inset:0 0 auto;height:66svh}
  .hero-fondo img{object-position:50% 45%}
  .hero::before{background:linear-gradient(0deg,var(--tinta) 0%,var(--tinta) 40%,rgba(15,23,42,.72) 52%,rgba(15,23,42,.08) 72%,rgba(15,23,42,.05) 84%,rgba(15,23,42,.55) 100%)}
  .hero .chip{display:none}
  .hero h1{font-size:clamp(2.1rem,10.5vw,2.8rem)}
  .hero .sub{font-size:1rem;margin-top:16px}
  .botones .btn{flex:1 1 100%}
}

/* ---------- Cabecera de páginas internas ---------- */
.pagina-cab{padding:140px 0 56px;border-bottom:1px solid var(--linea);background:linear-gradient(180deg,#fff,rgba(255,255,255,0))}
.pagina-cab h1{font:800 clamp(2.2rem,5vw,3.6rem)/1.05 var(--fuente);letter-spacing:-.04em;max-width:880px}

/* ---------- Ofertón ---------- */
.oferton{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(28px,4vw,56px);border-radius:32px;color:#fff;overflow:hidden;background:radial-gradient(ellipse at 85% 0%,#1E3A8A 0%,transparent 60%),linear-gradient(180deg,#0B1530,var(--tinta));border:1.5px solid rgba(251,191,36,.55);box-shadow:0 0 50px rgba(245,158,11,.18),0 30px 70px rgba(15,23,42,.3)}
.oferton::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(103,232,249,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(103,232,249,.07) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
.oferton>*{position:relative}
.sello{display:inline-block;margin-bottom:18px;padding:9px 12px;border-radius:8px;background:var(--ambar);color:var(--tinta);font:400 .62rem/1 var(--pixel);box-shadow:0 0 20px rgba(245,158,11,.55);animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-4px)}}
.oferton h2{font:800 clamp(1.9rem,4vw,3rem)/1.08 var(--fuente);letter-spacing:-.035em}
.oferton h2 em{font-style:normal;background:linear-gradient(90deg,#FCD34D,var(--ambar));-webkit-background-clip:text;background-clip:text;color:transparent}
.oferton p{margin-top:14px;color:rgba(255,255,255,.75)}
.precio-pack{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-top:26px}
.precio-pack .antes{font-size:1.2rem;color:rgba(255,255,255,.5);text-decoration:line-through}
.precio-pack .ahora{font:800 clamp(3.2rem,7vw,4.6rem)/.9 var(--fuente);letter-spacing:-.04em;color:#fff}
.precio-pack .ahorro{padding:7px 10px;border-radius:8px;background:rgba(34,197,94,.16);border:1px solid rgba(74,222,128,.5);color:#4ADE80;font:400 .55rem/1.4 var(--pixel)}
.pack-lista{display:grid;gap:12px}
.pack-item{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.pack-item img{flex:none;width:58px;height:58px;object-fit:contain;border-radius:12px;background:radial-gradient(circle,rgba(59,125,240,.45),rgba(15,23,42,.2))}
.pack-item .pixel{display:block;font-size:.5rem;color:var(--cian);margin-bottom:6px}
.pack-item b{display:block;font-size:.95rem}
.pack-item s{margin-left:auto;color:rgba(255,255,255,.45);font-size:.9rem}
@media(max-width:860px){.oferton{grid-template-columns:1fr}}

/* ---------- Tarjetas de curso ---------- */
/* Tarjeta compacta de curso (estilo tienda): 3 por fila, todo lo importante a la vista. */
.cursos-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
.curso-card{display:flex;flex-direction:column;border-radius:18px;background:#fff;border:1px solid var(--linea);box-shadow:0 8px 22px rgba(15,23,42,.06);overflow:hidden;transition:transform .3s var(--curva),box-shadow .3s,border-color .3s}
.curso-card:hover{transform:translateY(-4px);border-color:var(--azul);box-shadow:0 0 0 3px rgba(37,99,235,.12),var(--sombra)}
.cc-img{position:relative;display:block;aspect-ratio:2/1;overflow:hidden;background:radial-gradient(circle at 50% 50%,#fff 0%,var(--azul-luz) 58%,#DCE7FD 100%)}
.cc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:35% 40%;transition:transform .5s var(--curva)}
.curso-card:hover .cc-img img{transform:scale(1.05)}
.cc-img .tag{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);padding:6px 9px;border-radius:7px;background:var(--tinta);color:var(--cian);font:400 .48rem/1.3 var(--pixel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-img .tag.tuyo{left:auto;right:10px;top:10px;bottom:auto;background:var(--verde);color:#fff}
.curso-cuerpo{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.curso-cuerpo h3{font:700 1.05rem/1.25 var(--fuente);letter-spacing:-.01em}
.curso-cuerpo h3 a{color:inherit;text-decoration:none}.curso-cuerpo h3 a:hover{color:var(--azul)}
.gancho{margin-top:6px;font-size:.88rem;line-height:1.45;font-weight:600;color:var(--azul-hondo)}
.aprendes{display:grid;gap:4px;margin-top:10px}
.aprendes li{position:relative;padding-left:20px;font-size:.82rem;line-height:1.4;color:var(--texto-2)}
.aprendes li::before{content:"✓";position:absolute;left:0;top:0;color:var(--verde);font-weight:800}
.req-mini{margin-top:10px;padding:7px 9px;border-radius:9px;background:#FFFBEB;border:1px solid #FCD34D;font-size:.74rem;line-height:1.4;color:var(--ambar-hondo)}
.req-mini b{color:#92400E}
.curso-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px}
.curso-precio{font:800 1.5rem/1 var(--fuente);letter-spacing:-.03em;color:var(--tinta)}
.curso-precio small{display:block;margin-top:4px;font:500 .72rem/1 var(--fuente);color:var(--texto-3);letter-spacing:0}
.curso-precio small a{color:var(--azul)}
.curso-pie .btn{padding:10px 16px;font-size:.66rem}
@media(max-width:900px){.cursos-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media(max-width:560px){
  .curso-cuerpo{padding:12px}
  .curso-cuerpo h3{font-size:.92rem}
  .gancho{font-size:.78rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .aprendes{display:none}
  .req-mini{font-size:.68rem}
  .curso-pie{flex-direction:column;align-items:stretch;gap:8px}
  .curso-pie .btn{width:100%}
  .curso-precio{font-size:1.25rem}
}

/* ---------- La diferencia ---------- */
.versus-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
.lado{padding:clamp(22px,3vw,36px);border-radius:var(--r-xl);border:1px solid var(--linea)}
.lado .quien{margin-bottom:18px;font:400 .6rem/1.6 var(--pixel)}
.lado ul{display:grid;gap:14px}
.lado li{position:relative;padding-left:34px;line-height:1.5}
.lado li::before{position:absolute;left:0;top:1px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font:700 .72rem/1 var(--fuente)}
.lado.otro{background:#fff}.lado.otro .quien,.lado.otro li{color:var(--texto-3)}
.lado.otro li::before{content:"✕";background:#FDE8EC;color:var(--rojo)}
.lado.datta{background:linear-gradient(160deg,#1E3A8A 0%,var(--tinta) 70%);border-color:transparent;color:#fff;animation:neon 3.5s ease-in-out infinite}
@keyframes neon{0%,100%{box-shadow:0 0 0 1px rgba(103,232,249,.35),0 24px 54px rgba(29,78,216,.28)}50%{box-shadow:0 0 0 1px rgba(103,232,249,.7),0 0 60px rgba(103,232,249,.32)}}
.lado.datta .quien{color:var(--cian)}.lado.datta li{color:rgba(255,255,255,.9)}
.lado.datta li::before{content:"✓";background:rgba(103,232,249,.16);color:var(--cian)}
.frase-centro{margin-top:30px;text-align:center;font-size:clamp(1.05rem,1.8vw,1.3rem);color:var(--texto-2)}.frase-centro b{color:var(--azul)}
@media(max-width:760px){.versus-grid{grid-template-columns:1fr}}

/* ---------- Bloques generales ---------- */
.tarjetas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.tarjeta{padding:28px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--linea);box-shadow:var(--sombra);transition:transform .3s var(--curva),border-color .3s}
.tarjeta:hover{transform:translateY(-4px);border-color:var(--azul-medio)}
.tarjeta .ico{display:grid;place-items:center;width:48px;height:48px;margin-bottom:16px;border-radius:12px;background:var(--degradado-azul);box-shadow:var(--sombra-azul);color:#fff;font:400 .7rem/1 var(--pixel)}
.tarjeta h3{font:600 1.08rem/1.3 var(--fuente);margin-bottom:8px}.tarjeta p{color:var(--texto-3);font-size:.95rem}
@media(max-width:860px){.tarjetas{grid-template-columns:1fr}}
.pasos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px;counter-reset:paso}
.paso{position:relative;padding:24px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--linea)}
.paso::before{counter-increment:paso;content:"0" counter(paso);display:block;margin-bottom:14px;font:400 1.1rem/1 var(--pixel);color:var(--azul)}
.paso h3{font:600 1rem/1.35 var(--fuente);margin-bottom:6px}.paso p{font-size:.9rem;color:var(--texto-3)}
@media(max-width:860px){.pasos{grid-template-columns:1fr 1fr}}@media(max-width:520px){.pasos{grid-template-columns:1fr}}
.faq{display:grid;gap:12px;margin-top:36px;max-width:860px}
.faq details{padding:18px 22px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--linea)}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";font:400 .8rem/1.6 var(--pixel);color:var(--azul)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin-top:12px;color:var(--texto-3)}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
@media(max-width:860px){.dos-col{grid-template-columns:1fr}}
.figura-datto{display:grid;place-items:center;min-height:340px;border-radius:var(--r-xl);background:radial-gradient(circle at 50% 45%,#fff 0%,var(--azul-luz) 55%,#DCE7FD 100%);border:1px solid var(--linea)}
.figura-datto img{max-height:300px;filter:drop-shadow(0 18px 24px rgba(29,78,216,.22));animation:flotar 6s ease-in-out infinite}

/* ---------- Cierre ---------- */
.cierre{position:relative;overflow:hidden;padding:clamp(72px,10vw,120px) 0;background:var(--tinta);color:#fff;text-align:center;isolation:isolate}
.cierre::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% -20%,rgba(37,99,235,.55),transparent 62%)}
.cierre .listo{display:inline-block;margin-bottom:22px;font:400 .66rem/1.6 var(--pixel);color:#FCD34D;animation:parpadeo 1.1s steps(2,start) infinite}
.cierre h2{font:800 clamp(2rem,5vw,3.4rem)/1.06 var(--fuente);letter-spacing:-.035em;max-width:900px;margin:0 auto}
.cierre h2 em{font-style:normal;background:linear-gradient(90deg,#7FB0FF,var(--cian));-webkit-background-clip:text;background-clip:text;color:transparent}
.cierre p{max-width:560px;margin:20px auto 0;color:rgba(255,255,255,.72)}
.cierre .botones{justify-content:center}

/* ---------- Formularios y paneles ---------- */
.panel{padding:clamp(24px,4vw,40px);border-radius:var(--r-xl);background:#fff;border:1px solid var(--linea);box-shadow:var(--sombra)}
.acceso{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;max-width:980px}
@media(max-width:820px){.acceso{grid-template-columns:1fr}}
.pestanas{display:flex;gap:6px;padding:6px;margin-bottom:24px;border-radius:14px;background:var(--azul-luz)}
.pestanas button{flex:1;padding:11px;border:0;border-radius:10px;background:none;font:600 .9rem/1 var(--fuente);color:var(--texto-2);cursor:pointer}
.pestanas button.activa{background:#fff;color:var(--azul);box-shadow:0 2px 10px rgba(37,99,235,.12)}
.campo{display:grid;gap:6px;margin-bottom:16px}
.campo label{font-size:.85rem;font-weight:600;color:var(--texto-2)}
.campo input{width:100%;padding:14px 16px;border-radius:12px;border:1.5px solid var(--linea);background:var(--nieve);font:400 1rem/1.2 var(--fuente);color:var(--tinta);transition:border-color .2s,box-shadow .2s}
.campo input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px rgba(37,99,235,.12);background:#fff}
.aviso{margin-bottom:16px;padding:12px 16px;border-radius:12px;font-size:.92rem}
.aviso.error{background:#FDE8EC;color:#9F1239;border:1px solid #FBCFE8}
.aviso.ok{background:var(--menta-clara);color:var(--verde-hondo);border:1px solid var(--menta)}
.aviso.info{background:var(--azul-luz);color:var(--azul-hondo);border:1px solid var(--linea)}
.btn-bloque{width:100%}
.ventajas-acceso{display:grid;gap:14px}
.ventajas-acceso li{display:flex;gap:12px;align-items:flex-start;color:var(--texto-2)}
.ventajas-acceso li::before{content:"★";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#FFFBEB;border:1px solid #FDE68A;color:var(--ambar)}

/* ---------- Pagar ---------- */
.pago{display:grid;grid-template-columns:1fr 1.1fr;gap:24px;align-items:start}
@media(max-width:860px){.pago{grid-template-columns:1fr}}
.resumen-linea{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px dashed var(--linea);font-size:.95rem}
.resumen-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;font-weight:700}
.resumen-total b{font:800 2rem/1 var(--fuente);letter-spacing:-.03em}
#sumup-card{min-height:120px}
.seguro{display:flex;gap:10px;align-items:center;margin-top:16px;font-size:.85rem;color:var(--texto-3)}

/* ---------- Mi cuenta ---------- */
.cuenta{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}
@media(max-width:900px){.cuenta{grid-template-columns:1fr}}
.cuenta-menu{position:sticky;top:96px;display:grid;gap:6px;padding:14px;border-radius:var(--r-xl);background:#fff;border:1px solid var(--linea);box-shadow:var(--sombra)}
@media(max-width:900px){.cuenta-menu{position:static;grid-template-columns:repeat(2,1fr)}}
.jugador{display:flex;align-items:center;gap:12px;padding:10px 10px 16px;margin-bottom:6px;border-bottom:1px solid var(--linea)}
@media(max-width:900px){.jugador{grid-column:1/-1}}
.avatar{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--degradado-azul);color:#fff;font:400 .8rem/1 var(--pixel);box-shadow:var(--sombra-azul)}
.jugador b{display:block;font-size:.95rem;line-height:1.3}.jugador div span{font:400 .5rem/1.6 var(--pixel);color:var(--ambar-hondo)}
.cuenta-menu button{display:flex;align-items:center;gap:10px;padding:12px 14px;border:0;border-radius:12px;background:none;font:600 .9rem/1 var(--fuente);color:var(--texto-2);cursor:pointer;text-align:left}
.cuenta-menu button:hover{background:var(--azul-luz)}
.cuenta-menu button.activa{background:var(--azul-luz);color:var(--azul);box-shadow:inset 3px 0 0 var(--azul)}
.cuenta-menu .salir{color:var(--rojo)}
.cuenta h2{font:700 1.5rem/1.2 var(--fuente);letter-spacing:-.02em;margin-bottom:6px}
.cuenta .sub-h{color:var(--texto-3);margin-bottom:22px}
.mi-curso{display:grid;grid-template-columns:120px 1fr auto;gap:20px;align-items:center;padding:20px;margin-bottom:14px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--linea);transition:border-color .3s,box-shadow .3s}
.mi-curso:hover{border-color:var(--azul);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.mi-curso figure{display:grid;place-items:center;height:100px;border-radius:14px;background:radial-gradient(circle,#fff,var(--azul-luz) 60%,#DCE7FD)}
.mi-curso figure img{max-height:90px}
.mi-curso h3{font:700 1.08rem/1.3 var(--fuente)}
.mi-curso .pixel{display:block;margin-bottom:8px;font-size:.5rem;color:var(--azul)}
@media(max-width:640px){.mi-curso{grid-template-columns:1fr}.mi-curso figure{height:140px}}
.xp{margin-top:12px}
.xp-barra{height:10px;border-radius:3px;background:var(--azul-luz);border:1px solid var(--linea);overflow:hidden}
.xp-barra i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#06B6D4 0 8px,var(--azul) 8px 10px);transition:width 1.2s cubic-bezier(.65,0,.35,1)}
.xp-txt{display:flex;justify-content:space-between;margin-top:6px;font:400 .5rem/1 var(--pixel);color:var(--texto-3)}
.vacio{padding:36px;border-radius:var(--r-xl);border:1.5px dashed var(--azul-medio);background:#fff;text-align:center;color:var(--texto-3)}
.vacio .pixel{display:block;margin-bottom:12px;font-size:.62rem;color:var(--azul)}
.clase-vista{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
@media(max-width:1100px){.clase-vista{grid-template-columns:1fr}}
.video{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:var(--tinta);display:grid;place-items:center;color:rgba(255,255,255,.8);text-align:center}
.video iframe,.video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.video .pixel{display:block;margin-bottom:10px;color:var(--cian);font-size:.6rem}
.clase-info{margin-top:18px}
.clase-info h3{font:700 1.3rem/1.3 var(--fuente)}.clase-info p{margin-top:8px;color:var(--texto-3)}
.lista-clases{display:grid;gap:8px;padding:14px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--linea)}
.lista-clases button{display:flex;gap:12px;align-items:center;width:100%;padding:12px;border:1px solid transparent;border-radius:12px;background:var(--nieve);text-align:left;font:500 .88rem/1.35 var(--fuente);color:var(--texto-2);cursor:pointer}
.lista-clases button:hover{border-color:var(--azul-medio)}
.lista-clases button.activa{border-color:var(--azul);background:var(--azul-luz);color:var(--azul-hondo)}
.lista-clases .num{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#fff;border:1px solid var(--linea);font:400 .5rem/1 var(--pixel);color:var(--azul)}
.lista-clases .hecha .num{background:var(--verde);border-color:var(--verde);color:#fff}
.material{display:flex;align-items:center;gap:14px;padding:16px 18px;margin-bottom:10px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--linea);text-decoration:none;transition:border-color .3s}
.material:hover{border-color:var(--azul)}
.material .ico{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:var(--azul-luz);color:var(--azul);font:400 .5rem/1 var(--pixel)}
.material b{display:block}.material span{font-size:.85rem;color:var(--texto-3)}
.material .bajar-ico{margin-left:auto;color:var(--azul);font-weight:700}
.tabla{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--linea)}
.tabla th,.tabla td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--linea);font-size:.92rem}
.tabla th{background:var(--azul-luz);font-weight:600;color:var(--texto-2)}
.estado{display:inline-block;padding:4px 10px;border-radius:999px;font-size:.78rem;font-weight:600;background:var(--menta-clara);color:var(--verde-hondo)}

/* ---------- Footer ---------- */
footer{background:var(--tinta);color:rgba(255,255,255,.62);padding:48px 0 28px;font-size:.9rem}
.pie-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.08)}
@media(max-width:760px){.pie-grid{grid-template-columns:1fr}}
.pie-grid img{height:36px;filter:brightness(0) invert(1)}
.pie-grid p{margin-top:12px;max-width:360px}
.pie-grid h4{margin-bottom:12px;font:400 .58rem/1.6 var(--pixel);color:var(--cian)}
.pie-grid ul{display:grid;gap:8px}
footer a{color:#fff;text-decoration:none}footer a:hover{color:var(--azul-medio)}
.pie-fin{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:20px;font-size:.82rem}

/* ---------- Elementos de juego y animaciones ---------- */
.deco{position:absolute;z-index:3;pointer-events:none;user-select:none}
.bloque{display:grid;place-items:center;width:52px;height:52px;border-radius:6px;background:linear-gradient(180deg,#FCD34D,var(--ambar));border:3px solid var(--ambar-hondo);box-shadow:inset -4px -4px 0 rgba(180,83,9,.35),inset 4px 4px 0 rgba(255,255,255,.45),0 10px 24px rgba(245,158,11,.35);font:400 1.1rem/1 var(--pixel);color:#fff;text-shadow:2px 2px 0 var(--ambar-hondo);animation:bob 2s ease-in-out infinite}
.moneda{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FDE68A,var(--ambar) 60%,var(--ambar-hondo));border:2px solid var(--ambar-hondo);box-shadow:inset 0 0 0 4px rgba(255,255,255,.25),0 0 18px rgba(245,158,11,.45);animation:girar 1.8s linear infinite}
.moneda::after{content:"";position:absolute;inset:7px 11px;border-radius:2px;background:rgba(180,83,9,.45)}
@keyframes girar{0%{transform:rotateY(0) translateY(0)}50%{transform:rotateY(180deg) translateY(-8px)}100%{transform:rotateY(360deg) translateY(0)}}
.estrella{font-size:28px;line-height:1;color:var(--ambar);text-shadow:0 0 18px rgba(245,158,11,.6);animation:latir 2.2s ease-in-out infinite}
.estrella.cian{color:#06B6D4;text-shadow:0 0 18px rgba(6,182,212,.55);animation-delay:-1.1s}
@keyframes latir{50%{transform:scale(1.3) rotate(18deg)}}
.chip-code{padding:8px 12px;border-radius:10px;background:#fff;border:1.5px solid var(--azul-medio);box-shadow:0 10px 24px rgba(37,99,235,.15);font:400 .7rem/1 var(--pixel);color:var(--azul);animation:bob 3s ease-in-out infinite}
.mas-xp{font:400 .7rem/1 var(--pixel);color:var(--ambar);text-shadow:0 0 10px rgba(245,158,11,.45);animation:sube-xp 3s ease-out infinite}
@keyframes sube-xp{0%{opacity:0;transform:translateY(14px)}20%,60%{opacity:1}100%{opacity:0;transform:translateY(-26px)}}
@media(max-width:900px){.deco{display:none}}
.toast{position:fixed;left:20px;bottom:20px;z-index:60;display:flex;align-items:center;gap:12px;max-width:calc(100% - 40px);padding:12px 18px 12px 12px;border-radius:14px;background:var(--tinta);border:1.5px solid var(--ambar);box-shadow:0 0 30px rgba(245,158,11,.3),0 18px 40px rgba(15,23,42,.35);color:#fff;transform:translateY(140%);opacity:0;transition:transform .6s cubic-bezier(.34,1.56,.64,1),opacity .4s}
.toast.ver{transform:none;opacity:1}
.toast .t-ico{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:8px;background:var(--ambar);color:var(--tinta);font-size:18px}
.toast b{display:block;font:400 .55rem/1.6 var(--pixel);color:#FCD34D}
.toast span{font-size:.88rem}
.js [data-r]{opacity:0;transform:translateY(40px) scale(.98);filter:blur(8px);transition:opacity .9s var(--sale),transform .9s var(--sale),filter .9s ease}
.js [data-r].in{opacity:1;transform:none;filter:none}
.js [data-r="2"]{transition-delay:.12s}.js [data-r="3"]{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-r],.js .hero h1 .ch,.js .hero .entra{opacity:1!important;transform:none!important;translate:none!important;filter:none!important}
  .hero-fx,.deco{display:none}
}

/* ---------- Requisito previo y combo ---------- */
.requisito{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:10px 12px;border-radius:12px;background:#FFFBEB;border:1.5px solid #FCD34D;font-size:.82rem;line-height:1.45;color:var(--ambar-hondo)}
.requisito::before{content:"!";flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--ambar);color:#fff;font:400 .55rem/1 var(--pixel)}
.requisito b{color:#92400E}
.combo-opciones{display:grid;gap:10px;margin:6px 0 18px}
.combo-op{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--linea);background:var(--nieve);cursor:pointer;transition:border-color .2s,background .2s}
.combo-op:hover{border-color:var(--azul-medio)}
.combo-op input{width:20px;height:20px;accent-color:var(--azul)}
.combo-op img{flex:none;width:46px;height:46px;object-fit:contain}
.combo-op b{display:block;font-size:.95rem}.combo-op small{display:block;color:var(--texto-3);font-size:.78rem}
.combo-op.elegido{border-color:var(--azul);background:var(--azul-luz)}
.combo-op.bloqueado{opacity:.5;cursor:not-allowed}
.combo-cuenta{font:400 .58rem/1.6 var(--pixel);color:var(--azul)}
footer .marca,body:not(.con-hero) footer .marca{color:#fff}
footer .logo-acad::after,body:not(.con-hero) footer .logo-acad::after{background:var(--cian)}
@media(max-width:700px){.hero.corto{min-height:72svh}.hero.corto .wrap{padding:110px 0 32px}}
.ver-temario{display:inline-block;margin-top:16px;font-weight:700;font-size:.88rem;color:var(--azul);text-decoration:none}
.ver-temario:hover{text-decoration:underline}
.confianza{display:grid;gap:10px;margin-top:20px;padding:16px;border-radius:14px;background:var(--menta-clara);border:1px solid var(--menta)}
.confianza li{position:relative;padding-left:28px;font-size:.88rem;line-height:1.45;color:var(--tinta-suave)}
.confianza li::before{content:"✓";position:absolute;left:0;top:0;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--verde);color:#fff;font-size:.72rem;font-weight:800}
.confianza b{color:var(--verde-hondo)}
/* Fotos de los cursos: personas reales + logos de las tecnologías al costado */
.cc-logos{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;z-index:1}
.cc-logo{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#fff;box-shadow:0 6px 14px rgba(15,23,42,.18);transition:transform .3s var(--curva)}
.cc-logo img{position:static!important;width:20px!important;height:20px!important;object-fit:contain!important;transform:none!important}
.curso-card:hover .cc-logo{transform:translateX(-3px)}
.curso-card:hover .cc-logo:nth-child(2){transition-delay:.04s}.curso-card:hover .cc-logo:nth-child(3){transition-delay:.08s}.curso-card:hover .cc-logo:nth-child(4){transition-delay:.12s}
@media(max-width:560px){.cc-logos{flex-direction:row;top:6px;right:6px;transform:none;gap:4px}.cc-logo{width:24px;height:24px;border-radius:7px}.cc-logo img{width:14px!important;height:14px!important}}
.pack-item img,.combo-op img{object-fit:cover!important;border-radius:10px}
.mi-curso figure{overflow:hidden;padding:0}.mi-curso figure img{width:100%;height:100%;max-height:none;object-fit:cover}
/* Logo de Izi Academy: versión blanca sobre fondos oscuros, versión a color sobre fondo claro */
.marca{display:inline-flex;align-items:center;text-decoration:none}
.marca img{display:block;height:36px;width:auto}
.marca .logo-c{display:none}
.header.solido .marca .logo-b,body:not(.con-hero) .header .marca .logo-b{display:none}
.header.solido .marca .logo-c,body:not(.con-hero) .header .marca .logo-c{display:block}
footer .marca .logo-b{display:block!important}footer .marca .logo-c{display:none!important}
@media(max-width:700px){.marca img{height:30px}}
.req-mini.libre{background:var(--menta-clara);border-color:var(--menta);color:var(--verde-hondo);font-weight:600}