/* IA21 — estilos principales */
:root { --ink:#20212b; --muted:#656879; --violet:#8239dd; --blue:#20a8ec; --line:#e9e8f0; --paper:#f8f8fc; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; width:100%; color:var(--ink); font-family:'DM Sans',sans-serif; }
h1,h2,h3 { font-family:'Work Sans',sans-serif; letter-spacing:-.045em; }
h1 { font-size:clamp(2.8rem,4.8vw,4.8rem); line-height:1.055; font-weight:800; }
h2 { font-size:clamp(2.1rem,4.3vw,3.55rem); line-height:1.12; font-weight:700; }
h3 { font-size:1.32rem; line-height:1.25; font-weight:700; }
p { line-height:1.7; }
.shell { width:min(100% - 2.5rem,75rem); margin-inline:auto; }
.nav-shell { width:min(100% - 2.5rem,82.5rem); margin-inline:auto; }
.section-pad { padding-block:clamp(4.75rem,9vw,8.25rem); }
.eyebrow { font-size:.74rem; font-weight:800; letter-spacing:.17em; text-transform:uppercase; }
.muted { color:var(--muted); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:0.625rem; min-height:3.0625rem; padding:0.75rem 1.3125rem; border-radius:0.8125rem; font-weight:700; text-align:center; transition:transform .2s,box-shadow .2s,background .2s; }
.btn:not(:disabled):hover { transform:translateY(-0.125rem); box-shadow:0 0.75rem 1.625rem #6835bc26; }
.btn:disabled { cursor:not-allowed; opacity:.68; }
.btn-primary { background:#25242e; color:white; }
.btn-youtube { background:#dc2626; color:#fff; }
.btn-youtube:hover { background:#b91c1c; box-shadow:0 0.75rem 1.625rem #dc262640!important; }
.btn-light { background:white; color:#27242d; border:1px solid #dedce7; }
.btn-violet { background:#8239dd; color:white; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible { outline:0.1875rem solid var(--blue); outline-offset:0.25rem; }
.topbar { background:#ffffffed; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30; backdrop-filter:blur(1.125rem); }
.nav-link { color:#4f5060; font-size:.88rem; font-weight:700; transition:color .2s; }
.nav-link:hover { color:var(--violet); }
.nav-item { display:inline-flex; align-items:center; gap:0.5625rem; padding:0.625rem 1rem; border-radius:0.875rem; color:#30344a; font-size:.92rem; font-weight:600; transition:background .2s,color .2s; }
/* Íconos: los dibujos viven en /svg y se pintan con el color del texto (currentColor) usando máscara */
.icon { display:inline-block; width:1.25rem; height:1.25rem; flex:none; background-color:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; }
.icon-home { -webkit-mask-image:url(../svg/home.svg?v=6c268e72); mask-image:url(../svg/home.svg?v=6c268e72); }
.icon-cat { -webkit-mask-image:url(../svg/cat.svg?v=734169ff); mask-image:url(../svg/cat.svg?v=734169ff); }
.icon-graduation-cap { -webkit-mask-image:url(../svg/graduation-cap.svg?v=745052bb); mask-image:url(../svg/graduation-cap.svg?v=745052bb); }
.icon-globe { -webkit-mask-image:url(../svg/globe.svg?v=69038c7f); mask-image:url(../svg/globe.svg?v=69038c7f); }
.icon-mail { -webkit-mask-image:url(../svg/mail.svg?v=34e16e8e); mask-image:url(../svg/mail.svg?v=34e16e8e); }
.nav-item:hover { background:#f1f2f8; }
.nav-item.active { background:#dbe6fb; color:#3567c9; }
.mobile-nav .nav-item { width:100%; }
.logo { width:7.25rem; height:3.0625rem; object-fit:contain; object-position:left center; }
.hero { position:relative; overflow:hidden; background:radial-gradient(ellipse at 83% 35%,#e9ddff 0%,transparent 38%),radial-gradient(ellipse at 9% 75%,#dff4ff 0%,transparent 35%),#f8f8fc; }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2.1875rem,5vw,5.3125rem); align-items:center; min-height:40.625rem; padding-block:5.125rem 5.9375rem; }
.hero-copy { max-width:42.5rem; }
.hero h1 { color:#7e22ce; }
.hero-lead { max-width:34.375rem; font-size:clamp(1.05rem,1.6vw,1.25rem); }
.gradient-word { background:linear-gradient(100deg,#8239dd,#4483ea); background-clip:text; -webkit-background-clip:text; color:transparent; }
.hero-media { position:relative; width:100%; }
.hero-media img { display:block; width:100%; height:auto; border-radius:1.75rem; box-shadow:0 2.5rem 5.625rem #46337a2b,0 0.5rem 1.25rem #4c369f12; }
.card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:1.4375rem; box-shadow:0 0.75rem 2.1875rem #36345a0a; overflow:hidden; transition:transform .2s,box-shadow .2s; }
.card:hover { transform:translateY(-0.3125rem); box-shadow:0 1.5rem 3.125rem #36345a16; }
.preview { height:11.125rem; padding:1.375rem; display:flex; align-items:center; justify-content:center; background:#f4f0ff; }
.preview.rose { background:#fdeff4; } .preview.lilac { background:#eaf6fd; }
.app-logo { width:7.25rem; height:7.25rem; object-fit:contain; filter:drop-shadow(0 0.75rem 1.375rem #2d185c40); transition:transform .25s; }
.card:hover .app-logo { transform:scale(1.06) rotate(-2deg); }
.card-body { display:flex; flex-direction:column; flex:1; }
.tags { display:flex; flex-wrap:wrap; gap:0.4375rem; list-style:none; padding:0; }
.tag { padding:0.3125rem 0.6875rem; border-radius:999px; background:#f3eefe; color:#6b2bc4; font-size:.76rem; font-weight:700; }
.dl-actions { display:flex; flex-wrap:wrap; align-items:center; gap:0.625rem; margin-top:auto; }
.dl-direct { flex:1 1 8rem; white-space:nowrap; padding-inline:0.75rem; }
.dl-store { display:block; flex:0 0 auto; line-height:0; border-radius:0.25rem; transition:transform .2s,box-shadow .2s; }
.dl-store img { display:block; height:3.0625rem; width:auto; }
.dl-store:hover { transform:translateY(-0.125rem); box-shadow:0 0.75rem 1.625rem #00000030; }
.tool-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; }
.edu { background:#f2f6ff; }
.edu-grid { display:grid; grid-template-columns:1fr .9fr; gap:4.375rem; align-items:center; }
.check { display:grid; place-items:center; flex:none; width:1.6875rem; height:1.6875rem; border-radius:50%; background:#e2d5fc; color:#7130cb; }
.edu-point { display:flex; align-items:center; gap:0.8125rem; font-weight:700; }
.edu-art { display:block; width:100%; max-width:37.5rem; height:auto; margin-inline:auto; }
.equation { font-family:'Work Sans',sans-serif; font-size:clamp(2rem,5vw,3.3rem); font-weight:700; letter-spacing:-.06em; }
.video-main { display:grid; place-items:center; position:relative; overflow:hidden; width:100%; aspect-ratio:21/9; min-height:18.125rem; border-radius:1.5rem; background:linear-gradient(135deg,#262336,#3d2866 60%,#4731a1); transition:transform .25s,box-shadow .25s; }
.video-main:hover { transform:translateY(-0.1875rem); box-shadow:0 1.625rem 3.75rem #2b1a5c40; }
.video-main:before { content:""; position:absolute; width:18.125rem; height:18.125rem; border:1px solid #ffffff24; border-radius:50%; box-shadow:0 0 0 3.75rem #ffffff0a,0 0 0 7.5rem #ffffff08; }
.play { width:4.75rem; height:4.75rem; border-radius:1.375rem; display:grid; place-items:center; color:white; background:#dc2626; position:relative; box-shadow:0 0.9375rem 2.1875rem #130d3440; font-size:2rem; padding-left:0.3125rem; }
.about { background:#252432; color:white; position:relative; overflow:hidden; }
.about:after { content:""; position:absolute; width:27.5rem; height:27.5rem; border-radius:50%; background:#8845e4; filter:blur(6.875rem); opacity:.25; right:-8.125rem; top:-7.5rem; pointer-events:none; }
.support { background:radial-gradient(circle at 80% 25%,#e4d2ff,transparent 40%),#f5f0fc; }
.contact-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.contact-card { display:flex; align-items:center; gap:1rem; padding:1.25rem; background:#fff; border:1px solid var(--line); border-radius:1.25rem; box-shadow:0 0.75rem 2.1875rem #36345a0a; transition:transform .2s,box-shadow .2s,border-color .2s; }
.contact-card:hover { transform:translateY(-0.1875rem); border-color:#d9c8f7; box-shadow:0 1.25rem 2.75rem #36345a16; }
.contact-icon { display:grid; place-items:center; flex:none; width:3.125rem; height:3.125rem; border-radius:0.875rem; background:#f0e7ff; color:#7e22ce; }
.contact-icon .icon { width:1.5rem; height:1.5rem; }
.contact-text { display:flex; flex-direction:column; min-width:0; }
.contact-label { font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8a8d9c; }
.contact-text strong { font-size:1.05rem; overflow-wrap:anywhere; }
.social-list { display:flex; flex-wrap:wrap; gap:0.75rem; list-style:none; padding:0; margin:0; }
.social-btn { display:inline-flex; align-items:center; gap:0.625rem; padding:0.75rem 1.25rem; background:#fff; border:1px solid #dedce7; border-radius:0.875rem; font-weight:700; color:#27242d; transition:transform .2s,box-shadow .2s,border-color .2s; }
.social-btn:hover { transform:translateY(-0.125rem); border-color:#c9b3f3; box-shadow:0 0.75rem 1.625rem #6835bc1f; }
.social-btn img { width:1.375rem; height:1.375rem; flex:none; }
.footer { background:#f7f7fa; border-top:1px solid #e9e8f0; }
.footer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3.4375rem; max-width:47.5rem; align-items:start; justify-items:center; text-align:center; }
.dialog-backdrop { position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center; padding:1.25rem; background:#17142eae; }
.dialog-backdrop.open { display:flex; }
.dialog-box { width:min(100%,35.625rem); max-height:calc(90 * min(var(--vh, 1vh), 1vh)); overflow:auto; border-radius:1.4375rem; background:#fff; padding:clamp(1.375rem,5vw,2.125rem); box-shadow:0 2.1875rem 5.625rem #11102966; }
.reveal { animation:rise .65s both; }
@keyframes rise { from { opacity:0; transform:translateY(1rem); } to { opacity:1; transform:translateY(0); } }
.mobile-nav { display:none; }
@media(max-width:900px) { .hero-grid,.edu-grid { grid-template-columns:1fr; } .contact-grid { grid-template-columns:1fr 1fr; } .hero-grid { min-height:0; } .hero-media { max-width:35.625rem; margin:auto; } .edu-grid { gap:2.1875rem; } }
@media(max-width:700px) {
  .desktop-nav { display:none!important; } .mobile-trigger { display:flex!important; }
  .mobile-nav.open { display:flex; }
  .hero-grid { padding-block:4.0625rem 5rem; }
  .tool-grid,.footer-grid,.contact-grid { grid-template-columns:1fr; }
  .footer-grid { gap:2rem; }
}
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }
  

/* Pantallas grandes (1600px en adelante): todo el sitio escala en proporción al ancho.
   A 1600px 1rem = 16px (tamaño normal); a 1920px = 19.2px; a 3840px (4K) = 38.4px. */
@media(min-width:1600px) { html { font-size:1vw; } }