/**
 * CIPLAG Chile — Web Corporativa
 * Sistema de diseño del frontend.
 *
 * Mobile first. Sin frameworks. Las variables de marca se inyectan desde el
 * panel de administración; los valores de aquí son la reserva.
 */

/* =========================================================================
   1. Tokens
   ========================================================================= */

:root {
	--ciplag-primary: #98cb00;
	/* Relleno de estados hover; no se usa para texto. */
	--ciplag-primary-dark: #7ca700;
	/*
	 * Verde corporativo apto para TEXTO sobre fondo claro: 5,68:1 sobre
	 * blanco, por encima del mínimo AA (4,5:1). El verde lima de marca no
	 * alcanza el contraste necesario para texto pequeño.
	 */
	--ciplag-primary-ink: #547000;
	--ciplag-secondary: #008fff;
	--ciplag-secondary-dark: #0071cc;
	--ciplag-accent: #00b37e;
	--ciplag-dark: #1b2118;
	--ciplag-graphite: #393939;
	--ciplag-light: #f7f9f3;
	--ciplag-text: #2b302c;
	--ciplag-muted: #6b7280;

	--ciplag-white: #ffffff;
	--ciplag-border: rgba(27, 33, 24, 0.1);
	--ciplag-border-strong: rgba(27, 33, 24, 0.18);
	--ciplag-wa: #25d366;
	--ciplag-wa-dark: #1da851;
	--ciplag-danger: #d92d20;

	--ciplag-radius: 14px;
	--ciplag-radius-sm: 8px;
	--ciplag-radius-lg: 22px;
	--ciplag-container: 1200px;

	--ciplag-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--ciplag-shadow-sm: 0 1px 2px rgba(27, 33, 24, 0.06), 0 1px 3px rgba(27, 33, 24, 0.04);
	--ciplag-shadow: 0 4px 12px rgba(27, 33, 24, 0.07), 0 2px 4px rgba(27, 33, 24, 0.04);
	--ciplag-shadow-lg: 0 18px 40px rgba(27, 33, 24, 0.12), 0 6px 12px rgba(27, 33, 24, 0.06);

	--ciplag-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ciplag-fast: 160ms;
	--ciplag-normal: 260ms;

	--ciplag-space: clamp(3rem, 7vw, 5.5rem);
	--ciplag-gutter: clamp(1rem, 4vw, 2rem);

	--ciplag-header-h: 68px;
	--ciplag-header-pad: 0.75rem;
	--ciplag-delay: 0ms;
}

/* =========================================================================
   2. Base
   ========================================================================= */

.ciplag-web,
.ciplag-home,
.ciplag-header,
.ciplag-footer {
	font-family: var(--ciplag-font);
	color: var(--ciplag-text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.ciplag-home *,
.ciplag-web *,
.ciplag-header *,
.ciplag-footer * {
	box-sizing: border-box;
	/* Una URL o una palabra muy larga no debe poder ensanchar el layout. */
	overflow-wrap: break-word;
}

.ciplag-home img,
.ciplag-web img,
.ciplag-header img,
.ciplag-footer img {
	max-width: 100%;
	height: auto;
	display: block;
}

/*
 * Reinicio de listas frente al theme.
 *
 * Todas las retículas del plugin son `<ul>` o `<ol>`, y los themes con diseño
 * «en caja» les meten sangría dentro del contenido: Astra aplica
 * `.ast-separate-container .entry-content ul { padding-left: 20px }`, que por
 * especificidad gana al `padding: 0` de `.ciplag-grid`. Con esos 20 px a la
 * izquierda y ninguno a la derecha, las tarjetas quedaban descentradas —muy
 * visible en móvil, donde el margen es pequeño— en portada, servicios,
 * segmentos y «por qué elegirnos» a la vez.
 *
 * El selector por atributo cubre de una vez todas las listas del plugin sin
 * tocar las del editor, que no llevan clase `ciplag-`.
 */
.ciplag-home ul[class*="ciplag-"],
.ciplag-home ol[class*="ciplag-"],
.ciplag-web ul[class*="ciplag-"],
.ciplag-web ol[class*="ciplag-"],
.ciplag-header ul[class*="ciplag-"],
.ciplag-header ol[class*="ciplag-"],
.ciplag-footer ul[class*="ciplag-"],
.ciplag-footer ol[class*="ciplag-"] {
	padding-inline: 0 !important;
	margin-inline: 0 !important;
	list-style: none !important;
}

.ciplag-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ciplag-container {
	width: 100%;
	max-width: var(--ciplag-container);
	margin-inline: auto;
	padding-inline: var(--ciplag-gutter);
}

.ciplag-container--narrow {
	max-width: 820px;
}

.ciplag-icon {
	flex: none;
	vertical-align: middle;
}

/* Foco visible y consistente en todo el plugin. */
.ciplag-web :focus-visible,
.ciplag-home :focus-visible,
.ciplag-header :focus-visible,
.ciplag-footer :focus-visible,
.ciplag-mobilebar :focus-visible,
.ciplag-wa-float:focus-visible {
	outline: 3px solid var(--ciplag-secondary);
	outline-offset: 2px;
	border-radius: 4px;
}

/* -------------------------------------------------------------------------
   Ancho completo
   -------------------------------------------------------------------------
   Muchos themes (sobre todo los de bloques) encajonan el contenido en una
   columna estrecha. Estas secciones están diseñadas para ocupar todo el ancho,
   así que se sacan de esa columna con márgenes negativos.

   `overflow-x: clip` en el body es imprescindible: 50vw incluye el ancho de la
   barra de scroll vertical, de modo que sin él aparecería un scroll horizontal
   de unos pocos píxeles. Se usa `clip` y no `hidden` porque `hidden` crearía un
   contenedor de scroll y rompería el header sticky.
   ------------------------------------------------------------------------- */

/*
 * `100vw` incluye el ancho de la barra de desplazamiento vertical, así que un
 * bloque de 100vw es unos 15 px más ancho que el área visible: el contenido se
 * desplaza a la izquierda y deja una franja del fondo a la derecha.
 *
 * `--ciplag-sb` lo calcula el JavaScript (innerWidth menos clientWidth) y se
 * descuenta aquí. Si el script no llega a ejecutarse vale 0 y `overflow-x:
 * clip` evita al menos que aparezca scroll horizontal. Se usa `clip` y no
 * `hidden` porque `hidden` crearía un contenedor de scroll y rompería el
 * header sticky.
 */
html.ciplag-has-fullbleed,
body.ciplag-fullbleed {
	overflow-x: clip;
}

/* Misma protección sin depender del JavaScript en las páginas de servicio,
   que se estiran siempre. */
html:has( main.ciplag-servicio ),
html:has( main.ciplag-archivo ) {
	overflow-x: clip;
}

/*
 * El envoltorio que WordPress genera para la entrada.
 *
 * Estirar el bloque a ancho completo no basta: entre él y las secciones queda
 * el `<article>`, y los themes con diseño «en caja» —Astra con
 * `ast-separate-container`, por ejemplo— le ponen relleno lateral, fondo
 * propio y a veces sombra. Medido en la web: 42,5 px a cada lado, que es
 * exactamente la franja que aparecía junto a cada banda de color.
 *
 * El relleno vertical también sobra: cada sección trae el suyo.
 */
main.ciplag-servicio > .ciplag-servicio__article,
main.ciplag-servicio > article,
main.ciplag-archivo > article {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/*
 * El `!important` es imprescindible, no un atajo: WordPress genera para los
 * contenedores con layout restringido una regla propia
 *
 *   :where(.is-layout-constrained) > :where(:not(.alignfull)...) {
 *       margin-left: auto !important; margin-right: auto !important;
 *   }
 *
 * que centra el bloque dentro de la columna del theme y anula cualquier margen
 * normal. Sin `!important` esta opción no tiene ningún efecto.
 */
.ciplag-fullbleed .ciplag-home,
.ciplag-fullbleed .ciplag-header,
.ciplag-fullbleed .ciplag-footer,
.ciplag-fullbleed .ciplag-web,
/*
 * Las páginas de servicio y el listado van SIEMPRE a ancho completo, sin
 * depender del ajuste de Apariencia: la plantilla es del plugin de arriba
 * abajo y sus bandas de color deben llegar a los dos bordes. Encajonadas en la
 * columna del theme dejaban una franja blanca a izquierda y derecha.
 */
main.ciplag-servicio,
main.ciplag-archivo {
	width: calc(100vw - var(--ciplag-sb, 0px)) !important;
	max-width: calc(100vw - var(--ciplag-sb, 0px)) !important;
	margin-inline: calc(50% - 50vw + (var(--ciplag-sb, 0px) / 2)) !important;
}

/* =========================================================================
   3. Secciones
   ========================================================================= */

.ciplag-section {
	position: relative;
	padding-block: var(--ciplag-space);
	background: var(--ciplag-white);
	/*
	 * Reserva para la cabecera fija. `--ciplag-header-total` lo publica el
	 * JavaScript con la altura medida de verdad (barra superior incluida) y
	 * vale 0 cuando la cabecera no está fija, que es cuando no tapa nada. La
	 * reserva de la hoja es solo el respaldo hasta que el script mide.
	 */
	scroll-margin-top: calc(
		var(--ciplag-header-total, calc(var(--ciplag-header-h) + (var(--ciplag-header-pad) * 2))) + 12px
	);
}

.ciplag-section--alt,
.ciplag-section.is-bg-alterno {
	background: var(--ciplag-light);
}

.ciplag-section.is-bg-claro {
	background: var(--ciplag-white);
}

.ciplag-section--dark,
.ciplag-section.is-bg-oscuro {
	background: var(--ciplag-dark);
	color: rgba(255, 255, 255, 0.88);
}

.ciplag-section__head {
	max-width: 720px;
	margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

.ciplag-section__head.is-center {
	margin-inline: auto;
	text-align: center;
}

.ciplag-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ciplag-primary-ink);
}

.ciplag-section--dark .ciplag-eyebrow,
.ciplag-section.is-bg-oscuro .ciplag-eyebrow {
	color: var(--ciplag-primary);
}

.ciplag-section__title {
	margin: 0;
	font-size: clamp(1.65rem, 4.2vw, 2.5rem);
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ciplag-dark);
	text-wrap: balance;
}

.ciplag-section--dark .ciplag-section__title,
.ciplag-section.is-bg-oscuro .ciplag-section__title {
	color: #fff;
}

.ciplag-section__title.is-left {
	text-align: left;
}

.ciplag-section__text {
	margin: 1rem 0 0;
	font-size: 1.0625rem;
	color: var(--ciplag-muted);
	text-wrap: pretty;
}

.ciplag-section--dark .ciplag-section__text {
	color: rgba(255, 255, 255, 0.75);
}

.ciplag-section__foot {
	margin-top: 2.5rem;
	text-align: center;
}

/* =========================================================================
   4. Rejillas
   ========================================================================= */

.ciplag-grid {
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: 1fr;
}

.ciplag-split {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}

/*
 * Centrado de la última fila incompleta.
 *
 * Cuando el número de elementos no es múltiplo del número de columnas, los
 * que sobran quedan pegados a la izquierda y se ve como un error de maqueta.
 * Para centrarlos se declara el doble de columnas y cada elemento ocupa dos:
 * el ancho resultante es idéntico al de la rejilla simple (2·col + gap por
 * elemento), pero permite desplazar la última fila media columna.
 *
 * Los selectores identifican el primer elemento de la última fila:
 *   :nth-child(Nn+1)  -> empieza fila
 *   :nth-last-child(X) -> quedan X elementos hasta el final
 */

@media (min-width: 620px) {
	.ciplag-grid--2,
	.ciplag-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.ciplag-grid--2 > *,
	.ciplag-grid--4 > * {
		grid-column: span 2;
	}

	/* `grid--2` son 2 columnas en todos los tamaños: la regla vale siempre. */
	.ciplag-grid--2 > *:nth-child(2n + 1):nth-last-child(1) {
		grid-column: 2 / span 2;
	}
}

/*
 * Tramo de 2 columnas para `grid--3` y `grid--4`. Las reglas de huérfano de
 * este tramo deben quedar acotadas aquí: si se filtran al tramo de 3 o 4
 * columnas, capturan elementos que no son el primero de la última fila y
 * parten la rejilla.
 */
@media (min-width: 620px) and (max-width: 899px) {
	.ciplag-grid--3 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.ciplag-grid--3 > * {
		grid-column: span 2;
	}

	.ciplag-grid--3 > *:nth-child(2n + 1):nth-last-child(1),
	.ciplag-grid--4 > *:nth-child(2n + 1):nth-last-child(1) {
		grid-column: 2 / span 2;
	}
}

@media (min-width: 900px) {
	.ciplag-grid--3 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.ciplag-grid--3 > * {
		grid-column: span 2;
	}

	/* 3 columnas: sobran 2 elementos. */
	.ciplag-grid--3 > *:nth-child(3n + 1):nth-last-child(2) {
		grid-column: 2 / span 2;
	}

	/* 3 columnas: sobra 1 elemento. */
	.ciplag-grid--3 > *:nth-child(3n + 1):nth-last-child(1) {
		grid-column: 3 / span 2;
	}

	.ciplag-grid--4 {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}

	/* 4 columnas: sobran 3, 2 o 1 elementos. */
	.ciplag-grid--4 > *:nth-child(4n + 1):nth-last-child(3) {
		grid-column: 2 / span 2;
	}

	.ciplag-grid--4 > *:nth-child(4n + 1):nth-last-child(2) {
		grid-column: 3 / span 2;
	}

	.ciplag-grid--4 > *:nth-child(4n + 1):nth-last-child(1) {
		grid-column: 4 / span 2;
	}

	.ciplag-split {
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}
}

/* =========================================================================
   5. Botones
   ========================================================================= */

.ciplag-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0.75rem 1.4rem;
	border: 2px solid transparent;
	border-radius: 999px;
	font-size: 0.9688rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--ciplag-fast) var(--ciplag-ease),
		box-shadow var(--ciplag-fast) var(--ciplag-ease),
		background-color var(--ciplag-fast) var(--ciplag-ease),
		border-color var(--ciplag-fast) var(--ciplag-ease),
		color var(--ciplag-fast) var(--ciplag-ease);
}

