/*
Theme Name: Ecohorbor Child
Theme URI: https://fortaseguridad.mx/
Author: FORTA Seguridad
Description: Tema hijo de Ecohorbor para fortaseguridad.mx. Contiene las personalizaciones del sitio para que el tema padre pueda actualizarse sin perder cambios.
Template: ecohorbor
Version: 1.0.0
Requires PHP: 8.0
Text Domain: ecohorbor-child
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Las personalizaciones de CSS van debajo de esta linea. */

/* Barra de progreso: etiqueta de porcentaje posicionada sobre la barra.
   El color sigue el Color Global "Azul FORTA" (Ajustes del sitio > Colores). */
.elementor-widget-progress .elementor-progress-wrapper {
	position: relative;
}

.elementor-widget-progress .elementor-progress-percentage {
	position: absolute;
	left: -65px;
	top: -15px;
	width: 50px;
	height: 43px;
	line-height: 43px;
	padding-right: 0 !important;
	text-align: center;
	background: var( --e-global-color-primary );
	color: var( --e-global-color-fbblanco );
}

/* Caja de caracteristicas: separacion del icono. */
.cea-view-framed .feature-box-modern .cea-featured-icon {
	margin-right: 6px;
}

/* Contadores: color del valor en tabletas y moviles. */
@media only screen and (max-width: 1024px) {
	.elementor-element .cea-counter-wrapper .counter-value h3 {
		margin-bottom: 0 !important;
		color: var( --e-global-color-secondary ) !important;
	}
}

/* Circulo decorativo giratorio de la seccion de contacto. */
.boxed-border:before {
	position: absolute;
	top: 21px;
	left: -23px;
	content: "";
	width: 600px;
	height: 546px;
	background: transparent;
	border: 2px dashed var( --e-global-color-primary );
	border-radius: 50%;
	z-index: 0;
	-webkit-animation: rotateCircle 150s linear infinite;
	animation: rotateCircle 150s linear infinite;
}

@-webkit-keyframes rotateCircle {
	0%   { transform: rotate( 0 ); }
	100% { transform: rotate( 360deg ); }
}

@keyframes rotateCircle {
	0%   { transform: rotate( 0 ); }
	100% { transform: rotate( 360deg ); }
}

/* Boton de envio de los formularios de contacto (Contact Form 7).
   El widget no expone controles nativos para este boton, por lo que el estilo
   vive aqui y toma los Colores Globales del sitio. */
.contact-form-wrapper input.wpcf7-form-control.wpcf7-submit {
	border-radius: 999px;
	padding: 0 30px;
	margin-top: 14px;
}

/* Acordeon de preguntas frecuentes: numerador y espaciado del contenido. */
.faq-count {
	position: absolute;
	top: 12px;
	font-weight: 500 !important;
	font-size: 14px !important;
}

.cea-accordion .cea-accordion-content .card-body {
	padding: 0 0 15px;
	margin-top: -7px;
}

/* Icono disparador de la ventana emergente: anillo con el color global. */
.cea-view-framed .cea-popup-anything.popup-trigger-icon:after,
.cea-view-framed .cea-popup-anything.popup-trigger-icon:before {
	background: transparent !important;
	border: 1px solid var( --e-global-color-primary );
}

/* Carrusel de contenido: permite que las tarjetas sobresalgan del contenedor. */
.cea-carousel-style-classic .owl-carousel .owl-stage-outer {
	overflow: visible;
}

/* Carrusel de servicios: separador entre tarjetas, oculto en tabletas y moviles. */
.portfolio-style-classic .owl-carousel .owl-item {
	border-right: solid 1px rgb( 234 234 234 / 11% );
}

@media only screen and (max-width: 1024px) {
	.portfolio-style-classic .owl-carousel .owl-item {
		border: none;
	}
}

/* ==========================================================================
   Renovacion visual FORTA
   Los colores salen de los Colores Globales (Ajustes del sitio > Colores),
   de modo que cambiar la paleta ahi actualiza todo lo de abajo.

   Las secciones con fondo oscuro reciben la clase .forta-fondo-oscuro desde
   ecohorbor_child_marcar_fondos_oscuros() (functions.php), porque el CSS no
   puede saber por si mismo si el fondo heredado es claro u oscuro.
   ========================================================================== */

:root {
	--forta-radio: 16px;
	--forta-radio-sm: 10px;
	--forta-sombra: 0 1px 2px rgb( 16 32 45 / 4% ), 0 10px 26px -12px rgb( 16 32 45 / 22% );
	--forta-sombra-alta: 0 4px 10px rgb( 16 32 45 / 6% ), 0 22px 46px -16px rgb( 16 32 45 / 34% );
	--forta-transicion: transform .28s ease, box-shadow .28s ease, background-color .28s ease, border-color .28s ease, color .28s ease;
}

/* --- Botones -------------------------------------------------------------- */

.cea-button,
.wpcf7-submit,
.zozo-btn,
.elementor-widget-button .elementor-button {
	border-radius: 999px;
	padding-left: 34px;
	padding-right: 34px;
	letter-spacing: .06em;
	font-weight: 600;
	transition: var( --forta-transicion );
	will-change: transform;
}

.cea-button:hover,
.wpcf7-submit:hover,
.zozo-btn:hover,
.elementor-widget-button .elementor-button:hover {
	transform: translateY( -2px );
	box-shadow: 0 10px 22px -8px rgb( 16 32 45 / 45% );
}

/* --- Enlaces "Leer mas" --------------------------------------------------- */
/* El tema dibuja el triangulo y la flecha como pseudoelementos absolutos con
   posiciones calculadas para un enlace suelto, asi que aqui no se convierte en
   pastilla: solo se refuerza el color de marca al pasar el raton. */

.post-more a,
a.read-more {
	transition: var( --forta-transicion );
}

.post-more a:hover,
a.read-more:hover {
	color: var( --e-global-color-primary );
}

/* --- Antetitulo de seccion: pastilla -------------------------------------- */

.section-title-wrapper .sub-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	border-radius: 999px;
	background-color: rgb( 93 149 206 / 12% );
	letter-spacing: .14em;
	line-height: 1;
}

.forta-fondo-oscuro .section-title-wrapper .sub-title {
	background-color: rgb( 255 255 255 / 12% );
}

.section-title-wrapper .section-title {
	letter-spacing: -.02em;
}

/* --- Tarjetas: cajas de caracteristicas ----------------------------------- */

.feature-box-wrapper.feature-box-default {
	background-color: var( --e-global-color-fbblanco );
	border: 1px solid var( --e-global-color-fbborde );
	border-radius: var( --forta-radio );
	padding: 32px 28px;
	height: 100%;
	box-shadow: var( --forta-sombra );
	transition: var( --forta-transicion );
}

.feature-box-wrapper.feature-box-default:hover {
	transform: translateY( -6px );
	border-color: var( --e-global-color-primary );
	box-shadow: var( --forta-sombra-alta );
}

.forta-fondo-oscuro .feature-box-wrapper.feature-box-default {
	background-color: rgb( 255 255 255 / 7% );
	border-color: rgb( 255 255 255 / 16% );
	box-shadow: none;
}

.forta-fondo-oscuro .feature-box-wrapper.feature-box-default:hover {
	background-color: rgb( 255 255 255 / 13% );
	border-color: rgb( 255 255 255 / 32% );
	box-shadow: none;
}

/* Icono dentro de un disco del color de marca. */
.feature-box-wrapper .cea-feature-box-img {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	margin-bottom: 20px;
	border-radius: 50%;
	background-color: rgb( 93 149 206 / 14% );
}

.forta-fondo-oscuro .feature-box-wrapper .cea-feature-box-img {
	background-color: rgb( 255 255 255 / 12% );
}

.feature-box-wrapper .cea-feature-box-img img {
	width: 38px;
	height: auto;
	border-radius: 999px;
}

/* --- Tarjetas: entradas del blog ------------------------------------------ */

.cea-block-primary,
.cea-block-secondary {
	background-color: var( --e-global-color-fbblanco );
	border: 1px solid var( --e-global-color-fbborde );
	border-radius: var( --forta-radio );
	overflow: hidden;
	box-shadow: var( --forta-sombra );
	transition: var( --forta-transicion );
}

.cea-block-primary:hover,
.cea-block-secondary:hover {
	transform: translateY( -6px );
	box-shadow: var( --forta-sombra-alta );
}

/* --- Servicios (carrusel de portafolio) ----------------------------------- */
/* La tarjeta del tema superpone texto claro sobre la fotografia, asi que aqui
   solo se redondea la imagen y se anade la elevacion al pasar el raton. No
   lleva placa blanca: taparia el texto. */

.portfolio-inner {
	transition: var( --forta-transicion );
}

.portfolio-inner:hover {
	transform: translateY( -6px );
}

.portfolio-inner .post-thumb img {
	border-radius: var( --forta-radio );
}

/* --- Imagenes de contenido ------------------------------------------------ */

.elementor-widget-image img,
.post-thumb img,
.portfolio-thumb img {
	border-radius: var( --forta-radio-sm );
}

/* El logotipo, los iconos y los logotipos de certificacion no llevan redondeo. */
.elementor-widget-zozo_hf_logo img,
.site-logo img,
.cea-featured-icon img,
.elementor-image-gallery img {
	border-radius: 0;
}

/* La miniatura de la tarjeta del blog va a ras del borde de la tarjeta. */
.cea-block-primary .post-thumb img,
.cea-block-secondary .post-thumb img {
	border-radius: 0;
	width: 100%;
}

/* --- Cabecera fija -------------------------------------------------------- */

.zhf-sticky-active,
.elementor-sticky--effects {
	box-shadow: 0 4px 18px -8px rgb( 16 32 45 / 35% );
}

/* --- Menu de navegacion --------------------------------------------------- */
/* El widget zozo_hf_menu expone color de fondo y relleno del elemento, pero no
   su radio; la pastilla se cierra aqui. Todo lo demas se controla desde los
   ajustes del widget en Elementor. */

.zhf-nav-menu > li > a {
	border-radius: 999px;
	transition: background-color .2s ease, color .2s ease;
}

.zhf-nav-menu .sub-menu {
	overflow: hidden;
}

/* La pagina actual conserva la pastilla. El widget solo expone los estados de
   foco y raton, no el de pagina en curso. */
.zhf-nav-menu > li.current-menu-item > a,
.zhf-nav-menu > li.current-menu-ancestor > a,
.zhf-nav-menu > li.current_page_item > a {
	background-color: rgb( 255 190 0 / 18% );
}

