/*
 Theme Name:   LP Verdalba
 Theme URI:    https://understrap.com
 Description:  Tema hijo basado en Understrap para la landing page de Verdalba
 Author:       Olózfera
 Author URI:   https://olozfera.com/
 Template:     understrap
 Version:      1.2.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  understrap-child
 Tags: one-column, custom-menu, featured-images, theme-options, translation-ready
 GitHub Theme URI: understrap/understrap-child
*/

body:not(.elementor-editor-active) #menu-principal .elementor-nav-menu--dropdown, body:not(.elementor-editor-active) .imagen-fondo-header img {
    height: var(--alto-ventana) !important;
}

div[data-elementor-type=wp-page] {
    overflow: hidden
}

#wpadminbar {
    background: rgba(0, 0, 0, .15)
}

html:has(body.admin-bar) {
    margin-top: 0 !important
}

:root {
    --alto-ventana: 100vh;
    --acumin-pro: 'Acumin Pro';
    --light: 300;
    --normal: 400;
    --medium: 500;
    --bold: 700;
    --black: 900;
    --negro: #464646;
    --azul: #377BBF;
    --bs-primary-rgb: 55, 123, 191;
    --ancho-menu-principal: 100vw
}

body {
    

    --bs-body-font-family: var(--acumin-pro), sans-serif;
    --bs-body-font-weight: var(--normal);
    --bs-body-color: var(--negro);
    --bs-body-font-size: 1.125rem;
    
    /* 1. Obliga a Chrome a usar un renderizado más fino */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* 2. Acumin suele verse más apretada en web que en Figma; 
    un poco de tracking ayuda a que no se vea tan "pesada" */
    letter-spacing: 0.01em;
    
    /* 3. TRUCO FINAL: Si sigue viéndose gorda, reduce el grosor artificialmente.
    0.1px o 0.15px es casi imperceptible pero quita el 'bloat' de Chrome */    
    -webkit-text-stroke: 0.1px rgba(0,0,0,0.05);


}


.elementor-field-label,
.elementor-field,
.elementor-widget-text-editor p,
.elementor-heading-title,
.elementor-button-text,
.elementor-icon-list-text
{
    text-box: trim-both cap alphabetic !important;
    leading-trim: both;
    text-edge: cap alphabetic;     
}





[data-elementor-type="wp-page"] p{

}

.navbar-nav {
    --bs-nav-link-font-size: 16px;
    --bs-nav-link-color: rgba(255, 255, 255, 0.75);
    --bs-nav-link-hover-color: rgba(255, 255, 255, 1)
}

p {
    text-wrap: pretty
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: var(--acumin-pro), sans-serif;
    font-weight: var(--light);
    color: var(--azul);
    line-height: 1.25;
    text-wrap: balance
}

strong {
    font-weight: 500
}

#page-wrapper {
    padding: 16px 0
}

.content-area {
    padding-left: 0;
    padding-right: 0
}

.container, .container-sm {
    max-width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto
}

@media (min-width: 576px) {
    .container, .container-sm {
        max-width: calc(100% - 32px);
        margin-left: auto;
        margin-right: auto
    }
}

@media (min-width: 768px) {
    #page-wrapper {
        padding: 24px 0
    }

    .container, .container-md, .container-sm {
        max-width: calc(100% - 48px);
        margin-left: auto;
        margin-right: auto
    }
}




@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1320px
    }
}

.mobile-menu .elementor-item.elementor-item-active {
    font-weight: 900 !important
}

.acordeon-marcas .e-n-tabs-heading .e-n-tab-title[aria-selected=true], .desktop-menu .elementor-item.elementor-item-active {
    font-weight: 700 !important
}

.elementor-heading-title {
    line-height: 1.25
}

.elementor-menu-toggle {
    padding: 0;
    margin-bottom: 6px
}

.elementor-menu-toggle__icon--close {
    z-index: 9999 !important
}

#menu-principal .elementor-nav-menu--dropdown {
    height: var(--alto-ventana)
}

#menu-principal .elementor-nav-menu--toggle .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container {
    transform: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 28px!important;
}

.elementor-button-wrapper {
    width: 100%
}

@media (min-width: 360px) {
    #menu-principal .elementor-nav-menu.sm-vertical {
        width: 350px;
        margin-left: auto;
        margin-right: auto
    }
}

#menu-principal ul li a {
    padding: 0 16px
}

