:root{
  --bg:#0e1b33;
  --surface:#182a52;
  --texto:#f5f7fb;
  --texto-suave:#aebbdb;
  --acento:#ffd400;
  --acento-2:#9db8ff;
  --borde:#2b3d68;
}

*{box-sizing:border-box;margin:0}

html{-webkit-text-size-adjust:100%}

body{
  background:var(--bg);
  color:var(--texto);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  line-height:1.6;
  padding-bottom:64px;
}

h1,h2,h3{line-height:1.2}

a{color:var(--acento-2)}

a:focus-visible,button:focus-visible,details summary:focus-visible{
  outline:2px solid var(--acento);
  outline-offset:2px;
}

.skip-link{
  position:absolute;
  left:-999px;
  top:0;
  background:var(--acento);
  color:var(--bg);
  padding:10px 16px;
  z-index:100;
  border-radius:0 0 8px 0;
  font-weight:700;
}
.skip-link:focus{left:0}

/* Barra fija de contacto */
.barra-fija{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  z-index:50;
  border-top:1px solid var(--borde);
}
.barra-btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  font-weight:700;
  text-decoration:none;
  font-size:0.95rem;
}
.barra-whatsapp{background:var(--acento);color:var(--bg)}
.barra-llamar{background:var(--surface);color:var(--texto);border-left:1px solid var(--borde)}

.marca{
  padding:16px 20px 0;
  font-size:0.8125rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--texto-suave);
  font-weight:600;
}

/* Hero */
.hero{max-width:1080px;margin:0 auto;padding:24px 20px 40px}
.hero h1{
  font-size:clamp(1.9rem,6.5vw,3rem);
  font-weight:800;
  letter-spacing:-0.02em;
}
.hero-sub{
  margin-top:16px;
  max-width:60ch;
  color:var(--texto-suave);
  font-size:1.0625rem;
}
.hero-cta{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 22px;
  border-radius:10px;
  font-weight:700;
  text-decoration:none;
  min-height:44px;
}
.btn-primario{background:var(--acento);color:var(--bg)}
.btn-secundario{background:transparent;border:1px solid var(--acento-2);color:var(--texto)}
.btn-small{padding:10px 16px;font-size:0.9rem;margin-top:12px}
.btn-cta{background:var(--bg);color:var(--acento)}

/* Bento de cifras */
.bento-cifras{padding:0 0 56px}
.bento{
  max-width:1080px;
  margin:0 auto;
  padding:0 20px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:12px;
}
.cell{
  background:var(--surface);
  border:1px solid var(--borde);
  border-radius:18px;
  padding:20px;
}
.span-4,.span-6,.span-8,.span-12{grid-column:span 12}
@media (min-width:640px){
  .span-4{grid-column:span 4}
  .span-6{grid-column:span 6}
  .span-8{grid-column:span 8}
}

.label{
  font-size:0.8125rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--texto-suave);
  font-weight:600;
}

.contador{
  display:flex;
  flex-direction:column;
  gap:12px;
  text-decoration:none;
  color:inherit;
}
.digitos{
  display:flex;
  gap:8px;
  font-size:clamp(3.5rem,24vw,5rem);
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--acento);
}
@media (min-width:480px){
  .digitos{font-size:clamp(4.5rem,20vw,8.5rem)}
}
.digito-caja{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:0.72em;
  background:var(--bg);
  border-radius:10px;
  border:1px solid var(--borde);
  overflow:hidden;
  transition:transform .15s ease;
}
.digito-caja::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:2px;
  background:var(--bg);
  transform:translateY(-1px);
}
.contador:hover .digito-caja,
.contador:focus-visible .digito-caja{transform:translateY(-2px)}
.contador-link{color:var(--acento-2);font-weight:600}

.estado{font-size:1.4rem;font-weight:800;margin-top:4px}
.estado.cerrado{color:var(--texto-suave)}
.detalle{color:var(--texto-suave);font-size:0.9rem;margin-top:4px}

/* Secciones de contenido */
.cursos,.porque,.resenas,.ubicacion,.cta-final{
  max-width:1080px;
  margin:0 auto;
  padding:0 20px 56px;
}
.cursos h2,.porque h2,.resenas h2,.ubicacion h2{
  font-size:clamp(1.3rem,4vw,1.75rem);
  font-weight:700;
  letter-spacing:-0.01em;
  margin-bottom:20px;
}

.grid-cursos,.grid-3{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:640px){
  .grid-cursos{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:900px){
  .grid-cursos{grid-template-columns:repeat(3,1fr)}
}
.grid-cursos .cell h3,.grid-3 .cell h3{font-size:1.05rem;font-weight:700;margin-bottom:8px}
.grid-cursos .cell p,.grid-3 .cell p{color:var(--texto-suave)}

.resena{display:block}
.resena-kicker{font-size:1rem}
.resena summary{cursor:pointer;color:var(--acento-2);font-weight:600;margin-top:12px}
.resena details p{margin-top:12px;color:var(--texto-suave)}
.resena footer{margin-top:16px;color:var(--texto-suave);font-size:0.9rem}
.enlace{margin-top:16px}

table{width:100%;border-collapse:collapse;margin-top:20px}
table th,table td{text-align:left;padding:10px 0;border-bottom:1px solid var(--borde);font-weight:400}
table th{color:var(--texto-suave);font-weight:600}

.cta-final .cta-cell{
  background:var(--acento);
  color:var(--bg);
  text-align:center;
  padding:40px 24px;
}
.cta-cell h2{font-size:clamp(1.3rem,4vw,1.75rem);font-weight:800}
.cta-cell p{margin-top:12px;max-width:60ch;margin-left:auto;margin-right:auto}
.cta-cell .btn{margin-top:20px}

.pie{
  max-width:1080px;
  margin:0 auto;
  padding:24px 20px 88px;
  color:var(--texto-suave);
  font-size:0.875rem;
  border-top:1px solid var(--borde);
}
.pie a{color:var(--acento-2)}
.pie a[href^="tel:"]{display:inline-block;padding:14px 6px;margin:-14px -6px}
.pie p+p{margin-top:8px}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}

@media (prefers-reduced-motion:reduce){
  .digito-caja{transition:none}
}