/* =========================================================
   AQUA — estilos globales del tema
   ========================================================= */

/* --- Reset / base ---------------------------------------------------- */
/* overflow-x:hidden aquí (no en .hero-simple/.banner-aquacot directamente):
   sus fondos a sangre completa usan un ::before a 100vw, que en navegadores
   con scrollbar clásica (no overlay) mide ~8px más que el ancho realmente
   visible (100vw incluye el hueco de la propia barra de scroll) y esos 8px
   de sobra por lado forzaban scroll horizontal en toda la página. Recortarlo
   en el propio .hero-simple/.banner-aquacot (como se hizo al principio)
   recorta TODA su extensión a sangre completa, no solo esos 8px, porque
   overflow-x ahí clipa a la caja de 1440px del propio elemento, no al
   documento — rompía el fondo a partir de 1440px de ventana. Puesto en body
   solo recorta el sobrante real de 8px en los bordes físicos de la página,
   sin tocar el desbordamiento intencionado dentro de esos elementos.
   Va en los dos (html y body): el navegador debería propagar el overflow
   de body al viewport cuando html no define el suyo, pero en la práctica
   esa propagación no es fiable entre navegadores — con overflow-x:hidden
   solo en body, Firefox seguía permitiendo desplazar la página esos 8px
   igualmente (window.scrollTo lo movía). Puesto explícitamente en html
   también, el recorte es real en todos los navegadores probados. */
html { overflow-x: hidden; }
body {
	margin: 0;
	overflow-x: hidden;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--montserrat);
	-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--wp--preset--color--accent); }
::selection { background: var(--wp--preset--color--accent); color: #fff; }
img { max-width: 100%; height: auto; }

.wp-block-heading,
h1, h2, h3, h4, h5, h6 {
	font-family: var(--wp--preset--font-family--raleway);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.08;
	margin: 0 0 20px;
}

/* --- Contenedor (ancho AQUA = 1440px, sustituye al .container de Bootstrap) */
.container { max-width: 1440px; margin-inline: auto; padding-inline: 48px; box-sizing: border-box; }
@media (max-width: 1080px) { .container { padding-inline: 20px; } }

/* --- Secciones nativas: fondo + reveal ------------------------------- */
.wp-block-group[data-bg] { padding-block: clamp(56px, 8vw, 100px); }
.wp-block-group[data-bg="ink"]   { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }
.wp-block-group[data-bg="paper"] { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--text); }
.wp-block-group.section-paper-alt { background: var(--wp--preset--color--paper-alt); }

[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }
.editor-styles-wrapper [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }

/* --- Botones ----------------------------------------------------------*
 * IMPORTANTE: en un core/button real, WordPress pone la className en el
 * <div class="wp-block-button {className}"> exterior, NO en el
 * <a class="wp-block-button__link"> interior (ver nota del cliente).
 * El borde/color de cada variante va SIEMPRE en el div contenedor; el
 * enlace interior nunca lleva borde propio, para no duplicarlo.
 * Para enlaces sueltos escritos a mano en bloques custom (sin div
 * envolvente, p.ej. <a class="btn btn--primary">) se usan reglas
 * calificadas por etiqueta (a.btn--primary) para no chocar con lo anterior. */
.wp-block-buttons { gap: .9rem; }
.wp-block-button__link,
.btn {
	display: inline-flex; align-items: center; gap: 16px;
	border-radius: 2px; padding: 9px 7px 9px 16px; border: none; background: none;
	font-size: 14px; font-weight: 600; font-family: var(--wp--preset--font-family--montserrat);
}
@media (max-width: 1080px) { .wp-block-button__link, .btn { padding: 13px 12px 13px 20px; } }
.btn__arrow { display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; line-height: 1; }

.wp-block-button.btn--primary,
a.btn--primary, button.btn--primary {
	border: 2px solid var(--wp--preset--color--ink); border-radius: 2px; color: var(--wp--preset--color--ink); background: transparent;
}
.wp-block-button.btn--primary .wp-block-button__link { color: inherit; }
.wp-block-button.btn--primary:hover,
a.btn--primary:hover, button.btn--primary:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }

.wp-block-button.btn--on-dark,
a.btn--on-dark, button.btn--on-dark {
	border: 2px solid var(--wp--preset--color--paper); border-radius: 2px; color: var(--wp--preset--color--paper); background: transparent;
}
.wp-block-button.btn--on-dark .wp-block-button__link { color: inherit; }
.wp-block-button.btn--on-dark:hover,
a.btn--on-dark:hover, button.btn--on-dark:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }

