/* site.css — componentes. Depende de tokens.css. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:var(--fs-cuerpo);line-height:var(--lh-cuerpo);
  color:var(--tinta);background:var(--blanco)}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:var(--lh-titulo);color:var(--verde)}
h1{font-size:var(--fs-h1);font-weight:800;line-height:var(--lh-titular)}
h2{font-size:var(--fs-h2);font-weight:700}
h3{font-size:var(--fs-h3);font-weight:700;letter-spacing:0}
p{margin:0 0 var(--s-4)}
a{color:var(--naranja-texto)}
a:hover{color:var(--verde)}
:focus-visible{outline:3px solid var(--naranja-texto);outline-offset:2px;border-radius:2px}
.sobre-verde :focus-visible{outline-color:var(--naranja)}

.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 var(--s-5)}
.antetitulo{font-size:var(--fs-antetitulo);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--verde-medio);margin-bottom:var(--s-4)}
.sobre-verde .antetitulo{color:var(--naranja)}
.saltar{position:absolute;left:-9999px}
.saltar:focus{left:var(--s-4);top:var(--s-4);z-index:99;background:var(--blanco);
  padding:var(--s-3) var(--s-4);border-radius:var(--r-campo)}

/* --- Cabecera ------------------------------------------------ */
.barra-superior{background:var(--verde);color:var(--sobre-verde);font-size:var(--fs-nota)}
.barra-superior .contenedor{display:flex;justify-content:space-between;align-items:center;
  min-height:40px;gap:var(--s-4);flex-wrap:wrap}
.barra-superior strong{color:var(--naranja);font-weight:600}
.cabecera{background:var(--blanco);border-bottom:1px solid var(--borde);position:sticky;top:0;z-index:20}
.cabecera .contenedor{display:flex;align-items:center;justify-content:space-between;
  min-height:80px;gap:var(--s-5)}
.cabecera .logo img{width:260px}
.nav{display:flex;align-items:center;gap:var(--s-5)}
.nav a{font-size:var(--fs-ui);font-weight:600;color:var(--gris);text-decoration:none;
  padding:var(--s-2) 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--verde)}
.nav a.activo{color:var(--verde);font-weight:700;border-bottom-color:var(--naranja)}
.menu-btn{display:none;font:inherit;font-weight:600;color:var(--verde);background:none;
  border:2px solid var(--verde);border-radius:var(--r-pill);padding:10px 18px;cursor:pointer}

/* --- Botones -------------------------------------------------- */
.btn{display:inline-block;font:inherit;font-size:1rem;font-weight:600;text-decoration:none;
  border-radius:var(--r-pill);padding:15px 28px;border:2px solid transparent;cursor:pointer;
  transition:background-color .15s ease,color .15s ease}
.btn--primario{background:var(--verde);color:var(--marfil);border-color:var(--verde)}
.btn--primario:hover{background:var(--verde-medio);border-color:var(--verde-medio);color:var(--marfil)}
.btn--primario:active{background:var(--verde-oscuro)}
.btn--secundario{background:transparent;color:var(--verde);border-color:var(--verde)}
.btn--secundario:hover{background:var(--verde);color:var(--marfil)}
.btn--acento{background:var(--naranja);color:var(--tinta);border-color:var(--naranja);font-weight:700}
.btn--acento:hover{background:#E07E00;color:var(--tinta)}
.btn--claro{background:transparent;color:var(--blanco);border-color:#6E8C78}
.btn--claro:hover{background:var(--blanco);color:var(--verde)}
.btn[disabled]{background:var(--inactivo-bg);border-color:var(--inactivo-bg);color:var(--gris-claro);cursor:not-allowed}
.btn-chico{padding:11px 20px;font-size:var(--fs-ui)}
.enlace{font-size:var(--fs-ui);font-weight:600;color:var(--naranja-texto);
  text-decoration:underline;text-underline-offset:4px}

/* --- Bloques verdes ------------------------------------------ */
.sobre-verde{background:var(--verde);color:var(--sobre-verde)}
.sobre-verde h1,.sobre-verde h2,.sobre-verde h3{color:var(--blanco)}

.hero{background:var(--verde);position:relative;overflow:hidden}
.hero .contenedor{display:flex;align-items:center;gap:var(--s-7);min-height:420px;padding-block:var(--s-7)}
.hero-texto{flex:1 1 560px;max-width:600px}
.hero-foto{flex:0 0 420px;align-self:stretch;min-height:300px;background:var(--verde-panel);
  display:flex;align-items:center;justify-content:center;color:#4E7B5E;
  font-size:var(--fs-nota);font-weight:500;text-align:center;border-radius:var(--r-tarjeta)}
.hero h1{margin-bottom:var(--s-4)}
.hero p{font-size:1.1875rem;color:var(--sobre-verde);margin-bottom:var(--s-5)}

.hero-pagina{background:var(--verde);padding:var(--s-7) 0}
.hero-pagina h1{max-width:820px;margin-bottom:var(--s-4)}
.hero-pagina p{font-size:1.1875rem;color:var(--sobre-verde);max-width:720px;margin:0}

/* --- Secciones ------------------------------------------------ */
.seccion{padding:var(--s-7) 0 0}
.seccion:last-of-type{padding-bottom:var(--s-7)}
.bajada{font-size:1.125rem;font-weight:300;color:var(--gris);max-width:700px;margin-bottom:var(--s-5)}
.seccion h2+.bajada{margin-top:var(--s-2)}
.titulo-fila{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s-4);margin-bottom:var(--s-5);flex-wrap:wrap}

.grid{display:grid;gap:var(--s-5)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.tarjeta{background:var(--blanco);border:1px solid var(--borde);
  border-radius:var(--r-tarjeta);padding:var(--s-5)}
.tarjeta h3{margin-bottom:var(--s-3)}
.tarjeta p:last-child{margin-bottom:0}
.tarjeta p{font-size:var(--fs-ui);color:var(--gris)}

.unidad{border:1px solid var(--borde);border-radius:var(--r-tarjeta);overflow:hidden;
  display:flex;flex-direction:column}
.unidad .cinta-color{height:8px;background:var(--verde)}
.unidad--medio .cinta-color{background:var(--verde-medio)}
.unidad--acento .cinta-color{background:var(--naranja-texto)}
.unidad .cuerpo{padding:var(--s-5);display:flex;flex-direction:column;flex:1}
.unidad .cuerpo p{flex:1;font-size:1rem;color:var(--gris)}
.unidad ul{margin:0 0 var(--s-4);padding:0;list-style:none;font-size:var(--fs-nota);line-height:1.9}

.lista-check{display:grid;gap:var(--s-4) var(--s-7);padding:0;margin:0;list-style:none}
.lista-check li{display:flex;gap:var(--s-3);align-items:flex-start;font-size:1rem}
.lista-check svg{flex:0 0 21px;margin-top:3px;stroke:var(--verde-medio)}
.cita{font-size:1.1875rem;font-weight:500;font-style:italic;color:var(--verde-medio);
  line-height:var(--lh-destacado);margin-top:var(--s-5)}

.panel{background:var(--marfil);border-radius:var(--r-tarjeta);padding:var(--s-6)}
.panel--verde{background:var(--verde-suave)}
.cinta{background:var(--marfil);border-radius:var(--r-tarjeta);padding:var(--s-6);
  display:flex;gap:var(--s-6);align-items:center;flex-wrap:wrap;margin-top:var(--s-7)}
.cinta div{flex:1 1 420px}
.cinta-acciones{display:flex;gap:var(--s-3);flex-wrap:wrap}
.cinta h3{font-size:1.625rem;margin-bottom:var(--s-2)}
.cinta p{margin:0;color:var(--gris)}

.chip{display:inline-block;font-size:var(--fs-ui);font-weight:500;color:var(--verde);
  background:var(--verde-suave);border-radius:var(--r-pill);padding:9px 16px}
.etiqueta{display:inline-block;font-size:.6875rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--marfil);background:var(--verde-medio);
  border-radius:var(--r-pill);padding:4px 10px}
.etiqueta--destacada{background:var(--naranja);color:var(--tinta)}
.fecha{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-claro)}

