/* ============================================================
   components.css · Componentes del producto
   ------------------------------------------------------------
   Theme Engine (NEP Academy Core): botones, hero, mapa de navegacion, tarjetas, avisos, zona de juegos,
   componentes compartidos por los juegos, cabecera responsive, pie.
   Extraido de eco-learning-platform v1.1 web/css/components.css
   (Brick 03, paso 5c: reparto por nivel y migracion a ranuras y tokens).
   Orden de salida: Core, vertical, instancia, concatenados en un
   solo components.css por el generador.
   Solo ranuras semanticas de tokens.css: ningun nombre tematico ni
   color literal. Clases .btn-primary y .btn-accent (antes .btn-mar y
   .btn-sol, que AI@Green conserva como alias en su components.css).
   ============================================================ */
/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--f-display);font-weight:600;font-size:1.05rem;text-decoration:none;
  padding:.95rem 1.6rem;border-radius:999px;min-height:52px;border:none;cursor:pointer;
  transition:transform .15s ease;
}
.btn:active{transform:scale(.97)}
.btn-accent{background:var(--color-accent);color:var(--color-primary-deep);box-shadow:0 6px 0 var(--color-accent-dark)}
.btn-primary{background:var(--color-primary-dark);color:var(--color-white);box-shadow:0 6px 0 var(--color-primary-shadow)}
.btn-idioma{
  margin-left:.6rem;border:none;cursor:pointer;
  font-family:var(--f-display);font-weight:600;font-size:1rem;
  background:var(--color-primary);color:var(--color-white);
  padding:.65rem 1.15rem;border-radius:999px;min-height:var(--tap-sec);
  display:inline-flex;align-items:center;gap:.45rem;box-shadow:var(--sombra);
}
.btn-idioma:hover{background:var(--color-primary-dark)}
/* ---------- Hero (portada) ---------- */
.hero{
  position:relative;overflow:hidden;padding:0;
  background:var(--bg-hero);
}
.hero-inner{position:relative;z-index:3;padding:4rem 0 9rem;text-align:center}
.hero h1{font-size:clamp(2.2rem,5.5vw,3.6rem);font-weight:700;color:var(--color-primary-deep);margin-bottom:1rem}
.hero p{font-size:1.1rem;max-width:56ch;color:var(--color-hero-text);margin:0 auto 2.2rem;font-weight:600}
/* ---------- Mapa de navegación: 4 botones grandes ---------- */
.mapa-nav{max-width:820px;margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.boton-grande{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;
  min-height:150px;padding:1.4rem 1rem;border-radius:var(--radio);
  text-decoration:none;color:var(--color-white);box-shadow:var(--sombra);
  font-family:var(--f-display);transition:transform .15s ease;
}
.boton-grande:hover{transform:translateY(-4px)}
.boton-grande:active{transform:scale(.98)}
.boton-grande .icono{font-size:2.6rem;line-height:1}
.boton-grande .titulo{font-weight:600;font-size:1.35rem}
.boton-grande .detalle{font-family:var(--f-texto);font-weight:700;font-size:.85rem;opacity:.95}
/* ---------- Tarjetas genéricas ---------- */
.tarjeta{
  background:var(--color-white);border-radius:var(--radio);padding:1.5rem;
  box-shadow:var(--sombra);
}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
/* ---------- Aviso de trabajo en curso (esqueleto) ---------- */
.pendiente{
  background:var(--color-secondary-soft);border-left:6px solid var(--color-secondary);
  border-radius:0 14px 14px 0;padding:.9rem 1.1rem;font-size:.9rem;color:var(--color-secondary-text);
}
@media (max-width:640px){
  .mapa-nav{grid-template-columns:1fr}
  .grid-3,.grid-2{grid-template-columns:1fr}
}
/* ---------- Página Juegos ---------- */
.juegos-niveles{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:3rem}
.nivel{border-radius:var(--radio);padding:1.3rem;color:var(--color-white);box-shadow:var(--sombra)}
.nivel h3{font-size:1.08rem;margin-bottom:.35rem}
.nivel p{font-size:.88rem;opacity:.95}
.nivel small{display:inline-block;margin-top:.6rem;font-weight:800;background:var(--color-tag-bg);padding:.2rem .7rem;border-radius:999px;font-size:.75rem;letter-spacing:.05em}
.juegos-catalogo{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;margin-bottom:2.5rem}
.juego-card{border-radius:var(--radio);padding:1.5rem;color:var(--color-white);box-shadow:var(--sombra);display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}
.juego-card h3{font-size:1.25rem}
.juego-card p{font-size:.92rem;opacity:.95;flex-grow:1}
/* Cada tarjeta lleva el color del ciclo al que va dirigida, el mismo de las
   fichas de arriba: Infantil naranja, 1o-2o mar, 3o-4o posidonia, 5o-6o azul. */
.juego-card{background:linear-gradient(150deg,var(--jc-claro),var(--jc-hondo))}
/* Etiqueta del ciclo: el color solo no basta para saber a quien va dirigido */
.juego-card .ciclo-tag{
  align-self:flex-start;font-weight:800;font-size:.75rem;letter-spacing:.05em;
  background:var(--color-tag-bg);padding:.2rem .7rem;border-radius:999px;
}
.volver-juegos{display:inline-block;margin-bottom:1.2rem;font-weight:700}
@media (max-width:560px){
  .juegos-catalogo{grid-template-columns:1fr}
}
/* Genericas compartidas por los juegos (ver js/games.js).
   Los estilos propios de cada juego viven en games/<n>/game.css */
.juego-demo{
  background:var(--color-primary-deep);border-radius:28px;padding:2rem;color:var(--color-white);
  box-shadow:0 20px 50px var(--color-sombra-fuerte);margin-top:2rem;
}
.feedback{margin-top:1.2rem;min-height:2.2rem;text-align:center;font-family:var(--f-display);font-size:1.15rem;font-weight:600}
.feedback.ok{color:var(--color-feedback-ok)}
.feedback.mal{color:var(--color-feedback-bad)}
.juego-final{text-align:center;padding:1rem 0}
.juego-final .display{font-size:1.9rem;color:var(--color-accent);margin-bottom:.5rem}
.nota-tactil{margin-top:1.1rem;font-size:.85rem;opacity:.75;text-align:center}
@media (max-width:920px){
  .juegos-niveles{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .juegos-niveles{grid-template-columns:1fr}
}
/* ============================================================
   v1.0 · Ajustes de presentación para demo (agosto 2026)
   Header en una fila, intros centradas, táctil en juegos
   ============================================================ */
/* --- Cabecera: una sola fila en escritorio y pantallas de aula --- */
@media (min-width:1101px){
  .nav .nav-inner{flex-wrap:nowrap;padding:.55rem 0;gap:.8rem}
  .nav .nav-links{flex-wrap:nowrap;gap:.1rem}
  .nav .nav-links a{padding:.7rem .75rem;font-size:.9rem}
  .nav .btn-idioma{margin-left:0;padding:.55rem .95rem;font-size:.95rem;box-shadow:none;flex-shrink:0}
}
/* Tablet y móvil (≤1100px): fila 1 = logo + Averroes + idioma; fila 2 = enlaces */
@media (max-width:1100px){
  .nav .nav-inner{flex-wrap:wrap}
  .nav .logo{flex:1 1 0;min-width:0}
  .nav .btn-idioma{order:3;margin-left:0;flex-shrink:0}
  .nav .nav-links{order:4;width:100%;flex-wrap:nowrap;margin-left:0}
  .nav .nav-links a{white-space:nowrap}
}
/* --- Páginas interiores: intro centrada, como la portada --- */
section > .contenedor > .eyebrow{display:table;margin-inline:auto}
section > .contenedor > .seccion-titulo{text-align:center}
section > .contenedor > .seccion-sub{text-align:center;margin-inline:auto;max-width:68ch}
.juego-card{position:relative;transition:transform .15s ease}
.juego-card:hover{transform:translateY(-4px)}
.juego-card:active{transform:scale(.98)}
.juego-card{cursor:pointer}
/* --- Tarjetas de ciclo: invitación a bajar al catálogo --- */
.nivel{position:relative}
/* --- Página de juego: botón Volver táctil y menos aire arriba --- */
.volver-juegos{
  display:inline-flex;align-items:center;gap:.4rem;min-height:var(--tap-sec);
  padding:.6rem 1.2rem;border-radius:999px;text-decoration:none;
  background:var(--color-bg-2);color:var(--color-primary-dark);font-weight:800;margin-bottom:.8rem;
}
.volver-juegos:hover{background:var(--color-bg-3)}
body:has(.juego-demo) section{padding-top:2rem}
.juego-demo{margin-top:1rem}
/* --- Móvil (≤640px): cabecera en dos filas --- */
@media (max-width:640px){
  .nav .nav-inner{padding:.5rem 0;gap:.4rem .6rem}
  .nav .logo-texto{font-size:1rem}
  .nav .logo-icono{width:44px;height:44px;border-radius:12px}
  .nav .btn-idioma{padding:.45rem .85rem;font-size:.88rem;min-height:44px}
  /* En pantallas estrechas el menu PASA A DOS FILAS en vez de deslizarse.
     v1.1 usaba overflow-x con la barra oculta: el contenido sobrante quedaba
     fuera de pantalla sin ninguna senal de que estuviera ahi, y con teclado o
     lector de pantalla no habia forma de llegar. Medido a 360 px: el menu
     pedia 455 px y solo mostraba 331, de modo que se perdian secciones enteras
     ("Para el profesorado" en finanzas, "AI@Green" en Almerimar).
     Corregido el 13/09/2026. Es la primera diferencia INTENCIONADA frente a
     v1.1: la paridad byte a byte del Brick 03 ya cumplio su funcion, que era
     demostrar que extraer el Core no rompia nada. */
  .nav .nav-links{flex-wrap:wrap;gap:.1rem .2rem;justify-content:flex-start;row-gap:0}
  .nav .nav-links a{padding:.55rem .6rem;font-size:.86rem;white-space:nowrap;min-height:44px}
  .nav .logo{flex:1 1 0;min-width:0;gap:.5rem}
  .nav .logo-texto{font-size:.95rem;line-height:1.1;white-space:normal}
  .nav .btn-idioma{flex-shrink:0;padding:.4rem .75rem;font-size:.85rem}
  .nav .logo-texto small{display:none}
}
/* --- Pie: enlaces legales y credito alineados en la misma linea base --- */
.footer-legal{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 1.5rem}
@media (max-width:640px){
  .footer-legal{flex-direction:column;align-items:flex-start}
}

/* ============================================================
   components.css · Vertical Financial Education
   ------------------------------------------------------------
   La vertical no hereda la FORMA del Core (hero centrado y rejilla de
   botones grandes con emoji, pensada para primaria): trae la suya propia,
   editorial y sobria, adecuada a 12-18 anos. Todas las clases llevan
   prefijo fe-* o son componentes de tematica (temario, nora, ficha-aula).
   Usa ranuras del Core y tokens --v-*; ningun color literal.
   Se concatena tras el components.css del Core.
   ============================================================ */

/* --- Iconos en linea: monocromo, heredan el color del texto --- */
.fe-ico{width:22px;height:22px;flex-shrink:0;color:inherit}

/* --- Palabra destacada dentro de un titular --- */
.destacado{color:var(--color-secondary)}

/* --- Titulillo de seccion --- */
.fe-eyebrow{display:block;font-family:var(--f-texto);font-size:.78rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent-dark);margin-bottom:.7rem}

/* --- Portada: hero asimetrico a dos columnas, alineado a la izquierda --- */
.fe-hero{background:var(--bg-hero);border-bottom:1px solid var(--v-tarjeta-linea)}
.fe-hero-inner{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:3rem;align-items:center;padding:4.5rem 0 4rem;text-align:left}
.fe-hero h1{font-size:clamp(2.1rem,4.6vw,3.3rem);font-weight:700;line-height:1.1;
  color:var(--color-primary-deep);margin:0 0 1.1rem;letter-spacing:-.02em}
.fe-lead{font-family:var(--f-texto);font-size:1.08rem;line-height:1.6;max-width:52ch;
  color:var(--color-text-soft);margin:0 0 2rem}
.fe-hero-acciones{display:flex;flex-wrap:wrap;gap:.8rem}

/* Botones de la vertical: rectangulares, sin degradado ni relieve */
.fe-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--f-texto);font-weight:700;font-size:.97rem;letter-spacing:.01em;
  padding:.85rem 1.6rem;border-radius:4px;border:1.5px solid transparent;
  text-decoration:none;transition:background-color .15s,color .15s,border-color .15s}
