/* =====================================================================
   COLEGIO DE CONOCIMIENTO DE SÍ MISMO
   Hoja de estilos única · construida sobre el Manual de Identidad
   Visual v1.0 (agosto de 2026). No se agregan colores, sombras ni
   tipografías fuera del sistema.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. TOKENS  (anexo 7 del manual, íntegro)
   --------------------------------------------------------------- */
:root {
  /* --- Azul Colegio --- */
  --azul-50:#F0F4F9;  --azul-100:#DBE3EE; --azul-200:#B8C7DB;
  --azul-300:#8DA3C0; --azul-400:#5E7699; --azul-500:#3B5476;
  --azul-600:#223C5B; --azul-700:#10253F; --azul-800:#081A31;
  --azul-900:#00102A;

  /* --- Oro Solar --- */
  --oro-50:#FDF8EB;  --oro-100:#FAEDCB; --oro-200:#F5DC9C;
  --oro-300:#EFC768; --oro-400:#E7B23A; --oro-500:#D89B00;
  --oro-600:#B57F00; --oro-700:#8F6600; --oro-800:#6B4C00;
  --oro-900:#4A3500;

  /* --- Neutros fríos --- */
  --gris-50:#F8F9FB;  --gris-100:#EFF1F4; --gris-200:#E1E5EA;
  --gris-300:#C7CDD6; --gris-400:#9AA3B0; --gris-500:#6A7481;
  --gris-600:#545D69; --gris-700:#3D4550; --gris-800:#272E37;
  --gris-900:#151A21;

  /* --- Papeles semánticos (modo claro) --- */
  --fondo:#FFFFFF;
  --fondo-alt:#FAF6EE;            /* Pergamino */
  --fondo-oscuro:var(--azul-900);
  --texto:var(--azul-700);
  --texto-suave:var(--gris-600);
  --texto-tenue:var(--gris-500);
  --borde:var(--gris-200);
  --acento:var(--oro-500);
  --acento-texto:var(--oro-700);  /* el único oro legible sobre claro */
  --foco:var(--oro-500);

  /* --- Estados --- */
  --exito:#1E7A4C;     --exito-fondo:#E8F5EE;
  --atencion:#856000;  --atencion-fondo:#FAEDCB;
  --error:#B3261E;     --error-fondo:#FCEBEA;
  --info:#2E5F8F;      --info-fondo:#E8F1F9;

  /* --- Tipografía --- */
  --fuente-titulo:"Cinzel", Georgia, serif;
  --fuente-texto:"Lora", Georgia, serif;
  --fuente-ui:"Inter", system-ui, "Segoe UI", sans-serif;

  --t-display:3.5rem;  --t-h2:2.5rem;  --t-h3:1.75rem;
  --t-h4:1.375rem;     --t-lead:1.25rem;
  --t-cuerpo:1.125rem; --t-menor:1rem; --t-micro:0.875rem;
  --t-etiqueta:0.8125rem;

  /* --- Espaciado --- */
  --e-1:4px;  --e-2:8px;  --e-3:12px; --e-4:16px; --e-5:24px;
  --e-6:32px; --e-7:48px; --e-8:64px; --e-9:96px; --e-10:128px;
  --ancho-max:1200px;
  --ancho-lectura:680px;

  /* --- Radios y sombras --- */
  --r-boton:8px; --r-tarjeta:14px; --r-pildora:999px;
  --s-1:0 1px 2px rgba(0,16,42,.06);
  --s-2:0 4px 16px rgba(0,16,42,.10);
  --s-3:0 12px 32px rgba(0,16,42,.14);

  /* --- Derivados de uso interno --- */
  --margen-lateral:24px;
  --salto-seccion:64px;
  --cabecera-alto:72px;
  --transicion:180ms cubic-bezier(.2,.7,.3,1);
  --transicion-lenta:520ms cubic-bezier(.2,.7,.3,1);
}

@media (min-width:768px)  { :root { --margen-lateral:48px; } }
@media (min-width:1024px) { :root { --salto-seccion:96px; --cabecera-alto:84px; } }
@media (min-width:1280px) { :root { --margen-lateral:80px; } }

[data-tema="oscuro"] {
  --fondo:var(--azul-900);
  --fondo-alt:var(--azul-800);
  --texto:#FFFFFF;
  --texto-suave:var(--azul-200);
  --texto-tenue:var(--azul-300);
  --borde:var(--azul-600);
  --acento-texto:var(--oro-300);
  --s-1:none; --s-2:none; --s-3:none;   /* en oscuro se separa con color */
}

/* ---------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body {
  margin:0;
  background:var(--fondo);
  color:var(--texto);
  font-family:var(--fuente-texto);
  font-size:var(--t-cuerpo);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1, h2 {
  font-family:var(--fuente-titulo);
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.12;
  text-wrap:balance;            /* ningún titular con una palabra huérfana */
}
h3, h4 {
  font-family:var(--fuente-texto); line-height:1.3; font-weight:600;
  text-wrap:balance;
}
p { text-wrap:pretty; }
h1 { font-size:clamp(2rem, 1.2rem + 3.4vw, var(--t-display)); margin:0 0 var(--e-5); }
h2 { font-size:clamp(1.625rem, 1.1rem + 2.2vw, var(--t-h2)); margin:0 0 var(--e-5); }
h3 { font-size:clamp(1.375rem, 1.15rem + .9vw, var(--t-h3)); margin:0 0 var(--e-3); }
h4 { font-size:var(--t-h4); margin:0 0 var(--e-2); }
p  { margin:0 0 var(--e-5); }
p:last-child { margin-bottom:0; }

