:root{
  /* Pastel fintech palette (trust + modern) */
  --ink: #0b1220;
  --ink-2: #111827;
  --muted: #5b667a;

  --p-1: #e9f3ff; /* powder blue */
  --p-2: #ecfbf4; /* mint */
  --p-3: #fff0f4; /* blush */
  --p-4: #f4f1ff; /* lavender */
  --p-5: #fff7e6; /* pastel amber */
  --p-6: #a7f3d0; /*Verde */

  --primary: #2563eb;
  --primary-2: #1d4ed8;

  --card: rgba(255,255,255,.78);
  --glass: rgba(255,255,255,.55);
  --border: rgba(17,24,39,.10);

  --shadow: 0 18px 45px rgba(17,24,39,.12);
  --radius: 18px;

  --navH: 74px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: #ffffff;
  padding-top: var(--navH);
}

a{ text-decoration: none; }
.object-fit-cover{ object-fit: cover; }

.nav-glass{
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.70);
  border-bottom: 1px solid rgba(17,24,39,.08);
  height: var(--navH);
}
.navbar-brand .brand-mark{
  width: 26px; height: 26px;
  border-radius: 9px;
  background: linear-gradient(135deg, #7dd3fc, #a7f3d0, #c4b5fd);
  box-shadow: 0 8px 18px rgba(37,99,235,.18);
  display:inline-block;
}
.nav-link{ color: var(--ink-2); }
.nav-link.active{ color: var(--primary) !important; }

.btn-primary{
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 12px 26px rgba(37,99,235,.18);
}
.btn-primary:hover{
  background: var(--primary-2);
  border-color: var(--primary-2);
}
.btn-outline-light{ border-color: rgba(255,255,255,.5); }

.hero-wrap{
  position: relative;
  min-height: calc(100vh - var(--navH));
  overflow: hidden;
  border-bottom: 1px solid rgba(17,24,39,.08);
}
.hero-video{
  position:absolute; inset:0;
}
.hero-video video{
  width:100%; height:100%;
  object-fit: cover;
  transform: scale(1.02);
}
.hero-overlay{
  position:absolute; inset:0;
  background: radial-gradient(80% 70% at 20% 15%, rgba(255,255,255,.0), rgba(11,18,32,.58) 55%, rgba(11,18,32,.76));
}
.hero-grain{
  position:absolute; inset:0;
  opacity:.12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.hero-content{
  position:relative;
  z-index: 2;
  padding: 64px 0 88px;
}

.hero-card{
  padding: 28px 26px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  color: #ffffff;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  font-size: .9rem;
}
.pill .dot{
  width: 8px; height: 8px; border-radius: 999px;
  background: #a7f3d0;
  box-shadow: 0 0 0 6px rgba(167,243,208,.18);
}

.hero-metrics{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
}
.metric{
  min-width: 130px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
}
.metric .k{ font-weight: 700; letter-spacing: .3px; }
.metric .v{ opacity: .85; font-size: .92rem; }

.hero-float{
  display:flex;
  justify-content: flex-end;
}
.glass-card{
  width: min(420px, 100%);
  padding: 18px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.20);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 55px rgba(0,0,0,.15);
  backdrop-filter: blur(10px);
  color: #fff;
}
.mini-bars{
  display:flex; gap: 8px; align-items:flex-end;
  height: 54px;
}
.mini-bars span{
  width: 10px; border-radius: 8px;
  background: #fff7e6;
  display:inline-block;
  height: 20%;
}
.mini-bars span:nth-child(2){ height: 55%; }
.mini-bars span:nth-child(3){ height: 35%; }
.mini-bars span:nth-child(4){ height: 80%; }
.mini-bars span:nth-child(5){ height: 48%; }

.scroll-cue{
  position:absolute;
  left:50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 34px; height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top: 10px;
  z-index: 3;
}
.scroll-cue span{
  width: 6px; height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  animation: scrollDot 1.25s infinite ease-in-out;
}
@keyframes scrollDot{
  0%{ transform: translateY(0); opacity:.65; }
  60%{ transform: translateY(14px); opacity:1; }
  100%{ transform: translateY(0); opacity:.65; }
}

.section{
  padding: 88px 0;
}
.section-soft{
  background: #fff;
}
.section-card{
  position: relative;
}
.pastel-1{ background: var(--p-1); }
.pastel-2{ background: var(--p-2); }
.pastel-3{ background: var(--p-3); }
.pastel-4{ background: var(--p-4); }
.pastel-5{ background: var(--p-5); }


/* Subtle decorative blobs */
.section-card::before{
  content:"";
  position:absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(37,99,235,.18), rgba(37,99,235,0) 60%);
  filter: blur(2px);
  top: -130px;
  right: -140px;
  pointer-events:none;
}
.section-card::after{
  content:"";
  position:absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(34,197,94,.20), rgba(34,197,94,0) 60%);
  bottom: -120px;
  left: -120px;
  pointer-events:none;
}

