/* ============================================================
   SinergIA 180 — Base, tipografía y navegación
   Dirección: limpio, aire generoso, jerarquía por tamaño y peso.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font-family:var(--f-body); font-size:17px; line-height:1.6;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.no-scroll{overflow:hidden}
[hidden]{display:none !important}
img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
ol,ul{margin:0; padding:0; list-style:none}
::selection{background:var(--azul-ia); color:#fff}
:focus-visible{outline:2px solid var(--azul-claro); outline-offset:3px; border-radius:4px}

/* ---------- Escala tipográfica ---------- */
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.022em; line-height:1.14}
h1{font-size:clamp(34px, 5.4vw, 62px); letter-spacing:-.032em}
h2{font-size:clamp(27px, 3.6vw, 44px); letter-spacing:-.028em}
h3{font-size:clamp(18px, 1.7vw, 21px); letter-spacing:-.014em}
h4{font-size:16px; letter-spacing:-.008em}
p{margin:0}

.kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--azul-ia);
}
.kicker::before{content:''; width:16px; height:1px; background:var(--azul-ia)}
.label{font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-3)}
.lead{font-size:clamp(17px,1.7vw,20px); line-height:1.55; color:var(--texto-2); max-width:60ch}
.mono{font-family:var(--f-mono); font-variant-ligatures:none}

/* Wordmark */
.wordmark{font-size:15px; font-weight:600; letter-spacing:.16em; white-space:nowrap}
.wordmark .ia,.wordmark .grado{color:var(--azul-ia)}
.wordmark.sm{font-size:12.5px}

/* Dato pendiente del levantamiento */
.ph{
  color:var(--azul-700); font-weight:600; background:var(--azul-200);
  border-bottom:1.5px dashed var(--azul-ia); border-radius:3px; padding:0 4px;
  overflow-wrap:anywhere;
}
body[data-modo="final"] .ph{color:inherit; border:0; background:none; padding:0; font-weight:inherit}

/* Etiqueta de credibilidad: sello sólido, no una píldora más */
.badge-ok{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px 8px 12px; border-radius:8px;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#FFFFFF; background:var(--azul-900);
  box-shadow:0 8px 18px -10px rgba(10,31,82,.65);
}
.badge-ok svg{color:var(--azul-300); flex:none}

/* ---------- Progreso ---------- */
.progress{position:fixed; inset:0 0 auto 0; height:2px; z-index:60}
.progress span{
  display:block; height:100%; width:100%; background:var(--azul-ia);
  transform:scaleX(0); transform-origin:0 50%; will-change:transform;
}

/* ---------- Barra superior ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:55;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px calc(var(--pad) + var(--rail));
  border-bottom:1px solid transparent; transition:background var(--t), border-color var(--t);
}
.topbar.solid{background:rgba(255,255,255,.94); border-bottom-color:var(--linea)}
/* El desenfoque solo donde no cuesta un tirón de scroll */
@media (min-width:1200px){
  @supports (backdrop-filter: blur(1px)){
    .topbar.solid{background:rgba(255,255,255,.78); backdrop-filter:saturate(180%) blur(20px)}
  }
}
.topbar-cliente{font-size:12.5px; color:var(--texto-3); letter-spacing:.04em}
.menu-btn{display:flex; flex-direction:column; gap:4px; padding:8px; margin:-8px}
.menu-btn span{display:block; width:19px; height:1.5px; background:var(--texto); transition:transform var(--t), opacity var(--t)}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ============================================================
   LÍNEA DE PROCESO — oculta a petición del cliente.
   Se mantiene en el DOM porque de ella sale la sección activa que
   alimentan el teclado y el índice; simplemente no se pinta.
   Para recuperarla: quitar el display:none y devolver --rail a 150px.
   ============================================================ */
