/* ==========================================================================
   PREVINTEC — base.css
   Tokens de marca, reset, tipografía y utilidades de layout.
   Paleta derivada del logo oficial: navy #2d276d + naranja #e99915 + verde #39b54a
   ========================================================================== */

:root{
  /* --- Marca: navy profundo (refrescado desde #2d276d) --- */
  --navy-950:#07061A;
  --navy-900:#0C0A28;
  --navy-850:#110E35;
  --navy-800:#161145;
  --navy-700:#1E1861;
  --navy-600:#2A2478;
  --navy-500:#3B339A;
  --navy-400:#5B53BE;
  --navy-300:#8C86D6;
  --navy-200:#BBB7E4;
  --navy-100:#E6E4F4;

  /* --- Marca: naranja cálido (refrescado desde #e99915) --- */
  --amber-700:#B25E06;
  --amber-600:#DC7D0E;
  --amber-500:#F09428;
  --amber-400:#F8AC55;
  --amber-300:#FCC98C;
  --amber-100:#FDF1DF;

  /* --- Marca: verde (uso moderado, estados) --- */
  --green-700:#1D7635;
  --green-500:#2FA84F;
  --green-200:#B9E6C6;
  --green-100:#E3F6E8;

  /* --- Neutros --- */
  --paper:#FCFBF9;
  --paper-2:#F4F2EE;
  --paper-3:#EAE7E0;
  --ink-900:#121120;
  --ink-700:#2E2C46;
  --ink-500:#5F5C7A;
  --ink-300:#918EAA;
  --line:#E7E4EE;

  /* --- Tipografía --- */
  --font-display:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:"Figtree", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* --- Escala fluida --- */
  --fs-xs:clamp(.7rem,.68rem + .1vw,.76rem);
  --fs-sm:clamp(.82rem,.79rem + .15vw,.9rem);
  --fs-base:clamp(.95rem,.92rem + .18vw,1.06rem);
  --fs-lg:clamp(1.06rem,1rem + .3vw,1.22rem);
  --fs-xl:clamp(1.24rem,1.1rem + .7vw,1.62rem);
  --fs-2xl:clamp(1.58rem,1.28rem + 1.4vw,2.4rem);
  --fs-3xl:clamp(1.95rem,1.45rem + 2.3vw,3.35rem);
  --fs-4xl:clamp(2.4rem,1.55rem + 3.9vw,4.9rem);
  --fs-5xl:clamp(2.9rem,1.5rem + 6vw,6.5rem);

  /* --- Espaciado --- */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;   --s-7:3rem;   --s-8:4rem;
  --s-9:6rem;   --s-10:8rem;

  /* --- Formas --- */
  --radius-xs:6px;
  --radius-sm:10px;
  --radius:16px;
  --radius-lg:24px;
  --radius-xl:34px;
  --radius-pill:999px;

  /* --- Layout --- */
  --container:1260px;
  --container-narrow:840px;
  --nav-h:76px;

  /* --- Movimiento --- */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur:.6s;
}

/* ==========================================================================
   TEMAS — dos variantes conmutables de portada
   dark  = navy oscuro premium (por defecto)
   light = claro corporativo
   ========================================================================== */

html[data-theme="dark"]{
  --bg:var(--navy-950);
  --bg-alt:var(--navy-900);
  --surface:rgba(255,255,255,.035);
  --surface-2:rgba(255,255,255,.065);
  --surface-solid:#100E30;
  --text:#F5F4FC;
  --text-2:#BDBAD8;
  --text-3:#8A87A8;
  --border:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.18);
  --accent:var(--amber-500);
  --accent-ink:#1A1305;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 18px 40px -18px rgba(0,0,0,.75);
  --shadow-lg:0 40px 90px -40px rgba(0,0,0,.9);
  --glow:0 0 0 1px rgba(240,148,40,.28), 0 12px 40px -12px rgba(240,148,40,.35);
  --grid-line:rgba(255,255,255,.045);
  --scheme:dark;
}

html[data-theme="light"]{
  --bg:var(--paper);
  --bg-alt:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:var(--paper-2);
  --surface-solid:#FFFFFF;
  --text:var(--ink-900);
  --text-2:var(--ink-700);
  --text-3:var(--ink-500);
  --border:var(--line);
  --border-strong:#D6D2E0;
  --accent:var(--amber-600);
  --accent-ink:#1A1305;
  --shadow-sm:0 1px 2px rgba(18,17,32,.06);
  --shadow:0 14px 34px -16px rgba(18,17,32,.20);
  --shadow-lg:0 40px 80px -40px rgba(18,17,32,.28);
  --glow:0 0 0 1px rgba(220,125,14,.25), 0 12px 34px -14px rgba(220,125,14,.30);
  --grid-line:rgba(18,17,32,.05);
  --scheme:light;
}

