/*
 Theme Name: Divi Acuabit
 Theme URI: https://www.elegantthemes.com/gallery/divi/
 Description: Divi Child Theme, enriquezido por Acuabit
 Author: Acuabit
 Author URI: https://www.acuabit.es 
 Template: Divi
 Version: 1.0.0
*/

/* =Theme customization starts here
------------------------------------------------------- */

/* =========================================================
   GENERAL
========================================================= */

:root {
    --negro: #000000;
    --blanco: #FFFFFF;
    --azuloscuro: #0B314C;
    --dorado: #E0CAAC;
}

/* =========================================================
   HEADER
========================================================= */

/* ---- HEADER NORMAL ---- */


/* ---- HEADER CUANDO HAY POPUP ABIERTO ---- */

body.popup-abierto .et-l--header .et_builder_inner_content {
    z-index: 1 !important;
}

body.popup-abierto .et-l--footer,
body.popup-abierto .btnpref {
    display: none !important;
}

body.home.popup-abierto .popup-acua {
    position: fixed !important;
    z-index: 9999999 !important;
    width: 100% !important;
    height: 100% !important;
    top: 0;
    left: 0;
}

.popup-acua {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}

/* ---- POPUP ABIERTO ---- */

body.popup-abierto .popup-acua {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.popup-acua .fila-popup {
    margin-top: auto !important;
    margin-bottom: auto !important;
}


/* =========================================================
   HEADER 
========================================================= */

/*Menú*/
@media(min-width: 981px) {
    .menu-principal li {
        padding-left: 2em !important;
        padding-right: 2em !important;
        border-right: 1px solid #FFFFFF;
    }

    .visible-mv {
        display: none !important;
    }

    .menu-principal li {
        margin-top: 0px !important;
    }

    .menu-principal li a {
        padding: 0px !important;
    }

    .menu-principal li:last-child,
    .menu-principal li.menu-item-1629 {
        border-right: none;
    }

    header.et-fixed-header .menu-principal.et_pb_menu_0_tb_header.et_pb_menu li a {
        color: #0B314C !important;
    }

    header.et-fixed-header .menu-principal li {
        border-right: 1px solid #0B314C !important;
    }

    .menu-principal li a {
        position: relative;
    }

    /* header.et-fixed-header a.et_pb_button{
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    } */
    /* línea inferior */
    header .menu-fondo .menu-principal li a::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: -5px;
        width: 0;
        height: 1px;
        background-color: #E0CAAC;
        transition: width 0.3s ease;
    }

    header.et-fixed-header .menu-principal li a::before {
        background-color: #0B314C;
    }

    /* animación de izquierda a derecha */
    .menu-principal li a:hover::before {
        width: 100% !important;
    }

    header.et-fixed-header .btn-contacto {
        color: #0B314C !important;
        border-color: #0B314C !important;
    }

    header.et-fixed-header .menu-principal li:last-child,
    header.et-fixed-header .menu-principal li.menu-item-1629 {
        border-right: none !important;
    }


    .et_pb_menu_page_id-3468,
    header.et-fixed-header .menu-principal li.et_pb_menu_page_id-3468 {
        border-right: none !important;
    }




    html body #page-container header.et-fixed-header .menu-fondo.et_pb_section a.et_pb_button.et_pb_button_0_tb_header.btn-contacto:hover {
        background-color: #0B314C !important;
        color: #FFFFFF !important;
    }

    @media(max-width: 1500px) {
        .menu-fondo .et_pb_row {
            width: 100% !important;
            max-width: 96%;
        }

        .menu-fondo .et_pb_column.et-last-child {
            justify-content: center;
        }
    }

    @media(max-width: 1279px) {
        .menu-principal li {
            padding-left: 1em !important;
            padding-rigth: 1em !important;
        }

        .menu-fondo .et_pb_button.btn-contacto {
            max-width: 110px !important;
        }
    }


    @media(max-width: 1024px) {
        .et_pb_menu__logo {
            max-width: 140px !important;
        }

    }
}

.menu-fondo .et_pb_widget_area::after {
    content: none !important;
}

.menu-fondo .et_pb_widget li a {
    color: #FFFFFF !important;
    font-weight: 100 !important;
    padding-top: 0px;
    padding-bottom: 0px;
    font-size: 14px;
    text-transform: uppercase;
}

