/* ==========================================================================
   INVEXUS · base.css
   Reset acotado, tipografía global, contenedores y utilidades.
   Depende de tokens.css. No define ningún valor literal de color.
   ========================================================================== */

/* --- Reset mínimo --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body.inv {
  margin: 0;
  background: var(--inv-bg);
  color: var(--inv-text);
  font-family: var(--inv-font-body);
  font-size: var(--inv-fs-body);
  line-height: var(--inv-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* --- Tipografía -----------------------------------------------------------
   DEFECTO SISTEMICO CORREGIDO EL 30/08/2026
   Estas reglas se escribian como ".inv h1" (especificidad 0,1,1). Cualquier
   clase de utilidad posterior, como .inv-phero__title o .inv-eyebrow, tiene
   0,1,0 y PERDIA: el titulo del hero interno salia en navy sobre fondo navy,
   casi invisible, y los eyebrow marcados como <h2> se pintaban enormes.
   Con :where() el selector de elemento aporta CERO especificidad, asi que el
   valor por defecto sigue aplicandose pero cualquier clase lo sobrescribe sin
   pelear. Es lo que se espera de una base tipografica. */
.inv :where(h1, h2, h3),
.inv-h1, .inv-h2, .inv-h3 {
  font-family: var(--inv-font-heading);
  color: var(--inv-ink-strong);
  margin: 0 0 var(--inv-space-3);
  text-wrap: balance;
}

.inv-display { font-size: var(--inv-fs-display); font-weight: var(--inv-fw-bold);
               line-height: var(--inv-lh-display); letter-spacing: var(--inv-ls-display); }
.inv :where(h1), .inv-h1 { font-size: var(--inv-fs-h1); font-weight: var(--inv-fw-bold);
               line-height: var(--inv-lh-heading); letter-spacing: var(--inv-ls-heading); }
.inv :where(h2), .inv-h2 { font-size: var(--inv-fs-h2); font-weight: var(--inv-fw-bold);
               line-height: var(--inv-lh-heading); letter-spacing: var(--inv-ls-heading); }
.inv :where(h3), .inv-h3 { font-size: var(--inv-fs-h3); font-weight: var(--inv-fw-semibold);
               line-height: 1.25; }

.inv-lead   { font-size: var(--inv-fs-body-lg); color: var(--inv-muted); }
.inv-small  { font-size: var(--inv-fs-small); }
.inv-muted  { color: var(--inv-muted); }

/* Eyebrow: la etiqueta corta sobre el H2 (§12). */
.inv .inv-eyebrow, .inv-eyebrow {
  font-family: var(--inv-font-heading);
  font-size: var(--inv-fs-small);
  font-weight: var(--inv-fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--inv-brand-ink);
  margin: 0 0 var(--inv-space-2);
}

/* --- Enlaces -------------------------------------------------------------- */
.inv a { color: var(--inv-color-link); text-decoration-thickness: 1px;
         text-underline-offset: .18em; transition: color var(--inv-duration-fast) var(--inv-ease); }
.inv a:hover { color: var(--inv-color-link-hover); }

/* Foco visible SIEMPRE. Está prohibido suprimir el contorno sin sustituto
   (§19 A5): en este archivo no existe ninguna regla que lo haga. */
.inv :focus-visible {
  outline: 3px solid var(--inv-color-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Contenedores (§3.1) --------------------------------------------------- */
.inv-container {
  width: 100%;
  max-width: var(--inv-container);
  margin-inline: auto;
  padding-inline: var(--inv-gutter);
}
.inv-container--text { max-width: var(--inv-container-text); }

/* --- Sección -------------------------------------------------------------- */
.inv-section { padding-block: var(--inv-section-y); }
.inv-section--tight { padding-block: var(--inv-space-5); }
.inv-section--bg    { background: var(--inv-bg); }
.inv-section--soft  { background: var(--inv-soft); }
.inv-section--white { background: var(--inv-surface); }
.inv-section--navy  { background: var(--inv-navy); color: var(--inv-on-dark); }
.inv-section--navy :where(h1,h2,h3) { color: var(--inv-on-dark); }
.inv-section--navy .inv-lead, .inv-section--navy .inv-muted { color: var(--inv-on-dark-muted); }
.inv-section--navy .inv-eyebrow { color: var(--inv-cyan-bright); }
/* El scrim va DELANTE del gradiente en la misma propiedad: la primera capa
   de background-image se pinta encima. Garantiza contraste en el lado del
   texto sin alterar el gradiente aprobado. */
.inv-section--gradient {
  background-image: var(--inv-scrim-dark), var(--inv-gradient-brand);
  color: var(--inv-on-dark);
}
.inv-section--gradient h2 { color: var(--inv-on-dark); }

/* --- Grid (§3.2) ----------------------------------------------------------- */
.inv-grid { display: grid; gap: var(--inv-space-4); }
.inv-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.inv-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.inv-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.inv-split   { display: grid; grid-template-columns: 56fr 44fr; gap: var(--inv-space-6);
               align-items: center; }   /* hero 56/44 según §13 */
.inv-split--even { grid-template-columns: 1fr 1fr; }

/* --- Botones (§5) ---------------------------------------------------------- */
.inv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--inv-space-1);
  min-height: 52px;                       /* objetivo táctil §19 A6 */
  padding: 0 var(--inv-space-4);
  border-radius: var(--inv-radius-btn);
  font-family: var(--inv-font-heading);
  font-size: var(--inv-fs-body);
  font-weight: var(--inv-fw-semibold);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  /* Astra aplica text-transform:uppercase a <button>. Sin esto, el boton de
     un formulario sale en mayusculas y el de un enlace no: dos botones del
     mismo sistema con aspecto distinto. */
  text-transform: none;
  letter-spacing: 0;
  transition: background-color var(--inv-duration-base) var(--inv-ease),
              transform var(--inv-duration-fast) var(--inv-ease);
}
/* ESPECIFICIDAD · defecto corregido el 30/08/2026
   Las variantes se escribian como .inv-btn--primary (0,1,0), pero la regla
   generica de enlaces .inv a (0,1,1) tiene MAS especificidad y les imponia el
   color de enlace. Resultado visible en la captura: el boton primario salia
   como un rectangulo azul con el texto del mismo azul, ilegible.
   Anteponer .inv sube la especificidad a (0,2,0) y gana con claridad. */
