/* ==========================================================================
   Tresdiez Consulting — Site Styles
   Layout, components, and page-specific rules. Reads tokens from tokens.css.
   Single-class selectors only — no element-type selectors for spacing,
   to avoid specificity conflicts between .section-style rules.
   ========================================================================== */

/* --- Reset / base -------------------------------------------------------- */

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

body {
  margin: 0;
  background: var(--base);
  color: var(--tinta);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, dt, figure, ul, ol {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img { max-width: 100%; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
}

/* --- Skip link ------------------------------------------------------------ */

.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 100;
  background: var(--tinta);
  color: var(--blanco);
  padding: 10px 16px;
  border-radius: 2px;
  font-family: var(--font-display);
  font-weight: var(--fw-nav);
  font-size: var(--fs-nav);
  text-decoration: none;
  transition: top 0.16s ease;
}

.skip-link:focus {
  top: 16px;
}

/* --- Layout primitives ----------------------------------------------------- */

.container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 24px;
}

@media (max-width: 768px) {
  .container { padding-inline: 16px; }
}

.section {
  padding-block: 128px;
}

.section--tight {
  padding-block: 96px;
}

@media (max-width: 768px) {
  .section { padding-block: 80px; }
  .section--tight { padding-block: 64px; }
}

/* Section header device — mono label left, Archivo heading right.
   Used for every content section on the page except Divisions, whose
   panels already carry their own label→heading pair. */
.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 32px;
  margin-bottom: 40px;
}

.section__label {
  flex: 0 0 auto;
  padding-top: 0.4em;
  font-family: var(--font-mono);
  font-weight: var(--fw-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--verde-texto);
}

.section__heading {
  flex: 1 1 280px;
  font-family: var(--font-display);
  font-weight: var(--fw-h2);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-stretch: var(--wdth-h2);
  color: var(--tinta);
}

/* --- Type utilities --------------------------------------------------------- */

.eyebrow {
  display: block;
  margin-bottom: 20px;
  font-family: var(--font-mono);
  font-weight: var(--fw-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.hero-eyebrow { color: var(--verde-texto); }

/* --- Buttons + links --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 28px;
  border: none;
  border-radius: 2px;
  font-family: var(--font-display);
  font-weight: var(--fw-nav);
  font-size: var(--fs-nav);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.btn--primary {
  background: var(--tinta);
  color: var(--blanco);
}

.btn--primary:hover {
  background: var(--tinta-700);
}

.btn--secondary {
  background: var(--verde);
  color: var(--tinta);
}

.btn--secondary:hover {
  background: color-mix(in srgb, var(--verde) 82%, black);
}

.btn--cotizar {
  padding: 10px 20px;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--linea-fuerte);
  font-family: var(--font-display);
  font-weight: var(--fw-nav);
  font-size: var(--fs-nav);
  color: var(--tinta);
  text-decoration: none;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.link-arrow:hover {
  color: var(--verde-texto);
  border-color: var(--verde);
}

/* --- Header ------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 72px;
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
}

.header-inner {
  max-width: 1280px;
  height: 100%;
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.logo { display: flex; align-items: center; flex: 0 0 auto; }
.logo img { height: 30px; width: auto; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.nav-toggle__icon {
  position: relative;
  width: 22px;
  height: 2px;
  background: var(--tinta);
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--tinta);
  transition: transform 0.16s ease, top 0.16s ease;
}

.nav-toggle__icon::before { top: -7px; }
.nav-toggle__icon::after { top: 7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__icon { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { top: 0; transform: rotate(-45deg); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nav-primary { flex: 1 1 auto; }

.nav-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
}

/* Below 900px the nav row no longer fits (logo + links + Escríbenos), and
   the fixed-height sticky header can't grow to accommodate a wrapped
   row — it used to overflow past the header box and overlap the page
   content underneath. The toggle now takes the link list out of flow
   entirely and renders it as a dropdown panel, driven by site.js. */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }

  .nav-primary {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    max-height: 0;
    overflow: hidden;
    background: var(--blanco);
    border-bottom: 1px solid var(--linea);
    transition: max-height 0.2s ease;
  }

  .nav-primary.is-open {
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    padding: 8px 24px 24px;
  }

  /* .nav-link is display:inline-block by default (correct for the
     horizontal desktop row), which sizes it to its text — the .li wraps
     full-width but the tap target inside it didn't. Force it to fill the
     row so the whole item, not just the word, is tappable. */
  .nav-link {
    display: block;
    width: 100%;
    padding-block: 16px;
    border-bottom: 1px solid var(--linea);
  }
}

