/* ============================================================
   BASE.CSS — Tipografía, body, layout global
   ============================================================ */

body {
  font-family: var(--font-family-base);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--gray-800);
  background-color: var(--white);
}

/* -------- Títulos: jerarquía similar al patrón FedEx -------- */
h1 {
  font-size: clamp(2rem, 5vw + 1rem, var(--fs-5xl));
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(1.75rem, 3vw + 0.5rem, var(--fs-3xl));
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
}

h3 {
  font-size: clamp(1.25rem, 1.5vw + 0.75rem, var(--fs-xl));
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
}

h4 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

p {
  margin: 0;
  line-height: var(--lh-relaxed);
  color: var(--gray-800);
}

/* -------- Enlaces globales (equivalente a fxg-link) -------- */
a {
  color: var(--link-blue);
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--link-blue-dark);
  text-decoration: underline;
}

/* -------- Layout: contenedor centrado (equivalente a fxg-wrapper) -------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Skip link para accesibilidad por teclado */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--wpt-green);
  color: var(--white);
  padding: var(--space-2) var(--space-4);
  z-index: 1000;
  transition: top var(--transition-base);
}

.skip-link:focus {
  top: 0;
}

/* Imágenes responsive */
img {
  height: auto;
}

/* Área principal con espacio para header sticky */
main {
  display: block;
}