.wp-block-button.btn--filled,
a.btn--filled, button.btn--filled {
	border: none; background: var(--wp--preset--color--accent); color: #fff; border-radius: 999px;
}
.wp-block-button.btn--filled .wp-block-button__link { color: inherit; }
.wp-block-button.btn--filled:hover,
a.btn--filled:hover, button.btn--filled:hover { background: oklch(0.6 0.18 43); color: #fff; }

/* --- Patrón: bloque de contenido numerado (nº + título / texto) ------ */
.content-block { padding-block: clamp(40px, 6vw, 64px); border-top: 1px solid oklch(0.16 0.01 260 / .12); }
.wp-block-group[data-bg="ink"] .content-block,
.content-block.is-on-dark { border-top-color: oklch(0.98 0.01 90 / .16); }
.content-block__num {
	font-family: var(--wp--preset--font-family--montserrat); font-weight: 600; font-size: 13px;
	color: var(--wp--preset--color--accent); display: block; margin-bottom: 14px;
}
.content-block .wp-block-columns { align-items: flex-start; }

/* =========================================================================
   Página Servicios (índice) — las tres filas 01/02/03. Reutilizan
   core/media-text + .content-block__num, pero ese patrón compartido nunca
   llevó el estilo propio de esta página; todo lo de aquí va scoped a
   .services-row para no afectar a ningún otro sitio (Home incluida). */
.services-row {
	border-top: 1px solid oklch(0.16 0.01 260 / .18);
	padding-block: 100px;
}
@media (max-width: 1080px) { .services-row { padding-block: 56px; } }

.services-row .wp-block-media-text { gap: 48px; }
/* core/media-text mete un padding:0 8% por defecto en la columna de texto,
   metiéndola hacia dentro tanto por el borde exterior (izquierdo en las
   filas 01/03, derecho en la 02) como por el interior junto al divisor,
   cuando en el original va a ras del contenedor por fuera y del gap de
   48px por dentro. */
.services-row .wp-block-media-text__content { padding: 0; }

.services-row .content-block__num {
	font-size: 14px; color: oklch(0.16 0.01 260); margin-bottom: 20px;
}
.services-row h2 {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: clamp(28px, 3.6vw, 52px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.05;
	margin: 0 0 24px;
	/* El título ahora viene del CPT servicio en minúscula-inicial (para
	   coincidir con Inicio) — antes iba en mayúsculas literales aquí; se
	   mantiene el mismo aspecto visual por CSS. */
	text-transform: uppercase;
}
.services-row p {
	font-size: 15px; line-height: 1.65; color: oklch(0.16 0.01 260 / .65);
	max-width: 420px; margin: 0 0 28px;
}
.services-row .wp-block-button.btn--primary,
.services-row a.btn--primary {
	border-color: oklch(0.16 0.02 250); color: oklch(0.16 0.02 250);
}

.services-row .wp-block-media-text__media img {
	aspect-ratio: 16/11; width: 100%; object-fit: cover; display: block; border-radius: 0;
}

/* El original coloca el texto a la izquierda y la imagen a la derecha (con
   borde) en las filas 01/03, y al revés en la 02 — justo lo opuesto de cómo
   sale por defecto aquí. WP fija cada lado con grid-column (no basta con
   `order`, que no gana a un grid-column explícito), así que se sobrescribe
   el propio grid-column para intercambiarlos, sin tocar el HTML. */
.services-row .wp-block-media-text:not(.has-media-on-the-right) .wp-block-media-text__media {
	grid-column: 2; border-left: 1px solid oklch(0.16 0.01 260 / .18); padding-left: 48px;
}
.services-row .wp-block-media-text:not(.has-media-on-the-right) .wp-block-media-text__content { grid-column: 1; }
.services-row .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
	grid-column: 1; border-right: 1px solid oklch(0.16 0.01 260 / .18); padding-right: 48px;
}
.services-row .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { grid-column: 2; }
@media (max-width: 1080px) {
	.services-row .wp-block-media-text__media { border: none !important; padding-left: 0 !important; padding-right: 0 !important; }
	/* El bloque nativo core/media-text solo se apila de forma nativa a partir
	   de 600px (su propio punto de ruptura, distinto al de todo el resto del
	   sitio), así que entre 601 y 1080px la imagen y el texto seguían uno al
	   lado del otro mientras el resto de la página ya estaba en "modo móvil".
	   Se fuerza aquí el mismo punto de ruptura de 1080px que usa el resto del
	   sitio; en el original, en las tres filas el texto va arriba y la imagen
	   debajo al apilarse. */
	.services-row .wp-block-media-text,
	.services-row .wp-block-media-text.has-media-on-the-right {
		grid-template-columns: 100% !important;
	}
	.services-row .wp-block-media-text__content { grid-column: 1 !important; grid-row: 1 !important; }
	.services-row .wp-block-media-text__media { grid-column: 1 !important; grid-row: 2 !important; }
}

/* Variante de dos columnas (nº+título a la izquierda, cuerpo a la derecha) —
   usada por t_content_block(). El resto de usos de .content-block (trío/dúo de
   columnas ya construidas por t_columns) no llevan esta clase y quedan a ancho completo. */
.content-block--split {
	display: grid; grid-template-columns: 0.55fr 1.45fr; gap: 56px; align-items: start;
}
.content-block--split .content-block__head .wp-block-heading { margin: 0; }
/* Al envolver .content-block__head/__body en bloques group reales (validación
   del editor), .content-block__body pasa a ser el 2º hijo de .content-block--split
   (que ya es is-layout-flow) y gana margin-block-start:24px por defecto — eso
   desplaza el cuerpo hacia abajo dentro de su celda de la rejilla (head y body
   van en columnas, no en filas). Antes quedaba a ras (align-items:start) — se
   restaura aquí. */
.content-block--split > .content-block__body { margin-block-start: 0; }
@media (max-width: 1080px) {
	.content-block--split { grid-template-columns: 1fr; gap: 24px; }
}

/* Página "Control y Seguridad Industrial": a estos 5 bloques numerados
   (debajo de la foto a ancho completo) nunca se les dio el margen lateral
   de 48px que sí lleva el resto de la página (hero, imagen, etc.) — el
   texto llegaba literalmente al borde de la ventana. Solo esta página. */
.service1-info-block { max-width: 1440px; margin-inline: auto; padding-inline: 48px; box-sizing: border-box; }
@media (max-width: 1080px) { .service1-info-block { padding-inline: 20px; } }
/* Mismo fallo, mismo arreglo, en las otras dos páginas de servicio individual
   (Control Operacional y Respuesta Técnica). */
.service2-info-block,
.service3-info-block {
	max-width: 1440px; margin-inline: auto;
	padding-inline: 48px; box-sizing: border-box;
}
@media (max-width: 1080px) {
	.service2-info-block,
	.service3-info-block { padding-inline: 20px; }
}

/* "Medios materiales" (Control y Seguridad Industrial): en el original va a
   dos columnas (0.55fr título+texto / 1.45fr lista de iconos), no en una
   sola columna apilada como sale aquí por defecto. Solo esta sección. */
.medios-section {
	padding-block: 96px !important;
	display: grid;
	grid-template-columns: 0.55fr 1.45fr;
	column-gap: 56px; row-gap: 0;
	align-items: start;
}
/* El título y el párrafo van en su propio contenedor (una sola celda del
   grid) para que se apilen de forma natural (margen del título = 24px) en
   vez de repartirse en dos filas del propio grid, cuya altura se veía
   inflada por la lista de iconos (mucho más alta) al compartir esas filas. */
.medios-section__head { grid-column: 1; }
.medios-section p { max-width: 460px; opacity: .75; margin: 0; }
.medios-section .icon-list { grid-column: 2; }
@media (max-width: 1080px) {
	.medios-section {
		grid-template-columns: 1fr; row-gap: 24px; padding-block: 56px !important;
	}
	.medios-section__head,
	.medios-section .icon-list { grid-column: 1; }
}

/* Sección final "Ver todos los servicios" en las 3 páginas de servicio:
   sin padding vertical propio (72px en el original) y sin centrar de
   verdad el botón (text-align:center no centra el contenedor flex). */
.services-cta-final {
	padding-block: 72px !important;
	display: flex; justify-content: center;
}
@media (max-width: 1080px) { .services-cta-final { padding-block: 48px !important; } }

/* --- Patrón: lista con check ------------------------------------------*/
.check-list, .check-list li { list-style: none; margin: 0; padding: 0; }
.check-list { display: flex; flex-direction: column; }
.check-list li {
	position: relative; padding: 16px 0 16px 34px;
	border-top: 1px solid oklch(0.16 0.01 260 / .12);
	font-size: 14px; line-height: 1.6; color: oklch(0.16 0.01 260 / .72);
}
.wp-block-group[data-bg="ink"] .check-list li { border-top-color: oklch(0.98 0.01 90 / .2); color: oklch(0.98 0.01 90 / .85); }
/* Icono igual al del diseño original: un único SVG (círculo + check con el
   mismo trazo, 1.8), no un borde CSS más una marca diminuta encima como
   estaba, que salía desproporcionado (el check casi invisible dentro). */
.check-list li::before {
	content: ""; position: absolute; left: 0; top: 15px; width: 21px; height: 21px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8632a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'%3E%3C/circle%3E%3Cpath d='m8.5 12.2 2.4 2.4 4.6-4.9'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center; background-size: 21px 21px;
}
@media (min-width: 1081px) {
	.check-list.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 40px; }
	.check-list.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 40px; }
}

/* --- Migas de pan (Yoast) --------------------------------------------*/
.breadcrumb-bar {
	margin-top: var(--wp--custom--header-height, 84px);
	background: var(--wp--preset--color--ink);
	border-bottom: 1px solid oklch(0.98 0.01 90 / .08);
	padding-block: 14px;
	position: relative; z-index: 1;
}
.breadcrumb-bar > div > span { font-family: monospace; font-size: 13px; color: var(--wp--preset--color--paper); opacity: .45; }
.breadcrumb-bar a { color: inherit; }
.breadcrumb-bar a:hover { opacity: .85; }
.breadcrumb-bar .breadcrumb_last { font-weight: 500; opacity: .85; color: var(--wp--preset--color--paper); }

/* --- Hero simple (nativo) — usado en la mayoría de páginas interiores */
/* Textos siempre literales oklch(0.98 0.01 90), no la variable --paper
   (oklch(0.98 0.004 90), pensada para fondos, no para texto sobre oscuro). */
/* Este hero se usa en casi todas las páginas del sitio, algunas con columnas
   en % (65/35) o un h1 sin max-width propio, así que aquí NO se puede quitar
   el max-width:1440 de la propia caja (como en .contact-person/.cae-closing)
   sin ensanchar también el contenido/columnas. El fondo (y el borde superior,
   para que quede a ras del mismo borde) viven en un ::before a 100vw, igual
   que en .banner-aquacot, para llegar de lado a lado sin tocar el contenido,
   que sigue centrado y a ras de los 1440px de siempre.
   El pequeño sobrante horizontal que este ::before a 100vw genera en
   navegadores con scrollbar clásica se recorta en body (ver comentario ahí
   arriba), no aquí: un overflow-x:hidden puesto en este propio elemento
   recortaría el fondo entero a su caja de 1440px en vez de solo ese
   sobrante, y rompería el efecto de sangre completa a partir de 1440px de
   ventana. */
.hero-simple {
	position: relative;
	background: none;
	color: oklch(0.98 0.01 90);
	padding-block: 150px 72px;
}
.hero-simple::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--wp--preset--color--ink);
	border-top: 1px solid oklch(0.98 0.01 90 / .15);
	z-index: -1;
}
.hero-simple .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--wp--preset--color--accent); text-transform: uppercase; display: block; }
.hero-simple h1 { font-size: clamp(36px, 6vw, 88px); line-height: .98; margin: 24px 0 32px; }
.hero-simple p { max-width: 620px; font-size: 16px; line-height: 1.6; opacity: .75; margin: 0; }
@media (max-width: 1080px) { .hero-simple { padding-block: 108px 48px; } }

/* Hero de las páginas de servicio individual (Control y Seguridad Industrial,
   Control Operacional, Respuesta Técnica): título más pequeño y sin margen
   propio que el hero-simple genérico (que usa Servicios índice, Certificaciones,
   etc.), y padding-bottom distinto (80px, no 72px). */