/* --- Franja de contacto sobre el pie -------------------------------------- */
/* Los telefonos son el contenido del boton: partirlos en dos lineas los hace
   ilegibles de un vistazo. Se apunta por posicion porque Elementor no llega a
   volcar _css_classes en estos contenedores de plantilla. */

footer > .elementor > .e-con:first-child .elementor-button {
	white-space: nowrap;
}

/* --- Cabecera fija y menu movil ------------------------------------------- */
/* El complemento fija "background: #ffff" en la cabecera pegajosa. Con la
   cabecera en marino eso la volvia blanca al hacer scroll y los enlaces, que
   ahora son blancos, desaparecian. */

.zhf-sticky-obj .zhf-header-sticky,
.zhf-sticky-obj .zhf-header-sticky .e-con,
.elementor-container.elementor-column-gap-default.zhf-sticky-head {
	background-color: var( --e-global-color-secondary );
}

/* En moviles el menu se despliega dentro de la cabecera marino: los elementos
   necesitan una separacion visible entre si. */
@media only screen and (max-width: 1024px) {
	.zhf-menu-wrap.mobile-menu-active .zhf-nav-menu > li + li {
		border-top: 1px solid rgb( 255 255 255 / 10% );
	}

	.zhf-menu-wrap.mobile-menu-active .zhf-nav-menu > li > a {
		border-radius: 0;
	}
}

/* --- Barra de navegacion fija --------------------------------------------- */
/* La opcion "sticky" del complemento se engancha a elementor/element/section,
   y esta cabecera esta construida con contenedores (e-con), asi que nunca se
   dispara. Se resuelve con position:sticky, sin JavaScript.
   Se apunta a la ultima franja de la cabecera por posicion: Elementor no
   vuelca _css_classes en los contenedores de esta plantilla. */

/* La franja pegajosa tiene que ser el propio <header>: un contenedor interno
   solo puede quedarse fijo dentro de la caja de su padre, que mide lo que mide
   la cabecera, y por eso se perdia al primer desplazamiento. */
/* El tema pone overflow:hidden en .ecohorbor-body-inner, y eso anula
   position:sticky en todo lo que cuelga de el. overflow-x:clip recorta igual
   en horizontal pero no crea contenedor de desplazamiento.
   Navegadores sin soporte de "clip" (Safari anterior a 16) simplemente no
   recortan; la cabecera fija sigue funcionando. */
.ecohorbor-body-inner {
	overflow: visible;
	overflow-x: clip;
}

header {
	position: sticky;
	top: 0;
	z-index: 99;
}

header > .elementor > .e-con:last-child {
	background-color: var( --e-global-color-secondary );
}

/* ==========================================================================
   Renovacion visual FORTA - fase 2: "Blindaje"
   Cambia el lenguaje visual de "plantilla redondeada azul" a uno angular y de
   alto contraste: esquinas rectas y ambar institucional como acento.
   ========================================================================== */

:root {
	/* Las tarjetas, botones e imagenes pasan de pastilla a canto recto.
	   Redefinir los tokens de la fase 1 propaga el cambio a todo el sitio. */
	--forta-radio: 3px;
	--forta-radio-sm: 2px;
	/* Ambar legible sobre fondo claro (punto 9 del alcance, accesibilidad).
	   El ambar de marca sobre blanco da 1,66:1, muy por debajo del 4,5:1 que
	   pide la norma para texto normal; este ocre da 4,5:1 y sigue siendo de la
	   misma familia. El ambar de marca se queda para trazos, placas y para
	   cualquier texto sobre marino, donde da 9,96:1. */
	--forta-ambar-texto: #996F00;
	--forta-sombra: 0 1px 0 rgb( 16 32 45 / 6% ), 0 14px 30px -20px rgb( 16 32 45 / 45% );
	--forta-sombra-alta: 0 2px 0 rgb( 16 32 45 / 8% ), 0 26px 46px -22px rgb( 16 32 45 / 55% );
}

/* --- Botones: pastilla -> canto recto ------------------------------------- */

.cea-button,
.wpcf7-submit,
.zozo-btn,
.elementor-widget-button .elementor-button,
.contact-form-wrapper input.wpcf7-form-control.wpcf7-submit {
	border-radius: 3px;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 700;
}

/* --- Antetitulo: pastilla azul -> regla y versalitas en ambar -------------- */
/* .sub-title ya es inline-flex, asi que el trazo entra como elemento flexible
   y se alinea solo tanto en secciones centradas como en las alineadas a la
   izquierda, sin tener que saber cual es cual desde CSS. */

.section-title-wrapper .sub-title {
	padding: 0;
	border-radius: 0;
	background-color: transparent;
	font-weight: 700;
	letter-spacing: .22em;
}

.forta-fondo-oscuro .section-title-wrapper .sub-title {
	background-color: transparent;
}

/* El tema ya define .sub-title::before (su punto decorativo) en position
   absolute. Heredar esa posicion pintaba el trazo ambar ENCIMA del texto en
   toda pagina donde .sub-title no acaba siendo flexible, asi que la posicion,
   la caja y la separacion se declaran aqui de forma explicita: asi funciona
   tanto si el contenedor es flexible como si es inline-block. */
/* El tema declara este pseudoelemento con
   `.section-title-wrapper .title-wrap > *.sub-title:before`: tres clases y un
   elemento, y ademas le mete un glifo de bootstrap-icons (884) en position
   absolute. Con dos clases no se le gana, de ahi el selector largo. */
.ecohorbor-body-inner .section-title-wrapper .title-wrap > .sub-title::before,
.section-title-wrapper .sub-title::before {
	content: "";
	position: static;
	inset: auto;
	display: inline-block;
	vertical-align: middle;
	flex: none;
	width: 38px;
	height: 3px;
	margin-right: 14px;
	font-size: 0;
	background-color: var( --e-global-color-accent );
}

/* Placa azul translucida que el tema dibuja detras del antetitulo: sobra
   ahora que el trazo ambar cumple esa funcion. */
.section-title-wrapper .sub-title::after {
	display: none;
}

.section-title-wrapper .sub-title,
.section-title-wrapper .sub-title .subtitle-dots {
	color: var( --forta-ambar-texto ) !important;
}

/* Sobre franja oscura vuelve el ambar de marca, que ahi si contrasta. */
.forta-fondo-oscuro .section-title-wrapper .sub-title,
.forta-fondo-oscuro .section-title-wrapper .sub-title .subtitle-dots {
	color: var( --e-global-color-accent ) !important;
}

/* --- Titulos de seccion: mas peso y menos interletraje -------------------- */

.section-title-wrapper .section-title {
	letter-spacing: -.03em;
	font-weight: 700;
}

/* --- Tarjetas: barra ambar superior --------------------------------------- */
/* La barra arranca corta y se extiende de lado a lado al pasar el raton: es
   el motivo que unifica cajas de caracteristicas, entradas y servicios. */

.feature-box-wrapper.feature-box-default,
.cea-block-primary,
.cea-block-secondary {
	position: relative;
}

.feature-box-wrapper.feature-box-default::before,
.cea-block-primary::before,
.cea-block-secondary::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 58px;
	height: 4px;
	background-color: var( --e-global-color-accent );
	transition: width .35s ease;
}

.feature-box-wrapper.feature-box-default:hover::before,
.cea-block-primary:hover::before,
.cea-block-secondary:hover::before {
	width: 100%;
}

/* La elevacion al pasar el raton pierde el desplazamiento vertical: con canto
   recto el borde ambar ya marca el estado. */
.feature-box-wrapper.feature-box-default:hover {
	transform: none;
	border-color: var( --e-global-color-accent );
}

/* --- Cajas de caracteristicas: texto a la izquierda ------------------------ */
/* El texto centrado y en gris claro es lo que hacia que las tarjetas se leyeran
   como plantilla. Alinearlo a la izquierda y subir el contraste cambia el
   aspecto de la pagina entera. */

.feature-box-wrapper.feature-box-default {
	padding: 40px 30px 34px;
}

.feature-box-wrapper.feature-box-default .feature-box-inner,
.feature-box-wrapper.feature-box-default .feature-box-title,
.feature-box-wrapper.feature-box-default .fbox-content {
	text-align: left !important;
}

.feature-box-wrapper.feature-box-default .fbox-content {
	color: var( --e-global-color-text );
	opacity: .82;
}

.forta-fondo-oscuro .feature-box-wrapper.feature-box-default .fbox-content {
	color: var( --e-global-color-fbblanco );
	opacity: .74;
}

/* --- Icono: disco azul -> placa ambar ------------------------------------- */

.feature-box-wrapper .cea-feature-box-img {
	width: 64px;
	height: 64px;
	margin: 0 0 24px;
	border-radius: 3px;
	background-color: rgb( 255 190 0 / 16% );
}

.forta-fondo-oscuro .feature-box-wrapper .cea-feature-box-img {
	background-color: rgb( 255 190 0 / 20% );
}

.feature-box-wrapper .cea-feature-box-img img {
	width: 34px;
	border-radius: 0;
}

/* --- Flechas de los carruseles: circulo azul -> placa marino --------------- */

.owl-nav button.owl-prev,
.owl-nav button.owl-next {
	border-radius: 3px !important;
	background-color: var( --e-global-color-secondary ) !important;
	color: var( --e-global-color-fbblanco ) !important;
	transition: var( --forta-transicion );
}

.owl-nav button.owl-prev:hover,
.owl-nav button.owl-next:hover {
	background-color: var( --e-global-color-accent ) !important;
	color: var( --e-global-color-secondary ) !important;
}

/* --- Enlaces "Leer mas": acento ambar ------------------------------------- */

.post-more a:hover,
a.read-more:hover {
	color: var( --forta-ambar-texto );
}

/* --- Franjas oscuras: canto recto ----------------------------------------- */
/* Aqui hubo un recorte diagonal (`clip-path`) en las franjas oscuras. Se
   retira el 4 de septiembre por indicacion del cliente: la cuna blanca que
   dejaba entre secciones se lee como un fallo, y ademas recortaba por arriba
   lo que cayera en esa banda (se estaba comiendo la mitad superior de la
   palabra "Vigilancia" en la portada).
   Las franjas oscuras quedan a canto recto, como el resto del sistema. */

/* --- Cabecera: el boton principal acompana el canto recto ----------------- */

header .elementor-widget-button .elementor-button {
	border-radius: 3px;
}

