/* ============================================================
   CRYPTOHUB PRO — RESPONSIVE GLOBAL
   Sistema unificado de breakpoints:
   1200px → desktop grande
    960px → tablet landscape
    768px → tablet portrait
    480px → mobile
    375px → mobile pequeño
   ============================================================ */

/* ── BASE GLOBAL ───────────────────────────────────────────── */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

img, svg { max-width: 100%; }

/* ── CONTAINER ─────────────────────────────────────────────── */

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

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

/* ── NAVBAR ────────────────────────────────────────────────── */

.navbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 0 !important;
    flex-wrap: nowrap !important;
    gap: 12px;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    min-width: 0;
}

.nav-brand h1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .nav-brand h1 { font-size: 1rem !important; }
    .logo-icon { width: 28px !important; height: 28px !important; }
    .wallet-btn, .wallet-disconnect-btn {
        padding: 8px 12px !important;
        font-size: 0.62rem !important;
    }
    .wallet-btn span, .wallet-disconnect-btn span {
        font-size: 0.6rem !important;
        letter-spacing: 0.08em !important;
    }
    .language-selector { gap: 4px !important; }
    .lang-btn { padding: 5px 7px !important; font-size: 0.62rem !important; }
}

@media (max-width: 480px) {
    .navbar { padding: 12px 0 !important; }
    .nav-brand h1 { display: none; }
    .wallet-btn i, .wallet-disconnect-btn i { margin-right: 0 !important; }
    .wallet-btn span { display: none; }
}

/* ── HERO ──────────────────────────────────────────────────── */

.hero {
    padding: 60px 0 40px !important;
    text-align: center;
}

.hero-content h2 {
    font-size: 3rem !important;
    line-height: 1.12 !important;
}

.hero-stats {
    display: flex !important;
    justify-content: center !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
}

.hero-stat {
    flex: 1;
    padding: 16px 12px !important;
}

@media (max-width: 960px) {
    .hero-content h2 { font-size: 2.4rem !important; }
}

@media (max-width: 768px) {
    .hero { padding: 40px 0 28px !important; }
    .hero-content h2 { font-size: 2rem !important; }
    .stat-number { font-size: 1.8rem !important; }
}

@media (max-width: 480px) {
    .hero-content h2 { font-size: 1.6rem !important; }
    .hero-content p  { font-size: 0.7rem !important; letter-spacing: 0.1em !important; }
    .stat-number { font-size: 1.5rem !important; }
    .stat-label  { font-size: 0.55rem !important; }
    .hero-stat { padding: 12px 8px !important; }
}

/* ── CONVERTER ─────────────────────────────────────────────── */

.converter-section { padding: 0 0 40px !important; }

.converter-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px !important;
}

.converter-box {
    border-radius: 16px !important;
    padding: 28px 24px !important;
}

/* Desktop: fila horizontal */
.exchange-wrapper {
    display: flex !important;
    flex-direction: row !important;
    gap: 16px !important;
    align-items: stretch !important;
}

.exchange-panel { flex: 1 1 0; min-width: 0; }

/* Botón swap — centrado perfecto siempre */
.swap-button {
    flex-shrink: 0 !important;
    align-self: center !important;
    margin: 0 !important;
    transform: none !important;
}

