/* ══════════════════════════════════════════════════════════════════════
   CIMBRIUM — el sistema visual se deriva del propio símbolo:
   navy de bóveda, iridiscencia acero→durazno, veta de oro.
   Regla de marca: el arco aparece SIEMPRE dentro de su escena, con su
   suelo y su sombra. Nunca recortado, nunca flotando.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --ink:#04070F; --navy:#080D1E; --navy-hi:#0E1830;
  --paper:#F7F6F2; --paper-2:#EDEBE4;
  --tx:#0A0F1C; --tx-2:#525B70; --tx-3:#616A7D;
  --tx-d:#EDF1F8; --tx-d2:#A6B0C6; --tx-d3:#8D97AE;
  --ln-d:rgba(180,205,255,.13); --ln-d2:rgba(180,205,255,.07);
  --ln-l:rgba(10,16,32,.11); --ln-l2:rgba(10,16,32,.06);
  --blue:#0121DC; --blue-2:#3E63F0; --cyan:#A9F3FF;
  --gold:#E3AC55; --gold-2:#F7D89B; --gold-d:#8D6120;
  --steel:#9CC0DE; --peach:#E8C3A4; --violet:#6D28D9;
  --ok:#2F8F63;
  --wrap:1180px; --nav-h:68px;
  --f:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fn:'Nunito',var(--f);
  --e:cubic-bezier(.23,1,.32,1);
  --e-io:cubic-bezier(.77,0,.175,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--f);background:var(--paper);color:var(--tx);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;font-size:17px;line-height:1.65}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--gold);color:#1A1206}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:max(22px,4vw)}
/* la nav es fija: los anclas no pueden dejar el titular debajo */
section[id],div[id],[id^="v-"]{scroll-margin-top:calc(var(--nav-h) + 26px)}
.sec{padding-block:clamp(74px,8.5vw,132px);position:relative}
.dark{background:var(--navy);color:var(--tx-d)}
.alt{background:var(--paper-2)}