.rail{display:none}
.rail-oculto-original{
  position:fixed; left:clamp(16px,2.4vw,34px); top:50%; transform:translateY(-50%);
  z-index:54; padding:10px 0;
}
.rail-line{position:absolute; left:5px; top:14px; bottom:14px; width:1px; background:var(--linea-2)}
.rail-line i{
  display:block; width:100%; height:100%; background:var(--azul-ia);
  transform:scaleY(0); transform-origin:50% 0; transition:transform .5s var(--salida);
}
.rail li + li{margin-top:20px}
.rail button{
  display:flex; align-items:center; gap:14px; position:relative; padding:2px 0;
}
.rail .nodo{
  width:11px; height:11px; border-radius:50%; flex:none;
  border:1px solid var(--linea-2); background:var(--fondo);
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.rail button.pasado .nodo{background:var(--azul-ia); border-color:var(--azul-ia)}
.rail button.on .nodo{
  background:var(--azul-ia); border-color:var(--azul-ia); transform:scale(1.25);
  box-shadow:0 0 0 4px var(--azul-soft);
}
.rail .txt{
  display:flex; flex-direction:column; gap:1px; text-align:left;
  opacity:0; transform:translateX(-6px); transition:opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events:none;
}
.rail .txt .n{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.1em; color:var(--azul-ia)}
.rail .txt .t{font-size:12px; color:var(--texto-2); white-space:nowrap; letter-spacing:-.005em}
.rail:hover .txt, .rail button.on .txt{opacity:1; transform:none}
.rail:hover .txt{transition-delay:.04s}
.rail button.on .txt .t{color:var(--texto)}

/* ---------- Índice móvil ---------- */
.sheet{
  position:fixed; inset:0; z-index:56; background:rgba(255,255,255,.96);
  backdrop-filter:blur(16px); display:flex; align-items:center; justify-content:center;
  padding:var(--pad); animation:fade .28s var(--ease);
}
.sheet-list{width:min(500px,100%)}
.sheet-list li + li{border-top:1px solid var(--linea)}
.sheet-list a{display:flex; align-items:baseline; gap:16px; padding:14px 2px; color:var(--texto-2)}
.sheet-list a:hover{color:var(--texto)}
.sheet-list i{font-style:normal; font-family:var(--f-mono); font-size:11px; color:var(--azul-ia); min-width:22px}

/* ============================================================
   SECCIONES
   ============================================================ */
.section{position:relative; padding:clamp(84px,11vh,140px) calc(var(--pad) + var(--rail))}
.section + .section{border-top:1px solid var(--linea)}
.section.papel{background:var(--papel)}

/* ---------- Secciones sobre azul ---------- */
.section.azul{
  background:linear-gradient(168deg, var(--azul-900) 0%, #071640 100%);
  color:#FFFFFF;
}
.section.azul .sec-head h2,
.section.azul h2, .section.azul h3, .section.azul h4{color:#FFFFFF}
.section.azul .lead, .section.azul p{color:rgba(255,255,255,.74)}
.section.azul .kicker{color:var(--azul-300)}
.section.azul .kicker::before{background:var(--azul-400)}
.section.azul .label{color:rgba(255,255,255,.5)}
.section.azul .card{background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.14); box-shadow:none}
.section.azul .card:hover{border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.08)}
.section.azul .card .n{color:var(--azul-300)}
.section.azul .nota{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.24); color:rgba(255,255,255,.76)}
.section.azul .nota b{color:#FFFFFF}
.section.azul .quote{border-left-color:var(--azul-400); color:#FFFFFF}
.section.azul .quote b{color:var(--azul-300)}
.section.azul .mock-pie .rol{color:#FFFFFF}
.section.azul .mock-pie .desc{color:rgba(255,255,255,.58)}
.section.azul .ph{background:rgba(255,255,255,.16); color:#FFFFFF; border-bottom-color:var(--azul-300)}
.section.azul .badge-ok{background:rgba(255,255,255,.14); box-shadow:none}
.section.azul + .section{border-top-color:transparent}
.wrap{max-width:var(--max); margin:0 auto; width:100%}
.wrap > *, .cards > *, .duo > *, .trio > * { min-width:0 }

.sec-head{max-width:760px; margin-bottom:clamp(40px,6vh,68px)}
.sec-head .kicker{margin-bottom:20px}
.sec-head h2{margin-bottom:18px}
.sec-head .lead{font-size:clamp(16px,1.6vw,19px)}
.sec-head .badge-ok{margin-top:22px}

.bloque + .bloque{margin-top:clamp(34px,5.5vh,64px)}
.duo{display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.trio{display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* ---------- Reveal ---------- */
.rv{
  opacity:0; transform:translate3d(0,22px,0);
  transition:opacity .62s var(--salida) var(--d,0ms), transform .62s var(--salida) var(--d,0ms);
}
.rv.in{opacity:1; transform:translate3d(0,0,0)}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1 !important; transform:none !important; transition:none !important}
  html{scroll-behavior:auto}
  .marquee-track{animation:none !important}
  .sheet, .modal-bg, .modal-box, .pane.on{animation:none !important}
}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--linea); background:var(--papel); padding:34px calc(var(--pad) + var(--rail))}
.footer-in{max-width:var(--max); margin:0 auto; display:flex; flex-wrap:wrap; gap:14px 30px; align-items:center; justify-content:space-between}
.footer-claim{color:var(--texto-2); font-size:13.5px}
.footer-conf{font-size:10px; letter-spacing:.2em; color:var(--texto-3)}

/* ---------- Modal ---------- */
.modal{position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center; padding:var(--pad)}
.modal-bg{position:absolute; inset:0; background:rgba(13,20,36,.34); backdrop-filter:blur(6px); animation:fade .22s var(--ease)}
.modal-box{
  position:relative; width:min(720px,100%); max-height:84vh; overflow:auto;
  background:var(--superficie); border:1px solid var(--linea); border-radius:var(--r-lg);
  box-shadow:var(--s-2); padding:clamp(26px,4vw,42px); animation:pop .3s var(--ease);
}
@keyframes pop{from{opacity:0; transform:translateY(12px) scale(.99)}to{opacity:1; transform:none}}
.modal-x{position:absolute; top:14px; right:18px; font-size:26px; line-height:1; color:var(--texto-3)}
.modal-x:hover{color:var(--texto)}

/* ---------- Responsive ---------- */
@media (max-width:1199px){
  :root{--rail:0px}
  .rail{display:none}
  .menu-btn{display:flex}
}
@media (max-width:640px){
  :root{--pad:20px}
  body{font-size:16px}
  .topbar-cliente{display:none}
  .section{padding-block:clamp(60px,8vh,86px)}
  .sec-head{margin-bottom:32px}
  .bloque + .bloque{margin-top:34px}
  .footer-in{flex-direction:column; align-items:flex-start; gap:10px}
}