.menu-fondo .et_pb_widget li:first-child {
    border-right: 1px solid #FFFFFF
}

header.et-fixed-header .et_pb_widget li:first-child {
    border-right: 1px solid #0B314C;
}

header.et-fixed-header .menu-fondo .et_pb_widget li a {
    color: #080808 !important;
}

.menu-fondo .wpml-ls {
    padding: 0px !important;
}

.menu-fondo .et_pb_widget_area a[aria-current="page"] {
    font-weight: 400 !important;
}

.idiomas-menu {
    padding: 0px !important;
    border: 0px !important;
}

.idiomas-menu ul {
    display: flex;
}

header.et-fixed-header .menu-principal .et_pb_menu__logo a img,
header.et-fixed-header .main-menu .et_pb_menu__logo a img {
    content: url('img/logo-itomori-bl.png') !important;
}



header.et-fixed-header .et_pb_section_0_tb_header.et_pb_section.menu-fondo {
    background-color: rgba(241, 239, 235, 0.95) !important;
    padding: 2.5px 0px;
    border-bottom: 1px solid #0B314C;
    padding-top: 15px;
    padding-bottom: 15px;
}




@media(max-width:980px) {
    #mobile_menu1 .et_mobile_menu {
        top: 132%;
    }

    header.et-fixed-header #mobile_menu1 .et_mobile_menu {
        top: 108%;
    }

    #mobile_menu1 li a {
        color: #0B314C !important;
        border-bottom: 1px solid rgba(11, 49, 76, 0.05);
    }

    header.et-fixed-header .mobile_menu_bar::before {
        color: #0B314C !important;
    }

    #mobile_menu1 {
        border-color: #0B314C !important;
        background: #FBFAF7;
        top: 68px !important;
        left: -8px !important;
        width: 100vw !important;
        text-align: center !important;

        li a {
            padding: 40px 0px !important;
        }
    }
}

/* =========================================================
   HOME
========================================================= */

/* Contenedor del vídeo con posición relativa para la capa */
.video-fondo {
    position: relative;
    overflow: hidden;
}

/* Capa degradada superpuesta al vídeo */
.video-fondo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(102, 102, 102, 0) 0%,
            /* totalmente transparente arriba */
            rgba(102, 102, 102, 0) 58%,
            /* se mantiene transparente hasta la mitad */
            rgba(11, 49, 76, 0.45) 79%,
            /* empieza a oscurecer suavemente en el 71% */
            rgba(11, 49, 76, 0.85) 100%
            /* máxima opacidad abajo para el texto */
        );
    pointer-events: none;
    /* No bloquea clics */
    z-index: 1;
}

/* Asegura que el contenido (título, botones) quede por encima */
.video-fondo .et_pb_row,
.video-fondo .et_pb_text,
.video-fondo .et_pb_button_module_wrapper {
    position: relative;
    z-index: 2;
}


/* Efecto vidrio sutil solo en móvil */
@media screen and (max-width: 767px) {
    .fila-botones {
        background: rgba(11, 49, 76, 0.04);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        padding: 14px 18px;
        margin: 0 12px;
        border: none !important;
        border-radius: 0 !important;
    }

    .fila-botones .et_pb_button {
        border: none !important;
        border-radius: 0 !important;
    }
}

/* linea abajo hover con TEXTO menu seccion 2*/
/* --- Texto en negrita --- */
.texto-linea .et_pb_text_inner p {
    transition: font-weight 0.25s ease;
}

.texto-linea:hover .et_pb_text_inner p {
    font-weight: 700;
}








/*_______________________________________________________________________________*/

/* --- Línea que crece de 100% a 180% desde la izquierda --- */
.texto-linea .linea-separador {
    transform-origin: left;
    /* crece desde la izquierda */
    transform: scaleX(1);
    /* estado normal: 100% */
    transition: transform 0.35s ease;
    display: inline-block;
    /* necesario para scaleX */
}

.texto-linea:hover .linea-separador {
    transform: scaleX(1.8);
    /* hover: 180% (se estira un 80%) */
}


/*_______________________________________________________________________________*/


/* =========================================================
   LÍNEA SCROLL HACIA ABAJO
========================================================= */

