body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:root{
  --blue:#1f3b75;
  --blue2:#16325f;
  --accent:#F4A300;
  --ink:#0f172a;
  --muted:#6b7280;
  --ring:rgba(244,163,0,.45);
  --card:rgba(15,23,42,.06);

  /* motion */
  --ease: cubic-bezier(.2,.9,.2,1);
  --ease2: cubic-bezier(.16,1,.3,1);
  --t1: .25s;
  --t2: .55s;
}

*{scroll-behavior:smooth}
::selection{background:rgba(244,163,0,.28)}

/* ================== MOTION / ACCESSIBILITY ================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* micro-transitions base */
a,button,.btn,.card,.tCard,.hb,.chip,.dlBadge,.aXBtn,.fXBtn,
.btnSign,.btnHeroPrimary,.btnHeroGhost,.cDl,.cBtn{
  transition:
    transform var(--t1) var(--ease),
    box-shadow var(--t1) var(--ease),
    background var(--t1) var(--ease),
    border-color var(--t1) var(--ease),
    color var(--t1) var(--ease),
    opacity var(--t1) var(--ease),
    filter var(--t1) var(--ease);
}

:focus-visible{
  outline:0;
  box-shadow:0 0 0 4px var(--ring);
  border-radius:12px;
}

/* reveal on scroll helper (JS añade .is-in) */
.reveal{
  opacity:0;
  transform:translateY(18px);
  filter:blur(6px);
  transition:
    opacity var(--t2) var(--ease2),
    transform var(--t2) var(--ease2),
    filter var(--t2) var(--ease2);
  will-change:transform,opacity,filter;
}
.reveal.is-in{
  opacity:1;
  transform:none;
  filter:none;
}
.reveal[data-reveal="left"]{transform:translateX(-18px);filter:blur(6px)}
.reveal[data-reveal="right"]{transform:translateX(18px);filter:blur(6px)}
.reveal[data-reveal="up"]{transform:translateY(22px);filter:blur(6px)}
.reveal[data-reveal="down"]{transform:translateY(-22px);filter:blur(6px)}
.reveal[data-delay="1"]{transition-delay:.06s}
.reveal[data-delay="2"]{transition-delay:.12s}
.reveal[data-delay="3"]{transition-delay:.18s}
.reveal[data-delay="4"]{transition-delay:.24s}
.reveal[data-delay="5"]{transition-delay:.30s}

/* ============================================================
   ================= HERO =================
============================================================ */
.hero{position:relative;background:#fff;overflow:hidden}
.heroBlue{position:absolute;inset:0 0 auto 0;height:58%;background:var(--blue);z-index:0}

/* sutil “respiración” del fondo para que se sienta vivo */
.heroBlue{animation:heroBreath 14s ease-in-out infinite}
@keyframes heroBreath{
  0%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
  100%{transform:translateY(0)}
}

.heroBlue:before{
  content:"";position:absolute;inset:0;opacity:.35;
  background:repeating-linear-gradient(to right,rgba(255,255,255,.10) 0 1px,transparent 1px 140px)
}
.heroBlue:after{
  content:"";position:absolute;inset:-220px -220px auto -220px;height:820px;
  background:
    radial-gradient(800px 400px at 20% 20%,rgba(244,163,0,.22),transparent 60%),
    radial-gradient(900px 520px at 85% 15%,rgba(255,255,255,.14),transparent 60%),
    radial-gradient(900px 520px at 70% 70%,rgba(0,0,0,.10),transparent 60%);
  animation:orbDrift 18s ease-in-out infinite;
  will-change:transform;
}
@keyframes orbDrift{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-14px,0)}
  100%{transform:translate3d(0,0,0)}
}

.heroInner{position:relative;z-index:1;color:#fff;padding:18px 0 54px}
.heroKicker{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.92);
  font-weight:900;
  box-shadow:0 14px 28px rgba(0,0,0,.12);
  transform:translateZ(0);
}
.heroKicker:before{
  content:"";width:10px;height:10px;border-radius:999px;
  background:rgba(244,163,0,.95);
  box-shadow:0 12px 22px rgba(244,163,0,.25);
}
.heroKicker:hover{transform:translateY(-2px)}

.hTitle{font-weight:900;letter-spacing:-1px;line-height:1;font-size:clamp(40px,5vw,84px);margin:14px 0 0}
.hSub{color:rgba(255,255,255,.80);max-width:760px;margin:16px auto 0;line-height:1.75;font-size:15px}