img { max-width:100%; height:auto; display:block; }

a { color:var(--acento-texto); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover { text-decoration-thickness:2px; }

:focus-visible {
  outline:2px solid var(--foco);
  outline-offset:2px;
  border-radius:2px;
}

::selection { background:var(--oro-200); color:var(--azul-900); }

.salto-contenido {
  position:absolute; left:var(--e-4); top:-100px;
  z-index:100; padding:var(--e-3) var(--e-5);
  background:var(--oro-500); color:var(--azul-900);
  font-family:var(--fuente-ui); font-weight:600; font-size:var(--t-menor);
  border-radius:0 0 var(--r-boton) var(--r-boton); text-decoration:none;
  transition:top var(--transicion);
}
.salto-contenido:focus { top:0; }

.solo-lectores {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------------------------------------------------------------
   3. RETÍCULA Y SECCIONES
   --------------------------------------------------------------- */
.contenedor {
  width:100%;
  max-width:calc(var(--ancho-max) + var(--margen-lateral) * 2);
  margin-inline:auto;
  padding-inline:var(--margen-lateral);
}

.lectura { max-width:var(--ancho-lectura); }

.seccion { padding-block:var(--salto-seccion); }
.seccion--compacta { padding-block:calc(var(--salto-seccion) * .66); }
.seccion--pergamino { background:var(--fondo-alt); }
.seccion--onix {
  background:var(--azul-900);
  color:#FFFFFF;
  --texto:#FFFFFF;
  --texto-suave:var(--azul-200);
  --texto-tenue:var(--azul-300);
  --borde:var(--azul-600);
  --acento-texto:var(--oro-300);
}
.seccion--azul {
  background:var(--azul-700);
  color:#FFFFFF;
  --texto:#FFFFFF;
  --texto-suave:var(--azul-200);
  --borde:var(--azul-600);
  --acento-texto:var(--oro-300);
}

/* El filete dorado: firma de la marca en la web */
.filete {
  width:64px; height:3px; border:0; margin:0 0 var(--e-5);
  background:var(--oro-500);
}
.filete--centrado { margin-inline:auto; }

.encabezado-seccion { margin-bottom:var(--e-8); }
.encabezado-seccion p { color:var(--texto-suave); max-width:var(--ancho-lectura); }
.encabezado-seccion--centrado { text-align:center; }
.encabezado-seccion--centrado p { margin-inline:auto; }

.etiqueta {
  display:block;
  font-family:var(--fuente-ui);
  font-size:var(--t-etiqueta);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--acento-texto);
  margin-bottom:var(--e-3);
}

.entrada { font-size:var(--t-lead); color:var(--texto-suave); }

/* ---------------------------------------------------------------
   4. BOTONES  (una sola acción dorada por pantalla)
   --------------------------------------------------------------- */
.boton {
  display:inline-flex; align-items:center; gap:var(--e-2);
  font-family:var(--fuente-ui); font-size:var(--t-menor); font-weight:600;
  line-height:1.2; text-decoration:none; text-align:center;
  padding:14px var(--e-5);
  border-radius:var(--r-boton);
  border:1px solid transparent;
  cursor:pointer;
  transition:background var(--transicion), color var(--transicion),
             border-color var(--transicion), transform var(--transicion);
}
.boton:hover { transform:translateY(-1px); text-decoration:none; }

.boton--acento {
  background:var(--oro-500); color:var(--azul-900);
  box-shadow:0 1px 2px rgba(0,16,42,.10);
}
.boton--acento:hover {
  background:var(--oro-400);
  box-shadow:0 6px 18px rgba(216,155,0,.32);
}

.boton--primario { background:var(--azul-700); color:#FFFFFF; }
.boton--primario:hover { background:var(--azul-600); }

.boton--borde { background:transparent; color:var(--texto); border-color:var(--borde); }
.boton--borde:hover { border-color:var(--acento); }

.seccion--onix .boton--borde,
.seccion--azul .boton--borde,
.portada .boton--borde { color:#FFFFFF; border-color:rgba(255,255,255,.45); }
.seccion--onix .boton--borde:hover,
.seccion--azul .boton--borde:hover,
.portada .boton--borde:hover { border-color:var(--oro-500); }

.grupo-botones { display:flex; flex-wrap:wrap; gap:var(--e-4); }

/* ---------------------------------------------------------------
   5. CABECERA
   --------------------------------------------------------------- */
.cabecera {
  position:sticky; top:0; z-index:50;
  background:var(--fondo);                  /* cabecera clara: el logo va a color */
  border-bottom:3px solid var(--oro-500);   /* el filete de la marca */
  --realce:var(--gris-100);                 /* fondo de los estados hover */
  transition:box-shadow var(--transicion), background var(--transicion);
}
/* Al despegarse de arriba, la cabecera se separa del contenido */
.cabecera.desplazada {
  box-shadow:0 6px 24px rgba(0,16,42,.10);
  background:color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter:saturate(1.6) blur(12px);
  -webkit-backdrop-filter:saturate(1.6) blur(12px);
}
@supports not (background:color-mix(in srgb, red 50%, transparent)) {
  .cabecera.desplazada { background:var(--fondo); }
}
/* En oscuro la separación entre planos se hace con color, no con sombra */
[data-tema="oscuro"] .cabecera.desplazada { box-shadow:none; }
[data-tema="oscuro"] .cabecera { --realce:rgba(255,255,255,.08); }

.cabecera__barra {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--e-5);
  min-height:var(--cabecera-alto);
}

/* --- El logo cambia con el ancho y con el tema ---------------------
   Claro  → versión a color, que es el uso principal del manual.
   Oscuro → versión blanca, la única correcta sobre Ónix Azul.
   <400px → isotipo solo, porque no cabe el nombre legible.        */
.cabecera__logo { display:flex; align-items:center; flex-shrink:0; }
.cabecera__logo img { display:none; }
.cabecera__logo--completo { width:230px; }   /* mínimo del manual: 180 px */
.cabecera__logo--iso { width:64px; }         /* mínimo del manual:  56 px */
@media (min-width:1280px) { .cabecera__logo--completo { width:270px; } }

.cabecera__logo--completo.cabecera__logo--claro { display:block; }
[data-tema="oscuro"] .cabecera__logo--completo.cabecera__logo--claro { display:none; }
[data-tema="oscuro"] .cabecera__logo--completo.cabecera__logo--oscuro { display:block; }

@media (max-width:399px) {
  .cabecera__logo--completo.cabecera__logo--claro,
  [data-tema="oscuro"] .cabecera__logo--completo.cabecera__logo--oscuro { display:none; }
  .cabecera__logo--iso.cabecera__logo--claro { display:block; }
  [data-tema="oscuro"] .cabecera__logo--iso.cabecera__logo--claro { display:none; }
  [data-tema="oscuro"] .cabecera__logo--iso.cabecera__logo--oscuro { display:block; }
}

.nav { display:none; }
@media (min-width:1200px) {
  .nav { display:flex; align-items:center; gap:var(--e-1); }
}
.nav a {
  font-family:var(--fuente-ui); font-size:var(--t-micro); font-weight:500;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--texto); text-decoration:none;
  padding:var(--e-2) var(--e-3);
  border-radius:var(--r-boton);
  position:relative;
  transition:color var(--transicion), background var(--transicion);
}
.nav a:hover { background:var(--realce); }
.nav a[aria-current="page"] { color:var(--acento-texto); }
.nav a[aria-current="page"]::after {
  content:""; position:absolute; left:var(--e-3); right:var(--e-3); bottom:2px;
  height:2px; background:var(--oro-500);
}

.cabecera__acciones { display:flex; align-items:center; gap:var(--e-2); }

.boton-icono {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0;
  background:transparent; border:1px solid var(--borde);
  border-radius:var(--r-boton);
  color:var(--texto); cursor:pointer;
  transition:border-color var(--transicion), background var(--transicion);
}
.boton-icono:hover { border-color:var(--acento); background:var(--realce); }
.boton-icono svg { width:24px; height:24px; }
.boton-icono--menu { display:inline-flex; }
@media (min-width:1200px) { .boton-icono--menu { display:none; } }

.icono-tema--claro { display:none; }
[data-tema="oscuro"] .icono-tema--claro { display:block; }
[data-tema="oscuro"] .icono-tema--oscuro { display:none; }

/* Menú móvil */
.menu-movil {
  display:none;
  background:var(--fondo-alt);
  border-top:1px solid var(--borde);
}
[data-tema="oscuro"] .menu-movil { background:var(--azul-800); }
.menu-movil.abierto { display:block; }
@media (min-width:1200px) { .menu-movil { display:none !important; } }
.menu-movil ul { list-style:none; margin:0; padding:var(--e-3) 0 var(--e-5); }
.menu-movil a {
  display:block;
  font-family:var(--fuente-ui); font-size:var(--t-menor); font-weight:500;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--texto); text-decoration:none;
  padding:var(--e-3) 0;
  border-bottom:1px solid var(--borde);
}
.menu-movil li:last-child a { border-bottom:0; }
.menu-movil a[aria-current="page"] { color:var(--acento-texto); }