/* --- Cursos y exámenes ---------------------------------------- */
.curso{display:flex;gap:var(--s-6);padding:var(--s-6) 0;border-top:2px solid var(--verde);flex-wrap:wrap}
.curso .info{flex:1 1 460px}
.curso .datos{flex:1 1 320px}
.curso h3{font-size:1.75rem;margin-bottom:var(--s-3)}
.fila{display:flex;justify-content:space-between;gap:var(--s-4);
  padding:11px 0;border-top:1px solid var(--borde)}
.fila dt{font-size:var(--fs-ui);font-weight:500;color:var(--gris)}
.fila dd{margin:0;font-size:var(--fs-ui)}
.examen{display:grid;grid-template-columns:280px 110px 1fr;gap:var(--s-5);align-items:center;
  padding:15px 0;border-top:1px solid var(--borde)}
.examen .nombre{font-size:1.125rem;font-weight:600;color:var(--verde)}
.examen .nivel{font-size:var(--fs-nota);font-weight:600;color:var(--marfil);
  background:var(--verde-medio);border-radius:var(--r-pill);padding:5px 13px;text-align:center}
.examen .nota{font-size:var(--fs-ui);color:var(--gris)}

/* --- Novedades ------------------------------------------------ */
.marcador{background:var(--verde);color:#4E7B5E;display:flex;align-items:center;
  justify-content:center;font-size:.75rem;font-weight:500;text-align:center;padding:var(--s-4)}
.novedad{display:block;text-decoration:none;background:var(--blanco);border:1px solid var(--borde);
  border-radius:var(--r-tarjeta);overflow:hidden;color:inherit}
.novedad:hover{border-color:var(--verde-medio)}
.novedad .marcador{height:150px}
.novedad .cuerpo{padding:var(--s-5)}
.novedad .meta{display:flex;gap:10px;align-items:center;margin-bottom:var(--s-2);flex-wrap:wrap}
.novedad h3{font-size:1.1875rem;line-height:1.28;margin-bottom:var(--s-2)}
.novedad p{font-size:var(--fs-ui);color:var(--gris);margin:0}
.destacada{display:flex;gap:var(--s-6);background:var(--marfil);border-radius:var(--r-tarjeta);
  overflow:hidden;text-decoration:none;color:inherit;margin-bottom:var(--s-5);flex-wrap:wrap}
.destacada .marcador{flex:0 0 440px;min-height:280px}
.destacada .cuerpo{flex:1 1 380px;padding:var(--s-6) var(--s-6) var(--s-6) 0;
  display:flex;flex-direction:column;justify-content:center}
.destacada h2{font-size:2rem;margin-bottom:var(--s-3)}
.filtros{display:flex;gap:10px;margin-bottom:var(--s-6);flex-wrap:wrap}
.filtro{font:inherit;font-size:var(--fs-ui);font-weight:600;color:var(--verde);background:none;
  border:2px solid var(--verde);border-radius:var(--r-pill);padding:9px 20px;cursor:pointer}
.filtro[aria-current="true"]{background:var(--verde);color:var(--marfil)}
.paginacion{display:flex;gap:var(--s-2);justify-content:center;margin-top:var(--s-6)}
.paginacion a{display:flex;align-items:center;justify-content:center;min-width:42px;height:42px;
  padding:0 var(--s-4);font-size:var(--fs-ui);font-weight:600;color:var(--verde);
  text-decoration:none;border:1px solid var(--borde-fuerte);border-radius:var(--r-campo)}
.paginacion a[aria-current="page"]{background:var(--verde);color:var(--marfil);border-color:var(--verde);font-weight:700}
.migas{font-size:var(--fs-nota);color:var(--gris-claro);padding-top:var(--s-5)}
.migas a{color:var(--gris-claro);text-decoration:none}
.migas a:hover{color:var(--verde);text-decoration:underline}
.articulo{max-width:900px}
.articulo .bajada-nota{font-size:1.3125rem;font-weight:500;line-height:var(--lh-destacado);color:var(--tinta)}
.articulo .cuerpo-nota p{font-size:1.125rem;line-height:1.65}
.articulo blockquote{margin:0 0 var(--s-5);border-left:3px solid var(--naranja-texto);
  padding:var(--s-1) 0 var(--s-1) var(--s-5)}
.articulo blockquote p{font-size:1.25rem;font-weight:500;font-style:italic;
  color:var(--verde);line-height:var(--lh-destacado);margin:0}
.compartir{background:var(--marfil);border-radius:var(--r-tarjeta);padding:var(--s-5)}
.compartir .btn{display:block;text-align:center;margin-bottom:10px}
.compartir .url{font-size:var(--fs-nota);color:var(--gris-claro);word-break:break-all;margin:var(--s-4) 0 0}

