/* =====================================================================
 * OmnIA · tokens de diseño
 * Pegá este archivo tal cual en el proyecto y usá SOLO estas variables.
 *
 * ⚠ Todo tamaño, color, espaciado y radio sale de acá. Es lo único que
 * impide que en seis meses la hoja de estilos tenga veintiún tamaños de
 * letra distintos con saltos de medio píxel.
 *
 * La explicación de cada decisión está en MARCA-OMNIA-PARA-LA-WEB.md
 * ===================================================================== */

:root{
  /* ---------- marca ---------- */
  --gold:#e6cf8b;        /* EL color de marca: el «IA» del logo y los acentos */
  --gold-1:#f3e7bd;      /* inicio del degradé dorado */
  --gold-2:#c9a85f;      /* fin del degradé dorado */
  --cyan:#5fc8e8;        /* secundario: bajadas, etiquetas, links */
  --cyan-2:#3f8fd6;      /* azul de apoyo */

  /* ---------- superficies ---------- */
  --navy:#05080f;        /* el fondo de todo */
  --panel:#0c111d;       /* tarjetas */
  --panel-2:#121829;     /* elevado / hover */
  --line:rgba(255,255,255,.11);
  --line-2:rgba(255,255,255,.18);

  /* ---------- texto ---------- */
  --ink:#f4f5fb;         /* principal */
  --muted:#a8adc4;       /* secundario */
  --subtle:#8c91af;      /* ⚠ MEDIDO 4,9:1 sobre --panel. Es el piso: no oscurecerlo */

  /* ---------- estados ---------- */
  --ok:#34d399;
  --warn:#fbbf24;
  --bad:#f87171;
  --wa:#25d366;          /* SOLO el botón de WhatsApp */

  /* ---------- tipografía: 8 escalones, ninguno a medio píxel ---------- */
  --fs-xs:11px; --fs-sm:13px; --fs-md:14px; --fs-lg:16px;
  --fs-xl:20px; --fs-2xl:26px; --fs-3xl:34px; --fs-4xl:44px;

  --tit:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;     /* títulos */
  --baj:'Rajdhani',system-ui,'Segoe UI',sans-serif;                  /* etiquetas en mayúscula */
  --cuerpo:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; /* cuerpo */

  /* ---------- espaciado: grilla de 4 ---------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;

  /* ---------- radios: tres, no más ---------- */
  --r-sm:8px; --r-md:16px; --r-pill:999px;

  /* ---------- movimiento: UN easing, entre 120 y 220 ms ---------- */
  --ease:.15s ease;

  color-scheme:dark;
}

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

body{
  font-family:var(--cuerpo);
  font-size:var(--fs-lg);
  line-height:1.6;
  color:var(--ink);
  /* ⚠ El fondo se pinta explícito: si queda transparente, hereda el del visor. */
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(230,207,139,.13), transparent 62%),
    radial-gradient(900px 540px at 104% 8%, rgba(95,200,232,.12), transparent 58%),
    var(--navy);
  -webkit-font-smoothing:antialiased;
}

/* ---------- tipografía ---------- */
h1,h2,h3{ font-family:var(--tit); font-weight:800; letter-spacing:-.02em;
          line-height:1.15; text-wrap:balance }
h1{ font-size:var(--fs-4xl) }
h2{ font-size:var(--fs-3xl) }
h3{ font-size:var(--fs-xl) }
p{ max-width:68ch }          /* cerca de 65 caracteres: es lo que se lee cómodo */

/* La etiqueta en mayúscula con tracking amplio: el gesto tipográfico de la marca. */
.eyebrow{
  font-family:var(--baj); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.20em; text-transform:uppercase; color:var(--cyan);
}

/* El wordmark. «Omn» en blanco, «IA» en dorado, siempre sobre fondo oscuro. */
.marca{ font-family:var(--tit); font-weight:800; letter-spacing:-.02em; color:var(--ink) }
.marca b{ color:var(--gold); font-weight:800 }

/* Números que se comparan en columna: sin esto los dígitos bailan y se nota. */
.num{ font-variant-numeric:tabular-nums }

/* ---------- el CTA: uno solo en toda la página, y es WhatsApp ---------- */
.cta{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  background:var(--wa); color:#04231a;
  font-family:var(--cuerpo); font-weight:700; font-size:var(--fs-lg);
  padding:var(--sp-3) var(--sp-5); border:0; border-radius:var(--r-pill);
  min-height:48px; cursor:pointer; text-decoration:none;
  transition:filter var(--ease), transform var(--ease);
}
.cta:hover{ filter:brightness(1.07) }
.cta:active{ transform:scale(.98) }

/* ---------- botón secundario ---------- */
.btn{
  background:var(--panel-2); color:var(--ink); border:1px solid var(--line-2);
  border-radius:var(--r-sm); padding:var(--sp-3) var(--sp-4);
  font-family:var(--cuerpo); font-weight:700; font-size:var(--fs-md);
  min-height:44px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  transition:border-color var(--ease), background var(--ease);
}
.btn:hover{ border-color:var(--muted) }

/* ---------- tarjeta ----------
   ⚠ No todo es una tarjeta: borde, relleno, radio y sombra dicen «objeto
   separado». Si se los ponés a todos los bloques, se aplana la jerarquía. */
.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--sp-5);
}

/* ---------- accesibilidad, no opcional ---------- */
:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px }
img{ max-width:100% }
.scroll-x{ overflow-x:auto }     /* el contenido ancho scrollea en SU caja */

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}

/* ---------- celular ----------
   Todo lo que se toca, 44 px de alto mínimo. Se mide, no se estima. */
@media (max-width:600px){
  body{ font-size:var(--fs-md) }
  h1{ font-size:var(--fs-3xl) }
  h2{ font-size:var(--fs-2xl) }
  .cta{ width:100%; justify-content:center }
  button, .btn, a.btn{ min-height:44px }
}