/*
 * Texto blanco pase lo que pase.
 *
 * Sobre el verde de marca, el verde de WhatsApp y el azul de «Llamar ahora» la
 * etiqueta va siempre en blanco, también al pasar el ratón, al recibir el foco
 * y al pulsar: los
 * themes reasignan el color de los enlaces en esos estados y el texto cambiaba
 * a oscuro justo al ir a hacer clic. El icono hereda el mismo color.
 */
:is(.ciplag-web, .ciplag-home, .ciplag-header, .ciplag-footer) :is(.ciplag-btn--primary, .ciplag-btn--whatsapp, .ciplag-btn--secondary),
:is(.ciplag-web, .ciplag-home, .ciplag-header, .ciplag-footer) :is(.ciplag-btn--primary, .ciplag-btn--whatsapp, .ciplag-btn--secondary):link,
:is(.ciplag-web, .ciplag-home, .ciplag-header, .ciplag-footer) :is(.ciplag-btn--primary, .ciplag-btn--whatsapp, .ciplag-btn--secondary):visited,
:is(.ciplag-web, .ciplag-home, .ciplag-header, .ciplag-footer) :is(.ciplag-btn--primary, .ciplag-btn--whatsapp, .ciplag-btn--secondary):hover,
:is(.ciplag-web, .ciplag-home, .ciplag-header, .ciplag-footer) :is(.ciplag-btn--primary, .ciplag-btn--whatsapp, .ciplag-btn--secondary):focus,
:is(.ciplag-web, .ciplag-home, .ciplag-header, .ciplag-footer) :is(.ciplag-btn--primary, .ciplag-btn--whatsapp, .ciplag-btn--secondary):focus-visible,
:is(.ciplag-web, .ciplag-home, .ciplag-header, .ciplag-footer) :is(.ciplag-btn--primary, .ciplag-btn--whatsapp, .ciplag-btn--secondary):active,
.ciplag-wa-float,
.ciplag-wa-float:link,
.ciplag-wa-float:visited,
.ciplag-wa-float:hover,
.ciplag-wa-float:focus,
.ciplag-wa-float:focus-visible,
.ciplag-wa-float:active {
	color: #fff !important;
}

/* Los themes subrayan todo enlace dentro del contenido; en un botón sobra. */
.ciplag-web .ciplag-btn,
.ciplag-home .ciplag-btn,
.ciplag-header .ciplag-btn,
.ciplag-footer .ciplag-btn {
	text-decoration: none !important;
}

.ciplag-btn-cuadrado .ciplag-btn {
	border-radius: var(--ciplag-radius-sm);
}

.ciplag-btn__icon {
	transition: transform var(--ciplag-normal) var(--ciplag-ease);
}

.ciplag-btn:hover .ciplag-btn__icon {
	transform: translateX(3px);
}

.ciplag-btn--block {
	width: 100%;
}

.ciplag-btn--primary {
	background: var(--ciplag-primary);
	border-color: var(--ciplag-primary);
	color: #fff;
	box-shadow: 0 2px 0 rgba(27, 33, 24, 0.12);
}

.ciplag-btn--primary:hover,
.ciplag-btn--primary:focus-visible {
	background: var(--ciplag-primary-dark);
	border-color: var(--ciplag-primary-dark);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--ciplag-shadow);
}

/*
 * Variante blanca. Se usa para el CTA principal cuando se quiere que destaque
 * por contraste con el fondo y no por saturación de color. Lleva borde e
 * intención de color en el texto para que siga leyéndose como botón y no como
 * un enlace suelto.
 */
.ciplag-btn--light {
	background: #fff;
	border-color: var(--ciplag-border-strong);
	color: var(--ciplag-dark);
	box-shadow: var(--ciplag-shadow-sm);
}

.ciplag-btn--light:hover,
.ciplag-btn--light:focus-visible {
	background: #fff;
	border-color: var(--ciplag-primary);
	color: var(--ciplag-primary-ink);
	transform: translateY(-2px);
	box-shadow: var(--ciplag-shadow);
}

.ciplag-btn--light .ciplag-btn__icon {
	color: var(--ciplag-primary-ink);
}

/* Sobre fondos oscuros el borde tenue desaparece: se refuerza. */
.ciplag-section--dark .ciplag-btn--light,
.ciplag-cta.is-primary .ciplag-btn--light,
.ciplag-cta.is-dark .ciplag-btn--light {
	border-color: transparent;
}

.ciplag-btn--secondary {
	background: var(--ciplag-secondary);
	border-color: var(--ciplag-secondary);
	color: #fff;
}

.ciplag-btn--secondary:hover,
.ciplag-btn--secondary:focus-visible {
	background: var(--ciplag-secondary-dark);
	border-color: var(--ciplag-secondary-dark);
	transform: translateY(-2px);
	box-shadow: var(--ciplag-shadow);
}

.ciplag-btn--ghost {
	background: transparent;
	border-color: var(--ciplag-border-strong);
	color: var(--ciplag-dark);
}

.ciplag-btn--ghost:hover,
.ciplag-btn--ghost:focus-visible {
	border-color: var(--ciplag-primary);
	background: rgba(152, 203, 0, 0.1);
	transform: translateY(-2px);
}

.ciplag-section--dark .ciplag-btn--ghost,
.ciplag-cta.is-primary .ciplag-btn--ghost {
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
}

.ciplag-section--dark .ciplag-btn--ghost:hover,
.ciplag-cta.is-primary .ciplag-btn--ghost:hover,
.ciplag-section--dark .ciplag-btn--ghost:focus-visible,
.ciplag-cta.is-primary .ciplag-btn--ghost:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
	/* Sobre fondo oscuro el texto no puede oscurecerse al pasar el ratón. */
	color: #fff !important;
}

.ciplag-btn--whatsapp {
	background: var(--ciplag-wa);
	border-color: var(--ciplag-wa);
	color: #fff;
}

.ciplag-btn--whatsapp:hover,
.ciplag-btn--whatsapp:focus-visible {
	background: var(--ciplag-wa-dark);
	border-color: var(--ciplag-wa-dark);
	transform: translateY(-2px);
	box-shadow: var(--ciplag-shadow);
}

