/* =====================================================
   WESTERN UNION - COMPLETE STYLES
   ===================================================== */

/* ==================== RESET & VARIABLES ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --wu-yellow: #FFCC00;
    --wu-black: #000000;
    --wu-dark: #1a1a1a;
    --wu-gray: #333333;
    --wu-gray-medium: #666666;
    --wu-gray-light: #999999;
    --wu-bg-light: #f5f5f5;
    --wu-bg-lighter: #fafafa;
    --wu-white: #ffffff;
    --wu-border: #e0e0e0;
    --wu-green: #00a651;
    --wu-blue: #0066cc;
    --wu-red: #cc0000;
    --font-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --container-width: 1200px;
    --section-padding: 80px 0;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.2);
}

body {
    font-family: var(--font-main);
    font-size: 16px;
    line-height: 1.6;
    color: var(--wu-dark);
    background: var(--wu-white);
}

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

a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; transition: all 0.3s ease; }
img { max-width: 100%; display: block; }

/* ==================== HEADER & NAVIGATION ==================== */
.header {
    background-color: var(--wu-yellow);
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    gap: 2rem;
}

.logo svg {
    width: 200px;
    height: auto;
    flex-shrink: 0;
}

.nav-center { flex: 1; display: flex; justify-content: flex-start; }

.nav-main-btn {
    background: transparent;
    border: none;
    color: var(--wu-black);
    font-size: 16px;
    font-weight: 600;
    padding: 8px 16px;
    text-decoration: none;
    display: inline-block;
    transition: opacity 0.3s;
}
.nav-main-btn:hover { opacity: 0.7; }

.nav-right { display: flex; align-items: center; gap: 1rem; }

.lang-btn {
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: var(--wu-black);
}

.globe-icon { font-size: 18px; }

.hamburger-btn {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
}
.hamburger-btn span {
    width: 25px;
    height: 3px;
    background: var(--wu-black);
    border-radius: 2px;
    transition: all 0.3s ease;
}
.hamburger-btn.active span:nth-child(1) { transform: rotate(45deg) translate(7px, 7px); }
.hamburger-btn.active span:nth-child(2) { opacity: 0; }
.hamburger-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }

.btn-login {
    background: transparent;
    border: 2px solid var(--wu-black);
    padding: 10px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--wu-black);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}
.btn-login:hover { background: var(--wu-black); color: var(--wu-yellow); }

.btn-register {
    background: var(--wu-black);
    border: 2px solid var(--wu-black);
    padding: 10px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--wu-yellow);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}
.btn-register:hover { background: var(--wu-dark); border-color: var(--wu-dark); }

/* ==================== MEGA MENU ==================== */
.mega-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 90%;
    max-width: 400px;
    height: 100vh;
    background: white;
    box-shadow: -4px 0 24px rgba(0,0,0,0.2);
    z-index: 10000;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.mega-menu.show { right: 0; }
.mega-menu-content { padding: 20px 0 40px; min-height: 100vh; }

.menu-link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    color: var(--wu-black);
    font-size: 16px;
    text-decoration: none;
    transition: background 0.2s;
    border-left: 4px solid transparent;
    cursor: pointer;
    position: relative;
    z-index: 10001;
}
.menu-link:hover { background: var(--wu-bg-light); border-left-color: var(--wu-yellow); }
.menu-link:active { background: #e0e0e0; }

.menu-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.menu-icon svg { width: 24px; height: 24px; stroke: var(--wu-black); pointer-events: none; }

.menu-separator { height: 1px; background: var(--wu-border); margin: 12px 24px; }
.menu-section-title { font-weight: 700; padding-left: 64px; color: var(--wu-gray-medium); pointer-events: none; }

.mega-menu::-webkit-scrollbar { width: 8px; }
.mega-menu::-webkit-scrollbar-track { background: #f1f1f1; }
.mega-menu::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; }
.mega-menu::-webkit-scrollbar-thumb:hover { background: #555; }

/* ==================== LANGUAGE DROPDOWN ==================== */
.language-dropdown {
    position: absolute;
    top: 70px;
    right: 280px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    min-width: 200px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    z-index: 10001;
}
.language-dropdown.show { max-height: 300px; }
.lang-dropdown-content { padding: 8px 0; }
.lang-header { padding: 12px 16px; color: var(--wu-gray-medium); font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--wu-border); }
.lang-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; color: var(--wu-black); font-size: 15px; text-decoration: none; transition: background 0.2s; }
.lang-item:hover { background: var(--wu-bg-light); }
.lang-item.active { background: rgba(255,204,0,0.1); font-weight: 600; }
.lang-item .check { color: var(--wu-green); font-size: 18px; }

.dropdown-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 9999; display: none; }
.dropdown-overlay.show { display: block; }
.chevron { width: 12px; height: 12px; }