.hero-service.hero-simple { padding-block: 150px 80px; }
.hero-service h1 {
	font-size: clamp(34px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -0.015em;
	margin: 0; max-width: 900px;
}
@media (max-width: 1080px) { .hero-service.hero-simple { padding-block: 108px 48px; } }
/* Solo "Control y Seguridad Industrial" lleva además el párrafo a la derecha,
   separado por una línea vertical — las otras dos páginas no tienen ese texto. */
.hero-service--split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
/* La línea divisoria va en su propio contenedor, que ocupa toda la altura de
   la fila (como el título) y solo empuja el texto hacia abajo por dentro —
   antes el borde iba pegado al párrafo, que al alinearse al final por su
   cuenta dejaba la línea corta, sin llegar arriba del todo como en el original. */
.hero-service__lead-col {
	display: flex; flex-direction: column; justify-content: flex-end;
	border-left: 1px solid oklch(0.98 0.01 90 / .15); padding-left: 56px;
}
.hero-service__lead {
	max-width: 560px; font-size: 16px; line-height: 1.65; opacity: .8; margin: 0;
}
@media (max-width: 1080px) {
	.hero-service--split { grid-template-columns: 1fr; gap: 32px; }
	.hero-service__lead-col { border-left: none; padding-left: 0; }
}

/* El original pone el fondo a sangre completa y solo el contenido a
   max-width:1080px centrado (como en el CTA de la Home) — aquí no hay un div
   interior separado, así que se aproxima el mismo resultado con padding en
   vez de max-width, para no recortar también el fondo. */
.section-lead {
	background: var(--wp--preset--color--paper-alt); text-align: center; padding-block: 80px;
	padding-inline: max(48px, calc((100% - 1080px) / 2));
	box-sizing: border-box;
	display: flex; flex-direction: column; align-items: center; gap: 28px;
}
.section-lead h2 { font-size: clamp(26px, 3.4vw, 46px); line-height: 1.08; margin: 0; text-wrap: balance; }
.section-lead p { font-size: 15.5px; line-height: 1.7; color: oklch(0.16 0.01 260 / .7); margin: 0 auto; max-width: 820px; }
@media (max-width: 1080px) { .section-lead { padding-block: 48px; padding-inline: 20px; } }

.section-cta { background: var(--wp--preset--color--paper-alt); text-align: center; padding-block: 90px; }
.section-cta h2 { font-size: clamp(21px, 2.3vw, 30px); line-height: 1.15; margin: 0 0 28px; }
/* text-align:center no centra el propio contenedor flex del botón, solo el
   texto dentro de él — hay que centrar el wrapper explícitamente. */
.section-cta .wp-block-buttons { justify-content: center; }
@media (max-width: 1080px) { .section-cta { padding-block: 56px; } }

.section-full-image img { width: 100%; aspect-ratio: 21/8; max-height: 765px; object-fit: cover; display: block; }
@media (max-width: 1080px) { .section-full-image img { aspect-ratio: 3/2; } }

/* El diseño original fija el vídeo de portada con aspect-ratio (21/9 desktop, 4/5 móvil),
   no con min-height:60vh (que depende de la altura de ventana, no del ancho). */
/* WP añade margin-block-start:24px por defecto a todo bloque dentro de un
   contenedor is-layout-flow (:root :where(.is-layout-flow) > *). El original
   no tiene separación entre el hero y el vídeo — van pegados. */
.home-video-cover { min-height: auto !important; aspect-ratio: 21/9 !important; position: relative; margin-block-start: 0 !important; }
.home-video-cover .wp-block-cover__video-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1080px) { .home-video-cover { aspect-ratio: 4/5 !important; } }

/* Mismo motivo que arriba: estas secciones también son hijas directas del
   flow y arrastran el margin-block-start:24px por defecto de WP. <main>
   arrastra ese mismo margen en TODAS las páginas — como la cabecera es fixed
   y no ocupa espacio en el flujo, ese margen empuja únicamente el contenido
   hacia abajo, dejando ver 24px de fondo blanco por defecto del navegador
   por encima del hero mientras la cabecera (transparente) sigue en la
   posición y=0 real. En el original las secciones van pegadas entre sí; el
   aire lo da el padding interno de cada una, no un margen externo. */
main.wp-block-group,
footer.wp-block-template-part,
.banner-aquacot,
.section-pad-top,
.radar-cta,
.equipos-teaser,
.cta-join,
.services-row,
.section-cta,
.section-lead,
.section-full-image,
.content-block,
.section-ink,
.services-cta-final {
	margin-block-start: 0 !important;
}
/* .services-stack sí lleva separación real frente al párrafo de intro
   (56px en el original, entre el texto y la línea de la primera tarjeta),
   así que en vez de anularla hay que forzarla con la misma prioridad que
   el margin-block-start:24px por defecto de WP, que si no la pisa. */
.services-stack { margin-block-start: 56px !important; }

/* Regla general: en vez de ir añadiendo cada clase nueva a la lista de
   arriba página a página, se anula aquí de una vez el margin-block-start:24px
   por defecto de WP para CUALQUIER bloque de primer nivel de cualquier
   página (misma causa, mismo arreglo, ya visto muchas veces). Se excluye
   explícitamente .services-stack, que es el único caso de toda la Home que
   sí necesita ese margen (56px, forzado arriba con la misma prioridad). */
.entry-content.wp-block-post-content > *:not(.services-stack) {
	margin-block-start: 0 !important;
}

/* --- Contact Form 7 — patrón subrayado (underline) -------------------*/
.aqua-form .wpcf7-form-control-wrap { display: block; }
.wpcf7-form.aqua-form p { margin: 0; }
.aqua-form label {
	font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	color: oklch(0.16 0.01 260 / .5); display: block; margin-bottom: 10px;
}
.aqua-form input[type="text"],
.aqua-form input[type="email"],
.aqua-form input[type="tel"],
.aqua-form textarea {
	width: 100%; border: none; border-bottom: 1px solid oklch(0.16 0.01 260 / .3);
	background: transparent; padding: 8px 0; font-size: 15px; box-sizing: border-box;
	outline: none; font-family: inherit;
}
.aqua-form textarea { resize: vertical; }
/* Campo "Currículum": el input[type=file] nativo del navegador (botón
   "Elegir archivo") se sustituye visualmente por la misma fila subrayada
   que el resto de campos, con el nombre del archivo a la izquierda y
   "Adjuntar" en naranja a la derecha — igual que en el original, donde es
   un div clicable, no un input de archivo nativo. */
.aqua-form .wpcf7-form-control-wrap[data-name="cv"] {
	position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
	width: 100%; border-bottom: 1px solid oklch(0.16 0.01 260 / .3); padding: 8px 0;
	font-size: 15px; box-sizing: border-box; cursor: pointer;
}
.aqua-form .wpcf7-form-control-wrap[data-name="cv"]::before {
	content: attr(data-filelabel); color: oklch(0.16 0.01 260 / .4);
}
.aqua-form .wpcf7-form-control-wrap[data-name="cv"].has-file::before { color: inherit; }
.aqua-form .wpcf7-form-control-wrap[data-name="cv"]::after {
	content: "Adjuntar"; font-size: 11px; font-weight: 600; letter-spacing: .06em;
	text-transform: uppercase; color: var(--wp--preset--color--accent); flex-shrink: 0;
}
.aqua-form .wpcf7-form-control-wrap[data-name="cv"] input[type="file"] {
	position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; padding: 0;
}
/* El original pone el gap:24px en el propio <form> (display:flex;
   flex-direction:column), separando TODOS sus hijos directos por igual.
   Con margin-bottom en los <p>/.aqua-form__field, el div .aqua-form__row
   (Nombre+Empresa) se quedaba sin ese margen — no es un <p> ni lleva esa
   clase — y el campo Email quedaba pegado justo debajo. */
.aqua-form { display: flex; flex-direction: column; gap: 24px; }
.aqua-form .aqua-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 1080px) { .aqua-form .aqua-form__row { grid-template-columns: 1fr; } }
.aqua-form input[type="submit"] {
	display: inline-flex; align-items: center; gap: 16px;
	border: 2px solid var(--wp--preset--color--ink); border-radius: 2px;
	padding: 9px 7px 9px 16px; font-size: 14px; font-weight: 600;
	font-family: var(--wp--preset--font-family--montserrat);
	background: none; color: var(--wp--preset--color--ink); margin-top: 8px; cursor: pointer;
}
.aqua-form input[type="submit"]:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
@media (max-width: 1080px) { .aqua-form input[type="submit"] { padding: 13px 12px 13px 20px; } }

.content-block__note {
	border-top: 1px solid oklch(0.16 0.01 260 / .14); border-bottom: 1px solid oklch(0.16 0.01 260 / .14);
	padding-block: 18px; font-size: 14px; line-height: 1.6; color: oklch(0.16 0.01 260 / .72); max-width: 660px;
}
/* .content-block__note es el único texto de content-block--split que nunca
   tuvo un margin propio (usaba el 1em por defecto del navegador). Al envolver
   .content-block__body en un bloque group real, WordPress resetea a 0 el
   margen del último hijo — se restaura aquí cuando este es el último. */