/* Network picker — no desborda en móvil */
.network-picker {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.auto-network-banner {
    font-size: 0.72rem !important;
    padding: 6px 10px !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

/* ── MÓVIL (≤ 680px): apila en columna ─────────────────────── */
@media (max-width: 680px) {
    .converter-box { padding: 20px 16px !important; }

    .exchange-wrapper {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .exchange-panel { width: 100% !important; }

    /* Separador con flechas vertical — reemplaza el botón */
    .swap-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        margin: 10px auto !important;
        transform: rotate(90deg) !important;
        border-radius: 50% !important;
    }

    #from-amount, #to-amount {
        font-size: 1.5rem !important;
    }

    .input-amount { padding: 10px 14px !important; }

    .currency-select { padding: 10px 12px !important; }

    .selected-currency { gap: 10px !important; }

    .currency-name { font-size: 0.9rem !important; }
    .currency-code { font-size: 0.72rem !important; }
}

/* ── PEQUEÑO (≤ 420px) ──────────────────────────────────────── */
@media (max-width: 420px) {
    .converter-container { padding: 0 8px !important; }
    .converter-box { padding: 16px 12px !important; border-radius: 14px !important; }

    #from-amount, #to-amount { font-size: 1.3rem !important; }

    .converter-header { font-size: 0.62rem !important; letter-spacing: 0.2em !important; }

    .summary-label { font-size: 0.56rem !important; }
    .summary-value { font-size: 0.92rem !important; }

    .info-label  { font-size: 0.54rem !important; }
    .info-value  { font-size: 0.85rem !important; }

    .btn-swap-real { width: 100% !important; padding: 14px 12px !important; }
    .btn-swap-real span { font-size: 0.6rem !important; letter-spacing: 0.1em !important; }

    .swap-hint { font-size: 0.58rem !important; }

    .auto-network-banner { font-size: 0.65rem !important; }
}

/* ── CRYPTO GRID ───────────────────────────────────────────── */

.crypto-grid-section { padding: 20px 0 !important; }

.crypto-grid-section h2,
.market-section h2 {
    font-size: 2rem !important;
    margin-bottom: 24px !important;
    text-align: center;
}

.crypto-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: 14px !important;
}

@media (max-width: 768px) {
    .crypto-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .crypto-grid-section h2 { font-size: 1.6rem !important; }
}

@media (max-width: 375px) {
    .crypto-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
}

/* ── MARKET TABLE ──────────────────────────────────────────── */

.market-section { padding: 20px 0 40px !important; }

.market-table-container {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
}

.market-table {
    width: 100% !important;
    min-width: 560px;
}

.market-table th,
.market-table td {
    padding: 12px 14px !important;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .market-table { min-width: 480px; }
    .market-table th { font-size: 0.55rem !important; padding: 10px 10px !important; }
    .market-table td { font-size: 0.88rem !important; padding: 10px 10px !important; }
    .market-section h2 { font-size: 1.6rem !important; }
}

@media (max-width: 480px) {
    /* Ocultar columna 7D en mobile para ahorrar espacio */
    .market-table th:nth-child(5),
    .market-table td:nth-child(5) { display: none; }
}

/* ── VAULT / BÓVEDA ────────────────────────────────────────── */

.vault-section { padding: 40px 0 !important; }

.vault-title-text { font-size: 2.4rem !important; }

.vault-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
}

.vault-contracts-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
}

@media (max-width: 960px) {
    .vault-grid { grid-template-columns: 1fr 1fr !important; }
    .vault-card-hero { grid-column: 1 / -1 !important; }
    .vault-contracts-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 768px) {
    .vault-title-text { font-size: 2rem !important; }
    .vault-grid { grid-template-columns: 1fr !important; }
    .vault-contracts-grid { grid-template-columns: 1fr !important; }
    .vault-strip {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0 !important;
    }
    .vault-strip-divider { display: none !important; }
    .vault-strip-item { padding: 14px !important; }
    .inv-stats-row {
        flex-direction: column !important;
        gap: 0 !important;
    }
    .inv-stat-divider { display: none !important; }
    .inv-stat-cell { padding: 10px 0 !important; border-bottom: 1px solid rgba(255,255,255,0.05); }
}

@media (max-width: 480px) {
    .vault-title-text { font-size: 1.7rem !important; }
    .vault-apy-value { font-size: 3rem !important; }
    .vault-deposit-btn { width: 100% !important; }
    .vault-contracts-header-overline { font-size: 0.58rem !important; }
    .vault-contracts-header h3 { font-size: 1.4rem !important; }
    .inv-balance-num { font-size: 2.2rem !important; }
    .inv-hero { padding: 20px !important; }
}

/* ── MODAL DEPÓSITO ────────────────────────────────────────── */

.modal {
    padding: 16px !important;
}

.modal-content {
    max-height: calc(var(--vh, 1vh) * 92) !important;
    max-height: 92dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px !important;
}

