/* Next Level Pro · base del sitio
   Marca: Montserrat, azul oscuro predominante, amarillo solo para acentos,
   formas planas y diagonales de 37° (manual de marca 2024). */
@font-face{font-family:"Montserrat";src:url("fonts/montserrat-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --blue:#2039b7;--blue-mid:#3590ff;--blue-light:#22bbff;--yellow:#f49c00;
  --deep:#172a8f;      /* derivado del azul oscuro, para dar profundidad */
  --ink:#0d1650;       /* derivado, texto sobre fondos claros y amarillo */
  --text:#2a3058;--paper:#f2f5fd;--line:rgba(13,22,80,.14);--white:#fff;
  --wrap:min(1240px,calc(100vw - clamp(40px,7vw,112px)));
  --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;font-family:"Montserrat",system-ui,sans-serif;font-size:clamp(1rem,.96rem + .2vw,1.0625rem);line-height:1.65;color:var(--text);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
strong,b{font-weight:800}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:2px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:var(--wrap);margin-inline:auto}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-80px;z-index:200;background:var(--yellow);color:var(--ink);padding:.7em 1.1em;font-weight:700;transition:top .2s}
.skip:focus{top:12px}
.ic{width:1em;height:.84em;fill:currentColor;flex:none}

/* Etiqueta con línea, como los títulos de sección del manual */
.label{display:flex;align-items:center;gap:1.1rem;font-size:.82rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.label::after{content:"";flex:1;height:1px;background:currentColor;opacity:.4}

/* Botón: forma inspirada en el chip "PRO" del logotipo */
.btn{--bg:var(--yellow);--fg:var(--ink);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.75em;padding:1.02em 1.7em;min-height:52px;background:var(--bg);color:var(--fg);border:0;border-radius:0 .5em 1.45em 0;font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;transition:transform .35s var(--ease),background-color .25s,color .25s}
.btn .ic{transition:transform .35s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover .ic{transform:translateX(5px)}
.btn--white{--bg:#fff;--fg:var(--blue)}
.btn--blue{--bg:var(--blue);--fg:#fff}
.btn--ghost{--bg:transparent;--fg:currentColor;box-shadow:inset 0 0 0 2px currentColor}
.btn svg.ic-wa{width:1.25em;height:1.25em;fill:currentColor;flex:none}

/* Enlace de texto con chevrón */
.link{display:inline-flex;align-items:center;gap:.55em;font-weight:700;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:.15em}
.link .ic{transition:transform .3s var(--ease)}
.link:hover .ic{transform:translateX(4px)}

/* Botón flotante de WhatsApp */
.fab{position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:60;display:flex;align-items:center;height:58px;padding:0 17px;gap:0;background:var(--yellow);color:var(--ink);border-radius:0 12px 28px 0;text-decoration:none;font-weight:700;box-shadow:0 10px 30px rgba(13,22,80,.28);transition:transform .35s var(--ease)}
.fab svg{width:25px;height:25px;fill:currentColor;flex:none}
.fab span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .4s var(--ease),margin .4s var(--ease)}
.fab:hover span,.fab:focus-visible span{max-width:170px;margin-left:.65em}
.fab:hover{transform:translateY(-3px)}

/* Reveal: el contenido solo se oculta si hay JS y movimiento permitido */
@media (prefers-reduced-motion:no-preference){
  .js [data-r]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
  .js [data-r="left"]{transform:translateX(-36px)}
  .js [data-r="right"]{transform:translateX(36px)}
  .js [data-r].in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Mosaico de logos de clientes */
.tile{display:flex;align-items:center;justify-content:center;background:var(--tile,#fff);border-radius:0 10px 22px 0}
.tile img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}

/* Sliders de la calculadora */
.range{display:block}
.range__top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.45rem;font-weight:600}
.range__top output{font-weight:800;white-space:nowrap}
.range input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:30px;margin:0;background:transparent;cursor:pointer;--p:50%;--track:rgba(255,255,255,.25);--fill:var(--blue-light);--thumb:var(--yellow)}
.range input[type=range]::-webkit-slider-runnable-track{height:8px;background:linear-gradient(to right,var(--fill) var(--p),var(--track) var(--p))}
.range input[type=range]::-moz-range-track{height:8px;background:var(--track)}
.range input[type=range]::-moz-range-progress{height:8px;background:var(--fill)}
.range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:30px;margin-top:-11px;background:var(--thumb);border:0;clip-path:polygon(0 0,45% 0,100% 50%,45% 100%,0 100%,45% 50%);transition:transform .2s}
.range input[type=range]::-moz-range-thumb{width:24px;height:30px;background:var(--thumb);border:0;border-radius:0;clip-path:polygon(0 0,45% 0,100% 50%,45% 100%,0 100%,45% 50%)}
.range input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}