/* ============================================================
   CASH WALLET — Landing v3 · Manual de marca oficial
   Paleta (BRAND-CW-08): Naranja #FF5A00 · Fondo #111111
     Claras #F5F2EC · Sec: #2A2A2A #6B6B6B #1A0F0F #B85C1A #B8B0A1
     Degradado institucional naranja→oscuro
   Tipografías (BRAND-CW-09): Satoshi (títulos, botones, interfaz)
     · Inter (cuerpos de texto)
   Sistema gráfico (BRAND-CW-11): trazos de circuito, punteados,
     degradados cálidos, glows sutiles, ilustración lineal
   Estructura: sistema visual de tria.so verificado frame a frame
   ============================================================ */
:root{
  --naranja:    #FF5A00;   /* Acento / Energía */
  --naranja-hi: #FF8A47;   /* tinte funcional (barras, hover) */
  --naranja-dk: #C94A00;   /* sombra funcional del acento */
  --burnt:      #B85C1A;   /* secundario cálido */
  --beige:      #B8B0A1;   /* secundario neutro */
  --ink:        #111111;   /* Fondo principal */
  --ink-2:      #1A1A1A;
  --ink-3:      #161616;
  --marron:     #1A0F0F;   /* secundario profundo */
  --claras:     #F5F2EC;   /* Superficies claras */
  --paper:      #EDEDED;
  --mut-d:      #9A9A96;
  --grad-inst:  linear-gradient(115deg,#FF5A00 0%,#8A3505 55%,#1A0F0F 100%);
  --disp: "Satoshi","Inter",-apple-system,sans-serif;
  --sans: "Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-card: 22px;
  --r-pill: 999px;
  --col: 640px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--paper);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--naranja);color:#fff}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--naranja);outline-offset:3px;border-radius:6px}
img{max-width:100%;display:block}

.col{max-width:var(--col);margin:0 auto;padding:0 16px}
.wide{max-width:1180px;margin:0 auto;padding:0 16px}

/* jerarquía: Satoshi para títulos (manual), tamaño y aire al estilo tria */
.t-hero{font-family:var(--disp);font-size:clamp(2rem,5.6vw,3.6rem);font-weight:700;letter-spacing:-.03em;line-height:1.06}
.t-sec{font-family:var(--disp);font-size:clamp(1.9rem,4.6vw,3.2rem);font-weight:500;letter-spacing:-.02em;line-height:1.12}
.t-card{font-family:var(--disp);font-size:clamp(1.35rem,2.6vw,1.7rem);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.sub{color:var(--mut-d);font-size:clamp(15px,1.8vw,18px);line-height:1.55}

/* trazo de circuito (sistema gráfico del manual) */
.trace{
  display:inline-flex;align-items:center;
  width:120px;height:9px;margin:22px 0 0;position:relative;
}
.trace::before{content:"";flex:1;height:1.5px;background:var(--naranja)}
.trace::after{
  content:"";width:9px;height:9px;border-radius:50%;flex:none;
  border:1.5px solid var(--naranja);
}
.trace.center{margin-left:auto;margin-right:auto;display:flex}

/* tag pill 17% — medido en tria */
.tag{
  display:inline-block;
  background:rgba(255,255,255,.17);
  border-radius:var(--r-pill);
  padding:5px 12px;
  font-family:var(--disp);font-size:13px;font-weight:500;color:#fff;
}
.tag.dk{background:rgba(17,17,17,.14);color:rgba(17,17,17,.8)}

/* revelado */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
}

/* ============================================================
   NAV — píldora translúcida que se adapta al fondo
   ============================================================ */
