/* ============================
   Divisas MTM - estilo.css
   (No requiere cambios en tu HTML)
   ============================ */

:root{
    --gold:#c8a86b;
    --gold-2:#b89457;
    --ink:#0b0b0b;
    --ink-2:#121212;
    --bg:#0e0e10;
    --card:#121318;
    --muted:#9aa3ad;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
    margin:0;
    font-family:Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color:#f6f6f6;
    background-color:var(--bg);
}

/* Utilidades generales */
.container{ width:min(1160px, 92%); margin-inline:auto; }
.grid{ display:grid; gap:24px; }
section{ padding:56px 0; }

.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding:12px 20px; border-radius:999px; font-weight:700; text-decoration:none;
    background: linear-gradient(135deg, var(--gold), var(--gold-2));
    color:#0a0a0a; box-shadow:0 10px 30px rgba(200,168,107,.25);
    transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(200,168,107,.33); filter:saturate(1.05); }

.chip{
    display:inline-block; border:1px solid rgba(200,168,107,.4); color:var(--gold);
    padding:6px 12px; border-radius:999px; font-size:.85rem; letter-spacing:.02em; background:rgba(200,168,107,.08);
}
.title-xl{ font-size:clamp(2rem, 2.8vw + 1rem, 3.4rem); line-height:1.05; margin:12px 0 10px; }
.title-lg{ font-size:clamp(1.5rem, 1.3vw + 1rem, 2.2rem); line-height:1.18; margin:0 0 8px; }
.lead{ color:#eaeaea; font-size:1.08rem; line-height:1.6; }
.muted{ color:var(--muted); }

.card{
    background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0));
    border:1px solid rgba(255,255,255,.06);
    border-radius:18px; padding:22px; backdrop-filter: blur(8px);
    box-shadow: 0 15px 60px rgba(0,0,0,.25);
}
.card.alt{
    background:linear-gradient(180deg, rgba(200,168,107,.06), rgba(200,168,107,.02));
    border-color:rgba(200,168,107,.22);
}
.divider{ height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); margin:18px 0; }

/* ===== Header (mismo color propuesto) ===== */
header.hero{
    position:relative; padding:28px 0 64px; overflow:hidden;
    background:
        radial-gradient(1200px 1200px at 120% -10%, #2b2b2f 0%, transparent 60%),
        radial-gradient(900px 900px at -20% 10%, #1e1e23 0%, transparent 55%),
        linear-gradient(180deg, var(--ink-2), #0a0b0d 60%, #0a0a0b 100%);
}
.hero-blob{
    position:absolute; inset:auto -10% -30% auto; width:800px; height:800px;
    background: radial-gradient(closest-side, rgba(200,168,107,.18), rgba(200,168,107,0));
    filter:blur(30px); pointer-events:none;
}

.bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
.brand{ display:flex; align-items:center; gap:14px; }
.brand img{ width:130px; height:130px; object-fit:cover; border-radius:50%; border:1px solid rgba(200,168,107,.35); }
.brand .name{ font-weight:800; letter-spacing:.03em; color:#f7f2e6; }
.reg{
    display:flex; align-items:center; gap:10px; font-weight:700; color:var(--gold);
    background:rgba(200,168,107,.08); border:1px solid rgba(200,168,107,.35);
    padding:8px 14px; border-radius:999px;
}
.wrap{ display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center; }

/* Flags y tabla de tasas */
.flags{ display:flex; gap:14px; flex-wrap:wrap; }
.flag{
    width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.18); overflow:hidden;
    background:#2a2d31 center/cover no-repeat;
}
.rates-table{ width:100%; border-collapse:collapse; margin-top:12px; }
.rates-table th, .rates-table td{
    padding:12px 10px; border-bottom:1px dashed rgba(255,255,255,.08);
    text-align:left; font-size:.98rem;
}
.rates-table th{ color:#cfcfcf; font-weight:700; }
.rates-table td .flag{ transform:translateY(6px); margin-right:8px; display:inline-block; }
.pill{ font-weight:700; color:#0a0a0a; background:linear-gradient(135deg, var(--gold), var(--gold-2)); padding:6px 10px; border-radius:999px; font-size:.82rem; }

/* ===== Fondos oscuros distintos por sección ===== */

/* Servicios: gris carbón liso */
#servicios{
    background: linear-gradient(180deg, #14161b 0%, #0f1116 100%);
}

/* Referencia (iframe): gris azulado con viñeta radial */
#referencia{
    background:
        radial-gradient(800px 500px at 85% 0%, rgba(60,72,92,.25) 0%, rgba(60,72,92,0) 60%),
        linear-gradient(180deg, #11141a 0%, #0d0f14 100%);
}

/* Sucursales: leve tinte dorado muy sutil */
#sucursales{
    background:
        radial-gradient(900px 600px at -10% 10%, rgba(200,168,107,.08) 0%, rgba(200,168,107,0) 55%),
        linear-gradient(180deg, #15161a 0%, #0f1014 100%);
}

/* Contacto: textura suave con dos radiales */
#contacto{
    background:
        radial-gradient(700px 480px at 20% 10%, rgba(90,96,110,.2) 0%, rgba(90,96,110,0) 55%),
        radial-gradient(700px 520px at 100% 10%, rgba(48,52,64,.25) 0%, rgba(48,52,64,0) 60%),
        linear-gradient(180deg, #121318 0%, #0c0d11 100%);
}

/* Footer / Únete: distinto pero consistente */
#unete{
    background:
        linear-gradient(180deg, rgba(200,168,107,.06), rgba(200,168,107,0) 40%),
        linear-gradient(180deg, #101115 0%, #0a0a0c 100%);
    padding-top:64px; padding-bottom:70px;
}

/* Iframe wrap */
.iframe-wrap{
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px; overflow:hidden; background:#0f1014;
    box-shadow:0 12px 40px rgba(0,0,0,.25);
}
.iframe-wrap header{
    display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:rgba(255,255,255,.02);
    border-bottom:1px solid rgba(255,255,255,.06);
}
.iframe-wrap iframe{ width:100%; height:520px; border:0; }

.foot-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:24px; }

/* Responsivo */
@media (max-width: 980px){
    .wrap{ grid-template-columns:1fr; }
    .foot-grid{ grid-template-columns:1fr; }
}



/* === Fondos con contraste drástico (white → black) === */

/* Servicios: vertical fuerte de claro a negro */
#servicios{
    background:
        linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(20,20,22,0.75) 35%, #000 100%);
}

/* Referencia (iframe): diagonal extrema con viñeta */
#referencia{
    background:
        radial-gradient(1000px 700px at 80% 0%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.00) 55%),
        linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(22,22,24,0.85) 40%, #000 100%);
}

/* Sucursales: “corte” suave pero muy oscuro */
#sucursales{
    background:
        linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(32,32,36,0.85) 42%, #000 100%);
}

/* Contacto: patrón alto contraste sobre base negra */
#contacto{
    background:
        repeating-linear-gradient(180deg,
            rgba(255,255,255,0.10) 0px, rgba(255,255,255,0.10) 2px,
            rgba(0,0,0,0.00) 2px, rgba(0,0,0,0.00) 10px
        ),
        linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(18,18,20,0.9) 45%, #000 100%);
}
#contacto a{
    color: white;
}

/* Footer / Únete: negro absoluto con halo dorado sutil */
#unete{
    background:
        radial-gradient(900px 600px at 15% 0%, rgba(200,168,107,0.18) 0%, rgba(200,168,107,0.00) 60%),
        linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(16,16,18,0.92) 40%, #000 100%);
    padding-top:64px; padding-bottom:70px;
}