/*
  K3 Ingenieria -- base styles
  Reset + type defaults. Depends on tokens.css being loaded first.
*/

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto; /* no scroll-hijacking or smooth-scroll effects per the plan */
}

html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main { display: block; }

/* height: auto is not decorative -- without it, an <img> carrying
   HTML width/height attributes (every image on this site does, to
   avoid layout shift) keeps its attribute-derived height as a fixed
   px value, which silently defeats any aspect-ratio rule on the
   element: aspect-ratio only computes a size for a dimension that's
   auto, and the attribute makes height definite instead. */
img, svg { max-width: 100%; height: auto; display: block; }

/* ---- Headings: Archivo, navy, the plan's line-height floors ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy);
  margin: 0;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-stretch: 95%; /* the wdth axis is the Spanish-length lever, not a decoration */
  text-wrap: balance; /* degrades silently where unsupported */
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  text-wrap: balance;
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

h4 {
  font-size: var(--fs-table);
  line-height: var(--lh-table);
}

p {
  margin: 0 0 1em;
  max-width: var(--measure-body);
  text-wrap: pretty; /* degrades silently where unsupported */
}
p:last-child { margin-bottom: 0; }

.standfirst {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-standfirst);
  line-height: var(--lh-standfirst);
  max-width: var(--measure-standfirst);
  color: var(--navy);
  margin: 0 0 1em;
}

/* Never justify text, anywhere. */
p, .standfirst { text-align: left; }

/* Utility for narrow columns only (label rails, table cells under ~30ch) --
   applied per-component when those layouts are built, never globally. */
.hyphenate-narrow { hyphens: auto; }

/* ---- Links ----
   Navy text, teal underline -- the underline IS the affordance and, per
   motion moment 3, IS the focus treatment. Thickness/offset transition
   120ms; :focus-visible triggers the same change as :hover. */
a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--teal);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition:
    text-decoration-thickness var(--motion-fast) var(--ease-out),
    text-underline-offset var(--motion-fast) var(--ease-out);
}
a:hover,
a:focus-visible {
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
a:focus-visible { outline: none; } /* the underline change is the visible focus signal */

/* ---- Eyebrow / label ----
   13px is well below the >=16px-semibold threshold the plan sets for using
   solid teal as a text color on navy, so this NEVER sets teal as the font
   color -- default is navy (light surfaces); .eyebrow--inverse is
   teal-tint for use inside navy panels (footer, contact strip, etc.). */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  text-transform: uppercase;
  font-feature-settings: "case" 1; /* keeps ¿ ¡ positioned correctly in caps */
  letter-spacing: 0.06em;
  color: var(--navy);
}
.eyebrow--inverse { color: var(--teal-tint); }

/* ---- Table / spec text ---- */
.table-text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-table);
  line-height: var(--lh-table);
  font-feature-settings: "tnum" 1;
}

/* ---- Caption ---- */
.caption {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-secondary);
}

/* ---- Reduced motion: global override ----
   Collapses all three approved motion moments (panel hover, mobile nav,
   link underline) to instant changes -- no transform, no scale, no height
   animation. This single rule is the mechanism; no per-component
   duplication needed. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}