.content-block__body > .content-block__note:last-child { margin-block-end: 1em; }
.content-block__lead {
	font-size: 15.5px; line-height: 1.7; font-weight: 600; color: oklch(0.16 0.01 260 / .85); max-width: 660px;
}
/* Texto normal de los bloques de servicio (todos menos el primero, que lleva
   .content-block__lead): mismo tamaño pero más tenue (0.7 en vez de 0.85). */
.content-block__text {
	font-size: 15.5px; line-height: 1.7; font-weight: 600; color: oklch(0.16 0.01 260 / .7); max-width: 660px; margin: 0;
}
.content-block__text--with-note { margin-bottom: 28px; }
/* Título de cada bloque numerado (nunca tuvo tamaño propio, caía en el h3
   por defecto del tema). */
.content-block__head h3,
.content-block__head .wp-block-heading {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: clamp(21px, 2.3vw, 30px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.15;
	margin: 0;
}
.wp-block-group[data-bg="ink"] .content-block__note { border-color: oklch(0.98 0.01 90 / .2); color: oklch(0.98 0.01 90 / .85); }
/* Mismo motivo que en el hero: color de texto literal sobre fondo oscuro
   (0.01 de croma), no la variable --paper (0.004, pensada para fondos). Solo
   afecta a .section-ink, usada únicamente en las páginas de servicio. */
.wp-block-group.section-ink { color: oklch(0.98 0.01 90) !important; }
.section-ink h3,
.section-ink .wp-block-heading {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: clamp(24px, 2.8vw, 38px); font-weight: 800; letter-spacing: -0.015em; line-height: 1.1;
	margin: 0 0 24px;
}
/* Servicio "Control Operacional": esta sección solo lleva el título centrado
   (sin párrafo detrás), con un tamaño literal propio distinto al de
   "Medios materiales" (clamp más grande) y sin margen inferior. */
.actuar-equipos-section h3,
.actuar-equipos-section .wp-block-heading {
	font-size: clamp(26px, 3.6vw, 48px); text-wrap: balance; margin: 0;
}

/* =========================================================================
   Servicio "Respuesta Técnica" — patrones que solo aparecen aquí
   ========================================================================= */
/* 03/04/05 y 08/09: columnas en bruto (wp:columns) sin la línea divisoria ni
   el tamaño de título propio del original — ambos bloques comparten
   exactamente los mismos valores (32px de separación, borde entre columnas,
   título más pequeño que el de .content-block__head). */
.rt-cols .wp-block-column {
	padding-left: 32px; padding-right: 32px;
	border-left: 1px solid oklch(0.16 0.01 260 / .16);
	box-sizing: border-box;
}
.rt-cols .wp-block-column:first-child { padding-left: 0; border-left: none; }
.rt-cols .wp-block-column:last-child { padding-right: 0; }
.rt-cols h3,
.rt-cols .wp-block-heading {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: clamp(20px, 2.1vw, 27px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.15;
	margin: 0 0 18px;
}
@media (max-width: 1240px) {
	.rt-cols .wp-block-column { padding-left: 20px; padding-right: 20px; }
	.rt-cols .wp-block-column:first-child { padding-left: 0; }
	.rt-cols .wp-block-column:last-child { padding-right: 0; }
}
@media (max-width: 1080px) {
	.rt-cols .wp-block-column { padding-left: 0; padding-right: 0; border-left: none; }
}

/* 07 "Servicio de mantenimiento industrial": ahora pasa por t_content_block()
   igual que 01/02/06 (número+título a la izquierda, contenido a la derecha
   en grid 0.55fr/1.45fr) — antes iba todo en una sola columna plana, sin
   ningún parecido al original. El tamaño del título ya lo da
   .content-block__head h3, solo falta el estilo de la cita destacada. */
.rt-industrial-maintenance .wp-block-quote {
	border: none; padding: 0; margin: 0 0 28px;
}
.rt-industrial-maintenance .wp-block-quote p {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: clamp(18px, 1.9vw, 24px); font-weight: 700; line-height: 1.45;
	color: oklch(0.16 0.01 260); max-width: 700px; margin: 0;
}

/* 02 "Funciones...": el título de cada columna (encima de cada lista de
   checks) iba como <strong> dentro de un párrafo normal; el original usa un
   texto pequeño en Montserrat/negrita propio, no el tamaño del párrafo. */
.functions-group-title {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 13px; font-weight: 700; letter-spacing: .01em;
	color: oklch(0.16 0.01 260); margin: 0 0 16px;
}

/* 06 y 07 (segundo párrafo): el texto descriptivo no tenía ancho máximo y se
   estiraba a todo lo ancho de la columna en vez de ir acotado a 660px. */
.tank-check-body { font-size: 15.5px; line-height: 1.7; color: oklch(0.16 0.01 260 / .7); max-width: 660px; margin: 0; }
@media (max-width: 1080px) { .tank-check-body { font-size: 15px; } }

/* 10 "Mantenimiento de planta": mismo patrón que "Medios materiales" en
   Control y Seguridad Industrial — título a la izquierda, lista a la
   derecha, en vez de todo apilado en una columna. */
.plant-maintenance-section {
	padding-block: 96px !important;
	display: grid;
	grid-template-columns: 0.55fr 1.45fr;
	column-gap: 56px; row-gap: 0;
	align-items: start;
}
.plant-maintenance-section__head { grid-column: 1; }
.plant-maintenance-section .check-list { grid-column: 2; }
@media (max-width: 1080px) {
	.plant-maintenance-section {
		grid-template-columns: 1fr; row-gap: 24px; padding-block: 56px !important;
	}
	.plant-maintenance-section__head,
	.plant-maintenance-section .check-list { grid-column: 1; }
}

/* --- Variantes de sección adicionales -----------------------------------*/
.section-accent { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink); padding-block: clamp(56px, 8vw, 90px); }
.section-accent h2 { color: var(--wp--preset--color--ink); }

/* Coordinación de actividades: el título y el logo CotApp van en fila (no
   apilados como sale por defecto en un wp:group de flujo normal), centrados
   verticalmente y con el logo pegado a la derecha. */
.hero-simple--split {
	display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
	padding-block: 150px 80px;
}
.hero-simple--split h1 {
	max-width: 900px; margin: 0;
	font-size: clamp(34px, 5.4vw, 72px); font-weight: 800; letter-spacing: -0.015em; line-height: 1.02;
}

/* Bloques numerados 01/02 de esta página: sin has-container (t_content_block
   no lo añade por defecto), les faltaba el margen lateral de 48px/20px que
   sí tiene el resto de secciones de la página, y también el max-width:1440
   de .container — sin él, el contenido se estira a todo el ancho de la
   pantalla en monitores grandes en vez de quedar en la misma caja de 1440px
   que el resto de secciones. */
.cae-info-block { max-width: 1440px; margin-inline: auto; padding-inline: 48px; box-sizing: border-box; border-top: none; }
@media (max-width: 1080px) { .cae-info-block { padding-inline: 20px; } }
/* Bloque 01 (Módulos AquaCot): lleva línea divisoria ABAJO, no arriba como el
   resto de .content-block del sitio — el bloque 02 (CotApp) no lleva ninguna. */
.cae-block-01 { border-bottom: 1px solid oklch(0.16 0.01 260 / .18); }

/* Bloque 02 (CotApp): construido a mano (no via t_content_block), así que el
   título y el párrafo no heredaban ningún tamaño propio (salían al tamaño
   por defecto del navegador, ~18.7px/16px en vez de hasta 30px/14px). */
.cae-cotapp-heading {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: clamp(21px, 2.3vw, 30px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; margin: 0;
}
.cae-cotapp-lead { font-size: 14px; line-height: 1.6; color: oklch(0.16 0.01 260 / .72); margin: 18px 0 0; }
@media (max-width: 1080px) { .hero-simple--split { padding-block: 108px 48px; } }
.cotapp-hero-logo img { height: 128px; width: auto; }
@media (max-width: 1080px) { .cotapp-hero-logo, .cotapp-hero-logo img { display: none; } }

/* CotApp: pasos de identificación/validación/registro — icono y tipografía
   más grandes que el resto de listas con icono (icon-list--row genérica),
   solo en este bloque de esta página. */
.cae-cotapp-steps .icon-list__item {
	grid-template-columns: 40px 1fr; gap: 18px; padding: 22px 0; align-items: center;
}
.cae-cotapp-steps .icon-list__icon { padding-top: 0; }
.cae-cotapp-steps .icon-list__text { font-size: 16px; line-height: 1.55; color: oklch(0.16 0.01 260 / .8); }

/* Sección naranja de cierre "AquaCot y CotApp trabajan juntas...": padding
   propio (110px/64px, no el clamp genérico de .section-accent) y el párrafo
   centrado a 720px con su propio tamaño/peso/opacidad — sin estas reglas
   salía a ancho completo, 16px/400/negro sólido. */
/* El original mete el contenido en un div interior max-width:1080px (con
   box-sizing:border-box y 48px de padding ya DENTRO de ese 1080), o sea que
   el contenido en sí mide 1080-96=984px — pero el FONDO naranja ocupa todo
   el ancho de la pantalla, de lado a lado.
   El max-width:984px va en el propio heading (hijo), no como padding-inline
   calculado sobre la caja exterior. Y esa caja exterior necesita además
   max-width:none: .cae-closing también lleva has-container/container
   (max-width:1440 fijo de .container), que por un lado descuadraba el
   padding calculado contra el 100% del padre (sin límite) en resoluciones
   altas —el contenido colapsaba a 0— y por otro topaba el fondo a 1440px en
   vez de llegar a los bordes reales de la pantalla. Con max-width:none en
   la caja y max-width:984px en el heading, el fondo es full-bleed y el
   contenido se centra a 984px de forma estable a cualquier resolución. */
.cae-closing { max-width: none; padding-block: 110px; box-sizing: border-box; }
.cae-closing-heading {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: clamp(26px, 3.6vw, 48px); font-weight: 800; letter-spacing: -0.015em; line-height: 1.1; margin: 0 auto;
	max-width: 984px;
}
.cae-closing p {
	max-width: 720px; margin: 28px auto 0; font-size: 15px; line-height: 1.7;
	font-weight: 500; color: oklch(0.14 0.02 250 / .85);
}
@media (max-width: 1080px) { .cae-closing { padding-block: 64px; } }

/* Contacto responsable AquaCot: el título va en mayúsculas, el botón
   "Contactar" centrado (text-align:center no centra el flex de .wp-block-buttons),
   el contenido a 624px como con .cae-closing arriba, y el fondo negro
   (#0F0F0F, no el tono azulado de --ink que comparte cabecera/pie) llega de
   lado a lado de la pantalla. También el padding vertical propio (90px/48px,
   no el que traía por defecto).
   El max-width:624px va en los hijos (h2/intro) y la propia caja lleva
   max-width:none: el elemento también lleva has-container/container
   (max-width:1440 fijo de .container), que por un lado descuadraba un
   padding-inline calculado contra el 100% del padre (sin límite) en
   resoluciones altas —el contenido colapsaba a 0— y por otro topaba el
   fondo a 1440px en vez de llegar a los bordes reales de la pantalla. */
.contact-person {
	max-width: none;
	background: #0F0F0F !important;
	padding-block: 90px;
	box-sizing: border-box;
}
@media (max-width: 1080px) { .contact-person { padding-block: 48px; } }
.contact-person .wp-block-heading { text-transform: uppercase; max-width: 500px; margin-left: auto; margin-right: auto; }
.contact-person__intro { font-size: 15px; line-height: 1.6; color: oklch(0.98 0.01 90 / .7); margin: 16px auto 40px; max-width: 624px; }
.contact-person .wp-block-buttons { justify-content: center; }
.contact-person .wp-block-button__link { padding: 11px 22px 11px 25px; }

/* El banner AquaCot usa un tono de fondo ligeramente distinto (ink-2), un
   contenedor de 1440px (igual que el resto del sitio), y NO son dos columnas
   iguales: el texto crece (flex:1 1 420px, tope 900px) y el logo es de ancho
   fijo. Tal cual el diseño. */
.banner-aquacot.has-container { max-width: 1440px; }
/* El diseño usa un padding vertical propio (147px/86px), mayor que el genérico de
   [data-bg] (clamp hasta 100px), porque este banner es más "aireado" que el resto. */
.banner-aquacot[data-bg] { padding-block: 147px; }
@media (max-width: 1080px) { .banner-aquacot[data-bg] { padding-block: 86px; } }
/* El fondo oscuro vive en un ::before a 100vw (no en el propio elemento, que
   está limitado por .container a max-width:1440px) para que llegue de lado a
   lado en monitores grandes, con el contenido siempre centrado y a ras del
   ancho de 1440px por encima.
   El pequeño sobrante horizontal que este ::before a 100vw genera en
   navegadores con scrollbar clásica se recorta en body (ver comentario ahí
   arriba), no aquí: un overflow-x:hidden puesto en este propio elemento
   recortaría el fondo entero a su caja de 1440px en vez de solo ese
   sobrante, y rompería el efecto de sangre completa a partir de 1440px de
   ventana. */
.banner-aquacot[data-bg="ink"] {
	position: relative;
	background: none !important;
}
.banner-aquacot[data-bg="ink"]::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--wp--preset--color--ink-2);
	z-index: -1;
}
.banner-aquacot__row {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px;
}
.banner-aquacot__text { display: flex; flex-direction: column; gap: 16px; flex: 1 1 420px; min-width: 0; max-width: 900px; }
.banner-aquacot__title { font-size: clamp(22px, 2.8vw, 36px); line-height: 1.2; margin: 0; }
.banner-aquacot__text p { font-size: clamp(14px, 1.6vw, 16px); line-height: 1.6; margin: 0; }
.cotapp-banner-logo { flex-shrink: 0; margin: 0; }
.cotapp-banner-logo img { height: auto; width: min(340px, 50vw); max-width: 100%; }