@media (max-width: 600px) {
    .modal { padding: 0 !important; align-items: flex-end !important; }
    .modal-content {
        border-radius: 20px 20px 0 0 !important;
        max-height: calc(var(--vh, 1vh) * 95) !important;
        max-height: 95dvh !important;
    }
    .modal-header { padding: 20px 20px 0 !important; }
    .modal-body { padding: 16px 20px 24px !important; }
    .amount-quick-actions { grid-template-columns: repeat(2,1fr) !important; }
    .modal-actions { grid-template-columns: 1fr !important; }
    .wallet-deposit-panel-compact { flex-direction: column !important; align-items: center !important; }
    .modal-trust-compact { flex-wrap: wrap !important; gap: 8px !important; }
}

/* ── WALLET SECTION — handled by banking-global.css ──────────── */

@media (max-width: 768px) {
    .wallet-address { font-size: 0.75rem !important; word-break: break-all; }
    .change-wallet-btn, .disconnect-btn { padding: 9px 14px !important; font-size: 0.6rem !important; }
}

/* ── BANKING FEATURES ──────────────────────────────────────── */

.bank-why-section { padding: 60px 0 0 !important; }

.bank-kpi-strip { flex-wrap: wrap !important; }

.bank-feature-row {
    grid-template-columns: 48px 1fr auto !important;
    gap: 20px !important;
    padding: 24px 0 !important;
}