/* No tocamos el transform del módulo porque Divi lo usa para girarlo */
.linea-abajo {
    overflow: visible !important;
}

/* ---- ESTADO INICIAL ---- */

.linea-abajo::before {
    border-top-color: var(--azuloscuro) !important;

    transform: scaleX(0);
    transform-origin: left center;

    transition: transform 4s cubic-bezier(0.25, 0.1, 0.25, 1);

    will-change: transform;
}

/* ---- LÍNEA VISIBLE ---- */

.linea-abajo.revealed::before {
    transform: scaleX(1);
}



/*NUESTRO TRABAJO*/

.nuestro-trabajo {
    position: relative;
}

.nuestro-trabajo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Degradado intenso: color puro #0B314C a la izquierda, se desvanece al 50% */
    background: linear-gradient(to right,
            rgba(11, 49, 76, 1) 15%,
            /* totalmente opaco en el borde izquierdo */
            rgba(11, 49, 76, 0.7) 30%,
            /* aún fuerte al 20% */
            rgba(11, 49, 76, 0.3) 50%,
            /* se suaviza progresivamente */
            rgba(11, 49, 76, 0) 950%
            /* totalmente transparente en la mitad */
        );
    pointer-events: none;
    z-index: 1;
}

/*SERVICIO HOVER CARD*/
/* Sombra base mínima siempre visible */
.servi1 {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease;
}

/* Al pasar el ratón, la sombra se hace más notoria */
.servi1:hover {
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.14);
}

/*________________________________________________________________________________________*/

/* ============================================
   FORMULARIO - SIN FONDO, SOLO BORDE INFERIOR
   ============================================ */

.formulario-exacto {
    max-width: 580px;
    margin: 0 auto;
    padding: 20px 0;
    background: transparent;
    font-family: 'Inter', sans-serif;
}

/* ============================================
   SEPARACIÓN ENTRE CAMPOS
   ============================================ */

.campo {
    margin-bottom: 30px;
}

.campo:last-of-type {
    margin-bottom: 0;
}

/* ============================================
   ETIQUETAS
   ============================================ */

.campo label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #333333;
    letter-spacing: 0.3px;
    font-family: 'Inter', sans-serif;
}

/* ============================================
   CAMPOS INPUT - SIN FONDO, SOLO BORDE INFERIOR
   ============================================ */

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"] {
    width: 100%;
    padding: 14px 16px 12px 0;
    border: none;
    border-bottom: 2px solid #D8D4CD;
    border-radius: 0;
    background: transparent !important;
    color: #333333;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
    height: 50px;
    outline: none;
    box-shadow: none !important;
    transition: border-color 0.3s ease;
}

/* ============================================
   SELECT - SIN FONDO, SOLO BORDE INFERIOR
   ============================================ */

.campo select {
    width: 100%;
    padding: 14px 16px 12px 0;
    border: none;
    border-bottom: 2px solid #D8D4CD;
    border-radius: 0;
    background: transparent !important;
    color: #333333;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
    height: 50px;
    outline: none;
    box-shadow: none !important;
    transition: border-color 0.3s ease;


    /* Flecha oscura (#333333) */
    background-repeat: no-repeat;
    background-position: right 0 center;
    padding-right: 20px;
    /* Espacio para la flecha */
    cursor: pointer;
}

.campo select {}

.campo select option {
    color: #333333;
    background: #ffffff;
}

/* ============================================
   FOCUS - BORDE INFERIOR AZUL
   ============================================ */

.campo input[type="text"]:focus,
.campo input[type="email"]:focus,
.campo input[type="tel"]:focus,
.campo select:focus {
    border-bottom-color: #285070;
}

/* ============================================
   TEXTAREA (MENSAJE) - CON BORDE COMPLETO Y FONDO
   ============================================ */

.campo textarea {
    width: 100%;
    padding: 14px 16px;
    border-bottom: 1px solid #080808 !important;
    border-radius: 4px;
    background: transparent;
    color: #0B314C !important;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
    height: 130px;
    resize: vertical;
    line-height: 1.6;
    outline: none;
    transition: border-color 0.3s ease;
}

.wpcf7-acceptance label {
    display: flex;
    align-items: flex-start;
}

.wpcf7-acceptance label input {
    margin: 5px 1em 0px 0px;
}

