/* Diginova Academia — sistema de diseño (marca real Diginova) */
/* Tipografía: Avenir (con respaldo Nunito Sans). Marca: navy #14163D + teal #64BDC3 + cyan #00CCFF */
:root{
  --navy:#14163D; --ink:#14163D; --teal:#64BDC3; --teal-d:#3AA6C0; --cyan:#00CCFF; --teal-soft:#7FE3EA;
  --bg:#F5F9FB; --paper:#fff; --line:#e4ebee; --muted:#5b6b73; --text:#25313a;
  --r:18px; --shadow:0 14px 44px rgba(20,22,61,.10);
  --nivel-basico:#00A8CC; --nivel-intermedio:#3AA6C0; --nivel-avanzado:#14163D;
  --font:'Avenir Next','Avenir','Nunito Sans',system-ui,-apple-system,Segoe UI,sans-serif;
}
*{box-sizing:border-box}
b,strong{font-weight:600}
html{scroll-behavior:smooth}
/* Reveal al hacer scroll (solo si hay JS; sin parpadeo) */
.js .anim{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.js .anim.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .anim{opacity:1!important;transform:none!important;transition:none}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font);line-height:1.12;color:var(--ink);margin:.2em 0 .4em;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(2rem,5vw,3.4rem)} h2{font-size:clamp(1.5rem,3.5vw,2.4rem)}
a{color:inherit}
.container{max-width:1180px;margin:0 auto;padding:0 22px}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--teal-d);font-weight:600}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.btn{display:inline-flex;align-items:center;gap:.5em;background:var(--navy);color:#fff;border:none;border-radius:999px;padding:.85em 1.6em;font-weight:600;font-size:1rem;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s;box-shadow:0 8px 22px rgba(20,22,61,.22)}
.btn:hover{transform:translateY(-2px);background:#1e2152;box-shadow:0 12px 28px rgba(20,22,61,.3)}
.btn.ghost{background:transparent;color:var(--navy);box-shadow:none;border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--teal);background:transparent;color:var(--teal-d)}
.btn.dark{background:var(--navy)}
.btn.teal{background:var(--teal);color:#08303a;box-shadow:0 8px 22px rgba(100,189,195,.35)}
.btn.teal:hover{background:var(--teal-d);color:#fff}
.btn.sm{padding:.55em 1.1em;font-size:.85rem}
.btn.block{width:100%;justify-content:center}
.pill{display:inline-flex;align-items:center;gap:.4em;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:.35em .8em;border-radius:999px;background:#eaf1f3;color:var(--navy)}
.pill.basico{background:rgba(0,168,204,.14);color:#0075a0}
.pill.intermedio{background:rgba(100,189,195,.2);color:#1c6b75}
.pill.avanzado{background:rgba(20,22,61,.1);color:#14163D}
/* Pills legibles sobre secciones oscuras */
.dark .pill{background:rgba(255,255,255,.16);color:#fff}
.dark .pill.basico{background:rgba(0,168,204,.28);color:#8fe8fb}
.dark .pill.intermedio{background:rgba(100,189,195,.28);color:#bff0f2}
.dark .pill.avanzado{background:rgba(255,255,255,.16);color:#e2e8f6}
/* Icono y texto no se alineaban: al volverse SVG el icono se comporta como texto
   en línea y se sube. Con inline-flex quedan centrados uno con otro. */
.tag-mod{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;
  display:inline-flex;align-items:center;gap:5px;line-height:1}
.tag-mod svg{flex:0 0 auto;width:13px;height:13px;display:block}
/* El precio es de una persona: sin decirlo, una empresa entiende que es del grupo. */
.por-persona{display:block;font-size:.68rem;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em;margin-top:2px}

/* Header público */
.top{position:sticky;top:0;z-index:40;background:rgba(245,249,251,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .container{display:flex;align-items:center;gap:22px;height:80px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;color:var(--ink);font-size:1.15rem;letter-spacing:-.01em}
.brand img{height:34px;width:auto;display:block}
.brand .logo-full{height:58px}
.brand b{color:var(--teal-d);font-weight:600}
.top nav{margin-left:auto;display:flex;gap:20px;align-items:center}
.top nav a{text-decoration:none;font-weight:600;color:var(--ink);font-size:.95rem}
.top nav a:hover{color:var(--teal-d)}
.top nav a.btn{color:#fff}
.top nav a.btn:hover{color:#fff}
@media(max-width:820px){.top nav a.hide,.top nav details.hide{display:none}}

/* Desplegable del menu: agrupa a los dos publicos que NO compran un curso suelto
   (la empresa que capacita a su equipo y la universidad que busca quien imparta
   su microcredencial). Va con <details> y sin libreria: funciona con teclado y
   sin JavaScript, y el JS del pie solo lo cierra al hacer clic fuera. */
.nav-drop{position:relative}
.nav-drop>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  font-weight:600;color:var(--ink);white-space:nowrap}
.nav-drop>summary::-webkit-details-marker{display:none}
.nav-drop>summary:hover{color:var(--teal-d)}
.nav-drop[open]>summary{color:var(--teal-d)}
.nav-drop[open]>summary svg{transform:rotate(180deg)}
.nav-drop>summary svg{transition:transform .18s}
.nav-drop-panel{position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + 14px);z-index:60;
  min-width:288px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:8px;
  box-shadow:0 18px 44px rgba(20,22,61,.16)}
.nav-drop-panel a{display:block;padding:11px 13px;border-radius:11px;text-decoration:none;color:var(--ink)}
.nav-drop-panel a:hover{background:#eef6f7}
.nav-drop-panel b{display:block;font-weight:700;font-size:.95rem}
.nav-drop-panel span{display:block;font-size:.8rem;color:var(--muted);margin-top:2px;line-height:1.35}
.menu-movil-tit{display:block;padding:10px 14px 4px;font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}

/* Hero */
.hero{padding:66px 0 40px;position:relative;overflow:hidden}
.hero .lead{font-size:1.2rem;color:var(--muted);max-width:44ch;margin:1rem 0 1.6rem}
/* Las cifras van a lo ancho, fuera de la reticula del hero: dentro de la columna
   izquierda se partian en tres mas una y dejaban un hueco blanco del lado de la
   foto que se leia como error. Cuatro columnas iguales y una linea que las
   separa del hero. */
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 34px;
  margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}
@media(max-width:760px){.hero-stats{grid-template-columns:repeat(2,1fr);gap:22px}}
.hero-stats .n{font-size:2rem;color:var(--navy);font-weight:600}
.hero-stats .l{font-size:.85rem;color:var(--muted)}
.hero .container{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero-visual{position:relative;justify-self:center;width:100%;max-width:410px}
.hero-photo{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow);background:linear-gradient(140deg,var(--teal),var(--navy))}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hero-photo::after{content:"";position:absolute;inset:0;border-radius:26px;box-shadow:inset 0 0 0 5px rgba(255,255,255,.55)}
.fbadge{position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.6em .95em;box-shadow:0 14px 34px rgba(20,22,61,.16);font-size:.82rem;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px;white-space:nowrap;z-index:2}
.fb-1{top:12%;left:-40px;animation:floatA 5s ease-in-out infinite}
.fb-2{bottom:22%;right:-48px;animation:floatB 6s ease-in-out infinite}
.fb-3{bottom:5%;left:-20px;animation:floatA 5.5s ease-in-out infinite .5s}
.fb-stars{display:inline-flex}
.fb-stars svg{width:14px;height:14px;color:#FFB800;fill:#FFB800}
.fb-ic{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none}
.fb-ic.teal{background:var(--teal)}
.fb-ic svg{width:14px;height:14px}
.live-dot{width:9px;height:9px;border-radius:50%;background:#e5484d;animation:pulseDot 1.8s infinite}
/* El rojo significa "en vivo" (la convencion del boton de grabar). Junto a
   "te contesta al instante" se leia como asesor ausente, que es justo lo
   contrario: ahi va el verde de disponible. */
.live-dot.on{background:#16a34a;animation:pulseDotOn 1.8s infinite}
@keyframes pulseDotOn{0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}70%{box-shadow:0 0 0 8px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.hero-blob{position:absolute;border-radius:50%;filter:blur(55px);opacity:.5;z-index:0;pointer-events:none}
.hb-a{width:420px;height:420px;background:rgba(100,189,195,.28);top:-130px;right:-70px;
      animation:floatB 13s ease-in-out infinite, tinteA 26s ease-in-out infinite}
.hb-b{width:320px;height:320px;background:rgba(0,204,255,.16);bottom:-140px;left:-110px;
      animation:floatA 15s ease-in-out infinite, tinteB 22s ease-in-out infinite}
/* Tercer resplandor: es el que hace que el fondo cambie de color de verdad, sin
   tocar el fondo claro que necesita el texto para leerse. */
.hb-c{width:360px;height:360px;background:rgba(127,227,234,.20);top:40px;left:38%;
      animation:floatA 18s ease-in-out infinite 1s, tinteC 30s ease-in-out infinite}
@keyframes tinteA{0%,100%{background:rgba(100,189,195,.28)}33%{background:rgba(0,204,255,.24)}66%{background:rgba(127,227,234,.30)}}
@keyframes tinteB{0%,100%{background:rgba(0,204,255,.16)}50%{background:rgba(100,189,195,.24)}}
@keyframes tinteC{0%,100%{background:rgba(127,227,234,.20)}40%{background:rgba(58,166,192,.18)}70%{background:rgba(0,204,255,.16)}}
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(11px)}}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(229,72,77,.5)}70%{box-shadow:0 0 0 8px rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-visual{margin:24px auto 0;max-width:300px}}
/* En celular los distintivos NO se ocultan: se meten dentro de la foto. Iban con
   posiciones negativas para volar fuera del marco, y en pantalla angosta eso se
   salía, que es la razón por la que alguien los apagó. Aquí se achican y entran. */
@media(max-width:600px){
  .fbadge{font-size:.68rem;padding:.42em .7em;border-radius:11px;gap:6px;
          box-shadow:0 8px 20px rgba(20,22,61,.18);max-width:calc(100% - 20px)}
  .fb-1{top:10px;left:10px;right:auto}
  .fb-2{bottom:58px;right:10px;left:auto}
  .fb-3{bottom:10px;left:10px;right:auto}
  .fbadge .fb-ic{width:18px;height:18px}
  .fbadge svg{width:13px;height:13px}
}

/* ===== 39 (2026-09-10) - Lo primero que se ve: logos en movimiento y temas =====
   Peticion de Cristina: que la parte de arriba sea el gancho, colorida y con
   movimiento. Dos piezas, las dos honestas: la banda solo lleva plataformas que
   HOY se enseñan en el catalogo, y el color de cada tema es el de su propia
   marca, no una paleta inventada. */
.hero-banda{display:flex;align-items:center;gap:20px;margin-bottom:30px;
  background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:999px;
  padding:11px 24px;box-shadow:0 10px 30px rgba(20,22,61,.06);backdrop-filter:blur(6px)}
.banda-lbl{flex:none;font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);white-space:nowrap}
/* La tira se corta con una mascara en vez de un degradado encima: asi el borde
   se difumina sobre cualquier fondo y no hay que casar el color con el de atras. */
.banda-viaje{flex:1;min-width:0;overflow:hidden;display:flex;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.banda-pista{flex:none;display:flex;align-items:center;gap:34px;list-style:none;margin:0;padding:0 17px;
  animation:banda 34s linear infinite}
.banda-pista li{flex:none;display:grid;place-items:center;opacity:.9;transition:transform .2s}
.banda-pista li:hover{transform:scale(1.15)}
.banda-viaje:hover .banda-pista{animation-play-state:paused}
@keyframes banda{from{transform:translateX(0)}to{transform:translateX(-100%)}}

.hero-temas{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.hero-temas li{animation:flotaTema 7s ease-in-out infinite;animation-delay:calc(var(--g) * -.55s)}
.hero-temas a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  background:var(--cbg);border:1px solid var(--cln);color:var(--ctx);
  border-radius:13px;padding:8px 14px;font-size:.88rem;font-weight:700;line-height:1.15;
  transition:transform .18s,box-shadow .18s}
.hero-temas li:nth-child(odd) a{transform:rotate(-1.4deg)}
.hero-temas li:nth-child(even) a{transform:rotate(1.2deg)}
.hero-temas a:hover{transform:rotate(0) translateY(-3px);box-shadow:0 12px 26px rgba(20,22,61,.16)}
.hero-temas a svg{flex:none}
@keyframes flotaTema{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

@media(max-width:900px){
  .hero-banda{gap:14px;padding:10px 16px}
  .banda-lbl{display:none}
  .hero-temas{max-width:none}
}
@media(max-width:600px){
  .hero-banda{border-radius:20px;padding:12px 14px}
  .banda-pista{gap:26px;padding:0 13px}
  .hero-temas a{font-size:.8rem;padding:7px 11px;border-radius:11px}
}
@media(prefers-reduced-motion:reduce){
  .banda-pista,.hero-temas li{animation:none}
  .hero-temas a{transform:none}
}

@media(prefers-reduced-motion:reduce){.fbadge,.hero-blob,.live-dot{animation:none}}

/* Secciones */
section{padding:44px 0}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.grid{display:grid;gap:22px}
.g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* Card de curso */
.course{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;text-decoration:none;color:inherit}
.course:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.cover{position:relative;height:150px;display:grid;place-items:center;overflow:hidden;background:
  radial-gradient(120% 120% at 15% 10%, color-mix(in srgb, var(--cc,#3AA6C0) 78%, white) 0%, var(--cc,#3AA6C0) 55%, color-mix(in srgb, var(--cc,#3AA6C0) 70%, black) 100%)}
.cover::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1.4px,transparent 1.4px);background-size:16px 16px;opacity:.6}
.cover-ico{position:relative;z-index:1;color:#fff;opacity:.95;transition:transform .25s}
.cover-ico svg{width:46px;height:46px;stroke-width:1.6}
.course:hover .cover-ico{transform:scale(1.12) rotate(-3deg)}
/* Portada con foto: la trama de puntos se atenua y el icono gana contraste. */
.cover.con-foto::after{opacity:.18}
.cover.con-foto .cover-ico{filter:drop-shadow(0 2px 10px rgba(20,22,61,.6))}
.cover-lvl{position:absolute;top:12px;left:12px;z-index:2;background:rgba(255,255,255,.92)!important;backdrop-filter:blur(4px)}
.course .body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.course h3{font-size:1.22rem;margin:.5rem 0 .3rem}
.course .desc{color:var(--muted);font-size:.92rem;flex:1}
.course .meta{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 12px}
/* El pie de la tarjeta lleva los dos precios arriba (en línea y presencial) y
   abajo la nota con el botón. En una sola fila los dos precios se apretaban y
   el de presencial se partía. */
.course .cfoot{display:flex;flex-direction:column;gap:10px;
  margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.course .precios{display:flex;gap:8px;align-items:stretch}
.precio-via{flex:1;min-width:0;border:1px solid var(--line);border-radius:11px;padding:7px 10px;background:#fff}
.precio-via.presencial{background:var(--navy);border-color:var(--navy)}
.precio-via-lbl{display:block;font-size:.62rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;color:var(--muted)}
.precio-via.presencial .precio-via-lbl{color:var(--teal-soft)}
.precio-via-n{display:block;font-weight:700;color:var(--navy);font-size:1.12rem;line-height:1.25;margin-top:1px}
.precio-via.presencial .precio-via-n{color:#fff}
.precio-via-n s{color:var(--muted);font-size:.78rem;font-weight:400;margin-right:5px}
.precio-nota{font-size:.68rem;font-weight:600;color:var(--muted);min-width:0}
.cfoot-fin{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* El botón de la tarjeta nunca parte su texto en dos líneas: se lee peor y descuadra la fila. */
.course .cfoot .btn{white-space:nowrap;flex:none;padding-left:1.1em;padding-right:1.1em}

/* El icono oficial de la plataforma, encima de la portada. Es lo que la persona
   reconoce antes de leer el título. */
/* La pastilla de marcas crece con lo que el curso maneja: un curso puede tocar
   varias herramientas (Analytics, Tag Manager y Search Console) y una sola G
   generica no dice cual. Hasta tres, que es lo que cabe sin tapar la portada. */
.course-marca{position:absolute;top:12px;right:12px;z-index:2;min-width:36px;height:36px;border-radius:11px;
  background:#fff;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 8px;
  box-shadow:0 3px 10px rgba(20,22,61,.18)}
.course-marca svg{display:block;flex:0 0 auto}
.price{font-weight:600;color:var(--navy);font-size:1.35rem}
.price s{color:var(--muted);font-size:.85rem;font-weight:400;margin-right:6px}
.price .msi{display:block;font-size:.66rem;color:var(--teal-d);font-weight:600}

/* Bloques oscuros */
.dark{background:var(--navy);color:#dfe6f2}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark .eyebrow{color:var(--teal-soft)}
.band{border-radius:26px;padding:46px 40px;margin:20px 0}

/* Curso landing */
.curso-hero{padding:44px 0 20px}
.curso-grid{display:grid;grid-template-columns:1fr 360px;gap:38px;align-items:start}
@media(max-width:900px){.curso-grid{grid-template-columns:1fr}}
.buybox{position:sticky;top:88px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)}
.buybox .price{font-size:2.2rem}
.check{list-style:none;padding:0;margin:0}
.check li{display:flex;gap:10px;padding:7px 0;align-items:flex-start}
.check li svg{color:var(--teal-d);flex:none;margin-top:3px}
.module{background:var(--paper);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
.module summary{padding:16px 18px;cursor:pointer;font-weight:600;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:10px}
.module summary::-webkit-details-marker{display:none}
.module .lec{padding:6px 18px 16px}
.module .lec div{display:flex;gap:10px;padding:6px 0;color:var(--muted);font-size:.92rem;align-items:center;border-top:1px dashed var(--line)}
.scarcity{background:rgba(0,168,204,.08);border:1px solid rgba(0,168,204,.28);color:#0075a0;border-radius:12px;padding:10px 14px;font-size:.86rem;font-weight:600;margin:14px 0}
.trust{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.82rem;margin-top:12px;justify-content:center}

/* Auth */
.auth-wrap{min-height:70vh;display:grid;place-items:center;padding:40px 0}
.auth-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:38px;max-width:420px;width:100%;box-shadow:var(--shadow)}
.field{margin:14px 0}
.field label{display:block;font-weight:600;font-size:.88rem;margin-bottom:6px;color:var(--ink)}
.field input,.field select,.field textarea{width:100%;padding:.72em .9em;border:1.5px solid var(--line);border-radius:12px;font:inherit;background-color:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal)}
.otp-input{text-align:center;font-family:ui-monospace,Menlo,monospace;font-size:1.8rem;letter-spacing:.5em}

/* Flash */
.flash{padding:12px 16px;border-radius:12px;margin:12px 0;font-weight:600}
.flash.ok,.flash.info{background:rgba(100,189,195,.16);color:#1c6b75}
.flash.error{background:rgba(221,51,51,.12);color:#b02a2a}

/* Instructora */
.instructor-sec{padding:44px 0}
.instructor{display:grid;grid-template-columns:220px 1fr;gap:38px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:34px;box-shadow:var(--shadow)}
.instructor-photo{width:220px;height:260px;border-radius:20px;overflow:hidden;background:linear-gradient(140deg,var(--teal),var(--navy));display:grid;place-items:center}
.instructor-photo img{width:100%;height:100%;object-fit:cover}
.instructor-photo .ini{color:#fff;font-size:4rem;font-weight:600;letter-spacing:.02em}
.instructor-info h2{margin:.1rem 0 .1rem}
.instructor-info .cargo{color:var(--teal-d);font-weight:600;margin:0 0 .6rem}
.instructor-info .bio{color:var(--text);font-size:1.02rem;max-width:60ch}
.creds{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.cred{display:inline-flex;align-items:center;gap:6px;background:rgba(100,189,195,.14);color:#1c6b75;font-weight:600;font-size:.82rem;padding:.4em .8em;border-radius:999px}
.cred svg{color:var(--teal-d)}
@media(max-width:760px){.instructor{grid-template-columns:1fr;text-align:center}.instructor-photo{width:160px;height:190px;margin:0 auto}.creds{justify-content:center}}

/* Reseñas Google + Facebook */
.reviews-wrap{padding:50px 0;background:linear-gradient(180deg,transparent,rgba(100,189,195,.06))}
.rev-agg{display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap;margin:6px 0 30px}
.agg-combo{display:flex;align-items:center;gap:14px}
.agg-num{font-size:3rem;font-weight:600;color:var(--navy);line-height:1}
.agg-total{font-size:.8rem;color:var(--muted);margin-top:2px}
.st-on{color:#FFB800;fill:#FFB800} .st-off{color:#d9dee1}
.agg-sources{display:flex;gap:12px;flex-wrap:wrap}
.src{display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.55em 1em;text-decoration:none;color:var(--ink);font-weight:600;font-size:.9rem}
.src b{color:var(--navy)}
.src:hover{border-color:var(--teal)}
.g-logo,.f-logo{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:600;font-size:.9rem}
.g-logo{background:conic-gradient(from -45deg,#EA4335,#FBBC05,#34A853,#4285F4,#EA4335)}
.f-logo{background:#1877F2}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.rev-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.rev-grid{grid-template-columns:1fr}}
.rev-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:20px;position:relative}
.rev-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.rev-av{width:42px;height:42px;border-radius:50%;background:var(--teal);color:#08303a;display:grid;place-items:center;font-weight:600;flex:none}
.rev-name{font-weight:600;color:var(--ink);font-size:.95rem}
.rev-stars{display:flex;gap:1px}
.rev-src{margin-left:auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:600;font-size:.85rem;flex:none}
.rev-src.g{background:conic-gradient(from -45deg,#EA4335,#FBBC05,#34A853,#4285F4,#EA4335)}
.rev-src.f{background:#1877F2}
.rev-text{color:var(--text);font-size:.93rem;margin:0}
.rev-date{color:var(--muted);font-size:.78rem;margin-top:10px}

/* Aula (salón tipo Crehana) */
.aula-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.aula-back{color:var(--muted);text-decoration:none;font-weight:600;font-size:.88rem;display:inline-flex;gap:6px;align-items:center}
.aula-back:hover{color:var(--teal-d)}
.aula-prog{display:flex;align-items:center;gap:10px}
.aula{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start}
@media(max-width:960px){.aula{grid-template-columns:1fr}}
.player{background:#0b0d24;border-radius:16px;overflow:hidden;aspect-ratio:16/9;display:grid;place-items:center}
.player:has(.player-text){aspect-ratio:auto;background:transparent;display:block}
.player iframe,.player video{width:100%;height:100%;border:0;display:block}
.player-ph{color:#cfe4e0;text-align:center;display:grid;gap:10px;place-items:center;padding:30px}
.player-ph svg{width:44px;height:44px;opacity:.85}
.player-text{background:var(--paper);border:1px solid var(--line);padding:24px;border-radius:16px;color:var(--text)}
.lesson-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.aula-side{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;max-height:82vh;overflow-y:auto}
.aula-side-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);z-index:1}
.mod-block{border-bottom:1px solid var(--line);padding-bottom:6px}
.mod-title{padding:12px 18px 4px;font-weight:600;font-size:.85rem;color:var(--ink)}
.lrow{display:flex;align-items:center;gap:10px;padding:9px 18px;text-decoration:none;color:var(--text);font-size:.88rem}
.lrow:hover{background:#f6fafb}
.lrow.on{background:rgba(100,189,195,.14);box-shadow:inset 3px 0 0 var(--teal)}
.lrow .lrow-t{flex:1}
.lrow .lrow-d{color:var(--muted);font-size:.72rem;font-family:ui-monospace,monospace}
.lrow>svg{color:var(--muted);flex:none}
.lrow .lr-done{color:var(--teal-d)}

/* ── Aula guiada: objetivo, paso a paso, ejercicio y material ──
   El alumno toma el curso presencial y aqui lo retoma paso por paso. */
.player-ph .ph-sub{font-size:.82rem;opacity:.7;max-width:38ch;line-height:1.5}
.lec-obj{display:flex;gap:14px;align-items:flex-start;margin-top:18px;padding:18px 20px;border-radius:14px;
  background:rgba(100,189,195,.11);border:1px solid rgba(100,189,195,.3)}
.lec-obj-ic{flex:0 0 34px;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:#fff;color:var(--teal-d)}
.lec-obj b{display:block;font-weight:600;font-size:.82rem;letter-spacing:.02em;text-transform:uppercase;color:var(--teal-d)}
.lec-obj p{margin:5px 0 0;color:var(--ink);font-size:1.02rem;line-height:1.55;text-align:left}
.lec-block{margin-top:22px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px 24px}
.lec-block-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.lec-block-head h3{margin:0;font-size:1.06rem;display:inline-flex;align-items:center;gap:9px}
.lec-block-head h3 svg{color:var(--teal-d)}
.lec-count{font-size:.78rem;color:var(--muted);font-family:ui-monospace,monospace}
.lec-hint{margin:8px 0 0;font-size:.86rem;color:var(--muted);text-align:left}
.pasos{list-style:none;margin:16px 0 0;padding:0;counter-reset:paso}
.paso{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px dashed var(--line)}
.paso:first-child{border-top:0;padding-top:4px}
.paso-form{margin:0;flex:none}
.paso-check{cursor:pointer;width:26px;height:26px;border-radius:50%;border:1.5px solid #cbdadd;background:#fff;
  color:transparent;display:grid;place-items:center;padding:0;transition:.16s}
.paso-check:hover{border-color:var(--teal);color:#cbdadd}
.paso.ok .paso-check{background:var(--teal-d);border-color:var(--teal-d);color:#fff}
.paso-n{flex:none;width:22px;font-family:ui-monospace,monospace;font-size:.78rem;color:var(--muted);padding-top:4px}
.paso-t{flex:1;line-height:1.55;padding-top:2px;text-align:left}
.paso.ok .paso-t{color:var(--muted);text-decoration:line-through;text-decoration-color:#cbdadd}
.ejer{background:linear-gradient(180deg,#fffdf6 0%,#fff 60%);border-color:#f0e4c8}
.ejer-consigna{margin:12px 0 16px;line-height:1.6;color:var(--ink);text-align:left}
.ejer-form textarea{width:100%;font:inherit;font-size:.95rem;line-height:1.6;padding:14px 16px;border-radius:12px;
  border:1px solid var(--line);background:#fff;resize:vertical;min-height:150px}
.ejer-form textarea:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(100,189,195,.18)}
.ejer-actions{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.ejer-msg{font-size:.82rem;color:var(--teal-d);font-weight:600}
.recursos{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.recurso{display:inline-flex;align-items:center;gap:8px;padding:.6em 1em;border-radius:10px;text-decoration:none;
  border:1px solid var(--line);background:#fff;color:var(--ink);font-size:.9rem;font-weight:600;transition:.16s}
.recurso:hover{border-color:var(--teal);color:var(--teal-d);transform:translateY(-1px)}
.lec-nav{display:flex;justify-content:space-between;gap:12px;margin-top:24px;flex-wrap:wrap}
.lec-nav .btn{max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:700px){
  .lec-block{padding:18px 16px}
  .lec-nav .btn{max-width:100%}
  .paso-n{display:none}
}

/* Footer */
.foot{background:var(--navy);color:#c3cce0;padding:44px 0;margin-top:40px}
.foot a{color:#c3cce0;text-decoration:none}
.foot a:hover{color:var(--teal-soft)}
.foot .cols{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}

/* ---------- PANEL (alumno + admin) ---------- */
.panel{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.side{background:var(--navy);color:#c3cce0;padding:22px 16px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.side .brand{color:#fff;margin:4px 0 28px;padding:0 8px}
.side .brand img{height:52px;max-width:100%}
.side-group{font-size:.66rem;text-transform:uppercase;letter-spacing:.15em;color:#6c76a0;margin:18px 8px 8px;font-weight:500}
/* El menú lateral iba todo en 600 y se leía como un bloque de negritas.
   Solo la opción activa lleva peso; el resto va normal. */
.side a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:#c3cce0;text-decoration:none;font-weight:400;font-size:.94rem;margin-bottom:2px}
.side a:hover{background:rgba(255,255,255,.06);color:#fff}
.side a.on{background:var(--teal);color:#08303a;font-weight:600}
.side .side-foot{margin-top:auto;padding:0 8px}
.main{padding:30px 34px;overflow:auto}
.main-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
@media(max-width:1000px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px}
.kpi .l{font-size:.8rem;color:var(--muted);font-weight:600}
.kpi .n{font-size:1.9rem;color:var(--navy);font-weight:600;margin-top:4px}
.meta-card{background:linear-gradient(135deg,#14163D,#242a6b);color:#fff;border-radius:18px;padding:24px 26px;margin-bottom:24px}
.meta-card h3{color:#fff;margin:0 0 4px}
.bar{height:14px;background:rgba(255,255,255,.15);border-radius:999px;overflow:hidden;margin:12px 0 6px}
.bar>span{display:block;height:100%;background:var(--cyan);border-radius:999px}
.bar.min>span{background:var(--teal)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:20px}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:10px 12px;border-bottom:2px solid var(--line);font-weight:600}
td{padding:11px 12px;border-bottom:1px solid var(--line)}
tr:hover td{background:#f6fafb}
.badge{font-size:.68rem;padding:.25em .6em;border-radius:6px;font-weight:600}
.badge.ok{background:rgba(100,189,195,.2);color:#1c6b75}
.badge.warn{background:rgba(0,168,204,.16);color:#0075a0}
.badge.err{background:rgba(221,51,51,.14);color:#b02a2a}
.badge.mut{background:#eef1f3;color:#666}
.progress{height:8px;background:var(--line);border-radius:999px;overflow:hidden}
.progress>span{display:block;height:100%;background:var(--teal)}
@media(max-width:760px){.panel{grid-template-columns:1fr}.side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;gap:4px}.side .brand{width:100%}.side .side-foot{margin:0}}

/* Nada se sale de la pantalla en celular: el adorno del hero y los videos
   se desbordaban 112 px a la derecha. */
video,iframe{max-width:100%}
@media(max-width:600px){
  .hero-blob{max-width:70vw;max-height:70vw}
  .hb-a{width:260px;height:260px;right:-40px;top:-80px}
  .hb-b{width:200px;height:200px;left:-60px}
  .fbadge{white-space:normal;text-align:left}
}

/* El hero recorta el adorno que asoma por el costado en celular. */
@media(max-width:600px){ .hero{overflow:hidden} }

/* ─────────────────────────────────────────────────────────────
   Correcciones 12-ago-2026 (Cristina)
   ───────────────────────────────────────────────────────────── */

/* 1. "Quién lo imparte" salía en blanco sobre blanco y no se leía.
      Causa: .card se declara DESPUÉS de .dark y con la misma especificidad,
      así que el fondo blanco de .card ganaba mientras el texto seguía blanco.
      Se sube la especificidad en vez de mover reglas de sitio. */
.card.dark{background:var(--navy);color:#dfe6f2;border-color:transparent}
.card.dark h1,.card.dark h2,.card.dark h3{color:#fff}
.card.dark p{color:#e8edf7}
.card.dark .eyebrow{color:var(--teal-soft)}

/* 2. Texto justificado en toda la página.
      Va con guionado porque en español el justificado sin guiones abre ríos
      de espacio entre palabras; el layout ya declara lang="es". */
.container p,
.card p,
.lead,
.module .lec div,
.check li span{
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
  text-wrap:pretty;
}

/* Lo que NO se justifica: columnas angostas, cifras y textos cortos, donde
   el justificado se ve peor que alineado a la izquierda. */
.buybox p,
.scarcity,
.price,
.eyebrow,
.mono,
.badge,
.pill,
.foot p,
th, td{
  text-align:left;
  hyphens:manual;
}
.trust{text-align:center}

/* Ajuste al justificado: en columnas angostas (tarjetas dentro de rejillas,
   reseñas, bandas) el justificado abre huecos grandes entre palabras y se ve
   peor que alineado a la izquierda. Medido en vivo: esas columnas van a ~320px. */
.grid p,
p.desc,
.rev-text,
.band p,
.curso-card p{
  text-align:left;
  hyphens:manual;
}

/* Corrección: .rev-text (0,1,0) perdía contra .container p (0,1,1) y las
   reseñas seguían justificadas en columnas de ~320px. Se iguala el peso. */
p.rev-text{text-align:left;hyphens:manual}

/* Estilos de la sección de testimonios en video. Estaban en el repo local
   pero nunca se habían publicado: por eso el video salía a tamaño natural
   y dejaba un hueco al costado. Incluye el encabezado centrado. */
.sec-head.centro{flex-direction:column;align-items:center;justify-content:center;text-align:center}
.testi-video{padding:80px 0;background:linear-gradient(180deg,#fff 0%,#f3f8fa 100%)}
/* Beneficios a la izquierda, video a la derecha (pedido de Cristina, 15-ago). */
.tv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:56px;align-items:center}
.tv-benes h2{margin:.35rem 0 0;font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.24}
.tv-intro{margin:14px 0 0;color:#4a5560;font-size:16px;line-height:1.65;max-width:52ch}
.tv-list{list-style:none;margin:26px 0 28px;padding:0;display:flex;flex-direction:column;gap:15px}
.tv-list li{display:flex;gap:13px;align-items:flex-start;font-size:16px;line-height:1.55;color:#1d2733;text-align:left}
.tv-ic{flex:0 0 32px;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:rgba(100,189,195,.16);color:#14163D;margin-top:1px}
.tv-tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.tv-tab{font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:.45em .9em;border-radius:999px;
  border:1px solid #d8e5e9;background:#fff;color:#4a5560;transition:.18s}
.tv-tab:hover{border-color:#64BDC3;color:#14163D}
.tv-tab.on{background:#14163D;border-color:#14163D;color:#fff}
.js .tv-slot{display:none}
.js .tv-slot.on{display:block}
.tv-slot + .tv-slot{margin-top:26px}
.js .tv-slot + .tv-slot{margin-top:0}
.tv-player video{width:100%;aspect-ratio:9/14;object-fit:cover;border-radius:18px;background:#14163D;display:block;
  box-shadow:0 18px 46px rgba(20,22,61,.18)}
.tv-cap{margin:14px 2px 0;font-size:13px;color:#5b6672;line-height:1.5}
.tv-quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px}
.tv-quote{margin:0;background:#fff;border:1px solid #e4edf0;border-left:3px solid #64BDC3;
  border-radius:14px;padding:24px 26px;box-shadow:0 6px 20px rgba(20,22,61,.05)}
.tv-quote p{margin:0 0 14px;font-size:17px;line-height:1.62;color:#1d2733}
.tv-quote cite{font-style:normal;display:flex;flex-direction:column;gap:2px}
.tv-quote cite b{font-weight:600;color:#14163D;font-size:15px}
.tv-quote cite span{font-size:13px;color:#66717d}
@media(max-width:1000px){
  .tv-quotes{grid-template-columns:1fr;gap:16px;margin-top:36px}
}
@media(max-width:900px){
  .testi-video{padding:56px 0}
  .tv-grid{grid-template-columns:1fr;gap:34px}
  .tv-player{max-width:360px;margin:0 auto;width:100%}
  .tv-quote p{font-size:16px}
  .tv-list{gap:13px}
}
.tv-grupo{margin:44px 0 0;text-align:center}
.tv-grupo img{width:100%;max-width:620px;border-radius:16px;box-shadow:0 12px 34px rgba(20,22,61,.12)}
.tv-grupo figcaption{margin-top:12px;font-size:13px;color:#5b6672}
@media(max-width:900px){.tv-grupo{margin-top:32px}}

/* ── Apartado "De León para el mundo": mapa de clientes y sellos ── */
.alcance{padding:66px 0}
.alcance .lead{margin-top:14px}

.mapa-caja{
  margin:34px 0 0;
  background:linear-gradient(180deg,#f7fbfc 0%,#eef6f8 100%);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:18px;
}
.mapa-caja img{width:100%;height:auto;display:block}

.regiones{
  list-style:none;margin:22px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px 12px;justify-content:center;
}
.regiones li{
  display:flex;align-items:center;gap:8px;
  background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:8px 16px;font-weight:600;font-size:.92rem;color:var(--navy);
}
.regiones .punto{width:9px;height:9px;border-radius:50%;background:var(--cyan);flex:0 0 auto}

.sellos{margin-top:52px;text-align:center}
.sellos-fila{
  margin-top:20px;
  display:flex;flex-wrap:wrap;gap:18px;justify-content:center;align-items:stretch;
}
.sellos figure{
  margin:0;flex:0 1 200px;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:22px 20px;display:flex;align-items:center;justify-content:center;
}
/* Altura fija y object-fit contain: los logos vienen con proporciones distintas
   y sin esto unos se ven al doble que otros. */
.sellos figure img{height:56px;width:auto;max-width:100%;object-fit:contain;display:block}
/* Sin texto debajo: el nombre y el papel viven en el alt y en el title. */

@media(max-width:700px){
  .alcance{padding:44px 0}
  .mapa-caja{padding:10px;border-radius:14px}
  .sellos figure{flex:0 1 calc(50% - 9px);padding:16px 10px}
  .sellos figure img{height:44px}
}

/* Semaforo de contenido cargado en el temario del ERP */
.lec-flags{display:inline-flex;gap:4px;flex:none}
.lec-flag{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;background:#eef2f4;color:#b3c1c6}
.lec-flag.on{background:rgba(100,189,195,.2);color:#14163D}

/* Continuar donde te quedaste, en Mis cursos */
.retomar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(120deg,#14163D 0%,#1d2b57 100%);color:#fff;border-radius:16px;padding:22px 26px;margin-bottom:22px}
.retomar .eyebrow{color:#7FE3EA}
.retomar h3{margin:.25rem 0 0;color:#fff;font-size:1.14rem}
.retomar p{margin:.3rem 0 0;color:#c3d5da;font-size:.9rem;text-align:left}
.retomar .btn{background:#fff;color:#14163D;flex:none}
.retomar .btn:hover{background:#7FE3EA}

/* ── "¿Por dónde empiezo?": cuestionario y ruta recomendada ── */
.empezar-hero{padding:64px 0 26px}
.empezar-hero.centrado{text-align:center;padding-bottom:10px}
.empezar-hero.centrado .lead{margin-left:auto;margin-right:auto;max-width:56ch}
/* La pantalla del resultado usa el mismo hero centrado, así que el recuadro del
   mensaje y la fila de respuestas se centran con él en vez de quedar a la izquierda. */
.empezar-hero.centrado .ruta-entendemos{margin-left:auto;margin-right:auto;text-align:center}
.empezar-hero.centrado .ruta-entendemos p{text-align:center}
.empezar-hero.centrado .ruta-respuestas{justify-content:center}
.empezar-hero h1{margin:.2rem 0 0}
.empezar-hero .lead{font-size:1.12rem;color:var(--muted);max-width:60ch;margin:1rem 0 0}
/* Cuestionario paso a paso, centrado. Sin JavaScript se ven las tres preguntas
   seguidas; con JavaScript aparece una a la vez, como el diagnóstico MAPA. */
.quiz{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:26px}
.quiz-barra{display:none}
.js .quiz-barra{display:flex;align-items:center;gap:14px;justify-content:center;margin-bottom:6px}
.quiz-barra-linea{flex:1;max-width:260px;height:5px;border-radius:999px;background:#dfe9ec;overflow:hidden}
.quiz-barra-linea span{display:block;height:100%;width:33%;border-radius:999px;background:var(--teal-d);
  transition:width .35s cubic-bezier(.22,1,.36,1)}
.quiz-cuenta{font-size:.8rem;color:var(--muted);font-weight:600;white-space:nowrap}
.quiz-cuenta b{color:var(--ink)}

.quiz-paso{border:0;padding:0;margin:0;text-align:center}
.js .quiz-paso{display:none;animation:quizEntra .32s cubic-bezier(.22,1,.36,1)}
.js .quiz-paso.on{display:block}
@keyframes quizEntra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.js .quiz-paso{animation:none}}

.quiz-paso legend{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;
  margin:0 auto 22px;padding:0;float:left}
.quiz-preg{font-size:clamp(1.35rem,3vw,1.9rem);font-weight:600;color:var(--ink);line-height:1.25;max-width:22ch}
.quiz-n{width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;
  font-size:1rem;font-family:ui-monospace,monospace;flex:none}

/* Las opciones van en flex, no en grid: cuando un sector solo trae dos giros,
   una retícula de tres columnas los deja pegados a la izquierda con un hueco
   muerto al lado. En flex, la fila incompleta se centra sola. */
.quiz-ops{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;clear:both}
.quiz-op{position:relative;flex:1 1 240px;max-width:320px;display:flex;flex-direction:column;
  align-items:center;cursor:pointer;background:var(--paper);border:1.5px solid var(--line);
  border-radius:14px;padding:22px 18px 20px;text-align:center;transition:.16s}
.quiz-op:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:0 8px 22px rgba(20,22,61,.07)}
.quiz-op input{position:absolute;opacity:0;width:0;height:0}
.quiz-op b{display:block;font-weight:600;color:var(--ink);font-size:1.02rem;text-wrap:balance}
.quiz-op span{display:block;margin-top:5px;font-size:.86rem;color:var(--muted);line-height:1.45;text-align:center}
.quiz-check{position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:50%;
  border:1.5px solid #cbdadd;color:transparent;display:grid;place-items:center;transition:.16s}
.quiz-check svg{width:13px;height:13px}
.quiz-op.on,.quiz-op:has(input:checked){border-color:var(--teal-d);background:rgba(100,189,195,.09);
  box-shadow:0 0 0 3px rgba(100,189,195,.14)}
.quiz-op.on .quiz-check,.quiz-op:has(input:checked) .quiz-check{background:var(--teal-d);border-color:var(--teal-d);color:#fff}
.quiz-op:has(input:focus-visible){outline:2px solid var(--navy);outline-offset:2px}

.quiz-pie{display:none;margin-top:20px}
.js .quiz-paso.on .quiz-pie{display:flex;justify-content:center}
.js .quiz-paso[data-paso="0"] .quiz-pie{display:none}

/* El "eco": la frase con la que le decimos que entendimos su respuesta.
   Aparece al elegir, se lee, y hasta entonces avanza la pregunta. */
.quiz-eco{display:none}
.js .quiz-op.eco .quiz-eco{display:block;width:100%;margin-top:12px;padding-top:12px;
  border-top:1px dashed rgba(100,189,195,.5);text-align:center;
  font-style:normal;font-size:.9rem;line-height:1.5;color:var(--teal-d);font-weight:600;
  animation:quizEntra .3s cubic-bezier(.22,1,.36,1)}

.ruta-entendemos{max-width:60ch;margin:1.3rem 0 0;padding:16px 20px;border-radius:14px;
  background:rgba(100,189,195,.11);border:1px solid rgba(100,189,195,.32)}
.ruta-entendemos p{margin:.4rem 0 0;color:var(--ink);font-size:1.02rem;line-height:1.6;text-align:left}

.quiz-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;justify-content:center}
.js .quiz-cta{display:none}
.js .quiz-cta.on{display:flex}
.ruta{display:flex;flex-direction:column;gap:22px;margin-top:34px}
.ruta-paso{display:grid;grid-template-columns:52px minmax(0,1fr);gap:20px;align-items:start}
.ruta-num{width:52px;height:52px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;
  font-size:1.3rem;font-weight:600;font-family:ui-monospace,monospace}
.ruta-card{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:22px;align-items:center}
.ruta-por{color:var(--muted);line-height:1.6;text-align:left}
.ruta-por b{display:block;color:var(--teal-d);margin-bottom:6px;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.12em;font-weight:600}
.ruta-por > p{margin:0;color:var(--ink);font-size:1.05rem;line-height:1.55;text-align:left}
.ruta-quien{margin:10px 0 0!important;display:flex;gap:8px;align-items:flex-start;font-size:.9rem;color:var(--muted)}
.ruta-quien svg{flex:none;margin-top:3px;color:var(--teal-d)}
.ruta-datos{list-style:none;margin:14px 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ruta-datos li{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--ink);font-weight:600;
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:.35em .85em}
.ruta-datos svg{color:var(--teal-d)}
.ruta-lead{margin:.7rem auto 0;color:var(--muted);max-width:62ch}
.ruta-todo{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;margin-top:36px;
  background:linear-gradient(120deg,#14163D 0%,#1d2b57 100%);color:#fff;border-radius:18px;padding:28px 32px}
.ruta-todo h3{color:#fff;margin:.3rem 0 0}
.ruta-todo p{color:#c3d5da;margin:.5rem 0 0;max-width:60ch;text-align:left}
.ruta-todo .btn{background:#fff;color:#14163D;flex:none}
.ruta-todo .btn:hover{background:#7FE3EA}
@media(max-width:820px){
  .ruta-paso{grid-template-columns:38px minmax(0,1fr);gap:14px}
  .ruta-num{width:38px;height:38px;font-size:1.05rem}
  .ruta-card{grid-template-columns:1fr;gap:14px}
}

/* ── Capacitación para empresas ── */
.emp-hero{padding:64px 0 34px;background:linear-gradient(180deg,#fff 0%,var(--bg) 100%)}
.emp-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center}
.emp-hero h1{font-size:clamp(1.9rem,4vw,2.9rem);margin:.3rem 0 0}
.emp-hero .lead{font-size:1.1rem;color:var(--muted);margin:1rem 0 1.6rem;max-width:52ch}
.emp-datos{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.emp-datos li{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.emp-datos b{display:block;color:var(--ink);font-size:1rem}
.emp-datos span{display:block;margin-top:3px;color:var(--muted);font-size:.9rem;line-height:1.5;text-align:left}
.emp-nota{max-width:66ch;margin:-8px auto 26px;text-align:center;color:var(--muted)}
.emp-form-sec{background:linear-gradient(180deg,var(--bg) 0%,#eef5f7 100%);padding:64px 0}
.emp-form-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:44px;align-items:start}
.emp-form-grid > div p{color:var(--muted);margin-top:.8rem;max-width:46ch}
.emp-check{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px}
.emp-check li{display:flex;gap:10px;align-items:flex-start;color:var(--ink);font-size:.95rem;text-align:left}
.emp-check svg{color:var(--teal-d);flex:none;margin-top:3px}
.emp-form .field{margin-bottom:14px}
.emp-temas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:4px}
.emp-tema{display:flex;gap:9px;align-items:center;font-size:.9rem;color:var(--text);cursor:pointer;
  border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:#fff;line-height:1.35}
.emp-tema:hover{border-color:var(--teal)}
.emp-tema input{width:auto;flex:none;margin:0}
.emp-tema:has(input:checked){border-color:var(--teal-d);background:rgba(100,189,195,.09)}
p.emp-legal{margin:14px auto 0;font-size:.78rem;color:var(--muted);text-align:center;max-width:46ch}
@media(max-width:900px){
  .emp-hero-grid,.emp-form-grid{grid-template-columns:1fr;gap:30px}
  .emp-temas{grid-template-columns:1fr}
}

/* ── Asesor de la Academia (burbuja flotante) ── */
.asesor{position:fixed;right:20px;bottom:20px;z-index:60;font-family:var(--font)}
.asesor-btn{display:inline-flex;align-items:center;gap:10px;background:var(--navy);color:#fff;border:0;cursor:pointer;
  border-radius:999px;padding:.75em 1.25em .75em .8em;font:inherit;font-weight:600;font-size:.94rem;
  box-shadow:0 14px 34px rgba(20,22,61,.3);transition:transform .16s,box-shadow .16s}
.asesor-btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(20,22,61,.36)}
.asesor-ic{width:34px;height:34px;border-radius:50%;background:var(--teal);display:grid;place-items:center;flex:none}
.asesor.abierto .asesor-btn{display:none}
.asesor-panel{width:min(376px,calc(100vw - 32px));max-height:min(590px,calc(100vh - 40px));display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:0 26px 70px rgba(20,22,61,.26)}
.asesor-panel[hidden]{display:none}
.asesor-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 17px;
  background:var(--navy);color:#fff;flex:none}
.asesor-head-t b{display:block;font-size:.98rem}
.asesor-head-t span{display:flex;align-items:center;gap:7px;font-size:.76rem;color:#a9c4d0;margin-top:2px}
.asesor-x{background:transparent;border:0;color:#a9c4d0;cursor:pointer;padding:4px;border-radius:8px;display:grid;place-items:center}
.asesor-x:hover{color:#fff;background:rgba(255,255,255,.12)}
.asesor-hilo{flex:1;overflow-y:auto;padding:17px;display:flex;flex-direction:column;gap:13px;background:#f7fbfc}
.as-msg{max-width:88%;padding:12px 15px;border-radius:15px;font-size:.93rem;line-height:1.55;text-align:left}
.as-msg.bot{background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--text);align-self:flex-start}
.as-msg.yo{background:var(--navy);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.as-cursos{display:flex;flex-direction:column;gap:8px;align-self:stretch}
.as-curso{display:flex;justify-content:space-between;align-items:center;gap:10px;text-decoration:none;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 13px;transition:.16s}
.as-curso:hover{border-color:var(--teal);transform:translateY(-1px)}
.as-curso b{display:block;color:var(--ink);font-size:.87rem;line-height:1.35;font-weight:600}
.as-curso span{display:block;font-size:.74rem;color:var(--muted);margin-top:2px}
.as-curso i{color:var(--teal-d);flex:none}
.as-chips{display:flex;flex-wrap:wrap;gap:7px;align-self:flex-start}
.as-chip{font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;background:#fff;color:var(--teal-d);
  border:1px solid rgba(100,189,195,.55);border-radius:999px;padding:.44em .9em;transition:.15s}
.as-chip:hover{background:var(--teal-d);color:#fff;border-color:var(--teal-d)}
.asesor-form{display:flex;gap:8px;padding:12px 14px 4px;flex:none;background:var(--paper)}
.asesor-form input{flex:1;font:inherit;font-size:.92rem;padding:.7em .9em;border:1px solid var(--line);border-radius:999px;background:#f7fbfc}
.asesor-form input:focus{outline:0;border-color:var(--teal);background:#fff}
.asesor-form button{flex:none;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;background:var(--navy);color:#fff;display:grid;place-items:center}
.asesor-form button:hover{background:#1e2152}
.asesor-pie{margin:0;padding:8px 16px 13px;font-size:.74rem;color:var(--muted);text-align:center}
.asesor-pie a{color:var(--teal-d);font-weight:600}
@media(max-width:600px){
  .asesor{right:12px;bottom:12px;left:12px}
  .asesor-btn{width:100%;justify-content:center}
  .asesor-panel{width:100%;max-height:calc(100vh - 24px)}
}
@media print{.asesor{display:none}}

/* Ruta recomendada arriba: los chips de lo que contestó y el bloque para cambiarlo */
.ruta-respuestas{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:1.1rem 0 0;
  color:var(--muted);font-size:.9rem;text-align:left}
.ruta-chip{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:.35em .9em;font-size:.82rem;font-weight:600;color:var(--ink)}
.quiz-otra{background:linear-gradient(180deg,var(--bg) 0%,#eef5f7 100%);padding:60px 0}
.quiz-otra .sec-head{margin-bottom:30px}

/* ── Fechas del próximo grupo en la ficha del curso ── */
.fechas{margin-top:16px;padding:14px 16px;border-radius:13px;
  background:rgba(100,189,195,.1);border:1px solid rgba(100,189,195,.32)}
.fechas-head{display:flex;align-items:center;gap:7px;font-size:.74rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--teal-d);font-weight:600}
.fechas-head svg{color:var(--teal-d)}
.fechas-fecha{margin-top:6px;font-size:1.06rem;font-weight:600;color:var(--ink);line-height:1.3}
.fechas-dato{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:.88rem;color:var(--text)}
.fechas-dato svg{color:var(--teal-d);flex:none}
.fechas-dato.urge{color:#b4520f;font-weight:600}
.fechas-dato.urge svg{color:#b4520f}
.fechas-mas{margin-top:10px;border-top:1px dashed rgba(100,189,195,.5);padding-top:8px}
.fechas-mas summary{cursor:pointer;font-size:.82rem;color:var(--teal-d);font-weight:600}
.fechas-mas ul{margin:8px 0 0;padding-left:18px;font-size:.85rem;color:var(--text);line-height:1.7}

/* Sin fecha publicada: nunca un hueco, siempre la acción que sí se puede ofrecer */
.sin-fecha{margin-top:16px;padding:16px;border-radius:13px;background:#fffdf6;border:1px solid #f0e4c8}
.sin-fecha b{display:block;color:var(--ink);font-size:.95rem;line-height:1.4}
.sin-fecha p{margin:6px 0 12px;font-size:.86rem;color:var(--muted);line-height:1.5;text-align:left}
.sin-fecha-form{display:flex;flex-direction:column;gap:8px}
.sin-fecha-form input{width:100%;font:inherit;font-size:.9rem;padding:.6em .8em;
  border:1px solid var(--line);border-radius:9px;background:#fff}
.sin-fecha-form input:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(100,189,195,.18)}

/* Selector de grupo en el checkout */
.grupos{display:grid;gap:10px;margin-top:12px}
.grupo{position:relative;display:block;cursor:pointer;background:#fff;border:1.5px solid var(--line);
  border-radius:12px;padding:13px 15px;transition:.16s}
.grupo:hover{border-color:var(--teal)}
.grupo input{position:absolute;opacity:0;width:0;height:0}
.grupo b{display:block;color:var(--ink);font-size:.98rem}
.grupo span{display:block;margin-top:3px;font-size:.84rem;color:var(--muted);line-height:1.45;text-align:left}
.grupo.on,.grupo:has(input:checked){border-color:var(--teal-d);background:rgba(100,189,195,.09);
  box-shadow:0 0 0 3px rgba(100,189,195,.14)}
.grupo:has(input:focus-visible){outline:2px solid var(--navy);outline-offset:2px}
.resumen-fecha{display:flex;gap:9px;align-items:flex-start;margin-top:14px;padding:11px 13px;border-radius:11px;
  background:rgba(100,189,195,.1);border:1px solid rgba(100,189,195,.3);font-size:.88rem;color:var(--text);line-height:1.45}
.resumen-fecha svg{color:var(--teal-d);flex:none;margin-top:2px}

/* ── "Ver como": barra de aviso y selector del ERP ── */
.vercomo-barra{position:sticky;top:0;z-index:80;display:flex;justify-content:center;align-items:center;
  gap:16px;flex-wrap:wrap;background:#b4520f;color:#fff;padding:9px 18px;font-size:.88rem;font-weight:600}
.vercomo-barra svg{vertical-align:-2px}
.vercomo-barra b{font-weight:600}
.vercomo-barra form{margin:0}
.vercomo-barra button{font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;background:#fff;color:#b4520f;
  border:0;border-radius:999px;padding:.4em 1em}
.vercomo-barra button:hover{background:#ffeede}
.vercomo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px;padding:11px 15px;
  border-radius:12px;background:var(--paper);border:1px dashed var(--line)}
.vercomo span{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;color:var(--muted);font-weight:600}
.vercomo span svg{color:var(--teal-d)}
.vercomo select{font:inherit;font-size:.85rem;padding:.4em .6em;border:1px solid var(--line);
  border-radius:8px;background-color:#fff;max-width:320px}
@media(max-width:600px){.vercomo,.vercomo-barra{flex-direction:column;align-items:stretch;text-align:center}}
.kpi .sub{margin-top:6px;font-size:.72rem;color:var(--muted);line-height:1.4}

/* Filtro por nivel en "Mis cursos" */
.filtro-nivel{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.filtro-n{display:inline-block;margin-left:6px;font-family:ui-monospace,monospace;font-size:.78em;opacity:.65}

/* Estado de la sincronización de reseñas */
.sync-estado{display:flex;gap:13px;align-items:flex-start;flex-wrap:wrap;padding:15px 17px;border-radius:13px;
  background:rgba(100,189,195,.1);border:1px solid rgba(100,189,195,.32)}
.sync-estado.falta{background:#fffdf6;border-color:#f0e4c8}
.sync-estado > svg{flex:none;margin-top:2px;color:var(--teal-d)}
.sync-estado.falta > svg{color:#b4520f}
.sync-estado > div{flex:1;min-width:220px}
.sync-estado b{display:block;color:var(--ink)}
.sync-estado span{display:block;margin-top:3px;font-size:.87rem;color:var(--muted);line-height:1.5}
.sync-estado form{margin:0;flex:none}
.sync-nota{margin-top:18px;padding:14px 16px;border-radius:12px;background:var(--bg);
  border:1px dashed var(--line);font-size:.87rem;color:var(--muted);line-height:1.6;text-align:left}
.sync-nota b{color:var(--ink)}

/* ── Selects: la flecha nunca al ras del borde ──
   Regla de Cristina, repetida en varios proyectos. La flecha nativa se pega a la
   orilla, así que se apaga y se dibuja una propia con aire a la derecha. Se aplica
   a TODOS los select del proyecto, incluidos los que traen estilo en línea. */
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235b6b73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:40px!important;
  cursor:pointer;
}
select::-ms-expand{display:none}
/* Los compactos llevan menos aire, pero aire al fin */
.vercomo select,.filtro-nivel select,select.sm{background-position:right 11px center;padding-right:32px!important}

/* Aviso de viáticos según el código postal */
p.cp-aviso{margin:-4px 0 16px;padding:11px 14px;border-radius:11px;font-size:.87rem;line-height:1.5;text-align:left}
p.cp-aviso.ok{background:rgba(100,189,195,.12);border:1px solid rgba(100,189,195,.34);color:#1c6b75}
p.cp-aviso.viaje{background:#fffdf6;border:1px solid #f0e4c8;color:#7a5a12}
p.cp-aviso.mal{background:#fff1f0;border:1px solid #f3cfcb;color:#9b3025}
.emp-form input[readonly]{background-color:#f5f9fb;color:var(--muted);cursor:default}

/* Barra que avisa cuánto falta para pasar a la siguiente pregunta.
   Sin ella el cambio de pantalla se siente un brinco y no da tiempo de leer. */
/* La barra que avisa que va a pasar a la siguiente pregunta. Pegada al borde
   se salia de la esquina redondeada y se veia como un corte: va metida hacia
   adentro, con las dos puntas redondas y su carril de fondo. */
.quiz-eco-avance{position:absolute;left:22px;right:22px;bottom:12px;height:4px;
  border-radius:99px;background:rgba(100,189,195,.26);overflow:hidden}
.quiz-eco-avance::after{content:"";display:block;height:100%;width:0;border-radius:99px;
  background:var(--teal-d);animation:quizAvance linear forwards;animation-duration:inherit}
@keyframes quizAvance{from{width:0}to{width:100%}}
@media(prefers-reduced-motion:reduce){.quiz-eco-avance{display:none}}

/* ============================================================
   Revisión de responsivo, 20-ago-2026. Cada bloque anota qué se
   veía mal y a qué ancho, para no volver a tropezar con lo mismo.
   ============================================================ */

/* 1. El botón del asesor tapaba contenido en celular.
      Traía left:12px + width:100%, así que se volvía una barra de lado a lado
      pegada abajo: en el home se plantaba encima de las cifras del hero (300+,
      700+) y en cada página se comía una franja de 57 px del pie. Vuelve a ser
      un botón compacto a la derecha, y el pie reserva su altura. */
.asesor-guardado{opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .2s,transform .2s,visibility .2s}
@media(prefers-reduced-motion:reduce){.asesor-guardado{transition:none}}
@media(max-width:600px){
  .asesor{left:auto;right:12px;bottom:12px;transition:opacity .2s,transform .2s,visibility .2s}
  .asesor-btn{width:auto;justify-content:center;font-size:.88rem;padding:.68em 1.1em .68em .7em}
  .asesor-ic{width:28px;height:28px}
  .asesor.abierto{left:12px}
  /* El colchón de abajo lo fija ahora el menú inferior (bloque 10). */
}

/* 2. En celular y tableta vertical el menú desaparecía sin sustituto.
      Los cuatro enlaces del encabezado se ocultaban con display:none y no
      quedaba forma de llegar al catálogo, al cuestionario ni a la página de
      empresas: desde una ficha de curso la única salida era el logo. */
.menu-movil{display:none;margin-left:auto;position:relative}
.menu-movil>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink)}
.menu-movil>summary::-webkit-details-marker{display:none}
.menu-movil[open]>summary{background:var(--navy);color:#fff;border-color:var(--navy)}
.menu-movil-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:50;min-width:236px;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px;
  box-shadow:0 22px 54px rgba(20,22,61,.18);display:flex;flex-direction:column}
.menu-movil-panel a{display:block;padding:12px 14px;border-radius:10px;text-decoration:none;
  font-weight:600;font-size:.95rem;color:var(--ink)}
.menu-movil-panel a:hover{background:#f0f6f8;color:var(--teal-d)}
@media(max-width:820px){
  .menu-movil{display:block}
  .top .container{gap:12px}
  .top nav{gap:10px}
  .brand .logo-full{height:46px}
}

/* 3. Panel del alumno y ERP en celular: la barra lateral pasa a
      flex-direction:row, y los encabezados de grupo (ADMINISTRAR, MIS CURSOS,
      VER y el nombre de la persona) se metían en la fila como si fueran
      opciones. Se veía "Mi perfil   VER" y "Sitio público   CRISTINA NOVOA".
      Cada encabezado ocupa ahora su propio renglón. */
@media(max-width:760px){
  .side-group{width:100%;margin:14px 8px 6px}
  .side .side-foot{width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
  .side .side-foot .side-group{width:100%}
  .side a{padding:11px 13px}
}

/* 4. El bloque "Ver la plataforma como" se salía 30 px de su tarjeta en TODAS
      las pantallas del panel: el select toma su ancho preferido (el nombre de
      cuenta más largo) y arrastraba a los hermanos fuera del recuadro. */
.vercomo>*{min-width:0;max-width:100%}
.vercomo select{width:100%}
@media(max-width:600px){
  .vercomo select{max-width:100%}
  .vercomo button{width:100%;justify-content:center}
}

/* 5. El justificado se apaga en celular.
      La razón que lo limitaba a columnas anchas (arriba, punto 2) vale para la
      pantalla entera cuando el renglón mide ~330 px: se abrían ríos de espacio
      y el guionado partía palabras del cuerpo ("To-dos", "par-ten"). */
@media(max-width:700px){
  .container p,.card p,.lead,.module .lec div,.check li span{
    text-align:left;hyphens:manual;-webkit-hyphens:manual}
}

/* 6. Tablas del ERP en celular: caben por scroll horizontal, pero se
      comprimían tanto que cada celda partía una palabra por renglón y la
      columna de modalidad quedaba cortada a media sílaba. Se les da un ancho
      mínimo de trabajo y las columnas cortas dejan de partirse. */
@media(max-width:760px){
  .panel .card{-webkit-overflow-scrolling:touch}
  .panel .card>table{min-width:660px}
  .panel .card>table th{white-space:nowrap}
  .panel .card>table td .pill,.panel .card>table td .badge,
  .panel .card>table td .mono{white-space:nowrap}
}

/* 7. Zonas de toque. Los círculos del paso a paso medían 26 px y los enlaces
      del pie 19-22 px de alto: por debajo del mínimo cómodo para el dedo. */
@media(max-width:760px){
  .paso-check{width:32px;height:32px;flex:none}
  .foot a{display:inline-block;padding:6px 0}
  .foot li{margin-bottom:2px}
  .aula-back{padding:8px 0}
}

/* 8. Hero en celular: el salto de línea del título dejaba "verdad" solo en su
      renglón, y el rótulo de arriba partía "ARTIFICIAL" en una segunda línea
      por el espaciado entre letras. */
@media(max-width:600px){
  h1 br{display:none}
  .hero-copy .eyebrow{letter-spacing:.1em;font-size:.72rem}
}

/* 9. Segunda pasada de zonas de toque (medidas tras el primer arreglo).
      En celular quedaban en 22-30 px los botones chicos del ERP ("Editar",
      "Eliminar", "Guardar", "Agregar reseña"), la "×" de borrar (26x22, la más
      delicada porque es la que elimina) y los enlaces de texto del home y las
      migas de pan. Se llevan todos a 40 px o más de alto sin cambiar su
      aspecto en escritorio. */
@media(max-width:760px){
  .panel .btn.sm,.panel a.btn.sm,.panel button.btn.sm{min-height:40px;padding-top:.5em;padding-bottom:.5em}
  .panel .btn.ghost.sm{min-height:40px}
  .panel button.btn.ghost.sm{min-width:40px;justify-content:center}
  .band a,.sec-head a:not(.btn),.aula-back,.mig a,nav.mig a{
    display:inline-flex;align-items:center;min-height:40px}
}

/* 10. Menú de abajo en celular (20-ago-2026, petición de Cristina).
       Arriba solo caben el logo y un botón, así que la navegación se resolvía
       por el desplegable; con esta barra los caminos principales quedan a un
       dedo de distancia, y dentro de la plataforma evita subir hasta la barra
       lateral para cambiar de sección. Se apaga de 761 px para arriba. */
.tabbar{display:none}
@media(max-width:760px){
  .tabbar{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 22px rgba(20,22,61,.07)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:52px;padding:4px 2px;border-radius:12px;text-decoration:none;
    color:var(--muted);font-weight:600;font-size:.66rem;line-height:1.2;text-align:center}
  .tabbar a svg{width:21px;height:21px}
  .tabbar a.on{color:var(--teal-d)}
  .tabbar a.on svg{stroke-width:2.4}
  .tabbar a:active{background:#eef5f7}
  /* Todo lo que vive pegado abajo sube por encima de la barra. */
  .foot{padding-bottom:96px}
  .panel .main{padding-bottom:96px}
  .asesor{bottom:78px}
  .asesor-panel{max-height:calc(100vh - 106px)}
}
@media(max-width:760px) and (display-mode:standalone){
  .tabbar{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
}

/* 11. El menú lateral se pliega en celular. En escritorio no se nota: el
       resumen se esconde y la lista queda igual que siempre. */
.side-nav>summary{display:none}
.side-nav-in{display:contents}
@media(max-width:760px){
  .side{padding:14px 16px}
  .side .brand{margin:0 0 12px}
  .side-nav{width:100%}
  .side-nav>summary{display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
    padding:11px 13px;border-radius:11px;background:rgba(255,255,255,.08);color:#fff;
    font-weight:600;font-size:.92rem}
  .side-nav>summary::-webkit-details-marker{display:none}
  .side-nav[open]>summary{margin-bottom:8px;background:rgba(255,255,255,.14)}
  .side-nav-in{display:flex;flex-wrap:wrap;gap:4px}
}

/* 12. Pregunta de giro del cuestionario (20-ago-2026).
       Son doce opciones, así que no caben en la tarjeta grande de las otras
       preguntas: van en rejilla, con icono y el ejemplo debajo. */
.quiz-ops-chicas{gap:10px}
.quiz-ops-chicas .quiz-op{flex:0 1 240px;padding:20px 14px 18px}
.quiz-ops-chicas .quiz-op b{font-size:.95rem;line-height:1.3}
.quiz-ops-chicas .quiz-op span{font-size:.78rem;line-height:1.4;margin-top:4px}
/* El icono, en su disco, centrado y arriba del nombre en todas las preguntas.
   El disco es el <span>, no el icono: Lucide sustituye el <i> por el <svg> y le
   copia la clase, asi que poner el fondo en .quiz-ic engorda el trazo. */
.quiz-ic{width:26px;height:26px;color:inherit}
.op-ico{display:grid;place-items:center;flex:none;width:52px;height:52px;margin:0 auto 11px;
  border-radius:50%;background:rgba(100,189,195,.13);border:1px solid rgba(100,189,195,.3);
  color:var(--teal-d);transition:background .2s,transform .2s,color .2s,border-color .2s}
.op-ico .quiz-ic{width:23px;height:23px}
.op-ico-marca svg{width:24px;height:24px}
.quiz-op:hover .op-ico{background:rgba(100,189,195,.24);transform:scale(1.06)}
.quiz-op.on .op-ico{background:var(--teal-d);border-color:var(--teal-d);color:#fff}
@media(max-width:900px){.quiz-ops-chicas .quiz-op{flex:0 1 210px}}
@media(max-width:520px){
  .quiz-op{flex:1 1 100%;max-width:none;padding:18px 16px}
  .quiz-ops-chicas .quiz-op{flex:1 1 100%;padding:18px 14px}
  .op-ico{width:46px;height:46px;margin-bottom:9px}
}

/* 13. Filtros del catálogo. Con el giro son quince chips, así que llevan su
       propio renglón con etiqueta, en vez de una sola fila que se desbordaba. */
.cat-filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.cat-giro select{font:inherit;font-size:.92rem;font-weight:600;color:var(--ink);
  padding:.62em 2.4em .62em 1em;border:1px solid var(--line);border-radius:999px;
  background-color:#fff;min-width:250px;max-width:100%}
.cat-giro select:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(100,189,195,.22)}
.cat-quitar{display:inline-flex;align-items:center;gap:5px;font-size:.85rem;font-weight:600;
  color:var(--muted);text-decoration:none}
.cat-quitar:hover{color:var(--teal-d)}
.cat-filtros-t{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-right:2px}
.cat-filtros + .cat-filtros .cat-filtros-t:not(:first-child){margin-left:10px}
@media(max-width:600px){
  .cat-filtros{gap:7px}
  .cat-filtros-t{width:100%;margin:2px 0 0}
  .cat-giro select{width:100%;min-width:0}
  .cat-filtros + .cat-filtros .cat-filtros-t:not(:first-child){margin-left:0}
}

/* 14. El subtítulo grande deja de justificarse. Es un texto corto en columna
       angosta: el guionado lo partía en palabras como "es-tética" y "Presen-
       ciales", que en un titular secundario se lee como error de imprenta.
       Los párrafos del cuerpo siguen justificados en escritorio, como estaban. */
/* Va con peso suficiente: .lead a secas (0,1,0) pierde contra .container p
   (0,1,1), el mismo tropiezo que ya había pasado con .rev-text. */
.container p.lead, .container .lead, p.lead{text-align:left;hyphens:manual;-webkit-hyphens:manual}

/* 15. El atributo hidden tiene que ganarle a los display de los componentes.
       El botón "Ver" del filtro de giro se marcaba como hidden desde el script,
       pero .btn{display:inline-flex} lo seguía pintando. */
[hidden]{display:none !important}

/* 16. Burbujas de la ficha de curso y de las tarjetas del catálogo.
       En celular el texto se partía dentro de la burbuja ("PRESENCIAL Y / EN
       VIVO ONLINE", "8 / H", "4 / SESIONES") y con el icono centrado a un lado
       quedaba todo desacomodado y con alturas distintas. Ahora cada burbuja va
       en una sola línea y todas miden lo mismo de alto. */
.pill{white-space:nowrap;line-height:1.15}
.pill svg{flex:0 0 auto;width:13px;height:13px;display:block}
.tag-mod{white-space:nowrap}
.curso-hero .pill,.hero .pill{align-self:center}
/* La fila de burbujas envuelve: con nowrap dentro de cada una y sin wrap en la
   fila, la última se salía de la pantalla en celular. */
.meta-curso{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px;align-items:center}
.course .meta{display:flex;flex-wrap:wrap;align-items:center}
@media(max-width:600px){
  .pill{font-size:.64rem;letter-spacing:.04em;padding:.42em .7em}
  .tag-mod{font-size:.64rem;letter-spacing:.03em}
  .course .meta{gap:8px}
}

/* 17. Panel en celular: barra de arriba fija con el logo y la salida.
       Antes había que subir hasta arriba del todo para cerrar sesión, y el menú
       repetía las mismas opciones que ya están en la barra de abajo. */
.side-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* En computadora la salida vive abajo, en el pie de la barra lateral, y este
   icono no existe. Va con el peso de .side a (0,1,1), si no `.side a{display:flex}`
   le gana y aparece junto al logo: el mismo tropiezo de .rev-text y .lead. */
.side a.side-salir{display:none}
@media(max-width:760px){
  .side{position:sticky;top:0;z-index:65;padding:10px 14px}
  /* La barra de arriba tiene que ocupar el ancho completo, si no el botón de
     salir se queda pegado al logo en vez de irse al extremo derecho. */
  .side-top{margin:0;width:100%}
  .side .brand{margin:0}
  .side .brand img.logo-full{height:38px}
  .side a.side-salir{display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;flex:none;border-radius:12px;color:#c3cce0;
    background:rgba(255,255,255,.08);text-decoration:none}
  .side a.side-salir:hover,.side a.side-salir:active{background:rgba(255,255,255,.16);color:#fff}
  .side a.side-salir svg{width:20px;height:20px}
  /* Lo que ya está en la barra de abajo no se repite aquí. */
  .side-nav-in a.en-barra{display:none}
  .side .side-foot{display:none}
  .side-nav{margin-top:8px}
  .side-nav>summary{padding:9px 12px;font-size:.88rem}
}

/* 18. Comprobación de la lección (20-ago-2026, curso piloto).
       Va entre el paso a paso y el ejercicio: primero hace, luego confirma que
       entendió, y al final lo aplica a su negocio. La explicación aparece
       siempre, acierte o no, porque la pregunta también tiene que enseñar. */
.quiz-lec-intro{margin:-4px 0 18px;color:var(--muted);font-size:.9rem;text-align:left}
.quiz-p{border:1px solid var(--line);border-radius:14px;padding:16px 17px;margin:0 0 14px;
  background:#fff;transition:border-color .18s,background .18s}
.quiz-p:last-of-type{margin-bottom:0}
.quiz-p.bien{border-color:rgba(100,189,195,.6);background:#f6fcfc}
.quiz-p.mal{border-color:#f0d3cf;background:#fffaf9}
.quiz-p-t{display:flex;gap:10px;align-items:flex-start;margin:0 0 13px;font-weight:600;
  color:var(--ink);line-height:1.45;text-align:left}
.quiz-p-n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-size:.78rem;font-weight:600}
.quiz-p-ops{display:flex;flex-direction:column;gap:8px;margin-bottom:13px}
.quiz-p-op{display:flex;align-items:flex-start;gap:10px;cursor:pointer;position:relative;
  padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:#fff;
  font-size:.93rem;line-height:1.45;transition:border-color .15s,background .15s}
.quiz-p-op:hover{border-color:var(--teal)}
.quiz-p-op input{position:absolute;opacity:0;width:0;height:0}
.quiz-p-op span{flex:1;min-width:0}
.quiz-p-ic{opacity:0;flex:none;width:17px;height:17px;color:var(--teal-d)}
.quiz-p-op.elegida{border-color:var(--navy);background:#f5f7fc}
.quiz-p.contestada .quiz-p-op.es-correcta{border-color:#3f9d7e;background:#f2fbf7}
.quiz-p.contestada .quiz-p-op.es-correcta .quiz-p-ic{opacity:1;color:#2f7d64}
.quiz-p.mal .quiz-p-op.elegida:not(.es-correcta){border-color:#d98a80;background:#fff4f2}
.quiz-p.contestada .quiz-p-op{cursor:pointer}
.quiz-p-eco{margin-top:12px;padding:12px 14px;border-radius:11px;background:#f5f9fb;
  border:1px solid var(--line);font-size:.9rem;line-height:1.55;text-align:left}
.quiz-p-eco b{display:block;margin-bottom:3px;color:var(--ink)}
.quiz-p.bien .quiz-p-eco{background:#f2fbf7;border-color:rgba(63,157,126,.3)}
.quiz-p.bien .quiz-p-eco b{color:#2f7d64}
.quiz-p.mal .quiz-p-eco b{color:#a1443a}
@media(max-width:600px){
  .quiz-p{padding:14px 13px}
  .quiz-p-op{padding:12px;font-size:.9rem}
  .quiz-p-enviar{width:100%;justify-content:center}
}

/* 19. Buscador por palabra, después de los filtros de nivel. Con 33 cursos el
       nivel no alcanza para encontrar "el de WhatsApp". Filtra en la pantalla,
       sin recargar, y solo aparece si hay JavaScript. */
.busca-curso{display:flex;align-items:center;gap:8px;flex:1;min-width:230px;max-width:380px;
  padding:.34em .8em;border:1px solid var(--line);border-radius:999px;background:#fff}
.busca-curso svg{flex:none;color:var(--muted)}
.busca-curso input{flex:1;min-width:0;border:0;outline:0;background:transparent;
  font:inherit;font-size:.92rem;color:var(--ink);padding:.4em 0}
.busca-curso input::placeholder{color:var(--muted)}
.busca-curso:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(100,189,195,.2)}
.busca-x{flex:none;border:0;background:transparent;cursor:pointer;color:var(--muted);
  display:grid;place-items:center;padding:4px;border-radius:50%}
.busca-x:hover{color:var(--ink);background:#eef4f6}
.busca-vacio{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 0;
  color:var(--muted);font-size:.92rem;text-align:left}
@media(max-width:600px){.busca-curso{max-width:none;width:100%}}

/* 20. "Mi plan del curso": lo que el alumno escribió, junto y listo para
       imprimir. No hay librería de PDF en el servidor: la hoja se guarda con la
       impresión del navegador, y para eso está el bloque @media print de abajo. */
.plan-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-bottom:22px}
.plan-head h1{margin:6px 0 10px}
.plan-head .lead{max-width:56ch;margin:0}
.plan-acciones{display:flex;gap:10px;flex-wrap:wrap;flex:none}
.plan-resumen{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 26px}
.plan-resumen>div{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:15px 17px}
.plan-resumen b{display:block;font-size:1.35rem;color:var(--ink);line-height:1.15}
.plan-resumen span{display:block;font-size:.8rem;color:var(--muted);margin-top:3px}
.plan-modulo{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-d);
  font-weight:600;margin:30px 0 12px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.plan-lec{background:var(--paper);border:1px solid var(--line);border-radius:15px;padding:18px 20px;margin-bottom:13px}
.plan-lec.vacia{background:transparent;border-style:dashed}
.plan-lec-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.plan-lec h3{display:flex;align-items:flex-start;gap:11px;margin:0;font-size:1.02rem;line-height:1.4;color:var(--ink)}
.plan-n{flex:none;width:25px;height:25px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-size:.78rem;font-weight:600}
.plan-quiz{flex:none;font-size:.76rem;font-weight:600;color:var(--muted);background:#f0f5f7;
  padding:.32em .8em;border-radius:999px}
.plan-quiz.ok{background:#eaf7f2;color:#2f7d64}
.plan-obj{margin:11px 0 0 36px;font-size:.9rem;color:var(--muted);text-align:left}
.plan-resp{margin:13px 0 0 36px;padding:14px 16px;background:#f7fbfc;border-left:3px solid var(--teal);
  border-radius:0 10px 10px 0;line-height:1.6;text-align:left;white-space:pre-line}
.plan-pendiente{display:flex;align-items:center;gap:8px;margin:11px 0 0 36px;font-size:.88rem;color:var(--muted)}
.plan-pendiente a{color:var(--teal-d);font-weight:600}
.plan-pie{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}
.plan-pie p{margin:0 0 5px;text-align:left}
@media(max-width:760px){
  .plan-resumen{grid-template-columns:1fr}
  .plan-acciones{width:100%}
  .plan-acciones .btn{flex:1;justify-content:center}
  .plan-obj,.plan-resp,.plan-pendiente{margin-left:0}
}
/* Al imprimir se va todo lo que no es el plan: menús, barras y botones. */
@media print{
  .side,.tabbar,.vercomo,.vercomo-barra,.plan-acciones,.asesor,.top,.foot,.menu-movil{display:none !important}
  .panel{display:block}
  .main{padding:0}
  body{background:#fff}
  .plan-lec{break-inside:avoid;border-color:#d5dfe3}
  .plan-lec.vacia{display:none}
  .plan-modulo.sin-nada{display:none}
  .plan-modulo{break-after:avoid}
  .plan-resumen{grid-template-columns:repeat(3,1fr)}
  a[href]::after{content:""}
}
.plan-aviso{display:flex;align-items:center;gap:10px;margin:22px 0 0;padding:13px 16px;
  background:#f5f9fb;border:1px dashed var(--line);border-radius:12px;
  color:var(--muted);font-size:.9rem;text-align:left}
.plan-aviso svg{flex:none;color:var(--teal-d)}

/* 21. Giros dentro del editor de curso. Son 28: en lista suelta no se leen, así
       que van en dos columnas, con el lugar que ocupa el curso en cada ruta. */
.giros-lista{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.giro-op{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--line);
  border-radius:10px;cursor:pointer;font-size:.87rem;background:#fff;transition:border-color .14s,background .14s}
.giro-op:hover{border-color:var(--teal)}
.giro-op.on,.giro-op:has(input[type=checkbox]:checked){border-color:var(--navy);background:#f5f7fc}
.giro-op input[type=checkbox]{width:auto;flex:none;margin:0}
.giro-t{flex:1;min-width:0;line-height:1.3}
.giro-p{width:52px!important;flex:none;padding:.28em .4em!important;font-size:.8rem!important;text-align:center}
.giro-op:not(.on):not(:has(input[type=checkbox]:checked)) .giro-p{opacity:.4}
@media(max-width:900px){.giros-lista{grid-template-columns:1fr}}

/* 22. Sectores del cuestionario: mosaico con foto de fondo, como el explorador
       de CANACINTRA. Mientras no haya foto va un degradado del color del sector,
       para que el flujo funcione desde hoy y las imágenes entren después. */
.quiz-ops-sectores{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.quiz-sec{position:relative;min-height:176px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;
  padding:26px 16px;border:0;border-radius:18px;overflow:hidden;color:#fff;
  box-shadow:0 10px 30px rgba(20,22,61,.13);transition:transform .2s,box-shadow .2s}
.quiz-sec.sin-foto{background:
  radial-gradient(120% 120% at 18% 12%, color-mix(in srgb, var(--cc,#3AA6C0) 76%, white) 0%,
  var(--cc,#3AA6C0) 52%, color-mix(in srgb, var(--cc,#3AA6C0) 62%, black) 100%)}

/* Al pasar el cursor entra una segunda capa que va corriendo del color del
   sector al cian y al naranja de la marca. Va en ::before, encima del fondo y
   debajo del contenido, para no tener que animar el background de la tarjeta. */
.quiz-sec::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .35s;
  /* Dos capas: un velo oscuro FIJO encima del degradado que se mueve. Sin el
     velo, cuando pasa la franja naranja el texto blanco deja de leerse. */
  background-image:
    linear-gradient(rgba(16,18,50,.36),rgba(16,18,50,.5)),
    linear-gradient(115deg,
      color-mix(in srgb, var(--cc,#3AA6C0) 85%, black) 0%,
      var(--cc,#3AA6C0) 26%, #1E93B0 50%, #D9772A 72%,
      color-mix(in srgb, var(--cc,#3AA6C0) 80%, black) 100%);
  background-size:100% 100%, 280% 280%;
  background-position:0 0, 0% 50%}
.quiz-sec:hover::before,.quiz-sec:focus-within::before{opacity:1;animation:sec-corre 5.5s ease-in-out infinite}
@keyframes sec-corre{
  0%{background-position:0 0, 0% 50%}
  50%{background-position:0 0, 100% 50%}
  100%{background-position:0 0, 0% 50%}}
@media(prefers-reduced-motion:reduce){
  .quiz-sec:hover::before,.quiz-sec:focus-within::before{animation:none;background-position:0 0, 62% 50%}
}

.quiz-sec::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.14) 1.4px,transparent 1.4px);background-size:18px 18px;opacity:.5}
.quiz-sec:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(20,22,61,.24)}
.quiz-sec b{position:relative;z-index:1;font-size:1.04rem;line-height:1.32;color:#fff;
  text-align:center;max-width:16ch;text-wrap:balance;text-shadow:0 1px 10px rgba(20,22,61,.35)}

/* El icono en su disco, arriba del nombre y del mismo tamaño en las nueve. */
.sec-ico{position:relative;z-index:1;display:grid;place-items:center;flex:none;
  width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.17);
  border:1px solid rgba(255,255,255,.34);transition:background .25s,transform .25s,border-color .25s}
.quiz-sec:hover .sec-ico{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.6);transform:scale(1.07)}
.quiz-sec .quiz-ic{width:28px;height:28px;color:#fff;opacity:1;margin:0}
.quiz-sec .quiz-check{position:absolute;top:14px;right:14px;z-index:2;color:#fff;opacity:0}
.quiz-sec.on{outline:3px solid var(--navy);outline-offset:2px}
.quiz-sec.on::before{opacity:1}
.quiz-sec.on .quiz-check{opacity:1}
.quiz-sin-giro{grid-column:1/-1;margin:0;color:var(--muted);font-size:.92rem;text-align:center}

/* Atajo: los 28 giros por nombre, para quien no se reconoce en ningún sector. */
.quiz-atajo{display:none;margin:18px auto 0;max-width:430px;text-align:center}
.js .quiz-atajo{display:block}
.quiz-atajo label{display:block;margin-bottom:8px;font-size:.88rem;color:var(--muted)}
.quiz-atajo select{width:100%;font:inherit;font-size:.95rem;color:var(--ink);background-color:var(--paper);
  border:1.5px solid var(--line);border-radius:12px;
  padding-top:.72em;padding-bottom:.72em;padding-left:16px;padding-right:42px;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2314163D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.quiz-atajo select:hover{border-color:var(--teal)}
.quiz-atajo select:focus{outline:0;border-color:var(--teal-d);box-shadow:0 0 0 3px rgba(100,189,195,.2)}

@media(max-width:900px){.quiz-ops-sectores{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){
  .quiz-ops-sectores{grid-template-columns:repeat(2,1fr);gap:10px}
  .quiz-sec{min-height:146px;padding:20px 10px;gap:11px}
  .quiz-sec b{font-size:.92rem}
  .sec-ico{width:52px;height:52px}
  .quiz-sec .quiz-ic{width:24px;height:24px}
}

/* 23. Pie del panel: a quién escribirle sin salir de la plataforma. Va soporte@,
       que es el mismo que firma los correos de acceso; hello@ se queda en la
       página pública, que es la puerta comercial. */
.panel-pie{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:44px;
  padding-top:18px;border-top:1px solid var(--line);font-size:.86rem;color:var(--muted)}
.panel-pie a{color:var(--teal-d);font-weight:600;text-decoration:none}
.panel-pie a:hover{text-decoration:underline}
@media(max-width:600px){.panel-pie{gap:8px;flex-direction:column;align-items:flex-start}}
@media print{.panel-pie{display:none}}

/* 24. El logo del pie se veía chico al lado de los bloques de texto. Traía el
       alto escrito en el HTML, así que no había forma de tocarlo desde aquí. */
.foot-brand .logo-full{height:54px}
@media(max-width:600px){.foot-brand .logo-full{height:46px}}

/* 25. Pie legal: el aviso de privacidad y las políticas viven en diginova.mx y se
       enlazan; copiarlos aquí crearía dos versiones del mismo documento. */
.foot-legal{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}
.foot-legal p{margin:0;color:#6f8a85;font-size:.8rem;text-align:left}
.foot-legal-ligas{display:flex;gap:20px;flex-wrap:wrap}
.foot-legal-ligas a{color:#9fb8b3;text-decoration:none;font-size:.8rem}
.foot-legal-ligas a:hover{color:#fff;text-decoration:underline}
@media(max-width:600px){
  .foot-legal{flex-direction:column;align-items:flex-start;gap:12px}
  .foot-legal-ligas{gap:6px;flex-direction:column}
  .foot-legal-ligas a{padding:4px 0}
}

/* 26. Trailer de la ficha de curso. Va en 16:9 y no empuja el precio fuera de
       la pantalla: en celular se limita el alto para que el botón de comprar
       siga a la vista sin tener que bajar. */
.curso-trailer{margin:18px 0 4px;max-width:720px;border-radius:16px;overflow:hidden;
  background:var(--navy);box-shadow:0 16px 44px rgba(20,22,61,.18)}
.curso-trailer iframe,.curso-trailer video{display:block;width:100%;aspect-ratio:16/9;border:0}
@media(max-width:600px){.curso-trailer{margin:14px 0 2px;border-radius:13px}}

/* 27. Membresía mensual. Reusa la retícula de la página de empresas: mismo hero
       de dos columnas y mismo bloque de formulario, para que la persona que
       llega desde el catálogo no sienta que cambió de sitio. */
.mem-hero{padding:64px 0 34px;background:linear-gradient(180deg,#fff 0%,var(--bg) 100%)}
.mem-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center}
.mem-hero h1{font-size:clamp(1.9rem,4vw,2.9rem);margin:.3rem 0 0}
.mem-precio{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:26px 0 24px;
  padding:20px 24px;background:var(--paper);border:1px solid var(--line);border-radius:18px}
.mem-precio-cifra{font-size:2.5rem;font-weight:700;color:var(--navy);line-height:1;white-space:nowrap}
.mem-precio-cifra span{display:block;font-size:.78rem;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em;margin-top:6px}
.mem-precio-nota{color:var(--muted);font-size:.92rem;line-height:1.55;max-width:34ch}
.mem-precio-nota b{color:var(--ink)}
.mem-lista{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mem-lista li{position:relative;padding-left:20px;color:#cfe4e0;font-size:.95rem;line-height:1.55;text-align:left}
.mem-lista li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;
  border-radius:50%;background:var(--teal-soft)}
.mem-legal{margin:16px 0 0;color:var(--muted);font-size:.8rem;line-height:1.6}
.mem-legal a{color:var(--teal-d)}

/* Acordeón de dudas. No es un menú desplegable: se abre y se queda abierto. */
.faq{background:var(--paper);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
.faq>summary{padding:16px 20px;cursor:pointer;font-weight:600;color:var(--ink);list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq>summary::-webkit-details-marker{display:none}
.faq>summary::after{content:"+";font-size:1.3rem;color:var(--teal-d);font-weight:400;flex:none;line-height:1}
.faq[open]>summary::after{content:"–"}
.faq[open]>summary{border-bottom:1px solid var(--line)}
.faq p{margin:0;padding:16px 20px;color:var(--muted);line-height:1.65;text-align:left}

@media(max-width:900px){
  .mem-hero-grid{grid-template-columns:1fr;gap:30px}
  .mem-hero{padding:44px 0 26px}
}
@media(max-width:600px){
  .mem-precio{padding:16px 18px;gap:14px}
  .mem-precio-cifra{font-size:2.1rem}
  .faq>summary{padding:14px 16px;font-size:.95rem}
  .faq p{padding:14px 16px}
}

/* 28. Membresía dentro del panel del alumno: estado, baja e invitación. */
.mem-panel{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin-bottom:18px}
.mem-panel h3{margin:.2rem 0 0;font-size:1.15rem}
.mem-panel p{margin:.4rem 0 0;color:var(--muted);font-size:.92rem;line-height:1.6;max-width:62ch}
.mem-panel-txt{flex:1 1 320px;min-width:0}
.mem-baja{flex:0 1 300px;margin:0;background:#fff}
.mem-baja>summary{font-size:.9rem;font-weight:600}
.mem-invita{display:flex;gap:14px;align-items:center;text-decoration:none;
  background:var(--navy);color:#fff;border-radius:16px;padding:16px 20px;margin-bottom:18px}
.mem-invita svg{color:var(--teal-soft);flex:none}
.mem-invita span{flex:1;font-size:.92rem;line-height:1.55;color:#dbe6ea}
.mem-invita b{display:block;color:#fff;font-size:1rem;margin-bottom:2px}
.mem-invita:hover{background:#1b1e4d}
@media(max-width:600px){
  .mem-panel{padding:16px 18px}
  .mem-invita{padding:14px 16px}
  .mem-invita-fin{display:none}
}

/* 29. Las dos vías de compra en la ficha: en línea y presencial, con su precio.
       Van una junto a otra porque la persona está comparando, no leyendo. */
.vias{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 10px}
.via{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:#fff;min-width:0}
.via.destacada{background:var(--navy);border-color:var(--navy)}
.via-lbl{display:block;font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.via.destacada .via-lbl{color:var(--teal-soft)}
.via-precio{display:block;font-size:1.6rem;font-weight:700;color:var(--navy);line-height:1.15;margin:3px 0 2px}
.via.destacada .via-precio{color:#fff}
.via-nota{display:block;font-size:.72rem;color:var(--muted);line-height:1.4}
.via.destacada .via-nota{color:#b9cdd2}
.via-pie{margin:0 0 4px;font-size:.75rem;color:var(--muted);line-height:1.55}
@media(max-width:420px){
  .vias{grid-template-columns:1fr}
  .via-precio{font-size:1.45rem}
}


/* ---- Portada de tarjeta: zoom suave en hover (2026-09-03) ----
   La foto vive en .cover-img para poder escalarla sin mover el pill de nivel
   ni el badge de marca. El icono central se retiro en las portadas con foto. */
.cover.con-foto .cover-img{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  transform:scale(1); transform-origin:center;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
  will-change:transform;
}
.course:hover .cover.con-foto .cover-img,
.course:focus-visible .cover.con-foto .cover-img{ transform:scale(1.07) }
@media (prefers-reduced-motion: reduce){
  .cover.con-foto .cover-img{ transition:none }
  .course:hover .cover.con-foto .cover-img{ transform:none }
}


/* ===== 36 (2026-09-04) — portadas nuevas: sin overlay encima de la foto ===== */
.cover.con-foto::after{display:none}


/* ===== 37 (2026-09-04) — la portada respeta el 16:9 del arte =====
   Antes .cover tenia height:150px fijo: al ensancharse la tarjeta (1 columna en
   480-767px, 2 columnas en 768-1023px) la relacion llegaba a 3.6:1 y background-size:cover
   recortaba hasta la mitad de la altura, cortando las cabezas. Con aspect-ratio 16/9
   la caja crece a lo alto y la imagen se ve completa en cualquier ancho. */
.cover{height:auto;aspect-ratio:16/9}


/* ===== 38 (2026-09-09) - Las herramientas del curso, con logotipo y nombre =====
   En la ficha no basta el logo suelto: el nombre al lado es lo que distingue
   Analytics de Tag Manager, que son dos piezas de Google con la misma familia
   de color. */
.curso-marcas{margin:1.4rem 0 .2rem}
.curso-marcas-lbl{display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;color:var(--muted);margin-bottom:.55rem}
.curso-marcas ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.curso-marcas li{display:inline-flex;align-items:center;gap:8px;background:var(--paper);
  border:1px solid var(--line);border-radius:999px;padding:7px 14px 7px 11px;
  font-size:.85rem;font-weight:600;color:var(--navy);white-space:nowrap}
.curso-marcas li svg{display:block;flex:0 0 auto}

/* Los siete mercados en el pie, con bandera y nombre. */
.foot-mercados{margin:34px 0 6px;padding-top:26px;border-top:1px solid rgba(255,255,255,.09)}
.foot-mercados ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:9px 22px}
.foot-mercados li{display:inline-flex;align-items:center;gap:9px;color:#c9dbd8;font-size:.9rem;font-weight:600}
.foot-mercados img{border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.18);display:block}
@media(max-width:600px){.foot-mercados ul{gap:8px 16px}.foot-mercados li{font-size:.82rem}}

/* "Antes de empezar": la explicacion de la leccion, arriba del paso a paso. */
.lec-expl p{margin:0;color:var(--text);font-size:1.02rem;line-height:1.75}
.lec-expl{background:linear-gradient(180deg,#f2fbfc,#fff);border-left:3px solid var(--teal)}
.lec-min{margin-left:10px;font-size:.74rem;font-weight:600;color:var(--muted);
  background:#eef4f6;border-radius:99px;padding:2px 8px;flex:none}

/* Las tarjetas de etapa sobre fondo navy (empresas y microcredenciales). La clase
   .band se usaba en las dos paginas y NO tenia estilos: los bloques quedaban como
   texto suelto y, al ser distinta la altura de cada uno, la retícula dejaba un
   hueco grande entre la primera y la segunda fila que se leia como error. */
.band{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;align-self:start}
/* Sobre navy la misma clase se vuelve traslucida. Sin esta separacion, las
   preguntas frecuentes de las paginas de ciudad, que van sobre fondo claro,
   quedaban en blanco sobre blanco. */
.dark .band{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);padding:26px 26px 28px}
.band h3{font-size:1.18rem;line-height:1.3}
.band p{margin-bottom:0}
@media(max-width:600px){.band{padding:18px}.dark .band{padding:20px}}

/* Los enlaces a las paginas por giro en el catalogo: crawlables y utiles. */
.cat-giros-ligas{font-size:.86rem;color:var(--muted);line-height:2;margin:0 0 16px;max-width:92ch}
.cat-giros-ligas a{color:var(--teal-d);text-decoration:none;font-weight:600}
.cat-giros-ligas a:hover{text-decoration:underline}


/* ==========================================================================
   PORTADA NUEVA (septiembre 2026). Todo bajo .pz-home y con clases pz-:
   sueltas, reglas como p{margin:0} o la variable --r cambiarian las otras 40
   paginas del sitio. La propuesta navegable que aprobo Cristina esta en
   claude.ai/code/artifact/584cbfbe-b375-4157-873e-11ce6f20fc02
   ========================================================================== */
.pz-home{
  --pz-navy:#14163D; --pz-navy-2:#1C2050; --pz-navy-3:#262B66;
  --pz-cian:#00CCFF; --pz-cian-ink:#0089B3; --pz-naranja:#FF7A2F; --pz-naranja-ink:#B33F00;
  --pz-lienzo:#FFFFFF; --pz-neutro:#EEF4F8; --pz-linea:#DCE6ED;
  /* Diseño de un solo mundo visual: la alternancia navy y claro ES el diseño,
     asi que el tema del sistema no lo invierte. Todo va pintado explicito. */
  --pz-tinta:#14163D; --pz-tinta-2:#54697A;
  --pz-sombra:0 18px 50px rgba(20,22,61,.12); --pz-sombra-alta:0 26px 70px rgba(20,22,61,.20);
  --pz-r:20px; --pz-max:1180px;
  --pz-cian-vivo:#3DD9FF;
  --pz-boton:#14163D; --pz-boton-tinta:#FFFFFF; --pz-destacado:#14163D;
  /* Las paradas del degradado se eligieron midiendo contraste: con texto navy
     encima, la mas baja da 5.53 y todas pasan. El violeta se queda solo en el
     fondo, donde no lleva texto, porque con navy daba 3.95. */
  --pz-grad:linear-gradient(110deg,#FF7A2F,#FF4D8D,#FFC43D,#00CCFF,#FF7A2F);
  --pz-display:'Outfit','Avenir Next',system-ui,sans-serif;
  --pz-cuerpo:'Nunito Sans','Avenir Next',system-ui,sans-serif;
}

/* Tipografia y elementos, SOLO dentro de la portada nueva. Sueltos afectarian a
   las 40 paginas del sitio: `p{margin:0}` borraria la separacion de parrafos en
   todas, y `--r` cambiaria el radio de cada tarjeta. */
.pz-home{box-sizing:border-box;font-family:var(--pz-cuerpo);font-size:17px;line-height:1.65;
  color:#14163D;background:#FFFFFF;-webkit-font-smoothing:antialiased}
.pz-home *{box-sizing:border-box}
.pz-home img{max-width:100%;height:auto;display:block}
/* El color va explicito: el sitio tiene `h1,h2,h3{color:var(--ink)}` suelto y una
   regla directa le gana a cualquier color heredado, asi que el titular del hero
   salia navy sobre navy. */
.pz-home h1,.pz-home h2,.pz-home h3{font-family:var(--pz-display);font-weight:700;
  line-height:1.08;text-wrap:balance;margin:0;color:var(--pz-tinta)}
.pz-hero h1,.pz-hero h2,.pz-hero h3,
.pz-cierre h1,.pz-cierre h2,.pz-cierre h3,
.pz-banda-osc h1,.pz-banda-osc h2,.pz-banda-osc h3{color:#fff}
.pz-banda-nar h1,.pz-banda-nar h2{color:#14163D}
.pz-puerta.pz-destaca h3{color:#fff}
.pz-home h1{font-size:clamp(2.4rem,5.2vw,4.1rem);letter-spacing:-.02em}
.pz-home h2{font-size:clamp(1.8rem,3.4vw,2.7rem);letter-spacing:-.015em}
.pz-home h3{font-size:1.16rem;letter-spacing:-.01em}
.pz-home p{margin:0}
/* Sin text-decoration el navegador subraya cada <a>, y las tarjetas de curso y
   de giro son enlaces completos. El `color:inherit` que habia aqui le ganaba en
   especificidad al color de los botones (una clase mas un elemento contra una
   sola clase), asi que el texto del boton heredaba el de la banda y desaparecia:
   el color lo pone cada componente. */
.pz-home a{text-decoration:none}
.pz-curso,.pz-giro{color:var(--pz-tinta)}

.pz-env{max-width:var(--pz-max);margin:0 auto;padding:0 26px}
.pz-rotulo{font-family:var(--pz-cuerpo);font-size:.71rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;color:var(--pz-cian-ink)}
.pz-sec{padding:86px 0;position:relative}
/* Encabezado de seccion centrado. El parrafo lleva su propio ancho maximo y
   margenes automaticos: centrar solo el texto deja la caja ocupando todo el
   ancho y la ultima linea se ve suelta. */
.pz-cabeza{text-align:center;max-width:70ch;margin:0 auto 6px}
.pz-cabeza p{margin:14px auto 0;max-width:62ch}
.pz-cabeza h2{margin:10px 0 0}
/* Bandas alternadas. Cada una redefine sus propias variables, asi que tarjetas,
   lineas y textos se adaptan sin escribir una regla por componente. */
.pz-banda-osc{--pz-lienzo:#1A1E4E;--pz-linea:#333A7D;--pz-tinta:#FFFFFF;--pz-tinta-2:#B9C6DC;
  --pz-cian-ink:var(--pz-cian-vivo);--pz-boton:var(--pz-cian-vivo);--pz-boton-tinta:#14163D;
  --pz-destacado:var(--pz-cian-vivo);
  background:var(--pz-navy);color:#fff}
.pz-banda-clara{--pz-lienzo:#FFFFFF;--pz-linea:#DCE6ED;--pz-tinta:#14163D;--pz-tinta-2:#54697A;
  --pz-cian-ink:#0089B3;--pz-boton:#14163D;--pz-boton-tinta:#FFFFFF;
  --pz-destacado:#14163D;
  background:#EEF4F8;color:#14163D}
.pz-banda-clara.pz-blanca{background:#FFFFFF}
.pz-banda-osc h2,.pz-banda-osc h3{color:#fff}
.pz-banda-osc .pz-rotulo{color:var(--pz-cian-vivo)}

/* La malla de color, al estilo de la referencia de Gato Fusion pero en la paleta
   de Diginova: manchas grandes desenfocadas que se mueven muy despacio. Van en
   una capa aparte para que el texto nunca pierda contraste. */
.pz-malla{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.pz-malla span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;
  animation:pz-vaga 26s ease-in-out infinite;
  translate:calc(var(--pz-mx,0) * var(--pz-f,1) * 26px) calc(var(--pz-my,0) * var(--pz-f,1) * 26px);
  transition:translate .9s cubic-bezier(.2,.7,.3,1)}
.pz-malla .pz-m1{--pz-f:1;width:46vw;height:46vw;background:#00CCFF;top:-16%;left:-8%}
.pz-malla .pz-m2{--pz-f:-1.4;width:38vw;height:38vw;background:#FF7A2F;bottom:-20%;right:-6%;animation-delay:-7s}
.pz-malla .pz-m3{--pz-f:2;width:34vw;height:34vw;background:#7B5BFF;top:24%;right:26%;animation-delay:-14s;opacity:.42}
.pz-malla .pz-m4{--pz-f:-2.4;width:28vw;height:28vw;background:#FF4D8D;bottom:6%;left:24%;animation-delay:-19s;opacity:.38}
@keyframes pz-vaga{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(5%,-6%,0) scale(1.12)}
  66%{transform:translate3d(-4%,5%,0) scale(.94)}
}
.pz-sobre-malla{position:relative;z-index:1}
.pz-cifra{font-family:var(--pz-display);font-variant-numeric:tabular-nums;font-weight:800}

/* El motivo de toda la pagina es la diagonal de la N del logotipo Diginova. */
.pz-diag-abajo{clip-path:polygon(0 0,100% 0,100% calc(100% - 62px),0 100%)}
.pz-diag-arriba{clip-path:polygon(0 62px,100% 0,100% 100%,0 100%);margin-top:-62px}

.pz-btn{display:inline-flex;align-items:center;gap:.55em;border:0;cursor:pointer;
  font-family:var(--pz-display);font-weight:700;font-size:1rem;text-decoration:none;
  padding:.95em 1.7em;border-radius:999px;transition:transform .16s,box-shadow .16s}
.pz-btn-naranja{background:var(--pz-grad);background-size:320% 100%;color:#14163D;
  box-shadow:0 12px 30px rgba(255,122,47,.38);animation:pz-pz-corre-grad 11s linear infinite}
@keyframes pz-pz-corre-grad{to{background-position:-320% 0}}
/* El de entrar va en azul vivo, no en el degradado: es el unico boton que la
   persona busca sin que se lo señalen y conviene que siempre se vea igual. */
/* .pz-top nav a fija el color del menu y le gana a .pz-btn-azul por especificidad:
   el texto del boton salia lavado sobre el cian. Se declara desde el mismo
   contexto para que gane, y sin resplandor, que emborronaba la pastilla. */
.pz-btn-azul,.pz-top nav a.pz-btn-azul{background:var(--pz-cian-vivo);color:#14163D;box-shadow:none}
.pz-btn-azul:hover,.pz-top nav a.pz-btn-azul:hover{background:#5BE0FF;color:#14163D;transform:translateY(-1px)}
.pz-btn-naranja:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(255,122,47,.5)}
.pz-btn-linea{background:transparent;color:#fff;border:1.6px solid rgba(255,255,255,.45)}
.pz-btn-linea:hover{border-color:var(--pz-cian);color:var(--pz-cian)}
.pz-btn-navy{background:var(--pz-boton);color:var(--pz-boton-tinta);box-shadow:0 8px 22px rgba(20,22,61,.18)}
.pz-btn-navy:hover{transform:translateY(-2px)}

/* ---------- Hero ---------- */
.pz-hero{position:relative;background:var(--pz-navy);color:#fff;overflow:hidden;padding:74px 0 118px}
.pz-hero .pz-rotulo{color:var(--pz-cian-vivo)}
.pz-hero-figs{position:absolute;inset:0;pointer-events:none}
.pz-hero-figs .pz-pts{position:absolute;width:200px;height:200px;opacity:.5;
  background-image:radial-gradient(var(--pz-cian) 1.6px,transparent 1.6px);background-size:17px 17px}
.pz-hero-figs .pz-p1{top:52px;left:-26px}
.pz-hero-figs .pz-p2{bottom:96px;right:44%}
.pz-hero-figs .pz-tri{position:absolute;width:0;height:0;border-style:solid}
.pz-hero-figs .pz-t1{top:118px;right:9%;border-width:0 0 74px 74px;border-color:transparent transparent var(--pz-cian-vivo) transparent;opacity:.9}
.pz-hero-figs .pz-t2{bottom:150px;left:8%;border-width:46px 46px 0 0;border-color:var(--pz-cian) transparent transparent transparent;opacity:.5}
.pz-hero-figs .pz-cir{position:absolute;border-radius:50%;border:2px solid rgba(0,204,255,.35)}
.pz-hero-figs .pz-c1{width:210px;height:210px;top:-70px;right:26%}
.pz-hero-env{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center}
.pz-hero h1{margin:16px 0 18px}
.pz-hero h1 em{font-style:normal;color:var(--pz-cian)}
.pz-hero .pz-bajada{color:#C6D3E6;font-size:1.12rem;max-width:52ch}
.pz-hero-acc{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0 22px}
.pz-hero-conf{display:flex;align-items:center;gap:14px;color:#AFC0D8;font-size:.92rem;flex-wrap:wrap}
.pz-hero-conf b{color:#fff}
.pz-estrellitas{color:#FFC43D;letter-spacing:2px}
.pz-hero-foto{position:relative;justify-self:center;width:100%;max-width:400px}
.pz-hero-foto .pz-marco{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:4/5;
  background:linear-gradient(150deg,var(--pz-cian),var(--pz-navy-3));box-shadow:var(--pz-sombra-alta)}
.pz-hero-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.pz-pill-flota{position:absolute;background:#fff;color:var(--pz-navy);border-radius:14px;
  padding:.6em .95em;font-size:.84rem;font-weight:700;box-shadow:0 16px 34px rgba(0,0,0,.28);
  display:flex;align-items:center;gap:8px;white-space:nowrap}
.pz-pf1{top:12%;left:-34px}
.pz-pf2{bottom:16%;right:-30px}
.pz-pf3{bottom:-14px;left:16%;background:var(--pz-cian-vivo);color:#14163D}
/* Verde de disponible, no rojo. El rojo es la convencion de "en vivo" y la
   pastilla ya no dice eso: dice presencial en Leon, y ahi el rojo se lee como
   algo apagado o cerrado. */
.pz-punto-vivo{width:9px;height:9px;border-radius:50%;background:#16A34A}
@media(max-width:900px){
  .pz-hero-figs{display:none}
  .pz-hero{padding:54px 0 92px}
  .pz-hero-env{grid-template-columns:1fr;gap:36px}
  .pz-hero-foto{max-width:300px}
  .pz-pf1{left:8px}.pz-pf2{right:8px}
}

/* ---------- Cifras montadas ---------- */
.pz-cifras-mont{margin-top:-64px;position:relative;z-index:5}
.pz-cifras-caja{background:#fff;border:1px solid var(--pz-linea);border-radius:var(--pz-r);
  box-shadow:0 10px 34px rgba(20,22,61,.13);display:grid;grid-template-columns:repeat(4,1fr)}
.pz-cifras-caja div{padding:26px 22px;display:flex;flex-direction:column;gap:2px;
  align-items:center;text-align:center;border-right:1px solid var(--pz-linea)}
.pz-cifras-caja div:last-child{border-right:0}
.pz-cifras-caja .pz-n{font-size:1.95rem;color:#14163D;line-height:1.1}
.pz-cifras-caja .pz-l{font-size:.86rem;color:var(--pz-tinta-2)}
@media(max-width:820px){
  .pz-cifras-caja{grid-template-columns:repeat(2,1fr)}
  .pz-cifras-caja div:nth-child(2){border-right:0}
  .pz-cifras-caja div:nth-child(-n+2){border-bottom:1px solid var(--pz-linea)}
}

/* ---------- Tira de logotipos ---------- */
.pz-tira{margin-bottom:52px}
.pz-tira-caja{display:flex;align-items:center;gap:26px;background:#fff;border:1px solid var(--pz-linea);
  border-radius:999px;padding:14px 26px;overflow:hidden;
  /* Pastilla blanca sobre banda gris: se separa con un borde fino, no con una
     sombra grande. Una sombra ancha entre dos claros deja una mancha con canto
     recto en cuanto la seccion termina. */
  border:1px solid var(--pz-linea);box-shadow:0 3px 14px rgba(20,22,61,.06)}
/* Los logos van sobre blanco SIEMPRE: la mitad de las marcas son de color oscuro
   (Meta, TikTok, ChatGPT) y sobre el navy del tema oscuro desaparecian. */
.pz-tira-lbl{flex:none;max-width:185px;font-size:.78rem;font-weight:700;line-height:1.35;color:#54697A}
.pz-tira-viaje{flex:1;min-width:0;overflow:hidden;display:flex;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.pz-tira-pista{flex:none;display:flex;align-items:center;gap:40px;list-style:none;margin:0;padding:0 20px;
  animation:pz-corre 38s linear infinite}
.pz-tira-pista li{flex:none;display:grid;place-items:center}
@keyframes pz-corre{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media(max-width:700px){.pz-tira-lbl{display:none}}

/* ---------- Giros ---------- */
.pz-giros-rej{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
.pz-giro{background:var(--pz-lienzo);border:1px solid var(--pz-linea);border-radius:16px;padding:22px 20px;
  text-decoration:none;display:flex;flex-direction:column;gap:8px;transition:transform .18s,box-shadow .18s,border-color .18s}
.pz-giro:hover{transform:translateY(-4px);box-shadow:var(--pz-sombra);border-color:var(--pz-cian)}
.pz-giro-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:rgba(0,204,255,.12);color:var(--pz-cian-ink)}
.pz-giro b{font-family:var(--pz-display);font-size:1.02rem}
.pz-giro-n{font-size:.82rem;color:var(--pz-tinta-2)}
/* Las tarjetas se van turnando entre los 28 giros. El cambio es un desvanecido
   corto con un desplazamiento minimo: si se mueven mucho, la seccion marea y
   deja de poder leerse. Se detiene al pasar el cursor por encima. */
.pz-giro{transition:transform .18s,box-shadow .18s,border-color .18s,opacity .34s}
.pz-giro.pz-cambia{opacity:0;transform:translateY(8px)}

/* El selector de giro. La flecha NUNCA va pegada a la orilla: se sustituye la
   nativa por un chevron con su margen, y el texto lleva espacio para no meterse
   debajo. */
.pz-giro-sel-caja{display:flex;align-items:center;justify-content:center;gap:14px;
  flex-wrap:wrap;margin-top:34px}
.pz-giro-sel-caja label{font-weight:700;font-family:var(--pz-display)}
.pz-giro-sel{appearance:none;-webkit-appearance:none;min-width:300px;max-width:100%;
  font-family:var(--pz-cuerpo);font-size:1rem;font-weight:600;
  color:var(--pz-tinta);background-color:var(--pz-lienzo);
  border:1.5px solid var(--pz-linea);border-radius:999px;
  padding-top:.85em;padding-bottom:.85em;padding-left:20px;padding-right:44px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%230089B3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;cursor:pointer}
.pz-giro-sel:focus-visible{outline:3px solid var(--pz-cian-vivo);outline-offset:2px}
@media(max-width:520px){.pz-giro-sel{min-width:0;width:100%}}
@media(max-width:980px){.pz-giros-rej{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.pz-giros-rej{grid-template-columns:1fr}}

/* ---------- Cursos ---------- */
.pz-cursos-rej{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.pz-curso{background:var(--pz-lienzo);border:1px solid var(--pz-linea);border-radius:var(--pz-r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.pz-curso:hover{transform:translateY(-5px);box-shadow:var(--pz-sombra)}
.pz-curso-arte{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--pz-navy-2)}
.pz-curso-arte img{width:100%;height:100%;object-fit:cover}
.pz-curso-nivel{position:absolute;top:12px;left:12px;font-size:.66rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;padding:.35em .8em;border-radius:999px;background:#fff;color:var(--pz-navy)}
.n-intermedio{background:var(--pz-cian);color:var(--pz-navy)}
.n-avanzado{background:var(--pz-naranja);color:var(--pz-navy)}
.pz-curso-marcas{position:absolute;top:12px;right:12px;display:flex;gap:7px;background:#fff;
  padding:7px 9px;border-radius:12px;box-shadow:0 4px 12px rgba(20,22,61,.18)}
.pz-curso-marcas svg{display:block}
.pz-curso-cuerpo{padding:20px;display:flex;flex-direction:column;gap:9px;flex:1}
.pz-curso-cuerpo p{color:var(--pz-tinta-2);font-size:.93rem;flex:1}
.pz-curso-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid var(--pz-linea);padding-top:14px;margin-top:4px}
.pz-curso-horas{font-size:.82rem;font-weight:600;color:var(--pz-tinta-2)}
.pz-curso-precio{font-family:var(--pz-display);font-weight:800;font-size:1.3rem;color:var(--pz-destacado);
  font-variant-numeric:tabular-nums}
.pz-curso-precio em{font-style:normal;font-size:.72rem;color:var(--pz-tinta-2);font-weight:600}
@media(max-width:980px){.pz-cursos-rej{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.pz-cursos-rej{grid-template-columns:1fr}}

/* ---------- Banda naranja ---------- */
.pz-banda-nar{background:var(--pz-grad);background-size:320% 100%;color:#14163D;padding:52px 0;
  animation:pz-pz-corre-grad 14s linear infinite}
.pz-banda-nar .pz-env{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.pz-banda-nar h2{font-size:clamp(1.5rem,2.6vw,2.05rem);flex:1;min-width:280px}
.pz-banda-nar p{max-width:46ch;font-weight:600}

/* ---------- Bloque oscuro alternado ---------- */
.pz-alt{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.pz-alt-lista{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.pz-alt-lista li{display:flex;gap:13px;align-items:flex-start;color:var(--pz-tinta-2)}
.pz-alt-lista b{color:var(--pz-tinta);font-family:var(--pz-display)}
.pz-chk{flex:none;width:24px;height:24px;border-radius:50%;background:rgba(0,204,255,.18);
  display:grid;place-items:center;color:var(--pz-cian-ink);margin-top:2px}
.pz-alt-foto{position:relative}
.pz-alt-foto img{border-radius:var(--pz-r);box-shadow:var(--pz-sombra-alta)}
.pz-alt-foto .pz-pts2{position:absolute;width:150px;height:150px;bottom:-26px;left:-26px;opacity:.7;
  background-image:radial-gradient(var(--pz-naranja) 1.7px,transparent 1.7px);background-size:16px 16px}
@media(max-width:900px){.pz-alt{grid-template-columns:1fr;gap:34px}}

/* ---------- Reseñas ---------- */
.pz-res-cab{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.pz-res-punt{display:flex;align-items:center;gap:14px;background:var(--pz-lienzo);border:1px solid var(--pz-linea);
  border-radius:16px;padding:14px 20px}
.pz-res-punt .pz-n{font-size:2.1rem;color:var(--pz-destacado)}
.pz-res-punt small{display:block;color:var(--pz-tinta-2);font-size:.83rem}
.pz-res-rej{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:34px}
.pz-resena{margin:0;background:var(--pz-lienzo);border:1px solid var(--pz-linea);border-radius:var(--pz-r);
  padding:26px;display:flex;flex-direction:column;gap:14px}
.pz-resena blockquote{margin:0;font-size:1.01rem;color:var(--pz-tinta);flex:1}
.pz-estrellas{color:#FFC43D;font-size:1rem;letter-spacing:2px}
.pz-resena figcaption{display:flex;align-items:center;gap:12px;border-top:1px solid var(--pz-linea);padding-top:14px}
.pz-resena .pz-quien{flex:1;min-width:0}
/* El logotipo de donde viene la opinion, sobre pastilla blanca: el azul de
   Facebook sobre la tarjeta navy se perdia. */
.pz-marca-op{flex:none;width:34px;height:34px;border-radius:10px;background:#fff;
  display:grid;place-items:center}
.pz-res-fuentes{display:flex;align-items:center;gap:8px;margin-top:6px}
.pz-res-fuentes svg{display:block;background:#fff;border-radius:7px;padding:4px;box-sizing:content-box}
.pz-res-punt small{display:block;color:var(--pz-tinta-2);font-size:.83rem}
.pz-avatar{width:42px;height:42px;border-radius:50%;background:var(--pz-cian);color:var(--pz-navy);
  display:grid;place-items:center;font-family:var(--pz-display);font-weight:800;flex:none}
.pz-resena figcaption b{display:block;font-size:.95rem}

@media(max-width:820px){.pz-res-rej{grid-template-columns:1fr}}

/* ---------- Tres puertas ---------- */
.pz-puertas{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px}
.pz-puerta{border-radius:var(--pz-r);padding:30px;display:flex;flex-direction:column;gap:12px;
  border:1px solid var(--pz-linea);background:var(--pz-lienzo)}
.pz-puerta.pz-destaca{background:var(--pz-navy);color:#fff;border-color:var(--pz-navy);box-shadow:var(--pz-sombra-alta)}
.pz-puerta.pz-destaca p{color:#C6D3E6}
.pz-puerta .pz-quien{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--pz-cian-ink)}
.pz-puerta.pz-destaca .pz-quien{color:var(--pz-cian)}
.pz-puerta p{color:var(--pz-tinta-2);font-size:.95rem;flex:1}
.pz-puerta .pz-precio{font-family:var(--pz-display);font-weight:800;font-size:1.4rem;font-variant-numeric:tabular-nums}
.pz-puerta .pz-precio em{font-style:normal;font-size:.72rem;color:var(--pz-tinta-2);font-weight:600}
.pz-puerta a{margin-top:6px;align-self:flex-start;font-weight:700;text-decoration:none;color:var(--pz-cian-ink)}
.pz-puerta.pz-destaca a{color:var(--pz-cian)}
@media(max-width:1080px){.pz-puertas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.pz-puertas{grid-template-columns:1fr}}

/* ---------- Instructora ---------- */
.pz-inst{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:center}
.pz-inst-foto{position:relative;max-width:340px}
.pz-inst-foto img{border-radius:var(--pz-r);box-shadow:var(--pz-sombra-alta)}
.pz-inst-foto .pz-cuad{position:absolute;width:100%;height:100%;border:3px solid var(--pz-cian);
  border-radius:var(--pz-r);top:18px;left:18px;z-index:-1}
.pz-inst-firmas{display:flex;gap:34px;margin-top:24px;flex-wrap:wrap}
.pz-inst-firmas div{text-align:center}
.pz-inst-firmas div b{display:block;font-family:var(--pz-display);font-size:1.5rem;color:var(--pz-destacado)}
.pz-inst-firmas div span{font-size:.84rem;color:var(--pz-tinta-2)}
@media(max-width:900px){.pz-inst{grid-template-columns:1fr;gap:34px}.pz-inst-foto{max-width:280px}}

/* ---------- Preguntas ---------- */
.pz-faq{display:grid;gap:12px;margin:30px auto 0;max-width:78ch;text-align:left}
.pz-faq details{background:var(--pz-lienzo);border:1px solid var(--pz-linea);border-radius:14px;overflow:hidden}
.pz-faq summary{padding:18px 22px;cursor:pointer;font-weight:700;font-family:var(--pz-display);
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.pz-faq summary::-webkit-details-marker{display:none}
.pz-faq summary::after{content:"+";font-size:1.4rem;color:var(--pz-cian-ink);font-weight:400;line-height:1}
.pz-faq details[open] summary::after{content:"\2013"}
.pz-faq p{padding:0 22px 20px;color:var(--pz-tinta-2)}

/* ---------- Cierre ---------- */
.pz-cierre{position:relative;background:var(--pz-navy);color:#fff;padding:86px 0;overflow:hidden;text-align:center}
.pz-cierre .pz-rotulo{color:var(--pz-cian-vivo)}
.pz-cierre .pz-pts3{position:absolute;inset:0;opacity:.28;
  background-image:radial-gradient(var(--pz-cian) 1.5px,transparent 1.5px);background-size:20px 20px}
.pz-cierre .pz-env{position:relative}
.pz-cierre p{color:#C6D3E6;max-width:56ch;margin:16px auto 30px}

/* ---------- Nota de propuesta ---------- */

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}

/* En la portada nueva el encabezado va navy, para que no quede una franja clara
   encima del hero. Se detecta con :has porque la barra vive fuera de .pz-home;
   donde :has no exista, el encabezado se queda claro y el sitio sigue bien. */
body:has(.pz-home) .top{background:rgba(20,22,61,.94);border-bottom-color:rgba(255,255,255,.08)}
body:has(.pz-home) .top nav a{color:#D9E3F2}
body:has(.pz-home) .top nav a:hover{color:#3DD9FF}
body:has(.pz-home) .top .nav-drop>summary{color:#D9E3F2}
body:has(.pz-home) .top .nav-drop>summary:hover,
body:has(.pz-home) .top .nav-drop[open]>summary{color:#3DD9FF}
body:has(.pz-home) .top .brand img.logo-full{content:url("/assets/img/diginova-full-blanco.png")}
body:has(.pz-home) .top nav a.btn{background:#3DD9FF;color:#14163D;box-shadow:none}
body:has(.pz-home) .top nav a.btn:hover{background:#5BE0FF;color:#14163D}
body:has(.pz-home) .menu-movil>summary{color:#D9E3F2;border-color:rgba(255,255,255,.25)}

/* Video del hero: ocupa el marco igual que la foto. El encuadre se corre hacia
   arriba porque en un retrato la cara esta en la parte alta. */
/* El reel trae texto arriba Y abajo, asi que se muestra completo: con recorte
   se perdian los subtitulos. El marco pone el fondo detras de las franjas. */
.pz-video{width:100%;height:100%;object-fit:contain;display:block;background:#0D0F2A}
/* Arriba a la derecha: abajo a la izquierda chocaba con la pastilla de las
   lecciones. */
.pz-sonido{position:absolute;right:12px;top:12px;z-index:3;display:inline-flex;align-items:center;
  gap:7px;border:0;cursor:pointer;background:rgba(20,22,61,.82);color:#fff;
  font-family:var(--pz-cuerpo);font-size:.78rem;font-weight:700;
  padding:.5em .9em;border-radius:999px;backdrop-filter:blur(6px)}
.pz-sonido:hover{background:rgba(20,22,61,.95)}
.pz-sonido:focus-visible{outline:3px solid var(--pz-cian-vivo);outline-offset:2px}

/* El testimonial largo, junto a las opiniones escritas. */
/* El video es vertical (480x848) y sin tope crecia hasta 700 px de alto, con la
   columna de texto vacia a un lado. Se le pone tope y el bloque queda a la
   altura del contenido, no a la del video. */
.pz-testi{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;
  background:var(--pz-lienzo);border:1px solid var(--pz-linea);border-radius:var(--pz-r);
  padding:22px;margin-top:30px}
.pz-testi-video video{height:340px;max-height:46vh;width:auto;max-width:100%;
  border-radius:14px;display:block;background:#000}
.pz-testi-tx{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.pz-testi-datos{display:flex;gap:26px;flex-wrap:wrap;margin-top:4px}
.pz-testi-datos div b{display:block;font-family:var(--pz-display);font-size:1.15rem;color:var(--pz-destacado)}
.pz-testi-datos div span{font-size:.82rem;color:var(--pz-tinta-2)}
@media(max-width:820px){.pz-testi{grid-template-columns:1fr;gap:18px;justify-items:center}
  .pz-testi-video video{height:auto;width:100%;max-width:300px}
  .pz-testi-tx{align-items:center;text-align:center}}

/* Selector de idioma: texto y no banderas. Una bandera es un pais, no un idioma,
   y para el español habria que elegir entre la de España y la de Mexico. */
.idioma{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;
  color:var(--muted);letter-spacing:.04em}
.idioma a{text-decoration:none;color:inherit;padding:2px 4px;border-radius:6px}
.idioma a:hover{color:var(--teal-d)}
.idioma a.on{color:var(--navy);background:#e7eff2}
body:has(.pz-home) .idioma{color:#93a4bf}
body:has(.pz-home) .idioma a.on{color:#14163D;background:#3DD9FF}
body:has(.pz-home) .idioma a:hover{color:#3DD9FF}
@media(max-width:700px){.idioma{display:none}}

/* El pie traía 40 px de margen arriba y en la portada nueva eso dejaba una
   franja blanca entre el cierre y el pie. Aquí van pegados. */
body:has(.pz-home) .foot{margin-top:0}

/* El globo del asesor vive fijo abajo a la derecha y se montaba encima de los
   enlaces legales del pie. Se le reserva el alto en TODAS las páginas: mover el
   globo no sirve, porque ahí es donde la gente lo busca. */
.foot{padding-bottom:96px}
@media(max-width:760px){.foot{padding-bottom:132px}}

/* Cabecera del catalogo y del indice de giros, centrada. */
.cat-cabeza{text-align:center}
.cat-cabeza .lead{margin-left:auto;margin-right:auto;max-width:60ch}
.cat-cabeza .cat-filtros{justify-content:center}

/* Tarjeta de giro en el indice. */
.giro-tarjeta{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.giro-tarjeta:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--teal)}
.giro-tarjeta-ir{margin-top:12px;font-size:.86rem;font-weight:700;color:var(--teal-d);
  display:inline-flex;align-items:center;gap:6px}

/* ---- Elegir vía en la ficha de curso ----
   Radios ocultos y paneles que se muestran con :checked. Sin JavaScript: si el
   script falla, el selector sigue funcionando, que es lo que decide la compra. */
.vias-elige{margin:4px 0 0}
.via-radio{position:absolute;opacity:0;pointer-events:none}
.via-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.via-tabs:only-child,.vias-elige .via-tabs:has(label:only-child){grid-template-columns:1fr}
.via-tab{display:flex;flex-direction:column;gap:2px;cursor:pointer;
  border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--paper);
  transition:border-color .16s,background .16s,box-shadow .16s}
.via-tab:hover{border-color:var(--teal)}
.via-lbl{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.via-precio{font-size:1.5rem;font-weight:700;color:var(--navy);line-height:1.15;font-variant-numeric:tabular-nums}
.via-nota{font-size:.76rem;color:var(--muted)}
#via-linea:checked ~ .via-tabs label[for="via-linea"],
#via-pres:checked ~ .via-tabs label[for="via-pres"]{
  border-color:var(--navy);background:var(--navy);box-shadow:0 10px 26px rgba(20,22,61,.2)}
#via-linea:checked ~ .via-tabs label[for="via-linea"] .via-precio,
#via-pres:checked ~ .via-tabs label[for="via-pres"] .via-precio{color:#fff}
#via-linea:checked ~ .via-tabs label[for="via-linea"] .via-lbl,
#via-pres:checked ~ .via-tabs label[for="via-pres"] .via-lbl{color:var(--teal-soft)}
#via-linea:checked ~ .via-tabs label[for="via-linea"] .via-nota,
#via-pres:checked ~ .via-tabs label[for="via-pres"] .via-nota{color:#c9dbe6}
.via-radio:focus-visible ~ .via-tabs label{outline:3px solid var(--teal);outline-offset:2px}
.via-panel{display:none;margin-top:14px}
#via-linea:checked ~ .via-panel-linea{display:block}
#via-pres:checked ~ .via-panel-pres{display:block}
.via-pie{font-size:.82rem;color:var(--muted);line-height:1.55;margin:0 0 12px}

/* Contador del grupo presencial: cuántos faltan para que abra. */
.grupo-meta{background:#eef6f8;border:1px solid rgba(100,189,195,.35);border-radius:14px;
  padding:14px 16px;margin-bottom:14px}
.grupo-cuenta{font-size:.9rem;color:var(--ink)}
.grupo-cuenta b{font-size:1.35rem;font-family:var(--font)}
.grupo-cuenta span{display:block;font-size:.8rem;color:var(--muted);margin-top:2px}
.grupo-barra{height:7px;border-radius:99px;background:#d6e6ea;margin-top:10px;overflow:hidden}
.grupo-barra span{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--teal),var(--cyan));transition:width .4s}
@media(max-width:400px){.via-tabs{grid-template-columns:1fr}}

/* Lo que hay que tener para tomar el curso. Vive dentro del selector de vía
   porque la lista cambia con la vía: el presencial pide equipo y accesos. */
.necesitas{border:1px solid var(--line);border-radius:14px;padding:13px 15px;margin:0 0 13px;
  background:#f7fafb}
.necesitas-pres{background:#fff6ef;border-color:rgba(240,138,53,.32)}
.necesitas-lbl{display:flex;align-items:center;gap:7px;font-weight:700;font-size:.78rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.necesitas-pres .necesitas-lbl{color:#9a4c08}
.necesitas-lbl svg{flex:0 0 auto}
.necesitas ul{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.necesitas li{position:relative;padding-left:18px;font-size:.85rem;line-height:1.5;color:var(--ink)}
.necesitas li::before{content:"";position:absolute;left:3px;top:.55em;width:6px;height:6px;
  border-radius:50%;background:var(--teal)}
.necesitas-pres li::before{background:#f08a35}

/* Casilla de confirmación: sin ella no se avanza al pago ni al registro. */
.confirmo{display:flex;gap:9px;align-items:flex-start;font-size:.84rem;line-height:1.5;
  color:var(--ink);cursor:pointer;margin:2px 0 10px}
.confirmo input{width:auto;flex:0 0 auto;margin-top:.18em;accent-color:var(--teal)}

/* Requisito previo, debajo de "¿Para quién es?". */
.req-previo{display:flex;gap:9px;align-items:flex-start;margin:14px 0 0;padding-top:13px;
  border-top:1px solid var(--line);font-size:.92rem;line-height:1.55;color:var(--muted)}
.req-previo b{color:var(--ink)}
.req-previo svg{flex:0 0 auto;margin-top:.22em;color:var(--teal-d)}


/* Preguntas de respuesta múltiple: casilla cuadrada, ayuda bajo el enunciado y
   botón propio, porque al marcar ya no se puede avanzar solo. */
.quiz-ayuda{flex-basis:100%;margin-top:6px;font-size:.9rem;color:var(--muted)}
.quiz-op-multi .quiz-check{border-radius:7px}
.quiz-pie{gap:10px}
.js .quiz-paso.on .quiz-pie{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}
.js .quiz-paso[data-paso="0"] .quiz-pie{display:none}
[data-quiz-sigue]:disabled{opacity:.45;cursor:not-allowed}

/* En la ruta: lo que sabe hacer al terminar cada curso, y con qué herramientas. */
.ruta-logras{margin-top:14px;padding:14px 16px;border-radius:14px;
  background:rgba(100,189,195,.1);border:1px solid rgba(100,189,195,.28)}
.ruta-logras .eyebrow{color:var(--teal-d)}
.ruta-logras ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.ruta-logras li{display:flex;gap:9px;align-items:flex-start;font-size:.92rem;line-height:1.45;color:var(--ink)}
.ruta-logras li svg{flex:none;margin-top:.28em;color:var(--teal-d)}
.ruta-marcas{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ruta-marcas span{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:99px;
  background:var(--paper);border:1px solid var(--line)}
.ruta-marcas b{font-size:.8rem;font-weight:600;color:var(--ink);
  text-transform:none;letter-spacing:0}


/* El logotipo de marca va SIEMPRE sobre blanco, también marcado: el disco teñido
   de cian se lleva por delante el color de Instagram o de WhatsApp y deja de
   reconocerse. Va al final de la hoja porque .quiz-op.on .op-ico empata en
   especificidad y gana el que se declara después. */
.quiz-op .op-ico-marca,
.quiz-op:hover .op-ico-marca,
.quiz-op.on .op-ico-marca{background:#fff}
.quiz-op .op-ico-marca{border-color:var(--line)}
.quiz-op:hover .op-ico-marca{border-color:var(--teal)}
.quiz-op.on .op-ico-marca{border-color:var(--teal-d)}