.content-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
}
.eyebrow{
  font-size: .86rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(17,24,39,.68);
  margin-bottom: 10px;
}
.tag-row{ display:flex; gap: 10px; flex-wrap: wrap; }
.tag{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(17,24,39,.10);
  font-size: .9rem;
}

.media-frame{
  border-radius: var(--radius);
  overflow:hidden;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: var(--shadow);
  min-height: 320px;
}
.shadow-soft{ box-shadow: 0 18px 55px rgba(17,24,39,.14); }

.checklist{
  list-style:none;
  padding-left: 0;
  margin: 0;
}
.checklist li{
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  color: rgba(17,24,39,.80);
}
.checklist li::before{
  content:"";
  position:absolute;
  left:0; top: 6px;
  width: 16px; height: 16px;
  border-radius: 6px;
  background: rgba(37,99,235,.18);
  border: 1px solid rgba(37,99,235,.28);
  box-shadow: 0 8px 16px rgba(37,99,235,.12);
}
.checklist li::after{
  content:"";
  position:absolute;
  left: 5px; top: 10px;
  width: 6px; height: 3px;
  border-left: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(-45deg);
}

.quote-card{
  border-radius: var(--radius);
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(17,24,39,.10);
  padding: 22px;
  box-shadow: var(--shadow);
}

.stat-card{
  border-radius: var(--radius);
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(17,24,39,.10);
  padding: 22px;
  box-shadow: 0 14px 40px rgba(17,24,39,.12);
  height: 100%;
}
.stat-k{
  font-weight: 700;
  margin-bottom: 8px;
}
.stat-v{
  color: rgba(17,24,39,.75);
}

.insight-card{
  display:block;
  border-radius: var(--radius);
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(17,24,39,.10);
  padding: 22px;
  box-shadow: 0 14px 40px rgba(17,24,39,.10);
  transition: transform .2s ease, box-shadow .2s ease;
  color: var(--ink);
  height: 100%;
}
.insight-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 65px rgba(17,24,39,.14);
}
.insight-meta{ font-size: .86rem; color: rgba(17,24,39,.55); margin-bottom: 8px; }
.insight-title{ font-weight: 650; font-size: 1.05rem; margin-bottom: 10px; }
.insight-cta{ color: var(--primary); font-weight: 600; }

.form-card{
  border-radius: var(--radius);
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(17,24,39,.10);
  padding: 26px;
  box-shadow: var(--shadow);
}

.footer{
  padding: 34px 0;
  border-top: 1px solid rgba(17,24,39,.08);
}

/* Parallax helper: background + subtle movement (JS sets translate) */
.parallax{
  will-change: transform;
}

/* Responsive tweaks */
@media (max-width: 991px){
  body{ padding-top: 70px; }
  :root{ --navH: 70px; }
  .hero-content{ padding: 54px 0 86px; }
  .media-frame{ min-height: 240px; }
}

