:root {
	/* Contenedor principal (contenido de página) */
	--contenedor-width: 1380px;
	/* Ancho máximo del bloque interior del site header (desktop / modal barra) */
	--header-width: 1428px;
	--contenedor-padding: 16px;

	/*
	 * Breakpoints (sistema de diseño). Referencia única de valores: usar en JS, calc(), etc.
	 * En @media usar siempre píxeles literales (992px, 991px…) — var() en media queries no es fiable.
	 * Mantener estos valores alineados con los @media del tema.
	 */
	--breakpoint-desktop: 992px;
	--breakpoint-mobile-max: 991px;
	--breakpoint-tablet: 768px;
	--breakpoint-phone-max: 767px;
	/* Barra de administración de WordPress en vista estrecha */
	--breakpoint-wp-admin-bar-mobile: 782px;

	/* Altura del contenido principal: margen superior de .site-main bajo el header fijo */
	--altura-contenido: 150px;
	/* Móvil (max-width: 991px) en main.css: header más bajo; 190 deja demasiado hueco */
	--altura-contenido-mobile: 120px;

	/* Grid listado casos de éxito (columnas / filas) */
	--casos-grid-column-gap: 30px;
	--casos-grid-row-gap: 60px;

	/*
	 * Ratio de fotografías en tarjetas (noticias, casos) y bloques destacados / vídeo en single.
	 * Numerador y denominador (ancho:alto). Ejemplos: 16 y 9 (estándar); 21 y 9 (cinemático); 4 y 3 (clásico).
	 * Tras cambiar el ratio, conviene un tamaño de miniatura acorde en functions.php (add_image_size).
	 */
	--media-aspect-x: 16;
	--media-aspect-y: 9;

	/* Botón card circular (.boton-card en botones.css) */
	--boton-card-size: 48px;
	--boton-card-icon-size: 16px;

	/* Colores - Primary */
	--primary-100: #93bfcf;
	--primary-80: #A9CCD9;
	--primary-60: #BED9E2;
	--primary-40: #D4E5EC;
	--primary-20: #E9F2F5;
	--primary-10: #F4F9FA;
	--primary-5: #FAFCFD;

	/* Colores - Secondary */
	--secondary-100: #196C87;
	--secondary-80: #47899F;
	--secondary-60: #75A7B7;
	--secondary-40: #A3C4CF;
	--secondary-20: #D1E2E7;
	--secondary-10: #E8F0F3;
	--secondary-5: #F3F8F9;

	/* Colores - Accent (Tercero) */
	--accent-100: #86c8bc;
	--accent-80: #9ED3C9;
	--accent-60: #B6DED7;
	--accent-40: #CFE9E4;
	--accent-20: #E7F4F2;
	--accent-10: #F3F9F8;
	--accent-5: #F9FCFC;

	/* Colores - Gris Claro */
	--gray-light-100: #DFDFDD;
	--gray-light-80: #E5E5E4;
	--gray-light-60: #ECECEB;
	--gray-light-40: #F2F2F1;
	--gray-light-20: #F9F9F8;
	--gray-light-10: #FCFCFC;
	--gray-light-5: #FDFDFD;

	/* Tipografía - Títulos: interlineado 120% (Figma) */
	--title-line-height: 1.2;

	/* Colores - Grises neutros */
	--gray-100: #FFFFFF;
	--white-0: #FFFFFF;
	--white-100: #FFFFFF;
	--gray-80: #E5E5E4;
	--gray-60: #6D838B;
	--gray-light-neutral: #DFDFDD;

	/* Colores - Body Text */
	--body-text-100: #545454;

	/* Texto chip categoría noticias (card + single); no equivale a body-text ni black-80 */
	--noticia-category-chip-text: #495057;

	/* Colores - Black */
	--black-100: #212429;
	--black-80: #4D5054;
	--black-60: #7A7C7F;
	--black-40: #A6A7A9;
	--black-30: #BDBDBF;
	--black-20: #D3D3D4;
	--black-10: #E7EAEC;
	--black-5: #F3F5F6;

	/* Tipografías: cuerpo */
	--font-body: 'Public Sans', sans-serif;
	/* IBM Plex Sans (archivos en fonts-families.css → ibm-plex-sans/) */
	--font-ibm-plex-sans: 'IBM Plex Sans', sans-serif;
	--font-ibm-plex-sans-condensed: 'IBM Plex Sans Condensed', sans-serif;
	--font-ibm-plex-sans-semicondensed: 'IBM Plex Sans SemiCondensed', sans-serif;
	/* Títulos = misma familia que .title-* (escala en fonts-sizes.css) */
	--font-title: var(--font-ibm-plex-sans);
	/* Serif solo si lo pides explícito (p. ej. .font-ibm-plex-serif) */
	--font-serif: 'IBM Plex Serif', serif;

	/*
	 * Pesos: mismos valores que @font-face en fonts-families.css (clases en fonts-sizes.css).
	 */
	--font-weight-thin: 100;
	--font-weight-extra-light: 200;
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-semibold: 500;
	--font-weight-semibold-600: 600;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;
	--font-weight-black: 900;

	/*
	 * Body — Public Sans (Figma: Frame 12 móvil / Frame 168 desk).
	 * Interlineado: móvil 100%, desktop ≥992px 140%.
	 */
	--body-line-height-mobile: 100%;
	--body-line-height-desktop: 140%;
	--body-xl-font-size-mobile: 20px;
	--body-xl-font-size-desktop: 28px;
	--body-l-font-size-mobile: 18px;
	--body-l-font-size-desktop: 24px;
	--body-m-font-size-mobile: 18px;
	--body-m-font-size-desktop: 20px;
	--body-s-font-size-mobile: 16px;
	--body-s-font-size-desktop: 18px;
	--body-xs-font-size-mobile: 14px;
	--body-xs-font-size-desktop: 16px;
	--body-xxs-font-size-mobile: 12px;
	--body-xxs-font-size-desktop: 14px;
	--body-xxxs-font-size-mobile: 10px;
	--body-xxxs-font-size-desktop: 12px;

	/*
	 * Menú header: submenús ≈ Body S; selector idioma ≈ Body XS (tamaños por breakpoint).
	 */
	--menu-font-size-mobile: var(--body-s-font-size-mobile);
	--menu-line-height-mobile: var(--body-line-height-mobile);
	--menu-font-size: var(--body-s-font-size-desktop);
	--menu-line-height: var(--body-line-height-desktop);
	--menu-language-font-size-mobile: var(--body-xs-font-size-mobile);
	--menu-language-line-height-mobile: var(--body-line-height-mobile);
	--menu-language-font-size: var(--body-xs-font-size-desktop);
	--menu-language-line-height: var(--body-line-height-desktop);

}