/* ---------------------------------------------------------------
   6. PORTADA (hero)
   --------------------------------------------------------------- */
.portada {
  position:relative;
  background:var(--azul-900);
  color:#FFFFFF;
  overflow:hidden;
  isolation:isolate;
}
.portada__marca-agua {
  position:absolute; z-index:-1;
  right:-6%; top:50%; transform:translateY(-50%);
  width:min(760px, 78%);
  opacity:.16;                 /* isotipo blanco al 16 %, regla del manual */
  pointer-events:none;
}
@media (max-width:767px) {
  .portada__marca-agua { right:-22%; width:130%; opacity:.10; }
}

.portada__interior {
  padding-block:calc(var(--salto-seccion) * 1.1);
  padding-inline:var(--margen-lateral);
  max-width:760px;
  margin-inline:auto;
}

/* --- Portada partida: panel de texto + fotografía a sangre ---------
   El texto nunca va encima de la foto: van uno al lado del otro, así
   que no hace falta velo y la imagen se ve limpia.                  */
.portada--partida { display:grid; }
.portada--partida > * { min-width:0; }
.portada--partida .portada__panel {
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:center;
}
.portada--partida .portada__interior {
  margin-inline:0;
  width:100%;
}
.portada__figura { position:relative; overflow:hidden; background:var(--azul-800); }
.portada__figura img {
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
}
/* Velo de Ónix que funde la foto con el panel, sin taparla */
.portada__figura::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,16,42,.55) 0%, rgba(0,16,42,0) 42%);
}