.wpcf7-acceptance label span {
    font-size: 12px;
    font-weight: 200;
    color: #0B314C;
    letter-spacing: 0px;
    line-height: 1.7em;
}

.campo textarea:focus {
    border-color: #0C71C3;
    box-shadow: 0 0 0 2px rgba(12, 113, 195, 0.1);
}

.campo br {
    display: none;
}

.campo span {
    display: block;
}

/* ============================================
   PLACEHOLDERS
   ============================================ */

.campo input::placeholder,
.campo textarea::placeholder {
    color: #B5B0A8;
    font-size: 11px;
    font-weight: 300;
}

/* ============================================
   FILA DOBLE - TELÉFONO + EMAIL
   ============================================ */

.fila-doble {
    display: flex;
    gap: 30px;
}

.fila-doble .mitad {
    flex: 1;
    min-width: 0;
}

.fila-checkbox-boton {
    display: flex;
    gap: 20px;
}

.fila-checkbox-boton>* {
    flex: 0 0 calc(50% - 10px);
}

.fila-checkbox-boton button {
    color: #0B314C !important;
    padding: 0px !important;
}

.columna-boton p {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
    padding-right: 2.5em;
}

.columna-boton p button {
    margin: 0px !important;
    font-weight: 400 !important;
}

.fila-checkbox-boton .wpcf7-list-item {
    margin: 0px !important;
}

.columna-boton p button::before {
    content: none !important;
}

.columna-boton p button.et_pb_button.wpcf7-submit:hover {
    padding: 0px !important;
    background: none !important;
}

.columna-boton p::after {
    content: ' ';
    display: block;
    height: 1px;
    background: #E0CAAC;
    width: 30px;
    position: absolute;
    top: 30%;
    right: 0px;
}

/* ============================================
   ERRORES
   ============================================ */

.wpcf7-not-valid-tip {
    color: #D32F2F;
    font-size: 13px;
    margin-top: 6px;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
    border-color: #D32F2F;
}

.wpcf7 form.sent .wpcf7-response-output {
    border-color: #0C71C3;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width: 1500px) {
    .et_pb_row {
        width: 90% !important;
    }

    .et_pb_row.fila-proyectos {
        width: 100% !important;
    }
}

@media(max-width:980px) {



    .idiomaspie {
        top: -35px;
    }

    .idiomaspie .et_pb_widget,
    .idiomaspie .et_pb_widget .wpml-ls-sidebars-et_pb_widget_area_2,
    .idiomaspie .et_pb_sidebar_0_tb_footer,
    .idiomaspie .et_pb_row,
    .idiomaspie .et_pb_column,
    .idiomaspie {
        width: max-content !important;
        max-width: max-content !important;
    }

    #section-pie-flotante .idiomaspie {
        top: -26px !important;
    }

    .idiomaspie .et_pb_widget {
        background: #FFFFFF;
        margin-bottom: 0px !important;
    }

    .idiomaspie .et_pb_widget_area::after {
        content: none !important;
    }

    .idiomaspie .et_pb_widget {
        border-top-left-radius: 8px;
        box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.3);
    }

    .idiomaspie .et_pb_widget .wpml-ls {
        padding: 0px !important;
    }
}

@media (max-width: 768px) {
    .formulario-exacto {
        padding: 10px 15px;
    }

    .fila-doble {
        flex-direction: column;
        gap: 0;
    }

    .fila-doble .mitad {
        width: 100%;
    }

    .fila-checkbox-boton {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }

    .columna-boton {
        width: 100%;
        text-align: right;
    }

    .columna-boton .btn-enviar {
        text-align: right;
        min-width: auto;
        width: 100%;
    }

    .campo input[type="text"],
    .campo input[type="email"],
    .campo input[type="tel"],
    .campo select {
        height: 46px;
        font-size: 15px;
    }

    .campo textarea {
        height: 100px;
    }
}

@media (max-width: 480px) {
    .campo {
        margin-bottom: 24px;
    }

    .campo label {
        font-size: 12px;
        margin-bottom: 8px;
    }

    .columna-checkbox .wpcf7-list-item-label {
        font-size: 13px;
    }

    .campo input[type="text"],
    .campo input[type="email"],
    .campo input[type="tel"],
    .campo select {
        height: 42px;
        font-size: 14px;
        padding: 10px 0 8px 0;
    }

    .campo textarea {
        height: 80px;
        padding: 10px 12px;
        font-size: 14px;
    }

    .columna-boton .btn-enviar {
        font-size: 13px !important;
        letter-spacing: 1px;
    }
}


