/* 
Theme Name: Flex Hidráulica
Description: Flex Hidráulica Child es un tema realizado para la empresa Flex Hidráulica
Author: Nexbu
Author URI: https://nexbu.com/
Template: hello-elementor
Version: 1.0.0
Text Domain: flex-hidraulica
*/
/*** Contenedor ***/
.container-padding {
    padding: 0 56px!important;
}

body:not(.elementor-editor-active) .hidden {
    overflow: hidden!important;
}

.absolute-right {
    top: 0;
    position: absolute!important;
    right: 0;
}

.elementor-icon {
    display: flex;
}

.relative > .e-con-inner {
    position: relative;
}

/*** Header ***/
#site-header {
    left: 0;
    position: fixed;
    top: 0;
    transition: transform 0.6s ease, background-color 0.6s ease, height 0.6s ease;
    width: 100%;
    z-index: 9999;
}

/* Icono */
.elementor-widget-n-menu .e-n-menu-title .e-n-menu-dropdown-icon {
    position: absolute!important;
    right: -20px;
    transform: scale(0.8)!important;
    transform-origin: center right;
    transition: all .4s!important;
}

/* Oculto hacia arriba */
#site-header.scrolled:not(.scroll-activo), #site-header.scrolled.scroll-activo {
    background-color: var( --e-global-color-primary )!important;
}

#site-header.scrolled:not(.scroll-activo) {
    min-height: 0!important;
    transform: translateY(-100%);
}
#site-header.scrolled:not(.scroll-activo) .btn-menu a, #site-header.scrolled.scroll-activo .btn-menu a {
    background-color: var( --e-global-color-text );
	border-color: var( --e-global-color-text );
}

#site-header.scrolled:not(.scroll-activo) .btn-menu a:hover, #site-header.scrolled.scroll-activo .btn-menu a:hover {
    background-color: var( --e-global-color-fba804f );
	border-color: var( --e-global-color-fba804f );
}

/* Visible con fondo */
#site-header.scrolled.scroll-activo {
    transform: translateY(0);
}

path.letra {
    transition: all .4s!important;
}

.scroll-activo path.letra {
    fill: #fff!important;
}

/* Header megamenú */
#site-header:has(.e-n-menu-content.e-active),
header.elementor-location-header:has(.e-n-menu-content.e-active),
#site-header:has(.e-n-menu-toggle[aria-expanded="true"]),
header.elementor-location-header:has(.e-n-menu-toggle[aria-expanded="true"]) {
    background-color: #2A4ABC!important;
    transition: background-color .4s ease;
}

#site-header:has(.e-n-menu-content.e-active) path.letra, header.elementor-location-header:has(.e-n-menu-content.e-active) path.letra {
    fill: #fff;
}

/* Whatsapp */
#whatsapp {
    align-items: center;
    display: flex;
    height: 65px;
    justify-content: center;
    padding-top: 3px;
    transition: all .4s;
    width: 65px;
}

#whatsapp:hover {
    transform: scale(1.1)
}

/*** Número ***/
.elementor-counter-number-prefix {
    color: var(--e-global-color-primary)!important;
    font-size: var( --e-global-typography-8b9ea22-font-size );
    font-weight: 500;
}

/*** Botón ***/
.elementor-button .elementor-button-icon {
    transition: all .4s;
}

.elementor-button:hover .elementor-button-icon {
    filter: brightness(0) invert(0);
    transform: rotate(45deg);
}

/*** Slider ***/
.slider .swiper-slide {
    transition: opacity 0.5s ease-in-out!important;
}

/*** Carousel ***/
.slider-proyecto .swiper.elementor-loop-container {
    margin-right: -4%!important;
}

