/*
Theme Name:   Divi child
Theme URI:    https://www.elegantthemes.com/gallery/divi/
Description:  Tema hijo para Divi 
Author:       Visual Publinet
Author URI:   https://visualpublinet.com/
Template:     Divi
*/


/************ GLOBAL **********/
a {
	text-decoration: none !important;
}


.et_pb_section {
	background-color: transparent;
}

h2 {
	margin-bottom: 30px;
}


.wpcf7-form {
	text-align: center;
}

input[type=text],
input[type=email],
textarea {
	width: 100%;
	border: none;
	border-bottom: 1px solid #a3bbcd;
	max-width: 800px;
	padding: 18px;
	line-height: 16px;
}


input::placeholder,
textarea::placeholder {
	font-size: 18px;
}


input[type=submit] {
	padding: 15px 40px;
	background: #a3bbcd;
	font-size: 18px;
	color: #fff;
	cursor: pointer;
}


input[type=submit]:hover {
	background: #274d90;
}


.btn-big.et_pb_button {
	padding: 20px 80px;
}

.btn-big.et_pb_button:hover {
	padding: 20px 80px !important;
}


.galeria-proyectos img {
	border: 1px solid #f7f7f7;
}

@media (max-width: 1024px) {
	body .et_pb_section {
		padding-bottom: 40px !important;
	}

	body h2 {
		font-size: 32px !important;
	}

	body p {
		font-size: 16px !important;
	}

	body h3 {
		font-size: 22px !important;
	}

	.et_pb_column .et_pb_row_inner,
	.et_pb_row {
		padding: 10px 0 !important;
	}

	.et_pb_column .et_pb_blurb {
		padding: 10px 0px !important;
	}
}


body .et_pb_menu .et_mobile_nav_menu ul li a {
	color: #333342 !important
}



@media (max-width: 980px) {

	.et_pb_column_0,
	body .et_pb_slider .et_pb_slide_0.et_pb_slide .et_pb_slide_description .et_pb_slide_title {
		padding-top: 30% !important;
	}

	.et_pb_text_0 {
		font-size: 18px !important;
	}

	.et_pb_text_1 h1,
	.et_pb_text_0 h1 {
		font-size: 38px !important;
	}

	.et_pb_section_1.et_pb_section {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	.et_pb_section.cabecera:after {
		display: none !important;
	}

	body.page-id-425 .et_pb_section_2.et_pb_section {
		background-color: #f7f7f7 !important;
		margin-top: -20%;
	}
}


@media (max-width: 680px) {

	.et_pb_column_0,
	body .et_pb_slider .et_pb_slide_0.et_pb_slide .et_pb_slide_description .et_pb_slide_title {
		padding-top: 45% !important;
	}

	.et_pb_text_0 {
		font-size: 16px !important;
	}

	.et_pb_text_1 h1 {
		font-size: 32px !important;
	}
}


@media (max-width: 480px) {

	.et_pb_column_0,
	body .et_pb_slider .et_pb_slide_0.et_pb_slide .et_pb_slide_description .et_pb_slide_title {
		padding-top: 58% !important;
	}
}

/******** Noticia detalle: anular el padding-top % heredado de .et_pb_column_0 ********/
/* Las 3 reglas de arriba meten padding-top:30/45/58% a .et_pb_column_0 (genérico, 1ª
   columna de cualquier página) — pensado para el slider del home. En noticia detalle
   (single-post) esa columna es el CONTENIDO del post → el texto quedaba ~200px separado
   de la imagen principal. Lo neutralizamos SOLO aquí (más especificidad → gana en los 3
   breakpoints). No se toca la regla global para no afectar al resto del sitio. */
@media (max-width: 980px) {
	body.single-post .et_pb_column_0 {
		padding-top: 0 !important;
	}
}






/******** HEADER *********/

#header-transparent {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}


.et-l.et-l--header {
	position: absolute;
	left: 0;
	right: 0;
}


.et_pb_section.cabecera:after {
	content: "";
	display: inline-block;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 50px solid #f7f7f7;
	font-size: 0px;
	text-align: center;
	line-height: 0px;
	position: absolute;
	left: calc(50% - 50px);
}



@media (max-width: 1334px) {
	.et_pb_menu_0_tb_header.et_pb_menu ul li a {
		font-size: 16px !important;
	}

	.et_pb_fullwidth_menu .et-menu>li,
	.et_pb_menu .et-menu>li {
		padding-left: 6px;
		padding-right: 6px;
	}

}


/********* HOME **********/

.home .et_pb_slider.et_pb_module .et_pb_slide_0.et_pb_slide .et_pb_slide_description .et_pb_slide_content {
	padding-bottom: 40px;
}

.h3-subtitle {
	font-style: italic;
}



@media (max-width: 1024px) {
	.home .et_pb_section_1.et_pb_section {
		padding-top: 40px !important;
	}

	body .et_pb_slider .et_pb_slide_0.et_pb_slide .et_pb_slide_description .et_pb_slide_title {
		font-size: 40px !important;
	}

	body .et_pb_slider.et_pb_module .et_pb_slide_0.et_pb_slide .et_pb_slide_description .et_pb_slide_content {
		font-size: 18px !important;
	}

	body #page-container .et_pb_section .et_pb_fullwidth_slider_0.et_pb_slider .et_pb_more_button.et_pb_button {
		font-size: 16px !important;
	}

	.btn-big.et_pb_button {
		font-size: 16px !important;
	}

	body .et_pb_blog_0 .et_pb_post h3.entry-title,
	body .et_pb_blog_0 .not-found-title {
		font-size: 20px !important;
	}

	.home .et_pb_column_10 .et_pb_button_module_wrapper {
		margin-bottom: 30px !important;
	}
}



/******** EMPRESA *********/
#certificados .et_pb_gallery_title {
	display: none;
}


/********* PROYECTOS *********/
.single-project .et-l.et-l--header {
	position: relative;
}

.single-project .et_post_meta_wrapper img {
	width: 100%;
}

.single-project h1 {
	font-weight: 600;
	font-size: 36px;
	color: #0e1a2f !important;
}

.single-project article>img {
	width: 100%;
}

.single-project article .entry-content img {
	width: auto;
}


.et_main_title .et_project_categories {
	font-size: 15px;
	display: block;
}

.et_main_title .et_project_categories a {
	color: #9bbccf;
	font-weight: 600;
}

.et_full_width_portfolio_page .nav-single,
.et_project_meta {
	border-top: none;
}

.et_pb_filterable_portfolio .et_pb_portofolio_pagination,
.et_pb_gallery .et_pb_gallery_pagination {
	border-top: none;
}

.et_pb_portfolio_item .et_pb_module_header a,
.et_pb_portfolio_item h3 a,
.et_pb_post .entry-title a,
.et_pb_post h2 a {
	color: #0e1b30;
	font-size: 18px;
	line-height: 1.3em;
}


.gallery img {
	border: none !important;
	width: 100% !important;
}

.single-project .nav-single {
	margin-bottom: 60px;

}


.home .et_pb_main_blurb_image {
	min-height: 84px;
}


.project .entry-content {
	text-align: justify !important;
}




/********* NOTICIAS *********/
.single-post .et-l.et-l--header {
	position: relative;
}


.single-post .et_post_meta_wrapper img {
	width: 100%;
}

.single-post h1 {
	font-weight: 600;
	font-size: 36px;
	color: #0e1a2f !important;
}


.post-content .post-content-inner {
	text-align: justify;
}

.et_pb_post .entry-content {
	text-align: justify;
}






/******** FOOTER ********/

footer a {
	color: #fff;
}

button#catapultCookieAceptar {
	margin-left: 20px;
	cursor: pointer
}

@media (max-width: 1024px) {
	body footer p {
		font-size: 12px !important;
	}
}

@media (max-width: 980px) {
	footer .et_pb_social_media_follow {
		text-align: left;
	}
}

#cmplz-document,
.editor-styles-wrapper .cmplz-unlinked-mode {
	max-width: 100% !important;
}


/******** HEADER COMPACTO (resize) ********/
/* Logo unificado a 70px (= tamaño sticky): antes el no-sticky era 90px y al hacer scroll
   bajaba a 70 (regla sticky línea ~569). Se quita ese "salto" igualando el no-sticky al
   sticky. Aplica en todos los breakpoints. */
.et-l--header .et_pb_menu__logo-wrap img {
	max-height: 70px;
	width: auto !important;
}

/* Tipografía de los links del menú más pequeña: 22px -> 16px
   (mismo selector que Divi + !important para ganar especificidad) */
.et_pb_menu_0_tb_header.et_pb_menu ul li a {
	font-size: 16px !important;
}

/* Links pegados al borde derecho */
.et-l--header .et_pb_menu__menu {
	margin-left: auto !important;
	justify-content: flex-end;
}


/******** HEADER STICKY (transparente, texto legible con sombra) ********/
/* Header fijo: el contenido de la página pasa por detrás (sin fondo propio) */
#header-transparent,
.et-l--header {
	position: fixed !important;
	top: 0 !important;
	left: 0;
	right: 0;
	z-index: 99999;
}