.fe-btn-solido{background:var(--color-primary);color:var(--color-white)}
.fe-btn-solido:hover{background:var(--color-primary-deep)}
.fe-btn-linea{background:transparent;color:var(--color-primary-dark);border-color:var(--v-tarjeta-linea)}
.fe-btn-linea:hover{border-color:var(--color-primary);color:var(--color-primary-deep)}

/* Columna derecha del hero: las dos etapas, de un vistazo */
.fe-hero-segmentos{display:grid;gap:.8rem}
.fe-segmento{background:var(--color-white);border:1px solid var(--v-tarjeta-linea);
  border-left-width:4px;border-radius:4px;padding:1.1rem 1.3rem}
.fe-segmento-etapa{display:block;font-weight:700;font-size:1.05rem;color:var(--color-primary-deep)}
.fe-segmento-edad{display:block;font-family:var(--f-texto);font-size:.85rem;
  color:var(--color-text-muted);margin-top:.15rem}
.fe-segmento-eso{border-left-color:var(--v-eso)}
.fe-segmento-eso .fe-segmento-etapa{color:var(--v-eso)}
.fe-segmento-bach{border-left-color:var(--v-bach)}
.fe-segmento-bach .fe-segmento-etapa{color:var(--v-bach)}

/* --- Portada: las cuatro secciones, en fila, numeradas --- */
.fe-secciones-zona{padding:3.5rem 0 4rem;background:var(--color-bg)}
.fe-secciones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem}
.fe-seccion{display:block;padding-top:1rem;border-top:3px solid var(--v-tarjeta-linea);
  text-decoration:none;color:inherit;transition:border-color .15s}