.nav-link {
  display: inline-block;
  padding-block: 26px;
  border-bottom: 2px solid transparent;
  font-family: var(--font-display);
  font-weight: var(--fw-nav);
  font-size: var(--fs-nav);
  color: var(--tinta-medio);
  text-decoration: none;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.nav-link:hover { color: var(--tinta); }

.nav-link.is-active {
  color: var(--tinta);
  border-bottom-color: var(--verde);
}

/* --- Footer ------------------------------------------------------------------ */

.site-footer {
  background: var(--tinta);
  color: var(--blanco);
}

.footer-inner {
  max-width: 1280px;
  margin-inline: auto;
  padding: 104px 24px 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 32px;
}

@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr 1fr; row-gap: 40px; }
}

@media (max-width: 768px) {
  .footer-inner { padding-top: 88px; }
}

@media (max-width: 600px) {
  .footer-inner { grid-template-columns: 1fr; }
}

.footer-logo { display: block; height: 28px; width: auto; margin-bottom: 12px; }

/* The SVG's own inline <style> sets .cls-text (the "Consulting" wordmark) to
   --tinta by default — correct for the header, which sits on --base. Here in
   the footer, the logo sits on --tinta itself, so the wordmark needs to flip
   to a light fill. Scoped to .footer-logo only; the green "3·10" mark
   (.cls-2/.cls-3) is untouched. (0,2,0) specificity beats the inline <style>
   block's (0,1,0) .cls-text rule regardless of source order. No --cream
   token exists in this system — --blanco is the actual light-on-ink text
   color used everywhere else on the footer/ink surfaces. */
.footer-logo .cls-text { fill: var(--blanco); }

.footer-tagline {
  max-width: 32ch;
  font-family: var(--font-body);
  font-weight: var(--fw-small);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: rgba(255, 255, 255, 0.7);
}