/* Títulos de sección "grandes" (SERVICIOS, EQUIPOS PROFESIONALES en home, PRINCIPIOS…) */
.section-title-xl { font-size: clamp(32px, 5vw, 72px); margin: 0 0 20px; }
.section-title-lead { max-width: 520px; font-size: 16px; line-height: 1.6; color: oklch(0.16 0.01 260 / .65); margin: 0; }

/* "¿Quieres formar parte de nuestro equipo?" (home). El original aplica el padding y el
   fondo naranja a la sección a ancho completo (100vw) y solo el contenido interior se
   limita a max-width:800px centrado — no toda la sección, como hacía .container (1440px). */
.cta-title-md { font-size: clamp(28px, 4vw, 52px); line-height: 1.08; margin: 0 0 16px; }
.section-accent.cta-join { padding-block: 90px; padding-inline: 48px; }
.cta-join-inner { max-width: 800px; margin-inline: auto; }
/* El original usa aquí oklch(0.16 0.02 250) literal para título, texto y botón —
   un tono distinto de la variable --ink (0.14 0.02 250) que usan los fondos oscuros.
   El texto también lleva 85% de opacidad y peso 600, no el color/negrita por defecto. */
.cta-join-inner h2 { color: oklch(0.16 0.02 250); }
.cta-join-inner p { margin: 0; color: oklch(0.16 0.02 250 / .85); font-weight: 600; }
.cta-join-inner .wp-block-buttons { margin-top: 32px; justify-content: center; }
.cta-join-inner .wp-block-button.btn--primary,
.cta-join-inner a.btn--primary {
	border-color: oklch(0.16 0.02 250); color: oklch(0.16 0.02 250);
}
/* Igual que en el hero: sobre fondo naranja el hover del botón es blanco,
   no el naranja-acento por defecto de .btn--primary (se confundiría con el fondo). */
.cta-join-inner .wp-block-button.btn--primary:hover,
.cta-join-inner a.btn--primary:hover {
	border-color: #fff; color: #fff;
}
@media (max-width: 1080px) {
	.section-accent.cta-join { padding-block: 56px; padding-inline: 20px; }
}

.equipos-lead { max-width: 638px; font-size: 16px; line-height: 1.6; color: oklch(0.16 0.01 260 / .65); margin: 0; }

/* El original usa un grid a pantalla completa (max-width:1440px;margin:0 auto, SIN el
   gutter de 48px de .container) con padding fijo 80px 64px dentro de cada columna
   (equiposGridCols/equiposTopPad). Con el gutter de .container restando ancho a las
   columnas, "PROFESIONALES" no cabía a clamp(32px,5vw,80px) y se partía en 3 líneas. */
.equipos-teaser { max-width: 1440px; margin-inline: auto; }
/* El core/media-text centra verticalmente sus dos columnas por defecto
   (align-items:center), así que cuando la imagen es más alta que el texto,
   la columna de texto —y con ella la línea divisoria— queda más corta y no
   llega arriba/abajo como en el original (donde el grid usa stretch). */
.equipos-teaser .wp-block-media-text { align-items: stretch; }
.equipos-teaser .wp-block-media-text__content { padding: 80px 64px; border-left: 1px solid oklch(0.16 0.01 260 / .15); box-sizing: border-box; align-self: stretch; }
/* La imagen original no cubre la celda entera: va enmarcada (max-width:544px,
   aspect-ratio 4/5) con el mismo padding 80px 64px que el bloque de texto, dejando
   aire de fondo alrededor — no un "cover" a sangre completa. */