/* Transiciones suaves para el cambio transparente -> blanco */
.et-l--header .et_pb_section {
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.et_pb_menu_0_tb_header .et-menu li a {
	transition: color 0.25s ease;
}

/* Estado scrolleado (sticky): fondo blanco + links oscuros (sin sombra) */
body.et-header-stuck .et-l--header .et_pb_section {
	background-color: #fff !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
}

body.et-header-stuck .et_pb_menu_0_tb_header .et-menu li a {
	color: #0e1a2f !important;
}

/* Icono del menú móvil legible sobre el blanco */
body.et-header-stuck .et_pb_menu_0_tb_header .mobile_menu_bar:before {
	color: #0e1a2f !important;
}


/******** DETALLE PROYECTO / NOTICIA ********/
/* Imagen destacada en detalle: completa (sin recorte) y sin necesidad de scroll.
   object-position:left → al ir en object-fit:contain, la imagen pintada se pega
   al borde IZQUIERDO de su caja (que arranca en el padding del header,
   (100vw-1540)/2), en vez de quedar centrada con hueco a la izquierda. */
.et_pb_title_featured_container img {
	width: 100%;
	height: auto;
	max-height: calc(100vh - 230px);
	object-fit: contain;
	object-position: left center;
}

/* Noticia en detalle: sidebar más pegado a la derecha y más ancho para el artículo */
.artabra-news-sidebar {
	padding-left: 0;
}

@media (min-width: 981px) {
	.artabra-news-sidebar {
		margin-left: 0;
	}
}


/******** GRILLA DE NOTICIAS: tarjetas de igual altura ********/
/* Título: reserva espacio de 3 líneas y recorta si excede */
/* Divi pisaba el `display` a flow-root → -webkit-line-clamp quedaba inerte y, sin
   tope de altura, la caja crecía a ~2,5 líneas (asomaba el pico de la 3ª). Forzamos
   -webkit-box con prefijo `body` + !important para que el clamp funcione, y fijamos
   max-height al alto EXACTO de 2 líneas (2 × 1.2em) como red de seguridad: si el
   clamp fallara, el corte cae justo en el límite de línea, sin sliver. */
body .et_pb_blog_grid .et_pb_post .entry-title {
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	min-height: 52px;
	max-height: 2.4em;
	line-height: 1.2;
}

/* Descripción: se corta a 4 líneas (puntos suspensivos) para igualar altura */
.et_pb_blog_grid .et_pb_post .post-content-inner {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}


/******** CONSTRUCTORA (page-id-421): franja gris + imágenes con estilo ********/
/* Gris intercalado (#f7f7f7): las secciones de contenido 1ª y 3ª van en gris,
   la 2ª en blanco. Mapa actual: sec_1 = Mantenimiento (gris), sec_2 = Vivienda
   prefabricada (blanco), sec_3 = Rehabilitación (gris). Regla global → aplica en
   TODOS los breakpoints (antes solo sec_3, faltaba sec_1 → fallaba en escritorio). */
body.page-id-421 .et_pb_section_1,
body.page-id-421 .et_pb_section_3 {
	background-color: #f7f7f7;
}

/* Imágenes de las secciones de contenido (NO los banners hero, que son fondo
   de sección y no módulos de imagen): bordes redondeados + sombra suave para
   que no queden sosas */
body.page-id-421 .et_pb_image img {
	border-radius: 14px;
	box-shadow: 0 12px 30px rgba(14, 26, 47, 0.18);
}


/******** HOME: imagen "NUESTROS CLIENTES" centrada en el fondo gris ********/
/* La rejilla de logos estaba pegada al borde superior (la sección tenía
   padding-top:0 y padding-bottom:76px), por eso parecía desplazada hacia
   arriba. Igualamos el aire superior para que quede centrada en el gris. */
body.home .et_pb_section_8.et_pb_section {
	padding-top: 120px;
}


/*════════════════════════════════════════════════════════════
  REDISEÑO 2026-06
  ════════════════════════════════════════════════════════════*/

/******** HEADER: padding simétrico + logo sticky 70px ********/
/* La fila del menú tenía padding-top:20px y padding-bottom:0 (asimétrico).
   Divi lo fija con .et_pb_row_0_tb_header.et_pb_row{...!important} (misma
   especificidad que un selector simple), así que prefijamos con `body` y la
   clase exacta para ganar por especificidad, no por orden. */
body .et-l--header .et_pb_row_0_tb_header.et_pb_row {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
	margin-top: 0px !important;
}

/* Logo por defecto 90px (ya definido arriba); al hacerse sticky baja a 70px */
body.et-header-stuck .et-l--header .et_pb_menu__logo-wrap img {
	max-height: 70px !important;
}


/******** FOOTER · (2026-06-18) hack de logo absoluto ELIMINADO ********/
/* El usuario reagrupó logo + texto + certificado en un mismo bloque (fila de 4
   columnas) dentro del Divi Builder, así que ya no hace falta sacar el logo del
   flujo ni empujar el texto. Se deja todo con el layout y el tamaño natural de Divi.
   La separación entre logo y texto la ajustaremos más adelante si hace falta. */


/******** HOME: noticias solo título (sin descripción) ********/
/* La grilla de noticias de la home mostraba título + descripción; el cliente
   solo quiere el título (mismo estilo de tarjeta que la sección Noticias). */
.home .et_pb_blog_grid .et_pb_post .post-content {
	display: none;
}


/******** FORMULARIO CF7: rediseño tipo tarjeta (todas las vistas) ********/
.wpcf7-form {
	max-width: 760px;
	margin: 0 auto;
	text-align: left;
}

.wpcf7-form input[type=text],
.wpcf7-form input[type=email],
.wpcf7-form input[type=tel],
.wpcf7-form textarea {
	width: 100%;
	max-width: 100%;
	border: 1px solid #d4dee7;
	border-radius: 10px;
	background: #fff;
	padding: 16px 20px;
	line-height: 1.4;
	font-size: 16px;
	color: #0e1a2f;
	box-shadow: 0 1px 2px rgba(14, 26, 47, 0.04);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	margin-bottom: 16px;
}

.wpcf7-form input[type=text]:focus,
.wpcf7-form input[type=email]:focus,
.wpcf7-form input[type=tel]:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: #274d90;
	box-shadow: 0 0 0 3px rgba(39, 77, 144, 0.12);
}

.wpcf7-form textarea {
	min-height: 150px;
	resize: vertical;
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
	font-size: 16px;
	color: #8a9bab;
}

/* El checkbox y el texto "He leído…" van en el mismo renglón (el texto es
   inline justo después del wrap). Mantenemos todo inline y alineamos el
   checkbox al centro de la línea. */
.wpcf7-form .wpcf7-acceptance,
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
	display: inline;
	margin: 0;
	font-size: 14px;
}

.wpcf7-form .wpcf7-acceptance input[type=checkbox] {
	width: 16px;
	height: 16px;
	margin: 0 8px 0 0;
	vertical-align: middle;
	position: relative;
	top: -1px;
}

.wpcf7-form input[type=submit] {
	display: block;
	width: fit-content;
	margin: 8px auto 0;
	padding: 16px 56px;
	background: #274d90;
	border: none;
	border-radius: 10px;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.1s ease;
}

.wpcf7-form input[type=submit]:hover {
	background: #1b3a70;
	transform: translateY(-1px);
}


/******** HERO interiores: ALTURA/PADDING/CENTRADO → ELIMINADO (2026-06-23) ********/
/* Antes había aquí un sistema que fijaba el hero de 6 páginas (Empresa 425,
   Carpintería 423, Constructora 421, Proyectos 417, 313, 320):
     - columna: height/min-height 480px (260px en ≤980), display:flex +
       justify-content:center, padding-top:140 / padding-bottom:30 (todo !important).
     - colapso de la columna vacía (last-child) en 421/417 a ≤980.
     - neutralizador de min-height de la FILA (.et_pb_row) a 0.
   Se RETIRA por completo: el alto, el padding y la alineación vertical del hero
   pasan a controlarse desde Divi (el !important del height impedía que el "auto"
   del builder surtiera efecto y el contenido se desbordaba). Nada de esto es
   estructural → es Divi quien manda ahora.

   PENDIENTE en Divi al recomponer cada hero:
     · Definir alto (o min-height) + padding + alineación vertical por página y por
       breakpoint (escritorio primero; tablet/móvil después).
     · Proyectos (417): la FILA del hero arrastra un min-height:615px guardado en el
       builder (era lo que neutralizaba la regla borrada). Limpiarlo en Divi, igual
       que se hizo con el min-height:1001px de la fila de Noticias en la home. */


/******** GRILLA NOTICIAS: imagen destacada uniforme + cajas iguales ********/
/* La imagen destacada se estiraba (object-fit:fill) y dejaba franja blanca /
   texto cortado (caso Unión Europea). La forzamos a recorte uniforme. */
.et_pb_blog_grid .et_pb_post .et_pb_image_container img,
.et_pb_blog_grid .et_pb_post .entry-featured-image-url img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	object-position: center;
	display: block;
	border-radius: 8px;
}

/* Quita el margen negativo por defecto de Divi (-20px -20px 29px) en la
   imagen destacada de la grilla, para que quede contenida en la tarjeta y el
   border-radius se vea en las 4 esquinas. Scopeado a la grilla (gana por
   especificidad, sin tocar otras imágenes del sitio). */
.et_pb_blog_grid .et_audio_content,
.et_pb_blog_grid .et_main_video_container,
.et_pb_blog_grid .et_pb_post .et_pb_slider,
.et_pb_blog_grid .et_pb_image_container {
	margin: 0;
}

/* Descripción: sin justificar y con altura fija para igualar las cajas */
.et_pb_blog_grid .et_pb_post .post-content,
.et_pb_blog_grid .et_pb_post .post-content-inner {
	text-align: left !important;
}

.et_pb_blog_grid .et_pb_post .post-content-inner {
	-webkit-line-clamp: 3;
	line-clamp: 3;
	min-height: 86px;
}

/* (2026-06-18) Se ELIMINA el height:520px fijo del contenedor: la altura ahora
   se iguala sola por la suma de partes acotadas — título (clamp 2 líneas, min
   52px), descripción (clamp 3 líneas, min 86px) y fecha (1 línea). El contenedor
   se adapta a su contenido y las tarjetas quedan parejas sin forzar alto. */


/******** FASE 2 — IMPLEMENTACIÓN 2026-06 ********/

/******** F2 · Hover subrayado en los links de legalidad del footer ********/
/* Están en .legals-menu (Aviso Legal, Cookies, Política de privacidad/calidad) y
   Divi les fuerza text-decoration:none → ganamos con .legals-menu + !important. */
.et-l--footer .legals-menu a:hover {
	text-decoration: underline !important;
}


/******** H1 · Títulos de sección más gruesos (700) — GLOBAL ********/
/* Solo dentro de módulos de texto (.et_pb_text h2) para no afectar heroes,
   que usan h1 / slide-title y no h2 de módulo de texto. Antes era body.home;
   ahora aplica a TODAS las vistas. */
.et_pb_text h2 {
	font-weight: 700;
}


/******** H2 · (movido a F4·3 al final) — collage de clientes con flex + 190px
   laterales + centrado vertical con el texto. ********/


