/* DigitalFintech — landing (estilo enterprise inspirado en nCino). Borrador para iterar. */
:root{
  --navy:#081a3a; --navy-2:#0d2a5e; --blue:#1e40af; --blue-2:#2563eb;
  --accent:#19c6c1; --accent-2:#22d3ee;
  --ink:#0d1b2a; --muted:#5b6b82; --line:#e7ecf3;
  --bg:#ffffff; --soft:#f4f8fd; --soft-2:#eef4fb;
  --radius:16px; --shadow:0 24px 60px -28px rgba(8,26,58,.35); --shadow-sm:0 8px 24px -12px rgba(8,26,58,.25);
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.eyebrow{display:inline-block; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-2)}
h1,h2,h3{margin:0; color:var(--navy); font-weight:800; line-height:1.1; letter-spacing:-.02em}
h2{font-size:clamp(28px,4vw,42px)}
h3{font-size:20px; letter-spacing:-.01em}
p{margin:0}
.lead{font-size:18px; color:var(--muted)}
.section{padding:96px 0}
.center{text-align:center}
.section-head{max-width:720px; margin:0 auto 56px}
.section-head h2{margin:14px 0 16px}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px; padding:13px 22px;
  border-radius:999px; border:1px solid transparent; cursor:pointer; transition:.18s ease; white-space:nowrap}
.btn-primary{background:var(--blue); color:#fff}
.btn-primary:hover{background:var(--blue-2); transform:translateY(-1px); box-shadow:var(--shadow-sm)}
.btn-accent{background:var(--accent); color:#04302e}
.btn-accent:hover{filter:brightness(1.05); transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--navy); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--blue); color:var(--blue)}

/* Nav */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82); backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--line)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:72px}
.nav .brand{display:flex; align-items:center; gap:11px}
/* Antes esto metía el logotipo COMPLETO (esfera + «DIGITAL FINTECH» + bajada) en una caja de
   52×40 con overflow:hidden, así que lo que se veía era la esfera y, debajo, un borrón negro
   ilegible de lo que debía ser la marca. Ahora usa `logo-mark.png`, que es solo la esfera. */
.brand-mark{width:40px; height:40px; flex:0 0 auto}
.brand-mark img{width:40px; height:40px; display:block}
.brand-word{font-weight:800; font-size:22px; letter-spacing:-.02em; color:var(--navy); line-height:1}
.brand-word b{color:var(--blue); font-weight:800}
.nav-links{display:flex; align-items:center; gap:24px}
/* nowrap: sin esto, cuando la barra va justa el navegador parte los enlaces de dos palabras
   («Dónde operamos», «Cómo funciona») en dos líneas y se montan sobre la marca. */
