@charset "UTF-8";
/* ==========================================================================
   Global Test — estilos compartidos por las cuatro páginas
   --------------------------------------------------------------------------
   Aquí va solo lo común: variables de marca, reinicio, tipografía base,
   botones, arcos de apoyo y accesibilidad.

   Cada página carga además su propia hoja:
     index.html       -> estilos.css + index.css
     plataforma.html  -> estilos.css + plataforma.css
     gracias.html     -> estilos.css + paginas-mensaje.css
     404.html         -> estilos.css + paginas-mensaje.css

   Si un estilo sirve para una sola página, va en la hoja de esa página.
   ========================================================================== */

/* ---------- Variables de marca ---------- */
:root{
  /* Azules */
  --azul:#000B3B;
  --azul-arco:#1B2FD1;
  --azul-suave:#0A1550;
  --azul-2:#0A1550;          /* mismo color que --azul-suave; lo usa plataforma.css */

  /* Naranjas */
  --naranja:#FF7B02;
  --naranja-claro:#FF9633;
  --naranja-2:#FF9633;       /* mismo color que --naranja-claro; lo usa plataforma.css */

  /* Escala de contenido — monocromática, derivada del azul de marca.
     Es lo que colorea DATOS: series de gráficas y la corrección de una respuesta.
     No se mezcla con la paleta de identidad ni con el semáforo. Ver CLAUDE.md. */
  --tinta-900:#0D1C43;
  --tinta-700:#2D3F69;       /* serie 1 · opción correcta */
  --tinta-400:#6E84B2;       /* serie 2 */
  --tinta-200:#B4C1DC;       /* serie 3, solo con etiqueta visible */
  --tinta-050:#EEF1F8;       /* fondo de la opción correcta */
  --neutro:#6E7488;          /* la opción que el estudiante marcó y estaba mal */
  --neutro-borde:#B4BAC9;

  /* Semáforo del tablero docente */
  --verde:#12B76A;
  --amarillo:#F5A623;
  --rojo:#E5484D;

  /* Identidad de área — dice DE QUÉ PRUEBA vienes.
     Es un rótulo, no un dato ni un estado: viste el contexto (ícono, chip,
     banda, barra de progreso de la sesión) y nunca una acción, una serie de
     gráfica ni un estado de cumplimiento. Ver CLAUDE.md.
     Los tres tonos de cada área se generaron y se verificaron: la base pasa
     4,5:1 sobre blanco y sobre su propia superficie. */
  --area-lec:#7D492C;        /* Lectura crítica       · siena   7,3:1 s/blanco */
  --area-mat:#5A34B2;        /* Matemáticas           · violeta 8,2:1 */
  --area-soc:#1841A0;        /* Sociales y ciudadanas · azul    9,1:1 */
  --area-cie:#037272;        /* Ciencias naturales    · petróleo 5,8:1 */
  --area-ing:#9D2F7C;        /* Inglés                · magenta 6,7:1 */

  --area-lec-sup:#F3E5DD;
  --area-mat-sup:#E9E3F8;
  --area-soc-sup:#D8E2F8;
  --area-cie-sup:#C9F8F8;
  --area-ing-sup:#F9E7F3;

  --area-lec-borde:#E2C6B6;
  --area-mat-borde:#CEC2EB;
  --area-soc-borde:#B1C3EC;
  --area-cie-borde:#98EBEB;
  --area-ing-borde:#ECC6E0;

  /* Neutros */
  --blanco:#FFFFFF;
  --gris:#F4F5F9;
  --borde:#E4E6F0;
  --texto:#3C3C3B;

  /* Formas */
  --radio-lobulo:9999px;
}

/* ---------- Reinicio y tipografía base ---------- */
*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:'Poppins',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* El fondo, el color de texto y el interlineado los define cada página,
   porque la landing es blanca, la plataforma gris y las de mensaje azules. */

/* ---------- Arcos azules de apoyo ---------- */
.arco,.hero-arco,.plataforma-arco,.meta-arco{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
}
.arco circle,.hero-arco circle,.plataforma-arco circle,.meta-arco circle{
  fill:none;stroke:var(--azul-arco);
}
.arco circle,.hero-arco circle{stroke-width:14}

/* ---------- Marca (logo + texto) ---------- */
.marca{display:flex;align-items:center;text-decoration:none}
.marca img{width:auto;display:block}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:15px 30px;border-radius:var(--radio-lobulo);
  font-weight:600;font-size:1rem;text-decoration:none;
  border:2px solid transparent;cursor:pointer;
  transition:background .2s,transform .2s,border-color .2s,color .2s;
}
.btn svg{width:19px;height:19px}

.btn-primario{background:var(--naranja);color:var(--azul)}
.btn-primario:hover{background:var(--naranja-claro);transform:translateY(-2px)}

/* Sobre fondo oscuro */
.btn-secundario{border-color:rgba(255,255,255,.35);color:var(--blanco)}
.btn-secundario:hover{border-color:var(--naranja);color:var(--naranja)}

/* ---------- Accesibilidad ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--naranja);outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}