/* --- Tarjetas de igual altura y relleno parejo ----------------------------- */
/* Las columnas ya se estiran a la altura de la fila, pero la tarjeta no las
   llenaba: el widget es un bloque de altura automatica, asi que el height:100%
   de la tarjeta no tenia contra que resolverse. Se hace crecer el widget como
   elemento flexible de la columna y entonces el 100% si aplica. */

/* Sin el selector de padre: flex-grow y align-self son inertes si el padre no
   es un contenedor flexible, asi que la regla es segura de forma global y no
   depende de que la columna lleve la clase .e-con (hay columnas anidadas que
   no la llevan). */
.elementor-widget-ceafeaturebox {
	/* Elementor declara flex-grow: var( --flex-grow ) con el selector
	   .e-con > .elementor-widget, que gana en especificidad: se fija la variable
	   y ademas la propiedad como prioritaria. */
	--flex-grow: 1;
	flex-grow: 1 !important;
	align-self: stretch;
}


.elementor-widget-ceafeaturebox > .elementor-widget-container.feature-box-default {
	height: 100%;
}

.feature-box-wrapper.feature-box-default .feature-box-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.feature-box-wrapper.feature-box-default .fbox-content {
	margin-bottom: 0;
}

/* El widget deja un boton sin destino en cada caja: 30 px de hueco muerto que
   descuadraba el relleno inferior. Un enlace sin href no es un boton. */
.feature-box-wrapper .cea-button-wrapper a.cea-button:not( [href] ) {
	display: none;
}

.feature-box-wrapper.feature-box-default {
	padding: 38px 30px;
}

/* --- Prioridad frente al CSS por elemento de Elementor -------------------- */
/* Elementor imprime radio y relleno con el selector del elemento concreto
   (.elementor-NNN .elementor-element-XXX ...), que gana en especificidad a
   cualquier selector de tema razonable. Estas tres declaraciones son las que
   definen el lenguaje visual, asi que aqui se marcan como prioritarias. */

.cea-button,
.wpcf7-submit,
.zozo-btn,
.elementor-widget-button .elementor-button,
.contact-form-wrapper input.wpcf7-form-control.wpcf7-submit {
	border-radius: 3px !important;
}

.elementor-widget-ceafeaturebox > .elementor-widget-container.feature-box-default {
	padding: 38px 30px !important;
}

/* --- Tarjetas dentro de los carruseles: misma altura ----------------------- */
/* Owl coloca los elementos como inline-block y les fija el ancho en linea, asi
   que flex-grow no les llega. Convertir la pista en fila flexible mantiene esos
   anchos y estira todos los elementos a la altura del mas alto. */

.owl-carousel .owl-stage {
	display: flex;
}

.owl-carousel .owl-stage > .owl-item {
	display: flex;
	flex-direction: column;
}

.owl-carousel .owl-stage > .owl-item > * {
	width: 100%;
	flex-grow: 1;
}

/* Las columnas de tarjetas traen relleno propio desde Elementor, distinto en
   cada una (0, 10 y 35 px): eso las dejaba de distinto alto y, sobre todo, de
   distinto ancho (364 / 325 / 363 px en la misma fila). Se anula el relleno de
   la columna y la separacion pasa a ser el hueco de la fila, igual para todas.
   Asi las tarjetas quedan del mismo tamano y con el mismo margen interior. */
/* Solo en escritorio: en tableta y movil esas columnas traen 15 px de relleno
   lateral que son la separacion con el borde de la pantalla. El descuadre que
   se corrige aqui es de la rejilla de tres columnas, que solo existe arriba. */
/* Compatibilidad (punto 11 del alcance): `:has()` no existe en Firefox
   anterior al 121 ni en Safari anterior al 15.4, y ahi las tarjetas volverian
   a quedar de distinto ancho, que es justo lo que esta regla arregla. Se
   duplica el selector con una clase que pone
   ecohorbor_child_marcar_filas_de_tarjetas() en el navegador: los navegadores
   con `:has()` usan la primera forma, los demas la clase. */

@media only screen and ( min-width: 1025px ) {
	.e-con:has( > .elementor-widget-ceafeaturebox ),
	.e-con.forta-columna-tarjeta {
		padding: 0;
	}
}

.e-con-inner:has( > .e-con > .elementor-widget-ceafeaturebox ),
.e-con:has( > .e-con > .elementor-widget-ceafeaturebox ),
.forta-fila-tarjetas {
	column-gap: 30px;
}

/* --- Tarjetas del blog: llenan su columna --------------------------------- */
/* La rejilla del blog es Bootstrap: la columna ya se estira con la fila, pero
   la tarjeta es un bloque de altura automatica dentro de ella. */

.blog-multi-layout-1 .row > [class*="col-"] {
	display: flex;
}

.blog-multi-layout-1 .row > [class*="col-"] > .cea-block-primary,
.blog-multi-layout-1 .row > [class*="col-"] > .cea-block-secondary {
	flex-grow: 1;
	/* La tarjeta trae margen inferior propio: la separacion entre filas ya la
	   da la rejilla, y ese margen la dejaba mas corta que su vecina. */
	margin-bottom: 0;
}

/* --- Listado del blog ----------------------------------------------------- */
/* El archivo del blog se habia quedado fuera de la renovacion: las entradas se
   leian como una lista plana y la fecha era una placa azul subrayada. Aqui
   reciben el mismo sistema de tarjeta que el resto del sitio. */

.ecohorbor-masonry article.post {
	position: relative;
	overflow: hidden;
	background-color: var( --e-global-color-fbblanco );
	border: 1px solid var( --e-global-color-fbborde );
	border-radius: var( --forta-radio );
	box-shadow: var( --forta-sombra );
	transition: var( --forta-transicion );
}

.ecohorbor-masonry article.post::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 58px;
	height: 4px;
	background-color: var( --e-global-color-accent );
	transition: width .35s ease;
}

.ecohorbor-masonry article.post:hover {
	border-color: var( --e-global-color-accent );
	box-shadow: var( --forta-sombra-alta );
}

.ecohorbor-masonry article.post:hover::before {
	width: 100%;
}

/* La miniatura va a ras del borde de la tarjeta. */
.ecohorbor-masonry article.post .post-thumb img {
	border-radius: 0;
	width: 100%;
}

/* --- Fecha de la entrada: placa azul subrayada -> placa ambar -------------- */

/* El tema pinta esta placa desde su CSS dinamico con selectores del tipo
   .blog .ecohorbor-masonry .top-meta-wrap ul.nav.post-meta > li.post-date a,
   que ganan a cualquier selector razonable: el color va como prioritario. */
/* La placa aparece en dos sitios con marcado distinto: dentro de .post-meta
   en el archivo del blog, y suelta sobre la miniatura en las tarjetas del
   widget. Las dos se tratan igual. */
.post-meta .post-date a,
.post-date > a {
	background-color: var( --e-global-color-accent ) !important;
	color: var( --e-global-color-secondary ) !important;
	border-radius: 3px !important;
	font-weight: 700;
	text-decoration: none;
}

.post-meta .post-date a:hover,
.post-date > a:hover {
	background-color: var( --e-global-color-secondary ) !important;
	color: var( --e-global-color-fbblanco ) !important;
}

/* --- Metadatos y navegacion lateral: sin subrayado ------------------------ */
/* El subrayado se deja solo en el texto del articulo, donde de verdad marca un
   enlace dentro de la prosa. En listas de categorias, etiquetas y widgets solo
   ensuciaba la lectura. */

.post-meta a,
.post-share-wrap a,
.widget_block li a,
.wp-block-tag-cloud a,
.wp-block-categories a,
.wp-block-latest-posts a,
.wp-block-archives a {
	text-decoration: none;
	transition: color .2s ease;
}

.post-meta a:hover,
.widget_block li a:hover,
.wp-block-tag-cloud a:hover,
.wp-block-categories a:hover,
.wp-block-latest-posts a:hover,
.wp-block-archives a:hover {
	color: var( --e-global-color-primary );
}

/* Etiquetas: pastillas grises subrayadas -> fichas de canto recto. */
.wp-block-tag-cloud a {
	display: inline-block;
	padding: 7px 12px;
	border: 1px solid var( --e-global-color-fbborde );
	border-radius: 3px;
	background-color: var( --e-global-color-fbfondoc );
	color: var( --e-global-color-secondary );
	font-size: 12px !important;
	font-weight: 600;
}

.wp-block-tag-cloud a:hover {
	background-color: var( --e-global-color-secondary );
	border-color: var( --e-global-color-secondary );
	color: var( --e-global-color-fbblanco );
}

/* --- Acordeon de preguntas frecuentes ------------------------------------- */

.cea-accordions .card.cea-accordion {
	border-radius: var( --forta-radio-sm );
	overflow: hidden;
}

/* --- Boton de envio del formulario de contacto ---------------------------- */
/* Era el unico boton de conversion que seguia en azul: en la pagina de
   contacto es la accion principal y tiene que leerse como las demas. */

.contact-form-wrapper input.wpcf7-form-control.wpcf7-submit {
	background-color: var( --e-global-color-accent );
	color: var( --e-global-color-secondary );
	border: 2px solid var( --e-global-color-accent );
	font-weight: 700;
}

.contact-form-wrapper input.wpcf7-form-control.wpcf7-submit:hover {
	background-color: var( --e-global-color-secondary );
	border-color: var( --e-global-color-accent );
	color: var( --e-global-color-fbblanco );
}

/* --- Barra movil que asomaba en escritorio -------------------------------- */
/* El elemento lleva las clases "header-mobilebar navbar". El sitio carga dos
   Bootstrap completos: 4.5.3 desde classic-elementor-addons-pro y 5.0.2 desde
   el tema. El segundo se encola DESPUES del "display:none" del propio tema, y
   como .navbar y .header-mobilebar tienen la misma especificidad (0,1,0), gana
   el ultimo: la barra de movil aparecia tambien en escritorio, sobre la
   cabecera.
   Se resuelve subiendo la especificidad a 0,2,0 en lugar de tocar los encolados
   del tema o del complemento, que otros componentes necesitan. */

/* Actualizado el 4 de septiembre: la barra se oculta en TODOS los anchos, no
   solo en escritorio. Comprobado en un iframe de 390 px: en movil aparecian
   dos sistemas de navegacion, uno encima del otro (esta barra con su logotipo,
   su hamburguesa y su lupa, y ademas la cabecera de Elementor con logotipo,
   hamburguesa y boton). Eran 398 px de cabecera antes del contenido. La que se
   queda es la de Elementor, que es la que lleva el diseno del sitio y funciona
   en todos los anchos. */
