/* =========================================================
   GLOBAL — Reset, base, grid, utilidades
   Mobile-first: todo se define para mobile y se amplía con
   min-width media queries (nunca al revés).
   ========================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-navy);
  line-height: var(--leading-tight);
  font-weight: 600;
}
h1 { font-size: var(--text-4xl); font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
p  { max-width: 68ch; }
a  { color: var(--color-teal); text-decoration: none; }
a:hover { color: var(--color-blue); text-decoration: underline; }
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }

/* ---------- Foco visible (accesibilidad) ---------- */
:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Utilidad: skip-link ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-navy); color: #fff;
  padding: var(--space-3) var(--space-4);
  z-index: 2000; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Contenedor ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ---------- Grid de 12 columnas (mobile-first) ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* mobile: 4 col */
  gap: var(--space-4); /* 16px en mobile: --grid-gap (24px) se sentía apretado en 2-up */
}
@media (min-width: 640px)  { .grid { grid-template-columns: repeat(8, 1fr); gap: var(--grid-gap); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(12, 1fr); gap: var(--grid-gap); } }

/* Spans — se aplican explícitamente a partir del breakpoint que corresponda */
[class*="col-"] { grid-column: span 4; } /* default mobile: ocupa todo el ancho de 4 */
@media (min-width: 640px) {
  .col-sm-2 { grid-column: span 2; }
  .col-sm-4 { grid-column: span 4; }
  .col-sm-8 { grid-column: span 8; }
}
@media (min-width: 1024px) {
  .col-3  { grid-column: span 3; }
  .col-4  { grid-column: span 4; }
  .col-6  { grid-column: span 6; }
  .col-8  { grid-column: span 8; }
  .col-12 { grid-column: span 12; }
}

/* AUDITORÍA RESPONSIVE: el grid mobile-first solo tenía un
   fallback de "1 columna" (span 4 = ancho completo). Para
   grillas de tarjetas chicas (empresas, swatches de color,
   íconos) eso obligaba a un scroll larguísimo en celular.
   Se agrega un par de utilidades explícitas para 2-up en mobile,
   sin tocar el comportamiento en tablet/desktop. */
.col-mob-2 { grid-column: span 2; } /* 2 por fila desde el celular más chico */
.col-mob-4 { grid-column: span 4; } /* ancho completo, explícito */

/* ---------- Secciones ----------
   AUDITORÍA RESPONSIVE: el padding vertical de --space-8 (64px)
   fijo en mobile generaba demasiado "aire" vacío en pantallas
   chicas frente al poco contenido visible por scroll. Se reduce
   en mobile y crece en breakpoints mayores. */
.section {
  padding-block: var(--space-6); /* 32px en mobile */
}
@media (min-width: 640px)  { .section { padding-block: var(--space-7); } } /* 48px tablet */
@media (min-width: 1024px) { .section { padding-block: var(--space-8); } } /* 64px desktop */
.section--alt { background: var(--color-bg-alt); }
.section--navy { background: var(--color-navy); color: var(--color-text-inverse); }
.section--navy h2, .section--navy h3 { color: #fff; }

/* ---------- Flex utilidades ---------- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.flex-wrap { flex-wrap: wrap; }

/* ---------- Texto utilidades ---------- */
.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-orange);
  font-weight: 600;
}

/* =========================================================
   ELEMENTO DE FIRMA — divisor "flecha de crecimiento"
   Reinterpreta la flecha ascendente del isologo como
   separador de sección, con los puntos de color del logo.
   ========================================================= */
.growth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 28px;
  margin-block: var(--space-6);
}
.growth-divider svg { height: 100%; width: auto; flex-shrink: 0; }
.growth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}