/* Data Groove — portal
   Estructura y escala tomadas de la referencia (píldoras de 40px, secciones amplias,
   tarjetas planas); piel del Manual Data Groove (negro con resplandor, azul #4E40FF,
   menta #98F9CC, juego de pesos Light + Bold, radios grandes). Oscuro por defecto. */
:root{
  color-scheme:dark;
  --bg:#05051A; --bg-soft:#0A0A22; --card:#0E0E2B; --card-2:#16163C; --line:#24244D;
  --fg:#F4F4FC; --fg-2:#BBBBD8; --muted:#8C8CB0;
  --brand:#4E40FF; --brand-hover:#6558FF; --on-brand:#FFFFFF;
  --mint:#98F9CC; --on-mint:#05051A; --accent:#98F9CC;
  --glow-a:rgba(46,38,160,.55); --glow-b:rgba(46,110,84,.34);
  --shadow:0 20px 50px rgba(0,0,0,.45);
  --grad:linear-gradient(90deg,#4E40FF,#98F9CC);
  --font:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r-card:28px; --r-sm:16px; --r-pill:40px; --pad:clamp(20px,4.4vw,64px);
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F4F4FA; --bg-soft:#ECECF6; --card:#FFFFFF; --card-2:#EEEEF8; --line:#DCDCEC;
  --fg:#0A0A24; --fg-2:#43435E; --muted:#6C6C88;
  --brand:#4E40FF; --brand-hover:#3B2EE6; --accent:#4E40FF;
  --glow-a:rgba(78,64,255,.13); --glow-b:rgba(152,249,204,.42);
  --shadow:0 18px 40px rgba(30,24,110,.10);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--font); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(900px 620px at -8% -10%,var(--glow-a),transparent 68%),radial-gradient(820px 640px at 108% 108%,var(--glow-b),transparent 68%)}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0; list-style:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
code{font-family:var(--mono); font-size:.88em; background:var(--card-2); padding:1px 6px; border-radius:6px}

/* ---------- tipografía ---------- */
.display{font-size:clamp(40px,6.3vw,84px); line-height:.98; letter-spacing:-.035em; font-weight:300; text-wrap:balance}
.display b,.h2 b,.h1 b{font-weight:700}
.h1{font-size:clamp(36px,5.4vw,72px); line-height:1; letter-spacing:-.035em; font-weight:300; text-wrap:balance}
.h2{font-size:clamp(28px,3.8vw,48px); line-height:1.08; letter-spacing:-.025em; font-weight:300; text-wrap:balance}
.h3{font-size:clamp(20px,2vw,24px); line-height:1.25; letter-spacing:-.015em; font-weight:600}
.lead{font-size:clamp(17px,1.5vw,20px); line-height:1.45; color:var(--fg-2); max-width:62ch}
.muted{color:var(--muted)} .fg2{color:var(--fg-2)}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.eyebrow.pill{background:var(--card); border:1px solid var(--line); padding:7px 14px; border-radius:999px}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
:root[data-theme="light"] .grad-text{background:none; color:var(--brand)}

