/* ===========================================================================
   CSS GLOBAL (no crítico) — carga diferida.
   Contiene estilos compartidos por todo el sitio que NO son del above-the-fold.
   Los estilos específicos de cada bloque viven en blocks/<bloque>/*.css
   =========================================================================== */

/* .iacc-container vive ahora en critical.css (lo necesita el header, que es
   above-the-fold). No lo redefinas aquí o pisarás la versión buena. */

/* ===========================================================================
   FOTOGRAFÍAS DE FONDO CON VERSIÓN PARA MÓVIL

   El envoltorio solo aparece cuando hay dos fotografías —una ancha y otra
   para pantalla estrecha— y existe únicamente para que el navegador elija
   cuál descarga. Con display: contents no cuenta como caja: la imagen sigue
   siendo hija directa de su contenedor y el CSS de cada fondo funciona igual
   con envoltorio y sin él.
   =========================================================================== */
.iacc-fondo {
	display: contents;
}

/* El encuadre. Las variables las escribe el render en el atributo de estilo;
   aquí solo se dice qué hacer con ellas, porque un atributo de estilo no sabe
   de consultas de medios y en pantalla estrecha puede haber otra fotografía
   con su propio encuadre. Sin variables, el centro de siempre. */
.iacc-fondo__img {
	object-position: var(--iacc-fondo-x, center) var(--iacc-fondo-y, center);
}

@media (max-width: 767px) {

	/* Y si la foto de móvil no trae el suyo, hereda el de arriba. */
	.iacc-fondo__img {
		object-position:
			var(--iacc-fondo-x-movil, var(--iacc-fondo-x, center))
			var(--iacc-fondo-y-movil, var(--iacc-fondo-y, center));
	}
}

/* ===========================================================================
   BARRAS DE DESPLAZAMIENTO

   Los colores salen de tokens propios en vez de escribirse en cada sitio, de
   forma que una zona oscura solo tiene que redefinir las tres variables y
   volver a declarar scrollbar-color. Hace falta redeclararla porque el valor
   se hereda ya resuelto: cambiar solo las variables no basta.

   Se usa la propiedad estándar (scrollbar-color / scrollbar-width) y se deja
   ::-webkit-scrollbar como respaldo para los WebKit anteriores a Safari 18.2,
   que aún no la entienden. El @supports evita que ambas compitan donde las
   dos están disponibles.
   =========================================================================== */
