/* =====================================================
   WESTERN UNION - MOBILE FIXES
   Agrega esto AL FINAL de tu styles.css
   (o enlázalo como <link> después de styles.css)
   ===================================================== */

/* ==================== GLOBAL FIX ==================== */
/* Evita overflow horizontal en todo el sitio */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* ==================== HEADER MOBILE ==================== */
@media (max-width: 768px) {
    .header {
        padding: 0 12px;
    }

    .navbar {
        padding: 12px 0;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .logo svg {
        width: 140px;
        height: auto;
    }

    .nav-center {
        flex: 0 0 auto;
    }

    .nav-main-btn {
        font-size: 13px;
        padding: 6px 8px;
        white-space: nowrap;
    }

    .nav-right {
        gap: 4px;
        flex-shrink: 0;
    }

    .lang-btn {
        padding: 6px 8px;
        font-size: 13px;
        gap: 4px;
    }

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

    /* Ocultar el texto "ES" en pantallas muy pequeñas si hace falta */
    .hamburger-btn {
        padding: 6px;
    }
}

@media (max-width: 400px) {
    .logo svg {
        width: 110px;
    }

    .nav-main-btn {
        font-size: 12px;
        padding: 4px 6px;
    }

    .lang-btn span:not(.globe-icon) {
        display: none; /* oculta "ES" solo deja el globo */
    }
}

/* ==================== HERO SECTION MOBILE ==================== */
@media (max-width: 768px) {
    .hero {
        padding: 32px 0 40px;
    }

    .hero .container {
        padding: 0 16px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .hero-title {
        font-size: 26px;
        line-height: 1.2;
        word-break: break-word;
        hyphens: auto;
    }

    .hero-promo {
        margin-bottom: 24px;
    }

    .hero-promo p {
        font-size: 14px;
    }

    .trustpilot {
        flex-wrap: wrap;
        gap: 8px;
    }

    .trustpilot-stars {
        flex-wrap: nowrap;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 22px;
    }
}

/* ==================== CALCULATOR MOBILE ==================== */
@media (max-width: 768px) {
    .calculator {
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        overflow: hidden;
        width: 100%;
    }

    .promo-badge {
        padding: 12px 16px;
    }

    .promo-badge p {
        font-size: 13px;
    }

    .calc-field {
        padding: 16px;
    }

    .input-group {
        gap: 8px;
    }

    .input-group input {
        font-size: 18px;
        padding: 12px 12px;
        min-width: 0; /* CRÍTICO: evita que el input se desborde */
        width: 100%;
    }

    .currency-select {
        min-width: 100px;
        padding: 10px 12px;
        flex-shrink: 0;
    }

    .currency-select span {
        font-size: 14px;
    }

    .calc-details {
        padding: 14px 16px;
    }

    .detail-row {
        font-size: 13px;
        gap: 8px;
    }

    .detail-row span:first-child {
        flex: 1;
    }

    .detail-value {
        text-align: right;
        flex-shrink: 0;
    }

    .calc-total {
        padding: 14px 16px;
        font-size: 15px;
    }

    .btn-cta {
        width: calc(100% - 32px);
        margin: 16px 16px 12px;
        padding: 14px 16px;
        font-size: 15px;
    }

    .disclaimer {
        padding: 0 16px 16px;
        font-size: 10px;
    }
}

/* ==================== FRAUD ALERT MOBILE ==================== */
@media (max-width: 768px) {
    .fraud-alert .container {
        padding: 0 16px;
        flex-wrap: wrap;
        gap: 4px;
        text-align: center;
    }

    .fraud-alert a {
        font-size: 12px;
    }
}

/* ==================== TRUST SECTION MOBILE ==================== */
@media (max-width: 768px) {
    .trust-section {
        padding: 24px 0;
    }

    .trust-badges {
        grid-template-columns: 1fr; /* una columna */
        gap: 16px;
        padding: 0 16px;
    }

    .trust-item {
        align-items: center;
        gap: 12px;
    }

    .trust-item .icon {
        font-size: 28px;
        flex-shrink: 0;
    }

    .trust-item p {
        font-size: 14px;
    }
}

/* ==================== PREPAID SECTION MOBILE ==================== */
@media (max-width: 768px) {
    .prepaid-section {
        padding: 28px 0;
    }

    .prepaid-banner {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }

    .prepaid-content {
        gap: 12px;
    }

    .card-icon {
        font-size: 32px;
    }

    .prepaid-content h2 {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .prepaid-content p {
        font-size: 13px;
    }

    .btn-outline {
        width: 100%;
        text-align: center;
        padding: 12px 20px;
    }
}

/* ==================== METHODS SECTION MOBILE ==================== */
@media (max-width: 768px) {
    .methods-section {
        padding: 40px 0;
    }

    .section-title {
        font-size: 24px;
        margin-bottom: 24px;
    }

    .tabs {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 32px;
    }

    .tab {
        padding: 10px 20px;
        font-size: 14px;
    }

    .methods-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .method-card {
        padding: 24px 16px;
    }
}

/* ==================== REGISTER SECTION MOBILE ==================== */
@media (max-width: 768px) {
    .register-section {
        padding: 40px 0;
    }

    .register-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .register-item h3 {
        font-size: 26px;
    }

    .register-item h4 {
        font-size: 18px;
    }

    .btn-register-big {
        width: 100%;
        text-align: center;
        padding: 14px 20px;
    }
}

/* ==================== WHY SECTION MOBILE ==================== */
@media (max-width: 768px) {
    .why-section {
        padding: 40px 0;
    }

    .why-grid {
        gap: 24px;
        padding: 0 4px;
    }

    .why-item {
        gap: 14px;
    }

    .why-item h3 {
        font-size: 17px;
    }

    .why-item p {
        font-size: 14px;
    }
}

/* ==================== REWARDS SECTION MOBILE ==================== */
@media (max-width: 768px) {
    .rewards-section {
        padding: 40px 0;
    }

    .rewards-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .rewards-left h2 {
        font-size: 26px;
    }

    .btn-rewards {
        width: 100%;
        text-align: center;
    }
}

/* ==================== OFFERS SECTION MOBILE ==================== */
@media (max-width: 768px) {
    .offers-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .offer-card {
        padding: 16px 12px;
    }

    .offer-logo {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }

    .offer-card h4 {
        font-size: 14px;
    }

    .offer-card p {
        font-size: 12px;
    }
}

@media (max-width: 400px) {
    .offers-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== APP SECTION MOBILE ==================== */
@media (max-width: 768px) {
    .app-section {
        padding: 40px 0;
    }

    .app-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .app-content h2 {
        font-size: 26px;
    }

    .app-stores {
        gap: 16px;
        flex-wrap: wrap;
    }

    .phone-mockup {
        font-size: 120px;
        text-align: center;
    }
}

/* ==================== BANK SECTION MOBILE ==================== */
@media (max-width: 768px) {
    .bank-section {
        padding: 40px 0;
    }

    .bank-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .bank-content h2 {
        font-size: 24px;
    }
}

/* ==================== QUICK SEND BANNER MOBILE ==================== */
@media (max-width: 768px) {
    .quick-send-banner {
        padding: 40px 0;
    }

    .banner-content {
        gap: 10px;
    }

    .clock-icon {
        font-size: 36px;
    }

    .quick-send-banner h2 {
        font-size: 22px;
    }

    .quick-send-banner p {
        font-size: 14px;
        padding: 0 16px;
    }
}

/* ==================== FOOTER MOBILE ==================== */
@media (max-width: 768px) {
    .footer {
        padding: 40px 0 20px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .footer-col h4 {
        font-size: 14px;
    }

    .footer-col a {
        font-size: 13px;
    }

    .popular-destinations {
        gap: 10px;
    }

    .dest-btn {
        font-size: 13px;
        padding: 8px 14px;
    }

    .footer-links-bottom {
        flex-direction: column;
        gap: 10px;
    }

    .social-icons {
        gap: 12px;
    }

    .social-icon {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== LANGUAGE DROPDOWN MOBILE ==================== */
@media (max-width: 768px) {
    .language-dropdown {
        right: 8px;
        left: 8px;
        min-width: unset;
        width: calc(100% - 16px);
        top: 60px;
    }
}

/* ==================== CURRENCY DROPDOWN MOBILE ==================== */
@media (max-width: 768px) {
    .currency-dropdown {
        right: 0;
        left: auto;
        min-width: 240px;
        max-width: calc(100vw - 32px);
    }
}

/* ==================== TRACK / RASTREAR MOBILE ==================== */
@media (max-width: 768px) {
    .track-section {
        padding: 32px 0;
    }

    .track-container h1 {
        font-size: 26px;
    }

    .track-form-box {
        padding: 24px 16px;
    }

    .track-input-row {
        flex-direction: column;
        gap: 12px;
    }

    .btn-track {
        width: 100%;
        text-align: center;
    }

    .track-info-cards {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .track-details-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .track-result {
        padding: 24px 16px;
    }
}

/* ==================== AUTH PAGES MOBILE ==================== */
@media (max-width: 768px) {
    .auth-section {
        padding: 32px 0;
    }

    .auth-container {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 0 16px;
    }

    .auth-benefits h2 {
        font-size: 28px;
    }

    .auth-form-box {
        padding: 28px 20px;
        border-radius: 12px;
    }

    .auth-form-box h1 {
        font-size: 24px;
    }

    .trust-indicators {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        padding: 20px 16px;
    }

    .trust-item-auth strong {
        font-size: 18px;
    }

    .social-login-buttons {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

/* ==================== PROFILE MOBILE ==================== */
@media (max-width: 768px) {
    .profile-section {
        padding: 24px 0 48px;
    }

    .profile-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .profile-sidebar {
        position: static;
    }

    .profile-info-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .profile-limits {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .profile-card {
        padding: 20px 16px;
    }
}

/* ==================== HISTORY MOBILE ==================== */
@media (max-width: 768px) {
    .history-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .history-header h1 {
        font-size: 24px;
    }

    .history-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .stat-card .stat-value {
        font-size: 22px;
    }

    /* Tabla responsive - scroll horizontal */
    .history-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .history-table {
        min-width: 600px;
    }

    .history-filters {
        flex-direction: column;
        gap: 12px;
    }

    .history-filter-group select,
    .history-filter-group input[type="date"] {
        min-width: unset;
        width: 100%;
    }
}

/* ==================== HELP / FAQ MOBILE ==================== */
@media (max-width: 768px) {
    .help-hero {
        padding: 40px 16px;
        margin-bottom: 32px;
    }

    .help-hero h1 {
        font-size: 30px;
    }

    .help-search-bar {
        flex-direction: column;
        gap: 0;
    }

    .help-search-bar input {
        border-right: 2px solid var(--wu-black);
        border-bottom: none;
        border-radius: 12px 12px 0 0;
    }

    .btn-help-search {
        border-radius: 0 0 12px 12px;
        width: 100%;
    }

    .help-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .help-categories {
        position: static;
    }

    .contact-options {
        flex-direction: column;
        align-items: center;
    }

    .contact-option-card {
        width: 100%;
        max-width: 320px;
    }
}

/* ==================== AGENCIES MOBILE ==================== */
@media (max-width: 768px) {
    .agencies-layout {
        grid-template-columns: 1fr;
    }

    .agencies-map {
        min-height: 250px;
    }
}

/* ==================== BILLS / FACTURAS MOBILE ==================== */
@media (max-width: 768px) {
    .bills-categories {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .bills-form-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .bills-form-box {
        padding: 24px 16px;
    }
}

/* ==================== CONFIG MOBILE ==================== */
@media (max-width: 768px) {
    .config-section {
        padding: 24px 0 48px;
    }

    .config-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .config-sidebar {
        position: static;
    }

    .config-card {
        padding: 20px 16px;
    }

    .config-row {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ==================== REFER AMIGO MOBILE ==================== */
@media (max-width: 768px) {
    .refer-page-hero {
        padding: 40px 0;
    }

    .refer-page-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .refer-page-hero h1 {
        font-size: 30px;
    }

    .refer-code-box {
        padding: 24px 16px;
    }

    .refer-code-display {
        flex-direction: column;
        gap: 10px;
    }

    .refer-code-input {
        font-size: 18px;
        letter-spacing: 2px;
    }

    .btn-copy-code {
        width: 100%;
    }

    .refer-steps-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .refer-rewards-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== REWARDS PAGE MOBILE ==================== */
@media (max-width: 768px) {
    .rewards-hero {
        padding: 40px 0;
    }

    .rewards-hero-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .rewards-hero h1 {
        font-size: 30px;
    }

    .points-earn-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .redeem-options {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* ==================== PREPAID PAGE MOBILE ==================== */
@media (max-width: 768px) {
    .prepaid-page-hero {
        padding: 40px 0;
    }

    .prepaid-page-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .prepaid-page-hero h1 {
        font-size: 30px;
    }

    .prepaid-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .card-mockup {
        width: 100%;
        max-width: 340px;
        height: 200px;
        padding: 24px;
    }
}

/* ==================== APP PAGE MOBILE ==================== */
@media (max-width: 768px) {
    .app-page-hero {
        padding: 48px 0;
    }

    .app-page-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .app-page-hero h1 {
        font-size: 30px;
    }

    .app-download-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .btn-app-store {
        justify-content: center;
    }

    .app-features-grid {
        grid-template-columns: 1fr;
    }

    .app-ratings-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .app-screen-mockup {
        width: 160px;
        height: 320px;
        font-size: 60px;
    }
}

/* ==================== PRICE CALC MOBILE ==================== */
@media (max-width: 768px) {
    .price-calc-section {
        padding: 32px 0;
    }

    .price-calc-container h1 {
        font-size: 26px;
    }

    .price-calc-box {
        padding: 24px 16px;
    }

    .price-calc-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Tabla de precios: scroll horizontal */
    .price-calc-box {
        overflow-x: auto;
    }
}

/* ==================== GENERAL CONTAINER FIX ==================== */
@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }
}

@media (max-width: 400px) {
    .container {
        padding: 0 12px;
    }
}

/* ==================== SECTION PADDING MOBILE ==================== */
@media (max-width: 768px) {
    :root {
        --section-padding: 40px 0;
    }
}