/* ---------- estructura ---------- */
.wrap{padding-inline:var(--pad); max-width:1440px; margin-inline:auto}
.section{padding-block:clamp(64px,8.5vw,120px)}
.section.tight{padding-block:clamp(40px,5vw,72px)}
.head{display:flex; flex-direction:column; gap:16px; margin-bottom:clamp(32px,4vw,56px)}
.head.center{align-items:center; text-align:center}
.grid{display:grid; gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.stack{display:flex; flex-direction:column; gap:16px}
@media (max-width:980px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}

/* ---------- botones y etiquetas ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:14px 30px; border-radius:var(--r-pill); border:1px solid transparent; font:600 15px/1 var(--font); letter-spacing:-.01em; text-decoration:none; cursor:pointer; transition:background .2s,transform .2s,border-color .2s; white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--brand); color:var(--on-brand)} .btn.primary:hover{background:var(--brand-hover)}
.btn.ghost{background:transparent; border-color:var(--line); color:var(--fg)} .btn.ghost:hover{border-color:var(--accent)}
.btn.light{background:var(--card); color:var(--fg); border-color:var(--line)}
.btn.sm{min-height:40px; padding:10px 22px; font-size:14px}
.btn.block{width:100%}
.btn[aria-disabled="true"]{opacity:.55; pointer-events:none}
.link{color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:4px}
.tag{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; padding:6px 13px; border-radius:999px; background:var(--card-2); color:var(--fg)}
.tag.mint{background:var(--mint); color:var(--on-mint)}
.tag.line{background:transparent; border:1px solid var(--line); color:var(--fg-2)}
.chip{display:inline-flex; gap:6px; align-items:baseline; background:var(--card); border:1px solid var(--line); padding:11px 18px; border-radius:var(--r-pill); font-size:14px; color:var(--fg-2)}
.chip b{color:var(--fg); font-weight:600}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:clamp(22px,2.4vw,36px); min-width:0}
.card.flat{background:transparent}

/* ---------- barra de anuncio y navegación ---------- */
.announce{background:var(--brand); color:#fff; font-size:14px; font-weight:500; text-align:center; padding:11px var(--pad); display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center; align-items:center}
.announce .tag{background:#05051A; color:#fff}
.announce a{color:#fff; font-weight:700; text-underline-offset:3px}
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; gap:24px; min-height:76px}
.logo{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--fg); flex:none}
.logo-mark{width:34px; height:34px; border-radius:11px; background:var(--grad); display:grid; place-items:center; color:#05051A; font-weight:700; font-size:21px; line-height:1; padding-bottom:3px}
.logo-txt{display:flex; flex-direction:column; line-height:1}
.logo-txt span:first-child{font-size:19px; letter-spacing:-.02em; font-weight:400}
.logo-txt b{font-weight:700}
.logo-txt small{font-size:10.5px; align-self:flex-end; color:var(--muted); font-weight:300; margin-top:2px}
.logo-txt small b{color:var(--fg-2)}
.nav-links{display:flex; gap:26px; margin-inline:auto}
.nav-links a{font-size:14.5px; font-weight:500; color:var(--fg-2); text-decoration:none; padding:10px 0}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--fg)}
.nav-links a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--accent)}
.nav-act{display:flex; gap:10px; align-items:center; margin-left:auto}
.nav-links + .nav-act{margin-left:0}
.icon-btn{width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--fg); display:grid; place-items:center; cursor:pointer; flex:none}
.icon-btn:hover{border-color:var(--accent)}
.icon-btn svg{width:19px; height:19px}
.theme-btn .sun{display:none} :root[data-theme="light"] .theme-btn .sun{display:block} :root[data-theme="light"] .theme-btn .moon{display:none}
.menu-btn{display:none}
.mobile-menu{display:none; flex-direction:column; gap:4px; padding:12px var(--pad) 24px; border-bottom:1px solid var(--line); background:var(--bg)}
.mobile-menu a{padding:14px 4px; font-size:17px; font-weight:500; text-decoration:none; border-bottom:1px solid var(--line)}
.mobile-menu .btn{margin-top:14px; border-bottom:0}
@media (max-width:1060px){
  .nav-links,.nav-act .hide-m{display:none}
  .menu-btn{display:grid}
  .nav-act{margin-left:auto !important}
  .mobile-menu.open{display:flex}
}

/* ---------- hero ---------- */
.hero{padding-block:clamp(40px,6vw,88px) clamp(48px,6vw,96px)}
.hero-in{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,4vw,64px); align-items:center}
.hero-copy{display:flex; flex-direction:column; gap:24px; align-items:flex-start}
.hero-note{font-size:13.5px; color:var(--muted)}
@media (max-width:980px){.hero-in{grid-template-columns:minmax(0,1fr)}}
.page-hero{padding-block:clamp(48px,6vw,96px) clamp(24px,3vw,48px)}
.page-hero .stack{gap:20px; align-items:flex-start}
.page-hero.center .stack{align-items:center; text-align:center}
.crumbs{font-size:13px; color:var(--muted); display:flex; flex-wrap:wrap; gap:8px}
.crumbs a{color:var(--muted); text-decoration:none} .crumbs a:hover{color:var(--fg)}