#menu-principal .mobile-menu li:not(:last-child) {
    margin-bottom: 48px
}

#menu-principal .elementor-nav-menu .menu-item a .icono {
    width: 38px;
    height: 18px;
    margin: 0 0 3px 24px;
    background-image: url("svg/flecha-naranja-menu.svg")
}

#menu-principal .logotipo-menu-mobile {
    width: 62px;
    height: 77px;
    margin: 0 auto 48px;
    background-image: url("svg/logo-menu-mobile.svg")
}

@media (max-width: 992px) and (max-height: 576px) and (orientation: landscape) {
    #menu-principal ul li a {
        font-size: 20px
    }

    #menu-principal .mobile-menu li:not(:last-child) {
        margin-bottom: 16px
    }

    #menu-principal .logotipo-menu-mobile {
        width: 45px;
        height: 56px;
        margin-bottom: 24px
    }
}

.imagen-con-titulo .titulo-imagen.fondo-azul-claro .envoltura:after, .imagen-con-titulo .titulo-imagen.fondo-azul-claro .envoltura:before {
    display: block;
    content: "";
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-image: url("svg/curva-inferior-derecha-azul-claro.svg")
}

@media (min-width: 1366px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1320px
    }

    body.elementor-page #content {
        padding-left: 0;
        padding-right: 0
    }

    .tarjeta-servicio .envoltura-imagen-servicio .imagen-servicio, .tarjeta-servicio .envoltura-imagen-servicio .imagen-servicio .elementor-widget-container, .tarjeta-servicio .envoltura-imagen-servicio .imagen-servicio .elementor-widget-container img {
        height: auto
    }

    .tarjeta-servicio .envoltura-imagen-servicio .imagen-servicio .elementor-widget-container img {
        object-fit: fill
    }
}

.imagen-con-titulo .titulo-imagen .envoltura p, .tarjeta-servicio .descripcion-servicio .texto-servicio p {
    margin-bottom: 0
}

#bloque-formulario .elementor-widget-template {
    width: 100% !important
}

.imagen-con-titulo {
    position: relative;
    font-size: 16px
}

.imagen-con-titulo .elementor-widget-image, .imagen-con-titulo .elementor-widget-image .elementor-widget-container, .imagen-con-titulo .elementor-widget-image .elementor-widget-container img {
    width: 100%;
    height: 100%
}

#carrusel-historia .slick-slide img, .imagen-con-titulo .elementor-widget-image .elementor-widget-container img {
    object-fit: cover
}

.imagen-con-titulo .titulo-imagen {
    padding: 0;
    width: fit-content;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top-right-radius: 8px
}

.imagen-con-titulo .titulo-imagen .envoltura {
    position: relative;
    padding: 10px 16px
}

.imagen-con-titulo .titulo-imagen.fondo-azul-claro .envoltura:after {
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    top: -16px;
    left: 0
}

.imagen-con-titulo .titulo-imagen.fondo-azul-claro .envoltura:before {
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    top: calc(100% - 16px);
    left: 100%
}

.imagen-con-titulo .titulo-imagen.fondo-blanco .envoltura:after, .imagen-con-titulo .titulo-imagen.fondo-blanco .envoltura:before {
    content: "";
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-image: url("svg/curva-inferior-derecha-blanca.svg");
    background-position: center center;
    position: absolute;
    background-repeat: no-repeat;
    display: block
}

.imagen-con-titulo .titulo-imagen.fondo-blanco .envoltura:after {
    top: -16px;
    left: 0
}

.imagen-con-titulo .titulo-imagen.fondo-blanco .envoltura:before {
    top: calc(100% - 16px);
    left: 100%
}

body:not(.elementor-editor-active) .tarjeta-interactiva .contenido-tarjeta {
    position: relative
}

body:not(.elementor-editor-active) .tarjeta-interactiva .contenido-hover-tarjeta {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
    transition: 1s ease-in-out
}

body:not(.elementor-editor-active) .tarjeta-interactiva.mostrar .contenido-hover-tarjeta {
    z-index: 1;
    opacity: 1
}

@media (max-width: 1366px) {
    #home-bloque-somos .columna-1 {
        padding-top: 4.839vw;
        padding-bottom: 4.839vw
    }

    #home-bloque-somos .columna-1 .elementor-heading-title {
        font-size: 32px
    }
}

@media (max-width: 768px) {
    #home-bloque-somos .columna-2 img, .banner-con-imagen-fondo .columna-2 img, .banner-header .columna-2 img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover
    }
}