.navbar{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);
  z-index:100;
  width:min(1120px,calc(100vw - 20px));
  display:flex;align-items:center;gap:10px;
  background:rgba(42,42,42,.5);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-radius:var(--r-pill);
  padding:9px 9px 9px 12px;
  transition:background .4s ease;
}
.navbar.on-light{background:rgba(245,242,236,.72)}
.navbar .burger{
  display:flex;flex-direction:column;gap:5px;
  background:none;border:none;padding:10px 8px;flex:none;
}
.navbar .burger i{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s,background .4s}
.navbar.on-light .burger i{background:var(--ink)}
.navbar .burger.open i:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.navbar .burger.open i:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
.navbar .brand{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--disp);font-weight:900;font-size:13px;letter-spacing:.09em;color:#fff;
  transition:color .4s;
}
.navbar .brand svg{color:var(--naranja);flex:none}
.navbar.on-light .brand{color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:18px;margin-left:auto}
.nav-right .lk{font-family:var(--disp);font-size:14.5px;font-weight:500;color:#fff;opacity:.92;transition:opacity .25s,color .4s}
.nav-right .lk:hover{opacity:1}
.navbar.on-light .nav-right .lk{color:var(--ink)}
@media(max-width:520px){ .navbar .brand span{display:none} }

/* CTA con glow inferior — en naranja oficial */
.btn-glow{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-size:15px;font-weight:700;color:#fff;
  background:linear-gradient(180deg,#FF7B2E 0%,var(--naranja) 55%,var(--naranja-dk) 100%);
  border:none;border-radius:var(--r-pill);
  padding:11px 24px;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
  box-shadow:0 6px 24px -6px rgba(255,90,0,.55);
}
.btn-glow::after{
  content:"";position:absolute;left:12%;right:12%;bottom:-8px;height:16px;
  background:radial-gradient(closest-side,rgba(255,235,210,.95),rgba(255,138,71,.4) 60%,transparent);
  filter:blur(5px);
}
.btn-glow:hover{transform:translateY(-1px);box-shadow:0 10px 30px -6px rgba(255,90,0,.7)}

/* ============================================================
   USAR CASH — dropdown
   ============================================================ */

.cash-access{
  position:relative;
  display:inline-flex;
}

/* el botón no debe recortar el dropdown */
.cash-access .btn-glow{
  overflow:visible;
}

.cash-access__trigger{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.cash-access__chevron{
  width:15px;
  height:15px;
  transition:transform .25s ease;
}

.cash-access.open .cash-access__chevron{
  transform:rotate(180deg);
}

.cash-access__dropdown{
  position:absolute;
  top:calc(100% + 12px);
  right:0;

  width:260px;
  padding:8px;

  background:rgba(20,20,20,.98);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;

  box-shadow:
    0 24px 60px -20px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.05);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transform:translateY(-8px) scale(.98);
  transform-origin:top right;

  transition:
    opacity .2s ease,
    transform .2s ease,
    visibility .2s ease;

  z-index:300;
}

.cash-access.open .cash-access__dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}

.cash-access__item{
  display:block;
  padding:13px 14px;
  border-radius:12px;
  transition:background .2s ease;
}

.cash-access__item:hover{
  background:rgba(255,255,255,.07);
}

.cash-access__item strong{
  display:block;

  font-family:var(--disp);
  font-size:14px;
  font-weight:700;

  color:#fff;
}

.cash-access__item span{
  display:block;

  margin-top:2px;

  font-family:var(--sans);
  font-size:11.5px;

  color:#8F8F8A;
}

.cash-access__item--highlight{
  background:rgba(255,90,0,.1);
}

.cash-access__item--highlight:hover{
  background:rgba(255,90,0,.16);
}

.cash-access__item--highlight strong{
  color:var(--naranja-hi);
}

/* cuando el navbar está sobre fondo claro */
.navbar.on-light .cash-access__trigger{
  color:#fff;
}

/* mobile */
@media(max-width:600px){

  .cash-access__dropdown{
    position:fixed;

    top:76px;
    left:10px;
    right:10px;

    width:auto;

    transform:translateY(-8px) scale(.98);
    transform-origin:top center;
  }

  .cash-access.open .cash-access__dropdown{
    transform:translateY(0) scale(1);
  }

}

/* menú desplegable */
.menu{
  display:none;
  position:fixed;z-index:99;
  top:76px;left:50%;transform:translateX(-50%);
  width:min(1120px,calc(100vw - 20px));
  background:rgba(20,20,20,.96);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  padding:12px 24px 18px;
}
.menu.open{display:block}
.menu a{
  display:flex;justify-content:space-between;align-items:center;
  padding:15px 2px;font-family:var(--disp);font-size:17px;font-weight:700;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.menu a:last-child{border-bottom:none}
.menu a span{color:var(--naranja)}

/* ============================================================
   HERO — negro profundo, punteado, glow y trazos (manual)
   ============================================================ */
.hero{
  position:relative;
  padding:150px 0 0;
  overflow:hidden;
  background:var(--ink);
}
.hero .dots{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,90,0,.2) 1px,transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(circle at 72% 30%,#000 0%,rgba(0,0,0,.35) 45%,transparent 72%);
  mask-image:radial-gradient(circle at 72% 30%,#000 0%,rgba(0,0,0,.35) 45%,transparent 72%);
}
.hero .glow{
  position:absolute;left:50%;top:52%;transform:translateX(-50%);
  width:760px;height:480px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,90,0,.2),transparent 72%);
  filter:blur(46px);pointer-events:none;
}
.hero .circuit{
  position:absolute;right:-40px;top:190px;width:340px;height:120px;
  pointer-events:none;opacity:.75;
}
.hero .circuit path{stroke:var(--naranja);stroke-width:1.5;fill:none}
.hero .circuit circle{fill:none;stroke:var(--naranja);stroke-width:1.5}
@media(max-width:900px){ .hero .circuit{display:none} }
.hero-inner{position:relative;z-index:2}
.hero h1{color:#fff;max-width:15ch;margin-bottom:20px}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.5em);animation:wUp .7s cubic-bezier(.2,.65,.2,1) forwards}
@keyframes wUp{to{opacity:1;transform:none}}
.hero .lede{max-width:46ch;margin-bottom:34px;opacity:0;animation:fUp .8s ease .6s forwards}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px;opacity:0;animation:fUp .8s ease .78s forwards}
.btn-ghost-d{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--disp);font-size:15px;font-weight:500;color:#fff;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-pill);padding:11px 24px;
  transition:background .25s,border-color .25s;
}
.btn-ghost-d:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
@keyframes fUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* phone 3D */
.hero-phone-zone{
  position:relative;z-index:2;
  display:flex;justify-content:center;
  padding:30px 0 90px;
  perspective:1400px;
}
.phone{
  width:min(310px,calc(100vw - 32px));
  background:#0D0D0D;
  border-radius:46px;
  border:1px solid #2A2A2A;
  padding:11px;
  box-shadow:0 80px 140px -50px rgba(0,0,0,.85), 0 2px 0 rgba(255,255,255,.06) inset;
}
.phone .screen{
  background:#FAF8F4;
  border-radius:36px;
  overflow:hidden;
  color:var(--ink);
}
.phone .statusbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 22px 8px;
  font-family:var(--disp);font-size:12.5px;font-weight:700;
}
.phone .notch{width:74px;height:22px;background:var(--ink);border-radius:12px}
.phone .sig{display:flex;gap:4px;align-items:center;font-size:10px;letter-spacing:.04em}
.hero-phone{
  transform-style:preserve-3d;
  opacity:0;animation:phIn 1s cubic-bezier(.2,.65,.2,1) .95s forwards, phFloat 7s ease-in-out 2s infinite;
}
@keyframes phIn{from{opacity:0;transform:translateY(60px) rotateX(8deg) rotateY(-14deg) rotateZ(4deg)}to{opacity:1;transform:rotateX(8deg) rotateY(-14deg) rotateZ(4deg)}}
@keyframes phFloat{0%,100%{translate:0 0}50%{translate:0 -14px}}

