/* ============================================================
   Instituto ELEVAN · Cursos
   Registro editorial: serif de texto para la voz, sans para
   los rótulos técnicos. Paleta tomada del sello institucional.
   ============================================================ */

:root{
  /* Marca */
  --azul:#002039;
  --azul-hondo:#001526;
  --dorado:#F0C577;
  --dorado-hondo:#C79A45;
  --celeste:#73AADC;

  /* Superficies y texto */
  --papel:#FBFBF9;
  --papel-alt:#F2F4F6;
  --tinta:#141A20;
  --tinta-suave:#5A6570;
  --linea:#D9DEE3;
  --linea-tenue:#E9ECEF;

  /* Tipografía */
  --display:"EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;

  /* Métrica */
  --ancho:1180px;
  --columna:44rem;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:132px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}}
body{margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.72;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--dorado-hondo);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

.area{max-width:var(--ancho);margin:0 auto;padding:0 32px}
@media(max-width:640px){.area{padding:0 22px}}
.columna{max-width:var(--columna)}

/* Rótulo técnico: la única voz en versalitas del sistema */
.rotulo{font-family:var(--sans);font-weight:500;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-suave);
  display:block}
.rotulo-claro{color:var(--celeste)}

.titulo-seccion{font-family:var(--display);font-weight:400;
  font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.2;margin:var(--s2) 0 var(--s3);
  max-width:24ch;letter-spacing:-.005em}
.subtitulo-seccion{font-family:var(--display);font-size:1.2rem;line-height:1.6;
  color:var(--tinta-suave);max-width:52ch;margin:0 0 var(--s4)}

.divisor{height:1px;background:var(--linea-tenue);max-width:var(--ancho);
  margin:0 auto}
.seccion{padding:var(--s6) 0}
@media(max-width:640px){.seccion{padding:var(--s5) 0}}

/* Enlace de texto con guía */
.enlace{font-family:var(--sans);font-size:.82rem;font-weight:400;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;color:var(--azul);
  border-bottom:1px solid var(--linea);padding-bottom:4px;display:inline-block;
  transition:border-color .2s,color .2s}
.enlace:hover{color:var(--dorado-hondo);border-color:var(--dorado-hondo)}

/* ===== Navegación ===== */
.nav{position:sticky;top:0;z-index:50;background:var(--azul);color:#fff}
.nav-int{display:flex;align-items:center;gap:var(--s3);max-width:var(--ancho);
  margin:0 auto;padding:16px 32px}
.nav-marca{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff}
.nav-marca img{width:40px;height:40px}
.nav-marca b{font-family:var(--display);font-size:1.16rem;font-weight:500;
  letter-spacing:.02em;display:block;line-height:1.1}
.nav-marca span{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--celeste)}
.nav ul{list-style:none;display:flex;gap:26px;margin:0 0 0 auto;padding:0;
  font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;flex-wrap:wrap}
.nav ul a{text-decoration:none;color:#DCE6F0;transition:color .2s}
.nav ul a:hover{color:var(--dorado)}
.nav-filete{height:2px;background:linear-gradient(90deg,var(--celeste) 0 62%,var(--dorado) 62%)}
@media(max-width:760px){.nav-int{padding:14px 22px}.nav ul{gap:16px;font-size:.7rem}}

/* ===== Hero ===== */
.hero{position:relative;min-height:76vh;display:flex;align-items:flex-end;
  background:var(--azul-hondo);color:#fff;overflow:hidden;padding:0 0 var(--s6)}
.hero-fondo{position:absolute;inset:0;z-index:0}
.hero-fondo img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero-velo{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,32,57,.62) 0%,rgba(0,32,57,.78) 55%,rgba(0,21,38,.94) 100%)}
.hero-int{position:relative;z-index:1;width:100%}
.hero .rotulo{color:var(--celeste);margin-bottom:var(--s3)}
.hero h1{font-family:var(--display);font-weight:400;
  font-size:clamp(2.6rem,7vw,5rem);line-height:1.04;letter-spacing:-.02em;
  margin:0 0 var(--s3);max-width:16ch}