/* --- Formularios ---------------------------------------------- */
.campo{margin-bottom:var(--s-4)}
.campo label{display:block;font-size:var(--fs-antetitulo);font-weight:600;
  color:var(--gris);margin-bottom:6px}
.campo input,.campo select,.campo textarea{font:inherit;font-size:1rem;width:100%;
  padding:13px 14px;border:1px solid var(--gris-claro);border-radius:var(--r-campo);
  background:var(--blanco);color:var(--tinta)}
.campo textarea{resize:vertical;min-height:130px}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--verde);border-width:2px;padding:12px 13px}
.sobre-verde .campo label{color:#A9BCAE}
.sobre-verde .campo input{background:var(--verde-panel);border-color:#4E7B5E;color:var(--blanco)}
.fila-campos{display:flex;gap:var(--s-4);flex-wrap:wrap}
.fila-campos .campo{flex:1 1 220px}
.aviso{font-size:var(--fs-nota);font-weight:300;color:var(--gris-claro);line-height:1.5}

/* --- Pie ------------------------------------------------------ */
.pie{background:var(--verde);color:var(--sobre-verde);padding:var(--s-7) 0 var(--s-5);margin-top:var(--s-7)}
.pie-grid{display:flex;gap:var(--s-7);flex-wrap:wrap;margin-bottom:var(--s-6)}
.pie-marca{flex:0 0 280px}
.pie-marca img{width:250px;margin-bottom:var(--s-4)}
.pie-marca p{font-size:var(--fs-nota);font-weight:300;color:#C8D2C8;margin:0}
.pie-cols{flex:1 1 560px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5)}
.pie h2{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--naranja);margin-bottom:10px}
.pie ul{margin:0;padding:0;list-style:none;font-size:var(--fs-nota);line-height:1.9}
.pie ul a{color:#D9E2D9;text-decoration:none}
.pie ul a:hover{color:var(--blanco);text-decoration:underline}
.pie-legal{border-top:1px solid var(--verde-linea);padding-top:var(--s-4);
  font-size:.8125rem;font-weight:300;color:var(--sobre-verde-2)}
.pie-legal em{font-weight:600;font-style:italic}

/* --- Responsive ------------------------------------------------ */
@media (max-width:1000px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .examen{grid-template-columns:1fr auto;gap:var(--s-3)}
  .examen .nota{grid-column:1/-1}
  .pie-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  :root{--fs-h1:2.25rem;--fs-h2:1.75rem;--fs-titular:2.25rem}
  .nav{display:none}
  .menu-btn{display:block}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .hero .contenedor{flex-direction:column;align-items:flex-start;min-height:0}
  .hero-foto{flex:1 1 auto;width:100%;min-height:200px}
  .destacada .marcador{flex:1 1 100%;min-height:200px}
  .destacada .cuerpo{padding:var(--s-5)}
  .barra-superior .contenedor{justify-content:center;text-align:center}
  .btn{display:block;text-align:center}
  .cinta .btn{width:100%}
}

/* --- Menú en pantallas chicas --------------------------------- */
.cabecera{position:sticky}
.cabecera .contenedor{position:relative}
@media (max-width:760px){
  .nav.abierto{display:flex;flex-direction:column;align-items:stretch;gap:var(--s-3);
    position:absolute;top:100%;left:0;right:0;background:var(--blanco);
    padding:var(--s-4) 0 var(--s-5);border-bottom:1px solid var(--borde);z-index:30}
  .nav.abierto a{font-size:1.0625rem;padding:var(--s-3) 0;border-bottom:1px solid var(--borde)}
  .nav.abierto a.btn{border:2px solid var(--verde);text-align:center;margin-top:var(--s-2)}
  .hero-foto{border:1px dashed #4E7B5E;color:#8FA893}
}

/* El botón dentro del nav: `.nav a` (0,1,1) pisaba a `.btn--primario` (0,1,0)
   y dejaba el texto gris sobre verde. Se sube la especificidad a propósito. */
.nav a.btn{border-bottom-color:transparent}
.nav a.btn--primario,.nav a.btn--primario:hover{color:var(--marfil)}
.nav a.btn--primario:hover{background:var(--verde-medio)}

/* ==============================================================
   Movimiento. Todo lo de acá se apaga con prefers-reduced-motion.
   Nada de rebotes ni de aparición tardía del texto: el contenido
   se lee aunque el JavaScript no corra.
   ============================================================== */

/* --- Hero con imagen a sangre --------------------------------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--verde)}
.hero-fondo{position:absolute;inset:0;z-index:-2;display:block}
.hero-fondo img{width:100%;height:100%;object-fit:cover;object-position:center 42%;
  transform:scale(1.06);will-change:transform}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(2,46,15,.97) 0%, rgba(2,46,15,.95) 34%,
    rgba(2,46,15,.74) 62%, rgba(2,46,15,.46) 100%)}
.hero .contenedor{display:block;min-height:520px;padding-block:var(--s-8);
  align-content:center;display:grid}
.hero-texto{max-width:620px}
.hero-acciones{display:flex;gap:var(--s-3);flex-wrap:wrap}

/* --- Aparición al entrar en pantalla --------------------------- */
.revelar{opacity:0;transform:translateY(20px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,0,0,1)}
.revelar.visible{opacity:1;transform:none}
.revelar.visible .grid>*{animation:surgir .5s cubic-bezier(.2,0,0,1) backwards}
.revelar.visible .grid>*:nth-child(2){animation-delay:.07s}
.revelar.visible .grid>*:nth-child(3){animation-delay:.14s}
.revelar.visible .grid>*:nth-child(4){animation-delay:.21s}
.revelar.visible .grid>*:nth-child(5){animation-delay:.28s}
.revelar.visible .grid>*:nth-child(6){animation-delay:.35s}
@keyframes surgir{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* --- Cabecera que reacciona al scroll -------------------------- */
.cabecera{transition:box-shadow .2s ease}
.cabecera .contenedor{transition:min-height .2s ease}
.cabecera .logo img{transition:width .2s ease}
.cabecera.compacta{box-shadow:0 2px 14px rgba(2,46,15,.13)}
.cabecera.compacta .contenedor{min-height:62px}
.cabecera.compacta .logo img{width:210px}

/* --- Respuesta al puntero -------------------------------------- */
.tarjeta,.unidad,.novedad{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.tarjeta:hover,.unidad:hover,.novedad:hover{transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(2,46,15,.11)}
.unidad .cinta-color{transition:height .18s ease}
.unidad:hover .cinta-color{height:13px}
.btn{transition:background-color .15s ease,color .15s ease,transform .15s ease,border-color .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none}
.chip{transition:background-color .15s ease,color .15s ease}
.chip:hover{background:var(--verde);color:var(--marfil)}

/* --- Anclas y scroll ------------------------------------------- */
html{scroll-behavior:smooth}
:target{scroll-margin-top:110px}

@media (max-width:760px){
  .hero .contenedor{min-height:0;padding-block:var(--s-7)}
  .hero::after{background:linear-gradient(180deg,rgba(2,46,15,.94) 0%,rgba(2,46,15,.90) 60%,rgba(2,46,15,.80) 100%)}
  .hero-acciones .btn{width:100%}
}

/* --- Todo lo anterior, apagado para quien lo pide -------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .revelar,.revelar.visible .grid>*{opacity:1;transform:none;animation:none;transition:none}
  .hero-fondo img{animation:none;transform:scale(1.02)}
  .tarjeta,.unidad,.novedad,.btn{transition:none}
  .tarjeta:hover,.unidad:hover,.novedad:hover,.btn:hover{transform:none}
}
@media (prefers-reduced-motion:no-preference){
  .hero-fondo img{animation:deriva 26s ease-in-out infinite alternate}
  @keyframes deriva{
    from{transform:scale(1.06) translate3d(0,0,0)}
    to{transform:scale(1.15) translate3d(-2%,-1.5%,0)}}
}

/* ==============================================================
   Evaluación de nivel
   El resultado vive sobre Verde Windsor a propósito: el naranja
   pleno solo es legal sobre fondo oscuro (6,27:1). Sobre blanco
   da 2,39:1 y el manual lo veta incluso como elemento gráfico.
   ============================================================== */

.nv-escena{background:var(--verde);padding:var(--s-8) 0;position:relative}
.nv-escena .contenedor{display:flex;justify-content:center}
#nivel{width:100%;max-width:760px}

.nv-tarjeta{background:var(--blanco);border-radius:var(--r-tarjeta);
  padding:var(--s-7) var(--s-7) var(--s-6);box-shadow:0 18px 48px rgba(0,0,0,.28)}
.nv-tarjeta h2{font-size:2rem;margin-bottom:var(--s-3)}
.nv-tarjeta h2:focus{outline:none}
.nv-lead{font-size:1.125rem;color:var(--gris);line-height:var(--lh-cuerpo)}
.nv-ancho{display:block;width:100%;text-align:center;margin-top:var(--s-4)}
.nv-aviso{font-size:var(--fs-nota);font-weight:300;color:var(--gris-claro);
  line-height:1.5;margin:var(--s-5) 0 0;border-top:1px solid var(--borde);padding-top:var(--s-4)}
.nv-error{font-size:var(--fs-ui);font-weight:600;color:var(--error);margin:0 0 var(--s-3)}

/* --- Progreso --- */
.nv-progreso-cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s-3)}
.nv-cuenta{font-size:var(--fs-antetitulo);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--verde-medio)}
.nv-atras{font:inherit;font-size:var(--fs-ui);font-weight:600;color:var(--gris);
  background:none;border:none;cursor:pointer;padding:6px 2px;text-decoration:underline;
  text-underline-offset:4px}
.nv-atras:hover{color:var(--verde)}
.nv-barra{height:6px;background:var(--borde);border-radius:999px;overflow:hidden;margin-bottom:var(--s-6)}
.nv-barra i{display:block;height:100%;background:var(--verde-medio);border-radius:999px;
  transition:width .45s cubic-bezier(.2,0,0,1)}

/* --- Pregunta --- */
.nv-pregunta{border:none;margin:0;padding:0}
.nv-pregunta legend{font-size:1.75rem;font-weight:700;line-height:1.3;color:var(--verde);
  padding:0;margin-bottom:var(--s-5)}
.nv-pregunta legend:focus{outline:none}
.nv-opciones{display:grid;gap:10px}
.nv-opcion{font:inherit;font-size:1.0625rem;text-align:left;width:100%;
  padding:17px 22px;background:var(--blanco);color:var(--tinta);
  border:2px solid var(--borde);border-radius:var(--r-tarjeta);cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease,transform .15s ease}
.nv-opcion:hover{border-color:var(--verde-medio);background:var(--verde-suave);transform:translateX(4px)}
.nv-opcion.elegida{border-color:var(--verde);background:var(--verde-suave);font-weight:600}

/* --- Resultado --- */
.nv-badge{background:var(--verde);border-radius:var(--r-tarjeta) var(--r-tarjeta) 0 0;
  padding:var(--s-6) var(--s-6) var(--s-4);text-align:center;margin-top:var(--s-5)}
.nv-badge strong{display:block;font-size:1.875rem;font-weight:800;letter-spacing:-.02em;color:var(--blanco)}
.nv-badge span{display:block;margin-top:6px;font-size:var(--fs-ui);color:var(--naranja);font-weight:600}

.nv-escalera{display:flex;align-items:flex-end;gap:8px;list-style:none;margin:0 0 var(--s-5);
  padding:0 var(--s-6) var(--s-6);background:var(--verde);
  border-radius:0 0 var(--r-tarjeta) var(--r-tarjeta)}
.nv-peldano{flex:1;position:relative;height:var(--alto);background:#0B3A1B;
  border-radius:6px 6px 0 0;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:6px;transition:background-color .3s ease}
.nv-peldano.pasado{background:var(--verde-medio)}
.nv-peldano.aqui{background:var(--naranja)}
.nv-peldano-n{font-size:var(--fs-nota);font-weight:700;color:var(--sobre-verde-2)}
.nv-peldano.pasado .nv-peldano-n{color:#D9E2D9}
.nv-peldano.aqui .nv-peldano-n{color:var(--tinta)}
.nv-marca{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  white-space:nowrap;font-size:.6875rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--naranja)}

.nv-curso{background:var(--marfil);border-radius:var(--r-tarjeta);padding:var(--s-6);margin-top:var(--s-5)}
.nv-curso h3{font-size:1.75rem;margin-bottom:var(--s-3)}
.nv-curso p{margin-bottom:0;color:var(--gris)}
.nv-curso p+p{margin-top:var(--s-3)}
.nv-examen{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--tinta)}
.nv-rehacer{display:block;margin:var(--s-4) auto 0;font:inherit;font-size:var(--fs-ui);
  font-weight:600;color:var(--gris);background:none;border:none;cursor:pointer;
  text-decoration:underline;text-underline-offset:4px}
.nv-rehacer:hover{color:var(--verde)}

/* --- Entrada de cada paso --- */
.nv-entra{animation:nvEntra .35s cubic-bezier(.2,0,0,1) both}
@keyframes nvEntra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* --- Llamador en la home --- */
.nv-llamador{background:var(--verde);border-radius:var(--r-tarjeta);padding:var(--s-7);
  display:flex;gap:var(--s-6);align-items:center;flex-wrap:wrap;overflow:hidden;position:relative}
.nv-llamador>div{flex:1 1 420px}
.nv-llamador h2{color:var(--blanco);margin-bottom:var(--s-3)}
.nv-llamador p{color:var(--sobre-verde);margin-bottom:0}
.nv-llamador .nv-mini{flex:0 0 auto;display:flex;align-items:flex-end;gap:6px}
.nv-llamador .nv-mini i{display:block;width:16px;border-radius:4px 4px 0 0;background:#0B3A1B}
.nv-llamador .nv-mini i:nth-child(1){height:26px}
.nv-llamador .nv-mini i:nth-child(2){height:40px;background:var(--verde-medio)}
.nv-llamador .nv-mini i:nth-child(3){height:54px;background:var(--verde-medio)}
.nv-llamador .nv-mini i:nth-child(4){height:68px;background:var(--naranja)}
.nv-llamador .nv-mini i:nth-child(5){height:82px}

@media (max-width:760px){
  .nv-escena{padding:var(--s-6) 0}
  .nv-tarjeta{padding:var(--s-6) var(--s-5) var(--s-5)}
  .nv-tarjeta h2{font-size:1.625rem}
  .nv-pregunta legend{font-size:1.375rem}
  .nv-llamador{padding:var(--s-6)}
  .nv-llamador .nv-mini{display:none}
}
@media (prefers-reduced-motion:reduce){
  .nv-entra{animation:none}
  .nv-opcion:hover{transform:none}
  .nv-barra i{transition:none}
}

/* Con el ítem de la evaluación el menú son siete: sin esto «In-Company»
   y «Medí tu nivel» se parten en dos líneas y descuadran la cabecera. */
.nav a{white-space:nowrap}
@media (max-width:1180px){ .nav{gap:18px} .cabecera .logo img{width:230px} }
@media (max-width:1060px){ .nav{gap:13px} .nav a{font-size:.875rem} .cabecera .logo img{width:200px} }
@media (max-width:860px) and (min-width:761px){ .nav{gap:10px} .nav a{font-size:.8125rem} .cabecera .logo img{width:170px} }
@media (max-width:760px){ .nav a{white-space:normal} }

/* Respuesta de los formularios que van al CRM. */
.form-estado{margin:var(--s-4) 0 0;font-size:var(--fs-ui);font-weight:500;line-height:1.5}
.form-estado.ok{color:var(--verde-medio)}
.form-estado.error{color:var(--error)}
.form-estado a{font-weight:600}
.sobre-verde .form-estado{color:var(--sobre-verde)}
.sobre-verde .form-estado.ok{color:var(--naranja)}
.sobre-verde .form-estado.error{color:#FFB4A2}

/* Widget de Turnstile. Con data-appearance="interaction-only" solo ocupa
   espacio cuando de verdad necesita que la persona haga algo. */
.cf-turnstile,.nv-turnstile{margin:var(--s-4) 0 0}
.cf-turnstile.ts-ok{display:none}
.nv-turnstile:empty{margin:0}

/* ---------- Ventana emergente de novedades (portada) ---------- */
dialog.ventana {
  width: min(520px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--r-tarjeta);
  background: var(--blanco);
  color: var(--verde);
  overflow: auto;
  box-shadow: 0 24px 64px rgba(1, 31, 10, .35);
}
dialog.ventana::backdrop { background: rgba(2, 46, 15, .55); }
dialog.ventana[open] { animation: ventana-entra .25s ease-out; }
@keyframes ventana-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.ventana[open] { animation: none; } }
dialog.ventana img { display: block; width: 100%; height: 220px; object-fit: cover; }
.ventana-cuerpo { padding: var(--s-5) var(--s-6) var(--s-6); }
.ventana-cuerpo .meta { display: flex; gap: 10px; align-items: center; margin: 0 0 var(--s-3); }
.ventana-cuerpo h2 { font-size: 1.5rem; margin: 0 0 var(--s-3); }
.ventana-cuerpo p { color: var(--gris); margin: 0; }
.ventana-acciones { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.ventana-acciones .btn { flex: 1 1 auto; text-align: center; }
.ventana-pie { justify-content: space-between; align-items: center; margin-top: var(--s-4); }
.ventana-cerrar { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--gris); text-decoration: underline; }
.nota-acciones { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.ventana-acciones form { margin: 0; }
.ventana-x { position: absolute; top: var(--s-3); right: var(--s-3); margin: 0; }
.ventana-x button {
  width: 40px; height: 40px; border: 0; border-radius: var(--r-pill);
  background: var(--verde); color: var(--blanco);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.ventana-x button:hover { background: var(--verde-medio); }
.ventana-x button:focus-visible { outline: 3px solid var(--verde-medio); outline-offset: 2px; }
@media (max-width: 480px) {
  dialog.ventana img { height: 170px; }
  .ventana-cuerpo { padding: var(--s-4) var(--s-5) var(--s-5); }
  .ventana-acciones > .btn, .ventana-acciones > form { flex: 1 1 100%; }
  .ventana-acciones .btn { width: 100%; text-align: center; }
}

/* ---------- Mapa de Contacto ---------- */
.mapa {
  position: relative; height: 300px; border-radius: var(--r-tarjeta); overflow: hidden;
  background: var(--verde-suave); display: flex; align-items: center; justify-content: center;
}
.mapa-sin-js { font-weight: 600; color: var(--verde); }
/* Cuando MapLibre arranca, el enlace de respaldo sobra. */
.mapa--listo .mapa-sin-js, .mapa.maplibregl-map .mapa-sin-js { display: none; }
.mapa-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-3); }

/* Marcador: gota verde institucional con centro marfil. */
.mapa-pin {
  width: 40px; height: 40px; cursor: pointer;
  background: var(--verde); border: 3px solid var(--marfil);
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  box-shadow: 0 6px 14px rgba(1, 31, 10, .35);
}
.mapa-pin::after {
  content: ''; position: absolute; inset: 11px; border-radius: 50%; background: var(--marfil);
}
.mapa .maplibregl-popup-content {
  font: inherit; font-size: .9375rem; line-height: 1.4; color: var(--verde);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-campo);
  box-shadow: 0 6px 18px rgba(1, 31, 10, .2);
}
.mapa .maplibregl-ctrl-attrib { font-size: .6875rem; }
@media (max-width: 480px) { .mapa { height: 260px; } }

/* ---------- Video de apertura del encabezado (js/site.js) ---------- */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background:var(--verde);z-index:1;transition:opacity .6s ease}
/* Mientras corre el video, la foto fija se oculta (si no, asoma por los bordes
   fundidos y se ven dos Big Ben) y vuelve junto con el texto. */