.fe-num{display:block;font-family:var(--f-texto);font-size:.78rem;font-weight:700;
  letter-spacing:.12em;color:var(--color-text-muted);margin-bottom:.7rem}
.fe-seccion-cab{display:flex;align-items:center;gap:.55rem;margin-bottom:.45rem}
.fe-seccion-titulo{font-weight:700;font-size:1.12rem;color:var(--color-primary-deep);line-height:1.25}
.fe-seccion-detalle{display:block;font-family:var(--f-texto);font-size:.92rem;
  line-height:1.55;color:var(--color-text-soft)}
.fe-seccion:hover .fe-seccion-titulo{color:var(--color-primary)}
/* El color solo marca la seccion: en la regla superior y el icono, no en un fondo */
.s-aprendemos:hover{border-top-color:var(--color-primary)}
.s-aprendemos .fe-ico{color:var(--color-primary)}
.s-juegos:hover{border-top-color:var(--color-secondary)}
.s-juegos .fe-ico{color:var(--color-secondary)}
.s-tutor:hover{border-top-color:var(--v-bach)}
.s-tutor .fe-ico{color:var(--v-bach)}
.s-profesorado:hover{border-top-color:var(--color-accent-dark)}
.s-profesorado .fe-ico{color:var(--color-accent-dark)}
.fe-nota-chat{margin-top:2.6rem;font-family:var(--f-texto);font-size:.92rem;
  color:var(--color-text-muted);max-width:62ch}