:root {
	/* El pulgar es el gris verdoso del texto secundario, no un gris de borde:
	   sobre la pista clara se distingue de un vistazo. Con gris-borde encima
	   de gris-claro los dos tonos eran casi el mismo. */
	--iacc-scroll-pulgar: var(--wp--preset--color--texto-medio, #4e6667);
	--iacc-scroll-pulgar-activo: var(--wp--preset--color--neutral-800, #163637);
	--iacc-scroll-pista: var(--wp--preset--color--gris-claro, #e1e5e5);
}

html {
	scrollbar-color: var(--iacc-scroll-pulgar) var(--iacc-scroll-pista);
	scrollbar-width: thin;
}

@supports not (scrollbar-color: auto) {
	::-webkit-scrollbar {
		width: 10px;
		height: 10px;
	}

	::-webkit-scrollbar-track {
		background: var(--iacc-scroll-pista);
	}

	::-webkit-scrollbar-thumb {
		border-radius: 999px;
		background: var(--iacc-scroll-pulgar);
	}

	::-webkit-scrollbar-thumb:hover {
		background: var(--iacc-scroll-pulgar-activo);
	}

	/* La esquina donde se cruzan las dos barras: sin esto queda de un gris
	   del sistema que no pertenece a la paleta. */
	::-webkit-scrollbar-corner {
		background: var(--iacc-scroll-pista);
	}
}

/* Zonas oscuras: el mismo gris claro sobre el verde del overlay sería un
   trazo blanco cruzando la pantalla. Aquí el pulgar sube de tono en vez de
   bajar, y la pista deja de ser transparente para que se vea el carril. */
.iacc-header .capa .capa-cuerpo,
.iacc-header .buscador-top .resultados {
	--iacc-scroll-pulgar: var(--wp--preset--color--neutral-400, #9aa7a8);
	--iacc-scroll-pulgar-activo: var(--wp--preset--color--marca-clara, #97c866);
	--iacc-scroll-pista: var(--wp--preset--color--neutral-850, #0c2d2e);

	scrollbar-color: var(--iacc-scroll-pulgar) var(--iacc-scroll-pista);
	scrollbar-width: thin;
}

/* ===========================================================================
   TARJETA DEL FORMULARIO — Figma 332:811 ("div.lead-card")

   La misma tarjeta se usa en dos sitios: la ventana que abre "Solicita
   información" y el piso "Habla con un asesor". Por eso vive aquí y no en el
   CSS de un bloque: main.css se carga en todas las páginas, y la ventana
   también está en todas.

   Desde aquí se visten los campos que genera HubSpot. Se monta con css:"" y
   cssRequired:"" (ver assets/js/main.js), de modo que HubSpot no inyecta sus
   estilos y los campos quedan en el DOM de la página; si no, irían dentro de
   un iframe de otro dominio y no habría forma de darles la apariencia del
   sitio. Las clases (.hs-input, .hs-form-field…) son las suyas.
   =========================================================================== */
.iacc-form {
	/*
	 * La tarjeta se mide a sí misma. Vive en dos sitios de anchos distintos
	 * —557 px en el piso del Home y 556 en la ventana— y en móvil baja a 350.
	 * Lo que decide si dos campos caben juntos es el ancho de LA TARJETA, no
	 * el de la pantalla: preguntando por la ventana, la misma tarjeta dentro
	 * de una columna estrecha seguiría partiendo los campos en dos.
	 */
	container-type: inline-size;

	padding: 24px;

	background: var(--wp--preset--color--neutral-0, #fff);
	border-radius: 16px;
	/* Dos sombras: una amplia que despega la tarjeta del fondo oscuro y otra
	   corta que le dibuja el canto. */
	box-shadow:
		0 40px 45px rgb(0 0 0 / 42%),
		0 2px 5px rgb(0 0 0 / 20%);
}

.iacc-form__antetitulo {
	margin: 0 0 4px;

	font-size: var(--wp--preset--font-size--13, 13px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.04px;
	text-transform: uppercase;
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
}

.iacc-form__titulo {
	margin: 0 0 24px;

	font-size: var(--wp--preset--font-size--22, 22px);
	font-weight: 800;
	line-height: 1.27;
	letter-spacing: -0.5px;
	/* Verde muy oscuro heredado del diseño anterior; en la maqueta es el color
	   de los títulos dentro de tarjeta. */
	color: #082129;
}

.iacc-form__cargando,
.iacc-form__error {
	margin: 0;
	padding: 24px 0;
	text-align: center;
	color: var(--wp--preset--color--texto-medio, #4e6667);
}

/*
 * EL HUECO DEL FORMULARIO SE RESERVA ANTES DE QUE LLEGUE
 *
 * HubSpot tarda un par de segundos en montar el formulario, y hasta entonces
 * la tarjeta solo tiene su título y el aviso de carga. Quien pulsa un botón
 * que baja hasta aquí llegaba a una tarjeta corta que, al cargarse, crecía
 * medio millar de píxeles y se llevaba el formulario fuera de la pantalla: el
 * salto acababa a mitad del formulario y no en su principio.
 *
 * Con el hueco reservado desde el principio, el destino del desplazamiento ya
 * no se mueve. La medida es la de un formulario de admisión con sus seis
 * campos y sus dos consentimientos; si el que llega es más corto, la tarjeta
 * encoge una vez y en un sitio donde ya no estorba.
 */
/*
 * Solo mientras se espera. Si el formulario no ha podido cargar, la tarjeta
 * vuelve a su alto natural: reservar sitio para algo que ya se sabe que no va
 * a llegar deja medio metro de blanco bajo el aviso de error.
 */
.iacc-form__cuerpo:not([data-hs-estado="listo"]):not([data-hs-estado="error"]) {
	min-height: 620px;
	/* El aviso, en el medio del hueco: arriba dejaba media tarjeta en blanco. */
	display: grid;
	place-content: center;
}

@media (max-width: 991px) {

	/* En una columna los campos se apilan y el formulario es bastante más alto. */
	.iacc-form__cuerpo:not([data-hs-estado="listo"]):not([data-hs-estado="error"]) {
		min-height: 900px;
	}
}

.iacc-form__cargando[hidden],
.iacc-form__error[hidden] { display: none; }

.iacc-form__error a {
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
}

/* --- Nota bajo el botón --------------------------------------------------- */
.iacc-form__nota {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 12px 0 0;

	font-size: var(--wp--preset--font-size--13, 13px);
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--texto-medio, #4e6667);
}

.iacc-form__icono {
	flex: none;
	width: 20px;
	height: 20px;
}

.iacc-form__nota .iacc-form__icono {
	color: var(--wp--preset--color--marca, #52a400);
}

/* --- Atajo al asistente --------------------------------------------------- */
.iacc-form__alt {
	display: flex;
	align-items: center;
	gap: 12px;

	margin-top: 16px;
	padding-top: 17px;
	border-top: 1px solid #eef0f2;
}

.iacc-form__alt-icono {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;

	width: 40px;
	height: 40px;

	background: #eafbe0;
	border-radius: 12px;
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
}

.iacc-form__alt-texto {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.iacc-form__alt-titulo {
	margin: 0;

	font-size: var(--wp--preset--font-size--14, 14px);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.2px;
	color: #082129;
}

/* Es un botón, pero se comporta como el enlace de texto del design system:
   sin relleno ni borde, para que alinee con el texto de arriba. */
.iacc-form__alt-enlace {
	display: inline-flex;
	align-items: center;
	gap: 8px;

	margin: 0;
	padding: 4px 0;
	border: 0;
	border-radius: 4px;
	background: none;
	cursor: pointer;

	font-family: inherit;
	font-size: var(--wp--preset--font-size--16, 16px);
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
}

.iacc-form__alt-enlace:hover {
	text-decoration: underline;
}

.iacc-form__alt-enlace:focus-visible {
	outline: 2px solid var(--wp--preset--color--marca-oscura, #3d7a00);
	outline-offset: -2px;
}

.iacc-form__alt-enlace .iacc-form__icono {
	width: 16px;
	height: 16px;
}

/* ===========================================================================
   CAMPOS DE HUBSPOT
   =========================================================================== */
.iacc-form form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}

/* --- Dos columnas ---------------------------------------------------------
   HubSpot entrega estos formularios con los campos uno debajo de otro, y el
   diseño los quiere de dos en dos. Se reparten aquí y no allí porque así el
   reparto no depende de cómo esté configurado cada formulario: cualquiera que
   se monte en esta tarjeta queda igual.

   Solo cuando hay sitio, y el ancho que se mira es el INTERIOR de la tarjeta:
   una consulta de contenedor mide la caja de contenido, así que los 32 px de
   relleno de cada lado ya están descontados. Con 400 quedan 192 para cada
   campo, de sobra para "Apellido Paterno"; por debajo, cada uno a su línea.

   Estuvo en 431 y dejaba fuera la tarjeta de la ficha de convenio —480 por
   fuera, 416 por dentro— por quince píxeles.

   Los campos ocultos —las UTM, el código de carrera— ya vienen con display
   none, así que no reservan celda. */
@container (min-width: 400px) {

	.iacc-form form {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px 16px;
		align-items: start;
	}

	/*
	 * Lo que ocupa la fila entera. Se dice por tipo de campo y no por nombre:
	 * los nombres cambian de un formulario a otro, pero un desplegable o un
	 * consentimiento siempre piden el ancho completo.
	 */
	.iacc-form form .hs-fieldtype-select,
	.iacc-form form .hs-fieldtype-textarea,
	.iacc-form form .hs-fieldtype-radio,
	.iacc-form form .hs-fieldtype-checkbox,
	.iacc-form form .hs-fieldtype-booleancheckbox,
	.iacc-form form .hs-dependent-field,
	.iacc-form form .legal-consent-container,
	.iacc-form form .hs_submit,
	.iacc-form form > .hs-error-msgs,
	.iacc-form form > .hs_error_rollup {
		grid-column: 1 / -1;
	}

	/*
	 * LOS FIELDSET DE HUBSPOT SE DISUELVEN
	 *
	 * HubSpot mete cada campo en un <fieldset>, y decide él cuáles van juntos:
	 * unos vienen en form-columns-2 y otros solos en form-columns-1. Eso dejaba
	 * el reparto en manos de cómo esté montado cada formulario, con el resultado
	 * de que el rut y el apellido materno ocupaban una fila entera para ellos
	 * mientras el nombre y el apellido paterno compartían la suya.
	 *
	 * Con display:contents el fieldset desaparece a efectos de maquetación y sus
	 * campos pasan a ser celdas de esta rejilla, que es la que manda. Así todos
	 * los campos de texto van de dos en dos venga como venga el formulario, y no
	 * hay que tocar HubSpot para cambiar la forma de una tarjeta.
	 *
	 * No se pierde nada por el camino: estos fieldset no agrupan nada —no llevan
	 * leyenda ni describen un conjunto—, así que no tienen significado que
	 * conservar. Donde no se entienda display:contents se ven como hasta ahora.
	 */
	.iacc-form form > fieldset,
	.iacc-form form > fieldset.form-columns-1,
	.iacc-form form > fieldset.form-columns-2,
	.iacc-form form > fieldset.form-columns-3 {
		display: contents;
	}
}

/* HubSpot agrupa los campos en <fieldset>. Se le quita la apariencia de
   agrupación —no lo es— y se aprovecha para las filas de dos columnas. */
.iacc-form fieldset {
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
}

.iacc-form fieldset.form-columns-2 {
	display: flex;
	gap: 16px;
}

.iacc-form fieldset.form-columns-2 > .hs-form-field {
	flex: 1 1 0;
	min-width: 0;
}

/* El mismo corte que la rejilla de arriba, para que las filas que HubSpot
   entrega ya emparejadas se partan a la vez que las demás. */
@container (max-width: 399px) {

	.iacc-form fieldset.form-columns-2 {
		flex-direction: column;
		gap: 12px;
	}
}

/* Para navegadores sin consultas de contenedor: el caso que importa es el
   móvil, donde la tarjeta ocupa el ancho de la pantalla. */
@supports not (container-type: inline-size) {

	@media (max-width: 600px) {

		.iacc-form fieldset.form-columns-2 {
			flex-direction: column;
			gap: 12px;
		}
	}
}

/* Un campo que depende de otro se dibuja pegado a él. Se le da la misma
   separación que hay entre el resto de campos. */
.iacc-form .hs-dependent-field {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.iacc-form .hs-form-field {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* La ayuda del campo va DEBAJO del recuadro. HubSpot la imprime antes y con
   display:none en el propio atributo style, de ahí el !important: es la única
   forma de ganarle a un estilo en línea. */
.iacc-form .hs-field-desc {
	display: block !important;
	order: 2;

	margin: 4px 0 0;
	padding: 0;

	font-size: var(--wp--preset--font-size--13, 13px);
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--texto-medio, #4e6667);
}

.iacc-form .input {
	order: 1;
}

/* --- El recuadro ---------------------------------------------------------- */
.iacc-form .hs-input:not([type="checkbox"]):not([type="radio"]) {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 12px 16px;

	font-family: inherit;
	font-size: var(--wp--preset--font-size--16, 16px);
	font-weight: 400;
	line-height: 1.55;
	color: var(--wp--preset--color--texto, #272727);

	/* background-color y no el atajo background: este último borraría la imagen
	   de fondo, que es donde va el chevron de los desplegables. */
	background-color: var(--wp--preset--color--neutral-0, #fff);
	border: 1.5px solid var(--wp--preset--color--gris-borde, #ccd3d4);
	/* Mismo radio que el botón del propio formulario. */
	border-radius: 12px;

	transition: border-color .15s ease, box-shadow .15s ease;
}

.iacc-form textarea.hs-input {
	height: auto;
	min-height: 96px;
	resize: vertical;
}

.iacc-form .hs-input:focus {
	outline: none;
	border-color: var(--wp--preset--color--marca, #52a400);
	/* El borde pasa de 1,5 a 2 px sin mover el campo: el segundo píxel lo pone
	   la sombra, que no ocupa espacio. */
	box-shadow: 0 0 0 .5px var(--wp--preset--color--marca, #52a400);
}

/*
 * El mismo patrón de selector que la regla de arriba, a propósito: con solo
 * ".iacc-form select.hs-input" perdía por especificidad —0,2,1 frente a 0,4,0—
 * y el desplegable se quedaba sin chevron y sin el hueco para él.
 */
.iacc-form select.hs-input:not([type="checkbox"]):not([type="radio"]) {
	appearance: none;
	/* Sitio para el chevron. */
	padding-right: 44px;
	cursor: pointer;

	/* Chevron de Lucide en el propio fondo: un SVG suelto aquí obligaría a
	   tocar el marcado que genera HubSpot. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234e6667' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 20px 20px;
}

/* --- Etiqueta flotante ----------------------------------------------------
   El diseño pone el nombre del campo dentro del recuadro. Un texto que
   desaparece al escribir deja a medio formulario sin saber qué iba en cada
   casilla, así que en cuanto el campo recibe foco o texto la etiqueta sube al
   borde y se encoge. En reposo se ve igual que en la maqueta.

   El truco del hueco: la etiqueta lleva el fondo blanco de la tarjeta, de modo
   que al subir tapa el trozo de borde que cruza. */
.iacc-form .hs-form-field.es-flotante > label {
	position: absolute;
	top: 24px;
	left: 12px;
	z-index: 1;

	margin: 0;
	padding: 0 4px;
	max-width: calc(100% - 32px);

	font-size: var(--wp--preset--font-size--16, 16px);
	font-weight: 400;
	line-height: 1;
	/* 6,14:1 sobre blanco. El design system lo subraya: un placeholder es
	   texto y no está exento del contraste mínimo. */
	color: var(--wp--preset--color--texto-medio, #4e6667);

	background: var(--wp--preset--color--neutral-0, #fff);
	transform: translateY(-50%);
	transform-origin: left center;
	transition: transform .15s ease, color .15s ease;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
}

.iacc-form .hs-form-field.es-flotante:focus-within > label,
.iacc-form .hs-form-field.es-flotante:has(.hs-input:not(:placeholder-shown)) > label,
.iacc-form .hs-form-field.es-seleccion:has(select.hs-input:valid) > label {
	transform: translateY(-50%) translateY(-24px) scale(.8125);
}

.iacc-form .hs-form-field.es-flotante:focus-within > label {
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
}

/* El asterisco de obligatorio, en el rojo de error del design system. */
.iacc-form .hs-form-required {
	color: #b23a2e;
	margin-left: 2px;
}

/* --- Consentimientos ------------------------------------------------------ */
/*
 * Campos técnicos: el origen de registro y las cinco UTM. Quién va oculto se
 * decide en HubSpot, no aquí; lo que resuelve esto es el hueco. Aunque el
 * campo no se vea, su contenedor sigue siendo un elemento de la columna y se
 * lleva su separación de 12 px: seis campos técnicos dejaban 72 px de aire en
 * mitad del formulario.
 *
 * Se hace con :has() y no marcando nada desde el guion: así el tema no toca
 * las clases de un formulario que no es suyo, y el hueco no llega a verse ni
 * el instante que tarda el JavaScript en llegar.
 */
.iacc-form .hs-form-field:has(> .input > input[type="hidden"]) {
	display: none;
}

/* Y con el campo se va su <fieldset>: vacío seguiría ocupando su hueco de
   separación. La condición mira si queda algún control a la vista, no si hay
   un .hs-form-field: el desplegable y las aceptaciones van más adentro, y
   preguntando por la clase se ocultaban también. */
.iacc-form form fieldset:not(:has(input:not([type="hidden"]), select, textarea)) {
	display: none;
}

/* El aviso de privacidad que añade HubSpot por su cuenta: es texto legal, del
   mismo tamaño que las aceptaciones que lleva debajo. */
.iacc-form .legal-consent-container .hs-richtext {
	margin: 0 0 4px;

	font-size: var(--wp--preset--font-size--13, 13px);
	font-weight: 400;
	line-height: 1.4;
	color: #6b7772;
}

.iacc-form .legal-consent-container {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 4px;
}

.iacc-form .legal-consent-container .hs-form-booleancheckbox-display > label,
.iacc-form .inputs-list label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	cursor: pointer;

	font-size: var(--wp--preset--font-size--13, 13px);
	font-weight: 400;
	line-height: 1.3;
	color: #6b7772;
}

.iacc-form .inputs-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.iacc-form .legal-consent-container a,
.iacc-form .inputs-list a {
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
	text-decoration: underline;
}

/* La caja mide 20 px pero el objetivo táctil llega a 24: es el mínimo del
   criterio 2.5.8, y aquí son dos aceptaciones obligatorias. */
.iacc-form input[type="checkbox"].hs-input,
.iacc-form input[type="radio"].hs-input {
	appearance: none;
	flex: none;

	width: 20px;
	height: 20px;
	margin: 2px;

	background: var(--wp--preset--color--neutral-0, #fff);
	border: 1.5px solid var(--wp--preset--color--gris-borde, #ccd3d4);
	border-radius: 4px;
	cursor: pointer;

	transition: background .15s ease, border-color .15s ease;
}

.iacc-form input[type="radio"].hs-input {
	border-radius: 50%;
}

.iacc-form input[type="checkbox"].hs-input:checked,
.iacc-form input[type="radio"].hs-input:checked {
	/* Mismo par de colores que el botón primario: 5,20:1. */
	background-color: var(--wp--preset--color--marca, #52a400);
	border-color: var(--wp--preset--color--marca, #52a400);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23022426' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
}

.iacc-form input[type="checkbox"].hs-input:focus-visible,
.iacc-form input[type="radio"].hs-input:focus-visible {
	outline: 2px solid var(--wp--preset--color--marca-oscura, #3d7a00);
	outline-offset: -2px;
}

/* --- Botón de envío ------------------------------------------------------- */
.iacc-form .hs-submit {
	padding-top: 16px;
}

.iacc-form .hs-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;

	min-height: 48px;
	padding: 12px 24px;
	border: 0;
	border-radius: 12px;
	cursor: pointer;

	font-family: inherit;
	font-size: var(--wp--preset--font-size--16, 16px);
	font-weight: 700;
	line-height: 1;
	text-align: center;

	/* Primaria: relleno con cuerpo, así que sin borde. */
	background: var(--wp--preset--color--marca, #52a400);
	color: var(--wp--preset--color--neutral-900, #022426);
	box-shadow: 0 6px 18px rgb(82 164 0 / 35%);

	transition: background .15s ease;
}

.iacc-form .hs-button:hover {
	background: var(--wp--preset--color--marca-clara, #97c866);
}

.iacc-form .hs-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--neutral-0, #fff);
	outline-offset: -2px;
}

/* --- Errores -------------------------------------------------------------- */
.iacc-form .hs-error-msg,
.iacc-form .hs-error-msgs label {
	display: block;
	margin: 4px 0 0;

	font-size: var(--wp--preset--font-size--13, 13px);
	font-weight: 500;
	line-height: 1.4;
	color: #b23a2e;
}

.iacc-form .hs-error-msgs {
	order: 3;
	list-style: none;
	margin: 0;
	padding: 0;
}

.iacc-form .hs-form-field.hs-error .hs-input {
	border-color: #b23a2e;
}

.iacc-form .submitted-message {
	margin: 0;
	padding: 24px 0;
	font-size: var(--wp--preset--font-size--16, 16px);
	line-height: 1.55;
	color: var(--wp--preset--color--texto, #272727);
}

/* ===========================================================================
   ESCRITORIO — la tarjeta respira
   =========================================================================== */
@media (min-width: 992px) {

	.iacc-form {
		padding: 32px;
	}

	.iacc-form__titulo {
		margin-bottom: 32px;
	}
}

/* ===========================================================================
   VENTANA MODAL DEL FORMULARIO

   Es un <dialog> nativo: el foco atrapado dentro, el cierre con Escape y el
   fondo oscuro los pone el navegador. La ventana no dibuja nada propia: enseña
   la misma tarjeta que el piso del formulario, con el aspa flotando encima.
   =========================================================================== */
.iacc-modal {
	width: min(556px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--texto, #272727);
	overflow: visible;
}

.iacc-modal::backdrop {
	background: rgb(1 25 26 / .72);
}

.iacc-modal__caja {
	position: relative;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	/* La sombra de la tarjeta no se recorta al desbordar. */
	border-radius: 16px;
}

.iacc-modal__cerrar {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	cursor: pointer;

	color: var(--wp--preset--color--texto-medio, #4e6667);
	transition: background .15s ease, color .15s ease;
}

.iacc-modal__cerrar:hover,
.iacc-modal__cerrar:focus-visible {
	background: var(--wp--preset--color--gris-claro, #e1e5e5);
	color: var(--wp--preset--color--neutral-900, #022426);
}

/* Dentro de la ventana la tarjeta ya no necesita despegarse de un fondo con
   degradado: el que hay detrás es el velo del navegador. */
.iacc-modal .iacc-form {
	box-shadow: none;
	padding-top: 56px;
}


/* --- Apertura y cierre de la ventana ---
   Mismo mecanismo que las capas del menú móvil, con una propiedad más:
   'overlay'. Un <dialog> sale de la capa superior en cuanto se cierra, así que
   sin animar 'overlay' con allow-discrete la salida no se llega a ver. */
@supports (transition-behavior: allow-discrete) {

	.iacc-modal {
		opacity: 0;
		scale: .97;
		translate: 0 8px;
		transition:
			opacity .22s ease,
			scale .22s ease,
			translate .22s ease,
			display .22s allow-discrete,
			overlay .22s allow-discrete;
	}

	.iacc-modal[open] {
		opacity: 1;
		scale: 1;
		translate: 0 0;
	}

	@starting-style {
		.iacc-modal[open] {
			opacity: 0;
			scale: .97;
			translate: 0 8px;
		}
	}

	.iacc-modal::backdrop {
		background: rgb(1 25 26 / 0);
		transition:
			background .22s ease,
			display .22s allow-discrete,
			overlay .22s allow-discrete;
	}

	.iacc-modal[open]::backdrop {
		background: rgb(1 25 26 / .72);
	}

	@starting-style {
		.iacc-modal[open]::backdrop {
			background: rgb(1 25 26 / 0);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	@supports (transition-behavior: allow-discrete) {
		.iacc-modal {
			/* Se conserva el fundido, que explica de dónde sale la ventana,
			   pero sin escala ni desplazamiento. */
			transition:
				opacity .12s ease,
				display .12s allow-discrete,
				overlay .12s allow-discrete;
			scale: 1;
			translate: none;
		}

		@starting-style {
			.iacc-modal[open] { scale: 1; translate: none; }
		}
	}
}

/* ===========================================================================
   FOOTER — Figma "Sitio WEB 2026", nodo 332:861

   Dos bandas: la principal (fondo neutral-900) con la información
   institucional y las seis columnas de enlaces, y la legal (neutral-950).

   El ancho lo aporta .iacc-container, así que aquí no se repiten max-width
   ni márgenes laterales.
   =========================================================================== */
.iacc-footer {
	/* Token "--superficie-inversa-alt" del design system: negro puro. No está
	   en la paleta de theme.json a propósito, para no ofrecerlo como color
	   suelto en el editor de bloques. */
	--superficie-inversa-alt: #000;

	background: var(--wp--preset--color--neutral-900, #022426);
}

.iacc-footer .footer-principal {
	padding-block: 48px;
}

.iacc-footer .footer-content {
	display: flex;
	justify-content: space-between;
	gap: 40px;
}

/* --- Columna institucional (logos, contacto y redes) --- */
.iacc-footer .columna-institucional {
	display: flex;
	flex-direction: column;
	gap: 24px;
	flex-shrink: 0;
	width: 300px;
}

/* El HTML sigue el orden de móvil (logos → texto → redes → contacto), que es
   el orden de lectura natural. En escritorio el diseño invierte los dos
   últimos bloques (nodo 332:863), y eso se resuelve con 'order'. */
.iacc-footer .contacto { order: 1; }
.iacc-footer .rrss { order: 2; }
.iacc-footer .footer-empleo { order: 3; }

.iacc-footer .logos {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.iacc-footer .logos figure { margin: 0; }
.iacc-footer .logo-iacc img {
	display: block;
	width: 120px;
	height: auto;
	aspect-ratio: 2500 / 618;
}
.iacc-footer .logo-acreditacion img {
	display: block;
	width: 141px;
	height: 42px;
}

.iacc-footer .contacto {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.iacc-footer .dato {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
/* Los tres iconos de contacto —ubicación, horario y teléfono— van en el verde
   de marca, no en el gris del texto que acompañan: así se distinguen de un
   vistazo y la columna se lee como tres datos y no como un párrafo. */
.iacc-footer .dato .icono {
	display: flex;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--wp--preset--color--marca, #52a400);
}
.iacc-footer .dato .texto {
	margin: 0;
	font-size: var(--wp--preset--font-size--13, 13px);
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--gris-borde, #ccd3d4);
}
.iacc-footer .dato .texto a {
	color: inherit;
	text-decoration: none;
	transition: color .2s ease;
}
.iacc-footer .dato .texto a:hover {
	color: var(--wp--preset--color--marca-clara, #97c866);
}

/* --- Redes sociales --- */
.iacc-footer .rrss ul {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.iacc-footer .rrss a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 8px;
	background: var(--superficie-inversa-alt);
	border-radius: 12px;
	color: var(--wp--preset--color--marca, #52a400);
	transition: background .2s ease, color .2s ease;
}
.iacc-footer .rrss a:hover,
.iacc-footer .rrss a:focus-visible {
	background: var(--wp--preset--color--marca, #52a400);
	color: var(--wp--preset--color--neutral-0, #fff);
}
.iacc-footer .rrss svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* --- Trabaja con nosotros ---
   Botón de contorno del design system: borde esmeralda, fondo transparente y
   texto en verde suave. Lleva a otro sitio, de ahí el icono de la flecha que
   sale del recuadro. */
.iacc-footer .footer-empleo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/* Del ancho de su contenido, que es como está en el diseño de escritorio.
	   En el pequeño ocupa la columna entera (más abajo). */
	align-self: flex-start;
	padding: 11px 16px;
	border: 1px solid var(--wp--preset--color--esmeralda, #2cb45f);
	border-radius: 8px;
	background: transparent;
	color: var(--wp--preset--color--marca-suave, #dcedcc);

	font-size: var(--wp--preset--font-size--14, 14px);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;

	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.iacc-footer .footer-empleo:hover,
.iacc-footer .footer-empleo:focus-visible {
	background: var(--wp--preset--color--esmeralda, #2cb45f);
	border-color: var(--wp--preset--color--esmeralda, #2cb45f);
	color: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-footer .footer-empleo svg {
	display: block;
	width: 16px;
	height: 16px;
	/* No se encoge si el texto se traduce a algo más largo. */
	flex: none;
}

/* --- Columnas de enlaces: 3 columnas con las secciones apiladas ---
   Figma 5460:18822. Cada COLUMNA es un <div class="grupo"> y dentro van sus
   SECCIONES, que son <details> para poder plegarse en móvil. En escritorio se
   neutraliza esa apariencia: sin chevron ni cursor.

   Los grupos no tienen el mismo número de secciones —dos, tres y dos—, así que
   quién va con quién no se deduce: lo declara el menú, sección por sección.
   Ver inc/footer-nav.php. */
.iacc-footer .columnas-menu {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px 24px;
	flex: 1 1 auto;
	max-width: 795px;
}
.iacc-footer .grupo {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* Si nadie ha marcado dónde empieza cada columna, el menú entero llega en un
   solo grupo: se disuelve para que las secciones vuelvan a repartirse por sí
   solas en la rejilla, que es como se veía el pie antes. */
.iacc-footer .columnas-menu:not(:has(.grupo + .grupo)) .grupo {
	display: contents;
}

.iacc-footer .columna {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.iacc-footer .titulo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	font-size: var(--wp--preset--font-size--13, 13px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.04px;
	text-transform: uppercase;
	color: var(--wp--preset--color--neutral-0, #fff);
	list-style: none; /* quita el triángulo por defecto de <summary> */
}
.iacc-footer .titulo::-webkit-details-marker { display: none; } /* Safari */

/* El chevron solo tiene sentido cuando el bloque se puede plegar (móvil). */
.iacc-footer .indicador { display: none; }

.iacc-footer .columna ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.iacc-footer .columna a {
	font-size: var(--wp--preset--font-size--14, 14px);
	line-height: 1.45;
	color: var(--wp--preset--color--gris-borde, #ccd3d4);
	text-decoration: none;
	transition: color .2s ease;
}
.iacc-footer .columna a:hover,
.iacc-footer .columna a:focus-visible {
	color: var(--wp--preset--color--marca-clara, #97c866);
}

/* Texto institucional: solo en móvil (nodo 1253:1148). */
.iacc-footer .descripcion { display: none; }

/* --- Banda legal --- */
.iacc-footer .footer-legal {
	background: var(--wp--preset--color--neutral-950, #01191a);
}

.iacc-footer .legal-content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	min-height: 55px;
	padding-block: 16px;
}
.iacc-footer .legal-izquierda {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}
.iacc-footer .copyright,
.iacc-footer .acreditacion {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--neutral-0, #fff);
}
.iacc-footer .acreditacion {
	display: flex;
	align-items: center;
}

/* ---------------------------------------------------------------------------
   Paso intermedio: la columna institucional deja de ir al lado del menú.
   Corte propio; el diseño solo define 1440 y 390.
   --------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.iacc-footer .footer-content {
		flex-direction: column;
		gap: 40px;
	}
	.iacc-footer .columna-institucional { width: 100%; }
	.iacc-footer .columnas-menu { max-width: none; }
}

/* ---------------------------------------------------------------------------
   MÓVIL — Figma nodo 1253:1139 ("HOME MOBILE 390 — V.3")

   Cambia tres cosas respecto a escritorio:
     1. Aparece el texto institucional bajo los logos.
     2. Las redes suben por delante del contacto.
     3. Las seis columnas se convierten en acordeones plegables.

   El corte es 782px, el mismo que usa el header en critical.css.
   --------------------------------------------------------------------------- */
@media (max-width: 782px) {

	.iacc-footer .footer-principal { padding-block: 32px; }

	.iacc-footer .footer-content { gap: 32px; }

	.iacc-footer .columna-institucional { gap: 16px; }

	/* Vuelve al orden natural del HTML: logos, texto, redes, empleo, contacto. */
	.iacc-footer .contacto,
	.iacc-footer .rrss,
	.iacc-footer .footer-empleo { order: 0; }

	/* Aquí ocupa la columna entera: es la única acción del pie y en el ancho
	   de un teléfono un botón a media caja se lee como un enlace suelto. */
	.iacc-footer .footer-empleo {
		align-self: stretch;
		padding-block: 13px;
	}

	.iacc-footer .descripcion {
		display: block;
		margin: 0;
		font-size: var(--wp--preset--font-size--13, 13px);
		font-weight: 500;
		line-height: 1.4;
		color: var(--wp--preset--color--neutral-0, #fff);
	}

	/* --- Acordeones --- */
	.iacc-footer .columnas-menu {
		display: block;
		max-width: none;
	}

	/* Las columnas no existen en pantalla pequeña: las secciones se apilan una
	   detrás de otra y se pliegan. El grupo se disuelve para que sus bordes
	   inferiores queden seguidos, sin saltos entre columna y columna. */
	.iacc-footer .grupo {
		display: contents;
	}
	.iacc-footer .columna {
		gap: 12px;
		padding-bottom: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .16);
		transition: padding-bottom .3s ease;
	}
	.iacc-footer .columna[open] { padding-bottom: 16px; }

	/* --- Animación de apertura y cierre ---
	   Un <details> no se puede animar de forma directa: el navegador oculta su
	   contenido con display, y display no es interpolable.

	   ::details-content da acceso a ese contenido como caja propia, e
	   'interpolate-size: allow-keywords' permite animar HASTA height:auto sin
	   tener que medir la altura con JavaScript.

	   Va dentro de @supports como MEJORA PROGRESIVA: donde el navegador no lo
	   entienda, el acordeón abre y cierra igual, solo que de golpe. Nunca se
	   rompe ni queda contenido inaccesible. */
	@supports selector(::details-content) {

		.iacc-footer { interpolate-size: allow-keywords; }

		.iacc-footer .columna::details-content {
			block-size: 0;
			overflow: hidden;
			transition:
				block-size .3s ease,
				content-visibility .3s allow-discrete;
		}

		.iacc-footer .columna[open]::details-content {
			block-size: auto;
		}
	}

	.iacc-footer .titulo {
		min-height: 48px;
		cursor: pointer;
	}
	.iacc-footer .indicador {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 24px;
		height: 24px;
		transition: transform .25s ease;
	}
	.iacc-footer .columna[open] .indicador { transform: rotate(180deg); }

	/* --- Banda legal: solo el copyright, centrado --- */
	.iacc-footer .acreditacion { display: none; }
	.iacc-footer .legal-content {
		justify-content: center;
		text-align: center;
	}
	.iacc-footer .legal-izquierda {
		flex-direction: column;
		gap: 8px;
		align-items: center;
	}
}

/* Quien haya pedido menos animación en su sistema abre y cierra al instante:
   el acordeón sigue funcionando igual, solo desaparece el desplegado suave. */
@media (prefers-reduced-motion: reduce) {
	.iacc-footer .indicador,
	.iacc-footer .columna {
		transition: none;
	}

	@supports selector(::details-content) {
		.iacc-footer .columna::details-content {
			transition: none;
		}
	}
}

/* Grilla genérica de archivos */
.iacc-archive__grid {
	display: grid;
	gap: var(--wp--preset--spacing--40, 1.5rem);
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Foco visible para accesibilidad (suma puntos en Lighthouse) */
:focus-visible {
	outline: 3px solid var(--wp--preset--color--acento, #52a400);
	outline-offset: 2px;
}

/*
 * SALVO LA FRANJA A LA QUE SE ACABA DE SALTAR
 *
 * Al abrir /pagina/#un-piso, o al pulsar un enlace que baja hasta él, el foco
 * se lleva a ese piso para que el tabulador siga desde ahí y no desde el
 * principio de la página. Pero el anillo alrededor de una franja entera se lee
 * como un borde de color y no como un foco: no es un control, no se pulsa, y
 * el propio desplazamiento ya dice dónde estamos. El siguiente tabulador lo
 * vuelve a enseñar donde sí significa algo.
 *
 * El atributo lo pone y lo quita main.js, así que esto no toca el foco de nada
 * más.
 */
[data-iacc-ancla]:focus,
[data-iacc-ancla]:focus-visible {
	outline: none;
}


/* ===========================================================================
   Componentes del Design System IACC (reutilizables en contenido/bloques)
   =========================================================================== */

/* Section title: eyebrow lime + H2 + subrayado lime 56x3 */
.section-title {
	position: relative;
	display: inline-block;
	font: 700 32px/1.25 var(--wp--preset--font-family--titulo, 'Plus Jakarta Sans'), sans-serif;
	color: var(--text-primary, #212529);
	padding-bottom: 8px;
}
.section-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	background: var(--accent, #52a400);
}
.eyebrow {
	display: inline-block;
	font: 600 12px/1 var(--wp--preset--font-family--base, 'Plus Jakarta Sans'), sans-serif;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--accent, #52a400);
	margin-bottom: 8px;
}

/* Botones tematizados (variantes del Design System) */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: .75rem 1.5rem;
	font: 600 14px/1 var(--wp--preset--font-family--base, 'Plus Jakarta Sans'), sans-serif;
	border: 0;
	border-radius: var(--radius-md, 8px);
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
	white-space: nowrap;
}
.btn-primary { background: var(--accent, #52a400); color: #fff; box-shadow: var(--shadow-button); }
.btn-primary:hover { background: var(--accent-dark, #3d7a00); }
.btn-secondary { background: var(--primary, #082129); color: #fff; }
.btn-secondary:hover { background: var(--primary-light, #1d3a3f); }
.btn-outline { background: transparent; color: var(--primary, #082129); border: 2px solid var(--primary, #082129); }
.btn-outline:hover { background: var(--primary, #082129); color: #fff; }
.btn-ghost { background: transparent; color: var(--accent, #52a400); padding: .5rem .75rem; }
.btn-ghost:hover { color: var(--accent-dark, #3d7a00); }

/* Badges & chips (pill solo aquí, nunca en CTAs) */
.badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	font: 600 12px/1 var(--wp--preset--font-family--base, 'Plus Jakarta Sans'), sans-serif;
	letter-spacing: .04em;
	text-transform: uppercase;
	border-radius: var(--radius-pill, 9999px);
}
.badge-accent { background: #cbf8ab; color: #3d7a00; }
.badge-primary { background: rgba(8, 33, 41, .08); color: #082129; }
.badge-warn { background: #fff4e5; color: #b76e00; }
.badge-error { background: #fde8e8; color: #c53030; }
.badge-info { background: #e6f0fb; color: #2c5f9c; }

/* Card */
.card {
	background: #fff;
	border: 1px solid rgba(8, 33, 41, .10);
	border-radius: var(--radius-md, 8px);
	box-shadow: var(--shadow-card);
	padding: 24px;
	transition: box-shadow .15s ease;
}
.card:hover { box-shadow: var(--shadow-card-hover); }

/* ===========================================================================
   SUGERENCIAS DEL BUSCADOR DE LA CABECERA

   Lista que aparece bajo el campo al escribir. Vive en main.css y no en el
   crítico porque solo existe tras interactuar: nadie la ve al cargar.
   =========================================================================== */
.iacc-header .buscador-top {
	position: relative;
}

.iacc-header .buscador-top .resultados {
	position: absolute;
	top: calc(100% + 10px);
	z-index: 300;

	/* El campo mide 260 px, pero los títulos son largos: la lista se desborda
	   a ambos lados, centrada respecto al buscador, para que quepan en una o
	   dos líneas en vez de partirse en cinco. */
	left: 50%;
	transform: translateX(-50%);
	width: 520px;
	max-width: calc(100vw - 32px);

	max-height: 65vh;
	overflow-y: auto;
	margin: 0;
	padding: 8px;
	list-style: none;

	background: var(--wp--preset--color--neutral-900, #022426);
	border: 1px solid var(--wp--preset--color--neutral-800, #163637);
	border-radius: var(--radio-12, 12px);
	box-shadow: 0 16px 32px rgba(1, 14, 15, .45);
}

.iacc-header .buscador-top .resultados[hidden] { display: none; }

.iacc-header .buscador-top .resultados li a {
	display: block;
	padding: 12px 14px;
	border-radius: var(--radio-8, 8px);

	font-size: var(--wp--preset--font-size--14, 14px);
	line-height: 1.45;
	color: var(--wp--preset--color--neutral-0, #fff);
	text-decoration: none;

	transition: background .15s ease;
}

/* .activa es la opción resaltada con las flechas del teclado. */
.iacc-header .buscador-top .resultados li a:hover,
.iacc-header .buscador-top .resultados li a:focus-visible,
.iacc-header .buscador-top .resultados li.activa a {
	background: var(--wp--preset--color--neutral-850, #0c2d2e);
}

@media (prefers-reduced-motion: reduce) {
	.iacc-header .buscador-top .resultados li a { transition: none; }
}


/* ===========================================================================
   CAPAS DE LA CABECERA MÓVIL
   Figma: "10 · Móvil — menú y barra flotante" (nodo 1490:1811)
   Cotas y tokens leídos del nodo 1491:1845 (M4 · Carreras expandido).

   Dos capas a pantalla completa que cuelgan bajo la barra: el menú (M3–M8) y
   la búsqueda (M2). Solo una puede estar abierta; lo controla el JS.

   Van en main.css y no en el CSS crítico porque nacen ocultas: nada de esto
   se dibuja hasta que el usuario pulsa un botón, así que no tiene por qué
   viajar en línea dentro del HTML de cada página.
   =========================================================================== */
.iacc-header .capa {
	position: fixed;
	/* El JS mide la barra y escribe --iacc-header-alto: la capa arranca justo
	   donde esta termina, sea cual sea el alto real del logo. */
	top: var(--iacc-header-alto, 64px);
	left: 0;
	right: 0;
	bottom: 0;

	display: flex;
	flex-direction: column;
	z-index: 99;

	background: var(--wp--preset--color--neutral-975, #010e0f);
	overscroll-behavior: contain;
}

.iacc-header .capa[hidden] { display: none; }

/* --- Entrada y salida de las capas ---
   Una capa oculta con [hidden] tiene display:none, y display no es
   interpolable: de ahí que hasta ahora aparecieran de golpe.

   'transition-behavior: allow-discrete' retrasa el salto de display hasta el
   final de la transición, y @starting-style define desde dónde arranca la
   animación de entrada. Juntos permiten animar la aparición sin recurrir a
   clases auxiliares ni a temporizadores en JavaScript.

   Como efecto secundario se resuelve solo el paso de una capa a otra: al
   cambiar del menú al buscador, la saliente sigue en pantalla mientras se
   desvanece y la entrante aparece encima. Eso es un crossfade, y no hubo que
   coordinarlo desde el JS.

   Va en @supports como mejora progresiva: donde no se entienda, las capas
   abren y cierran igual, sin transición. */
@supports (transition-behavior: allow-discrete) {

	.iacc-header .capa {
		opacity: 1;
		translate: 0 0;
		transition:
			opacity .22s ease,
			translate .22s ease,
			display .22s allow-discrete;
	}

	.iacc-header .capa[hidden] {
		display: none;
		opacity: 0;
		/* Un desplazamiento corto: la capa cuelga de la barra, así que entra
		   deslizándose desde ella en vez de aparecer flotando. */
		translate: 0 -8px;
		/* Mientras se desvanece sigue ocupando la pantalla: sin esto podría
		   quedarse con un toque destinado a la capa que está entrando. */
		pointer-events: none;
	}

	@starting-style {
		.iacc-header .capa:not([hidden]) {
			opacity: 0;
			translate: 0 -8px;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	@supports (transition-behavior: allow-discrete) {
		.iacc-header .capa {
			/* Sin desplazamiento, pero se conserva el fundido: sigue
			   explicando de dónde sale la capa sin provocar mareo. */
			transition:
				opacity .12s ease,
				display .12s allow-discrete;
			translate: none;
		}

		.iacc-header .capa[hidden] { translate: none; }

		@starting-style {
			.iacc-header .capa:not([hidden]) { translate: none; }
		}
	}
}

.iacc-header .capa .capa-cuerpo {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* --- Secciones plegables del menú (M3-M8) ------------------------------- */
.iacc-header .capa-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Las líneas entre secciones no son bordes: son el fondo del contenedor
   asomando por el gap, tal como está montado en Figma. Así nunca salen dos
   líneas juntas donde se tocan dos bloques. */
.iacc-header .capa-menu .secciones {
	background: var(--wp--preset--color--neutral-850, #0c2d2e);
}

.iacc-header .capa-menu .seccion + .seccion {
	margin-top: 1px;
}

.iacc-header .capa-menu .cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 18px 16px;
	background: var(--wp--preset--color--neutral-975, #010e0f);

	/* Móvil/08 Body Strong */
	font-size: var(--wp--preset--font-size--16, 16px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--neutral-0, #fff);
	text-decoration: none;

	cursor: pointer;
	list-style: none; /* quita el triángulo nativo del <summary> */
}

/* Safari sigue pintando el triángulo si no se apaga con su prefijo. */
.iacc-header .capa-menu .cabecera::-webkit-details-marker { display: none; }

.iacc-header .capa-menu .cabecera .chevron {
	display: flex;
	flex: 0 0 auto;
	margin-left: 12px;
	transition: transform .2s ease;
}

.iacc-header .capa-menu .cabecera .chevron svg {
	width: 20px;
	height: 20px;
}

/* Al abrir, la cabecera no cambia de color: solo gira el chevron. */
.iacc-header .capa-menu details[open] > .cabecera .chevron {
	transform: rotate(180deg);
}

/* --- Animación de apertura y cierre ---
   Un <details> no se puede animar de forma directa: el navegador oculta su
   contenido con display, y display no es interpolable.

   ::details-content da acceso a ese contenido como caja propia, e
   'interpolate-size: allow-keywords' permite animar HASTA height:auto sin
   tener que medir la altura con JavaScript.

   Va dentro de @supports como MEJORA PROGRESIVA, igual que en el footer: donde
   el navegador no lo entienda, el acordeón abre y cierra igual, solo que de
   golpe. Nunca se rompe ni queda contenido inaccesible. */
@supports selector(::details-content) {

	.iacc-header .capa-menu { interpolate-size: allow-keywords; }

	.iacc-header .capa-menu details::details-content {
		block-size: 0;
		overflow: hidden;
		transition:
			block-size .3s ease,
			content-visibility .3s allow-discrete;
	}

	.iacc-header .capa-menu details[open]::details-content {
		block-size: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	@supports selector(::details-content) {
		.iacc-header .capa-menu details::details-content { transition: none; }
	}
}

/* --- Cuerpo desplegado --------------------------------------------------- */
.iacc-header .capa-menu .cuerpo {
	padding: 8px 16px 20px;
	/* Un tono más claro que las cabeceras, no más oscuro: así el bloque
	   abierto avanza hacia el lector en vez de hundirse. */
	background: var(--wp--preset--color--neutral-900, #022426);
}

/* Separación entre grupos (POR TIPO, POR ESCUELA, ¿NO SABES CUÁL ELEGIR?). */
.iacc-header .capa-menu .cuerpo > * + * {
	margin-top: 18px;
}

.iacc-header .capa-menu .grupo li + li,
.iacc-header .capa-menu .sueltos li + li {
	margin-top: 2px;
}

.iacc-header .capa-menu .grupo .antetitulo {
	margin-bottom: 2px;
}

/* Móvil/11 Eyebrow */
.iacc-header .capa-menu .antetitulo {
	display: block;

	font-size: var(--wp--preset--font-size--13, 13px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.04px;
	text-transform: uppercase;
	color: var(--wp--preset--color--neutral-400, #9aa7a8);
}

/* Móvil/07 Body */
.iacc-header .capa-menu .cuerpo li a {
	display: flex;
	align-items: center;

	padding: 12px 8px;
	border-radius: 6px;

	font-size: var(--wp--preset--font-size--16, 16px);
	font-weight: 400;
	line-height: 1.45;
	color: var(--wp--preset--color--neutral-0, #fff);
	text-decoration: none;

	transition: background .15s ease;
}

.iacc-header .capa-menu .cuerpo li a:hover,
.iacc-header .capa-menu .cuerpo li a:focus-visible {
	background: var(--wp--preset--color--neutral-850, #0c2d2e);
}

/* Los enlaces de acción son el componente NavAccion: "relleno transparente
   por diseño (…) el borde es lo que comunica que es accionable". Ocupan solo
   lo que mide su texto, no la fila entera. */
.iacc-header .capa-menu .cuerpo li.es-accion + li.es-accion {
	margin-top: 8px;
}

.iacc-header .capa-menu .cuerpo li.es-accion a {
	/* Se encoge hasta su contenido en vez de ocupar la fila entera. */
	display: inline-flex;
	/* 9 y no 10: el borde de 1px suma a los 40 px de alto del diseño. */
	padding: 9px 16px;
	border: 1px solid var(--wp--preset--color--marca-clara, #97c866);
	border-radius: var(--radio-8, 8px);

	/* Escritorio/09 Body S: el mismo estilo que los ítems del menú, para que
	   pertenezcan a la misma familia. */
	font-size: var(--wp--preset--font-size--14, 14px);
	font-weight: 400;
	line-height: 1.45;
}

.iacc-header .capa-menu .cuerpo li.es-accion svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	margin-right: 8px;
}

/* --- Grilla de accesos rápidos ------------------------------------------- */
.iacc-header .capa-menu .utilidades {
	border-top: 1px solid var(--wp--preset--color--neutral-850, #0c2d2e);
	background: var(--wp--preset--color--neutral-975, #010e0f);
}

.iacc-header .capa-menu .accesos {
	display: flex;
	padding: 20px 16px;
}

/* Cuatro columnas en el diseño. Con flex:1 se reparten a partes iguales sea
   cual sea el número de entradas del menú, sin necesidad de grid ni de gap. */
.iacc-header .capa-menu .accesos li {
	flex: 1 1 0;
	min-width: 0;
}

.iacc-header .capa-menu .accesos li + li {
	margin-left: 8px;
}

/* Móvil/15 Nav S */
.iacc-header .capa-menu .accesos a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;

	/* 13 y no 14: el borde de 1px suma a los 77 px de alto del diseño. */
	padding: 13px 4px;
	border: 1px solid var(--wp--preset--color--neutral-800, #163637);
	border-radius: 12px;
	background: var(--wp--preset--color--neutral-900, #022426);

	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	color: var(--wp--preset--color--neutral-400, #9aa7a8);
	text-decoration: none;

	transition: border-color .15s ease, color .15s ease;
}

.iacc-header .capa-menu .accesos a:hover,
.iacc-header .capa-menu .accesos a:focus-visible {
	border-color: var(--wp--preset--color--marca, #52a400);
	color: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-header .capa-menu .accesos svg {
	width: 24px;
	height: 24px;
	margin-bottom: 8px;
	color: var(--wp--preset--color--neutral-0, #fff);
}

/* --- Pie fijo: el componente BarraFlotante anclado al menú ---------------- */
.iacc-header .capa-menu .capa-pie {
	flex: 0 0 auto;
	display: flex;
	align-items: center;

	padding: 16px;
	background: var(--wp--preset--color--neutral-950, #01191a);
	/* Los 28 px de abajo son el hueco de la barra de gestos del sistema;
	   env() solo añade lo que haga falta en móviles con más margen. */
	padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}

/* Móvil/13 Button S */
.iacc-header .capa-menu .capa-pie .cta {
	/* Cede el ancho que necesiten los dos canales y se queda con el resto. */
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;

	padding: 15px 20px;
	border-radius: 999px;

	background: var(--wp--preset--color--marca, #52a400);
	font-size: var(--wp--preset--font-size--14, 14px);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--neutral-900, #022426);
	text-decoration: none;

	transition: background .15s ease;
}

.iacc-header .capa-menu .capa-pie .cta:hover,
.iacc-header .capa-menu .capa-pie .cta:focus-visible {
	background: var(--wp--preset--color--marca-clara, #97c866);
}

/* Separación entre el CTA y los dos canales (Figma: 8 px). */
.iacc-header .capa-menu .capa-pie > * + * {
	margin-left: 8px;
}

/* Sin enlace configurado en Configuración IACC no hay CTA, y los dos canales
   se quedarían sueltos contra el borde izquierdo. Centrarlos deja el pie
   presentable mientras el campo esté vacío. */
.iacc-header .capa-menu .capa-pie:not(:has(.cta)) {
	justify-content: center;
}

/* WhatsApp y asistente. 44 px es el mínimo táctil, como anota el componente. */
.iacc-header .capa-menu .capa-pie .redondo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;

	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--marca, #52a400);
	border-radius: 999px;
	background: none;
	cursor: pointer;

	/* El icono en blanco, como el resto de iconos sobre fondo oscuro; el
	   borde es lo que aporta el verde. */
	color: var(--wp--preset--color--neutral-0, #fff);

	transition: background .15s ease, color .15s ease;
}

.iacc-header .capa-menu .capa-pie .redondo:hover,
.iacc-header .capa-menu .capa-pie .redondo:focus-visible {
	background: var(--wp--preset--color--marca, #52a400);
	color: var(--wp--preset--color--neutral-900, #022426);
}

/* --- Capa de búsqueda (M2) ----------------------------------------------- */
.iacc-header .capa-buscar .capa-cuerpo {
	padding: 20px 16px;
}

.iacc-header .capa-buscar .campo {
	position: relative;
	display: flex;
	align-items: center;

	min-height: 47px;
	padding: 12px 14px;
	border: 1px solid var(--wp--preset--color--neutral-800, #163637);
	border-radius: var(--radio-8, 8px);
	background: var(--wp--preset--color--neutral-975, #010e0f);
}

.iacc-header .capa-buscar .campo:focus-within {
	border-color: var(--wp--preset--color--marca, #52a400);
}

.iacc-header .capa-buscar .campo .icono,
.iacc-header .capa-buscar .campo .cargando {
	margin-right: 8px;
}

.iacc-header .capa-buscar .campo .icono {
	display: flex;
	flex: 0 0 auto;
	color: var(--wp--preset--color--neutral-400, #9aa7a8);
}

.iacc-header .capa-buscar .campo input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	padding: 0;

	/* 16px justos: por debajo de eso, iOS hace zoom al enfocar el campo. */
	font-size: var(--wp--preset--font-size--16, 16px);
	line-height: 1.3;
	color: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-header .capa-buscar .campo input[type="search"]:focus { outline: none; }

.iacc-header .capa-buscar .campo input::placeholder {
	color: var(--wp--preset--color--neutral-400, #9aa7a8);
}

.iacc-header .capa-buscar .campo input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

/* Indicador de carga: sustituye a la lupa mientras hay consulta en vuelo. */
.iacc-header .capa-buscar .campo .cargando {
	display: none;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border: 2px solid var(--wp--preset--color--neutral-800, #163637);
	border-top-color: var(--wp--preset--color--marca, #52a400);
	border-radius: 50%;
	animation: iacc-girar .6s linear infinite;
}

.iacc-header .capa-buscar .campo.buscando .icono { display: none; }
.iacc-header .capa-buscar .campo.buscando .cargando { display: block; }

/* --- Historial y resultados (comparten sitio bajo el campo) --------------- */
.iacc-header .capa-buscar .sugerencias {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.iacc-header .capa-buscar .sugerencias[hidden] { display: none; }

.iacc-header .capa-buscar .sugerencias ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.iacc-header .capa-buscar .sugerencias-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 8px 8px;
}

.iacc-header .capa-buscar .sugerencias-cabecera .borrar {
	margin-left: 12px;
}

.iacc-header .capa-buscar .sugerencias-cabecera .antetitulo {
	font-size: var(--wp--preset--font-size--13, 13px);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--neutral-400, #9aa7a8);
}

.iacc-header .capa-buscar .sugerencias-cabecera .borrar {
	border: 0;
	background: none;
	padding: 4px;
	cursor: pointer;

	font-size: var(--wp--preset--font-size--13, 13px);
	font-weight: 600;
	color: var(--wp--preset--color--marca, #52a400);
	text-decoration: underline;
}

/* Un término del historial y un resultado se ven igual: la misma fila. */
.iacc-header .capa-buscar .sugerencias li a,
.iacc-header .capa-buscar .sugerencias li button {
	display: flex;
	align-items: center;
	width: 100%;

	min-height: 47px;
	padding: 12px 8px;
	border: 0;
	border-radius: var(--radio-8, 8px);
	background: none;
	cursor: pointer;

	font-size: var(--wp--preset--font-size--14, 14px);
	font-weight: 500;
	line-height: 1.4;
	text-align: left;
	color: var(--wp--preset--color--neutral-0, #fff);
	text-decoration: none;

	transition: background .15s ease;
}

/* Los títulos de entrada son largos y a tres líneas la lista deja de ser
   escaneable: se cortan en dos con puntos suspensivos. El recorte va en el
   <span>, no en el <a>: sobre el <a> el padding deja asomar media línea. */
.iacc-header .resultados li a span {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.iacc-header .capa-buscar .sugerencias li a:hover,
.iacc-header .capa-buscar .sugerencias li a:focus-visible,
.iacc-header .capa-buscar .sugerencias li button:hover,
.iacc-header .capa-buscar .sugerencias li button:focus-visible,
.iacc-header .capa-buscar .sugerencias li.activa a {
	background: var(--wp--preset--color--neutral-850, #0c2d2e);
}

@media (prefers-reduced-motion: reduce) {
	.iacc-header .capa-menu .cabecera .chevron,
	.iacc-header .capa-menu .cuerpo li a,
	.iacc-header .capa-menu .accesos a,
	.iacc-header .capa-buscar .sugerencias li a,
	.iacc-header .capa-buscar .sugerencias li button { transition: none; }

	.iacc-header .capa-buscar .campo .cargando { animation-duration: 2s; }
}

/* ===========================================================================
   BOTONES FLOTANTES DE CONTACTO

   Anclados a la esquina inferior derecha en todo el sitio. El de WhatsApp
   despliega los canales configurados; debajo va el del asistente.

   Mismo estilo que los botones redondos del pie del menú móvil: fondo oscuro
   de marca, borde verde e icono blanco. Ahí el fondo lo ponía la propia capa;
   aquí flotan sobre el contenido del sitio, así que lo llevan puesto.

   Desaparecen en cuanto alcanzan el pie de página, para no dibujarse sobre él.
   =========================================================================== */
.iacc-flotantes {
	position: fixed;
	right: 16px;
	/* Deja hueco para la barra de gestos del sistema en iOS y Android. */
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	z-index: 90;

	display: flex;
	flex-direction: column;
	align-items: flex-end;

	/* El contenedor solo coloca; quien recibe los clics son los botones. Sin
	   esto, el hueco vacío entre ellos y el que deja un botón oculto siguen
	   robando pulsaciones a lo que haya debajo. */
	pointer-events: none;

	transition: opacity .25s ease, visibility .25s, transform .25s ease;
}

.iacc-flotantes > * {
	pointer-events: auto;
}

/* Se apartan cuando hay una capa a pantalla completa por delante: el menú
   móvil, el buscador o la ventana del formulario. Si no, quedarían flotando
   sobre un contenido con el que no tienen nada que ver. */
html.iacc-sin-scroll .iacc-flotantes {
	display: none;
}

/* Y desaparecen al llegar al pie de página: ahí el footer ya tiene sus propios
   datos de contacto y enlaces, así que los botones no aportan nada y solo se
   dibujan encima. Lo marca el JavaScript comparando posiciones. */
.iacc-flotantes.esta-oculto {
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	pointer-events: none;
}



.iacc-flotantes__boton {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 56px;
	height: 56px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--marca, #52a400);
	border-radius: 999px;
	background: var(--wp--preset--color--neutral-900, #022426);
	cursor: pointer;

	/* El icono en blanco; el borde es lo que aporta el verde. */
	color: var(--wp--preset--color--neutral-0, #fff);
	box-shadow: 0 4px 16px rgb(2 36 38 / .28);

	transition: transform .15s ease, background .15s ease, color .15s ease;
}

.iacc-flotantes__boton + .iacc-flotantes__boton {
	margin-top: 12px;
}

.iacc-flotantes__boton:hover {
	transform: translateY(-2px);
}

.iacc-flotantes__boton:focus-visible {
	outline: 2px solid var(--wp--preset--color--neutral-900, #022426);
	outline-offset: 2px;
}

/* Al pasar por encima se invierten, igual que en el menú móvil. */
.iacc-flotantes__boton:hover,
.iacc-flotantes__boton:focus-visible {
	background: var(--wp--preset--color--marca, #52a400);
	color: var(--wp--preset--color--neutral-900, #022426);
}

/* La X sustituye al icono mientras el desplegable está abierto.

   Cada botón tiene la suya, así que los selectores van acotados al suyo: sin
   el prefijo del botón, abrir WhatsApp encendía también la X del asistente. */
.iacc-flotantes__boton--wa .iacc-flotantes__cerrar,
.iacc-flotantes.esta-abierto .iacc-flotantes__boton--wa > svg:first-child {
	display: none;
}

.iacc-flotantes.esta-abierto .iacc-flotantes__boton--wa .iacc-flotantes__cerrar {
	display: block;
}

/* --- Canales desplegables ------------------------------------------------- */
.iacc-flotantes__canales {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;

	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.iacc-flotantes__canales[hidden] {
	display: none;
}

.iacc-flotantes__canales li + li {
	margin-top: 8px;
}

.iacc-flotantes__canal {
	display: flex;
	align-items: center;

	min-height: 48px;
	padding: 12px 22px;
	border: 1px solid var(--wp--preset--color--marca, #52a400);
	border-radius: 999px;
	background: var(--wp--preset--color--neutral-900, #022426);

	font-size: var(--wp--preset--font-size--16, 16px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--neutral-0, #fff);
	text-decoration: none;
	white-space: nowrap;

	box-shadow: 0 4px 16px rgb(2 36 38 / .28);
	transition: background .15s ease;
}

.iacc-flotantes__canal:hover,
.iacc-flotantes__canal:focus-visible {
	background: var(--wp--preset--color--marca, #52a400);
	color: var(--wp--preset--color--neutral-900, #022426);
}

.iacc-flotantes__canal svg {
	flex: 0 0 auto;
	margin-right: 10px;
}

/* Entrada escalonada: cada etiqueta aparece un poco después de la anterior, de
   arriba abajo, para que se lea el orden en vez de aparecer todas de golpe. */
@supports (transition-behavior: allow-discrete) {

	.iacc-flotantes__canal {
		opacity: 1;
		translate: 0 0;
		transition:
			opacity .18s ease,
			translate .18s ease,
			background .15s ease;
	}

	@starting-style {
		.iacc-flotantes__canales:not([hidden]) .iacc-flotantes__canal {
			opacity: 0;
			translate: 0 8px;
		}
	}

	.iacc-flotantes__canales li:nth-child(2) .iacc-flotantes__canal {
		transition-delay: .05s;
	}
}

@media (max-width: 600px) {

	.iacc-flotantes {
		right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	}

	.iacc-flotantes__boton {
		width: 52px;
		height: 52px;
	}

	.iacc-flotantes__canal {
		min-height: 44px;
		padding: 10px 18px;
		font-size: var(--wp--preset--font-size--14, 14px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.iacc-flotantes__boton,
	.iacc-flotantes__canal { transition: none; }

	.iacc-flotantes__boton:hover { transform: none; }
}

/* ===========================================================================
   VENTANA DEL ASISTENTE

   Se abre desde el botón flotante y desde el del menú móvil. Dentro va un
   <iframe> del proveedor, que el JavaScript crea la primera vez que se abre.

   Como el documento es de otro dominio, su interior no se puede estilizar
   desde aquí: lo que se viste es el marco —cabecera, bordes y sombra— para que
   la ventana pertenezca al sitio aunque el chat de dentro sea ajeno.
   =========================================================================== */
.iacc-chat {
	position: fixed;
	right: 16px;
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	z-index: 95;

	display: flex;
	flex-direction: column;
	width: 380px;
	/* Alto cómodo sin comerse la pantalla en un portátil pequeño. */
	height: min(600px, calc(100vh - 120px));

	border-radius: 16px;
	overflow: hidden;
	background: var(--wp--preset--color--neutral-0, #fff);
	box-shadow: 0 12px 40px rgb(2 36 38 / .28);
}

.iacc-chat[hidden] {
	display: none;
}

.iacc-chat__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 0 0 auto;

	padding: 14px 16px;
	background: var(--wp--preset--color--neutral-900, #022426);
	color: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-chat__titulo {
	font-size: var(--wp--preset--font-size--16, 16px);
	font-weight: 700;
	line-height: 1.3;
}

.iacc-chat__cerrar {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 32px;
	height: 32px;
	margin-left: 12px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	cursor: pointer;

	color: var(--wp--preset--color--neutral-0, #fff);
	transition: background .15s ease;
}

.iacc-chat__cerrar:hover,
.iacc-chat__cerrar:focus-visible {
	background: rgb(255 255 255 / .14);
}

.iacc-chat__cuerpo {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	min-height: 0;
	padding: 16px;
	background: var(--wp--preset--color--neutral-0, #fff);
}

/* --- El asistente anterior, dentro de su marco ---------------------------
   Mientras el interruptor de Configuración IACC esté encendido, aquí no hay
   conversación propia sino una página de otro dominio. Ocupa todo el hueco que
   le deja el panel, sin el relleno de alrededor: su contenido ya trae el suyo
   y, con los dos, el chat quedaba en una columna estrecha en el centro. */
.iacc-chat__cuerpo:has( > .iacc-chat-marco ) {
	padding: 0;
}

/*
 * El marco se amolda al hueco que le dan y no al revés.
 *
 * Tuvo un alto mínimo de 420 px, puesto por si algún contenedor no imponía
 * ninguno. Lo imponen los tres, así que lo único que hacía era desbordarlos:
 * 21 px en la ficha de carrera en pantalla ancha y 390 px por debajo de los
 * 900, donde ese panel es mucho más bajo. Como el contenedor recorta lo que se
 * sale, el campo de escribir quedaba cortado por abajo.
 */
.iacc-chat-marco {
	display: flex;
	flex: 1;
	min-height: 0;
}

.iacc-chat-marco__iframe {
	flex: 1;
	width: 100%;
	min-height: 0;
	border: 0;
}

/*
 * En la ficha de carrera, el marco se pliega con el panel igual que lo hacía la
 * conversación propia: en pantalla estrecha ese panel arranca cerrado —abierto
 * se comería la portada— y se abre con el chevron de su cabecera.
 *
 * YA NO HAY MARCO EN LA FICHA
 * Lo hubo, con un alto mínimo de 450 px para que el asistente anterior no
 * sacara su propia barra de desplazamiento dentro de la que ya tiene el panel.
 * No daba: medido con una conversación empezada, ese maquetado necesita 540 px
 * a los 454 de ancho del panel y más todavía a los 316 de la vista estrecha,
 * donde salían dos barras pegadas. Y no se puede tocar desde aquí, porque vive
 * en un marco de otro dominio.
 *
 * Además eran dos marcos en la misma página —este y el flotante—, cada uno con
 * su conversación: quien preguntaba arriba y seguía abajo empezaba de cero.
 *
 * Así que en la ficha queda el saludo y un botón, y el marco se pinta solo en
 * la ventana flotante, que da 540 px en pantalla ancha y 560 en la estrecha y
 * ahí no desborda. Ver iacc_chat_invitacion() en inc/chat.php.
 */
.iacc-chat-invita {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/*
 * El mismo botón de marca que el resto de llamadas de la ficha. Se escribe
 * aquí y no en carrera.css porque la invitación es una pieza del asistente y
 * puede acabar en cualquier panel, no solo en esa plantilla.
 */
.iacc-chat-invita__boton {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;

	min-height: 48px;
	padding: 12px 24px;
	border: 0;
	border-radius: 12px;
	cursor: pointer;

	font-family: inherit;
	font-size: var(--wp--preset--font-size--16, 16px);
	font-weight: 700;
	line-height: 1;
	text-align: center;

	background: var(--wp--preset--color--marca, #52a400);
	color: var(--wp--preset--color--neutral-900, #022426);
	box-shadow: 0 4px 14px rgb(82 164 0 / 40%);

	transition: background .15s ease, box-shadow .15s ease;
}

.iacc-chat-invita__boton:hover {
	background: var(--wp--preset--color--marca-clara, #97c866);
}

.iacc-chat-invita__boton:focus-visible {
	outline: 2px solid var(--wp--preset--color--neutral-900, #022426);
	outline-offset: -2px;
}

.iacc-chat-invita__boton svg {
	flex: none;
	width: 16px;
	height: 16px;
	transition: transform .15s ease;
}

.iacc-chat-invita__boton:hover svg {
	transform: translateX(3px);
}

/*
 * El panel que solo lleva la invitación se queda con lo que ocupa.
 *
 * En pantalla ancha ese panel tiene 560 px de alto fijos, que es lo que pide la
 * conversación entera: mensajes, preguntas y caja de escribir. El saludo con un
 * botón ocupa la mitad, así que sin esto quedaba medio panel vacío sobre la
 * fotografía. El flex se deja como está: en esa fila horizontal su base de
 * 496 px es el ANCHO, y tocarlo deja el panel delgado.
 */
@media (min-width: 992px) {

	.iacc-carrera__asistente:has( .iacc-chat-invita ) {
		height: auto;
	}
}

/*
 * Lo mismo en pantalla estrecha, donde el alto no lo pone el panel sino la caja
 * que se pliega: 340 px fijos, los que necesita la conversación. Con solo el
 * saludo y el botón sobran unos 150 px de vacío bajo el botón.
 *
 * Aquí sí se puede dejar en auto sin romper el plegado: la animación la gobierna
 * la rejilla de fuera (0fr a 1fr), y lo que esta regla toca es la caja de
 * dentro, que solo mide cuando está abierta.
 */
.iacc-carrera__asistente[data-abierto] .iacc-carrera__asistente-interior:has( .iacc-chat-invita ) {
	height: auto;
}

/* ---------------------------------------------------------------------------
   La conversación
   ---------------------------------------------------------------------------
   Las mismas piezas que en la portada de las fichas, con otras clases: allí el
   panel va sobre la fotografía y aquí sobre fondo claro. Lo que cambia es el
   color, no la estructura.
   ------------------------------------------------------------------------ */
.iacc-chat__mensajes {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;

	/* La barra del sistema es ancha y opaca, y en una ventana de 360 px se
	   come una franja de la conversación. Esta es fina y se apoya en el gris
	   del propio panel. */
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--gris-borde, #ccd3d4) transparent;
}

.iacc-chat__mensajes::-webkit-scrollbar {
	width: 6px;
}

.iacc-chat__mensajes::-webkit-scrollbar-track {
	background: transparent;
}

.iacc-chat__mensajes::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--gris-borde, #ccd3d4);
	border-radius: 999px;
}

.iacc-chat__mensajes::-webkit-scrollbar-thumb:hover {
	background: var(--wp--preset--color--texto-medio, #4e6667);
}

.iacc-chat__fila {
	display: flex;
}

/* Lo que dice el visitante va a la derecha; lo que responde el asistente, a la
   izquierda. Es la convención de cualquier chat y se entiende sin explicarla. */
.iacc-chat__fila--user {
	justify-content: flex-end;
}

.iacc-chat__burbuja {
	max-width: 85%;
	margin: 0;
	padding: 12px 14px;
	font-size: var(--wp--preset--font-size--14, 0.875rem);
	line-height: 1.45;
	border-radius: 12px;
}

.iacc-chat__burbuja--bot {
	color: var(--wp--preset--color--texto, #272727);
	background: var(--wp--preset--color--gris-suave, #f5f6f6);
	border-bottom-left-radius: 4px;
}

.iacc-chat__burbuja--user {
	color: var(--wp--preset--color--neutral-0, #fff);
	background: var(--wp--preset--color--marca-oscura, #3d7a00);
	border-bottom-right-radius: 4px;
}

/* --- Mientras el asistente redacta ---------------------------------------- */

/*
 * Tres puntos que suben por turnos. Es decoración —el aviso de que hay
 * respuesta lo da la región que anuncia los mensajes—, así que se detiene con
 * el ajuste de movimiento reducido: es una animación en bucle, justo lo que ese
 * ajuste pide parar.
 */
.iacc-chat__escribiendo {
	display: flex;
	gap: 4px;
	align-items: center;
	align-self: flex-start;
	padding: 14px;
	background: var(--wp--preset--color--gris-suave, #f5f6f6);
	border-radius: 12px;
	border-bottom-left-radius: 4px;
}

.iacc-chat__escribiendo span {
	width: 6px;
	height: 6px;
	background: var(--wp--preset--color--texto-medio, #4e6667);
	border-radius: 50%;
	animation: iacc-chat-punto 1.4s ease-in-out infinite;
}

.iacc-chat__escribiendo span:nth-child(2) { animation-delay: 0.2s; }
.iacc-chat__escribiendo span:nth-child(3) { animation-delay: 0.4s; }

@keyframes iacc-chat-punto {
	0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
	30%           { opacity: 1; transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {

	.iacc-chat__escribiendo span {
		opacity: 0.6;
		animation: none;
	}
}

/* --- Las preguntas de arranque -------------------------------------------- */

.iacc-chat__sugerencias {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.iacc-chat__sugerencia {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	font: inherit;
	font-size: var(--wp--preset--font-size--14, 0.875rem);
	text-align: left;
	color: var(--wp--preset--color--texto, #272727);
	background: var(--wp--preset--color--neutral-0, #fff);
	border: 1px solid var(--wp--preset--color--gris-borde, #ccd3d4);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.iacc-chat__sugerencia:hover:not(:disabled) {
	background: var(--wp--preset--color--marca-sutil, #eef6e6);
	border-color: var(--wp--preset--color--marca, #52a400);
}

.iacc-chat__sugerencia svg {
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--wp--preset--color--marca, #52a400);
}

/* --- La caja de escritura ------------------------------------------------- */

.iacc-chat__campo {
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 6px 6px 6px 14px;
	background: var(--wp--preset--color--neutral-0, #fff);
	border: 1px solid var(--wp--preset--color--gris-borde, #ccd3d4);
	border-radius: 999px;
}

.iacc-chat__campo:focus-within {
	border-color: var(--wp--preset--color--marca, #52a400);
}

.iacc-chat__entrada {
	flex: 1;
	min-width: 0;
	padding: 8px 0;
	font: inherit;
	font-size: var(--wp--preset--font-size--14, 0.875rem);
	color: var(--wp--preset--color--texto, #272727);
	background: none;
	border: 0;
}

.iacc-chat__entrada:focus {
	outline: none;
}

.iacc-chat__enviar {
	display: grid;
	flex: none;
	place-items: center;
	width: 36px;
	height: 36px;
	color: var(--wp--preset--color--neutral-0, #fff);
	background: var(--wp--preset--color--marca, #52a400);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.iacc-chat__enviar:hover:not(:disabled) {
	background: var(--wp--preset--color--marca-oscura, #3d7a00);
}

.iacc-chat__enviar svg {
	width: 18px;
	height: 18px;
}

/* Desactivados es como nacen: sin JavaScript no hay a quién preguntar, y es
   mejor que se note a aceptar una pregunta que nadie recogería. */
.iacc-chat__entrada:disabled,
.iacc-chat__enviar:disabled,
.iacc-chat__sugerencia:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* --- El avatar de la cabecera --------------------------------------------- */

.iacc-chat__avatar {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	width: 32px;
	height: 32px;
	color: var(--wp--preset--color--marca-clara, #97c866);
	background: rgb(255 255 255 / 12%);
	border-radius: 50%;
}

.iacc-chat__avatar svg {
	width: 18px;
	height: 18px;
}

/* El punto verde dice que el asistente está disponible. */
.iacc-chat__punto {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 9px;
	height: 9px;
	background: var(--wp--preset--color--esmeralda, #2cb45f);
	border: 2px solid var(--wp--preset--color--verde-profundo, #033934);
	border-radius: 50%;
}

/* El botón del asistente pasa a una X mientras la ventana está abierta. */
.iacc-flotantes__boton--chat .iacc-flotantes__cerrar,
.iacc-flotantes.chat-abierto .iacc-flotantes__boton--chat .iacc-flotantes__icono-chat {
	display: none;
}

.iacc-flotantes.chat-abierto .iacc-flotantes__boton--chat .iacc-flotantes__cerrar {
	display: block;
}

/* Con el chat abierto sobra el botón de WhatsApp: la ventana ocupa su sitio y
   se solaparían. */
.iacc-flotantes.chat-abierto .iacc-flotantes__boton--wa,
.iacc-flotantes.chat-abierto .iacc-flotantes__canales {
	display: none;
}

/* --- Apertura ---
   Mismo mecanismo que el resto de capas del sitio: transición sobre display
   con allow-discrete, y @starting-style para el estado de partida. */
@supports (transition-behavior: allow-discrete) {

	.iacc-chat {
		opacity: 1;
		translate: 0 0;
		transition:
			opacity .2s ease,
			translate .2s ease,
			display .2s allow-discrete;
	}

	.iacc-chat[hidden] {
		display: none;
		opacity: 0;
		translate: 0 12px;
	}

	@starting-style {
		.iacc-chat:not([hidden]) {
			opacity: 0;
			translate: 0 12px;
		}
	}
}

/* En móvil ocupa casi toda la pantalla: a 390 px una ventanita de 380 no deja
   sitio para nada más, y el chat necesita espacio para escribir. */
@media (max-width: 600px) {

	.iacc-chat {
		right: 8px;
		left: 8px;
		bottom: calc(8px + env(safe-area-inset-bottom, 0px));
		width: auto;
		height: min(620px, calc(100dvh - 90px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.iacc-chat__cerrar { transition: none; }

	@supports (transition-behavior: allow-discrete) {
		.iacc-chat {
			transition: opacity .1s ease, display .1s allow-discrete;
			translate: none;
		}

		.iacc-chat[hidden] { translate: none; }

		@starting-style {
			.iacc-chat:not([hidden]) { translate: none; }
		}
	}
}

/* ===========================================================================
   Banda de logos en movimiento

   Vive aquí y no en un bloque porque la usan varios: las certificaciones del
   respaldo y las empresas de los testimonios. El marcado lo imprime
   iacc_banda_logos() y el movimiento lo pone assets/js/main.js.
   =========================================================================== */
.iacc-certificaciones {
	padding-top: 32px;
}

.iacc-certificaciones__antetitulo {
	margin: 0 0 16px;
	font-size: var(--wp--preset--font-size--13, 13px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.04px;
	text-transform: uppercase;
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
}

.iacc-certificaciones__carrusel {
	position: relative;
	display: flex;
	align-items: center;
}

/* Los bordes se desvanecen para que los logos entren y salgan en vez de
   aparecer cortados de golpe contra el borde del contenedor. */
.iacc-certificaciones__carrusel::before,
.iacc-certificaciones__carrusel::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	width: 40px;
	pointer-events: none;
}

.iacc-certificaciones__carrusel::before {
	left: 0;
	background: linear-gradient(90deg, var(--wp--preset--color--neutral-0, #fff), transparent);
}

.iacc-certificaciones__carrusel::after {
	right: 0;
	background: linear-gradient(270deg, var(--wp--preset--color--neutral-0, #fff), transparent);
}

.iacc-certificaciones__pista {
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;

	margin: 0;
	padding: 16px 0;
	list-style: none;

	overflow-x: auto;
	/* Nada de scroll-behavior: smooth ni scroll-snap. El avance lo lleva el
	   JavaScript píxel a píxel, y ambos pelearían con él. */
	scrollbar-width: none;

	/* Se arrastra con el ratón; el navegador no debe seleccionar texto por el
	   camino. */
	cursor: grab;
	user-select: none;
}

.iacc-certificaciones__pista::-webkit-scrollbar {
	display: none;
}

.iacc-certificaciones__pista.esta-arrastrando {
	cursor: grabbing;
}

.iacc-certificaciones__logo {
	flex: 0 0 auto;
}

.iacc-certificaciones__logo + .iacc-certificaciones__logo {
	margin-left: 24px;
}

/* En gris para que la fila se lea como un conjunto; al pasar por encima, cada
   logo recupera su color. */
.iacc-certificaciones__logo img {
	display: block;
	width: auto;
	height: 36px;
	object-fit: contain;

	filter: grayscale(1);
	opacity: .7;
	transition: filter .2s ease, opacity .2s ease;

	/* Sin esto, arrastrar sobre un logo arranca el arrastre de imagen del
	   navegador en vez de mover la fila. */
	-webkit-user-drag: none;
	pointer-events: none;
}

.iacc-certificaciones__logo a {
	display: block;
}

.iacc-certificaciones__logo a:hover img,
.iacc-certificaciones__logo a:focus-visible img {
	filter: none;
	opacity: 1;
	pointer-events: auto;
}

/* --- Pausa: fuera de la vista, no del alcance -----------------------------
   Algo que se mueve solo necesita poder detenerse. Con el ratón basta pasar
   por encima, pero quien navega con teclado no tiene ese recurso: este botón
   aparece al recibir el foco. */
.iacc-certificaciones__pausa {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.iacc-certificaciones__pausa:focus-visible {
	position: static;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;

	width: auto;
	height: auto;
	margin: 0 12px 0 0;
	padding: 6px 12px;
	overflow: visible;
	clip-path: none;

	border: 1px solid var(--wp--preset--color--marca-oscura, #3d7a00);
	border-radius: 999px;
	background: var(--wp--preset--color--neutral-0, #fff);
	cursor: pointer;

	font-size: var(--wp--preset--font-size--13, 13px);
	font-weight: 600;
	color: var(--wp--preset--color--marca-oscura, #3d7a00);

	outline: 2px solid var(--wp--preset--color--marca-oscura, #3d7a00);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.iacc-certificaciones__logo img { transition: none; }
}

/* ===========================================================================
   ESCRITORIO — Figma 332:241

   Mismo corte que el resto del tema: 992px.
   =========================================================================== */
@media (min-width: 992px) {

	.iacc-respaldo {
		padding-block: 64px;
	}

	/* Escritorio/03 H2. */
	.iacc-respaldo__titulo {
		font-size: var(--wp--preset--font-size--40, 40px);
	}

	.iacc-respaldo__bajada {
		font-size: var(--wp--preset--font-size--18, 18px);
	}

	.iacc-respaldo__tarjetas {
		flex-direction: row;
		align-items: stretch;
	}

	.iacc-respaldo__tarjetas > * + * {
		margin-top: 0;
		margin-left: 32px;
	}

	.iacc-respaldo__sello,
	.iacc-respaldo__cert {
		padding: 24px 32px;
	}

	/* El sello ocupa el tercio de la izquierda; la tarjeta de certificaciones,
	   el resto: tiene mucho más que contar. */
	.iacc-respaldo__sello {
		flex: 1 1 0;
		justify-content: center;
		min-width: 0;
	}

	.iacc-respaldo__cert {
		flex: 0 0 816px;
		max-width: 816px;
	}

	.iacc-respaldo__sello-texto {
		max-width: 232px;
	}

	/* Dos columnas, repartidas por el navegador. */
	.iacc-respaldo__carreras {
		columns: 2;
		column-gap: 48px;
		margin-bottom: 15px;
	}

	.iacc-respaldo__carreras li {
		/* Evita que un elemento quede partido entre las dos columnas. */
		break-inside: avoid;
	}

	.iacc-certificaciones__antetitulo {
		text-align: center;
	}

	/* La separación cede antes que el tamaño de los logos: entre 24 y 48 px
	   según el ancho que quede. */
	.iacc-certificaciones__logo + .iacc-certificaciones__logo {
		margin-left: clamp(24px, 3vw, 48px);
	}

	.iacc-certificaciones__logo img {
		height: 59px;
	}
}


/* --- Sobre fondo oscuro --------------------------------------------------
   Los logos llegan en colores muy distintos y aquí van sobre verde profundo.
   Se blanquean para que la fila se lea como un conjunto y no como un mosaico
   de marcas peleándose entre sí. */
.iacc-certificaciones.es-oscuro .iacc-certificaciones__antetitulo {
	color: var(--wp--preset--color--marca-clara, #97c866);
}

.iacc-certificaciones.es-oscuro .iacc-certificaciones__logo img {
	filter: brightness(0) invert(1);
	opacity: .75;
}

.iacc-certificaciones.es-oscuro .iacc-certificaciones__logo:hover img {
	opacity: 1;
}

/* Los degradados de los lados tienen que ir del color del fondo de turno. */
.iacc-certificaciones.es-oscuro .iacc-certificaciones__carrusel::before {
	background: linear-gradient(to right, var(--wp--preset--color--verde-profundo, #033934), transparent);
}

.iacc-certificaciones.es-oscuro .iacc-certificaciones__carrusel::after {
	background: linear-gradient(to left, var(--wp--preset--color--verde-profundo, #033934), transparent);
}

/* ===========================================================================
   Puntos de los carruseles que se deslizan

   Los monta main.js y los usan las tarjetas de carreras y los testimonios.
   =========================================================================== */
.iacc-slider__puntos {
	display: flex;
	justify-content: center;
	gap: 8px;

	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.iacc-slider__punto {
	/* Botón de 8 px a la vista pero con 24 de zona pulsable: por debajo de eso
	   es difícil de acertar con el dedo. */
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;

	background: none;
	border: 0;
	cursor: pointer;
	appearance: none;
}

/*
 * Mismo IndicadorCarrusel que el hero, con los colores del modo claro: el
 * inactivo es el texto de la página al 40 % y el activo, el verde de marca.
 * Aquí los carruseles son horizontales, así que la píldora va tumbada —20 de
 * ancho por 8 de alto— en vez de de pie como en la portada.
 */
.iacc-slider__punto::before {
	content: "";
	position: absolute;
	inset: 8px;

	background: rgb(39 39 39 / .4);
	border-radius: 4px;
	transition: background-color .2s ease, inset .2s ease;
}

.iacc-slider__punto:hover::before {
	background: rgb(39 39 39 / .6);
}

.iacc-slider__punto.es-activa::before {
	inset: 8px 2px;
	background: var(--wp--preset--color--marca-oscura, #3d7a00);
}

/*
 * MUCHOS PUNTOS: UNA VENTANA QUE ROTA
 * Dieciséis puntos miden más de quinientos y empujaban la página a lo ancho.
 * Con más de los que caben, la fila se recorta a siete y se desplaza para dejar
 * el activo en el medio; los demás asoman a los lados y se entiende que hay
 * más. La clase la pone main.js después de medir: si caben todos, esta regla no
 * se aplica y la fila sigue como estaba.
 *
 * El relleno lateral es media ventana menos medio punto, y por eso el primero y
 * el último también llegan al centro.
 */
.iacc-slider__puntos.es-rotando {
	/*
	 * El ancho de la ventana lo mide main.js —siete puntos como mucho, menos si
	 * el sitio es más estrecho— y de ahí sale el relleno: media ventana menos
	 * medio punto. Un porcentaje no serviría, porque el relleno se calcularía
	 * contra el contenedor y no contra la ventana.
	 */
	box-sizing: border-box;
	width: var(--iacc-puntos-ventana, 216px);
	/*
	 * Centrada, y saliéndose del contenedor cuando la ventana es más ancha que
	 * él: así los puntos llegan al borde de la pantalla en vez de quedarse
	 * dentro del margen, igual que hace la pista de tarjetas.
	 */
	margin-inline: calc((var(--iacc-puntos-ventana, 216px) - 100%) / -2);
	padding-inline: calc(var(--iacc-puntos-ventana, 216px) / 2 - 12px);

	/* Desde el principio y no centrado: con el relleno, el primer punto ya cae
	   en el medio, y así el desplazamiento empieza donde tiene que empezar. */
	justify-content: flex-start;

	overflow-x: hidden;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {

	.iacc-slider__puntos.es-rotando {
		scroll-behavior: auto;
	}
}



/* ===========================================================================
   El asistente en grande
   ===========================================================================
   La misma conversación que la ventana pequeña, con sitio para leerla. Las
   piezas de dentro —la cabecera, las burbujas, la caja de escritura, la barra
   de desplazamiento— son las mismas clases sueltas de arriba, así que aquí solo
   está la caja que las contiene.
   ======================================================================== */

.iacc-chat-grande {
	width: min(720px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	padding: 0;
	color: var(--wp--preset--color--texto, #272727);
	background: none;
	border: 0;
	overflow: visible;
}

.iacc-chat-grande::backdrop {
	background: rgb(1 25 26 / 72%);
}

.iacc-chat-grande__caja {
	display: flex;
	flex-direction: column;

	/* Alto fijo, como los otros dos: la conversación se desplaza por dentro y
	   la ventana no da saltos con cada respuesta. */
	height: min(78vh, 720px);
	overflow: hidden;
	background: var(--wp--preset--color--neutral-0, #fff);
	border-radius: 16px;
	box-shadow: 0 24px 60px rgb(1 25 26 / 45%);
}

/* En el formato pequeño ocupa la pantalla: una ventana flotante dentro de otra
   ventana estrecha deja los mensajes en una columna de nada. */
@media (max-width: 600px) {

	.iacc-chat-grande {
		width: 100vw;
		max-width: none;
		max-height: 100dvh;
		margin: 0;
	}

	.iacc-chat-grande__caja {
		height: 100dvh;
		border-radius: 0;
	}
}

/* --- El botón de ampliar -------------------------------------------------- */

.iacc-chat__ampliar {
	display: grid;
	flex: none;
	place-items: center;
	width: 32px;
	height: 32px;
	margin-left: auto;
	color: var(--wp--preset--color--neutral-0, #fff);
	background: rgb(255 255 255 / 10%);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color .2s ease;
}

.iacc-chat__ampliar:hover,
.iacc-chat__ampliar:focus-visible {
	background: rgb(255 255 255 / 20%);
}

/* El título ya no empuja al cerrar: entre los dos botones está el de ampliar. */
.iacc-chat__cabecera .iacc-chat__ampliar + .iacc-chat__cerrar {
	margin-left: 4px;
}

/* Dentro del pop-up no hay nada que ampliar: ya está en grande. */
.iacc-chat-grande .iacc-chat__ampliar {
	display: none;
}

/* --- Apertura y cierre ---------------------------------------------------- */

/* Mismo mecanismo que el resto de ventanas del sitio: sin animar 'overlay' con
   allow-discrete, un <dialog> sale de la capa superior al cerrarse y la salida
   no se llega a ver. */
@supports (transition-behavior: allow-discrete) {

	.iacc-chat-grande {
		opacity: 0;
		scale: .97;
		translate: 0 8px;
		transition:
			opacity .22s ease,
			scale .22s ease,
			translate .22s ease,
			display .22s allow-discrete,
			overlay .22s allow-discrete;
	}

	.iacc-chat-grande[open] {
		opacity: 1;
		scale: 1;
		translate: 0 0;
	}

	@starting-style {

		.iacc-chat-grande[open] {
			opacity: 0;
			scale: .97;
			translate: 0 8px;
		}
	}

	.iacc-chat-grande::backdrop {
		background: rgb(1 25 26 / 0%);
		transition:
			background .22s ease,
			display .22s allow-discrete,
			overlay .22s allow-discrete;
	}

	.iacc-chat-grande[open]::backdrop {
		background: rgb(1 25 26 / 72%);
	}

	@starting-style {

		.iacc-chat-grande[open]::backdrop {
			background: rgb(1 25 26 / 0%);
		}
	}
}

@media (prefers-reduced-motion: reduce) {

	.iacc-chat-grande {
		transition: none;
	}
}

/* La banda recibe el foco para poder recorrerla con teclado: que se note. */
.iacc-certificaciones__pista:focus-visible {
	outline: 2px solid var(--wp--preset--color--marca, #52a400);
	outline-offset: 2px;
	border-radius: 8px;
}

/* ===========================================================================
   Formularios con la etiqueta fija
   ===========================================================================
   Algunos diseños llevan la etiqueta encima del campo y el marcador de posición
   a la vista, en vez de la etiqueta flotante del resto del sitio. El contenedor
   lo declara con data-iacc-etiquetas="fijas" y main.js deja de marcar esos
   campos como flotantes, así que aquí no hay nada que anular: solo darle a la
   etiqueta su forma.
   ======================================================================== */

[data-iacc-etiquetas="fijas"] .iacc-form .hs-form-field > label {
	margin: 0 0 8px;
	padding: 0;
	font-size: var(--wp--preset--font-size--13, 13px);
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--neutral-700, #304b4d);
	background: none;
}

/* El campo ya no reserva sitio para una etiqueta que se le pone encima. */
[data-iacc-etiquetas="fijas"] .iacc-form .hs-form-field {
	padding-top: 0;
}

/* ---------------------------------------------------------------------------
   Migas de pan

   Franja entre la cabecera y la portada. Solo en escritorio: el diseño no la
   incluye en el formato pequeño, y cuatro niveles no caben en 350 px sin
   partirse en dos líneas.

   Se oculta con CSS y no se deja de imprimir: el rastro sigue en la página para
   quien navegue con lector de pantalla, y el schema no depende de que la franja
   se vea.
   --------------------------------------------------------------------------- */
.iacc-migas {
	display: none;
	background: var(--wp--preset--color--verde-profundo, #033934);
}

.iacc-migas__lista {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;

	margin: 0;
	padding-block: 14px;
	/*
	 * Y sin el sangrado de lista, que es lo que desalineaba las migas del logo:
	 * al quitar las viñetas con list-style se dejó de ver el número, pero el
	 * <ol> seguía llevando los 40 px de relleno que le pone el navegador, así
	 * que «Inicio» empezaba cuarenta píxeles a la derecha del logo.
	 */
	padding-inline: 0;
	list-style: none;

	font-size: var(--wp--preset--font-size--13, 13px);
	font-weight: 500;
	line-height: 1.4;
}

.iacc-migas__nivel {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* La barra que separa los niveles es decoración, así que la pone el CSS: en el
   marcado sobraría, y un lector de pantalla la leería como contenido. */
.iacc-migas__nivel + .iacc-migas__nivel::before {
	content: "/";
	color: var(--wp--preset--color--gris-borde, #ccd3d4);
}

/* Los enlaces y los niveles que no llevan a ningún sitio, del mismo gris: lo
   que distingue al nivel intermedio sin destino —una sección que solo agrupa
   páginas— es que no se puede pulsar, no que se lea distinto. Sin esta regla
   heredaba la tinta del texto normal y sobre la franja verde daba 1,16:1. */
.iacc-migas__nivel a,
.iacc-migas__nivel span:not([aria-current]) {
	color: var(--wp--preset--color--gris-claro, #e1e5e5);
	text-decoration: none;
}

.iacc-migas__nivel a:hover,
.iacc-migas__nivel a:focus-visible {
	color: var(--wp--preset--color--neutral-0, #fff);
	text-decoration: underline;
}

/* La ficha en la que se está, en blanco: es el nivel que resalta. */
.iacc-migas__nivel [aria-current="page"] {
	color: var(--wp--preset--color--neutral-0, #fff);
}

@media (min-width: 992px) {

	.iacc-migas {
		display: block;
	}
}