.nav-links a{font-size:14.5px; font-weight:600; color:#314056; white-space:nowrap}
.nav-links a:hover{color:var(--blue)}
.nav-cta{display:flex; align-items:center; gap:14px}
.burger{display:none; background:none; border:0; cursor:pointer}

/* Hero */
.hero{position:relative; overflow:hidden; background:
  radial-gradient(1100px 500px at 80% -10%, rgba(34,211,238,.12), transparent 60%),
  radial-gradient(900px 500px at 0% 0%, rgba(30,64,175,.10), transparent 55%), #fff}
/* El `padding:84px 0 72px` de aquí PISABA el `padding:0 24px` de .wrap (misma propiedad, regla más
   específica), así que en cualquier ancho ≤1180 px el h1, el lead y los botones arrancaban pegados
   al canto izquierdo de la pantalla. Se escribe el lateral explícitamente. */
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; padding:84px 24px 72px}
.hero h1{font-size:clamp(36px,5.4vw,58px)}
.hero .lead{margin:22px 0 30px; font-size:20px; max-width:560px}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap}
.hero-trust{display:flex; align-items:center; gap:18px; margin-top:30px; color:var(--muted); font-size:14px}
.hero-trust .dot{width:6px; height:6px; border-radius:50%; background:var(--accent)}
.hero-visual{position:relative}
.hero-visual .frame{background:linear-gradient(180deg,#fff,#f3f8ff); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); padding:14px}
.hero-visual .frame img{border-radius:12px}
.hero-badge{position:absolute; left:-18px; bottom:26px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-sm); padding:14px 16px; display:flex; gap:12px; align-items:center}
.hero-badge .ic{width:38px;height:38px;border-radius:10px;background:rgba(25,198,193,.15); color:#0a8f8a; display:grid; place-items:center}
.hero-badge b{display:block; font-size:15px; color:var(--navy)}
.hero-badge span{font-size:13px; color:var(--muted)}

/* Stats band */
.stats{background:var(--navy); color:#fff}
.stats .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:46px 24px}
.stat b{display:block; font-size:34px; font-weight:800; letter-spacing:-.02em}
.stat span{color:#9fb3d1; font-size:14px}
.stat .accent{color:var(--accent-2)}

/* Features (fondo soft con retícula de puntos visible) */
.features{
  background:
    radial-gradient(rgba(30,64,175,.12) 1.6px, transparent 1.8px) 0 0 / 22px 22px,
    var(--soft);
}
/* Textura para secciones de fondo blanco: glows de color en esquinas + retícula tenue */
.tex{
  position:relative;
  background:
    radial-gradient(circle at 95% -8%, rgba(34,211,238,.18), transparent 42%),
    radial-gradient(circle at -6% 108%, rgba(30,64,175,.15), transparent 42%),
    radial-gradient(rgba(13,42,94,.06) 1.4px, transparent 1.7px) 0 0 / 26px 26px,
    #fff;
}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; transition:.2s ease}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:#dbe6f5}
.card .ic{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; margin-bottom:16px;
  background:linear-gradient(135deg, rgba(30,64,175,.12), rgba(34,211,238,.12)); color:var(--blue)}
.card h3{margin-bottom:8px}
.card p{color:var(--muted); font-size:15px}
/* Los iconos de «El problema» van en tono cálido: separan de un vistazo lo que DUELE de lo que
   RESUELVE, sin que haga falta leer el titular de la sección. */
.card .ic--warn{background:linear-gradient(135deg, rgba(234,88,12,.13), rgba(245,158,11,.15)); color:#c2410c}

/* Split (alternating) */
.split{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center}
.split + .split{margin-top:90px}
.split.rev .copy{order:2}
.split .copy h2{margin:14px 0 16px}
.split .copy p{color:var(--muted); font-size:17px}
.checklist{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px}
.checklist li{display:flex; gap:12px; align-items:flex-start; font-weight:600; color:#243049}
.checklist .chk{flex:0 0 22px; width:22px; height:22px; border-radius:50%; background:rgba(25,198,193,.16); color:#0a8f8a; display:grid; place-items:center; margin-top:2px}
.shot{border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); background:linear-gradient(180deg,#fff,#eef4fb); padding:14px}
.shot img{border-radius:10px}

/* Steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.step{position:relative; padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:#fff}
.step .n{width:40px;height:40px;border-radius:12px;background:var(--navy); color:#fff; font-weight:800; display:grid; place-items:center; margin-bottom:16px}

/* CTA band */
.cta-band{background:linear-gradient(120deg,var(--navy),var(--navy-2)); color:#fff; border-radius:28px; padding:56px; text-align:center; position:relative; overflow:hidden}
.cta-band:before{content:""; position:absolute; inset:0; background:radial-gradient(600px 240px at 85% -20%, rgba(34,211,238,.22), transparent 60%)}
.cta-band h2{color:#fff; position:relative}
.cta-band p{color:#bcd0ee; margin:14px auto 26px; max-width:560px; position:relative}
.cta-band .hero-actions{justify-content:center; position:relative}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.contact-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow-sm)}
.field{margin-bottom:16px}
.field label{display:block; font-size:13px; font-weight:700; color:#33425b; margin-bottom:6px}
.field input,.field textarea{width:100%; border:1px solid var(--line); border-radius:12px; padding:12px 14px; font:inherit; color:var(--ink)}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(30,64,175,.12)}
.contact-info .row{display:flex; gap:14px; align-items:flex-start; margin-bottom:22px}
.contact-info .ic{width:44px;height:44px;border-radius:12px;background:var(--soft-2); color:var(--blue); display:grid; place-items:center}
.contact-info b{display:block; color:var(--navy)}
.contact-info a,.contact-info span{color:var(--muted)}

/* Footer */
.footer{background:var(--navy); color:#aebfd8; padding:64px 0 26px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.08)}
.footer-brand{display:flex; align-items:center; gap:11px; margin-bottom:18px}
.footer-brand img{width:44px; height:44px; display:block}
.footer-brand .brand-word{color:#fff; font-size:21px}
.footer-brand .brand-word b{color:#5b9bff}
.footer h4{color:#fff; font-size:14px; letter-spacing:.06em; text-transform:uppercase; margin:0 0 16px}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.footer a:hover{color:#fff}
.footer .small{font-size:14px; max-width:300px}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:22px; font-size:13px; color:#8aa0c2; gap:16px; flex-wrap:wrap}

/* Language switcher */
.lang-switch{display:inline-flex; align-items:center; gap:2px; background:#eef2f8; border:1px solid var(--line); border-radius:999px; padding:3px}
.lang-opt{border:0; background:transparent; color:var(--muted); font-weight:700; font-size:12px; letter-spacing:.02em; padding:5px 9px; border-radius:999px; cursor:pointer; line-height:1; font-family:inherit; transition:.15s ease}
.lang-opt:hover{color:var(--ink)}
.lang-opt.active{background:#fff; color:var(--blue); box-shadow:0 1px 3px rgba(13,42,94,.14)}

/* AI band */
.ai{background:linear-gradient(180deg,#fff, var(--soft))}
.ai-pill{display:inline-flex; align-items:center; gap:8px; background:rgba(25,198,193,.14); color:#0a8f8a; font-weight:700; font-size:13px; padding:6px 14px; border-radius:999px}
.ai .shot{background:linear-gradient(135deg, rgba(30,64,175,.10), rgba(34,211,238,.12))}

/* Video */
.video-head{max-width:720px; margin:0 auto 40px}
.video-frame{position:relative; border-radius:22px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); background:#04102a; aspect-ratio:16/9; max-width:1000px; margin:0 auto}
.video-frame video{width:100%; height:100%; object-fit:cover; display:block}
/* Marcador mientras no hay vídeo (retirado el 2026-08-11, ver index.html). Ocupa el marco entero, así
   que el hueco 16/9 se conserva igual que con el <video> y reponerlo no obliga a tocar el maquetado. */
.video-placeholder{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:rgba(255,255,255,.6); font-weight:600; letter-spacing:.02em}
.video-placeholder-ic{opacity:.45; line-height:0}

/* Gallery. La sección que la usaba se retiró (eran capturas de una plantilla ajena); las reglas se
   quedan para cuando existan capturas reales del producto. */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.gallery .shot{padding:10px}
.gallery .shot img{border-radius:10px}

/* ============================================================================================
   EL ÁRBOL DE DECISIÓN DEL HERO
   --------------------------------------------------------------------------------------------
   Se construye UNA VEZ, al entrar en pantalla, y se queda. No es un bucle: un diagrama repitiéndose
   sin parar detrás de un titular distrae de leerlo, que es justo lo contrario de lo que hace falta.
   Lo único que sigue vivo después es el punto que recorre el cable, y va lento y a intervalos para
   que se lea como «siguen entrando solicitudes» y no como un GIF.

   El disparo cuelga de `.hero-visual.in`, la misma clase que ya pone el IntersectionObserver para
   las apariciones. Sin JS no hay `.in` — y entonces el estado por defecto de todo esto es el FINAL,
   con el árbol entero pintado. Igual que el resto de la página: sin JS se ve, sin moverse.
   ============================================================================================ */
.flow{position:relative}
.flow svg{width:100%; height:auto; display:block; overflow:visible}
.flow-t{font:700 14px 'Inter',system-ui,sans-serif; fill:#081a3a}
.flow-s{font:600 11.5px 'Inter',system-ui,sans-serif; fill:#5b6b82}
.flow-ok{font:700 13px 'Inter',system-ui,sans-serif; fill:#04302e; text-anchor:middle}
.flow-score{font:700 13px 'Inter',system-ui,sans-serif; fill:#1e40af}
.flow-caption{display:block; margin-top:18px; text-align:center; color:var(--muted); font-size:13.5px}
.flow .n4{opacity:.55}          /* la rama que NO se tomó, apagada */
.flow-dot{opacity:0}

/* Estado FINAL por defecto: sin JS, o si algo falla, el árbol se ve entero y quieto. */
html.js .hero-visual .flow-node{opacity:0; transform-box:fill-box; transform-origin:center; transform:translateY(9px) scale(.95)}
html.js .hero-visual .flow-wire{stroke-dasharray:1; stroke-dashoffset:1}

@keyframes flowIn{to{opacity:1; transform:none}}
@keyframes flowInDim{to{opacity:.55; transform:none}}
@keyframes flowDraw{to{stroke-dashoffset:0}}
@keyframes flowPing{0%,100%{opacity:1; r:13} 50%{opacity:.35; r:16}}
@keyframes flowCore{0%,100%{r:4.5} 50%{r:7}}
@keyframes dotRun{
  0%  {offset-distance:0%;   opacity:0}
  10% {opacity:1}
  62% {offset-distance:100%; opacity:1}
  74%,100%{offset-distance:100%; opacity:0}
}

html.js .hero-visual.in .flow-node{animation:flowIn .55s cubic-bezier(.2,.7,.25,1) both}
html.js .hero-visual.in .flow-wire{animation:flowDraw .5s ease-in-out both}
html.js .hero-visual.in .n1{animation-delay:.15s}
html.js .hero-visual.in .w1{animation-delay:.45s}
html.js .hero-visual.in .n2{animation-delay:.90s}
html.js .hero-visual.in .w2{animation-delay:1.85s}
html.js .hero-visual.in .n3{animation-delay:1.95s}
html.js .hero-visual.in .w3{animation-delay:2.20s}
html.js .hero-visual.in .w4{animation-delay:2.20s}
html.js .hero-visual.in .n4{animation-name:flowInDim; animation-delay:2.70s}
html.js .hero-visual.in .n5{animation-delay:2.60s}
html.js .hero-visual.in .n6{animation-delay:2.90s}
/* La consulta al buró «latiendo» mientras se espera al proveedor, y el nodo de decisión resolviendo. */
html.js .hero-visual.in .flow-ping{animation:flowPing .9s ease-in-out 1.15s 2 both}
html.js .hero-visual.in .flow-core{animation:flowCore .5s ease-in-out 2.05s 2 both}
/* El recorrido completo del dato, en bucle lento y solo DESPUÉS de que el árbol esté montado. */
.flow-dot{offset-path:path("M150,190 H372 C392,190 396,112 416,112"); offset-rotate:0deg}
html.js .hero-visual.in .flow-dot{animation:dotRun 3.2s cubic-bezier(.5,.05,.4,1) 4s infinite}

/* Las tarjetas entran escalonadas en vez de todas de golpe: da sensación de ritmo sin ruido. */
html.js .grid-3 .reveal:nth-child(2),
html.js .countries .reveal:nth-child(2),
html.js .steps .reveal:nth-child(2){transition-delay:.08s}
html.js .grid-3 .reveal:nth-child(3),
html.js .countries .reveal:nth-child(3),
html.js .steps .reveal:nth-child(3){transition-delay:.16s}
html.js .grid-3 .reveal:nth-child(4),
html.js .countries .reveal:nth-child(4),
html.js .steps .reveal:nth-child(4){transition-delay:.24s}
html.js .grid-3 .reveal:nth-child(5),
html.js .steps .reveal:nth-child(5){transition-delay:.32s}
html.js .grid-3 .reveal:nth-child(6){transition-delay:.40s}

/* ---- Añadidos del rediseño de contenido ----------------------------------------------------- */

/* Hero y splits a UNA columna. Mientras no haya capturas reales del producto, la columna de la
   imagen no existe: sin esto quedaría un hueco vacío a la derecha en pantallas anchas. */
.hero-grid--solo{grid-template-columns:1fr; max-width:900px; margin-inline:auto; text-align:center}
.hero-grid--solo .lead{margin-inline:auto}
.hero-grid--solo .hero-actions,
.hero-grid--solo .hero-trust{justify-content:center}
.split--solo{grid-template-columns:1fr; max-width:820px; margin-inline:auto}

/* Tarjetas sin icono (segmentos, problemas, quiénes somos): el margen del icono lo daba .card .ic,
   así que sin él el título se pegaba al borde de arriba. */
.card > h3:first-child{margin-top:2px}

/* Dónde operamos */
.countries{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.country{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; transition:.2s ease}
.country:hover{transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:#dbe6f5}
.country-code{display:inline-grid; place-items:center; width:46px; height:46px; border-radius:12px;
  background:linear-gradient(180deg,#eef4ff,#e3edff); color:var(--blue); font-weight:800; font-size:15px; letter-spacing:.04em; margin-bottom:16px}
.country h3{margin-bottom:6px}
.country-bureaus{color:var(--muted); font-size:15px}
.where-note{max-width:720px; margin:36px auto 0; text-align:center; color:var(--muted); font-size:15px}

/* Cómo funciona, con cinco pasos en vez de tres */
.steps-5{grid-template-columns:repeat(5,1fr); gap:18px}
.steps-5 .step{padding:24px}

/* Bloque de código del apartado de integración.
   OJO al min-width:0 de .copy — sin él, el `overflow-x:auto` de aquí abajo NO SIRVE DE NADA. Un
   elemento de rejilla trae `min-width:auto`, o sea que se niega a encoger por debajo de su
   contenido: el <pre> empujaba a su columna hasta 414 px y, medido a 390, el documento entero
   se desbordaba 48 px. Con min-width:0 la columna sí encoge y el desplazamiento se queda DENTRO
   del bloque de código, que es donde tiene que estar. */
.split .copy{min-width:0}
.code{margin-top:22px; background:var(--navy); color:#dbe7ff; border-radius:16px; padding:22px 24px;
  overflow-x:auto; font-size:13.5px; line-height:1.65; box-shadow:var(--shadow-sm)}
.code code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre}

/* Formulario: nota fija y aviso tras enviar */
.form-note{margin-top:14px; color:var(--muted); font-size:13px; line-height:1.5}
.form-status{margin-top:12px; font-size:14px; font-weight:600}
.form-status:empty{margin:0}
.form-status.ok{color:#0f7b4f}
.form-status.err{color:#b42318}

/* Identidad legal en el pie */
.footer-legal{border-top:1px solid rgba(255,255,255,.10); margin-top:36px; padding-top:22px; color:#9fb3d4; font-size:14px}

/* El nav es sticky y mide 72 px: sin esto, al pulsar un enlace del menú el título del destino queda
   tapado por la propia barra. */
html{scroll-padding-top:88px}

/* Aparición al hacer scroll.
   OJO AL ORDEN, PORQUE ESTABA AL REVÉS Y ERA GRAVE: por defecto TODO ESTÁ VISIBLE, y solo se esconde
   para animarlo cuando el <html> lleva la clase `js`, que pone un script en línea del <head>.
   Antes era `.reveal{opacity:0}` a secas y solo el IntersectionObserver lo encendía, así que con el
   JS bloqueado, caído o sin soporte la página perdía el 100 % del contenido: los 25 `.reveal` cubren
   el hero, las seis tarjetas, los dos splits, el vídeo, los tres pasos, la banda CTA y el formulario.
   Comprobado quitando los <script>: solo sobrevivían el nav, la banda de stats y el pie. */
.reveal{opacity:1; transform:none}
html.js .reveal{opacity:0; transform:translateY(18px); transition:.7s cubic-bezier(.2,.7,.2,1)}
html.js .reveal.in{opacity:1; transform:none}

/* Quien pide menos movimiento no lo tiene: ni apariciones, ni scroll suave, ni los translateY de
   botones y tarjetas. No había ni una regla de esto en toda la hoja. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1; transform:none; transition:none}
  /* El árbol del hero NO desaparece: se congela en su estado final, con todo pintado y el veredicto
     puesto. Se apaga solo el punto que viaja, que es lo único puramente decorativo. */
  html.js .hero-visual .flow-node{opacity:1; transform:none}
  html.js .hero-visual .n4{opacity:.55}
  html.js .hero-visual .flow-wire{stroke-dashoffset:0}
  .flow-dot{display:none}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}

/* Responsive */
/* El menú pasa a hamburguesa a 1060 px, no a 920: entre esos dos anchos los cinco enlaces ya no
   caben junto a la marca, el idioma y el botón, y la barra se rompía antes de llegar al móvil. */
@media (max-width:1060px){
  .nav-links{display:none}
  .burger{display:block}
  .nav-links.open{display:flex; position:absolute; top:72px; left:0; right:0; flex-direction:column;
    background:#fff; border-bottom:1px solid var(--line); padding:18px 24px; gap:16px}
}
@media (max-width:920px){
  .hero-grid,.split,.contact-grid{grid-template-columns:1fr; gap:36px}
  .split.rev .copy{order:0}
  .grid-3,.steps,.gallery,.countries{grid-template-columns:1fr 1fr}
  .steps-5{grid-template-columns:1fr 1fr}
  .stats .wrap{grid-template-columns:1fr 1fr; gap:30px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .burger{display:block}
  .nav-links.open{display:flex; position:absolute; top:72px; left:0; right:0; flex-direction:column; background:#fff; border-bottom:1px solid var(--line); padding:18px 24px; gap:16px}
}
/* EL DESBORDAMIENTO HORIZONTAL EN MÓVIL, que rompía la página entera.
   Medido: la barra medía 577 px INTRÍNSECOS (24 de padding + .brand 209 + .nav-cta 344, todo con
   white-space:nowrap) contra un viewport de 390. Como el nav es el elemento más ancho del documento,
   arrastraba a todos los demás: el h1 salía cortado y TODAS las secciones quedaban recortadas por la
   derecha. No se arregla con overflow-x:hidden —eso rompería el `position:sticky` del propio nav—,
   se arregla quitando de la barra lo que sobra en pantalla pequeña. */
@media (max-width:720px){
  /* «Solicitar demo» ya está en el hero, en la banda CTA y en el pie: en el móvil sobra en la barra. */
  .nav-cta .btn{display:none}
  .brand-word{font-size:19px}
  .nav-inner{gap:12px}
}
@media (max-width:560px){
  .grid-3,.steps,.steps-5,.stats .wrap,.footer-grid,.gallery,.countries{grid-template-columns:1fr}
  .section{padding:64px 0}
  .cta-band{padding:40px 24px}
  .brand-mark,.brand-mark img{width:44px}
  .lang-switch{gap:2px}
}