.hero p{font-family:var(--display);font-size:clamp(1.1rem,2vw,1.4rem);line-height:1.62;
  color:#D6E1EC;max-width:46rem;margin:0}
.hero-acciones{display:flex;gap:14px;flex-wrap:wrap;margin-top:var(--s4)}
@media(max-width:640px){.hero{min-height:68vh;padding-bottom:var(--s5)}}

.boton{display:inline-block;font-family:var(--sans);font-size:.78rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:15px 30px;border:1px solid;transition:background .2s,color .2s,border-color .2s}
.boton-oro{background:var(--dorado);border-color:var(--dorado);color:var(--azul)}
.boton-oro:hover{background:#fff;border-color:#fff;color:var(--azul)}
.boton-linea{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.boton-linea:hover{border-color:var(--dorado);color:var(--dorado)}
.boton-tinta{background:var(--azul);border-color:var(--azul);color:#fff}
.boton-tinta:hover{background:var(--dorado);border-color:var(--dorado);color:var(--azul)}

/* ===== Entrada de texto ===== */
.entrada{font-family:var(--display);font-size:clamp(1.3rem,2.4vw,1.62rem);
  line-height:1.56;margin:0 0 var(--s3);max-width:40rem}
.cuerpo{font-size:1rem;line-height:1.8;color:#39424C;max-width:var(--columna);
  margin:0 0 var(--s2)}

/* ===== Listado de cursos ===== */
.curso-entrada{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s4);
  align-items:baseline;padding:var(--s4) 0;border-top:1px solid var(--linea);
  text-decoration:none}
.curso-entrada:last-of-type{border-bottom:1px solid var(--linea)}
.curso-num{font-family:var(--display);font-size:1.05rem;color:var(--celeste);
  font-variant-numeric:tabular-nums}
.curso-entrada h3{font-family:var(--display);font-weight:400;font-size:1.75rem;
  line-height:1.22;margin:0 0 10px;color:var(--azul)}
.curso-entrada:hover h3{color:var(--dorado-hondo)}
.curso-entrada p{margin:0 0 12px;max-width:46rem;color:#39424C;font-size:.98rem}
.curso-meta{font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-suave)}
.curso-flecha{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;background:var(--azul);color:#fff;
  border:1px solid var(--azul);padding:14px 26px;align-self:center;
  transition:background .2s,border-color .2s,color .2s}
.curso-entrada:hover .curso-flecha{background:var(--dorado);border-color:var(--dorado);
  color:var(--azul)}
@media(max-width:760px){.curso-entrada{grid-template-columns:1fr;gap:var(--s2)}
  .curso-flecha{justify-self:start;align-self:start;margin-top:var(--s1)}}

/* ===== Ficha técnica ===== */
.ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--s4);margin:0;padding:var(--s5) 0;border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea)}
.ficha dt{font-family:var(--sans);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinta-suave);margin-bottom:10px}
.ficha dd{margin:0;font-family:var(--display);font-size:1.06rem;line-height:1.5}

/* ===== Programa ===== */
.modulo{border-top:1px solid var(--linea)}
.modulo:last-of-type{border-bottom:1px solid var(--linea)}
.modulo summary{cursor:pointer;list-style:none;display:grid;
  grid-template-columns:auto 1fr auto;gap:var(--s3);align-items:baseline;
  padding:26px 4px}
.modulo summary::-webkit-details-marker{display:none}
.modulo summary:hover .modulo-titulo{color:var(--dorado-hondo)}
.modulo-num{font-family:var(--display);font-size:1.05rem;color:var(--celeste);
  font-variant-numeric:tabular-nums}
.modulo-titulo{font-family:var(--display);font-weight:400;font-size:1.4rem;
  line-height:1.28;margin:0 0 6px;color:var(--azul);transition:color .2s}
.modulo-quien{font-family:var(--sans);font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-suave)}
.modulo-horas{font-family:var(--sans);font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-suave);white-space:nowrap}
.modulo[open] .modulo-titulo{color:var(--dorado-hondo)}
.modulo ul{list-style:none;margin:0;padding:0 0 30px 0;max-width:46rem}
.modulo li{position:relative;padding:0 0 10px 26px;font-size:.97rem;color:#39424C}
.modulo li::before{content:"";position:absolute;left:2px;top:12px;width:12px;height:1px;
  background:var(--celeste)}
.modulo-cuerpo{padding-left:calc(1.05rem + var(--s3))}
@media(max-width:760px){.modulo summary{grid-template-columns:auto 1fr;gap:var(--s2)}
  .modulo-horas{display:none}.modulo-cuerpo{padding-left:0}}

/* ===== Docentes ===== */
.docente{display:grid;grid-template-columns:16rem 1fr;gap:var(--s5);
  padding:var(--s4) 0;border-top:1px solid var(--linea)}
.docente:last-of-type{border-bottom:1px solid var(--linea)}
.docente h3{font-family:var(--display);font-weight:400;font-size:1.42rem;
  line-height:1.24;margin:0 0 10px;color:var(--azul)}
.docente .rol{font-family:var(--sans);font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--tinta-suave);margin:0;line-height:1.9}
.docente .bio{margin:0;font-size:.97rem;line-height:1.78;color:#39424C;
  max-width:42rem}
@media(max-width:820px){.docente{grid-template-columns:1fr;gap:var(--s2)}}