.ecohorbor-body-inner .header-mobilebar {
	display: none;
}

/* ==========================================================================
   Entrada individual, migas de pan y controles sueltos
   Esta plantilla se habia quedado fuera de la renovacion: enlaces subrayados,
   buscador azul y flechas circulares.
   ========================================================================== */

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

.breadcrumbs-wrap a,
.breadcrumb-wrap a {
	text-decoration: none;
	transition: color .2s ease;
}

.breadcrumbs-wrap a:hover,
.breadcrumb-wrap a:hover {
	color: var( --e-global-color-accent );
}

/* --- Buscador de la barra lateral ----------------------------------------- */

.wp-block-search__input {
	border: 1px solid var( --e-global-color-fbborde );
	border-radius: 3px;
	padding: 10px 12px;
}

.wp-block-search__input:focus {
	outline: none;
	border-color: var( --e-global-color-primary );
}

/* El tema apunta a este boton como button.wp-block-search__button (0,1,1), asi
   que hay que igualar la especificidad; al cargarse esta hoja despues, gana. */
button.wp-block-search__button {
	background-color: var( --e-global-color-secondary );
	color: var( --e-global-color-fbblanco );
	border: 0;
	border-radius: 3px;
	padding: 10px 20px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	transition: background-color .2s ease, color .2s ease;
}

button.wp-block-search__button:hover {
	background-color: var( --e-global-color-accent );
	color: var( --e-global-color-secondary );
}

/* --- Enlaces que heredaban el azul de Bootstrap --------------------------- */
/* Bootstrap 5 fija su propio color de enlace (#0d6efd) y se colaba en los
   titulos de "Post Recientes" y en la navegacion entre entradas, que no
   tienen color propio en el tema. Ver tambien la nota sobre el doble
   Bootstrap en la cabecera de este archivo. */

.wp-block-latest-posts__post-title,
.pagination-single a.previous-post,
.pagination-single a.next-post {
	color: var( --e-global-color-secondary );
	text-decoration: none;
	transition: color .2s ease;
}

.wp-block-latest-posts__post-title:hover,
.pagination-single a.previous-post:hover,
.pagination-single a.next-post:hover {
	color: var( --e-global-color-primary );
}

/* --- Flechas: circulo azul -> placa de canto recto ------------------------ */

.pagination-single .arrow,
a.back-to-top {
	border-radius: 3px !important;
	background-color: var( --e-global-color-secondary ) !important;
	color: var( --e-global-color-fbblanco ) !important;
	transition: background-color .25s ease, color .25s ease;
}

.pagination-single .arrow:hover,
a.back-to-top:hover {
	background-color: var( --e-global-color-accent ) !important;
	color: var( --e-global-color-secondary ) !important;
}

/* --- Acordeon y disparador de video --------------------------------------- */
/* El icono del acordeon es un glifo de Bootstrap Icons
   (bi-arrow-down-circle-fill), no una caja con fondo: el circulo forma parte
   del dibujo, asi que aqui solo cambia el color. */

/* Elementor imprime el color de estos dos controles con el selector del
   elemento concreto (.elementor-NNN .elementor-element-XXX ...), enlazado al
   Color Global "primary". Igualarlo desde el tema hijo exigiria repetir ese
   selector pagina por pagina, asi que aqui van como prioritarios. */
.cea-accordion-header .elementor-accordion-icon,
.cea-accordion-header .elementor-accordion-icon i {
	color: var( --e-global-color-accent ) !important;
}

.cea-accordion-header .nav-link:hover .elementor-accordion-icon,
.cea-accordion-header .nav-link:hover .elementor-accordion-icon i {
	color: var( --e-global-color-secondary ) !important;
}

/* El boton de reproduccion se queda redondo: es la forma que se reconoce como
   "reproducir". Solo pasa del azul al ambar de marca. */
.cea-popup-anything.popup-trigger-icon {
	background-color: var( --e-global-color-accent ) !important;
	color: var( --e-global-color-secondary ) !important;
	transition: background-color .25s ease, color .25s ease;
}

.cea-popup-anything.popup-trigger-icon:hover {
	background-color: var( --e-global-color-secondary ) !important;
	color: var( --e-global-color-accent ) !important;
}

/* --- Testimonios ---------------------------------------------------------- */
/* Se leian como bloques grises sueltos. Reciben el mismo sistema de tarjeta que
   el resto del sitio: placa, filete y barra ambar superior. El widget se usa
   tanto en la pagina de testimonios como en la seccion "Opiniones" del inicio. */

.testimonial-wrapper .testimonial-inner {
	position: relative;
	overflow: hidden;
	background-color: var( --e-global-color-fbblanco );
	border: 1px solid var( --e-global-color-fbborde );
	border-radius: var( --forta-radio );
	box-shadow: var( --forta-sombra );
	transition: var( --forta-transicion );
}

/* El tema ya usa ::before en esta tarjeta para la comilla decorativa, asi que
   la barra ambar va en ::after. */
.testimonial-wrapper .testimonial-inner::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 58px;
	height: 4px;
	background-color: var( --e-global-color-accent );
	transition: width .35s ease;
}

.testimonial-wrapper .testimonial-inner:hover {
	border-color: var( --e-global-color-accent );
	box-shadow: var( --forta-sombra-alta );
}

.testimonial-wrapper .testimonial-inner:hover::after {
	width: 100%;
}

/* Las fotos de los testimonios se quedan redondas: un retrato circular es la
   convencion y no compite con el canto recto de las tarjetas. */
.testimonial-wrapper img {
	border-radius: 50%;
}

/* --- Formulario de busqueda del tema (404 y widgets clasicos) ------------- */
/* Es distinto del bloque de busqueda de Gutenberg que ya se habia ajustado:
   este lo imprime searchform.php del tema padre. */

input.search-field {
	border: 1px solid var( --e-global-color-fbborde );
	border-radius: 3px;
	padding: 12px 14px;
}

input.search-field:focus {
	outline: none;
	border-color: var( --e-global-color-primary );
}

input.search-submit {
	background-color: var( --e-global-color-secondary );
	color: var( --e-global-color-fbblanco );
	border: 0;
	border-radius: 3px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	transition: background-color .2s ease, color .2s ease;
}

input.search-submit:hover {
	background-color: var( --e-global-color-accent );
	color: var( --e-global-color-secondary );
}

/* ==========================================================================
   4. Paginas interiores
   Todo lo que sigue afecta a las paginas que no son la portada: la cabecera
   de pagina que pinta el tema, las franjas azules que traia la plantilla y
   los widgets que solo aparecen en el interior del sitio.
   ========================================================================== */

/* --- Cabecera de pagina: foto + placa marino ------------------------------ */
/* El tema tapa la foto con un marino plano al 84 %, que apaga la imagen por
   igual en todo el ancho. Se cambia por un degradado direccional: opaco donde
   cae el titulo y casi limpio en el lado contrario, para que la fotografia se
   vea. El canto ambar inferior repite el motivo de las tarjetas. */

.ecohorbor-page-header::after {
	background: linear-gradient(
		to right,
		rgba( 16, 32, 45, .95 ) 0%,
		rgba( 16, 32, 45, .88 ) 38%,
		rgba( 16, 32, 45, .52 ) 100%
	);
}

.ecohorbor-page-header {
	border-bottom: 3px solid var( --e-global-color-accent );
}

/* El titulo entra precedido de un trazo ambar, igual que los antetitulos. */
.ecohorbor-page-header .page-title-wrap .page-title {
	position: relative;
	padding-top: 22px;
	letter-spacing: -.03em;
	font-weight: 700;
}

.ecohorbor-page-header .page-title-wrap .page-title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 56px;
	height: 3px;
	background-color: var( --e-global-color-accent );
}

/* --- Migas de pan de la cabecera de pagina -------------------------------- */

.ecohorbor-page-header #breadcrumb {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
}

.ecohorbor-page-header #breadcrumb a,
.ecohorbor-page-header #breadcrumb a span {
	color: var( --e-global-color-fbftxt );
	text-decoration: none;
	transition: color .2s ease;
}

.ecohorbor-page-header #breadcrumb a:hover,
.ecohorbor-page-header #breadcrumb a:hover span {
	color: var( --e-global-color-accent );
}

/* La pagina actual es el ultimo elemento y no lleva enlace. */
.ecohorbor-page-header #breadcrumb > li:last-child {
	color: var( --e-global-color-accent );
}

/* --- Antetitulo: el tema gira el trazo ------------------------------------ */
/* El pseudoelemento hereda del tema `border-radius: 50%` y la animacion
   `rotation` en bucle infinito: el trazo ambar salia como una pastilla
   girando junto al texto, no como una regla. La animacion tiene que anularse
   ademas de la rotacion, porque un fotograma clave gana a `transform`.
   Tambien se quita el relleno que el tema reservaba al punto decorativo. */

.section-title-wrapper .sub-title {
	padding-left: 0 !important;
}

.ecohorbor-body-inner .section-title-wrapper .title-wrap > .sub-title::before,
.section-title-wrapper .sub-title::before {
	border-radius: 0;
	animation: none !important;
	transform: none !important;
}

/* --- Franjas azules de la plantilla -> marino ----------------------------- */
/* El azul primario a todo ancho apaga el contraste y pelea con las tarjetas
   marino que se apoyan encima. El azul queda como color de acento, no como
   superficie. La clase la pone ecohorbor_child_marcar_fondos_oscuros(). */

.forta-fondo-azul {
	background-color: var( --e-global-color-secondary ) !important;
}

/* Una placa azul dentro de otra desaparecia al volverse las dos marino: la
   interior sube un paso de luminosidad y conserva su canto ambar. */
.forta-fondo-azul .forta-fondo-azul {
	background-color: #17293a !important;
}

/* --- Contadores ---------------------------------------------------------- */
/* La cifra iba en azul claro sobre blanco (contraste 2,7:1). Pasa a marino,
   con el rotulo en versalitas y un trazo ambar que lo ata a la cifra. */

.ecohorbor-body-inner .elementor .cea-counter-wrapper .counter-value h3,
.ecohorbor-body-inner .elementor .cea-counter-wrapper .counter-value .counter-up,
.ecohorbor-body-inner .elementor .cea-counter-wrapper .counter-value .counter-prefix,
.ecohorbor-body-inner .elementor .cea-counter-wrapper .counter-value .counter-suffix {
	color: var( --e-global-color-secondary );
	font-weight: 700;
	letter-spacing: -.03em;
}

