/* ==========================================================================
   KLOVER — base.css
   Design tokens, reset, tipografía y utilidades compartidas.
   ========================================================================== */

:root{
  /* Texto */
  --ink:#121212;
  --ink2:#55556a;
  --ink3:#8a8a9c;

  /* Superficies */
  --bg:#ffffff;
  --bg2:#f7f7fb;
  --line:#eef0f5;
  --line2:#e3e3ec;

  /* Acentos de marca por unidad */
  --people:#4848de;
  --salud:#3a9b4f;
  --risk:#b07d0a;
  --green:#5b9655;
  --indigo:#4848de;

  /* Fondos oscuros */
  --dark-green:#0e1d14;
  --dark-green-2:#0b1810;
  --dark-navy:#0f1226;
  --dark-navy-2:#181b35;

  /* Gradientes */
  --grad:linear-gradient(115deg,#5b9655 0%,#4848de 100%);
  --graddark:linear-gradient(115deg,#8fe49a 0%,#9b97ff 100%);
  --gradsoft:linear-gradient(115deg,#eef3ea 0%,#eeeefc 100%);

  /* Tipografía */
  --head:'Heebo',sans-serif;
  --body:'Quicksand',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  /* Layout */
  --maxw:1120px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{font-family:var(--head);letter-spacing:-.02em;line-height:1.05;color:var(--ink)}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
button{font-family:inherit}

/* Contenedor */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
@media(max-width:560px){.wrap{padding:0 22px}}

/* Utilidades */
.grad{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.eyebrow{
  font-family:var(--head);
  font-weight:700;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--salud);
}
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}

/* Accesibilidad: foco visible y consistente */
:focus-visible{
  outline:2px solid var(--indigo);
  outline-offset:3px;
  border-radius:6px;
}
.skip-link{
  position:absolute;left:16px;top:-48px;
  background:#fff;color:var(--ink);
  font-family:var(--head);font-weight:700;font-size:14px;
  padding:10px 16px;border-radius:10px;
  box-shadow:0 10px 30px -12px rgba(18,18,18,.35);
  z-index:200;transition:top .2s;
}
.skip-link:focus{top:16px}