@media (min-width:1024px) {
  .portada--partida { grid-template-columns:1fr 46%; align-items:stretch; }
  .portada--partida .portada__panel { padding-inline-start:var(--margen-lateral); }
  .portada--partida .portada__interior {
    padding-block:var(--e-8);
    padding-inline:0 var(--e-8);
    max-width:700px;
    margin-inline-start:auto;
  }
  .portada__figura { min-height:min(86vh, 780px); }
  /* El panel ocupa el 54 % del ancho menos los márgenes: el titular se
     mide contra ESE ancho, para no pasar nunca de dos líneas. */
  .portada--partida h1 { font-size:clamp(1.5rem, -0.54rem + 3.2vw, 2.25rem); }
  .portada__figura::after {
    background:linear-gradient(90deg, rgba(0,16,42,.92) 0%, rgba(0,16,42,.35) 22%, rgba(0,16,42,0) 55%);
  }
  /* Filete dorado vertical en la costura */
  .portada__figura::before {
    content:""; position:absolute; z-index:2; inset-block:0; inset-inline-start:0;
    width:3px; background:var(--oro-500);
  }
}
@media (max-width:1023px) {
  /* Apilada, la foto se ve completa: no se recorta a una proporción fija,
     porque la imagen puede ser una composición de varias escenas. */
  .portada__figura { aspect-ratio:auto; }
  .portada__figura img { height:auto; }
  .portada--partida .portada__panel { order:2; }
}

.portada__etiqueta { color:var(--oro-300); }

/* Portada apilada (por debajo de 1024): el titular se mide contra el
   ancho completo menos los márgenes. */
.portada--partida h1 { font-size:clamp(1.625rem, 1.1rem + 2.2vw, 2.25rem); }