.heroBadges{margin-top:16px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.hb{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.92);
  font-weight:800;font-size:13px;
}
.hb .dot{
  width:8px;height:8px;border-radius:999px;
  background:rgba(244,163,0,.95);
  box-shadow:0 10px 18px rgba(244,163,0,.22);
}

/* float sutil en badges */
.hb{animation:badgeFloat 5.5s ease-in-out infinite}
.hb:nth-child(2){animation-delay:.5s}
.hb:nth-child(3){animation-delay:1s}
.hb:nth-child(4){animation-delay:1.5s}
@keyframes badgeFloat{
  0%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
  100%{transform:translateY(0)}
}

.lnk{color:rgba(255,255,255,.86)!important;font-weight:800;text-decoration:none;position:relative}
.lnk:after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:rgba(244,163,0,.9);border-radius:99px;transition:.2s}
.lnk:hover{color:#fff!important}
.lnk:hover:after{width:100%}

.btnSign{
  background:#fff;color:#1C2E4A;border:0;font-weight:900;border-radius:12px;padding:10px 16px;
  box-shadow:0 14px 28px rgba(0,0,0,.14);transition:.2s
}
.btnSign:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 20px 34px rgba(0,0,0,.18)}

.heroCtas .btnHeroPrimary,
.heroCtas .btnHeroGhost{display:inline-flex;align-items:center;justify-content:center;font-weight:900;text-decoration:none;border-radius:14px;padding:12px 16px;transition:.2s}
.btnHeroPrimary{
  background:linear-gradient(135deg,var(--accent),#ffcf6a);
  color:#1a1a1a;border:0;
  box-shadow:0 18px 40px rgba(244,163,0,.22);
}
.btnHeroPrimary:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 24px 52px rgba(244,163,0,.26)}
.btnHeroGhost{
  background:rgba(255,255,255,.10);
  color:#fff;border:1px solid rgba(255,255,255,.22);
}
.btnHeroGhost:hover{transform:translateY(-2px) scale(1.01);background:rgba(255,255,255,.14)}

.heroTrust{
  display:flex;align-items:center;justify-content:center;gap:10px;
  color:rgba(255,255,255,.78);
  font-weight:800;font-size:12.8px;
}
.heroTrust .shield{
  width:26px;height:26px;border-radius:10px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
}