/* ---------- maquetas (ilustraciones de interfaz) ---------- */
.mock{background:var(--bg-soft); border:1px solid var(--line); border-radius:20px; overflow:hidden; font-size:13px; box-shadow:var(--shadow); min-width:0}
.mock-bar{display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--line); color:var(--muted); font-size:12px}
.mock-bar i{width:9px; height:9px; border-radius:50%; background:var(--line)}
.mock-bar span{margin-left:6px}
.mock-body{padding:16px; display:flex; flex-direction:column; gap:12px}
.live{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.08em; color:#fff; background:#E5484D; padding:4px 9px; border-radius:999px}
.live::before{content:""; width:6px; height:6px; border-radius:50%; background:#fff}
.av{width:30px; height:30px; border-radius:50%; background:var(--card-2); color:var(--fg); display:grid; place-items:center; font-size:11px; font-weight:700; flex:none}
.av.b{background:var(--brand); color:#fff} .av.m{background:var(--mint); color:var(--on-mint)}
.bubble{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:9px 12px; color:var(--fg-2); max-width:100%}
.bubble b{color:var(--fg)}
.sql{font-family:var(--mono); font-size:12.5px; line-height:1.7; color:var(--fg-2); white-space:pre-wrap; overflow-wrap:anywhere}
.sql .k{color:var(--accent); font-weight:600} .sql .s{color:var(--fg)}
.tbl{width:100%; border-collapse:collapse; font-size:12px; font-variant-numeric:tabular-nums}
.tbl th{text-align:left; font-weight:600; color:var(--muted); padding:6px 8px; border-bottom:1px solid var(--line)}
.tbl td{padding:6px 8px; border-bottom:1px solid var(--line); color:var(--fg-2)}
.tbl tr:last-child td{border-bottom:0}
.hero-art{position:relative; padding:0 0 92px 0}
.hero-art .float{position:absolute; left:-14px; bottom:0; width:min(250px,70%); background:var(--card); border:1px solid var(--line); border-radius:18px; padding:14px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px; font-size:13px}
@media (max-width:560px){.hero-art .float{left:8px}}
/* clase en vivo */
.cls{display:grid; grid-template-columns:minmax(0,1fr) 74px; gap:10px}
.cls-main{aspect-ratio:16/10; border-radius:14px; background:linear-gradient(135deg,#2B2399,#1D5B4A); position:relative; display:grid; place-items:center; color:#fff}
.cls-main .live{position:absolute; top:10px; left:10px}
.cls-main .who{position:absolute; bottom:10px; left:10px; font-size:11.5px; background:rgba(5,5,26,.6); padding:4px 9px; border-radius:999px}
.cls-main .av{width:58px; height:58px; font-size:18px; background:rgba(255,255,255,.16); color:#fff}
.cls-side{display:flex; flex-direction:column; gap:8px}
.cls-side div{flex:1; border-radius:10px; background:var(--card-2); display:grid; place-items:center; font-size:11px; font-weight:700; color:var(--fg-2)}
/* entrega */
.file{display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 12px}
.file .ext{background:var(--brand); color:#fff; font-size:10px; font-weight:700; padding:6px 7px; border-radius:7px}
.bar{height:6px; border-radius:99px; background:var(--card-2); overflow:hidden}
.bar i{display:block; height:100%; width:100%; background:var(--grad); border-radius:99px; transform-origin:left}
.steps{display:flex; gap:6px; flex-wrap:wrap}
.steps span{font-size:11.5px; padding:5px 10px; border-radius:99px; background:var(--card-2); color:var(--muted)}
.steps span.on{background:var(--mint); color:var(--on-mint); font-weight:600}
/* quiz */
.opt{display:flex; justify-content:space-between; gap:10px; border:1px solid var(--line); border-radius:12px; padding:9px 12px; color:var(--fg-2); background:var(--card)}
.opt.ok{border-color:var(--mint); color:var(--fg)}
.opt.ok::after{content:"✓"; color:var(--accent); font-weight:700}
.score{display:flex; align-items:center; justify-content:space-between; gap:12px; font-weight:600}
.score b{font-size:20px; font-variant-numeric:tabular-nums}

/* ---------- animaciones: solo si el usuario no pidió menos movimiento.
   El estado en reposo (sin animación) es el cuadro final, siempre legible. ---------- */
@media (prefers-reduced-motion:no-preference){
  .live::before{animation:pulse 1.4s infinite}
  .in .a-pop{animation:pop 9s infinite both}
  .in .a-pop.d1{animation-delay:.9s}.in .a-pop.d2{animation-delay:2.2s}.in .a-pop.d3{animation-delay:3.5s}
  .in .a-fill{animation:fill 9s infinite both}
  .in .a-on1{animation:on 9s infinite both; animation-delay:.6s}
  .in .a-on2{animation:on 9s infinite both; animation-delay:2.6s}
  .in .a-on3{animation:on 9s infinite both; animation-delay:4.2s}
  .in .a-type{animation:type 9s steps(40) infinite both}
  .in .a-rows tr{animation:pop 9s infinite both}
  .in .a-rows tr:nth-child(1){animation-delay:3.2s}.in .a-rows tr:nth-child(2){animation-delay:3.5s}.in .a-rows tr:nth-child(3){animation-delay:3.8s}
  .in .a-flip{animation:flip 7s infinite}
  .in .a-sweep{animation:sweep 6s infinite}
  .in .a-bars i{animation:grow 5s infinite both}
  .in .a-bars i:nth-child(2){animation-delay:.25s}.in .a-bars i:nth-child(3){animation-delay:.5s}.in .a-bars i:nth-child(4){animation-delay:.75s}.in .a-bars i:nth-child(5){animation-delay:1s}
  .marquee-track{animation:slide 60s linear infinite}
  .marquee.rev .marquee-track{animation-direction:reverse}
  .marquee:hover .marquee-track{animation-play-state:paused}
}
@keyframes pulse{50%{opacity:.25}}
@keyframes pop{0%,3%{opacity:0; transform:translateY(8px)} 9%,92%{opacity:1; transform:none} 100%{opacity:0}}
@keyframes fill{0%,6%{transform:scaleX(0)} 30%,100%{transform:scaleX(1)}}
@keyframes on{0%,4%{opacity:.25; filter:grayscale(1)} 10%,94%{opacity:1; filter:none} 100%{opacity:.25}}
@keyframes type{0%,4%{clip-path:inset(0 100% 0 0)} 30%,100%{clip-path:inset(0 0 0 0)}}
@keyframes flip{0%,38%{transform:rotateY(0)} 50%,88%{transform:rotateY(180deg)} 100%{transform:rotateY(360deg)}}
@keyframes sweep{0%,10%{background-size:0 100%} 60%,100%{background-size:100% 100%}}
@keyframes grow{0%,8%{transform:scaleY(.15)} 40%,100%{transform:scaleY(1)}}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- franja de herramientas ---------- */
.tools{display:flex; flex-direction:column; gap:12px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee{overflow:hidden}
.marquee-track{display:flex; gap:12px; width:max-content}
.tool{display:inline-flex; align-items:center; gap:10px; padding:12px 20px; border-radius:999px; background:var(--card); border:1px solid var(--line); font-size:15px; font-weight:500; white-space:nowrap}
.tool i{width:8px; height:8px; border-radius:50%; background:var(--brand)}
.tool:nth-child(3n) i{background:var(--mint)}
@media (prefers-reduced-motion:reduce){.marquee-track{flex-wrap:wrap; width:auto; justify-content:center}.marquee-track [aria-hidden]{display:none}.tools{-webkit-mask-image:none; mask-image:none}}

/* ---------- datos ---------- */
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden}
.stats div{background:var(--card); padding:clamp(20px,2.6vw,34px); display:flex; flex-direction:column; gap:6px}
.stats b{font-size:clamp(30px,3.6vw,48px); line-height:1; letter-spacing:-.03em; font-weight:700; font-variant-numeric:tabular-nums}
.stats span{color:var(--fg-2); font-size:14.5px}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- categorías ---------- */
.cats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
@media (max-width:1100px){.cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cats{grid-template-columns:minmax(0,1fr)}}
.cat{background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:20px; display:flex; flex-direction:column; gap:16px; text-decoration:none; color:var(--fg); min-width:0}
.cat-top{display:flex; justify-content:space-between; gap:10px; align-items:center; min-height:30px}
.cat-top h3{font-size:19px; font-weight:600; letter-spacing:-.01em}
.cat-art{aspect-ratio:16/9; border-radius:18px; background:var(--card-2); display:grid; place-items:center; color:var(--muted); overflow:hidden; position:relative}
.cat-art svg{width:46%; height:auto; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.cat.on .cat-art{background:linear-gradient(120deg,#4E40FF,#98F9CC); color:#05051A}
.cat:not(.on) .btn{color:var(--fg-2)}
.cat.all{justify-content:center; align-items:center; text-align:center; background:transparent; border-style:dashed}
a.cat:hover{border-color:var(--accent)}

/* ---------- tarjeta de curso ---------- */
.course{background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; display:flex; flex-direction:column; min-width:0}
.course-top{padding:18px; min-height:150px; background:linear-gradient(120deg,#4E40FF,#98F9CC); display:flex; flex-direction:column; justify-content:space-between; gap:18px; color:#05051A}
.course-top .row{gap:8px}
.course-top .tag{background:rgba(5,5,26,.82); color:#fff}
.course-top .tag.mint{background:#05051A; color:#98F9CC}
.course-top .lvl{font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase}
.course.soon .course-top{background:var(--card-2); color:var(--fg)}
.course.soon .course-top .tag{background:var(--bg); color:var(--fg)}
.course-body{padding:22px; display:flex; flex-direction:column; gap:12px; flex:1}
.course-body h3{font-size:21px; line-height:1.22; letter-spacing:-.015em; font-weight:600}
.kv{font-size:14.5px; color:var(--fg-2)} .kv b{color:var(--fg); font-weight:600}
.price{font-size:30px; line-height:1.1; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.price small{font-size:14px; font-weight:500; color:var(--muted); letter-spacing:0}
.course-body .btn{margin-top:auto}

/* ---------- beneficios ---------- */
.benefit{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(20px,3vw,44px); align-items:center; background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:clamp(20px,2.6vw,36px); min-width:0}
.benefit.col{grid-template-columns:minmax(0,1fr); align-content:start}
.benefit .txt{display:flex; flex-direction:column; gap:10px}
.benefit p{color:var(--fg-2)}
@media (max-width:860px){.benefit{grid-template-columns:minmax(0,1fr)}}
.async{background:var(--card); border:1px solid var(--line); border-radius:22px; padding:20px; display:flex; flex-direction:column; gap:14px; min-width:0}
.async .art{height:104px; border-radius:14px; background:var(--bg-soft); border:1px solid var(--line); padding:14px; display:flex; flex-direction:column; justify-content:center; gap:8px; overflow:hidden}
.async h3{font-size:18px; font-weight:600}
.async p{font-size:14.5px; color:var(--fg-2)}
.lines i{display:block; height:7px; border-radius:9px; background:var(--card-2)}
.lines i:nth-child(2){width:86%; background:linear-gradient(var(--mint),var(--mint)) no-repeat left/100% 100%,var(--card-2); opacity:.9}
.lines i:nth-child(3){width:64%}
.flipwrap{perspective:600px; display:grid; place-items:center}
.flipcard{width:150px; height:70px; position:relative; transform-style:preserve-3d}
.flipcard span{position:absolute; inset:0; display:grid; place-items:center; border-radius:12px; font-weight:600; font-size:13px; backface-visibility:hidden; background:var(--card-2); border:1px solid var(--line); text-align:center; padding:6px}
.flipcard span + span{transform:rotateY(180deg); background:var(--brand); color:#fff; border-color:transparent}
.bars{display:flex; align-items:flex-end; gap:8px; height:70px}
.bars i{flex:1; border-radius:6px 6px 2px 2px; background:var(--brand); transform-origin:bottom}
.bars i:nth-child(even){background:var(--mint)}

/* ---------- metodología ---------- */
.groove{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px}
@media (max-width:1100px){.groove{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.groove{grid-template-columns:repeat(2,minmax(0,1fr))}}
.groove li{background:var(--card); border:1px solid var(--line); border-radius:22px; padding:20px; display:flex; flex-direction:column; gap:8px; min-width:0}
.groove .ltr{font-size:44px; line-height:1; font-weight:700; letter-spacing:-.04em}
.groove h3{font-size:17px; font-weight:600}
.groove p{font-size:14px; color:var(--fg-2)}

/* ---------- certificado ---------- */
.cert{background:#fff; color:#0A0A24; border-radius:18px; padding:clamp(18px,3vw,34px); aspect-ratio:1.414/1; display:flex; flex-direction:column; justify-content:space-between; gap:10px; position:relative; overflow:hidden; box-shadow:var(--shadow); min-width:0; container-type:inline-size}
.cert::before{content:""; position:absolute; inset:0 0 auto 0; height:7px; background:var(--grad)}
.cert-h{display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:clamp(10px,2.4cqw,14px)}
.cert-h b{font-weight:700}
.cert-b{display:flex; flex-direction:column; gap:.5em; font-size:clamp(9px,2.3cqw,14px)}
.cert-b .n{font-size:2.2em; font-weight:300; letter-spacing:-.02em; line-height:1.1}
.cert-b .c{font-size:1.45em; font-weight:700; color:#4E40FF; line-height:1.15}
.cert-f{display:flex; justify-content:space-between; gap:12px; align-items:flex-end; font-size:clamp(7.5px,1.9cqw,11.5px); color:#45455F}
.cert-f div{border-top:1px solid #C9C9DC; padding-top:.5em; min-width:0}
.cert-f b{display:block; color:#0A0A24}
.cert-f .code{border:0; text-align:right; font-family:var(--mono)}

/* ---------- docente ---------- */
.teacher{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(20px,3vw,40px); align-items:center}
.teacher .ph{width:clamp(120px,16vw,200px); aspect-ratio:1; border-radius:var(--r-card); background:var(--grad); display:grid; place-items:center; font-size:clamp(40px,5vw,68px); font-weight:700; color:#05051A; letter-spacing:-.04em}
@media (max-width:620px){.teacher{grid-template-columns:minmax(0,1fr)}}

/* ---------- preguntas ---------- */
.faq{display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(24px,5vw,80px); align-items:start}
@media (max-width:860px){.faq{grid-template-columns:minmax(0,1fr)}}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none; cursor:pointer; padding:22px 0; display:flex; justify-content:space-between; gap:16px; font-size:17px; font-weight:500}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+"; font-size:22px; line-height:1; color:var(--accent); flex:none; transition:transform .2s}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc details > div{padding:0 0 22px; color:var(--fg-2); max-width:68ch}

/* ---------- cierre y pie ---------- */
.cta{border-radius:clamp(28px,4vw,48px); padding:clamp(40px,7vw,110px) clamp(24px,5vw,80px); background:linear-gradient(110deg,#4E40FF 10%,#6E8BEB 55%,#98F9CC 105%); color:#05051A; display:flex; flex-direction:column; gap:22px; align-items:flex-start}
.cta .display{color:#05051A}
.cta p{font-size:19px; max-width:52ch; font-weight:500}
.cta .btn.primary{background:#05051A; color:#fff} .cta .btn.ghost{border-color:#05051A; color:#05051A}
footer.site{margin-top:clamp(48px,6vw,96px); border-top:1px solid var(--line); padding-top:clamp(40px,5vw,72px); overflow:hidden}
.foot{display:grid; grid-template-columns:1.3fr repeat(4,minmax(0,1fr)); gap:32px}
@media (max-width:980px){.foot{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.foot{grid-template-columns:minmax(0,1fr)}}
.foot h4{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:14px}
.foot li{margin-bottom:9px}
.foot a{font-size:14.5px; color:var(--fg-2); text-decoration:none} .foot a:hover{color:var(--fg)}
.foot .soon{font-size:14.5px; color:var(--muted)}
.foot-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:40px; padding-block:22px; border-top:1px solid var(--line); font-size:13px; color:var(--muted)}
.wordmark{font-size:clamp(64px,17.5vw,270px); line-height:.78; letter-spacing:-.05em; font-weight:700; white-space:nowrap; text-align:center; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:-.06em; user-select:none}
.wordmark span{font-weight:300}

/* ---------- WhatsApp y barra móvil ---------- */
.wa{position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:50; width:58px; height:58px; border-radius:50%; background:#25D366; display:grid; place-items:center; box-shadow:0 10px 26px rgba(0,0,0,.35)}
.wa svg{width:30px; height:30px; fill:#fff}
.buybar{display:none}
@media (max-width:900px){
  .has-buybar .buybar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:45; gap:14px; align-items:center; justify-content:space-between; padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); background:var(--card); border-top:1px solid var(--line)}
  .has-buybar .wa{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .has-buybar footer.site{padding-bottom:80px}
}

/* ---------- detalle de curso ---------- */
.detail{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:clamp(28px,4vw,64px); align-items:start}
.detail-main{display:flex; flex-direction:column; gap:clamp(48px,6vw,88px); min-width:0}
.aside{position:sticky; top:calc(96px + env(safe-area-inset-top,0px)); display:flex; flex-direction:column; gap:14px}
.aside nav{display:flex; flex-direction:column; gap:2px}
.aside nav a{padding:11px 14px; border-radius:12px; text-decoration:none; font-size:14.5px; color:var(--fg-2)}
.aside nav a:hover{background:var(--card-2); color:var(--fg)}
.pricebox{display:flex; flex-direction:column; gap:12px}
.pricebox ul{display:flex; flex-direction:column; gap:8px; font-size:14.5px; color:var(--fg-2)}
.pricebox li{display:flex; gap:10px}
.pricebox li::before{content:"✓"; color:var(--accent); font-weight:700}
@media (max-width:1000px){.detail{grid-template-columns:minmax(0,1fr)} .aside{position:static} .aside .side-nav{display:none}}
.syl{display:flex; flex-direction:column; gap:10px}
.syl details{background:var(--card); border:1px solid var(--line); border-radius:20px}
.syl summary{list-style:none; cursor:pointer; padding:18px 20px; display:flex; gap:16px; align-items:baseline; font-weight:600; font-size:16.5px}
.syl summary::-webkit-details-marker{display:none}
.syl summary .n{font-family:var(--mono); font-size:13px; color:var(--accent); flex:none; font-variant-numeric:tabular-nums}
.syl summary::after{content:"+"; margin-left:auto; color:var(--accent); font-size:20px; line-height:1; flex:none}
.syl details[open] summary::after{content:"–"}
.syl .in-d{padding:0 20px 20px; display:flex; flex-direction:column; gap:14px; color:var(--fg-2); font-size:15px}
.syl h4{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:6px}
.syl ul{display:flex; flex-direction:column; gap:5px; padding-left:18px; list-style:disc}
.list{display:flex; flex-direction:column; gap:10px}
.list li{display:flex; gap:12px; color:var(--fg-2)}
.list li::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--mint); margin-top:8px; flex:none}
.daterow{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:18px 22px}
.daterow b{font-size:19px; font-weight:600}
.path{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media (max-width:900px){.path{grid-template-columns:minmax(0,1fr)}}

/* ---------- formularios y texto largo ---------- */
form.f{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
form.f .full{grid-column:1/-1}
@media (max-width:620px){form.f{grid-template-columns:minmax(0,1fr)}}
label.fl{display:flex; flex-direction:column; gap:7px; font-size:14px; font-weight:500; color:var(--fg-2)}
input,select,textarea{font:inherit; color:var(--fg); background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; padding:13px 15px; width:100%; min-width:0}
textarea{min-height:120px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:1px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.msg{border-radius:16px; padding:16px 18px; font-size:15px; border:1px solid var(--line); background:var(--card-2)}
.msg.ok{border-color:var(--mint)}
.pay{display:flex; flex-direction:column; gap:10px}
.pay div{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 14px; background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; padding:12px 14px; font-size:14.5px}
.pay span{color:var(--muted)} .pay b{font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.copy{font:600 12.5px var(--font); border:1px solid var(--line); background:var(--card); color:var(--fg); border-radius:99px; padding:6px 12px; cursor:pointer}
.prose{max-width:74ch; display:flex; flex-direction:column; gap:16px; color:var(--fg-2)}
.prose h2{font-size:22px; font-weight:600; color:var(--fg); margin-top:16px; letter-spacing:-.01em}
.prose ul{list-style:disc; padding-left:22px; display:flex; flex-direction:column; gap:6px}
.draft{border:1px dashed var(--accent); border-radius:16px; padding:14px 18px; font-size:14.5px; color:var(--fg)}
.cmp{width:100%; border-collapse:collapse; font-size:15px}
.cmp th,.cmp td{text-align:left; padding:14px 12px; border-bottom:1px solid var(--line); vertical-align:top}
.cmp th{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600}
.scroll-x{overflow-x:auto}

/* ---------- detalle de curso, estructura tipo ficha: cabecera a dos columnas, menú y precio fijos a la izquierda ---------- */
.c-hero{padding-block:clamp(36px,5vw,72px) clamp(20px,3vw,40px)}
.c-hero-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:clamp(28px,4.5vw,72px); align-items:start}
.c-hero .h1{font-size:clamp(34px,4.6vw,64px)}
.c-info{display:flex; flex-direction:column; gap:26px; padding-top:8px}
.c-info > div{display:flex; flex-direction:column; gap:12px}
@media (max-width:980px){.c-hero-in{grid-template-columns:minmax(0,1fr)}}
.slabel{font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.slabel.acc,.acc{color:var(--accent)}
.h2s{font-size:clamp(22px,2.4vw,30px); line-height:1.2; letter-spacing:-.02em; font-weight:500; text-wrap:balance}
.certpill{display:inline-flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:8px 20px 8px 8px; font-size:14px; font-weight:600; max-width:100%}
.certpill .ck{width:34px; height:34px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; flex:none}
.certpill small{display:block; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600}
.live-chip{align-items:center} .live-chip .red{color:#F0565B} .live-chip i{width:1px; height:14px; background:var(--line)}
.who{display:flex; align-items:center; gap:12px} .who .av{width:42px; height:42px; font-size:14px}
.who small{display:block; color:var(--muted); font-size:13px}
.detail.rev{grid-template-columns:380px minmax(0,1fr)}
.detail.rev .detail-main{gap:clamp(40px,5vw,72px)}
@media (max-width:1000px){.detail.rev{grid-template-columns:minmax(0,1fr)}}
.menu-box{padding:20px; display:flex; flex-direction:column; gap:10px; border-radius:20px}
.menu-box .slabel{padding:0 0 12px; border-bottom:1px solid var(--line); color:var(--fg)}
.aside nav a.on{background:var(--card-2); color:var(--fg)}
.pricebox{border-radius:20px}
.blk{gap:18px; scroll-margin-top:110px}
.card.for{border-radius:20px; padding:24px; color:var(--fg-2); font-size:15.5px}
.detail-main .benefit{border-radius:22px; padding:clamp(18px,2vw,28px)}
.certcard{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(20px,3vw,40px); align-items:center; border-radius:22px}
@media (max-width:760px){.certcard{grid-template-columns:minmax(0,1fr)}}
.detail-main .acc{max-width:none}