/* ============================================================
   IT CAPITAL® — DESIGN TOKENS (Manual de Identidad 2022)
   ============================================================ */
:root{
  /* --- Marca (Manual de Identidad 2021) — medidos del archivo oficial --- */
  --blue:#04537F;        /* Azul Corporativo — soporte y solvencia */
  --green:#5E9F2A;       /* Verde LATAM — innovación y cercanía regional */
  --yellow:#FBD601;      /* Amarillo Capital — energía */
  --gray:#908A83;        /* Gris Neutro — estructura institucional */
  --purple:#9F5499;      /* Púrpura Accent — fintech y digital */
  --navy:#413D61;        /* Navy de marca (Pantone 265C) */
  --teal:#58C1B4;        /* Turquesa de marca (Pantone 7456C) — sexto color de producto */        /* Navy de marca (Pantone 265C) — capas intermedias */

  /* --- Neón: SOLO trazos, bordes, glow y datos. Nunca superficies grandes. --- */
  --neon-teal:#4FE3D0;
  --neon-green:#8FE64A;
  --neon-yellow:#FFE14D;

  /* --- Fondo: azul marino casi negro --- */
  --bg:#050B14;
  --bg-2:#0A1120;
  --panel:#0E1626;

  --ink:#ffffff;
  --ink-dim:#c3ccd8;
  --ink-mute:#8590a3;
  --line:rgba(255,255,255,.10);

  --font-title:'Archivo','Inter',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-body:'Open Sans',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:auto;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  overflow-x:hidden;
  line-height:1.5;
}
img{max-width:100%;display:block;}
a{color:inherit;}
/* width:100% is required here: .section is a column flexbox used only to
   vertically-center content, and a flex item with auto margins on the cross
   axis does not stretch by default — without an explicit width the grids
   inside (.product-grid, .channels, etc.) would shrink-to-fit instead of
   spanning the intended max-width, silently collapsing to 1-2 columns. */
.container{width:100%;max-width:1240px;margin:0 auto;padding:0 6vw;}
section{position:relative;z-index:2;}
::selection{background:var(--neon-yellow);color:#050B14;}

/* ---------- Ambient canvas (hero "sol barroco") ---------- */
#ambient-canvas{
  position:fixed;inset:0;width:100%;height:100vh;z-index:0;pointer-events:none;
}

/* ---------- Header ---------- */
/* Petición de dirección: "QUITAR EL BLACK DETRÁS DEL HEADER PARA PODER VER
   LOS PUNTOS ANIMADOS EN EL BACK".
   El header ya no es una barra negra: es cristal. La legibilidad del menú
   NO la da un fondo opaco sino (a) el desenfoque, (b) una caída de sombra
   muy corta bajo la barra y (c) el text-shadow que ya llevan los enlaces.
   Así las chispas cruzan por detrás y se ven. */
header.site-header{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  padding:18px 6vw;
  display:flex;align-items:center;justify-content:space-between;
  backdrop-filter:blur(10px) saturate(115%);
  -webkit-backdrop-filter:blur(10px) saturate(115%);
  background:linear-gradient(180deg, rgba(5,11,20,0.34) 0%, rgba(5,11,20,0.06) 100%);
  border-bottom:1px solid rgba(255,255,255,0.06);
  transition:background .35s ease, padding .35s ease, backdrop-filter .35s ease;
}
/* Al hacer scroll se apoya un poco más — pero sigue siendo translúcido:
   0.88 tapaba por completo el campo de partículas. */
header.site-header.solid{
  background:linear-gradient(180deg, rgba(5,11,20,0.55) 0%, rgba(5,11,20,0.24) 100%);
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  padding:12px 6vw;
}
.brand-logo{display:flex;align-items:center;gap:12px;text-decoration:none;cursor:pointer;}
.brand-logo img{height:34px;width:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.5));}
nav.main-nav{display:flex;align-items:center;gap:26px;}
nav.main-nav a.nav-link{
  color:#fff;text-decoration:none;font-size:.88rem;font-weight:600;letter-spacing:.2px;
  text-shadow:0 1px 12px rgba(0,0,0,.5);transition:color .25s;cursor:pointer;
}
nav.main-nav a.nav-link:hover{color:var(--yellow);}
.lang-switch{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;
  padding:7px 14px;border-radius:20px;font-size:.78rem;font-weight:700;cursor:pointer;letter-spacing:.5px;
}
.lang-switch:hover{background:var(--blue);}

/* ---------- Minimalist social / newsletter icon buttons ---------- */
.social-icons{display:flex;align-items:center;gap:8px;}
.icon-btn{
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#fff;flex-shrink:0;
  transition:background .25s,border-color .25s,transform .25s;
}
.icon-btn svg{width:16px;height:16px;fill:currentColor;}
.icon-btn:hover{background:var(--yellow);border-color:var(--yellow);color:#04202f;transform:translateY(-2px);}
header .social-icons{margin-left:6px;}
.footer-social{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}
.footer-social .icon-btn{background:rgba(255,255,255,.05);}
.newsletter-block{margin-top:22px;}
.newsletter-block h5{font-family:var(--font-title);font-size:.78rem;letter-spacing:1.4px;text-transform:uppercase;color:var(--gray);margin-bottom:12px;}
.newsletter-form{display:flex;gap:0;max-width:320px;border:1px solid rgba(255,255,255,.2);border-radius:8px;overflow:hidden;}
.newsletter-form input{flex:1;background:transparent;border:none;padding:11px 14px;color:#fff;font-size:.85rem;font-family:var(--font-body);}
.newsletter-form input:focus{outline:none;}
.newsletter-form button{background:var(--yellow);color:#04202f;border:none;padding:0 18px;font-weight:800;font-size:.78rem;letter-spacing:.4px;cursor:pointer;text-transform:uppercase;white-space:nowrap;}
.newsletter-form button:hover{background:#fff;}
@media (max-width:860px){
  header .social-icons{display:none;}
}
.btn-cta{
  background:linear-gradient(135deg,var(--green),var(--yellow));
  color:#04202f;padding:11px 24px;border-radius:30px;font-weight:800;
  text-transform:uppercase;font-size:.78rem;letter-spacing:.6px;text-decoration:none;
  border:none;cursor:pointer;transition:transform .3s,box-shadow .3s;
  display:inline-block;
}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(251,214,1,.4);}
.btn-outline{
  background:transparent;border:1.5px solid rgba(255,255,255,.35);color:#fff;
  padding:10px 22px;border-radius:30px;font-weight:700;font-size:.8rem;letter-spacing:.4px;
  text-decoration:none;display:inline-block;transition:border-color .3s,background .3s;cursor:pointer;
}
.btn-outline:hover{border-color:var(--yellow);background:rgba(251,214,1,.08);}
.mobile-toggle{display:none;background:none;border:none;color:#fff;font-size:1.6rem;cursor:pointer;}

/* ---------- Hero ---------- */
.hero{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:140px 6vw 80px;position:relative;
}
.hero-inner{max-width:820px;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-title);
  font-weight:700;font-size:.78rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--yellow);margin-bottom:22px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--yellow);display:inline-block;}
.hero h1{
  font-family:var(--font-title);font-weight:900;
  font-size:clamp(2.6rem,7vw,5.2rem);line-height:1.02;letter-spacing:-.02em;
  margin-bottom:24px;overflow:hidden;
}
.hero h1 .line{display:block;overflow:hidden;}
.hero h1 .split{display:inline-block;}
.js-anim .hero h1 .split{transform:translateY(120%);}
.hero h1 .grad{
  background:linear-gradient(92deg,#fff 30%,var(--yellow) 90%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero h1 .tm{font-size:.32em;top:-0.55em;font-weight:600;-webkit-text-fill-color:var(--yellow);}
.hero p.lead{
  font-size:clamp(1.05rem,1.6vw,1.28rem);line-height:1.65;color:var(--ink-dim);
  max-width:620px;margin-bottom:36px;font-weight:300;
}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:56px;}
.credibility-strip{display:flex;gap:52px;flex-wrap:wrap;padding-top:30px;border-top:1px solid rgba(255,255,255,.12);}
.cred-item h4{font-family:var(--font-title);font-weight:800;font-size:2.1rem;color:var(--yellow);letter-spacing:-.01em;}
.cred-item p{font-size:.82rem;color:var(--ink-mute);margin-top:4px;letter-spacing:.2px;}
.scroll-cue{
  position:absolute;bottom:34px;left:6vw;display:flex;align-items:center;gap:10px;
  font-size:.72rem;letter-spacing:2px;text-transform:uppercase;color:var(--ink-mute);
}
.scroll-cue .bar{width:1px;height:34px;background:linear-gradient(to bottom, var(--yellow), transparent);
  animation:scrollcue 1.8s ease-in-out infinite;}
@keyframes scrollcue{0%{opacity:0;transform:scaleY(.3);transform-origin:top;}50%{opacity:1;}100%{opacity:0;transform:scaleY(1);transform-origin:bottom;}}

/* ---------- Generic section scaffolding ---------- */
.section{ min-height:min(88vh,880px); display:flex; flex-direction:column; justify-content:center; padding:120px 0; }
.section-head{max-width:720px;margin-bottom:52px;}
.section-tag{
  font-family:var(--font-title);font-weight:700;font-size:.76rem;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--gray);margin-bottom:14px;display:block;
}
.section h2{
  font-family:var(--font-title);font-weight:800;font-size:clamp(2rem,4vw,3.1rem);line-height:1.08;
  letter-spacing:-.015em;margin-bottom:18px;
}
.section p.desc{font-size:1.05rem;color:var(--ink-dim);max-width:600px;font-weight:300;line-height:1.65;}

.wrap > *{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);}
.section.in .wrap > *{opacity:1;transform:none;}
.section.in .wrap > *:nth-child(2){transition-delay:.09s;}
.section.in .wrap > *:nth-child(3){transition-delay:.18s;}
.section.in .wrap > *:nth-child(4){transition-delay:.27s;}

/* ---------- Products ---------- */
#productos{background:linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);}
.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;}
.product-card{
  position:relative;border-radius:var(--radius);overflow:hidden;min-height:280px;
  border:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.product-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(0,0,0,.45);}
.product-card .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s var(--ease-out);}
.product-card:hover .bg{transform:scale(1.06);}
.product-card .scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(2,20,34,0.15) 0%, rgba(2,20,34,.94) 78%);}
.product-card .content{position:relative;padding:26px 24px;z-index:2;}
.product-card .tag{
  display:inline-block;font-family:var(--font-title);font-weight:800;font-size:.7rem;letter-spacing:1.6px;
  text-transform:uppercase;padding:5px 12px;border-radius:20px;margin-bottom:12px;color:#04202f;
}
.product-card h3{font-family:var(--font-title);font-weight:800;font-size:1.3rem;margin-bottom:8px;}
.product-card p{font-size:.9rem;color:var(--ink-dim);line-height:1.5;}
.product-card.solid .bg{background:var(--blue);}
.product-card.solid .content{padding-top:80px;}
.product-card.solid h3{font-size:1.4rem;}
/* Flat brand-color card backgrounds (dot-grid + diagonal wedge, no baked-in
   text) — matches the original print-collateral palette without duplicating
   the card's own H3/p text inside a raster image. */
.product-card .bg.pattern{
  background-image:
    radial-gradient(rgba(255,255,255,.32) 1.4px, transparent 1.4px),
    linear-gradient(140deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.6) 100%);
  background-size:15px 15px, 100% 100%;
  background-position:0 0, 0 0;
}
.product-card .bg.c-green{background-color:var(--green);}
.product-card .bg.c-blue{background-color:var(--blue);}
.product-card .bg.c-yellow{background-color:var(--yellow);}
.product-card .bg.c-gray{background-color:var(--gray);}
.product-card .bg.c-purple{background-color:var(--purple);}

/* ---------- Coverage / maps ---------- */
#cobertura{background:var(--bg-2);}
.map-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.map-tile{border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#0a2a3d;}
.map-tile img{width:100%;height:auto;display:block;}
.map-tile .cap{padding:16px 20px;font-size:.85rem;color:var(--ink-mute);border-top:1px solid rgba(255,255,255,.08);}
.coverage-stats{display:flex;gap:40px;margin-top:36px;flex-wrap:wrap;}

/* ---------- Services list ---------- */
#servicios{background:var(--bg);}
.service-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 40px;margin-top:6px;}
.service-list li{
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08);
  font-size:.98rem;color:var(--ink-dim);display:flex;align-items:flex-start;gap:12px;
}
.service-list li::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--yellow);margin-top:7px;flex-shrink:0;transform:rotate(45deg);}

/* ---------- Sectors (Fase 2 preview) ---------- */
#sectores{background:linear-gradient(180deg, var(--bg) 0%, #0e0a1c 60%, var(--bg) 100%);}
.phase-badge{
  display:inline-flex;align-items:center;gap:8px;background:rgba(159,84,153,.18);
  border:1px solid rgba(159,84,153,.5);color:#e2b6de;padding:6px 14px;border-radius:20px;
  font-size:.72rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:16px;
}
.sector-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;}
.sector-card{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);border-left:3px solid var(--purple);
  border-radius:12px;padding:26px;transition:transform .3s,border-color .3s,background .3s;
}
.sector-card:hover{transform:translateY(-4px);border-left-color:var(--yellow);background:rgba(255,255,255,.05);}
.sector-card .num{font-family:var(--font-title);font-weight:800;font-size:.75rem;color:var(--purple);letter-spacing:1px;margin-bottom:10px;display:block;}
.sector-card h3{font-family:var(--font-title);font-weight:700;font-size:1.15rem;margin-bottom:8px;}
.sector-card p{font-size:.88rem;color:var(--ink-mute);line-height:1.5;}

/* ---------- Testimonials ---------- */
#testimonios{background:var(--bg-2);}
.testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;}

/* ---------- Certificaciones / Cumplimiento Regulatorio ---------- */
.compliance-section .section-head{text-align:center;margin-bottom:36px;}
.compliance-section .section-head .desc{margin:0 auto;}
.compliance-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:28px;
  align-items:center;justify-items:center;
}
.compliance-item{
  display:flex;align-items:center;justify-content:center;height:72px;width:100%;
  opacity:.72;transition:opacity .3s,transform .3s;
}
.compliance-item:hover{opacity:1;transform:translateY(-2px);}
.compliance-item img{max-height:100%;max-width:150px;width:auto;height:auto;object-fit:contain;}
@media (max-width:720px){
  .compliance-grid{grid-template-columns:repeat(2,1fr);gap:22px;}
  .compliance-item{height:56px;}
}
.testi-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:28px;}
.testi-card .quote-mark{font-family:var(--font-title);font-size:2.4rem;color:var(--yellow);line-height:1;display:block;margin-bottom:6px;}
.testi-card p.quote{font-size:.98rem;color:var(--ink-dim);line-height:1.6;font-style:italic;margin-bottom:18px;min-height:80px;}
.testi-card .who{display:flex;align-items:center;gap:12px;}
.testi-card .avatar{
  width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--yellow));
  display:flex;align-items:center;justify-content:center;font-family:var(--font-title);font-weight:800;color:#04202f;flex-shrink:0;
}
.testi-card .who h4{font-size:.9rem;font-weight:700;}
.testi-card .who span{font-size:.78rem;color:var(--ink-mute);}

/* ---------- About / trust ---------- */
#nosotros{background:var(--bg);}
.about-flex{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;}
.about-flex p{font-size:1.08rem;line-height:1.75;color:var(--ink-dim);font-weight:300;margin-bottom:22px;}
.trust-box{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:36px;}
.trust-box .row{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08);}
.trust-box .row:last-child{border-bottom:none;}
.trust-box .row span:first-child{color:var(--ink-mute);font-size:.88rem;}
.trust-box .row span:last-child{font-family:var(--font-title);font-weight:700;color:var(--yellow);}

