/* ============================================================================
   AquAI Tech — tokens de marca y componentes base (v0.1, 2026-10-03)
   Importar en cada página:
     <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700;800&family=Inter:wght@400;500&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
     <link rel="stylesheet" href="tokens.css">
   Tipografía: Nunito 800 para logotipo y títulos, Inter 400/500 para texto.
   Acento intercambiable con data-acento="salmon|lima|ambar" en <html>.
   ========================================================================== */
:root{
  /* azules de marca (del símbolo) */
  --abismo:#0B2545;      /* navy principal: texto de marca, botones primarios */
  --abismo-2:#071A33;    /* fondos oscuros, hero, pie */
  --oceano:#13406B;      /* azul medio: hover de primario, bordes en oscuro */
  --oceano-2:#1E6FA8;    /* azul claro: enlaces en oscuro, gráficos */
  --corriente:#0AA6D1;   /* cian del símbolo: secundario, foco, detalles */
  --corriente-ink:#0786AA;
  --corriente-soft:#D7F0F8;
  --corriente-line:#A9DDEE;

  /* superficies claras */
  --espuma:#EAF6FB;      /* bloque destacado claro */
  --niebla:#F4F7FA;      /* fondo de página */
  --blanco:#FFFFFF;      /* tarjetas */
  --tinta:#14202E;       /* texto principal */
  --gris:#5B6B7C;        /* texto secundario */
  --linea:#D9E1E8;       /* bordes */

  /* acento (por defecto salmón, ver data-acento) */
  --acento:#F4846B; --acento-ink:#D9654C; --acento-soft:#FDE6DF; --acento-texto:#14202E;

  /* estados */
  --ok:#2E8B6A; --ok-soft:#E3F3EC;
  --aviso:#D29A1E; --aviso-soft:#FBF1D9;
  --error:#C8453A; --error-soft:#F9E3E0;

  /* forma */
  --r-card:12px; --r-btn:10px; --r-input:8px; --r-tag:6px; --r-pill:999px;
  --sombra-sm:0 1px 2px rgba(11,37,69,.06);
  --sombra:0 1px 2px rgba(11,37,69,.05), 0 14px 32px -20px rgba(11,37,69,.25);

  /* tipografía */
  --f-titulo:"Nunito", system-ui, sans-serif;
  --f-texto:"Inter", system-ui, -apple-system, sans-serif;
  --f-mono:ui-monospace, "SF Mono", Menlo, monospace;

  /* ritmo */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px; --s9:112px;
  --ancho:1120px;
}
:root[data-acento="lima"]{ --acento:#A3E635; --acento-ink:#7BBF14; --acento-soft:#EEF9D8; --acento-texto:#14202E; }
:root[data-acento="ambar"]{ --acento:#F2B705; --acento-ink:#C99700; --acento-soft:#FCF1CC; --acento-texto:#14202E; }

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--niebla);color:var(--tinta);font-family:var(--f-texto);font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased;}
img,svg{max-width:100%;display:block;}
a{color:var(--corriente-ink);}

/* ---------- tipografía ---------- */
.aq-eyebrow{font-family:var(--f-texto);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--corriente-ink);font-weight:500;}
.aq-h1{font-family:var(--f-titulo);font-weight:800;font-size:clamp(2rem,4.5vw,3.4rem);line-height:1.08;letter-spacing:-.02em;margin:0;color:var(--abismo);}
.aq-h2{font-family:var(--f-titulo);font-weight:800;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.15;letter-spacing:-.015em;margin:0;color:var(--abismo);}
.aq-h3{font-family:var(--f-titulo);font-weight:700;font-size:1.15rem;line-height:1.3;margin:0;color:var(--abismo);}
.aq-lead{font-size:1.15rem;color:var(--gris);line-height:1.6;max-width:62ch;}
.aq-muted{color:var(--gris);}
.aq-num{font-family:var(--f-titulo);font-weight:800;font-size:2.8rem;line-height:1;letter-spacing:-.02em;color:var(--abismo);font-variant-numeric:tabular-nums;}
.aq-mono{font-family:var(--f-mono);font-size:.92em;}
.aq-link{color:var(--corriente-ink);text-decoration:none;border-bottom:1px solid var(--corriente-line);}
.aq-link:hover{color:var(--abismo);border-color:var(--abismo);}