.cea-counter-wrapper .counter-title {
	position: relative;
	padding-top: 14px;
	color: var( --e-global-color-text );
	font-weight: 700;
	letter-spacing: .12em;
}

.cea-counter-wrapper .counter-title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	height: 3px;
	background-color: var( --e-global-color-accent );
}

/* Sobre marino la cifra se lee en ambar y el rotulo en blanco. */
.ecohorbor-body-inner .forta-fondo-oscuro .cea-counter-wrapper .counter-value h3,
.ecohorbor-body-inner .forta-fondo-oscuro .cea-counter-wrapper .counter-value .counter-up,
.ecohorbor-body-inner .forta-fondo-oscuro .cea-counter-wrapper .counter-value .counter-prefix,
.ecohorbor-body-inner .forta-fondo-oscuro .cea-counter-wrapper .counter-value .counter-suffix {
	color: var( --e-global-color-accent );
}

.forta-fondo-oscuro .cea-counter-wrapper .counter-title {
	color: var( --e-global-color-fbblanco );
}

/* --- Icono de las cajas de caracteristicas en linea ----------------------- */
/* El icono era un circulo de trazo claro que en reposo se quedaba en una
   palomita suelta sobre el fondo: solo al pasar el raton aparecia la placa.
   Ahora la placa esta siempre, cuadrada y ambar, igual que los iconos de las
   tarjetas de la portada. Elementor fija estos valores con cinco clases
   (`... .cea-view-framed .cea-featured-icon`), asi que aqui van seis. */

.ecohorbor-body-inner .elementor .elementor-widget.elementor-element .feature-box-wrapper .cea-featured-icon {
	border-radius: 3px;
	border: 0;
	background-color: var( --e-global-color-accent );
	color: var( --e-global-color-secondary );
	transition: background-color .2s ease, color .2s ease;
}

.ecohorbor-body-inner .elementor .elementor-widget.elementor-element:hover .feature-box-wrapper .cea-featured-icon,
.ecohorbor-body-inner .elementor .elementor-widget.elementor-element .feature-box-wrapper:hover .cea-featured-icon {
	background-color: var( --e-global-color-fbblanco );
	color: var( --e-global-color-secondary );
}

/* .subtitle-dots es el span que envuelve el texto del antetitulo, no un
   adorno: lo decorativo son sus pseudoelementos. El tema pinta ahi una barra
   de 30 px con la animacion `hor-loop` en bucle infinito, y sobre ella un aro
   de 30x5 desde .sub-title::after; juntos dibujaban una marca suelta que
   competia con el trazo ambar. El tema los declara con cuatro clases, asi que
   aqui van cinco. */
.ecohorbor-body-inner .section-title-wrapper .title-wrap > .sub-title .subtitle-dots::before,
.ecohorbor-body-inner .section-title-wrapper .title-wrap > .sub-title .subtitle-dots::after,
.ecohorbor-body-inner .section-title-wrapper .title-wrap > .sub-title::after {
	content: none;
	display: none;
	animation: none;
}

/* --- Enlaces que heredan el azul de Bootstrap ----------------------------- */
/* Bootstrap 5 se encola despues del tema, asi que su color de enlace gana en
   los iconos de lista que no traen color propio desde Elementor. */

.ecohorbor-body-inner .elementor-icon-list-icon a,
.ecohorbor-body-inner .elementor-icon-list-item > a {
	color: inherit;
}

/* El rotulo del contador es un h5 propio, y Elementor lo alcanza con
   `... .counter-title > *`, cinco clases. Para ganarle sin recurrir a
   !important hace falta una clase mas, de ahi el .elementor-widget.
   Ademas traia `margin-left: 110px`, que dejaba el rotulo colgando muy a la
   derecha de su cifra; alineado al mismo eje se leen como una sola unidad. */
.ecohorbor-body-inner .elementor .elementor-widget.elementor-element .cea-counter-wrapper .counter-title > * {
	margin-left: 0;
	margin-right: 0;
	color: var( --e-global-color-text );
	font-weight: 700;
	letter-spacing: .12em;
}

.ecohorbor-body-inner .elementor .forta-fondo-oscuro .elementor-widget.elementor-element .cea-counter-wrapper .counter-title > * {
	color: var( --e-global-color-fbblanco );
}

/* El icono del contador iba en azul claro, igual que la cifra. */
.ecohorbor-body-inner .elementor .elementor-widget.elementor-element .counter-icon,
.ecohorbor-body-inner .elementor .elementor-widget.elementor-element .counter-icon svg {
	color: var( --e-global-color-accent );
	fill: var( --e-global-color-accent );
}

.cea-counter-wrapper .counter-value {
	margin-bottom: 0;
}

/* --- Placas claras sueltas dentro de una franja oscura -------------------- */
/* La plantilla apoyaba titulares sobre una placa gris clara con texto azul.
   Sobre marino eso queda como un parche de bajo contraste (2,7:1), asi que el
   titular pasa a formar parte de la franja. Solo alcanza a los titulares que
   cuelgan directamente de la franja, no a los que van dentro de una tarjeta. */

.ecohorbor-body-inner .elementor .forta-fondo-oscuro > .elementor-widget-heading > .elementor-widget-container {
	background-color: transparent;
}

.ecohorbor-body-inner .elementor .forta-fondo-oscuro > .elementor-widget-heading .elementor-heading-title {
	color: var( --e-global-color-fbblanco );
}

/* --- Rejilla de servicios (portafolio) ------------------------------------ */
/* La pagina de Servicios era una rejilla de seis fotografias mudas: el nombre
   del servicio solo aparecia al pasar el raton, asi que en reposo (y en
   cualquier pantalla tactil) la pagina no decia que ofrece la empresa.
   El rotulo pasa a estar siempre visible, sobre un degradado marino que ocupa
   el tercio inferior de la imagen, y el raton solo refuerza lo que ya se ve. */

.ecohorbor-body-inner .elementor .portfolio-wrapper .post-thumb .post-overlay-items {
	top: auto;
	bottom: 0;
	height: auto;
	padding: 96px 26px 24px;
	opacity: 1;
	transform: none;
	text-align: left;
	background: linear-gradient(
		to top,
		rgba( 16, 32, 45, .96 ) 0%,
		rgba( 16, 32, 45, .78 ) 55%,
		rgba( 16, 32, 45, 0 ) 100%
	);
	transition: background .25s ease;
}

.ecohorbor-body-inner .elementor .portfolio-wrapper .post-thumb .post-overlay-items .entry-title {
	position: relative;
	padding-top: 16px;
	width: 100%;
}

.ecohorbor-body-inner .elementor .portfolio-wrapper .post-thumb .post-overlay-items .entry-title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 44px;
	height: 3px;
	background-color: var( --e-global-color-accent );
}

.ecohorbor-body-inner .elementor .portfolio-wrapper .post-thumb .post-overlay-items .post-title {
	color: var( --e-global-color-fbblanco );
	letter-spacing: -.02em;
	font-weight: 700;
	transition: color .2s ease;
}

.ecohorbor-body-inner .elementor .portfolio-wrapper .post-thumb:hover .post-overlay-items {
	background: linear-gradient(
		to top,
		rgba( 16, 32, 45, .97 ) 0%,
		rgba( 16, 32, 45, .90 ) 100%
	);
}

.ecohorbor-body-inner .elementor .portfolio-wrapper .post-thumb:hover .post-overlay-items .post-title {
	color: var( --e-global-color-accent );
}

/* --- Formulario de contacto ----------------------------------------------- */
/* Los campos eran solo una linea gris de 1 px: sobre fondo blanco apenas se
   distinguia donde se escribe, y el foco no se veia. Pasan a caja explicita,
   de canto recto, con el foco marcado en ambar. */

.ecohorbor-body-inner .wpcf7-form label {
	display: block;
	color: var( --e-global-color-secondary );
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
}

.ecohorbor-body-inner .wpcf7-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 8px;
}

.ecohorbor-body-inner .wpcf7-form input.wpcf7-text,
.ecohorbor-body-inner .wpcf7-form input.wpcf7-number,
.ecohorbor-body-inner .wpcf7-form input.wpcf7-date,
.ecohorbor-body-inner .wpcf7-form select.wpcf7-select,
.ecohorbor-body-inner .wpcf7-form textarea.wpcf7-textarea {
	width: 100%;
	padding: 0 16px;
	border: 1px solid var( --e-global-color-fbborde );
	border-radius: 3px;
	background-color: var( --e-global-color-fbblanco );
	color: var( --e-global-color-text );
	font-size: 16px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.ecohorbor-body-inner .wpcf7-form textarea.wpcf7-textarea {
	padding: 14px 16px;
	line-height: 1.6;
}

.ecohorbor-body-inner .wpcf7-form input.wpcf7-text:focus,
.ecohorbor-body-inner .wpcf7-form select.wpcf7-select:focus,
.ecohorbor-body-inner .wpcf7-form textarea.wpcf7-textarea:focus {
	outline: none;
	border-color: var( --e-global-color-accent );
	box-shadow: 0 0 0 3px rgba( 255, 190, 0, .25 );
}

/* El aviso de error tiene que leerse como aviso, no como texto corrido. */
.ecohorbor-body-inner .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: #C0392B;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
}

.ecohorbor-body-inner .wpcf7-form input.wpcf7-not-valid,
.ecohorbor-body-inner .wpcf7-form textarea.wpcf7-not-valid {
	border-color: #C0392B;
}

/* --- Preguntas frecuentes: el estado abierto -------------------------------- */
/* La pregunta abierta se pintaba en azul claro sobre blanco: el elemento
   activo quedaba con MENOS contraste que los cerrados, justo al reves de lo
   que tiene que pasar. Ahora el abierto conserva el marino y se marca con un
   filete ambar a la izquierda. */

/* Elementor fija el color activo en `#5D95CE` con cuatro clases desde los
   ajustes del widget, de ahi que aqui hagan falta cinco. */
.ecohorbor-body-inner .elementor .cea-accordion-elementor-widget .cea-accordions .cea-accordion-header > a,
.ecohorbor-body-inner .elementor .cea-accordion-elementor-widget .cea-accordions .cea-accordion-header > a.active {
	color: var( --e-global-color-secondary );
	text-decoration: none;
}