.equipos-teaser .wp-block-media-text__media {
	display: flex; justify-content: center; align-items: flex-start;
	padding: 80px 64px; box-sizing: border-box;
}
.equipos-teaser .wp-block-media-text__media img {
	width: 100%; max-width: 544px; aspect-ratio: 4/5; height: auto; object-fit: cover;
}
@media (max-width: 1080px) {
	.equipos-teaser .wp-block-media-text__content { padding: 48px 24px 40px; border-left: none; }
	.equipos-teaser .wp-block-media-text__media { padding: 48px 20px 40px; }
	.equipos-teaser .wp-block-media-text__media img { max-width: 100%; }
}

/* Ritmo vertical de sección genérico (sectionPadY del diseño: 120px desktop / 64px móvil) */
.section-pad-top { padding-top: 120px; }
@media (max-width: 1080px) { .section-pad-top { padding-top: 64px; } }
.section-pad-y { padding-block: clamp(48px, 7vw, 80px); }

.stat-item { margin-bottom: 32px; }
.stat-item:last-child { margin-bottom: 0; }

/* =========================================================================
   Página "La Empresa" (/la-empresa/) — prefijo le- */
.hero-simple p.le-hero-lead { max-width: 560px; }
/* El original reparte estas dos columnas con CSS Grid (gap restado antes de
   repartir el 1.3fr/0.7fr); el wp:columns nativo usa flexbox con
   flex-basis en %, que reparte el gap de otra forma y deja la columna del
   título ligeramente más ancha de lo debido. Se fuerza grid real aquí para
   que el reparto sea idéntico al original. */
.le-hero .wp-block-columns { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 48px; }
@media (max-width: 1080px) { .le-hero .wp-block-columns { display: block; } }
/* El original pone los dos años en columna, pegados a la línea divisoria de
   la derecha y anclados ABAJO (justify-content:flex-end), a la misma altura
   que el final del texto de la izquierda — no apilados desde arriba como
   sale por defecto en un wp:column de flujo normal. El flex va DIRECTAMENTE
   en la columna de la rejilla, igual que en el original.
   Además, WP pone min-width:0 en TODO .wp-block-column por defecto, lo que
   anula el ancho mínimo automático que el navegador calcularía a partir del
   contenido (aquí, la etiqueta con white-space:nowrap de "2016"); sin
   restaurarlo a auto, el 1.3fr/0.7fr se reparte "puro" y la columna de años
   sale más estrecha que en el original. */
.le-hero .wp-block-column:last-child {
	height: 100%; box-sizing: border-box; min-width: auto;
	display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 32px;
	border-left: 1px solid oklch(0.98 0.01 90 / .15); padding-left: 48px;
}
.le-hero .wp-block-column:last-child .stat-item { margin-bottom: 0; margin-block-start: 0; }
@media (max-width: 1080px) { .le-hero .wp-block-column:last-child { border-left: none; padding-left: 0; height: auto; } }

/* "01 / ORIGEN Y POSICIONAMIENTO": grid 0.6fr/1.4fr propio de esta página
   (no el 0.55/1.45 de .content-block--split), con su propio tamaño de
   número/título/párrafos — todos distintos de los patrones compartidos
   que usan las demás páginas. */
.le-origen { border-top: 1px solid oklch(0.16 0.01 260 / .18); padding-block: 100px; }
.le-origen-grid { display: grid; grid-template-columns: 0.6fr 1.4fr; gap: 48px; align-items: start; }
.le-origen-num {
	font-family: var(--wp--preset--font-family--montserrat); font-weight: 600; font-size: 14px;
	display: block; margin-bottom: 20px;
}
.le-origen-title {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: clamp(26px, 3vw, 42px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; margin: 0 0 24px;
}
.le-origen-grid__body { border-left: 1px solid oklch(0.16 0.01 260 / .18); padding-left: 48px; }
/* Igual que en .content-block--split: al envolver le-origen-grid__head/__body
   en bloques group reales, __body pasa a ser el 2º hijo de la rejilla
   (is-layout-flow) y gana margin-block-start:24px por defecto. Antes quedaba
   a ras (align-items:start) — se restaura aquí. */
.le-origen-grid > .le-origen-grid__body { margin-block-start: 0; }
.le-origen-lead { font-size: 17px; line-height: 1.7; color: oklch(0.16 0.01 260 / .75); max-width: 640px; margin: 0 0 24px; }
.le-origen-text { font-size: 15px; line-height: 1.65; color: oklch(0.16 0.01 260 / .6); max-width: 640px; margin: 0 0 20px; }
.le-origen-text--last { margin: 0; }
@media (max-width: 1080px) {
	.le-origen { padding-block: 56px; }
	.le-origen-grid { grid-template-columns: 1fr; gap: 24px; }
	.le-origen-grid__body { border-left: none; padding-left: 0; }
}

/* "PRINCIPIOS": intro (con su borde superior propio) separada de la rejilla
   de tarjetas, que en el original NO lleva el margen lateral de .container
   (48px) — solo el padding interno de cada tarjeta (40px) marca el borde. */
.le-principios-intro { border-top: 1px solid oklch(0.16 0.01 260 / .18); padding-block: 100px 0 !important; }
.le-principios-title { font-size: clamp(28px, 4vw, 56px); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 8px; }
.le-principios-lead { max-width: 560px; font-size: 15px; line-height: 1.6; color: oklch(0.16 0.01 260 / .6); margin: 0; }
.wp-block-group.le-principios-grid.is-layout-flow { max-width: 1440px; margin-inline: auto; margin-block-start: 56px !important; }
@media (max-width: 1080px) { .le-principios-intro { padding-block: 56px 0 !important; } }

/* CTA final de esta página: lleva un margen superior extra (100px/56px) que
   no tiene el mismo patrón .section-cta en el resto de páginas. */
.wp-block-group.section-cta.le-cta-gap { margin-block-start: 100px !important; }
@media (max-width: 1080px) { .wp-block-group.section-cta.le-cta-gap { margin-block-start: 56px !important; } }

.plain-list, .plain-list li { list-style: none; margin: 0; padding: 0; }
.plain-list { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.plain-list li { font-size: 14px; color: oklch(0.16 0.01 260 / .7); border-top: 1px solid oklch(0.16 0.01 260 / .12); padding-top: 10px; }

/* =========================================================================
   Página "Equipos Profesionales" (/equipos-profesionales/) — prefijo eqp-
   para no chocar con .equipos-lead/.equipos-teaser, que son del bloque
   "teaser" de esta misma sección pero en la Home (páginas distintas). */
.eqp-hero .wp-block-columns { gap: 48px; }
.eqp-hero p { max-width: 560px; }
.eqp-hero .wp-block-column:last-child {
	border-left: 1px solid oklch(0.98 0.01 90 / .15);
	padding-left: 48px;
	display: flex;
	align-items: flex-end;
}
.eqp-hero .wp-block-column:last-child img {
	width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; border-radius: 0;
}
@media (max-width: 1080px) {
	.eqp-hero .wp-block-column:last-child { display: none; }
}

.eqp-intro { border-top: 1px solid oklch(0.16 0.01 260 / .18); padding-block: 90px; }
.eqp-lead { max-width: 760px; font-size: 19px; line-height: 1.7; font-weight: 700; color: oklch(0.16 0.01 260); margin: 0; }
@media (max-width: 1080px) { .eqp-intro { padding-block: 56px; } }

.eqp-area-intro { border-top: 1px solid oklch(0.16 0.01 260 / .18); padding-block: 56px; }
.eqp-area-intro h2 {
	font-family: var(--wp--preset--font-family--raleway); font-size: clamp(26px, 3.2vw, 44px);
	font-weight: 800; letter-spacing: -0.01em; margin: 14px 0 20px; max-width: 820px;
}
.eqp-area-intro p { font-size: 15px; line-height: 1.65; color: oklch(0.16 0.01 260 / .65); max-width: 720px; margin: 0; }
@media (max-width: 1080px) { .eqp-area-intro { padding-block: 40px; } }

.eqp-cat {
	border-top: 1px solid oklch(0.16 0.01 260 / .18); padding-block: 56px;
	display: grid; grid-template-columns: 0.4fr 1.6fr; gap: 28px; align-items: start;
}
.eqp-cat__num { font-family: var(--wp--preset--font-family--montserrat); font-weight: 600; font-size: 14px; }
.eqp-cat__body { border-left: 1px solid oklch(0.16 0.01 260 / .18); padding-left: 28px; }
/* Igual que en .content-block--split / .le-origen-grid: al envolver
   eqp-cat__body en un bloque group real, pasa a ser el 2º hijo de .eqp-cat
   (rejilla, is-layout-flow) y gana margin-block-start:24px por defecto.
   Antes quedaba a ras (align-items:start) — se restaura aquí. */
.eqp-cat > .eqp-cat__body { margin-block-start: 0; }
.eqp-cat__body .wp-block-heading {
	font-family: var(--wp--preset--font-family--raleway); font-size: clamp(22px, 2.4vw, 32px);
	font-weight: 800; letter-spacing: -0.01em; margin: 0 0 20px;
}
@media (max-width: 1080px) { .eqp-cat { padding-block: 40px; grid-template-columns: 1fr; gap: 12px; } }

.eqp-cta .wp-block-button.btn--primary,
.eqp-cta a.btn--primary { border-color: oklch(0.16 0.01 260); color: oklch(0.16 0.01 260); }

/* Antes eran divs de texto de relleno (.cert-logo-placeholder, ya
   retirados); ahora es un bloque Galería (núcleo de WP) con la clase
   .cert-logo-grid, para poder ir añadiendo/quitando logos desde el editor
   (biblioteca de medios) según se vayan teniendo, en vez de un número fijo
   de bloques. La rejilla en sí (columnas/gap/ancho) es la misma de siempre;
   solo cambia el origen del contenido (imágenes reales en vez de HTML).
   El bloque Galería de WP trae su propio CSS de núcleo con reglas muy
   específicas —.wp-block-gallery.has-nested-images figure.wp-block-image
   llega a especificidad (0,3,1), y la variante :not(#individual-image) aún
   más alta por llevar un id dentro del :not()— además de la clase
   is-layout-flex que WordPress añade sola (con display:flex vía
   "body .is-layout-flex", especificidad (0,1,1), por encima de un simple
   .cert-logo-grid). Sin !important aquí, esas reglas del núcleo ganan y
   rompen la rejilla (se queda en flex con anchos al 50%, no en las 4
   columnas iguales). */
.cert-logo-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 32px; align-items: center; max-width: 1200px; margin-inline: auto; }
.cert-logo-grid .wp-block-image { margin: 0; width: auto !important; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; }
.cert-logo-grid .wp-block-image img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 1199px) { .cert-logo-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; } }
@media (max-width: 1080px) { .cert-logo-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; } }

