/* Meridia Group Bank — custom layer on top of Tailwind (Play CDN).
   Palette: navy #0B1B33 · gold #C6A254 · white background everywhere. */

:root {
    --navy: #0B1B33;
    --navy-600: #16294a;
    --gold: #C6A254;
    --gold-dark: #A9863B;
    --ring: rgba(11, 27, 51, .12);
    --canvas: #eef1f6;          /* premium off-white page ground */
    --canvas-soft: #f5f7fa;
    --surface: #ffffff;
    --hairline: #e6e9f0;
}

* { -webkit-font-smoothing: antialiased; }

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--navy);
    background-color: var(--canvas);
    background-image:
        radial-gradient(60rem 40rem at 100% -5%, rgba(198, 162, 84, .08), transparent 60%),
        radial-gradient(52rem 40rem at -10% 0%, rgba(11, 27, 51, .05), transparent 55%);
    background-attachment: fixed;
}

/* ---- focus visibility ------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ---- buttons ------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-weight: 600; font-size: .925rem; line-height: 1;
    padding: .75rem 1.25rem; border-radius: .7rem;
    transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease, border-color .15s;
    cursor: pointer; white-space: nowrap; border: 1px solid transparent;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-600); box-shadow: 0 10px 24px -12px rgba(11,27,51,.5); }
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: var(--gold-dark); color: #fff; }
.btn-outline { background: #fff; color: var(--navy); border-color: #d6dbe4; }
.btn-outline:hover { border-color: var(--navy); }
.btn-ghost { background: transparent; color: var(--navy); }
.btn-ghost:hover { background: #f1f4f9; }
.btn-soft { background: #eef1f6; color: var(--navy); }
.btn-soft:hover { background: #e3e8f0; }
.btn-danger { background: #e11d48; color: #fff; }
.btn-danger:hover { background: #be123c; }
.btn-sm { padding: .5rem .85rem; font-size: .82rem; border-radius: .6rem; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* ---- form controls ---------------------------------------------- */
.field-label { display:block; font-weight:600; font-size:.85rem; color:#334155; margin-bottom:.35rem; }
.input, .select, .textarea {
    width: 100%; background: #fff; border: 1px solid #d6dbe4; border-radius: .65rem;
    padding: .7rem .85rem; font-size: .95rem; color: var(--navy);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder, .textarea::placeholder { color: #94a3b8; }
.input:focus, .select:focus, .textarea:focus {
    border-color: var(--navy); box-shadow: 0 0 0 3px rgba(11,27,51,.08); outline: none;
}
.input.has-error, .select.has-error, .textarea.has-error { border-color: #e11d48; }

/* ---- unit toggle (years / months on the credit term field) ---- */
.term-unit { display:inline-flex; gap:2px; padding:3px; border-radius:.6rem; background:#f1f5f9; }
.term-unit-btn {
    border:0; cursor:pointer; padding:.3rem .8rem; border-radius:.45rem;
    font-size:.78rem; font-weight:600; color:#64748b; background:transparent;
    transition:background .15s, color .15s, box-shadow .15s;
}
.term-unit-btn:hover { color:#0b1b33; }
.term-unit-btn.is-active { background:#fff; color:#0b1b33; box-shadow:0 1px 2px rgba(15,23,42,.12); }

/* ---- card ------------------------------------------------------ */
.card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 1.1rem;
    box-shadow:
        0 1px 1px rgba(11, 27, 51, .04),
        0 6px 16px -10px rgba(11, 27, 51, .12),
        0 24px 48px -32px rgba(11, 27, 51, .18);
}

/* ---- floating header bar (BBVA-style) ------------------------- */
.topbar-floating {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 1rem;
    box-shadow:
        0 1px 2px rgba(11, 27, 51, .05),
        0 18px 40px -28px rgba(11, 27, 51, .28);
}

/* ---- badges -------------------------------------------------- */
.badge {
    display:inline-flex; align-items:center; gap:.35rem; font-weight:600; font-size:.72rem;
    padding:.2rem .6rem; border-radius:999px; letter-spacing:.01em;
    text-transform: capitalize; ring: 1px;
}

/* ---- hero backdrop ---------------------------------------- */
.hero-surface {
    background:
        radial-gradient(60rem 40rem at 85% -10%, rgba(198, 162, 84, .16), transparent 55%),
        radial-gradient(50rem 40rem at 0% 0%, rgba(11, 27, 51, .06), transparent 50%),
        linear-gradient(180deg, #ffffff 0%, #ffffff 42%, var(--canvas) 100%);
}

/* ambient hero video: green source is desaturated + warmed to gold, kept faint */
.hero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .8;
    /* source clip is gold-tinted particles on near-black: lift the blacks so the
       dark ground reads as a soft warm grey and the particles stay prominent */
    filter: grayscale(1) sepia(.55) saturate(1.5) brightness(1.24) contrast(.96);
    pointer-events: none;
}
.hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(58rem 40rem at 88% -12%, rgba(198, 162, 84, .18), transparent 55%),
        linear-gradient(100deg, #ffffff 0%, rgba(255, 255, 255, .92) 26%, rgba(255, 255, 255, .5) 52%, rgba(255, 255, 255, .34) 78%, rgba(255, 255, 255, .5) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0) 58%, var(--canvas) 100%);
}
@media (max-width: 1023px) {
    .hero-scrim { background:
        linear-gradient(180deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .9) 55%, var(--canvas) 100%); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-video { display: none; }
}

/* ---- progressive transfer bar --------------------------- */
.progress-track { background:#eef1f6; border-radius:999px; overflow:hidden; }
.progress-fill {
    position: relative;
    height:100%; border-radius:999px;
    background: linear-gradient(90deg, var(--navy), var(--gold));
    transition: width .6s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
/* animated state: drifting stripes + a light sweep while a transfer is processing */
.progress-fill.is-animated {
    background-image:
        linear-gradient(90deg, var(--navy), var(--gold)),
        repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 8px, rgba(255,255,255,0) 8px 20px);
    background-size: 100% 100%, 34px 34px;
    background-repeat: no-repeat, repeat;
    animation: progress-stripes 1.1s linear infinite;
}
.progress-fill.is-animated::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 15%, rgba(255,255,255,.55) 48%, transparent 82%);
    transform: translateX(-120%);
    animation: progress-sweep 2s cubic-bezier(.45,0,.25,1) infinite;
}
@keyframes progress-stripes { to { background-position: 0 0, -34px 0; } }
@keyframes progress-sweep { 0% { transform: translateX(-120%); } 60%,100% { transform: translateX(220%); } }
@media (prefers-reduced-motion: reduce) {
    .progress-fill.is-animated { animation: none; }
    .progress-fill.is-animated::after { display: none; }
}

/* ---- sidebar link (connected areas) -------------------- */
.side-link {
    display:flex; align-items:center; gap:.75rem; padding:.6rem .8rem; border-radius:.6rem;
    color:#cbd5e1; font-weight:500; font-size:.92rem; transition: background-color .15s, color .15s;
}
.side-link:hover { background: rgba(255,255,255,.06); color:#fff; }
.side-link.is-active { background: rgba(198,162,84,.16); color:#fff; }
.side-link.is-active svg { color: var(--gold); }

/* ---- misc ------------------------------------------- */
.link-underline { position:relative; }
.link-underline::after {
    content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px;
    background: var(--gold); transition: width .2s ease;
}
.link-underline:hover::after, .link-underline.is-active::after { width:100%; }

.fade-in { animation: fadeIn .4s ease both; }
@keyframes fadeIn { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform:none; } }

/* ---- scroll reveal ------------------------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s cubic-bezier(.2, .6, .2, 1), transform .6s cubic-bezier(.2, .6, .2, 1);
    will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---- landing service cards --------------------------------- */
.svc-card {
    transition: transform .28s cubic-bezier(.2, .6, .2, 1), box-shadow .28s ease, border-color .28s ease;
}
.svc-card:hover {
    transform: translateY(-5px);
    border-color: rgba(11, 27, 51, .16);
    box-shadow: 0 1px 2px rgba(11, 27, 51, .04), 0 24px 44px -24px rgba(11, 27, 51, .28);
}
.svc-arrow { transition: transform .28s cubic-bezier(.2, .6, .2, 1); }
.svc-card:hover .svc-arrow { transform: translateX(5px); }

/* ---- premium bank-card visual ----------------------------- */
.bank-card {
    background:
        radial-gradient(120% 140% at 0% 0%, #1c2f52 0%, transparent 45%),
        radial-gradient(120% 140% at 100% 100%, #0a1424 0%, transparent 45%),
        linear-gradient(135deg, #12233f 0%, #0b1b33 55%, #0a1526 100%);
}
.bank-card::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 40%, rgba(198, 162, 84, .18) 50%, transparent 60%);
    pointer-events: none;
}

/* ---- interactive 3D card viewer ---------------------------- */
.card3d-scene { perspective: 1200px; perspective-origin: 50% 30%; }
.card3d {
    position: relative;
    width: 340px; max-width: 76vw;
    aspect-ratio: 1.586 / 1;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    cursor: grab; touch-action: none;
}
.card3d.is-grabbing { cursor: grabbing; }
.card3d.card3d-snapping { transition: transform .55s cubic-bezier(.2, .75, .2, 1); }
.card3d-face {
    position: absolute; inset: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.card3d-face--back { transform: rotateY(180deg); }
.card3d-inner {
    height: 100%;
    border-radius: 1.05rem; overflow: hidden;
    box-shadow: 0 45px 80px -30px rgba(11, 27, 51, .6);
}
.card3d-chip {
    width: 44px; height: 33px; border-radius: 6px;
    background: linear-gradient(135deg, #e7d9a6 0%, #b5923f 42%, #efe4bd 62%, #a8842f 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), inset 0 -6px 8px -4px rgba(0, 0, 0, .35);
}
.card3d-magstripe { height: 46px; background: #05060a; }
.card3d-sign { background: repeating-linear-gradient(45deg, #fff, #fff 7px, #eef1f6 7px, #eef1f6 14px); }
@media (prefers-reduced-motion: reduce) { .card3d { transition: none !important; } }

[x-cloak], .js-hidden { display: none !important; }

/* keep ambient decorative blurs from ever widening the page */
main > section { overflow-x: clip; }

@media print {
    .no-print { display: none !important; }
    body { background: #fff; }
}