.slick-track {
    display: flex !important
}

.slick-slide {
    height: inherit !important
}

.slick-slide > div {
    flex-grow: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

#carrusel-convenios .slick-list, #carrusel-historia .slick-list, #carrusel-servicios-1 .slick-list, #carrusel-servicios-2 .slick-list, #carrusel-servicios-salud .slick-list {
    margin-right: -16px
}

#carrusel-convenios .slick-list .slick-slide:not(:last-of-type), #carrusel-historia .slick-list .slick-slide:not(:last-of-type), #carrusel-servicios .slick-list .slick-slide:not(:last-of-type), #carrusel-servicios-1 .slick-list .slick-slide:not(:last-of-type), #carrusel-servicios-2 .slick-list .slick-slide:not(:last-of-type), #carrusel-servicios-salud .slick-list .slick-slide:not(:last-of-type), #carrusel-valores .slick-list .slick-slide:not(:last-of-type) {
    padding-right: 16px
}

#carrusel-valores .slick-list {
    padding-right: 140px
}

@media (min-width: 768px) {
    #carrusel-servicios .slick-list .slick-slide:not(:last-of-type), #carrusel-valores .slick-list .slick-slide:not(:last-of-type) {
        padding-right: 24px
    }
}

#carrusel-servicios .slick-list {
    padding-right: 40px
}

#carrusel-marcas .slick-list {
    margin-right: -48px
}

#carrusel-marcas .slick-list .slick-slide:not(:last-of-type) {
    padding-right: 48px
}

#carrusel-convenios .slick-slide .contenido-tarjeta, #carrusel-convenios .slick-slide .tarjeta-convenio, #carrusel-historia .slick-slide .elementor-widget-container, #carrusel-historia .slick-slide .elementor-widget-image, #carrusel-historia .slick-slide img, #carrusel-valores .slick-slide .contenido-tarjeta, #carrusel-valores .slick-slide .tarjeta-valor {
    height: 100%
}

@media (min-width: 768px) {
    #carrusel-historia {
        flex-grow: 1
    }

    #carrusel-historia, #carrusel-historia .diapositiva, #carrusel-historia .elementor-image, #carrusel-historia .slick-list, #carrusel-historia .slick-slide, #carrusel-historia .slick-track {
        height: 100% !important
    }

    #carrusel-historia .diapositiva {
        display: grid !important
    }

    #carrusel-convenios .slick-list {
        margin-right: -24px
    }

    #carrusel-convenios .slick-list .slick-slide:not(:last-of-type) {
        padding-right: 24px
    }


}

@media (min-width: 1200px) {
    .imagen-con-titulo {
        font-size: 18px
    }

    #carrusel-convenios .slick-list .slick-slide:not(:last-of-type), #carrusel-servicios.slick-list .slick-slide:not(:last-of-type), #carrusel-valores .slick-list .slick-slide:not(:last-of-type) {
        padding-right: 32px
    }

    #carrusel-convenios .slick-list {
        margin-right: -32px
    }
}

#carrusel-convenios .tarjeta-convenio .contenido-tarjeta .elementor-widget-image {
    display: flex;
    justify-content: center
}



.acordeon-marcas .elementor-widget-n-tabs {
    padding: 24px 24px 0
}

.acordeon-marcas .elementor-element {
    border: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px
}

.espacio.acordeon-abierto .cabecera-espacio {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important
}

body:not(.elementor-editor-active) .acordeon-marcas .e-n-accordion-item-title {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0
}

.acordeon-marcas .e-n-tabs-heading .e-n-tab-title {
    padding: 16px 24px;
    border: none;
    border-top: 1px solid #b5b5b5 !important
}

.acordeon-marcas .e-n-tabs-heading .e-n-tab-title:first-child {
    border-top: none !important
}

.acordeon-marcas .e-n-tabs-content .elementor-element .e-con-inner {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 16px !important
}



@media (min-width: 768px) {


    .acordeon-marcas .elementor-widget-n-tabs {
        padding-top: 48px
    }

    .acordeon-marcas .e-n-tabs-content .elementor-element .e-con-inner {
        padding-left: 24px !important;
        padding-right: 0;
        padding-top: 0;
        padding-bottom: 48px !important
    }

    
}