.slider-proyecto .swiper.elementor-loop-container::after {
    bottom: 0;
    background: linear-gradient(to left, #fbfbfb, transparent);
    content: "";
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 380px;
    z-index: 2;
}

.single-post .slider-proyecto .swiper.elementor-loop-container::after {
    background: linear-gradient(to left, #f3f7ff, transparent);
}

.slider-proyecto a .elementor-icon-box-wrapper {
    opacity: 0;
    transition: all .4s;
}

.slider-proyecto a:hover .elementor-icon-box-wrapper {
    opacity: 1;
}

/* Marcas */
#marcas::after, #marcas::before {
    background: linear-gradient(to left, #fff, transparent);
    bottom: 0px;
    content: "";
    pointer-events: none;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 100px;
    z-index: 2;
}

#marcas::before {
    background: linear-gradient(to right, #fff, transparent);
    left: 0px;
    right: inherit;
}

#marcas img {
    filter: grayscale(100%);
    transition: all .4s;
}

#marcas img:hover {
    filter: grayscale(0%);
}

/*** Títulos animación ***/
.titulo-efecto span.palabra {
    display: inline-block;
    white-space: nowrap;
}

body:not(.elementor-editor-active) .titulo-efecto span.letra {
    display: inline-block;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.30s ease, transform 0.30s ease;
}

body:not(.elementor-editor-active) .titulo-efecto span.letra.visible {
    opacity: 1;
    transform: translateY(0);
}

body:not(.elementor-editor-active) .titulo-efecto h1, body:not(.elementor-editor-active) .titulo-efecto h2, body:not(.elementor-editor-active) .titulo-efecto h3 {
    opacity: 0;
}

body:not(.elementor-editor-active) .titulo-efecto.listo h1, body:not(.elementor-editor-active) .titulo-efecto.listo h2, body:not(.elementor-editor-active) .titulo-efecto.listo h3 {
    opacity: 1;
}

/*** Títulos ***/
.titulo-efecto strong {
    color: var(--e-global-color-4db71f6);
}

/*** Box - Hover ***/
/* Box 1 */
.box-hover h2, .box-hover p, .box-hover img, .box-hover .elementor-icon-box-wrapper {
    transition: all .4s;
}

body:not(.elementor-editor-active) .box-hover img {
    filter: grayscale(100%);
}

body:not(.elementor-editor-active) .box-hover:hover img {
    filter: grayscale(0%);
}

body:not(.elementor-editor-active) .box-hover .elementor-icon-box-wrapper {
    opacity: 0;
}

body:not(.elementor-editor-active) .box-hover:hover .elementor-icon-box-wrapper {
    opacity: 1;
}

.box-hover:hover h2, .box-hover:hover p {
    color: var( --e-global-color-primary )!important;
}

/*** Tabs ***/
.tab-width .e-n-tabs {
    justify-content: space-between!important;
}

.tab-width .e-n-tabs-heading {
    max-width: 33%!important;
    min-width: 33%!important;
    width: 33%!important;
}

.tab-width .e-n-tabs-content {
    max-width: 62%!important;
    min-width: 62%!important;
    width: 62%!important;
}

.tab-width .e-n-tab-title {
    background-color: transparent!important;
}