.ciplag-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	color: var(--ciplag-secondary-dark);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.ciplag-link:hover {
	border-bottom-color: currentColor;
}

/* =========================================================================
   6. Header
   ========================================================================= */

.ciplag-header {
	position: relative;
	z-index: 200;
	background: #fff;
}

/*
 * `sticky` no basta aquí.
 *
 * La cabecera se inserta con un shortcode y su contenedor mide exactamente lo
 * que mide ella: un elemento pegajoso solo se queda quieto mientras su padre
 * sigue en pantalla, así que se iba con el primer scroll. En escritorio pasa a
 * `fixed` y el hueco lo reserva un separador que crea el JavaScript, para que
 * el contenido no salte al sacarla del flujo.
 */
.ciplag-header.is-sticky {
	position: sticky;
	top: 0;
}

@media (min-width: 1024px) {
	.ciplag-header.is-sticky {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		/* Gana a las reglas de ancho completo, que llevan `!important`. */
		width: auto !important;
		max-width: none !important;
		margin-inline: 0 !important;
	}

	/*
	 * Al bajar, la cabecera se encoge: se retira la barra superior —datos de
	 * contacto, no navegación— y el logotipo baja a dos tercios. De unos 143 px
	 * a unos 60: sigue estando siempre a mano sin comerse la pantalla.
	 */
	.ciplag-header.is-sticky .ciplag-topbar {
		overflow: hidden;
		max-height: 120px;
		transition: max-height var(--ciplag-normal) var(--ciplag-ease),
			opacity var(--ciplag-fast) var(--ciplag-ease);
	}

	.ciplag-header.is-sticky.is-scrolled .ciplag-topbar {
		max-height: 0;
		opacity: 0;
	}

	.ciplag-header.is-sticky.is-scrolled {
		--ciplag-header-h: 54px;
		--ciplag-header-pad: 0.35rem;
	}

	.ciplag-header.is-sticky .ciplag-logo__img {
		transition: max-height var(--ciplag-normal) var(--ciplag-ease);
	}

	.ciplag-header.is-sticky.is-scrolled .ciplag-logo__img {
		max-height: calc(var(--ciplag-logo-h, 80px) * 0.66);
	}

	/*
	 * La altura del logotipo la decide su ancho, no el tope de altura: sin
	 * encoger también el ancho, la marca se quedaba igual de grande.
	 */
	.ciplag-header.is-sticky .ciplag-logo {
		transition: max-width var(--ciplag-normal) var(--ciplag-ease);
	}

	.ciplag-header.is-sticky.is-scrolled .ciplag-logo {
		max-width: calc(min(var(--ciplag-logo-w, 190px), 60vw) * 0.76);
	}

	.ciplag-header.is-sticky .ciplag-header__inner {
		transition: min-height var(--ciplag-normal) var(--ciplag-ease),
			padding-block var(--ciplag-normal) var(--ciplag-ease);
	}
}

/* Utilidad interna: el JavaScript la usa para medir la cabecera ya encogida
   sin esperar a que termine la transición. */
.ciplag-no-transition,
.ciplag-no-transition * {
	transition: none !important;
}

.ciplag-header-spacer {
	flex: none;
}

/* La barra admin de WordPress desplaza el header sticky. */
.admin-bar .ciplag-header.is-sticky {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .ciplag-header.is-sticky {
		top: 46px;
	}
}

.ciplag-topbar {
	background: var(--ciplag-dark);
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.8125rem;
}

.ciplag-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 38px;
	padding-block: 0.4rem;
}

.ciplag-topbar__text {
	margin: 0;
}

.ciplag-topbar__link {
	display: none;
	align-items: center;
	gap: 0.4rem;
	color: var(--ciplag-primary);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.ciplag-header__main {
	background: #fff;
	border-bottom: 1px solid var(--ciplag-border);
	transition: box-shadow var(--ciplag-normal) var(--ciplag-ease),
		background-color var(--ciplag-normal) var(--ciplag-ease);
}

/* Cambio de estado al hacer scroll: solo sombra y fondo, sin alterar altura
   para no provocar CLS. */
.ciplag-header.is-scrolled .ciplag-header__main {
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: saturate(180%) blur(10px);
	box-shadow: var(--ciplag-shadow);
	border-bottom-color: transparent;
}

/*
 * El header puede insertarse dentro de la columna de contenido de un theme,
 * que suele ser bastante más estrecha que el viewport. Se permite que la fila
 * se reparta en varias líneas y que cada bloque encoja, de modo que un
 * contenedor estrecho nunca provoque scroll horizontal en toda la página.
 */
.ciplag-header__inner {
	display: flex;
	/*
	 * `nowrap` es la clave de todo: la fila no puede partirse en dos, pase lo
	 * que pase con la tipografía del theme, el número de entradas del menú o el
	 * tamaño del logotipo. Antes se permitía envolver y se intentaba adivinar
	 * por JavaScript si cabía; adivinar era el error.
	 */
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	min-height: var(--ciplag-header-h);
	/*
	 * Aire vertical propio. Sin él, un logotipo alto define por sí solo la
	 * altura de la barra y queda pegado al borde superior e inferior.
	 */
	padding-block: var(--ciplag-header-pad);
}

.ciplag-header__inner > * {
	min-width: 0;
}

/*
 * La cabecera comparte contenedor con el resto de secciones: si usara uno más
 * ancho, el logotipo quedaría desalineado respecto al contenido de la página.
 * El ancho se ajusta en Apariencia → Ancho del contenedor.
 */

/*
 * El menú absorbe el espacio sobrante y, si llegara a faltar, encoge y se
 * desplaza dentro de su propia caja en lugar de desaparecer o romper la fila.
 */
.ciplag-nav {
	/*
	 * El menú ya no absorbe el espacio sobrante: se encoge a su contenido y
	 * `margin-inline-start: auto` empuja todo el bloque —menú, teléfono,
	 * WhatsApp y CTA— contra el borde derecho, dejando el logotipo solo a la
	 * izquierda. Si llegara a faltar sitio, encoge y se desplaza dentro de su
	 * propia caja en lugar de romper la fila.
	 */
	flex: 0 1 auto;
	min-width: 0;
	margin-inline-start: auto;
	overflow-x: auto;
	scrollbar-width: none;
}

.ciplag-nav::-webkit-scrollbar {
	display: none;
}

/*
 * El ancho lo impone el enlace, no la imagen.
 *
 * Si solo se limita la imagen, el enlace sigue reservando el ancho intrínseco
 * del archivo (por ejemplo 300 px de la miniatura «medium») aunque la imagen se
 * pinte a 170: ese hueco fantasma empujaba las acciones a una segunda fila.
 */
.ciplag-logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	text-decoration: none;
	max-width: min(var(--ciplag-logo-w, 190px), 60vw);
}

.ciplag-logo__img {
	width: auto;
	height: auto;
	max-width: 100%;
	/*
	 * Tope de altura configurable. Sin él, un logotipo cuadrado con un ancho
	 * grande estiraría la cabecera hasta deformar la página. Si el logo es muy
	 * apaisado, es este tope —y no el ancho— el que acaba mandando: por eso el
	 * administrador puede subirlo.
	 */
	max-height: var(--ciplag-logo-h, 80px);
	object-fit: contain;
}

.ciplag-logo__text {
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ciplag-dark);
}

.ciplag-nav {
	display: none;
}

.ciplag-nav__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	/* Separación con el bloque de acciones, ahora contiguo. Después de
	   `margin: 0`, que si no lo anula. */
	margin-inline-end: 0.35rem;
	padding: 0;
	list-style: none;
}

.ciplag-nav__link {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	/* Compacto a propósito: con 6 entradas, el logo y tres acciones, unos
	   pocos píxeles de más obligan a la cabecera a partirse en dos líneas. */
	padding: 0.5rem 0.6rem;
	font-size: 0.9063rem;
	font-weight: 600;
	color: var(--ciplag-text);
	text-decoration: none;
	border-radius: var(--ciplag-radius-sm);
	transition: color var(--ciplag-fast) var(--ciplag-ease),
		background-color var(--ciplag-fast) var(--ciplag-ease);
}

.ciplag-nav__link::after {
	content: "";
	position: absolute;
	left: 0.6rem;
	right: 0.6rem;
	bottom: 0.3rem;
	height: 2px;
	background: var(--ciplag-primary);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ciplag-normal) var(--ciplag-ease);
}

.ciplag-nav__link:hover,
.ciplag-nav__link.is-active {
	color: var(--ciplag-dark);
}

.ciplag-nav__link:hover::after,
.ciplag-nav__link.is-active::after {
	transform: scaleX(1);
}

.ciplag-header__actions {
	display: flex;
	flex-wrap: nowrap;
	flex: 0 0 auto;
	align-items: center;
	justify-content: flex-end;
	gap: 0.6rem;
}

.ciplag-header__phone {
	display: none;
	align-items: center;
	gap: 0.4rem;
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--ciplag-dark);
	text-decoration: none;
	white-space: nowrap;
}

.ciplag-header__phone:hover {
	color: var(--ciplag-primary-ink);
}

.ciplag-header__wa,
.ciplag-header__cta {
	display: none;
}

/*
 * El CTA de la cabecera es siempre verde de marca con texto blanco, sea cual
 * sea la variante que devuelva `Render::cta_variant()`: es el botón que debe
 * ganar la mirada en la barra y su color no depende del ajuste de Apariencia.
 * El `!important` no es un capricho: la hoja del theme se carga después y, con
 * la misma especificidad, ganaba ella y teñía el botón.
 */
.ciplag-header .ciplag-btn.ciplag-header__cta {
	padding-inline: 1.15rem;
	background: var(--ciplag-primary) !important;
	border-color: var(--ciplag-primary) !important;
	color: #fff !important;
	box-shadow: 0 2px 0 rgba(27, 33, 24, 0.12);
}

.ciplag-header .ciplag-btn.ciplag-header__cta:hover,
.ciplag-header .ciplag-btn.ciplag-header__cta:focus-visible {
	background: var(--ciplag-primary-dark) !important;
	border-color: var(--ciplag-primary-dark) !important;
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: var(--ciplag-shadow);
}

.ciplag-header .ciplag-btn.ciplag-header__cta .ciplag-btn__icon {
	color: #fff;
}

/* --- Botón hamburguesa --- */