.hero-fondo{transition:opacity .6s ease}
.hero--video .hero-fondo{opacity:0}
/* El texto se oculta solo a la vista: sigue en la página para lectores de pantalla y buscadores. */
.hero--video .hero-texto{opacity:0;pointer-events:none}
.hero--fin .hero-video,.hero--fin .hero-saltar{opacity:0}
.hero--fin .hero-texto{animation:hero-aparece .7s cubic-bezier(.2,0,0,1) both}
@keyframes hero-aparece{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-saltar{position:absolute;right:var(--s-5);bottom:var(--s-5);z-index:2;
  font:inherit;font-size:.9375rem;font-weight:600;color:var(--marfil);cursor:pointer;
  padding:8px 18px;border-radius:var(--r-pill);border:1.5px solid rgba(242,239,233,.55);
  background:rgba(2,46,15,.45);transition:opacity .3s ease,background-color .15s ease}
.hero-saltar:hover{background:rgba(2,46,15,.8)}
.hero-saltar:focus-visible{outline:3px solid var(--naranja);outline-offset:2px}

/* --- Test de nivel para chicos (nivel-kids.html) ---
   Una sola pantalla, sin scroll: tarjeta ancha en dos columnas y título
   compacto que desaparece al empezar. */
main:has(#nivel)+.pie{margin-top:0}
.nk-escena{padding:var(--s-5) 0 var(--s-6)}
/* Marco de la evaluación única: angosto en el paso de datos y en el test de adultos, ancho en el de chicos */
.nk-marco{width:100%;max-width:760px;margin:0 auto}
.nk-marco.nk-ancho{max-width:920px}
.nk-marco #nivel{max-width:none}
.nk-marco .nv-tarjeta:not(.nk-tarjeta){padding:var(--s-5) var(--s-6)}
.nk-marco .nv-tarjeta:not(.nk-tarjeta) h2{font-size:1.625rem}
.nk-marco .nv-pregunta legend{font-size:1.375rem;margin-bottom:var(--s-4)}
.nk-marco .nv-opcion{padding:12px 20px}
.nk-marco .nv-barra{margin-bottom:var(--s-4)}
.nk-titulo{color:var(--blanco);margin:0 0 var(--s-4);display:flex;align-items:baseline;gap:var(--s-4);flex-wrap:wrap}
.nk-titulo h1{font-size:1.75rem;margin:0;color:var(--blanco)}
.nk-titulo p{display:none}
body[data-nk-pantalla]:not([data-nk-pantalla="inicio"]) .nk-titulo{display:none}
.nk-tarjeta{padding:var(--s-5) var(--s-6)}
.nk-tarjeta h2{font-size:1.625rem;margin-bottom:var(--s-3)}
.nk-cab{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);margin-bottom:var(--s-4)}
.nk-cab .nk-sendero{margin:0}
.nk-cab .nv-cuenta{margin:0}
.nk-barra{margin-bottom:var(--s-5)}
.nk-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);align-items:center}
.nk-col{min-width:0}
.nk-izq{display:flex;flex-direction:column;gap:var(--s-3)}
.nk-centro{text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--s-3)}
.nk-centro .nk-cab{width:100%}
.nk-centro h2,.nk-centro p{margin:0}
.nk-sendero{display:flex;gap:var(--s-4);list-style:none;margin:0;padding:0}
.nk-paso{display:flex;align-items:center;gap:6px;font-size:var(--fs-antetitulo);font-weight:700;color:var(--gris-claro)}
.nk-punto{width:14px;height:14px;border-radius:50%;border:2px solid var(--borde-fuerte);background:var(--blanco)}
.nk-paso.hecha .nk-punto{background:var(--verde-medio);border-color:var(--verde-medio)}
.nk-paso.ahora{color:var(--verde)}
.nk-paso.ahora .nk-punto{border-color:var(--verde);box-shadow:0 0 0 3px var(--verde-suave)}
.nk-pic{font-size:3.25rem;line-height:1;letter-spacing:4px}
.nk-lectura{background:var(--verde-suave);border-radius:var(--r-tarjeta);padding:var(--s-3) var(--s-4);line-height:1.5}
.nk-fila-consigna{display:flex;gap:var(--s-3);align-items:flex-start;justify-content:space-between}
.nk-consigna{margin:0;font-size:1.5rem;font-weight:700;line-height:1.3;color:var(--verde)}
.nk-consigna:focus{outline:none}
.nk-parlante{flex:none;width:48px;height:48px;border-radius:50%;border:2px solid var(--borde-fuerte);background:var(--blanco);color:var(--verde-medio);cursor:pointer;display:grid;place-items:center}
.nk-parlante:hover{border-color:var(--verde-medio);background:var(--verde-suave)}
.nk-opciones{display:grid;gap:10px}
.nk-opciones.grande{grid-template-columns:repeat(3,1fr)}
.nk-opcion{font:inherit;font-size:1.0625rem;font-weight:600;text-align:center;padding:12px;min-height:56px;background:var(--blanco);color:var(--tinta);border:2px solid var(--borde);border-radius:var(--r-tarjeta);cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.nk-opcion.grande{font-size:2.5rem;padding:6px}
.nk-opcion:hover{border-color:var(--verde-medio);background:var(--verde-suave)}
.nk-opcion[aria-pressed="true"]{border-color:var(--verde);background:var(--verde-suave)}
.nk-pie{display:flex;justify-content:flex-end;margin-top:var(--s-4)}
.nk-sig{min-width:150px}
.nk-sin-margen{margin-top:0}
.nk-aviso{margin-top:var(--s-4);padding-top:var(--s-3)}
.nk-badge{margin-bottom:var(--s-3)}
.nk-puntajes{display:grid;gap:var(--s-3)}
.nk-puntaje{display:grid;grid-template-columns:100px 1fr 44px;gap:var(--s-3);align-items:center;font-size:var(--fs-ui);font-weight:600}
.nk-pista{height:12px;border-radius:999px;background:var(--borde);overflow:hidden}
.nk-pista i{display:block;height:100%;background:var(--verde-medio);border-radius:999px}
.nk-n{text-align:right;font-variant-numeric:tabular-nums;color:var(--gris)}
.nk-acciones{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-5)}
.nk-aviso-copia{font-size:var(--fs-ui);font-weight:600;color:var(--verde-medio);margin:var(--s-3) 0 0}
.nk-pie-res{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);flex-wrap:wrap;margin-top:var(--s-4)}
.nk-pie-res .nv-aviso{margin:0;border:0;padding:0;flex:1 1 320px}
.nk-pie-res .nv-rehacer{margin:0}
.nk-llamado{margin:0;text-align:center}
@media (max-width:760px){
  .nk-escena{padding:var(--s-4) 0}
  .nk-tarjeta{padding:var(--s-4)}
  .nk-cols{grid-template-columns:1fr;gap:var(--s-4);align-items:stretch}
  .nk-titulo h1{font-size:1.375rem}
  .nk-titulo p{display:none}
  .nk-pic{font-size:2.5rem}
  .nk-consigna{font-size:1.25rem}
  .nk-opcion{min-height:50px;padding:8px}
  .nk-opcion.grande{font-size:2rem}
  .nk-barra{margin-bottom:var(--s-3)}
  .nk-pie{margin-top:var(--s-3)}
  .nk-puntaje{grid-template-columns:92px 1fr 44px}
}
@media (max-width:760px){.nk-cab{flex-wrap:wrap;gap:var(--s-2)}.nk-sendero{gap:var(--s-3)}.nk-cab .nv-cuenta{white-space:nowrap;font-size:.6875rem}}

