/* ==========================================================================
   1. RESET, CONFIGURACIÓN DE PANTALLA Y FUENTES GLOBALES
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: #ffffff;
    color: #1d1d1d;
    font-family: 'Open Sans', sans-serif;
    overflow-x: hidden;
    width: 100%;
}

.bs-site-master-wrapper {
    width: 100%;
    position: relative;
}

/* ==========================================================================
   2. CABECERA INTELIGENTE FIJA (BLOQUE DE ESCRITORIO PREMIUM)
   ========================================================================== */
.bs-global-header {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    
    /* Colchón superior aislado para empujar el menú hacia abajo uniformemente */
    padding: 30px 40px 14px 40px; 
    margin-top: 0; 
    
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
    
    border: none;
    border-bottom: none;
    box-shadow: none;
    outline: none;
    
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
}

/* Ocultación suave controlada al hacer scroll */
.bs-global-header.bs-scroll-hidden {
    transform: translateY(-100%);
}

.bs-header-inside-box {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bs-brand-logo-area {
    margin-right: 35px;
    display: flex;
    align-items: center;
    margin-top: -8px; 
    box-sizing: border-box;
}

.bs-brand-logo-area img {
    height: 38px;
    width: auto;
    display: block;
}
.bs-main-navigation-menu {
    display: flex;
    align-items: flex-end; /* Enrase rígido con la base del logotipo */
    justify-content: space-between;
    width: 100%;
    padding-left: 35px;
    padding-bottom: 2px; /* Ajuste óptico milimétrico */
}

.bs-nav-left-group {
    display: flex;
    align-items: flex-end;
    gap: 24px; /* Espacio elástico unificado */
}

.bs-nav-right-group {
    display: flex;
    align-items: center; /* Alineación unificada para los widgets derechos */
    gap: 24px;
    margin-left: auto;
}

.bs-nav-link-item {
    cursor: pointer;
    color: #1d1d1d;
    padding: 8px 0;
    font-size: 15px;
    font-weight: 500;
    transition: color 0.2s ease;
    position: relative;
}

.bs-nav-link-item:hover,
.bs-nav-link-item.bs-active-tab {
    color: #ec0000;
    font-weight: 600;
}

/* Rayita roja indicadora inferior en pestañas activas */
.bs-nav-link-item.bs-active-tab::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1.5px;    
    width: 11px;
    height: 2.5px;
    background: #ec0000;
    border-radius: 2px 2px 0 0;
}

.bs-customer-access-widget {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}
/* ==========================================================================
   3. ARQUITECTURA DE LAS FLECHAS Y MÁSCARAS DE BANDERA
   ========================================================================== */
.bs-lang-interactive-widget {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #ec0000;
}