.inv .inv-btn--primary { background: var(--inv-btn-primary-bg); color: var(--inv-btn-primary-fg); }
/* El color del texto de este boton es --inv-btn-primary-fg, no la superficie
   general: en modo noche --inv-surface es oscura y el hover se quedaba con
   texto oscuro sobre un azul claro. */
.inv .inv-btn--primary:hover { background: var(--inv-btn-primary-bg-hover); color: var(--inv-btn-primary-fg); }
.inv .inv-btn--secondary { background: transparent; color: var(--inv-btn-secondary-fg);
                           border-color: var(--inv-btn-secondary-border); }
.inv .inv-btn--secondary:hover { border-color: var(--inv-brand-ink); color: var(--inv-brand-ink); }
/* ESTE BOTON NO SIGUE AL TEMA, Y ES DELIBERADO.
   Vive SIEMPRE sobre una superficie oscura -el hero, que es oscuro en los dos
   modos-, asi que tiene que ser SIEMPRE un boton claro. Si usara
   --inv-surface se volveria casi negro en modo noche y desapareceria justo
   sobre el fondo contra el que tiene que destacar.
   Contraste del texto sobre su propio fondo: 16.1 : 1 en reposo. */
.inv .inv-btn--on-dark { background: var(--inv-on-dark); color: var(--inv-fixed-ink); }
.inv .inv-btn--on-dark:hover { background: var(--inv-fixed-soft); color: var(--inv-fixed-ink); }
/* Secundario sobre fondo oscuro (hero, CTA). Blanco sobre navy = 16.69, AA. */
/* EL HERMANO DE .inv-btn--on-dark, Y CON EL MISMO PROBLEMA.
   Usaba --inv-surface como color de TEXTO. En modo dia eso es blanco y va
   bien; en modo noche --inv-surface pasa a ser #0E2233 -una superficie casi
   negra- y el boton se volvia texto oscuro sobre el hero oscuro: practicamente
   invisible. Se vio en la captura nocturna, no leyendo el CSS.
   Como el hero es oscuro en los DOS modos, este boton no sigue al tema.
   Contraste del texto sobre el hero: 12,6 : 1. */
.inv .inv-btn--ghost-light { background: transparent; color: var(--inv-on-dark);
                             border-color: rgba(255,255,255,.35); }
.inv .inv-btn--ghost-light:hover { background: rgba(255,255,255,.10);
                                   border-color: var(--inv-on-dark); color: var(--inv-on-dark); }
.inv-btn:active { transform: translateY(1px); }

.inv-actions { display: flex; flex-wrap: wrap; gap: var(--inv-space-2); }

/* --- Badges ---------------------------------------------------------------- */
.inv-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--inv-radius-pill);
  font-size: var(--inv-fs-small); font-weight: var(--inv-fw-medium);
  background: var(--inv-soft); color: var(--inv-brand-ink);
}
.inv-badge--example { background: var(--inv-badge-warn-bg); color: var(--inv-warning-ink); }
.inv-badge--open    { background: var(--inv-badge-ok-bg);   color: var(--inv-green-ink); }

/* --- Utilidades ------------------------------------------------------------ */
.inv-visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.inv-stack > * + * { margin-top: var(--inv-space-3); }
.inv-center { text-align: center; }