@media (min-width: 992px) {
    #wpadminbar {
        display: block
    }

    #page-wrapper {
        padding: 24px 0 30px
    }

    #menu-principal ul li a {
        padding: 8px 12px 6px;
        border-radius: 8px;
        display: flex
    }

    #menu-principal ul li:not(:last-child) {
        margin-right: 6px
    }

    #menu-principal ul li a:hover {
        background: rgba(0, 0, 0, .25)
    }

    .tarjeta-servicio .contenido-tarjeta .envoltura-imagen-servicio, .tarjeta-servicio .contenido-tarjeta .envoltura-imagen-servicio .imagen-servicio, .tarjeta-servicio .contenido-tarjeta .envoltura-imagen-servicio .imagen-servicio .elementor-widget-container, .tarjeta-servicio .contenido-tarjeta .envoltura-imagen-servicio .imagen-servicio .elementor-widget-container img {
        height: 100%
    }

    .tarjeta-servicio .contenido-tarjeta .envoltura-imagen-servicio .imagen-servicio .elementor-widget-container img {
        display: block;
        object-fit: cover
    }








    .acordeon-marcas .e-n-tabs-heading {
        flex-basis: 315px !important;
    }


}




#formulario_lp .elementor-field-textual.elementor-size-md{
    padding: 6px 10px;
}

#formulario_lp .elementor-field-textual.elementor-size-md::placeholder{
    opacity: 1 !important;
}


#formulario_lp .elementor-field-type-textarea{
    margin-bottom: 20px;
}

#formulario_lp .elementor-message-danger:before,
#formulario_lp .elementor-form-fields-wrapper + .elementor-message-danger{
    display: none;
}

#formulario_lp .elementor-message{
    margin: 10px 0 0 0;
}

#formulario_lp .elementor-field-group .elementor-select-wrapper select{
    appearance: none !important;
    background-image: url("svg/flecha-abajo-cafe.svg");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 16px;
}

#formulario_lp .elementor-select-wrapper .select-caret-down-wrapper{
    display: none;
}


/* Carruseles cuadradas en mobile */

.carrusel .diapositiva{
    aspect-ratio: 412 / 310;
}


.carrusel img{
    object-fit: cover;
}

.carrusel .elementor-widget,
.carrusel .elementor-widget-container,
.carrusel .elementor-image,
.carrusel img{
    width: 100%;
    height: 100%;
}

@media (min-width: 768px){
    .carrusel .diapositiva{
        aspect-ratio: auto;
    }
    
    
    .carrusel img{
        object-fit: fill;
    }
    
    .carrusel .elementor-widget,
    .carrusel .elementor-widget-container,
    .carrusel .elementor-image,
    .carrusel img{
        width: 100%;
        height: auto;
    }    
}




/* Imágenes cuadradas en mobile */

.imagen {
    aspect-ratio: 412 / 310;
}

.imagen img{
    object-fit: cover;
}

.imagen .elementor-widget-container,
.imagen .elementor-image,
.imagen img{
    width: 100%;
    height: 100%;
}

@media (min-width: 768px){
    .imagen {
        aspect-ratio: auto;
    }
    
    .imagen img{
        object-fit: fill;
    }
    
    .imagen .elementor-widget-container,
    .imagen .elementor-image,
    .imagen img{
        width: 100%;
        height: auto;
    }   
}



/* Navegación en carruseles */


.carrusel .navegacion{
    pointer-events: none;
}

.carrusel .btn-atras,
.carrusel .btn-siguiente{
    background:transparent;
    position: relative;
    cursor: pointer;
    pointer-events: all;
}


.carrusel .btn-atras img{
    margin-right: 3px;
}

.carrusel .btn-siguiente img{
    margin-left: 3px;
}

.carrusel .btn-atras:before,
.carrusel .btn-siguiente:before{
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(38,11,6, 0.75);
    mix-blend-mode: multiply;
    z-index: 0;
}


@media(min-width: 768px){
    .carrusel .btn-atras:before,
    .carrusel .btn-siguiente:before{
        background: transparent;
        mix-blend-mode: normal;
    }    
}


