/* Escuela de Inteligencia — modo oscuro (Manual de Identidad v2 / claude/15 §15.1)
   Fuentes: Lora (titulares) + Public Sans (cuerpo), alojadas en el propio servidor.
   [DATO PENDIENTE] los archivos de fuente reales los sube Jose en assets/fonts/ — ver PENDIENTES.md */

@font-face{
  font-family:'Lora';
  src:url('../fonts/lora-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Public Sans';
  src:url('../fonts/public-sans-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --fondo:#121416;
  --superficie:#1C1F22;
  --dorado:#C9AB6B;
  --blanco-roto:#F3F0EA;
  --teal:#007494;
  --radio:10px;
  --max-ancho:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--fondo);
  color:var(--blanco-roto);
  font-family:'Public Sans', Arial, sans-serif;
  font-size:18px;
  line-height:1.6;
}
h1,h2,h3,h4{
  font-family:'Lora', Georgia, serif;
  font-weight:600;
  line-height:1.25;
  color:var(--blanco-roto);
  margin:0 0 .6em;
}
a{color:var(--dorado); text-decoration:none}
a:hover, a:focus{text-decoration:underline}
img{max-width:100%; height:auto; display:block}

.contenedor{max-width:var(--max-ancho); margin:0 auto; padding:0 24px}

/* Cabecera */
.cabecera{
  position:sticky; top:0; z-index:50;
  background:rgba(18,20,22,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(243,240,234,.08);
}
.cabecera .fila{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:24px}
.marca{display:flex; align-items:center; gap:12px}
.marca img{height:40px; width:auto}
.marca .texto-marca{font-size:13px; letter-spacing:.04em; opacity:.85}
.nav{display:flex; gap:22px; flex-wrap:wrap}
.nav a{color:var(--blanco-roto); font-weight:500; font-size:15px}
.nav a:hover{color:var(--dorado)}
.cta{
  display:inline-block; background:var(--dorado); color:#1F1706 !important;
  font-weight:600; padding:10px 20px; border-radius:var(--radio); text-decoration:none;
}
.cta:hover{filter:brightness(1.08); text-decoration:none}

/* Secciones */
section{padding:64px 0}
.tarjeta{background:var(--superficie); border-radius:var(--radio); padding:28px}
.rejilla{display:grid; gap:20px}
.rejilla-3{grid-template-columns:repeat(auto-fit, minmax(260px,1fr))}

/* Botón flotante de WhatsApp (claude/14 §1) */
.whatsapp-flotante{
  position:fixed; bottom:20px; right:20px; z-index:60;
  background:var(--dorado); color:#1F1706; border-radius:50px;
  padding:14px 18px; font-weight:600; box-shadow:0 6px 18px rgba(0,0,0,.4);
}

/* Formularios */
label{display:block; font-weight:500; margin-bottom:6px}
input, select, textarea{
  width:100%; padding:12px 14px; border-radius:8px; border:1px solid rgba(243,240,234,.2);
  background:var(--superficie); color:var(--blanco-roto); font-family:inherit; font-size:16px;
  margin-bottom:18px;
}
input:focus, select:focus, textarea:focus{outline:2px solid var(--dorado); outline-offset:2px}
.campo-error{color:#ff8a8a; font-size:14px; margin-top:-12px; margin-bottom:14px}
button[type="submit"]{
  background:var(--dorado); color:#1F1706; font-weight:600; border:none;
  padding:14px 26px; border-radius:var(--radio); font-size:16px; cursor:pointer;
}
button[type="submit"]:hover{filter:brightness(1.08)}

/* Pie */
.pie{border-top:1px solid rgba(243,240,234,.08); padding:48px 0; font-size:14px; opacity:.85}
.pie .rejilla{grid-template-columns:repeat(auto-fit, minmax(180px,1fr))}
.pie a{color:var(--blanco-roto)}
.pie a:hover{color:var(--dorado)}

/* Fase D — ayudas de contenido */
.rejilla-2{grid-template-columns:repeat(auto-fit, minmax(320px,1fr))}
.badge{
  display:inline-block; font-size:12px; font-weight:600; letter-spacing:.03em;
  padding:3px 10px; border-radius:50px; margin-bottom:10px;
}
.badge-provisional{background:rgba(201,171,107,.15); color:var(--dorado); border:1px solid rgba(201,171,107,.4)}
.badge-cerrado{background:rgba(0,116,148,.18); color:#5fc2db; border:1px solid rgba(0,116,148,.4)}
.requisito{font-size:13px; opacity:.7; margin-top:-6px}
.requisito::before{content:"🔒 "}
.tabla-wrap{overflow-x:auto; margin:0 0 28px}
table.tabla{width:100%; border-collapse:collapse; font-size:16px; min-width:520px}
table.tabla caption{text-align:left; font-weight:600; margin-bottom:10px; color:var(--dorado)}
table.tabla th, table.tabla td{text-align:left; padding:12px 14px; border-bottom:1px solid rgba(243,240,234,.1)}
table.tabla th{color:var(--dorado); font-weight:600; font-family:'Lora', Georgia, serif}
table.tabla tbody tr:hover{background:rgba(243,240,234,.03)}
.aviso-destacado{
  background:var(--superficie); border-left:4px solid var(--dorado);
  border-radius:var(--radio); padding:18px 22px; font-weight:600; margin-bottom:28px;
}
.pilar-num{color:var(--dorado); font-family:'Lora', Georgia, serif; font-size:28px; font-weight:700; display:block; margin-bottom:6px}
.credencial{opacity:.85; font-size:15px}
.pendiente-dato{opacity:.65; font-size:14px}
.sede-lista{list-style:none; padding:0; margin:0; display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.sede-lista li{background:var(--superficie); border-radius:var(--radio); padding:14px 16px}

/* Accesibilidad: foco visible siempre, respeto a prefers-reduced-motion */
:focus-visible{outline:2px solid var(--dorado); outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

@media (max-width:860px){
  .nav{display:none} /* [DATO PENDIENTE: menú móvil — se resuelve en Fase B con JS sin frameworks] */
  body{font-size:17px}
}