/* =============================================================
   SYNAPSE MÉXICO — hoja principal
   =============================================================

   El orden de capas se declara aquí, una sola vez. A partir de
   este punto la especificidad deja de importar: una regla de la
   capa `componentes` siempre gana a una de `base`, aunque tenga
   menos peso de selector.

   Esto resuelve de raíz el problema del CSS anterior, donde
   themes/light.css pisaba a base/variables.css solo por el orden
   de las etiquetas <link> en el layout, y bastaba reordenarlas
   para romper la paleta entera.

   Las hojas de página (pages/*.css) se cargan por separado, solo
   en la ruta que las necesita. El layout original enlazaba las
   cuatro en todas las páginas.
   ============================================================= */

@layer reset, base, layout, componentes, utilidades;

@import url('./tokens.css');
@import url('./base.css');
@import url('./layout.css');

@import url('./components/boton.css');
@import url('./components/cabecera.css');
@import url('./components/carrusel.css');
@import url('./components/pie.css');
@import url('./components/tarjeta.css');
@import url('./components/traza.css');
@import url('./components/formulario.css');
@import url('./components/migas.css');

/* -------------------------------------------------------------
   UTILIDADES
   Deliberadamente pocas. Una utilidad por cada propiedad CSS es
   reinventar Tailwind a mano y peor.
   ------------------------------------------------------------- */

@layer utilidades {
  /* Estas utilidades existen porque la CSP no permite atributos
     `style=""` en el HTML: sin 'unsafe-inline' en style-src, el
     navegador los descarta. En vez de abrir la política, el puñado de
     ajustes puntuales que había en las vistas vive aquí. */
  .retraso-corto  { --retraso: 120ms; }
  .espacio-arriba { margin-top: var(--e-6); }
  .epigrafe--senal { color: var(--signal); }
  /* Botón secundario sobre el bloque oscuro de llamada final. */
  .boton--sobre-oscuro {
    --boton-texto: var(--hueso);
    --boton-borde: color-mix(in oklab, var(--hueso) 26%, transparent);
  }
  .boton--sobre-oscuro:hover { --boton-borde: var(--hueso); }

  .centrado-texto { text-align: center; }
  .medida         { max-width: var(--ancho-texto); }
  .sin-margen     { margin: 0; }
  .apilar-auto    { margin-top: auto; }

  /* Resalta una palabra del titular con la traza por debajo.
     Se usa una sola vez por página: si se repite, deja de resaltar. */
  .destacado {
    position: relative;
    display: inline-block;
    white-space: nowrap;
  }
  .destacado::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.06em;
    height: 0.14em;
    background: var(--grad-señal);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    animation: subrayar 900ms var(--curva-salida) 500ms forwards;
  }
  @keyframes subrayar { to { transform: scaleX(1); } }

  @media (prefers-reduced-motion: reduce) {
    .destacado::after { animation: none; transform: scaleX(1); }
  }
}