/* Base compartida de las propuestas de hero para la landing de Andes (28-sep-2026) */
:root{
  --navy:#0B1D3A; --navy-9:#07152e; --cel:#4ec3ed; --cel-d:#1f95c4; --paper:#f5f3ee;
  --ink:#0B1D3A; --muted:#5b6474; --line:rgba(11,29,58,.12);
  --sans:"Nunito Sans","Helvetica Neue",Arial,sans-serif; --ease:cubic-bezier(.16,1,.3,1);
  --g:clamp(16px,4vw,56px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-weight:500}
img,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
em.i{font-style:italic;font-weight:700}
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln>span{display:block}

/* Cabecera de la landing */
.ah{position:absolute;inset:0 0 auto;z-index:30;display:flex;align-items:center;justify-content:space-between;height:80px;padding:0 var(--g);color:#fff}
.ah img{height:34px;width:auto}
.ah nav{display:flex;gap:10px}
.ah--dark{color:var(--ink)}
@media (max-width:640px){.ah .b--ghost{display:none}}

/* Botones */
.b{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 24px;border-radius:999px;font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;isolation:isolate}
.b::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--navy-9);transform:translateY(101%);transition:transform .55s var(--ease)}
.b:hover::before{transform:none}
.b--pri{background:var(--cel-d);color:#fff}
.b--light{background:#fff;color:var(--navy)}
.b--light:hover{color:#fff}
.b--ghost{border:1px solid rgba(255,255,255,.55);color:#fff}
.b--ghost::before{background:#fff}
.b--ghost:hover{color:var(--navy)}
.b--sm{height:42px;padding:0 18px;font-size:14px}
.b svg{flex:none}

/* Chip de ubicación */
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:13px;font-weight:800;color:#fff}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--cel);box-shadow:0 0 10px var(--cel)}

/* Selector para comparar (solo prueba) */
.opts{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:99;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;border-radius:999px;background:rgba(7,21,46,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:13px;font-weight:800;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.opts span{font-size:9px;letter-spacing:.1em;opacity:.6;padding:6px 0 3px}
.opts a{width:34px;height:34px;display:grid;place-items:center;border-radius:50%}
.opts a[aria-current]{background:#fff;color:var(--navy)}
.opts a:not([aria-current]):hover{background:rgba(255,255,255,.14)}
.opts a.cy{color:#ff6be4}
.opts a.cy[aria-current]{background:#ff2bd6;color:#fff}
@media (max-width:900px){.opts{top:auto;bottom:10px;right:50%;transform:translateX(50%);flex-direction:row}.opts span{padding:0 6px 0 10px}}

/* Lo que sigue */
.next{padding:70px var(--g);background:#fff;font-size:clamp(20px,2.6vw,34px);font-weight:400;color:var(--navy)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.ah--dark .b--ghost{border-color:var(--line);color:var(--navy)}
.ah--dark .b--ghost::before{background:rgba(11,29,58,.08)}
.ah--dark .b--ghost:hover{color:var(--navy)}