.signature-date { font-size: 13px; letter-spacing: .04em; color: oklch(0.16 0.01 260 / .55); }

.contact-person img { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; margin: 24px auto; display: block; }
.contact-person__name { font-size: 17px; font-weight: 700; margin: 20px 0 0 !important; }
.contact-person__phone { font-size: 14px; color: oklch(0.98 0.01 90 / .6); margin: 4px 0 0 !important; }

.contact-info-row { border-top: 1px solid oklch(0.16 0.01 260 / .18); padding-block: 28px; }
.contact-info-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: oklch(0.16 0.01 260 / .5); margin-bottom: 10px; }
.contact-note { font-size: 13px; line-height: 1.6; color: oklch(0.16 0.01 260 / .5); margin-top: 20px !important; }

.equipos-sub { border-top: 1px solid oklch(0.16 0.01 260 / .15); margin-top: 28px; padding-top: 28px; }
/* Al envolver .equipos-sub en un bloque group real (para que el editor de WP
   valide el bloque media-text) sus hijos pasan a ser "> *" de is-layout-flow,
   que añade margin-block-start:24px por defecto. El espaciado original entre
   estos elementos es 16px — se restaura aquí. */
.equipos-sub > * { margin-block-start: 16px !important; }
.equipos-sub > *:first-child { margin-block-start: 0 !important; }

/* --- Utilidades varias -------------------------------------------------*/
.text-center { text-align: center; }
.u-eyebrow, .eyebrow {
	font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	color: var(--wp--preset--color--accent); display: block;
}
.stat-figure {
	font-family: var(--wp--preset--font-family--raleway); font-weight: 800; line-height: .85;
	color: var(--wp--preset--color--accent); font-size: clamp(70px, 10vw, 150px);
}
.stat-label {
	font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	opacity: .6; margin-top: 12px;
}
/* El original fuerza esta etiqueta en concreto a una sola línea; eso es lo
   que en realidad determina el ancho mínimo de la columna de los años en el
   hero de "La Empresa" (no el propio "2016"), y sin el nowrap el navegador
   podía encoger la etiqueta partiéndola en varias líneas, dejando la
   columna de los años más estrecha de lo debido. */
.stat-label--nowrap { white-space: nowrap; }

/* =========================================================================
   Página "Responsabilidad Social Corporativa" — prefijo rsc- */
/* Hero: mismo patrón que Equipos Profesionales (foto a la derecha, con
   línea divisoria, recorte 4:5 y alineada abajo), pero con su propio
   tamaño de título (80px máx., no 88) y ancho de párrafo (560px, no 620). */
.rsc-hero h1 { font-size: clamp(36px, 6vw, 80px); }
.rsc-hero p.rsc-hero-lead { max-width: 560px; }
.rsc-hero .wp-block-column:last-child {
	border-left: 1px solid oklch(0.98 0.01 90 / .15); padding-left: 48px;
	display: flex; align-items: flex-end;
}
.rsc-hero .wp-block-column:last-child img {
	width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; border-radius: 0;
}
@media (max-width: 1080px) { .rsc-hero .wp-block-column:last-child { display: none; } }

/* Bloques 01/02/03: grid 0.6fr/1.4fr propio (no el 0.55/1.45 compartido de
   .content-block--split), con su propio tamaño de número/título/párrafo. */