.tab-width span.e-n-tab-title-text {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.tab-width span.e-n-tab-title-text span {
    align-items: center;
    color: var( --e-global-color-primary );
    display: flex;
    gap: 10px;
    font-size: var(--e-global-typography-b145bdb-font-size);!important;
    font-weight: 700!important;
    opacity: 0;
    transition: all .4s;
}

.tab-width span.e-n-tab-title-text span::after {
    content: "";
    display: inline-block;
    width: 41px;
    height: 41px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='41' height='41' viewBox='0 0 41 41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='41' height='41' rx='20.5' fill='%230063FF'/%3E%3Cg clip-path='url(%23clip0_554_912)'%3E%3Cpath d='M25.3908 17.4886L20.4239 20.8949M20.4168 20.8998L15.0243 24.5967M16.7142 15.499L24.5984 16.9699C24.9179 17.0296 25.2007 17.2137 25.3846 17.4818C25.5684 17.75 25.6382 18.0801 25.5786 18.3997L24.108 26.284' stroke='white' stroke-width='1.60784' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_554_912'%3E%3Crect width='18.6801' height='18.6801' fill='white' transform='translate(22.6416 8.03918) rotate(55.5665)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.tab-width .e-n-tab-title[aria-selected="true"] span, .tab-width .e-n-tab-title:hover span {
    opacity: 1!important;
}

.tab-width .e-n-tabs-heading .e-n-tab-title {
    border-top: 1px solid #E9EAEB!important;
    border-bottom: 1px solid #E9EAEB!important;
}

/*** Acordeón ***/
.acordeon summary.e-n-accordion-item-title {
    border-left-width: 0!important;
    border-right-width: 0!important;
}
    
.acordeon .e-n-accordion-item-title-text {
    align-items: center!important;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.acordeon .e-n-accordion-item-title-text:after {
    content: "+";
    display: inline-block;
    font-weight: 400;
    margin-right: 5%;
    transition: transform 0.4s ease;
}

.acordeon details.e-n-accordion-item[open] .e-n-accordion-item-title-text:after,
.acordeon .e-n-accordion-item-title:hover .e-n-accordion-item-title-text:after {
    transform: rotate(45deg);
}

/*** Formulario ***/
form a {
    color: var( --e-global-color-accent )!important;
    transition: all .4s;
}

span.elementor-field-option {
    align-items: flex-start;
    display: flex;
    gap: 10px;
}

span.elementor-field-option input {
    margin-top: 3px;
}

form a:hover {
    opacity: 0.5!important;
}

form :focus-visible {
    box-shadow: none!important;
    outline: none!important;
    outline-offset: none!important;
}

form :focus {
    box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0)!important;
    border-bottom: 1px solid var( --e-global-color-accent )!important;
}

label a {
    font-size: inherit!important;
    text-decoration: underline!important;
    transition: all .4s;
}

form label a:focus {
    border-bottom-width: 0!important;
}

label a:hover {
    opacity: 0.5;
}

.elementor-message-svg:before {
    filter: brightness(0) invert(1);
}

#form-field-adjuntar {
    width: 100%!important;
}

.elementor-field-type-html {
    margin-top: -20px;
}

/*** Plantilla: Proyectos ***/
figure.wp-block-gallery {
    margin-top: 80px;
}

/* Plantilla: Contenido */
.text-contenido p {
    padding-bottom: 20px;
}

.text-contenido p:last-child {
    padding-bottom: 0;
}

.text-contenido h2 {
    color: var( --e-global-color-accent )!important;
    font-size: 28px!important;
    font-weight: 600!important;
    margin-top: 30px;
}

ul.wp-block-list {
    margin-bottom: 40px;
}

.text-contenido a {
    color: var( --e-global-color-accent )!important;
    font-size: var(--e-global-typography-3d29f11-font-size)!important;
    text-decoration: underline!important;
    transition: all .4s;
}

.text-contenido a:hover {
    opacity: 0.4;
}

/*** Responsive ***/
/* Full */
@media (min-width: 1500px) {
    /* Contenedor */
    .mobile-relative > .e-con-inner {
        position: relative;
    }
}

@media (min-width: 1800px) {
    /* Slider */
    .elementor-swiper-button.elementor-swiper-button-next {
        right: 15%!important;
    }
    
    .elementor-swiper-button.elementor-swiper-button-prev {
        left: 82%!important;
    }
}

@media (min-width: 2000px) {
    /* Slider */
    .elementor-swiper-button.elementor-swiper-button-next {
        right: 25%!important;
    }
    
    .elementor-swiper-button.elementor-swiper-button-prev {
        left: 72%!important;
    }
}

