/* Fuente local opcional: si el proyecto usa una tipografía local en vez de Google Fonts,
   agrega aquí su @font-face y referencia el nombre en --text-body-secondary abajo.
   Si usa Google Fonts (caso normal, ver inc/styles-js.php), borra este comentario y
   asegúrate de que Afacad coincida con el family-name que carga ahí. */
:root {
	--bs-body-font-family: "Afacad", sans-serif;
	--text-body-secondary: "Afacad", sans-serif;
	--bs-primary: rgb(1, 39, 86);
	--bs-secondary: rgb(255, 75, 0);
	--bs-gray-50: rgba(125, 125, 125, 1);
	--bs-gray-100: rgba(246, 246, 246, 1);
	--bs-gray-200: rgb(184 184 184);
	--bs-black: rgba(72, 72, 72, 1);
	--bs-primary-gradient: linear-gradient(
		90.34deg,
		#012756 -5.27%,
		#0255bc 121.88%
	);
	--bs-primary-gradient-100: linear-gradient(
		90.63deg,
		#005ce3 0.54%,
		#022756 206.1%
	);
	--bs-secondary-gradient: linear-gradient(
		111.66deg,
		#f48120 0.44%,
		#e94424 133.9%
	);
	--bs-heading-color: var(--bs-black);
	--text-gray: rgba(
		110,
		110,
		110,
		1
	); /* antes 125,125,125: 4.12:1 en texto normal, falla AA (4.5). Ahora 5.1:1. */
	--text-primary-gradient: linear-gradient(90deg, #012756 0%, #0255bc 100%);
	--text-secondary-gradient: linear-gradient(90deg, #F48120 0%, #E94424 100%);
	--text-gray-gradient: linear-gradient(90deg, #ffffff 0%, #999999 100%);
}

/* Bootstrap trabaja con --bs-secondary como color sólido (bordes, text-bg-secondary, etc.),
   así que se usa #F48120 (inicio del degradado de marca) como fallback sólido.
   Para el degradado real, usar esta utilidad donde se necesite el efecto de marca completo
   (CTAs, acentos de hero, etc.). */
.text-white {
	color: var(--bs-white) !important;
}
.text-primary {
	color: var(--bs-primary) !important;
}
.bg-primary {
	background-color: var(--bs-primary) !important;
}
.text-secondary {
	color: var(--bs-secondary) !important;
}
.bg-secondary {
	background-color: var(--bs-secondary) !important;
}
.bg-black {
	background-color: var(--bs-black) !important;
}
.bg-primary-gradient {
	background: var(--bs-primary-gradient);
}
.bg-secondary-gradient {
	background: var(--bs-secondary-gradient);
}
/* border-color no acepta gradientes; se logra con border-image (solo pinta donde hay
   border-width, así que sirve para un borde de un solo lado como este). */
.border-bottom-primary-gradient {
	border-bottom: 6px solid transparent;
	border-image: var(--bs-primary-gradient) 1;
	border-image-slice: 1;
	border-radius: 1rem;
}
.text-gray {
	color: var(--text-gray) !important;
}
.text-gray-50 {
	color: var(--bs-gray-50) !important;
}
.bg-gray-100 {
	background-color: var(--bs-gray-100) !important;
}
.text-black {
	color: var(--bs-black) !important;
}
.text-heading {
	color: var(--bs-heading-color);
}
.border-gray-200 {
	border-color: var(--bs-gray-200) !important;
}
body {
	font-family: var(--bs-body-font-family);
	background: var(--bs-gray-100);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--text-body-secondary);
	color: var(--bs-black);
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 0;
	line-height: 1.1 !important;
}
h1,
.h1 {
	font-size: 42px !important;
	line-height: 48px !important;
}
p,
span,
ul,
li {
	color: var(--text-gray);
}
strong {
	font-weight: 700;
}
.btn {
	font-size: 24px;
	font-weight: bold;
	border-radius: 50px;
	padding: 6px 24px 10px 24px;
}
.btn-primary {
	background: var(--bs-primary-gradient-100) !important;
}
.roundedBottomEnd {
	border-bottom-right-radius: 100px;
}
@media only screen and (min-width: 1200px) {
	h1,
	.h1 {
		font-size: 64px !important;
		line-height: 70px !important;
	}
	.p {
		font-size: 24px;
	}
	.p-small {
		font-size: 20px;
	}
	.imgVW50 {
		width: 50vw;
	}
	.roundedBottomEnd {
		border-bottom-right-radius: 200px;
	}
}
/* Variante de <p> con degradado de texto (blanco a gris) en vez del gris sólido normal. */
.p-gradient-gray {
	background: var(--text-gray-gradient);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.p-gradient-primary {
	background: var(--text-primary-gradient);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.p-gradient-secondary {
	background: var(--text-secondary-gradient);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
/*  */
.sombra {
	mask: linear-gradient(90deg, #0000 0%, #000 12.1066% 88.0482%, #0000 100%);
	-webkit-mask: linear-gradient(
		90deg,
		#0000 0%,
		#000 12.1066% 88.0482%,
		#0000 100%
	);
}
/* Bootstrap Collapse agrega/quita .collapsed en el botón trigger según el estado — sin JS propio. */
.bloqueAccordeon__icono {
	transition: transform 0.3s ease;
}
.bloqueAccordeon__boton:not(.collapsed) .bloqueAccordeon__icono {
	transform: rotate(90deg);
}

/* Componente Redes (template-parts/componentes/redes.php) — ícono SVG en vez de Bootstrap Icons. */
.componenteRedes__link img {
	width: 20px;
	height: 20px;
}

/* Fondo del header al hacer scroll (main.js agrega/quita .bg-primary-gradient).
   Un degradado no se puede animar con transition directo (background-image no
   interpola), así que el fade se hace con un ::before en opacity. */
header.bg-primary-gradient {
	background: none;
}
header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--bs-primary-gradient);
	opacity: 0;
	transition: opacity 0.3s ease;
}
header.bg-primary-gradient::before {
	opacity: 1;
}
/* Logo del header de escritorio (campo "logo" en Configuración del tema). */
.headerLogo {
	width: 190px;
	max-width: 100%;
	height: auto;
}
.headerLogoMobile {
	width: 140px;
	max-width: 100%;
	height: auto;
}
.bloqueBlogContenido h2 {
	margin-bottom: 10px;
	font-size: 34px;
	color: var(--bs-primary);
	font-weight: bold;
}
.bloqueBlogContenido h3 {
	margin-bottom: 10px;
	font-size: 28px;
	color: var(--bs-primary);
	font-weight: bold;
}
.bloqueBlogContenido p {
	margin-bottom: 16px;
	font-size: 16px;
	line-height: 1.4 !important;
}
@media only screen and (min-width: 1200px) {
	.bloqueBlogContenido h2 {
		font-size: 48px;
	}
	.bloqueBlogContenido h3 {
		font-size: 34px;
	}
	.bloqueBlogContenido p {
		font-size: 24px;
	}
}

/* Formulario de contacto (CF7 #253) — "Soluciones de interés" como pills en vez de radios sueltos. */
.formServiciosInteres .wpcf7-list-item {
	margin: 0;
}
.formServiciosInteres .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 50px;
	color: var(--text-gray);
	cursor: pointer;
}
.formServiciosInteres .wpcf7-list-item input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.formServiciosInteres .wpcf7-list-item:has(input:checked) label {
	background: var(--text-gray-gradient);
	color: var(--bs-black);
}
.formServiciosInteres .wpcf7-list-item:has(input:checked) label::before {
	content: url("/wp-content/uploads/2026/08/icono-check-small.svg");
	display: inline-flex;
}
.small, small {
	font-size: .875em!important;
}
.object-fit-right {
	object-position: right;
}
@view-transition {
	navigation: auto
}
::view-transition-group(*) {
	animation-duration: .6s;
}