/*Titulos especiales */
.text-dorado{ color: #fff7e6; }

/* ===== Parallax v3 (more visible) =====
   Why you didn't see it before:
   - AOS applies transforms to animated elements.
   - This parallax avoids fighting AOS by animating inner layers (CSS vars) + wrapped media (.parallax-inner).
   - If you want it EVEN stronger, increase the multipliers inside assets/js/main.js.
*/
.section-card{
  position: relative;
  overflow: hidden; /* hide drifting layers */
}

/* Make the decorative blobs actually move with CSS variables */
.section-card::before{
  transform: translate3d(var(--p1x, 0px), var(--p1y, 0px), 0);
  opacity: .95;
}
.section-card::after{
  transform: translate3d(var(--p2x, 0px), var(--p2y, 0px), 0);
  opacity: .90;
}

/* Media parallax layer (JS wraps inner content into .parallax-inner) */
.media-frame .parallax-inner{
  width: 100%;
  height: 100%;
  transform: translate3d(0, var(--mediaY, 0px), 0) scale(1.06);
  will-change: transform;
}

/* Ensure inner media fills nicely */
.media-frame .parallax-inner > img,
.media-frame .parallax-inner > video,
.media-frame .parallax-inner > iframe{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Extra depth: subtle floating highlights */
.section-card .content-card{
  position: relative;
}
.section-card .content-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: var(--radius);
  pointer-events:none;
  background: radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%);
  opacity: var(--glow, .35);
  transform: translate3d(var(--glowX,0px), var(--glowY,0px), 0);
  will-change: transform, opacity;
}

/* ===== Parallax v4 (guaranteed visible + works with Bootstrap .ratio) =====
   This version adds:
   - Background mesh that shifts (very noticeable)
   - Blob movement (bigger deltas)
   - Media drift without breaking Bootstrap ratio (wrapper is absolutely positioned)
*/
.section-card{
  position: relative;
  overflow: hidden;
  /* subtle animated mesh layer */
  background-image:
    radial-gradient(900px 500px at 15% 10%, rgba(37,99,235,.16), rgba(37,99,235,0) 60%),
    radial-gradient(800px 460px at 85% 30%, rgba(34,197,94,.16), rgba(34,197,94,0) 60%),
    radial-gradient(700px 420px at 30% 90%, rgba(196,181,253,.18), rgba(196,181,253,0) 60%);
  background-size: 120% 120%;
  background-position: 50% calc(50% + var(--bgY, 0px));
}

/* Decorative blobs move via vars */
.section-card::before{
  transform: translate3d(var(--p1x, 0px), var(--p1y, 0px), 0);
  opacity: 1;
}
.section-card::after{
  transform: translate3d(var(--p2x, 0px), var(--p2y, 0px), 0);
  opacity: .95;
}

/* IMPORTANT: Bootstrap ratio requires absolutely-positioned child.
   We wrap media in .parallax-inner and make it absolute to keep the ratio working. */
.media-frame{
  position: relative;
}
.media-frame .parallax-inner{
  position: absolute;
  inset: 0;
  transform: translate3d(0, var(--mediaY, 0px), 0) scale(1.08);
  will-change: transform;
}
.media-frame .parallax-inner > img,
.media-frame .parallax-inner > video,
.media-frame .parallax-inner > iframe{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Floating highlight on cards */
.section-card .content-card{
  position: relative;
}
.section-card .content-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: var(--radius);
  pointer-events:none;
  background: radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,.60), rgba(255,255,255,0) 55%);
  opacity: var(--glow, .40);
  transform: translate3d(var(--glowX,0px), var(--glowY,0px), 0);
  will-change: transform, opacity;
}

/* Quick visual confirmation that JS is running (body gets this class) */
body.parallax-on .nav-glass{
  box-shadow: 0 10px 30px rgba(17,24,39,.10);
}

.object-fit-contain{
  object-fit: contain;
}