/******** H3 · Botón formulario: full-width + estilo estándar ********/
/* Modifica el botón de submit del formulario CF7 para que sea full-width,
   cuadrado, en mayúsculas y con letter-spacing — igual que los botones del sitio */
.wpcf7-form input[type=submit] {
	display: block;
	width: 100%;
	margin: 8px 0 0;
	border-radius: 0;
	text-transform: uppercase;
	letter-spacing: 1px;
}


/******** H4 · "He leído y acepto": en su propio renglón bajo el RGPD + texto más pequeño ********/
/* El checkbox y su texto van inline JUNTOS; el <span> que los envuelve (hijo
   directo = .wpcf7-form-control-wrap.acceptance-NNN) baja a su propia línea,
   debajo del párrafo RGPD. El checkbox mantiene su tamaño (16px). */
.wpcf7-form .wpcf7-acceptance,
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item,
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item label {
	display: inline;
}

.wpcf7-form .wpcf7-acceptance input[type=checkbox] {
	display: inline-block;
	vertical-align: middle;
	margin: 0 8px 0 0;
}

/* El bloque (checkbox + "He leído…") a su propio renglón, debajo del RGPD */
.wpcf7-form p span:has(> [class*="acceptance-"]) {
	display: block;
	margin-top: 8px;
}

/* Texto RGPD y "He leído" más pequeños (el checkbox no cambia de tamaño) */
.wpcf7-form p:has(.wpcf7-acceptance) {
	font-size: 13px;
	line-height: 1.5;
}

/* Oculta los <br> sueltos entre el párrafo RGPD y el checkbox */
.wpcf7-form br {
	display: none;
}


/******** H5 · Hover noticias (home + /noticias) + lista proyectos: movimiento, SIN recuadro ********/
/* Movimiento (elevación + zoom de imagen + título a azul). NADA de box-shadow
   cuadrado (al cliente le parecía feo). Ahora que la home calca /noticias, va en
   las dos vistas de noticias además del portfolio. */
.et_pb_blog_grid .et_pb_post,
.et_pb_portfolio_item {
	transition: transform .25s ease;
}

.et_pb_blog_grid .et_pb_post .et_pb_image_container,
.et_pb_portfolio_item .et_portfolio_image {
	overflow: hidden;
}

.et_pb_blog_grid .et_pb_post img,
.et_pb_portfolio_item img {
	transition: transform .35s ease;
}

.et_pb_blog_grid .et_pb_post:hover,
.et_pb_portfolio_item:hover {
	transform: translateY(-4px);
}

.et_pb_blog_grid .et_pb_post:hover img,
.et_pb_portfolio_item:hover img {
	transform: scale(1.04);
}

.et_pb_blog_grid .et_pb_post:hover .entry-title,
.et_pb_portfolio_item:hover .et_pb_module_header {
	color: #274d90 !important;
}

/* F4·1 (2026-06-18, ajustado) · Subrayado del título al hover (proyectos + noticias).
   FINO (1px) y NEGRO (no hereda el azul del título). Vence al global
   a{text-decoration:none!important} con !important. */
.et_pb_blog_grid .et_pb_post:hover .entry-title,
.et_pb_blog_grid .et_pb_post:hover .entry-title a,
.et_pb_portfolio_item:hover .et_pb_module_header,
.et_pb_portfolio_item:hover .et_pb_module_header a {
	text-decoration: underline !important;
	text-decoration-thickness: 1px !important;
	text-decoration-color: #000 !important;
	text-underline-offset: 3px;
}


/******** H5b · Noticias home: calcar el "bloque delimitado" de /noticias ********/
/* /noticias usa border:1px solid #d8d8d8 en cada post; la home no lo tenía. La
   única diferencia querida es que la home muestra solo el título (sin descripción). */
body.home .et_pb_blog_grid .et_pb_post {
	border: 1px solid #d8d8d8;
}

/* (2026-06-18) Quitado el max-width:1100 — la fila de noticias de la home va a
   ancho completo con 190px laterales como el resto (regla F5·1 global). */


/******** NOTICIA EN DETALLE (single-post) ********/
/* ND1: más aire entre el header y el título de la noticia */
body.single-post .entry-title {
	margin-top: 0 !important;
}

/* ND2: imágenes del cuerpo alineadas a la IZQUIERDA (estaban centradas) */
body.single-post .et_pb_post p:has(> img),
body.single-post .et_pb_post figure,
body.single-post .et_pb_post .et_pb_text:has(> img) {
	text-align: left !important;
}