.rsc-block { border-top: 1px solid oklch(0.16 0.01 260 / .18); padding-block: 90px; }
.rsc-block__grid { display: grid; grid-template-columns: 0.6fr 1.4fr; gap: 48px; align-items: start; }
.rsc-block__num {
	font-family: var(--wp--preset--font-family--montserrat); font-weight: 600; font-size: 14px;
	display: block; margin-bottom: 20px;
}
.rsc-block__title {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: clamp(26px, 3.2vw, 44px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.08; margin: 0 0 24px;
}
.rsc-block__body { border-left: 1px solid oklch(0.16 0.01 260 / .18); padding-left: 48px; }
/* Igual que en .content-block--split / .le-origen-grid / .eqp-cat: al envolver
   rsc-block__body en un bloque group real, pasa a ser el 2º hijo de la
   rejilla (is-layout-flow) y gana margin-block-start:24px por defecto. Antes
   quedaba a ras (align-items:start) — se restaura aquí. */
.rsc-block__grid > .rsc-block__body { margin-block-start: 0; }
.rsc-block__text { font-size: 16px; line-height: 1.7; color: oklch(0.16 0.01 260 / .7); max-width: 600px; margin: 0; }
@media (max-width: 1080px) {
	.rsc-block { padding-block: 56px; }
	.rsc-block__grid { grid-template-columns: 1fr; gap: 24px; }
	.rsc-block__body { border-left: none; padding-left: 0; }
}

/* =========================================================================
   Página "Sistemas de Calidad" — prefijo sdc- */
/* Párrafo introductorio (cabecera gris): el original lo pone en negrita y a
   80% de opacidad, no el peso/opacidad por defecto que trae el patrón
   compartido .content-block__lead (600/85%). El tamaño y max-width de
   820px ya los da .section-lead p, así que solo hace falta lo que falta. */
.section-lead p.sdc-lead { font-weight: 700; color: oklch(0.16 0.01 260 / .8); }

/* "Compromisos": 5 columnas con divisores verticales — no es una lista
   vertical con check (.check-list), es una fila con icono+texto por
   celda, cada una con su propio padding lateral y borde izquierdo (salvo
   la primera). 5 columnas en escritorio, 3 en tablet (≤1240px, punto de
   corte propio de esta sección) y 1 en móvil (≤1080px, el general del
   sitio). */
.sdc-commitments { padding-block: 64px; }
.sdc-commitments__row {
	display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0;
	border-top: 1px solid oklch(0.16 0.01 260 / .16); padding-top: 24px;
}
.sdc-cell {
	display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-content: start;
	padding-inline: 24px; border-left: 1px solid oklch(0.16 0.01 260 / .16);
}
.sdc-cell:first-child { padding-left: 0; border-left: none; }
.sdc-cell:last-child { padding-right: 0; }
.sdc-cell__icon { display: flex; align-items: flex-start; color: var(--wp--preset--color--accent); padding-top: 2px; }
.sdc-cell__text { font-size: 14px; line-height: 1.6; color: oklch(0.16 0.01 260 / .72); }
@media (max-width: 1240px) {
	.sdc-commitments__row { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px 0; }
}
@media (max-width: 1080px) {
	.sdc-commitments { padding-block: 44px; }
	.sdc-commitments__row { grid-template-columns: 1fr; gap: 24px 0; }
	.sdc-cell { padding-inline: 0; border-left: none; }
}

/* Cierre ("Esta política proporciona..."): fondo a todo lo ancho (mismo
   truco que en otras páginas: padding-inline en vez de max-width, para no
   encoger también el fondo), contenido centrado a 984px (1080 con 48px de
   padding a cada lado, como en el original) y firma con su ancho propio. */
.sdc-closing { background: var(--wp--preset--color--paper-alt); color: oklch(0.16 0.01 260); text-align: center; padding-block: 110px; padding-inline: max(48px, calc((100% - 984px) / 2)); box-sizing: border-box; }
.sdc-closing__lead {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: clamp(19px, 2.1vw, 27px); font-weight: 700; line-height: 1.4; margin: 0;
}
.sdc-closing__date.signature-date { margin-top: 28px; }
.sdc-closing__signature { width: min(300px, 70vw); margin: 20px auto 0; }
/* Al envolver este div en un bloque group real (validación del editor) se
   perdió un salto de línea final que antes, como texto suelto dentro del
   contenedor, aportaba ~16px de alto extra al final de .sdc-closing. Se
   restaura aquí explícitamente. */
.sdc-closing__signature { margin-block-end: 16px !important; }
.sdc-closing__signature img { width: 100%; height: auto; display: block; }
@media (max-width: 1080px) { .sdc-closing { padding-block: 64px; } }

/* =========================================================================
   Página "Certificaciones" — prefijo cert- */
/* Texto de política: columna centrada a 900px (no 1080 como .section-lead),
   párrafos con su propio tamaño/peso/color y gap de 22px entre ellos (no
   28). Fondo igual que .section-lead (paper-alt), a todo lo ancho. */
.cert-policy {
	background: var(--wp--preset--color--paper-alt); padding-block: 80px;
	padding-inline: max(48px, calc((100% - 804px) / 2)); box-sizing: border-box;
	display: flex; flex-direction: column; gap: 22px;
}
.cert-policy__text { font-size: 16px; line-height: 1.75; font-weight: 500; color: oklch(0.16 0.01 260 / .82); margin: 0; }
@media (max-width: 1080px) { .cert-policy { padding-block: 48px; } .cert-policy__text { font-size: 15px; } }

/* Logos de certificados: le faltaba el padding vertical propio de esta
   sección (72px/48px) y el margen bajo la etiqueta "Sellos y certificados"
   (28px) — .cert-logo-grid ya limitaba el ancho a 1200px correctamente. */
.cert-logos { padding-block: 72px; }
.cert-logos__eyebrow { margin-bottom: 28px; }
@media (max-width: 1080px) { .cert-logos { padding-block: 48px; } }

/* Cierre con la firma: mismo patrón que en Sistemas de Calidad (fondo a
   todo lo ancho, contenido centrado a 984px, sin el párrafo previo que
   lleva esa otra página). */
.cert-closing { background: var(--wp--preset--color--paper-alt); color: oklch(0.16 0.01 260); text-align: center; padding-block: 110px; padding-inline: max(48px, calc((100% - 984px) / 2)); box-sizing: border-box; }
.cert-closing .signature-date { margin: 0; }
.cert-closing__signature { width: min(300px, 70vw); margin: 20px auto 0; }
/* Mismo caso que .sdc-closing__signature: al envolver este div en un bloque
   group real se pierde un salto de línea final que antes aportaba ~16px de
   alto extra al final de .cert-closing. Se restaura aquí explícitamente. */
.cert-closing__signature { margin-block-end: 16px !important; }
.cert-closing__signature img { width: 100%; height: auto; display: block; }
@media (max-width: 1080px) { .cert-closing { padding-block: 64px; } }

/* =========================================================================
   Página "Contacto" — prefijo contact- */
/* Hero: sin párrafo debajo del título, el padding inferior propio de esta
   página es 60px (no 72, el genérico de .hero-simple). */
.contact-hero.hero-simple { padding-bottom: 60px; }
@media (max-width: 1080px) { .contact-hero.hero-simple { padding-bottom: 48px; } }

/* Columna de info + formulario: 0.9fr/1.1fr (no 50/50). Grid real, no
   flexbox: con flex-basis en % el gap no se resta antes de repartir el
   ancho (mismo caso ya visto en el hero de La Empresa), dejando la
   proporción real en 43.3/56.7 en vez de 45/55. Con grid-template-columns
   y el mismo 1.3fr/0.7fr-equivalente (0.9fr/1.1fr) el reparto es exacto. */
/* A esta sección entera le faltaba la línea y el padding vertical de
   separación con el hero de encima (y con la sección siguiente). */
.contact-layout { border-top: 1px solid oklch(0.16 0.01 260 / .18); padding-block: 90px; }
@media (max-width: 1080px) { .contact-layout { padding-block: 56px; } }

/* Selector de hijo directo (>): sin esto, esta regla también capturaba la
   fila anidada de Teléfono/Email/Horario (otro .wp-block-columns más
   adentro) y la forzaba a una rejilla de 2 columnas, partiendo "Horario
   oficina" a una segunda fila en vez de ir la tercera columna. */
.contact-layout > .wp-block-columns { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; }
@media (max-width: 1080px) { .contact-layout > .wp-block-columns { display: block; } }
.contact-layout > .wp-block-columns > .wp-block-column:last-child {
	border-left: 1px solid oklch(0.16 0.01 260 / .18); padding-left: 48px;
}
@media (max-width: 1080px) { .contact-layout > .wp-block-columns > .wp-block-column:last-child { border-left: none; padding-left: 0; } }

/* Párrafo introductorio ("¿Tienes un proyecto...?"): su propio tamaño,
   ancho y separación con la fila de "Dirección" que va debajo. */
.contact-intro { font-size: 17px; line-height: 1.7; color: oklch(0.16 0.01 260); max-width: 640px; margin: 0 0 48px; font-weight: 400; }

/* Texto de las filas Dirección/Teléfono/Email/Horario: le faltaba el
   tamaño y el peso (negrita) que tienen en el original — salía con el
   párrafo/enlace por defecto del tema. */
.contact-info-row p, .contact-info-row a { font-size: 16px; line-height: 1.5; font-weight: 600; margin: 0; }

/* Fila Teléfono/Email/Horario: le faltaban los bordes (arriba Y abajo,
   la fila de Dirección solo lleva arriba) y el padding vertical. */
.contact-info-row--triple { border-bottom: 1px solid oklch(0.16 0.01 260 / .18); }
/* Grid real de 3 columnas iguales (repeat(3,1fr) en el original); con
   flexbox el "min-width:auto" que WP pone en .wp-block-column dejaba la
   columna de "Horario oficina" más ancha que las otras dos. */
.contact-info-row--triple .wp-block-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.contact-info-row--triple .wp-block-column { min-width: 0; }
@media (max-width: 1080px) { .contact-info-row--triple .wp-block-columns { display: block; } }

/* =========================================================================
   Página "Aviso Legal" — prefijo aviso-legal- */
/* Columna de texto a 820px (no los 1440 de .container), con su propio
   padding vertical asimétrico (80/100 desktop, 48/64 móvil) y separación
   de 24px entre bloques via flex+gap, como en el original. */
.aviso-legal {
	max-width: 820px;
	padding-top: 80px; padding-bottom: 100px;
	display: flex; flex-direction: column; gap: 24px;
}
/* Reinicia el margen que WordPress mete por defecto en los hijos de un
   bloque de flujo (is-layout-flow); con display:flex + gap ya sobra, y
   sumaría de más al margin-top propio de .aviso-legal__signature. */
.aviso-legal > * { margin-block-start: 0; }
@media (max-width: 1080px) { .aviso-legal { padding-top: 48px; padding-bottom: 64px; } }

.aviso-legal__text { font-size: 15.5px; line-height: 1.75; color: oklch(0.16 0.01 260 / .8); margin: 0; }
@media (max-width: 1080px) { .aviso-legal__text { font-size: 15px; } }

.aviso-legal ul { list-style: disc; margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.aviso-legal li { font-size: 15.5px; line-height: 1.65; color: oklch(0.16 0.01 260 / .75); }
@media (max-width: 1080px) { .aviso-legal li { font-size: 15px; } }

/* El bloque de la firma lleva 16px de margen EXTRA por encima del gap:24
   normal (24+16=40px de separación con el párrafo anterior). */
.aviso-legal__signature { margin-top: 16px; }
.aviso-legal__signature-img { width: min(220px, 60vw); margin-top: 16px; }
/* Mismo caso que .cert-closing__signature / .sdc-closing__signature: al
   envolver este div en un bloque group real se pierde un salto de línea
   final que antes aportaba ~16px de alto extra al final de
   .aviso-legal__signature. Se restaura aquí explícitamente. */
.aviso-legal__signature-img { margin-block-end: 16px !important; }
.aviso-legal__signature-img img { width: 100%; height: auto; display: block; }