@font-face {
    font-family: 'Benton Sans';
    src: url('/wp-content/themes/bbva-casa-de-bolsa/assets/fonts/BentonSansBBVA-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'BentonSansBBVA-Medium';
    src: url('/wp-content/themes/bbva-casa-de-bolsa/assets/fonts/BentonSansBBVA-Medium.ttf') format('truetype');
    font-weight: 500; 
    font-style: normal;
}
@font-face {
    font-family: 'BentonSansBBVA-Book';
    src: url('/wp-content/themes/bbva-casa-de-bolsa/assets/fonts/BentonSansBBVA-Book.ttf') format('truetype');
    font-weight: 350; 
    font-style: normal;
}
@font-face {
    font-family: 'BentonSansBBVA-BookItalic';
    src: url('/wp-content/themes/bbva-casa-de-bolsa/assets/fonts/BentonSansBBVA-BookItalic.ttf') format('truetype');
    font-weight: 350; 
    font-style: normal;
}
@font-face {
    font-family: 'BentonSansBBVA-Bold';
    src: url('/wp-content/themes/bbva-casa-de-bolsa/assets/fonts/BentonSansBBVA-Bold.ttf') format('truetype');
    font-weight: 700; 
    font-style: normal;
}

@font-face {
    font-family: 'TiemposHeadline';
    src: url('/wp-content/themes/bbva-casa-de-bolsa/assets/fonts/tiempos-headline/TiemposHeadline-Regular.woff2') format('woff2'),
         url('/wp-content/themes/bbva-casa-de-bolsa/assets/fonts/tiempos-headline/TiemposHeadline-Regular.woff') format('woff'),
         url('/wp-content/themes/bbva-casa-de-bolsa/assets/fonts/tiempos-headline/TiemposHeadline-Regular.ttf') format('truetype'),
         url('/wp-content/themes/bbva-casa-de-bolsa/assets/fonts/tiempos-headline/TiemposHeadline-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'TiemposHeadline-BoldItalic'; 
    src: url('/wp-content/themes/bbva-casa-de-bolsa/assets/fonts/tiempos-headline/TiemposHeadline-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'TiemposHeadline-Bold';
    src: url('/wp-content/themes/bbva-casa-de-bolsa/assets/fonts/tiempos-headline/TiemposHeadline-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
/* ==========================================================================
   Shared spacing variable (must match header .px-4 padding)
   ========================================================================== */
:root {
    --content-padding: clamp(1rem, 9.5vw, 11.5rem);
}

.hero-section {
    position: relative;
    overflow-x: hidden;
    /* Mismo padding lateral que .header-p (10px cada lado) */
    padding: 30px 10px;
}

/* Tarjeta principal del carrusel — misma anchura que .custom-header-card */
.custom-carousel-card {
    background-color: #ffffff;
    color: #070E46;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    padding: 50px 0;
    width: 99.5%;     
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    z-index: 2;
    margin-left: 2px !important;
}

@media (width: 1920px) and (height: 1020px),
       (min-width: 1745px) and (max-width: 1920px) and (min-height: 850px) {
    .custom-carousel-card {
        margin-left: 2px !important;
        width: 99.7%;
    }
}

/* Columna de texto — alineada con el logo del header */
.text-column {
    padding-left: calc(30px + var(--content-padding)); /* 30px card padding + clamp = mismo offset que el logo */
    padding-right: 40px;
}

/* Columna de imagen — alineada con los enlaces del header */
.img-column {
    padding-right: calc(12px + var(--content-padding)); /* Mismo offset que los nav-links */
    padding-left: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Etiqueta gris arriba del título ("Casa de Bolsa") */
.slide-tag {
    display: inline-block;
    background-color: #F4F7F9;
    color: #070E46;
    font-size: 15.01px;
    font-family: 'BentonSansBBVA-BookItalic', sans-serif;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 15px;
}

/* Título principal azul oscuro */
.slide-title {
    color: #001391; 
    font-size: 40px;
    font-family: 'TiemposHeadline-Bold', sans-serif;
    line-height: 1.2;
    margin-bottom: 20px;
}
.current-slide-number {
    color: #070E46; 
    font-size: 15.01px;
    font-family: 'BentonSansBBVA-BookItalic', sans-serif !important;
}

/* Párrafo descriptivo gris */
.slide-desc {
    color: #070E46;
    font-size: 15.01px;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Botón Azul Oscuro BBVA */
.btn-bbva {
    display: inline-block;
    background-color: #001391; /* Azul oscuro */
    color: #ffffff !important;
    text-decoration: none;
    font-size: 15.01px;
    font-family: 'BentonSansBBVA-Medium', sans-serif;
    padding: 12px 32px;
    border-radius: 8px; /* Bordes redondeados */
    transition: background-color 0.3s ease;
}

.btn-bbva:hover {
    background-color: #070E46; 
}

/* Imagen de la derecha */
.slide-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
}

/* ==========================================================================
   Controles Inferiores (< 1 de 2 >)
   ========================================================================== */
.carousel-custom-controls {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin-top: 25px;
}

.control-btn {
    background: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.control-btn img {
    width: 10px;
    height: 24px;
}

.control-btn:hover {
    opacity: 0.6;
}

.slide-counter {
    color: #070E46; 
    font-size: 15.01px;
    font-family: 'BentonSansBBVA-BookItalic', sans-serif !important;
    
}

/* ==========================================================================
   Ajustes para Móviles y Tablets
   ========================================================================== */
@media (max-width: 991px) {
    .hero-section::after {
        display: none;
    }
    .custom-carousel-card {
        padding: 20px 0;
    }
    .text-column {
        padding-left: 25px;
        padding-right: 25px;
        margin-bottom: 20px;
        text-align: center;
    }
    .img-column {
        padding-left: 25px;
        padding-right: 25px;
    }
    .slide-title {
        font-size: 40px;
        text-align: left;
    }
    .slide-tag {
        margin-top: -6px;
        margin-bottom: -4px;
    }
    .slide-desc {
        text-align: left;
            font-size: 20px;
    }
    .btn-bbva {
        font-size: 15.01px;
        font-family: 'BentonSansBBVA-Medium', sans-serif;
    }

    .carousel-custom-controls {
        justify-content: space-between;
        gap: 0;
        padding: 0 10px;
        width: 100%;
    }
    .carousel-custom-controls .slide-counter {
        order: 1;
        flex: 1;
        text-align: left;
        display: flex;
        align-items: center;
        margin: 0;
        margin-left: -4px !important;
    }
    .carousel-custom-controls #prev-slide {
        order: 2;
        margin: 0;
    }
    .carousel-custom-controls #next-slide {
        order: 3;
        margin: 0;
        margin-left: 18px;
    }
    .carousel-custom-controls .control-btn {
        margin: 0;
    }
}

@media (max-width: 991px) {
    .text-column {
        padding-left: 20px;
        padding-right: 20px;
    }
    .img-column {
        padding-left: 20px;
        padding-right: 20px;
    }
    .slide-title {
        font-size: 32px;
        text-align: left;
    }
    .slide-desc {
        text-align: left;
            font-size: 20px;
    }

    /* Carrusel: reordenar elementos SOLO en móviles */
    .hero-section .row.align-items-center.g-0 {
        flex-direction: column !important;
        display: flex !important;
    }
    .hero-section .img-column {
        order: 1;
        margin-bottom: 1.5rem;
    }
    .hero-section .text-column {
        order: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
    .hero-section .slide-tag {
        order: 2;
        width: 38%;
        text-align: left;
    }
    .hero-section .slide-title {
        order: 3;
        width: 90%;
    }
    .hero-section .slide-desc {
        order: 4;
        width: 100%;
    }
    .hero-section .btn-bbva {
        order: 5;
        width: 100%;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .slide-image {
        height: 272px; 
        object-fit: cover; 
        object-position: center 20%; 
        width: 100%;
    }
    .hero-section .slide-tag {
        width: 22%;
    }
   .slide-title {
        font-size: 40px;
        text-align: left;
    }
    .hero-section .slide-title {
        width: 100%;
    }
    .hero-section .btn-bbva {
        width: 27%;
    }
    .btn-bbva {
        padding: 16px 32px;
    }
    .carousel-custom-controls #prev-slide {
        margin: 0 !important;
    }

}