/*
 * Verde de marca con las barras en blanco. Los themes suelen pintar todos los
 * `button` con su color de acento —de ahí el azul que aparecía en móvil—, así
 * que el color se fija con `!important` para que no dependa del theme activo.
 */
.ciplag-header .ciplag-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	background: var(--ciplag-primary) !important;
	border: 1px solid var(--ciplag-primary) !important;
	border-radius: var(--ciplag-radius-sm);
	color: #fff !important;
	cursor: pointer;
	transition: background-color var(--ciplag-fast) var(--ciplag-ease),
		border-color var(--ciplag-fast) var(--ciplag-ease);
}

/* Pulsado y menú abierto: sigue verde, solo un punto más oscuro como respuesta
   táctil. Nunca cambia a otro color. */
.ciplag-header .ciplag-burger:hover,
.ciplag-header .ciplag-burger:focus,
.ciplag-header .ciplag-burger:focus-visible,
.ciplag-header .ciplag-burger:active,
.ciplag-header .ciplag-burger[aria-expanded="true"] {
	background: var(--ciplag-primary-dark) !important;
	border-color: var(--ciplag-primary-dark) !important;
	color: #fff !important;
}

.ciplag-burger__box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 22px;
}

.ciplag-burger__box span {
	display: block;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: transform var(--ciplag-normal) var(--ciplag-ease),
		opacity var(--ciplag-fast) var(--ciplag-ease);
}

.ciplag-burger[aria-expanded="true"] .ciplag-burger__box span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.ciplag-burger[aria-expanded="true"] .ciplag-burger__box span:nth-child(2) {
	opacity: 0;
}

.ciplag-burger[aria-expanded="true"] .ciplag-burger__box span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* --- Menú móvil --- */

.ciplag-mobile-menu {
	border-top: 1px solid var(--ciplag-border);
	background: #fff;
	padding: 1rem var(--ciplag-gutter) 1.5rem;
	max-height: min(70vh, 560px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ciplag-mobile-menu[hidden] {
	display: none;
}

.ciplag-mobile-menu__list {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.ciplag-mobile-menu__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.9rem 0.25rem;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--ciplag-dark);
	text-decoration: none;
	border-bottom: 1px solid var(--ciplag-border);
}

.ciplag-mobile-menu__arrow {
	color: var(--ciplag-primary-ink);
	opacity: 0.6;
}

.ciplag-mobile-menu__actions {
	display: grid;
	gap: 0.6rem;
}

@media (min-width: 640px) {
	.ciplag-topbar__link {
		display: inline-flex;
	}

	.ciplag-header__wa {
		display: inline-flex;
	}
}

/*
 * Menú de escritorio. Vuelve a 1024 px porque, con la fila en `nowrap` y el
 * menú capaz de encoger, ya no existe el riesgo de que se parta en dos.
 */
@media (min-width: 1024px) {
	:root {
		--ciplag-header-h: 78px;
	}

	.ciplag-nav {
		display: block;
	}

	.ciplag-header__cta {
		display: inline-flex;
	}

	/* La regla de color usa `.ciplag-header .ciplag-burger`: aquí hace falta la
	   misma especificidad para que el botón desaparezca en escritorio. */
	.ciplag-header .ciplag-burger {
		display: none;
	}

	.ciplag-mobile-menu {
		display: none !important;
	}
}

/*
 * El teléfono en texto solo cuando sobra sitio de verdad: si compite con el
 * menú y el logotipo, la cabecera se parte en dos filas. Ya está visible en la
 * barra superior, así que ocultarlo no pierde información.
 *
 * Reserva por viewport para navegadores sin container queries.
 */
@media (min-width: 1400px) {
	.ciplag-header__phone {
		display: inline-flex;
	}
}

/*
 * Regla real: decide según el ancho DISPONIBLE en la cabecera, no según el de
 * la pantalla. Es lo que corresponde, porque ese ancho depende del contenedor
 * configurado y de si el theme encajona el contenido.
 *
 * Ahora sí puede usarse una container query: ya no se mide nada por
 * JavaScript, así que la contención de tamaño no estorba.
 */
.ciplag-header .ciplag-container {
	container-type: inline-size;
	container-name: ciplag-header;
}

@container ciplag-header (max-width: 1250px) {
	.ciplag-header__phone {
		display: none;
	}
}

@container ciplag-header (min-width: 1250px) {
	.ciplag-header__phone {
		display: inline-flex;
	}
}

/*
 * Si aun así el menú no cupiera (tipografías muy anchas, muchas entradas), se
 * desplaza dentro de su caja. Ya no lleva degradado de aviso: con el menú
 * ajustado a su contenido, la máscara mordía la última entrada en lugar de
 * señalar que hubiera más.
 */

/* =========================================================================
   7. Hero
   ========================================================================= */

.ciplag-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(2.5rem, 7vw, 5rem);
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(152, 203, 0, 0.16) 0%, transparent 60%),
		radial-gradient(90% 80% at 0% 100%, rgba(0, 143, 255, 0.1) 0%, transparent 55%),
		var(--ciplag-white);
}

.ciplag-hero.has-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--ciplag-hero-bg);
	background-size: cover;
	background-position: center;
	opacity: 0.16;
	z-index: 0;
}

.ciplag-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
}

.ciplag-hero__title {
	margin: 0;
	/* Tope contenido: a 3,4rem el titular se partía en cuatro líneas en la
	   columna de texto y quedaba desigual. */
	font-size: clamp(1.9rem, 4vw, 2.9rem);
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--ciplag-dark);
	text-wrap: balance;
}

.ciplag-hero__highlight {
	position: relative;
	color: var(--ciplag-primary-ink);
}

/*
 * Los hijos de grid y flex tienen `min-width: auto` por defecto, de modo que
 * una palabra o un botón largo puede ensanchar la pista por encima del
 * contenedor. En móvil eso rompe el layout, así que se neutraliza.
 */
.ciplag-hero__inner > *,
.ciplag-hero__content,
.ciplag-contacto > *,
.ciplag-split > *,
.ciplag-intro__top > *,
.ciplag-cta__inner > *,
.ciplag-grid > *,
.ciplag-servicio__hero-grid > * {
	min-width: 0;
}

.ciplag-hero__text {
	margin: 1.15rem 0 0;
	max-width: 56ch;
	font-size: clamp(1rem, 2.2vw, 1.1875rem);
	color: var(--ciplag-muted);
	text-wrap: pretty;
}

.ciplag-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

.ciplag-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.25rem;
	margin: 2rem 0 0;
	padding: 1.25rem 0 0;
	list-style: none;
	border-top: 1px solid var(--ciplag-border);
}

.ciplag-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ciplag-text);
}

.ciplag-hero__badge-icon {
	color: var(--ciplag-primary-ink);
}

.ciplag-hero__media {
	position: relative;
}

/* --- Carrusel del hero -------------------------------------------------- */

.ciplag-slider {
	position: relative;
	border-radius: var(--ciplag-radius-lg);
	box-shadow: var(--ciplag-shadow-lg);
	/* La proporción vive en el contenedor: así el hueco está reservado antes
	   de que carguen las imágenes y no se produce ningún salto (CLS). */
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--ciplag-light);
}

.ciplag-slider__track {
	position: relative;
	width: 100%;
	height: 100%;
}

.ciplag-slider__slide {
	position: absolute;
	inset: 0;
	margin: 0;
}

/* Con varias diapositivas se apilan y se funden; con una sola no hay
   transición ni estado que gestionar. */
.ciplag-slider.is-carousel .ciplag-slider__slide {
	opacity: 0;
	transition: opacity 700ms var(--ciplag-ease);
}

.ciplag-slider.is-carousel .ciplag-slider__slide.is-active {
	opacity: 1;
}

/* Doble clase por el mismo motivo que en la marquesina: la regla global de
   imágenes ganaría por especificidad y anularía la altura. */
.ciplag-slider .ciplag-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Zoom lento (Ken Burns) --------------------------------------------- */

/*
 * La imagen activa se acerca despacio mientras está en pantalla y el fundido
 * la releva al final del recorrido. La duración se calcula en PHP a partir del
 * intervalo del carrusel, de modo que el zoom nunca se queda congelado
 * esperando al cambio.
 *
 * Se anima solo `transform`, que la GPU compone sin repintar: no afecta al
 * rendimiento ni provoca CLS porque el contenedor ya tiene su proporción fija.
 */
@keyframes ciplag-zoom-in {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.08);
	}
}

@keyframes ciplag-zoom-out {
	from {
		transform: scale(1.08);
	}

	to {
		transform: scale(1);
	}
}

.ciplag-slider.has-zoom .ciplag-slider__slide.is-active .ciplag-hero__img {
	animation: ciplag-zoom-in var(--ciplag-zoom-duration, 5700ms) ease-out both;
	will-change: transform;
}

/* Alternar el sentido evita que todas las imágenes se muevan igual. */
.ciplag-slider.has-zoom .ciplag-slider__slide:nth-child(even).is-active .ciplag-hero__img {
	animation-name: ciplag-zoom-out;
}

.ciplag-slider.has-zoom .ciplag-slider__slide:not(.is-active) .ciplag-hero__img {
	will-change: auto;
}

/* --- Controles --- */

.ciplag-slider__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.9);
	border: 0;
	border-radius: 50%;
	color: var(--ciplag-dark);
	cursor: pointer;
	box-shadow: var(--ciplag-shadow);
	/*
	 * Siempre visibles. Antes solo aparecían al pasar el ratón por encima del
	 * carrusel: quien no lo intentaba no sabía que hubiera más fotografías.
	 */
	opacity: 1;
	transition: background-color var(--ciplag-fast) var(--ciplag-ease),
		transform var(--ciplag-fast) var(--ciplag-ease);
}

/*
 * El icono se queda oscuro pase lo que pase. Los themes suelen pintar de
 * blanco el texto de los `button` al pasar el ratón, y sobre el círculo blanco
 * la flecha se volvía invisible justo al ir a pulsarla.
 */
.ciplag-slider .ciplag-slider__nav,
.ciplag-slider .ciplag-slider__nav:hover,
.ciplag-slider .ciplag-slider__nav:focus,
.ciplag-slider .ciplag-slider__nav:focus-visible,
.ciplag-slider .ciplag-slider__nav:active {
	color: var(--ciplag-dark) !important;
}