.footer-heading {
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-weight: var(--fw-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.footer-nav ul, .footer-legal ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-nav a, .footer-legal a {
  font-family: var(--font-display);
  font-weight: var(--fw-nav);
  font-size: var(--fs-nav);
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.16s ease;
}

.footer-nav a:hover, .footer-legal a:hover { color: var(--verde); }

.footer-ficha {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-ficha > div { display: flex; flex-direction: column; gap: 2px; }

.footer-ficha dt {
  font-family: var(--font-mono);
  font-weight: var(--fw-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(255, 255, 255, 0.5);
}

.footer-ficha dd {
  font-family: var(--font-mono);
  font-weight: var(--fw-data);
  font-size: var(--fs-data);
  color: rgba(255, 255, 255, 0.9);
  font-variant-numeric: tabular-nums;
}

.footer-bottom {
  max-width: 1280px;
  margin-inline: auto;
  padding: 20px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-copyright {
  font-family: var(--font-body);
  font-weight: var(--fw-small);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.55);
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  padding-block: 64px 0;
}

/* Subtle background texture, behind all hero content. isolation: isolate on
   .hero contains this negative z-index to the hero's own stacking context,
   so it stays behind .hero-inner/.hero-figure without touching page z-index
   elsewhere. Opacity only, no scrim/gradient — hero's light bg + dark text
   stay exactly as designed. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../img/material/hero-bg-fibra-clara.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.7;
}

.hero-inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  padding-bottom: 56px;
}

.hero-content { grid-column: 1 / 8; }

.hero-heading {
  margin-bottom: 24px;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-stretch: var(--wdth-display);
  color: var(--tinta);
}

.hero-lead {
  max-width: var(--measure-lead);
  margin-bottom: 32px;
  font-family: var(--font-body);
  font-weight: var(--fw-lead);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--tinta-medio);
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.ficha {
  grid-column: 9 / 13;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 2px;
}

.ficha__row { display: flex; flex-direction: column; gap: 4px; }

.ficha__label {
  font-family: var(--font-mono);
  font-weight: var(--fw-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--tinta-medio);
}

.ficha__value {
  font-family: var(--font-mono);
  font-weight: var(--fw-data);
  font-size: var(--fs-data);
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .hero-content { grid-column: 1 / -1; }
  .ficha { grid-column: 1 / -1; }
}

/* Full-bleed static corrugated cross-section. No draw-on animation —
   the figure renders complete; see plan §5. */
.hero-figure { background: var(--base-alt); }

.hero-figure__pattern {
  display: block;
  width: 100%;
  height: 104px;
}

@media (max-width: 600px) {
  .hero-figure__pattern { height: 64px; }
}

.hero-figure__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-block: 16px;
  border-top: 1px solid var(--linea);
}

.hero-figure__dim {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-weight: var(--fw-data);
  font-size: var(--fs-data);
  color: var(--verde-texto);
  font-variant-numeric: tabular-nums;
}

.hero-figure__dim-icon {
  width: 44px;
  height: 11px;
  fill: none;
  stroke: var(--verde);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-figure__spec {
  font-family: var(--font-mono);
  font-weight: var(--fw-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--tinta-medio);
}

/* --- Divisions ------------------------------------------------------------- */

.divisions {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 900px) {
  .divisions { grid-template-columns: 1fr; }
}

.division { display: flex; flex-direction: column; }

.division__media { aspect-ratio: 16 / 9; }

.division__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.division__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 48px 40px 56px;
}

.division__label {
  font-family: var(--font-mono);
  font-weight: var(--fw-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.division__heading {
  font-family: var(--font-display);
  font-weight: var(--fw-h3);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

.division__text {
  max-width: 42ch;
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.division__body .link-arrow { margin-top: auto; align-self: flex-start; }

.division--kraft { background: var(--kraft-surf); color: var(--tinta-700); }
.division--kraft .division__label { color: var(--tinta-700); }
.division--kraft .division__text { color: var(--tinta-medio); }

.division--ink { background: var(--tinta); color: var(--blanco); }
.division--ink .division__label { color: rgba(255, 255, 255, 0.6); }
.division--ink .division__text { color: rgba(255, 255, 255, 0.72); }
.division--ink .link-arrow { color: var(--blanco); border-color: rgba(255, 255, 255, 0.3); }
.division--ink .link-arrow:hover { color: var(--verde); border-color: var(--verde); }

/* --- Cómo trabajamos --------------------------------------------------------- */

.how-list { border-bottom: 1px solid var(--linea); }

.how-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px 32px;
  padding: 24px 0;
  border-top: 1px solid var(--linea);
}

.how-row__label {
  font-family: var(--font-mono);
  font-weight: var(--fw-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--verde-texto);
}

.how-row__value {
  max-width: 60ch;
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--tinta);
}

@media (max-width: 600px) {
  .how-row { grid-template-columns: 1fr; gap: 8px; }
}

/* --- Nosotros teaser -------------------------------------------------------- */

/* overflow-x: hidden is a safety net for .teaser__media's right-edge
   breakout below — negative-margin bleed techniques can round to a
   sub-pixel over on some viewports/zoom levels and force an unwanted
   horizontal scrollbar; this guarantees they can't. */
.teaser { background: var(--base-alt); overflow-x: hidden; }

/* Text ~49% left, image ~49% right — one integrated row, same 24px gap
   as the hero's own text/visual split (.hero-inner). align-items defaults
   to stretch here (no override), so .teaser__media spans the exact same
   top-to-bottom range as .teaser__content (heading top to link bottom)
   in a single grid row — the image has no fixed aspect-ratio on desktop,
   it crops via object-fit: cover to whatever height that row resolves to. */
.teaser__row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.teaser__content { grid-column: 1 / 7; }

/* Left edge / vertical stretch stay exactly as before (grid-column start +
   default align-items: stretch); margin-right is what breaks the right
   edge out to the viewport edge. .container is max-width: 1280px,
   padding-inline: 24px (unchanged below 900px, only drops to 16px below
   768px — outside this range, since the section stacks to full-width at
   900px anyway). So the gap from this grid item's un-bled right edge to
   the actual viewport edge is: the container's own right padding (24px)
   plus, once the viewport exceeds 1280px, half of the leftover space
   outside the centered container. max() unifies both cases in one
   expression instead of needing a separate rule above/below 1280px. */
.teaser__media {
  grid-column: 7 / 13;
  margin-right: calc(-1 * max(24px, (100vw - 1280px) / 2 + 24px));
}

.teaser__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .teaser__content { grid-column: 1 / -1; }
  .teaser__media {
    grid-column: 1 / -1;
    margin-right: 0;
    aspect-ratio: 4 / 3;
    margin-top: 32px;
  }
}

.teaser__text {
  max-width: var(--measure-lead);
  margin-bottom: 24px;
  font-family: var(--font-body);
  font-weight: var(--fw-body-lg);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--tinta-medio);
}

/* --- Footer boundary divider ---------------------------------------------
   Every page's last section sits directly on the footer. Separation is
   structural, not the flute motif (that stays in the Inicio hero only) and
   not a color change (green-band was tried on the CTA band and reverted —
   broke the plan's "green is rationed" rule, §7): a real rule plus extra
   padding on both sides of the boundary. Applied via `.section--footer-
   divider` on whichever section precedes the footer on a given page — the
   three CTA bands (Inicio, Nosotros, Servicios), and the plain closing
   section on Contacto and both legal pages. `.footer-inner`'s top padding
   is bumped globally to match, since every footer now follows a divider.
   Rule color is context-dependent: `--linea-fuerte` reads at only 1.57:1 on
   the light `--base` background Contacto/legal sections sit on — not a real
   division — so the default here is `--tinta-medio` (5.42:1 on --base,
   already the site's established secondary-text color); the CTA band variant
   below swaps back to `--linea-fuerte` (10.27:1 on --tinta), since the ink
   band needs a lighter line, not a darker one. */
.section--footer-divider {
  padding-bottom: 168px;
  border-bottom: 2px solid var(--tinta-medio);
}

.section--tight.section--footer-divider { padding-bottom: 136px; }

@media (max-width: 768px) {
  .section--footer-divider { padding-bottom: 104px; }
  .section--tight.section--footer-divider { padding-bottom: 88px; }
}

.cta-band.section--footer-divider { border-bottom-color: var(--linea-fuerte); }

/* --- Closing CTA band -------------------------------------------------------- */

.cta-band { background: var(--tinta); }

.cta-band .section__label { color: rgba(255, 255, 255, 0.7); }
.cta-band .section__heading { color: var(--blanco); }

.cta-band__text {
  max-width: var(--measure-lead);
  margin-bottom: 32px;
  font-family: var(--font-body);
  font-weight: var(--fw-body-lg);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: rgba(255, 255, 255, 0.78);
}

/* --- Scroll reveal (plan §5) — 8px rise + fade, fired once by site.js's
   IntersectionObserver. Group children get a JS-set transition-delay for
   the 60ms stagger; reduced-motion users see content already in place. */

[data-reveal],
[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

[data-reveal].is-revealed,
[data-reveal-group] > *.is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-group] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Page header band (inner pages) ---------------------------------------- */

.page-header { background: var(--base-alt); padding-block: 48px 56px; }

.page-header__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-bottom: 16px;
}

.page-header__heading {
  font-family: var(--font-display);
  font-weight: var(--fw-h1);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  font-stretch: var(--wdth-h1);
  color: var(--tinta);
}

.page-header__updated {
  font-family: var(--font-mono);
  font-weight: var(--fw-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--tinta-medio);
  white-space: nowrap;
}

.page-header__lead {
  max-width: var(--measure-lead);
  font-family: var(--font-body);
  font-weight: var(--fw-lead);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--tinta-medio);
}

/* --- Content layout: sticky side nav + content column ---------------------- */

.content-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  align-items: start;
}

