/* =========================================================
   Alivia · base compartida (tokens, tipografía, nav, botones)
   Tema oscuro en toda la página. La UI dentro del teléfono
   usa la paleta clara de la marca (--ui-*).
   ========================================================= */

/* Fuentes autoalojadas (antes: Google Fonts por <link>, con 2 saltos de origen antes de
   poder pintar texto). Un solo archivo variable por familia cubre todos los pesos usados
   (mismo woff2 detrás de cada @font-face de peso, igual que sirve Google): el navegador
   lo descarga una sola vez. Subconjunto "latin" (cubre tildes, ñ, ¿¡ del español).
   font-display:swap: se ve con la fuente de respaldo hasta que cargue la real. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/landing/fonts/inter-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/landing/fonts/inter-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/landing/fonts/inter-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/landing/fonts/inter-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url('/landing/fonts/inter-tight-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url('/landing/fonts/inter-tight-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url('/landing/fonts/inter-tight-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/landing/fonts/jetbrains-mono-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/landing/fonts/jetbrains-mono-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* Fondo y texto (tema oscuro de la landing) */
  --bg:#071112;          /* fondo principal */
  --bg-2:#0B181A;        /* fondo alterno de secciones */
  --surface:#0F1F21;     /* tarjetas */
  --surface-2:#132729;   /* tarjetas elevadas */
  --line:#1C3033;        /* bordes */
  --line-2:#26403F;
  --text:#E7EFEF;        /* texto principal */
  --dim:#93A7A9;         /* texto secundario */
  --faint:#74898B;       /* metadatos (≈5:1 sobre --bg, ≈4.6:1 sobre tarjetas) */

  /* Marca */
  --accent:#0F8B8D;      /* Verde Alivia */
  --accent-deep:#0A6466; /* Verde profundo */
  --accent-l:#35C2C4;    /* acento claro sobre oscuro */
  --glow:rgba(53,194,196,.35);
  --ok:#2E9E5B; --warn:#E0A100; --err:#D9534F;

  /* UI clara (pantallas del producto dentro del teléfono) */
  --ui-bg:#FFFFFF; --ui-mist:#F5F7F8; --ui-ink:#1C2526; --ui-stone:#5F6B6D; --ui-line:#E3E8E9; --ui-bruma:#E6F4F4;

  --f-display:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --gutter:clamp(16px,4vw,56px);
  --maxw:1200px;
  --nav-h:68px;
  --r:14px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 12px);overflow-x:hidden}
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
h1,h2,h3,h4,h5{margin:0;font-family:var(--f-display);letter-spacing:-.028em;line-height:1.08;text-wrap:balance;font-weight:600}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.02em}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-l);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:18px;height:1px;background:currentColor;opacity:.6}
:focus-visible{outline:2px solid var(--accent-l);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:16px;top:-60px;background:var(--text);color:var(--bg);padding:10px 14px;border-radius:8px;z-index:100}
.skip:focus{top:12px}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border-radius:16px;font-weight:600;font-size:16px;border:1.5px solid transparent;cursor:pointer;transition:background-color .2s,border-color .2s,transform .2s,box-shadow .2s;white-space:nowrap}
.btn .ic{width:18px;height:18px}
/* #0E8082, no var(--accent): el verde de marca (#0F8B8D) da 4.11:1 con blanco, bajo el 4.5:1 de AA. */
.btn-primary{background:#0E8082;color:#fff;box-shadow:0 10px 30px -10px rgba(15,139,141,.7)}
.btn-primary:hover{background:#12A0A2;transform:translateY(-1px)}
.btn-glass{border-color:rgba(255,255,255,.2);color:#fff;background:rgba(255,255,255,.04);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-glass:hover{background:rgba(255,255,255,.1)}
.btn-sm{height:40px;padding:0 16px;font-size:14px;border-radius:12px}

/* Chips de estado (colores semánticos de la marca) */
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap;font-style:normal}
.chip i{width:6px;height:6px;border-radius:50%;background:currentColor}
.chip .ic{width:13px;height:13px}
.chip-ok{background:rgba(46,158,91,.14);color:#4CC27E}
.chip-warn{background:rgba(224,161,0,.16);color:#F0C24A}
.chip-mute{background:rgba(255,255,255,.08);color:var(--dim)}
.chip-info{background:rgba(53,194,196,.14);color:var(--accent-l)}
.chip-err{background:rgba(217,83,79,.16);color:#F0847E}
.chip-brand{background:var(--accent-deep);color:#fff}

/* Nav (vidrio oscuro) */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);background:rgba(7,17,18,.35);backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid rgba(255,255,255,.04);transition:background-color .3s,border-color .3s}
.nav.scrolled{background:rgba(7,17,18,.72);border-bottom-color:rgba(255,255,255,.07)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);height:var(--nav-h);display:flex;align-items:center;gap:32px}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:700;font-size:21px;letter-spacing:-.03em;color:#fff}
.brand-logo{height:28px;width:auto;border-radius:6px;flex:none}
.nav-links{display:flex;gap:28px;margin-left:auto;font-size:14px;font-weight:500;color:#9DB1B3}
.nav-links a{position:relative;padding:6px 0;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-links .nav-mobile-cta{display:none}
.nav-actions{display:flex;align-items:center;gap:8px}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:transparent;color:#fff;align-items:center;justify-content:center;cursor:pointer}
@media (max-width:860px){
  :root{--nav-h:60px}
  .nav-links{position:fixed;top:calc(var(--nav-h) + env(safe-area-inset-top,0px));left:0;right:0;flex-direction:column;gap:0;padding:8px var(--gutter) 20px;background:var(--bg);box-shadow:0 24px 40px -20px rgba(0,0,0,.8);border-bottom:1px solid var(--line);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s}
  .nav-links.open{opacity:1;transform:none;visibility:visible}
  .nav-links a{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
  .nav-links .nav-mobile-cta{display:inline-flex;margin-top:16px;border-bottom:0;color:#fff;height:48px}
  .nav-actions .btn{display:none}
  .nav-toggle{display:inline-flex}
  .nav-actions{margin-left:auto}
}

/* Identidad de marca: icono y nombre legible en el menú y el pie. */
.brand{gap:10px;font-family:var(--f-body);font-size:30px;font-weight:700;letter-spacing:-.055em;line-height:1}
.brand-icon{width:34px;height:34px;flex:none;border-radius:50%}
.brand-name{display:block}
.nav-inner{gap:24px}
.nav-links{gap:24px}
@media (max-width:860px){
  .brand{font-size:27px}
  .brand-icon{width:31px;height:31px}
}

/* "Empieza gratis" (registro con prueba gratis, 2026-09-29): el registro es la acción principal y la demo queda
   como secundaria. En el menú del celular, la demo es un enlace más; en escritorio angosto se esconde su botón. */
.nav-links .nav-mobile-link{display:none}
@media (max-width:1100px){.nav-actions .nav-demo{display:none}}
@media (max-width:860px){.nav-links .nav-mobile-link{display:block}}