.ecohorbor-body-inner .elementor .cea-accordion-elementor-widget .cea-accordions .cea-accordion-header > a:hover {
	color: var( --e-global-color-primary );
}

.ecohorbor-body-inner .cea-accordions .card.cea-accordion {
	position: relative;
	padding-left: 0;
	transition: padding-left .25s ease;
}

.ecohorbor-body-inner .cea-accordions .card.cea-accordion::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 3px;
	height: 0;
	background-color: var( --e-global-color-accent );
	transition: height .25s ease;
}

.ecohorbor-body-inner .cea-accordions .card.cea-accordion:has( .nav-link.active ) {
	padding-left: 18px;
}

.ecohorbor-body-inner .cea-accordions .card.cea-accordion:has( .nav-link.active )::before {
	height: 100%;
}

/* El numerador acompana a la pregunta, no la sustituye. */
.ecohorbor-body-inner .cea-accordions .faq-count {
	color: var( --forta-ambar-texto ) !important;
	font-weight: 700 !important;
	letter-spacing: .08em;
}

/* --- Titulos de los widgets de la barra lateral ---------------------------- */
/* El tema los marca con media pastilla azul de 15x30 px, el mismo adorno que
   llevaba el antetitulo. Pasa a filete ambar recto, para que la barra lateral
   hable el mismo idioma que el resto de la pagina. */

/* El tema apunta a estos titulos por etiqueta
   (`.widget-area-right .wp-block-group__inner-container h2:before`) y les
   anade ademas un icono giratorio en :after, asi que hay que igualar el
   elemento y subir una clase. */
.ecohorbor-body-inner .widget-area-right .wp-block-group__inner-container h2,
.ecohorbor-body-inner .widget-area-right .wp-block-group__inner-container h3,
.ecohorbor-body-inner .widget-area-right .wp-block-group__inner-container h4,
.ecohorbor-body-inner .widget-area-right .wp-block-group__inner-container h5,
.ecohorbor-body-inner .widget .widget-title,
.ecohorbor-body-inner .widget .widgettitle {
	position: relative;
	padding-left: 18px;
	color: var( --e-global-color-secondary );
	letter-spacing: -.02em;
	font-weight: 700;
}

.ecohorbor-body-inner .widget-area-right .wp-block-group__inner-container h2::before,
.ecohorbor-body-inner .widget-area-right .wp-block-group__inner-container h3::before,
.ecohorbor-body-inner .widget-area-right .wp-block-group__inner-container h4::before,
.ecohorbor-body-inner .widget-area-right .wp-block-group__inner-container h5::before,
.ecohorbor-body-inner .widget .widget-title::before,
.ecohorbor-body-inner .widget .widgettitle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 4px;
	height: 22px;
	border-radius: 0;
	opacity: 1;
	transform: translateY( -50% );
	background: var( --e-global-color-accent );
}

/* El :after es un icono de bootstrap-icons girando en bucle. */
.ecohorbor-body-inner .widget-area-right .wp-block-group__inner-container h2::after,
.ecohorbor-body-inner .widget-area-right .wp-block-group__inner-container h3::after,
.ecohorbor-body-inner .widget-area-right .wp-block-group__inner-container h4::after,
.ecohorbor-body-inner .widget-area-right .wp-block-group__inner-container h5::after,
.ecohorbor-body-inner .widget .widget-title::after,
.ecohorbor-body-inner .widget .widgettitle::after {
	content: none;
	display: none;
	animation: none;
}

/* Las entradas de la barra lateral se leen como lista, no como parrafos
   enlazados: separadas por un filete y con el color del cuerpo. */
.widget-content .wp-block-latest-posts__list li,
.content-widgets .wp-block-latest-posts__list li {
	padding: 10px 0;
	border-bottom: 1px solid var( --e-global-color-fbborde );
}

.widget-content .wp-block-latest-posts__list li:last-child,
.content-widgets .wp-block-latest-posts__list li:last-child {
	border-bottom: 0;
}

.widget-content .wp-block-latest-posts__list a,
.content-widgets .wp-block-latest-posts__list a {
	color: var( --e-global-color-secondary );
	font-weight: 600;
}

.widget-content .wp-block-latest-posts__list a:hover,
.content-widgets .wp-block-latest-posts__list a:hover {
	color: var( --e-global-color-primary );
}

/* --- Ficha de datos del servicio (portafolio) ------------------------------ */
/* Era una caja con filete azul de 1 px y dos adornos flotantes (media pastilla
   y una placa blanca) que la dejaban descolgada de la pagina. Pasa a ficha
   marino con canto ambar arriba, como el resto de las placas del sitio. */

.ecohorbor-body-inner .portfolio-meta .portfolio-meta-list {
	position: relative;
	margin: 0;
	padding: 26px 26px 8px;
	border: 0;
	border-top: 4px solid var( --e-global-color-accent );
	border-radius: 3px;
	background-color: var( --e-global-color-secondary );
	list-style: none;
}

.ecohorbor-body-inner .portfolio-meta .portfolio-meta-list::before,
.ecohorbor-body-inner .portfolio-meta .portfolio-meta-list::after {
	content: none;
	display: none;
}

.ecohorbor-body-inner .portfolio-meta .portfolio-meta-list > li {
	padding-bottom: 18px;
	list-style: none;
}

.ecohorbor-body-inner .portfolio-meta .portfolio-meta-list h6 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
	color: var( --e-global-color-fbftxt );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* El tema apunta al icono con `.row.portfolio-details .col-sm-4 >
   .portfolio-meta span.portfolio-meta-icon`, cuatro clases y un elemento. */
.ecohorbor-body-inner .row.portfolio-details .col-sm-4 > .portfolio-meta span.portfolio-meta-icon,
.ecohorbor-body-inner .portfolio-meta .portfolio-meta-list span.portfolio-meta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-right: 0;
	line-height: 1;
	border-radius: 3px;
	background: rgb( 255 190 0 / 18% );
	color: var( --e-global-color-accent );
	font-size: 13px;
}

.ecohorbor-body-inner .portfolio-meta .portfolio-meta-list .entry-place,
.ecohorbor-body-inner .portfolio-meta .portfolio-meta-list li > span:not( .portfolio-meta-icon ) {
	color: var( --e-global-color-fbblanco );
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
}

/* --- Titulos: el tema los pone en capitalize ------------------------------- */
/* `text-transform: capitalize` pone mayuscula en cada palabra, que es la
   convencion inglesa. En espanol los titulos van en caja baja salvo la primera
   palabra y los nombres propios, asi que el tema estaba reescribiendo textos
   correctos ("Tecnologia en Seguridad" -> "Tecnologia En Seguridad").
   El texto se respeta tal y como se escribio en el editor. */

.ecohorbor-body-inner .entry-title,
.ecohorbor-body-inner .entry-title a,
.ecohorbor-body-inner .post-title,
.ecohorbor-body-inner .post-title-head,
.ecohorbor-body-inner .section-title,
.ecohorbor-body-inner .page-title,
.ecohorbor-body-inner .feature-box-title {
	text-transform: none;
}

/* Las listas de archivo de la barra lateral, con el mismo trato que las
   entradas recientes. */
.widget-content .wp-block-archives li,
.content-widgets .wp-block-archives li,
.widget-content .wp-block-categories li,
.content-widgets .wp-block-categories li {
	padding: 10px 0;
	border-bottom: 1px solid var( --e-global-color-fbborde );
}

.widget-content .wp-block-archives li:last-child,
.content-widgets .wp-block-archives li:last-child,
.widget-content .wp-block-categories li:last-child,
.content-widgets .wp-block-categories li:last-child {
	border-bottom: 0;
}

.widget-content .wp-block-archives a,
.content-widgets .wp-block-archives a,
.widget-content .wp-block-categories a,
.content-widgets .wp-block-categories a {
	color: var( --e-global-color-secondary );
	font-weight: 600;
}

.widget-content .wp-block-archives a:hover,
.content-widgets .wp-block-archives a:hover,
.widget-content .wp-block-categories a:hover,
.content-widgets .wp-block-categories a:hover {
	color: var( --e-global-color-primary );
}

/* --- Testimonios: contraste del texto y del nombre ------------------------- */
/* La cita iba en gris claro (#797979) sobre placa gris (#ECF0F3): 3,1:1, por
   debajo del minimo para texto normal. El nombre del cliente iba en el azul
   claro, que sobre esa misma placa se queda en 2,7:1. La cita sube a texto de
   cuerpo y el nombre pasa a marino, que es lo que se quiere leer primero. */

.ecohorbor-body-inner .testimonial-wrapper .testimonial-inner .post-excerpt {
	color: var( --e-global-color-text );
}

.ecohorbor-body-inner .testimonial-wrapper .testimonial-inner .client-name,
.ecohorbor-body-inner .testimonial-wrapper .testimonial-inner .post-title-head > a {
	color: var( --e-global-color-secondary );
	font-weight: 700;
	letter-spacing: -.02em;
}

.ecohorbor-body-inner .testimonial-wrapper .testimonial-inner .client-name:hover,
.ecohorbor-body-inner .testimonial-wrapper .testimonial-inner .post-title-head > a:hover {
	color: var( --e-global-color-primary );
}

/* La comilla decorativa en ambar tenue, para que forme parte del sistema. */
.ecohorbor-body-inner .testimonial-wrapper .testimonial-inner::before {
	color: rgb( 255 190 0 / 45% );
}

/* --- Pagina 404 ----------------------------------------------------------- */
/* La plantilla del tema dejaba al visitante con un parrafo y un buscador. La
   del tema hijo (404.php) anade cuatro salidas; aqui reciben el sistema de
   tarjeta con barra ambar del resto del sitio. */

.forta-404 {
	padding-bottom: 24px;
}

.forta-404 .forta-404-antetitulo {
	margin-bottom: 10px;
	color: var( --e-global-color-accent );
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.forta-404 .entry-title {
	position: relative;
	padding-top: 22px;
	letter-spacing: -.03em;
}

.forta-404 .entry-title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 56px;
	height: 3px;
	background-color: var( --e-global-color-accent );
}

.forta-404 .intro-text {
	max-width: 62ch;
}