/* Formulario dinámico */

   .formulario-dinamico {
        background: white;
        padding: 32px 16px;

    }

    @media (min-width: 992px) {
        .formulario-dinamico {
            padding: 48px 24px;
        }
    }

    .formulario-dinamico .contenedor-barra-progreso {
        margin-bottom: 24px;
    }

    @media (min-width: 992px) {
        .formulario-dinamico .contenedor-barra-progreso {
            margin-bottom: 48px;
        }
    }


    .formulario-dinamico .paso {
        display: none;
        opacity: 0;
        transition: opacity 0.75s, transform 0.75s;
    }

    .formulario-dinamico .paso.activo {
        display: block;
        opacity: 1;
        transform: none;
    }

    .formulario-dinamico .pasos .paso .grupo-formulario:not(:last-child) {
        margin-bottom: 24px;
    }


    .formulario-dinamico .etiqueta-formulario {
        font-family: "Causten", sans-serif;
        font-size: 22px;
        margin-bottom: 6px;
    }


    .formulario-dinamico .pasos .paso .grupo-formulario .etiqueta-formulario.margen-inferior-grande {
        margin-bottom: 24px;
    }


    .formulario-dinamico .pasos .paso .botones-navegacion {
        display: flex;
        justify-content: space-between;
        margin-top: 24px;
    }

    @media (min-width: 992px) {
        .formulario-dinamico .pasos .paso .botones-navegacion {
            margin-top: 48px;
        }
    }

    .formulario-dinamico .pasos .paso .lista-opciones {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .formulario-dinamico .fade-left {
        animation: fadeLeft 0.75s forwards;
    }

    .formulario-dinamico .fade-right {
        animation: fadeRight 0.75s forwards;
    }

    .formulario-dinamico .fade-in {
        animation: fadeIn 2s forwards;
    }

    @keyframes fadeLeft {
        from {
            opacity: 0;
            transform: translateX(40px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes fadeRight {
        from {
            opacity: 0;
            transform: translateX(-40px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }


    /* Personalización */
    .formulario-dinamico .btn-primary,
    .formulario-dinamico .btn-primary:disabled {
        background-color: #E21718;
        border-color: transparent;
        font-family: "Causten", sans-serif;
        font-size: 17px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        fill: #FFFFFF;
        color: #FFFFFF;
        border-radius: 0;
        padding: 16px 32px 16px 32px;
    }

    .formulario-dinamico .btn-primary:disabled {
        cursor: not-allowed !important;
        opacity: 0.25;
    }

    .formulario-dinamico .btn-primary:hover,
    .formulario-dinamico .btn-primary:focus,
    .formulario-dinamico .btn-primary:active {
        background-color: #B51213 !important;
        border-color: transparent !important;
    }


    .formulario-dinamico .btn-secondary,
    .formulario-dinamico .btn-secondary:disabled {
        background-color: rgba(32, 33, 36, 0.15);
        border-color: transparent;
        font-family: "Causten", sans-serif;
        font-size: 17px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        fill: black;
        color: black;
        border-radius: 0;
        padding: 16px 32px 16px 32px;
    }

    .formulario-dinamico .btn-secondary:disabled {
        cursor: not-allowed !important;
        opacity: 0.25;
    }

    .formulario-dinamico .btn-secondary:hover,
    .formulario-dinamico .btn-secondary:focus,
    .formulario-dinamico .btn-secondary:active {
        background-color: rgba(32, 33, 36, 0.25) !important;
        border-color: transparent !important;
    }

    .formulario-dinamico .btn-secondary.btn-lg {
        font-size: 22px;
    }

    .formulario-dinamico .btn-secondary.btn-lg[aria-pressed="true"] {
        background-color: #B51213 !important;
        color: white;
    }

    .formulario-dinamico .progress {
        border-radius: 0;
        background-color: rgba(32, 33, 36, 0.25);
    }

    .formulario-dinamico .progress .progress-bar {
        background-color: #E21718;
    }

    .formulario-dinamico .form-control {
        border: 1px solid black;
        border-radius: 0;
    }

    .formulario-dinamico .form-control:focus {
        border-color: black;
        outline: 0;
        box-shadow: 0 0 0 .25rem rgba(32, 33, 36, 0.15);
    }
    
    
    
    
.elementor-form-fields-wrapper.elementor-labels-above .elementor-field-group .elementor-field-subgroup, .elementor-form-fields-wrapper.elementor-labels-above .elementor-field-group>.elementor-select-wrapper, .elementor-form-fields-wrapper.elementor-labels-above .elementor-field-group>input, .elementor-form-fields-wrapper.elementor-labels-above .elementor-field-group>textarea {
    flex-basis: auto;
    max-width: none; 
    flex-grow: 0;
}

.elementor-field-group.elementor-col-50  {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
}