.ciplag-slider .ciplag-slider__nav:hover,
.ciplag-slider .ciplag-slider__nav:focus-visible {
	background: #fff !important;
	/* Conserva el centrado vertical: `transform` se reemplaza entero. */
	transform: translateY(-50%) scale(1.08);
}

.ciplag-slider__nav.is-prev {
	left: 0.75rem;
}

.ciplag-slider__nav.is-next {
	right: 0.75rem;
}

.ciplag-slider__nav.is-prev .ciplag-icon {
	transform: rotate(90deg);
}

.ciplag-slider__nav.is-next .ciplag-icon {
	transform: rotate(-90deg);
}

.ciplag-slider__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.9rem;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 0.4rem;
}

.ciplag-slider__dot {
	width: 34px;
	height: 6px;
	padding: 0;
	background: rgba(255, 255, 255, 0.55);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color var(--ciplag-fast) var(--ciplag-ease),
		width var(--ciplag-normal) var(--ciplag-ease);
}

.ciplag-slider__dot:hover {
	background: rgba(255, 255, 255, 0.85);
}

.ciplag-slider__dot.is-active {
	width: 46px;
	background: var(--ciplag-primary);
}

/* El área táctil real es mayor que el punto visible. */
.ciplag-slider__dot::before {
	content: "";
	position: absolute;
	margin: -14px;
	padding: 14px;
}

@media (min-width: 900px) {
	/*
	 * Reparto entre texto e imagen. Una imagen 16:9 es mucho más baja que una
	 * cuadrada, así que necesita más ancho para tener la misma presencia. El
	 * reparto es configurable desde el panel.
	 */
	.ciplag-hero__inner {
		grid-template-columns: var(--ciplag-hero-cols, 1fr 1.05fr);
	}

}

.ciplag-hero.is-media-normal {
	--ciplag-hero-cols: 1.05fr 0.95fr;
}

.ciplag-hero.is-media-grande {
	--ciplag-hero-cols: 1fr 1.05fr;
}

.ciplag-hero.is-media-xl {
	--ciplag-hero-cols: 0.85fr 1.2fr;
}

/* Sin animación: ni fundido ni zoom. El carrusel sigue funcionando con los
   controles, que es lo que importa. */
@media (prefers-reduced-motion: reduce) {
	.ciplag-slider.is-carousel .ciplag-slider__slide {
		transition: none;
	}

	.ciplag-slider.has-zoom .ciplag-slider__slide.is-active .ciplag-hero__img,
	.ciplag-slider.has-zoom .ciplag-slider__slide:nth-child(even).is-active .ciplag-hero__img {
		animation: none;
		transform: none;
		will-change: auto;
	}
}

/* =========================================================================
   8. Intro / pilares
   ========================================================================= */

.ciplag-intro__top {
	display: grid;
	gap: 1.25rem;
	margin-bottom: clamp(2rem, 5vw, 3rem);
}

.ciplag-intro__body p {
	margin: 0;
	font-size: 1.0625rem;
	color: var(--ciplag-muted);
	text-wrap: pretty;
}

@media (min-width: 900px) {
	.ciplag-intro__top {
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
		align-items: end;
	}
}

.ciplag-pilar {
	padding: 1.5rem;
	background: var(--ciplag-light);
	border: 1px solid var(--ciplag-border);
	border-radius: var(--ciplag-radius);
	transition: transform var(--ciplag-normal) var(--ciplag-ease),
		box-shadow var(--ciplag-normal) var(--ciplag-ease);
}

.ciplag-pilar:hover {
	transform: translateY(-4px);
	box-shadow: var(--ciplag-shadow);
}

.ciplag-pilar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin-bottom: 1rem;
	background: #fff;
	border-radius: 50%;
	/* Verde de marca, el mismo del logotipo. */
	color: var(--ciplag-primary);
	box-shadow: var(--ciplag-shadow-sm);
}

/*
 * El tamaño del trazo lo fija la plantilla en el atributo del SVG; aquí se
 * agranda sin tocar el resto de iconos del sitio.
 */
.ciplag-pilar__icon .ciplag-icon {
	width: 32px;
	height: 32px;
	stroke-width: 1.8;
}

.ciplag-pilar__title {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--ciplag-dark);
}

.ciplag-pilar__text {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--ciplag-muted);
}

/*
 * Imagen en lugar de icono.
 *
 * Cuando el administrador sube una imagen para un pilar, un motivo o un paso,
 * ocupa exactamente el mismo hueco que ocupaba el icono: se recorta al cuadro
 * y se le quita el fondo teñido, que solo tiene sentido detrás de un SVG.
 */
.ciplag-pilar__icon.has-image,
.ciplag-feature__icon.has-image,
.ciplag-paso__icon.has-image,
.ciplag-hero__badge-icon.has-image {
	overflow: hidden;
	background: none;
	padding: 0;
}

.ciplag-visual__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.ciplag-hero__badge-icon.has-image {
	display: inline-flex;
	width: 24px;
	height: 24px;
	border-radius: 4px;
}

.ciplag-paso__icon.has-image {
	display: inline-flex;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	opacity: 1;
}

.ciplag-intro__figure,
.ciplag-porque__figure {
	margin: clamp(2rem, 5vw, 3rem) 0 0;
}

.ciplag-porque__img {
	width: 100%;
	border-radius: var(--ciplag-radius-lg);
	box-shadow: var(--ciplag-shadow);
}

.ciplag-intro__img {
	width: 100%;
	border-radius: var(--ciplag-radius-lg);
	box-shadow: var(--ciplag-shadow);
}

/* =========================================================================
   8 bis. Marquesina: tira de imágenes en movimiento
   =========================================================================
   Separador visual entre bloques. Ocupa todo el ancho de su contenedor: si la
   página está a ancho completo, va de extremo a extremo sin necesidad de
   trucos con 100vw, que introducirían scroll horizontal por el ancho de la
   barra de desplazamiento.
   ========================================================================= */

.ciplag-marquee {
	position: relative;
	width: 100%;
	overflow: hidden;
	/* Reserva la altura antes de que carguen las imágenes: sin CLS. */
	height: var(--ciplag-marquee-h, 200px);
	background: var(--ciplag-light);
}

.ciplag-marquee__track {
	display: flex;
	width: max-content;
	height: 100%;
	animation: ciplag-marquee-left var(--ciplag-marquee-speed, 45s) linear infinite;
}

/* Hacia la derecha: se recorre el bucle en sentido inverso. */
.ciplag-marquee.is-derecha .ciplag-marquee__track {
	animation-name: ciplag-marquee-right;
}

.ciplag-marquee__group {
	display: flex;
	flex: none;
	gap: var(--ciplag-marquee-gap, 16px);
	margin: 0;
	padding: 0 0 0 var(--ciplag-marquee-gap, 16px);
	list-style: none;
	height: 100%;
}

.ciplag-marquee__item {
	flex: none;
	height: 100%;
}

/*
 * Doble clase a propósito: la regla global `.ciplag-home img { height: auto }`
 * tiene más especificidad que una sola clase y dejaría las imágenes sin altura,
 * colapsando el ancho de la tira a cero.
 */
.ciplag-marquee .ciplag-marquee__img {
	width: auto;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: var(--ciplag-radius);
	display: block;
}

.ciplag-marquee.is-pausable:hover .ciplag-marquee__track {
	animation-play-state: paused;
}

/*
 * Cada grupo es la mitad exacta de la pista, así que desplazarse un 50 % deja
 * la segunda copia justo donde estaba la primera: el salto es imperceptible.
 */
@keyframes ciplag-marquee-left {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@keyframes ciplag-marquee-right {
	from {
		transform: translateX(-50%);
	}

	to {
		transform: translateX(0);
	}
}

/*
 * Movimiento reducido: la tira se detiene y se convierte en una galería que el
 * usuario desplaza a voluntad, en lugar de desaparecer.
 */
@media (prefers-reduced-motion: reduce) {
	.ciplag-marquee {
		overflow-x: auto;
	}

	.ciplag-marquee__track {
		animation: none;
	}
}

@media (max-width: 619px) {
	.ciplag-marquee {
		/* En móvil una tira demasiado alta se come la pantalla. */
		height: min(var(--ciplag-marquee-h, 200px), 150px);
	}
}

/* =========================================================================
   9. Tarjetas de servicio
   ========================================================================= */

.ciplag-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--ciplag-border);
	border-radius: var(--ciplag-radius);
	box-shadow: var(--ciplag-shadow-sm);
	transition: transform var(--ciplag-normal) var(--ciplag-ease),
		box-shadow var(--ciplag-normal) var(--ciplag-ease),
		border-color var(--ciplag-normal) var(--ciplag-ease);
}

.ciplag-card:hover,
.ciplag-card:focus-within {
	transform: translateY(-6px);
	border-color: rgba(152, 203, 0, 0.5);
	box-shadow: var(--ciplag-shadow-lg);
}

/* Enlace extendido: el área clicable cubre la tarjeta, pero el enlace real
   está dentro del H3, de modo que se anuncia una sola vez y con su título. */
.ciplag-card__link {
	color: inherit;
	text-decoration: none;
}

.ciplag-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.ciplag-card:focus-within {
	outline: 3px solid var(--ciplag-secondary);
	outline-offset: 2px;
}

/* El foco lo pinta la tarjeta completa, no el texto del enlace. */
.ciplag-card__link:focus-visible {
	outline: none;
}

/*
 * La proporción la manda la caja, no la fotografía.
 *
 * La imagen se coloca en absoluto sobre ella para que la cubra entera venga
 * como venga: la regla base `.ciplag-web img { height: auto }` tiene más
 * especificidad que `.ciplag-card__img` y dejaba a cada foto con su altura
 * natural. Resultado: las de 16:9 no llegaban abajo y asomaba una franja del
 * fondo verde claro, mientras que una de 3:2 sí cubría. Así cualquier foto
 * que suba el administrador se adapta sola y todas las tarjetas se ven igual.
 */
.ciplag-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--ciplag-light);
}

.ciplag-card__media .ciplag-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 500ms var(--ciplag-ease);
}

.ciplag-card:hover .ciplag-card__img {
	transform: scale(1.05);
}