/* Pie siempre al fondo de la ventana; el verde de la escena se estira y la
   tarjeta cambia de alto sin mover el pie ni dejar franjas blancas. */
body:has(#nivel){min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--verde)}
body:has(#nivel) main{flex:1 0 auto;display:flex;flex-direction:column}
body:has(#nivel) .nk-escena{flex:1 0 auto;padding-top:var(--s-6)}
body:has(#nivel) .pie{margin-top:0}
html:has(#nivel){background:var(--verde)}

/* ============================================================
   Home con movimiento: hero con exámenes, «30+», ruta de niveles
   Todo el movimiento se apaga con prefers-reduced-motion.
   El naranja va solo sobre fondo oscuro; sobre claro, --naranja-texto.
   ============================================================ */
@keyframes hmRaya{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hmFila{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}

.subrayado{position:relative;display:inline-block}
.subrayado::after{content:"";position:absolute;left:0;right:0;bottom:-.05em;height:.11em;
  background:var(--naranja);border-radius:4px;transform-origin:left;animation:hmRaya .9s .7s cubic-bezier(.2,0,0,1) both}

.hero .contenedor{display:flex;align-items:center;justify-content:space-between;gap:var(--s-7)}
.hero-examenes{flex:0 0 340px;background:rgba(2,46,15,.82);border:1px solid var(--verde-linea);
  border-radius:var(--r-tarjeta);padding:var(--s-5);backdrop-filter:blur(2px)}
.hero-examenes-t{margin:0 0 var(--s-3);font-size:var(--fs-antetitulo);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sobre-verde-2)}
.hero-examenes ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-2)}
.hero-examenes li{display:flex;justify-content:space-between;align-items:center;background:var(--verde-medio);
  color:var(--blanco);border-radius:8px;padding:0 var(--s-4);height:48px;font-weight:700;
  transform-origin:left;animation:hmFila .8s cubic-bezier(.2,0,0,1) both}
.hero-examenes li:nth-child(1){width:60%;animation-delay:.3s}
.hero-examenes li:nth-child(2){width:74%;animation-delay:.45s}
.hero-examenes li:nth-child(3){width:88%;animation-delay:.6s}
.hero-examenes li:nth-child(4){width:100%;animation-delay:.75s}
.hero-examenes li b{font-weight:600;font-size:var(--fs-ui);color:var(--sobre-verde)}
.hero-examenes-n{margin:var(--s-3) 0 0;font-size:var(--fs-nota);line-height:1.5;color:var(--sobre-verde-2)}
@media (max-width:1000px){.hero-examenes{display:none}.hero .contenedor{display:block}}

.unidad{transition:transform .25s cubic-bezier(.2,0,0,1),box-shadow .25s ease}
.unidad:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(2,46,15,.14)}

.porque{display:flex;flex-wrap:wrap;gap:var(--s-8);align-items:flex-start;margin-bottom:var(--s-7)}
.porque-cifra{flex:1 1 320px}
.cifra{font-size:clamp(6rem,15vw,11rem);font-weight:800;line-height:.9;letter-spacing:-.05em;color:var(--verde)}
.cifra span{color:var(--verde-medio)}
/* Variante con frase en lugar de número: más chica y con interlineado de titular. */
.cifra--texto{font-size:clamp(2.5rem,6vw,4.25rem);line-height:1.04;letter-spacing:-.035em;margin:0}
.porque-leyenda{margin:var(--s-3) 0 0;font-size:1.375rem;font-weight:600;color:var(--verde);line-height:1.35;max-width:340px}
.porque-lista{flex:1.4 1 460px;list-style:none;margin:0;padding:0}
.porque-lista li{position:relative;padding:var(--s-4) 0;border-bottom:1px solid var(--borde);
  transition:padding-left .25s ease;line-height:1.55}
.porque-lista li:hover{padding-left:var(--s-3)}
.porque-lista li i{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--verde-medio);
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.porque-lista li:hover i{transform:scaleX(1)}

.ruta h2{max-width:760px}
.ruta-chips{display:flex;gap:10px;flex-wrap:wrap;margin:var(--s-5) 0 var(--s-6)}
.ruta-chip{font:inherit;font-weight:600;padding:12px 22px;min-height:44px;border-radius:var(--r-pill);
  border:2px solid var(--borde-fuerte);background:transparent;color:var(--verde);cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.ruta-chip:hover{border-color:var(--verde-medio)}
.ruta-chip[aria-pressed="true"]{background:var(--verde);color:var(--marfil);border-color:var(--verde)}
.ruta-camino{--p:.5;position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;
  list-style:none;margin:0 0 var(--s-6);padding:0;transition:opacity .3s ease}
.ruta-camino::before,.ruta-camino::after{content:"";position:absolute;top:36px;left:10%;height:4px;border-radius:2px}
.ruta-camino::before{right:10%;background:var(--borde-fuerte)}
.ruta-camino::after{width:calc(80% * var(--p));background:var(--verde-medio);transition:width .6s cubic-bezier(.2,0,0,1)}
.ruta-apagado{opacity:.35}
.ruta-nodo{position:relative;width:100%;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:var(--tinta);
  display:flex;flex-direction:column;align-items:center;gap:14px}
.ruta-nodo:disabled{cursor:default}
.ruta-circulo{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;box-sizing:border-box;
  font-size:1.25rem;font-weight:800;background:var(--marfil);color:var(--gris-claro);border:4px solid var(--borde-fuerte);
  transition:background-color .3s ease,color .3s ease,border-color .3s ease,transform .3s cubic-bezier(.2,0,0,1)}
.ruta-nodo:not(:disabled):hover .ruta-circulo{transform:translateY(-4px)}
.ruta-nodo.hecho .ruta-circulo{background:var(--verde-medio);border-color:var(--verde-medio);color:var(--blanco)}
.ruta-nodo.aqui .ruta-circulo{background:var(--verde);border-color:var(--verde);color:var(--blanco);transform:scale(1.14)}
.ruta-nombre{font-size:var(--fs-ui);font-weight:600;color:var(--gris);text-align:center}
.ruta-nodo.aqui .ruta-nombre{font-weight:700;color:var(--verde)}
.ruta-resultado{background:var(--verde);color:var(--blanco);border-radius:24px;padding:var(--s-7) var(--s-8);
  display:flex;flex-wrap:wrap;gap:var(--s-7);align-items:center}
.ruta-cuerpo{flex:1 1 420px;min-width:0}
.ruta-resultado .antetitulo{color:var(--naranja)}
.ruta-resultado h3{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:800;letter-spacing:-.02em;line-height:1.08;
  color:var(--blanco);margin:0 0 var(--s-3)}
.ruta-texto{margin:0 0 var(--s-3);font-size:1.125rem;line-height:1.55;color:var(--sobre-verde);max-width:560px}
.ruta-detalle{margin:0;font-size:var(--fs-ui);line-height:1.5;color:var(--sobre-verde-2);max-width:560px}
.ruta-lado{flex:0 1 320px;display:flex;flex-direction:column;gap:var(--s-4)}
.ruta-examen{background:var(--verde-panel);border-radius:14px;padding:var(--s-4) var(--s-5)}
.ruta-examen-t{margin:0 0 6px;font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sobre-verde-2)}
.ruta-examen-n{margin:0;font-size:1.5rem;font-weight:700;color:var(--naranja)}
.ruta-lado .btn{text-align:center}
.ruta-otra{color:var(--sobre-verde);text-align:center;font-weight:600;font-size:var(--fs-ui)}
.ruta-otra:hover{color:var(--blanco)}
.ruta-aviso{margin:var(--s-4) 0 0;font-size:var(--fs-nota);font-weight:300;color:var(--gris-claro)}
@media (max-width:760px){
  .porque{gap:var(--s-6)}
  .ruta-circulo{width:48px;height:48px;font-size:.9375rem}
  .ruta-camino::before,.ruta-camino::after{top:22px}
  .ruta-nombre{font-size:.6875rem}
  .ruta-resultado{padding:var(--s-6) var(--s-5);gap:var(--s-5)}
}
@media (prefers-reduced-motion:reduce){
  .subrayado::after,.hero-examenes li{animation:none}
  .unidad,.porque-lista li,.porque-lista li i,.ruta-chip,.ruta-circulo,.ruta-camino,.ruta-camino::after{transition:none}
}
.nv-llamador .nv-mini i:nth-child(4){background:var(--verde-medio)}

/* Paso de datos de la evaluación: más compacto, para que entre sin scroll */
.nk-marco form.nv-tarjeta .nv-lead{font-size:1rem;margin-bottom:var(--s-3)}
.nk-marco form.nv-tarjeta .campo{margin-bottom:var(--s-3)}
.nk-marco form.nv-tarjeta .nv-ancho{margin-top:var(--s-3)}
.nk-marco form.nv-tarjeta .nv-aviso{margin-top:var(--s-4);padding-top:var(--s-3)}
.nk-marco form.nv-tarjeta .antetitulo{margin-bottom:var(--s-1)}
.nk-marco .nv-resultado .nv-curso{padding:var(--s-4) var(--s-5);margin-top:var(--s-4)}

/* La línea de la ruta pasa por detrás de los círculos, no por encima */
.ruta-camino::before,.ruta-camino::after{z-index:0}
.ruta-camino li{position:relative;z-index:1}

.nk-marco .nv-turnstile{margin:0 0 var(--s-3)}
.nk-marco .nv-turnstile:empty{margin:0}

/* Validación de campos de la evaluación */
.nv-error-campo{margin:6px 0 0;font-size:var(--fs-nota);font-weight:600;color:var(--error);line-height:1.4}
.nv-ayuda{margin:6px 0 0;font-size:var(--fs-nota);color:var(--gris-claro)}
.nk-marco .campo input[aria-invalid="true"],.nk-marco .campo select[aria-invalid="true"]{border-color:var(--error);border-width:2px;padding:12px 13px}
.nk-marco form.nv-tarjeta .fila-campos{gap:var(--s-4)}

/* Validación en los formularios del sitio (contacto, in-company) */
.campo input[aria-invalid="true"],.campo select[aria-invalid="true"]{border-color:var(--error);border-width:2px;padding:12px 13px}
.sobre-verde .nv-error-campo{color:#FFB4A2}
.sobre-verde .campo input[aria-invalid="true"]{border-color:#FFB4A2}