/* Pórtatil */
@media (max-width: 1366px) {
    /* Contenedor */
    .container-padding {
        padding: 0 30px!important;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    /* Contenedor */
    .container-padding {
        padding: 0!important;
    }
    
    /* Scroll Box */
    .scroll-box {
        padding: 0 20px 20px 20px!important;
        overflow-y: scroll!important;
        scrollbar-color: var(--e-global-color-c44305c) #f4f1f1!important;
    }
    
    .scroll-box::-webkit-scrollbar {
        height: 6px!important;
    }
    
    .scroll-box::-webkit-scrollbar-track {
        background: #f4f1f1!important;
    }
    
    .scroll-box::-webkit-scrollbar-thumb {
        background-color: var(--e-global-color-c44305c)!important;
    }

    .scroll-box .box-hover,  .scroll-box .box-width {
        min-width: 250px!important;
    }
    
    .box-hover-3 {
        min-width: 300px!important;
    }
    
    /* Notebook */
    #grilla-centrar {
        align-items: unset!important;
        display: grid!important;
        grid-template-columns: 60% 40%!important;
    }
    
    .computador {
        grid-column: 1!important;
        grid-row: 1 / 3!important;
    }
    
    .grilla-1, .grilla-2 {
        grid-column: 2!important;
    }
    
    .grilla-1 {
        align-self: end!important;
        grid-row: 1!important;
    }
    
    .grilla-2 {
        align-self: start!important;
        grid-row: 2!important;
    }
    
    /* Box 3*/
    .num h2 {
        display: none;
    }
    
    /* Plantilla: Informativa */
    .text-contenido h2 {
        font-size: 26px!important;
    }
}

/* Desk */
@media (min-width: 1024px) {
    /* Plantilla Proyecto */
    .single-post .elementor-widget-n-menu .e-n-menu-toggle svg {
        fill: #142358;
    }
    
    /* Box 3 */
    #box-hover .box-hover-3 {
        cursor: pointer;
        flex: 1 1 0!important;
        min-width: 0!important;
        transition: flex-grow .35s ease, min-height .35s ease, padding .35s ease!important;
        overflow: hidden;
    }
    
    #box-hover .box-hover-3.en-foco {
        box-shadow: 0 4px 43.5px 0 #EAF1FC;
        flex-grow: 1.2!important;
        min-height: 700px;
        padding: 20px !important;
    }
    
    #box-hover .box-hover-3.activo {
        flex-grow: .55!important;
    }
    
    .oculto {
        height: 0!important;
        opacity: 0;
        overflow: hidden;
        transition: opacity .35s ease;
    }
    
    .box-hover-3.en-foco .oculto {
        height: auto!important;
        opacity: 1;
    }
    
    .num h2 {
        font-weight: 400!important;
        transition: opacity .35s ease;
    }
    
    .box-hover-3.en-foco .num h2 {
        opacity: 0;
    }
    
    .text-hover {
        min-width: 380px!important;
        width: 380px!important;
    }
}