.forta-404 .forta-404-o {
	margin: 40px 0 18px;
	color: var( --e-global-color-secondary );
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.forta-404 .forta-404-enlaces {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 18px;
}

@media only screen and (max-width: 767px) {
	.forta-404 .forta-404-enlaces {
		grid-template-columns: 1fr;
	}
}

.forta-404 .forta-404-tarjeta {
	position: relative;
	display: block;
	overflow: hidden;
	padding: 26px 26px 24px;
	border: 1px solid var( --e-global-color-fbborde );
	border-radius: var( --forta-radio );
	background-color: var( --e-global-color-fbblanco );
	box-shadow: var( --forta-sombra );
	text-decoration: none;
	transition: var( --forta-transicion );
}

.forta-404 .forta-404-tarjeta::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 58px;
	height: 4px;
	background-color: var( --e-global-color-accent );
	transition: width .35s ease;
}

.forta-404 .forta-404-tarjeta:hover {
	border-color: var( --e-global-color-accent );
	box-shadow: var( --forta-sombra-alta );
}

.forta-404 .forta-404-tarjeta:hover::before {
	width: 100%;
}

.forta-404 .forta-404-tarjeta-titulo {
	display: block;
	margin-bottom: 8px;
	color: var( --e-global-color-secondary );
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.02em;
}

.forta-404 .forta-404-tarjeta-texto {
	display: block;
	color: var( --e-global-color-text );
	font-size: 15px;
	line-height: 1.6;
	opacity: .82;
}

/* --- Resumen de las tarjetas del archivo ---------------------------------- */
/* El resumen del tema corta la frase por donde cae y se solapa con el enlace
   "Leer mas". Se recorta a tres lineas con puntos suspensivos, que es un corte
   deliberado y deja todas las tarjetas de la fila con el mismo bloque de
   texto. */

/* El recorte va en el propio parrafo: el resumen del tema viene envuelto en un
   <p>, y -webkit-line-clamp solo recorta las lineas del elemento que lo
   declara, no las de un hijo en bloque. */
.ecohorbor-masonry article.post .entry-content > p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	/* El alto tope cierra el recorte aunque `display` no llegue a -webkit-box:
	   asi el corte son siempre tres lineas exactas. */
	line-height: 1.5;
	max-height: 4.5em;
	overflow: hidden;
	margin-bottom: 0;
}

/* --- Submenu de la cabecera ----------------------------------------------- */
/* El desplegable era una placa blanca redondeada de 14 px con texto gris: la
   unica pieza de la cabecera que no hablaba el idioma del sitio. Pasa a placa
   marino con canto recto y filete ambar arriba, como las fichas.
   Los ajustes del widget salen con cinco y seis clases desde el CSS por
   elemento de Elementor (`.elementor-78927 .elementor-element-fsh0005 ...`),
   asi que estos selectores tienen que igualarlos y sumar un elemento. */

.ecohorbor-body-inner header .elementor .elementor-widget-zozo_hf_menu .zhf-nav-menu .sub-menu {
	border: 0;
	border-top: 3px solid var( --e-global-color-accent );
	border-radius: 3px;
	background-color: var( --e-global-color-secondary );
	box-shadow: 0 18px 38px -18px rgb( 16 32 45 / 65% );
}

.ecohorbor-body-inner header .elementor .elementor-widget-zozo_hf_menu .zhf-nav-menu .sub-menu li.menu-item:first-child,
.ecohorbor-body-inner header .elementor .elementor-widget-zozo_hf_menu .zhf-nav-menu .sub-menu li.menu-item:last-child {
	border-radius: 0;
}

.ecohorbor-body-inner header .elementor .elementor-widget-zozo_hf_menu .zhf-nav-menu .sub-menu li.menu-item > a {
	border-radius: 0;
	color: var( --e-global-color-fbblanco );
	font-weight: 600;
	transition: background-color .2s ease, color .2s ease;
}

.ecohorbor-body-inner header .elementor .elementor-widget-zozo_hf_menu .zhf-nav-menu .sub-menu li.menu-item + li.menu-item > a {
	border-top: 1px solid rgb( 255 255 255 / 10% );
}

.ecohorbor-body-inner header .elementor .elementor-widget-zozo_hf_menu .zhf-nav-menu .sub-menu li.menu-item > a:hover,
.ecohorbor-body-inner header .elementor .elementor-widget-zozo_hf_menu .zhf-nav-menu .sub-menu li.menu-item.current-menu-item > a {
	background-color: rgb( 255 190 0 / 16% );
	color: var( --e-global-color-accent );
}

/* ==========================================================================
   5. Movil y tableta
   Comprobado cargando el sitio dentro de un iframe de 390 y 768 px: las
   consultas de medios responden al ancho del iframe, asi que el diseno que se
   ve ahi es el real. (La ventana de este navegador no se puede estrechar.)
   ========================================================================== */

/* --- Panel del menu movil ------------------------------------------------- */
/* El complemento lo abre como placa blanca redondeada de 10 px anclada al
   boton, asi que en un movil de 390 px salia casi entero FUERA de la pantalla:
   solo se veia una franja de dos centimetros con media palabra. Ahora se ancla
   al borde derecho de la cabecera, nunca pasa del ancho de la pantalla y usa
   la placa marino del resto del sitio.
   El complemento lo declara con tres clases y Elementor con cinco, de ahi el
   selector largo. */

.ecohorbor-body-inner header .elementor .elementor-widget-zozo_hf_menu .zhf-menu-wrap.zhf-menu-horizontal.mobile-menu-active {
	left: auto;
	right: 0;
	width: min( 320px, calc( 100vw - 32px ) );
	max-width: none;
	padding: 8px 0;
	border-radius: 3px;
	border-top: 3px solid var( --e-global-color-accent );
	background: var( --e-global-color-secondary );
	box-shadow: 0 20px 44px -16px rgb( 16 32 45 / 70% );
}

/* Dentro del panel el menu se apila y ocupa todo el ancho. */
.ecohorbor-body-inner header .elementor .elementor-widget-zozo_hf_menu .zhf-menu-wrap.mobile-menu-active .zhf-nav-menu {
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}

.ecohorbor-body-inner header .elementor .elementor-widget-zozo_hf_menu .zhf-menu-wrap.mobile-menu-active .zhf-nav-menu > li {
	width: 100%;
	height: auto;
	line-height: 1.4;
}

.ecohorbor-body-inner header .elementor .elementor-widget-zozo_hf_menu .zhf-menu-wrap.mobile-menu-active .zhf-nav-menu > li > a {
	display: block;
	padding: 14px 22px;
	border-radius: 0;
	color: var( --e-global-color-fbblanco );
	font-weight: 600;
}

.ecohorbor-body-inner header .elementor .elementor-widget-zozo_hf_menu .zhf-menu-wrap.mobile-menu-active .zhf-nav-menu > li + li > a {
	border-top: 1px solid rgb( 255 255 255 / 10% );
}

.ecohorbor-body-inner header .elementor .elementor-widget-zozo_hf_menu .zhf-menu-wrap.mobile-menu-active .zhf-nav-menu > li > a:hover,
.ecohorbor-body-inner header .elementor .elementor-widget-zozo_hf_menu .zhf-menu-wrap.mobile-menu-active .zhf-nav-menu > li.current-menu-item > a {
	background-color: rgb( 255 190 0 / 16% );
	color: var( --e-global-color-accent );
}

/* El submenu dentro del panel no vuelve a flotar: se despliega en linea. */
.ecohorbor-body-inner header .elementor .elementor-widget-zozo_hf_menu .zhf-menu-wrap.mobile-menu-active .zhf-nav-menu .sub-menu {
	position: static;
	width: 100%;
	border-top: 0;
	border-radius: 0;
	background: rgb( 255 255 255 / 6% );
	box-shadow: none;
}

/* --- Cabecera en tableta -------------------------------------------------- */
/* El boton principal se salia por el borde derecho y la franja superior
   apilaba el eslogan encima de los horarios. */

@media only screen and (max-width: 1024px) {
	.ecohorbor-body-inner header .elementor .elementor-widget-button .elementor-button {
		padding-left: 20px;
		padding-right: 20px;
		white-space: nowrap;
		font-size: 13px;
	}

	/* La franja superior pasa a columna: el eslogan arriba, los datos debajo,
	   cada cosa en su linea y centrada. */
	.ecohorbor-body-inner header > .elementor > .e-con:first-child .e-con-inner {
		flex-wrap: wrap;
		row-gap: 6px;
		justify-content: center;
		text-align: center;
	}

	.ecohorbor-body-inner header > .elementor > .e-con:first-child .elementor-widget {
		width: 100%;
		text-align: center;
	}

	.ecohorbor-body-inner header > .elementor > .e-con:first-child .elementor-icon-list-items {
		justify-content: center;
	}
}

/* --- Cabecera de pagina en movil ------------------------------------------ */
/* Con la barra del tema fuera, la cabecera de pagina puede recuperar altura y
   el titulo se lee mas grande. El trazo ambar se centra con el titulo. */

@media only screen and (max-width: 767px) {
	.ecohorbor-page-header .page-title-wrap {
		padding-top: 150px;
		padding-bottom: 56px;
		text-align: center;
	}

	.ecohorbor-page-header .page-title-wrap .page-title::before {
		left: 50%;
		transform: translateX( -50% );
	}

	.ecohorbor-page-header #breadcrumb {
		justify-content: center;
	}
}

/* ==========================================================================
   6. Pie de pagina
   El punto 3 del alcance pide cabecera, menu Y pie. La cabecera y el menu se
   renovaron en las fases anteriores; el pie se habia quedado con la unica
   regla de no partir los telefonos. Era, de hecho, el ultimo sitio del sitio
   donde el azul de la plantilla seguia siendo el color de los detalles.
   ========================================================================== */

/* --- Titulos de columna: filete ambar ------------------------------------- */
/* Mismo tratamiento que los titulos de la barra lateral, para que las dos
   columnas de enlaces se lean como el resto del sistema. */

.ecohorbor-body-inner footer .elementor-widget-heading .elementor-heading-title {
	position: relative;
	padding-bottom: 14px;
}

.ecohorbor-body-inner footer .elementor-widget-heading .elementor-heading-title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 34px;
	height: 3px;
	background-color: var( --e-global-color-accent );
}

/* --- Iconos y vinetas: azul -> ambar -------------------------------------- */
/* Elementor los fija con cuatro clases y un elemento
   (`.elementor-78928 .elementor-element.elementor-element-XXX
   .elementor-icon-list-icon i`), asi que aqui van cinco mas el elemento. */

.ecohorbor-body-inner footer .elementor .elementor-widget-icon-list .elementor-icon-list-icon i,
.ecohorbor-body-inner footer .elementor .elementor-widget-icon-list .elementor-icon-list-icon svg {
	color: var( --e-global-color-accent );
	fill: var( --e-global-color-accent );
	transition: color .2s ease, fill .2s ease;
}