/*_________________________animacion de la imagen trabajamos ___________________________________*/



/* Estado inicial: oculta y desplazada */
.columna-trabajamos .imagen-trabajamos {
    opacity: 0;
    transform: translateX(120px);
    transition: opacity 1.8s cubic-bezier(0.22, 1, 0.36, 1),
        /*1s*/
        transform 2s cubic-bezier(0.22, 1, 0.36, 1);
    /*2s*/
    will-change: opacity, transform;
}

/* Estado visible cuando se activa la clase */
.columna-trabajamos .imagen-trabajamos.visible {
    opacity: 1 !important;
    transform: translateX(0) !important;
}


/*--FAQS--*/
.pfrecuentes .et_pb_toggle::before {
    content: ' ';
    background: #0B314C;
    width: 8px;
    height: 8px;
    top: 30px;
    left: 0px;
    position: absolute;
    display: block;
}

.pfrecuentes .et_pb_toggle_content {
    padding-left: 1rem;
}


/*------------------------proyecto imagen hover---------------------- */


[class*="protecto-card"] {
    position: relative;
    overflow: hidden;
}

[class*="protecto-card"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
    z-index: 0;
}

[class*="protecto-card"]:hover::before {
    transform: scale(1.08);
}

[class*="protecto-card"]>* {
    position: relative;
    z-index: 1;
}











/* =========================================================
   FOOTER
========================================================= */



#firma {
    background: var(--azuloscuro);
    color: var(--blanco);
    font-size: 10px;
    text-align: center;
    padding: 10px 0px;
}

#firma a {
    color: var(--blanco);
}

/* Responsive Footer */
@media (max-width:780px) {

    .footer-legal .et_pb_menu .et_pb_menu__menu {
        display: block !important;
    }

    .footer-legal .et_pb_menu .et_mobile_nav_menu {
        display: none !important;
    }

    #menu-legal {
        flex-direction: column !important;
        align-items: center !important;
    }

    #firma {
        border-top: 1px solid var(--blanco);
        padding-bottom: 8em !important;
    }

}


/* =========================================================
   BANNER COOKIES
========================================================= */

html.show--consent .btnpref,
html.show--preferences .btnpref {
    display: none;
}

.btnpref {
    position: fixed;
    z-index: 99999999999;
    bottom: 15px;
    left: 15px;
    max-width: 72px;
    font-size: 14px;
    padding: 5px;
    border-radius: 8px;
    background-color: white;
    box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.3);
    border: 1px solid black;
}

.btnpref img {
    max-width: 40px;
    transition: transform 0.3s ease-in-out;
}

.btnpref img:hover {
    transform: scale(1.1);
    animation: bounce 0.5s ease;
}

/*animacion efecto rebote*/
@keyframes bounce {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.2);
    }

    50% {
        transform: scale(1);
    }

    70% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.btnpref:hover {
    cursor: pointer;
}

/*--Responsive Cookies--*/

@media (max-width: 780px) {
    .btnpref {
        bottom: 55px !important;
        left: 0px;
        max-width: 180px;
        border: none !important;
        border-radius: 0px 8px 0px 0px !important;
        border-bottom-left-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
    }

    .btnpref img {
        max-width: 14px !important;
    }

    .columna-boton p::after {
        width: 120px;
    }

    .columna-boton p {
        align-items: flex-start;
    }


}





/* ------------ RESPONSIVE ------------------ */

@media (min-width:1279px) and (max-width: 1601px) {
    .titulo-h1 h1 {
        font-size: 32px !important;
    }

    .et_pb_divider::before {
        border-top-width: 2px !important;
    }

    .eyebrow h2 {
        font-size: 10px !important;
    }

    .titulo-seccion p {
        font-size: 46px !important;
        line-height: 58px !important;
    }

    .et_pb_row.fila-proyectos {
        width: 90% !important;
    }

    #servicios .servicio-card {
        width: 90% !important;
    }
}