/* ==========================================================================
   COTRICSA · Sistema de diseño
   Colores extraídos directamente del logotipo.
   ========================================================================== */

:root {
  /* --- Color -------------------------------------------------------------- */
  --marino:        #0F2161;   /* azul del logotipo */
  --marino-900:    #071233;   /* fondos profundos, footer */
  --marino-700:    #0B1949;
  --marino-300:    #4A5B94;   /* texto secundario sobre claro */
  --amarillo:      #FECE00;   /* amarillo del logotipo */
  --amarillo-600:  #D9AF00;   /* hover, bordes */
  --concreto:      #EDEDEA;   /* gris cemento, fondo de sección */
  --concreto-200:  #DCDCD6;
  --acero:         #5B6478;   /* texto de apoyo, metadatos */
  --blanco:        #FFFFFF;
  --tinta:         #14161C;   /* texto de cuerpo */
  --exito:         #197544;
  --alerta:        #B4231E;

  /* --- Tipografía --------------------------------------------------------- */
  --display: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  --cuerpo:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --dato:    'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   1.125rem;
  --t-lg:   1.375rem;
  --t-xl:   1.75rem;
  --t-2xl:  2.25rem;
  --t-3xl:  3rem;
  --t-4xl:  4rem;
  --t-5xl:  5.25rem;

  --track-display: -0.02em;
  --track-eyebrow: 0.16em;
  --track-dato:    0.02em;

  /* --- Espacio ------------------------------------------------------------ */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;
  --e-10: 8rem;

  /* --- Layout ------------------------------------------------------------- */
  --ancho:       1240px;
  --ancho-texto: 68ch;
  --header-h:    72px;

  /* --- Bordes y sombra ---------------------------------------------------- */
  --r-0:    0;
  --r-sm:   2px;
  --borde:  3px;
  --borde-grueso: 5px;
  --sombra: 0 2px 0 0 var(--marino-900);
  --sombra-alta: 0 12px 32px -12px rgba(7, 18, 51, 0.45);

  /* --- Movimiento --------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --rapido: 140ms;
  --normal: 260ms;
}

@media (max-width: 900px) {
  :root {
    --t-3xl: 2.25rem;
    --t-4xl: 2.75rem;
    --t-5xl: 3.25rem;
    --e-9: 4rem;
    --e-10: 5rem;
    --header-h: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --rapido: 0ms; --normal: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}