/* ---------- Contact ---------- */
#contacto{background:linear-gradient(180deg,var(--bg-2) 0%, var(--bg) 100%);}
.contact-flex{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;}
.contact-info .item{margin-bottom:26px;}
.contact-info .item h4{font-family:var(--font-title);font-size:.75rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--gray);margin-bottom:6px;}
.contact-info .item a, .contact-info .item p{font-size:1.05rem;color:#fff;text-decoration:none;font-weight:600;}
.contact-info .item a:hover{color:var(--yellow);}
.contact-form{display:flex;flex-direction:column;gap:16px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-group input, .form-group select, .form-group textarea{
  width:100%;padding:14px 16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.2);
  border-radius:8px;color:#fff;font-family:var(--font-body);font-size:.95rem;
}
.form-group select option{background:var(--bg);color:#fff;}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{outline:none;border-color:var(--yellow);}
.form-note{font-size:.78rem;color:var(--ink-mute);margin-top:4px;}
.consent-check{
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:5px;
  font-size:.82rem;color:var(--ink-dim);line-height:1.5;margin:6px 0 4px;cursor:pointer;
}
.consent-check input[type="checkbox"]{
  width:17px;height:17px;flex:0 0 auto;margin-top:2px;accent-color:var(--yellow);cursor:pointer;
}
.consent-check a{color:var(--yellow);text-decoration:underline;}
.consent-check a:hover{color:#fff;}

/* ---------- Footer ---------- */
footer.site-footer{
  background:#010d16;border-top:1px solid rgba(255,255,255,.08);padding:60px 6vw 30px;
}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px;}
.footer-grid h5{font-family:var(--font-title);font-size:.78rem;letter-spacing:1.4px;text-transform:uppercase;color:var(--gray);margin-bottom:16px;}
.footer-grid ul{list-style:none;}
.footer-grid li{margin-bottom:10px;}
.footer-grid a{color:var(--ink-dim);text-decoration:none;font-size:.9rem;}
.footer-grid a:hover{color:var(--yellow);}
.footer-logo img{height:30px;margin-bottom:14px;}
.footer-logo p{font-size:.85rem;color:var(--ink-mute);max-width:280px;line-height:1.6;}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.08);font-size:.8rem;color:var(--ink-mute);
}
.footer-bottom a{color:var(--ink-mute);text-decoration:none;}
.footer-bottom a:hover{color:#fff;}

/* ---------- Reduced motion / mobile ---------- */
@media (prefers-reduced-motion: reduce){
  .wrap > *{opacity:1 !important;transform:none !important;transition:none !important;}
  .hero h1 .split{transform:none !important;}
  #ambient-canvas{display:block;opacity:.5;} /* estático, pero la atmósfera se conserva */
  .scroll-cue .bar{animation:none;}
}
@media (max-width:760px){
  #ambient-canvas{opacity:.45;}
}
@media (max-width:860px){
  nav.main-nav{position:fixed;inset:0 0 0 auto;width:78%;max-width:340px;background:rgba(2,10,18,.98);
    flex-direction:column;align-items:flex-start;padding:100px 32px 40px;gap:22px;
    transform:translateX(100%);transition:transform .4s var(--ease-out);}
  nav.main-nav.open{transform:translateX(0);}
  .mobile-toggle{display:block;}
  .product-grid,.map-grid,.service-list,.sector-grid,.testi-grid{grid-template-columns:1fr;}
  .about-flex,.contact-flex{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .credibility-strip{gap:32px;}
}

/* ============================================================
   CLIENTES — carrusel de logos (penúltima sección del home)
   Marquee CSS puro (sin JS de animación) — derecha → izquierda,
   loop infinito sin costura duplicando el set de logos una vez.
   ============================================================ */
.clients-section{padding-bottom:10px;}
.clients-section .section-tag,.clients-section h2{text-align:center;display:block;}
.clients-section h2{margin:10px auto 40px;max-width:640px;}
.clients-marquee{
  width:100%;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.clients-track{display:flex;width:max-content;}
.clients-set{display:flex;align-items:center;gap:22px;padding-right:22px;
  animation:clientsScroll 42s linear infinite;}
/* Recuadro de tamaño FIJO con la imagen contenida dentro.
   Antes se fijaba sólo el ancho y la altura la ponía cada archivo, así que
   la fila subía y bajaba según el logotipo y algunos quedaban recortados
   contra el borde. Con una caja fija y object-fit:contain, ningún logotipo
   puede salirse ni recortarse: como mucho le sobra aire. */
.clients-set img{
  width:150px;height:82px;object-fit:contain;
  border-radius:10px;background:#fff;padding:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);flex:0 0 auto;
  transition:transform .3s;
}
.clients-set img:hover{transform:translateY(-4px) scale(1.03);}
@keyframes clientsScroll{
  from{transform:translateX(0);}
  to{transform:translateX(-100%);}
}
@media (max-width:760px){
  .clients-set img{width:110px;height:60px;}
  .clients-set{gap:14px;padding-right:14px;animation-duration:28s;}
}
@media (prefers-reduced-motion: reduce){
  .clients-set{animation:none;}
  .clients-marquee{overflow-x:auto;}
}

/* ============================================================
   CURSOR 3D INTERACTIVO — "dedo en el agua"
   Punto rígido (sigue el mouse al instante) + anillo con lag/ease
   (arrastre lento tipo agua). Solo dispositivos con mouse preciso
   y sin prefers-reduced-motion; en touch/coarse queda desactivado.
   ============================================================ */
body.has-custom-cursor,
body.has-custom-cursor a,
body.has-custom-cursor button,
body.has-custom-cursor input,
body.has-custom-cursor textarea,
body.has-custom-cursor select{cursor:none;}
.cursor-fx{
  position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;
  z-index:9999;transform:translate(-50%,-50%);will-change:transform,left,top,width,height;
}
.cursor-dot{
  width:8px;height:8px;background:#fbd601;mix-blend-mode:difference;
  transition:width .2s ease,height .2s ease,opacity .2s ease;
}
.cursor-ring{
  width:38px;height:38px;border:1.5px solid rgba(255,255,255,.55);
  transition:width .35s cubic-bezier(.22,1,.36,1),height .35s cubic-bezier(.22,1,.36,1),
    border-color .35s ease,opacity .35s ease,background .35s ease;
}
.cursor-ring.grow{
  width:64px;height:64px;border-color:var(--yellow);
  background:rgba(251,214,1,.08);
}
.cursor-ring.press{width:30px;height:30px;}
@media (pointer:coarse), (hover:none){
  .cursor-fx{display:none !important;}
  body.has-custom-cursor,
  body.has-custom-cursor a,
  body.has-custom-cursor button{cursor:auto;}
}
@media (prefers-reduced-motion: reduce){
  .cursor-fx{display:none !important;}
  body.has-custom-cursor{cursor:auto;}
}


/* ============================================================
   SISTEMA 2026 — capas de profundidad, tipografía cinética y
   componentes nuevos. Añadido sin tocar las clases existentes,
   para que las 40 páginas hereden la paleta sin romperse.
   ============================================================ */

/* --- Ley 03: niebla volumétrica (profundidad real sin WebGL) --- */
/* ── RONDA 24 · AQUÍ ESTABA LA LENTITUD DE TODA LA PÁGINA ──────────────
   Reportado: «la página web carga poquito lento».

   No es la descarga: 610 KB, 22 peticiones, DOM listo en 279 ms. Es el
   PINTADO. Lo medí desactivando las piezas una por una en el navegador:

       tal cual .............................. 10.9 fps
       parando TODO el JavaScript de animación  11.2 fps   (no eran los lienzos)
       quitando los `backdrop-filter` ......... 11.2 fps   (tampoco el cristal)
       quitando los `filter: blur()` .......... 24.2 fps   ← aquí

   El culpable son estas cuatro capas de niebla. Y lo llamativo: **ya son
   degradados radiales**, o sea que su suavidad viene del propio degradado.
   Encima se les aplicaba `filter: blur(80px)`. Es desenfocar lo que ya
   está desenfocado — y no gratis: son cuatro capas que suman 2.2 millones
   de píxeles, cada una pasando un núcleo de desenfoque de 80 px en cada
   cuadro, sin poder cachearse porque el scroll las mueve.

   Arreglo: fuera el `filter`, y el mismo aspecto se consigue estirando la
   caída del degradado y subiendo un punto la opacidad. Visualmente es la
   misma niebla; para el navegador es pintar un degradado, que es de las
   cosas más baratas que sabe hacer.

   Nota honesta sobre la medida: estos números salen de un Chromium sin
   interfaz y sin GPU, donde el desenfoque se calcula por software y sale
   más caro que en su equipo. La proporción entre las filas de arriba sí
   es válida —el desenfoque era 2.2 veces el resto junto— pero no espere
   pasar literalmente de 11 a 24 fps en su máquina: allí ya iba mejor.  */
.fogfield{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.fogfield i{position:absolute;display:block;border-radius:50%;opacity:.34;will-change:transform;}
.fogfield .fg1{width:62vw;height:62vw;left:-14vw;top:-6vh;
  background:radial-gradient(circle closest-side,#0B4B7A 0%,rgba(11,75,122,.55) 38%,transparent 78%);}
.fogfield .fg2{width:54vw;height:54vw;right:-12vw;top:36vh;
  background:radial-gradient(circle closest-side,#126B5C 0%,rgba(18,107,92,.55) 38%,transparent 78%);}
.fogfield .fg3{width:46vw;height:46vw;left:20vw;top:118vh;
  background:radial-gradient(circle closest-side,#413D61 0%,rgba(65,61,97,.55) 38%,transparent 80%);}
.fogfield .fg4{width:40vw;height:40vw;right:6vw;top:206vh;
  background:radial-gradient(circle closest-side,#2E6B1F 0%,rgba(46,107,31,.55) 38%,transparent 80%);}

/* --- Ley 01: línea de tiempo normalizada, visible --- */
.scrollrail{position:fixed;left:0;top:0;height:2px;width:100%;z-index:120;background:transparent;pointer-events:none;}
.scrollrail i{display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--neon-yellow),var(--neon-green),var(--neon-teal));
  box-shadow:0 0 12px rgba(79,227,208,.75);}

/* --- Ley 04: tipografía cinética --- */
.kinetic{display:block;}
.kinetic .ch{display:inline-block;will-change:transform,opacity;}
.js-anim .kinetic .ch{transform:translateY(112%) skewY(6deg);opacity:0;}

/* --- Hero 2026 --- */
.hero .eyebrow{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--neon-teal);}
.hero h1{font-family:var(--font-title);font-weight:900;letter-spacing:-.045em;line-height:.88;
  font-size:clamp(2.6rem,8.4vw,6.6rem);}
.hero h1 .grad{background:linear-gradient(96deg,#fff 24%,var(--neon-yellow) 62%,var(--neon-green) 88%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.credibility-strip .cred-item h4{font-family:var(--font-mono);color:var(--neon-yellow);font-weight:500;}

/* --- Sectores: 9 tarjetas con acento propio --- */
.sector-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);}
@media(max-width:900px){.sector-grid{grid-template-columns:1fr;}}
.sector-card{background:var(--bg-2);padding:30px 26px;position:relative;overflow:hidden;
  transition:background .4s var(--ease-out);}
.sector-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--accent,var(--neon-teal));opacity:.34;transition:.4s var(--ease-out);}
.sector-card:hover{background:var(--panel);}
.sector-card:hover::before{opacity:1;box-shadow:0 0 22px var(--accent,var(--neon-teal));}
.sector-card .num{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;color:var(--ink-mute);}
.sector-card h3{font-family:var(--font-title);font-weight:800;letter-spacing:-.02em;
  font-size:1.24rem;margin:12px 0 11px;color:#fff;}
.sector-card p{font-size:.84rem;color:var(--ink-dim);line-height:1.62;}
.sector-card .prods{margin-top:15px;padding-top:13px;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent,var(--neon-teal));line-height:1.9;}
.sector-card .badge-new{color:var(--neon-yellow);}

/* --- Cumplimiento: 7 marcos --- */
.compliance-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;align-items:center;}
@media(max-width:1000px){.compliance-grid{grid-template-columns:repeat(4,1fr);}}
@media(max-width:620px){.compliance-grid{grid-template-columns:repeat(2,1fr);}}
.compliance-item{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;
  padding:16px;display:flex;align-items:center;justify-content:center;min-height:78px;
  transition:border-color .35s,background .35s;}
.compliance-item:hover{border-color:var(--neon-teal);background:rgba(79,227,208,.06);}
.compliance-item img{max-height:34px;width:auto;opacity:.86;transition:opacity .35s;}
.compliance-item:hover img{opacity:1;}

/* --- Etiquetas de sección --- */
.section-tag{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--neon-teal);display:block;margin-bottom:14px;}
.section-head h2{font-family:var(--font-title);font-weight:900;letter-spacing:-.035em;
  font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1;}

@media (prefers-reduced-motion: reduce){
  .js-anim .kinetic .ch{transform:none;opacity:1;}
  .fogfield i{transform:none !important;}
}


/* --- Titular cinético con degradado continuo ---------------------------
   Al partir el titular en caracteres, el degradado del padre deja de
   alcanzarlos (background-clip:text recorta contra la caja del padre, y
   cada hijo queda con relleno transparente y sin fondo propio → invisible).
   Solución: cada carácter pinta el MISMO degradado, desplazado por JS con
   background-position para que la línea se lea continua. Aquí solo va lo
   que no depende de medidas; el resto lo calcula paintKineticGradient().
   -------------------------------------------------------------------- */
.hero h1 .split:has(.ch){transform:none !important;}
.hero h1 .grad .ch{
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  background-repeat:no-repeat;
}
/* Sin JS o sin soporte de :has(), el titular se ve sólido y legible. */
@supports not selector(:has(*)){ .js-anim .hero h1 .split{transform:none;} }

/* --- Sectores sin fotografía generada todavía ---------------------------
   Los 6 sectores originales traen imagen; los 3 nuevos (Gobierno, Oil & Gas,
   Logística) aún no. En vez de dejar un hueco negro, la caja se convierte en
   una placa de marca deliberada: más baja, con un lavado de degradado propio
   del sector y el campo de partículas encima. Cuando exista la imagen real,
   basta con volver a insertar <img class="sv-img"> y esta regla deja de
   aplicar sola.
   ---------------------------------------------------------------------- */
.sector-visual:not(:has(.sv-img)){
  min-height:0;
  height:clamp(210px,26vw,320px);
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(79,227,208,.16), transparent 62%),
    radial-gradient(80% 110% at 88% 100%, rgba(143,230,74,.14), transparent 60%),
    linear-gradient(150deg,#0B1020 0%,#101A2C 55%,#0A1120 100%);
  border:1px solid var(--line);
}
.sector-visual:not(:has(.sv-img)) .sv-scrim{ background:none; }


/* --- Palabras indivisibles en el titular cinético -----------------------
   Cada palabra es una caja nowrap; los caracteres animan dentro de ella.
   Sin esto, los caracteres inline-block permiten que el navegador corte la
   línea entre letras (fue exactamente lo que rompió el hero).
   ---------------------------------------------------------------------- */
.kinetic .wd{display:inline-block;white-space:nowrap;}
.kinetic .ch.sp{display:inline-block;}


/* --- Interruptor de movimiento ------------------------------------------
   Windows y macOS pueden tener las animaciones desactivadas a nivel de
   sistema. El sitio lo respeta por defecto, pero deja encenderlas a mano:
   sin esto, un visitante con esa preferencia jamás ve el sitio en movimiento
   y no tiene manera de saber que se está perdiendo algo.
   ---------------------------------------------------------------------- */
.motion-toggle{position:fixed;right:16px;bottom:16px;z-index:130;display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(10,17,32,.86);backdrop-filter:blur(12px);border:1px solid var(--line);
  color:var(--ink-mute);padding:9px 13px;border-radius:999px;cursor:pointer;transition:.25s}
.motion-toggle:hover{color:#fff;border-color:var(--neon-teal)}
.motion-toggle .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-mute);transition:.25s}
.motion-toggle.on .dot{background:var(--neon-teal);box-shadow:0 0 10px var(--neon-teal)}
@media(max-width:640px){.motion-toggle{right:10px;bottom:10px;padding:8px 11px;font-size:.55rem}}


/* --- Cobertura viva ----------------------------------------------------- */
.coverage-live{margin-top:34px;border:1px solid var(--line);background:rgba(255,255,255,.02);padding:24px}
.cov-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid var(--line)}
.cov-count{display:flex;align-items:baseline;gap:11px}
.cov-count span{font-family:var(--font-mono);font-size:clamp(34px,5vw,58px);color:var(--neon-yellow);
  font-weight:500;line-height:1;letter-spacing:-.03em}
.cov-count small{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.cov-filters{display:flex;gap:6px;flex-wrap:wrap}
.cov-f{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  background:none;border:1px solid var(--line);color:var(--ink-mute);padding:7px 13px;cursor:pointer;
  border-radius:2px;transition:.22s}
.cov-f:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.cov-f.active{background:var(--neon-teal);border-color:var(--neon-teal);color:#050B14;font-weight:600}
.cov-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.cov-chip{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;padding:9px 14px;
  border:1px solid var(--line);color:var(--ink-mute);border-radius:2px;
  opacity:.35;transform:translateY(5px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out),
    color .45s,border-color .45s,box-shadow .45s}
.cov-chip.on{opacity:1;transform:none;color:#fff;border-color:rgba(79,227,208,.55);
  box-shadow:0 0 16px rgba(79,227,208,.16) inset}
.cov-chip[hidden]{display:none}
@media(max-width:620px){.cov-chip{font-size:.6rem;padding:8px 11px}}


/* --- Hero: reparaciones de encuadre -------------------------------------
   1) El encabezado fijo tapaba el eyebrow: con min-height:100vh y contenido
      centrado, en pantallas bajas (portátil con barra de marcadores) el
      bloque se salía por arriba. Ahora, cuando la ventana es baja, el hero
      se ancla arriba en vez de centrar — así nunca se pierde la primera línea.
   2) El titular se partía en tres renglones porque .hero-inner medía 820px
      y "Finance Experts" necesita más a tamaño completo. Se ensancha.
   3) El ™ caía solo a un renglón: la línea no se parte en pantallas anchas.
   ---------------------------------------------------------------------- */
.hero{ padding-top:clamp(132px,17vh,180px); }
.hero-inner{ max-width:min(1150px,92vw); }
@media (max-height:960px){
  .hero{ justify-content:flex-start; }
}
@media (min-width:900px){
  .hero h1 .line{ white-space:nowrap; }
}
.hero h1 .tm{ white-space:nowrap; }

/* El encabezado fijo también tapaba el inicio de las páginas interiores */
.page-hero{ padding-top:clamp(150px,19vh,200px) !important; }
html{ scroll-padding-top:96px; }


/* --- Secciones cortas: fuera el 100vh forzado ---------------------------
   .section imponía min-height:100vh a TODA sección. En páginas interiores
   con poco contenido (Contacto, Criterios, Brokers) eso dejaba huecos
   enormes: cuatro tarjetas centradas en una pantalla completa. Ahora la
   altura la manda el contenido y el aire lo da el padding.
   ---------------------------------------------------------------------- */
body:not(.home) .section{ min-height:0; padding-top:clamp(56px,8vh,96px); padding-bottom:clamp(56px,8vh,96px); }
body:not(.home) .page-hero{ min-height:0 !important; padding-bottom:clamp(28px,4vh,48px) !important; }
body:not(.home) .section + .section{ border-top:1px solid var(--line); }

/* Tarjetas de canal de contacto: que se sientan accionables, no decorativas */
.channels a, .channels .ch{ transition:border-color .3s, background .3s, transform .3s; }
.channels a:hover, .channels .ch:hover{ border-color:var(--neon-teal); background:rgba(79,227,208,.06); transform:translateY(-3px); }


/* --- Bloque de valor (Inversionistas / Brokers) -------------------------- */
.value-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.value-card{background:var(--bg-2);padding:30px 26px;transition:background .35s}
.value-card:hover{background:var(--panel)}
.vc-num{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;color:var(--neon-teal)}
.value-card h4{font-family:var(--font-title);font-weight:800;font-size:1.12rem;letter-spacing:-.02em;
  margin:13px 0 11px;color:#fff;line-height:1.2}
.value-card p{font-size:.86rem;color:var(--ink-dim);line-height:1.65}
.proof-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-top:none}
.proof{background:var(--bg-2);padding:26px}
.p-v{display:block;font-family:var(--font-mono);font-size:clamp(1.5rem,3vw,2.1rem);color:var(--neon-yellow);font-weight:500;letter-spacing:-.03em}
.p-l{display:block;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-mute);margin-top:9px;line-height:1.6}
.fine{margin-top:20px;font-size:.8rem;color:var(--ink-mute);max-width:78ch;line-height:1.7}


/* --- Menú de 7 opciones: respiración en pantallas medianas -------------- */
@media (min-width:901px) and (max-width:1400px){
  nav.main-nav{gap:18px}
  nav.main-nav a.nav-link{font-size:.82rem}
  header .social-icons{margin-left:2px}
}
@media (min-width:901px) and (max-width:1150px){
  nav.main-nav{gap:13px}
  nav.main-nav a.nav-link{font-size:.78rem}
  header .social-icons .icon-btn{width:30px;height:30px}
}


/* ============================================================
   STORYTELLING — tira narrativa de 3 pasos
   Técnica: animaciones dirigidas por scroll NATIVAS (animation-timeline:view()),
   siguiendo la guía de modern-web-guidance. Cero JavaScript, cero librerías.
   Reglas aplicadas:
   - El estado inicial "oculto" vive DENTRO de @supports, así que un navegador
     sin soporte muestra todo completo. La animación nunca puede esconder nada.
   - animation-fill-mode: both, para que el paso quede en su estado final.
   - Se desactiva por completo con prefers-reduced-motion.
   ============================================================ */
.story{margin-top:56px}
.story-track{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
@media(max-width:860px){.story-track{grid-template-columns:1fr}}
.story-step{background:var(--bg-2);padding:32px 28px;position:relative;overflow:hidden}
.story-step::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--step-color,var(--neon-teal));transform:scaleX(0);transform-origin:left}
.story-k{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--step-color,var(--neon-teal))}
.story-step h4{font-family:var(--font-title);font-weight:800;font-size:1.16rem;letter-spacing:-.02em;
  margin:13px 0 11px;color:#fff;line-height:1.22}
.story-step p{font-size:.87rem;color:var(--ink-dim);line-height:1.66}
.story-viz{margin-top:22px;height:78px}
.story-viz svg{width:100%;height:100%;overflow:visible}
.story-viz .sv-line{fill:none;stroke:var(--step-color,var(--neon-teal));stroke-width:2;stroke-linecap:round}
.story-viz .sv-dot{fill:var(--step-color,var(--neon-teal))}
.story-viz .sv-ghost{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.5;stroke-dasharray:3 6}

@supports ((animation-timeline: view()) and (animation-range: 0% 100%)){
  @media (prefers-reduced-motion: no-preference){
    @keyframes story-in{ from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
    @keyframes story-rule{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
    @keyframes story-draw{ from{stroke-dashoffset:var(--len,260)} to{stroke-dashoffset:0} }

    .story-step{ animation:story-in .9s ease both; animation-timeline:view(); animation-range:entry 12% cover 34%; }
    .story-step:nth-child(2){ animation-range:entry 4% cover 32% }
    .story-step:nth-child(3){ animation-range:entry 0% cover 30% }
    .story-step::after{ animation:story-rule 1s ease both; animation-timeline:view(); animation-range:entry 20% cover 46%; }
    .story-viz .sv-line{ stroke-dasharray:var(--len,260); animation:story-draw 1.2s ease both;
      animation-timeline:view(); animation-range:entry 18% cover 52%; }
  }
}


/* --- Fractal vivo del hero ---------------------------------------------- */
.hero-fractal{position:absolute;right:2vw;top:50%;transform:translateY(-50%);
  width:min(40vw,520px);aspect-ratio:1;pointer-events:none;z-index:1;opacity:.95}
@media(min-width:1500px){ .hero-fractal{right:6vw;width:min(34vw,560px)} }
.hero-fractal canvas{width:100%;height:100%;display:block}
.hero-inner{position:relative;z-index:3}
@media(max-width:1100px){ .hero-fractal{width:min(64vw,440px);opacity:.42;right:-6vw} }
@media(max-width:700px){ .hero-fractal{width:96vw;right:-18vw;top:38%;opacity:.30} }

/* --- Titular: sin parpadeo ----------------------------------------------
   .pre-kin esconde la línea COMPLETA desde antes del primer pintado. En
   cuanto el titular se parte en caracteres, la clase se retira y el control
   pasa a los caracteres. Así nunca hay un estado visible-luego-oculto.
   Red de seguridad: a los 2.5s se revela pase lo que pase.
   ------------------------------------------------------------------------ */
.pre-kin .hero h1 .split{opacity:0}
.pre-kin .hero h1 .split:has(.ch){opacity:1}


/* ============================================================
   DIFERENCIACIÓN POR PÁGINA
   La crítica fue justa: sectores y productos se sentían copy-paste.
   Cada página ahora tiene tres capas propias, no una:
     1. --pagina  → color rector, tomado de la paleta del manual
     2. data-motivo → textura de fondo distinta por página
     3. narrativa propia (ya escrita en la tira de storytelling)
   Un usuario de servicios financieros necesita reconocer en qué producto
   está sin leer el título. Eso es lo que resuelve esto.
   ============================================================ */
body[data-motivo]{position:relative}
body[data-motivo]::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(60vw 50vw at 82% 12%, color-mix(in srgb, var(--pagina) 16%, transparent), transparent 62%),
    radial-gradient(46vw 40vw at 8% 82%, color-mix(in srgb, var(--pagina) 11%, transparent), transparent 66%);
}
/* Trama propia por motivo — cada una se lee distinta al primer vistazo */
body[data-motivo]::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.055;
  background-image:var(--trama);background-size:var(--trama-size,80px 80px);
}
body[data-motivo="ondas"]   {--trama:repeating-radial-gradient(circle at 50% 50%, #fff 0 1px, transparent 1px 22px);--trama-size:180px 180px}
body[data-motivo="bloques"] {--trama:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 34px),repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 34px)}
body[data-motivo="escalera"]{--trama:repeating-linear-gradient(135deg,#fff 0 1px,transparent 1px 26px)}
body[data-motivo="engrane"] {--trama:repeating-conic-gradient(from 0deg at 50% 50%, #fff 0deg 2deg, transparent 2deg 20deg);--trama-size:120px 120px}
body[data-motivo="pulso"]   {--trama:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 30px)}
body[data-motivo="orbita"]  {--trama:repeating-radial-gradient(circle at 20% 80%, #fff 0 1px, transparent 1px 30px);--trama-size:220px 220px}
body[data-motivo="ruta"]    {--trama:repeating-linear-gradient(60deg,#fff 0 1px,transparent 1px 40px)}
body[data-motivo="altitud"] {--trama:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 46px)}
body[data-motivo="cadena"]  {--trama:repeating-linear-gradient(45deg,#fff 0 2px,transparent 2px 18px)}
body[data-motivo="malla"]   {--trama:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 14px),repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 14px)}
body[data-motivo="hoja"]    {--trama:repeating-radial-gradient(ellipse at 0% 100%, #fff 0 1px, transparent 1px 26px);--trama-size:160px 160px}
body[data-motivo="nodo"]    {--trama:radial-gradient(#fff 1.2px, transparent 1.3px);--trama-size:26px 26px}
body[data-motivo="columna"] {--trama:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 46px)}
body[data-motivo="flujo"]   {--trama:repeating-linear-gradient(20deg,#fff 0 1px,transparent 1px 24px)}
body[data-motivo="eje"]     {--trama:repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 60px),repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 60px)}

/* El color rector manda en los acentos de la página */
body[data-motivo] .page-hero .eyebrow,
body[data-motivo] .section-tag{color:var(--pagina)}
body[data-motivo] .page-hero h1{
  background:linear-gradient(96deg,#fff 26%, color-mix(in srgb, var(--pagina) 82%, #fff) 88%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body[data-motivo] .related-card{border-left:2px solid color-mix(in srgb, var(--pagina) 60%, transparent)}
body[data-motivo] .related-card:hover{border-color:var(--pagina)}
body[data-motivo] .sector-visual:not(:has(.sv-img)){
  background:
    radial-gradient(90% 120% at 12% 0%, color-mix(in srgb, var(--pagina) 24%, transparent), transparent 62%),
    radial-gradient(80% 110% at 88% 100%, color-mix(in srgb, var(--pagina) 14%, transparent), transparent 60%),
    linear-gradient(150deg,#0B1020 0%,#101A2C 55%,#0A1120 100%)}
/* El primer paso de la narrativa hereda el color de la página, no uno genérico */
body[data-motivo] .story-step:first-child{--step-color:var(--pagina) !important}


/* --- Flujo de capital (propuesta 07) ------------------------------------ */
.flujo-lienzo{position:relative;height:clamp(180px,26vh,300px);margin-top:10px;
  border:1px solid var(--line);border-bottom:none;
  background:linear-gradient(160deg,rgba(79,227,208,.05),rgba(10,17,32,.6))}
.flujo-lienzo canvas{width:100%;height:100%;display:block}
.flujo-estaciones{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
@media(max-width:820px){.flujo-estaciones{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.flujo-estaciones{grid-template-columns:1fr}}
.fe{background:var(--bg-2);padding:24px 22px}
.fe .fd{width:8px;height:8px;border-radius:50%;background:var(--neon-teal);
  box-shadow:0 0 12px var(--neon-teal);display:block;margin-bottom:13px}
.fe:nth-child(2) .fd{background:var(--neon-green);box-shadow:0 0 12px var(--neon-green)}
.fe:nth-child(3) .fd{background:var(--neon-yellow);box-shadow:0 0 12px var(--neon-yellow)}
.fe:nth-child(4) .fd{background:#fff;box-shadow:0 0 12px rgba(255,255,255,.7)}
.fe .fk{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;color:var(--ink-mute)}
.fe h4{font-family:var(--font-title);font-weight:800;font-size:1.05rem;letter-spacing:-.02em;
  margin:9px 0 9px;color:#fff}
.fe p{font-size:.83rem;color:var(--ink-dim);line-height:1.62}

/* --- Tipografía con color: se conserva el tratamiento, se ajusta el tamaño
       (indicación de la dirección tras revisar las propuestas 01 y 07) ----- */
.hero h1{font-size:clamp(2.9rem,9.2vw,7.2rem)}
.section-head h2{font-size:clamp(2rem,4.8vw,3.7rem)}
.flujo-section .section-head h2,
#cobertura .section-head h2{
  background:linear-gradient(96deg,#fff 22%,var(--neon-yellow) 62%,var(--neon-green) 90%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}


/* --- Ensamble en capas del hero -----------------------------------------
   Cuatro planos de la MISMA materia, no tres efectos compitiendo:
     z0 chispas ambientales · z1 flujo (lejos) · z2 fractal (medio) · z3 texto
   El flujo pasa por detrás del fractal, más tenue y más lento, para que la
   armonía se lea como profundidad y no como ruido.
   ------------------------------------------------------------------------ */
.hero-flujo{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:min(60vh,520px);z-index:1;pointer-events:none;opacity:.55}
.hero-flujo canvas{width:100%;height:100%;display:block}
.hero-fractal{z-index:2}
.hero-inner{z-index:3}
@media(max-width:700px){ .hero-flujo{opacity:.34} }

/* La sección de flujo deja de ser una caja con borde y pasa a ser una banda
   de la misma materia: sin marco, el lienzo se funde con el fondo. */
.flujo-lienzo{border:none;background:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.flujo-estaciones{border-left:none;border-right:none}


/* ============================================================
   RONDA 2026-09-07 · CORRECCIONES 3
   ============================================================ */

/* ------------------------------------------------------------
   [MUCHO NEGRO] "las secciones del Home tienen mucho negro,
   me gustaría que se abrieran más espacios / quitar el black
   detrás del header para poder ver los puntos animados"

   Diagnóstico real (no era falta de padding): el campo de chispas
   vive en un canvas FIJO en z-index 0, y CADA sección llevaba un
   fondo 100% opaco en z-index 2. Las partículas existían y se
   animaban, pero quedaban tapadas por siete rectángulos negros.
   Lo único que se veía del sistema era el hero.
   ------------------------------------------------------------ */
body.home #productos{
  background:linear-gradient(180deg, rgba(5,11,20,.62) 0%, rgba(10,17,32,.68) 100%);
}
body.home #cobertura   { background:rgba(10,17,32,.58); }
body.home #servicios   { background:rgba(5,11,20,.50); }
body.home #sectores    { background:linear-gradient(180deg, rgba(5,11,20,.52) 0%, rgba(14,10,28,.66) 60%, rgba(5,11,20,.52) 100%); }
body.home #testimonios { background:rgba(10,17,32,.56); }
body.home #nosotros    { background:rgba(5,11,20,.48); }
body.home #contacto    { background:linear-gradient(180deg, rgba(10,17,32,.60) 0%, rgba(5,11,20,.78) 100%); }
body.home .clients-section,
body.home .compliance-section{ background:rgba(5,11,20,.44); }

/* Las tarjetas sí conservan cuerpo — son superficie de lectura — pero se
   aligeran para no volver a cerrar la página. */
body.home .sector-card,
body.home .value-card,
body.home .proof,
body.home .fe{ background:rgba(10,17,32,.72); backdrop-filter:blur(3px); }

/* La altura la manda el contenido, no un mínimo de 88vh. Esa regla obligaba
   a cada sección a medir casi una pantalla aunque su contenido midiera la
   mitad, y el sobrante salía como vacío negro. */
body.home .section{
  min-height:0;
  padding-top:clamp(96px,12vh,168px);
  padding-bottom:clamp(96px,12vh,168px);
}
body.home .hero{ min-height:100vh; }   /* el hero sí es altura completa a propósito */
body.home .section + .section{ border-top:1px solid rgba(255,255,255,.055); }
body.home .section-head{ margin-bottom:clamp(34px,4.4vh,52px); }

/* ------------------------------------------------------------
   [CAPA DELANTERA] puntos "nadando" delante del texto + los que
   persiguen al puntero (orbe.js). Nunca roban un clic.
   ------------------------------------------------------------ */
#orbe-canvas{
  position:fixed;inset:0;width:100%;height:100vh;
  z-index:115;pointer-events:none;
}
@media (prefers-reduced-motion: reduce){ #orbe-canvas{opacity:.35} }
@media (max-width:700px){ #orbe-canvas{opacity:.55} }

/* ------------------------------------------------------------
   [ACENTOS DE COLOR] "no tengas miedo de cambiar algunos textos a
   amarillo y verde que combinen con el color de las animaciones".
   Se usan los MISMOS neones que pintan las partículas.
   Regla de uso: acento sobre PALABRA CLAVE, nunca sobre un párrafo
   completo — el contraste se gasta si se reparte.
   ------------------------------------------------------------ */
.ac-am{ color:var(--neon-yellow); }
.ac-ve{ color:var(--neon-green); }
.ac-te{ color:var(--neon-teal); }

/* En titulares grandes el neón puro vibra; se baja un punto y se le da un
   halo del mismo tono para que "encienda" en vez de deslumbrar. */
.section-head h2 .ac-am, .hero h1 .ac-am{ color:#FFDA33; text-shadow:0 0 26px rgba(255,225,77,.28); }
.section-head h2 .ac-ve, .hero h1 .ac-ve{ color:#93EB4E; text-shadow:0 0 26px rgba(143,230,74,.26); }
.section-head h2 .ac-te, .hero h1 .ac-te{ color:#5CE9D6; text-shadow:0 0 26px rgba(79,227,208,.26); }

/* ------------------------------------------------------------
   [FLUJO EN SUBPÁGINAS] bandas y cascadas
   "abajo o arriba lo que se vea mejor... y otros de arriba abajo a
    un lado como cascada a la derecha o izquierda de la pantalla
    dependiendo de dónde estén orientados el resto de los elementos"
   ------------------------------------------------------------ */
.flujo-banda{
  position:absolute;left:0;right:0;height:clamp(120px,18vh,220px);
  pointer-events:none;z-index:1;opacity:.55;
}
.flujo-banda.arriba{ top:0; }
.flujo-banda.abajo { bottom:0; }
.flujo-cascada{
  position:absolute;top:0;bottom:0;width:clamp(120px,16vw,260px);
  pointer-events:none;z-index:1;opacity:.5;
}
.flujo-cascada.izq{ left:0; }
.flujo-cascada.der{ right:0; }
.flujo-banda canvas,.flujo-cascada canvas{width:100%;height:100%;display:block}
/* El contenido SIEMPRE por encima del flujo: ninguna animación puede tapar
   contenido (regla dura del proyecto). */
.section .container{position:relative;z-index:4}
@media (max-width:820px){
  .flujo-cascada{display:none}
  .flujo-banda{opacity:.34;height:110px}
}

/* ------------------------------------------------------------
   [ITEM 5] "cuando explota la animación de la derecha se ven los
   bordes cuadrados y se ve limitado — que los límites sean los de
   la vista completa"

   El lienzo del fractal deja de ser una caja de 520px pegada a la
   derecha y pasa a cubrir TODO el hero. La figura sigue centrada a
   la derecha (lo decide fractal.js con `centro`), pero al dispersarse
   los puntos tienen toda la pantalla para viajar: ya no hay borde
   que recortar.
   ------------------------------------------------------------ */
.hero-fractal{
  position:absolute;inset:0;
  width:auto;height:auto;aspect-ratio:auto;transform:none;
  pointer-events:none;z-index:2;opacity:.95;
}
.hero-fractal canvas{width:100%;height:100%;display:block}
@media(min-width:1500px){ .hero-fractal{inset:0;width:auto} }
@media(max-width:1100px){ .hero-fractal{inset:0;width:auto;opacity:.50;} }
@media(max-width:700px){  .hero-fractal{inset:0;width:auto;opacity:.34;} }

/* ------------------------------------------------------------
   [ITEM 1 y 2] "no dedicarle a DOS productos financieros el mismo
   color AZUL — escoge otro color de la nueva paleta"

   Asset Based Lending y Sale & Leaseback compartían #04537F en la
   malla del Home. Se restituye la tabla del Manual, donde cada uno de
   los SEIS productos tiene color propio y ninguno se repite:

     Factoraje ............ #FBD601  Amarillo Capital
     Asset Based Lending .. #04537F  Azul Corporativo
     Adelanto de Contrato . #9F5499  Púrpura Accent
     Arrendamiento ........ #5E9F2A  Verde LATAM
     Financiamiento (P.O.). #908A83  Gris Neutro
     Sale & Leaseback ..... #4FE3D0  Turquesa   ← el que cambia
   ------------------------------------------------------------ */
.product-card .bg.c-teal{background-color:var(--neon-teal);}

/* ------------------------------------------------------------
   [ITEM 4] "El texto se borra al iniciar o recargar la página web
   hasta 2 segundos... es muy importante arreglarlo definitivamente"

   CAUSA RAÍZ (ahora sí localizada). Eran tres cosas encadenadas:
   1. Los <script src> de GSAP en el <head> eran SÍNCRONOS. El navegador
      no ejecuta NADA que venga después hasta que el CDN responde.
   2. El titular se ocultaba desde el <head> con .pre-kin, y sólo se
      volvía a mostrar cuando el script del final del documento partía
      el texto en caracteres — script que estaba detrás de ese bloqueo.
   3. La reaparición la ejecutaba GSAP. O sea: el texto sólo se veía
      cuando la red respondía. Si el CDN tardaba 2 s, el titular estaba
      2 s en blanco. Exactamente lo reportado.

   CORRECCIÓN — se rompe la dependencia de red por completo:
   a) Los scripts de CDN pasan a `defer`: dejan de bloquear el pintado.
   b) El partido en caracteres se define en el <head> y se ejecuta en
      línea, pegado al </h1>, DURANTE el parseo.
   c) La entrada del titular la anima CSS, no GSAP. Una @keyframes con
      retardo por carácter. No depende de ninguna librería ni de la red.
   d) Se retira .pre-kin. El modo de fallo ahora es "texto visible sin
      animación", nunca "texto en blanco".
   ------------------------------------------------------------ */
.js-anim .hero h1 .split{ transform:none; }
.pre-kin .hero h1 .split{ opacity:1; }

.js-anim .kinetic .ch{
  transform:translateY(112%) skewY(6deg); opacity:0;
  animation:itcap-kin .82s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(40ms + var(--i,0) * 20ms);
}
@keyframes itcap-kin{ to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .js-anim .kinetic .ch{ animation:none; transform:none; opacity:1; }
}

/* ------------------------------------------------------------
   [ABRIR ESPACIOS · rejilla editorial]
   El contenido de las secciones vivía en un contenedor de 1240 px
   centrado, así que en una pantalla de 1920 arrancaba en x≈455 px
   mientras el titular del hero arrancaba en x≈115 px (6vw). Ese
   desfase dejaba ~340 px de negro muerto a cada lado y hacía que
   el Home se leyera estrecho y oscuro.

   Ahora, en pantallas grandes, las secciones comparten el MISMO
   margen que el hero: una sola rejilla editorial de borde a borde.
   El texto largo sigue acotado por sus propios max-width, así que
   se gana aire sin que ninguna línea se vuelva ilegible.
   ------------------------------------------------------------ */
@media (min-width:1200px){
  .container{ max-width:none; padding:0 6vw; }
  /* Las mallas SÍ se acotan: sin tope, `auto-fit` metería 5 columnas y
     dejaría la sexta tarjeta huérfana en un renglón aparte. */
  .product-grid{ grid-template-columns:repeat(3,1fr); max-width:1500px; }
  .testi-grid  { max-width:1500px; }
  .map-grid    { max-width:1500px; }
  .about-flex, .contact-flex{ max-width:1500px; }
}
@media (min-width:2100px){
  .container{ max-width:1900px; }
}

/* ============================================================
   [ITEM 3] MAPA VIVO
   "corrige el texto: «Cobertura Global de Factoraje» por «Cobertura
    Global», y dentro de cada imagen «Destinos de Factoraje en América»
    por «Destinos de Financiamiento en América»... si no hay algo
    sobresaliente para sustituir estas imágenes estáticas prefiero no
    hacer cambios."

   Lo sobresaliente sin costo ni dependencias: se retiró la tipografía
   QUEMADA de los cuatro JPG (quedaron mapa + pines + logotipo) y el
   rótulo se rehizo en HTML encima. Con eso:
     · el texto es bilingüe de verdad y ya no obliga a exportar imágenes;
     · el cambio de nombre se hace en un solo lugar;
     · los pines laten en secuencia sobre sus coordenadas reales,
       detectadas del archivo original;
     · en móvil el rótulo se reacomoda debajo del mapa en vez de quedar
       microscópico dentro de un raster de 1600 px;
     · se corrigieron de paso las erratas del original (Istambul, Bulgary,
       Haka, Shangai → Estambul, Bulgaria, Daca, Shanghái).
   ============================================================ */
.mapa-vivo{
  position:relative;margin:0;border-radius:var(--radius);overflow:hidden;
  border:1px solid rgba(255,255,255,.10);background:#2b2748;
}
.mapa-vivo img{width:100%;height:auto;display:block;}

/* --- pines que laten sobre su posición real --- */
.mapa-vivo .pines{position:absolute;inset:0;pointer-events:none;}
.mapa-vivo .pin{
  position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.85) inset;
  animation:pin-late 3.4s ease-in-out infinite;animation-delay:var(--d,0ms);
}
.mapa-vivo .pin::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--neon-teal);opacity:0;
  animation:pin-onda 3.4s ease-out infinite;animation-delay:var(--d,0ms);
}
@keyframes pin-late{0%,72%,100%{box-shadow:0 0 0 2px rgba(255,255,255,.85) inset}
  80%{box-shadow:0 0 0 2px #fff inset, 0 0 16px 4px rgba(79,227,208,.55)}}
@keyframes pin-onda{0%,70%{transform:scale(.6);opacity:0}
  80%{opacity:.9}100%{transform:scale(3.1);opacity:0}}

/* --- el rótulo que sustituye al texto quemado --- */
.mapa-rotulo{
  position:absolute;right:4%;top:30%;width:46%;
  text-shadow:0 2px 18px rgba(10,10,26,.85);
}
.mapa-rotulo.izq{left:5%;right:auto;width:44%;top:28%;}
.mapa-rotulo h3{
  font-family:var(--font-title);font-weight:900;letter-spacing:-.02em;line-height:1.06;
  font-size:clamp(.95rem,1.55vw,1.5rem);margin-bottom:.7em;color:#fff;text-transform:uppercase;
}
.mapa-lista{list-style:none;margin:0;padding:0;display:grid;gap:.06em;}
.mapa-lista.pares{grid-template-columns:1fr 1fr;gap:.06em 1.2em;}
.mapa-lista li{
  font-size:clamp(.7rem,1.05vw,.95rem);line-height:1.42;color:#eef2f8;
  opacity:0;transform:translateY(6px);
}
.mapa-lista li em{font-style:italic;color:var(--neon-teal);opacity:.92;margin-left:.4em;font-size:.92em;}
.mapa-vivo.visto .mapa-lista li{
  animation:mapa-entra .55s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d,0ms);
}
@keyframes mapa-entra{to{opacity:1;transform:none}}

/* En pantallas estrechas el rótulo NO cabe encima del mapa sin volverse
   ilegible, así que baja y se convierte en un pie de foto de verdad.
   (Este era justo el defecto del texto quemado: no podía moverse.) */
@media (max-width:900px){
  .mapa-rotulo, .mapa-rotulo.izq{
    position:static;width:auto;padding:18px 20px 22px;
    background:rgba(10,17,32,.72);text-shadow:none;
  }
  .mapa-lista{grid-template-columns:1fr 1fr;}
  .mapa-lista.pares{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  .mapa-vivo .pin,.mapa-vivo .pin::after{animation:none}
  .mapa-lista li{opacity:1;transform:none}
}

/* Reubicación de los rótulos: cada uno va sobre la zona VACÍA de su mapa
   (América: el Atlántico a la derecha · Offshore: el Atlántico sur, abajo
   a la izquierda) para no cruzarse con los continentes ni con los pines. */
.mapa-rotulo{ right:3.5%; top:25%; width:41%; }
.mapa-rotulo.izq{ left:3.5%; right:auto; top:auto; bottom:6%; width:34%; }
.mapa-rotulo.izq h3{ font-size:clamp(.85rem,1.32vw,1.24rem); }
.mapa-lista.pares{ grid-template-columns:1fr; }

/* ------------------------------------------------------------
   FLUJO EN LAS SUBPÁGINAS · anclaje
   El contenedor cuelga del .page-hero. Las CASCADAS necesitan alto
   propio (el hero interior es bajo a propósito), así que se les da una
   altura fija y se dejan desbordar hacia la primera sección: es
   justamente el efecto de "cae por el costado de la pantalla".
   Nada de esto puede tapar contenido: pointer-events:none y z-index 1,
   con el contenido en z-index 4.
   ------------------------------------------------------------ */
.page-hero{ position:relative; }
.page-hero .flujo-cascada{
  top:0; bottom:auto; height:min(86vh,820px);
}
.page-hero .flujo-banda.arriba{ top:0; }
.page-hero .flujo-banda.abajo { top:auto; bottom:-40px; }
.page-hero > *:not(.flujo-banda):not(.flujo-cascada){ position:relative; z-index:4; }

/* ============================================================
   TIPOGRAFÍA CON COLOR
   "no tengas miedo tampoco de cambiar algunos textos a color amarillo
    y verde... que combine con el color de las animaciones"

   Se resuelve por CSS y no marcando palabras en el HTML, por una razón
   práctica: el conmutador ES/EN reescribe el texto de cada nodo, así que
   cualquier <span> de color metido a mano se perdería al cambiar de
   idioma. Con background-clip el color vive en el estilo, no en el texto,
   y sobrevive al cambio.

   Cada sección del Home hereda uno de los tres neones que pintan las
   partículas — el titular y el movimiento quedan en la misma familia — y
   además ninguna sección repite el color de la anterior.
   ============================================================ */
body.home .section h2{
  background-image:linear-gradient(96deg,#fff 34%, var(--acento,#fff) 92%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  padding-bottom:.04em;   /* si no, el clip corta las descendentes (g, p, y) */
}
body.home #productos   { --acento:var(--neon-yellow); }
body.home #cobertura   { --acento:var(--neon-teal);   }
body.home #servicios   { --acento:var(--neon-green);  }
body.home #sectores    { --acento:#C77CC0;            }
body.home #testimonios { --acento:var(--neon-yellow); }
body.home #nosotros    { --acento:var(--neon-teal);   }
body.home #contacto    { --acento:var(--neon-green);  }

/* El ojo necesita un ancla antes del titular: la etiqueta de sección toma
   el mismo acento, en versión pequeña y monoespaciada. */
body.home .section .section-tag{ color:var(--acento,var(--gray)); opacity:.95; }

/* En subpáginas el acento ya existe y es el color propio del producto o
   sector (--pagina). Se extiende a los rótulos de la narrativa para que
   la página entera se lea de un solo color y NINGUNA se parezca a otra. */
body[data-motivo] .story-k{ color:var(--pagina); }
body[data-motivo] .info-card h3{
  background-image:linear-gradient(96deg,#fff 40%, color-mix(in srgb, var(--pagina) 88%, #fff) 96%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;padding-bottom:.04em;
}

/* Las cifras duras del sitio son amarillas: el amarillo es el color de
   "Capital" en el manual de identidad. */
.credibility-strip strong,.credibility-strip .num,.cov-count span{ color:var(--neon-yellow); }

/* Franja de la cascada un poco más ancha: le da sitio al serpenteo y
   evita que las partículas queden cortadas contra el borde del navegador. */
.flujo-cascada{ width:clamp(150px,20vw,330px); opacity:.6; }

/* ============================================================
   MÓVIL — correcciones de la ronda 2026-09-08
   ============================================================ */

/* 1) ALTURA REAL DE LA VENTANA.
   En el móvil, 100vh mide la ventana SIN la barra del navegador: al
   aparecer y desaparecer esa barra al hacer scroll, el hero y los lienzos
   fijos "saltan" y dejan una franja vacía abajo. `dvh` (dynamic viewport
   height) mide lo que de verdad se ve en cada momento. Se deja 100vh
   antes como respaldo para navegadores viejos que no conocen dvh. */
#ambient-canvas, #orbe-canvas{ height:100vh; height:100dvh; }
body.home .hero{ min-height:100vh; min-height:100dvh; }

/* 2) El área táctil mínima cómoda es de 44 px. El menú y el conmutador de
   idioma estaban por debajo en teléfonos pequeños. */
@media (max-width:900px){
  .mobile-toggle{ min-width:48px; min-height:48px; font-size:1.5rem; line-height:1; }
  .lang-switch{ min-height:40px; padding:9px 15px; }
  nav.main-nav a.nav-link{ padding:12px 0; font-size:1rem; }
  .icon-btn{ min-width:44px; min-height:44px; }
}

/* 3) Móvil: menos partículas y menos capas. Un teléfono de gama media no
   tiene que mover tres campos de partículas a la vez para que el sitio se
   entienda; la lectura manda sobre el efecto. */
@media (max-width:700px){
  .hero-flujo{ display:none; }          /* la capa lejana no aporta a 390 px */
  #orbe-canvas{ opacity:.42; }
  .fogfield i{ filter:blur(60px); opacity:.20; }
}

/* 4) Nada puede desbordar a lo ancho en un teléfono. */
@media (max-width:700px){
  .container{ padding-left:22px; padding-right:22px; }
  body.home .section{ padding-top:clamp(64px,9vh,96px); padding-bottom:clamp(64px,9vh,96px); }
  .credibility-strip{ gap:22px; }
  .cov-chips{ gap:6px; }
}


/* ============================================================
   NOMENCLATURA DE COLOR POR PRODUCTO — CORREGIDA 2026-09-08

   La ronda anterior reasignó los seis colores por mi cuenta. Estaba mal:
   la nomenclatura NO es una decisión de diseño abierta, es la que ya está
   en producción en https://it-capital.com.mx y la que sus clientes
   reconocen. Se midieron los colores directamente de la fila de tarjetas
   del sitio en vivo y se restituyeron:

     Factoraje ............ #9F5499  Púrpura      (era púrpura en el sitio)
     Adelanto de Contrato . #5E9F2A  Verde        (era verde)
     Arrendamiento ........ #FBD601  Amarillo     (era amarillo)
     Sale & Leaseback ..... #04537F  Azul         (era azul)
     Financiamiento ....... #908A83  Gris         (era gris)
     Asset Based Lending .. #58C1B4  Turquesa 7456C  ← el único que cambia

   Asset Based Lending no aparece en esa fila del sitio en vivo y era el
   que duplicaba el azul de Sale & Leaseback. Toma el turquesa de marca,
   que es el color que faltaba de la paleta. Así se cumplen las dos cosas
   que pidió la dirección: se respeta la nomenclatura existente y ningún
   producto repite color.
   ============================================================ */
.product-card .bg.c-teal{background-color:var(--teal);}

/* ============================================================
   PRENSA — bloque de newsletter, aviso legal y formulario
   ============================================================ */
.news-cta{
  margin-top:64px;padding:34px 32px;border:1px solid var(--line);
  background:linear-gradient(120deg, rgba(79,227,208,.06), rgba(10,17,32,.55));
  display:grid;grid-template-columns:1.1fr .9fr;gap:26px 40px;align-items:center;
}
.news-cta h3{font-family:var(--font-title);font-weight:900;letter-spacing:-.025em;
  font-size:clamp(1.3rem,2.4vw,1.9rem);margin:.2em 0 .45em}
.news-cta p{color:var(--ink-dim);font-size:.95rem;line-height:1.6;max-width:46ch}
.news-form{display:flex;gap:10px;flex-wrap:wrap}
.news-form input{
  flex:1 1 220px;min-width:0;background:rgba(5,11,20,.6);border:1px solid var(--line);
  color:#fff;padding:14px 16px;font-family:var(--font-body);font-size:.95rem;border-radius:2px;
}
.news-form input:focus{outline:none;border-color:var(--neon-teal);box-shadow:0 0 0 3px rgba(79,227,208,.14)}
.news-form .btn-cta{white-space:nowrap}
.news-fine{grid-column:1/-1;font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.05em;color:var(--ink-mute);margin:0}

/* El aviso legal se marca como cita, no como párrafo más: es un texto
   jurídico y debe leerse distinto del cuerpo editorial. */
.aviso-prensa{
  margin-top:56px;padding:26px 30px;border-left:3px solid var(--neon-yellow);
  background:rgba(255,225,77,.045);
}
.aviso-prensa h4{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--neon-yellow);margin-bottom:12px}
.aviso-prensa p{font-size:.88rem;line-height:1.75;color:var(--ink-dim);max-width:86ch}

@media (max-width:820px){
  .news-cta{grid-template-columns:1fr;padding:26px 22px}
  .news-form{flex-direction:column}
  .news-form .btn-cta{width:100%}
}

/* ============================================================
   PÁGINA DE PAGOS — checkout con Stripe y PayPal
   Dos pasos numerados en lugar de un muro de botones: primero QUÉ se
   paga, después CÓMO. Un cargo sin concepto es la primera causa de
   contracargos, así que el concepto se elige antes de ver la pasarela.
   ============================================================ */
.pago-paso{display:flex;gap:22px;align-items:flex-start;margin-bottom:26px}
.pago-num{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;
  color:var(--neon-teal);border:1px solid rgba(79,227,208,.4);border-radius:50%;
  width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;margin-top:6px}
.pago-paso h2{font-family:var(--font-title);font-weight:900;letter-spacing:-.03em;
  font-size:clamp(1.5rem,3vw,2.3rem);margin-bottom:8px}

.pago-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px}
.pago-op{
  text-align:left;background:rgba(10,17,32,.62);border:1px solid var(--line);
  padding:22px 20px;cursor:pointer;color:inherit;font:inherit;border-radius:2px;
  display:flex;flex-direction:column;gap:7px;transition:border-color .25s,background .25s,transform .25s;
}
.pago-op:hover{border-color:rgba(79,227,208,.45);transform:translateY(-3px)}
.pago-op.on{border-color:var(--neon-teal);background:rgba(79,227,208,.09);
  box-shadow:0 0 0 1px var(--neon-teal) inset}
.pago-op .op-k{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;color:var(--neon-yellow)}
.pago-op strong{font-family:var(--font-title);font-weight:800;font-size:1.02rem;line-height:1.25}
.pago-op em{font-style:normal;font-size:.8rem;color:var(--ink-mute);line-height:1.5}

.pago-ref{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;max-width:820px}
.pago-ref input{width:100%;background:rgba(5,11,20,.6);border:1px solid var(--line);color:#fff;
  padding:14px 16px;font-family:var(--font-body);font-size:.95rem;border-radius:2px}
.pago-ref input:focus{outline:none;border-color:var(--neon-teal);box-shadow:0 0 0 3px rgba(79,227,208,.14)}

.pasarelas{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.pasarela{border:1px solid var(--line);background:rgba(10,17,32,.6)}
.pas-cab{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:16px 22px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.pas-marca{font-family:var(--font-title);font-weight:900;letter-spacing:-.02em;font-size:1.15rem}
.pas-nota{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-mute)}
.pas-cuerpo{padding:24px 22px 26px;min-height:190px}
.pas-fine{margin-top:16px;font-size:.76rem;line-height:1.6;color:var(--ink-mute)}
.pas-msg{margin-top:14px;font-size:.86rem;line-height:1.55;min-height:1.2em}
.pas-msg.ok{color:var(--neon-green)}
.pas-msg.err{color:#FF9A8B}

.pago-seguro{margin-top:56px;padding:26px 30px;border-left:3px solid var(--neon-teal);
  background:rgba(79,227,208,.05)}
.pago-seguro h4{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--neon-teal);margin-bottom:14px}
.pago-seguro ul{list-style:none;display:grid;gap:9px}
.pago-seguro li{font-size:.87rem;line-height:1.65;color:var(--ink-dim);padding-left:20px;position:relative}
.pago-seguro li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--neon-teal);opacity:.8}

@media (max-width:900px){
  .pasarelas,.pago-ref{grid-template-columns:1fr}
  .pago-paso{gap:14px}
}

/* ══════════════════════════════════════════════════════════════════════
   RONDA 14 · CORRECCIONES DEL DOCUMENTO 4
   ══════════════════════════════════════════════════════════════════════ */

/* ── 3 · LETRAS CORTADAS EN TÍTULOS Y ENCABEZADOS ──────────────────────
   Reporte: "evita que las letras de los Header y el contenido de Títulos y
   subtítulos salga cortado en sus bordes, porque se ve raro".

   Es un efecto secundario de background-clip:text. Ese recorte NO usa la
   forma de la letra contra el infinito: recorta contra la CAJA DE PINTURA
   del elemento. Y los titulares del sitio llevan line-height por debajo de
   1 (.88 en el hero) para que las dos líneas queden apretadas, así que la
   caja de línea es MÁS BAJA que las letras: la cola de la "p" de "Experts"
   y la de la "g" de "Agregado" caen fuera y desaparecen. Lo mismo arriba
   con los acentos y con la tilde de la "í".

   El arreglo correcto no es subir el line-height —eso deshace el apretado
   que da carácter al titular— sino AGRANDAR LA CAJA con padding, que sí
   entra en el área de pintura, y devolver el espacio con un margen
   negativo del mismo tamaño para que nada se mueva de sitio.
   -------------------------------------------------------------------- */
.hero h1,
.hero h1 .grad,
.hero h1 .split,
body.home .section h2,
body[data-motivo] .page-hero h1,
body[data-motivo] .info-card h3,
.flujo-section .section-head h2,
#cobertura .section-head h2,
.pz-hero h1{
  padding-top:.10em;
  padding-bottom:.22em;   /* cabe la cola más larga de Archivo (la "g") */
  margin-top:-.10em;
  margin-bottom:-.22em;
  overflow:visible;
}
/* Las letras del titular cinético se pintan UNA A UNA, y cada una recorta
   contra su propia caja: sin aire propio, el recorte vuelve a comerse la
   cola carácter por carácter aunque el padre tenga sitio de sobra. */
.hero h1 .ch{
  display:inline-block;
  padding-top:.10em;padding-bottom:.22em;
  margin-top:-.10em;margin-bottom:-.22em;
}
/* El margen negativo del H2 no debe comerse el espacio con el párrafo que
   sigue, así que se lo devolvemos ahí. */
body.home .section h2{ margin-bottom:calc(.22em + 14px); }
/* En horizontal el recorte también muerde: la primera letra de una cursiva
   óptica se sale por la izquierda. */
.hero h1 .grad,body.home .section h2,.pz-hero h1{ padding-left:.05em; margin-left:-.05em; }

/* ── 5 y 6 · DOS TÍTULOS CENTRADOS ─────────────────────────────────────
   "Servicios de Valor Agregado" y "Certificaciones y Marcos de
   Cumplimiento" van centrados, con su etiqueta y su bajada.
   Se centra el bloque entero, no sólo el H2: un título centrado sobre un
   párrafo alineado a la izquierda se lee como un error de maquetación. */
#servicios > .container > .section-head,
#cumplimiento > .container > .section-head{
  text-align:center;
  margin-left:auto;margin-right:auto;
  max-width:900px;
}
#servicios > .container > .section-head .desc,
#cumplimiento > .container > .section-head .desc{ margin-left:auto;margin-right:auto; }
/* La etiqueta lleva una raya delante que, centrada, descuadra el conjunto:
   se centra el par raya + texto como una sola pieza. */
#servicios > .container > .section-head .section-tag,
#cumplimiento > .container > .section-head .section-tag{
  display:inline-flex;align-items:center;justify-content:center;
}

/* ── 7 · "SOBRE IT CAPITAL": COLUMNAS INVERTIDAS ───────────────────────
   Los datos duros pasan a la IZQUIERDA y el texto a la derecha. Se hace con
   el orden visual (`order`), no moviendo el HTML: en el código el texto
   sigue yendo primero, que es lo que leen un buscador y un lector de
   pantalla, y lo que conviene cuando la fila se apila en móvil.
   Y la columna de datos sube de tamaño, que era la otra mitad de la
   petición: es el bloque que se mira primero. */
.about-flex > .trust-box{ order:-1; }
.about-flex > .trust-box .row span:first-child{
  font-size:1.02rem;letter-spacing:.005em;
}
.about-flex > .trust-box .row span:last-child{
  font-size:1.42rem;font-weight:800;letter-spacing:-.015em;line-height:1.15;
}
.about-flex > .trust-box .row{ padding-top:20px;padding-bottom:20px;gap:18px; }
@media (max-width:900px){
  /* En móvil el orden vuelve al natural: primero quién es la empresa y
     después las cifras. */
  .about-flex > .trust-box{ order:0; }
  .about-flex > .trust-box .row span:last-child{ font-size:1.2rem; }
}

/* ── Mapa diferido de la página de contacto ──────────────────────────── */
.mapa-lite{cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,rgba(79,227,208,.10),rgba(10,17,32,.85));
  border:1px solid var(--line);transition:border-color .25s,background .25s}
.mapa-lite:hover{border-color:rgba(79,227,208,.5);background:linear-gradient(140deg,rgba(79,227,208,.16),rgba(10,17,32,.85))}
.mapa-lite:focus-visible{outline:3px solid var(--neon-teal);outline-offset:3px}
.mapa-lite.on{cursor:default;background:none;padding:0}
.mapa-lite-card{text-align:center;padding:30px 26px;display:grid;gap:6px;justify-items:center}
.mapa-lite-pin{width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--neon-teal);margin-bottom:10px;position:relative}
.mapa-lite-pin::after{content:'';position:absolute;inset:7px;border-radius:50%;background:#0A1120}
.mapa-lite-card b{font-family:var(--font-title);font-size:1.06rem;color:#fff;font-weight:800}
.mapa-lite-card span{font-size:.86rem;color:var(--ink-dim);line-height:1.5}
.mapa-lite-card em{font-family:var(--font-mono);font-style:normal;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--neon-teal);margin-top:12px}

/* ══════════════════════════════════════════════════════════════════════
   RONDA 15 — pantalla de carga, opciones del pie y titular
   ══════════════════════════════════════════════════════════════════════ */

/* ── PANTALLA DE CARGA ─────────────────────────────────────────────────
   El símbolo gira EN CONTRA DE LAS MANECILLAS, como se pidió y como gira
   el fractal del hero: es el mismo gesto de marca, no un spinner cualquiera.

   La regla de oro está al final del bloque: a los 6 segundos la capa se
   retira SOLA, por CSS, sin depender de ningún guión. Una pantalla de carga
   que se queda pegada es peor que la espera que venía a resolver.        */
#itcap-carga{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:#050B14;
  animation:cgSeguro 0s linear 6s forwards;
}
#itcap-carga.fuera{opacity:0;visibility:hidden;transition:opacity .55s ease,visibility 0s .55s}
.cg-caja{text-align:center;display:grid;justify-items:center;gap:0}
/* El cursor de agua del sitio se dibuja encima de todo; durante la carga
   estorba, así que se esconde. */
html.cargando .cursor-fx{opacity:0!important}
.cg-simbolo{
  width:96px;height:96px;display:block;object-fit:contain;
  /* −360°: sentido antihorario */
  animation:cgGiro 5.5s linear infinite;
}
#itcap-carga.quieto .cg-simbolo{animation:none}
@keyframes cgGiro{ from{transform:rotate(0)} to{transform:rotate(-360deg)} }
.cg-nombre{
  font-family:var(--font-title,'Archivo',system-ui,sans-serif);
  font-weight:900;letter-spacing:-.02em;font-size:1.5rem;color:#fff;
  margin:26px 0 0;line-height:1.1;
}
.cg-c{font-size:.55em;vertical-align:super;font-weight:700;margin-left:.06em}
.cg-lema{
  font-family:var(--font-mono,'IBM Plex Mono',ui-monospace,monospace);
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:#4FE3D0;margin:10px 0 0;
}
.cg-tm{font-size:.7em;vertical-align:super;letter-spacing:0}
.cg-barra{
  display:block;width:132px;height:2px;margin-top:26px;
  background:rgba(255,255,255,.12);overflow:hidden;border-radius:2px;
}
.cg-barra i{
  display:block;height:100%;width:40%;border-radius:2px;
  background:linear-gradient(90deg,#4FE3D0,#8FE64A);
  animation:cgBarra 1.25s ease-in-out infinite;
}
@keyframes cgBarra{
  0%{transform:translateX(-110%)} 100%{transform:translateX(360%)}
}
#itcap-carga.quieto .cg-barra i{animation:none;width:100%}
/* Mientras la capa está puesta, no se puede hacer scroll por debajo. */
html.cargando,html.cargando body{overflow:hidden}
/* Red de seguridad SIN JavaScript: pasados 6 s la capa desaparece sí o sí. */
@keyframes cgSeguro{ to{opacity:0;visibility:hidden;pointer-events:none} }
@media (prefers-reduced-motion:reduce){
  .cg-simbolo,.cg-barra i{animation:none}
}

/* ── OPCIONES DEL PIE ──────────────────────────────────────────────────
   Movimiento y traductor, escritos con palabras y dentro del pie: ya no
   flotan encima del contenido. Tono del pie, sin gritar.                */
.pie-opciones{
  display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;
  width:100%;padding-top:16px;margin-top:16px;
  border-top:1px solid rgba(255,255,255,.08);
}
.pie-op{
  display:inline-flex;align-items:center;gap:9px;
  background:none;border:0;padding:6px 0;cursor:pointer;
  font-family:var(--font-mono,'IBM Plex Mono',ui-monospace,monospace);
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mute,#8590a3);transition:color .22s;
  min-height:34px;
}
.pie-op:hover,.pie-op:focus-visible{color:#fff}
.pie-op:focus-visible{outline:2px solid var(--neon-teal,#4FE3D0);outline-offset:4px}
.pie-op-punto{
  width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:var(--ink-mute,#8590a3);transition:.25s;
}
.pie-op-mov.on .pie-op-punto{
  background:var(--neon-teal,#4FE3D0);box-shadow:0 0 10px var(--neon-teal,#4FE3D0);
}
/* RONDA 22 · el traductor del pie se retiró por completo (el porqué, con
   detalle, en la cabecera de assets/js/opciones-pie.js). Con él se van su
   globo terráqueo dibujado en CSS, el selector que inyectaba Google y los
   parches que hacían falta para domarlo.

   Se conservan DOS reglas suyas a propósito: neutralizan el desplazamiento
   que la barra de Google deja en el navegador de quien todavía tenga la
   cookie puesta, durante el instante que va desde que pinta la página
   hasta que el guion la borra y recarga. Cuestan dos líneas y evitan un
   salto visible. */
body{top:0!important}
.skiptranslate iframe{display:none!important}

/* ── MOVIMIENTO APAGADO ────────────────────────────────────────────────
   Cuando el visitante apaga el movimiento hay que apagarlo DE VERDAD: no
   sólo los lienzos, también las transiciones y las revelaciones al hacer
   scroll. Antes se apagaban a medias y por eso parecía que el interruptor
   no hacía nada.                                                        */
html.sin-movimiento *,
html.sin-movimiento *::before,
html.sin-movimiento *::after{
  animation-duration:.001s!important;
  animation-iteration-count:1!important;
  transition-duration:.001s!important;
  scroll-behavior:auto!important;
}
html.sin-movimiento .clients-set{animation:none!important}
html.sin-movimiento .section{opacity:1!important;transform:none!important}

/* ── TITULAR DEL HERO ──────────────────────────────────────────────────
   Seguía perdiendo milímetros en los bordes. La ronda anterior le dio aire
   arriba y abajo, pero el recorte también muerde a los LADOS cuando la
   última letra es redonda o lleva un remate que se sale de su caja —la "s"
   de Experts y la "T" de The—, y el ™ en superíndice sobresale por arriba
   del ancho de línea. Se amplía el aire horizontal y se deja que el bloque
   desborde su caja sin recortarse.                                       */
.hero h1,
.hero h1 .grad,
.hero h1 .split,
.hero h1 .ch{
  padding-left:.08em;padding-right:.14em;
  margin-left:-.08em;margin-right:-.14em;
  overflow:visible!important;
}
.hero h1{overflow:visible!important}
.hero,.hero .container,.hero-inner{overflow:visible}
.hero h1 .tm{
  /* el ™ vuela por encima de la línea; sin sitio propio, se recortaba */
  padding-top:.35em;margin-top:-.35em;display:inline-block;
}

/* ══════════════════════════════════════════════════════════════════════
   RONDA 16 — título de clientes centrado y traductor que se puede apagar
   ══════════════════════════════════════════════════════════════════════ */

/* ── TÍTULO DE "EMPRESAS QUE YA CONFÍAN EN NOSOTROS" ───────────────────
   Reportado: el título no está centrado.

   La causa no estaba en la sección de clientes, que pide `margin:auto`
   correctamente, sino en una regla anterior:

       body.home .section h2 { padding-left:.05em; margin-left:-.05em; }

   Ese par se puso para que los títulos con degradado no perdieran el
   remate de la primera letra. Funciona en un título alineado a la
   izquierda, pero en uno CENTRADO el `margin-left` deja de ser `auto` y
   el centrado se rompe: el bloque se pega al margen izquierdo.

   Aquí se le devuelve el centrado a los títulos que lo piden, y el aire
   óptico se reparte a los DOS lados para que siga sin recortarse.       */
body.home .clients-section h2,
.clients-section h2{
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:.05em;
  padding-right:.05em;
  text-align:center;
}
.clients-section .section-tag{text-align:center}

/* RONDA 22 · aquí vivían las reglas del botón de apagado del traductor.
   Se fueron con él: el widget que intentaban domar ya no se carga. */

/* ══════════════════════════════════════════════════════════════════════
   FORMULARIOS DE LAS SECCIONES LEGALES — ronda 16
   ══════════════════════════════════════════════════════════════════════ */
.lg-form{
  margin:56px 0 0;padding:34px 30px 30px;
  background:rgba(12,21,36,.72);border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
}
.lg-form h2{
  font-family:var(--font-title,'Archivo',system-ui,sans-serif);
  font-weight:900;letter-spacing:-.03em;font-size:clamp(1.25rem,2.4vw,1.7rem);
  line-height:1.15;margin:12px 0 14px;color:#fff;
}
.lg-intro{margin:0 0 24px;max-width:68ch;line-height:1.65;color:var(--ink-mute,#8FA0B8)}
.lg-form form[hidden]{display:none}
.lg-form form{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px 22px;
  /* `start` y no el `stretch` por defecto: con etiquetas de una y de dos
     líneas en la misma fila, el estirado descuadraba las cajas. */
  align-items:start;
}
/* Se reserva el alto de dos renglones de etiqueta para que las cajas de una
   misma fila arranquen a la misma altura aunque la pregunta sea larga. */
.lg-et{min-height:2.1em;display:flex;align-items:flex-end}
.lg-campo{display:flex;flex-direction:column;gap:7px}
.lg-campo.lg-ancho{grid-column:1/-1}
.lg-et{
  font-family:var(--font-mono,ui-monospace,monospace);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--neon-teal,#4FE3D0);
}
.lg-et b{color:var(--yellow,#FFE14D);font-weight:400}
.lg-campo input,.lg-campo select,.lg-campo textarea{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);
  border-radius:6px;padding:12px 13px;color:#fff;font:inherit;font-size:.95rem;
  min-height:46px;width:100%;
}
.lg-campo textarea{min-height:110px;resize:vertical;line-height:1.55}
.lg-campo select option{background:#0A1120;color:#fff}
.lg-campo input:focus,.lg-campo select:focus,.lg-campo textarea:focus{
  outline:2px solid var(--neon-teal,#4FE3D0);outline-offset:2px;
  border-color:transparent;background:rgba(255,255,255,.07);
}
/* :user-invalid marca sólo DESPUÉS de que la persona interactuó: :invalid
   pintaría de rojo un formulario recién abierto, que es hostil. */
.lg-campo input:user-invalid,.lg-campo select:user-invalid,.lg-campo textarea:user-invalid{
  border-color:#E8734A;
}
.lg-ayuda{font-size:.78rem;color:#6C7A8E;line-height:1.45}
.lg-casilla{
  grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;
  line-height:1.6;font-size:.92rem;color:#C3CDDC;cursor:pointer;
  padding:4px 0;
}
.lg-casilla input{
  margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--neon-teal,#4FE3D0);
}
.lg-acciones{
  grid-column:1/-1;display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  margin-top:8px;
}
.lg-acciones .btn-cta{border:0;cursor:pointer;font:inherit}
.lg-acciones .btn-cta[disabled]{opacity:.55;cursor:progress}
.lg-estado{font-size:.9rem;line-height:1.55;color:var(--ink-mute,#8FA0B8);max-width:52ch}
.lg-estado.ok{color:var(--neon-green,#8FE64A)}
.lg-estado.mal{color:#E8734A}
.lg-fine{
  margin:22px 0 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.07);
  font-size:.82rem;line-height:1.6;color:#6C7A8E;max-width:74ch;
}

/* ── Veredicto de elegibilidad ─────────────────────────────────────────
   El "no" se trata con el mismo cuidado visual que el "sí": no es un
   error del usuario, es una respuesta útil. Por eso no se pinta en rojo. */
.lg-veredicto{margin-top:26px;padding:26px 26px 22px;border-radius:10px;border:1px solid}
.lg-veredicto h3{
  font-family:var(--font-title,'Archivo',system-ui,sans-serif);font-weight:900;
  font-size:1.15rem;line-height:1.25;margin:0 0 14px;color:#fff;letter-spacing:-.02em;
}
.lg-veredicto p{margin:0 0 14px;line-height:1.65;color:#C3CDDC;max-width:70ch}
.lg-veredicto ul{margin:0 0 16px;padding-left:20px;line-height:1.7;color:#C3CDDC}
.lg-veredicto li{margin-bottom:7px}
.lg-veredicto.si{background:rgba(143,230,74,.07);border-color:rgba(143,230,74,.32)}
.lg-veredicto.no{background:rgba(255,225,77,.06);border-color:rgba(255,225,77,.26)}
.lg-vcta{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px!important}
.lg-vcta .btn-cta,.lg-vcta .btn-outline{margin:0}

@media (max-width:620px){
  .lg-form{padding:26px 20px 22px;margin-top:42px}
  .lg-form form{grid-template-columns:1fr}
}

/* ── BLANCOS DE TOQUE EN MÓVIL ─────────────────────────────────────────
   Auditoría a 390 px: veintiocho enlaces del pie y de los filtros medían
   menos de 34 px de alto. En un dedo eso se traduce en tocar el enlace de
   al lado — el error más común y más silencioso del móvil, porque el
   visitante no se queja: se va.

   La recomendación de accesibilidad es 44 px. Aquí se llega con `padding`
   vertical y no con `height`, para que el texto siga alineado como está y
   no se descuadre ninguna columna del pie.

   Sólo aplica en pantallas táctiles estrechas: en el escritorio, donde se
   apunta con el ratón, los enlaces del pie se quedan como están y la
   columna no crece de más.                                              */
@media (max-width:900px){
  .footer-col li > a,
  .footer-links a,
  .site-footer li > a{
    display:block;
    padding-top:9px;padding-bottom:9px;
    /* el negativo devuelve el espacio robado para que la lista no se
       estire al doble de alto */
    margin-top:-4px;margin-bottom:-4px;
    min-height:26px;
  }
  .cov-filters .cov-f{
    min-height:40px;padding-top:10px;padding-bottom:10px;
  }
  .consent-check a{
    display:inline-block;padding:6px 0;
  }

  /* Los que quedaban: el teléfono, el correo y el WhatsApp de la sección
     de contacto —que son los enlaces MÁS importantes de todo el sitio en un
     teléfono, porque ahí se toca para llamar— y la línea legal del pie. */
  .contact-info .item a,
  .contact-info a{
    display:inline-block;padding:10px 0;min-height:24px;
  }
  .footer-bottom a{
    display:inline-block;padding:9px 2px;min-height:24px;
  }
  .contact-form .consent-check a{padding:8px 0}
}





/* ══════════════════════════════════════════════════════════════════════
   NARRATIVA POR PRODUCTO Y POR SECTOR — ronda 16
   Los dos bloques que añade aplica_narrativa.py.
   ══════════════════════════════════════════════════════════════════════ */

/* ── EL OBSTÁCULO ──────────────────────────────────────────────────────
   Sustituye al subtítulo descriptivo del hero. Es una frase, no un párrafo,
   y se le da peso tipográfico porque es lo primero que tiene que hacer que
   el lector se reconozca. Si esto no engancha, lo de abajo da igual.     */
/* El selector lleva el ancestro a propósito: la página declara
   `.page-hero p{font-size:1.05rem;font-weight:300;color:var(--ink-dim)}`,
   que con una clase y un elemento gana a una clase sola. Sin `.page-hero`
   delante, el obstáculo se pintaba con el tamaño y el peso del subtítulo
   descriptivo al que sustituye, que es justo lo que no debe parecer. */
.page-hero .hero-obstaculo{
  font-family:var(--font-title,'Archivo',system-ui,sans-serif);
  font-weight:700;letter-spacing:-.015em;
  font-size:clamp(1.05rem,2.1vw,1.5rem);
  line-height:1.42;color:#D6DEEA;
  max-width:30ch;margin-top:18px;
}

/* ── LO QUE EVALUAMOS ──────────────────────────────────────────────────
   El bloque que ningún competidor tiene. Se presenta con la misma calma
   que el resto de la página: si pareciera un anuncio, dejaría de leerse
   como información y pasaría a leerse como argumento de venta.           */
.ev-bloque{
  margin:64px 0 0;padding:38px 34px 34px;
  background:rgba(12,21,36,.62);
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
}
.ev-titulo{
  font-family:var(--font-title,'Archivo',system-ui,sans-serif);
  font-weight:900;letter-spacing:-.03em;
  font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.1;
  margin:0 0 14px;color:#fff;
}
.ev-bajada{
  margin:0 0 32px;max-width:64ch;line-height:1.68;
  color:var(--ink-mute,#8FA0B8);font-size:.98rem;
}
.ev-item{
  padding:0 0 0 22px;margin-bottom:26px;
  border-left:2px solid var(--ev-color,#4FE3D0);
}
.ev-item:last-child{margin-bottom:0}
.ev-item h3{
  font-family:var(--font-title,'Archivo',system-ui,sans-serif);
  font-weight:800;font-size:1.06rem;line-height:1.3;
  margin:0 0 9px;color:var(--ev-color,#4FE3D0);letter-spacing:-.01em;
}
.ev-item p{
  margin:0;line-height:1.72;color:#C3CDDC;font-size:.97rem;max-width:70ch;
}
@media (min-width:900px){
  /* En pantalla ancha, los tres puntos en columna siguen leyéndose mejor
     que en rejilla: son argumentos encadenados, no tres opciones. Lo que
     sí cambia es el ancho, para que la línea no se estire de más. */
  .ev-item p{max-width:78ch}
}

/* ── EL CIERRE ─────────────────────────────────────────────────────────
   La frase propia, grande, y dos salidas. La primera es la autoevaluación
   —«¿Califica?»— y no el formulario de contacto: es la que responde la
   pregunta que el lector trae de verdad.                                 */
.fin-bloque{
  margin:56px 0 0;padding:40px 0 0;
  border-top:1px solid rgba(255,255,255,.10);
}
.fin-frase{
  font-family:var(--font-title,'Archivo',system-ui,sans-serif);
  font-weight:900;letter-spacing:-.032em;
  font-size:clamp(1.45rem,3.4vw,2.35rem);
  line-height:1.16;color:#fff;
  margin:14px 0 0;max-width:24ch;
}
.fin-cruce{
  margin:22px 0 0;font-size:.95rem;line-height:1.6;color:var(--ink-mute,#8FA0B8);
}
.fin-cruce a{
  color:var(--neon-teal,#4FE3D0);text-decoration:none;font-weight:600;
  border-bottom:1px solid transparent;
}
.fin-cruce a:hover{border-bottom-color:currentColor}
.fin-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-top:30px}
.fin-ctas .btn-cta,.fin-ctas .btn-outline{margin:0}

/* El bloque hereda el color rector de la página cuando lo hay: cada
   producto tiene el suyo medido del sitio en producción, y la frase de
   cierre es el sitio natural para que se note. */
body[data-motivo] .fin-frase::after{
  content:'';display:block;width:64px;height:3px;margin-top:22px;
  background:var(--pagina,var(--neon-teal,#4FE3D0));border-radius:2px;
}

@media (max-width:620px){
  .ev-bloque{padding:28px 20px 24px;margin-top:44px}
  .ev-item{padding-left:16px}
  .fin-bloque{margin-top:40px;padding-top:32px}
  .fin-ctas{flex-direction:column;align-items:stretch}
  .fin-ctas .btn-cta,.fin-ctas .btn-outline{text-align:center}
}

/* ── AJUSTE DE ANCHO (ronda 16, tras ver las capturas) ─────────────────
   En 1400 px el bloque medía 1232 y el texto ocupaba los primeros 700:
   media tarjeta vacía. La medida de línea corta es correcta —no se toca—,
   lo que estaba mal era el contenedor. Se pasa a dos columnas: a la
   izquierda el enunciado, a la derecha los argumentos. Es la misma
   lectura encadenada, sólo que el ancho se usa.                          */
@media (min-width:1040px){
  .ev-bloque{
    display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    /* `auto 1fr`: la primera fila mide lo que mide el titular y toda la
       holgura que sobra por la altura de la columna derecha se va a la
       segunda. Sin esto, la rejilla la reparte entre las dos y abre un
       hueco entre el titular y su bajada. */
    grid-template-rows:auto 1fr;
    column-gap:56px;row-gap:0;align-items:start;
    padding:44px 40px 40px;
  }
  .ev-titulo{grid-column:1;grid-row:1;margin-bottom:16px}
  .ev-bajada{grid-column:1;grid-row:2;margin:0;max-width:38ch}
  /* Los tres puntos van dentro de su propio contenedor: si se colocan
     sueltos en la rejilla, sus alturas quedan atadas a las filas de la
     columna izquierda y se abre un hueco entre el primero y el segundo. */
  .ev-lista{grid-column:2;grid-row:1 / span 2}
  .ev-item p{max-width:none}

  /* El cierre, igual: la frase manda a la izquierda y la salida queda a la
     derecha, a la altura de la vista, en vez de colgando debajo. */
  .fin-bloque{
    display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    column-gap:56px;align-items:end;
  }
  .fin-bloque .section-tag{grid-column:1;grid-row:1}
  .fin-frase{grid-column:1;grid-row:2;max-width:20ch}
  .fin-cruce{grid-column:2;grid-row:2;align-self:end;margin:0 0 6px}
  .fin-ctas{grid-column:2;grid-row:3;margin-top:18px;align-self:start}
  /* Sin enlace cruzado —las páginas de producto— la llamada sube a la
     fila del enlace para no dejar un escalón vacío. */
  .fin-bloque:not(:has(.fin-cruce)) .fin-ctas{grid-row:2;align-self:end;margin:0}
}
/* ══════════════════════════════════════════════════════════════════════
   EL HOME NARRATIVO — ronda 16
   La escena, el contexto de las cifras y las tres puertas.

   Regla 6 del proyecto: nada crítico depende de la red ni del JavaScript.
   Todo lo de aquí se ve completo con las animaciones apagadas; el
   movimiento sólo AÑADE. Y todo se anima con transform y opacity, que son
   las dos propiedades que el compositor resuelve sin recalcular diseño.
   ══════════════════════════════════════════════════════════════════════ */

/* ── CONTEXTO DE LAS CIFRAS DEL HERO ──────────────────────────────────
   Un número sin escala es mobiliario: el visitante lo reconoce y no lo
   lee. Esta línea dice de qué es el número.                             */
.cred-item .cred-ctx{
  display:block;margin-top:6px;
  font-family:var(--font-mono,'IBM Plex Mono',ui-monospace,monospace);
  /* .72rem y no .68: a 10,9 px sobre el resplandor amarillo de la cifra el
     contraste se quedaba en 4,3:1, por debajo del 4,5:1 que pide WCAG AA
     para texto pequeño. Con #8FA0B8 sube a ~7:1 y sigue siendo secundario. */
  font-size:.72rem;letter-spacing:.05em;line-height:1.55;
  color:var(--ink-mute,#8FA0B8);text-transform:none;
  max-width:30ch;
}

/* ══ LA ESCENA ════════════════════════════════════════════════════════
   El hueco #3 del benchmark: de once competidores revisados, ninguno
   cuenta una operación de principio a fin. Todos venden el instante de
   la aprobación. Aquí el instante de la aprobación ni siquiera aparece.
   ══════════════════════════════════════════════════════════════════════ */
.escena-section{position:relative}
.esc-cuerpo{
  display:grid;grid-template-columns:1fr;gap:44px;align-items:start;
}
.esc-linea{
  list-style:none;margin:0;padding:0;
  position:relative;
}
/* El riel. Va detrás de los pasos y no ocupa espacio propio: es un
   pseudoelemento, para que quitarlo no descoloque nada. */
.esc-linea::before{
  content:'';position:absolute;left:7px;top:10px;bottom:10px;width:1px;
  background:linear-gradient(180deg,
    rgba(79,227,208,.55) 0%, rgba(143,230,74,.45) 45%,
    rgba(255,225,77,.5) 78%, rgba(255,225,77,0) 100%);
}
.esc-beat{
  position:relative;padding:0 0 34px 44px;
}
.esc-beat:last-child{padding-bottom:0}
/* El punto de cada hito, sobre el riel. */
.esc-beat::before{
  content:'';position:absolute;left:0;top:9px;
  width:15px;height:15px;border-radius:50%;
  background:var(--void,#050B14);
  border:2px solid var(--neon-teal,#4FE3D0);
  box-shadow:0 0 0 4px rgba(5,11,20,.9), 0 0 18px rgba(79,227,208,.35);
}
.esc-beat:nth-child(2)::before{border-color:var(--neon-green,#8FE64A);box-shadow:0 0 0 4px rgba(5,11,20,.9),0 0 18px rgba(143,230,74,.32)}
.esc-beat:nth-child(3)::before{border-color:var(--neon-yellow,#FFE14D);box-shadow:0 0 0 4px rgba(5,11,20,.9),0 0 18px rgba(255,225,77,.32)}
/* El último hito es el problema, no un paso más: se pinta lleno. */
.esc-beat:last-child::before{
  background:var(--neon-yellow,#FFE14D);border-color:var(--neon-yellow,#FFE14D);
  box-shadow:0 0 0 4px rgba(5,11,20,.9), 0 0 26px rgba(255,225,77,.55);
}
.esc-dia{
  display:block;
  font-family:var(--font-mono,'IBM Plex Mono',ui-monospace,monospace);
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--neon-teal,#4FE3D0);margin-bottom:8px;
}
.esc-beat:nth-child(2) .esc-dia{color:var(--neon-green,#8FE64A)}
.esc-beat:nth-child(3) .esc-dia{color:var(--neon-yellow,#FFE14D)}
.esc-beat:last-child .esc-dia{color:var(--neon-yellow,#FFE14D)}
.esc-titulo{
  font-family:var(--font-title,'Archivo',system-ui,sans-serif);
  font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.12rem,2vw,1.35rem);line-height:1.25;
  margin:0 0 8px;color:#fff;
}
.esc-texto{
  margin:0;line-height:1.7;color:#C3CDDC;font-size:.99rem;max-width:56ch;
}

/* El remate. Es la frase que convierte la escena en argumento. */
.esc-remate{
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:30px;
}
.esc-frase{
  font-family:var(--font-title,'Archivo',system-ui,sans-serif);
  font-weight:900;letter-spacing:-.03em;
  font-size:clamp(1.35rem,3vw,2.1rem);line-height:1.18;
  color:#fff;margin:0;max-width:26ch;
}
.esc-frase::after{
  content:'';display:block;width:58px;height:3px;margin-top:20px;
  background:var(--neon-yellow,#FFE14D);border-radius:2px;
}
.esc-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.esc-ctas .btn-cta,.esc-ctas .btn-outline{margin:0}

@media (min-width:1040px){
  /* Dos columnas: la línea de tiempo a la izquierda, el remate a la
     derecha y pegado abajo, para que la frase caiga a la altura del
     último hito —el día 90— y no flotando en medio de la nada. */
  .esc-cuerpo{grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:64px}
  .esc-remate{border-top:0;border-left:1px solid rgba(255,255,255,.10);
              padding:0 0 0 40px;align-self:end;margin-bottom:6px}
}

/* ── El movimiento, y sólo el movimiento ──────────────────────────────
   Los hitos entran escalonados cuando la sección se revela. La clase
   `.in` ya la pone el IntersectionObserver que el home usa para todas
   sus secciones: no hace falta ni una línea de JavaScript nueva. Si el
   observador nunca corre, el `setTimeout` de seguridad de la página la
   añade a los 3 s — y aun así, el estado de partida es visible. */
@media (prefers-reduced-motion:no-preference){
  .escena-section .esc-beat{
    opacity:.001;transform:translate3d(0,16px,0);
    transition:opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
  }
  .escena-section.in .esc-beat{opacity:1;transform:none}
  .escena-section.in .esc-beat:nth-child(1){transition-delay:.05s}
  .escena-section.in .esc-beat:nth-child(2){transition-delay:.18s}
  .escena-section.in .esc-beat:nth-child(3){transition-delay:.31s}
  .escena-section.in .esc-beat:nth-child(4){transition-delay:.44s}
  /* El pulso del último hito: es el único punto de la escena que llama
     la atención, y llama a propósito. */
  .escena-section.in .esc-beat:last-child::before{
    animation:esc-late 2.6s ease-in-out .9s infinite;
  }
}
@keyframes esc-late{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.28)}
}

/* ══ LAS TRES PUERTAS ═════════════════════════════════════════════════
   El sitio le hablaba a un solo perfil. No hacen falta tres sitios:
   hacen falta tres entradas al mismo sitio.
   ══════════════════════════════════════════════════════════════════════ */
.pu-grid{
  display:grid;grid-template-columns:1fr;gap:18px;
}
@media (min-width:860px){
  .pu-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
}
.pu-item{
  display:flex;flex-direction:column;
  padding:30px 28px 26px;
  background:rgba(12,21,36,.62);
  border:1px solid rgba(255,255,255,.09);
  border-top:2px solid var(--pu-color,#4FE3D0);
  border-radius:14px;
  text-decoration:none;color:inherit;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
             border-color .35s ease, background .35s ease;
  will-change:transform;
}
.pu-item:hover,.pu-item:focus-visible{
  transform:translate3d(0,-4px,0);
  background:rgba(16,28,46,.78);
  border-color:rgba(255,255,255,.16);
  border-top-color:var(--pu-color,#4FE3D0);
}
.pu-item:focus-visible{outline:2px solid var(--pu-color,#4FE3D0);outline-offset:3px}
.pu-titulo{
  font-family:var(--font-title,'Archivo',system-ui,sans-serif);
  font-weight:800;letter-spacing:-.02em;
  font-size:1.1rem;line-height:1.28;margin:0 0 12px;
  color:var(--pu-color,#4FE3D0);
}
.pu-texto{
  margin:0 0 22px;line-height:1.68;color:#C3CDDC;font-size:.95rem;
  flex:1 1 auto;
}
.pu-accion{
  font-family:var(--font-mono,'IBM Plex Mono',ui-monospace,monospace);
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;
  display:inline-flex;align-items:center;gap:8px;
}
.pu-item:hover .pu-accion{color:var(--pu-color,#4FE3D0)}

@media (prefers-reduced-motion:reduce){
  .pu-item{transition:none}
  .pu-item:hover{transform:none}
}

/* ── Móvil ────────────────────────────────────────────────────────────
   Blancos de toque: cada puerta es un enlace de tarjeta completa, así
   que ya supera con creces los 44 px. Lo que sí baja es el aire. */
@media (max-width:620px){
  .esc-beat{padding-left:36px;padding-bottom:28px}
  .esc-remate{padding-top:26px}
  .esc-ctas{flex-direction:column;align-items:stretch}
  .esc-ctas .btn-cta,.esc-ctas .btn-outline{text-align:center}
  .pu-item{padding:24px 20px 22px}
}

/* ── El puente de la página de criterios ──────────────────────────────
   Va justo debajo de la autoevaluación, que en esta ronda subió al
   principio. Quien ya respondió las cinco preguntas tiene que saber que
   abajo sigue estando el detalle completo. */
.crit-puente{
  margin:26px 0 0;color:var(--ink-mute,#8FA0B8);
  font-size:.95rem;line-height:1.65;max-width:62ch;
}
/* ══════════════════════════════════════════════════════════════════════
   DOCUMENTO 5 — correcciones de composición y contenido
   ══════════════════════════════════════════════════════════════════════ */

/* ── PUNTO 3 · EL RITMO DE ALINEACIÓN ─────────────────────────────────
   Izquierda lo que se lee, centro lo que se mira, derecha lo que cierra.
   El razonamiento completo está en doc5_composicion.py.

   `text-align` sólo mueve el texto; los bloques que tienen ancho propio
   —la bajada, el subrayado del antetítulo— hay que moverlos aparte, o el
   título se centra y su bajada se queda pegada a la izquierda.          */
.section-head.centrado{text-align:center;margin-left:auto;margin-right:auto}
.section-head.centrado .desc,
.section-head.centrado p.desc{margin-left:auto;margin-right:auto}

.section-head.derecha{text-align:right;margin-left:auto}
.section-head.derecha .desc,
.section-head.derecha p.desc{margin-left:auto;margin-right:0}

/* El hero de subpágina alineado a la derecha: el bloque entero se
   desplaza, no sólo el texto, porque `.page-hero` es un flex en columna
   y sus hijos se estirarían al ancho completo. */
.page-hero.derecha{align-items:flex-end;text-align:right}
.page-hero.derecha p,
.page-hero.derecha .hero-obstaculo{margin-left:auto;margin-right:0}
.page-hero.derecha .eyebrow{align-self:flex-end}

/* El antetítulo de las secciones del home lleva una rayita delante,
   dibujada con ::before. Alineado a la derecha hay que pasarla detrás, o
   queda una raya suelta en medio de la nada. */
.section-head.derecha .section-tag::before{display:none}
.section-head.derecha .section-tag::after{
  content:'';display:inline-block;width:34px;height:1px;margin-left:12px;
  vertical-align:middle;background:currentColor;opacity:.7;
}

@media (max-width:760px){
  /* En móvil todo vuelve a la izquierda. Un título a la derecha en una
     columna de 390 px no se lee como intención: se lee como error. */
  .section-head.derecha,
  .section-head.centrado{text-align:left}
  .page-hero.derecha{align-items:flex-start;text-align:left}
  .page-hero.derecha p,
  .page-hero.derecha .hero-obstaculo{margin-right:auto}
  .section-head.derecha .section-tag::after{display:none}
}

/* ── PUNTO 10 · LA LÍNEA SOBRE LAS CIFRAS ─────────────────────────────
   Era un `border-top` de 1 px al 12 % de blanco que cruzaba el hero de
   lado a lado y se notaba justo al hacer scroll, porque el fondo animado
   cambia de luminosidad debajo y la línea deja de fundirse.

   No se quita del todo —separa el discurso de las cifras y esa
   separación sirve— pero deja de ser una regla recta: pasa a ser un
   degradado que nace y muere en transparente, así que no tiene bordes
   que delaten dónde empieza y dónde acaba.                              */
.credibility-strip{
  border-top:0 !important;
  position:relative;
}
.credibility-strip::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.13) 18%,
    rgba(255,255,255,.13) 62%,
    rgba(255,255,255,0) 100%);
  pointer-events:none;
}

/* ── PUNTO 9 · LOS DOS GRUPOS DE CLIENTE ──────────────────────────────
   Uno viene a vender un activo; el otro, a financiar su cadena. Dos
   tarjetas y no cuatro, porque son exactamente dos.                     */
.gc-grid{display:grid;grid-template-columns:1fr;gap:22px}
@media (min-width:900px){.gc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}}
.gc-item{
  padding:32px 30px 30px;
  background:rgba(12,21,36,.62);
  border:1px solid rgba(255,255,255,.09);
  border-top:2px solid var(--gc-color,#4FE3D0);
  border-radius:14px;
}
.gc-titulo{
  font-family:var(--font-title,'Archivo',system-ui,sans-serif);
  font-weight:800;letter-spacing:-.02em;font-size:1.14rem;line-height:1.3;
  margin:0 0 14px;color:var(--gc-color,#4FE3D0);
}
.gc-texto{margin:0;line-height:1.72;color:#C3CDDC;font-size:.96rem}

/* ── PUNTO 3 · LOS ICONOS DE CONTACTO ─────────────────────────────────
   Eran emoji, que dibuja el sistema operativo: azules y redondeados en
   Windows, planos en Android, con degradado en iPhone. Ahora son SVG a
   trazo que heredan currentColor y se ven igual en todas partes.        */
.channel-card svg.ic{stroke-width:1.6}
@media (prefers-reduced-motion:reduce){
  .channel-card:hover .ic{transform:none}
}
/* ══════════════════════════════════════════════════════════════════════
   SECTORES EN ÓRBITA — documento 5, punto 6
   «Se ven demasiadas categorías en la cuadrícula… ¿como un sol?»

   El sol es la NAVEGACIÓN, no el contenido: nueve puntos alrededor y un
   núcleo que cuenta el que se está mirando. Nueve nombres cortos en vez
   de nueve párrafos, que era el problema.

   ORDEN DE LECTURA DE ESTA HOJA: primero la versión en columna, que es
   la que vale en móvil y la que queda si algo falla; la órbita entra
   después, dentro de una consulta de medios. Al revés, un teléfono
   tendría que deshacer posicionamientos absolutos.
   ══════════════════════════════════════════════════════════════════════ */

.orbita-section .orb-escenario{position:relative;margin-top:34px}

/* ── La base: una lista. Sin trucos. ─────────────────────────────────── */
.orb-anillo{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.orb-punto a{
  display:block;padding:14px 18px;
  border:1px solid rgba(255,255,255,.10);
  border-left:2px solid var(--orb-color,#4FE3D0);
  border-radius:10px;
  background:rgba(12,21,36,.55);
  color:#fff;text-decoration:none;
  font-family:var(--font-title,'Archivo',system-ui,sans-serif);
  font-weight:700;font-size:.98rem;letter-spacing:-.01em;
  transition:background .3s,border-color .3s,transform .3s;
}
.orb-punto a:hover,.orb-punto a:focus-visible{
  background:rgba(16,28,46,.8);border-color:var(--orb-color,#4FE3D0);
}
.orb-punto a:focus-visible{outline:2px solid var(--orb-color,#4FE3D0);outline-offset:3px}

/* El núcleo, en móvil, es simplemente la ficha del primero. */
.orb-nucleo{
  margin-top:22px;padding:26px 24px;
  background:rgba(12,21,36,.62);
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
}
.orb-num{
  font-family:var(--font-mono,'IBM Plex Mono',ui-monospace,monospace);
  font-size:.7rem;letter-spacing:.2em;color:var(--neon-teal,#4FE3D0);
  display:block;margin-bottom:10px;
}
.orb-titulo{
  font-family:var(--font-title,'Archivo',system-ui,sans-serif);
  font-weight:900;letter-spacing:-.03em;
  font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.12;
  margin:0 0 12px;color:#fff;
}
.orb-texto{margin:0 0 14px;line-height:1.68;color:#C3CDDC;font-size:.97rem}
.orb-prods{
  font-family:var(--font-mono,'IBM Plex Mono',ui-monospace,monospace);
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mute,#8FA0B8);display:block;
}

/* ── La órbita. Sólo con sitio de sobra. ─────────────────────────────── */
@media (min-width:1040px){
  .orb-escenario{
    height:700px;display:grid;place-items:center;
    /* El radio es una variable para poder afinarlo en un solo sitio. */
    --orb-r:292px;
  }
  /* Órbita escalonada. Con nueve puntos a 40 grados, los dos de abajo
     quedan a 174 px de distancia horizontal y sus etiquetas —«Green
     Technologies», «AI + Digital Banking»— casi se tocan. Alternar el
     radio los separa sin mover el ángulo, y además se lee como lo que
     es: un sistema orbital, no una rueda de bicicleta. */
  .orb-punto:nth-child(even){--orb-r-p:calc(var(--orb-r) * 1.16)}
  .orb-punto:nth-child(odd){--orb-r-p:var(--orb-r)}

  .orb-anillo{
    position:absolute;inset:0;display:block;
    /* El anillo no captura el puntero; sólo lo hacen los puntos. Sin
       esto, un rectángulo invisible de 640 px taparía el núcleo. */
    pointer-events:none;
  }
  .orb-punto{
    position:absolute;left:50%;top:50%;margin:0;pointer-events:auto;
    /* Dos rotaciones y una traslación: se gira el radio hasta el ángulo
       del punto, se avanza, y se DESGIRA la etiqueta para que el texto
       quede horizontal. Es lo que hace legible un menú radial. */
    transform:
      translate(-50%,-50%)
      rotate(var(--orb-ang))
      translate(var(--orb-r-p, var(--orb-r)))
      rotate(calc(-1 * var(--orb-ang)));
  }
  .orb-punto a{
    white-space:nowrap;padding:9px 15px;border-radius:99px;
    border:1px solid rgba(255,255,255,.12);border-left-width:1px;
    font-size:.84rem;
    box-shadow:0 6px 22px rgba(0,0,0,.4);
    position:relative;
  }
  /* El punto de color, sobre el anillo, delante de la etiqueta. */
  .orb-punto a::before{
    content:'';position:absolute;left:-7px;top:50%;
    width:9px;height:9px;border-radius:50%;
    transform:translateY(-50%);
    background:var(--orb-color,#4FE3D0);
    box-shadow:0 0 12px var(--orb-color,#4FE3D0);
  }
  .orb-punto a:hover,.orb-punto a:focus-visible,
  .orb-punto.activo a{
    background:var(--orb-color,#4FE3D0);
    color:#04121b;border-color:var(--orb-color,#4FE3D0);
  }

  /* El anillo dibujado: un círculo tenue que hace visible la órbita. */
  .orb-escenario::before{
    content:'';position:absolute;left:50%;top:50%;
    width:calc(var(--orb-r) * 2);height:calc(var(--orb-r) * 2);
    transform:translate(-50%,-50%);
    border:1px dashed rgba(255,255,255,.10);border-radius:50%;
    pointer-events:none;
  }

  .orb-nucleo{
    position:relative;margin:0;
    width:min(372px,40%);min-height:240px;
    padding:32px 30px;text-align:center;
    background:rgba(8,15,26,.88);
    border-color:rgba(255,255,255,.14);
    backdrop-filter:blur(6px);
  }
  .orb-texto{max-width:34ch;margin-left:auto;margin-right:auto}
}

@media (min-width:1360px){
  .orb-escenario{height:760px;--orb-r:330px}
}

/* ── El movimiento, que sólo añade ───────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .orb-nucleo{transition:border-color .45s ease}
  .orb-nucleo .orb-titulo,
  .orb-nucleo .orb-texto,
  .orb-nucleo .orb-prods,
  .orb-nucleo .orb-num{transition:opacity .22s ease}
  .orb-nucleo.cambiando .orb-titulo,
  .orb-nucleo.cambiando .orb-texto,
  .orb-nucleo.cambiando .orb-prods,
  .orb-nucleo.cambiando .orb-num{opacity:0}
  @media (min-width:1040px){
    /* El anillo gira muy despacio. Los puntos NO giran con él —cada uno
       se desgira— así que las etiquetas siguen horizontales. */
    .orb-escenario::before{animation:orb-giro 90s linear infinite}
  }
}
@keyframes orb-giro{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ── EL AVISO DE LOS FORMULARIOS (documento 5, punto 11) ──────────────
   Aparece dentro del propio formulario, no como una alerta del navegador,
   para que el visitante no pierda de vista lo que escribió. */
.form-aviso{
  display:block;margin-top:18px;padding:16px 18px;border-radius:10px;
  font-size:.95rem;line-height:1.6;
}
.form-aviso strong{display:block;color:#fff;font-weight:700;margin-bottom:4px}
.form-aviso span{display:block;color:#C3CDDC}
.form-aviso.ok{background:rgba(143,230,74,.09);border-left:3px solid var(--neon-green,#8FE64A)}
.form-aviso.mal{background:rgba(255,225,77,.09);border-left:3px solid var(--neon-yellow,#FFE14D)}
.g-recaptcha-caja{margin:16px 0 4px}

/* ------------------------------------------------------------
   reCAPTCHA — el hueco de la casilla dentro de los formularios

   El widget de Google mide 304×78 px y NO se puede reescalar sin
   romper su accesibilidad, así que no se intenta: se le da aire y
   se deja que respire. En pantallas estrechas se centra, porque a
   menos de 340 px de ancho útil desbordaría por la derecha.

   `min-height` reserva el sitio desde antes de que cargue, para que
   la casilla no empuje el botón hacia abajo de golpe cuando aparece
   — ese salto es de los que hacen fallar un clic.
   ------------------------------------------------------------ */
.itcap-captcha{
  margin: 18px 0 4px;
  min-height: 78px;
  display: flex;
  justify-content: flex-start;
}
.itcap-captcha:empty{ min-height: 0; margin: 0; }
.itcap-captcha > div{ max-width: 100%; }

@media (max-width: 420px){
  .itcap-captcha{ justify-content: center; }
  .itcap-captcha > div{ transform-origin: center top; }
}

/* Dentro de los formularios legales el ritmo vertical es más apretado. */
.lg-form .itcap-captcha{ margin: 14px 0 2px; }

/* En los formularios legales la maqueta es una rejilla, así que la casilla
   caía en una celda y compartía fila con el botón. Ocupa la fila entera:
   el captcha es un paso, no un campo más al lado de otro. */
.lg-form .itcap-captcha{ grid-column: 1 / -1; margin: 16px 0 6px; }

/* El pie de los formularios legales (`.lg-acciones`) es un flex en fila:
   botón y estado uno al lado del otro. Al meter la casilla ahí quedaba
   como un tercer elemento en la misma línea, y el captcha no es un
   control más: es un paso previo. La fila pasa a envolver, y la casilla
   ocupa el ancho completo para forzar el salto. */
.lg-acciones{ flex-wrap: wrap; align-items: center; }
.lg-acciones .itcap-captcha{ flex: 1 0 100%; margin: 16px 0 10px; }


/* ════════════════════════════════════════════════════════════════════
   PUNTO 9 · RESPONSIVO — correcciones de la ronda del 16 de septiembre
   ════════════════════════════════════════════════════════════════════ */

/* --- 9.1 · EL MENÚ MÓVIL QUE MEDÍA 140 px -------------------------------
   `backdrop-filter` en el header lo convierte en bloque contenedor de sus
   hijos `fixed`, así que el `inset:0` del menú se resolvía contra el
   header (140 px) y no contra la ventana. Medido: 304x140.
   Se corrige quitando el filtro en móvil Y dando altura de ventana. */
@media (max-width:860px){

  header.site-header,
  header.site-header.solid{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    /* Fondo opaco de verdad: la otra mitad de la queja. Sobre un hero
       animado, un translúcido no separa el menú del contenido. */
    background:#040a12;
    border-bottom:1px solid rgba(255,255,255,.10);
  }

  nav.main-nav{
    height:100vh;                 /* respaldo para navegadores viejos */
    height:100dvh;                /* descuenta la barra del navegador */
    max-height:100dvh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    background:#040a12;           /* opaco, sin transparencia */
    z-index:120;                  /* por encima del contenido del header */
    box-shadow:-24px 0 60px rgba(0,0,0,.6);
    padding-bottom:calc(40px + env(safe-area-inset-bottom));
  }

  /* Capa que atenúa el contenido de atrás mientras el menú está abierto.
     Sin esto el sitio sigue compitiendo visualmente con el menú. */
  body.menu-abierto::before{
    content:'';position:fixed;inset:0;z-index:110;
    background:rgba(2,6,12,.62);
    -webkit-tap-highlight-color:transparent;
  }
  body.menu-abierto{ overflow:hidden; }   /* no se desplaza el fondo */

  .mobile-toggle{ position:relative; z-index:130; }
}

/* --- 9.2 · LOS PINES DEL MAPA, ANCLADOS A LA IMAGEN ---------------------
   `.pines` cubría el CONTENEDOR. En móvil el rótulo se apila debajo de la
   imagen dentro de ese mismo contenedor, así que los pines —colocados en
   porcentajes— se repartían sobre el texto. Ahora se anclan al alto real
   de la imagen. */
.mapa-vivo{ --mapa-prop: 1600 / 1201; }   /* medido en los propios JPEG */
.mapa-vivo .pines{
  inset:0 0 auto 0;
  height:auto;
  aspect-ratio:var(--mapa-prop);
}

/* --- 9.3 · PUNTO 3 · LA LISTA DE PAÍSES NO VA SOBRE EL CONTINENTE -------
   El bloque de América estaba en left:5%, encima del Pacífico y de
   Sudamérica. Se corre sobre el Atlántico, que está vacío, y la lista pasa
   a dos columnas para ocupar la mitad de alto. */
/* --- RONDA 23 · AQUÍ SE CORTABAN LOS NOMBRES DE CIUDAD -----------------
   Reportado: «las imágenes de Cobertura Global están desajustadas». Lo
   reproduje a 1920, 1440 y 1180 px y es siempre el mismo mapa, el
   offshore: la segunda columna salía cortada — «Buda…», «Istanb…»,
   «Kara…», «Shangha…».

   La culpa es de la regla que había aquí. Yo la escribí en la ronda 9
   creyendo que `.izq` era el mapa de América; `.izq` es el offshore, que
   es justo el que NO cabe en dos columnas. Y `1fr` no obliga a encoger:
   su mínimo es el contenido, así que las dos columnas medían 195 + 132 =
   327 px dentro de un rótulo de 302 px. Lo que sobraba lo recortaba en
   silencio el `overflow:hidden` de la tarjeta.

   Medido en el navegador, no deducido del CSS.

   Arreglo: una sola columna, con la ciudad DEBAJO del país en vez de al
   lado. Ocho destinos en una columna caben de sobra, se leen mejor que en
   dos columnas estrechas, y no hay forma de que se corten.              */
/* RONDA 24 · Y ADEMÁS ESTABA EN EL LADO EQUIVOCADO DEL MAPA.
   Instrucción: «el cuadro de texto debería estar cargado a la izquierda y
   abajo para no tapar el continente europeo sino más bien el continente
   americano sombreado».

   Tiene razón y es lo que pide el propio mapa: en la imagen offshore,
   Europa, Asia y África van iluminadas —son los destinos— y América queda
   en sombra, porque en ese mapa no pinta nada. El rótulo estaba encima de
   justo lo que ilustra. Abajo a la izquierda se apoya sobre la zona
   oscura, y de paso el texto blanco gana contraste sin depender del velo.

   `top:auto` es necesario: si no, `top` y `bottom` quedan puestos a la vez
   y el panel se estira de arriba abajo de la tarjeta.                   */
@media (min-width:861px){
  .mapa-rotulo.izq{
    left:3.2%; right:auto; width:46%;
    top:auto; bottom:5%;
    text-align:left;
  }
  /* Dos columnas, pero con `minmax(0,1fr)`: ahora SÍ pueden encoger.
     Ocho destinos en una sola columna, con la ciudad en su propia línea,
     salían 16 renglones y se desbordaban por abajo de la tarjeta entre
     861 y 1440 px — lo medí. Dos columnas de cuatro entradas caben en
     alto, y el minmax garantiza que no se corten a lo ancho. */
  .mapa-rotulo.izq .mapa-lista{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.3em .9em;
  }
  .mapa-rotulo.izq .mapa-lista li em{
    display:block; margin-left:0; line-height:1.2; font-size:.82em;
    /* «Mönchengladbach» son quince letras: con la columna estrecha se
       partía a media palabra. Sobre la zona en sombra hay sitio de sobra,
       así que el panel se ensancha y la ciudad deja de romperse. */
    overflow-wrap:normal; word-break:normal;
  }
}
/* Y la red de seguridad, para toda la sección: una columna de rejilla
   nunca puede ser más ancha que su hueco. `1fr` por sí solo NO lo
   garantiza —su mínimo es `auto`, o sea el contenido— y ésa es
   exactamente la trampa en la que caí arriba. `minmax(0,1fr)` sí. */
.mapa-lista{ grid-template-columns:minmax(0,1fr); }
.mapa-lista.pares{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.mapa-lista li, .mapa-lista li span, .mapa-lista li b, .mapa-lista li em{
  min-width:0; overflow-wrap:break-word;
}

/* --- RONDA 23 · QUE EL RÓTULO SE LEA CAIGA DONDE CAIGA -----------------
   Al dejar de cortarse quedó a la vista el segundo problema: el rótulo
   offshore se apoya sobre Europa y Asia, que en este mapa son la zona
   CLARA, y los nombres de ciudad en turquesa sobre verde claro no se
   leen. El de América no tenía el problema porque cae sobre África, que
   está en sombra — pura suerte de dónde cayó cada uno.

   Una sombra de texto no basta contra un fondo claro. Lo que hace falta
   es un velo: un panel oscuro, translúcido y desenfocado, que garantiza
   el contraste sea cual sea el continente que haya debajo y que además
   ata visualmente el bloque de texto como una pieza, no como letras
   sueltas flotando.                                                     */
@media (min-width:861px){
  .mapa-rotulo{
    padding:16px 18px 18px;
    background:linear-gradient(180deg,rgba(6,11,22,.80),rgba(6,11,22,.66));
    backdrop-filter:blur(6px) saturate(115%);
    -webkit-backdrop-filter:blur(6px) saturate(115%);
    border:1px solid rgba(255,255,255,.09);
    border-radius:8px;
    text-shadow:none;
  }
  /* El velo ocupa sitio, así que el rótulo se estrecha un punto para no
     comerse el continente que ilustra. */
  .mapa-rotulo{ width:38%; top:22%; bottom:auto; }
  /* El offshore va abajo a la izquierda (ver la ronda 24, más arriba):
     sobre la zona en sombra del mapa, no sobre Europa. Sólo `bottom`,
     nunca los dos, o el panel se estira de arriba abajo. */
  .mapa-rotulo.izq{ width:46%; top:auto; bottom:5%; }
  /* La marca de agua «IT Capital» del mapa vive en esa misma esquina; se
     pasa a la contraria en esta tarjeta para que no se pisen. */
  .mapa-vivo[data-mapa="offshore"] .mapa-marca{ left:auto; right:4%; }
}
/* Las ciudades en cursiva estaban a .92 de opacidad sobre un fondo que
   ahora es fijo y oscuro: se les puede devolver el color entero. */
.mapa-lista li em{ opacity:1; color:var(--neon-teal); }

/* --- 9.4 · EN MÓVIL EL RÓTULO SE LEE DEBAJO, NO ENCIMA ------------------
   Superpuesto a 390 px no cabe ni se lee. Se apila, con su propio fondo. */
@media (max-width:860px){
  .mapa-rotulo,
  .mapa-rotulo.izq{
    position:static;width:auto;left:auto;right:auto;top:auto;
    padding:16px 18px 18px;
    background:rgba(4,10,18,.72);
    border-top:1px solid rgba(255,255,255,.08);
    text-shadow:none;
  }
  .mapa-rotulo h3{ font-size:1.02rem; }
  .mapa-lista{ grid-template-columns:1fr 1fr; gap:.1em .9em; }
  .mapa-lista li{ font-size:.82rem; }
}

/* --- 9.5 · TIPOGRAFÍA Y AIRE EN PANTALLAS ESTRECHAS ---------------------
   El titular del hero se comía el ancho y las secciones iban muy juntas. */
@media (max-width:480px){
  .hero h1{ line-height:.94; letter-spacing:-.025em; }
  .hero p.lead{ font-size:1rem; line-height:1.55; }
  .section{ padding-top:56px; padding-bottom:56px; }
  .credibility-strip{ gap:22px; }
}

/* --- 9.6 · EL PIE, SEPARADO DEL CONTENIDO ------------------------------- */
@media (max-width:860px){
  footer{ background:#010d16; border-top:1px solid rgba(255,255,255,.08); }
  .footer-grid{ grid-template-columns:1fr; gap:26px; }
}


/* --- PUNTO 1 · la tarjeta central del orbe es pulsable ------------------
   Una zona que se puede pulsar y no lo parece, no la pulsa nadie. El
   aviso aparece siempre; el realce, al pasar por encima o al llegar con
   el tabulador. El foco se marca de forma visible: es el único indicio
   que tiene quien navega con teclado. */
.orb-nucleo{ transition:border-color .35s ease, transform .3s ease, box-shadow .3s ease; }
.orb-nucleo:hover,
.orb-nucleo:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.orb-nucleo:focus-visible{ outline:2px solid var(--neon-teal); outline-offset:4px; }
.orb-ir{
  display:block;margin-top:14px;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--neon-teal);opacity:.72;transition:opacity .3s ease;
}
.orb-nucleo:hover .orb-ir,
.orb-nucleo:focus-visible .orb-ir{ opacity:1; }


/* --- PUNTO 2 (ronda 18) · «el traductor que falla lo dice» -------------
   Aquella solución era honesta pero seguía siendo un botón que no hacía lo
   que ofrecía. En la ronda 22 la dirección pidió quitarlo, y se quitó: el
   widget de Google Translate para sitios web ya no se sirve a dominios
   nuevos, así que no había nada que reparar de nuestro lado. Estas reglas
   se van con él. */

/* ════════════════════════════════════════════════════════════════════
   PUNTO 6 · SERVICIOS DE VERIFICACIÓN — diagrama, highlights e iconos
   ════════════════════════════════════════════════════════════════════ */

.vf-h2{
  font-family:var(--font-title);font-weight:900;letter-spacing:-.02em;
  font-size:clamp(1.3rem,2.3vw,1.9rem);margin:46px 0 22px;color:#fff;
}

/* --- El proceso: tres pasos CON conector -------------------------------
   Sin la línea entre pasos, tres columnas se leen como tres cosas
   sueltas. El conector es lo que convierte una rejilla en una secuencia.
   Se dibuja con un pseudo-elemento para no añadir marcado vacío. */
.vf-flujo{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  position:relative;
}
.vf-flujo .vf-tarjeta{ position:relative; }
.vf-flujo .vf-tarjeta:not(:last-child)::after{
  content:'';position:absolute;top:44px;right:-18px;width:18px;height:2px;
  background:linear-gradient(90deg,var(--neon-teal),rgba(79,227,208,.15));
}
.vf-flujo .vf-tarjeta:not(:last-child)::before{
  content:'';position:absolute;top:40px;right:-24px;
  border:5px solid transparent;border-left-color:var(--neon-teal);
  opacity:.85;
}

.vf-rejilla{ display:grid;grid-template-columns:repeat(3,1fr);gap:18px; }

/* --- La tarjeta ------------------------------------------------------- */
.vf-tarjeta{
  background:rgba(255,255,255,.028);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius);
  padding:24px 22px 22px;
}
.vf-paso{
  position:absolute;top:18px;right:20px;
  font-family:var(--font-mono,monospace);font-size:.72rem;letter-spacing:.14em;
  color:rgba(255,255,255,.28);
}
.vf-ico-caja{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:12px;
  background:rgba(79,227,208,.10);
  border:1px solid rgba(79,227,208,.22);
  color:var(--neon-teal);
  margin-bottom:16px;
}
.vf-ico{ width:24px;height:24px;display:block; }

/* El dato primero. Quien pasa rápido se lleva la cifra; quien quiere el
   detalle lo tiene justo debajo, en menor jerarquía. */
.vf-dato{
  font-family:var(--font-mono,monospace);
  font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--neon-teal);margin:0 0 6px;
}
.vf-tarjeta h3{
  font-family:var(--font-title);font-weight:800;letter-spacing:-.015em;
  font-size:1.12rem;color:#fff;margin:0 0 10px;
}
.vf-detalle{
  font-size:.88rem;line-height:1.58;color:var(--ink-mute);margin:0;
}

/* --- Responsivo ------------------------------------------------------- */
@media (max-width:980px){
  .vf-flujo,.vf-rejilla{ grid-template-columns:repeat(2,1fr); }
  /* Con dos columnas el conector horizontal apunta a la nada en el salto
     de fila: se retira y la secuencia la marcan los números 01·02·03. */
  .vf-flujo .vf-tarjeta::after,
  .vf-flujo .vf-tarjeta::before{ display:none; }
}
@media (max-width:640px){
  .vf-flujo,.vf-rejilla{ grid-template-columns:1fr; gap:14px; }
  .vf-tarjeta{ padding:20px 18px 18px; }
  .vf-h2{ margin:34px 0 16px; }
  /* En una columna el conector sí tiene sentido otra vez, pero vertical. */
  .vf-flujo .vf-tarjeta:not(:last-child)::after{
    display:block;top:auto;bottom:-14px;right:auto;left:40px;
    width:2px;height:14px;
    background:linear-gradient(180deg,var(--neon-teal),rgba(79,227,208,.15));
  }
}

/* --- RONDA 23 · la línea de vista previa de webapp.html ----------------
   Sustituye al recuadro amarillo de advertencia. Sigue diciendo lo que
   tiene que decir —que nada se transmite ni se guarda— pero como letra
   pequeña de producto, no como cartel de obra. */
.vista-previa-nota{
  max-width:1180px;margin:0 auto 34px;
  font-family:var(--font-mono,ui-monospace,monospace);
  font-size:.7rem;letter-spacing:.04em;line-height:1.6;
  color:var(--ink-mute,#8590a3);
  padding-left:14px;border-left:2px solid rgba(255,255,255,.14);
}

/* --- RONDA 23 · CASILLAS DE LOS FORMULARIOS EN MÓVIL -------------------
   Medido en contacto, inversionistas y brokers a 390, 430 y 768 px: las
   casillas de consentimiento medían menos de 32 px de alto. Son justo las
   que NO se pueden fallar —marcan la aceptación del aviso de privacidad y
   de la autorización— y están junto a un enlace que abre otra página: un
   toque impreciso se lleva al visitante fuera del formulario.

   24 px de casilla y 44 px de área activa en la etiqueta entera, que es
   además como debe funcionar: se marca tocando el texto, no sólo el
   cuadrito.                                                             */
@media (max-width:900px){
  .form-check input[type="checkbox"],
  .check-legal input[type="checkbox"],
  form input[type="checkbox"],
  form input[type="radio"]{
    width:24px; height:24px; min-width:24px; min-height:24px;
    flex:0 0 auto; accent-color:var(--neon-teal,#4FE3D0);
  }
  form label:has(input[type="checkbox"]),
  form label:has(input[type="radio"]){
    display:flex; align-items:flex-start; gap:12px;
    min-height:44px; padding-block:8px;
  }
  /* El enlace legal dentro de la etiqueta: área propia para el dedo, sin
     romper el renglón del texto que lo rodea. */
  form label a{ padding-block:6px; display:inline-block; }
}