/* --- Enlaces del pie ------------------------------------------------------ */

.ecohorbor-body-inner footer .elementor .elementor-icon-list-item > a {
	transition: color .2s ease;
}

.ecohorbor-body-inner footer .elementor .elementor-icon-list-item > a:hover {
	color: var( --e-global-color-accent );
}

/* La vineta acompana al enlace en el estado de raton. */
.ecohorbor-body-inner footer .elementor .elementor-icon-list-item > a:hover .elementor-icon-list-icon i,
.ecohorbor-body-inner footer .elementor .elementor-icon-list-item > a:hover .elementor-icon-list-icon svg {
	color: var( --e-global-color-fbblanco );
	fill: var( --e-global-color-fbblanco );
}

/* --- Franja inferior ------------------------------------------------------ */
/* El aviso de derechos se separa del bloque de columnas con un filete tenue,
   en lugar de flotar suelto. */

.ecohorbor-body-inner footer > .elementor > .e-con:last-child {
	border-top: 1px solid rgb( 255 255 255 / 10% );
}

/* --- Caja de caracteristicas con icono de fuente -------------------------- */
/* Cuando la tarjeta lleva icono en vez de imagen, el elemento es un bloque y
   la placa ambar se estiraba a todo el ancho. Se le da la misma caja cuadrada
   de 64 px que a `.cea-feature-box-img`. */

.ecohorbor-body-inner .elementor .feature-box-wrapper.feature-box-default .cea-featured-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 22px;
	font-size: 26px;
}

/* --- Vinetas e iconos de las listas del contenido ------------------------- */
/* Quedaban en el azul de la plantilla dentro del contenido y en la franja
   superior, mientras el pie y el resto del sitio ya iban en ambar. Sobre
   fondo claro se usa el ocre legible y sobre oscuro el ambar de marca, igual
   que con el texto. Son adornos: el significado lo lleva la palabra de al
   lado, no el icono. */

.ecohorbor-body-inner .elementor .elementor-widget-icon-list .elementor-icon-list-icon i,
.ecohorbor-body-inner .elementor .elementor-widget-icon-list .elementor-icon-list-icon svg {
	color: var( --forta-ambar-texto );
	fill: var( --forta-ambar-texto );
}

.ecohorbor-body-inner .forta-fondo-oscuro .elementor-widget-icon-list .elementor-icon-list-icon i,
.ecohorbor-body-inner .forta-fondo-oscuro .elementor-widget-icon-list .elementor-icon-list-icon svg,
.ecohorbor-body-inner header .elementor .elementor-widget-icon-list .elementor-icon-list-icon i,
.ecohorbor-body-inner header .elementor .elementor-widget-icon-list .elementor-icon-list-icon svg {
	color: var( --e-global-color-accent );
	fill: var( --e-global-color-accent );
}

/* --- Encuadre de la fotografia de cabecera -------------------------------- */
/* El recorte estaba anclado abajo y mostraba piernas y botas en lugar de las
   personas. Se corrigio donde corresponde: la opcion `bg_position` de cada
   ajuste *-title-bg del tema, que ahora vale "center top". No hace falta CSS
   aqui; queda la nota para que no se vuelva a parchear por este lado. */

/* ==========================================================================
   Cabecera en moviles
   La fila de la cabecera (fsh0007) se armo en Elementor con relleno lateral 0
   y "ajustar" (wrap) activado en movil. Con el ancho de un telefono los tres
   elementos (logotipo, menu y boton) no caben en una linea, asi que caian uno
   debajo de otro y ademas pegados al borde izquierdo: la cabecera medida en un
   iframe de 375 px ocupaba 323 px de alto antes de que empezara el contenido.

   Aqui se devuelven a una sola linea -- logotipo a la izquierda, boton y
   hamburguesa a la derecha -- y se recupera el margen lateral. El boton se
   compacta solo en movil para que los tres quepan en 375 px.

   Va en CSS y no en Elementor porque el ancho de cada widget lo calcula el
   propio contenedor flexible del editor con variables (--container-widget-*);
   sobrescribirlas desde el panel obligaria a fijar anchos en pixeles por
   dispositivo, que se rompen en cuanto cambia el texto del boton.
   ========================================================================== */

@media only screen and ( max-width: 767px ) {

	/* El margen lateral de las dos franjas lo pone el bloque
	   "Margen lateral del contenido" que hay mas abajo. */

	/* Una sola linea, sin ajustar. */
	.ecohorbor-body-inner .elementor-78927 .elementor-element.elementor-element-fsh0007 > .e-con-inner {
		flex-wrap: nowrap;
		align-items: center;
		gap: 8px;
	}

	/* Cada widget ocupa lo que necesita, no el ancho completo. */
	.ecohorbor-body-inner .elementor-78927 .elementor-element.elementor-element-fsh0004,
	.ecohorbor-body-inner .elementor-78927 .elementor-element.elementor-element-fsh0005,
	.ecohorbor-body-inner .elementor-78927 .elementor-element.elementor-element-fsh0006 {
		width: auto;
		max-width: none;
		flex: 0 0 auto;
	}

	/* La hamburguesa cierra la fila por la derecha; el boton queda a su lado. */
	.ecohorbor-body-inner .elementor-78927 .elementor-element.elementor-element-fsh0005 {
		order: 3;
	}

	.ecohorbor-body-inner .elementor-78927 .elementor-element.elementor-element-fsh0006 {
		margin-left: auto;
	}

	.ecohorbor-body-inner .elementor-78927 .elementor-element.elementor-element-fsh0005 .zhf-menu-toggle-wrap {
		text-align: right;
	}

	/* El panel del menu desplegable vive dentro del propio widget. Cerrado
	   mide 0 de alto pero conserva su ancho (296 px), y como el widget se
	   dimensiona por su contenido, arrastraba la hamburguesa fuera de la
	   pantalla. Cerrado se saca del flujo; al abrirse, el script del tema le
	   pone position:absolute y sus propias medidas. */
	.ecohorbor-body-inner .elementor-78927 .elementor-element.elementor-element-fsh0005 .zhf-menu-wrap:not( .mobile-menu-active ) {
		position: absolute;
		left: 0;
		width: 100%;
	}

	/* El complemento repite el boton de cerrar dentro del panel, encima del
	   primer enlace. La hamburguesa de la cabecera ya cierra el menu, asi que
	   la copia sobra y deja una franja vacia arriba del panel. */
	.ecohorbor-body-inner .elementor-78927 .elementor-element.elementor-element-fsh0005 .zhf-menu-wrap > .zhf-menu-toggle {
		display: none;
	}

	/* Abierto, el panel ya no puede heredar el ancho del widget (44 px): se le
	   da el suyo, anclado al borde derecho de la cabecera. */
	.ecohorbor-body-inner .elementor-78927 .elementor-element.elementor-element-fsh0005 .zhf-menu-wrap.mobile-menu-active {
		left: auto;
		right: 0;
		width: 90vw;
		max-width: 340px;
	}

	.ecohorbor-body-inner .elementor-78927 .elementor-element.elementor-element-fsh0005 .zhf-menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border-radius: 10px;
		font-size: 20px;
	}

	/* Logotipo y boton compactos: con 375 px de pantalla el conjunto mide
	   104 + 44 + boton, y hay que dejar sitio para el margen lateral. */
	.ecohorbor-body-inner .elementor-78927 .elementor-element.elementor-element-fsh0004 .main-logo img {
		width: 104px;
	}

	.ecohorbor-body-inner .elementor-78927 .elementor-element.elementor-element-fsh0006 .elementor-button {
		padding: 11px 14px;
		font-size: 11px;
		letter-spacing: .04em;
		line-height: 1.1;
		white-space: nowrap;
	}
}

/* Telefonos estrechos (Galaxy S8, iPhone SE 1a generacion y similares). */
@media only screen and ( max-width: 359px ) {

	.ecohorbor-body-inner .elementor-78927 .elementor-element.elementor-element-fsh0004 .main-logo img {
		width: 88px;
	}

	.ecohorbor-body-inner .elementor-78927 .elementor-element.elementor-element-fsh0006 .elementor-button {
		padding: 10px 11px;
		font-size: 10px;
	}
}


/* ==========================================================================
   Margen lateral del contenido en moviles y tabletas
   Todas las secciones de Elementor del sitio se armaron con relleno lateral 0.
   En escritorio no se notaba porque la caja se limita a 1140 px y el sobrante
   de la ventana hace de margen; por debajo de 1140 px ese sobrante desaparece
   y el contenido queda pegado a los dos bordes de la pantalla. Medido en un
   iframe de 375 px: las dieciseis secciones de la portada, el pie incluido,
   empezaban en x=0 y median 375 px.

   Se resuelve de una vez para todo el sitio en lugar de seccion por seccion.
   El relleno se aplica solo a las secciones de primer nivel (.e-parent), no a
   los contenedores anidados, para que las columnas y las tarjetas de dentro no
   sumen su propio margen encima.

   max() respeta el relleno que cada seccion tenga puesto en Elementor: si vale
   0 se usa el margen de aqui, y si alguien pone 40 px en el panel, gana el 40.
   Por eso este bloque no impide seguir editando desde el editor.
   ========================================================================== */

/* Hasta 1180 px: por encima de 1024 la caja se limita a 1140 px, asi que entre
   1025 y 1140 px de ventana el contenido vuelve a quedar a ras de los bordes.
   A partir de 1181 px el sobrante de la ventana ya hace de margen por si solo. */
@media only screen and ( max-width: 1180px ) {

	.ecohorbor-body-inner .e-con.e-parent.e-con-boxed > .e-con-inner,
	.ecohorbor-body-inner .e-con.e-parent.e-con-full,
	.ecohorbor-body-inner .elementor-top-section.elementor-section-boxed > .elementor-container {
		padding-left: max( 24px, var( --padding-left, 0px ) );
		padding-right: max( 24px, var( --padding-right, 0px ) );
	}
}

@media only screen and ( max-width: 767px ) {

	.ecohorbor-body-inner .e-con.e-parent.e-con-boxed > .e-con-inner,
	.ecohorbor-body-inner .e-con.e-parent.e-con-full,
	.ecohorbor-body-inner .elementor-top-section.elementor-section-boxed > .elementor-container {
		padding-left: max( 16px, var( --padding-left, 0px ) );
		padding-right: max( 16px, var( --padding-right, 0px ) );
	}
}