/* UI dentro del phone — interfaz en Satoshi (manual) */
.ui-pad{padding:14px 16px 18px}
.ui-lbl{font-family:var(--disp);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8F8F8A}
.ui-amount{font-family:var(--disp);font-size:31px;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:2px 0 0}
.ui-sub{font-size:11.5px;color:#8F8F8A;margin-bottom:12px}
.ui-row{
  display:flex;align-items:center;gap:10px;
  background:#fff;border:1px solid rgba(17,17,17,.08);
  border-radius:13px;padding:10px 12px;margin-bottom:8px;
}
.ui-row .ic{
  width:30px;height:30px;border-radius:9px;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-size:8.5px;font-weight:700;letter-spacing:.03em;
  background:rgba(17,17,17,.06);color:#3A3A38;
}
.ui-row.sel{border-color:rgba(255,90,0,.55);background:rgba(255,90,0,.06)}
.ui-row.sel .ic{background:linear-gradient(115deg,var(--naranja),var(--naranja-hi));color:#fff}
.ui-row .tx b{display:block;font-family:var(--disp);font-size:12px;font-weight:700}
.ui-row .tx span{font-size:10px;color:#8F8F8A}
.ui-row .chk{margin-left:auto;width:17px;height:17px;border-radius:50%;border:1.5px solid rgba(17,17,17,.2);flex:none;position:relative}
.ui-row.sel .chk{border-color:transparent;background:linear-gradient(115deg,var(--naranja),var(--naranja-hi))}
.ui-row.sel .chk::after{content:"";position:absolute;inset:0;margin:auto;width:7px;height:4px;border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(-45deg) translateY(-1px)}
.ui-btn{
  width:100%;border:none;border-radius:var(--r-pill);
  background:var(--ink);color:#fff;
  font-family:var(--disp);font-weight:700;font-size:12.5px;
  padding:12px;margin-top:6px;
}
.ui-btn.cw{background:linear-gradient(115deg,var(--naranja),var(--naranja-hi))}
.ui-fine{margin-top:9px;font-size:8px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#9A9A96;text-align:center}
.ui-stat{background:#F1EEE7;border-radius:13px;padding:11px 13px;margin-bottom:8px}
.ui-stat .k{font-family:var(--disp);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8F8F8A}
.ui-stat .v{font-family:var(--disp);font-size:19px;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ui-stat .v em{font-style:normal;color:var(--naranja-dk);font-size:11px;font-weight:700;margin-left:6px}
.ui-bars{display:flex;align-items:flex-end;gap:5px;height:52px;margin:10px 0 4px}
.ui-bars i{flex:1;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,var(--naranja),var(--naranja-hi))}
.ui-bars i:nth-child(1){height:36%}.ui-bars i:nth-child(2){height:58%}
.ui-bars i:nth-child(3){height:44%}.ui-bars i:nth-child(4){height:76%}
.ui-bars i:nth-child(5){height:60%}.ui-bars i:nth-child(6){height:92%}
.ui-tabs{display:flex;gap:4px;background:#EFECE5;border-radius:var(--r-pill);padding:4px;margin-bottom:12px}
.ui-tabs span{flex:1;text-align:center;font-family:var(--disp);font-size:10.5px;font-weight:700;padding:7px 0;border-radius:var(--r-pill);color:#71716E}
.ui-tabs span.on{background:#fff;color:var(--ink);box-shadow:0 2px 8px -2px rgba(17,17,17,.18)}
.ui-avatar-row{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid rgba(17,17,17,.08);border-radius:13px;padding:10px 12px;margin-bottom:8px}
.ui-avatar-row .av{width:28px;height:28px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--disp);font-size:11px;font-weight:700}
.ui-avatar-row b{font-family:var(--disp);font-size:12px;font-weight:700;display:block}
.ui-avatar-row span.small{font-size:10px;color:#8F8F8A}
.ui-avatar-row .amt{margin-left:auto;font-family:var(--disp);font-size:12px;font-weight:900;font-variant-numeric:tabular-nums}
.ui-avatar-row .amt.up{color:var(--naranja-dk)}
.ui-pillst{margin-left:auto;font-family:var(--disp);font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,90,0,.12);color:var(--naranja-dk);padding:4px 8px;border-radius:var(--r-pill)}
.ui-pillst.wait{background:rgba(17,17,17,.07);color:#71716E}
/* gráfico funcional: anillo de progreso (manual) */
.ui-ring-row{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid rgba(17,17,17,.08);border-radius:13px;padding:12px;margin-bottom:8px}
.ui-ring{
  width:52px;height:52px;border-radius:50%;flex:none;
  background:conic-gradient(var(--naranja) 0 86%, #EAE6DE 86% 100%);
  display:flex;align-items:center;justify-content:center;
}
.ui-ring::before{content:"86%";width:38px;height:38px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:10.5px;font-weight:900}
.ui-ring-row .tx b{font-family:var(--disp);font-size:12px;font-weight:700;display:block}
.ui-ring-row .tx span{font-size:10px;color:#8F8F8A}
.ui-prog{height:7px;border-radius:6px;background:#EAE6DE;overflow:hidden;margin:8px 0 4px}
.ui-prog i{display:block;height:100%;width:86%;border-radius:6px;background:linear-gradient(90deg,var(--naranja),var(--naranja-hi))}

/* ============================================================
   FEATURES — hub interactivo: 6 funciones, 1 dispositivo
   ============================================================ */
.features{
  background:var(--claras);
  padding:110px 0 100px;
}
.hub{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:64px;align-items:center;
  max-width:1020px;margin:0 auto;
}
.hub-left{min-width:0}
.hub-menu{
  display:flex;flex-direction:column;gap:2px;
  margin-bottom:30px;
}
.hub-menu button{
  display:flex;align-items:center;gap:14px;
  background:none;border:none;text-align:left;
  padding:11px 16px;border-radius:14px;
  font-family:var(--disp);font-size:17px;font-weight:700;letter-spacing:-.01em;
  color:rgba(17,17,17,.4);
  transition:color .25s, background .25s, box-shadow .25s;
}
.hub-menu button i{
  font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;
  color:rgba(17,17,17,.3);width:24px;flex:none;
  transition:color .25s;
}
.hub-menu button:hover{color:var(--ink);background:rgba(17,17,17,.04)}
.hub-menu button.on{
  color:var(--ink);background:#fff;
  box-shadow:0 12px 30px -18px rgba(17,17,17,.3);
}
.hub-menu button.on i{color:var(--naranja)}
.hub-desc{display:none}
.hub-desc.on{display:block;animation:descIn .5s cubic-bezier(.2,.65,.2,1)}
@keyframes descIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hub-phone{display:flex;justify-content:center}
@media(max-width:900px){
  .hub{grid-template-columns:minmax(0,1fr);gap:38px}
  .hub-menu{
    flex-direction:row;overflow-x:auto;
    margin:0 -16px 24px;padding:4px 16px 10px;
    scrollbar-width:none;
  }
  .hub-menu::-webkit-scrollbar{display:none}
  .hub-menu button{
    flex:none;background:#fff;
    border-radius:var(--r-pill);padding:10px 18px;
    font-size:14.5px;
    box-shadow:0 8px 20px -14px rgba(17,17,17,.2);
  }
  .hub-menu button.on{background:var(--ink);color:#fff}
  .hub-menu button.on i{color:var(--naranja-hi)}
}

/* ---------- dispositivo realista ---------- */
.device{
  position:relative;
  width:min(340px,80vw);
  aspect-ratio:9/19;
  border-radius:54px;
  background:linear-gradient(160deg,#3E3E3D 0%,#141413 45%,#2A2A29 100%);
  padding:10px;
  box-shadow:
    0 70px 120px -45px rgba(17,17,17,.5),
    inset 0 1.5px 1px rgba(255,255,255,.28),
    inset 0 -1.5px 1.5px rgba(0,0,0,.6);
}
.device .side{
  position:absolute;width:3px;border-radius:2px;
  background:linear-gradient(90deg,#4A4A48,#232322);
}
.device .side.vol1{left:-3px;top:26%;height:44px}
.device .side.vol2{left:-3px;top:26%;margin-top:56px;height:44px}
.device .side.pwr{right:-3px;top:30%;height:64px;background:linear-gradient(270deg,#4A4A48,#232322)}
.device .scr{
  position:absolute;inset:10px;
  border-radius:44px;overflow:hidden;
  background:#FAF8F4;
  color:var(--ink);
  border:1px solid rgba(0,0,0,.55);
}
.device .island{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  width:94px;height:27px;border-radius:16px;
  background:#050505;z-index:7;
}
.device .island::after{
  content:"";position:absolute;right:9px;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#2E3A4A,#0A0D12 70%);
}
.d-status{
  position:absolute;top:0;left:0;right:0;z-index:6;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 26px 0;
  font-family:var(--disp);font-size:13px;font-weight:700;color:var(--ink);
  pointer-events:none;
}
.d-status svg{display:inline-block;vertical-align:middle}
.d-status .ics{display:flex;gap:5px;align-items:center}
.views{position:absolute;inset:0}
.view{
  position:absolute;inset:0;
  padding:60px 16px 86px;
  opacity:0;transform:translateX(22px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.65,.2,1);
  pointer-events:none;
}
.view.on{opacity:1;transform:none}
.tabbar{
  position:absolute;left:0;right:0;bottom:0;z-index:6;
  display:flex;justify-content:space-around;align-items:center;
  padding:12px 22px 26px;
  background:linear-gradient(180deg,rgba(250,248,244,0),#FAF8F4 34%);
}
.tabbar svg{color:#A8A49C}
.tabbar svg.on{color:var(--naranja)}
.home-bar{
  position:absolute;bottom:9px;left:50%;transform:translateX(-50%);
  width:110px;height:4px;border-radius:4px;
  background:rgba(17,17,17,.32);z-index:7;
}
.glare{
  position:absolute;inset:0;z-index:8;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.04) 24%,transparent 42%);
}
.fcard{
  border-radius:var(--r-card);
  padding:20px 20px 26px;
  margin-bottom:26px;
}
.fcard .tag{margin-bottom:14px}
.fcard h3{margin-bottom:10px}
.fcard p{font-size:15.5px;line-height:1.6}
/* temas: solo colores del manual */
.fcard.negra{background:var(--ink-2);color:#fff}
.fcard.negra p{color:#B9B9B5}
.fcard.naranja{background:var(--naranja);color:#fff}
.fcard.naranja h3{color:#2B1200}
.fcard.naranja p{color:rgba(43,18,0,.78)}
.fcard.crema{background:var(--claras);color:var(--ink);border:1px solid rgba(17,17,17,.1)}
.fcard.crema p{color:rgba(17,17,17,.66)}
.features .fcard.crema{background:#fff}
.fcard.grad{background:var(--grad-inst);color:#fff}
.fcard.grad .tag{background:rgba(0,0,0,.22)}
.fcard.grad p{color:rgba(255,255,255,.82)}
.fcard.beige{background:var(--beige);color:var(--ink)}
.fcard.beige p{color:rgba(17,17,17,.66)}
.fcard.burnt{background:var(--burnt);color:#fff}
.fcard.burnt p{color:rgba(255,255,255,.85)}

/* ============================================================
   MURO DE FOTOS + STATS
   ============================================================ */
.wall{
  background:var(--ink);
  padding:70px 0;
  overflow:hidden;
}

/* ============================================================
   INDUSTRIAS — CASH WALLET
   ============================================================ */

.industry-card{
  position:relative;
  overflow:hidden;
  min-height:330px;
  isolation:isolate;

  background:#111;
  border:1px solid rgba(255,255,255,.09);
}

.industry-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      transparent 30%,
      rgba(8,8,8,.2) 55%,
      rgba(8,8,8,.96) 100%
    );
}


/* ---------- contenido ---------- */

.industry-content{
  position:absolute;
  z-index:5;

  left:24px;
  right:24px;
  bottom:24px;

  display:block;
}

.industry-content .vtag{
  position:static;
  display:block;
  transform:none;

  font-family:var(--disp);
  font-size:22px;
  font-weight:700;
  line-height:1.15;

  color:#fff;
}

.industry-content .cap{
  position:static;
  display:block;

  margin-top:7px;

  font-size:12px;
  line-height:1.5;

  color:rgba(255,255,255,.65);
}

.industry-icon{
  position:absolute;
  left:0;
  bottom:auto;
  top:-275px;

  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  border-radius:12px;

  background:linear-gradient(
    135deg,
    var(--naranja-hi),
    var(--naranja)
  );

  color:#fff;

  font-family:var(--disp);
  font-size:17px;
  font-weight:700;

  box-shadow:
    0 12px 30px rgba(255,90,0,.22);

  z-index:6;
}


/* ============================================================
   SALUD
   ============================================================ */

.industry-health{
  background:
    radial-gradient(
      circle at 70% 20%,
      rgba(255,90,0,.2),
      transparent 45%
    ),
    #141414;
}

.industry-visual{
  position:absolute;
  width:190px;
  height:190px;

  left:50%;
  top:43%;

  transform:translate(-50%,-50%);

  border-radius:50%;

  display:grid;
  place-items:center;

  background:
    radial-gradient(
      circle,
      rgba(255,90,0,.17),
      rgba(255,90,0,.03) 55%,
      transparent 70%
    );
}

.industry-visual::before,
.industry-visual::after{
  content:"";
  position:absolute;

  border:1px solid rgba(255,90,0,.18);
  border-radius:50%;
}

.industry-visual::before{
  inset:20px;
}

.industry-visual::after{
  inset:45px;
}

.industry-visual svg{
  position:relative;
  z-index:2;

  width:90px;

  fill:none;
  stroke:var(--naranja-hi);
  stroke-width:2;

  filter:
    drop-shadow(0 0 18px rgba(255,90,0,.3));
}


/* ============================================================
   FINANZAS
   ============================================================ */

.industry-finance{
  background:
    radial-gradient(
      circle at 80% 10%,
      rgba(255,122,46,.18),
      transparent 45%
    ),
    #101010;
}

.industry-chart{
  position:absolute;
  inset:50px 35px 90px;

  display:flex;
  align-items:flex-end;
  gap:10px;

  opacity:.65;
}

.industry-chart span{
  flex:1;

  border-radius:5px 5px 0 0;

  background:
    linear-gradient(
      to top,
      rgba(255,90,0,.08),
      rgba(255,90,0,.75)
    );
}

.industry-line{
  position:absolute;

  width:80%;
  left:10%;
  top:68px;

  fill:none;
  stroke:#FF7A2E;
  stroke-width:3;

  filter:
    drop-shadow(0 0 10px rgba(255,90,0,.5));
}


/* ============================================================
   CORPORATIVO
   ============================================================ */

.industry-corporate{
  background:
    radial-gradient(
      circle at 60% 30%,
      rgba(255,90,0,.14),
      transparent 48%
    ),
    #121212;
}

.industry-account{
  position:absolute;

  width:68%;

  left:50%;
  top:44%;

  transform:
    translate(-50%,-50%)
    rotate(3deg);

  padding:18px;

  border-radius:18px;

  background:
    rgba(28,28,28,.92);

  border:
    1px solid rgba(255,255,255,.1);

  box-shadow:
    0 25px 70px rgba(0,0,0,.45);
}

.industry-account-head{
  display:flex;
  align-items:center;
  gap:7px;

  margin-bottom:18px;

  font-family:var(--disp);
  font-size:12px;
  font-weight:700;
}

.industry-account > span{
  display:block;

  font-size:9px;
  color:#777;
}

.industry-account > strong{
  display:block;

  margin:4px 0 14px;

  font-family:var(--disp);
  font-size:22px;
}

.industry-movement{
  display:grid;
  grid-template-columns:22px 1fr auto;
  gap:8px;
  align-items:center;

  padding:8px 0;

  border-top:
    1px solid rgba(255,255,255,.06);

  font-size:8px;
}

.industry-movement i{
  width:20px;
  height:20px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:rgba(255,90,0,.13);
  color:var(--naranja-hi);
}

.industry-movement span{
  color:#ddd;
}

.industry-movement small{
  display:block;
  color:#666;
}

.industry-movement b{
  font-size:8px;
}


/* ============================================================
   LOGÍSTICA
   ============================================================ */

.industry-logistics{
  background:
    linear-gradient(
      135deg,
      #17120F,
      #0D0D0D
    );
}

.logistics-route{
  position:absolute;
  inset:25px 25px 90px;
}

.logistics-route svg{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  fill:none;

  stroke:rgba(255,90,0,.55);
  stroke-width:2;
  stroke-dasharray:7 7;
}

.route-point{
  position:absolute;

  width:12px;
  height:12px;

  border:3px solid #171717;
  border-radius:50%;

  background:var(--naranja-hi);

  box-shadow:
    0 0 0 5px rgba(255,90,0,.12);
}

.route-point.p1{
  left:3%;
  bottom:8%;
}

.route-point.p2{
  left:49%;
  top:42%;
}

.route-point.p3{
  right:2%;
  top:24%;
}

.logistics-box{
  position:absolute;

  width:95px;
  height:72px;

  left:50%;
  top:42%;

  transform:
    translate(-50%,-50%)
    rotate(-6deg);

  border:1px solid rgba(255,122,46,.4);

  background:
    linear-gradient(
      145deg,
      #302017,
      #18100C
    );

  box-shadow:
    0 25px 50px rgba(0,0,0,.4);
}

.logistics-box::before{
  content:"";
  position:absolute;

  left:50%;
  top:0;
  bottom:0;

  width:16px;

  transform:translateX(-50%);

  background:rgba(255,90,0,.13);
}

.logistics-box i{
  position:absolute;

  right:7px;
  bottom:6px;

  font-size:7px;
  font-style:normal;
  font-weight:700;

  color:var(--naranja-hi);
}


/* ============================================================
   TECNOLOGÍA
   ============================================================ */

.industry-tech{
  background:#0B0B0B;
}

.tech-grid{
  position:absolute;
  inset:0;

  opacity:.16;

  background-image:
    linear-gradient(
      rgba(255,90,0,.2) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,90,0,.2) 1px,
      transparent 1px
    );

  background-size:30px 30px;
}

.tech-code{
  position:absolute;

  left:50%;
  top:43%;

  width:72%;

  transform:translate(-50%,-50%);

  padding:18px;

  border-radius:15px;

  background:
    rgba(19,19,19,.94);

  border:
    1px solid rgba(255,255,255,.08);

  box-shadow:
    0 30px 70px rgba(0,0,0,.4);

  font-family:monospace;
  font-size:10px;

  color:#888;
}

.tech-code > span{
  display:inline-block;

  margin-right:7px;
  padding:4px 6px;

  border-radius:5px;

  background:rgba(255,90,0,.15);

  color:var(--naranja-hi);

  font-weight:700;
}

.tech-code code{
  color:#ddd;
}

.tech-code p{
  margin:7px 0 0;
}

.tech-code b{
  color:var(--naranja-hi);
}


/* ============================================================
   CASH BRAND TILE
   ============================================================ */

.industry-brand{
  position:relative;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  background:
    radial-gradient(
      circle at center,
      #21150E,
      #0D0D0D 65%
    );
}

.industry-brand svg{
  position:relative;
  z-index:2;

  width:110px;
  height:110px;

  color:#fff;

  filter:
    drop-shadow(
      0 0 30px rgba(255,90,0,.18)
    );
}

.industry-brand strong{
  position:relative;
  z-index:2;

  margin-top:12px;

  font-family:var(--disp);
  font-size:19px;
  letter-spacing:.14em;
}

.industry-brand span{
  position:relative;
  z-index:2;

  margin-top:5px;

  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;

  color:#666;
}

.industry-brand-glow{
  position:absolute;

  width:220px;
  height:220px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,90,0,.18),
      transparent 68%
    );

  filter:blur(10px);
}


/* ============================================================
   RESPONSIVE INDUSTRIAS
   ============================================================ */

@media(max-width:900px){

  .industry-card{
    min-height:300px;
  }

  .industry-account{
    width:75%;
  }

}


@media(max-width:600px){

  .industry-card{
    min-height:270px;
  }

  .industry-content{
    left:18px;
    right:18px;
    bottom:18px;
  }

  .industry-content .vtag{
    font-size:19px;
  }

  .industry-content .cap{
    font-size:11px;
  }

  .industry-icon{
    width:38px;
    height:38px;
  }

  .industry-account{
    width:78%;
    top:41%;
  }

  .industry-chart{
    inset:
      35px 25px 80px;
  }

  .tech-code{
    width:80%;
  }

}

.wall-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:10px;
  padding:0 10px;
}
.tile{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:#1C1C1C;
}
.tile img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92)}
.tile .cap{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:20px;
  font-family:var(--disp);font-size:clamp(16px,2vw,22px);font-weight:500;color:#fff;
  background:rgba(17,17,17,.4);
  letter-spacing:-.01em;
}
.wall-head{
  text-align:center;
  font-family:var(--disp);font-size:clamp(1.2rem,2.4vw,1.6rem);font-weight:500;
  letter-spacing:-.01em;color:#fff;
  margin-bottom:34px;padding:0 16px;
}
.wall-head em{font-style:normal;color:var(--naranja)}
.tile .vtag{
  position:absolute;top:-20px;left:12px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(17,17,17,.62);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-pill);
  padding:7px 14px;
  font-family:var(--disp);font-size:12.5px;font-weight:700;color:#fff;
}
.tile .vtag::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--naranja)}
.tile.t1{grid-column:1/4;height:300px}
.tile.t2{grid-column:4/9;height:300px}
.tile.t3{grid-column:9/13;height:300px}
.tile.t4{grid-column:1/6;height:280px}
.tile.t5{grid-column:6/10;height:280px}
.tile.t6{grid-column:10/13;height:280px}
.tile.brand-tile{
  background:var(--grad-inst);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.tile.brand-tile::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.28) 1px,transparent 1.3px);
  background-size:18px 18px;
  opacity:.5;
}
.tile.brand-tile svg{width:34%;height:auto;color:rgba(255,255,255,.4);position:relative}
@media(max-width:760px){
  .tile.t1{grid-column:1/7}.tile.t2{grid-column:7/13}
  .tile.t3{grid-column:1/13;height:260px}
  .tile.t4{grid-column:1/7}.tile.t5{grid-column:7/13}
  .tile.t6{grid-column:1/13;height:240px}
  .tile{height:210px !important}
  .tile.t3,.tile.t6{height:250px !important}
}

/* ============================================================
   CLARAS — unificadas + carousel
   ============================================================ */
.unify{
  position:relative;
  background:var(--claras);
  color:var(--ink);
  padding:130px 0 120px; /* fallback sin anclaje (reduced motion) */
}
.unify .t-sec{text-align:center;max-width:18ch;margin:0 auto}
.unify .trace{display:flex;margin:26px auto 64px}
.carousel{
  display:flex;gap:18px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:8px max(16px,calc((100vw - 1180px)/2 + 16px)) 26px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
}
.carousel::-webkit-scrollbar{display:none}
.carousel.dragging{cursor:grabbing;scroll-snap-type:none}
/* modo anclado: la sección se fija y el scroll mueve las cards a la izquierda */
.unify.pinned{padding:0}
.unify.pinned .unify-pin{
  position:sticky;top:0;
  height:100vh;height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
}
.unify.pinned .trace{margin:26px auto 48px}
.unify.pinned .carousel{
  overflow:visible;
  scroll-snap-type:none;
  cursor:default;
  will-change:transform;
  transition:opacity .9s ease; /* la clase .rv solo anima opacidad acá */
}
.pcard{
  flex:0 0 min(78vw,420px);
  scroll-snap-align:center;
  border-radius:26px;
  padding:26px 26px 30px;
  min-height:480px;
  display:flex;flex-direction:column;justify-content:flex-end;
  position:relative;overflow:hidden;
  user-select:none;
}
.pcard .art{position:absolute;inset:0;pointer-events:none}
.pcard h4{
  font-family:var(--disp);
  font-size:clamp(1.9rem,3.4vw,2.5rem);font-weight:900;letter-spacing:-.02em;
  text-transform:uppercase;margin-bottom:10px;position:relative;
}
.pcard p{font-size:15px;line-height:1.55;position:relative;max-width:34ch}
.pcard.grad{background:var(--grad-inst);color:#fff}
.pcard.grad p{color:rgba(255,255,255,.85)}
.pcard.blanca{background:#fff;color:var(--ink)}
.pcard.blanca p{color:rgba(17,17,17,.66)}
.pcard.beige{background:var(--beige);color:var(--ink)}
.pcard.beige p{color:rgba(17,17,17,.68)}
.pcard.negra{background:var(--ink-2);color:#fff}
.pcard.negra p{color:#B9B9B5}
/* arte: monedas */
.coin{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#4A4A48,#171716 65%);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.25), 0 14px 30px -10px rgba(0,0,0,.5);
}
.coin::after{content:"";position:absolute;inset:14%;border-radius:50%;border:1.5px solid rgba(255,138,71,.35)}
.coin.flat{height:12%;border-radius:50%/38%}
/* arte: flechas de pago */
.pay-arrow{
  position:absolute;height:10px;border-radius:6px;
  background:linear-gradient(90deg,var(--naranja),rgba(255,90,0,.25));
}
.pay-arrow::after{
  content:"";position:absolute;right:-7px;top:-7px;
  border:12px solid transparent;border-left-color:var(--naranja);
}
/* arte: placa de cuenta */
.mini-cvu{
  position:absolute;width:64%;aspect-ratio:1.7;
  background:linear-gradient(150deg,#232322,#111110 70%);
  border:1px solid rgba(255,138,71,.25);
  border-radius:16px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  padding:16px;
}
.mini-cvu .b{font-family:var(--disp);font-size:11px;font-weight:900;letter-spacing:.08em;color:#fff;display:flex;align-items:center;gap:6px}
.mini-cvu .b svg{color:var(--naranja)}
.mini-cvu .n{position:absolute;bottom:14px;left:16px;font-family:var(--disp);font-size:11px;letter-spacing:.14em;color:#8F8F8A;font-variant-numeric:tabular-nums}
/* arte: pila subcuentas */
.stack-chip{
  position:absolute;left:10%;right:10%;
  background:rgba(17,17,17,.1);
  border:1px solid rgba(17,17,17,.18);
  border-radius:14px;height:52px;
  display:flex;align-items:center;gap:10px;padding:0 16px;
  font-family:var(--disp);font-size:12.5px;font-weight:700;color:var(--ink);
}
.stack-chip i{width:22px;height:22px;border-radius:7px;background:rgba(17,17,17,.16);flex:none;display:flex;align-items:center;justify-content:center;font-size:10px;font-style:normal;font-weight:700}

/* ============================================================
   CUENTA — selector segmentado, placa de cuenta, beneficios
   ============================================================ */
.cuenta{
  background:var(--ink);
  padding:140px 0 110px;
  text-align:center;
}
.cuenta .t-sec{color:#fff;max-width:24ch;margin:0 auto 20px}
.cuenta .sub{max-width:46ch;margin:0 auto 8px}
.cuenta .sub.fine{font-size:14px;color:#71716E;margin-bottom:44px}
.seg{
  display:inline-flex;gap:4px;
  background:#1D1D1D;
  border-radius:var(--r-pill);
  padding:5px;
  margin-bottom:56px;
  max-width:100%;
  overflow-x:auto;
  scrollbar-width:none;
}
.seg::-webkit-scrollbar{display:none}
.seg button{
  display:inline-flex;align-items:center;gap:8px;
  border:none;background:none;
  font-family:var(--disp);font-size:13.5px;font-weight:500;color:#B9B9B5;
  padding:9px 16px;border-radius:var(--r-pill);
  white-space:nowrap;
  transition:background .3s,color .3s;
}
.seg button .dot{width:13px;height:13px;border-radius:50%;flex:none}
.seg button.on{background:#fff;color:var(--ink);font-weight:700}
.seg .dot.d1{background:var(--naranja)}
.seg .dot.d2{background:var(--burnt)}
.seg .dot.d3{background:var(--beige)}
/* placa de cuenta */
.cvu-stage{perspective:1200px;margin-bottom:26px}
.cvu-card{
  width:min(440px,86vw);aspect-ratio:1.66;
  margin:0 auto;
  background:linear-gradient(150deg,#242423 0%,#131312 55%,#1C1B1A 100%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  box-shadow:0 60px 110px -40px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.09);
  padding:26px;
  position:relative;text-align:left;
  transform:rotateX(14deg) rotateY(-7deg);
  transition:transform .6s cubic-bezier(.2,.65,.2,1), background .5s;
}
.cvu-stage:hover .cvu-card{transform:rotateX(4deg) rotateY(3deg)}
.cvu-card .facet{
  position:absolute;inset:0;border-radius:22px;overflow:hidden;pointer-events:none;
}
.cvu-card .facet::before{
  content:"";position:absolute;width:60%;height:130%;left:6%;top:-16%;
  background:linear-gradient(115deg,rgba(255,90,0,.5),rgba(255,138,71,.12) 60%,transparent);
  transform:rotate(14deg);
  filter:blur(2px);
}
.cvu-card .facet::after{
  content:"";position:absolute;width:44%;height:120%;right:-6%;bottom:-24%;
  background:linear-gradient(245deg,rgba(184,92,26,.4),transparent 70%);
  transform:rotate(-16deg);
  filter:blur(2px);
}
.cvu-card .hd{position:relative;display:flex;justify-content:space-between;align-items:flex-start}
.cvu-card .brand-l{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-size:13px;font-weight:900;letter-spacing:.09em;color:#fff}
.cvu-card .brand-l svg{color:var(--naranja)}
.cvu-card .net{font-family:var(--disp);font-size:15px;font-weight:900;letter-spacing:.06em;color:#fff;text-align:right;line-height:1.1}
.cvu-card .net span{display:block;font-size:8.5px;font-weight:500;letter-spacing:.14em;color:#8F8F8A}
/* trazo de circuito en la placa (manual) */
.cvu-card .trace-deco{position:absolute;left:26px;top:47%;width:96px;height:9px;display:flex;align-items:center}
.cvu-card .trace-deco::before{content:"";flex:1;height:1.5px;background:rgba(255,90,0,.7)}
.cvu-card .trace-deco::after{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid rgba(255,90,0,.7)}
.cvu-card .num{position:absolute;left:26px;bottom:52px;font-family:var(--disp);font-size:15px;letter-spacing:.16em;color:#D6D4CF;font-variant-numeric:tabular-nums}
.cvu-card .meta{position:absolute;left:26px;bottom:24px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#8F8F8A}
@media(max-width:400px){
  .cvu-card .num{font-size:12px;letter-spacing:.1em;white-space:nowrap}
  .cvu-card .brand-l{font-size:11px;white-space:nowrap}
  .cvu-card .net{font-size:12px}
}
.benefits{max-width:var(--col);margin:0 auto 20px;text-align:left}
.brow{
  display:flex;align-items:center;gap:14px;
  background:#1A1A19;
  border-radius:14px;
  padding:16px 18px;margin-bottom:9px;
  font-size:15px;color:#EDEDED;
}
.brow svg{flex:none;color:var(--naranja)}
.rails{
  max-width:var(--col);margin:14px auto 0;
  background:#1A1A19;border-radius:var(--r-pill);
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.rails-track{display:flex;gap:38px;width:max-content;padding:15px 0;animation:rails 26s linear infinite}
@keyframes rails{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rails-track span{font-family:var(--disp);font-size:14px;font-weight:700;color:#D6D4CF;white-space:nowrap;display:inline-flex;align-items:center;gap:9px}
.rails-track span i{width:5px;height:5px;border-radius:2px;background:var(--naranja);font-style:normal}
.rails-cap{margin-top:16px;font-size:13.5px;color:#71716E}

/* ============================================================
   SEGURIDAD — claras
   ============================================================ */
.seguridad{
  background:var(--claras);
  color:var(--ink);
  padding:150px 0 140px;
  text-align:center;
}
.seguridad .t-sec{max-width:22ch;margin:0 auto 16px}
.seguridad .sub{color:#71716E;margin-bottom:44px}
.badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:720px;margin:0 auto}
.badge-p{
  display:inline-flex;align-items:center;gap:9px;
  background:#fff;
  border:1px solid rgba(17,17,17,.1);
  border-radius:var(--r-pill);
  padding:12px 22px;
  font-family:var(--disp);font-size:14px;font-weight:500;
}
.badge-p i{
  width:16px;height:16px;border-radius:50%;flex:none;
  background:linear-gradient(115deg,var(--naranja),var(--naranja-hi));
  position:relative;font-style:normal;
}
.badge-p i::after{content:"";position:absolute;inset:0;margin:auto;width:7px;height:4px;border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(-45deg) translateY(-1px)}

/* ============================================================
   RUTEO — sección técnica
   ============================================================ */
.ruteo{
  background:var(--ink);
  padding:140px 0 120px;
  text-align:center;
}
.ruteo .t-sec{color:#fff;margin-bottom:10px}
.ruteo .sub{margin-bottom:40px}
.chips{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:40px}
.chip-o{
  display:inline-block;
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-pill);
  padding:11px 24px;
  font-family:var(--disp);font-size:14.5px;font-weight:500;color:#EDEDED;
}
.seg.mini{margin-bottom:44px}
.map-stage{max-width:560px;margin:0 auto;perspective:1100px}
.iso-map{
  position:relative;
  aspect-ratio:1.5;
  transform:rotateX(48deg) rotateZ(-32deg);
  transform-style:preserve-3d;
}
@media(max-width:700px){
  .iso-map{transform:scale(.78) rotateX(48deg) rotateZ(-32deg)}
}
.iso-map .slab{
  position:absolute;border-radius:10px;
  background:linear-gradient(140deg,#E9E6DF,#BDB9B0);
  box-shadow:0 30px 40px -18px rgba(0,0,0,.55), 0 -14px 0 -6px #8A8884;
}
.iso-map .slab.s1{left:4%;top:8%;width:44%;height:38%}
.iso-map .slab.s2{left:52%;top:2%;width:42%;height:34%}
.iso-map .slab.s3{left:8%;top:52%;width:38%;height:40%}
.iso-map .slab.s4{left:50%;top:44%;width:44%;height:48%}
.iso-map .route{
  position:absolute;left:6%;top:8%;width:88%;height:84%;
  fill:none;
  transform:translateZ(12px);
}
.iso-map .route path{
  stroke:var(--naranja);stroke-width:5;fill:none;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 10px rgba(255,90,0,.9));
  stroke-dasharray:600;stroke-dashoffset:600;
  transition:stroke-dashoffset 2.2s ease;
}
.iso-map.lit .route path{stroke-dashoffset:0}
.iso-map .node-b{
  position:absolute;
  width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-size:9px;font-weight:900;letter-spacing:.04em;color:#fff;
  transform:translateZ(40px) rotateZ(32deg) rotateX(-48deg);
  box-shadow:0 14px 30px -10px rgba(0,0,0,.6);
}
.iso-map .node-b.a{left:7%;top:7%;background:var(--ink);border:1.5px solid rgba(255,138,71,.6)}
.iso-map .node-b.b{right:5%;bottom:7%;background:linear-gradient(115deg,var(--naranja),var(--naranja-hi))}
.iso-map .node-b.c{left:46%;top:42%;background:#fff;color:var(--ink)}
.ruteo .expl{max-width:56ch;margin:48px auto 0;font-size:14px;line-height:1.7;color:#71716E;text-align:center}

/* ============================================================
   HISTORIA — claras, carta
   ============================================================ */
.historia{
  background:var(--claras);
  color:var(--ink);
  padding:150px 0 130px;
}
.historia .t-sec{text-align:center}
.historia .trace{display:flex;margin:24px auto 56px}
.letter{max-width:680px;margin:0 auto;font-size:clamp(16.5px,2vw,19px);line-height:1.65}
.letter p{margin-bottom:1.5em;color:#1E1C1A}
.letter p.key{font-family:var(--disp);font-weight:700}
.letter .more{
  max-height:0;overflow:hidden;
  transition:max-height .8s cubic-bezier(.2,.65,.2,1);
}
.letter.open .more{max-height:1200px}
.letter .fade-out{position:relative}
.letter:not(.open) .fade-out::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:90px;
  background:linear-gradient(180deg,transparent,var(--claras));
}
.letter .firma{font-size:15px;color:#71716E}
.letter .firma b{font-family:var(--disp);color:var(--ink);display:block;font-size:16px;margin-bottom:2px}
.btn-outline{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(17,17,17,.22);
  background:none;border-radius:var(--r-pill);
  padding:14px 30px;
  font-family:var(--disp);font-size:16px;font-weight:500;color:var(--ink);
  transition:border-color .25s, background .25s;
}
.btn-outline:hover{border-color:var(--ink);background:rgba(17,17,17,.03)}
.historia .cta-center{text-align:center;margin-top:38px}

/* ============================================================
   FAQ + CONTACTO
   ============================================================ */
.faq{
  background:var(--ink);
  padding:150px 0 60px;
}
.faq .t-sec{color:#fff;text-align:center;margin-bottom:56px}
.faq-list{max-width:720px;margin:0 auto}
.fitem{
  background:var(--ink-3);
  border:1px solid rgba(255,255,255,.06);
  border-radius:24px;
  margin-bottom:12px;
  overflow:hidden;
}
.fitem button.q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:none;border:none;text-align:left;
  padding:24px 28px;
  font-family:var(--disp);font-size:17px;font-weight:700;color:#fff;
}
.fitem .chev{flex:none;transition:transform .35s ease;color:#B9B9B5}
.fitem.open .chev{transform:rotate(180deg)}
.fitem .a{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.2,.65,.2,1)}
.fitem .a p{padding:0 28px 26px;color:#9A9A96;font-size:15.5px;line-height:1.65;max-width:60ch}

/* card de contacto — efecto sutil del manual: glow + ruido */
.chat-card{
  max-width:720px;margin:70px auto 0;
  border-radius:26px;
  background:
    radial-gradient(circle at 78% 18%,rgba(255,90,0,.28),transparent 55%),
    linear-gradient(150deg,#1E1E1D 0%,#141413 60%,#191918 100%);
  border:1px solid rgba(255,138,71,.22);
  padding:36px 32px 32px;
  overflow:hidden;position:relative;
}
.chat-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.2px);
  background-size:22px 22px;
  opacity:.35;
  -webkit-mask-image:radial-gradient(circle at 80% 20%,#000 20%,transparent 70%);
  mask-image:radial-gradient(circle at 80% 20%,#000 20%,transparent 70%);
}
.chat-card h3{font-family:var(--disp);font-size:clamp(1.5rem,3vw,1.9rem);font-weight:700;letter-spacing:-.02em;color:#fff;margin-bottom:10px}
.chat-card p{color:#B9B9B5;font-size:15.5px;max-width:40ch;margin-bottom:90px}
.chat-btn{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;border:none;border-radius:var(--r-pill);
  background:linear-gradient(180deg,#FF7B2E,var(--naranja) 60%,var(--naranja-dk));
  color:#fff;font-family:var(--disp);font-size:16px;font-weight:700;
  padding:10px 10px 10px 24px;
  box-shadow:0 14px 34px -10px rgba(255,90,0,.55);
  transition:transform .25s,box-shadow .25s;
  position:relative;
}
.chat-btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px -10px rgba(255,90,0,.7)}
.chat-btn .cir{
  width:40px;height:40px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
}

/* ============================================================
   FOOTER — sobrio + globo punteado naranja
   ============================================================ */
footer{
  position:relative;
  background:#0D0D0C;
  padding:100px 0 0;
  overflow:hidden;
}
/* final de página: wordmark gigante sobre planeta de puntos (canvas) */
.foot-finale{
  position:relative;
  margin-top:80px;
  height:clamp(300px,44vw,500px);
  overflow:hidden;
  pointer-events:none;
}
.finale-glow{
  position:absolute;left:50%;bottom:-45%;transform:translateX(-50%);
  width:82%;height:130%;
  background:radial-gradient(closest-side,rgba(255,90,0,.22),transparent 70%);
  filter:blur(32px);
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
.finale-globe{
  position:absolute;left:50%;top:clamp(-64px,-6vw,-30px);transform:translateX(-50%);
  width:min(720px,94vw);aspect-ratio:1;
  display:block;
}
.giant{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:.16em;
  font-family:var(--disp);font-weight:900;letter-spacing:-.03em;
  font-size:clamp(52px,11.5vw,150px);line-height:1;
  color:rgba(255,255,255,.1);
  padding-top:34px;
  white-space:nowrap;
  user-select:none;
}
.giant svg{width:.9em;height:.9em;flex:none;color:rgba(255,90,0,.55)}
.foot-brand{
  position:relative;
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--disp);font-weight:900;font-size:14.5px;letter-spacing:.09em;color:#fff;
  margin-bottom:12px;
}
.foot-brand svg{color:var(--naranja)}
.foot-tagline{position:relative;font-size:14.5px;color:#8F8F8A;margin-bottom:60px}
.foot-tagline b{color:var(--naranja);font-weight:600}
.foot-cols{
  position:relative;
  display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:44px;
  max-width:820px;
  margin-bottom:70px;
}
.foot-cols h4{font-family:var(--disp);font-size:16px;font-weight:500;color:#8F8F8A;margin-bottom:20px}
.foot-cols a{display:block;font-size:16px;color:#EDEDED;margin-bottom:14px;transition:color .25s}
.foot-cols a:hover{color:var(--naranja-hi)}
.foot-legal{position:relative;max-width:820px}
.foot-legal .fine{font-size:12px;line-height:1.7;color:#71716E;margin-bottom:26px;max-width:90ch}
.foot-legal .cop{font-size:13.5px;color:#8F8F8A;margin-bottom:26px}
.to-top:hover{background:#242423;border-color:var(--naranja)}
@media(max-width:640px){
  .foot-cols{grid-template-columns:1fr 1fr;gap:32px}
}


/* ============================================================
   FOOTER — Usuarios Financieros BCRA
   ============================================================ */

.foot-regulatory{
  position:relative;
  margin:10px 0 42px;
}

.footer-financial-link{
  display:inline-block;
  transition:opacity .25s ease, transform .25s ease;
}

.footer-financial-link:hover{
  opacity:.9;
  transform:translateY(-2px);
}

.footer-financial-link img{
  display:block;
  width:min(100%, 340px);
  height:auto;
  object-fit:contain;
}

@media(max-width:600px){

  .foot-regulatory{
    margin:8px 0 34px;
  }

  .footer-financial-link img{
    width:min(100%, 280px);
  }

}