/* ==================== HERO SECTION ==================== */
.hero { background: var(--wu-yellow); padding: 60px 0 80px; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.hero-title { font-size: 48px; font-weight: 700; line-height: 1.1; color: var(--wu-black); margin-bottom: 24px; }
.hero-promo { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 32px; }
.bulb-icon { font-size: 24px; flex-shrink: 0; }
.hero-promo p { font-size: 16px; line-height: 1.5; color: var(--wu-black); }
.trustpilot { display: flex; gap: 16px; align-items: center; }
.trustpilot-stars { display: flex; align-items: center; gap: 4px; }
.star { color: #00b67a; font-size: 20px; }
.rating-num { font-weight: 700; margin-left: 8px; }
.trustpilot-text { display: flex; flex-direction: column; font-size: 14px; }
.trustpilot-text strong { font-weight: 700; }
.trustpilot-text span { color: var(--wu-gray-medium); }

/* ==================== CALCULATOR ==================== */
.calculator { background: var(--wu-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.promo-badge { background: #e8f5e9; padding: 16px 20px; display: flex; align-items: center; gap: 12px; }
.gift-icon { font-size: 24px; }
.promo-badge p { font-size: 14px; line-height: 1.4; margin: 0; }
.calc-field { padding: 20px 24px; border-bottom: 1px solid var(--wu-border); }
.calc-field:last-of-type { border-bottom: none; }
.calc-field label { display: block; font-size: 13px; color: var(--wu-gray-medium); margin-bottom: 8px; font-weight: 600; }
.input-group { display: flex; gap: 12px; }
.input-group input { flex: 1; padding: 14px 16px; border: 2px solid var(--wu-border); border-radius: var(--radius-md); font-size: 20px; font-weight: 600; color: var(--wu-black); }
.input-group input[type="text"], .input-group input[type="tel"] { font-size: 15px; font-weight: 400; }
.input-group input:focus { outline: none; border-color: var(--wu-black); }
.currency-select { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border: 2px solid var(--wu-border); border-radius: var(--radius-md); background: var(--wu-white); cursor: pointer; min-width: 120px; }
.currency-select:hover { border-color: var(--wu-black); }
.flag-icon { width: 24px; height: 16px; border-radius: 2px; }
.currency-select span { font-size: 16px; font-weight: 600; }
.calc-details { padding: 20px 24px; background: var(--wu-bg-lighter); }
.detail-row { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 14px; }
.detail-row:last-child { margin-bottom: 0; }
.detail-row span:first-child { color: var(--wu-gray-medium); }
.detail-value { font-weight: 600; color: var(--wu-black); }
.detail-value del { color: var(--wu-gray-light); margin-right: 8px; }
.discount-badge { background: var(--wu-green); color: var(--wu-white); padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 700; margin-left: 8px; }
.calc-total { display: flex; justify-content: space-between; padding: 20px 24px; border-top: 2px solid var(--wu-border); border-bottom: 2px solid var(--wu-border); font-size: 16px; font-weight: 700; }
.total-amount { color: var(--wu-black); }
.btn-cta { width: calc(100% - 48px); background: var(--wu-black); color: var(--wu-yellow); padding: 16px 24px; border-radius: var(--radius-md); font-size: 16px; font-weight: 700; margin: 24px 24px 20px; display: block; }
.btn-cta:hover { background: var(--wu-gray); }
.disclaimer { padding: 0 24px 24px; font-size: 11px; line-height: 1.5; color: var(--wu-gray-medium); }

/* ==================== FRAUD ALERT ==================== */
.fraud-alert { background: var(--wu-yellow); padding: 12px 0; text-align: center; border-top: 2px solid rgba(0,0,0,0.1); }
.fraud-alert .container { display: flex; align-items: center; justify-content: center; gap: 8px; }
.fraud-alert a { color: var(--wu-black); font-size: 14px; font-weight: 600; text-decoration: underline; }
.shield-icon { margin-right: 8px; }

/* ==================== TRUST SECTION ==================== */
.trust-section { background: var(--wu-white); padding: 40px 0; border-bottom: 1px solid var(--wu-border); }
.trust-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.trust-item { display: flex; align-items: center; gap: 16px; }
.trust-item .icon { font-size: 32px; }
.trust-item p { font-size: 14px; line-height: 1.4; margin: 0; }

/* ==================== PREPAID SECTION ==================== */
.prepaid-section { background: var(--wu-black); padding: 40px 0; }
.prepaid-banner { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.prepaid-content { display: flex; gap: 20px; color: var(--wu-yellow); flex: 1; }
.card-icon { font-size: 40px; flex-shrink: 0; }
.prepaid-content h2 { font-size: 24px; font-weight: 700; margin-bottom: 12px; }
.prepaid-content p { font-size: 14px; line-height: 1.5; }
.btn-outline { background: transparent; border: 2px solid var(--wu-yellow); color: var(--wu-yellow); padding: 12px 32px; border-radius: var(--radius-lg); font-size: 15px; font-weight: 700; white-space: nowrap; }
.btn-outline:hover { background: var(--wu-yellow); color: var(--wu-black); }

/* ==================== METHODS SECTION ==================== */
.methods-section { padding: var(--section-padding); background: var(--wu-white); }
.section-title { font-size: 36px; font-weight: 700; text-align: center; margin-bottom: 40px; line-height: 1.3; }
.tabs { display: flex; justify-content: center; gap: 16px; margin-bottom: 60px; }
.tab { background: transparent; border: 2px solid var(--wu-border); color: var(--wu-gray-medium); padding: 12px 32px; border-radius: var(--radius-lg); font-size: 15px; font-weight: 600; }
.tab.active { background: var(--wu-black); border-color: var(--wu-black); color: var(--wu-white); }
.tab:hover { border-color: var(--wu-black); }
.tab-content { display: none; }
.tab-content.active { display: block; }
.methods-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.method-card { background: var(--wu-white); padding: 32px 24px; border-radius: var(--radius-lg); text-align: center; }
.method-icon { margin-bottom: 24px; }
.method-icon svg { margin: 0 auto; }
.method-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 16px; }
.method-card p { font-size: 15px; line-height: 1.5; color: var(--wu-gray-medium); margin-bottom: 20px; }
.link-arrow { color: var(--wu-black); font-size: 15px; font-weight: 600; text-decoration: underline; }
.link-arrow:hover { opacity: 0.7; }

/* ==================== REGISTER SECTION ==================== */
.register-section { background: var(--wu-yellow); padding: var(--section-padding); }
.register-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.register-item h3 { font-size: 32px; font-weight: 700; margin-bottom: 24px; }
.register-item h4 { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.register-item p { font-size: 15px; line-height: 1.5; }
.btn-register-big { background: var(--wu-black); color: var(--wu-yellow); padding: 16px 40px; border-radius: var(--radius-lg); font-size: 16px; font-weight: 700; }
.btn-register-big:hover { background: var(--wu-gray); }

/* ==================== QUICK SEND BANNER ==================== */
.quick-send-banner { background: var(--wu-black); color: var(--wu-yellow); padding: 60px 0; text-align: center; }
.banner-content { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 16px; }
.clock-icon { font-size: 48px; }
.quick-send-banner h2 { font-size: 32px; font-weight: 700; }
.quick-send-banner p { font-size: 16px; max-width: 800px; margin: 0 auto; }

/* ==================== WHY SECTION ==================== */
.why-section { padding: var(--section-padding); background: var(--wu-white); }
.why-grid { display: grid; gap: 40px; max-width: 900px; margin: 0 auto; }
.why-item { display: flex; gap: 20px; }
.check-icon { width: 32px; height: 32px; background: var(--wu-green); color: var(--wu-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; flex-shrink: 0; }
.why-item h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.why-item p { font-size: 15px; line-height: 1.5; color: var(--wu-gray-medium); }

/* ==================== REFER SECTION ==================== */
.refer-section { background: var(--wu-black); padding: 60px 0; }
.refer-banner { text-align: center; color: var(--wu-yellow); }
.refer-banner h2 { font-size: 32px; font-weight: 700; margin-bottom: 16px; }
.refer-banner p { font-size: 16px; margin-bottom: 24px; }
.btn-outline-white { background: transparent; border: 2px solid var(--wu-yellow); color: var(--wu-yellow); padding: 14px 40px; border-radius: var(--radius-lg); font-size: 16px; font-weight: 700; }
.btn-outline-white:hover { background: var(--wu-yellow); color: var(--wu-black); }

/* ==================== REWARDS SECTION ==================== */
.rewards-section { padding: var(--section-padding); background: var(--wu-white); }
.rewards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.rewards-left h2 { font-size: 36px; font-weight: 700; margin-bottom: 32px; line-height: 1.2; }
.btn-rewards { background: var(--wu-yellow); color: var(--wu-black); padding: 16px 32px; border-radius: var(--radius-lg); font-size: 16px; font-weight: 700; }
.btn-rewards:hover { background: #e6b800; }
.reward-item { margin-bottom: 32px; }
.reward-item h4 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.reward-item p { font-size: 15px; line-height: 1.5; color: var(--wu-gray-medium); }

/* ==================== OFFERS SECTION ==================== */
.offers-section { padding: var(--section-padding); background: var(--wu-bg-light); }
.offers-section h2 { font-size: 32px; font-weight: 700; text-align: center; margin-bottom: 16px; }
.offers-subtitle { text-align: center; max-width: 900px; margin: 0 auto 40px; font-size: 15px; line-height: 1.6; color: var(--wu-gray-medium); }
.offers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 40px; }
.offer-card { background: var(--wu-white); padding: 24px; border-radius: var(--radius-lg); text-align: center; }
.offer-logo { width: 80px; height: 80px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 700; color: var(--wu-white); }
.offer-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.offer-card p { font-size: 14px; color: var(--wu-gray-medium); }
.offers-section .btn-outline { display: block; margin: 0 auto; border-color: var(--wu-black); color: var(--wu-black); }
.offers-section .btn-outline:hover { background: var(--wu-black); color: var(--wu-white); }

/* ==================== BANK SECTION ==================== */
.bank-section { padding: var(--section-padding); background: var(--wu-white); }
.bank-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.bank-image img { width: 100%; border-radius: var(--radius-lg); }
.bank-content h2 { font-size: 32px; font-weight: 700; margin-bottom: 20px; }
.bank-content p { font-size: 16px; line-height: 1.6; color: var(--wu-gray-medium); margin-bottom: 24px; }

/* ==================== APP SECTION ==================== */
.app-section { background: var(--wu-yellow); padding: var(--section-padding); }
.app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.app-content h2 { font-size: 36px; font-weight: 700; margin-bottom: 32px; line-height: 1.2; }
.app-features { list-style: none; margin-bottom: 32px; }
.app-features li { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 16px; }
.arrow-icon, .timer-icon, .repeat-icon { font-size: 20px; }
.btn-download { background: var(--wu-black); color: var(--wu-yellow); padding: 16px 40px; border-radius: var(--radius-lg); font-size: 16px; font-weight: 700; margin-bottom: 24px; display: inline-block; }
.btn-download:hover { background: var(--wu-gray); }
.app-stores { display: flex; gap: 24px; margin-bottom: 12px; }
.store-badge { display: flex; flex-direction: column; gap: 8px; }
.rating { font-size: 14px; font-weight: 600; }
.rating-note { font-size: 12px; color: var(--wu-gray-medium); }
.phone-mockup { font-size: 200px; text-align: center; }

/* ==================== TRUSTPILOT CTA ==================== */
.trustpilot-cta { background: var(--wu-white); padding: 60px 0; text-align: center; }
.trustpilot-cta h2 { font-size: 32px; font-weight: 700; margin-bottom: 16px; }
.trustpilot-cta p { font-size: 16px; color: var(--wu-gray-medium); margin-bottom: 24px; }
.btn-yellow { background: var(--wu-yellow); color: var(--wu-black); padding: 14px 40px; border-radius: var(--radius-lg); font-size: 16px; font-weight: 700; }
.btn-yellow:hover { background: #e6b800; }

/* ==================== FOOTER ==================== */
.footer { background: var(--wu-black); color: var(--wu-white); padding: 60px 0 30px; }
.legal-text { margin-bottom: 40px; font-size: 11px; line-height: 1.6; color: var(--wu-gray-light); }
.legal-text a { color: var(--wu-yellow); text-decoration: underline; }
.footer-section h3 { font-size: 24px; margin-bottom: 40px; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-bottom: 60px; }
.footer-col h4 { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { font-size: 14px; color: rgba(255,255,255,0.8); transition: color 0.3s; }
.footer-col a:hover { color: var(--wu-yellow); }
.destinations-section { margin: 60px 0; }
.destinations-section h3 { font-size: 28px; font-weight: 700; margin-bottom: 16px; }
.destinations-section p { font-size: 15px; color: rgba(255,255,255,0.7); }
.destinations-section h4 { font-size: 14px; font-weight: 700; margin: 24px 0 16px; letter-spacing: 1px; }
.location-selector { margin: 24px 0; }
.location-btn { background: var(--wu-gray); border: 1px solid var(--wu-border); padding: 12px 20px; border-radius: var(--radius-md); display: flex; align-items: center; gap: 12px; color: var(--wu-white); font-size: 15px; min-width: 250px; }
.location-btn .flag { width: 24px; height: 16px; border-radius: 2px; }
.popular-destinations { display: flex; gap: 16px; flex-wrap: wrap; }
.dest-btn { background: var(--wu-gray); border: 1px solid rgba(255,255,255,0.2); padding: 10px 20px; border-radius: var(--radius-lg); display: flex; align-items: center; gap: 10px; color: var(--wu-white); font-size: 14px; transition: background 0.3s; }
.dest-btn:hover { background: var(--wu-dark); }
.dest-btn .flag { width: 24px; height: 16px; border-radius: 2px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 40px; }
.footer-links-bottom { display: flex; gap: 24px; margin-bottom: 24px; font-size: 14px; flex-wrap: wrap; }
.footer-links-bottom a { color: var(--wu-yellow); text-decoration: underline; }
.social-links h4 { font-size: 12px; font-weight: 700; letter-spacing: 1px; margin-bottom: 12px; margin-top: 24px; }
.social-icons { display: flex; gap: 16px; }
.social-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; transition: opacity 0.3s; }
.social-icon:hover { opacity: 0.7; }
.facebook { background: #1877f2; }
.youtube { background: #ff0000; }
.instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.twitter { background: #1da1f2; }
.footer-logo { margin: 40px 0; }
.footer-legal { font-size: 11px; line-height: 1.6; color: var(--wu-gray-light); }
.footer-legal p { margin-bottom: 12px; }

/* ==================== AUTH PAGES (LOGIN & REGISTER) ==================== */
.auth-section { min-height: calc(100vh - 200px); padding: 60px 0; background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%); }
.auth-container { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; max-width: 1200px; margin: 0 auto; }
.auth-benefits { padding: 40px 0; }
.auth-benefits h2 { font-size: 42px; font-weight: 700; color: var(--wu-black); margin-bottom: 16px; line-height: 1.2; }
.auth-subtitle { font-size: 18px; color: var(--wu-gray-medium); margin-bottom: 48px; line-height: 1.6; }
.benefits-list { display: flex; flex-direction: column; gap: 32px; margin-bottom: 48px; }
.benefit-item-auth { display: flex; gap: 20px; align-items: flex-start; }
.benefit-icon-auth { width: 56px; height: 56px; background: var(--wu-yellow); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; }
.benefit-item-auth h4 { font-size: 18px; font-weight: 700; color: var(--wu-black); margin-bottom: 6px; }
.benefit-item-auth p { font-size: 15px; color: var(--wu-gray-medium); line-height: 1.5; }
.trust-indicators { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 32px; background: var(--wu-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.trust-item-auth { text-align: center; }
.trust-item-auth strong { display: block; font-size: 24px; font-weight: 700; color: var(--wu-black); margin-bottom: 4px; }
.trust-item-auth span { font-size: 13px; color: var(--wu-gray-medium); }
.auth-form-container { display: flex; justify-content: center; }
.auth-form-box { width: 100%; max-width: 500px; background: var(--wu-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 48px; }
.auth-form-box h1 { font-size: 32px; font-weight: 700; color: var(--wu-black); margin-bottom: 8px; }
.form-subtitle { font-size: 15px; color: var(--wu-gray-medium); margin-bottom: 32px; }
.auth-form { margin-bottom: 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 24px; }
.form-group label { display: block; font-size: 14px; font-weight: 600; color: var(--wu-black); margin-bottom: 8px; }
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group select { width: 100%; padding: 14px 16px; border: 2px solid var(--wu-border); border-radius: var(--radius-md); font-size: 15px; color: var(--wu-black); transition: border-color 0.3s ease; font-family: var(--font-main); background: var(--wu-white); }
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--wu-black); }
.form-group input::placeholder { color: var(--wu-gray-light); }
.password-input-wrapper { position: relative; display: flex; align-items: center; }
.password-input-wrapper input { flex: 1; padding-right: 50px; }
.toggle-password { position: absolute; right: 12px; background: transparent; border: none; cursor: pointer; padding: 8px; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.toggle-password:hover { opacity: 0.7; }
.phone-input-group { display: flex; gap: 12px; }
.country-code { padding: 14px 12px; border: 2px solid var(--wu-border); border-radius: var(--radius-md); font-size: 15px; color: var(--wu-black); background: var(--wu-white); cursor: pointer; min-width: 100px; }
.country-code:focus { outline: none; border-color: var(--wu-black); }
.phone-input-group input { flex: 1; }
.form-hint { display: block; font-size: 12px; color: var(--wu-gray-medium); margin-top: 6px; }
.form-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; color: var(--wu-gray-medium); }
.checkbox-label input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--wu-black); }
.checkbox-label span { line-height: 1.4; }
.checkbox-group { margin-bottom: 20px; }
.checkbox-group .checkbox-label { align-items: flex-start; }
.forgot-link { font-size: 14px; color: var(--wu-black); font-weight: 600; text-decoration: none; }
.forgot-link:hover { text-decoration: underline; }
.btn-full-width { width: 100%; margin-top: 8px; }
.divider { position: relative; text-align: center; margin: 32px 0; }
.divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--wu-border); }
.divider span { position: relative; background: var(--wu-white); padding: 0 16px; font-size: 13px; color: var(--wu-gray-medium); }
.social-login-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.social-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 20px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; }
.google-btn { background: var(--wu-white); border: 2px solid var(--wu-border); color: var(--wu-gray); }
.google-btn:hover { border-color: var(--wu-black); background: var(--wu-bg-light); }
.facebook-btn { background: #1877f2; border: 2px solid #1877f2; color: var(--wu-white); }
.facebook-btn:hover { background: #166fe5; border-color: #166fe5; }
.auth-footer { text-align: center; padding: 20px 0; border-top: 1px solid var(--wu-border); margin-top: 24px; }
.auth-footer p { font-size: 14px; color: var(--wu-gray-medium); }
.link-primary { color: var(--wu-black); font-weight: 600; text-decoration: none; }
.link-primary:hover { text-decoration: underline; }
.security-badge { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: var(--wu-bg-light); border-radius: var(--radius-md); font-size: 13px; color: var(--wu-gray-medium); margin-top: 20px; }
.lock-icon { font-size: 16px; }

/* ==================== RASTREAR TRANSFERENCIA ==================== */
.track-section { padding: var(--section-padding); background: var(--wu-bg-light); min-height: 60vh; }
.track-container { max-width: 700px; margin: 0 auto; }
.track-container h1 { font-size: 36px; font-weight: 700; margin-bottom: 12px; }
.track-container .page-subtitle { font-size: 16px; color: var(--wu-gray-medium); margin-bottom: 40px; }
.track-form-box { background: var(--wu-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: 40px; margin-bottom: 32px; }
.track-form-box h2 { font-size: 22px; font-weight: 700; margin-bottom: 24px; }
.track-input-row { display: flex; gap: 16px; }
.track-input-row input { flex: 1; padding: 14px 16px; border: 2px solid var(--wu-border); border-radius: var(--radius-md); font-size: 16px; font-family: var(--font-main); color: var(--wu-black); }
.track-input-row input:focus { outline: none; border-color: var(--wu-black); }
.btn-track { background: var(--wu-black); color: var(--wu-yellow); padding: 14px 32px; border-radius: var(--radius-md); font-size: 16px; font-weight: 700; white-space: nowrap; }
.btn-track:hover { background: var(--wu-gray); }
.track-info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.track-info-card { background: var(--wu-white); border-radius: var(--radius-lg); padding: 24px; text-align: center; box-shadow: var(--shadow-sm); }
.track-info-card .track-icon { font-size: 40px; margin-bottom: 12px; }
.track-info-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.track-info-card p { font-size: 14px; color: var(--wu-gray-medium); line-height: 1.5; }

/* Status Result Card */
.track-result { background: var(--wu-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: 40px; margin-bottom: 32px; display: none; }
.track-result.show { display: block; }
.track-result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 2px solid var(--wu-border); }
.track-result-title h3 { font-size: 22px; font-weight: 700; }
.track-result-title p { font-size: 14px; color: var(--wu-gray-medium); margin-top: 4px; }
.status-badge { padding: 8px 20px; border-radius: 20px; font-size: 14px; font-weight: 700; }
.status-badge.completado { background: #e8f5e9; color: var(--wu-green); }
.status-badge.en-proceso { background: #fff3e0; color: #f57c00; }
.status-badge.cancelado { background: #ffebee; color: var(--wu-red); }
.track-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 32px; }
.track-detail-item label { font-size: 13px; color: var(--wu-gray-medium); font-weight: 600; display: block; margin-bottom: 4px; }
.track-detail-item span { font-size: 16px; font-weight: 600; color: var(--wu-black); }

/* Timeline */
.track-timeline { margin-top: 32px; }
.track-timeline h4 { font-size: 16px; font-weight: 700; margin-bottom: 20px; }
.timeline { position: relative; padding-left: 32px; }
.timeline::before { content: ''; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; background: var(--wu-border); }
.timeline-item { position: relative; margin-bottom: 24px; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-dot { position: absolute; left: -32px; width: 24px; height: 24px; border-radius: 50%; background: var(--wu-border); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.timeline-dot.active { background: var(--wu-green); color: var(--wu-white); }
.timeline-dot.current { background: var(--wu-yellow); color: var(--wu-black); }
.timeline-item h5 { font-size: 15px; font-weight: 700; color: var(--wu-black); }
.timeline-item p { font-size: 13px; color: var(--wu-gray-medium); margin-top: 2px; }

/* ==================== BUSCAR AGENCIAS ==================== */
.agencies-section { padding: 40px 0; background: var(--wu-white); }
.agencies-layout { display: grid; grid-template-columns: 380px 1fr; gap: 0; min-height: 70vh; border: 1px solid var(--wu-border); border-radius: var(--radius-lg); overflow: hidden; }
.agencies-sidebar { border-right: 1px solid var(--wu-border); display: flex; flex-direction: column; }
.agencies-search-box { padding: 24px; border-bottom: 1px solid var(--wu-border); background: var(--wu-bg-lighter); }
.agencies-search-box h2 { font-size: 20px; font-weight: 700; margin-bottom: 16px; }
.search-input-wrap { position: relative; margin-bottom: 12px; }
.search-input-wrap input { width: 100%; padding: 12px 16px 12px 44px; border: 2px solid var(--wu-border); border-radius: var(--radius-md); font-size: 15px; font-family: var(--font-main); }
.search-input-wrap input:focus { outline: none; border-color: var(--wu-black); }
.search-input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; }
.btn-search-agency { width: 100%; background: var(--wu-black); color: var(--wu-yellow); padding: 12px; border-radius: var(--radius-md); font-size: 15px; font-weight: 700; }
.btn-search-agency:hover { background: var(--wu-gray); }
.agency-filters { padding: 16px 24px; border-bottom: 1px solid var(--wu-border); display: flex; gap: 8px; flex-wrap: wrap; }
.filter-chip { background: var(--wu-bg-light); border: 1px solid var(--wu-border); padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.filter-chip.active, .filter-chip:hover { background: var(--wu-black); color: var(--wu-white); border-color: var(--wu-black); }
.agencies-list { flex: 1; overflow-y: auto; }
.agency-card { padding: 20px 24px; border-bottom: 1px solid var(--wu-border); cursor: pointer; transition: background 0.2s; }
.agency-card:hover, .agency-card.active { background: rgba(255,204,0,0.1); border-left: 4px solid var(--wu-yellow); }
.agency-card h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.agency-card .agency-address { font-size: 13px; color: var(--wu-gray-medium); margin-bottom: 8px; }
.agency-card-meta { display: flex; gap: 12px; align-items: center; }
.agency-distance { font-size: 12px; font-weight: 600; color: var(--wu-blue); }
.agency-hours { font-size: 12px; color: var(--wu-gray-medium); }
.agency-open { color: var(--wu-green); font-weight: 600; }
.agency-closed { color: var(--wu-red); font-weight: 600; }
.agencies-map { background: #e8eaf0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; color: var(--wu-gray-medium); font-size: 16px; }
.agencies-map .map-placeholder-icon { font-size: 80px; }

/* ==================== CALCULO DE PRECIO ==================== */
.price-calc-section { padding: var(--section-padding); background: var(--wu-bg-light); }
.price-calc-container { max-width: 900px; margin: 0 auto; }
.price-calc-container h1 { font-size: 36px; font-weight: 700; margin-bottom: 12px; text-align: center; }
.price-calc-container .page-subtitle { font-size: 16px; color: var(--wu-gray-medium); margin-bottom: 40px; text-align: center; }
.price-calc-box { background: var(--wu-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: 40px; margin-bottom: 40px; }
.price-calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 32px; }
.price-select-group label { display: block; font-size: 14px; font-weight: 600; color: var(--wu-black); margin-bottom: 8px; }
.price-select-group select,
.price-select-group input { width: 100%; padding: 14px 16px; border: 2px solid var(--wu-border); border-radius: var(--radius-md); font-size: 15px; font-family: var(--font-main); color: var(--wu-black); background: var(--wu-white); }
.price-select-group select:focus,
.price-select-group input:focus { outline: none; border-color: var(--wu-black); }
.btn-calculate { width: 100%; background: var(--wu-black); color: var(--wu-yellow); padding: 16px; border-radius: var(--radius-md); font-size: 16px; font-weight: 700; }
.btn-calculate:hover { background: var(--wu-gray); }
.price-results { margin-top: 32px; border-top: 2px solid var(--wu-border); padding-top: 32px; }
.price-results h3 { font-size: 20px; font-weight: 700; margin-bottom: 20px; }
.price-table { width: 100%; border-collapse: collapse; }
.price-table th { background: var(--wu-bg-light); padding: 12px 16px; text-align: left; font-size: 13px; font-weight: 700; color: var(--wu-gray-medium); border-bottom: 2px solid var(--wu-border); }
.price-table td { padding: 16px; border-bottom: 1px solid var(--wu-border); font-size: 15px; }
.price-table tr:hover { background: var(--wu-bg-lighter); }
.price-table tr.best-rate { background: rgba(255,204,0,0.1); }
.price-table .rate-badge { background: var(--wu-yellow); color: var(--wu-black); padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 700; }
.delivery-method-icon { font-size: 20px; margin-right: 8px; }
.price-disclaimer { font-size: 12px; color: var(--wu-gray-medium); margin-top: 16px; line-height: 1.6; }

/* ==================== PERFIL ==================== */
.profile-section { padding: 40px 0 80px; background: var(--wu-bg-light); min-height: 80vh; }
.profile-layout { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; }
.profile-sidebar { background: var(--wu-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; position: sticky; top: 100px; }
.profile-avatar-box { background: var(--wu-yellow); padding: 32px; text-align: center; }
.profile-avatar { width: 96px; height: 96px; background: var(--wu-black); border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 40px; color: var(--wu-yellow); font-weight: 700; }
.profile-name { font-size: 18px; font-weight: 700; color: var(--wu-black); margin-bottom: 4px; }
.profile-email { font-size: 13px; color: var(--wu-gray); }
.profile-nav { padding: 16px 0; }
.profile-nav-link { display: flex; align-items: center; gap: 12px; padding: 14px 24px; font-size: 15px; color: var(--wu-black); text-decoration: none; transition: background 0.2s; border-left: 4px solid transparent; cursor: pointer; }
.profile-nav-link:hover, .profile-nav-link.active { background: var(--wu-bg-light); border-left-color: var(--wu-yellow); font-weight: 600; }
.profile-nav-link .nav-icon { font-size: 20px; }
.profile-content { display: flex; flex-direction: column; gap: 24px; }
.profile-card { background: var(--wu-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 32px; }
.profile-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--wu-border); }
.profile-card-header h2 { font-size: 20px; font-weight: 700; }
.btn-edit-profile { background: transparent; border: 2px solid var(--wu-black); color: var(--wu-black); padding: 8px 20px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; }
.btn-edit-profile:hover { background: var(--wu-black); color: var(--wu-yellow); }
.profile-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.profile-info-item label { display: block; font-size: 13px; color: var(--wu-gray-medium); font-weight: 600; margin-bottom: 4px; }
.profile-info-item span { font-size: 15px; color: var(--wu-black); font-weight: 500; }
.profile-verify-badge { display: inline-flex; align-items: center; gap: 6px; background: #e8f5e9; color: var(--wu-green); padding: 4px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; }
.profile-unverify-badge { display: inline-flex; align-items: center; gap: 6px; background: #fff3e0; color: #f57c00; padding: 4px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; }
.profile-limits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
.limit-item { background: var(--wu-bg-light); border-radius: var(--radius-md); padding: 20px; text-align: center; }
.limit-item .limit-amount { font-size: 24px; font-weight: 700; color: var(--wu-black); margin-bottom: 4px; }
.limit-item .limit-label { font-size: 13px; color: var(--wu-gray-medium); }
.limit-bar { height: 6px; background: var(--wu-border); border-radius: 3px; margin-top: 12px; overflow: hidden; }
.limit-bar-fill { height: 100%; background: var(--wu-yellow); border-radius: 3px; transition: width 0.3s; }

/* ==================== HISTORIAL ==================== */
.history-section { padding: var(--section-padding); background: var(--wu-bg-light); min-height: 80vh; }
.history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.history-header h1 { font-size: 32px; font-weight: 700; }
.btn-export { background: transparent; border: 2px solid var(--wu-black); color: var(--wu-black); padding: 10px 24px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.btn-export:hover { background: var(--wu-black); color: var(--wu-yellow); }
.history-filters { background: var(--wu-white); border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 24px; box-shadow: var(--shadow-sm); display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.history-filter-group { display: flex; flex-direction: column; gap: 6px; }
.history-filter-group label { font-size: 12px; font-weight: 600; color: var(--wu-gray-medium); }
.history-filter-group select,
.history-filter-group input[type="date"] { padding: 8px 12px; border: 1.5px solid var(--wu-border); border-radius: var(--radius-md); font-size: 14px; font-family: var(--font-main); color: var(--wu-black); background: var(--wu-white); min-width: 150px; }
.history-filter-group select:focus,
.history-filter-group input:focus { outline: none; border-color: var(--wu-black); }
.btn-filter-apply { background: var(--wu-black); color: var(--wu-yellow); padding: 10px 24px; border-radius: var(--radius-md); font-size: 14px; font-weight: 700; align-self: flex-end; }
.btn-filter-apply:hover { background: var(--wu-gray); }
.history-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card { background: var(--wu-white); border-radius: var(--radius-lg); padding: 20px 24px; box-shadow: var(--shadow-sm); }
.stat-card .stat-value { font-size: 28px; font-weight: 700; color: var(--wu-black); margin-bottom: 4px; }
.stat-card .stat-label { font-size: 13px; color: var(--wu-gray-medium); }
.stat-card .stat-icon { font-size: 32px; float: right; margin-top: -8px; }
.history-table-wrap { background: var(--wu-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
.history-table { width: 100%; border-collapse: collapse; }
.history-table th { background: var(--wu-bg-lighter); padding: 14px 20px; text-align: left; font-size: 13px; font-weight: 700; color: var(--wu-gray-medium); border-bottom: 2px solid var(--wu-border); white-space: nowrap; }
.history-table td { padding: 16px 20px; border-bottom: 1px solid var(--wu-border); font-size: 14px; vertical-align: middle; }
.history-table tr:hover { background: var(--wu-bg-lighter); }
.history-table tr:last-child td { border-bottom: none; }
.tx-recipient { font-weight: 600; color: var(--wu-black); }
.tx-country { font-size: 12px; color: var(--wu-gray-medium); margin-top: 2px; }
.tx-amount { font-weight: 700; color: var(--wu-black); }
.tx-amount-receive { font-size: 12px; color: var(--wu-gray-medium); }
.tx-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.tx-status.completado { background: #e8f5e9; color: var(--wu-green); }
.tx-status.en-proceso { background: #fff3e0; color: #f57c00; }
.tx-status.cancelado { background: #ffebee; color: var(--wu-red); }
.tx-status.reembolsado { background: #e3f2fd; color: var(--wu-blue); }
.tx-actions { display: flex; gap: 8px; }
.btn-tx-action { background: transparent; border: 1.5px solid var(--wu-border); padding: 6px 12px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; color: var(--wu-black); }
.btn-tx-action:hover { background: var(--wu-bg-light); border-color: var(--wu-black); }
.history-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 24px; border-top: 1px solid var(--wu-border); }
.page-btn { width: 36px; height: 36px; border-radius: var(--radius-md); border: 1.5px solid var(--wu-border); background: var(--wu-white); font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.page-btn.active { background: var(--wu-black); color: var(--wu-yellow); border-color: var(--wu-black); }
.page-btn:hover:not(.active) { border-color: var(--wu-black); background: var(--wu-bg-light); }

/* ==================== REWARDS PAGE ==================== */
.rewards-hero { background: linear-gradient(135deg, var(--wu-black) 0%, #2a2a2a 100%); color: var(--wu-yellow); padding: 60px 0; }
.rewards-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.rewards-hero h1 { font-size: 48px; font-weight: 700; line-height: 1.1; margin-bottom: 20px; }
.rewards-hero p { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.85); margin-bottom: 32px; }
.rewards-card-visual { background: linear-gradient(135deg, var(--wu-yellow) 0%, #e6b800 100%); border-radius: var(--radius-xl); padding: 40px; box-shadow: var(--shadow-lg); }
.rewards-card-visual .points-display { font-size: 64px; font-weight: 700; color: var(--wu-black); line-height: 1; }
.rewards-card-visual .points-label { font-size: 18px; color: var(--wu-black); font-weight: 600; margin-bottom: 24px; }
.rewards-card-visual .card-actions { display: flex; gap: 12px; }
.rewards-page-section { padding: var(--section-padding); }
.rewards-page-section.bg-light { background: var(--wu-bg-light); }
.points-earn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; }
.points-earn-card { background: var(--wu-white); border-radius: var(--radius-lg); padding: 32px; text-align: center; box-shadow: var(--shadow-sm); border: 2px solid transparent; transition: border-color 0.2s; }
.points-earn-card:hover { border-color: var(--wu-yellow); }
.points-earn-card .earn-icon { font-size: 48px; margin-bottom: 16px; }
.points-earn-card .earn-points { font-size: 32px; font-weight: 700; color: var(--wu-black); margin-bottom: 8px; }
.points-earn-card .earn-label { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.points-earn-card .earn-desc { font-size: 14px; color: var(--wu-gray-medium); line-height: 1.5; }
.progress-section { background: var(--wu-white); border-radius: var(--radius-xl); padding: 40px; box-shadow: var(--shadow-sm); max-width: 700px; margin: 0 auto; text-align: center; }
.progress-section h3 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.progress-section p { color: var(--wu-gray-medium); margin-bottom: 32px; }
.progress-bar-wrap { position: relative; height: 16px; background: var(--wu-border); border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--wu-yellow); border-radius: 8px; transition: width 0.5s ease; }
.progress-labels { display: flex; justify-content: space-between; font-size: 13px; color: var(--wu-gray-medium); margin-bottom: 24px; }
.progress-labels strong { color: var(--wu-black); }
.redeem-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
.redeem-option { background: var(--wu-bg-light); border-radius: var(--radius-lg); padding: 20px; text-align: center; border: 2px solid transparent; cursor: pointer; transition: all 0.2s; }
.redeem-option:hover { border-color: var(--wu-yellow); background: rgba(255,204,0,0.1); }
.redeem-option .redeem-icon { font-size: 32px; margin-bottom: 8px; }
.redeem-option span { font-size: 13px; font-weight: 600; display: block; }

/* ==================== REFIERE A UN AMIGO ==================== */
.refer-page-hero { background: var(--wu-yellow); padding: 60px 0; }
.refer-page-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.refer-page-hero h1 { font-size: 48px; font-weight: 700; line-height: 1.1; margin-bottom: 20px; }
.refer-page-hero p { font-size: 18px; line-height: 1.6; margin-bottom: 32px; color: var(--wu-gray); }
.refer-code-box { background: var(--wu-white); border-radius: var(--radius-xl); padding: 40px; box-shadow: var(--shadow-md); }
.refer-code-box h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.refer-code-box p { font-size: 14px; color: var(--wu-gray-medium); margin-bottom: 24px; }
.refer-code-display { display: flex; gap: 12px; margin-bottom: 20px; }
.refer-code-input { flex: 1; padding: 14px 20px; border: 2px dashed var(--wu-yellow); border-radius: var(--radius-md); font-size: 22px; font-weight: 700; color: var(--wu-black); text-align: center; background: rgba(255,204,0,0.05); letter-spacing: 3px; }
.btn-copy-code { background: var(--wu-black); color: var(--wu-yellow); padding: 14px 20px; border-radius: var(--radius-md); font-size: 14px; font-weight: 700; }
.btn-copy-code:hover { background: var(--wu-gray); }
.refer-share-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-share { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; border: none; cursor: pointer; }
.btn-share-wp { background: #25d366; color: var(--wu-white); }
.btn-share-fb { background: #1877f2; color: var(--wu-white); }
.btn-share-email { background: var(--wu-bg-light); color: var(--wu-black); border: 1.5px solid var(--wu-border); }
.refer-steps-section { padding: var(--section-padding); background: var(--wu-white); }
.refer-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }
.refer-step { position: relative; }
.refer-step-num { width: 56px; height: 56px; background: var(--wu-yellow); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; margin: 0 auto 20px; }
.refer-step h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.refer-step p { font-size: 15px; color: var(--wu-gray-medium); line-height: 1.5; }
.refer-rewards-section { padding: var(--section-padding); background: var(--wu-bg-light); }
.refer-rewards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.refer-reward-card { background: var(--wu-white); border-radius: var(--radius-lg); padding: 32px; display: flex; gap: 20px; align-items: flex-start; box-shadow: var(--shadow-sm); }
.refer-reward-icon { font-size: 40px; flex-shrink: 0; }
.refer-reward-card h4 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.refer-reward-card p { font-size: 14px; color: var(--wu-gray-medium); line-height: 1.5; }

/* ==================== TARJETA PREPAGADA ==================== */
.prepaid-page-hero { background: var(--wu-black); color: var(--wu-white); padding: 60px 0; }
.prepaid-page-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.prepaid-page-hero h1 { font-size: 48px; font-weight: 700; line-height: 1.1; margin-bottom: 20px; color: var(--wu-yellow); }
.prepaid-page-hero p { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.85); margin-bottom: 32px; }
.prepaid-card-visual { display: flex; justify-content: center; }
.card-mockup { width: 380px; height: 230px; background: linear-gradient(135deg, #1a1a1a 0%, #3a3a3a 100%); border-radius: 20px; padding: 32px; position: relative; box-shadow: var(--shadow-lg); }
.card-mockup::before { content: ''; position: absolute; top: 0; right: 0; width: 150px; height: 150px; background: rgba(255,204,0,0.15); border-radius: 50%; transform: translate(30px, -30px); }
.card-chip { width: 48px; height: 36px; background: var(--wu-yellow); border-radius: 6px; margin-bottom: 32px; }
.card-number { font-size: 18px; color: rgba(255,255,255,0.7); letter-spacing: 4px; margin-bottom: 24px; font-family: monospace; }
.card-bottom { display: flex; justify-content: space-between; align-items: flex-end; }
.card-name { font-size: 14px; color: rgba(255,255,255,0.8); font-weight: 600; }
.card-brand { font-size: 28px; font-weight: 700; color: var(--wu-yellow); }
.prepaid-benefits-section { padding: var(--section-padding); background: var(--wu-white); }
.prepaid-benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 40px; }
.prepaid-benefit-card { text-align: center; padding: 32px 20px; border-radius: var(--radius-lg); background: var(--wu-bg-light); }
.prepaid-benefit-card .benefit-icon { font-size: 48px; margin-bottom: 16px; }
.prepaid-benefit-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.prepaid-benefit-card p { font-size: 14px; color: var(--wu-gray-medium); line-height: 1.5; }
.prepaid-fees-table { background: var(--wu-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
.fees-table { width: 100%; border-collapse: collapse; }
.fees-table th { background: var(--wu-black); color: var(--wu-yellow); padding: 16px 20px; text-align: left; font-size: 14px; font-weight: 700; }
.fees-table td { padding: 16px 20px; border-bottom: 1px solid var(--wu-border); font-size: 15px; }
.fees-table tr:last-child td { border-bottom: none; }
.fees-table tr:nth-child(even) { background: var(--wu-bg-lighter); }
.fee-free { color: var(--wu-green); font-weight: 700; }

/* ==================== PAGAR FACTURAS ==================== */
.bills-section { padding: var(--section-padding); background: var(--wu-bg-light); }
.bills-container { max-width: 900px; margin: 0 auto; }
.bills-container h1 { font-size: 36px; font-weight: 700; margin-bottom: 12px; }
.bills-container .page-subtitle { font-size: 16px; color: var(--wu-gray-medium); margin-bottom: 40px; }
.bills-categories { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 40px; }
.bill-category-card { background: var(--wu-white); border-radius: var(--radius-lg); padding: 24px 16px; text-align: center; cursor: pointer; border: 2px solid transparent; transition: all 0.2s; box-shadow: var(--shadow-sm); }
.bill-category-card:hover, .bill-category-card.active { border-color: var(--wu-yellow); background: rgba(255,204,0,0.05); }
.bill-category-card .category-icon { font-size: 40px; margin-bottom: 12px; }
.bill-category-card h4 { font-size: 14px; font-weight: 700; color: var(--wu-black); }
.bills-form-box { background: var(--wu-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: 40px; }
.bills-form-box h2 { font-size: 22px; font-weight: 700; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--wu-border); }
.bills-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.bill-form-group label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--wu-black); }
.bill-form-group input,
.bill-form-group select { width: 100%; padding: 12px 16px; border: 2px solid var(--wu-border); border-radius: var(--radius-md); font-size: 15px; font-family: var(--font-main); color: var(--wu-black); background: var(--wu-white); }
.bill-form-group input:focus,
.bill-form-group select:focus { outline: none; border-color: var(--wu-black); }
.bill-summary { background: var(--wu-bg-lighter); border-radius: var(--radius-md); padding: 20px; margin-bottom: 24px; }
.bill-summary-row { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 10px; }
.bill-summary-row:last-child { font-weight: 700; font-size: 16px; border-top: 1px solid var(--wu-border); padding-top: 10px; margin-bottom: 0; }
.btn-pay-bill { width: 100%; background: var(--wu-black); color: var(--wu-yellow); padding: 16px; border-radius: var(--radius-md); font-size: 16px; font-weight: 700; }
.btn-pay-bill:hover { background: var(--wu-gray); }

/* ==================== AYUDA / FAQ ==================== */
.help-section { padding: var(--section-padding); background: var(--wu-bg-light); }
.help-hero { background: var(--wu-yellow); padding: 60px 0; text-align: center; margin-bottom: 60px; }
.help-hero h1 { font-size: 48px; font-weight: 700; margin-bottom: 20px; }
.help-search-bar { display: flex; gap: 0; max-width: 600px; margin: 0 auto; }
.help-search-bar input { flex: 1; padding: 16px 24px; border: 2px solid var(--wu-black); border-right: none; border-radius: var(--radius-lg) 0 0 var(--radius-lg); font-size: 16px; font-family: var(--font-main); }
.help-search-bar input:focus { outline: none; }
.btn-help-search { background: var(--wu-black); color: var(--wu-yellow); padding: 16px 32px; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; font-size: 16px; font-weight: 700; border: 2px solid var(--wu-black); }
.help-layout { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
.help-categories { background: var(--wu-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; position: sticky; top: 100px; }
.help-categories h3 { padding: 20px 24px; font-size: 16px; font-weight: 700; border-bottom: 1px solid var(--wu-border); }
.help-category-link { display: flex; align-items: center; gap: 12px; padding: 14px 24px; font-size: 15px; color: var(--wu-black); text-decoration: none; border-bottom: 1px solid var(--wu-border); transition: background 0.2s; cursor: pointer; }
.help-category-link:hover, .help-category-link.active { background: rgba(255,204,0,0.15); font-weight: 600; }
.help-category-link:last-child { border-bottom: none; }
.help-category-icon { font-size: 20px; }
.faq-container { display: flex; flex-direction: column; gap: 8px; }
.faq-item { background: var(--wu-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.faq-question { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; cursor: pointer; font-size: 16px; font-weight: 600; transition: background 0.2s; }
.faq-question:hover { background: var(--wu-bg-lighter); }
.faq-question.open { background: rgba(255,204,0,0.1); }
.faq-toggle { font-size: 24px; font-weight: 300; transition: transform 0.3s; color: var(--wu-gray-medium); }
.faq-question.open .faq-toggle { transform: rotate(45deg); }
.faq-answer { padding: 0 24px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s; }
.faq-answer.open { max-height: 500px; padding: 0 24px 20px; }
.faq-answer p { font-size: 15px; line-height: 1.7; color: var(--wu-gray-medium); }
.help-contact-section { background: var(--wu-black); color: var(--wu-white); padding: 60px 0; margin-top: 60px; text-align: center; }
.help-contact-section h2 { font-size: 32px; font-weight: 700; color: var(--wu-yellow); margin-bottom: 16px; }
.help-contact-section p { font-size: 16px; color: rgba(255,255,255,0.8); margin-bottom: 32px; }
.contact-options { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; }
.contact-option-card { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-lg); padding: 32px 40px; text-align: center; min-width: 200px; transition: background 0.2s; }
.contact-option-card:hover { background: rgba(255,255,255,0.15); }
.contact-option-card .contact-icon { font-size: 40px; margin-bottom: 12px; }
.contact-option-card h4 { font-size: 16px; font-weight: 700; color: var(--wu-yellow); margin-bottom: 8px; }
.contact-option-card p { font-size: 14px; color: rgba(255,255,255,0.7); }

/* ==================== CONFIGURACION ==================== */
.config-section { padding: 40px 0 80px; background: var(--wu-bg-light); min-height: 80vh; }
.config-layout { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; }
.config-sidebar { background: var(--wu-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; position: sticky; top: 100px; }
.config-sidebar-header { background: var(--wu-yellow); padding: 24px; }
.config-sidebar-header h2 { font-size: 20px; font-weight: 700; }
.config-nav-link { display: flex; align-items: center; gap: 12px; padding: 14px 24px; font-size: 15px; color: var(--wu-black); text-decoration: none; transition: background 0.2s; border-left: 4px solid transparent; cursor: pointer; border-bottom: 1px solid var(--wu-border); }
.config-nav-link:hover, .config-nav-link.active { background: var(--wu-bg-light); border-left-color: var(--wu-yellow); font-weight: 600; }
.config-nav-link:last-child { border-bottom: none; }
.config-nav-icon { font-size: 20px; }
.config-content { display: flex; flex-direction: column; gap: 24px; }
.config-card { background: var(--wu-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 32px; }
.config-card-header { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--wu-border); }
.config-card-header h2 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.config-card-header p { font-size: 14px; color: var(--wu-gray-medium); }
.config-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--wu-border); }
.config-row:last-child { border-bottom: none; padding-bottom: 0; }
.config-row-info h4 { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.config-row-info p { font-size: 13px; color: var(--wu-gray-medium); }
/* Toggle Switch */
.toggle-switch { position: relative; width: 52px; height: 28px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--wu-border); border-radius: 28px; transition: background 0.3s; }
.toggle-slider::before { content: ''; position: absolute; width: 20px; height: 20px; left: 4px; bottom: 4px; background: var(--wu-white); border-radius: 50%; transition: transform 0.3s; }
.toggle-switch input:checked + .toggle-slider { background: var(--wu-black); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(24px); }
.config-select { padding: 8px 12px; border: 1.5px solid var(--wu-border); border-radius: var(--radius-md); font-size: 14px; font-family: var(--font-main); color: var(--wu-black); background: var(--wu-white); cursor: pointer; }
.config-select:focus { outline: none; border-color: var(--wu-black); }
.btn-config-save { background: var(--wu-black); color: var(--wu-yellow); padding: 12px 32px; border-radius: var(--radius-md); font-size: 15px; font-weight: 700; margin-top: 24px; }
.btn-config-save:hover { background: var(--wu-gray); }
.btn-danger { background: transparent; border: 2px solid var(--wu-red); color: var(--wu-red); padding: 8px 20px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; }
.btn-danger:hover { background: var(--wu-red); color: var(--wu-white); }

/* ==================== APP MOVIL PAGE ==================== */
.app-page-hero { background: var(--wu-black); color: var(--wu-white); padding: 80px 0; }
.app-page-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.app-page-hero h1 { font-size: 48px; font-weight: 700; line-height: 1.1; color: var(--wu-yellow); margin-bottom: 20px; }
.app-page-hero p { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.85); margin-bottom: 32px; }
.app-download-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
.btn-app-store { display: flex; align-items: center; gap: 12px; background: var(--wu-white); color: var(--wu-black); padding: 14px 24px; border-radius: var(--radius-lg); font-size: 15px; font-weight: 700; transition: all 0.2s; }
.btn-app-store:hover { background: var(--wu-yellow); }
.btn-app-store .store-icon { font-size: 28px; }
.app-screens { display: flex; justify-content: center; gap: -20px; }
.app-screen-mockup { width: 220px; height: 440px; background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%); border-radius: 32px; border: 4px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; font-size: 80px; box-shadow: var(--shadow-lg); }
.app-features-section { padding: var(--section-padding); background: var(--wu-white); }
.app-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.app-feature-card { padding: 32px; border-radius: var(--radius-lg); background: var(--wu-bg-light); }
.app-feature-card .feature-icon { font-size: 48px; margin-bottom: 16px; }
.app-feature-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.app-feature-card p { font-size: 15px; color: var(--wu-gray-medium); line-height: 1.5; }
.app-ratings-section { padding: 60px 0; background: var(--wu-yellow); }
.app-ratings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }
.app-rating-item .rating-score { font-size: 56px; font-weight: 700; color: var(--wu-black); line-height: 1; }
.app-rating-item .rating-store { font-size: 14px; font-weight: 600; margin-top: 4px; color: var(--wu-gray); }
.app-rating-item .rating-stars { font-size: 24px; margin: 8px 0; }
.app-rating-item .rating-count { font-size: 13px; color: var(--wu-gray-medium); }

/* ==================== ACTUALIZAR ENVIO ==================== */
.update-section { padding: var(--section-padding); background: var(--wu-bg-light); min-height: 60vh; }
.update-container { max-width: 700px; margin: 0 auto; }
.update-container h1 { font-size: 36px; font-weight: 700; margin-bottom: 12px; }
.update-container .page-subtitle { font-size: 16px; color: var(--wu-gray-medium); margin-bottom: 40px; }
.update-form-box { background: var(--wu-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: 40px; }
.update-form-box h2 { font-size: 22px; font-weight: 700; margin-bottom: 24px; }
.update-form-group { margin-bottom: 20px; }
.update-form-group label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--wu-black); }
.update-form-group input,
.update-form-group select { width: 100%; padding: 14px 16px; border: 2px solid var(--wu-border); border-radius: var(--radius-md); font-size: 15px; font-family: var(--font-main); color: var(--wu-black); background: var(--wu-white); }
.update-form-group input:focus,
.update-form-group select:focus { outline: none; border-color: var(--wu-black); }
.update-method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
.update-method-option { border: 2px solid var(--wu-border); border-radius: var(--radius-md); padding: 16px; text-align: center; cursor: pointer; transition: all 0.2s; }
.update-method-option:hover, .update-method-option.active { border-color: var(--wu-yellow); background: rgba(255,204,0,0.08); }
.update-method-option .method-icon { font-size: 32px; margin-bottom: 8px; }
.update-method-option span { font-size: 13px; font-weight: 600; display: block; }
.update-info-alert { display: flex; gap: 12px; align-items: flex-start; background: #e3f2fd; border-radius: var(--radius-md); padding: 16px; margin-bottom: 24px; border-left: 4px solid var(--wu-blue); }
.update-info-alert .alert-icon { font-size: 20px; flex-shrink: 0; }
.update-info-alert p { font-size: 14px; color: var(--wu-blue); line-height: 1.5; }
.btn-update-submit { width: 100%; background: var(--wu-black); color: var(--wu-yellow); padding: 16px; border-radius: var(--radius-md); font-size: 16px; font-weight: 700; }
.btn-update-submit:hover { background: var(--wu-gray); }

/* ==================== PAGE HERO GENERICO (para páginas internas) ==================== */
.page-hero { background: var(--wu-yellow); padding: 48px 0; }
.page-hero h1 { font-size: 40px; font-weight: 700; margin-bottom: 12px; }
.page-hero p { font-size: 18px; color: var(--wu-gray); max-width: 600px; }
.page-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--wu-gray-medium); margin-bottom: 16px; }
.page-breadcrumb a { color: var(--wu-black); font-weight: 600; }
.page-breadcrumb a:hover { text-decoration: underline; }
.page-breadcrumb span { color: var(--wu-gray-light); }
.page-subtitle { font-size: 16px; color: var(--wu-gray-medium); margin-bottom: 40px; }

/* ==================== EMPTY STATE ==================== */
.empty-state { text-align: center; padding: 80px 20px; color: var(--wu-gray-medium); }
.empty-state .empty-icon { font-size: 80px; margin-bottom: 20px; }
.empty-state h3 { font-size: 22px; font-weight: 700; color: var(--wu-black); margin-bottom: 10px; }
.empty-state p { font-size: 15px; line-height: 1.6; max-width: 400px; margin: 0 auto 24px; }

/* ==================== LOADING ==================== */
.loading-spinner { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 40px; color: var(--wu-gray-medium); font-size: 15px; }
.spinner { width: 32px; height: 32px; border: 3px solid var(--wu-border); border-top-color: var(--wu-black); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==================== NOTIFICATIONS / ALERTS ==================== */
.alert-banner { display: flex; gap: 12px; align-items: flex-start; padding: 16px 20px; border-radius: var(--radius-md); margin-bottom: 20px; }
.alert-banner.success { background: #e8f5e9; border-left: 4px solid var(--wu-green); }
.alert-banner.warning { background: #fff3e0; border-left: 4px solid #f57c00; }
.alert-banner.error { background: #ffebee; border-left: 4px solid var(--wu-red); }
.alert-banner.info { background: #e3f2fd; border-left: 4px solid var(--wu-blue); }
.alert-banner .alert-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.alert-banner .alert-text h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.alert-banner .alert-text p { font-size: 14px; line-height: 1.5; color: var(--wu-gray-medium); }

/* ==================== MODAL ==================== */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 20000; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.show { display: flex; }
.modal-box { background: var(--wu-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); max-width: 500px; width: 100%; padding: 40px; position: relative; }
.modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--wu-gray-medium); line-height: 1; }
.modal-close:hover { color: var(--wu-black); }
.modal-box h2 { font-size: 24px; font-weight: 700; margin-bottom: 12px; }
.modal-box p { font-size: 15px; color: var(--wu-gray-medium); margin-bottom: 24px; line-height: 1.6; }
.modal-actions { display: flex; gap: 12px; justify-content: flex-end; }

/* ==================== CURRENCY DROPDOWN ==================== */
.currency-dropdown { position: absolute; top: calc(100% + 4px); right: 0; background: var(--wu-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); min-width: 280px; max-height: 320px; overflow-y: auto; z-index: 5000; border: 1px solid var(--wu-border); }
.currency-dropdown-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; transition: background 0.15s; }
.currency-dropdown-item:hover { background: var(--wu-bg-light); }
.currency-dropdown-item.active { background: rgba(255,204,0,0.15); font-weight: 600; }
.currency-dropdown-item .currency-flag { font-size: 22px; }
.currency-dropdown-item .currency-code { font-weight: 700; font-size: 15px; min-width: 48px; }
.currency-dropdown-item .currency-name { font-size: 13px; color: var(--wu-gray-medium); }
.currency-search { padding: 12px 16px; border-bottom: 1px solid var(--wu-border); }
.currency-search input { width: 100%; padding: 8px 12px; border: 1.5px solid var(--wu-border); border-radius: var(--radius-md); font-size: 14px; font-family: var(--font-main); }
.currency-search input:focus { outline: none; border-color: var(--wu-black); }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1024px) {
    .hero-grid, .app-grid, .bank-grid, .rewards-grid,
    .auth-container, .profile-layout, .config-layout,
    .prepaid-page-grid, .refer-page-grid, .rewards-hero-grid,
    .app-page-grid { grid-template-columns: 1fr; }
    .methods-grid, .offers-grid, .prepaid-benefits-grid { grid-template-columns: repeat(2, 1fr); }
    .profile-sidebar, .config-sidebar { position: static; }
    .agencies-layout { grid-template-columns: 1fr; }
    .agencies-map { min-height: 300px; }
    .history-stats { grid-template-columns: repeat(2, 1fr); }
    .points-earn-grid { grid-template-columns: 1fr 1fr; }
    .redeem-options { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .btn-login, .btn-register { display: none; }
    .hero-title { font-size: 32px; }
    .section-title { font-size: 28px; }
    .trust-badges, .methods-grid, .register-grid, .offers-grid,
    .footer-grid, .track-info-cards, .price-calc-grid,
    .bills-categories, .bills-form-grid, .refer-steps-grid,
    .refer-rewards-grid, .prepaid-benefits-grid, .app-features-grid,
    .app-ratings-grid, .contact-options, .history-stats,
    .profile-info-grid, .profile-limits, .points-earn-grid,
    .track-details-grid, .update-method-grid { grid-template-columns: 1fr; }
    .tabs { flex-direction: column; align-items: center; }
    .prepaid-banner { flex-direction: column; }
    .language-dropdown { right: 20px; }
    .help-layout { grid-template-columns: 1fr; }
    .help-categories { position: static; }
    .track-input-row { flex-direction: column; }
    .history-filters { flex-direction: column; }
    .redeem-options { grid-template-columns: repeat(2, 1fr); }
    .footer-links-bottom { flex-wrap: wrap; gap: 12px; }
    .card-mockup { width: 100%; max-width: 340px; }
    .auth-form-box { padding: 32px 24px; }
}

@media (max-width: 480px) {
    .hero-title { font-size: 24px; }
    .hamburger-btn { padding: 4px; }
    .auth-form-box h1 { font-size: 24px; }
    .benefit-icon-auth { width: 48px; height: 48px; font-size: 24px; }
    .form-options { flex-direction: column; align-items: flex-start; gap: 12px; }
    .form-row { grid-template-columns: 1fr; }
    .social-login-buttons { grid-template-columns: 1fr; }
    .trust-indicators { grid-template-columns: 1fr; gap: 16px; }
    .profile-card { padding: 20px; }
    .config-card { padding: 20px; }
    .redeem-options { grid-template-columns: 1fr 1fr; }
}
/* =====================================================
   FIX: Language dropdown z-index & positioning
   Agrega esto AL FINAL de tu styles.css
   ===================================================== */

/* FIX 1: El language dropdown ya NO debe tener z-index mayor que el currency dropdown.
   Currency dropdown z-index = 6000 (seteado en JS)
   Language dropdown z-index = 5500 (menor, no bloquea la calculadora) */
   .language-dropdown {
    z-index: 5500 !important;
}

/* FIX 2: Cuando el language dropdown está abierto, asegurarse que no tape la calculadora
   que está debajo usando pointer-events cuando está cerrado */
.language-dropdown:not(.show) {
    pointer-events: none;
}

/* FIX 3: El header debe tener un z-index que no aplaste al currency dropdown 
   que está dentro del hero (que NO está en el header) */
.header {
    z-index: 1000 !important;
}

/* FIX 4: El currency dropdown necesita estar sobre el hero background
   pero debajo del header */
#currencyDropdown {
    z-index: 6000 !important;
}

/* FIX 5: El mega menu overlay no debe interferir con dropdowns internos del hero */
.dropdown-overlay {
    z-index: 999 !important;
}