/* ===== Cita editorial ===== */
.cita{background:var(--azul);color:#fff;padding:var(--s6) 0}
.cita blockquote{margin:0;max-width:44rem}
.cita p{font-family:var(--display);font-style:italic;
  font-size:clamp(1.4rem,3vw,2.05rem);line-height:1.44;margin:0 0 var(--s3)}
.cita cite{font-family:var(--sans);font-style:normal;font-size:.72rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--celeste)}

/* ===== Aranceles ===== */
.dos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6)}
@media(max-width:900px){.dos{grid-template-columns:1fr;gap:var(--s4)}}
.aranceles{width:100%;border-collapse:collapse}
.aranceles th{text-align:left;font-family:var(--sans);font-weight:400;font-size:.68rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--tinta-suave);
  padding:18px 0;border-bottom:1px solid var(--linea);width:38%;vertical-align:top}
.aranceles td{padding:18px 0;border-bottom:1px solid var(--linea);
  font-family:var(--display);font-size:1.08rem;line-height:1.5}
.panel{background:var(--azul);color:#fff;padding:var(--s4)}
.panel h3{font-family:var(--display);font-weight:400;font-size:1.3rem;margin:0 0 var(--s3);
  color:var(--dorado)}
.panel dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:12px 24px;
  font-size:.94rem}
.panel dt{font-family:var(--sans);font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--celeste);padding-top:3px}
.panel dd{margin:0;word-break:break-word;font-family:var(--display);font-size:1.02rem}
.panel .nota{margin:var(--s3) 0 0;font-size:.85rem;line-height:1.7;color:#AFC4D6;
  border-top:1px solid rgba(115,170,220,.3);padding-top:var(--s2)}

/* ===== Aula ===== */
.aula{display:grid;grid-template-columns:16rem 1fr;gap:var(--s5);
  padding:var(--s5) 0 var(--s6);align-items:start}
@media(max-width:900px){.aula{grid-template-columns:1fr;gap:var(--s4)}}
.indice ol{list-style:none;margin:0;padding:0;counter-reset:c}
.indice li{counter-increment:c;border-top:1px solid var(--linea)}
.indice li:last-child{border-bottom:1px solid var(--linea)}
.indice button{width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font-family:var(--display);font-size:1.05rem;color:var(--azul);
  padding:16px 8px 16px 40px;position:relative;line-height:1.3;transition:color .2s}
.indice button::before{content:counter(c,decimal-leading-zero);position:absolute;
  left:4px;top:19px;font-size:.78rem;color:var(--celeste);
  font-variant-numeric:tabular-nums}
.indice button:hover{color:var(--dorado-hondo)}
.indice li.activa button{color:var(--dorado-hondo)}
.indice li.activa{box-shadow:inset 3px 0 0 var(--dorado)}
.indice li.pendiente button{color:#98A2AD;cursor:default}
.indice li.pendiente button:hover{color:#98A2AD}

.escenario h2{font-family:var(--display);font-weight:400;font-size:2rem;
  margin:0 0 var(--s3);line-height:1.2}
.video{position:relative;padding-top:56.25%;background:var(--azul-hondo)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.aviso{position:absolute;inset:0;display:grid;place-content:center;text-align:center;
  padding:24px;color:#8FA6BB;font-family:var(--display);font-size:1.1rem}
.material{margin-top:var(--s5);border-top:1px solid var(--linea);padding-top:var(--s3)}
.material ul{list-style:none;margin:0;padding:0}
.material li{border-bottom:1px solid var(--linea-tenue)}
.material li a{display:flex;justify-content:space-between;gap:24px;align-items:center;
  padding:16px 4px;text-decoration:none;font-family:var(--display);font-size:1.06rem;
  color:var(--azul);transition:color .2s}
.material li a:hover{color:var(--dorado-hondo)}
.material .tipo{font-family:var(--sans);font-size:.64rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--tinta-suave);white-space:nowrap}
.visor{margin-top:var(--s3);width:100%;height:620px;border:1px solid var(--linea)}
@media(max-width:900px){.visor{height:420px}}
.vacio{color:var(--tinta-suave);font-size:.95rem;margin:0}

/* ===== Cierre e imagen ===== */
.cierre{height:46vh;min-height:300px;overflow:hidden;background:var(--azul-hondo)}
.cierre img{width:100%;height:100%;object-fit:cover}

/* ===== Pie ===== */
.pie{background:var(--azul);color:#9DB3C6;padding:var(--s5) 0;font-size:.84rem}
.pie a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
.pie a:hover{color:var(--dorado);border-color:var(--dorado)}
.pie-int{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s4);
  align-items:center}
.pie img{width:62px;height:62px;opacity:.92}
.pie em{font-family:var(--display);font-style:italic;font-size:1.02rem;color:#D6E1EC;
  display:block;margin-bottom:6px}
.pie ul{list-style:none;display:flex;gap:22px;margin:0;padding:0;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase}
@media(max-width:820px){.pie-int{grid-template-columns:1fr;gap:var(--s3)}}