@media (max-width:980px){
  .fe-hero-inner{grid-template-columns:1fr;gap:2.2rem;padding:3rem 0}
  .fe-hero-segmentos{grid-template-columns:1fr 1fr}
  .fe-secciones{grid-template-columns:1fr 1fr;gap:1.4rem 1.8rem}
}
@media (max-width:560px){
  .fe-hero-segmentos,.fe-secciones{grid-template-columns:1fr}
  .fe-btn{width:100%}
}

/* --- Tarjetas de nivel y de juego (Games Engine) --- */
.n-eso{background:var(--v-eso)}
.n-bach{background:var(--v-bach)}
.seg-eso{--jc-claro:var(--v-eso-claro);--jc-hondo:var(--v-eso)}
.seg-bach{--jc-claro:var(--v-bach-claro);--jc-hondo:var(--v-bach)}

/* --- Temario: un bloque numerado por fila, con su columna de ESO y de Bachillerato --- */
.temario{display:grid;gap:0;border-top:1px solid var(--v-tarjeta-linea)}
.bloque{border-bottom:1px solid var(--v-tarjeta-linea);padding:1.5rem 0}
.bloque-cab{display:flex;align-items:baseline;gap:.9rem;margin-bottom:.9rem}
.bloque-num{font-family:var(--f-texto);font-size:.8rem;font-weight:700;letter-spacing:.12em;
  color:var(--color-accent-dark);flex-shrink:0}