/* Datos de la portada, con la cifra destacada */
.portada__datos {
  list-style:none; margin:var(--e-7) 0 0; padding:var(--e-5) 0 0;
  display:grid; gap:var(--e-3);
  border-top:1px solid var(--azul-600);
}
.portada__datos li {
  display:flex; align-items:center; gap:var(--e-3);
  font-family:var(--fuente-ui); font-size:var(--t-micro);
  color:var(--azul-200);
}
.portada__datos svg { width:20px; height:20px; color:var(--oro-400); flex-shrink:0; }
.portada__datos strong {
  color:#FFFFFF; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.portada h1 { margin-bottom:var(--e-5); }
.portada h1 .segunda-linea { display:block; color:var(--oro-300); }
.portada p { color:var(--azul-200); font-size:var(--t-lead); max-width:600px; }
.portada .grupo-botones { margin-top:var(--e-7); }

.portada__pie {
  display:flex; flex-wrap:wrap; gap:var(--e-3) var(--e-6);
  margin-top:var(--e-8); padding-top:var(--e-5);
  border-top:1px solid var(--azul-600);
  font-family:var(--fuente-ui); font-size:var(--t-micro);
  color:var(--azul-200);
}
.portada__pie span { display:flex; align-items:center; gap:var(--e-2); }
.portada__pie svg { width:20px; height:20px; color:var(--oro-400); flex-shrink:0; }

/* Portada corta para páginas interiores */
.portada--interior .portada__interior { padding-block:calc(var(--salto-seccion) * .7); }
.portada--interior h1 { font-size:clamp(1.875rem, 1.2rem + 2.6vw, 3rem); }

/* ---------------------------------------------------------------
   7. FRANJA GRATUITO
   --------------------------------------------------------------- */
.franja-gratuito {
  background:var(--oro-500);
  color:var(--azul-900);
}
.franja-gratuito__interior {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:var(--e-3) var(--e-5);
  padding-block:var(--e-5);
  text-align:center;
}
.franja-gratuito p {
  margin:0;
  font-family:var(--fuente-ui); font-weight:600;
  font-size:var(--t-menor); letter-spacing:.02em;
}
.franja-gratuito strong { font-weight:700; }

/* ---------------------------------------------------------------
   8. REJILLAS Y TARJETAS
   --------------------------------------------------------------- */
.rejilla { display:grid; gap:var(--e-5); }
@media (min-width:640px)  { .rejilla--2 { grid-template-columns:repeat(2, 1fr); } }
@media (min-width:640px)  { .rejilla--3 { grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1024px) { .rejilla--3 { grid-template-columns:repeat(3, 1fr); } }
@media (min-width:640px)  { .rejilla--4 { grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1024px) { .rejilla--4 { grid-template-columns:repeat(4, 1fr); } }

/* --- Tarjeta de sala: número Cinzel dorado + filete dorado superior --- */
.sala {
  display:flex; flex-direction:column;
  background:var(--fondo);
  border:1px solid var(--borde);
  border-top:3px solid var(--oro-500);
  border-radius:var(--r-tarjeta);
  box-shadow:var(--s-1);
  overflow:hidden;
  text-decoration:none; color:inherit;
  transition:box-shadow var(--transicion), transform var(--transicion), border-color var(--transicion);
}
.sala__numero, .cifra__valor, .espacio__numero, .temario__numero {
  font-variant-numeric:tabular-nums;
}
a.sala:hover { box-shadow:var(--s-2); transform:translateY(-3px); text-decoration:none; }
a.sala:hover .sala__foto { transform:scale(1.045); }
[data-tema="oscuro"] .sala { background:var(--azul-800); }
[data-tema="oscuro"] a.sala:hover { border-color:var(--azul-500); }

.sala__foto {
  aspect-ratio:3 / 2; width:100%; object-fit:cover; background:var(--azul-800);
  transition:transform var(--transicion-lenta);
}
.sala__cuerpo { padding:var(--e-5); display:flex; flex-direction:column; flex:1; gap:var(--e-2); }
.sala__numero {
  font-family:var(--fuente-titulo); font-weight:700;
  font-size:var(--t-h3); line-height:1;
  color:var(--acento);
  letter-spacing:.02em;
}
[data-tema="oscuro"] .sala__numero { color:var(--oro-400); }
.sala__titulo {
  font-family:var(--fuente-titulo); text-transform:uppercase; letter-spacing:.02em;
  font-size:var(--t-h4); font-weight:600; line-height:1.25;
  margin:0;
}
.sala__texto { font-size:var(--t-menor); color:var(--texto-suave); margin:0; }
.sala__enlace {
  margin-top:auto; padding-top:var(--e-3);
  font-family:var(--fuente-ui); font-size:var(--t-micro); font-weight:600;
  color:var(--acento-texto);
  display:flex; align-items:center; gap:var(--e-2);
}
.sala__enlace svg { width:16px; height:16px; transition:transform var(--transicion); }
a.sala:hover .sala__enlace svg { transform:translateX(3px); }

/* --- Tarjeta genérica --- */
.tarjeta {
  background:var(--fondo);
  border:1px solid var(--borde);
  border-radius:var(--r-tarjeta);
  box-shadow:var(--s-1);
  padding:var(--e-6);
}
[data-tema="oscuro"] .tarjeta { background:var(--azul-800); }
.seccion--pergamino .tarjeta { background:var(--fondo); }
[data-tema="oscuro"] .seccion--pergamino .tarjeta { background:var(--azul-900); }
.tarjeta__icono {
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; margin-bottom:var(--e-4);
  border-radius:var(--r-boton);
  background:var(--oro-50); color:var(--acento-texto);
}
[data-tema="oscuro"] .tarjeta__icono { background:rgba(216,155,0,.14); color:var(--oro-300); }
.tarjeta__icono svg { width:24px; height:24px; }
.tarjeta h3 { font-size:var(--t-h4); }
.tarjeta p { font-size:var(--t-menor); color:var(--texto-suave); }

/* Tarjeta sobre fondo oscuro */
.seccion--onix .tarjeta, .seccion--azul .tarjeta {
  background:var(--azul-800); border-color:var(--azul-600); box-shadow:none;
}
.seccion--azul .tarjeta { background:rgba(0,16,42,.45); }

/* ---------------------------------------------------------------
   9. BLOQUES DE ESPACIO (página Los espacios)
   --------------------------------------------------------------- */
.espacio {
  display:grid; gap:var(--e-6);
  padding-block:var(--salto-seccion);
  border-top:1px solid var(--borde);
  scroll-margin-top:calc(var(--cabecera-alto) + 80px);  /* cabecera + índice pegajoso */
}
.espacio:first-of-type { border-top:0; }
@media (min-width:900px) {
  .espacio { grid-template-columns:1fr 1fr; gap:var(--e-8); align-items:center; }
  .espacio--invertido .espacio__medios { order:2; }
}
.espacio__texto h2 { font-size:clamp(1.5rem, 1.1rem + 1.6vw, 2rem); }
.espacio__numero {
  font-family:var(--fuente-titulo); font-weight:700; font-size:3rem; line-height:1;
  color:var(--acento); display:block; margin-bottom:var(--e-3);
}
[data-tema="oscuro"] .espacio__numero { color:var(--oro-400); }
.espacio__medios { display:grid; gap:var(--e-3); }
.espacio__medios img {
  width:100%; border-radius:var(--r-tarjeta); box-shadow:var(--s-1);
  /* Sin recorte: en el detalle la foto se ve completa, tal como se tomó. */
}
.espacio__medios--dos { grid-template-columns:1fr 1fr; }
.espacio__medios--dos img { aspect-ratio:3 / 4; object-fit:cover; }
.espacio__sin-foto {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--e-3);
  aspect-ratio:4 / 3;
  border:1px dashed var(--borde); border-radius:var(--r-tarjeta);
  color:var(--texto-tenue); text-align:center; padding:var(--e-6);
  font-family:var(--fuente-ui); font-size:var(--t-micro);
}
.espacio__sin-foto svg { width:32px; height:32px; color:var(--acento); }

/* ---------------------------------------------------------------
   10. LISTAS
   --------------------------------------------------------------- */
.lista-check { list-style:none; padding:0; margin:0; display:grid; gap:var(--e-3); }
.lista-check li { display:flex; gap:var(--e-3); align-items:flex-start; }
.lista-check svg { width:24px; height:24px; flex-shrink:0; color:var(--acento); margin-top:3px; }
[data-tema="oscuro"] .lista-check svg { color:var(--oro-400); }
.seccion--onix .lista-check svg, .seccion--azul .lista-check svg { color:var(--oro-400); }

.lista-numerada {
  list-style:none; counter-reset:paso; padding:0; margin:0;
  display:grid; gap:var(--e-6);
  max-width:760px;   /* deja la columna de texto dentro de los 680 px */
}
.lista-numerada > li { counter-increment:paso; display:grid; grid-template-columns:auto 1fr; gap:var(--e-5); }
.lista-numerada > li > div { max-width:var(--ancho-lectura); }
.lista-numerada > li::before {
  content:counter(paso, decimal-leading-zero);
  font-family:var(--fuente-titulo); font-weight:700; font-size:var(--t-h3);
  line-height:1.2; color:var(--acento);
}
[data-tema="oscuro"] .lista-numerada > li::before { color:var(--oro-400); }
.lista-numerada h3 { font-size:var(--t-h4); }
.lista-numerada p { font-size:var(--t-menor); color:var(--texto-suave); margin:0; }

/* Herramientas del temario */
.herramienta {
  display:flex; flex-direction:column; gap:var(--e-2);
  padding:var(--e-5);
  background:var(--fondo);
  border:1px solid var(--borde);
  border-left:3px solid var(--oro-500);
  border-radius:0 var(--r-boton) var(--r-boton) 0;
}
[data-tema="oscuro"] .herramienta { background:var(--azul-800); }
.herramienta h3 {
  font-family:var(--fuente-ui); font-size:var(--t-menor); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; margin:0;
}
.herramienta p { font-size:var(--t-micro); color:var(--texto-suave); margin:0; line-height:1.65; }

/* Cifras */
.cifra { text-align:center; }
.cifra__valor {
  display:block;
  font-family:var(--fuente-titulo); font-weight:700;
  font-size:clamp(2.5rem, 1.6rem + 3vw, 3.5rem); line-height:1;
  color:var(--acento);
  margin-bottom:var(--e-2);
}
[data-tema="oscuro"] .cifra__valor { color:var(--oro-400); }
.seccion--onix .cifra__valor, .seccion--azul .cifra__valor { color:var(--oro-400); }
.cifra__nombre {
  font-family:var(--fuente-ui); font-size:var(--t-micro);
  letter-spacing:.08em; text-transform:uppercase; color:var(--texto-suave);
}

/* ---------------------------------------------------------------
   11. CITA
   --------------------------------------------------------------- */
.cita {
  margin:0; padding:0;
  max-width:var(--ancho-lectura);
}
.cita blockquote {
  margin:0 0 var(--e-4);
  font-size:clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height:1.5; font-style:italic;
}
.cita figcaption {
  font-family:var(--fuente-ui); font-size:var(--t-micro);
  letter-spacing:.08em; text-transform:uppercase; color:var(--texto-suave);
}

/* ---------------------------------------------------------------
   12. MEDIOS CON TEXTO
   --------------------------------------------------------------- */
.duo { display:grid; gap:var(--e-7); align-items:center; }
@media (min-width:900px) { .duo { grid-template-columns:1fr 1fr; gap:var(--e-8); } }
.duo--invertido .duo__medios { order:-1; }
@media (max-width:899px) { .duo--invertido .duo__medios { order:0; } }
.duo__medios img { width:100%; border-radius:var(--r-tarjeta); box-shadow:var(--s-2); }
.seccion--onix .duo__medios img, .seccion--azul .duo__medios img { box-shadow:none; }

.figura-ancha img {
  width:100%; border-radius:var(--r-tarjeta);
  aspect-ratio:16 / 9; object-fit:cover;
}
/* Para imágenes verticales: se muestran completas y centradas */
.figura-ancha--alta img {
  aspect-ratio:auto; max-width:760px;
  margin-inline:auto; box-shadow:var(--s-2);
}
.figura-ancha--alta figcaption { max-width:760px; margin-inline:auto; }
.figura-ancha figcaption {
  margin-top:var(--e-3);
  font-family:var(--fuente-ui); font-size:var(--t-micro); color:var(--texto-tenue);
}

/* ---------------------------------------------------------------
   13. CONTACTO
   --------------------------------------------------------------- */
.dato { display:flex; gap:var(--e-4); align-items:flex-start; }
.dato svg { width:24px; height:24px; flex-shrink:0; color:var(--acento); margin-top:4px; }
[data-tema="oscuro"] .dato svg { color:var(--oro-400); }
.seccion--onix .dato svg, .seccion--azul .dato svg { color:var(--oro-400); }
.dato__titulo {
  font-family:var(--fuente-ui); font-size:var(--t-etiqueta); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--texto-suave);
  margin:0 0 var(--e-1);
}
.dato__valor { margin:0; font-size:var(--t-menor); }
.dato__valor a { color:inherit; }

.telefonos { list-style:none; margin:0; padding:0; display:grid; gap:var(--e-2); }
.telefonos a {
  display:inline-flex; align-items:center; gap:var(--e-2);
  font-family:var(--fuente-ui); font-variant-numeric:tabular-nums;
  text-decoration:none; color:inherit;
}
.telefonos a:hover { color:var(--acento-texto); }
.telefonos svg { width:20px; height:20px; color:var(--acento); }

.pildora {
  display:inline-flex; align-items:center; gap:var(--e-2);
  padding:var(--e-2) var(--e-4);
  border-radius:var(--r-pildora);
  border:1px solid var(--borde);
  font-family:var(--fuente-ui); font-size:var(--t-micro); font-weight:500;
  color:var(--texto-suave);
}
.pildora svg { width:16px; height:16px; color:var(--acento); }
.grupo-pildoras { display:flex; flex-wrap:wrap; gap:var(--e-3); }

.mapa {
  width:100%; border:0; aspect-ratio:16 / 10;
  border-radius:var(--r-tarjeta);
  filter:saturate(.85);
}

/* ---------------------------------------------------------------
   14. LLAMADO FINAL
   --------------------------------------------------------------- */
.llamado {
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--azul-900); color:#FFFFFF;
  text-align:center;
}
.llamado__marca-agua {
  position:absolute; z-index:-1; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(560px, 90%); opacity:.16; pointer-events:none;
}
.llamado h2 { color:#FFFFFF; }
.llamado p { color:var(--azul-200); max-width:560px; margin-inline:auto; }
.llamado .grupo-botones { justify-content:center; margin-top:var(--e-7); }

/* ---------------------------------------------------------------
   15. PIE DE PÁGINA
   --------------------------------------------------------------- */
.pie {
  background:var(--azul-900); color:#FFFFFF;
  border-top:3px solid var(--oro-500);
}
.pie__superior {
  display:grid; gap:var(--e-7);
  padding-block:var(--salto-seccion) var(--e-8);
}
@media (min-width:768px)  { .pie__superior { grid-template-columns:1.4fr 1fr 1fr; gap:var(--e-8); } }
@media (min-width:1024px) { .pie__superior { grid-template-columns:1.6fr 1fr 1fr 1.2fr; } }

.pie__logo { width:260px; margin-bottom:var(--e-5); }
.pie h2 {
  font-family:var(--fuente-ui); font-size:var(--t-etiqueta); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--oro-300);
  margin:0 0 var(--e-4);
}
.pie p, .pie li { color:var(--azul-200); font-size:var(--t-menor); }
.pie ul { list-style:none; margin:0; padding:0; display:grid; gap:var(--e-2); }
.pie a { color:var(--azul-200); text-decoration:none; }
.pie a:hover { color:#FFFFFF; text-decoration:underline; text-underline-offset:3px; }
.pie__gratuito {
  display:inline-flex; align-items:center; gap:var(--e-2);
  margin-top:var(--e-5); padding:var(--e-2) var(--e-4);
  border:1px solid var(--oro-600); border-radius:var(--r-pildora);
  font-family:var(--fuente-ui); font-size:var(--t-micro); font-weight:600;
  color:var(--oro-300);
}
.pie__inferior {
  display:flex; flex-wrap:wrap; gap:var(--e-3) var(--e-6);
  justify-content:space-between; align-items:center;
  padding-block:var(--e-5);
  border-top:1px solid var(--azul-600);
  font-family:var(--fuente-ui); font-size:var(--t-micro);
  color:var(--azul-300);
}
.pie__inferior p { color:var(--azul-300); font-size:var(--t-micro); margin:0; }

/* ---------------------------------------------------------------
   16. WHATSAPP FLOTANTE
   --------------------------------------------------------------- */
.flotante {
  position:fixed; right:var(--e-5); bottom:var(--e-5); z-index:40;
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px;
  background:var(--oro-500); color:var(--azul-900);
  border-radius:var(--r-pildora);
  box-shadow:var(--s-3);
  text-decoration:none;
  transition:transform var(--transicion), background var(--transicion);
}
[data-tema="oscuro"] .flotante { box-shadow:0 12px 32px rgba(0,0,0,.5); }
.flotante:hover { background:var(--oro-400); transform:scale(1.05); }
.flotante svg { width:28px; height:28px; }

/* ---------------------------------------------------------------
   17. APARICIÓN SUAVE
   --------------------------------------------------------------- */
.js .aparece {
  opacity:0; transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.js .aparece.visible { opacity:1; transform:none; }
/* Escalonado dentro de una misma rejilla: entran una tras otra */
.js .rejilla > .aparece:nth-child(2)  { transition-delay:70ms; }
.js .rejilla > .aparece:nth-child(3)  { transition-delay:140ms; }
.js .rejilla > .aparece:nth-child(4)  { transition-delay:210ms; }
.js .rejilla > .aparece:nth-child(5)  { transition-delay:70ms; }
.js .rejilla > .aparece:nth-child(6)  { transition-delay:140ms; }
.js .rejilla > .aparece:nth-child(7)  { transition-delay:210ms; }
.js .temario > .aparece:nth-child(3n+2) { transition-delay:70ms; }
.js .temario > .aparece:nth-child(3n)   { transition-delay:140ms; }
@media (prefers-reduced-motion:reduce) {
  .js .aparece { opacity:1; transform:none; transition:none; }
  .js .aparece[class] { transition-delay:0ms; }
}

/* ---------------------------------------------------------------
   18. IMPRESIÓN
   --------------------------------------------------------------- */
@media print {
  .cabecera, .menu-movil, .flotante, .llamado, .salto-contenido { display:none !important; }
  body { background:#FFFFFF; color:#10253F; font-size:11pt; }
  .seccion { padding-block:16pt; }
  a[href^="http"]::after { content:" (" attr(href) ")"; font-size:9pt; color:#545D69; }
}

/* --- Cierre de la rejilla de salas --- */
.pie-rejilla { margin:var(--e-7) 0 0; }

/* ---------------------------------------------------------------
   19. ÍNDICE DE SALAS  (página Los espacios)
   --------------------------------------------------------------- */
.indice-salas {
  background:var(--fondo-alt);
  border-bottom:1px solid var(--borde);
  position:sticky; top:calc(var(--cabecera-alto) + 3px); z-index:30;
}
[data-tema="oscuro"] .indice-salas { background:var(--azul-800); }
.indice-salas__interior {
  display:flex; gap:var(--e-2);
  overflow-x:auto; scrollbar-width:thin;
  padding-block:var(--e-3);
  -webkit-overflow-scrolling:touch;
}
.indice-salas a {
  display:inline-flex; align-items:baseline; gap:var(--e-2);
  flex-shrink:0;
  padding:var(--e-2) var(--e-4);
  border-radius:var(--r-pildora);
  font-family:var(--fuente-ui); font-size:var(--t-micro); font-weight:500;
  color:var(--texto); text-decoration:none;
  border:1px solid transparent;
  transition:border-color var(--transicion), background var(--transicion);
}
.indice-salas a:hover { border-color:var(--oro-500); background:var(--fondo); }
[data-tema="oscuro"] .indice-salas a:hover { background:rgba(255,255,255,.06); }
.indice-salas a span {
  font-family:var(--fuente-titulo); font-weight:700;
  color:var(--acento-texto);
}

/* ---------------------------------------------------------------
   20. TEMARIO  (página Prácticas)
   --------------------------------------------------------------- */
.temario {
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--e-4);
}
@media (min-width:640px)  { .temario { grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1024px) { .temario { grid-template-columns:repeat(3, 1fr); } }

.temario__item {
  display:flex; align-items:flex-start; gap:var(--e-4);
  padding:var(--e-5);
  background:var(--fondo);
  border:1px solid var(--borde);
  border-top:3px solid var(--oro-500);
  border-radius:var(--r-tarjeta);
  box-shadow:var(--s-1);
}
[data-tema="oscuro"] .temario__item { background:var(--azul-900); }
.temario__numero {
  font-family:var(--fuente-titulo); font-weight:700; font-size:var(--t-h4);
  line-height:1.2; color:var(--acento); flex-shrink:0;
}
[data-tema="oscuro"] .temario__numero { color:var(--oro-400); }
.temario__item h3 {
  font-family:var(--fuente-texto); font-weight:600;
  font-size:var(--t-menor); line-height:1.4; margin:0;
}
.temario__item p {
  font-size:var(--t-micro); color:var(--texto-suave);
  margin:var(--e-2) 0 0; line-height:1.65;
}

.nota {
  margin-top:var(--e-7);
  max-width:var(--ancho-lectura);
  font-size:var(--t-menor); color:var(--texto-suave);
  padding-left:var(--e-4);
  border-left:3px solid var(--borde);
}

/* ---------------------------------------------------------------
   21. PREGUNTAS FRECUENTES
   --------------------------------------------------------------- */
.preguntas { display:grid; gap:var(--e-3); max-width:728px; }  /* 680 px de lectura + relleno */

.pregunta {
  background:var(--fondo);
  border:1px solid var(--borde);
  border-radius:var(--r-tarjeta);
  box-shadow:var(--s-1);
  overflow:hidden;
}
[data-tema="oscuro"] .pregunta { background:var(--azul-900); }

.pregunta summary {
  display:flex; align-items:center; justify-content:space-between; gap:var(--e-4);
  padding:var(--e-5);
  font-family:var(--fuente-ui); font-size:var(--t-menor); font-weight:600;
  cursor:pointer; list-style:none;
  transition:color var(--transicion);
}
.pregunta summary::-webkit-details-marker { display:none; }
.pregunta summary:hover { color:var(--acento-texto); }
.pregunta summary::after {
  content:""; flex-shrink:0;
  width:12px; height:12px;
  border-right:2px solid var(--acento);
  border-bottom:2px solid var(--acento);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--transicion);
}
.pregunta[open] summary::after { transform:rotate(-135deg) translate(-2px,-2px); }
.pregunta__cuerpo { padding:0 var(--e-5) var(--e-5); }
.pregunta__cuerpo p { font-size:var(--t-menor); color:var(--texto-suave); }