body.single-post .et_pb_post img {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* ND3: "Entradas recientes" remarcadas con bordes */
body.single-post .widget_recent_entries li {
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 10px 12px;
	margin-bottom: 8px;
	list-style: none;
}

/* ND4: título "Entradas recientes" en peso 600 (diferenciar de las entradas) */
body.single-post .widget_recent_entries .widgettitle {
	font-weight: 600 !important;
}

/* ND5: texto de las entradas a 14px + line-height menor (vencer especificidad
   con prefijo body, que es lo que no hacía caso vía DevTools) */
body .widget_recent_entries li a {
	font-size: 14px !important;
	line-height: 1.3 !important;
}


/******** E1 (v3) · Hero pegado + más alto para dar aire al título bajo el header ********/
/* La imagen del hero vive en el BACKGROUND de la fila (.et_pb_row_0), no de la
   sección. Por eso margin-top dejaba franja blanca (empuja la sección pero el
   fondo va con la fila). Solución: el hero sigue PEGADO (la imagen llena desde
   el header, sin blanco) y se hace más alto (regla de altura abajo: 365→480),
   con el contenido centrado → el título cae con aire bajo el header. */


/******** E2 (v4) · (sustituido por F5·1 global al final) — el padding lateral 190px
   del hero ahora lo aplica la regla GLOBAL de filas. Se quita el padding de columna
   para no duplicarlo (daría 380px). ********/


/******** E3 · (movido a F4·4 al final) — la imagen de "¿Quiénes somos?" ahora
   ocupa el 50% a altura completa en lugar del 70% de ancho. ********/


/******** E4 · (movido a F4·4 al final) — la imagen de "El valor de las personas"
   ahora se estira a la altura del texto en lugar de un alto fijo de 420px. ********/


/******** E5 · Ocultar sección Proyectos en Empresa ********/
/* Secciones: título+intro (5), galería 4 imgs (7), botón Ver todos (8) */
body.page-id-425 .et_pb_section_5,
body.page-id-425 .et_pb_section_7,
body.page-id-425 .et_pb_section_8 {
	display: none !important;
}


/******** C1 · Título hero Carpintería a 45px ********/
body.page-id-423 .et_pb_section_0 h1 {
	font-size: 45px !important;
}


/******** C2 · 2ª imagen Carpintería con alto fijo ********/
/* carpinteria-metalica-ventanas-pvc.jpg en section_2: alto fijo igual que la 1ª imagen */
body.page-id-423 .et_pb_section_2 .et_pb_image img {
	height: 424px;
	object-fit: cover;
	object-position: center;
	width: 100%;
}


/******** C3 · Textarea del mensaje mucho más baja ********/
/* El textarea trae rows=10 → renderiza altísimo; min-height no lo encoge porque
   las filas mandan. Forzamos altura real baja. resize:vertical sigue activo. */
.wpcf7-form textarea {
	height: 110px !important;
	min-height: 0 !important;
}


/******** C4 · Fondo gris a la sección del formulario en Carpintería ********/
body.page-id-423 .et_pb_section_3 {
	background-color: #f7f7f7;
}


/******** K1 · Fondo gris al formulario en Constructora ********/
body.page-id-421 .et_pb_section_5 {
	background-color: #f7f7f7;
}


/******** K2 · Estilo de imagen (radius+sombra) a Empresa y Carpintería ********/
/* El patrón ya existe para Constructora (líneas 506-509); se extiende a las otras páginas.
   Evitamos los hero (son fondos de sección, no módulos .et_pb_image).
   Las imágenes con object-fit (E3, E4, C2) ya tienen border-radius propio — compatible. */
body.page-id-425 .et_pb_image img,
body.page-id-423 .et_pb_image img {
	border-radius: 14px;
	box-shadow: 0 12px 30px rgba(14, 26, 47, 0.18);
}


/*════════════════════════════════════════════════════════════
  FASE 3 — 2026-06-17
  ════════════════════════════════════════════════════════════*/

/******** P1 · PROYECTO EN DETALLE (single-project) — calca noticia detalle ********/
/* Replica la estructura de single-post: aire header→título, imágenes del cuerpo
   a la izquierda y "Entradas recientes" remarcadas. NO toca la galería del
   proyecto (su grid tiene su propio contenedor .galeria-proyecto-grid). */
/* P1.1: más aire entre el header y el título (igual que ND1) */
body.single-project .entry-title,
body.single-project h1 {
	margin-top: 60px !important;
}

/* P1.2: imágenes del cuerpo (entry-content) alineadas a la IZQUIERDA */
body.single-project .entry-content p:has(> img),
body.single-project .entry-content figure,
body.single-project .entry-content .et_pb_text:has(> img) {
	text-align: left !important;
}

body.single-project .entry-content img {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* P1.3: "Entradas recientes" remarcadas con bordes (igual que ND3/4/5) */
body.single-project .widget_recent_entries li {
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 10px 12px;
	margin-bottom: 8px;
	list-style: none;
}

body.single-project .widget_recent_entries .widgettitle {
	font-weight: 600 !important;
}

/* P1.4: Descripción 2 con el MISMO aire sobre la galería que tiene la
   Descripción 1 respecto a la imagen destacada (≈27px). Iba pegada al grid. */
body.single-project .proyecto-desc-2 {
	margin-top: 40px;
}


/******** P4 · Color del menú del header unificado a BLANCO (no sticky) ********/
/* Antes variaba: #274d90 (empresa/carp/constructora/home) vs #333342
   (proyectos/noticias/contacto). El color querido en estado NO sticky es BLANCO
   en TODAS las vistas (el header va sobre el hero). Lo scopeamos a
   `body:not(.et-header-stuck)` (0,3,4) para ganar a las reglas de Divi que ponían
   #333342 en proyectos/noticias/contacto, SIN afectar el estado sticky: al
   hacer scroll el body gana .et-header-stuck → este selector deja de aplicar y
   manda la regla sticky (menú oscuro #0e1a2f sobre fondo blanco). */
body:not(.et-header-stuck) .et_pb_menu_0_tb_header.et_pb_menu ul li a {
	color: #fff !important;
}

/* EXCEPCIÓN: noticia en detalle (single-post) y proyecto en detalle
   (single-project) NO tienen hero — su cabecera es position:relative SIEMPRE
   sobre fondo blanco. Ahí el blanco es invisible → menú oscuro #0e1a2f en
   cualquier estado (sticky o no). Misma especificidad (0,3,4) que la regla
   blanca de arriba pero va DESPUÉS → gana. */
body.single-post .et_pb_menu_0_tb_header.et_pb_menu ul li a,
body.single-project .et_pb_menu_0_tb_header.et_pb_menu ul li a {
	color: #0e1a2f !important;
}


/*════════════════════════════════════════════════════════════
  FASE 4 — LAYOUT 2026-06-18  (selectores verificados contra el DOM en vivo)
  ════════════════════════════════════════════════════════════*/

/******** F4·2 · Detalle (noticia + proyecto): aire título→destacada + estilo img ********/
/* Ambas vistas usan .et_pb_title_featured_container img (verificado en vivo). La
   imagen destacada se separa del título y recibe radius+sombra como el resto de
   imágenes del sitio. */
body.single-post .et_pb_title_featured_container,
body.single-project .et_pb_title_featured_container {
	margin-top: 40px;
}

body.single-post .et_pb_title_featured_container img,
body.single-project .et_pb_title_featured_container img {
	border-radius: 14px;
	box-shadow: 0 12px 30px rgba(14, 26, 47, 0.18);
}


/******** FOOTER: solo tamaño de texto (el layout lo gestiona ahora Divi) ********/
/* Texto de carpintería/dirección a 14px */
.et-l--footer .et_pb_text_0_tb_footer,
.et-l--footer .et_pb_text_0_tb_footer p {
	font-size: 14px !important;
}
/* (2026-06-18) Quitados los hacks de fila/columna/certificado-absoluto: el footer
   se reestructuró en Divi (fila de 4 columnas: logo · texto · vacía · certificado)
   y se deja con el layout y los tamaños naturales de Divi. */


/******** F4·3 · Secciones de contenido: flex + centrado vertical + 190px laterales ********/
/* Carpintería (sec 1,2), Constructora (sec 1,3,4) y Home·clientes (sec 8): la fila
   imagen+texto pasa a flex, columnas 50/50 limpias (sin gutter de Divi), centradas
   en vertical, y alineadas al header con 190px laterales fijos. En ≤980px se apila. */
body.page-id-423 .et_pb_section_1 > .et_pb_row,
body.page-id-423 .et_pb_section_2 > .et_pb_row,
body.page-id-421 .et_pb_section_1 > .et_pb_row,
body.page-id-421 .et_pb_section_3 > .et_pb_row,
body.page-id-421 .et_pb_section_4 > .et_pb_row,
body.home .et_pb_section_8 > .et_pb_row {
	display: flex !important;
	align-items: center;
	gap: 56px;
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 190px !important;
	padding-right: 190px !important;
	box-sizing: border-box;
}

body.page-id-423 .et_pb_section_1 > .et_pb_row > .et_pb_column,
body.page-id-423 .et_pb_section_2 > .et_pb_row > .et_pb_column,
body.page-id-421 .et_pb_section_1 > .et_pb_row > .et_pb_column,
body.page-id-421 .et_pb_section_3 > .et_pb_row > .et_pb_column,
body.page-id-421 .et_pb_section_4 > .et_pb_row > .et_pb_column,
body.home .et_pb_section_8 > .et_pb_row > .et_pb_column {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	margin: 0 !important;
	float: none !important;
}


/******** F4·3b · Constructora: padding vertical uniforme en secciones de contenido ********/
/* "Mismo arriba y abajo en todas las secciones". 60px es un valor de partida: si lo
   quieres más aireado, sube ambos a la vez. */
body.page-id-421 .et_pb_section_1,
body.page-id-421 .et_pb_section_3,
body.page-id-421 .et_pb_section_4 {
	padding-top: 60px !important;
	padding-bottom: 60px !important;
}


/******** F4·4 · Empresa: ¿Quiénes somos? (sec_1) y El valor (sec_2) → 50/50 + imagen full-height ********/
/* Supera a E3 (img 70%) y E4 (alto fijo 420). La fila va a flex con las columnas
   estiradas a la misma altura; la imagen (son fotos) ocupa su 50% y se estira a la
   altura del texto con object-fit:cover. Fila alineada al header (190px). */
body.page-id-425 .et_pb_section_1 > .et_pb_row:has(.et_pb_image),
body.page-id-425 .et_pb_section_2 > .et_pb_row {
	display: flex !important;
	align-items: stretch;
	gap: 56px;
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 190px !important;
	padding-right: 190px !important;
	box-sizing: border-box;
}

body.page-id-425 .et_pb_section_1 > .et_pb_row:has(.et_pb_image) > .et_pb_column,
body.page-id-425 .et_pb_section_2 > .et_pb_row > .et_pb_column {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	margin: 0 !important;
	float: none !important;
}

/* La columna de la imagen y la cadena módulo→wrap→img llenan la altura de la fila */
body.page-id-425 .et_pb_section_1 > .et_pb_row > .et_pb_column:has(.et_pb_image),
body.page-id-425 .et_pb_section_2 > .et_pb_row > .et_pb_column:has(.et_pb_image) {
	display: flex !important;
}

body.page-id-425 .et_pb_section_1 .et_pb_image,
body.page-id-425 .et_pb_section_2 .et_pb_image,
body.page-id-425 .et_pb_section_1 .et_pb_image .et_pb_image_wrap,
body.page-id-425 .et_pb_section_2 .et_pb_image .et_pb_image_wrap {
	display: flex;
	width: 100%;
}

body.page-id-425 .et_pb_section_1 .et_pb_image img,
body.page-id-425 .et_pb_section_2 .et_pb_image img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover;
	object-position: center top;
}


/******** F4·responsive · ≤980px: apilar columnas y bajar a 24px laterales ********/
@media (max-width: 980px) {

	body.page-id-423 .et_pb_section_1 > .et_pb_row,
	body.page-id-423 .et_pb_section_2 > .et_pb_row,
	body.page-id-421 .et_pb_section_1 > .et_pb_row,
	body.page-id-421 .et_pb_section_3 > .et_pb_row,
	body.page-id-421 .et_pb_section_4 > .et_pb_row,
	body.home .et_pb_section_8 > .et_pb_row,
	body.page-id-425 .et_pb_section_1 > .et_pb_row:has(.et_pb_image),
	body.page-id-425 .et_pb_section_2 > .et_pb_row {
		flex-direction: column;
		gap: 24px;
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	/* F4·responsive·fix (2026-06-23): al apilar (flex-direction:column), las columnas
	   con flex:1 1 0 colapsan a ~1px (base 0, sin altura que repartir) → la imagen
	   desaparecía. flex:0 0 auto las devuelve a su altura natural por contenido.
	   Mismo bug en carpintería (page-423 sec_1, sec_2): sec_1 img col h=1, sec_2 w=0.
	   Mismo bug en constructora (page-421 sec_1, sec_3, sec_4): img col h=1, sec_3 h=0
	   total → la última imagen (sec_4) colapsada arrastraba el formulario (sec_5). */
	body.page-id-425 .et_pb_section_1 > .et_pb_row:has(.et_pb_image) > .et_pb_column,
	body.page-id-425 .et_pb_section_2 > .et_pb_row > .et_pb_column,
	body.page-id-423 .et_pb_section_1 > .et_pb_row > .et_pb_column,
	body.page-id-423 .et_pb_section_2 > .et_pb_row > .et_pb_column,
	body.page-id-421 .et_pb_section_1 > .et_pb_row > .et_pb_column,
	body.page-id-421 .et_pb_section_3 > .et_pb_row > .et_pb_column,
	body.page-id-421 .et_pb_section_4 > .et_pb_row > .et_pb_column {
		flex: 0 0 auto !important;
		width: 100% !important;
	}

	/* Constructora·tablet·imagen (2026-06-23): las fotos de contenido son CUADRADAS
	   (~705x703 a full-width) → enormes al apilar. Las capamos a banner 400px con
	   object-fit:cover en las 3 secciones con imagen (sec_1 Mantenimiento, sec_2 Vivienda,
	   sec_3 Rehabilitación). La cadena módulo→wrap→img necesita full-width. */
	body.page-id-421 .et_pb_section_1 .et_pb_image,
	body.page-id-421 .et_pb_section_2 .et_pb_image,
	body.page-id-421 .et_pb_section_3 .et_pb_image,
	body.page-id-421 .et_pb_section_1 .et_pb_image .et_pb_image_wrap,
	body.page-id-421 .et_pb_section_2 .et_pb_image .et_pb_image_wrap,
	body.page-id-421 .et_pb_section_3 .et_pb_image .et_pb_image_wrap {
		display: block;
		width: 100%;
	}
	body.page-id-421 .et_pb_section_1 .et_pb_image img,
	body.page-id-421 .et_pb_section_2 .et_pb_image img,
	body.page-id-421 .et_pb_section_3 .et_pb_image img {
		width: 100% !important;
		height: 400px !important;
		object-fit: cover;
		object-position: center center;
	}

	/* Constructora·tablet·hero (2026-06-23): el H1 del hero escalaba a 38px (default Divi)
	   mientras el resto de la familia (carpintería, C1) lo fija a 45px. Igualamos. */
	body.page-id-421 .et_pb_section_0 h1 {
		font-size: 45px !important;
	}

	/* F4·responsive·carpintería (2026-06-23): reducir aire entre secciones en tablet.
	   1ª sección (sec_1): el gap bajo el texto era padding-bottom:40 de la sección. */
	body.page-id-423 .et_pb_section_1 {
		padding-bottom: 10px !important;
	}
	/* 2ª sección (sec_2): el gap sobre el texto era padding-top:60 del row (F5·1). Hay que
	   igualar/superar la especificidad de F5·1 (lleva :not([_tb_header]):not([_tb_footer])
	   y va después en el archivo), si no gana ella. */
	body.page-id-423 .et_pb_section_2:not([class*="_tb_header"]):not([class*="_tb_footer"]) > .et_pb_row {
		padding-top: 20px !important;
	}

	body.page-id-425 .et_pb_section_1 .et_pb_image img,
	body.page-id-425 .et_pb_section_2 .et_pb_image img {
		height: auto !important;
	}

	/* F4·responsive·hero (2026-06-23): la imagen de fondo (grúa) del hero estaba anclada
	   abajo (bg-position 50% 100%) y a 320px se recortaba feo. Contacto (page-320), que
	   el cliente da por bueno, la centra (50% 50%). Igualamos empresa a contacto. */
	body.page-id-425 .et_pb_section_0 > .et_pb_row {
		background-position: 50% 50% !important;
	}

	/* F4·responsive·empresa (2026-06-23): la fila del título "¿Quiénes somos?" (la que
	   NO lleva imagen) heredaba padding-top:60 de F5·1 + 40 de la sección = 100px de aire
	   sobre el título. Lo bajamos a 20 en tablet. */
	body.page-id-425 .et_pb_section_1 > .et_pb_row:not(:has(.et_pb_image)) {
		padding-top: 20px !important;
	}

	/* "El valor de las personas" (sec_2): SOLO el título va centrado; el párrafo de debajo
	   queda alineado a la izquierda dentro del bloque (que ya va centrado vía row_inner). */
	body.page-id-425 .et_pb_section_2 > .et_pb_row > .et_pb_column:not(:has(.et_pb_image)) h1,
	body.page-id-425 .et_pb_section_2 > .et_pb_row > .et_pb_column:not(:has(.et_pb_image)) h2,
	body.page-id-425 .et_pb_section_2 > .et_pb_row > .et_pb_column:not(:has(.et_pb_image)) h3,
	body.page-id-425 .et_pb_section_2 > .et_pb_row > .et_pb_column:not(:has(.et_pb_image)) h4 {
		text-align: center !important;
	}

	body.page-id-425 .et_pb_section_2 > .et_pb_row > .et_pb_column:not(:has(.et_pb_image)) .et_pb_text_inner,
	body.page-id-425 .et_pb_section_2 > .et_pb_row > .et_pb_column:not(:has(.et_pb_image)) .et_pb_text_inner p {
		text-align: left !important;
	}

	/* "El valor" es specialty section: el .et_pb_row_inner del texto lleva max-width:75%
	   (regla previa F8) con margin-left:0, por eso el bloque quedaba pegado a la izquierda.
	   margin:auto lo centra respecto a la columna/sección entera. */
	body.page-id-425 .et_pb_section_2 .et_pb_row_inner {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}


/*════════════════════════════════════════════════════════════
  FASE 5 — 2026-06-18  ·  190px GLOBAL + grid noticias home = /noticias
  ════════════════════════════════════════════════════════════*/

/******** F5·1 · Padding lateral 190px GLOBAL (todas las páginas y secciones) ********/
/* Decisión del cliente: TODO el contenido (imágenes y texto) alineado a 190px de
   ambos bordes, igual que el header — en todas las vistas y secciones. Se aplica a
   las filas de primer nivel; excluye cabecera y pie (layout propio). En ≤980px → 24px.
   Cubre también el hero (se quitó el padding de columna E2) y deja obsoletos los
   190px repetidos en F4·3/F4·4 (mismo valor, sin conflicto).
   Además se pone a 0 el padding lateral PROPIO de las secciones para que NO se sume
   a estos 190 (Divi metía 5% en algunas, p.ej. la composición de proyectos: 95px+190
   = imagen a 285 en vez de 190). */
.et_pb_section:not([class*="_tb_header"]):not([class*="_tb_footer"]) {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.et_pb_section:not([class*="_tb_header"]):not([class*="_tb_footer"]) > .et_pb_row {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 190px !important;
	padding-right: 190px !important;
	padding-top: 60px !important;
	box-sizing: border-box !important;
}

@media (max-width: 980px) {
	.et_pb_section:not([class*="_tb_header"]):not([class*="_tb_footer"]) > .et_pb_row {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}


/******** F5·2 · Grid de noticias de la HOME idéntico a /noticias (fuente de verdad) ********/
/* El módulo de la home traía tipografía propia (título 26px/500, fecha 16px/300
   oscuro) distinta de /noticias (título-link 18px/700, fecha 14px/500 gris #949ba3).
   Igualamos la home a /noticias. Única diferencia querida: la home oculta la
   descripción (ya está, regla anterior .post-content display:none). */
body.home .et_pb_blog_grid .et_pb_post .entry-title {
	font-size: 22px !important;
	font-weight: 500 !important;
	margin-bottom: 30px !important;
}

body.home .et_pb_blog_grid .et_pb_post .entry-title a {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #353740 !important;
}

body.home .et_pb_blog_grid .et_pb_post .post-meta,
body.home .et_pb_blog_grid .et_pb_post .post-meta span,
body.home .et_pb_blog_grid .et_pb_post .post-meta .published {
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.8 !important;
	color: #949ba3 !important;
}


/*════════════════════════════════════════════════════════════
  FASE 6 — 2026-06-18  ·  Fixes finos del flex/190
  ════════════════════════════════════════════════════════════*/

/******** F6·1 · Filas flex: ocultar pseudo-elementos clearfix de Divi ********/
/* Divi mete ::before/::after (clearfix) en cada .et_pb_row. En un contenedor flex se
   vuelven items y, con el gap, desplazan las columnas ~56px (texto/imagen quedaban
   desalineados, p.ej. clientes). Los ocultamos SOLO en las filas que pasamos a flex. */
body.page-id-423 .et_pb_section_1 > .et_pb_row:before,
body.page-id-423 .et_pb_section_1 > .et_pb_row:after,
body.page-id-423 .et_pb_section_2 > .et_pb_row:before,
body.page-id-423 .et_pb_section_2 > .et_pb_row:after,
body.page-id-421 .et_pb_section_1 > .et_pb_row:before,
body.page-id-421 .et_pb_section_1 > .et_pb_row:after,
body.page-id-421 .et_pb_section_3 > .et_pb_row:before,
body.page-id-421 .et_pb_section_3 > .et_pb_row:after,
body.page-id-421 .et_pb_section_4 > .et_pb_row:before,
body.page-id-421 .et_pb_section_4 > .et_pb_row:after,
body.home .et_pb_section_8 > .et_pb_row:before,
body.home .et_pb_section_8 > .et_pb_row:after,
body.page-id-425 .et_pb_section_1 > .et_pb_row:has(.et_pb_image):before,
body.page-id-425 .et_pb_section_1 > .et_pb_row:has(.et_pb_image):after,
body.page-id-425 .et_pb_section_2 > .et_pb_row:before,
body.page-id-425 .et_pb_section_2 > .et_pb_row:after {
	display: none !important;
}

/******** F6·2 · Columnas flex: sin padding lateral propio (alinear a 190 exacto) ********/
/* Quita el padding lateral que algunas columnas traen del builder (clientes tenía
   152px) para que el contenido arranque justo en los 190 de la fila. La separación
   entre columnas la da el gap:56px. */
body.page-id-423 .et_pb_section_1 > .et_pb_row > .et_pb_column,
body.page-id-423 .et_pb_section_2 > .et_pb_row > .et_pb_column,
body.page-id-421 .et_pb_section_1 > .et_pb_row > .et_pb_column,
body.page-id-421 .et_pb_section_3 > .et_pb_row > .et_pb_column,
body.page-id-421 .et_pb_section_4 > .et_pb_row > .et_pb_column,
body.home .et_pb_section_8 > .et_pb_row > .et_pb_column,
body.page-id-425 .et_pb_section_1 > .et_pb_row:has(.et_pb_image) > .et_pb_column,
body.page-id-425 .et_pb_section_2 > .et_pb_row > .et_pb_column {
	padding-left: 0 !important;
	padding-right: 0 !important;
}


/******** F6·3 · Footer alineado al header (190px laterales) ********/
/* Divi compila la primera fila del footer con margin-left:0!important, por eso
   queda pegada al borde izquierdo aunque en el Builder parezca respetar el ancho.
   Forzamos el mismo patrón global de filas: ancho completo + padding interno
   190px, y en móvil el mismo fallback de 24px. */
.et-l--footer .et_pb_section > .et_pb_row {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 190px !important;
	padding-right: 190px !important;
	box-sizing: border-box !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

@media (max-width: 980px) {
	.et-l--footer .et_pb_section > .et_pb_row {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}


/******** F6·4 · Noticias home: subrayado multilínea sin recorte ********/
/* El título está limitado a 2 líneas con overflow:hidden + max-height:2.4em.
   El underline de la segunda línea caía fuera de esa caja y se recortaba.
   Damos 4px de aire inferior y aplicamos el subrayado solo al enlace, no al h3. */
body.home .et_pb_blog_grid .et_pb_post .entry-title {
	padding-bottom: 4px;
	max-height: calc(2.4em + 4px);
}

body.home .et_pb_blog_grid .et_pb_post:hover .entry-title {
	text-decoration: none !important;
}

body.home .et_pb_blog_grid .et_pb_post:hover .entry-title a {
	text-decoration: underline !important;
	text-decoration-thickness: 1px !important;
	text-decoration-color: #000 !important;
	text-underline-offset: 3px;
}


/******** F6·5 · Empresa: imagen de obreros con altura controlada ********/
/* La imagen original es cuadrada (800x800) y el hueco junto al texto es panorámico:
   si la hacemos medir exactamente lo mismo que el texto (≈324px), object-fit:cover
   recorta demasiado. Punto medio: quitar el padding vertical artificial de Divi,
   centrar ambas columnas y dar a la imagen una altura controlada de 420px. */
@media (min-width: 981px) {
	body.page-id-425 .et_pb_section_1 > .et_pb_row:has(.et_pb_image) {
		align-items: center !important;
		gap: 70px;
	}

	body.page-id-425 .et_pb_section_1 > .et_pb_row:has(.et_pb_image) > .et_pb_column {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	body.page-id-425 .et_pb_section_1 > .et_pb_row:has(.et_pb_image) > .et_pb_column:has(.et_pb_image) {
		display: flex !important;
		position: relative !important;
		min-height: 0 !important;
	}

	body.page-id-425 .et_pb_section_1 > .et_pb_row:has(.et_pb_image) .et_pb_image {
		position: relative !important;
		inset: auto !important;
		width: 100% !important;
		height: 420px !important;
		margin: 0 !important;
	}

	body.page-id-425 .et_pb_section_1 > .et_pb_row:has(.et_pb_image) .et_pb_image .et_pb_image_wrap {
		width: 100% !important;
		height: 100% !important;
	}

	body.page-id-425 .et_pb_section_1 > .et_pb_row:has(.et_pb_image) .et_pb_image img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: center center !important;
	}
}


/******** F6·6 · Noticia detalle: evitar padding duplicado en contenido ********/
/* La row exterior del template single-post necesita 190px para alinear título e
   imagen destacada al header. Pero el contenido del post puede traer secciones
   Divi internas; esas rows estaban heredando otros 190px y el texto empezaba a
   380px. Quitamos el padding solo dentro del módulo de contenido del post. */
body.single-post .et_pb_post_content_0_tb_body .et_pb_section:not([class*="_tb_header"]):not([class*="_tb_footer"]) > .et_pb_row {
	padding-left: 0 !important;
	padding-right: 0 !important;
	/* (2026-06-22) Quitamos también el padding-top:60 que F5·1 inyecta a estas filas
	   internas: en posts construidos con secciones Divi, ese 60 (sumado al padding
	   propio de la sección) dejaba demasiado aire entre la imagen destacada y el texto.
	   Sin MQ → aplica en escritorio y en 981–1440. La fila vuelve al espaciado natural
	   de su sección Divi. */
	padding-top: 0 !important;
}


/*════════════════════════════════════════════════════════════
  FASE 7 — 2026-06-22  ·  Overlay proyectos, header activo/botón,
  texto carpintería, sidebar noticia detalle
  ════════════════════════════════════════════════════════════*/

/******** F7·1 · Proyectos: quitar overlay de hover (wash blanco + icono +) ********/
/* El portfolio de Divi pone <span class="et_overlay"> sobre cada imagen: en hover
   sube a opacity:1 con fondo rgba(255,255,255,0.9) (la imagen "se vuelve blanca") y
   pinta un icono ETmodules azul (#274d90, 32x32) vía ::before — el círculo con el +.
   Lo ocultamos del todo; el hover deseado (elevación + zoom + subrayado del título,
   regla H5) se conserva porque vive en otros selectores. */
.et_pb_portfolio_item .et_overlay {
	display: none !important;
}


/******** F7·2 · Home: aire lateral en el texto de Servicios y Proyectos ********/
/* Servicios (sec_1) y Proyectos (sec_3) tienen el párrafo descriptivo a ancho
   completo (190→190), por eso "no tienen padding interno". Presupuesto/hero se ven
   aireados solo porque su texto es corto y queda centrado. Limitamos el ancho del
   párrafo (centrado) para darles el mismo respiro. 1150px es valor de partida. */
body.home .et_pb_section_1 .et_pb_text p,
body.home .et_pb_section_3 .et_pb_text p {
	max-width: 1150px;
	margin-left: auto !important;
	margin-right: auto !important;
}


/******** F7·3 · Header: marcar la página activa también SIN sticky ********/
/* En sticky el item activo ya se distingue en azul (#274d90); sin sticky la regla P4
   pinta TODO el menú de blanco y el activo se pierde. Replicamos el azul del sticky
   al estado no-sticky. Especificidad (0,4,4) > P4 (0,3,4) → gana sin tocar sticky. */
body:not(.et-header-stuck) .et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-item > a {
	color: #274d90 !important;
}


/******** F7·4 · Header: "Contacto" como botón azul (ambos estados) ********/
/* Contacto = li .et_pb_menu_page_id-320. El <a> del menú trae padding vertical 31px
   (alto del header) y display:flex; le damos fondo azul, texto blanco, radio y un
   padding de botón. Va al final con (0,4,4) + !important para ganar a las reglas de
   color (blanco no-sticky / oscuro sticky / activo azul) en cualquier estado. */
body .et_pb_menu_0_tb_header.et_pb_menu ul li.et_pb_menu_page_id-320.menu-item > a {
	background: #274d90 !important;
	color: #fff !important;
	border-radius: 6px;
	/* El ul/li son flex con align-items:stretch → el <a> se estiraba al alto del
	   header (90px) y el fondo azul llenaba todo. align-self:center lo deja a la
	   altura de su contenido. El ALTO del botón se controla con el padding vertical
	   de aquí abajo (10px); súbelo/bájalo para más/menos alto. */
	align-self: center !important;
	padding: 10px 22px !important;
	line-height: 1 !important;
	transition: background 0.2s ease;
}

body .et_pb_menu_0_tb_header.et_pb_menu ul li.et_pb_menu_page_id-320.menu-item > a:hover {
	background: #1b3a70 !important;
}


/******** F7·5 · Carpintería: igualar el texto de la 1ª sección al de la 2ª ********/
/* Originales — sec_1 (et_pb_text_2): 18px / 300 / #434343.  sec_2 (et_pb_text_3):
   16px / 500 / #747d88. El cliente quiere el estilo de la 2ª en la 1ª → aplicamos
   los valores de sec_2 a sec_1. sec_2 se deja con su estilo original de Divi. */
body.page-id-423 .et_pb_section_1 .et_pb_text,
body.page-id-423 .et_pb_section_1 .et_pb_text p {
	font-size: 16px !important;
	font-weight: 500 !important;
	color: #747d88 !important;
}


/******** F7·6 · Noticia detalle: quitar margen inferior de "Entradas recientes" ********/
/* El widget .widget_recent_entries traía margin-bottom ~75px. Lo quitamos. */
body.single-post .widget_recent_entries {
	margin-bottom: 0 !important;
}


/******** F7·7 · Noticia detalle: borde general del sidebar (aprovechar border-right) ********/
/* El sidebar ya tenía solo border-right 1px rgba(0,0,0,0.1). Lo convertimos en un
   recuadro completo con el mismo color + radio + padding interno. */
body.single-post .artabra-news-sidebar {
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	padding: 24px;
}


/******** F7·8 · Proyecto detalle: line-height del título a 28px ********/
body.single-project .entry-title,
body.single-project h1 {
	line-height: 28px !important;
}


/*════════════════════════════════════════════════════════════
  FASE 8 — 2026-06-22  ·  RESPONSIVE: padding lateral 150px en 981–1440px
  ════════════════════════════════════════════════════════════*/

/******** F8·1 · Padding lateral 150px SOLO de 1440px para abajo (≥981px) ********/
/* El header pasó a 150px de padding lateral; el contenido seguía a 190px (reglas
   base F5·1/F4·3/F4·4/F6·3, que NO se tocan → en >1440px todo queda a 190 como antes).
   Aquí, en el rango 981–1440px, bajamos TODO ese contenido a 150px para que obedezca
   al nuevo padding del header. Abajo de 980px manda el fallback de 24px ya existente,
   por eso el rango arranca en 981 (min-width) y no pisa el mobile.
   Se repiten los mismos selectores de las 4 reglas base para igualar/superar su
   especificidad (F4·4 es 0,4,1) y ganar dentro del rango por orden de aparición. */
@media (min-width: 981px) and (max-width: 1440px) {

	/* F5·1 global (catch-all de todas las filas de contenido) */
	.et_pb_section:not([class*="_tb_header"]):not([class*="_tb_footer"]) > .et_pb_row,
	/* F4·3 · carpintería / constructora / home-clientes */
	body.page-id-423 .et_pb_section_1 > .et_pb_row,
	body.page-id-423 .et_pb_section_2 > .et_pb_row,
	body.page-id-421 .et_pb_section_1 > .et_pb_row,
	body.page-id-421 .et_pb_section_3 > .et_pb_row,
	body.page-id-421 .et_pb_section_4 > .et_pb_row,
	body.home .et_pb_section_8 > .et_pb_row,
	/* F4·4 · empresa quiénes-somos / valor */
	body.page-id-425 .et_pb_section_1 > .et_pb_row:has(.et_pb_image),
	body.page-id-425 .et_pb_section_2 > .et_pb_row,
	/* F6·3 · footer */
	.et-l--footer .et_pb_section > .et_pb_row {
		padding-left: 150px !important;
		padding-right: 150px !important;
	}
}


/******** F8·2 · Home "Nuestros clientes": menos gris vertical (981–1440px) ********/
/* La sección tiene padding-top:120px (regla de desktop, line ~535, para centrar la
   rejilla de logos en el gris) + la fila aporta otros 60px (F5·1). En el rango
   responsive eso deja ~180px de aire arriba y el gris "dura demasiado" frente a lo
   que ocupan texto+botón+logos. Bajamos el extra de la sección a 30px (queda 30+60=90
   arriba). Valor de partida — subir/bajar si hace falta. Desktop >1440 intacto. */
@media (min-width: 981px) and (max-width: 1440px) {
	body.home .et_pb_section_8.et_pb_section {
		padding-top: 30px !important;
	}
}


/******** F8·3 · Carpintería 2ª sección: imagen adaptada al texto (981–1440px) ********/
/* C2 (line ~962) le mete height:424px FIJO a la imagen → mantiene "la forma de 1920"
   aunque el texto crezca en alto al estrecharse el viewport. En el rango quitamos la
   altura fija: la imagen vuelve a su aspecto natural y queda centrada al texto (la
   fila ya es flex align-items:center, F4·3), igual que la 1ª sección. Desktop >1440
   conserva el 424 fijo (rematado). */
@media (min-width: 981px) and (max-width: 1440px) {
	body.page-id-423 .et_pb_section_2 .et_pb_image img {
		height: auto !important;
	}
}


/******** F8·4 · Empresa "Valor de las personas": texto al 100% + gap como sec_1 (981–1440px) ********/
/* El cliente puso el módulo de texto a max-width:none en Divi pero el párrafo seguía
   estrecho. El límite REAL no era el módulo (computa maxWidth:none) sino el
   .et_pb_row_inner que lo envuelve, capado a max-width:75% (= 341px en una columna de
   455). Lo liberamos a 100% para que el párrafo llene su columna. Verificado en vivo
   con agent-browser @1280: column_1_2(455) > row_inner(75%→341) > text(341). */
@media (min-width: 981px) and (max-width: 1440px) {
	body.page-id-425 .et_pb_section_2 .et_pb_row_inner {
		max-width: 100% !important;
	}

	/* Gap imagen↔texto igualado al de la 1ª sección (70px) en vez de los 56 de F4·4 */
	body.page-id-425 .et_pb_section_2 > .et_pb_row {
		gap: 70px !important;
	}
}


/*════════════════════════════════════════════════════════════
  FASE 9 — 2026-06-22  ·  Noticia detalle: layout flex (sidebar fijo)
  ════════════════════════════════════════════════════════════*/

/******** F9·1 · Noticia detalle: artículo + sidebar como grupo flex (DESKTOP, sin MQ) ********/
/* La fila del template body (.et_pb_row_0_tb_body) traía 2 columnas FLOTADAS, ambas por
   porcentaje: artículo 3/4 (et_pb_column_0_tb_body) + sidebar 1/4 (et_pb_column_1_tb_body).
   Las pasamos a un mismo grupo FLEX: el sidebar de "entradas recientes" queda con ancho
   FIJO (320px) y la columna izquierda (imagen + texto) se adapta al resto con flex:1.
   El gap entre columnas se conserva en los 84px que tenía el gutter de Divi.
   Verificado en vivo @1920: artículo 1123px (3/4) + gap 84 + sidebar 318px (1/4). */
body.single-post .et_pb_row_0_tb_body {
	display: flex !important;
	align-items: flex-start;
	gap: 84px;
}

/* Divi mete ::before/::after (clearfix) en la fila; en flex se vuelven items fantasma
   y, con el gap, roban 84px a la columna del artículo (queda 84 corta). Los ocultamos
   igual que F6·1 hace en las otras filas flex. */
body.single-post .et_pb_row_0_tb_body::before,
body.single-post .et_pb_row_0_tb_body::after {
	display: none !important;
}

body.single-post .et_pb_row_0_tb_body > .et_pb_column_0_tb_body {
	flex: 1 1 0 !important;
	width: auto !important;
	max-width: none !important;
	margin-right: 0 !important;
	float: none !important;
}

body.single-post .et_pb_row_0_tb_body > .et_pb_column_1_tb_body {
	flex: 0 0 320px !important;
	width: 320px !important;
	margin: 0 !important;
	float: none !important;
}

/******** F9·2 · Noticia detalle: módulo título+destacada al 100% de la columna ********/
/* Divi compila el módulo del título con `.et_pb_post_title_0_tb_body{width:60%}`, así
   que el título y la imagen destacada se frenaban a 672px (60% de la columna de 1121),
   mucho más estrechos que su bloque. La imagen ya estaba a width:100%, pero de un
   contenedor capado al 60% → el límite era el módulo, no el object-fit. Lo llevamos al
   100% para que título e imagen llenen la columna del artículo. */
body.single-post .et_pb_post_title_0_tb_body {
	width: 100% !important;
}


/******** F9·3 · /constructora: títulos de sección a 40px (981–1440px) ********/
/* En el breakpoint de 1440 los H2 de las secciones de contenido (Mantenimiento,
   Vivienda prefabricada, Rehabilitación, Pide tu presupuesto) se veían grandes a 48px.
   Los bajamos a 40px. El hero H1 (50px) se deja como está. Desktop >1440 intacto. */
@media (min-width: 981px) and (max-width: 1440px) {
	body.page-id-421 .et_pb_section h2 {
		font-size: 40px !important;
	}
}


/******** F9·4 · Noticia detalle: imagen destacada con object-fit cover ********/
/* Cambiamos contain→cover SOLO en single-post: si una destacada tiene un aspecto que el
   max-height recorta, rellena la caja en vez de dejar barras blancas (letterbox). Gana a
   la regla base por especificidad (body.single-post prefijado). No toca single-project. */
body.single-post .et_pb_title_featured_container img {
	object-fit: cover;
}

/******** F9·4b · Proyecto detalle: imagen destacada cover en TODOS los breakpoints ********/
/* Mismo motivo que F9·4 pero para single-project: la destacada rellena la caja (cover)
   en vez de dejar barras blancas (contain), en todos los tamaños. */
body.single-project .et_pb_title_featured_container img {
	object-fit: cover;
}


/*════════════════════════════════════════════════════════════
  FASE 10 — 2026-06-23  ·  RESPONSIVE tablet (≤980px) · Homepage
  ════════════════════════════════════════════════════════════*/

/******** F10·1 · Menú móvil: links visibles también sin sticky ********/
/* En el header transparente (no-sticky, sobre el hero) Divi pinta los links del menú
   desplegable en BLANCO; como el dropdown tiene fondo blanco, los items del medio
   (Empresa, Carpintería, Constructora, Proyectos, Noticias) quedaban INVISIBLES. En
   sticky ya son #333342 (legibles). Igualamos el no-sticky al sticky: forzamos #333342
   en los links normales. Se excluyen el item activo (azul) y "Contacto" (menu-item-322,
   botón azul con texto blanco) para no romperlos. Plantilla de menú global. */
/* Divi pinta el blanco con `body:not(.et-header-stuck) .et_pb_menu_0_tb_header.et_pb_menu
   ul li a {color:#fff !important}`. Espejamos ESE prefijo (mismo gate de no-sticky) y
   añadimos `.et_mobile_menu` + `.menu-item` para superar su especificidad. */
@media (max-width: 980px) {
	body:not(.et-header-stuck) .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu li.menu-item:not(.current-menu-item):not(.current_page_item):not(.menu-item-322) > a {
		color: #333342 !important;
	}
}


/******** F10·2 · Home hero: alto natural (pegar contenido al header y a SERVICIOS) ********/
/* El slider del hero tenía alto FIJO (861px, vía CSS de página de Divi) y centraba el
   contenido en vertical, dejando mucho aire arriba (entre header y título) y abajo (antes
   de SERVICIOS). Pasamos el alto a auto: el hero mide su contenido + un padding-top
   controlado (140px) que deja el bloque título/subtítulo/botón justo bajo el header, y un
   padding-bottom corto (60px). Anulamos también el padding-top propio del título. */
@media (max-width: 980px) {
	body.home .et_pb_fullwidth_slider_0,
	body.home .et_pb_fullwidth_slider_0 .et_pb_slides,
	body.home .et_pb_fullwidth_slider_0 .et_pb_slide,
	body.home .et_pb_fullwidth_slider_0 .et_pb_slide .et_pb_container {
		height: auto !important;
		min-height: 0 !important;
	}
	body.home .et_pb_fullwidth_slider_0 .et_pb_slide_description {
		padding-top: 140px !important;
		padding-bottom: 60px !important;
	}
	body.home .et_pb_fullwidth_slider_0 .et_pb_slide_title {
		padding-top: 0 !important;
	}
}


/******** F10·3 · Home "Nuestros clientes": columnas apiladas (solape con formulario) ********/
/* La sección es specialty (2 columnas: izq título+botón, der imagen de logos). En la fila
   flex base (F4·3) las columnas llevan `flex:1 1 0` — correcto en FILA (anchos iguales).
   Al apilar en ≤980 (flex-direction:column de F4·responsive) ese flex-basis:0 colapsaba la
   altura de la columna de la imagen a ~1px y los logos (≈558px) DESBORDABAN encima del
   formulario "Pide tu presupuesto". Al apilar, cada columna debe medir su contenido. */
@media (max-width: 980px) {
	body.home .et_pb_section_8 > .et_pb_row > .et_pb_column {
		flex: 0 0 auto !important;
	}
}


/******** F10·4 · Footer: pegatina del certificado alineada a la izquierda ********/
/* El módulo de imagen del certificado (et_pb_image_1_tb_footer) trae text-align:right, así
   que la pegatina quedaba a la derecha mientras logo, "Artabra Sistemas, S.L." y la
   dirección están a la izquierda. La alineamos a la izquierda como el resto del bloque. */
@media (max-width: 980px) {
	.et-l--footer .et_pb_image_1_tb_footer {
		text-align: left !important;
	}
}


/******** F10·5 · Home: reducir aire título→tope de sección en tablet (valores NUESTROS) ********/
/* En ≤980 cada título de sección quedaba muy lejos de su borde superior. El grueso eran
   paddings del builder (col SERVICIOS ~211px, col CLIENTES, sección PRESUPUESTO) que el
   cliente ya bajó en la vista Tablet de Divi. Aquí solo tocamos los DOS valores que viven
   en NUESTRO style.css:
   - El padding-top:60px GLOBAL de las filas (F5·1) → 40px, scopeado a body.home (otras
     páginas siguen en 60). 40 deja respiro para que el título despeje el header sticky.
   - El padding-top:120px de la sección "Nuestros clientes" (línea ~536) era para centrar
     los logos en el fondo gris en DESKTOP; al apilar en tablet sobra → 0 (el aire lo da
     ya el row de 40). */
@media (max-width: 980px) {
	body.home .et_pb_section:not([class*="_tb_header"]):not([class*="_tb_footer"]) > .et_pb_row {
		padding-top: 40px !important;
	}
	body.home .et_pb_section_8.et_pb_section {
		padding-top: 0 !important;
	}
}


/******** F10·6 · Home tablet: SERVICIOS pegado arriba + NUESTROS CLIENTES centrado ********/
/* F10·6a · SERVICIOS: la columna del título arrastra un padding-top ≈211px COMPILADO en el
   CSS de Autoptimize (Divi) que NO se puede quitar desde el builder (el cliente lo intentó
   todo y no responde). Lo anulamos en tablet para que el título suba a su parte superior.
   F10·6b · "Nuestros clientes": el cliente lo centró en el builder pero nuestras reglas flex
   (F4·3/F6·2) lo dejaban a la izquierda en tablet. Centramos el contenido de la columna del
   título (heading + texto) y la alineación del botón (Divi alinea el botón con text-align
   en su wrapper). */
@media (max-width: 980px) {
	body.home .et_pb_section_1 > .et_pb_row_0 > .et_pb_column {
		padding-top: 0 !important;
	}
	body.home .et_pb_section_8 .et_pb_column_10,
	body.home .et_pb_section_8 .et_pb_column_10 .et_pb_text,
	body.home .et_pb_section_8 .et_pb_column_10 .et_pb_text *,
	body.home .et_pb_section_8 .et_pb_column_10 h1,
	body.home .et_pb_section_8 .et_pb_column_10 h2,
	body.home .et_pb_section_8 .et_pb_column_10 h3 {
		text-align: center !important;
	}
	body.home .et_pb_section_8 .et_pb_column_10 .et_pb_button_wrapper,
	body.home .et_pb_section_8 .et_pb_column_10 [class*="et_pb_button_alignment"] {
		text-align: center !important;
	}
	/* Las inner rows del specialty traen max-width:75% + margin:0 → el bloque queda
	   pegado a la IZQUIERDA y el text-align:center solo centra DENTRO de ese bloque, no
	   respecto a la sección. Con margin auto centramos el bloque entero en la columna. */
	body.home .et_pb_section_8 .et_pb_column_10 .et_pb_row_inner {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}


/******** F10·7 · Home tablet: SERVICIOS menos aire + NOTICIAS 2 columnas ********/
/* F10·7a · SERVICIOS: el row global de F10·5 (40px) gana por especificidad (lleva los
   :not([class*=_tb_*])), así que para bajarlo SOLO en servicios replicamos esa firma +
   et_pb_section_1 y dejamos el row en 24px (gap ≈61, antes 77 → "algo menos"). */
@media (max-width: 980px) {
	body.home .et_pb_section_1:not([class*="_tb_header"]):not([class*="_tb_footer"]) > .et_pb_row {
		padding-top: 24px !important;
	}
}

/* F10·7b · NOTICIAS grid 2 columnas en tablet. El grid es salvattore (masonry): Divi
   genera UNA `.column.size-1of1` con los posts apilados a ≤767 (rango bajo de tablet) y
   DOS `.column.size-1of2` a ≥768. Solo en 581–767 forzamos esa única columna a flex-wrap
   con posts al 48% → 2 por fila. A ≥768 ya es 2-col nativo; a ≤580 (móvil) queda 1-col. */
@media (min-width: 581px) and (max-width: 767px) {
	body.home .et_pb_section_7 .et_pb_blog_0 .column {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: space-between !important;
	}
	body.home .et_pb_section_7 .et_pb_blog_0 .column .et_pb_post {
		width: 48% !important;
		float: none !important;
		margin: 0 0 30px !important;
	}
}


/*════════════════════════════════════════════════════════════
  FASE 11 — 2026-06-25  ·  Móvil (≤580) hero + Noticia detalle (≤980)
  ════════════════════════════════════════════════════════════*/

/******** F11·1 · Hero móvil: título grande unificado a 32px (≤580) ********/
/* En móvil el H1 del hero estaba inconsistente: 45px (carpintería 423 vía C1 línea 925 +
   constructora 421 línea 1222) vs 32px (proyectos/noticias, default Divi). Unificamos
   TODOS los heroes interiores a 32px SOLO en ≤580. Solo el título grande (h1), no el
   eyebrow. Va al final + !important para ganar a C1 y a la regla 421. */
@media (max-width: 580px) {
	body.page-id-423 .et_pb_section_0 h1,
	body.page-id-421 .et_pb_section_0 h1,
	body.page-id-417 .et_pb_section_0 h1,
	body.page-id-313 .et_pb_section_0 h1,
	body.page-id-320 .et_pb_section_0 h1,
	body.page-id-425 .et_pb_section_0 h1 {
		font-size: 32px !important;
	}
}

/******** F11·2 · Noticia detalle: artículo y entradas recientes apilados (≤980) ********/
/* F9·1 (línea 1679) hace la fila body flex SIN media query → el sidebar fijo (320px)
   aplastaba el artículo en tablet/móvil (artículo 301px @768, 115px @414). En ≤980
   apilamos en columna: artículo ARRIBA (order:0), entradas recientes ABAJO (order:1).
   Para INVERTIR (recientes arriba) basta poner el sidebar (_1) en order:-1. */
@media (max-width: 980px) {
	body.single-post .et_pb_row_0_tb_body {
		flex-direction: column;
	}
	body.single-post .et_pb_row_0_tb_body > .et_pb_column_0_tb_body,
	body.single-post .et_pb_row_0_tb_body > .et_pb_column_1_tb_body {
		flex: 0 0 auto !important;
		width: 100% !important;
	}
	body.single-post .et_pb_row_0_tb_body > .et_pb_column_0_tb_body { order: 0; }
	body.single-post .et_pb_row_0_tb_body > .et_pb_column_1_tb_body { order: 1; }
}


/*════════════════════════════════════════════════════════════
  FASE 12 — 2026-06-25  ·  Móvil (≤580): header, heroes, justify, proyectos
  ════════════════════════════════════════════════════════════*/
@media (max-width: 580px) {

	/* F12·1 · Header (y resto) menos alto: anula el padding-bottom:40 de la regla legacy
	   @1024 (body .et_pb_section) que metía blanco bajo el header sticky. Las secciones de
	   contenido con regla propia (F4·3b 60, etc.) no se afectan (mayor especificidad).
	   Bonus: quita también el hueco blanco bajo los heroes en móvil. */
	body .et_pb_section {
		padding-bottom: 0 !important;
	}

	/* F12·2 · Home hero: quitar el aire. El título del slider arrastra padding-top:171px
	   (regla legacy %) + margin-bottom:30. Lo subimos (padding-top 0) y lo juntamos con la
	   descripción (mb 10). NO se toca .et_pb_column_0 globalmente: los heroes de carpintería/
	   constructora/proyectos dependen de ESE 203px para que su título despeje el header. */
	body.home .et_pb_slider .et_pb_slide_0.et_pb_slide .et_pb_slide_description .et_pb_slide_title {
		padding-top: 0 !important;
		margin-bottom: 10px !important;
	}

	/* F12·3 · Carpintería hero: que se vea MÁS cielo (la estructura tapaba el texto). El row
	   es casi cuadrado (399x391) y la imagen es ancha (1.5:1) → cover recorta en horizontal y
	   se ve la imagen entera en vertical, así que background-position-Y NO sirve. Hacemos zoom
	   por altura (auto 220% ≈ resolución nativa, sin pixelar) anclado arriba: muestra la franja
	   superior (cielo + estructura) y recorta el hormigón de abajo → título más legible. */
	body.page-id-423 .et_pb_section_0 > .et_pb_row {
		background-size: auto 220% !important;
		background-position: center top !important;
	}

	/* F12·4 · Quitar justificación de textos (en móvil, líneas cortas → ríos de espacio).
	   .et_pb_text_align_justified es la clase de Divi para módulos justificados → caza
	   todos los del sitio. Se mantienen los selectores de contenido post/project (que no
	   son módulos Divi de texto). */
	.et_pb_text_align_justified,
	.project .entry-content,
	.post-content .post-content-inner,
	.et_pb_post .entry-content {
		text-align: left !important;
	}

	/* F12·5 · Proyectos: hero más bajo + tags más arriba. El hero col0 arrastra
	   padding-top:203px (legacy %) → lo bajamos a 40 (scopeado a proyectos, sin glue) y
	   subimos los tags reduciendo el padding-top de su sección (sec_1). */
	/* min-height:0 quita el hueco VACÍO de abajo (la sección traía min-height:405); el
	   padding-top:160 mantiene el título despejando el header (~110px) sin el aire sobrante.
	   Resultado: hero ~250px (antes 405) con el título visible. */
	body.page-id-417 .et_pb_section_0 {
		min-height: 0 !important;
	}
	body.page-id-417 .et_pb_section_0 .et_pb_column_0 {
		padding-top: 160px !important;
	}
	body.page-id-417 .et_pb_section_1 {
		padding-top: 20px !important;
	}

	/* F12·6 · Tarjetas de proyecto: categoría (post-meta gris) pegada al título. */
	.et_pb_portfolio_item .et_pb_module_header {
		margin-bottom: 6px !important;
	}

	/* F12·7 · Empresa "EL VALOR DE LAS PERSONAS" (sec_2): título a la IZQUIERDA en móvil.
	   La regla de ≤980 (línea ~1273) lo centra con !important → en Divi no se puede mover.
	   Aquí lo devolvemos a left SOLO en ≤580 (en tablet 581-980 sigue centrado). */
	body.page-id-425 .et_pb_section_2 > .et_pb_row > .et_pb_column:not(:has(.et_pb_image)) h1,
	body.page-id-425 .et_pb_section_2 > .et_pb_row > .et_pb_column:not(:has(.et_pb_image)) h2,
	body.page-id-425 .et_pb_section_2 > .et_pb_row > .et_pb_column:not(:has(.et_pb_image)) h3,
	body.page-id-425 .et_pb_section_2 > .et_pb_row > .et_pb_column:not(:has(.et_pb_image)) h4 {
		text-align: left !important;
	}
}


/* ============================================================
   ACCESIBILIDAD · auditoría Lighthouse (jul 2026)
   Solo arreglos SIN cambio visual. El contraste de botones
   (blanco sobre #a3bbcd, 1.99:1) queda pendiente: no se puede
   cumplir AA sin cambiar colores → decisión del cliente.
   ============================================================ */

/* A11Y·2 · Tamaño mínimo de toque 24px (WCAG 2.2): enlaces tel:/mailto: del
   texto de contacto. El padding agranda el área táctil y el margen negativo
   lo compensa → el layout NO se mueve, solo crece la zona clicable. */
.et_pb_text_inner a[href^="mailto:"],
.et_pb_text_inner a[href^="tel:"] {
	display: inline-block;
	padding-block: 4px;
	margin-block: -4px;
}