.bloque h3{font-size:1.15rem;color:var(--color-primary-deep);margin:0}
.bloque .etapas{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.bloque .etapa h4{font-family:var(--f-texto);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:.35rem}
.bloque .etapa.eso h4{color:var(--v-eso)}
.bloque .etapa.bach h4{color:var(--v-bach)}
.bloque .etapa p{font-size:.94rem;line-height:1.6;color:var(--color-text-soft);margin:0}
@media (max-width:720px){ .bloque .etapas{grid-template-columns:1fr;gap:1rem} }

/* --- Nora: lo que puede y lo que no --- */
.nora-limites{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:1.8rem}
.nora-col{border-top:3px solid var(--v-tarjeta-linea);padding-top:1rem}
.nora-col h3{font-size:1.05rem;margin-bottom:.9rem}
.nora-col ul{list-style:none;display:grid;gap:.7rem;margin:0;padding:0}
.nora-col li{font-family:var(--f-texto);font-size:.95rem;line-height:1.55;
  display:flex;gap:.65rem;align-items:flex-start;color:var(--color-text-soft)}
.nora-col li::before{font-weight:800;flex-shrink:0;line-height:1.5}
.puede{border-top-color:var(--v-ok)}
.puede h3{color:var(--v-ok)}
.puede li::before{content:"+";color:var(--v-ok)}
.no-puede{border-top-color:var(--v-alerta)}
.no-puede h3{color:var(--v-alerta)}
.no-puede li::before{content:"\2013";color:var(--v-alerta)}
.aviso-ia{margin-top:2rem;border-left:3px solid var(--color-secondary);
  padding:.3rem 0 .3rem 1.1rem;font-family:var(--f-texto);font-size:.92rem;
  line-height:1.6;color:var(--color-secondary-text)}
@media (max-width:720px){ .nora-limites{grid-template-columns:1fr;gap:1.6rem} }

/* --- Profesorado: fichas sin caja, separadas por regla --- */
.fichas-aula{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 2.4rem}
.ficha-aula{border-top:1px solid var(--v-tarjeta-linea);padding-top:1rem}
.ficha-aula h3{font-size:1.02rem;margin-bottom:.45rem;color:var(--color-primary-deep)}
.ficha-aula p{font-family:var(--f-texto);font-size:.93rem;line-height:1.6;color:var(--color-text-soft);margin:0}
@media (max-width:980px){ .fichas-aula{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .fichas-aula{grid-template-columns:1fr} }

/* --- Pie de pagina de seccion: marco europeo, notas --- */
.marco-ue{margin-top:2rem;font-family:var(--f-texto);font-size:.85rem;
  line-height:1.6;color:var(--color-text-muted);max-width:70ch}

/* --- Cabecera comun de las paginas interiores --- */
.fe-cab{padding:3rem 0 1.6rem}
.fe-cab h1{font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.12;letter-spacing:-.02em;
  color:var(--color-primary-deep);margin:0 0 .8rem}
.fe-cab .fe-lead{margin-bottom:0}
.fe-cuerpo{padding-top:.5rem;padding-bottom:4rem}

/* --- Catalogo de juegos: la vertical reescribe la forma del Core ---
   El Core dibuja las tarjetas de nivel y de juego como bloques de color
   con relieve y boton pastilla, que es la forma pensada para primaria.
   Aqui se rehacen con la misma logica editorial que el resto de la
   vertical: fondo claro, regla de color, sin degradados ni sombras.
   El generador ya usa estas clases; solo cambia su aspecto. */
.juegos-niveles{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-bottom:2.4rem}
.nivel{background:var(--color-white);color:var(--color-text);border:1px solid var(--v-tarjeta-linea);
  border-left-width:5px;border-radius:4px;box-shadow:none;padding:1.3rem 1.4rem}
.nivel h3{font-family:var(--f-titulo);font-size:1.15rem;margin-bottom:.35rem;color:var(--color-primary-deep)}
.nivel p{font-family:var(--f-texto);font-size:.93rem;line-height:1.6;color:var(--color-text-soft);opacity:1}
.nivel small{display:block;margin-top:.7rem;background:none;padding:0;border-radius:0;
  font-family:var(--f-texto);font-size:.78rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--color-text-muted)}
.nivel.n-eso{border-left-color:var(--v-eso)}
.nivel.n-eso h3{color:var(--v-eso)}
.nivel.n-bach{border-left-color:var(--v-bach)}
.nivel.n-bach h3{color:var(--v-bach)}

.juegos-catalogo{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.juego-card{background:var(--color-white);color:var(--color-text);
  border:1px solid var(--v-tarjeta-linea);border-top:3px solid var(--color-primary);
  border-radius:4px;box-shadow:none;padding:1.5rem;transition:box-shadow .15s}
.juego-card:hover{transform:none;box-shadow:var(--sombra)}
.juego-card:active{transform:none}
.juego-card h3{font-family:var(--f-titulo);font-size:1.2rem;color:var(--color-primary-deep)}
.juego-card p{font-family:var(--f-texto);font-size:.95rem;line-height:1.6;color:var(--color-text-soft);opacity:1}
.juego-card .ciclo-tag{background:none;color:var(--color-text-muted);padding:0;border-radius:0;
  font-family:var(--f-texto);font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.juego-card.seg-eso{border-top-color:var(--v-eso)}
.juego-card.seg-eso .ciclo-tag{color:var(--v-eso)}
.juego-card.seg-bach{border-top-color:var(--v-bach)}
.juego-card.seg-bach .ciclo-tag{color:var(--v-bach)}

/* La nota del catalogo, sin la caja de aviso del Core */
.juegos-catalogo + .pendiente,.juegos-niveles + .pendiente{background:none;border:0;padding:0;
  font-family:var(--f-texto);font-size:.93rem;color:var(--color-text-muted);margin-bottom:2rem}

@media (max-width:720px){ .juegos-niveles,.juegos-catalogo{grid-template-columns:1fr} }

/* La cabecera del catalogo la escribe el Core con sus clases, y el Core las
   centra con selectores de hijo directo (section > .contenedor > ...). Se
   repiten aqui esos mismos selectores para alinearlas a la izquierda y quitar
   la pastilla del titulillo, que es lo que las hace parecer de primaria. */
.eyebrow,section > .contenedor > .eyebrow{display:block;background:none;padding:0;
  border-radius:0;text-align:left;margin-inline:0;
  font-family:var(--f-texto);font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--color-accent-dark)}
.seccion-titulo,section > .contenedor > .seccion-titulo{text-align:left;
  font-family:var(--f-titulo);font-weight:700;letter-spacing:-.02em;
  color:var(--color-primary-deep)}
.seccion-sub,section > .contenedor > .seccion-sub{text-align:left;margin-inline:0;
  max-width:62ch;font-family:var(--f-texto);color:var(--color-text-soft);font-weight:400}

/* ============================================================
   components.css · Instancia demo de NEP
   ------------------------------------------------------------
   Solo lo propio de la instancia: la franja de "demostracion" del
   pie y la caja de texto de las paginas legales. Ningun color
   literal: usa ranuras del Core y tokens --i-*.
   Se concatena tras el components.css de la vertical.
   ============================================================ */
.demo-franja{border-top:1px solid var(--i-demo-linea);margin:0 0 1.4rem;padding:1rem 0 0;
  font-family:var(--f-texto);font-size:.85rem;line-height:1.6;color:var(--i-demo-texto);max-width:82ch}