/* =====================================================================
   G Digital Ally v1.0 — base.css
   Tokens de diseño, tipografía, reset, botones y utilidades compartidas.
   Para ajustar colores, tipografía o medidas, empieza por :root.
   ===================================================================== */

@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-latin-variable.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  /* Marca */
  --navy-950:#06172a;
  --navy-900:#081a2d;
  --navy-850:#0a2037;
  --navy-800:#0b2b48;
  --navy-700:#0e3a5c;
  --blue-600:#0879bd;   /* enlaces y acentos sobre claro (AA) */
  --blue-500:#0794ee;
  --blue-400:#15b5f6;
  --cyan-400:#19c9da;
  --cyan-300:#5fd8f5;   /* acentos sobre oscuro */
  --cyan-200:#9ce8ff;

  /* Neutros */
  --ink:#15263c;
  --ink-soft:#2c4056;
  --muted:#5a6d84;
  --muted-on-dark:#b9cde0;
  --paper:#f6f9fc;
  --paper-blue:#eef7fc;
  --white:#fff;
  --line:#dce6ee;
  --line-strong:#c6d9e6;

  /* Estados */
  --ok:#0f7a52;--ok-bg:#e9f8f1;--ok-line:#bfe7d4;
  --info:#0b6a9a;--info-bg:#eaf6fd;--info-line:#c4e6f8;
  --amber:#875f12;--amber-bg:#fff6e6;--amber-line:#f0dcb6;
  --slate:#4f6178;--slate-bg:#eef3f7;--slate-line:#d6e2eb;
  --danger:#b42335;--danger-bg:#fdeef0;

  /* Gradientes */
  --grad-text:linear-gradient(110deg,#1a9cff 0%,#35d6e3 100%);
  --grad-btn:linear-gradient(125deg,#066fb6,#0977bf);

  /* Tipografía */
  --font:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --fs-h1:clamp(2.5rem,5.4vw,5.25rem);
  --fs-h2:clamp(1.95rem,3.6vw,3.4rem);
  --fs-h3:1.3rem;
  --fs-lead:clamp(1.02rem,1.3vw,1.18rem);

  /* Medidas */
  --container:1140px;
  --gutter:24px;
  --radius-sm:12px;
  --radius:19px;
  --radius-lg:26px;
  --header-h:80px;
  --shadow-sm:0 8px 22px rgba(13,43,75,.07);
  --shadow:0 20px 60px rgba(13,43,75,.09);
  --shadow-lg:0 30px 80px rgba(6,38,69,.15);
  --focus:#1fb8e0;

  /* Espaciado vertical de secciones */
  --section-y:clamp(72px,9vw,118px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 12px)}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-feature-settings:"cv11","ss01"}
@supports (overflow:clip){body{overflow-x:clip}}
img,svg,picture{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
::selection{background:#9cecf4;color:#07223c}

h1,h2,h3,h4,p{margin-top:0}
h1,h2,h3{letter-spacing:-.04em;line-height:1.1;color:inherit;text-wrap:balance}
h1{font-size:var(--fs-h1);font-weight:820}
h2{font-size:var(--fs-h2);font-weight:790}
h3{font-size:var(--fs-h3);letter-spacing:-.025em;font-weight:760}
p{color:var(--muted);text-wrap:pretty}
.lead{font-size:var(--fs-lead);line-height:1.75}
strong{font-weight:760}

/* Utilidades */
.container{width:min(var(--container),calc(100% - var(--gutter)*2));margin-inline:auto}
.narrow{max-width:790px}
.text-center{text-align:center}
.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}
.eyebrow{font-weight:800;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#1272ad;display:block;margin-bottom:18px}
.eyebrow.light{color:#70dfff}
.gradient-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.text-blue{color:#0b76ab}
.muted{color:var(--muted)}

.skip-link{position:absolute;left:12px;top:-60px;z-index:999;background:#fff;color:var(--navy-900);padding:10px 16px;border-radius:10px;font-weight:700;box-shadow:var(--shadow)}
.skip-link:focus{top:12px}

/* Iconos */
.icon{width:21px;height:21px;vertical-align:middle;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.icon-lg{width:27px;height:27px}

/* Botones */
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;padding:13px 22px;border-radius:var(--radius-sm);min-height:50px;font-size:.92rem;font-weight:760;line-height:1.2;transition:transform .2s,background-color .2s,box-shadow .2s,border-color .2s;text-align:center}
.btn:hover{transform:translateY(-2px)}
.btn .icon{width:18px;height:18px}
.btn-primary{background:var(--grad-btn);color:#fff;box-shadow:0 12px 30px rgba(0,139,237,.2)}
.btn-primary:hover{box-shadow:0 17px 36px rgba(0,139,237,.32)}
.btn-outline-light{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.04);color:#fff}
.btn-outline-light:hover{background:rgba(255,255,255,.13)}
.btn-outline{border-color:#b4d2e8;background:transparent;color:#0a669b}
.btn-outline:hover{background:#eaf7ff}
.btn-whatsapp{background:#fff;color:#0b4b3a;border-color:#bfe7d4}
.btn-whatsapp:hover{background:#ecfaf3}
.btn-sm{padding:9px 15px;min-height:40px;font-size:.82rem}
.btn[aria-disabled="true"],.btn:disabled{opacity:.6;cursor:progress;transform:none}

.link-arrow{color:var(--blue-600);font-weight:790;display:inline-flex;align-items:center;gap:9px;transition:gap .2s}
.link-arrow:hover{gap:14px}

/* Etiquetas de estado */
.label{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--info-line);color:var(--info);padding:5px 11px;border-radius:100px;font-size:.72rem;font-weight:800;letter-spacing:.03em;background:var(--info-bg);white-space:nowrap}
.label::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.8}
.label-ok{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line)}
.label-amber{color:var(--amber);background:var(--amber-bg);border-color:var(--amber-line)}
.label-slate{color:var(--slate);background:var(--slate-bg);border-color:var(--slate-line)}
.label-dark{background:rgba(12,151,222,.16);border-color:rgba(125,207,243,.36);color:#9ce8ff}

/* Avisos */
.notice{border-radius:11px;padding:13px 16px;font-size:.86rem;background:var(--info-bg);color:#245f80;margin-top:17px;line-height:1.55}
.notice-ok{background:var(--ok-bg);color:#0d5e40}
.notice-error{background:var(--danger-bg);color:var(--danger)}
.notice-draft{background:var(--amber-bg);color:var(--amber);border:1px dashed var(--amber-line)}

/* Toast */
.toast{position:fixed;right:22px;bottom:22px;z-index:4000;width:min(405px,calc(100% - 44px));padding:16px 18px;background:#0a2c47;color:#e8faff;box-shadow:0 20px 65px rgba(0,0,0,.25);border:1px solid #2a6586;border-radius:14px;font-size:.88rem;display:flex;gap:14px;align-items:flex-start}
.toast button{background:none;border:0;color:#bde4f5;font-size:1.2rem;line-height:1;margin-left:auto;padding:2px 6px}

/* Aparición progresiva: solo si JS confirma que hay soporte y movimiento permitido.
   Nunca deja contenido oculto si el observador no se dispara (ver site.js). */
.motion-ok .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.motion-ok .reveal.is-visible{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}
  .btn:hover{transform:none}
}
@media (max-width:560px){
  :root{--gutter:16px}
}
.notice a{color:inherit;text-decoration:underline;text-underline-offset:2px;font-weight:650}