@media (max-width: 1100px) {
  .content-layout { grid-template-columns: 1fr; }
  .side-nav { display: none; }
}

.side-nav { position: sticky; top: 96px; }

.side-nav__heading {
  display: block;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-weight: var(--fw-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--tinta-medio);
}

.side-nav__list { display: flex; flex-direction: column; gap: 4px; }

.side-nav__list a {
  display: block;
  padding: 6px 0 6px 16px;
  border-left: 2px solid var(--linea);
  font-family: var(--font-display);
  font-weight: var(--fw-nav);
  font-size: var(--fs-nav);
  color: var(--tinta-medio);
  text-decoration: none;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.side-nav__list a:hover,
.side-nav__list a:focus-visible {
  color: var(--tinta);
  border-color: var(--verde);
}

.content-main {
  display: flex;
  flex-direction: column;
  gap: 96px;
}

@media (max-width: 768px) {
  .content-main { gap: 72px; }
}

/* Nosotros is text-only (no macro image breaking up the four blocks — see
   plan §4 note on why one never fit), so its blocks get one extra step of
   the plan's own section-rhythm scale (96→128 desktop, 72→96 mobile) for
   breathing room a visual break would otherwise have provided. */
.content-main--roomy { gap: 128px; }

@media (max-width: 768px) {
  .content-main--roomy { gap: 96px; }
}

/* --- Content block: label → rule → heading device --------------------------- */

/* scroll-margin-top matches the sticky header (72px) plus breathing room,
   same convention as .clause and .side-nav's sticky top — without this,
   an in-page ÍNDICE/side-nav jump lands with the heading hidden behind
   the header. */
.content-block { scroll-margin-top: 96px; }

.content-block__label {
  display: block;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-weight: var(--fw-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--verde-texto);
}

.content-block__rule {
  height: 3px;
  width: 64px;
  margin: 0 0 24px;
  background: var(--verde);
  border: none;
}

.content-block__heading {
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-weight: var(--fw-h2);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-stretch: var(--wdth-h2);
  color: var(--tinta);
}

.content-block__text {
  max-width: var(--measure-body-lg);
  margin-bottom: 24px;
  font-family: var(--font-body);
  font-weight: var(--fw-body-lg);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--tinta);
}