/* ==========================================================================
   RESET
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px);
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  min-height:100vh;
  transition:background-color .5s var(--ease-out), color .5s var(--ease-out);
}

img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

::selection{background:var(--accent);color:var(--accent-ink)}

/* ==========================================================================
   TIPOGRAFÍA
   ========================================================================== */

h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.03em;
  text-wrap:balance;
  color:var(--text);
}

h1{font-size:var(--fs-5xl);letter-spacing:-.045em;line-height:1.02}
h2{font-size:var(--fs-3xl)}
h3{font-size:var(--fs-xl);line-height:1.18;letter-spacing:-.02em}
h4{font-size:var(--fs-lg);line-height:1.3;letter-spacing:-.015em;font-weight:700}

p{text-wrap:pretty;color:var(--text-2)}
p strong,li strong{color:var(--text);font-weight:600}

.lead{
  font-size:var(--fs-lg);
  line-height:1.58;
  color:var(--text-2);
  max-width:64ch;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-3);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:"";
  width:22px;height:1px;
  background:var(--accent);
  flex:none;
}
.eyebrow--plain::before{display:none}

.mono{font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:.02em}
.accent{color:var(--accent)}
.muted{color:var(--text-3)}

.gradient-text{
  background:linear-gradient(100deg,var(--amber-400) 0%,var(--amber-500) 45%,var(--navy-300) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
/* Sobre fondo claro el degradado necesita más profundidad para leerse */
html[data-theme="light"] .gradient-text{
  background:linear-gradient(100deg,var(--amber-700) 0%,var(--amber-600) 40%,var(--navy-700) 100%);
  -webkit-background-clip:text;
  background-clip:text;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.wrap{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1.1rem,4vw,3rem);
}
.wrap--narrow{max-width:var(--container-narrow)}

.section{
  position:relative;
  padding-block:clamp(4rem,9vw,8.5rem);
}
.section--tight{padding-block:clamp(2.6rem,5vw,4.4rem)}
.section--alt{background:var(--bg-alt)}
.section--navy{
  background:var(--navy-900);
  color:#F5F4FC;
}
html[data-theme="light"] .section--navy{
  background:var(--navy-800);
}
.section--navy h1,
.section--navy h2,
.section--navy h3,
.section--navy h4{color:#FFFFFF}
.section--navy p{color:rgba(255,255,255,.74)}
.section--navy .eyebrow{color:rgba(255,255,255,.5)}

.section__head{
  display:grid;
  gap:var(--s-4);
  max-width:70ch;
  margin-bottom:clamp(2rem,4vw,3.5rem);
}
.section__head--center{
  margin-inline:auto;
  text-align:center;
  justify-items:center;
}
.section__head--center .lead{margin-inline:auto}

.rule{
  height:1px;
  background:var(--border);
  border:0;
  margin:0;
}

/* Rejillas */
.grid{display:grid;gap:clamp(1rem,2.2vw,1.6rem)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.grid--sidebar{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}
.grid--split{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:clamp(1.6rem,5vw,4.5rem)}

.stack{display:grid;gap:var(--s-4)}
.stack--sm{gap:var(--s-2)}
.stack--lg{gap:var(--s-6)}

.flex{display:flex;gap:var(--s-4);align-items:center}
.flex--wrap{flex-wrap:wrap}
.flex--between{justify-content:space-between}
.flex--col{flex-direction:column;align-items:flex-start}

/* Utilidades */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:50%;top:-100px;transform:translateX(-50%);
  z-index:200;background:var(--accent);color:var(--accent-ink);
  padding:.7rem 1.2rem;border-radius:0 0 var(--radius-sm) var(--radius-sm);
  font-weight:600;transition:top .25s var(--ease-out);
}
.skip:focus{top:0}

[hidden]{display:none !important}

/* Fondo de rejilla técnica reutilizable */
.grid-bg{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--grid-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 100%);
}

/* ==========================================================================
   RESPONSIVE BASE
   ========================================================================== */

@media (max-width:1040px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--sidebar{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:860px){
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--split{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:620px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}
  :root{--nav-h:64px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* Modo de efectos reducido (controlado por el panel de Tweaks) */
html[data-effects="reduced"] .fx-only{display:none !important}