/* Academia · su efecto: la ruta que se enciende. Cada ruta lleva una línea con un punto por lección que se llena hasta
   lo que ya viste (lo recuerda tu navegador), y cada lección vista lleva su check. En la lección, la barra de lectura. */

/* ---------- índice ---------- */
.aca-portada{position:relative;isolation:isolate;overflow:hidden;padding:calc(var(--barra) + 10vh) 0 40px}
.aca-portada::before{content:'';position:absolute;right:-12%;top:-20%;width:min(900px,120vw);aspect-ratio:1;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,rgba(43,178,149,.16),rgba(43,178,149,0) 62%)}
.aca-portada .chip{margin-bottom:26px}
.aca-portada h1{font-size:clamp(42px,6vw,92px);line-height:1.03;letter-spacing:-.045em;max-width:13ch}
.portada-entrada{margin-top:24px;max-width:34em;font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:rgba(255,255,255,.82)}
.aca-cifras{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.aca-cifras li{display:flex;align-items:baseline;gap:8px;padding:12px 18px;border-radius:999px;background:var(--cristal);border:1px solid var(--cristal-borde);font-size:15px;color:rgba(255,255,255,.75)}
.aca-cifras b{font-weight:600;font-size:20px;color:#fff}

.aca-rutas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px;max-width:760px}
.aca-rutas a{display:flex;flex-direction:column;gap:2px;padding:16px 18px;border-radius:18px;background:var(--cristal);border:1px solid var(--cristal-borde);transition:border-color .25s,background-color .25s}
.aca-rutas a:hover{border-color:rgba(43,178,149,.6);background:rgba(43,178,149,.08)}
.aca-rutas b{font-weight:600;font-size:17px}
.aca-rutas span{font-size:13.5px;color:rgba(255,255,255,.6)}
.aca-ruta{padding-top:clamp(70px,9vw,120px);padding-bottom:20px}
.aca-ruta .cab{margin-bottom:34px}
.aca-avance{display:flex;align-items:center;gap:22px;margin-bottom:28px}
.aca-linea{position:relative;flex:1;height:2px;margin:0 8px;background:rgba(255,255,255,.14)}
.aca-linea i{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#000;border:2px solid rgba(255,255,255,.3);z-index:1;transition:border-color .4s,box-shadow .4s}
.aca-linea i.on{border-color:var(--verde);background:var(--verde);box-shadow:0 0 12px rgba(43,178,149,.8)}
.aca-relleno{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--verde),rgba(255,255,255,.9));box-shadow:0 0 12px rgba(43,178,149,.8);transition:width 1.6s cubic-bezier(.3,.6,.2,1)}
.aca-avance p{flex:none;font-size:14px;color:rgba(255,255,255,.66)}
.aca-avance b{font-weight:600;color:#fff}
.aca-lecciones{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.aca-leccion{position:relative;display:flex;flex-direction:column;gap:10px;height:100%;padding:12px 12px 22px;border-radius:24px;background:var(--cristal);border:1px solid var(--cristal-borde);
  transition:border-color .3s ease,transform .3s ease,background-color .3s ease}
.aca-leccion:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.08);transform:translateY(-3px)}
.aca-foto{position:relative;display:block;aspect-ratio:5/3;border-radius:16px;overflow:hidden;margin-bottom:6px}
.aca-foto img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.aca-leccion:hover .aca-foto img{transform:scale(1.05)}
.aca-play{position:absolute;left:12px;bottom:12px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.4);font-size:16px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.aca-play .ic{fill:currentColor}
.aca-n{padding:0 10px;font-weight:600;font-size:13px;letter-spacing:.12em;color:var(--verde)}
.aca-visto{position:absolute;right:22px;top:22px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--verde);color:#000;font-size:16px;opacity:0;transform:scale(.5);transition:opacity .3s,transform .3s}
.aca-visto .ic{stroke-width:3}
.aca-leccion.visto .aca-visto{opacity:1;transform:none}
.aca-leccion h3{padding:0 10px;font-size:21px;line-height:1.25}
.aca-leccion p{padding:0 10px;font-size:15px;line-height:1.55;color:var(--apoyo)}
.aca-dur{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding:4px 10px 0;font-size:13.5px;color:rgba(255,255,255,.6)}
.aca-dur .ic{font-size:15px}
.cierre{position:relative;isolation:isolate;text-align:center;padding:clamp(110px,14vw,190px) 0;overflow:hidden}
.cierre::before{content:'';position:absolute;left:50%;top:55%;width:min(900px,120vw);aspect-ratio:1;translate:-50% -50%;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(43,178,149,.14),transparent 60%)}
.cierre h2{font-size:clamp(38px,5.6vw,84px);line-height:1.05;letter-spacing:-.045em}
.cierre .txt{margin:24px auto 34px;text-align:center}
.aca-botones{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---------- lección ---------- */
.aca-cab{padding:calc(var(--barra) + 7vh) 0 40px}
.aca-volver{display:inline-flex;align-items:center;gap:8px;margin-bottom:26px;font-size:14.5px;color:rgba(255,255,255,.7);transition:color .2s}
.aca-volver:hover{color:#fff}
.aca-cab h1{margin-top:12px;font-size:clamp(36px,5vw,72px);line-height:1.05;letter-spacing:-.04em;max-width:18ch}
.aca-meta{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:14px;color:rgba(255,255,255,.62)}
.aca-intro{margin-top:18px;max-width:36em;font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:rgba(255,255,255,.84)}
.aca-cuerpo{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,90px);align-items:start;padding-bottom:40px}
.aca-medio{position:sticky;top:calc(var(--barra) + 28px)}
.aca-video{max-width:380px;margin:0 auto;border-radius:28px;overflow:hidden;border:1px solid var(--cristal-borde);background:#111}
.aca-video video{width:100%;height:auto;aspect-ratio:9/16;background:#000}
.aca-pantalla{max-width:420px;margin:0 auto}
.aca-pantalla img{width:100%;height:auto}
.aca-imagen{border-radius:24px;overflow:hidden;border:1px solid var(--cristal-borde)}
.aca-imagen img{width:100%;height:auto;aspect-ratio:5/3;object-fit:cover}
.aca-pasos{list-style:none;counter-reset:paso;display:flex;flex-direction:column;gap:26px}
.aca-pasos li{position:relative;counter-increment:paso;padding-left:62px}
.aca-pasos li::before{content:counter(paso,decimal-leading-zero);position:absolute;left:0;top:-4px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--cristal-borde);background:#000;font-weight:600;font-size:14px}
.aca-pasos li:first-child::before{border-color:var(--verde);box-shadow:0 0 14px rgba(43,178,149,.5)}
.aca-pasos li:not(:last-child)::after{content:'';position:absolute;left:22px;top:44px;bottom:-26px;width:1px;background:rgba(255,255,255,.12)}
.aca-pasos h2{font-size:21px;line-height:1.3}
.aca-pasos p{margin-top:6px;font-size:16px;line-height:1.65;color:var(--apoyo)}
.aca-bloque{margin-top:46px}
.aca-bloque h2{font-size:26px;line-height:1.2}
.aca-bloque > p{margin-top:10px;font-size:16px;line-height:1.6;color:var(--apoyo)}
.aca-planos{list-style:none;counter-reset:plano;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
.aca-planos li{counter-increment:plano;display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:16px;background:var(--cristal);border:1px solid var(--cristal-borde)}
.aca-planos b{font-weight:600;font-size:16px}
.aca-planos b::before{content:counter(plano) ' · ';color:var(--verde)}
.aca-planos span{font-size:14.5px;line-height:1.5;color:var(--apoyo)}
.aca-no ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:18px}
.aca-no li{display:flex;gap:12px;font-size:16px;line-height:1.55;color:rgba(255,255,255,.82)}
.aca-no .ic{flex:none;margin-top:4px;color:#ff7a7a}
.aca-ejemplo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.aca-ejemplo > div{padding:20px;border-radius:18px;background:var(--cristal);border:1px solid var(--cristal-borde)}
.aca-ejemplo > div p:last-child{margin-top:10px;font-size:16.5px;line-height:1.55;color:rgba(255,255,255,.8)}
.aca-ejemplo .aca-despues{border-color:rgba(43,178,149,.5);background:linear-gradient(140deg,rgba(43,178,149,.14),rgba(43,178,149,.02) 70%)}
.aca-ejemplo .aca-despues p:last-child{color:#fff}
.aca-semana{width:100%;margin-top:18px;border-collapse:collapse;font-size:15.5px}
.aca-semana th{text-align:left;padding:10px 12px;font-weight:500;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);border-bottom:1px solid var(--linea)}
.aca-semana td{padding:14px 12px;border-bottom:1px solid var(--linea);color:rgba(255,255,255,.84)}
.aca-semana td:first-child{font-weight:600;color:#fff}
.aca-semana td:last-child{color:var(--verde);font-weight:500}
.aca-aviso{margin-top:14px!important;padding:16px 18px;border-radius:16px;background:rgba(43,178,149,.1);border:1px solid rgba(43,178,149,.45);color:#fff!important}
.aca-aviso b{font-weight:600;color:#fff}
.aca-cuenta{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:16px}
.aca-cuenta li{display:flex;align-items:center;gap:12px;font-size:16px;color:rgba(255,255,255,.84)}
.aca-cuenta .ic{flex:none;color:var(--verde);font-size:18px}
.aca-en[hidden],.aca-nav[hidden]{display:none}
.aca-consejo{margin-top:46px;padding:22px 24px;border-radius:20px;background:linear-gradient(120deg,rgba(43,178,149,.18),rgba(43,178,149,.04) 65%),#050505;border:1px solid rgba(43,178,149,.45)}
.aca-consejo b{font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--verde)}
.aca-consejo p{margin-top:8px;font-size:17px;line-height:1.6;color:#fff}
.aca-nav{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:40px 0 110px}
.aca-nav a{display:flex;flex-direction:column;gap:6px;padding:22px 24px;border-radius:20px;background:var(--cristal);border:1px solid var(--cristal-borde);transition:border-color .3s,background-color .3s}
.aca-nav a:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.08)}
.aca-nav .aca-sig{text-align:right;align-items:flex-end}
.aca-nav b{font-weight:600;font-size:18px;line-height:1.3}

/* ---------- Impulsito, que acompaña la lección: debajo de la imagen; en el móvil, pequeño en una esquina ---------- */
.aca-imp{margin-top:18px;width:132px}
.aca-imp-boton{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.aca-imp-boton:focus-visible{outline:2px solid var(--verde);outline-offset:6px;border-radius:24px}
.aca-imp .impulsito{width:100%}
@media (min-width:981px){   /* con vídeo vertical, Impulsito va a su lado, abajo: así se ven juntos */
  .aca-medio--video{display:flex;flex-direction:row-reverse;align-items:flex-end;justify-content:flex-start;gap:14px}
  .aca-medio--video .aca-video{flex:0 1 360px;min-width:0;max-width:360px;margin:0}
  .aca-medio--video .aca-imp{flex:none;width:104px;margin:0 0 8px}
}

/* ---------- el visor de los ocho planos (Fotos que venden) ---------- */
.planos-botones{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.plano-boton{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 6px;border-radius:999px;border:1px solid var(--cristal-borde);background:var(--cristal);
  color:#fff;font:inherit;font-weight:500;font-size:14px;cursor:pointer;transition:border-color .25s,background-color .25s}
.plano-boton i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.08);font-style:normal;font-weight:600;font-size:13px;transition:background-color .25s,color .25s}
.plano-boton:hover{border-color:rgba(255,255,255,.35)}
.plano-boton.on{border-color:var(--verde);background:rgba(43,178,149,.14)}
.plano-boton.on i{background:var(--verde);color:#000}
.planos-visor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'foto estudio' 'info info';gap:20px 24px;align-items:center;margin-top:16px;padding:20px;border-radius:22px;background:#050505;border:1px solid var(--cristal-borde)}
.planos-foto{grid-area:foto;position:relative;margin:0;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#111}
.planos-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.planos-foto img.on{opacity:1}
.planos-foto figcaption{position:absolute;left:10px;bottom:10px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.55);font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.planos-visor .estudio-caja{grid-area:estudio}
.planos-info{grid-area:info}
.estudio{display:block;width:100%;height:auto;overflow:visible}
.estudio text{font:500 14px Poppins,system-ui,sans-serif;fill:rgba(255,255,255,.55);text-anchor:middle;letter-spacing:.02em}
.e-fondo rect{fill:rgba(255,255,255,.12);stroke:rgba(255,255,255,.3)}
.e-luz rect{fill:rgba(255,214,102,.22);stroke:rgba(255,214,102,.6)}
.e-luz path{fill:none;stroke:rgba(255,214,102,.45);stroke-width:1.5;stroke-dasharray:4 5}
.e-prod{transform-origin:210px 150px;transition:transform .8s cubic-bezier(.3,.7,.2,1)}
.e-prod rect{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.75);stroke-width:1.5}
.e-prod text{fill:rgba(255,255,255,.62);font-size:12.5px}
.e-frente{stroke:var(--verde);stroke-width:5;stroke-linecap:round}
.e-giro path{fill:none;stroke:var(--verde);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.e-det{fill:none;stroke:var(--verde);stroke-width:2;stroke-dasharray:3 3}
.e-escala circle{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.7);stroke-width:1.5}
.e-contexto rect{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.35);stroke-dasharray:3 4}
.e-tel{transition:transform .8s cubic-bezier(.3,.7,.2,1)}
.e-tel rect{fill:#0b0b0b;stroke:var(--verde);stroke-width:2;transition:fill .4s}
.e-tel circle{fill:var(--verde)}
.e-rayo{stroke:var(--verde);stroke-width:1.5;stroke-dasharray:4 4;opacity:0;transition:opacity .3s}
.estudio .e-giro,.estudio .e-det,.estudio .e-escala,.estudio .e-contexto{opacity:0;transition:opacity .45s}
.estudio .e-fondo{transition:opacity .45s}
.estudio.con-giro .e-giro,.estudio.con-det .e-det,.estudio.con-escala .e-escala,.estudio.en-contexto .e-contexto{opacity:1}
.estudio.en-contexto .e-fondo{opacity:0}
.estudio.desde-arriba .e-tel rect{fill:rgba(11,11,11,.55)}
.planos-info h3{margin-top:8px;font-size:26px;line-height:1.2}
.planos-info [data-txt]{margin-top:10px;font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.84)}
.planos-desde{display:flex;gap:10px;margin-top:16px;padding:14px 16px;border-radius:14px;background:rgba(43,178,149,.08);border:1px solid rgba(43,178,149,.35);font-size:15px;line-height:1.5}
.planos-desde .ic{flex:none;margin-top:2px;font-size:18px;color:var(--verde)}

@media (max-width:980px){
  .aca-lecciones{grid-template-columns:repeat(2,minmax(0,1fr))}
  .aca-cuerpo{grid-template-columns:minmax(0,1fr)}
  .aca-medio{position:static}
  .aca-imp{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));z-index:40;width:64px;margin:0}
  .aca-imp-boton{padding:7px 6px 3px;border-radius:50%;background:rgba(10,10,10,.94);border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 24px rgba(0,0,0,.6)}
}
@media (max-width:600px){
  .planos-visor{grid-template-columns:minmax(0,1fr);grid-template-areas:'foto' 'estudio' 'info';padding:14px}
  .aca-rutas{grid-template-columns:minmax(0,1fr)}
  .aca-lecciones,.aca-planos,.aca-ejemplo,.aca-nav{grid-template-columns:minmax(0,1fr)}
  .aca-avance{flex-direction:column;align-items:stretch;gap:12px}
  .aca-video{max-width:300px}
  .aca-pantalla{max-width:300px}
  .aca-pasos li{padding-left:56px}
  .aca-botones .btn{flex:1 1 auto}
}