:root {
    --color-black-top: #191919;
    --color-text-grey: #666;
    --color-green-falabella: #8CBF68; /* Aproximado para botón simular */
    --color-green-dark: #357a38; /* Botón banner */
    --color-green-login: #8CBF68; 
    --color-bg-light: #f7fcf9; /* Fondo muy claro verdoso/blanco */
    --font-primary: 'Lato', sans-serif;
    --max-width: 1300px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    background-color: #fff;
    color: #333;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 15px;
}

/* Top Header */
.top-header {
    background-color: var(--color-black-top);
    color: #fff;
    font-size: 12px;
    padding: 8px 0;
}

.top-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-links-left a, .top-links-right a {
    color: #fff;
    text-decoration: none;
    margin-right: 15px;
    font-weight: 400;
}

.top-links-left a:hover, .top-links-right a:hover {
    text-decoration: underline;
}

.top-links-right i {
    margin-right: 5px;
}

/* Main Header */
.main-header {
    padding: 20px 0 10px;
    background-color: #fff;
    position: relative;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-img {
    height: 60px; /* Ajustar según el SVG */
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.btn-search {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 8px 15px;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #333;
}

.btn-search i {
    color: var(--color-green-dark);
}

.login-form {
    display: flex;
    gap: 10px;
}

.login-form input {
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 140px;
    font-family: inherit;
}

.btn-login {
    background-color: var(--color-green-login);
    border: none;
    color: #fff;
    width: 40px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-sub-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;
}

.login-help a {
    color: var(--color-green-dark);
    font-size: 12px;
    text-decoration: none;
    font-weight: 700;
}

/* Mobile Header Elements (Hidden by default) */
.header-left-mobile, .header-actions-mobile, .mobile-login-panel {
    display: none;
}

.btn-hamburger {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 5px;
}

.btn-search-mobile {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    font-size: 18px;
    margin-right: 10px;
    cursor: pointer;
}

.btn-myaccount {
    background-color: #3f912e; /* Verde más oscuro como en la imagen móvil */
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}

/* Mobile Login Panel Styles */
.mobile-login-panel {
    background-color: #fff;
    padding: 20px;
    border-top: 1px solid #eee;
    width: 100%;
    /* Position could be absolute if we want overlay, but inline block is safer for now unless overlay requested */
}

.mobile-login-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.btn-close-login {
    background: none;
    border: none;
    color: #666;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.mobile-login-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mobile-input {
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    width: 100%;
    font-family: inherit;
    color: #666;
}

.btn-login-mobile {
    background-color: #8CBF68;
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    cursor: pointer;
    width: 100%;
}

.mobile-login-help {
    text-align: right;
    margin-top: 10px;
}

.mobile-login-help a {
    color: #3f912e;
    text-decoration: none;
    font-size: 14px;
}

/* Navigation */
.main-nav {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 15px 0;
    margin-top: 15px;
}

.main-nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    font-size: 13px;
    color: #666;
}

.main-nav li a {
    text-decoration: none;
    color: #666;
    padding: 0 10px;
    font-weight: 400;
    text-transform: uppercase;
}

.main-nav .separator {
    color: #ddd;
    font-size: 10px;
}

/* Banner Slider */
.banner-section {
    padding: 20px 0;
    position: relative;
    background-color: #f8fbf9; /* Slight greenish tint bg */
}

.banner-container-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-card {
    display: flex;
    background-color: #1a1a1a; /* Dark background for left side */
    border-radius: 15px;
    overflow: hidden;
    width: 100%;
    max-width: 1100px;
    min-height: 400px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.banner-content-left {
    width: 45%;
    padding: 60px 40px;
    color: #fff;
    background: linear-gradient(135deg, #1f2e22 0%, #111 100%); /* Aproximación */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.banner-content-left h1 {
    font-size: 32px;
    margin-bottom: 20px;
    line-height: 1.2;
    font-weight: 400;
}

.banner-content-left p {
    font-size: 16px;
    margin-bottom: 40px;
    font-weight: 300;
}

.btn-banner {
    background-color: var(--color-green-dark); /* Color más oscuro para el botón del banner */
    color: #fff;
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 700;
    font-size: 14px;
    transition: background-color 0.3s;
}

.btn-banner:hover {
    background-color: #2a5a2d;
}

.banner-image-right {
    width: 55%;
    background-image: url('../images/Web_Remesas.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.slider-arrow {
    background: #fff;
    border: 1px solid #eee;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    color: #666;
    z-index: 10;
}

.slider-arrow.prev {
    left: 20px;
}

.slider-arrow.next {
    right: 20px;
}

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.dot {
    width: 8px;
    height: 8px;
    background-color: #ddd;
    border-radius: 50%;
    cursor: pointer;
}

.dot.active {
    background-color: #a4c83b; /* Verde lima */
    width: 25px;
    border-radius: 4px;
}

/* Bottom Section */
.bottom-cta {
    background-color: #eaf4e6; /* Fondo verdoso muy claro */
    padding: 40px 0;
    margin-top: 20px;
}

.cta-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 900px;
}

.cta-text h2 {
    color: #444;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
}

.cta-form {
    display: flex;
    gap: 20px;
    align-items: center;
}

.cta-form input {
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 250px;
    font-family: inherit;
}

.btn-simulate {
    background-color: #8cb868; /* Verde mate */
    color: #fff;
    border: none;
    padding: 12px 40px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
}

/* Floating Contact */
.floating-contact {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
}

.floating-contact button {
    background-color: #555;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
}

.floating-contact i {
    font-size: 20px;
}

/* =========================================
   MEDIA QUERIES (RESPONSIVE)
   ========================================= */

@media (max-width: 768px) {
    /* Hide Desktop Elements */
    .top-header, 
    .main-nav, 
    .desktop-only,
    .slider-arrow {
        display: none !important;
    }

    /* Show Mobile Elements */
    .header-left-mobile, .header-actions-mobile {
        display: flex;
        align-items: center;
    }
    
    .header-actions-mobile {
        gap: 10px;
    }

    /* Header Layout */
    .header-container {
        padding: 0 10px;
        height: 70px; /* Aumentar altura un poco */
        justify-content: flex-start; /* Alinear todo al inicio (izq) */
        position: relative;
    }

    .header-left-mobile {
        margin-right: 10px; /* Reducir espacio entre hamburguesa y logo */
    }

    /* Logo - Full width */
    .logo-wrapper {
        width: auto; /* Dejar que ocupe lo que necesite */
        max-width: 200px; /* Limitar si es muy grande */
        height: 60px;
        position: relative;
        /* margin-right: auto; Ya no necesario si usamos flex-start pero útil para empujar el resto */
        flex-grow: 1; /* Ocupar espacio disponible para empujar botones derecha */
        display: flex;
        align-items: center;
    }

    .logo-img {
        height: 50px; /* Un poco más pequeño para mobile */
        position: relative; /* Ya no absolute */
        left: 0; 
    }
    
    .header-actions-mobile {
        margin-left: auto; /* Empujar a la derecha */
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* Mobile Login Panel Styles Override for Default Visibility */
    .mobile-login-panel {
        display: block; /* Visible por defecto */
        padding: 20px;
        border-top: 1px solid #eee;
        width: 100%;
        background-color: #fff;
    }
    
    .btn-login-mobile.active {
        background-color: #4a8a2a; /* Verde más fuerte */
    }
    .banner-section {
        padding: 0;
        background: none;
    }
    
    .banner-container-wrapper {
        padding: 0 15px;
    }

    .banner-card {
        flex-direction: column-reverse; /* Imagen arriba, texto abajo */
        height: auto;
        border-radius: 20px;
        margin-bottom: 20px;
        position: relative;
    }

    .banner-image-right {
        width: 100%;
        height: 250px; /* Altura fija para la imagen */
    }

    .banner-content-left {
        width: 100%;
        padding: 30px 20px;
        text-align: left;
        background: #4a4a4a; /* Fondo gris oscuro como en la imagen móvil */
    }

    .banner-content-left h1 {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .banner-content-left p {
        font-size: 14px;
        margin-bottom: 20px;
    }

    /* Bottom Section Mobile */
    .bottom-cta {
        padding: 30px 0;
    }
    
    .cta-container {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .cta-form {
        flex-direction: column;
        width: 100%;
    }
    
    .cta-form input {
        width: 100%;
    }
    
    .btn-simulate {
        width: 100%;
    }
}

/* =========================================
   OTP PAGE STYLES
   ========================================= */
.otp-page {
    background-color: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.otp-header {
    border-bottom: 1px solid #eee;
    padding: 15px 0;
}

.otp-content {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center; /* Center vertically */
    padding: 40px 20px;
}

.otp-card {
    width: 100%;
    max-width: 600px;
    text-align: center;
}

.otp-card h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #333;
    text-align: left; /* Image shows left aligned or center? Image shows centered title actually? No, "Aumento de cupo" looks left aligned in my mind but usually centered. Let's look at image again. Image description says "Aumento de cupo" then text. Usually these are left aligned in BF design. Wait, image shows:
    "Aumento de cupo"
    "Enviamos un mensaje..."
    [Inputs]
    "No recibí..."
    [Button]
    
    Actually in the provided screenshot, the text looks left aligned.
    Let's align left for now, but centered inputs looks better? 
    Wait, the screenshot shows content centered?
    Let's assume centered for inputs and button, but text might be left or center.
    The screenshot provided earlier:
    Title: "Aumento de cupo" (Left aligned relative to content block)
    Text: Left aligned.
    Inputs: Centered or Left? They look centered relative to the text block or filling width.
    Button: Centered.
    
    Let's stick to a safe centered layout for the card, or left aligned text within a centered card.
    Let's go with left aligned text, centered inputs.
    */
    text-align: left;
}

.otp-message {
    text-align: left;
    color: #333;
    font-size: 16px;
    margin-bottom: 30px;
    line-height: 1.5;
}

.otp-inputs-container {
    display: flex;
    justify-content: space-between; /* Or gap */
    gap: 10px;
    margin-bottom: 20px;
    max-width: 400px; /* Limit width of inputs area */
    margin-left: 0; /* Align left */
}

.otp-input {
    width: 50px;
    height: 50px;
    border: 1px solid #ccc;
    border-radius: 8px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #333;
    outline: none;
    transition: border-color 0.3s;
}

.otp-input:focus {
    border-color: #8CBF68; /* Falabella Green */
    border-width: 2px;
}

.resend-code {
    display: block;
    text-align: left;
    color: #3f912e; /* Darker green */
    text-decoration: none;
    font-weight: 700;
    margin-bottom: 40px;
    font-size: 14px;
}

.btn-activate {
    width: 100%;
    max-width: 400px; /* Match inputs width approx */
    padding: 15px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    background-color: #ced4da; /* Disabled grey */
    color: #fff; /* Usually white text */
    text-align: center;
    display: block;
    margin-top: 20px;
    /* If we want it left aligned to match inputs */
    margin-left: 0;
}

.btn-activate:enabled {
    background-color: #ced4da; /* Wait, if enabled it should be green? But user said "grayed out initially". */
}

.btn-activate.active {
    background-color: #4a8a2a; /* Active Green */
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.loading-content {
    text-align: center;
    padding: 20px;
    max-width: 80%;
}

.loading-content p {
    font-size: 18px;
    color: #333;
    margin-top: 20px;
    font-weight: 700;
}

.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #8CBF68; /* Falabella Green */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Adjust layout for mobile in OTP page */
@media (max-width: 768px) {
    /* Ensure header actions in OTP page are aligned to the right */
    .otp-header .header-container {
        justify-content: space-between; /* Use space-between to push logo left and button right */
    }

    .otp-content {
        align-items: flex-start; /* Top align on mobile */
        padding-top: 40px;
    }
    
    .otp-inputs-container {
        justify-content: space-between;
        max-width: 100%;
        gap: 5px;
    }
    
    .otp-input {
        width: 15%; /* Responsive width */
        height: 50px;
    }
    
    .btn-activate {
        max-width: 100%;
    }
}