.ciplag-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.5rem;
}

.ciplag-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: 1rem;
	background: linear-gradient(140deg, rgba(152, 203, 0, 0.2), rgba(0, 143, 255, 0.12));
	border-radius: 16px;
	color: var(--ciplag-primary-ink);
	transition: transform var(--ciplag-normal) var(--ciplag-ease);
}

.ciplag-card:hover .ciplag-card__icon {
	transform: rotate(-6deg) scale(1.06);
}

.ciplag-card__title {
	margin: 0 0 0.5rem;
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--ciplag-dark);
}

.ciplag-card__text {
	margin: 0 0 1.25rem;
	font-size: 0.9375rem;
	color: var(--ciplag-muted);
}

.ciplag-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--ciplag-secondary-dark);
}

.ciplag-card__arrow {
	transition: transform var(--ciplag-normal) var(--ciplag-ease);
}

.ciplag-card:hover .ciplag-card__arrow {
	transform: translateX(4px);
}

/* =========================================================================
   10. Features / por qué elegirnos
   ========================================================================= */

.ciplag-feature {
	display: flex;
	gap: 1rem;
	padding: 1.5rem;
	background: #fff;
	border: 1px solid var(--ciplag-border);
	border-radius: var(--ciplag-radius);
	transition: transform var(--ciplag-normal) var(--ciplag-ease),
		box-shadow var(--ciplag-normal) var(--ciplag-ease);
}

.ciplag-feature:hover {
	transform: translateY(-4px);
	box-shadow: var(--ciplag-shadow);
}

.ciplag-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	background: rgba(152, 203, 0, 0.16);
	border-radius: 12px;
	color: var(--ciplag-primary-ink);
}

.ciplag-feature__title {
	margin: 0 0 0.35rem;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--ciplag-dark);
}

.ciplag-feature__text {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--ciplag-muted);
}

/* =========================================================================
   11. Segmentos
   ========================================================================= */

.ciplag-segmento {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--ciplag-border);
	border-radius: var(--ciplag-radius);
	box-shadow: var(--ciplag-shadow-sm);
	transition: transform var(--ciplag-normal) var(--ciplag-ease),
		box-shadow var(--ciplag-normal) var(--ciplag-ease);
}

.ciplag-segmento:hover {
	transform: translateY(-5px);
	box-shadow: var(--ciplag-shadow-lg);
}

/* Mismo criterio que en las tarjetas de servicio. */
.ciplag-segmento__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.ciplag-segmento__media .ciplag-segmento__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.ciplag-segmento__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.75rem 1.5rem;
}

.ciplag-segmento__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 1rem;
	background: var(--ciplag-dark);
	border-radius: 14px;
	color: var(--ciplag-primary);
}

.ciplag-segmento__title {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--ciplag-dark);
}

.ciplag-segmento__text {
	margin: 0 0 1.5rem;
	font-size: 0.9375rem;
	color: var(--ciplag-muted);
}

.ciplag-segmento .ciplag-btn {
	align-self: flex-start;
	margin-top: auto;
}

/* =========================================================================
   12. Proceso
   ========================================================================= */

.ciplag-proceso {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: paso;
}

.ciplag-paso {
	position: relative;
	display: flex;
	gap: 1.25rem;
	padding: 1.5rem;
	background: #fff;
	border: 1px solid var(--ciplag-border);
	border-radius: var(--ciplag-radius);
}

.ciplag-paso__marker {
	position: relative;
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

.ciplag-paso__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--ciplag-primary);
	border-radius: 50%;
	font-size: 0.9375rem;
	font-weight: 800;
	color: var(--ciplag-dark);
}

.ciplag-paso__icon {
	color: var(--ciplag-muted);
	opacity: 0.55;
}

.ciplag-paso__title {
	margin: 0 0 0.35rem;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--ciplag-dark);
}

.ciplag-paso__text {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--ciplag-muted);
}

@media (min-width: 900px) {
	/*
	 * Flex, no retícula: así la fila incompleta —los pasos 4 y 5 de un listado
	 * de cinco— se centra sola en lugar de amontonarse a la izquierda. El
	 * número de columnas lo decide `Utils::proceso_cols()` según cuántos pasos
	 * haya, y llega como clase `is-cols-N`.
	 */
	.ciplag-proceso {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.ciplag-paso {
		flex: 0 1 calc(
			(100% - (var(--ciplag-proceso-cols, 4) - 1) * 1.25rem) /
			var(--ciplag-proceso-cols, 4)
		);
		flex-direction: column;
		gap: 1rem;
	}

	/* Línea de conexión entre pasos. */
	.ciplag-paso:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 2.4rem;
		right: -0.75rem;
		width: 0.75rem;
		height: 2px;
		background: var(--ciplag-border-strong);
	}

	/*
	 * El último paso de cada fila no conecta con nada: su línea quedaba
	 * colgando hacia el margen derecho.
	 */
	.ciplag-proceso.is-cols-2 .ciplag-paso:nth-child(2n)::after,
	.ciplag-proceso.is-cols-3 .ciplag-paso:nth-child(3n)::after,
	.ciplag-proceso.is-cols-4 .ciplag-paso:nth-child(4n)::after {
		content: none;
	}

	.ciplag-paso__marker {
		flex-direction: row;
		align-items: center;
	}
}

.ciplag-proceso.is-cols-1 {
	--ciplag-proceso-cols: 1;
}

.ciplag-proceso.is-cols-2 {
	--ciplag-proceso-cols: 2;
}

.ciplag-proceso.is-cols-3 {
	--ciplag-proceso-cols: 3;
}

.ciplag-proceso.is-cols-4 {
	--ciplag-proceso-cols: 4;
}

/* =========================================================================
   13. Indicadores
   ========================================================================= */

.ciplag-stats {
	display: grid;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
	text-align: center;
}

.ciplag-stat {
	padding: 1.5rem 1rem;
	border-radius: var(--ciplag-radius);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.ciplag-stat__value {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.1rem;
	margin: 0 0 0.4rem;
	font-size: clamp(2.5rem, 7vw, 3.5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--ciplag-primary);
	/* Evita saltos de ancho durante la animación del contador. */
	font-variant-numeric: tabular-nums;
}

.ciplag-stat__affix {
	font-size: 0.6em;
	font-weight: 700;
}

.ciplag-stat__label {
	margin: 0;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.72);
}

/* =========================================================================
   14. Cobertura
   ========================================================================= */

.ciplag-zona {
	display: flex;
	gap: 0.9rem;
	padding: 1.35rem 1.5rem;
	background: var(--ciplag-light);
	border: 1px solid var(--ciplag-border);
	border-left: 4px solid var(--ciplag-primary);
	border-radius: var(--ciplag-radius);
	transition: transform var(--ciplag-normal) var(--ciplag-ease);
}

.ciplag-zona:hover {
	transform: translateX(4px);
}

.ciplag-zona__icon {
	color: var(--ciplag-primary-ink);
	flex: none;
}

.ciplag-zona__title {
	margin: 0 0 0.2rem;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--ciplag-dark);
}

.ciplag-zona__detail {
	margin: 0;
	font-size: 0.9063rem;
	color: var(--ciplag-muted);
}

.ciplag-zonas__nota {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin: 2rem 0 0;
	padding: 1rem;
	background: rgba(0, 143, 255, 0.07);
	border-radius: var(--ciplag-radius);
	font-size: 0.9375rem;
	color: var(--ciplag-secondary-dark);
	text-align: center;
}

/* =========================================================================
   15. Testimonios
   ========================================================================= */

.ciplag-testimonio figure {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	padding: 1.75rem;
	background: #fff;
	border: 1px solid var(--ciplag-border);
	border-radius: var(--ciplag-radius);
	box-shadow: var(--ciplag-shadow-sm);
}

.ciplag-testimonio__stars {
	display: flex;
	gap: 0.15rem;
	margin-bottom: 0.9rem;
	color: #f5a524;
}

.ciplag-testimonio__quote {
	flex: 1;
	margin: 0 0 1.25rem;
	font-size: 1rem;
	color: var(--ciplag-text);
}

.ciplag-testimonio__quote p {
	margin: 0;
}

.ciplag-testimonio__quote p::before {
	content: "\201C";
}

.ciplag-testimonio__quote p::after {
	content: "\201D";
}

.ciplag-testimonio__author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.9375rem;
}

.ciplag-testimonio__avatar img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
}

.ciplag-testimonio__author strong {
	display: block;
	color: var(--ciplag-dark);
}

.ciplag-testimonio__meta {
	display: block;
	font-size: 0.8438rem;
	color: var(--ciplag-muted);
}

/* =========================================================================
   16. Accordion FAQ
   ========================================================================= */

.ciplag-accordion {
	display: grid;
	gap: 0.75rem;
}

.ciplag-accordion__item {
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--ciplag-border);
	border-radius: var(--ciplag-radius);
	transition: border-color var(--ciplag-fast) var(--ciplag-ease),
		box-shadow var(--ciplag-fast) var(--ciplag-ease);
}

.ciplag-accordion__item[open] {
	border-color: rgba(152, 203, 0, 0.55);
	box-shadow: var(--ciplag-shadow-sm);
}

.ciplag-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 1.35rem;
	cursor: pointer;
	list-style: none;
	font-size: 1.0313rem;
	font-weight: 700;
	color: var(--ciplag-dark);
}

.ciplag-accordion__trigger::-webkit-details-marker {
	display: none;
}

.ciplag-accordion__trigger:hover {
	color: var(--ciplag-primary-ink);
}

.ciplag-accordion__chevron {
	flex: none;
	display: inline-flex;
	color: var(--ciplag-muted);
	transition: transform var(--ciplag-normal) var(--ciplag-ease);
}

.ciplag-accordion__item[open] .ciplag-accordion__chevron {
	transform: rotate(180deg);
	color: var(--ciplag-primary-ink);
}

.ciplag-accordion__panel {
	padding: 0 1.35rem 1.35rem;
	color: var(--ciplag-muted);
}

.ciplag-accordion__panel p {
	margin: 0;
	text-wrap: pretty;
}

/* =========================================================================
   17. CTA
   ========================================================================= */

.ciplag-cta {
	position: relative;
	overflow: hidden;
	/* Banda de cierre: menos alta que una sección de contenido. */
	padding-block: clamp(2.5rem, 5vw, 3.75rem);
}

