/* ============================================================
   layout.css · Contenedor, cabecera, pie, secciones, responsive
   ------------------------------------------------------------
   Theme Engine (NEP Academy Core). Extraido de eco-learning-platform
   v1.1 web/css/layout.css (Brick 03, paso 5b). Solo ranuras
   semanticas de tokens.css; ningun color literal.
   Los bloques propios de una instancia (enlace a la web oficial del
   centro, franja de cofinanciacion) viven en
   instances/<i>/theme/layout.css, que el generador concatena
   DESPUES de este fichero.
   ============================================================ */
.contenedor{width:min(1120px,92%);margin-inline:auto}
section{padding:4.5rem 0}

/* ---------- Cabecera ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:var(--color-nav-bg);backdrop-filter:blur(8px);
  border-bottom:2px solid var(--color-bg-2);
}
.nav-inner{display:flex;align-items:center;gap:1rem;padding:.7rem 0;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--color-text)}
.logo-icono{
  width:52px;height:52px;border-radius:16px;flex-shrink:0;
  background:var(--bg-logo-icono);
  display:grid;place-items:center;
}
.logo-icono svg{width:38px;height:38px}
.logo-texto{font-family:var(--f-display);font-weight:600;font-size:1.15rem;line-height:1.1}
.logo-texto small{display:block;font-family:var(--f-texto);font-weight:700;font-size:.72rem;color:var(--color-primary);letter-spacing:.08em;text-transform:uppercase}

.nav-links{display:flex;gap:.2rem;margin-left:auto;list-style:none;flex-wrap:wrap}
.nav-links a{
  padding:.75rem .9rem;border-radius:999px;text-decoration:none;
  font-weight:800;font-size:.92rem;color:var(--color-primary-dark);
  min-height:var(--tap-sec);display:flex;align-items:center;
}
.nav-links a:hover{background:var(--color-bg-2)}
.nav-links a[aria-current="page"]{background:var(--color-bg-2)}

/* ---------- Pie ---------- */
footer{background:var(--color-primary-deep);color:var(--color-footer-text);padding:3rem 0 6rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
footer h3{color:var(--color-white);font-size:1.05rem;margin-bottom:.7rem}
footer ul{list-style:none;display:grid;gap:.4rem}
footer a{color:var(--color-footer-text);text-decoration:none;font-size:.92rem;min-height:44px;display:inline-flex;align-items:center}
footer a:hover{text-decoration:underline}
.footer-legal{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--color-footer-line);font-size:.8rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ---------- Responsive ---------- */
@media (max-width:920px){
  .nav-links{order:3;width:100%}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr}
}

/* ============================================================
   layout.css · Instancia demo de NEP
   ------------------------------------------------------------
   Estructura de las paginas legales. Va en layout.css y no en
   components.css a proposito: la plantilla de pagina legal del
   Core solo carga variables, base, layout y accessibility
   (decision heredada de v1.1), asi que components.css no llega
   ahi. Ningun color literal.
   ============================================================ */
.legal-pagina{padding:3.5rem 0}
.legal-pagina h1{font-size:clamp(1.8rem,3.4vw,2.4rem);line-height:1.15;letter-spacing:-.02em;
  color:var(--color-primary-deep);margin:.6rem 0 .3rem}
.legal-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)}

.legal{max-width:78ch}
.legal h2{font-size:1.1rem;margin:1.9rem 0 .6rem;color:var(--color-primary-deep)}
.legal p,.legal li{font-family:var(--f-texto);font-size:.95rem;line-height:1.65;
  color:var(--color-text-soft);margin-bottom:.7rem}
.legal ul{padding-left:1.2rem;margin-bottom:.9rem}
.legal .legal-version{font-size:.85rem;color:var(--color-text-muted)}
.legal-pie{margin-top:2.6rem;font-family:var(--f-texto);font-size:.88rem;color:var(--color-text-muted)}