/* phones */
.mock{margin-top:28px;display:flex;justify-content:center;gap:24px;align-items:flex-end}
.phone{
  width:230px;aspect-ratio:9/18;border-radius:38px;overflow:hidden;position:relative;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.10);
  box-shadow:0 28px 70px rgba(0,0,0,.28);
  transform:translateY(18px);
  animation:f 5s ease-in-out infinite;
  will-change:transform;
}
.phone.c{width:260px;transform:none;border-color:rgba(255,255,255,.38);box-shadow:0 34px 90px rgba(0,0,0,.34);animation-delay:.35s}
.phone.r{animation-delay:.7s}
.phone:before{content:"";position:absolute;top:12px;left:50%;transform:translateX(-50%);width:110px;height:22px;border-radius:999px;background:rgba(0,0,0,.35);opacity:.35;z-index:2}
.scr{position:absolute;inset:14px;border-radius:28px;overflow:hidden;border:1px solid rgba(255,255,255,.16);background:#0b1220}
.scr img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes f{0%{transform:translateY(0)}50%{transform:translateY(-14px)}100%{transform:translateY(0)}}
.phone.l,.phone.r{display:none}
@media(min-width:768px){.phone.r{display:block}}
@media(min-width:1200px){.phone.l{display:block}}
@media(max-width:480px){.phone{width:190px}.phone.c{width:220px}.heroBlue{height:62%}}

/* ================= ABOUT ================= */
.aboutX{background:#fff;position:relative;overflow:hidden}
.aXTitle{font-size:48px;font-weight:900;letter-spacing:-.7px;color:#111827}
.secLead{color:#6b7280;line-height:1.8;max-width:70ch;font-size:15.5px}
.aXH{font-size:40px;font-weight:900;line-height:1.05;color:#111827;margin:0 0 14px}
.aXP{color:#6b7280;line-height:1.9;font-size:16px;max-width:58ch;margin:0 0 18px}

.featureChips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:999px;
  background:rgba(31,59,117,.04);
  border:1px solid rgba(31,59,117,.12);
  color:#1f3b75;
  font-weight:900;font-size:13px;
}
.chip:hover{transform:translateY(-2px);background:rgba(31,59,117,.06)}

.dlBadge{
  display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff;text-decoration:none;font-weight:900;
  box-shadow:0 12px 28px rgba(31,59,117,.22);
  transition:.2s;border:1px solid rgba(255,255,255,.10)
}
.dlBadge:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 18px 34px rgba(31,59,117,.26)}

.aXBtn{
  display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff;text-decoration:none;font-weight:900;
  box-shadow:0 12px 28px rgba(31,59,117,.20);
  transition:.2s;border:1px solid rgba(255,255,255,.10)
}
.aXBtn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 18px 34px rgba(31,59,117,.26)}

.fXH{font-size:26px;font-weight:900;line-height:1.15;color:#111827;margin:0 0 12px}
.fXP{color:#6b7280;line-height:1.9;font-size:15.6px;max-width:58ch;margin:0 0 16px}
.fXBtn{
  display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:12px;
  border:1px solid rgba(31,59,117,.20);
  color:var(--blue);text-decoration:none;font-weight:900;transition:.2s;
  background:rgba(31,59,117,.03)
}
.fXBtn:hover{transform:translateY(-2px);box-shadow:0 14px 26px rgba(31,59,117,.10);background:rgba(31,59,117,.06)}

/* mock phone */
.mockWrap{position:relative;width:min(460px,100%);margin:auto}
.mockWrap.right .mockBlue{left:auto;right:40px}
.mockBlue{
  position:absolute;left:40px;top:132px;width:86%;height:270px;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  border-radius:16px;z-index:0;
  box-shadow:0 20px 50px rgba(31,59,117,.18);
  animation:mockGlow 8s ease-in-out infinite;
  will-change:transform,filter;
}
@keyframes mockGlow{
  0%{transform:translateY(0);filter:saturate(1)}
  50%{transform:translateY(-8px);filter:saturate(1.15)}
  100%{transform:translateY(0);filter:saturate(1)}
}

.mockPhone{
  position:relative;z-index:2;width:min(360px,92vw);margin:auto;border-radius:56px;background:#0b1220;
  overflow:hidden;box-shadow:0 46px 90px rgba(0,0,0,.16),0 12px 30px rgba(0,0,0,.10);
  border:10px solid #fff;animation:pf 6s ease-in-out infinite;
  will-change:transform;
}
.mockPhone:after{
  content:"";position:absolute;inset:-6px;pointer-events:none;border-radius:60px;
  border:2px solid rgba(244,163,0,.18);opacity:.75
}

.mockPhone img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  aspect-ratio:auto;
}
.mockNotch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:120px;height:26px;border-radius:999px;background:#0b1220;opacity:.95;z-index:3}
@keyframes pf{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}

.scribX{position:absolute;right:-150px;top:-120px;width:560px;height:560px;pointer-events:none;opacity:.9}
@media(max-width:992px){
  .aXTitle{font-size:40px}
  .aXH{font-size:32px}
  .mockBlue{top:122px;height:248px;left:22px;right:auto;width:88%}
  .scribX{right:-240px;top:-160px;opacity:.6}
}

/* ================= TESTIMONIALS + FAQ ================= */
.tX{background:#fff;position:relative;overflow:hidden}
.tTitle{font-size:48px;font-weight:900;letter-spacing:-.7px;color:#111827;margin:0}
.tSub{color:#6b7280;max-width:64ch;line-height:1.7;margin-top:10px}
.tCard{
  background:#fff;border:1px solid rgba(15,23,42,.06);
  border-radius:16px;padding:18px 18px 16px;
  box-shadow:0 18px 40px rgba(0,0,0,.06);
  transition:.2s;min-height:150px;position:relative
}
.tCard:before{
  content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;
  border:2px solid rgba(244,163,0,.0);transition:.2s
}
.tCard:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 30px 80px rgba(0,0,0,.10)}
.tCard:hover:before{border-color:rgba(244,163,0,.22)}
.tText{color:#374151;line-height:1.85;margin:0 0 14px;font-size:14.9px}
.tUser{display:flex;gap:12px;align-items:center}
.tAvatar{
  width:42px;height:42px;border-radius:999px;display:grid;place-items:center;
  background:rgba(31,59,117,.10);color:#1f3b75;font-weight:900
}
.tName{font-weight:900;color:#111827;line-height:1}
.tRole{color:#6b7280;font-size:12.5px;margin-top:2px}
.tSep{display:flex;align-items:center;justify-content:center;gap:12px}
.tSep span{width:34px;height:2px;background:rgba(31,59,117,.22);border-radius:999px}
.tSep i{width:8px;height:8px;border-radius:999px;background:rgba(244,163,0,.85);display:inline-block;box-shadow:0 8px 16px rgba(244,163,0,.25)}

/* accordion */
.tAcc .tItem{border:0;margin:10px 0;background:transparent}
.tAcc .tBtn{
  background:#fff!important;
  border:1px solid rgba(15,23,42,.06)!important;
  border-radius:14px!important;
  box-shadow:0 14px 36px rgba(0,0,0,.05);
  padding:16px 16px!important;
  font-weight:900;color:#111827!important
}
.tAcc .accordion-button::after{display:none}
.tPlus{
  margin-left:auto;width:32px;height:32px;border-radius:12px;display:grid;place-items:center;
  border:1px solid rgba(31,59,117,.18);color:var(--blue);
  font-weight:900;transition:.2s;background:rgba(31,59,117,.04)
}
.tAcc .accordion-button:not(.collapsed) .tPlus{
  transform:rotate(45deg);
  background:rgba(244,163,0,.10);
  border-color:rgba(244,163,0,.28);
  color:#b35f00
}
.tBody{
  background:#fff;border:1px solid rgba(15,23,42,.06);
  border-top:0;border-radius:0 0 14px 14px;
  box-shadow:0 18px 46px rgba(0,0,0,.06);
  color:#4b5563;line-height:1.8
}
.faqScrib{position:absolute;right:-180px;top:40px;width:560px;height:560px;pointer-events:none;opacity:.9;z-index:0}
#faq,.tAcc{position:relative;z-index:1}
@media(max-width:992px){.tTitle{font-size:40px}.faqScrib{right:-260px;opacity:.6}}

/* ================= CONTACT ================= */
.cX{background:#fff;position:relative;overflow:hidden}
.cTitle{font-size:52px;font-weight:900;letter-spacing:-.8px;line-height:1;color:#111827;margin:0}
.cSub{color:#6b7280;max-width:60ch;line-height:1.75;margin-top:12px}

.cDl{
  display:inline-flex;flex-direction:column;gap:2px;
  padding:14px 18px;border-radius:14px;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff;text-decoration:none;font-weight:900;
  box-shadow:0 14px 34px rgba(31,59,117,.22);
  border:1px solid rgba(255,255,255,.10);
  transition:.2s
}
.cDl small{font-weight:700;opacity:.75}
.cDl:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 20px 40px rgba(31,59,117,.26)}

.cMiniNote{display:flex;flex-wrap:wrap;gap:8px}
.badgeSoft,.badgeSoftAlt{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:999px;
  font-weight:900;font-size:13px;
  border:1px solid rgba(15,23,42,.08);
}
.badgeSoft{
  background:rgba(244,163,0,.14);
  color:#8a4a00;
  border-color:rgba(244,163,0,.22);
}
.badgeSoftAlt{
  background:rgba(31,59,117,.06);
  color:var(--blue);
  border-color:rgba(31,59,117,.14);
}

.cPhoneWrap{width:min(420px,100%);margin:auto}
.cPhone{
  position:relative;border-radius:56px;background:#0b1220;overflow:hidden;
  border:10px solid #fff;
  box-shadow:0 46px 90px rgba(0,0,0,.16),0 12px 30px rgba(0,0,0,.10);
  animation:pf 6s ease-in-out infinite;
  will-change:transform;
}
.cNotch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:120px;height:26px;border-radius:999px;background:#0b1220;opacity:.95;z-index:3}
.cPhone img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  aspect-ratio:auto;
}
.cScrib{position:absolute;right:-180px;top:-110px;width:560px;height:560px;pointer-events:none;opacity:.8}

.cBar{
  background:linear-gradient(135deg,#1f5ef1,var(--blue));
  box-shadow:0 18px 60px rgba(31,59,117,.18);
  color:#fff;position:relative;overflow:hidden
}
.cBar:after{
  content:"";position:absolute;right:-140px;bottom:-140px;width:360px;height:360px;border-radius:50%;
  background:rgba(255,255,255,.10)
}
.cBarTitle{font-weight:900;font-size:22px}
.cBarSub{opacity:.85;line-height:1.7;margin-top:6px}
.cInput{border:0;border-radius:12px;padding:12px 12px}
.cInput:focus{box-shadow:0 0 0 4px var(--ring)}
.cBtn{
  border:0;border-radius:12px;padding:12px 14px;font-weight:900;
  background:#fff;color:#111827;box-shadow:0 10px 24px rgba(0,0,0,.16);
  transition:.2s
}
.cBtn:hover{transform:translateY(-2px) scale(1.01)}

.cBrand{font-weight:900;font-size:20px;color:#111827}
.cFootText{color:#6b7280;line-height:1.7;margin-top:10px}
.cTag{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(31,59,117,.06);color:var(--blue);font-weight:900}
.cHead{font-weight:900;color:#111827;margin-bottom:10px}
.cLink,.cMiniLink{display:block;color:#6b7280;text-decoration:none;margin:8px 0}
.cLink:hover,.cMiniLink:hover{color:#111827}
.cCopy{color:#9ca3af;font-size:13px;border-top:1px solid rgba(15,23,42,.06)}
@media(max-width:992px){.cTitle{font-size:44px}.cScrib{right:-260px;opacity:.55}}


/* =========================================================
   NAVBAR FLOTANTE PREMIUM
========================================================= */
.navFloat{
  padding: 10px 0;
  background: rgba(15, 23, 42, .18);
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  z-index: 999;
}

.navFloat.scrolled{
  background: rgba(15, 23, 42, .68);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

/* Ajuste para que el hero no quede debajo del navbar */
.heroSpacer{height:64px}
@media(max-width:991px){ .heroSpacer{height:76px} }

/* Links del navbar (premium) */
.navLnk{
  color: rgba(255,255,255,.84) !important;
  font-weight: 900;
  position: relative;
  padding: 10px 12px !important;
  border-radius: 12px;
  transition: background .2s var(--ease), transform .2s var(--ease), color .2s var(--ease);
}

.navLnk:hover{
  color:#fff !important;
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
}

/* active section (JS agrega .active) */
.navLnk.active{
  color:#fff !important;
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(244,163,0,.35);
}

/* Botón signup dentro del navbar */
.btnSignNav{
  padding: 10px 16px;
  border-radius: 14px;
}

/* Toggler premium (Bootstrap icon) */
.navToggler{
  border: 1px solid rgba(255,255,255,.20) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.14);
}
.navbar-toggler-icon{
  filter: invert(1);
  opacity: .9;
}

/* collapse panel en móvil: tipo “glass sheet” */
@media(max-width:991px){
  .navbar-collapse{
    margin-top: 10px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(15, 23, 42, .55);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 60px rgba(0,0,0,.22);
  }
}

/* progress bar premium */
.navProgress{
  position:absolute;
  left:0; right:0; bottom:-1px;
  height: 2px;
  background: rgba(255,255,255,.08);
  overflow:hidden;
}
.navProgress span{
  display:block;
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(244,163,0,.95), rgba(255,255,255,.55));
  box-shadow: 0 10px 22px rgba(244,163,0,.20);
  transition: width .08s linear;
}

/* Extra premium: el hero title aparece más “pro” */
.hTitle{
  text-shadow: 0 18px 44px rgba(0,0,0,.25);
}

/* =========================================================
   FLOATING DOWNLOAD CTA (pro)
========================================================= */
.floatCta{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:1200;

  display:flex;
  align-items:center;
  gap:12px;

  padding:12px 14px;
  border-radius:18px;
  text-decoration:none;

  background: rgba(15,23,42,.65);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: 0 22px 70px rgba(0,0,0,.22);
  color:#fff;

  opacity:0;
  transform: translateY(14px) scale(.98);
  pointer-events:none;

  transition:
    opacity .28s var(--ease),
    transform .28s var(--ease),
    box-shadow .28s var(--ease),
    background .28s var(--ease);
}

.floatCta.show{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.floatCta:hover{
  transform: translateY(-3px) scale(1.01);
  background: rgba(15,23,42,.78);
  box-shadow: 0 28px 90px rgba(0,0,0,.28);
}

.floatIcon{
  width:44px;height:44px;
  border-radius:16px;
  display:grid;place-items:center;
  font-weight:900;
  background: linear-gradient(135deg, var(--accent), #ffcf6a);
  color:#1a1a1a;
  box-shadow: 0 18px 40px rgba(244,163,0,.22);
}

.floatTxt strong{display:block;font-weight:900;line-height:1}
.floatTxt small{display:block;opacity:.82;font-weight:800;margin-top:2px}

/* en móvil que no estorbe tanto */
@media(max-width:420px){
  .floatTxt{display:none}
  .floatCta{border-radius:16px;padding:10px}
  .floatIcon{width:46px;height:46px}
}