.ciplag-cta.is-primary {
	background: linear-gradient(135deg, var(--ciplag-dark) 0%, #2c3826 55%, var(--ciplag-primary-dark) 160%);
	color: #fff;
}

.ciplag-cta.is-dark {
	background: var(--ciplag-dark);
	color: #fff;
}

.ciplag-cta.is-claro {
	background: var(--ciplag-light);
}

.ciplag-cta.has-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--ciplag-cta-bg);
	background-size: cover;
	background-position: center;
	opacity: 0.18;
}

.ciplag-cta__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 1.75rem;
	align-items: center;
}

.ciplag-cta__title {
	margin: 0;
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/*
 * Sobre los fondos oscuros el título hereda el blanco de la sección, pero el
 * theme pinta todos los `h2` con su propio color y un valor explícito gana
 * siempre a uno heredado: el titular salía en azul oscuro sobre verde oscuro,
 * prácticamente ilegible.
 */
.ciplag-cta.is-primary .ciplag-cta__title,
.ciplag-cta.is-dark .ciplag-cta__title,
.ciplag-section--dark .ciplag-cta__title,
.ciplag-section--dark .ciplag-section__title {
	color: #fff !important;
}

.ciplag-cta.is-claro .ciplag-cta__title {
	color: var(--ciplag-dark) !important;
}

.ciplag-cta__text {
	margin: 0.75rem 0 0;
	max-width: 58ch;
	font-size: 1.0313rem;
	opacity: 0.86;
	text-wrap: pretty;
}

.ciplag-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

@media (min-width: 900px) {
	/*
	 * Más estrecho que el resto de secciones a propósito: con el ancho completo
	 * del contenedor, el titular y los botones quedaban en extremos opuestos de
	 * la pantalla y el bloque se leía como dos cosas sueltas.
	 */
	.ciplag-cta__inner {
		grid-template-columns: 1.35fr auto;
		gap: 3rem;
		max-width: 1120px;
		margin-inline: auto;
	}

	.ciplag-cta__actions {
		justify-content: flex-end;
	}
}

/* =========================================================================
   18. Contacto y formulario
   ========================================================================= */

.ciplag-contacto {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
}

.ciplag-contacto.is-single {
	max-width: 760px;
	margin-inline: auto;
}

@media (min-width: 900px) {
	.ciplag-contacto:not(.is-single) {
		grid-template-columns: 0.85fr 1.15fr;
		align-items: start;
	}
}

.ciplag-contacto__aside {
	padding: 1.75rem;
	background: var(--ciplag-dark);
	border-radius: var(--ciplag-radius-lg);
	color: rgba(255, 255, 255, 0.86);
}

.ciplag-contacto__aside-title {
	margin: 0 0 1.25rem;
	font-size: 1.125rem;
	font-weight: 700;
	color: #fff;
}

.ciplag-contact-list {
	display: grid;
	gap: 0.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ciplag-contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	font-size: 0.9375rem;
}

.ciplag-contact-list .ciplag-icon {
	margin-top: 2px;
	color: var(--ciplag-primary);
}

.ciplag-contact-list a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	word-break: break-word;
	/* Teléfono y WhatsApp son acciones de conversión: se les da un área
	   táctil holgada sin alterar el ritmo visual de la lista. */
	padding-block: 0.35rem;
	margin-block: -0.35rem;
}

.ciplag-contact-list a:hover {
	border-bottom-color: currentColor;
}

.ciplag-contacto__persona {
	margin: 1.5rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 0.9375rem;
}

.ciplag-contacto__persona-rol {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ciplag-primary);
}

.ciplag-contacto__persona strong {
	color: #fff;
}

.ciplag-contacto__mapa {
	margin-top: 1.5rem;
	border-radius: var(--ciplag-radius);
	overflow: hidden;
}

/*
 * El mapa se ve igual en todas las plantillas.
 *
 * El alto en píxeles del código pegado no se respeta a propósito: el ancho lo
 * decide la columna, que no mide lo mismo en la portada que en una página de
 * servicio, y con un alto fijo el recuadro salía más achatado en una que en
 * otra. Se conserva la PROPORCIÓN que eligió el administrador —la calcula la
 * plantilla y llega en `--ciplag-mapa-ratio`— y el ancho se adapta.
 */
.ciplag-contacto__mapa iframe {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: var(--ciplag-mapa-ratio, 16 / 10);
	min-height: 220px;
	border: 0;
}

/* --- Formulario --- */

.ciplag-form {
	padding: clamp(1.35rem, 4vw, 2.25rem);
	background: #fff;
	border: 1px solid var(--ciplag-border);
	border-radius: var(--ciplag-radius-lg);
	box-shadow: var(--ciplag-shadow);
}

.ciplag-section--alt .ciplag-form,
.ciplag-section.is-bg-alterno .ciplag-form {
	background: #fff;
}

.ciplag-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ciplag-form__grid {
	display: grid;
	gap: 1rem;
}

@media (min-width: 620px) {
	.ciplag-form__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ciplag-field--full {
		grid-column: 1 / -1;
	}
}

.ciplag-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
	min-width: 0;
}

.ciplag-label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ciplag-dark);
}

.ciplag-req {
	color: var(--ciplag-danger);
}

.ciplag-input {
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 0.9rem;
	background: #fff;
	border: 1.5px solid var(--ciplag-border-strong);
	border-radius: var(--ciplag-radius-sm);
	font-family: inherit;
	/* 16px evita el zoom automático de iOS al enfocar. */
	font-size: 1rem;
	color: var(--ciplag-text);
	transition: border-color var(--ciplag-fast) var(--ciplag-ease),
		box-shadow var(--ciplag-fast) var(--ciplag-ease);
}

.ciplag-input:focus {
	outline: none;
	border-color: var(--ciplag-primary);
	box-shadow: 0 0 0 3px rgba(152, 203, 0, 0.22);
}

.ciplag-input[aria-invalid="true"] {
	border-color: var(--ciplag-danger);
}

.ciplag-input[aria-invalid="true"]:focus {
	box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.18);
}

.ciplag-textarea {
	min-height: 120px;
	resize: vertical;
}

.ciplag-select {
	appearance: none;
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.8rem center;
	background-size: 18px;
}

.ciplag-error {
	display: none;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ciplag-danger);
}

.ciplag-error.is-visible {
	display: block;
	animation: ciplag-shake 280ms var(--ciplag-ease);
}

.ciplag-field--check {
	flex-direction: column;
}

.ciplag-check {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.875rem;
	color: var(--ciplag-muted);
	cursor: pointer;
}

.ciplag-check input {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	accent-color: var(--ciplag-primary-ink);
}

.ciplag-check a {
	color: var(--ciplag-secondary-dark);
}

.ciplag-form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 1.5rem;
}

.ciplag-form__submit {
	position: relative;
	/* En pantallas de 320 px el mínimo fijo desbordaría el contenedor. */
	min-width: min(190px, 100%);
}

/*
 * Sobre el verde de marca, el texto va en blanco en todos los estados. La
 * variante `primary` usa tinta oscura por contraste, pero en el botón de envío
 * se leía como negro y desentonaba con el resto de llamadas a la acción.
 */
.ciplag-web .ciplag-form__submit,
.ciplag-home .ciplag-form__submit,
.ciplag-web .ciplag-form__submit:hover,
.ciplag-home .ciplag-form__submit:hover,
.ciplag-web .ciplag-form__submit:focus-visible,
.ciplag-home .ciplag-form__submit:focus-visible,
.ciplag-web .ciplag-form__submit:active,
.ciplag-home .ciplag-form__submit:active,
.ciplag-web .ciplag-form__submit[disabled],
.ciplag-home .ciplag-form__submit[disabled] {
	color: #fff !important;
}

/* El indicador de envío comparte color con el texto. */
.ciplag-form__submit .ciplag-spinner {
	border-color: rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
}

.ciplag-form__submit[disabled] {
	opacity: 0.7;
	cursor: progress;
}

.ciplag-spinner {
	display: none;
	width: 17px;
	height: 17px;
	border: 2px solid rgba(27, 33, 24, 0.28);
	border-top-color: var(--ciplag-dark);
	border-radius: 50%;
}

.ciplag-form.is-sending .ciplag-spinner {
	display: inline-block;
	animation: ciplag-spin 700ms linear infinite;
}

.ciplag-form__legal {
	flex: 1;
	min-width: min(200px, 100%);
	margin: 0;
	font-size: 0.8125rem;
	color: var(--ciplag-muted);
}

.ciplag-form__status {
	display: none;
	margin-top: 1.25rem;
	padding: 0.9rem 1.1rem;
	border-radius: var(--ciplag-radius-sm);
	font-size: 0.9375rem;
	font-weight: 600;
}

.ciplag-form__status.is-visible {
	display: block;
	animation: ciplag-fade-up 320ms var(--ciplag-ease) both;
}

.ciplag-form__status.is-success {
	background: rgba(152, 203, 0, 0.16);
	color: #4d6a00;
	border: 1px solid rgba(152, 203, 0, 0.45);
}

.ciplag-form__status.is-error {
	background: rgba(217, 45, 32, 0.08);
	color: #9b1c14;
	border: 1px solid rgba(217, 45, 32, 0.3);
}

/* =========================================================================
   19. Página de servicio
   ========================================================================= */

.ciplag-breadcrumbs {
	margin-bottom: 1.5rem;
	font-size: 0.8438rem;
	color: var(--ciplag-muted);
}

.ciplag-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ciplag-breadcrumbs li + li::before {
	content: "/";
	margin-right: 0.4rem;
	opacity: 0.5;
}

.ciplag-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.ciplag-breadcrumbs a:hover {
	color: var(--ciplag-primary-ink);
}

.ciplag-servicio__hero {
	padding-block: clamp(1rem, 2.5vw, 1.75rem) clamp(2.5rem, 6vw, 4rem);
	background:
		radial-gradient(110% 85% at 100% 0%, rgba(152, 203, 0, 0.15) 0%, transparent 60%),
		var(--ciplag-white);
}

.ciplag-servicio__hero-grid {
	display: grid;
	gap: clamp(1.75rem, 5vw, 3rem);
	align-items: center;
}