/* ---------- logotipo ---------- */
.aq-logo{display:inline-flex;align-items:center;gap:.55em;text-decoration:none;color:var(--abismo);font-family:var(--f-titulo);font-weight:800;letter-spacing:-.02em;line-height:1;}
.aq-logo img,.aq-logo svg{height:1.9em;width:auto;}
.aq-logo .t{font-size:1.5em;white-space:nowrap;}
.aq-logo--apilado{flex-direction:column;gap:.5em;text-align:center;}
.aq-logo--apilado img{height:4.2em;}
.aq-logo--claro{color:#fff;}
.aq-logo .ai{color:var(--corriente);}

/* ---------- layout ---------- */
.aq-wrap{max-width:var(--ancho);margin:0 auto;padding:0 var(--s5);}
.aq-seccion{padding:var(--s8) 0;}
.aq-seccion--oscura{background:var(--abismo-2);color:#DCE7F1;}
.aq-seccion--oscura .aq-h1,.aq-seccion--oscura .aq-h2,.aq-seccion--oscura .aq-h3{color:#fff;}
.aq-seccion--oscura .aq-eyebrow{color:var(--corriente);}
.aq-seccion--oscura .aq-lead,.aq-seccion--oscura .aq-muted{color:#A9BBCC;}
.aq-seccion--espuma{background:var(--espuma);}
.aq-grid{display:grid;gap:var(--s5);}
.aq-grid--2{grid-template-columns:repeat(2,1fr);} .aq-grid--3{grid-template-columns:repeat(3,1fr);} .aq-grid--4{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){.aq-grid--3,.aq-grid--4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.aq-grid--2,.aq-grid--3,.aq-grid--4{grid-template-columns:1fr;} .aq-wrap{padding:0 var(--s4);} .aq-seccion{padding:var(--s7) 0;}}

/* ---------- header / nav ---------- */
.aq-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea);}
.aq-header .aq-wrap{display:flex;align-items:center;gap:var(--s5);height:68px;}
.aq-nav{margin-left:auto;display:flex;gap:var(--s4);align-items:center;}
.aq-nav a{color:var(--tinta);text-decoration:none;font-weight:500;font-size:.95rem;}
.aq-nav a:hover{color:var(--corriente-ink);}
.aq-header--oscuro{background:rgba(7,26,51,.7);border-color:rgba(255,255,255,.08);}
.aq-header--oscuro .aq-nav a{color:#DCE7F1;}

/* ---------- botones ---------- */
.aq-btn{display:inline-flex;align-items:center;gap:.5em;padding:.8em 1.3em;border-radius:var(--r-btn);border:1px solid transparent;font:500 .95rem var(--f-texto);cursor:pointer;text-decoration:none;transition:background .15s,color .15s,border-color .15s,transform .1s;}
.aq-btn:active{transform:translateY(1px);}
.aq-btn--primario{background:var(--abismo);color:#fff;}
.aq-btn--primario:hover{background:var(--oceano);}
.aq-btn--secundario{background:transparent;color:var(--abismo);border-color:var(--abismo);}
.aq-btn--secundario:hover{background:var(--espuma);}
.aq-btn--cian{background:var(--corriente);color:#fff;}
.aq-btn--cian:hover{background:var(--corriente-ink);}
.aq-btn--acento{background:var(--acento);color:var(--acento-texto);}
.aq-btn--acento:hover{background:var(--acento-ink);color:#fff;}
.aq-btn--ghost{background:transparent;color:var(--abismo);}
.aq-btn--ghost:hover{background:var(--espuma);}
.aq-seccion--oscura .aq-btn--secundario{color:#fff;border-color:rgba(255,255,255,.55);}
.aq-seccion--oscura .aq-btn--secundario:hover{background:rgba(255,255,255,.08);}
.aq-seccion--oscura .aq-btn--ghost{color:#fff;}
.aq-btn--grande{padding:1em 1.6em;font-size:1.05rem;}
.aq-btn--chico{padding:.55em 1em;font-size:.85rem;}
.aq-btn:focus-visible{outline:3px solid var(--corriente-soft);outline-offset:2px;}

/* ---------- tarjetas ---------- */
.aq-card{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-card);padding:var(--s5);box-shadow:var(--sombra-sm);}
.aq-card--elevada{box-shadow:var(--sombra);border-color:transparent;}
.aq-card.aq-seccion--oscura{background:var(--abismo-2);border-color:transparent;}
.aq-card--oscura{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:#DCE7F1;}
.aq-icono{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:var(--corriente-soft);color:var(--corriente-ink);font-size:1.1rem;margin-bottom:var(--s4);}
.aq-card--oscura .aq-icono{background:rgba(10,166,209,.15);color:var(--corriente);}
.aq-icono--acento{background:var(--acento-soft);color:var(--acento-ink);}

/* ---------- etiquetas ---------- */
.aq-tag{display:inline-flex;align-items:center;gap:.4em;padding:.3em .7em;border-radius:var(--r-tag);font-size:.78rem;font-weight:500;background:var(--espuma);color:var(--abismo);border:1px solid var(--corriente-line);}
.aq-tag--pill{border-radius:var(--r-pill);}
.aq-tag--acento{background:var(--acento-soft);color:var(--acento-ink);border-color:transparent;}
.aq-tag--ok{background:var(--ok-soft);color:var(--ok);border-color:transparent;}
.aq-tag--aviso{background:var(--aviso-soft);color:var(--aviso);border-color:transparent;}
.aq-tag--error{background:var(--error-soft);color:var(--error);border-color:transparent;}
.aq-tag--oscura{background:rgba(255,255,255,.08);color:#DCE7F1;border-color:rgba(255,255,255,.14);}

/* ---------- estadística ---------- */
.aq-stat{display:flex;flex-direction:column;gap:var(--s1);}
.aq-stat .l{font-size:.85rem;color:var(--gris);}
.aq-seccion--oscura .aq-num{color:#fff;}
.aq-seccion--oscura .aq-stat .l{color:#A9BBCC;}

/* ---------- formularios ---------- */
.aq-label{display:block;font-size:.85rem;font-weight:500;margin-bottom:var(--s2);color:var(--tinta);}
.aq-input{width:100%;padding:.75em .9em;border:1px solid var(--linea);border-radius:var(--r-input);font:400 .95rem var(--f-texto);background:#fff;color:var(--tinta);}
.aq-input:focus{outline:none;border-color:var(--corriente);box-shadow:0 0 0 3px var(--corriente-soft);}
.aq-ayuda{font-size:.8rem;color:var(--gris);margin-top:var(--s1);}

/* ---------- listas con ícono ---------- */
.aq-lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);}
.aq-lista li{display:flex;gap:var(--s3);align-items:flex-start;}
.aq-lista i{color:var(--corriente);margin-top:.25em;}

/* ---------- hero con imagen y parallax ---------- */
.aq-hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden;color:#fff;isolation:isolate;}
.aq-hero__img{position:absolute;inset:-12% 0;z-index:-2;background-size:cover;background-position:center;will-change:transform;}
.aq-hero__velo{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,26,51,.15) 0%,rgba(7,26,51,.55) 55%,rgba(7,26,51,.92) 100%);}
.aq-hero .aq-wrap{width:100%;}
.aq-hero .aq-eyebrow{color:#7FD6EE;}
.aq-hero .aq-btn--secundario{color:#fff;border-color:rgba(255,255,255,.55);}
.aq-hero .aq-btn--secundario:hover{background:rgba(255,255,255,.1);}
.aq-hero .aq-h1{color:#fff;max-width:16ch;}
.aq-hero .aq-lead{color:#DCE7F1;}
.aq-hero .aq-wrap{padding-bottom:var(--s8);padding-top:var(--s9);}
@media(prefers-reduced-motion:reduce){.aq-hero__img{inset:0;transform:none !important;} html{scroll-behavior:auto;}}

/* ---------- separadores y pie ---------- */
.aq-hr{border:0;border-top:1px solid var(--linea);margin:var(--s6) 0;}
.aq-pie{background:var(--abismo-2);color:#A9BBCC;padding:var(--s7) 0;font-size:.9rem;}
.aq-pie a{color:#DCE7F1;text-decoration:none;}
.aq-pie a:hover{color:var(--corriente);}