.elementor-40 .elementor-element.elementor-element-21d3ddab{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-40 .elementor-element.elementor-element-4cd460ca{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:40px 0px;--row-gap:40px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:15px;}.elementor-40 .elementor-element.elementor-element-6b41b439{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:45px;--padding-right:0px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-40 .elementor-element.elementor-element-4f5448ab{font-family:"Inter", Sans-serif;font-weight:400;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-40 .elementor-element.elementor-element-2f4f994f{margin:40px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:start;}@media(min-width:768px){.elementor-40 .elementor-element.elementor-element-4cd460ca{--width:33.3333%;}.elementor-40 .elementor-element.elementor-element-6b41b439{--width:66.6666%;}}@media(max-width:1024px) and (min-width:768px){.elementor-40 .elementor-element.elementor-element-4cd460ca{--width:100%;}.elementor-40 .elementor-element.elementor-element-6b41b439{--width:100%;}}@media(max-width:1024px){.elementor-40 .elementor-element.elementor-element-21d3ddab{--flex-wrap:wrap;}.elementor-40 .elementor-element.elementor-element-4cd460ca{--padding-top:0px;--padding-bottom:50px;--padding-left:30px;--padding-right:30px;}.elementor-40 .elementor-element.elementor-element-6b41b439{--padding-top:0px;--padding-bottom:0px;--padding-left:30px;--padding-right:30px;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );}}@media(max-width:767px){.elementor-40 .elementor-element.elementor-element-4cd460ca{--padding-top:0px;--padding-bottom:30px;--padding-left:15px;--padding-right:15px;}.elementor-40 .elementor-element.elementor-element-6b41b439{--padding-top:0px;--padding-bottom:0px;--padding-left:15px;--padding-right:15px;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );}}/* Start custom CSS for sidebar-nav, class: .elementor-element-3f62324 *//* ==========================================================================
ANULACIÓN ABSOLUTA DE CAPAS AMARILLAS EN SIDEBAR (H2O SQUAD)
========================================================================== */
/* 1. EL CONTENEDOR PRINCIPAL */
.elementor-40 .elementor-element.elementor-element-3f62324 .sidebar__single.sidebar__services {
background-color: #ffffff !important;
border-radius: 16px !important;
padding: 35px 30px !important;
border: 1px solid rgba(0, 16, 38, 0.05) !important;
box-shadow: 0px 12px 40px rgba(0, 16, 38, 0.04) !important;
position: relative !important;
}
/* TÍTULO PRINCIPAL */
.elementor-40 .elementor-element.elementor-element-3f62324 .sidebar__single .title-box h2 {
color: #001026 !important;
font-size: 15px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin: 0 !important;
}
/* 2. EL TRUCO MAESTRO: Fulminamos los efectos amarillos de fondo para TODA la lista */
.elementor-40 .elementor-element.elementor-element-3f62324 .sidebar__services-box-list li a::before,
.elementor-40 .elementor-element.elementor-element-3f62324 .sidebar__services-box-list li a::after,
.elementor-40 .elementor-element.elementor-element-3f62324 .sidebar__services-box-list li:hover a::before,
.elementor-40 .elementor-element.elementor-element-3f62324 .sidebar__services-box-list li:hover a::after,
.elementor-40 .elementor-element.elementor-element-3f62324 .sidebar__services-box-list li a:hover::before,
.elementor-40 .elementor-element.elementor-element-3f62324 .sidebar__services-box-list li a:hover::after {
background-color: transparent !important;
background: transparent !important;
display: none !important; /* Desactiva por completo la animación expansiva del tema */
opacity: 0 !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
}
/* ESTRUCTURA DE LA LISTA */
.elementor-40 .elementor-element.elementor-element-3f62324 .sidebar__services-box-list {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
/* 3. BOTONES INACTIVOS EN ESTADO NORMAL */
.elementor-40 .elementor-element.elementor-element-3f62324 .sidebar__services-box-list li a {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 14px 20px !important;
background-color: #f8fafc !important; /* Gris suave limpio */
color: #4a5568 !important;
font-size: 14.5px !important;
font-weight: 700 !important;
border-radius: 8px !important;
text-decoration: none !important;
border: 1px solid transparent !important;
position: relative !important;
z-index: 1 !important; /* Forzamos orden de capa limpio */
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.elementor-40 .elementor-element.elementor-element-3f62324 .sidebar__services-box-list li a span.icon-right-arrow2 {
color: #a0aec0 !important;
font-size: 11px !important;
transition: transform 0.3s ease, color 0.3s ease !important;
}
/* 4. HOVER REAL LUXURY: Fondo blanco nítido y texto cian (¡SIN RASTRO DE AMARILLO!) */
.elementor-40 .elementor-element.elementor-element-3f62324 .sidebar__services-box-list li a:hover,
.elementor-40 .elementor-element.elementor-element-3f62324 .sidebar__services-box-list li:hover > a {
background-color: #ffffff !important;
background: #ffffff !important; /* Forzamos fondo blanco limpio en el hover */
color: #00c6ff !important; /* El texto enciende en cian premium */
border: 1px solid rgba(0, 198, 255, 0.3) !important;
box-shadow: 0px 6px 15px rgba(0, 198, 255, 0.08) !important;
padding-left: 25px !important; /* Desplazamiento elástico elegante */
}
.elementor-40 .elementor-element.elementor-element-3f62324 .sidebar__services-box-list li a:hover span.icon-right-arrow2 {
color: #00c6ff !important;
transform: translateX(4px) !important;
}
/* ==========================================================================
5. BOTÓN ACTIVO MAESTRO (Azul Marino Sólido y Acento Cian)
========================================================================== */
.elementor-40 .elementor-element.elementor-element-3f62324 .sidebar__services-box-list li.current-menu-item a,
.elementor-40 .elementor-element.elementor-element-3f62324 .sidebar__services-box-list li.current_page_item a,
.elementor-40 .elementor-element.elementor-element-3f62324 .sidebar__services-box-list li[class*="current"] a {
background-color: #001026 !important;
background: linear-gradient(135deg, #001026 0%, #002d62 100%) !important;
color: #ffffff !important;
font-weight: 800 !important;
/* Línea de alta presión a la izquierda */
border-left: 5px solid #00c6ff !important;
border-top: transparent !important;
border-right: transparent !important;
border-bottom: transparent !important;
border-radius: 0px 8px 8px 0px !important;
box-shadow: 0px 8px 22px rgba(0, 16, 38, 0.25) !important;
padding-left: 22px !important;
}
.elementor-40 .elementor-element.elementor-element-3f62324 .sidebar__services-box-list li.current-menu-item a span.icon-right-arrow2 {
color: #00c6ff !important;
}
/* Bloqueo hover para el botón activo */
.elementor-40 .elementor-element.elementor-element-3f62324 .sidebar__services-box-list li.current-menu-item a:hover {
color: #ffffff !important;
background: linear-gradient(135deg, #001026 0%, #002d62 100%) !important;
box-shadow: 0px 8px 25px rgba(0, 198, 255, 0.2) !important;
padding-left: 22px !important;
}/* End custom CSS */
/* Start custom CSS for clenq-sidebar-call-to-action, class: .elementor-element-5910cf24 *//* ==========================================================================
SIDEBAR CALL TO ACTION - LUXURY MASTERPIECE (H2O SQUAD)
========================================================================== */
/* 1. EL CONTENEDOR PRINCIPAL (Simetría con el menú superior) */
.elementor-40 .elementor-element.elementor-element-5910cf24 .sidebar__single.sidebar_contact,
.elementor-40 .elementor-element.elementor-element-5910cf24 .sidebar__single {
border-radius: 16px !important; /* Esquinas curvas premium */
overflow: hidden !important;
box-shadow: 0px 15px 35px rgba(0, 16, 38, 0.12) !important; /* Relieve flotante */
border: 1px solid rgba(255, 255, 255, 0.08) !important;
position: relative !important;
}
/* 2. EL DEGRADADO DE MARCA (Sofisticado y oscuro para legibilidad) */
.elementor-40 .elementor-element.elementor-element-5910cf24 .gradient-bg {
background-image: none !important; /* Eliminamos el degradado genérico de la plantilla */
/* Inyectamos un degradado de alta definición: azul militar ultra oscuro arriba y marino abajo */
background: linear-gradient(180deg, rgba(0, 16, 38, 0.75) 0%, rgba(0, 45, 92, 0.92) 100%) !important;
position: absolute !important;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2 !important;
}
/* Forzar que la foto de fondo se acople con elegancia corporativa */
.elementor-40 .elementor-element.elementor-element-5910cf24 .sidebar__contact-box-img img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
position: relative !important;
z-index: 1 !important;
filter: grayscale(30%) contrast(110%) !important; /* Look fotográfico publicitario */
}
/* 3. TIPOGRAFÍA DEL MENSAJE (Efecto Imprenta Premium) */
.elementor-40 .elementor-element.elementor-element-5910cf24 .overlay-content {
position: relative !important;
z-index: 3 !important; /* Se posiciona por encima del degradado */
padding: 40px 25px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: space-between !important;
min-height: 320px !important;
}
.elementor-40 .elementor-element.elementor-element-5910cf24 .service-sidebar__contact__title,
.elementor-40 .elementor-element.elementor-element-5910cf24 h3.service-sidebar__contact__title {
color: #ffffff !important;
font-size: 20px !important;
font-weight: 800 !important;
line-height: 1.4 !important;
letter-spacing: -0.5px !important;
text-shadow: 0px 4px 15px rgba(0, 16, 38, 0.6) !important; /* Despega el texto del fondo */
margin-bottom: 30px !important;
text-align: center !important;
}
/* ==========================================================================
4. ARREGLO QUIRÚRGICO DEL CAJÓN TELEFÓNICO (Una sola línea y sin amarillo)
========================================================================== */
.elementor-40 .elementor-element.elementor-element-5910cf24 .number-box {
background-color: #ffffff !important; /* Bloque blanco inmaculado */
background: #ffffff !important;
border-radius: 12px !important; /* Bordes redondeados modernos */
padding: 14px 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important; /* Espaciado perfecto entre icono y número */
width: 100% !important; /* Ocupa el ancho óptimo */
max-width: 290px !important;
box-shadow: 0px 10px 25px rgba(0, 16, 38, 0.2) !important;
/* Evita de forma absoluta que el bloque rompa el contenido */
flex-wrap: nowrap !important;
transition: all 0.35s ease !important;
}
/* ANTI-AMARILLO: El círculo del icono se viste con el cian de agua limpia */
.elementor-40 .elementor-element.elementor-element-5910cf24 .number-box .icon-box {
background-color: #00c6ff !important; /* Cian vibrante de la marca */
background: #00c6ff !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important; /* Círculo perfecto */
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important; /* Impide que el flexbox aplaste el círculo */
margin: 0 !important;
transition: transform 0.35s ease !important;
}
/* El teléfono interno pasa a ser azul oscuro militar para un contraste limpio */
.elementor-40 .elementor-element.elementor-element-5910cf24 .number-box .icon-box i,
.elementor-40 .elementor-element.elementor-element-5910cf24 .number-box .icon-box [class*="icon-"] {
color: #001026 !important;
font-size: 14px !important;
}
/* CONFIGURACIÓN DEL TEXTO DEL NÚMERO (Cero saltos de línea torpes) */
.elementor-40 .elementor-element.elementor-element-5910cf24 .number-box .text-box {
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
}
.elementor-40 .elementor-element.elementor-element-5910cf24 .number-box .text-box p a {
color: #001026 !important; /* Azul Marino Militar para máxima elegancia */
font-size: 16.5px !important; /* Tamaño estilizado para que quepa holgadamente */
font-weight: 800 !important;
text-decoration: none !important;
white-space: nowrap !important; /* PROHIBIDO romperse en dos líneas */
letter-spacing: -0.2px !important;
transition: color 0.3s ease !important;
}
/* ==========================================================================
5. COMPORTAMIENTO INTERACTIVO (Hover)
========================================================================== */
.elementor-40 .elementor-element.elementor-element-5910cf24 .sidebar__single:hover .number-box {
transform: scale(1.03) translateY(-2px) !important; /* El botón resalta sutilmente */
box-shadow: 0px 12px 30px rgba(0, 198, 255, 0.35) !important; /* Aura cian premium */
}
.elementor-40 .elementor-element.elementor-element-5910cf24 .sidebar__single:hover .number-box .icon-box {
transform: rotate(15px) scale(1.05) !important; /* Pequeño guiño dinámico al icono */
}
.elementor-40 .elementor-element.elementor-element-5910cf24 .sidebar__single:hover .number-box .text-box p a {
color: #00c6ff !important; /* El número se enciende en cian al pasar el mouse */
}/* End custom CSS */
/* Start custom CSS for clenq-funfact, class: .elementor-element-12f92a1 *//* ==========================================================================
REDISEÑO EXCLUSIVO DE TARJETAS CON INYECCIÓN DE VECTORES DE LUJO
========================================================================== */
/* 1. CONFIGURACIÓN ESTRUCTURAL DE LAS TARJETAS */
.elementor-40 .elementor-element.elementor-element-12f92a1 .services-details__content-text2-list {
display: flex !important;
justify-content: center !important;
gap: 35px !important;
padding: 20px 0 !important;
margin: 0 auto !important;
max-width: 1140px !important;
flex-wrap: wrap !important;
list-style: none !important;
}
.elementor-40 .elementor-element.elementor-element-12f92a1 .services-details__content-text2-list li {
background-color: #ffffff !important;
border: 1px solid rgba(0, 16, 38, 0.05) !important;
border-radius: 24px !important; /* Esquinas curvas más sutiles y luxury */
padding: 50px 40px !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 20px !important;
flex: 1 !important;
min-width: 320px !important;
max-width: 480px !important;
box-shadow: 0px 15px 50px rgba(0, 16, 38, 0.03) !important;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}
/* 2. ELIMINACIÓN ABSOLUTA DE LOS ICONOS FEOS DEL TEMA (Plato y Escoba Muertos) */
.elementor-40 .elementor-element.elementor-element-12f92a1 .services-details__content-text2-list .icon-box span,
.elementor-40 .elementor-element.elementor-element-12f92a1 .services-details__content-text2-list .icon-box i,
.elementor-40 .elementor-element.elementor-element-12f92a1 .icon-dish,
.elementor-40 .elementor-element.elementor-element-12f92a1 .icon-sweep {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
/* 3. REDISEÑO DEL CONTENEDOR DEL ICONO (Ahora es un badge premium) */
.elementor-40 .elementor-element.elementor-element-12f92a1 .services-details__content-text2-list .icon-box {
width: 60px !important;
height: 60px !important;
background-color: #f1f5f9 !important; /* Fondo gris-plata luxury sumamente limpio */
border-radius: 14px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 10px !important;
position: relative !important;
box-shadow: none !important;
border: none !important;
transition: all 0.3s ease !important;
}
/* ==========================================================================
4. INYECCIÓN DE ICONOS VECTORIALES DE ALTA GAMA (LINE-ART SVGs)
========================================================================== */
/* Tarjeta 1: RESIDENCIAL - Inyectamos un vector de una casa minimalista de lujo */
.elementor-40 .elementor-element.elementor-element-12f92a1 .services-details__content-text2-list li:nth-child(1) .icon-box::before {
content: "" !important;
width: 28px !important;
height: 28px !important;
display: block !important;
background-color: #001026 !important; /* Color inicial: Azul Marino Militar */
/* Arquitectura del SVG de la casa en código puro */
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain !important;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain !important;
transition: all 0.3s ease !important;
}
/* Tarjeta 2: COMERCIAL - Inyectamos un vector de un complejo corporativo moderno */
.elementor-40 .elementor-element.elementor-element-12f92a1 .services-details__content-text2-list li:nth-child(2) .icon-box::before {
content: "" !important;
width: 28px !important;
height: 28px !important;
display: block !important;
background-color: #001026 !important;
/* Arquitectura del SVG del edificio corporativo en código puro */
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain !important;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain !important;
transition: all 0.3s ease !important;
}
/* 5. DISEÑO EDITORIAL INTERNO */
.elementor-40 .elementor-element.elementor-element-12f92a1 .services-details__content-text2-list .content-box h3 {
color: #001026 !important;
font-size: 24px !important;
font-weight: 900 !important;
letter-spacing: -0.5px !important;
margin: 0 0 12px 0 !important;
}
.elementor-40 .elementor-element.elementor-element-12f92a1 .services-details__content-text2-list .content-box p {
color: #5a6578 !important;
font-size: 15px !important;
line-height: 1.7 !important;
font-weight: 500 !important;
}
/* ==========================================================================
6. INTERACCIÓN PREMIUM EN HOVER (Look Automotriz de Élite)
========================================================================== */
.elementor-40 .elementor-element.elementor-element-12f92a1 .services-details__content-text2-list li:hover {
transform: translateY(-10px) !important;
border-color: rgba(0, 198, 255, 0.2) !important;
box-shadow: 0px 25px 60px rgba(0, 16, 38, 0.08) !important;
}
/* El cuadro del icono se enciende en un azul profundo impecable */
.elementor-40 .elementor-element.elementor-element-12f92a1 .services-details__content-text2-list li:hover .icon-box {
background-color: #001026 !important;
box-shadow: 0px 8px 20px rgba(0, 16, 38, 0.15) !important;
}
/* El vector inyectado cambia mágicamente a cian brillante en el hover */
.elementor-40 .elementor-element.elementor-element-12f92a1 .services-details__content-text2-list li:hover .icon-box::before {
background-color: #00c6ff !important;
transform: scale(1.05) !important;
}
/* 7. RESPONSIVIDAD */
@media (max-width: 767px) {
.elementor-40 .elementor-element.elementor-element-12f92a1 .services-details__content-text2-list {
flex-direction: column !important;
gap: 25px !important;
}
.elementor-40 .elementor-element.elementor-element-12f92a1 .services-details__content-text2-list li {
max-width: 100% !important;
}
}/* End custom CSS */
/* Start custom CSS for clenq-project-details, class: .elementor-element-3a1230ab *//* ==========================================================================
INTERVENCION SPLIT LAYOUT: SECCIÓN DE CONFIANZA (H2O SQUAD)
========================================================================== */
/* 1. ARQUITECTURA DIVIDIDA (Equilibrio Textos vs Imagen) */
.elementor-40 .elementor-element.elementor-element-3a1230ab .services-details__content-text3 {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 50px !important; /* Distancia elegante de lectura */
margin: 40px 0 !important;
}
/* Distribución proporcional de las columnas */
.elementor-40 .elementor-element.elementor-element-3a1230ab .services-details__content-text3 .content-box {
flex: 1.2 !important; /* Más peso al texto corporativo */
display: block !important;
}
.elementor-40 .elementor-element.elementor-element-3a1230ab .services-details__content-text3 .img-box {
flex: 0.8 !important; /* Caja de imagen controlada */
}
/* 2. TIPOGRAFÍA EDITORIAL DE ALTO IMPACTO */
.elementor-40 .elementor-element.elementor-element-3a1230ab .services-details__content-text3 .content-box h3 {
color: #001026 !important; /* Azul Marino Militar Institucional */
font-size: 34px !important;
font-weight: 900 !important;
letter-spacing: -0.5px !important;
line-height: 1.25 !important;
margin-bottom: 30px !important;
}
/* 3. REESTRUCTURACIÓN COMPLETA DE LA LISTA DE BENEFICIOS */
.elementor-40 .elementor-element.elementor-element-3a1230ab .services-details__content-text3 .content-box ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 20px !important; /* Espacio respirable entre cada beneficio */
}
.elementor-40 .elementor-element.elementor-element-3a1230ab .services-details__content-text3 .content-box ul li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* Formateo del párrafo interno */
.elementor-40 .elementor-element.elementor-element-3a1230ab .services-details__content-text3 .content-box ul li p {
color: #4a5568 !important; /* Gris nítido ejecutivo */
font-size: 15px !important;
line-height: 1.6 !important;
font-weight: 500 !important;
margin: 0 !important;
/* Forzamos alineación con Flexbox para separar la viñeta del texto */
display: flex !important;
align-items: flex-start !important;
gap: 14px !important;
}
/* ==========================================================================
4. ERRADICACIÓN DEL ICONO DE USUARIO E INYECCIÓN DE CHECKMARK LUXURY
========================================================================== */
/* Liquidamos por completo el glifo feo del tema */
.elementor-40 .elementor-element.elementor-element-3a1230ab .icon-user-cicrle,
.elementor-40 .elementor-element.elementor-element-3a1230ab .services-details__content-text3 .content-box ul li p span {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
width: 0 !important;
}
/* Inyectamos un vector de verificación limpio y corporativo en su lugar */
.elementor-40 .elementor-element.elementor-element-3a1230ab .services-details__content-text3 .content-box ul li p::before {
content: "" !important;
width: 18px !important;
height: 18px !important;
background-color: #00c6ff !important; /* El cian brillante de nuestra marca */
display: inline-block !important;
flex-shrink: 0 !important;
margin-top: 3px !important; /* Alineación milimétrica con la primera línea de texto */
/* Máscara vectorial de alta fidelidad */
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain !important;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain !important;
}
/* ==========================================================================
5. DISEÑO DE MARCO PREMIUM PARA LA FOTOGRAFÍA (Right Column)
========================================================================== */
.elementor-40 .elementor-element.elementor-element-3a1230ab .services-details__content-text3 .img-box {
border-radius: 20px !important; /* Esquinas curvas impecables */
overflow: hidden !important;
box-shadow: 0px 20px 45px rgba(0, 16, 38, 0.08) !important; /* Sombra profunda sutil */
border: 1px solid rgba(0, 16, 38, 0.04) !important;
transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}
.elementor-40 .elementor-element.elementor-element-3a1230ab .services-details__content-text3 .img-box img {
width: 100% !important;
height: auto !important;
object-fit: cover !important;
display: block !important;
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}
/* Efecto de interacción interactivo (Hover) */
.elementor-40 .elementor-element.elementor-element-3a1230ab .services-details__content-text3 .img-box:hover {
transform: translateY(-6px) !important;
box-shadow: 0px 25px 55px rgba(0, 198, 255, 0.18) !important; /* El aura se ilumina en cian */
}
.elementor-40 .elementor-element.elementor-element-3a1230ab .services-details__content-text3 .img-box:hover img {
transform: scale(1.04) !important; /* Micro-zoom cinematográfico en la foto */
}
/* ==========================================================================
6. OPTIMIZACIÓN RESPONSIVE INTELIGENTE (Tablets y Celulares)
========================================================================== */
@media (max-width: 991px) {
.elementor-40 .elementor-element.elementor-element-3a1230ab .services-details__content-text3 {
flex-direction: column !important; /* Se apila verticalmente en pantallas chicas */
gap: 40px !important;
}
.elementor-40 .elementor-element.elementor-element-3a1230ab .services-details__content-text3 .content-box,
.elementor-40 .elementor-element.elementor-element-3a1230ab .services-details__content-text3 .img-box {
width: 100% !important;
max-width: 100% !important;
flex: none !important;
}
.elementor-40 .elementor-element.elementor-element-3a1230ab .services-details__content-text3 .content-box h3 {
font-size: 28px !important;
text-align: center !important;
}
}/* End custom CSS */
/* Start custom CSS for clenq-faq, class: .elementor-element-5a8f3328 *//* ==========================================================================
ACORDEÓN FAQ - ELIMINACIÓN ABSOLUTA DE AMARILLO (H2O SQUAD LUXURY)
========================================================================== */
/* 1. ENCABEZADO DE LA SECCIÓN */
.elementor-40 .elementor-element.elementor-element-5a8f3328 .services-details__faq .title-box {
margin-bottom: 35px !important;
border-bottom: 1px solid rgba(0, 16, 38, 0.08) !important;
padding-bottom: 15px !important;
}
.elementor-40 .elementor-element.elementor-element-5a8f3328 .services-details__faq .title-box h2 {
color: #001026 !important;
font-size: 32px !important;
font-weight: 900 !important;
letter-spacing: -0.8px !important;
margin: 0 !important;
}
/* CONTENEDOR GENERAL DEL GRUPO */
.elementor-40 .elementor-element.elementor-element-5a8f3328 .accrodion-grp {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
width: 100% !important;
}
/* 2. ARQUITECTURA DE LAS TARJETAS */
.elementor-40 .elementor-element.elementor-element-5a8f3328 .accrodion {
background-color: #ffffff !important;
background: #ffffff !important;
border: 1px solid rgba(0, 16, 38, 0.06) !important;
border-radius: 14px !important;
overflow: hidden !important;
position: relative !important;
z-index: 1 !important;
box-shadow: 0px 8px 25px rgba(0, 16, 38, 0.02) !important;
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
box-shadow 0.3s ease,
border-color 0.3s ease !important;
}
/* COLCHÓN DE SEGURIDAD PARA EL TÍTULO (Evita choques con la bola) */
.elementor-40 .elementor-element.elementor-element-5a8f3328 .accrodion-title {
padding: 22px 85px 22px 30px !important;
background-color: #ffffff !important;
background: #ffffff !important;
cursor: pointer !important;
position: relative !important;
display: block !important;
}
.elementor-40 .elementor-element.elementor-element-5a8f3328 .accrodion-title h4 {
color: #001026 !important;
font-size: 17.5px !important;
font-weight: 800 !important;
line-height: 1.4 !important;
margin: 0 !important;
letter-spacing: -0.3px !important;
}
/* Al pasar el cursor sobre una pregunta cerrada */
.elementor-40 .elementor-element.elementor-element-5a8f3328 .accrodion:hover {
transform: translateY(-2px) !important;
border-color: rgba(0, 198, 255, 0.3) !important;
box-shadow: 0px 12px 30px rgba(0, 16, 38, 0.05) !important;
}
/* 3. COMPORTAMIENTO INTERACTIVO (Estado Activo / Abierto) */
.elementor-40 .elementor-element.elementor-element-5a8f3328 .accrodion.active {
border-color: rgba(0, 45, 98, 0.08) !important;
box-shadow: 0px 15px 35px rgba(0, 16, 38, 0.06) !important;
border-left: 5px solid #00c6ff !important; /* Línea de acento cian */
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
}
.elementor-40 .elementor-element.elementor-element-5a8f3328 .accrodion.active .accrodion-title {
background-color: #f8fafc !important;
background: #f8fafc !important;
border-bottom: 1px solid rgba(0, 16, 38, 0.04) !important;
}
/* ==========================================================================
4. BOMBA DE EXTERMINIO: MUERTE TOTAL AL CÍRCULO AMARILLO ACTIVO
========================================================================== */
/* Targeteamos todas las combinaciones posibles de pseudo-elementos del tema */
.services-details__faq .faq-one-accrodion .accrodion.active .accrodion-title::before,
.services-details__faq .faq-one-accrodion .accrodion.active .accrodion-title::after,
.faq-one-accrodion .accrodion.active .accrodion-title::before,
.faq-one-accrodion .accrodion.active .accrodion-title::after,
.elementor-40 .elementor-element.elementor-element-5a8f3328 .accrodion.active .accrodion-title::before,
.elementor-40 .elementor-element.elementor-element-5a8f3328 .accrodion.active .accrodion-title::after,
.elementor-40 .elementor-element.elementor-element-5a8f3328 .accrodion.active .accrodion-title h4::before,
.elementor-40 .elementor-element.elementor-element-5a8f3328 .accrodion.active .accrodion-title h4::after {
/* Forzamos de manera implacable el color cian de H2O Squad */
background-color: #00c6ff !important;
background: #00c6ff !important;
color: #001026 !important; /* El guión interno pasa a azul marino */
}
/* Si la plantilla inyectó el símbolo como una fuente de iconos oculta */
.services-details__faq .faq-one-accrodion .accrodion.active .accrodion-title *::before,
.services-details__faq .faq-one-accrodion .accrodion.active .accrodion-title *::after,
.elementor-40 .elementor-element.elementor-element-5a8f3328 .accrodion.active .accrodion-title *::before,
.elementor-40 .elementor-element.elementor-element-5a8f3328 .accrodion.active .accrodion-title *::after {
color: #001026 !important; /* Forzar el menos (-) a oscuro */
}
/* 5. BLOQUE EDITORIAL DE LA RESPUESTA */
.elementor-40 .elementor-element.elementor-element-5a8f3328 .accrodion-content {
background-color: #ffffff !important;
background: #ffffff !important;
}
.elementor-40 .elementor-element.elementor-element-5a8f3328 .accrodion-content .inner {
padding: 25px 30px 30px 30px !important;
}
.elementor-40 .elementor-element.elementor-element-5a8f3328 .accrodion-content .inner p {
color: #4a5568 !important;
font-size: 15px !important;
line-height: 1.7 !important;
font-weight: 500 !important;
margin: 0 !important;
}/* End custom CSS */