@media (min-width: 900px) {
	/*
	 * Misma composición en todos los servicios: texto a la izquierda y la foto
	 * de portada a la derecha. La retícula no depende de que haya imagen —así
	 * el titular ocupa siempre el mismo ancho y las páginas no bailan entre sí
	 * según quién tenga foto—; mientras falte, esa mitad la ocupa el degradado
	 * verde del fondo.
	 */
	.ciplag-servicio__hero-grid {
		grid-template-columns: 1.1fr 0.9fr;
	}
}

.ciplag-servicio__eyebrow {
	color: var(--ciplag-primary-ink);
}

.ciplag-servicio__title {
	margin: 0;
	font-size: clamp(1.85rem, 5.4vw, 3rem);
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--ciplag-dark);
	text-wrap: balance;
}

.ciplag-servicio__lead {
	margin: 1.15rem 0 0;
	max-width: 56ch;
	font-size: 1.0625rem;
	color: var(--ciplag-muted);
	text-wrap: pretty;
}

/*
 * Texto del editor, ya dentro del hero. Se compone algo más discreto que la
 * entradilla para que la jerarquía siga siendo título → entradilla → detalle.
 */
/* Doble clase: `.ciplag-prose` se define más abajo y ganaría el tamaño y el
   color con la misma especificidad. */
.ciplag-prose.ciplag-servicio__intro {
	margin-top: 1rem;
	max-width: 68ch;
	font-size: 1rem;
	color: var(--ciplag-muted);
}

.ciplag-servicio__intro > :last-child {
	margin-bottom: 0;
}

.ciplag-servicio__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

.ciplag-servicio__hero-media {
	/* Ocupa toda su columna: la foto manda en la mitad derecha del hero. */
	width: 100%;
}

.ciplag-servicio__img {
	width: 100%;
	height: 100%;
	border-radius: var(--ciplag-radius-lg);
	box-shadow: var(--ciplag-shadow-lg);
	/*
	 * Recorte fijo: la portada se ve siempre con la misma proporción en todos
	 * los servicios, suba el administrador la foto que suba.
	 */
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

.ciplag-prose {
	font-size: 1.0625rem;
	color: var(--ciplag-text);
}

.ciplag-prose p {
	margin: 0 0 1rem;
	text-wrap: pretty;
}

.ciplag-prose p:last-child {
	margin-bottom: 0;
}

.ciplag-checklist {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ciplag-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	padding: 0.9rem 1.1rem;
	background: #fff;
	border: 1px solid var(--ciplag-border);
	border-radius: var(--ciplag-radius-sm);
	font-size: 0.9375rem;
}

.ciplag-checklist__icon {
	margin-top: 2px;
	flex: none;
	color: var(--ciplag-primary-ink);
}

.ciplag-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.65rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ciplag-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.6rem 1.1rem;
	background: var(--ciplag-light);
	border: 1px solid var(--ciplag-border);
	border-radius: 999px;
	font-size: 0.9063rem;
	font-weight: 600;
	color: var(--ciplag-dark);
}

.ciplag-tag .ciplag-icon {
	color: var(--ciplag-primary-ink);
}

.ciplag-archivo__hero {
	padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 2.5rem);
	text-align: center;
	background: var(--ciplag-light);
}

.ciplag-archivo__title {
	margin: 0.25rem 0 0;
	font-size: clamp(1.85rem, 5vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--ciplag-dark);
	text-wrap: balance;
}

.ciplag-archivo__lead {
	max-width: 62ch;
	margin: 1rem auto 0;
	color: var(--ciplag-muted);
}

/* =========================================================================
   20. Footer
   ========================================================================= */

.ciplag-footer {
	padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem;
	background: var(--ciplag-dark);
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.9375rem;
}

.ciplag-footer__grid {
	display: grid;
	gap: 2.25rem;
}

@media (min-width: 700px) {
	.ciplag-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.ciplag-footer__grid {
		grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
		gap: 3rem;
	}
}

/*
 * Doble clase: la regla global de imágenes ganaría por especificidad y el
 * `max-width` no se aplicaría.
 */
.ciplag-footer .ciplag-footer__logo-img {
	max-width: 180px;
	height: auto;
}

/*
 * El plato blanco solo cuando se está reutilizando el logotipo principal, que
 * suele venir pensado para fondo claro. Si el administrador ha subido una
 * versión para fondo oscuro, el recuadro blanco sobra y además taparía un logo
 * claro con transparencia.
 */
.ciplag-footer__logo.is-fallback .ciplag-footer__logo-img {
	padding: 0.5rem 0.75rem;
	background: #fff;
	border-radius: var(--ciplag-radius-sm);
}

.ciplag-footer__brand {
	margin: 0;
	font-size: 1.3rem;
	font-weight: 800;
	color: #fff;
}

.ciplag-footer__about {
	margin: 1.15rem 0 0;
	max-width: 42ch;
	text-wrap: pretty;
}

.ciplag-footer__social {
	display: flex;
	gap: 0.5rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.ciplag-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 50%;
	color: #fff;
	text-decoration: none;
	transition: background-color var(--ciplag-fast) var(--ciplag-ease),
		transform var(--ciplag-fast) var(--ciplag-ease);
}

.ciplag-footer__social a:hover {
	background: var(--ciplag-primary);
	color: var(--ciplag-dark);
	transform: translateY(-2px);
}

.ciplag-footer__title {
	margin: 0 0 1rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ciplag-primary);
}

.ciplag-footer__list {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ciplag-footer__list a {
	color: inherit;
	text-decoration: none;
	transition: color var(--ciplag-fast) var(--ciplag-ease);
}

.ciplag-footer__list a:hover {
	color: var(--ciplag-primary);
}

.ciplag-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.8438rem;
}

.ciplag-footer__copy {
	margin: 0;
}

.ciplag-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ciplag-footer__legal a {
	color: inherit;
	text-decoration: none;
}

.ciplag-footer__legal a:hover {
	color: var(--ciplag-primary);
}

/* =========================================================================
   21. Conversión flotante
   ========================================================================= */

.ciplag-wa-float {
	position: fixed;
	bottom: 1.25rem;
	z-index: 300;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem;
	background: var(--ciplag-wa);
	border-radius: 999px;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
	transition: transform var(--ciplag-normal) var(--ciplag-ease),
		box-shadow var(--ciplag-normal) var(--ciplag-ease);
}

.ciplag-wa-float.is-right {
	right: 1.1rem;
}

.ciplag-wa-float.is-left {
	left: 1.1rem;
}

.ciplag-wa-float:hover {
	transform: scale(1.06);
	box-shadow: 0 12px 30px rgba(37, 211, 102, 0.5);
}

.ciplag-wa-float__tip {
	display: none;
	padding-right: 0.5rem;
	font-size: 0.9375rem;
	font-weight: 700;
}

@media (min-width: 1024px) {
	.ciplag-wa-float__tip {
		display: inline;
	}
}

/* La barra CTA móvil desplaza el botón flotante para no solaparse. */
.ciplag-has-mobilebar .ciplag-wa-float {
	bottom: calc(1rem + 68px);
}

@media (min-width: 768px) {
	.ciplag-has-mobilebar .ciplag-wa-float {
		bottom: 1.25rem;
	}
}

.ciplag-mobilebar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 290;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	background: #fff;
	border-top: 1px solid var(--ciplag-border);
	box-shadow: 0 -4px 18px rgba(27, 33, 24, 0.1);
	padding-bottom: env(safe-area-inset-bottom);
}

.ciplag-mobilebar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	min-height: 62px;
	padding: 0.5rem 0.25rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--ciplag-dark);
	text-decoration: none;
	transition: background-color var(--ciplag-fast) var(--ciplag-ease);
}

.ciplag-mobilebar__item + .ciplag-mobilebar__item {
	border-left: 1px solid var(--ciplag-border);
}

.ciplag-mobilebar__item .ciplag-icon {
	color: var(--ciplag-primary-ink);
}

.ciplag-mobilebar__item.is-wa .ciplag-icon {
	color: var(--ciplag-wa-dark);
}

.ciplag-mobilebar__item:active {
	background: var(--ciplag-light);
}

@media (min-width: 768px) {
	.ciplag-mobilebar {
		display: none;
	}
}

/* Reserva de espacio para que la barra no tape el final del contenido. */
@media (max-width: 767px) {
	.ciplag-has-mobilebar .ciplag-footer {
		padding-bottom: calc(1.5rem + 70px);
	}
}

/* =========================================================================
   22. Motion
   ========================================================================= */

/*
 * Los elementos con reveal solo se ocultan si JavaScript está disponible
 * (la clase `ciplag-motion` la añade el propio JS). Sin JS, el contenido es
 * visible desde el primer momento.
 */
.ciplag-motion [data-ciplag-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 520ms var(--ciplag-ease) var(--ciplag-delay, 0ms),
		transform 520ms var(--ciplag-ease) var(--ciplag-delay, 0ms);
	will-change: opacity, transform;
}

.ciplag-motion [data-ciplag-reveal].is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

@keyframes ciplag-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes ciplag-fade-up {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes ciplag-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-3px); }
	75% { transform: translateX(3px); }
}

/* --- Respeto absoluto por prefers-reduced-motion --- */

@media (prefers-reduced-motion: reduce) {
	.ciplag-motion [data-ciplag-reveal],
	.ciplag-motion [data-ciplag-reveal].is-revealed {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.ciplag-web *,
	.ciplag-home *,
	.ciplag-header *,
	.ciplag-footer *,
	.ciplag-mobilebar *,
	.ciplag-wa-float {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.ciplag-card:hover,
	.ciplag-feature:hover,
	.ciplag-pilar:hover,
	.ciplag-segmento:hover,
	.ciplag-btn:hover,
	.ciplag-wa-float:hover {
		transform: none !important;
	}

	.ciplag-form.is-sending .ciplag-spinner {
		animation: none !important;
		border-top-color: transparent;
	}
}

/* --- Impresión --- */

@media print {
	.ciplag-header,
	.ciplag-mobilebar,
	.ciplag-wa-float,
	.ciplag-form__foot,
	.ciplag-cta__actions {
		display: none !important;
	}

	.ciplag-section {
		padding-block: 1rem;
		break-inside: avoid;
	}
}