/* =============================================================================
   Spiza Solutions — hoja de estilos principal
   -----------------------------------------------------------------------------
   Orden: tokens · reset · tipografia · layout · componentes · secciones · utilidades
   Principio: baja especificidad, tokens reutilizables, sin decoracion competitiva.
   ========================================================================== */

/* base.css — tokens, reset y tipografia auxiliar (secciones 1, 2 y 4 del styles.css original) */

/* -----------------------------------------------------------------------------
   1. Tokens
   Contraste verificado (WCAG 2.2 AA) — no usar los tonos de marca puros para
   texto pequeno sobre fondos claros:
     --steel   #8795AA sobre --ink    = 5.43:1  OK (no sobre el encabezado translucido)
     --steel   #8795AA sobre blanco   = 3.04:1  SOLO bordes / iconos decorativos
     --muted   #5A6A80 sobre blanco   = 5.57:1  OK  (texto secundario en claro)
     --blue    #2F6BFF sobre blanco   = 4.54:1  trazos, bordes, foco e iconos
     --blue-action #2A63F2 con texto blanco = 5.00:1  OK  (fondo de los botones:
                el azul de marca queda en 4.49:1, justo por debajo del minimo)
     --blue-ink #1D4FD8 sobre --cloud = 6.29:1  OK  (enlaces sobre fondo claro)
     --teal    #18BFA5 sobre --ink    = 8.21:1  OK
     --teal-ink #0B7A68 sobre blanco  = 5.25:1  OK  (estado exitoso en claro)
-------------------------------------------------------------------------------- */
:root {
  /* Marca */
  --ink: #07111F;
  --blue: #2F6BFF;
  --teal: #18BFA5;
  --cloud: #F6F9FC;
  --white: #FFFFFF;
  --steel: #8795AA;

  /* Derivados accesibles */
  --ink-2: #0D1B2E;
  --muted: #5A6A80;
  --blue-action: #2A63F2;
  --blue-ink: #1D4FD8;
  --blue-hover: #1B57E8;
  --teal-ink: #0B7A68;
  --danger-ink: #B4231F;
  --on-dark: #C4D0DE;
  --on-dark-strong: #D5DDE8;
  /* Tono atenuado del logotipo: 5.7:1 incluso sobre el encabezado translucido. */
  --brand-muted: #A9B6C7;

  /* Superficies y bordes */
  --line-light: #E2E8F0;
  --line-dark: rgba(135, 149, 170, .22);

  /* Tipografia */
  --font-display: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-utility: 'Montserrat', 'Segoe UI', system-ui, sans-serif;

  /* Escala tipografica fluida */
  --fs-display: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.35vw, 2.15rem);
  --fs-h3: clamp(1.125rem, 1.03rem + .41vw, 1.3125rem);
  --fs-lead: clamp(1rem, .96rem + .2vw, 1.125rem);
  --fs-body: 1rem;
  --fs-sm: .9375rem;
  --fs-xs: .8125rem;

  /* Espaciado — multiplos de 4 / 8 */
  --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;
  --section-y: clamp(2.5rem, 1.8rem + 2.8vw, 4.25rem);

  /* Composicion */
  --container: 1200px;
  --measure: 65ch;
  --radius: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --header-h: 68px;

  /* Una sombra de reposo y una sola elevación protagonista. */
  --shadow-card: 0 1px 2px rgb(7 17 31 / .05), 0 10px 28px -22px rgb(7 17 31 / .28);
  --shadow-lift: 0 2px 4px rgb(7 17 31 / .08), 0 22px 52px -28px rgb(7 17 31 / .32);

  /* Movimiento */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur: 180ms;

  --focus: 0 0 0 3px var(--white), 0 0 0 6px var(--blue);
  --focus-dark: 0 0 0 3px var(--ink), 0 0 0 6px var(--teal);
}

/* -----------------------------------------------------------------------------
   2. Reset
-------------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.02em;
  text-wrap: balance;
}

p, ul, ol, dl, figure { margin: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--blue-ink); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--blue-hover); }
ul[class], ol[class] { list-style: none; padding: 0; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: 4px;
}

.hero :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.page-hero :focus-visible { box-shadow: var(--focus-dark); }

::selection { background: var(--blue); color: var(--white); }

/* -----------------------------------------------------------------------------
   4. Tipografia auxiliar
-------------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-utility);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-ink);
  margin: 0 0 var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: currentColor;
  flex: none;
}

.lead { font-size: var(--fs-lead); color: var(--muted); max-width: var(--measure); }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-4); }
.prose ul { list-style: disc; padding-left: 1.25em; }
.prose li + li { margin-top: var(--s-2); }