h1,h2,h3{letter-spacing:-.03em;line-height:1.07;font-weight:800}
h1{font-size:clamp(2.45rem,4.8vw,4.1rem);letter-spacing:-.038em;line-height:1.03}
h2{font-size:clamp(1.95rem,3.35vw,2.95rem)}
h3{font-size:clamp(1.22rem,1.8vw,1.6rem);letter-spacing:-.025em}
p{text-wrap:pretty}
.lead{font-size:clamp(1.04rem,1.3vw,1.22rem);line-height:1.55;color:var(--tx-2);max-width:60ch}
.dark .lead,.hero .lead,.syn .lead,.figs .lead,.clx .lead,.inv .lead,.dcard .lead{color:var(--tx-d2)}
strong,b{font-weight:700}
.hl{background:linear-gradient(96deg,var(--gold-2) 6%,var(--gold) 50%,var(--peach) 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* etiqueta de sección: regla + versal. Nunca una píldora. */
.kick{display:flex;align-items:center;gap:14px;font-size:.735rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--gold-d);margin-bottom:20px}
.dark .kick,.hero .kick,.clx .kick,.syn .kick,.figs .kick,.inv .kick,.ft .kick{color:var(--gold)}
.kick::before{content:"";width:34px;height:1px;background:currentColor;opacity:.55;flex:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:6px;font-weight:700;font-size:.97rem;letter-spacing:-.01em;
  transition:transform 160ms var(--e),background-color 200ms var(--e),border-color 200ms var(--e)}
.btn:active{transform:scale(.975)}
.btn-p{background:linear-gradient(180deg,#F2C87E,var(--gold));color:#231704;
  box-shadow:0 1px 0 rgba(255,255,255,.42) inset,0 8px 18px -12px rgba(0,0,0,.6)}
.btn-s{border:1px solid var(--ln-d);color:var(--tx-d)}
@media(hover:hover) and (pointer:fine){
  .btn-p:hover{background:linear-gradient(180deg,#F8D89D,#EAB964)}
  .btn-s:hover{border-color:rgba(180,205,255,.34);background:rgba(180,205,255,.05)}
}
.arw{transition:transform 200ms var(--e)}
@media(hover:hover){a:hover .arw,.btn:hover .arw{transform:translateX(3px)}}

.js .rv{opacity:0;transform:translateY(15px);
  transition:opacity .62s var(--e),transform .62s var(--e)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1!important;transform:none!important;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}

/* ═════════ NAV ═════════ */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:120;display:flex;align-items:center;
  border-bottom:1px solid transparent;
  transition:background-color .35s var(--e),border-color .35s var(--e)}
.nav.on{background:rgba(4,7,15,.9);border-bottom-color:var(--ln-d2);
  backdrop-filter:saturate(170%) blur(16px);-webkit-backdrop-filter:saturate(170%) blur(16px)}
.nav-in{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:max(22px,4vw);
  display:flex;align-items:center;gap:34px}
.brand{display:flex;align-items:center;gap:11px;color:var(--tx-d)}
/* la placa ES la superficie: el recorte trae el suelo y la sombra del render */
.mark{width:34px;height:34px;border-radius:9px;flex:none;object-fit:cover;
  box-shadow:0 6px 16px -7px rgba(0,0,0,.9),0 0 0 1px rgba(180,205,255,.14) inset}
/* lockup canónico: símbolo + nombre + tagline (regla de marca §8c) */
.brand-tx{display:flex;flex-direction:column;line-height:1.08}
.brand-n{font-weight:800;font-size:1.2rem;letter-spacing:-.025em}
.brand-tag{margin-top:2px;font-size:.69rem;font-weight:500;letter-spacing:.005em;color:var(--tx-d3)}
/* El tagline suma ~110 px a la marca. Por debajo de 1120 px la barra ya no puede con
   marca + 4 enlaces + idioma + CTA, y los enlaces se partían en dos líneas (medido a
   952 px: 49 px de alto). En el pie hay sitio de sobra, así que allí se queda siempre. */
@media(max-width:1120px){.nav .brand-tag{display:none}}
.nav-l a,.nav .btn{white-space:nowrap}
.nav-l{display:flex;gap:26px;margin-left:8px}
.nav-l a{font-size:.92rem;font-weight:500;color:var(--tx-d2);transition:color .2s var(--e)}
@media(hover:hover){.nav-l a:hover{color:var(--tx-d)}}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:16px}
.lang{display:flex;gap:2px;padding:3px;border:1px solid var(--ln-d);border-radius:6px}
.lang a{padding:4px 8px;border-radius:4px;font-size:.72rem;font-weight:700;letter-spacing:.06em;
  color:var(--tx-d3);transition:color .2s var(--e),background-color .2s var(--e)}
.lang a[aria-current="true"]{background:rgba(180,205,255,.12);color:var(--tx-d)}
.nav .btn{padding:10px 18px;font-size:.88rem}

/* ═════════ HERO ═════════ */
.hero{position:relative;background:#000;color:var(--tx-d);overflow:hidden;
  padding-top:calc(var(--nav-h) + clamp(54px,6.5vw,92px));padding-bottom:clamp(56px,6vw,88px)}
.hero-bg{position:absolute;inset:0;
  background:radial-gradient(86% 104% at 13% 38%,#0E1834 0%,#070C1A 44%,#02040A 76%,#000 100%)}
/* Sin imagen ni textura decorativa en el hero: quien dice "plataforma digital"
   es el propio panel del ecosistema, con estructura de producto real.
   El arco vive en la sección del nombre, que es donde explica la marca. */
.hero-fade{position:absolute;left:0;right:0;bottom:0;height:140px;
  background:linear-gradient(to top,#000,transparent);pointer-events:none}
.hero-in{position:relative;z-index:2;max-width:var(--wrap);margin-inline:auto;padding-inline:max(22px,4vw);
  display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  gap:clamp(26px,3.2vw,52px);align-items:center}
.hero-col{max-width:640px}

/* ═══ CONSOLA DEL HERO — el ecosistema, sus partes y lo que lo hace único ═══
   Tipografía en `em` sobre una base ligada al ancho del panel: escala entera. */
.hv{container-type:inline-size;font-size:clamp(9.4px,2.06cqw,12.2px);line-height:1.4;
  border-radius:18px;padding:1.5em 1.5em 1.35em;
  background:linear-gradient(158deg,rgba(20,32,66,.86),rgba(8,13,30,.9));
  border:1px solid rgba(180,205,255,.14);
  box-shadow:0 40px 80px -44px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.06) inset;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hv-h{display:flex;align-items:center;justify-content:space-between;gap:1em;margin-bottom:1.35em}
.hv-h-t{font-size:1.02em;font-weight:800;letter-spacing:-.02em;color:var(--tx-d)}
.hv-h-s{display:flex;align-items:center;gap:.45em;font-size:.82em;color:var(--tx-d3)}
.hv-h-s i{width:.45em;height:.45em;border-radius:50%;background:var(--ok);flex:none}

/* las cuatro partes, unidas por un raíl que se dibuja */
.hv-nodes{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:.6em;
  padding-bottom:1.3em;margin-bottom:1.3em;border-bottom:1px solid rgba(180,205,255,.12)}
.hv-rail{position:absolute;left:6%;right:6%;top:1.05em;height:1.5px;
  background:rgba(180,205,255,.14);overflow:hidden;border-radius:1px}
.hv-rail i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--blue) 45%,var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--e-io) .25s}
.in .hv-rail i{transform:scaleX(1)}
/* el pulso que recorre el raíl: es el dinero de UNA obra atravesando el ecosistema.
   Motion con significado, no adorno — por eso se repite y por eso va en el raíl. */
.hv-rail u{position:absolute;inset:0 auto 0 0;width:26%;text-decoration:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  transform:translateX(-140%)}
.in .hv-rail u{animation:rail-pulse 3.8s cubic-bezier(.55,0,.2,1) 1.7s infinite}
@keyframes rail-pulse{0%{transform:translateX(-140%)}45%,100%{transform:translateX(420%)}}
.hv-n{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3em}
.hv-n img{width:1.9em;height:auto;padding:.28em;border-radius:.5em;
  background:rgba(8,13,30,.96);box-shadow:0 0 0 1px rgba(180,205,255,.14);
  transform:scale(.84);transition:transform .55s var(--e)}
.js .in .hv-n img{transform:scale(1)}
.hv-n b{font-size:.85em;font-weight:800;letter-spacing:-.02em;color:var(--tx-d);line-height:1.2}
.hv-n span{font-size:.74em;color:var(--tx-d3);line-height:1.25}
.js .hv-n{opacity:0;transform:translateY(7px);
  transition:opacity .5s var(--e),transform .5s var(--e)}
.js .in .hv-n{opacity:1;transform:none}
.js .in .hv-n:nth-child(2){transition-delay:.35s}
.js .in .hv-n:nth-child(3){transition-delay:.5s}
.js .in .hv-n:nth-child(4){transition-delay:.65s}
.js .in .hv-n:nth-child(5){transition-delay:.8s}

/* la obra concreta: nombre, avance certificado e importe del hito */
.hv-obra{background:rgba(4,8,20,.55);border:1px solid rgba(180,205,255,.11);border-radius:.85em;
  padding:.95em 1.05em}
.hv-ob-h{display:flex;align-items:baseline;justify-content:space-between;gap:.8em}
.hv-ob-n{font-size:.98em;font-weight:800;letter-spacing:-.02em;color:var(--tx-d)}
.hv-ob-h2{font-size:.82em;font-weight:700;color:#8FB6FF;white-space:nowrap}
.hv-ob-bar{height:.42em;border-radius:.21em;background:rgba(255,255,255,.08);overflow:hidden;margin:.7em 0 .55em}
.hv-ob-bar i{display:block;height:100%;width:66%;border-radius:.21em;
  background:linear-gradient(90deg,#F2C87E,var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--e) .35s}
.in .hv-ob-bar i{transform:scaleX(1)}
.hv-ob-f{display:flex;align-items:baseline;justify-content:space-between;gap:.8em;
  font-size:.82em;color:var(--tx-d3)}
.hv-ob-f b{font-family:var(--fn);font-size:1.72em;font-weight:800;letter-spacing:-.04em;
  color:var(--gold-2);font-variant-numeric:tabular-nums;line-height:1}

/* el recorrido del dinero: custodiado → verificado → liberado.
   Es el cruce IA↔dinero, y no se repite en ninguna otra sección. */
.hv-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em;position:relative;margin-top:1.15em}
.hv-steps::before{content:"";position:absolute;left:16%;right:16%;top:1.25em;height:1.5px;
  background:linear-gradient(90deg,rgba(63,169,122,.5),rgba(227,172,85,.55),rgba(63,169,122,.5))}
.hv-s{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:.32em}
.hv-s b{font-size:.86em;font-weight:800;letter-spacing:-.02em;color:var(--tx-d);line-height:1.2}
.hv-s span:last-child{font-size:.74em;color:var(--tx-d3);line-height:1.25}
.hv-s-d{width:2.5em;height:2.5em;border-radius:50%;display:grid;place-items:center;
  background:rgba(63,169,122,.16);border:1.5px solid rgba(63,169,122,.5)}
.hv-s-d svg{width:.9em;height:.9em;stroke:#6FD3A2;stroke-width:2.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.hv-ring{position:relative;width:2.5em;height:2.5em;flex:none;
  border-radius:50%;background:rgba(6,10,24,.92)}
.hv-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.hv-ring circle{fill:none;stroke-width:4}
.hv-ring .bg{stroke:rgba(255,255,255,.12)}
.hv-ring .fg{stroke:url(#goldring);stroke-linecap:round;stroke-dasharray:120;stroke-dashoffset:120;
  transition:stroke-dashoffset 1.5s var(--e) .55s}
.in .hv-ring .fg{stroke-dashoffset:15.6}
.hv-ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--fn);
  font-size:.92em;font-weight:800;letter-spacing:-.02em;color:var(--gold-2)}
.js .hv-s{opacity:0;transform:translateY(6px);transition:opacity .5s var(--e),transform .5s var(--e)}
.js .in .hv-s{opacity:1;transform:none}
.js .in .hv-s:nth-child(2){transition-delay:.5s}
.js .in .hv-s:nth-child(3){transition-delay:.65s}

/* la prueba que sostiene el score */
.hv-evid{display:flex;align-items:center;gap:.5em;margin-top:1.15em;padding-top:.95em;
  border-top:1px solid rgba(180,205,255,.12);font-size:.79em;color:var(--tx-d2);line-height:1.35}
.hv-evid svg{width:1.2em;height:1.2em;flex:none;stroke:var(--gold);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* el reparto: la cifra que exige las tres piezas a la vez */
.hv-split{margin-top:1.05em}
.hv-sp-h{display:flex;align-items:baseline;justify-content:space-between;gap:1em;
  font-size:.82em;color:var(--tx-d3);margin-bottom:.5em}
.hv-sp-h b{font-weight:800;color:var(--gold-2)}
.hv-sp-bar{height:.62em;border-radius:.31em;overflow:hidden;display:flex;background:rgba(255,255,255,.07)}
.hv-sp-bar i{display:block;height:100%;transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--e)}
.hv-sp-bar .mine{width:38%;background:linear-gradient(90deg,#F2C87E,var(--gold));transition-delay:.8s}
.hv-sp-bar .rest{width:62%;background:rgba(180,205,255,.16);transition-delay:.95s}
.in .hv-sp-bar i{transform:scaleX(1)}
.hv-sp-k{display:flex;flex-wrap:wrap;gap:.3em 1.1em;margin-top:.55em;font-size:.75em;color:var(--tx-d3)}
.hv-sp-k>span{display:flex;align-items:center;gap:.4em}
.hv-sp-k i{width:.55em;height:.55em;border-radius:.14em;flex:none}
.hv-sp-k .k1{background:var(--gold)}
.hv-sp-k .k2{background:rgba(180,205,255,.3)}

/* el motor por país, que es lo que sostiene "en cualquier país" del titular */
.hv-geo{display:flex;align-items:center;flex-wrap:wrap;gap:.4em .55em;margin-top:1.15em;
  padding-top:.95em;border-top:1px solid rgba(180,205,255,.12);font-size:.76em;color:var(--tx-d3)}
.hv-geo>span{font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-right:.15em}
.hv-geo em{font-style:normal;font-weight:700;color:var(--tx-d2);
  border:1px solid rgba(180,205,255,.18);border-radius:.35em;padding:.15em .5em}
.hv-geo em.prep{color:var(--tx-d3);border-style:dashed}

.hv-cap{margin-top:.85rem;font-size:.72rem;color:var(--tx-d3)}
.h-origin{display:inline-flex;align-items:center;gap:10px;font-size:.83rem;font-weight:600;
  color:var(--tx-d2);margin-bottom:26px}
.h-origin::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;background:var(--gold)}
/* el hero va a dos columnas: el titular baja un punto para no romper en 5 líneas */
.hero h1{margin-bottom:26px;font-size:clamp(2.4rem,4.35vw,3.75rem)}
/* El titular se descubre de abajo arriba. El `clip-path` va en el H1 INTERIOR, nunca
   en el elemento observado: IntersectionObserver mide el rectángulo YA recortado, así
   que un `.rv` recortado a cero nunca se considera visible y jamás recibe `.in`. */
.js .h1-rv h1{clip-path:inset(0 0 104% 0);transition:clip-path 1s var(--e)}
.js .h1-rv.in h1{clip-path:inset(-12% -6% -14% -6%)}
/* la consola entra con cuerpo, no como un desvanecido más */
.js .hero-viz.rv{transform:translateY(22px) scale(.975);
  transition:opacity .8s var(--e),transform .8s var(--e)}
.js .hero-viz.rv.in{transform:none}
.hero .lead{max-width:54ch;margin-bottom:34px;color:var(--tx-d2)}
.h-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:38px}
.h-trust{display:grid;gap:13px;max-width:52ch;list-style:none}
.h-trust li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:var(--tx-d2)}
.h-trust strong{color:var(--tx-d)}
.tick{flex:none;width:19px;height:19px;margin-top:3px;border-radius:50%;
  background:rgba(227,172,85,.12);border:1px solid rgba(227,172,85,.42);display:grid;place-items:center}
.tick svg{width:9px;height:9px;stroke:var(--gold);stroke-width:2.6;fill:none}

/* ═════════ BANDA DEL ECOSISTEMA ═════════ */
.plinth{background:#000;border-top:1px solid var(--ln-d2);position:relative;z-index:3}
.plinth-in{max-width:var(--wrap);margin-inline:auto;padding:clamp(26px,3vw,38px) max(22px,4vw)}
.plinth-h{font-size:.735rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--tx-d3);margin-bottom:22px}
.plinth-g{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ln-d2);
  border:1px solid var(--ln-d2);border-radius:10px;overflow:hidden}
.pl{background:#000;padding:20px 22px;display:flex;flex-direction:column;gap:11px;
  transition:background-color .3s var(--e)}
@media(hover:hover){.pl:hover{background:#080D1B}}
.pl-t{display:flex;align-items:center;gap:10px}
.pl-t img{width:22px;height:auto;flex:none}
.pl-n{font-weight:800;font-size:1rem;letter-spacing:-.02em;color:var(--tx-d)}
.pl-r{font-size:.82rem;line-height:1.45;color:var(--tx-d3)}

/* ═════════ CONTEXTO ═════════ */
.cx-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);align-items:start}
.cx-figs{display:grid;gap:2px;background:var(--ln-l2);
  border-top:1px solid var(--ln-l);border-bottom:1px solid var(--ln-l)}
.cxf{background:var(--paper);padding:24px 0}
.cxf-n{font-family:var(--fn);font-weight:800;font-size:clamp(2rem,3.2vw,2.75rem);
  letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.cxf-d{margin-top:9px;font-size:.96rem;line-height:1.5;color:var(--tx-2);max-width:44ch}
.cxf-s{margin-top:8px;font-size:.73rem;color:var(--tx-3)}
.cx-close{margin-top:30px;font-size:clamp(1.15rem,1.6vw,1.42rem);font-weight:800;letter-spacing:-.028em;
  line-height:1.32;max-width:22ch}

/* ═════════ CICLO ═════════ */
.cyc{padding-block:clamp(74px,8vw,120px);background:var(--paper-2);overflow:hidden}
.cyc-head{max-width:var(--wrap);margin-inline:auto;padding-inline:max(22px,4vw);
  margin-bottom:clamp(46px,5vw,72px)}
.cyc-rail{position:relative;padding-inline:max(22px,4vw);max-width:var(--wrap);margin-inline:auto}
.cyc-line{position:absolute;left:max(22px,4vw);right:max(22px,4vw);top:9px;height:2px;
  background:linear-gradient(90deg,var(--blue),#6E7DE6 44%,var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform 1.5s var(--e-io)}
.cyc-rail.in .cyc-line{transform:scaleX(1)}
.cyc-steps{display:grid;grid-template-columns:repeat(8,1fr);gap:clamp(14px,1.8vw,26px);position:relative}
.cst-dot{width:20px;height:20px;border-radius:50%;background:var(--paper-2);
  border:2px solid var(--blue);display:grid;place-items:center;position:relative;z-index:2}
.cst-dot i{width:7px;height:7px;border-radius:50%;background:var(--blue);display:block}
.cst:nth-child(7) .cst-dot{border-color:var(--gold-d)}
.cst:nth-child(7) .cst-dot i{background:var(--gold-d)}
.cst-n{margin-top:18px;font-size:.7rem;font-weight:700;letter-spacing:.14em;color:var(--tx-3)}
/* line-height propio y altura de DOS lineas: heredaba el 1.65 del body y la fila
   de propietarios se descolgaba 17 px en los pasos con titulo largo */
.cst-t{margin-top:6px;font-size:clamp(1rem,1.35vw,1.18rem);font-weight:800;letter-spacing:-.025em;
  line-height:1.22;min-height:2.44em}
.cst-o{margin-top:9px;padding-top:9px;font-size:.745rem;font-weight:600;color:var(--tx-2);
  padding-top:9px;border-top:1px solid var(--ln-l)}
/* PropertyJourney abre y cierra el ciclo: es partner, no division, y se marca */
.cst-pj .cst-dot{border-color:#4E31DD}
.cst-pj .cst-dot i{background:#4E31DD}
.cst-o em{display:block;margin-top:3px;font-style:normal;font-size:.88em;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:#4E31DD}
/* el titulo reserva dos lineas para que la fila de propietarios no baile */


/* ═════════ DIVISIONES — una caja por app, no un plano blanco ═════════
   Cada división vive en su propia tarjeta con fondo de degradado animado
   (dos manchas radiales que derivan lentamente, al modo de Stripe). */
.dv-head{margin-bottom:clamp(34px,4vw,56px)}
.dcards{display:grid;gap:clamp(16px,1.9vw,26px)}

.dcard{position:relative;overflow:hidden;border-radius:22px;color:var(--tx-d);
  padding:clamp(24px,3.2vw,50px);isolation:isolate;
  box-shadow:0 34px 66px -44px rgba(6,12,30,.62),0 1px 0 rgba(255,255,255,.05) inset}
.dcard-bg{position:absolute;inset:0;z-index:-1}
/* Círculos, no elipses: el tamaño se ata SOLO al ancho de la tarjeta y el
   desplazamiento va en % del propio elemento, nunca del alto del contenedor.
   Así el dibujo es el mismo en desktop y en una tarjeta apilada de móvil.
   Anclados a tres puntos (arriba-izq · centro · abajo-dcha) para que una
   tarjeta alta no se quede plana por el medio. */
.dcard-bg i{position:absolute;display:block;width:92%;aspect-ratio:1;border-radius:50%;
  will-change:transform}
.dcard-bg i:nth-child(1){left:0;top:0;animation:drift-a 7s ease-in-out infinite alternate}
.dcard-bg i:nth-child(2){right:0;bottom:0;animation:drift-b 9.5s ease-in-out infinite alternate}
.dcard-bg i:nth-child(3){left:50%;top:50%;width:74%;animation:drift-c 12s ease-in-out infinite alternate}
@keyframes drift-a{from{transform:translate(-26%,-42%) scale(1)}   to{transform:translate(-6%,-22%) scale(1.2)}}
@keyframes drift-b{from{transform:translate(28%,40%) scale(1.04)}  to{transform:translate(6%,18%) scale(1.22)}}
@keyframes drift-c{from{transform:translate(-62%,-64%) scale(.9)}  to{transform:translate(-38%,-36%) scale(1.14)}}

.d-cp{background:linear-gradient(152deg,#161D48,#0A0F26 60%,#070A18)}
.d-cp i:nth-child(1){background:radial-gradient(circle,rgba(46,58,168,.85),transparent 68%)}
.d-cp i:nth-child(3){background:radial-gradient(circle,rgba(46,58,168,.5),transparent 66%)}
.d-cp i:nth-child(2){background:radial-gradient(circle,rgba(11,78,140,.7),transparent 66%)}
.d-ps{background:linear-gradient(152deg,#06203F,#05142A 60%,#03091A)}
.d-ps i:nth-child(1){background:radial-gradient(circle,rgba(38,104,196,.44),transparent 68%)}
.d-ps i:nth-child(3){background:radial-gradient(circle,rgba(38,104,196,.26),transparent 66%)}
.d-ps i:nth-child(2){background:radial-gradient(circle,rgba(74,60,190,.4),transparent 66%)}
.d-fc{background:linear-gradient(152deg,#2A1B5E,#150E33 60%,#08061A)}
.d-fc i:nth-child(1){background:radial-gradient(circle,rgba(124,77,238,.72),transparent 68%)}
.d-fc i:nth-child(3){background:radial-gradient(circle,rgba(124,77,238,.44),transparent 66%)}
.d-fc i:nth-child(2){background:radial-gradient(circle,rgba(178,149,255,.44),transparent 66%)}
/* PropertyJourney: su paleta real (#4E31DD · #B295FF · #180E44) */
.d-pj{background:linear-gradient(152deg,#241466,#180E44 60%,#0A0722)}
.d-pj i:nth-child(1){background:radial-gradient(circle,rgba(78,49,221,.8),transparent 68%)}
.d-pj i:nth-child(3){background:radial-gradient(circle,rgba(78,49,221,.5),transparent 66%)}
.d-pj i:nth-child(2){background:radial-gradient(circle,rgba(178,149,255,.42),transparent 66%)}

.dcard-in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(26px,3.6vw,58px);align-items:center}
.dcard.rev .dcard-in{direction:rtl}
.dcard.rev .dcard-in>*{direction:ltr}
.dcard-txt{max-width:44ch}
.d-brand{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.d-brand img{width:29px;height:auto}
.d-brand b{font-size:1.1rem;font-weight:800;letter-spacing:-.025em}
.d-brand em{font-style:normal;font-size:.77rem;font-weight:600;color:var(--tx-d3);
  padding-left:12px;border-left:1px solid var(--ln-d)}
.dcard h3{margin-bottom:16px;font-size:clamp(1.4rem,2.2vw,2rem);line-height:1.14}
.dcard p{color:var(--tx-d2);font-size:1rem;margin-bottom:22px}
.d-facts{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;margin-bottom:24px;padding-top:18px;
  border-top:1px solid var(--ln-d)}
.d-fact b{display:block;font-family:var(--fn);font-size:1.16rem;font-weight:800;letter-spacing:-.03em;
  color:var(--gold-2);font-variant-numeric:tabular-nums;line-height:1.1}
.d-fact span{display:block;margin-top:3px;font-size:.75rem;color:var(--tx-d3)}
.d-go{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.95rem;color:var(--gold-2)}
.d-shot{position:relative}
/* los flotantes se anclan al MARCO del mockup, no al bloque con el pie de foto */
.d-frame{position:relative}
.vit-cap{margin-top:42px;font-size:.72rem;color:var(--tx-d3)}
/* lista de apoyo cuando el mockup es alto y la columna de texto queda corta */
.d-list{display:grid;gap:11px;margin:0 0 24px;padding-top:18px;border-top:1px solid var(--ln-d);list-style:none}
.d-list li{display:flex;gap:11px;align-items:flex-start;font-size:.93rem;color:var(--tx-d2)}
.d-list li strong{color:var(--tx-d)}
.d-list .tick{margin-top:2px}

@media (prefers-reduced-motion:reduce){.dcard-bg i{animation:none}}
@media(max-width:900px){
  /* la tarjeta apilada es mucho más alta: manchas mayores para que las tres
     se fundan igual que en desktop en vez de quedar como tres charcos sueltos */
  .dcard-bg i{width:132%}
  .dcard-bg i:nth-child(3){width:112%}
  .dcard-in{grid-template-columns:1fr;gap:clamp(24px,4vw,36px)}
  .dcard.rev .dcard-in{direction:ltr}
  .dcard-txt{max-width:none}
}

/* ─────────────────────────────────────────────────────────────
   MOCKUPS DE PRODUCTO
   Toda la tipografía interior va en `em` sobre una base ligada al
   ancho del contenedor (cqw): el mockup escala entero, sin recortes
   ni saltos de línea imprevistos a ningún ancho.
   ───────────────────────────────────────────────────────────── */

/* piezas flotantes sobre el mockup (patrón Stripe) */
.float{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;
  padding:9px 13px;border-radius:9px;background:rgba(252,252,250,.97);
  box-shadow:0 14px 30px -14px rgba(4,8,20,.6),0 0 0 1px rgba(10,16,32,.06);
  font-size:.72rem;font-weight:700;letter-spacing:-.01em;color:#0A0F1C;white-space:nowrap}
.float small{display:block;font-size:.62rem;font-weight:600;color:#8A8F9C;letter-spacing:0}
.float .dot{width:7px;height:7px;border-radius:50%;flex:none}
.float .dot.ok{background:var(--ok)}
.float .dot.gold{background:var(--gold)}
.float .dot.vio{background:var(--violet)}
.float .pct{font-family:var(--fn);font-size:.86rem;color:var(--ok)}
.js .float{opacity:0;transform:translateY(10px) scale(.96);
  transition:opacity .6s var(--e),transform .6s var(--e)}
.js .in .float{opacity:1;transform:none}
.js .in .float.f2{transition-delay:.16s}
.js .in .float.f3{transition-delay:.3s}
@media(max-width:620px){.float{display:none}}

/* latido del punto "en vivo" — el único bucle, y es semántico */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.live-dot{animation:pulse 2.4s ease-in-out infinite}

/* ═══ ventana de aplicación ═══ */
.win{border-radius:11px;overflow:hidden;background:#FFF;position:relative;z-index:1;
  container-type:inline-size;font-size:clamp(8.4px,2.32cqw,11.4px);line-height:1.35;
  box-shadow:0 26px 50px -24px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.07)}
.win-bar{height:2.5em;background:#F0EFEB;border-bottom:1px solid #E2E1DA;display:flex;
  align-items:center;gap:.45em;padding-inline:.95em}
.win-bar i{width:.62em;height:.62em;border-radius:50%;display:block}
.win-bar i:nth-child(1){background:#E0776A}
.win-bar i:nth-child(2){background:#E3B75C}
.win-bar i:nth-child(3){background:#7EBE7A}
.win-url{margin-left:.8em;display:flex;align-items:center;gap:.4em;font-size:.78em;color:#8E8E86;
  background:#FBFBF9;border:1px solid #E6E5DE;border-radius:.5em;padding:.18em .7em}
.win-url svg{width:.75em;height:.9em;stroke:#A9A9A1;fill:none;stroke-width:1.6}
.app{display:grid;grid-template-columns:11.2em 1fr;min-height:27em}

.side{background:#0A0F22;padding:1.25em 1em;display:flex;flex-direction:column;gap:.2em}
.side-b{display:flex;align-items:center;gap:.55em;font-size:.92em;font-weight:800;color:#EDF1F8;
  letter-spacing:-.02em;margin-bottom:1.15em}
.side-b img{width:1.35em;height:auto;flex:none}
.side-b span{display:block;width:1.3em;height:1.3em;border-radius:.34em;flex:none}
.sl{display:flex;align-items:center;gap:.55em;font-size:.86em;color:#79839B;padding:.45em .6em;
  border-radius:.4em;font-weight:600}
.sl u{width:.72em;height:.72em;border:1.4px solid currentColor;border-radius:.16em;flex:none;opacity:.75}
.sl.on{background:rgba(180,205,255,.1);color:#EDF1F8}
.sl.on u{background:currentColor;opacity:1}
.side-u{margin-top:auto;display:flex;align-items:center;gap:.5em;padding-top:1em;
  border-top:1px solid rgba(180,205,255,.09);font-size:.78em;color:#79839B}
.side-u b{width:1.5em;height:1.5em;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(140deg,#5B7BF5,#1E31C4);color:#fff;font-size:.72em}

.main{padding:1.35em 1.4em;background:#FBFBF9;display:flex;flex-direction:column;gap:1.05em}
.m-h{display:flex;align-items:center;justify-content:space-between;gap:.8em}
.m-t{font-size:1.12em;font-weight:800;letter-spacing:-.025em;color:#0A0F1C}
.m-s{font-size:.76em;color:#A0A099;display:flex;align-items:center;gap:.45em}
.m-s i{width:.42em;height:.42em;border-radius:50%;background:var(--ok);display:block}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.6em}
.kpi{background:#FFF;border:1px solid #E7E6DF;border-radius:.55em;padding:.7em .75em}
.kpi-l{font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#A0A099;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-v{margin-top:.28em;font-family:var(--fn);font-weight:800;font-size:1.24em;letter-spacing:-.035em;
  color:#0A0F1C;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.1}
.kpi-d{margin-top:.3em;font-size:.66em;font-weight:700;color:var(--ok);display:flex;align-items:center;gap:.25em}
.kpi-d.flat{color:#A0A099}

/* mini gráfico de área */
.spark{background:#FFF;border:1px solid #E7E6DF;border-radius:.55em;padding:.7em .8em .5em}
.spark-h{display:flex;align-items:baseline;justify-content:space-between;gap:.6em;margin-bottom:.35em}
.spark-t{font-size:.72em;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#A0A099}
.spark-v{font-family:var(--fn);font-size:.9em;font-weight:800;color:#0A0F1C;font-variant-numeric:tabular-nums}
.spark svg{display:block;width:100%;height:3.4em;overflow:visible}
.spark .ln{fill:none;stroke:var(--blue);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset 1.6s var(--e-io) .25s}
.in .spark .ln{stroke-dashoffset:0}
.spark .ar{fill:url(#cpFill);opacity:0;transition:opacity .8s var(--e) .9s}
.in .spark .ar{opacity:1}
.spark .dt{fill:var(--blue);opacity:0;transition:opacity .4s var(--e) 1.5s}
.in .spark .dt{opacity:1}
.spark-x{display:flex;justify-content:space-between;font-size:.62em;color:#B4B4AC;margin-top:.15em}

.tbl{background:#FFF;border:1px solid #E7E6DF;border-radius:.55em;overflow:hidden}
.tr{display:grid;grid-template-columns:1.5fr .78fr .86fr .68fr 1.05fr;gap:.7em;padding:.62em .85em;
  align-items:center;border-bottom:1px solid #F1F0EA;font-size:.82em;color:#3E4657}
.tr:last-child{border-bottom:0}
.tr.hd{background:#F6F5F1;font-size:.68em;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#A0A099}
.tr b{font-weight:700;color:#0A0F1C;display:flex;align-items:center;gap:.5em;white-space:nowrap}
.tr b s{width:.45em;height:.45em;border-radius:50%;flex:none;text-decoration:none}
.s-run s{background:var(--ok)}
.s-cert s{background:var(--gold)}
.s-new s{background:#9AA2B4}
.tr em{font-style:normal;font-variant-numeric:tabular-nums}
.pgr{display:flex;align-items:center;gap:.5em}
.bar{height:.38em;border-radius:.19em;background:#E9E8E1;overflow:hidden;flex:1}
.bar i{display:block;height:100%;border-radius:.19em;background:linear-gradient(90deg,var(--blue-2),var(--blue));
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--e)}
.in .bar i{transform:scaleX(1)}
.pgr em{font-size:.86em;color:#7A8298;min-width:2.4em;text-align:right}
.tr:nth-child(2) .bar i{transition-delay:.15s}
.tr:nth-child(3) .bar i{transition-delay:.27s}
.tr:nth-child(4) .bar i{transition-delay:.39s}
.tr:nth-child(5) .bar i{transition-delay:.51s}

/* ═══ teléfono ═══ */
/* radio y marco en px: el radio interior es EXACTAMENTE el exterior menos el marco.
   En `em` no casaban, porque la pantalla tiene su propio font-size de contenedor. */
.phone{--r:38px; --p:10px;
  width:min(246px,72%);margin-inline:auto;border-radius:var(--r);padding:var(--p);
  position:relative;z-index:1;background:linear-gradient(158deg,#39415C,#0B0F1C);
  box-shadow:0 30px 56px -26px rgba(0,0,0,.78),0 0 0 1px rgba(180,205,255,.14) inset}
.phone-s{position:relative;border-radius:calc(var(--r) - var(--p));overflow:hidden;background:#FBFBF9;
  container-type:inline-size;font-size:clamp(8.4px,4.3cqw,11px);line-height:1.35;
  aspect-ratio:9/19.3}
/* isla dinámica: la señal de "esto es un móvil" que más pesa */
.island{position:absolute;top:.75em;left:50%;translate:-50% 0;z-index:5;
  width:6.6em;height:1.9em;border-radius:1em;background:#0A0F1C}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;
  transition:opacity .85s var(--e),transform .85s var(--e)}
.scr.b{opacity:0;transform:translateX(9%)}
.phone-s.alt .scr.a{opacity:0;transform:translateX(-9%)}
.phone-s.alt .scr.b{opacity:1;transform:none}
/* la barra de estado rodea la isla: tiempo a la izquierda, indicadores a la derecha */
.ph-top{display:flex;justify-content:space-between;align-items:center;padding:1.15em 1.4em .45em;
  font-size:.8em;font-weight:700;color:#0A0F1C}
.ph-top span{display:flex;align-items:center;gap:.3em}
.ph-top svg{height:.78em;width:auto;fill:#0A0F1C}
/* el hueco inferior reserva el sitio de la nav, que va fija sobre las 2 pantallas */
.ph-b{flex:1;padding:.5em 1.15em 4em;display:flex;flex-direction:column;gap:.75em;overflow:hidden}
.ph-hi{display:flex;align-items:center;gap:.6em}
.ph-av{width:2.3em;height:2.3em;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,#8FE6FA,#1E3FE0);color:#fff;font-size:.82em;font-weight:800}
.ph-hn{font-size:.98em;font-weight:800;letter-spacing:-.02em;color:#0A0F1C}
.ph-hs{font-size:.76em;color:#A0A099}
.ph-bell{margin-left:auto;position:relative;width:1.5em;height:1.5em}
.ph-bell svg{width:100%;height:100%;stroke:#5A6379;fill:none;stroke-width:1.7}
.ph-bell b{position:absolute;top:-.15em;right:-.15em;min-width:1em;height:1em;border-radius:.5em;
  background:#D9534F;color:#fff;font-size:.58em;display:grid;place-items:center;font-weight:800}

.ph-card{background:#0A0F22;border-radius:.95em;padding:.9em 1em;color:#EDF1F8}
.ph-cr{display:flex;align-items:center;justify-content:space-between;gap:.7em}
.ph-l{font-size:.72em;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#8A94AC}
.ph-v{font-family:var(--fn);font-weight:800;font-size:1.72em;letter-spacing:-.035em;margin-top:.12em;
  font-variant-numeric:tabular-nums;line-height:1.05}
.ring{width:3.4em;height:3.4em;flex:none;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:4.5}
.ring .bg{stroke:rgba(255,255,255,.14)}
.ring .fg{stroke:url(#goldring);stroke-linecap:round;stroke-dasharray:138;stroke-dashoffset:138;
  transition:stroke-dashoffset 1.5s var(--e) .3s}
.in .ring .fg{stroke-dashoffset:18}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--fn);
  font-size:1.12em;font-weight:800;letter-spacing:-.02em}
.ring u{position:absolute;left:0;right:0;bottom:-1.05em;text-align:center;font-size:.58em;
  text-decoration:none;color:#8A94AC;letter-spacing:.08em;font-weight:700}
.ph-mini{margin-top:.85em;padding-top:.7em;border-top:1px solid rgba(180,205,255,.12)}
.ph-mini svg{display:block;width:100%;height:2.5em;overflow:visible}
.ph-mini .ln{fill:none;stroke:#7FE3B0;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1.7s var(--e-io) .45s}
.in .ph-mini .ln{stroke-dashoffset:0}
.ph-mini .ar{fill:url(#psFill);opacity:0;transition:opacity .9s var(--e) 1.1s}
.in .ph-mini .ar{opacity:1}
.ph-mx{display:flex;justify-content:space-between;font-size:.6em;color:#6E7893;margin-top:.2em}

.ph-mile{background:#FFF;border:1px solid #E7E6DF;border-radius:.95em;padding:.85em .9em}
.ph-mt{display:flex;justify-content:space-between;align-items:baseline;gap:.6em}
.ph-mn{font-size:.92em;font-weight:800;letter-spacing:-.02em;color:#0A0F1C}
.ph-mh{font-size:.74em;font-weight:700;color:var(--blue);white-space:nowrap}
.ph-mp{margin-top:.3em;font-size:.74em;color:#A0A099;display:flex;align-items:center;gap:.35em}
.ph-mp svg{width:.85em;height:.85em;stroke:var(--ok);fill:none;stroke-width:2.4;flex:none}
.ph-mile .bar{margin-top:.6em;height:.42em}
.ph-mile .bar i{background:linear-gradient(90deg,#F2C87E,var(--gold));transition-delay:.5s}
.ph-mr{display:flex;justify-content:space-between;font-size:.68em;color:#A0A099;margin-top:.35em}
.ph-mr b{color:#0A0F1C;font-variant-numeric:tabular-nums}
.ph-st{display:flex;align-items:center;gap:.5em;font-size:.76em;font-weight:700;color:var(--ok);
  background:rgba(47,143,99,.09);border:1px solid rgba(47,143,99,.22);border-radius:.6em;padding:.55em .75em}
.ph-st i{width:.45em;height:.45em;border-radius:50%;background:var(--ok);flex:none}
.ph-act{display:grid;grid-template-columns:1fr 1fr;gap:.5em}
.ph-act span{display:flex;align-items:center;justify-content:center;gap:.35em;font-size:.78em;
  font-weight:700;color:#3E4657;background:#FFF;border:1px solid #E7E6DF;border-radius:.65em;padding:.6em .4em}
.ph-act span.pri{background:#0A0F22;border-color:#0A0F22;color:#fff}
.ph-act svg{width:1.05em;height:1.05em;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.ph-next{margin-top:.1em}
.ph-nx-h{font-size:.72em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#A0A099;
  margin-bottom:.45em}
.ph-nx{display:flex;align-items:center;gap:.5em;font-size:.8em;color:#3E4657;
  padding:.5em 0;border-top:1px solid #ECEBE4}
.ph-nx s{width:.85em;height:.85em;border-radius:.22em;flex:none;text-decoration:none;
  background:linear-gradient(140deg,#D9E4F5,#AFC4E6)}
.ph-nx b{margin-left:auto;color:#0A0F1C;font-variant-numeric:tabular-nums}
.ph-nx em{font-style:normal;font-size:.86em;color:#A0A099;min-width:3.4em;text-align:right}

/* pantalla 2 — Mis obras */
.ph-h2{font-size:1.15em;font-weight:800;letter-spacing:-.03em;color:#0A0F1C;margin-bottom:.15em}
.ph-sum{display:grid;grid-template-columns:1fr 1fr;gap:.5em;margin:.5em 0 .6em}
.ph-sum div{background:#FFF;border:1px solid #E7E6DF;border-radius:.6em;padding:.5em .6em}
.ph-sum span{display:block;font-size:.66em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#A0A099}
.ph-sum b{display:block;margin-top:.15em;font-family:var(--fn);font-size:1.02em;font-weight:800;
  letter-spacing:-.03em;color:#0A0F1C;font-variant-numeric:tabular-nums}
.ph-fl{display:flex;gap:.35em;margin-bottom:.5em}
.ph-fl span{font-size:.68em;font-weight:700;color:#8A8F9C;border:1px solid #E4E3DC;border-radius:.4em;
  padding:.2em .55em}
.ph-fl span.on{background:#0A0F22;border-color:#0A0F22;color:#fff}
.ph-o{background:#FFF;border:1px solid #E7E6DF;border-radius:.85em;padding:.7em .8em;
  display:flex;flex-direction:column;gap:.4em}
.ph-oh{display:flex;align-items:center;gap:.5em}
.ph-oi{width:1.7em;height:1.7em;border-radius:.4em;flex:none;
  background:linear-gradient(140deg,#D9E4F5,#AFC4E6)}
/* `display:block`: como spans en línea, nombre y detalle se pisaban */
.ph-oh>span:nth-child(2){min-width:0}
.ph-on{display:block;font-size:.86em;font-weight:800;letter-spacing:-.02em;color:#0A0F1C;line-height:1.2}
.ph-ol{display:block;font-size:.7em;color:#A0A099;line-height:1.3}
.ph-ob{margin-left:auto;font-size:.64em;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  border-radius:.35em;padding:.16em .45em;white-space:nowrap}
.ph-ob.g{background:rgba(47,143,99,.11);color:#25714E}
.ph-ob.a{background:rgba(227,172,85,.16);color:#8A5E14}
.ph-ob.n{background:#EFEEE8;color:#7A8298}
.ph-of{display:flex;align-items:center;gap:.5em;font-size:.7em;color:#7A8298}
.ph-of b{color:#0A0F1C;font-variant-numeric:tabular-nums;margin-left:auto}

.ph-nav{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;justify-content:space-around;padding:.55em .6em .8em;
  border-top:1px solid #EFEEE8;background:#FFF}
.ph-nav a{display:flex;flex-direction:column;align-items:center;gap:.18em;font-size:.56em;
  color:#B0B0A8;font-weight:700}
.ph-nav a.on{color:var(--blue)}
.ph-nav svg{width:1.45em;height:1.45em;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.ph-nav a.on svg{stroke-width:2.1}
.ph-nav span{position:relative}
.ph-nav span u{position:absolute;top:-.1em;right:-.25em;width:.5em;height:.5em;border-radius:50%;
  background:#D9534F;text-decoration:none}

/* ═══ ventana FiscalCore: cascada real ═══ */
.win-fc .side{background:#160F33}
.win-fc .sl.on{background:rgba(180,150,255,.14)}
.win-fc .side-u b{background:linear-gradient(140deg,#A78BFA,#6D28D9)}
.win-fc .main{gap:.9em}
.fcs{display:flex;align-items:flex-end;gap:1.1em;flex-wrap:wrap}
.fcb{display:flex;flex-direction:column}
.fcb-l{font-size:.7em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#A0A099}
.fcb-v{font-family:var(--fn);font-weight:800;font-size:1.86em;letter-spacing:-.035em;color:#0A0F1C;
  line-height:1.05;font-variant-numeric:tabular-nums;white-space:nowrap}
.fcb-v.real{color:var(--violet)}
.fcs-ar{font-size:1.15em;color:#C9C8C0;padding-bottom:.2em}
.fcs-badge{margin-left:auto;align-self:flex-start;font-size:.72em;font-weight:800;line-height:1.4;
  color:#2E1B63;background:rgba(109,40,217,.09);border:1px solid rgba(109,40,217,.22);
  border-radius:.45em;padding:.45em .7em;max-width:14em;text-align:right}

/* la cascada: barras flotantes que descienden de 430.000 a 165.000 */
.wf{background:#FFF;border:1px solid #E7E6DF;border-radius:.55em;padding:1em .95em .8em}
.wf-plot{display:grid;grid-template-columns:repeat(5,1fr);gap:.6em;height:10.4em;align-items:end;
  position:relative}
/* las guías van DETRÁS de las barras, no cruzándolas */
.wf-plot::before,.wf-plot::after{content:"";position:absolute;left:0;right:0;height:1px;
  background:#F0EFE9;z-index:0}
.wf-plot::before{top:0}
.wf-plot::after{top:50%}
.wf-c{position:relative;height:100%;z-index:1}
.wf-c i{position:absolute;left:0;right:0;border-radius:.22em;display:block;
  transform:scaleY(0);transition:transform .75s var(--e)}
.wf-c.up i{background:linear-gradient(180deg,#4C3A9E,#2A1F63);transform-origin:bottom}
.wf-c.dn i{background:linear-gradient(180deg,#A78BFA,#7C4DEE);transform-origin:top}
.wf-c.fin i{background:linear-gradient(180deg,#F3CE92,var(--gold));transform-origin:bottom}
.in .wf-c i{transform:scaleY(1)}
.in .wf-c:nth-child(2) i{transition-delay:.18s}
.in .wf-c:nth-child(3) i{transition-delay:.34s}
.in .wf-c:nth-child(4) i{transition-delay:.5s}
.in .wf-c:nth-child(5) i{transition-delay:.68s}
/* conector punteado entre el pie de un tramo y la cabeza del siguiente */
.wf-c u{position:absolute;right:-.6em;width:.6em;height:0;border-top:1.4px dashed #A8A6D6;
  text-decoration:none;opacity:0;z-index:2;transition:opacity .4s var(--e)}
.in .wf-c u{opacity:1;transition-delay:.6s}
.wf-x{display:grid;grid-template-columns:repeat(5,1fr);gap:.55em;margin-top:.55em}
.wf-x div{font-size:.68em;color:#7A8298;text-align:center;line-height:1.25}
.wf-x b{display:block;font-size:1.05em;font-weight:700;color:#0A0F1C;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.wf-x span{display:block;margin-top:.1em}

.fc-mod{display:grid;grid-template-columns:repeat(3,1fr);gap:.55em}
.fc-m{background:#FFF;border:1px solid #E7E6DF;border-radius:.5em;padding:.55em .65em;
  display:flex;align-items:center;gap:.5em}
.fc-m b{font-family:var(--fn);font-size:1em;font-weight:800;color:#0A0F1C;letter-spacing:-.02em}
.fc-m span{font-size:.66em;color:#A0A099;line-height:1.25}
.fc-m i{margin-left:auto;width:.5em;height:.5em;border-radius:50%;background:var(--ok);flex:none}

/* ═══ ventana PropertyJourney: cuatro portales, una fuente de verdad ═══ */
/* sin la fila de mercados el contenido ya no llega al minimo heredado y
   quedaban 74 px de banda muerta al pie: esta ventana se ajusta a su alto */
.win-pj .app{min-height:0}
.win-pj .side{background:#180E44}
.win-pj .sl.on{background:rgba(178,149,255,.18)}
.win-pj .side-u b{background:linear-gradient(140deg,#B295FF,#4E31DD)}
.pj-p{display:grid;grid-template-columns:1fr 1fr;gap:.6em}
.pj-pi{background:#FFF;border:1px solid #E7E6DF;border-radius:.55em;padding:.65em .75em}
.pj-pn{font-size:.66em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9A8FC4}
.pj-pt{margin-top:.2em;font-size:.9em;font-weight:800;letter-spacing:-.02em;color:#0A0F1C;line-height:1.2}
.pj-pd{margin-top:.3em;font-size:.72em;color:#7A8298;display:flex;align-items:center;gap:.4em}
.pj-pd s{width:.42em;height:.42em;border-radius:50%;background:var(--ok);flex:none;text-decoration:none}

.pj img{height:32px;width:auto}

/* ═════════ SINERGIA + CAPACIDADES ═════════ */
.syn{background:var(--navy);color:var(--tx-d);position:relative;overflow:hidden}
.syn::before{content:"";position:absolute;inset:0;
  background:radial-gradient(66% 54% at 80% 10%,rgba(62,99,240,.15),transparent 62%),
             radial-gradient(50% 44% at 10% 94%,rgba(227,172,85,.09),transparent 66%)}
.syn-in{position:relative;z-index:1}
.syn-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,72px);align-items:center}
.syn-vis{background:rgba(180,205,255,.04);border:1px solid var(--ln-d);border-radius:14px;
  padding:clamp(22px,2.6vw,32px)}
.syn-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.syn-lbl{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-d3)}
.syn-num{font-family:var(--fn);font-weight:800;font-size:clamp(1.7rem,2.9vw,2.4rem);letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.syn-num.gold{color:var(--gold-2)}
.syn-bar{height:14px;border-radius:7px;overflow:hidden;display:flex;background:rgba(255,255,255,.07);
  margin:20px 0 12px}
.syn-bar i{display:block;height:100%;transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--e)}
.in .syn-bar i{transform:scaleX(1)}
.syn-bar .mine{width:38%;background:linear-gradient(90deg,#F2C87E,var(--gold));transition-delay:.1s}
.syn-bar .rest{width:62%;background:rgba(180,205,255,.16);transition-delay:.24s}
.syn-key{display:flex;flex-wrap:wrap;gap:18px;font-size:.8rem;color:var(--tx-d2)}
.syn-key span{display:flex;align-items:center;gap:7px}
.syn-key i{width:9px;height:9px;border-radius:2px;flex:none}
.syn-key .k1{background:var(--gold)}
.syn-key .k2{background:rgba(180,205,255,.3)}
.syn-apps{margin-top:22px;padding-top:18px;border-top:1px solid var(--ln-d);
  font-size:.85rem;font-weight:700;color:var(--tx-d)}
.syn-cap{margin-top:9px;font-size:.72rem;color:var(--tx-d3)}

.figs{background:var(--navy);color:var(--tx-d);border-top:1px solid var(--ln-d)}
.figs-g{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ln-d2)}
.fig{background:var(--navy);padding:clamp(28px,3.4vw,44px) clamp(18px,2vw,28px)}
.fig-n{font-family:var(--fn);font-weight:800;font-size:clamp(1.5rem,2.3vw,1.98rem);letter-spacing:-.035em;
  line-height:1;color:var(--gold-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.fig-d{margin-top:14px;font-size:.875rem;line-height:1.5;color:var(--tx-d2)}

/* ═════════ ROLES ═════════ */
.rol-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,4.5vw,70px);align-items:start}
.rol-h{position:sticky;top:calc(var(--nav-h) + 34px)}
.rol-list{border-top:1px solid var(--ln-l)}
.rol{display:grid;grid-template-columns:34px 1fr;gap:18px;padding:24px 0;border-bottom:1px solid var(--ln-l)}
.rol-i{font-family:var(--fn);font-size:.85rem;font-weight:800;color:var(--tx-3);padding-top:3px;
  font-variant-numeric:tabular-nums;transition:color .25s var(--e)}
.rol-n{font-size:1.05rem;font-weight:800;letter-spacing:-.025em;margin-bottom:5px}
.rol-m{font-size:.95rem;color:var(--tx-2);max-width:52ch}
@media(hover:hover){.rol:hover .rol-i{color:var(--blue)}}

/* ═════════ EXPANSIÓN ═════════ */
.mot-g{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}
.mot{background:var(--paper);border:1px solid var(--ln-l);border-radius:12px;padding:clamp(20px,2.2vw,28px);
  transition:transform 260ms var(--e),box-shadow 260ms var(--e)}
@media(hover:hover){.mot:hover{transform:translateY(-3px);box-shadow:0 18px 34px -22px rgba(10,16,32,.34)}}
.mot-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.mot-n{font-size:1.1rem;font-weight:800;letter-spacing:-.025em}
.st{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700}
.st i{width:6px;height:6px;border-radius:50%;flex:none}
.st.live{color:var(--ok)}.st.live i{background:var(--ok)}
.st.prep{color:var(--tx-3)}.st.prep i{background:#B8B7AE}
.mot-r{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-top:1px solid var(--ln-l2);font-size:.84rem}
.mot-r dt{color:var(--tx-3)}
.mot-r dd{font-weight:700}

/* ═════════ GOBIERNO ═════════ */
.gov-g{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ln-d2);
  border:1px solid var(--ln-d2);border-radius:14px;overflow:hidden;margin-top:clamp(38px,4.4vw,58px)}
.gov{background:var(--navy);padding:clamp(26px,3vw,38px)}
.gov-i{font-family:var(--fn);font-size:.82rem;font-weight:800;color:var(--gold);margin-bottom:16px;display:block}
.gov h3{margin-bottom:12px;font-size:1.1rem}
.gov p{font-size:.91rem;line-height:1.6;color:var(--tx-d2)}
.gov small{display:block;margin-top:12px;font-size:.73rem;color:var(--tx-d3)}

/* ═════════ ORIGEN ═════════ */
.org-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(34px,5vw,74px);align-items:start}
.org p{color:var(--tx-2);margin-bottom:18px;font-size:1.01rem}
/* `.org p` (0,1,1) vencía a `.org-claim` (0,1,0) y le comía el tamaño y el color */
.org p.org-claim{font-size:clamp(1.15rem,1.75vw,1.45rem);font-weight:800;letter-spacing:-.028em;
  line-height:1.3;color:var(--tx);max-width:26ch;margin-top:26px}
.tl{position:relative;padding-left:30px}
.tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--ln-l)}
.tls{position:relative;padding-bottom:26px}
.tls:last-child{padding-bottom:0}
.tls::before{content:"";position:absolute;left:-30px;top:6px;width:11px;height:11px;border-radius:50%;
  background:var(--paper);border:2px solid var(--blue)}
.tls:last-child::before{border-color:var(--gold-d)}
.tls b{display:block;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx-3);margin-bottom:5px}
.tls span{font-size:1rem;font-weight:600;letter-spacing:-.015em}

/* ═════════ CLÍMAX ═════════ */
.clx{position:relative;background:#000;color:var(--tx-d);overflow:hidden;
  padding-block:clamp(86px,10vw,142px)}
.clx-bg{position:absolute;inset:0;background:radial-gradient(112% 86% at 50% 34%,#0A1428 0%,#000 76%)}
/* La escena preside la sección ENTERA y limpia: arco, suelo y sombra, sin nada
   encima. El texto va debajo — así el símbolo nunca queda recortado ni tapado. */
/* render de fondo amplio: el suelo y la sombra quedan lejos del borde del encuadre */
.clx-fig{position:relative;z-index:2;width:min(1120px,96vw);
  margin:0 auto clamp(10px,1.4vw,20px);mix-blend-mode:screen}
.clx-fig img{width:100%;height:auto}
.clx-in{position:relative;z-index:2;text-align:center;max-width:min(720px,86vw);margin-inline:auto}
.defn{display:inline-flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:30px;
  padding:16px 26px;border:1px solid var(--ln-d);border-radius:10px;background:rgba(6,10,22,.6);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.defn b{font-size:1.26rem;font-weight:800;letter-spacing:-.03em}
.defn b i{font-style:italic;font-weight:400;font-size:.7rem;color:var(--tx-d3);margin-left:8px;letter-spacing:0}
.defn span{font-size:.85rem;color:var(--tx-d2);max-width:46ch;line-height:1.5}
.clx h2{margin-bottom:20px}
.clx p{color:var(--tx-d2);font-size:1.04rem;max-width:56ch;margin-inline:auto}

/* ═════════ INVERSORES ═════════ */
.inv{background:var(--ink);color:var(--tx-d)}
.inv-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.5vw,68px);align-items:center}
.inv-cf{margin-top:20px;font-size:.78rem;color:var(--tx-d3);display:flex;align-items:center;gap:8px}
.inv-cf svg{width:13px;height:13px;stroke:var(--tx-d3);fill:none;stroke-width:1.7;flex:none}

/* ═════════ FOOTER ═════════ */
.ft{background:#02040A;color:var(--tx-d);padding-block:clamp(54px,6vw,78px) 30px;
  border-top:1px solid var(--ln-d2)}
.ft-top{display:grid;grid-template-columns:1.15fr 1fr 1fr 1.1fr;gap:clamp(30px,4vw,58px);
  padding-bottom:clamp(34px,4vw,50px);border-bottom:1px solid var(--ln-d2)}
.ft-tag{margin-top:18px;font-size:1.02rem;font-weight:700;letter-spacing:-.025em;max-width:26ch}
.ft-sub{margin-top:9px;font-size:.85rem;color:var(--tx-d3);max-width:34ch}
.ft-h{font-size:.71rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--tx-d3);
  margin-bottom:16px}
.ft-col a{display:block;font-size:.9rem;color:var(--tx-d2);padding:5px 0;transition:color .2s var(--e)}
@media(hover:hover){.ft-col a:hover{color:var(--tx-d)}}
.ft-col a em{font-style:normal;font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);margin-left:7px}
.ft-legal{margin-top:26px;font-size:.73rem;line-height:1.65;color:var(--tx-d3);max-width:96ch}

/* ═════════ RESPONSIVE ═════════ */
@media(max-width:1080px){
  .plinth-g{grid-template-columns:1fr 1fr}
  .cyc-steps{grid-template-columns:repeat(4,1fr);row-gap:34px}
  .cyc-line{display:none}
  .figs-g{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .nav-l{display:none}
  .nav .btn{display:none}
  /* en columna: primero el mensaje, después la consola */
  .hero-in{grid-template-columns:1fr;gap:clamp(30px,5vw,44px)}
  .hero-col{max-width:none}
  .hero-fade{display:none}
  .cx-grid,.syn-grid,.rol-grid,.org-grid,.inv-grid,.vit-in{grid-template-columns:1fr}
  .vit.rev .vit-in{direction:ltr}
  .rol-h{position:static}
  .mot-g,.gov-g{grid-template-columns:1fr}
  .ft-top{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  body{font-size:16px}
  /* la consola en 2×2: en 4 columnas los rótulos caían a 7 px */
  .hv{font-size:11.5px;padding:1.35em 1.25em 1.25em}
  .hv-nodes{grid-template-columns:1fr 1fr;gap:1.15em .9em}
  .hv-rail{display:none}
  .hv-n b{font-size:.95em}
  .hv-n span{font-size:.82em}
  .hv-steps{gap:.5em}
  .hv-steps::before{left:18%;right:18%}
  .hv-s b{font-size:.92em}
  .hv-s span:last-child{font-size:.8em}
  .plinth-g{grid-template-columns:1fr}
  .cyc-steps{grid-template-columns:1fr 1fr}
  .figs-g{grid-template-columns:1fr}
  .app{grid-template-columns:1fr}
  .side{display:none}
  .kpis{grid-template-columns:1fr 1fr}
  /* la tabla pasa de 5 a 3 columnas: obra · PEM · avance */
  .tr{grid-template-columns:1.5fr .85fr 1fr}
  .tr>:nth-child(3),.tr>:nth-child(4){display:none}
  .ft-top{grid-template-columns:1fr}
  .h-cta .btn{width:100%}
  .fall-h{flex-direction:column}
  .fall-badge{text-align:left;max-width:none}
}
/* ═════════ PÁGINAS DE ARTÍCULO (aterrizaje y comparativas) ═════════ */
.art{padding-top:calc(var(--nav-h) + clamp(46px,6vw,84px))}
.art-in{max-width:768px}
.art h1{font-size:clamp(2.1rem,3.8vw,3.1rem);margin:14px 0 22px}
.art-lead{font-size:clamp(1.08rem,1.45vw,1.3rem);color:var(--tx-2);margin-bottom:clamp(34px,4vw,52px);
  padding-bottom:clamp(30px,3.4vw,44px);border-bottom:1px solid var(--ln-l);max-width:none}
.art h2{font-size:clamp(1.4rem,2.1vw,1.85rem);margin:clamp(38px,4vw,54px) 0 14px}
.art h3{font-size:1.06rem;margin-bottom:6px}
.art p{color:var(--tx-2);margin-bottom:14px}
.art strong{color:var(--tx)}
.art em{font-style:italic}
.art-src{font-size:.78rem;color:var(--tx-3);margin-top:-4px}
.art-steps,.art-list{margin:8px 0 14px;padding-left:1.15em;color:var(--tx-2)}
.art-steps li,.art-list li{margin-bottom:9px;padding-left:.2em}
.art-steps li::marker{font-family:var(--fn);font-weight:800;color:var(--gold-d)}
.art-tab{width:100%;border-collapse:collapse;margin:16px 0 10px;font-size:.94rem}
.art-tab th,.art-tab td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--ln-l);vertical-align:top}
.art-tab thead th{font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tx-3);border-bottom:1px solid var(--ln-l)}
.art-tab tbody td:first-child{color:var(--tx);font-weight:600}
.art-tab td{color:var(--tx-2)}
.art-tab .nb{display:block;font-size:.8em;color:var(--tx-3)}
.art-faq{margin-top:clamp(44px,5vw,68px);padding-top:clamp(30px,3.4vw,44px);border-top:1px solid var(--ln-l)}
.art-faq h2{margin-top:0}
.qa{padding:16px 0;border-bottom:1px solid var(--ln-l2)}
.qa:last-child{border-bottom:0}
.qa p{margin-bottom:0}
.art-cta{margin-top:clamp(40px,4.6vw,60px);padding:clamp(24px,3vw,36px);border-radius:14px;
  background:var(--paper-2);display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.art-cta p{flex:1 1 260px;margin:0;font-weight:700;color:var(--tx);letter-spacing:-.02em}
.art-back{margin-top:26px;font-size:.9rem}
.art-back a{color:var(--blue);font-weight:600}
/* En tablet la medida se iba a 79-82 caracteres por linea (comodo: 65-75).
   Solo se ensancha el margen en esa franja; movil y escritorio no cambian. */
@media(min-width:621px) and (max-width:1120px){
  .art .art-in{padding-inline:max(34px,7vw)}
}
@media(max-width:620px){
  .art-tab{font-size:.86rem}
  .art-tab th,.art-tab td{padding:9px 8px}
}

/* el pie portugues no lleva la columna de guias: 3 columnas, sin hueco */
/* Solo en escritorio: `.ft-top.ft-3` (0,2,0) vence a `.ft-top` (0,1,0) de las
   media queries, y en movil mantenia 3 columnas -> 28 px de desborde en /pt/. */
@media(min-width:901px){.ft-top.ft-3{grid-template-columns:1.25fr 1fr 1fr}}

/* Rutas de cliente bajo la cabecera de divisiones (Fase 0, 15-ago) */
.dv-routes{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.dv-routes a{display:inline-flex;align-items:baseline;gap:8px;padding:11px 16px;
  border:1px solid var(--ln-l);border-radius:10px;text-decoration:none;
  font-size:.92rem;transition:border-color .18s ease}
.dv-routes a span[data-i18n]{color:var(--tx-2)}
.dv-routes a b{color:var(--tx);font-weight:700}
.dv-routes a .arw{color:var(--gold-d);font-weight:700}
.dv-routes a:hover{border-color:var(--gold)}