.content-block__text:last-of-type { margin-bottom: 32px; }

.content-block__media { margin-top: 8px; }

.macro--wide { aspect-ratio: 21 / 9; }

.macro--wide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Spec table (Servicios) — the load-bearing element, not icon cards ------- */

.spec-table { margin-bottom: 40px; border-top: 1px solid var(--linea); }

.spec-table__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px 32px;
  padding: 20px 0;
  border-bottom: 1px solid var(--linea);
}

.spec-table__label {
  font-family: var(--font-mono);
  font-weight: var(--fw-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--tinta-medio);
}

.spec-table__value {
  max-width: 52ch;
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--tinta);
}

.spec-table__value ul { display: flex; flex-direction: column; gap: 6px; }

.spec-table__value li::before { content: "— "; color: var(--tinta-suave); }

@media (max-width: 600px) {
  .spec-table__row { grid-template-columns: 1fr; gap: 6px; }
}

/* --- Contacto ---------------------------------------------------------------- */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  align-items: start;
}

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
}

.contact-layout .ficha { grid-column: auto; }

.form { display: flex; flex-direction: column; gap: 24px; }

.field { display: flex; flex-direction: column; gap: 8px; }

/* Formspree honeypot — hidden via off-screen positioning, not display:none,
   since some spam bots skip fields hidden that way. Never shown, never
   part of client-side validation ([data-field] is deliberately omitted
   from this field). */
.field--honeypot { position: absolute; left: -9999px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

@media (max-width: 600px) {
  .field-row { grid-template-columns: 1fr; }
}

.field__label {
  font-family: var(--font-mono);
  font-weight: var(--fw-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--tinta-medio);
}

.field__input,
.field__textarea {
  padding: 14px 16px;
  background: var(--blanco);
  border: 2px solid var(--linea-fuerte);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--tinta);
}

.field__textarea { min-height: 160px; resize: vertical; }

.field__input:focus-visible,
.field__textarea:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
  border-color: var(--verde);
}

.field--error .field__input,
.field--error .field__textarea {
  border-color: var(--alerta);
}

.field__error {
  font-family: var(--font-mono);
  font-size: var(--fs-data);
  color: var(--alerta);
}

/* Form-level fallback notice — a guaranteed-visible signal that a submit
   was blocked, independent of whether any individual field's own error
   rendered correctly. Same alert color/role pattern as .field__error. */
.form__error {
  padding: 12px 16px;
  border: 1px solid var(--alerta);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: var(--fs-data);
  color: var(--alerta);
}

/* Same treatment as .form__error, just the success color tokens instead
   of --alerta, per explicit instruction to reuse that banner's look. */
.form__success {
  padding: 12px 16px;
  border: 1px solid var(--verde-texto);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: var(--fs-data);
  color: var(--verde-texto);
}

.form__submit { align-self: flex-start; margin-top: 8px; }

.ficha--ink {
  background: var(--tinta);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--blanco);
}

.ficha--ink .ficha__label { color: rgba(255, 255, 255, 0.55); }
.ficha--ink .ficha__value { color: var(--blanco); }

/* --- Legal pages (Aviso de Privacidad, Términos de Uso) ---------------------- */

.legal-content {
  max-width: 66ch;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.clause { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 96px; }

.clause__heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: var(--fw-h3);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--tinta);
}

.clause__number {
  font-family: var(--font-mono);
  font-weight: var(--fw-label);
  color: var(--verde-texto);
}

.clause__text {
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--tinta);
}

.clause__text + .clause__text { margin-top: -8px; }