@media (max-width: 960px) {
    .bank-why-title { font-size: 2.2rem !important; }
    .bank-kpi-val { font-size: 2.2rem !important; }
    .bank-feature-tag { display: none !important; }
    .bank-feature-row { grid-template-columns: 44px 1fr !important; }
    .bank-footer-top {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .bank-footer-nav { grid-template-columns: repeat(3, 1fr) !important; }
    .bank-footer-socials {
        flex-direction: row !important;
        align-items: flex-start !important;
    }
}

@media (max-width: 768px) {
    .bank-why-title { font-size: 1.8rem !important; }
    .bank-why-sub { font-size: 0.88rem !important; }
    .bank-kpi-strip { gap: 0 !important; }
    .bank-kpi-item { min-width: 50% !important; padding: 20px 16px !important; }
    .bank-kpi-sep { display: none !important; }
    .bank-kpi-val { font-size: 1.8rem !important; }
    .bank-feature-icon { width: 38px !important; height: 38px !important; font-size: 1rem !important; }
    .bank-feature-index { display: none !important; }
    .bank-feature-row { grid-template-columns: 1fr !important; padding: 18px 0 !important; }
    .bank-feature-body { gap: 12px !important; }
    .bank-certs-strip { flex-direction: column !important; gap: 14px !important; padding: 20px !important; }
    .bank-certs-label { border-right: none !important; padding-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important; padding-bottom: 10px !important; width: 100% !important; }
    .bank-certs-list { gap: 8px !important; }
    .bank-footer-nav { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
    .bank-footer-top { padding: 36px 0 24px !important; }
    .bank-footer-bottom { flex-direction: column !important; gap: 12px !important; padding: 16px 0 32px !important; }
}

@media (max-width: 480px) {
    .bank-why-title { font-size: 1.5rem !important; }
    .bank-kpi-item { min-width: 50% !important; padding: 16px 12px !important; }
    .bank-kpi-val { font-size: 1.6rem !important; }
    .bank-kpi-lbl { font-size: 0.55rem !important; }
    .bank-feature-text h3 { font-size: 1.15rem !important; }
    .bank-feature-text p  { font-size: 0.82rem !important; }
    .bank-cert-pill { font-size: 0.55rem !important; padding: 5px 10px !important; }
    .bank-footer-nav { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
}

@media (max-width: 375px) {
    .bank-why-title { font-size: 1.3rem !important; }
    .bank-kpi-item { padding: 12px 8px !important; }
}

/* ── WALLET SELECTOR MODAL (bcs) ───────────────────────────── */

@media (max-width: 520px) {
    .bcs-overlay { align-items: flex-start !important; padding: 62px 0 0 !important; }
    .bcs-panel {
        border-radius: 0 0 20px 20px !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .bcs-panel-header { padding: 20px 20px 0 !important; }
    .bcs-subtitle { margin: 8px 20px 16px !important; font-size: 0.85rem !important; }
    .bcs-card { padding: 14px 20px !important; }
    .bcs-desc { display: none !important; }
    .bcs-footer { padding: 12px 20px !important; font-size: 0.55rem !important; }
}

/* ── CONTRATOS VAULT (vcp) ─────────────────────────────────── */

.vault-contracts-grid .vcp-card {
    border-radius: 16px !important;
}

@media (max-width: 768px) {
    .vcp-apy-num { font-size: 2.8rem !important; }
    .vcp-name { font-size: 1.2rem !important; }
    .vcp-btn { padding: 12px !important; font-size: 0.6rem !important; }
    .vcp-termcode { padding: 7px 12px !important; }
}

@media (max-width: 480px) {
    .vcp-inner { padding: 18px !important; }
    .vcp-apy-num { font-size: 2.4rem !important; }
    .vcp-apy-bonus-val { font-size: 1.8rem !important; }
    .vcp-apy-num--sm { font-size: 1.4rem !important; }
}

/* ── SMOOTH SCROLL & TOUCH UX ──────────────────────────────── */

/* Zonas de toque mínimo 44px (estándar Android/iOS) */
button, a, [role="button"] {
    min-height: 44px;
    touch-action: manipulation;
}

/* Eliminar delay tap en iOS */
a, button { -webkit-tap-highlight-color: transparent; }

/* Scroll suave en secciones ancla */
section { scroll-margin-top: 80px; }

/* Prevenir overflow horizontal global */
.vault-section,
.converter-section,
.crypto-grid-section,
.market-section,
.wallet-section,
.bank-why-section,
.bank-footer {
    overflow-x: hidden;
}

/* ── UTILIDADES ────────────────────────────────────────────── */

/* Texto truncado elegante */
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Scrollbar personalizada (webkit) */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

/* ── ANIMACIONES SUAVES ────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
    .feature-card,
    .vcp-card,
    .token-card,
    .bank-feature-row,
    .crypto-grid > *,
    .market-table tr {
        transition: transform 0.2s ease, opacity 0.2s ease !important;
    }
}

/* En dispositivos que piden menos movimiento */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ANDROID / MÓVIL — CORRECCIONES COMPLETAS
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. ANTI-SCROLL HORIZONTAL GLOBAL ─────────────────────────── */
html {
    max-width: 100% !important;
    overflow-x: hidden !important;
}
body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}
@media (max-width: 768px) {
    .vault-section, .converter-section, .wallet-section,
    .market-section, .bank-why-section, .crypto-grid-section,
    .hero, .bank-footer { max-width: 100% !important; overflow-x: hidden !important; }
}

/* ── 2. NAVBAR — Ocultar Brand link, compactar idiomas ─────────── */
@media (max-width: 768px) {
    .brand-link { display: none !important; }
}
@media (max-width: 480px) {
    .language-selector { gap: 2px !important; }
    .lang-btn {
        padding: 5px 7px !important;
        font-size: 0.6rem !important;
        min-height: 32px !important;
        border-radius: 4px !important;
    }
}
@media (max-width: 360px) {
    /* Pantallas muy pequeñas: solo idioma activo */
    .lang-btn:not(.active) { display: none !important; }
    .navbar { gap: 8px !important; }
}

/* ── 3. HERO — Stats sin overflow en pantallas estrechas ────────── */
@media (max-width: 400px) {
    .hero-stats {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    .hero-stat {
        flex: 0 0 48% !important;
        min-width: 100px !important;
        padding: 10px 8px !important;
    }
    .hero { padding: 32px 0 20px !important; }
    .hero-content h2 { font-size: 1.45rem !important; }
}

/* ── 4. INPUTS — Prevenir zoom Android/iOS (requiere ≥ 16px) ───── */
@media (max-width: 768px) {
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    select, textarea {
        font-size: 16px !important;
    }
    #from-amount, #to-amount {
        font-size: clamp(16px, 5vw, 1.5rem) !important;
    }
    #deposit-amount {
        font-size: clamp(16px, 5vw, 1.8rem) !important;
    }
}

/* ── 5. CONVERTER — Mejoras visuales en móvil ──────────────────── */
@media (max-width: 680px) {
    /* Resumen: etiquetas y valores más legibles */
    .summary-label { font-size: 0.75rem !important; }
    .summary-value { font-size: 1rem !important; }
    /* Info compacta: 3 cols centradas */
    .exchange-info {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        text-align: center !important;
    }
    .info-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 3px !important;
    }
    .info-label { font-size: 0.7rem !important; }
    .info-value { font-size: 0.88rem !important; }
    .price-info { font-size: 0.75rem !important; }
    .swap-hint { font-size: 0.68rem !important; }
    /* Botón swap real: más visible */
    .btn-swap-real { min-height: 48px !important; }
    /* Currency select padding */
    .currency-select { padding: 10px 12px !important; }
    .selected-currency { gap: 10px !important; }
}

@media (max-width: 420px) {
    .info-label { font-size: 0.65rem !important; }
    .info-value { font-size: 0.82rem !important; }
    .price-info { font-size: 0.7rem !important; }
    /* Red badge en converter */
    .auto-network-banner {
        font-size: 0.7rem !important;
        padding: 8px 10px !important;
        line-height: 1.4 !important;
    }
}

/* ── 6. MARKET TABLE — ocultar más columnas en móvil estrecho ───── */
@media (max-width: 420px) {
    .market-table th:nth-child(5),
    .market-table td:nth-child(5),
    .market-table th:nth-child(4),
    .market-table td:nth-child(4) { display: none !important; }
    .market-table { min-width: 320px !important; }
}

/* ── 7. BANKING WALLET TABLE — compacto y legible ───────────────── */
@media (max-width: 640px) {
    .bk-assets-table { overflow-x: hidden !important; }
    .bk-asset-row { padding: 14px 16px !important; }
    .bk-assets-thead { padding: 10px 16px !important; }
}
@media (max-width: 480px) {
    .bk-asset-badge {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.82rem !important;
        flex-shrink: 0 !important;
    }
    .bk-asset-info { gap: 10px !important; }
    .bk-asset-symbol { font-size: 0.7rem !important; }
    .bk-asset-name { font-size: 0.6rem !important; }
    .bk-asset-balance { font-size: 0.92rem !important; }
    .bk-asset-usd { font-size: 0.92rem !important; }
    .bk-asset-row { padding: 13px 14px !important; }
    .bk-assets-thead { padding: 9px 14px !important; }
    /* Contratos */
    .bk-contracts-grid { gap: 8px !important; }
    .bk-contract-card { padding: 16px 14px 12px !important; }
    .bk-contract-amount { font-size: 1.3rem !important; }
    .bk-contract-code { font-size: 0.7rem !important; }
    .bk-contract-label { font-size: 0.6rem !important; }
    .bk-contracts-name { font-size: 1rem !important; }
}

/* ── 8. WALLET — Layout y dirección ─────────────────────────────── */
@media (max-width: 640px) {
    .wallet-address {
        font-size: 0.7rem !important;
        word-break: break-all !important;
        line-height: 1.55 !important;
        text-align: left !important;
    }
    .wallet-header h2 { font-size: 1.8rem !important; }
    .portfolio-total-value { font-size: 1.6rem !important; }
    .portfolio-header h3 { font-size: 1.2rem !important; }
}
@media (max-width: 480px) {
    .wallet-address { font-size: 0.65rem !important; padding: 8px 12px !important; }
    .wallet-section { padding: 32px 12px 48px !important; }
    .wallet-info-card { padding: 18px 16px !important; }
    .wallet-header { margin-bottom: 22px !important; }
    .wallet-header h2 { font-size: 1.6rem !important; }
    .portfolio-total-value { font-size: 1.4rem !important; }
    .change-wallet-btn, .disconnect-btn {
        padding: 10px 14px !important;
        font-size: 0.62rem !important;
        min-height: 40px !important;
    }
}

/* ── 9. VAULT — Ajustes generales ────────────────────────────────── */
@media (max-width: 480px) {
    .vault-title-text { font-size: 1.6rem !important; }
    .vault-contracts-header h3 { font-size: 1.4rem !important; }
    .vault-deposit-btn {
        width: 100% !important;
        min-height: 48px !important;
        justify-content: center !important;
    }
    /* Stats strip — scroll horizontal suave */
    .vault-strip {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 0 !important;
    }
    .vault-strip-item { min-width: 72px !important; padding: 12px 10px !important; }
}

/* ── 10. CONTRATOS VCP — Legible en móvil ────────────────────────── */
@media (max-width: 480px) {
    .vcp-inner { padding: 18px 16px !important; }
    .vcp-apy-num { font-size: 2.2rem !important; }
    .vcp-name { font-size: 1.1rem !important; }
    .vcp-btn {
        padding: 12px 16px !important;
        min-height: 44px !important;
        font-size: 0.62rem !important;
    }
    .vcp-stat-lbl { font-size: 0.6rem !important; }
    .vcp-stat-val { font-size: 1rem !important; }
}

/* ── 11. MODALES — Altura y padding correctos ────────────────────── */
@media (max-width: 600px) {
    .modal-header { padding: 20px 18px 0 !important; }
    .modal-body { padding: 14px 18px 20px !important; }
    .modal-header h2 { font-size: 1.5rem !important; }
    .amount-quick-actions { gap: 6px !important; }
    .quick-amount { padding: 10px 8px !important; min-height: 40px !important; }
}

/* ── 12. SWAP SUCCESS MODAL — Compacto en móvil ─────────────────── */
@media (max-width: 480px) {
    .swap-success-panel {
        padding: 32px 18px 24px !important;
        border-radius: 16px !important;
        margin: 16px !important;
        max-width: calc(100% - 32px) !important;
    }
    .swap-success-title { font-size: 1.5rem !important; margin-bottom: 20px !important; }
    .swap-success-amount { font-size: 1.25rem !important; }
    .swap-success-actions { flex-direction: column !important; gap: 8px !important; }
    .swap-success-btn-primary,
    .swap-success-btn-secondary { padding: 12px 14px !important; }
    .swap-success-flow { padding: 14px 16px !important; gap: 10px !important; }
}

/* ── 13. PANTALLA MUY PEQUEÑA — ≤ 375px ─────────────────────────── */
@media (max-width: 375px) {
    .container { padding: 0 10px !important; }
    #from-amount, #to-amount {
        font-size: clamp(16px, 4.8vw, 1.2rem) !important;
    }
    .converter-box { padding: 14px 12px !important; border-radius: 12px !important; }
    .currency-name { font-size: 0.82rem !important; }
    .currency-code { font-size: 0.62rem !important; }
    .selected-currency { gap: 8px !important; }
    .wallet-btn, .wallet-disconnect-btn { padding: 8px 10px !important; }
    .vcp-apy-num { font-size: 2rem !important; }
    .stat-number { font-size: 1.3rem !important; }
    .hero-content h2 { font-size: 1.35rem !important; }
    .wallet-section { padding: 24px 10px 40px !important; }
    .wallet-info-card { padding: 14px 12px !important; }
    .bank-why-title { font-size: 1.2rem !important; }
}

/* ── 14. CRYPTO GRID — 2 columnas perfectas en móvil ────────────── */
@media (max-width: 480px) {
    .crypto-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
}

/* ── 15. BANKING FEATURES — Legibilidad ─────────────────────────── */
@media (max-width: 480px) {
    .bank-kpi-val { font-size: 1.5rem !important; }
    .bank-kpi-lbl { font-size: 0.6rem !important; }
    .bank-feature-text h3 { font-size: 1.1rem !important; }
    .bank-feature-text p { font-size: 0.85rem !important; }
    .bank-why-sub { font-size: 0.82rem !important; }
}

/* ── 16. BACKDROP-FILTER FALLBACK — Android Chrome < 76 ─────────── */
@supports not (backdrop-filter: blur(1px)) {
    .bcs-overlay { background: rgba(4, 8, 20, 0.97) !important; }
    .swap-success-overlay { background: rgba(4, 8, 20, 0.97) !important; }
}

/* ── 17. SAFE AREA — Notch y barra navegación Android ───────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bcs-panel { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
    .modal-content { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
    body { padding-bottom: env(safe-area-inset-bottom); }
}

/* ── 18. TAP HIGHLIGHT — Respuesta táctil natural ───────────────── */
a, button, [role="button"], input, select {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}