/*
 * variables.css — Sistema de diseño IPG
 *
 * Archivo: wp-content/themes/ipg-theme/assets/css/variables.css
 *
 * Este archivo define todos los tokens de diseño del sitio como variables CSS.
 * Es la única fuente de verdad para colores, tipografías, espaciados y
 * otros valores de diseño.
 *
 * REGLA DE USO:
 * Nunca escribir colores o tamaños con valores directos en el CSS.
 * Siempre usar las variables definidas aquí.
 *
 * CORRECTO:   color: var(--ipg-color-primary);
 * INCORRECTO: color: #1A3C6E;
 *
 * Si necesitas un color o tamaño nuevo, agrégalo aquí primero,
 * con nombre semántico (que describe el uso, no el valor).
 *
 * @package IPGTheme
 * @version 1.0.0
 */

:root {

  /* ══════════════════════════════════════════════════════════════════════
   * COLORES
   * Los nombres son semánticos: describen el uso, no el valor.
   * ══════════════════════════════════════════════════════════════════════ */

  /* Paleta principal — los dos colores institucionales de IPG.

     El azul marino es el dominante: titulares, superficies oscuras, botones.
     El celeste (--ipg-color-cyan, más abajo) es el que aporta el aire joven,
     pero NO puede llevar texto sobre fondo claro: da 2.33:1, ni siquiera
     llega al mínimo de texto grande. Su sitio es sobre el marino (6.88:1) y
     como elemento decorativo — puntos, degradados, iconos, bordes.

     La paleta usa SOLO estos dos, por decisión de marca: no hay tonos
     intermedios derivados. Eso tiene una consecuencia que conviene tener
     presente al maquetar: el celeste da 2.33:1 sobre blanco, por debajo del
     mínimo WCAG AA (4.5:1 en texto normal, 3:1 en texto grande). Sobre fondo
     claro sirve para elementos decorativos —barras, puntos, iconos, bordes,
     degradados— y para texto grande de caracter ornamental, no para nada que
     alguien tenga que leer con esfuerzo. Sobre el marino, en cambio, da
     6.88:1 y es plenamente legible: esa es su mejor combinación. */
  --ipg-color-primary:        #0E1E4D;   /* Azul marino institucional — 16:1 sobre blanco (AAA) */
  --ipg-color-primary-dark: #111729;   /* Superficie más oscura que el marino (footer) */
  --ipg-color-primary-light:  #13B8E6;   /* Celeste institucional — 6.88:1 sobre el marino */

  /* Paleta secundaria */
  --ipg-color-secondary:       #2E7D32;  /* Verde acento */
  --ipg-color-secondary-light: #43A047;  /* Para hover sobre secundario */

  /* Acento — llamadas a la acción, botones, destacados.
     Pasa del naranja al celeste institucional. Las variantes clara y oscura
     son el mismo celeste mezclado con blanco y con marino: sirven para los
     estados de hover y no introducen un color ajeno a la marca.
     OJO con el texto encima: el celeste da 2.33:1 con blanco y 6.88:1 con
     marino, asi que sobre un fondo de acento el texto va en marino. */
  --ipg-color-accent:       #13B8E6;
  --ipg-color-accent-light: #5ACDEE;   /* celeste + 30% blanco */
  --ipg-color-accent-dark:  #1182B0;   /* celeste + 35% marino */

  /* Azul marino y celeste.
     Van en pareja: el celeste casi no contrasta sobre blanco (2.33:1, no
     llega al mínimo AA de 4.5:1), así que NO sirve para texto sobre fondo
     claro — pero sobre el marino da 7.66:1 y cumple AAA. La combinación
     segura es marino de fondo, celeste encima.
     El marino al revés es de los colores más seguros de la paleta: 16:1
     sobre blanco, y admite texto blanco encima con ese mismo ratio. */
  /* --ipg-color-navy es hoy el MISMO valor que --ipg-color-primary: al pasar
     el marino a ser el color institucional dominante, los dos apuntan al
     mismo sitio. Se mantiene porque hay CSS que ya lo usa (las cifras de
     portada) y porque nombra el color por lo que es, no por su papel. */
  --ipg-color-navy: #0E1E4D;   /* texto sobre blanco 16.01:1 — AAA */
  --ipg-color-cyan: #13B8E6;   /* solo sobre marino u oscuro: 6.88:1 — AA */

  /* Fondos y superficies */
  --ipg-color-background:       #FFFFFF;       /* Fondo de tarjetas y superficies elevadas */
  --ipg-color-surface:  #EFEFEF;       /* Canvas de página — fondo detrás de las tarjetas */
  --ipg-color-surface-2: #EAECF0;      /* Bordes de tarjetas */

  /* Textos */
  --ipg-color-text:        #111729;      /* Texto principal (mismo tono que el fondo del footer) */
  --ipg-color-text-muted:  #555555;      /* Texto secundario (ratio ≈ 5.7:1) */
  --ipg-color-text-subtle:  #767676;      /* Texto de apoyo (mínimo WCAG AA: 4.5:1) */
  --ipg-color-text-inverted: #FFFFFF;   /* Texto sobre fondos oscuros */

  /* Bordes */
  --ipg-color-border:        #DADCE0;
  --ipg-color-border-dark:  #9AA0A6;

  /* Estados */
  --ipg-color-error:        #C62828;
  --ipg-color-error-bg:  #FFEBEE;
  --ipg-color-success:        #2E7D32;
  --ipg-color-success-bg:  #E8F5E9;
  --ipg-color-warning:  #F57F17;
  --ipg-color-warning-bg: #FFFDE7;
  --ipg-color-info:         #13B8E6;
  --ipg-color-info-bg:   #EAF1FE;

  /* Overlay y sombras */
  --ipg-color-overlay: rgba(14, 30, 77, 0.6);   /* Overlay sobre imágenes — el marino */

  /* Punto de estado decorativo (caja de cifras) */
  --ipg-color-status-dot: #34C759;


  /* ══════════════════════════════════════════════════════════════════════
   * TIPOGRAFÍA
   * ══════════════════════════════════════════════════════════════════════ */

  /* Familias tipográficas */
  --ipg-font-primary: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ipg-font-mono:      'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Escala tipográfica (sistema de 8 pasos basado en 16px = 1rem) */
  --ipg-text-2xs:  0.6875rem; /* 11px */
  --ipg-text-xs:   0.75rem;   /* 12px */
  --ipg-text-sm:   0.875rem;  /* 14px */
  --ipg-text-base: 1rem;      /* 16px */
  --ipg-text-md:   1.0625rem; /* 17px */
  --ipg-text-lg:   1.125rem;  /* 18px */
  --ipg-text-xl:   1.25rem;   /* 20px */
  --ipg-text-2xl:  1.5rem;    /* 24px */
  --ipg-text-3xl:  1.875rem;  /* 30px */
  --ipg-text-4xl:  2.25rem;   /* 36px */
  --ipg-text-5xl:  3rem;      /* 48px */
  --ipg-text-6xl:  3.75rem;   /* 60px */
  --ipg-text-7xl:  4.5rem;    /* 72px */
  --ipg-text-8xl:  6rem;      /* 96px */

  /* Pesos tipográficos */
  --ipg-weight-normal:    400;
  --ipg-weight-medium:     500;
  --ipg-weight-semibold:  600;
  --ipg-weight-bold:      700;

  /* Alturas de línea */
  --ipg-leading-tight:  1.25;   /* Para títulos grandes */
  --ipg-leading-normal:    1.5;    /* Para texto de cuerpo */
  --ipg-leading-loose:    1.75;   /* Para texto largo, mayor legibilidad */

  /* Espaciado entre letras */
  --ipg-tracking-normal:   0;
  --ipg-tracking-wide:   0.025em;
  --ipg-tracking-wider: 0.05em;


  /* ══════════════════════════════════════════════════════════════════════
   * ESPACIADOS
   * Sistema basado en múltiplos de 4px (0.25rem)
   * ══════════════════════════════════════════════════════════════════════ */

  --ipg-space-1:  0.25rem;   /*  4px */
  --ipg-space-2:  0.5rem;    /*  8px */
  --ipg-space-3:  0.75rem;   /* 12px */
  --ipg-space-4:  1rem;      /* 16px */
  --ipg-space-5:  1.25rem;   /* 20px */
  --ipg-space-6:  1.5rem;    /* 24px */
  --ipg-space-8:  2rem;      /* 32px */
  --ipg-space-10: 2.5rem;    /* 40px */
  --ipg-space-12: 3rem;      /* 48px */
  --ipg-space-16: 4rem;      /* 64px */
  --ipg-space-20: 5rem;      /* 80px */
  --ipg-space-24: 6rem;      /* 96px */
  --ipg-space-32: 8rem;      /* 128px */


  /* ══════════════════════════════════════════════════════════════════════
   * LAYOUT Y CONTENEDORES
   * ══════════════════════════════════════════════════════════════════════ */

  --ipg-container-max:   1440px;   /* Ancho máximo del contenido */
  --ipg-container-width: min(92%, var(--ipg-container-max));
  --ipg-container-px:    var(--ipg-space-4);  /* Padding horizontal en móvil */

  --ipg-container-content: 720px;  /* Ancho para texto largo (artículos) */
  --ipg-container-narrow:   600px;  /* Formularios y contenido centrado */

  /* "Marco" de página — separación entre el borde del viewport y las
     tarjetas flotantes (header, hero, footer). Ver .site-shell en layout.css. */
  --ipg-shell-gutter:      var(--ipg-space-5);

  /* Marco del banner de pagina: cuanto se separa el hero de los bordes de la
     pantalla y del menu. 12px por los cuatro lados — la variante "Compacta"
     del ejemplo, que es la elegida. Va con --ipg-radius-xl (16px) de radio. */
  --ipg-marco:             var(--ipg-space-3);   /* 12px, a los costados */

  /* Contra el menu va menos que a los lados. El banner cuelga de una barra
     blanca, no del lienzo gris: con el mismo hueco por los cuatro lados esa
     franja de gris de arriba se lee como un despiste de alineacion, y con
     uno mas corto se lee como que el banner esta colgado del menu. */
  --ipg-marco-tope:        var(--ipg-space-1);   /* 4px, contra el menu */


  /* ══════════════════════════════════════════════════════════════════════
   * BORDES Y RADIOS
   * ══════════════════════════════════════════════════════════════════════ */

  --ipg-radius-sm:   4px;
  --ipg-radius:      8px;
  --ipg-radius-lg:   12px;
  --ipg-radius-xl:   16px;
  /* Un peldano mas para franjas grandes —el hero de pagina—, donde 16px se
     pierden a lo ancho de la pantalla y la curva no llega a leerse. */
  --ipg-radius-2xl:  28px;
  --ipg-radius-full: 9999px;   /* Para pills/badges completamente redondeados */


  /* ══════════════════════════════════════════════════════════════════════
   * SOMBRAS
   * ══════════════════════════════════════════════════════════════════════ */

  --ipg-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
  --ipg-shadow:     0 2px 8px rgba(0, 0, 0, 0.10);
  --ipg-shadow-md:  0 4px 16px rgba(0, 0, 0, 0.12);
  --ipg-shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.15);
  --ipg-shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.18);


  /* ══════════════════════════════════════════════════════════════════════
   * TRANSICIONES Y ANIMACIONES
   * ══════════════════════════════════════════════════════════════════════ */

  --ipg-transition-fast:  150ms ease;
  --ipg-transition:         250ms ease;
  --ipg-transition-slow:   400ms ease;


  /* ══════════════════════════════════════════════════════════════════════
   * IMÁGENES
   * ══════════════════════════════════════════════════════════════════════ */

  /* Ancho de la transición del estilo de bloque "Difuminada" — cuánto del
     ancho de la foto ocupa el degradado que la funde con el texto.

     Es UN solo número para todo el sitio, a propósito. La tentación es
     dejar que cada imagen elija el suyo desde el editor, pero entonces
     veinte fotos terminan con veinte fundidos distintos y el conjunto se
     lee accidental en vez de decidido. Con un token, cambiarlo acá los
     mueve todos a la vez y siguen pareciendo del mismo sitio.

     Para una foto SIN fundido no hace falta bajar esto a 0: basta con no
     aplicarle el estilo "Difuminada". */
  --ipg-fundido: 24%;

  /* La variante "por los dos lados" se funde por izquierda Y derecha, asi que
     este numero se gasta DOS veces: con 25% queda la mitad de la foto en
     degradado y la mitad central opaca. Por eso es menor que --ipg-fundido
     y aun asi abarca mas. */
  --ipg-fundido-amplio: 25%;

  /* La variante "flotante" se funde por los CUATRO bordes, asi que este
     numero se gasta cuatro veces y tiene que ser mas corto: con 12% ningun
     canto queda recto contra el fondo y la foto conserva el 76% central
     intacto. Subirlo mucho la deja lavada por todos lados. */
  --ipg-fundido-flotante: 12%;

  /* "Un lado, flotante": mismo fundido de un solo borde que --ipg-fundido,
     pero mas corto. Los otros tres bordes no se difuminan: se despegan con
     esquina redondeada y sombra. */
  --ipg-fundido-suave: 16%;

  /* Tamaño de los iconos que acompanan a un texto (estilos "Icono: ...").
     En em y no en px, para que el icono crezca con el texto que acompana:
     junto a un titulo sale grande y junto a un parrafo, discreto.
     Estaba en 1.05em y se perdia; 1.35em lo deja claramente visible sin que
     compita con la palabra que tiene al lado. */
  --ipg-icono-tam: 1.35em;


  /* ══════════════════════════════════════════════════════════════════════
   * Z-INDEX (orden de capas)
   * Definir aquí para evitar "guerras de z-index"
   * ══════════════════════════════════════════════════════════════════════ */

  --ipg-z-base:      1;
  --ipg-z-dropdown:  100;
  --ipg-z-sticky:    200;
  --ipg-z-fixed:     300;
  --ipg-z-modal:     400;
  --ipg-z-overlay:   500;
  --ipg-z-toast:     600;


  /* ══════════════════════════════════════════════════════════════════════
   * HEADER
   * ══════════════════════════════════════════════════════════════════════ */

  --ipg-header-height:          84px;
  --ipg-header-height-scroll:   76px;

  /* Alto del hero de portada. Único para todos los slides —con texto o solo
     imagen— para que el carrusel no cambie de alto al avanzar. */
  --ipg-hero-height:            clamp(500px, 68vh, 680px);

  /* Duración del fundido entre slides del hero (ver .hero-slide en
     layout.css). El intervalo de AVANCE es otra cosa y vive en
     assets/js/main.js (AUTOPLAY_MS): acá se ajusta cuánto tarda el cruce
     de una imagen a la otra, allá cada cuánto ocurre.
     Bajo prefers-reduced-motion la regla global del final de este archivo
     lo anula, así que no hace falta contemplarlo aparte. */
  --ipg-hero-fade:              600ms;

  /* Piso de altura del banner de pagina (.ipg-page-hero). En movil baja a
     300px — ver el @media de components.css. */
  --ipg-hero-min:               460px;

  /* Velo del hero con foto a un lado ("Fondo: foto a un lado"). Dos numeros
     que deciden cuanta foto se ve:
       --ipg-velo-solido : hasta donde el color tapa por completo
       --ipg-velo-fin    : donde el velo desaparece y la foto queda limpia
     Estaban en 32% y 92%, y ese 92% era el problema: la foto solo se veia
     sin nada encima en el ultimo 8% del ancho, asi que daba igual correrla
     desde el panel — el motivo siempre quedaba bajo el degradado.
     Con 44% y 66% el texto conserva casi la mitad para apoyarse y la foto
     gana un tercio limpio a la derecha. */
  --ipg-velo-solido:            34%;
  --ipg-velo-fin:               56%;

  --ipg-header-bg:         var(--ipg-color-background);
  --ipg-header-bg-scroll:  var(--ipg-color-background);
  --ipg-header-text:         var(--ipg-color-text);

}


/*
 * Reducir movimiento para usuarios que lo prefieren.
 * Respetar esta preferencia es un requisito de accesibilidad.
 * Afecta a animaciones y transiciones en todo el sitio.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}