@media (min-width: 767px) {
    /* Header */
    .home path.letra {
        fill: #142358;
    }
    
    span.e-n-menu-title-text {
        color: #fff;
    }
    
    #menu-mobile {
        display: none;
    }
    
    /* Plantilla Proyecto */
    .single-post path.letra {
        fill: #142358;
    }
    
    .single-post span.e-n-menu-title-text {
        color: var(--e-global-color-text)!important;
    }
    
    #site-header:has(.e-n-menu-content.e-active) span.e-n-menu-title-text,
    header.elementor-location-header:has(.e-n-menu-content.e-active) span.e-n-menu-title-text,
    #site-header:has(.e-n-menu-toggle[aria-expanded="true"]) span.e-n-menu-title-text,
    header.elementor-location-header:has(.e-n-menu-toggle[aria-expanded="true"]) span.e-n-menu-title-text {
        color: #fff!important;
    }
    
    .single-post #site-header.scrolled  span.e-n-menu-title-text {
        color: #fff!important;
    }
    
    .single-post .e-n-menu-item path {
        fill: #fff!important;
    }
    /* Box 2*/
    .box-hover-2 {
        opacity: 0.3!important;
        overflow: hidden!important;
        transition: all .4s!important;
    }
    
    .box-hover-2:hover {
        opacity: 1!important;
    }
    
    body:not(.elementor-editor-active) .ocultar {
        display: flex;
        height: 0;
        visibility: hidden;
        opacity: 0;
        transform: translateY(90%);
        transition: opacity .4s, visibility .4s, translateY .4s, height .4s;
    }
    
    body:not(.elementor-editor-active) .box-hover-2:hover .ocultar {
        height: auto;
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }
    
    /* Contador */
    .border {
        border-width: 0!important;
    }
    
    /* Tabs */
    .tab-width .e-n-tabs-heading .e-n-tab-title + .e-n-tab-title {
        border-top: none!important;
    }
    
    /* Acordeón */
    .acordeon details.e-n-accordion-item[open] + details.e-n-accordion-item summary.e-n-accordion-item-title {
        border-top-width: 1px!important;
    }
    
    .acordeon details.e-n-accordion-item[open] summary.e-n-accordion-item-title {
        border-width: 0!important;
    }

    .acordeon details.e-n-accordion-item + details.e-n-accordion-item summary.e-n-accordion-item-title {
        border-top-width: 0!important;
    }

    body:not(.elementor-editor-active) .acordeon summary.e-n-accordion-item-title {
        min-height: 80px;
    }
    
    body:not(.elementor-editor-active) .acordeon details.e-n-accordion-item[open] summary.e-n-accordion-item-title {
        margin-top: -80px;
    }

    body:not(.elementor-editor-active) .acordeon span.e-n-accordion-item-title-header {
        position: absolute;
        right: 0;
        top: 16%;
        width: 46%;
    }
}

/* Mobile */
@media (max-width: 767px) {
    /* Header */
    #site-header.scrolled:not(.scroll-activo) {
        min-height: 80px!important;
        transform: translateY(0%);
    }

    path.letra {
        fill: #fff;
    }
    
    header .e-n-menu-wrapper {
        background-color: var(--e-global-color-89e141c)!important;
    }
    
    ul.e-n-menu-heading {
        margin: auto!important;
        max-width: 90%;
    }
    
    header span.e-n-menu-title-text {
        font-size: clamp(18px, 2vw, 35px)!important;
        font-weight: 700!important;
    }
    
    .elementor-widget-n-menu .e-n-menu[data-layout=dropdown] .e-n-menu-title {
        background-color: #ffffff00!important;
    }
    
    #whatsapp {
        height: 45px;
        width: 45px;
    }
    
    /* Plantilla Proyecto */
    .single-post #site-header {
        background-color: var(--e-global-color-89e141c)!important;
    }
    
    /* Contenedor */
    .absolute-right, .relative-mobile, .relative {
        bottom: initial!important;
        left: initial!important;
        position: relative!important;
        right: initial!important;
        top: initial!important;
    }
    
    /* Notebook */
     #grilla-centrar {
        direction: rtl;
        grid-template-columns: 55% 45%!important;
    }
    
    /* Slider Proyecto */
    .slider-proyecto .swiper.elementor-loop-container {
        margin-left: 5%;
        margin-right: -70%!important;
    }
    
    .slider-proyecto .swiper.elementor-loop-container::after {
        width: 60%;
    }
    
    /* Acordeón */
    .acordeon summary.e-n-accordion-item-title {
        padding: 30px 20px!important;
    }

    .acordeon .e-n-accordion-item-title-text:after {
        margin-right: 0;
    }

    .acordeon span.e-n-accordion-item-title-header {
        width: 100%;
    }
    
    .acordeon summary.e-n-accordion-item-title {
        border-bottom: 0!important;
    }
    
    /* Botón - Icono */
    .elementor-element .elementor-widget-icon-box.elementor-mobile-position-block-start .elementor-icon-box-wrapper {
        align-items: center!important;
        flex-direction: row-reverse!important;
    }
    
    /* Plantilla: Informativa */
    .text-contenido h2 {
        font-size: 23px!important;
        margin-top: 15px;
    }
}