.bs-lang-current-view {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

/* Indicador rojo elástico debajo del idioma */
.bs-lang-current-view::after {
    content: "";
    position: absolute;
    left: 45px;       
    bottom: -4.5px;    
    width: 11px;
    height: 2.5px;
    background: #ec0000;
    border-radius: 2px 2px 0 0;
}

.bs-dropdown-caret-arrow {
    width: 7px;
    height: 7px;
    border-right: 2px solid #ec0000;
    border-bottom: 2px solid #ec0000;
    transform: rotate(45deg);
    margin-left: 4px;
    position: relative;
    top: 0.3px;
    transition: transform 0.2s ease;
}

/* Rotación elástica unificada al abrir */
.bs-lang-interactive-widget.bs-open .bs-dropdown-caret-arrow {
    transform: rotate(-135deg);
    top: 1px;
}

.bs-flag-circle-mask {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f2f3;
    flex-shrink: 0;
}

.bs-flag-circle-mask img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* ==========================================================================
   4. ARQUITECTURA DE MENÚS FLOTANTES DESPLEGABLES (EN ESPEJO)
   ========================================================================== */

/* Panel flotante de Idiomas */
.bs-lang-floating-menu {
    position: absolute;
    top: 34px; 
    left: -20px;
    background: #ffffff;
    width: 210px; 
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 999999;
    box-sizing: border-box;
    
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

/* Panel flotante de Acceso a Clientes */
.bs-customer-floating-menu {
    position: absolute;
    top: 34px; 
    right: -20px; 
    background: #ffffff;
    width: 210px; /* Misma dimensión exacta */    
    border-radius: 14px;         
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); 
    padding: 8px;                
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 999999;
    box-sizing: border-box;
    
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

/* Clases dinámicas de apertura controladas por JS */
.bs-lang-floating-menu.bs-menu-abierto,
.bs-customer-floating-menu.bs-menu-abierto {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* ==========================================================================
   5. FILAS INTERIORES Y EFECTOS HOVER DE LOS DESPLEGABLES
   ========================================================================== */
.bs-lang-option-row, .bs-customer-option-item {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: #4a4a4a;
    cursor: pointer;
    border-radius: 8px;
    box-sizing: border-box;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.bs-lang-option-row:hover, .bs-customer-option-item:hover {
    background-color: #f7f9fa;
    color: #ec0000;
}

.bs-lang-option-row.bs-row-selected {
    background-color: #f4f6f7; 
    color: #1d1d1d;
    font-weight: 700;
}

.bs-customer-trigger-wrapper {
    display: flex;
    align-items: center;
    gap: 6px; 
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1d;
    cursor: pointer;
}

/* El texto cambia a rojo corporativo en estado Hover */
.bs-customer-trigger-wrapper:hover .bs-customer-text-label {
    color: #ec0000;
}

.bs-customer-text-label {
    transition: color 0.2s ease;
}

/* La flechita cambia su color de trazo a rojo corporativo en estado Hover */
.bs-customer-trigger-wrapper:hover .bs-customer-arrow-caret {
    border-right-color: #ec0000;
    border-bottom-color: #ec0000;
}

.bs-customer-arrow-caret {
    width: 7px;       
    height: 7px;
    border-right: 2px solid #767676; /* Unificado simétricamente a 2px */
    border-bottom: 2px solid #767676;
    transform: rotate(45deg);
    position: relative;
    top: 1px;        
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.bs-customer-access-widget.bs-open .bs-customer-arrow-caret {
    transform: rotate(-135deg); 
    top: 0px;
    border-right-color: #ec0000;
    border-bottom-color: #ec0000;
}
/* ==========================================================================
   6. BOTÓN SUPERIOR OVALADO Y ESTRUCTURA MAESTRA DEL CARRUSEL
   ========================================================================== */
.bs-header-cta-action-button {
    background: #ec0000;
    color: #ffffff;
    padding: 10px 24px;
    border-radius: 24px; /* Óvalo perfecto rígido corporativo */
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transform: none; 
    margin-top: 0;
    height: 38px;
    line-height: 1;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.bs-header-cta-action-button:hover {
    background: #cc0000;
    transform: scale(1.02);
}

.bs-check-icon {
    background: #1d7b84;
    color: #ffffff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: none; 
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    margin-left: auto;
}

.bs-lang-floating-menu div.bs-row-selected .bs-check-icon {
    display: flex;
}

/* ==========================================================================
   7. ANCHOS ABSOLUTOS DEL CARRIL DEL CARRUSEL (SLIDER)
   ========================================================================== */
.bs-main-hero-slider-carousel-wrapper {
    padding-top: 88px; /* 🔒 Compensación milimétrica para la cabecera fija de PC */
    position: relative; 
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.bs-main-hero-slider-carousel {
    position: relative;
    z-index: 1;
    width: 100%;
    overflow: hidden;
}

.bs-carousel-internal-track {
    display: flex;
    width: 200vw; 
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    box-sizing: border-box;
}

.bs-carousel-individual-slide {
    flex: 0 0 100vw;
    width: 100vw;
    height: 520px; 
    position: relative;
    box-sizing: border-box;
}

.bs-slide-img-background {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* ==========================================================================
   8. POSICIONAMIENTO DE TEXTOS Y CAPAS FLOTANTES SOBRE BANNERS
   ========================================================================== */
.bs-slide-overlay-text-block-top {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    text-align: center;
    color: #ffffff;
    z-index: 5;
}

.bs-slide-secondary-subtext-top {
    font-size: 20px;
    font-weight: 600;
}

.bs-slide-overlay-text-block-center {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    text-align: center;
    color: #ffffff;
    z-index: 5;
}

.bs-slide-main-headline {
    font-size: 56px;
    font-weight: 700;
    margin-bottom: 12px;
}

.bs-slide-secondary-subtext-center {
    font-size: 18px;
    opacity: 0.95;
}

.bs-slide-actions-container {
    margin-top: 20px;
    display: block;
}

/* ==========================================================================
   9. BOTONES INTERACTIVOS TIPO PÍLDORA DEL SLIDER
   ========================================================================== */
.bs-action-btn {
    display: inline-block;
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 25px;
    transition: background-color 0.2s ease, transform 0.1s ease;
    text-align: center;
    cursor: pointer;
    border: none;
}

/* Botón Rojo Corporativo - Diapositiva 1 ("Solicitar") */
.bs-btn-primary {
    background-color: #ec0000;
    color: #ffffff;
}

.bs-btn-primary:hover {
    background-color: #b30000;
    transform: scale(1.02);
}

/* Botón Blanco Calado - Diapositiva 2 ("Saber Más") */
.bs-btn-secondary {
    background-color: #ffffff;
    color: #ec0000;
}

.bs-btn-secondary:hover {
    background-color: #f7f9fa;
    transform: scale(1.02);
}
/* ==========================================================================
   10. BARRA DE MANDOS MULTIMEDIA INFERIOR BLANCA Y LIENZO CANVAS
   ========================================================================== */
.bs-carousel-external-controls-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
    background: #ffffff;
    width: 100%;
    border-bottom: 1px solid #f1f3f5;
}

.bs-carousel-controls-max-width-aligner {
    width: 100%;
    max-width: 1100px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bs-controls-left-panel {
    display: flex;
    align-items: center;
    gap: 16px;
}

.bs-ctrl-direction-arrow.bs-arrow-state-active {
    background: #ec0000;
    border: 1px solid #ec0000;
    color: #ffffff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
    padding-bottom: 4px;
}

.bs-ctrl-play-pause-button {
    background: transparent;
    border: 1px solid #cccccc;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.bs-pause-bars-icon {
    font-size: 13.5px;
    font-weight: 900;
    color: #ec0000;
    font-family: Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bs-controls-right-panel {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

/* Contenedor relativo rígido (Candado de tamaño unificado) */
.bs-ctrl-progress-ring-container {
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* El Canvas mide lo mismo que su contenedor y se alinea en el centro absoluto */
.bs-ring-canvas-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    pointer-events: none;
    z-index: 1;
}

.bs-ctrl-nav-digit-number {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #666666;
    font-weight: 500;
    z-index: 2; /* Queda por encima del dibujo para leerse nítido */
}

.bs-ctrl-nav-digit-number.bs-num-active {
    color: #000000;
    font-weight: 700;
}
/* ==========================================================================
   11. SECCIÓN GRIS DE ACCESOS DIRECTOS INTERACTIVOS (6 COLUMNAS ESCRITORIO)
   ========================================================================== */
.bs-directory-needs-section {
    width: 100%;
    padding: 60px 0 80px 0;
    background-color: #f7f9fa;
    box-sizing: border-box;
}

.bs-directory-needs-max-aligner {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.bs-directory-needs-main-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: #1d1d1d;
    text-align: center;
    margin-bottom: 50px;
    letter-spacing: -1.5px;
}

/* El riel maestro forzado a renderizar 6 columnas perfectas en PC */
.bs-directory-needs-6col-layout {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    width: 100%;
}

.bs-needs-individual-card {
    background-color: #ffffff; 
    border-radius: 16px; 
    padding: 30px 20px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
    cursor: pointer; 
    position: relative; 
    box-sizing: border-box; 
    min-height: 190px; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.015); 
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s ease;
}

.bs-needs-individual-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
}

.bs-needs-icon-container {
    height: 40px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bs-needs-svg-icon {
    width: 34px;
    height: 34px;
    fill: #ec0000;
    display: block;
}

.bs-needs-card-title-lbl {
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1d;
    line-height: 1.3;
    margin: 0;
}
/* ==========================================================================
   12. INTERACCIÓN DE FLECHAS EN ACCESOS DIRECTOS (PÁGINA PRINCIPAL)
   ========================================================================== */
.bs-needs-card-arrow-area {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%); /* Centrado óptico horizontal perfecto */
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bs-needs-linear-arrow {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #ec0000;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.bs-needs-circle-red-button {
    width: 34px;
    height: 34px;
    background-color: #ec0000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.25s cubic-bezier(0.25, 1, 0.5, 1), transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    position: absolute;
}

.bs-needs-white-arrow {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Disparadores del Hover en Tarjetas de Necesidades */
.bs-needs-individual-card:hover .bs-needs-linear-arrow {
    opacity: 0;
    transform: scale(0.6) translateX(5px);
}

.bs-needs-individual-card:hover .bs-needs-circle-red-button {
    opacity: 1;
    transform: scale(1);
}

/* ==========================================================================
   13. REJILLA CENIZA DE GRANDES FICHAS CORPORATIVAS (HIPOTECAS, COCHES...)
   ========================================================================== */
.bs-directory-cards-showcase-section {
    width: 100%;
    padding: 60px 0 80px 0;
    background-color: #f6f0eb; /* El color crema claro real oficial de Santander */
    box-sizing: border-box;
    margin-top: 0;
    margin-bottom: 0; 
}

.bs-cards-showcase-max-aligner {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Cuadrícula de 2 columnas de escritorio en espejo plano al 50% */
.bs-cards-showcase-grid-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    width: 100%;
}
/* Bloque individual de la ficha blanca con candado de desbordamiento */
.bs-showcase-individual-card {
    background-color: #ffffff;
    border-radius: 20px; 
    overflow: hidden; /* Corta la imagen superior de forma elástica */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.015);
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s ease;
}

.bs-showcase-individual-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}

.bs-showcase-card-image-top {
    width: 100%;
    height: 240px; 
    overflow: hidden;
    position: relative;
}

.bs-showcase-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bs-showcase-card-body-content {
    padding: 35px 30px 40px 30px; 
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    padding-bottom: 50px; /* Hueco inferior de seguridad para la flecha */
}

.bs-showcase-card-category-tag {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #767676; /* Gris corporativo nítido */
    margin-bottom: 14px;
    font-weight: 400;
}

.bs-showcase-card-headline-txt {
    font-family: 'Open Sans', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #1d1d1d;
    margin-bottom: 18px;
    line-height: 1.25;
    letter-spacing: -0.5px;
}

/* Superíndices y llamadas de texto legal */
.bs-showcase-card-headline-txt sup {
    font-size: 16px;
    color: #1d7b84; /* Turquesa legal oficial del banco */
    font-weight: 600;
}

.bs-showcase-card-paragraph-desc {
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #4a4a4a;
    margin: 0;
}
/* Contenedor relativo de la flecha abajo a la derecha */
.bs-showcase-card-arrow-area {
    position: absolute;
    bottom: 15px;
    right: 20px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Flecha lineal ceniza inicial */
.bs-showcase-linear-arrow {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: #767676; /* Gris ceniza oficial en reposo */
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity 0.2s ease, transform 0.2s ease;
    opacity: 1;
}

/* Botón circular rojo oculto de inicio */
.bs-showcase-circle-red-button {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: #ec0000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.bs-showcase-white-arrow {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Disparadores Hover para Grandes Fichas */
.bs-showcase-individual-card:hover .bs-showcase-linear-arrow {
    opacity: 0;
    transform: translateX(5px);
}

.bs-showcase-individual-card:hover .bs-showcase-circle-red-button {
    opacity: 1;
    transform: scale(1);
}

.bs-showcase-card-arrow-area:active .bs-showcase-circle-red-button {
    transform: scale(0.9);
}

/* ==========================================================================
   14. SECCIÓN INSTITUTIONAL: DESDE DONDE QUIERAS (POSTERS ENVOLVENTES)
   ========================================================================== */
.bs-anywhere-showcase-section {
    width: 100%;
    background-color: #ffffff; 
    padding: 70px 0 90px 0;
    box-sizing: border-box;
    margin: 0;
}

.bs-anywhere-max-aligner {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.bs-anywhere-main-title {
    font-family: 'Inter', sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: #1d1d1d;
    text-align: center;
    margin-bottom: 60px;
    letter-spacing: -1.5px;
    line-height: 1.1;
}

.bs-anywhere-grid-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
}

.bs-anywhere-individual-card {
    position: relative; 
    height: 480px; 
    border-radius: 24px; 
    overflow: hidden; 
    box-sizing: border-box;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    cursor: default;
}

.bs-anywhere-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
/* ==========================================================================
   15. RECUADROS INTERNOS FLOTANTES SIMÉTRICOS ("DESDE DONDE QUIERAS")
   ========================================================================== */
.bs-anywhere-card-body-content-floating {
    position: absolute;
    bottom: 16px; 
    left: 16px;   
    right: 16px;  
    background-color: #ffffff; 
    border-radius: 20px; 
    padding: 24px; 
    z-index: 2; /* Flota de forma rígida por encima de la foto de fondo */
    box-sizing: border-box;

    /* 🔒 EL CANDADO SIMÉTRICO: Mismo tamaño exacto basado en tus capturas */
    height: 185px;      
    min-height: 185px;  
    overflow: hidden;   
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.bs-anywhere-card-headline-txt {
    font-family: 'Open Sans', sans-serif;
    font-size: 22px; 
    font-weight: 700;
    color: #1d1d1d;
    margin: 0 0 8px 0;
    line-height: 1.2; 
    letter-spacing: -0.5px;
}

.bs-anywhere-card-paragraph-desc {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: #4a4a4a;
    margin: 0;
}

/* ==========================================================================
   16. SECCIÓN PROMOCIONAL DEL IPHONE 17e (ASIMETRÍA FLUIDA DE ESCRITORIO)
   ========================================================================== */
.bs-promo-iphone-section {
    width: 100%;
    background-color: #ffffff; /* 🔒 Unificado a crema para evitar cortes visuales sándwich */
    padding: 90px 0; 
    box-sizing: border-box;
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 0;
}

.bs-promo-iphone-max-aligner {
    width: 100%;
    max-width: 1100px; 
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    gap: 50px; 
}

.bs-promo-iphone-content-side {
    flex: 1.2; 
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.bs-promo-iphone-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 54px; 
    font-weight: 700;
    color: #1d1d1d;
    margin: 0 0 24px 0;
    letter-spacing: -1.5px;
    line-height: 1.15;
}

.bs-promo-iphone-description {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px; 
    line-height: 1.55;
    color: #4a4a4a;
    margin: 0 0 40px 0;
    max-width: 620px;
}

.bs-promo-iphone-action-btn {
    background-color: #ec0000;
    color: #ffffff;
    padding: 14px 44px; 
    border-radius: 28px; 
    font-family: 'Open Sans', sans-serif;
    font-size: 16px; 
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.1s ease;
    user-select: none;
    border: none;
}

.bs-promo-iphone-action-btn:hover { 
    background-color: #cc0000; 
}

.bs-promo-iphone-action-btn:active { 
    transform: scale(0.98); 
}

.bs-promo-iphone-image-side {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.bs-promo-iphone-display-img {
    width: 120%;
    height: auto;
    max-height: 440px; 
    object-fit: contain;
    display: block;
}
/* ==========================================================================
   17. ANUNCIO EMERGENTE CORPORATIVO (MÁXIMA UX DE TRANSPARENCIA COBERTURA)
   ========================================================================== */
.bs-global-popup-overlay {
    display: none; /* Controlado por el motor JS */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.4) !important; /* Añade un sutil velo oscuro para enfocar el anuncio */
    backdrop-filter: blur(2px) !important; /* Suaviza el fondo para mejorar el contraste */
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999999 !important;
    padding: 20px !important;
}

.bs-popup-compact-container {
    width: 100% !important;
    max-width: 440px !important; /* 🚀 ANTES: 520px. Hace el anuncio un 15% más pequeño y estilizado */
    border-radius: 20px !important;
    padding: 30px 25px !important; /* Reduce los rellenos internos para compactar el texto */
    background-color: #f8f6f5 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25) !important;
    position: relative !important;
    margin: auto !important; /* Asegura el centrado matemático en el eje vertical y horizontal */
}
@keyframes bsPopupBroteSuave {
    0% { transform: scale(0.9) translateY(15px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.bs-popup-brand-logo-header {
    width: 100%;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.bs-popup-logo-asset {
    height: 22px;
    width: auto;
    display: block;
}

.bs-popup-close-x-trigger {
    position: absolute;
    top: 18px;
    right: 22px;
    background: transparent;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #767676;
    cursor: pointer;
    transition: color 0.2s ease;
}

.bs-popup-close-x-trigger:hover { color: #ec0000; }

.bs-popup-internal-card-body { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.bs-popup-tag-badge { font-family: 'Open Sans', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; color: #ec0000; margin-bottom: 10px; }
.bs-popup-main-headline { font-family: 'Open Sans', sans-serif; font-size: 26px; font-weight: 600; color: #1d1d1d; margin: 0 0 18px 0; line-height: 1.2; letter-spacing: -0.5px; }
.bs-popup-paragraph-description { font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 1.55; color: #4a4a4a; margin: 0 0 16px 0; }
.bs-popup-paragraph-description:last-of-type { margin-bottom: 28px; }
.bs-popup-paragraph-description strong { color: #1d1d1d; font-weight: 700; }

.bs-popup-cta-action-btn {
    background-color: #ec0000; color: #ffffff; padding: 22px 87px; border-radius: 24px;
    border: none; font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 700;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    transition: background-color 0.2s ease, transform 0.1s ease; width: auto;
}
.bs-popup-cta-action-btn:hover { background-color: #cc0000; }
.bs-popup-cta-action-btn:active { transform: scale(0.98); }

/* ==========================================================================
   18. SECCIÓN ¿NECESITAS AYUDA? (BLOQUE CREMA CONTINUO ESTÁTICO)
   ========================================================================== */
.bs-help-support-section {
    width: 100%;
    padding: 60px 0 90px 0;
    background-color: #f6f0eb; /* Color crema continuo sin saltos de color */
    box-sizing: border-box;
    margin-top: 0;
    margin-bottom: 0;
}

.bs-help-support-max-aligner {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.bs-help-support-header-group { text-align: center; margin-bottom: 50px; }

.bs-help-support-main-title {
    font-family: 'Open Sans', sans-serif; 
    font-size: 46px;
    font-weight: 700;
    color: #1d1d1d;
    margin: 0 0 12px 0;
    letter-spacing: -1.5px;
}

.bs-help-support-sub-title { font-family: 'Open Sans', sans-serif; font-size: 22px; color: #4a4a4a; margin: 0; font-weight: 400; }

.bs-help-support-grid-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
}

.bs-help-individual-card {
    background-color: #ffffff;
    border-radius: 20px; 
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    box-sizing: border-box;
    min-height: 250px;
    cursor: default; /* Formato plano sin mano de clic de forma intencionada */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
    position: relative;
    padding-bottom: 55px; /* Deja espacio inferior para el enlace de acción */
}

.bs-help-card-icon-wrapper { height: 32px; margin-bottom: 24px; display: flex; align-items: center; }
.bs-help-svg-vector-icon { width: 28px; height: 28px; fill: #767676; display: block; }
.bs-help-card-headline-lbl { font-family: 'Open Sans', sans-serif; font-size: 20px; font-weight: 700; color: #1d1d1d; margin: 0 0 16px 0; line-height: 1.3; letter-spacing: -0.3px; }
.bs-help-card-paragraph-txt { font-family: 'Open Sans', sans-serif; font-size: 14.5px; line-height: 1.55; color: #4a4a4a; margin: 0; }

.bs-help-card-action-link {
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #ec0000;
    text-decoration: underline;
    cursor: pointer;
    position: absolute;
    bottom: 25px;
    left: 30px;
    transition: color 0.15s ease;
}
.bs-help-card-action-link:hover { color: #b30000; }
/* ==========================================================================
   19. PIE DE PÁGINA REAL SANTANDER (FONDO NEGRO CARBÓN Y PASTILLAS BLANCAS)
   ========================================================================== */
.bs-santander-official-black-footer {
    width: 100%;
    background-color: #1c1c1c; /* Gris carbón exacto de producción oficial */
    padding: 60px 0 45px 0;
    box-sizing: border-box;
    margin: 0;
    border-top: none;
    display: block; 
}

.bs-santander-footer-max-aligner {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Fila de Grandes Enlaces Superiores */
.bs-snt-footer-headers-horizontal-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
    width: 100%;
    margin-bottom: 25px; 
}

.bs-snt-header-column-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.bs-snt-uppercase-main-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff; 
    text-transform: uppercase; 
    letter-spacing: 0.5px;
    margin: 0;
    cursor: default;
}

/* Área de Listados de Enlaces Masivos */
.bs-snt-footer-links-massive-grid-area {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
    width: 100%;
    margin-bottom: 45px;
}

.bs-snt-links-vertical-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px; 
    list-style: none; /* Limpieza de viñetas de lista nativa */
    margin: 0;
    padding: 0;
}

/* Enlaces con subrayado blanco corporativo rígido */
.bs-snt-legal-link-item {
    font-family: 'Open Sans', sans-serif;
    font-size: 13.5px;
    color: #ffffff; 
    text-decoration: underline; 
    line-height: 1.4;
    text-align: left;
    display: inline;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.bs-snt-legal-link-item:hover {
    opacity: 0.8;
}

/* Línea divisoria interna */
.bs-snt-horizontal-divider-line {
    width: 100%;
    height: 1px;
    background-color: #333333; 
    margin-bottom: 35px;
}

/* Enrase de cierre inferior */
.bs-snt-footer-bottom-brand-social-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
}

.bs-snt-logo-white-wrapper {
    display: flex;
    align-items: center;
}

/* Transmutación forzada a logotipo blanco puro */
.bs-snt-logo-white-img {
    height: 22px;
    width: auto;
    display: block;
    filter: grayscale(100%) brightness(200%) contrast(100%); 
}

.bs-snt-copyright-center-txt-box p {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    color: #9e9e9e; 
    margin: 0;
    text-align: center;
}

.bs-snt-social-pills-right-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Pastillas blancas ovaladas con diseño horizontal exacto */
.bs-snt-white-pill-btn {
    background-color: #ffffff; 
    width: 44px;  
    height: 32px; 
    border-radius: 10px; 
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.bs-snt-white-pill-btn:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

.bs-snt-white-pill-btn svg {
    width: 16px;
    height: 16px;
    fill: #1c1c1c; 
    display: block;
}
/* ==========================================================================
   20. OPTIMIZACIÓN EN MÓVILES Y TABLETS (MEDIA QUERIES)
   ========================================================================== */

/* 1. COMPORTAMIENTO COMÚN PARA DISPOSITIVOS MÓVILES (TABLETS Y PHONES) */
@media (max-width: 950px) {
    .bs-global-header {
        padding: 16px 20px !important;
    }
    .bs-main-navigation-menu {
        display: none !important; /* Oculta la barra de PC */
    }
    
    /* Gatillo del Menú Hamburguesa */
    .bs-mobile-hamburger-trigger-btn {
        
            width: 44px !important;
            height: 44px !important;
            min-width: 44px !important;
            min-height: 44px !important;
            background-color: #ec0000 !important;
            border-radius: 50% !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            align-items: center !important;
            gap: 4px !important;
            box-shadow: 0 2px 8px rgba(236, 0, 0, 0.15) !important;
            cursor: pointer !important;
        
    }

     .bs-hamburguesa-line {
            width: 20px !important;
            height: 2.5px !important;
            background-color: #ffffff !important;
            border-radius: 2px !important;
            display: block !important;
        }
    .bs-mobile-hamburger-trigger-btn::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 15px;
        height: 2px;
        background: #ffffff;
        box-shadow: 0 -4px 0 #ffffff, 0 4px 0 #ffffff;
    }

    /* Carrusel Adaptativo */
    .bs-carousel-individual-slide {
        height: 420px !important;
    }
    .bs-slide-main-headline {
        font-size: 36px !important;
    }
    .bs-slide-secondary-subtext-center {
        font-size: 16px !important;
        padding: 0 20px;
    }

    /* Reducción elástica de cuadrículas */
    .bs-directory-needs-6col-layout {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .bs-help-support-grid-layout {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    .bs-anywhere-grid-layout {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Promoción iPhone Responsiva Vertical */
    .bs-promo-iphone-max-aligner {
        flex-direction: column !important;
        text-align: left !important;
        gap: 35px !important;
    }
    .bs-promo-iphone-content-side {
        align-items: flex-start !important;
        width: 100%;
    }
    .bs-promo-iphone-title {
        font-size: 36px !important;
    }
    .bs-promo-iphone-image-side {
        width: 100%;
        justify-content: center !important;
    }
    .bs-promo-iphone-display-img {
        width: 100% !important;
        max-height: 320px !important;
    }

    /* Footer adaptado */
    .bs-snt-footer-headers-horizontal-row {
        display: none !important;
    }
    .bs-snt-footer-links-massive-grid-area {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .bs-snt-footer-bottom-brand-social-row {
        flex-direction: column !important;
        gap: 25px !important;
        text-align: center !important;
    }
}

/* 2. PROTECCIÓN EXCLUSIVA PARA ORDENADORES (PC DE ESCRITORIO) */
@media (min-width: 951px) {
    /* 🔒 BLINDAJE DE PC: Esconde el botón móvil suelto para que no rompa el logo */
    .bs-header-inside-box .bs-mobile-cta-only {
        display: none !important;
    }
}
/* 3. OPTIMIZACIÓN EXCLUSIVA PARA SMARTPHONES EN VERTICAL */
@media (max-width: 650px) {
    /* Botón Hazte Cliente móvil: a la derecha, junto a la hamburguesa (no centrado) */
    .bs-header-inside-box .bs-mobile-cta-only {
        display: inline-flex !important;
        position: absolute !important;
        left: auto !important;
        right: 60px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 100000 !important;
        white-space: nowrap !important;
        min-width: max-content !important;
        padding: 9px 14px !important;
        font-size: 12.5px !important;
        height: auto !important;
    }

    /* Reducción elástica de cabeceras de bloques */
    .bs-directory-needs-main-title { font-size: 30px !important; line-height: 1.2 !important; padding: 0 10px; }
    .bs-help-support-main-title { font-size: 32px !important; }

    /* Forzado estricto a 1 sola columna vertical completa */
    .bs-directory-needs-6col-layout,
    .bs-cards-showcase-grid-layout,
    .bs-anywhere-grid-layout,
    .bs-help-support-grid-layout,
    .bs-snt-footer-links-massive-grid-area {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Reducción elástica de alturas */
    .bs-anywhere-individual-card { height: 420px !important; }
    .bs-showcase-card-image-top { height: 200px !important; }
    .bs-showcase-card-headline-txt { font-size: 22px !important; }

    /* Ajuste óptico en el Popup Emergente Móvil */
    .bs-popup-compact-container { padding: 30px 20px !important; margin: 0 15px !important; }
    .bs-popup-main-headline { font-size: 22px !important; }

    /* Eliminación de efectos Hover innecesarios en pantallas táctiles */
    .bs-needs-individual-card:hover,
    .bs-showcase-individual-card:hover {
        transform: none !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.015) !important;
    }
}

/* ==========================================================================
   🧱 SANEAMIENTO Y ESQUEMA CANÓNICO DEL MENÚ HAMBURGUESA MÓVIL
   ========================================================================== */
.bs-mobile-drawer-overlay-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background-color: #ffffff !important;
    z-index: 999999 !important;
    display: block !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.bs-mobile-drawer-overlay-menu.bs-drawer-active-state {
    transform: translateX(0) !important;
}

.bs-mobile-drawer-inside-content {
    width: 100% !important;
    height: 100% !important;
    padding: 10px 24px 20px 24px !important; /* Relleno superior comprimido */
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

.bs-drawer-header-top-row {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin-bottom: 5px !important;
}

.bs-drawer-close-x-btn {
    font-size: 30px !important;
    color: #1d1d1d !important;
    cursor: pointer !important;
    line-height: 1 !important;
    font-family: Arial, sans-serif !important;
}

.bs-drawer-navigation-vertical-list {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 40px !important;
    width: 100% !important;
    margin-bottom: 5px !important;
}

.bs-drawer-nav-item {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #4a4a4a !important;
    cursor: pointer !important;
    position: relative !important;
}

.bs-drawer-nav-item.bs-drawer-active {
    color: #ec0000 !important;
    font-weight: 700 !important;
}

.bs-drawer-nav-item.bs-drawer-active::after {
    content: "" !important;
    position: absolute !important;
    bottom: -6px !important;
    left: 0 !important;
    width: 100% !important;
    height: 2.5px !important;
    background-color: #ec0000 !important;
    border-radius: 2px !important;
}

.bs-drawer-utilities-actions-block::before {
    content: "•  •  •  •" !important;
    display: block !important;
    text-align: center !important;
    color: #cccccc !important;
    font-size: 24px !important;
    letter-spacing: 2px !important;
    margin-bottom: 15px !important;
    line-height: 1 !important;
}

.bs-drawer-utilities-actions-block {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.bs-drawer-lang-selector-title {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #1d1d1d !important;
    margin-bottom: 25px !important;
}

/* 🚀 AGRANDADO MAESTRO DEFINITIVO DEL MENÚ HAMBURGUESA */
.bs-drawer-action-row-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid #eeeeee !important;
    border-radius: 0 !important;
    padding: 24px 0 !important; /* Espaciado elástico vertical masivo */
    margin-bottom: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    
    font-family: 'Open Sans', sans-serif !important;
    font-size: 22px !important; /* Fuente masiva unificada */
    font-weight: 600 !important;
    color: #1d1d1d !important;
}

.bs-drawer-action-row-btn::after {
    content: "›" !important;
    color: #ec0000 !important;
    font-size: 38px !important;
    line-height: 0.5 !important;
    font-weight: 400 !important;
}

.bs-drawer-gray-embedded-box {
    background: transparent !important;
    border: none !important;
    margin-top: 0 !important;
}

.bs-drawer-gray-embedded-box .bs-drawer-action-row-btn:last-of-type {
    border-bottom: none !important;
}

.bs-drawer-btn-login {
    background-color: #ec0000 !important;
    color: #ffffff !important;
    justify-content: center !important;
    padding: 16px 0 !important;
    border-radius: 26px !important;
    margin-top: auto !important;
    margin-bottom: 10px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    width: 100% !important;
    border-bottom: none !important;
}

.bs-drawer-btn-login::after {
    content: "" !important;
}

.bs-drawer-pill-flag-mask {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 12px;
}

.bs-drawer-pill-flag-mask img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.bs-drawer-row-left-group {
    display: flex !important;
    align-items: center !important;
}
/* ==========================================================================
   🔒 FIX DE CONTINUIDAD ÓPTICA: ENRASE ELÁSTICO "DESDE DONDE QUIERAS" E IPHONE
   ========================================================================== */

@media (max-width: 650px) {
    /* 1. Unificación del Fondo y Alineación de Tarjetas "Desde donde quieras" */
    .bs-anywhere-showcase-section {
        padding: 40px 0 50px 0 !important;
    }
    
    .bs-anywhere-individual-card {
        height: 440px !important; /* Altura elástica optimizada para scroll táctil */
        border-radius: 20px !important;
    }

    .bs-anywhere-card-body-content-floating {
        bottom: 12px !important;
        left: 12px !important;
        right: 12px !important;
        padding: 20px !important;
        height: 175px !important; /* Enrase simétrico exacto de las tres cajas de texto */
        min-height: 175px !important;
    }

    /* 2. Reordenación Elástica de la Sección del iPhone 17e */
    .bs-promo-iphone-section {
        padding: 50px 0 0 0 !important; /* Deja que la imagen bese el fondo crema sin aire */
    }

    .bs-promo-iphone-max-aligner {
        flex-direction: column !important;
        gap: 30px !important;
        padding: 0 24px !important;
    }

    .bs-promo-iphone-content-side {
        align-items: center !important; /* Centrado absoluto del mensaje en smartphones */
        text-align: center !important;
        width: 100% !important;
    }

    .bs-promo-iphone-description {
        margin-bottom: 30px !important;
    }

    .bs-promo-iphone-image-side {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 10px !important;
    }

    .bs-promo-iphone-display-img {
        width: 90% !important;
        max-height: 280px !important;
        object-fit: contain !important;
        margin-bottom: 0 !important; /* Eliminación de margen para pegar el dispositivo al bloque inferior */
    }
}
/* ==========================================================================
   🔒 FIX DE CABECERA ESTÁTICA Y BOTÓN ROJO DE LA DIAPOSITIVA 2
   ========================================================================== */

/* 1. Evita que las letras se desplacen o tiemblen al pasar el ratón (Hover) */
.bs-nav-link-item:hover,
.bs-nav-link-item.bs-active-tab {
    color: #ec0000 !important;
    font-weight: 500 !important; /* Mantiene exactamente el mismo grosor para que no se mueva */
}

/* 2. Fuerza al botón de la segunda imagen ("Saber Más") a ser rojo corporativo */
.bs-carousel-individual-slide:nth-child(2) .bs-btn-secondary {
    background-color: #ec0000 !important;
    color: #ffffff !important;
}

.bs-carousel-individual-slide:nth-child(2) .bs-btn-secondary:hover {
    background-color: #b30000 !important;
    transform: scale(1.02) !important;
}
/* ==========================================================================
   🔒 REPARACIÓN MÁSTER: REDISTRIBUCIÓN DE TEXTOS, CABECERA Y DISPARADOR
   ========================================================================== */

/* 1. Sube el cuadro de textos y el botón de la foto 1 para que no tapen la cara */
.bs-slide-overlay-text-block-center {
    top: 15% !important; /* ANTES: 25%. Sube todo el conjunto simétricamente hacia arriba */
}

.bs-slide-main-headline {
    font-size: 32px !important; /* Ajuste óptico elástico para pantallas compactas */
    margin-bottom: 8px !important;
}

.bs-slide-secondary-subtext-center {
    font-size: 15px !important;
}

.bs-slide-actions-container {
    margin-top: 14px !important; /* Acerca el botón rojo de Solicitar un poco más al texto */
}

/* 2. Separa el botón "Hazte Cliente" del logotipo en móviles y fíjalo alineado */
@media (max-width: 650px) {
    .bs-header-inside-box {
        position: relative !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
    }

    .bs-header-inside-box .bs-mobile-cta-only {
        position: absolute !important;
        left: auto !important;
        right: 60px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        white-space: nowrap !important;
        display: inline-flex !important;
    }

    /* 3. Hace el botón del menú hamburguesa notablemente más grande */
    .bs-global-header .bs-mobile-hamburger-trigger-btn {
        display: block !important;
        width: 38px !important;  /* ANTES: 32px (Más masivo y fácil de pulsar) */
        height: 38px !important; /* ANTES: 32px */
        background-color: #ec0000 !important;
        border-radius: 50% !important;
        position: absolute !important;
        right: 0 !important;    /* Fijación rígida en el extremo derecho de la cabecera */
        cursor: pointer !important;
        order: unset !important;
    }

    /* Tres líneas blancas internas más gruesas y proporcionadas al nuevo tamaño */
    .bs-global-header .bs-mobile-hamburger-trigger-btn::before {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 18px !important; /* ANTES: 14px */
        height: 2.5px !important; /* Líneas un poco más gruesas */
        background: #ffffff !important;
        box-shadow: 0 -5px 0 #ffffff, 0 5px 0 #ffffff !important; /* Ajuste del espaciado de las rayas */
    }
}
/* ==========================================================================
   🧱 MÁSCARA Y MAQUETACIÓN RESPONSIVE DEL CARRUSEL DE NECESIDADES
   ========================================================================== */

/* Configuración base para ordenadores */
.bs-needs-slider-container-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.bs-needs-slider-viewport {
    width: 100%;
    overflow: visible; /* En PC no corta las tarjetas */
}

/* Ocultamos las flechas y puntos en ordenadores por defecto */
.bs-needs-arrow-btn,
.bs-needs-dots-pagination-bar {
    display: none !important;
}

/* 📱 ADAPTACIÓN RADICAL EXCLUSIVA PARA MÓVILES (PANTALLAS COMPACTAS) */
@media (max-width: 650px) {
    .bs-needs-slider-viewport {
        overflow: hidden !important; /* Capa protectora que corta las tarjetas sobrantes */
        width: 100% !important;
        padding: 10px 0 !important;
    }

    /* El riel maestro se estira de forma horizontal y elástica */
    .bs-directory-needs-6col-layout {
        display: flex !important;
        grid-template-columns: none !important;
        width: 600vw !important; /* 6 tarjetas = 600% del ancho del viewport móvil */
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Cada tarjeta mide exactamente el 100% de la pantalla del teléfono */
    .bs-needs-individual-card {
        flex: 0 0 100vw !important;
        width: 100vw !important;
        min-height: 210px !important;
        background-color: #ffffff !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
        border-radius: 20px !important;
        padding: 35px 24px !important;
        
        /* Centrado estricto del contenido interior */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Redimensión del icono del banco en el slider móvil */
    .bs-needs-svg-icon {
        width: 38px !important;
        height: 38px !important;
    }

    /* Letras un poco más grandes para emular tu captura */
    .bs-needs-card-title-lbl {
        font-size: 17px !important;
        font-weight: 500 !important;
        margin-top: 8px !important;
    }

    /* Flecha roja inferior individual estática de tu captura */
    .bs-needs-card-arrow-area {
        position: relative !important;
        bottom: unset !important;
        left: unset !important;
        transform: none !important;
        margin-top: 25px !important;
        display: flex !important;
    }

    .bs-needs-linear-arrow {
        opacity: 1 !important;
        transform: scale(1.1) !important;
        stroke-width: 2 !important;
    }

    .bs-needs-circle-red-button {
        display: none !important; /* Quitamos el círculo flotante de PC en la vista móvil */
    }

    /* 🏹 ACTIVACIÓN ÓPTICA DE LAS FLECHAS LATERALES CALADAS */
    .bs-needs-arrow-btn {
        display: flex !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 100 !important;
        width: 40px !important;
        height: 40px !important;
        color: #ec0000 !important; /* Flechas de color rojo puro */
        font-size: 34px !important;
        font-family: Arial, sans-serif !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        user-select: none !important;
    }

    .bs-needs-arrow-left { left: 5px !important; }
    .bs-needs-arrow-right { right: 5px !important; }

    /* 🔴 BARRA DE PUNTITOS INDICADORES DEBAJO DEL SLIDER */
    .bs-needs-dots-pagination-bar {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        margin-top: 20px !important;
        width: 100% !important;
    }

    .bs-needs-individual-dot {
        width: 6px !important;
        height: 6px !important;
        background-color: #cccccc !important;
        border-radius: 50% !important;
        transition: background-color 0.3s ease, transform 0.3s ease !important;
    }

    /* El puntito que marca la tarjeta activa se estira y cambia a rojo */
    .bs-needs-individual-dot.bs-needs-dot-active {
        background-color: #ec0000 !important;
        width: 14px !important; /* Efecto píldora estirada oficial */
        border-radius: 4px !important;
    }
}
/* ==========================================================================
   🎯 AJUSTE DE PRECISIÓN RESPONSIVE: REDUCCIÓN DE LETRA EN MENÚ MÓVIL
   ========================================================================== */

/* Reduce sutilmente el tamaño de las opciones del menú hamburguesa */
.bs-drawer-action-row-btn {
    font-size: 18px !important;    /* 🚀 ANTES: 22px. Letra más estilizada y compacta */
    padding: 18px 0 !important;    /* 🚀 ANTES: 24px. Reduce la altura excesiva de la fila */
}

/* Ajusta el tamaño de la flecha lateral roja (›) en proporción */
.bs-drawer-action-row-btn::after {
    font-size: 28px !important;    /* 🚀 ANTES: 38px */
}

/* Compacta sutilmente el botón inferior de Hazte Cliente */
.bs-drawer-btn-login {
    font-size: 16px !important;
    padding: 14px 0 !important;
    font-weight: 700 !important;
}
/* ==========================================================================
   🎯 INTERFAZ DE IDIOMAS EN MENÚ MÓVIL (RÉPLICA CANÓNICA BANCARIA)
   ========================================================================== */

@media (max-width: 650px) {
    /* 1. Fuerza al contenedor de idiomas a desplegarse en formato de lista limpia */
    .bs-lang-floating-menu {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    /* 2. Transforma cada opción de idioma en una fila premium fácil de pulsar */
    .bs-lang-option-row {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-bottom: 1px solid #eeeeee !important; /* Fina línea divisoria gris */
        border-radius: 0 !important;
        padding: 20px 0 !important; /* Espaciado elástico para pulsar perfecto con el dedo */
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        cursor: pointer !important;
        
        /* Configuración de tipografía */
        font-family: 'Open Sans', sans-serif !important;
        font-size: 18px !important; /* Letras masivas unificadas con el menú */
        font-weight: 600 !important;
        color: #1d1d1d !important;
    }

    /* Ocultamos las banderas en el submenú móvil para emular tu captura limpia */
    .bs-lang-option-row .bs-flag-circle-mask {
        display: none !important;
    }

    /* Ocultamos los checks dinámicos de PC en la vista de teléfono */
    .bs-lang-option-row .bs-check-icon {
        display: none !important;
    }

    /* 3. Flecha minimalista roja (›) a la derecha de cada idioma */
    .bs-lang-option-row::after {
        content: "›" !important;
        color: #ec0000 !important;
        font-size: 32px !important;
        line-height: 0.5 !important;
        font-weight: 400 !important;
    }
}
/* ==========================================================================
   🔒 CONTROL DE INTERCAMBIO DINÁMICO DE IDIOMAS EN MÓVIL
   ========================================================================== */
.bs-drawer-action-row-btn.bs-mobile-hide-row {
    display: none !important; /* Fuerza la ocultación absoluta de la opción duplicada */
}
/* ==========================================================================
   🎯 INTERFAZ DE CARRUSEL PREMIUM PARA PESTAÑAS SUPERIORES EN MÓVIL
   ========================================================================== */
.bs-drawer-tabs-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 5px;
}

.bs-tabs-slider-viewport {
    overflow: hidden !important;
    width: 100% !important;
    padding: 5px 0 !important;
}

/* El riel de arriba se estira de forma horizontal */
#idTabsTrack {
    display: flex !important;
    grid-template-columns: none !important;
    width: 300vw !important; /* 3 pestañas = 300% */
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Cada opción ocupa el centro absoluto de la pantalla móvil */
.bs-drawer-tabs-carousel-wrapper .bs-drawer-nav-item {
    flex: 0 0 100vw !important;
    width: 100vw !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Quita la raya roja de abajo estática para emular la captura oficial limpia */
.bs-drawer-tabs-carousel-wrapper .bs-drawer-nav-item.bs-drawer-active::after {
    display: none !important;
}

/* 🏹 Las dos flechitas grises caladas laterales de tu captura */
.bs-tabs-arrow-btn {
    display: flex !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 100 !important;
    width: 30px !important;
    height: 30px !important;
    color: #b0b0b0 !important; /* Gris claro exacto de tu imagen */
    font-size: 28px !important;
    font-family: Arial, sans-serif !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    user-select: none !important;
}

.bs-tabs-arrow-left { left: 10px !important; }
.bs-tabs-arrow-right { right: 10px !important; }

/* 🔴 Los cuatro puntitos rojos indicadores debajo de las palabras */
.bs-tabs-dots-pagination-bar {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 25px !important;
    width: 100% !important;
}

.bs-tabs-individual-dot {
    width: 5px !important;
    height: 5px !important;
    background-color: #e0e0e0 !important;
    border-radius: 50% !important;
    transition: background-color 0.2s ease !important;
}

.bs-tabs-individual-dot.bs-tabs-dot-active {
    background-color: #ec0000 !important; /* El puntito activo se vuelve rojo */
}
/* Realinea el ancho del riel móvil superior para soportar las 4 pestañas en línea horizontal */
#idTabsTrack {
    width: 400vw !important; /* 🚀 Ajustado a 400% para dar soporte estricto a las 4 opciones */
}
/* ==========================================================================
   🔒 CANDADO ABSOLUTO DE FLUJO: CORRECCIÓN PÁGINA DESPLAZADA MÓVIL
   ========================================================================== */

/* 1. Fuerza al panel del menú completo a medir exactamente la pantalla del móvil */
.bs-mobile-drawer-overlay-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;      /* 🚀 Blindaje: nunca medirá más del ancho de la pantalla */
    max-width: 100vw !important;  /* 🚀 Evita que los rieles interiores empujen la caja */
    height: 100vh !important;
    background-color: #ffffff !important;
    z-index: 999999 !important;
    overflow-x: hidden !important; /* 🚀 Corta cualquier desbordamiento lateral de raíz */
}

/* 2. Asegura que el contenedor de relleno interno respete el candado */
.bs-mobile-drawer-inside-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important; /* 🚀 Doble candado elástico anti-desplazamiento */
    padding: 10px 24px 20px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

/* 3. Limpieza del riel del carrusel superior */
.bs-drawer-tabs-carousel-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    position: relative !important;
}

.bs-tabs-slider-viewport {
    width: calc(100% - 60px) !important; /* Deja espacio elástico para las flechas laterales */
    margin: 0 auto !important;
    overflow: hidden !important;         /* 🚀 Corta las palabras secundarias */
}

#idTabsTrack {
    display: flex !important;
    width: 400% !important; /* 🚀 Cambiado de 400vw a 400% relativo al viewport recortado */
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.bs-drawer-tabs-carousel-wrapper .bs-drawer-nav-item {
    flex: 0 0 25% !important; /* 🚀 4 pestañas = 25% exacto de la anchura del riel (100% de la pantalla) */
    width: 100% !important;
    text-align: center !important;
}
/* ==========================================================================
   🎯 ENRASE MÓVIL: CENTRADO PURO DE ICONO, LETRAS Y FLECHA EN TARJETAS
   ========================================================================== */

@media (max-width: 650px) {
    /* 1. Caja contenedora de la tarjeta gris */
    .bs-needs-individual-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;       /* 🚀 CENTRADO HORIZONTAL ESTRICTO DE TODO LO DE DENTRO */
        justify-content: center !important;    /* Centrado vertical en el medio */
        text-align: center !important;         /* Fuerza a que las letras se alineen al centro */
        padding: 15px !important;
        box-sizing: border-box !important;
    }

    /* 2. El icono rojo superior (La cartera / caja) */
    .bs-needs-individual-card .bs-needs-card-icon-area,
    .bs-needs-individual-card svg:first-of-type,
    .bs-needs-individual-card img {
        display: block !important;
        margin: 0 auto 8px auto !important;   /* 🚀 Centra el icono y le deja margen abajo */
        float: none !important;                /* Quita cualquier desvío viejo lateral */
    }

    /* 3. Las letras (El título de la necesidad "Una cuenta", etc.) */
    .bs-needs-individual-card h3,
    .bs-needs-individual-card .bs-needs-card-title-lbl {
        width: 100% !important;
        text-align: center !important;         /* 🚀 Letras clavadas en el centro puro */
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
    }

    /* 4. El área de la flechita roja de abajo */
    .bs-needs-individual-card .bs-needs-card-arrow-area {
        display: flex !important;
        justify-content: center !important;    /* 🚀 Flecha centrada horizontalmente */
        align-items: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* El dibujo vectorial de la flecha pequeña */
    .bs-needs-individual-card .bs-needs-linear-arrow {
        display: block !important;
        margin: 0 auto !important;
    }
}





/* ==========================================================================
   🔒 INTERFAZ DE ACCESO DE CLIENTES (LOGIN PRO)
   ========================================================================== */

.bs-login-body-layout {
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Open Sans', sans-serif !important;
    background-color: #ffffff !important;
    width: 100% !important;
    overflow-x: hidden !important;
}

/* 1. Cabecera Limpia Superior */
.bs-login-clean-header {
    width: 100% !important;
    height: 70px !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #e9ebeb !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

.bs-login-header-inside {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    display: flex !important;
    align-items: center !important;
}

.bs-login-brand-logo img {
    height: 28px !important;
    width: auto !important;
    display: block !important;
}

/* 2. Contenedor Modular de Doble Columna (Escritorio) */
.bs-login-split-master-container {
    display: flex !important;
    width: 100% !important;
    min-height: calc(100vh - 70px) !important;
}

.bs-login-left-image-side {
    flex: 0 0 50% !important;
    width: 50% !important;
    background-color: #f4f6f6 !important;
    position: relative !important;
    overflow: hidden !important;
}

.bs-login-hero-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.bs-login-right-form-side {
    flex: 0 0 50% !important;
    width: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 24px !important;
    box-sizing: border-box !important;
    background-color: #ffffff !important;
}

.bs-login-form-wrapper-box {
    width: 100% !important;
    max-width: 420px !important;
}

/* 3. Componentes Internos del Formulario */
.bs-login-main-welcome-title {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #1d1d1d !important;
    margin: 0 0 35px 0 !important;
    letter-spacing: -0.5px !important;
}

.bs-login-form-group-row {
    margin-bottom: 24px !important;
    display: flex !important;
    flex-direction: column !important;
}

.bs-login-input-label-field {
    font-size: 14px !important;
    color: #4a4a4a !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

/* Combo alineado para el Selector de Documento y el Input de Texto */
.bs-login-document-inputs-combo {
    display: flex !important;
    width: 100% !important;
    border: 1px solid #767676 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    height: 48px !important;
    box-sizing: border-box !important;
}

.bs-login-select-dropdown {
    flex: 0 0 90px !important;
    width: 90px !important;
    border: none !important;
    border-right: 1px solid #e9ebeb !important;
    background-color: #ffffff !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1d1d1d !important;
    padding: 0 10px !important;
    cursor: pointer !important;
    outline: none !important;
}

.bs-login-input-text-field {
    flex: 1 !important;
    border: none !important;
    padding: 0 16px !important;
    font-size: 16px !important;
    font-family: 'Open Sans', sans-serif !important;
    color: #1d1d1d !important;
    outline: none !important;
    height: 100% !important;
}

/* Input independiente sin combo combo (Clave, Teléfono, Firma) */
.bs-login-form-group-row .bs-login-input-text-field {
    border: 1px solid #767676 !important;
    border-radius: 6px !important;
    height: 48px !important;
    box-sizing: border-box !important;
}

.bs-login-actions-utils-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 20px 0 30px 0 !important;
    font-size: 14px !important;
}

.bs-login-checkbox-label-container {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #1d1d1d !important;
    cursor: pointer !important;
}

.bs-login-forgot-credentials-link {
    color: #257fa4 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.bs-login-forgot-credentials-link:hover {
    text-decoration: underline !important;
}

/* Botón Ovalado Corporativo */
.bs-login-submit-red-btn {
    width: 100% !important;
    height: 48px !important;
    background-color: #ec0000 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 24px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    font-family: 'Open Sans', sans-serif !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

.bs-login-submit-red-btn:hover {
    background-color: #b30000 !important;
}

.bs-login-footer-signup-prompt {
    text-align: center !important;
    font-size: 14px !important;
    color: #4a4a4a !important;
    margin-top: 25px !important;
}

.bs-login-signup-inline-link {
    color: #257fa4 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
}

/* Caja Informativa Exclusiva de la Fase 2 */
.bs-login-info-banca-segura {
    background-color: #f4f6f6 !important;
    border-left: 4px solid #ec0000 !important;
    padding: 12px 16px !important;
    border-radius: 0 8px 8px 0 !important;
    margin: 20px 0 !important;
}

.bs-login-info-banca-segura p {
    margin: 0 !important;
    font-size: 13.5px !important;
    color: #4a4a4a !important;
    line-height: 1.4 !important;
}

/* ==========================================================================
   🎯 RESPONSIVE: BLINDAJE ABSOLUTO PARA DISPOSITIVOS MÓVILES
   ========================================================================== */
@media (max-width: 768px) {
    /* Oculta físicamente el panel de la imagen de la niña */
    .bs-login-left-image-side {
        display: none !important;
    }

    /* Fuerza al panel del formulario a abarcar el 100% de la pantalla del terminal */
    .bs-login-right-form-side {
        flex: 0 0 100% !important;
        width: 100% !important;
        padding: 30px 20px !important;
    }

    .bs-login-main-welcome-title {
        font-size: 26px !important;
        margin-bottom: 25px !important;
        text-align: center !important;
    }
}
/* ==========================================================================
   💎 MICRO-INTERACCIONES PREMIUM: ENRASE DE DETALLES ACCESO CLIENTES
   ========================================================================== */

/* Iluminación interactiva roja al colocar el cursor dentro de los recuadros */
.bs-login-input-text-field:focus,
.bs-login-select-dropdown:focus {
    border-color: #ec0000 !important;
    box-shadow: 0 0 0 3px rgba(236, 0, 0, 0.1) !important;
}

/* Formateo del contenedor del input con ojo para la clave */
.bs-login-password-wrapper-row {
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
}

/* Icono del ojo flotante posicionado a la derecha del recuadro de texto */
.bs-login-eye-toggle-btn {
    position: absolute !important;
    right: 14px !important;
    cursor: pointer !important;
    user-select: none !important;
    font-size: 18px !important;
    color: #767676 !important;
    z-index: 10 !important;
    transition: color 0.2s ease !important;
}

.bs-login-eye-toggle-btn:hover {
    color: #ec0000 !important;
}

/* Estilización premium del selector de documento para calcar la flecha desplegable */
.bs-login-select-dropdown {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://w3.org' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ec0000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 14px !important;
    padding-right: 24px !important;
}

/* Estilo elástico adaptado para la casilla de verificación de recordar usuario */
.bs-login-checkbox-label-container input[type="checkbox"] {
    accent-color: #ec0000 !important; /* Fuerza a que el check nativo sea rojo */
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
}





/* ==========================================================================
   🔒 RESTAURACIÓN PREMIUM: QUITAR FONDO ROJO Y RE-ALINEAR PESTAÑAS ABAJO
   ========================================================================== */

@media (min-width: 651px) {
    /* 1. Convierte el botón de Acceso Clientes en un texto plano sin fondo rojo */
    .bs-nav-right-group .bs-header-cta-action-button {
        background: transparent !important;
        background-color: transparent !important;
        color: #1d1d1d !important;      /* Texto negro elegante plano */
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        font-weight: 600 !important;
        font-size: 15px !important;
        cursor: pointer !important;
        box-shadow: none !important;
        height: auto !important;
        width: auto !important;
        border-radius: 0 !important;
    }

    /* Efecto al pasar el ratón por encima del texto de Acceso */
    .bs-nav-right-group .bs-header-cta-action-button:hover {
        color: #ec0000 !important;      /* Cambia a rojo Santander suave */
    }

    /* 2. Mueve las 4 pestañas hacia abajo y pégalas mucho más al logotipo */
    .bs-nav-left-group {
        display: flex !important;
        align-items: flex-end !important; /* Empuja las palabras a la base inferior */
        margin-left: -45px !important;    /* 🚀 REACERCAR: Las pega drásticamente al logo hacia la izquierda */
        margin-bottom: -10px !important;   /* 🚀 BAJAR: Empuja las palabras hacia abajo para nivelarlas */
        gap: 24px !important;              /* Espaciado elástico interno */
    }

    /* Enrasado del contenedor máster de la barra superior */
    .bs-header-inside-box {
        display: flex !important;
        align-items: flex-end !important;
        height: 80px !important;          /* Estabiliza la altura de la cabecera */
        padding-bottom: 16px !important;  /* Margen limpio en la base del logotipo */
        box-sizing: border-box !important;
    }

    .bs-main-navigation-menu {
        display: flex !important;
        align-items: flex-end !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   🔒 RESTAURACIÓN QUIRÚRGICA: LA FLECHA ANGULAR FINA ORIGINAL DE AYER
   ========================================================================== */

@media (min-width: 651px) {
    /* Crea la cuña lineal fina y abierta en formato de 'v' idéntica a la de ayer */
    .bs-nav-right-group .bs-header-cta-action-button::after {
        content: "" !important;
        display: inline-block !important;
        width: 6px !important;    /* Dimensiones finas del chevron */
        height: 6px !important;
        margin-left: 8px !important;
        vertical-align: middle !important;
        
        /* 🚀 LA CLAVE DE AYER: Dos bordes finos rotados 45 grados para hacer la 'v' */
        border-right: 2px solid #767676 !important; /* Línea gris fina original */
        border-bottom: 2px solid #767676 !important;
        transform: translateY(-2px) rotate(45deg) !important; /* Rotación exacta hacia abajo */
        
        transition: border-color 0.2s ease, transform 0.2s ease !important;
    }

    /* Al pasar el cursor, la flecha fina se ilumina en rojo junto al texto */
    .bs-nav-right-group .bs-header-cta-action-button:hover::after {
        border-right-color: #ec0000 !important;
        border-bottom-color: #ec0000 !important;
    }
}
/* ==========================================================================
   🎯 SANEAMIENTO FINAL: CLASES SEPARADAS PARA AMBOS BOTONES DE PC
   ========================================================================== */

@media (min-width: 651px) {
    /* A. Enrase de las 4 pestañas de la izquierda (abajo y pegadas al logo) */
    .bs-nav-left-group {
        display: flex !important;
        align-items: flex-end !important;
        margin-left: -50px !important; /* Distancia exacta de ayer */
        margin-bottom: -10px !important;  /* Nivelado inferior de base */
        gap: 24px !important;
    }

    /* B. MAQUETACIÓN DE ACCESO CLIENTES: Texto plano negro elegante de ayer */
    .bs-header-link-login-plano {
        color: #1d1d1d !important;
        font-weight: 600 !important;
        font-size: 15px !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        user-select: none !important;
    }

    .bs-header-link-login-plano:hover {
        color: #ec0000 !important; /* Cambia a rojo al pasar el cursor */
    }

    /* 🚀 LA FLECHA ANGULAR FINA DE AYER: Chevron lineal en formato de 'v' */
    .bs-header-link-login-plano::after {
        content: "" !important;
        display: inline-block !important;
        width: 6px !important;
        height: 6px !important;
        margin-left: 8px !important;
        vertical-align: middle !important;
        
        /* Dos bordes finos rotados 45 grados para calcar tu flecha fina */
        border-right: 2px solid #767676 !important; 
        border-bottom: 2px solid #767676 !important;
        transform: translateY(-2px) rotate(45deg) !important;
        transition: border-color 0.2s ease !important;
    }

    .bs-header-link-login-plano:hover::after {
        border-color: #ec0000 !important; /* La flecha cambia a rojo junto al texto */
    }

    /* C. MAQUETACIÓN DE HAZTE CLIENTE: Conserva su óvalo rojo macizo original intacto */
    .bs-header-cta-action-button {
        background-color: #ec0000 !important;
        color: #ffffff !important;
        padding: 10px 24px !important;
        border-radius: 24px !important; /* Óvalo perfecto restablecido */
        font-weight: 700 !important;
        font-size: 15px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        border: none !important;
        box-shadow: none !important;
    }

    .bs-header-cta-action-button:hover {
        background-color: #b30000 !important;
    }
    /* Alinea la línea base del botón "Hazte Cliente" con el texto del menú (que va empujado hacia abajo) */
    .bs-nav-right-group .bs-header-cta-action-button { transform: translateY(7px) !important; }
}

/* ==========================================================================
   ====== MEJORAS DE LA SESIÓN (reaplicadas tras restaurar el CSS) ======
   ========================================================================== */

/* ----- MEGA-MENÚ DESPLEGABLE (cabecera) ----- */
.bs-mega-trigger { position: relative; display: inline-flex; align-items: flex-end; }
.bs-mega-trigger::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 26px; }
.bs-mega-panel {
    position: fixed; left: 0; right: 0; top: 82px; background: #ffffff;
    box-shadow: 0 18px 40px rgba(0,0,0,0.12); border-top: 1px solid #eee;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease; z-index: 99998;
}
.bs-mega-trigger:hover .bs-mega-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.bs-mega-panel-inner { max-width: 1200px; margin: 0 auto; padding: 34px 40px 40px 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 40px; box-sizing: border-box; }
.bs-mega-col { display: flex; flex-direction: column; }
.bs-mega-col-title { font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 700; color: #ec0000; text-decoration: none; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #f0e2e2; }
.bs-mega-link { font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 400; color: #4a4a4a; text-decoration: none; padding: 6px 0; transition: color .15s ease, padding-left .15s ease; }
.bs-mega-link:hover { color: #ec0000; padding-left: 4px; }
@media (max-width: 900px) { .bs-mega-panel { display: none !important; } }

/* ----- CABECERA: alineación a la base del logo + bloque derecho junto ----- */
.bs-header-inside-box { align-items: flex-end !important; }
.bs-main-navigation-menu { align-items: flex-end !important; padding-bottom: 0 !important; }
.bs-nav-left-group { align-items: flex-end !important; }
.bs-mega-trigger { align-items: flex-end !important; }
.bs-nav-right-group { align-items: flex-end !important; }
.bs-nav-right-group .bs-nav-right-group { margin-left: 0 !important; align-items: flex-end !important; gap: 24px !important; }
.bs-brand-logo-area { margin-top: 0 !important; }
.bs-global-header { padding: 20px 40px 20px 40px !important; }
.bs-main-hero-slider-carousel-wrapper { padding-top: 80px !important; }
.bs-nav-link-item.bs-active-tab::after { bottom: 3.5px !important; }

/* ----- HERO: titular grande + bloque superior subido ----- */
.bs-slide-overlay-text-block-top { top: 8% !important; }
.bs-slide-main-headline {
    font-size: clamp(44px, 6.5vw, 84px) !important; font-weight: 700 !important;
    line-height: 1.05 !important; letter-spacing: -1.5px !important; margin-bottom: 16px !important;
    text-shadow: 0 2px 14px rgba(0,0,0,0.28) !important;
}
.bs-slide-secondary-subtext-center, .bs-slide-secondary-subtext-top {
    font-size: clamp(16px, 1.7vw, 22px) !important; text-shadow: 0 1px 8px rgba(0,0,0,0.28) !important;
}

/* ----- POPUP más pequeño y botón pastilla ----- */
.bs-popup-compact-container { max-width: 380px !important; padding: 26px 24px !important; }
.bs-popup-main-headline { font-size: 22px !important; font-weight: 700 !important; margin: 0 0 14px 0 !important; }
.bs-popup-cta-action-btn { padding: 13px 40px !important; border-radius: 50px !important; }

/* ----- Botón "Hazte Cliente" móvil en cabecera ----- */
@media (min-width: 651px) { .bs-mobile-cta-only { display: none !important; } }
@media (max-width: 650px) {
    .bs-header-inside-box .bs-mobile-cta-only {
        display: inline-flex !important; position: absolute !important; right: 66px !important; left: auto !important;
        top: 50% !important; transform: translateY(-50%) !important; z-index: 100000 !important; white-space: nowrap !important;
        padding: 10px 18px !important; font-size: 13px !important; align-items: center !important; justify-content: center !important;
        background-color: #ec0000 !important; color: #ffffff !important; font-family: 'Open Sans', sans-serif !important;
        font-weight: 700 !important; border-radius: 50px !important; cursor: pointer !important; user-select: none !important;
    }
}

/* ----- Menú móvil a pantalla completa: SOLO responsive ----- */
@media (min-width: 951px) {
    body .bs-mobile-drawer-overlay-menu,
    body .bs-mobile-drawer-overlay-menu.bs-drawer-active-state { display: none !important; }
}

/* ----- Carrusel "¿qué necesitas?" centrado en móvil ----- */
@media (max-width: 650px) {
    .bs-needs-slider-container-wrapper { width: 100vw !important; margin-left: -20px !important; margin-right: -20px !important; }
}

/* ----- SECCIÓN SIMULA TU HIPOTECA ----- */
.bs-mortgage-sim-section { width: 100%; padding: 70px 0; background: #ffffff; box-sizing: border-box; }
.bs-mortgage-sim-max-aligner { max-width: 1100px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.bs-mortgage-sim-tag { font-family:'Open Sans',sans-serif; font-size:13px; font-weight:700; color:#ec0000; text-transform:uppercase; letter-spacing:.5px; }
.bs-mortgage-sim-title { font-family:'Open Sans',sans-serif; font-size:46px; font-weight:700; color:#1d1d1d; letter-spacing:-1.5px; margin:10px 0 18px 0; }
.bs-mortgage-sim-subtitle { font-family:'Open Sans',sans-serif; font-size:22px; font-weight:700; color:#1d1d1d; margin:0 0 10px 0; }
.bs-mortgage-sim-desc { font-family:'Open Sans',sans-serif; font-size:16px; color:#4a4a4a; line-height:1.5; margin:0 0 26px 0; }
.bs-mortgage-sim-btn { background:#ec0000; color:#fff; border:none; border-radius:24px; padding:13px 34px; font-family:'Open Sans',sans-serif; font-size:15px; font-weight:700; cursor:pointer; transition: background .2s ease; }
.bs-mortgage-sim-btn:hover { background:#cc0000; }
.bs-mortgage-sim-floating-card { background:#f6f0eb; border-radius:20px; padding:34px 30px; box-shadow:0 10px 30px rgba(0,0,0,0.06); }
.bs-mortgage-sim-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.bs-mortgage-sim-row-lbl { font-family:'Open Sans',sans-serif; font-size:14px; color:#767676; }
.bs-mortgage-sim-row-val { font-family:'Open Sans',sans-serif; font-size:18px; font-weight:700; color:#1d1d1d; }
.bs-mortgage-sim-bar { width:100%; height:6px; background:#e3d8cf; border-radius:6px; margin:4px 0 20px 0; overflow:hidden; }
.bs-mortgage-sim-bar-fill { width:55%; height:100%; background:#ec0000; border-radius:6px; }
.bs-mortgage-sim-result { border-top:1px dashed #d8cabf; padding-top:18px; margin-top:6px; display:flex; justify-content:space-between; align-items:baseline; }
.bs-mortgage-sim-result-lbl { font-family:'Open Sans',sans-serif; font-size:14px; color:#4a4a4a; }
.bs-mortgage-sim-result-val { font-family:'Open Sans',sans-serif; font-size:30px; font-weight:700; color:#ec0000; }
.bs-mortgage-sim-result-val small { font-size:15px; font-weight:600; color:#767676; }

/* ----- SECCIONES CLAVES PARA... ----- */
.bs-keys-articles-section { width:100%; padding:70px 0 80px 0; background:#f6f0eb; box-sizing:border-box; }
.bs-keys-articles-max-aligner { max-width:1100px; margin:0 auto; padding:0 20px; box-sizing:border-box; }
.bs-keys-block-title { font-family:'Open Sans',sans-serif; font-size:30px; font-weight:700; color:#1d1d1d; letter-spacing:-0.8px; margin:0 0 22px 0; }
.bs-keys-block-title:not(:first-child) { margin-top:50px; }
.bs-keys-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.bs-key-article-card { background:#fff; border-radius:16px; padding:24px 22px 48px 22px; position:relative; text-decoration:none; display:block; min-height:150px; box-shadow:0 4px 18px rgba(0,0,0,0.03); transition: transform .18s ease, box-shadow .18s ease; }
.bs-key-article-card:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,0.08); }
.bs-key-article-tag { font-family:'Open Sans',sans-serif; font-size:12px; font-weight:700; color:#ec0000; text-transform:uppercase; letter-spacing:.4px; }
.bs-key-article-headline { font-family:'Open Sans',sans-serif; font-size:16px; font-weight:700; color:#1d1d1d; line-height:1.35; margin:10px 0 0 0; }
.bs-key-article-arrow { position:absolute; bottom:16px; left:22px; color:#ec0000; font-size:26px; font-weight:700; line-height:1; }

/* ----- SECCIÓN CONECTADOS, SIEMPRE ----- */
.bs-connected-app-section { width:100%; padding:80px 0; background:#ffffff; box-sizing:border-box; }
.bs-connected-app-max-aligner { max-width:1100px; margin:0 auto; padding:0 20px; box-sizing:border-box; }
.bs-connected-app-header-group { text-align:center; max-width:820px; margin:0 auto 50px auto; }
.bs-connected-app-main-title { font-family:'Open Sans',sans-serif; font-size:46px; font-weight:700; color:#1d1d1d; letter-spacing:-1.5px; margin:0 0 18px 0; }
.bs-connected-app-intro { font-family:'Open Sans',sans-serif; font-size:16.5px; color:#4a4a4a; line-height:1.6; margin:0; }
.bs-connected-app-grid { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.bs-connected-app-img { width:100%; height:auto; border-radius:20px; display:block; }
.bs-connected-app-features-title { font-family:'Open Sans',sans-serif; font-size:24px; font-weight:700; color:#1d1d1d; margin:0 0 24px 0; }
.bs-connected-feature-item { border-left:3px solid #ec0000; padding-left:16px; margin-bottom:20px; }
.bs-connected-feature-name { font-family:'Open Sans',sans-serif; font-size:17px; font-weight:700; color:#1d1d1d; margin:0 0 4px 0; }
.bs-connected-feature-txt { font-family:'Open Sans',sans-serif; font-size:14.5px; color:#4a4a4a; line-height:1.5; margin:0; }
.bs-connected-app-btn { margin-top:10px; background:#ec0000; color:#fff; border:none; border-radius:24px; padding:13px 34px; font-family:'Open Sans',sans-serif; font-size:15px; font-weight:700; cursor:pointer; transition:background .2s ease; }
.bs-connected-app-btn:hover { background:#cc0000; }

/* ----- SECCIÓN Y MUCHO MÁS ----- */
.bs-more-section { width:100%; padding:70px 0 90px 0; background:#f6f0eb; box-sizing:border-box; }
.bs-more-max-aligner { max-width:1100px; margin:0 auto; padding:0 20px; box-sizing:border-box; }
.bs-more-main-title { font-family:'Open Sans',sans-serif; font-size:38px; font-weight:700; color:#1d1d1d; letter-spacing:-1px; margin:0 0 30px 0; }
.bs-more-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.bs-more-card { background:#fff; border-radius:18px; padding:30px 26px; text-decoration:none; display:block; box-shadow:0 4px 18px rgba(0,0,0,0.03); transition:transform .18s ease, box-shadow .18s ease; }
.bs-more-card:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,0.08); }
.bs-more-card-title { font-family:'Open Sans',sans-serif; font-size:19px; font-weight:700; color:#ec0000; margin:0 0 10px 0; }
.bs-more-card-txt { font-family:'Open Sans',sans-serif; font-size:14.5px; color:#4a4a4a; line-height:1.55; margin:0; }

/* ----- BLOQUE LEGAL ----- */
.bs-legal-footnotes-section { width:100%; padding:40px 0 50px 0; background:#ffffff; box-sizing:border-box; }
.bs-legal-footnotes-max-aligner { max-width:1100px; margin:0 auto; padding:0 20px; box-sizing:border-box; }
.bs-legal-footnote { font-family:'Open Sans',sans-serif; font-size:11px; line-height:1.5; color:#8a8a8a; margin:0 0 12px 0; text-align:justify; }
.bs-legal-footnote sup { color:#ec0000; font-weight:700; }
.bs-legal-footnote-note { font-style:italic; border-top:1px solid #eee; padding-top:12px; margin-top:8px; }

@media (max-width: 900px) {
    .bs-mortgage-sim-max-aligner, .bs-connected-app-grid { grid-template-columns: 1fr; gap: 30px; }
    .bs-keys-grid { grid-template-columns: repeat(2, 1fr); }
    .bs-more-grid { grid-template-columns: 1fr; }
    .bs-mortgage-sim-title, .bs-connected-app-main-title { font-size: 32px; }
}
@media (max-width: 560px) { .bs-keys-grid { grid-template-columns: 1fr; } }

/* ----- MENÚ HAMBURGUESA MÓVIL (réplica del original) ----- */
.bs-drawer-tabs-carousel-wrapper { display: flex; align-items: center; gap: 6px; padding: 6px 14px 0 14px; box-sizing: border-box; width: 100%; }
.bs-drawer-tabs-arrow { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: #f1f1f1; color: #8a8a8a; display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; cursor: pointer; user-select: none; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.bs-drawer-tabs-arrow:active { background: #e6e6e6; }
.bs-drawer-tabs-viewport { flex: 1 1 auto; display: flex; gap: 30px; overflow-x: auto; scroll-behavior: smooth; justify-content: flex-start; align-items: center; padding: 6px; scrollbar-width: none; -ms-overflow-style: none; }
.bs-drawer-tabs-viewport::-webkit-scrollbar { display: none; }
.bs-drawer-nav-item { flex: 0 0 auto; font-family: 'Open Sans', sans-serif; font-size: 18px; font-weight: 600; color: #1d1d1d; cursor: pointer; padding: 8px 4px; position: relative; white-space: nowrap; background: none; border: none; }
.bs-drawer-nav-item.bs-drawer-active { color: #ec0000; font-weight: 700; }
.bs-drawer-nav-item.bs-drawer-active::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 2px; width: 22px; height: 3px; background: #ec0000; border-radius: 2px; }
.bs-drawer-tabs-dots { display: flex; flex-wrap: nowrap !important; justify-content: center; gap: 8px; padding: 12px 0 8px 0; }
/* Solo la PRIMERA fila de puntos del drawer es visible; cualquier otra fila o punto inyectado se oculta */
.bs-mobile-drawer-overlay-menu .bs-drawer-tabs-dots:not(:first-of-type) { display: none !important; }
.bs-drawer-tab-dot { width: 7px; height: 7px; border-radius: 50%; background: #d6d6d6; transition: background .2s ease; }
.bs-drawer-tab-dot-active { background: #767676; }
.bs-drawer-section-title { font-family: 'Open Sans', sans-serif; font-size: 26px; font-weight: 700; color: #1d1d1d; padding: 14px 20px 6px 20px; margin: 0; }
.bs-drawer-option-row { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid #eeeeee; cursor: pointer; box-sizing: border-box; font-family: 'Open Sans', sans-serif; font-size: 17px; font-weight: 700; color: #1d1d1d; }
.bs-drawer-option-row:active { background: #fafafa; }
.bs-drawer-option-chevron { color: #ec0000; font-size: 24px; font-weight: 700; line-height: 1; }
.bs-drawer-lang-left { display: flex; align-items: center; gap: 12px; }
.bs-drawer-flag { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: block; flex: 0 0 auto; }
.bs-drawer-gray-embedded-box { background: #f6f6f6; border-radius: 14px; margin: 18px 16px 0 16px; overflow: hidden; padding: 0; }
.bs-drawer-gray-embedded-box .bs-drawer-option-row { border-bottom: 1px solid #ececec; }
.bs-drawer-gray-embedded-box .bs-drawer-option-row:last-child { border-bottom: none; }
.bs-mobile-lang-drawer-list { padding-left: 18px; background: #fcfbfa; }
.bs-mobile-lang-drawer-list .bs-drawer-action-row-btn { font-family: 'Open Sans', sans-serif; font-size: 16px; padding: 14px 20px; cursor: pointer; color: #1d1d1d; display: flex; align-items: center; gap: 12px; }
.bs-mobile-lang-drawer-list .bs-drawer-flag { width: 24px; height: 24px; }
.bs-drawer-btn-login { background: #ec0000 !important; color: #ffffff !important; border-radius: 50px !important; text-align: center; padding: 16px !important; margin: 22px 16px !important; font-weight: 700; font-size: 16px; cursor: pointer; display: flex !important; align-items: center; justify-content: center; font-family: 'Open Sans', sans-serif; }

/* Ocultar la fila de puntos ANTIGUA del carrusel de pestañas del menú (la del JS).
   Así en el menú solo queda mi fila de puntos (.bs-drawer-tabs-dots). */
.bs-tabs-dots-pagination-bar, .bs-tabs-individual-dot { display: none !important; }
.bs-mobile-drawer-overlay-menu .bs-needs-dots-pagination-bar,
.bs-mobile-drawer-overlay-menu .bs-needs-individual-dot { display: none !important; }

/* CABECERA MÓVIL: logo más pequeño + botón a la derecha (junto a la hamburguesa),
   sin tocar la hamburguesa, para que haya sitio y el botón NO pise el logo. */
@media (max-width: 650px) {
  /* Todos los elementos de la cabecera centrados verticalmente (logo, botón y hamburguesa a la misma altura) */
  .bs-header-inside-box { align-items: center !important; }
  .bs-brand-logo-area { margin-top: 0 !important; margin-bottom: 0 !important; align-self: center !important; }
  .bs-brand-logo-area img { height: 28px !important; width: auto !important; }
  .bs-header-inside-box .bs-mobile-cta-only {
    position: absolute !important; left: auto !important; right: 60px !important; top: 50% !important;
    transform: translateY(-50%) !important; order: 0 !important;
    padding: 9px 14px !important; font-size: 12.5px !important;
  }
}

/* === BLINDAJE FINAL (alta especificidad): el botón Hazte Cliente móvil NUNCA pisa el logo === */
@media (max-width: 650px) {
  .bs-global-header .bs-brand-logo-area img { height: 26px !important; width: auto !important; max-width: 145px !important; }
  .bs-global-header .bs-header-inside-box .bs-mobile-cta-only {
    position: absolute !important;
    left: auto !important;
    right: 58px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    max-width: 135px !important;
  }
}

/* === Solo UNA fila de puntos en el menú: oculta cualquier fila o punto extra === */
.bs-drawer-tabs-dots ~ .bs-drawer-tabs-dots { display: none !important; }
.bs-drawer-tabs-dots .bs-drawer-tab-dot:nth-child(n+5) { display: none !important; }
.bs-mobile-drawer-overlay-menu .bs-tabs-dots-pagination-bar,
.bs-mobile-drawer-overlay-menu .bs-tabs-individual-dot,
.bs-mobile-drawer-overlay-menu .bs-needs-dots-pagination-bar,
.bs-mobile-drawer-overlay-menu .bs-needs-individual-dot { display: none !important; }
}