/*
 * miguelbrito.solutions - personal homepage.
 *
 * Design read (T2 round 5): personal-brand homepage for Spanish small-business
 * owners, with a calm, light, modern language that proves he builds modern webs,
 * leaning toward native HTML + CSS, one GSAP ScrollTrigger moment and Geist.
 * Dials: DESIGN_VARIANCE 7 / MOTION_INTENSITY 5 / VISUAL_DENSITY 4.
 *
 * Sources (his starred repos): taste-skill is the base (design read, dials,
 * layout families, anti-slop rules, Geist + Geist Mono, horizontal-pan
 * skeleton). oil-motion only for the showcase technique (autonomous loop of a
 * captured scroll sequence, poster fallback, pause offscreen, static under
 * reduced motion). Copy pass: stop-slop and humanizer, read-only.
 *
 * Palette B «Operador moderno» (final): page #F4F1EA, surface #FFFFFF, tint
 * #DCE8E5 (cool petrol tint), text #1A1A1A, secondary #4B5A5A, brand petrol
 * #0F3D3E, deep petrol #0B2E2F (footer), accent amber #F2A541 with #0F2A2B
 * ink. Amber is the only accent: primary buttons and the highlight bar under
 * one key word per page. Borders are petrol at 20% (--line) and 34%
 * (--line-strong).
 *
 * Section rhythm, Direction A «Ritmo petróleo» (T2 round 9): three section
 * surfaces, set with modifier classes instead of per-section backgrounds.
 *   page (L)  default, no class.
 *   .tint (T) the petrol tint #DCE8E5.
 *   .band (P) petrol #0F3D3E with tokens re-mapped for light-on-dark content;
 *             .band--deep uses #0B2E2F (footer on every page).
 *   .on-light restores the light content tokens for a white card inside a
 *             .band (the problem calc card).
 * index: hero L (proof strip folded into the hero line, 2026-10-22), problem P, shift T, method L, cases L (#proyectos), webs P,
 * ladder T (rungs white), story L, magnet L, FAQ T, final P, footer P-deep.
 * sobre-mi: timeline T, final P. contacto: form on T. The nav is a petrol
 * bar on every page (T2 round 10): wordmark and current link cream 10.59,
 * links #C5D6D5 7.94, amber focus ring 5.82. The red pill is 2.38:1 against
 * the bar, so it carries a 1.5px cream edge (10.59, UI 3:1). The pill never
 * sits on a .band section. Below 1024 px the bar is wordmark, CTA and menu
 * toggle: the pill and the links move into the menu (T2 round 13).
 *
 * Contrast (WCAG 2.x, computed; body AA 4.5, large text and UI 3):
 *   text/page 15.43, text/tint 13.85, secondary/page 6.40, secondary/tint
 *   5.75, secondary/white 7.22, petrol/page 10.59, petrol/tint 9.51,
 *   petrol/amber-tint 10.19, secondary/amber-tint 6.16, ink/amber 7.38,
 *   error/tint 6.03, form radio/checkbox edge #4B5A5A on white 7.22.
 *   On .band: cream #F6F4EF/petrol 10.87, #C5D6D5/petrol 7.94,
 *   #9ED6D0/petrol 7.39, amber/petrol 5.82 (primary button edge), outline
 *   white 50%/petrol 4.22 (ghost and copy buttons). On .band--deep: cream
 *   13.21, #C5D6D5 9.65, #9ED6D0 8.98. White calc card on petrol 11.95.
 *   Amber on the page is 1.82, so amber is never text on light: buttons carry
 *   a #0F2A2B outline (13.43) and the key word stays petrol over an amber bar.
 *
 * Signal red #C2452F (T2 round 7): a warm, slightly coral red reserved for ONE
 * element, the nav pill «El prompt del videojuego · Gratis». Nothing else on
 * the site may use it. White text on it is 5.02:1 (AA body), hover #A93A26 is
 * 6.32:1, and the pill against the page is 4.45:1 (UI 3:1). The pill is
 * smaller (36px, 13px/500) than the amber primary CTA (44 to 48px, 600), so it
 * never competes with the main conversion. Its load pulse (3 soft rings,
 * about 3.6 s, transform and opacity only, no-preference motion only) is the
 * only motion added in round 7.
 *
 * Dark mode: skipped on purpose. Palette B is a light palette chosen by the
 * user; amber and petrol would need new, unapproved dark tokens to keep AA.
 * The page declares color-scheme: light.
 *
 * Type: Geist (display and body, variable wght, max 600) and Geist Mono (small
 * labels only), self-hosted latin subset, SIL OFL 1.1. No italics.
 * Shape: panels and cards 20px, media inside a card follows the card, small
 * surfaces 12px, interactive elements full pill, placeholders 6px.
 * Spacing: 4 8 12 16 24 32 40 48 64 80 96.
 * Easing: cubic-bezier(0.16, 1, 0.3, 1) everywhere.
 * Z-index: 20 sticky nav, 30 skip link.
 */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Geist";
  src: url("assets/fonts/geist/geist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/geist-mono/geist-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bg: #f4f1ea;
  --bg-alt: #dce8e5;
  --surface: #ffffff;
  --fg: #1a1a1a;
  --muted: #4b5a5a;
  --heading: #0f3d3e;
  --accent: #0f3d3e;
  --line: rgba(15, 61, 62, 0.2);
  --line-strong: rgba(15, 61, 62, 0.34);
  --shadow: 0 1px 2px rgba(15, 61, 62, 0.05), 0 12px 32px rgba(15, 61, 62, 0.07);
  --focus: #0f3d3e;

  --brand: #0f3d3e;
  --brand-deep: #0b2e2f;
  --on-brand: #f6f4ef;
  --on-brand-muted: #c5d6d5;
  --band-accent: #9ed6d0;

  --amber: #f2a541;
  --amber-hover: #f6b65e;
  --amber-ink: #0f2a2b;
  --amber-tint: #fbebd2;

  /* Reserved for the nav pill only (see header). */
  --signal: #c2452f;
  --signal-hover: #a93a26;
  --on-signal: #ffffff;

  --pending-fg: #0f3d3e;
  --pending-bg: rgba(15, 61, 62, 0.06);
  --pending-border: rgba(15, 61, 62, 0.5);

  --r-panel: 20px;
  --r-small: 12px;
  --gutter: 16px;
  --section: 64px;
  --nav-h: 64px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}
@media (min-width: 768px) {
  :root { --gutter: 32px; --section: 80px; }
}
@media (min-width: 1024px) {
  :root { --nav-h: 72px; }
}
@media (min-width: 1280px) {
  :root { --gutter: 48px; --section: 96px; }
}

/* Section surfaces (see header): .tint, .band, .band--deep, .on-light. */
.tint { background: var(--bg-alt); }

/* Petrol colour block: re-maps tokens for content on the brand colour. */
.band {
  --fg: var(--on-brand);
  --heading: var(--on-brand);
  --muted: var(--on-brand-muted);
  --accent: var(--band-accent);
  --line: rgba(255, 255, 255, 0.16);
  --line-strong: rgba(255, 255, 255, 0.3);
  --focus: var(--on-brand);
  --pending-fg: var(--on-brand);
  --pending-bg: rgba(255, 255, 255, 0.08);
  --pending-border: rgba(255, 255, 255, 0.55);
  background: var(--brand);
  color: var(--fg);
}
.band--deep { background: var(--brand-deep); }
.band ::selection { background: var(--on-brand); color: var(--brand); }
/* Outline controls on petrol: white at 50% keeps the edge at 4.22:1. */
.band .btn--ghost, .band .copy { border-color: rgba(255, 255, 255, 0.5); }
.band .btn--ghost:hover, .band .copy:hover { border-color: var(--on-brand); }

/* A white card inside a .band keeps the light content tokens. */
.on-light {
  --fg: #1a1a1a;
  --muted: #4b5a5a;
  --heading: #0f3d3e;
  --accent: #0f3d3e;
  --line: rgba(15, 61, 62, 0.2);
  --line-strong: rgba(15, 61, 62, 0.34);
  --focus: #0f3d3e;
  color: var(--fg);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; }
p, h1, h2, h3, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
p, li { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--brand); color: var(--on-brand); }

.wrap { width: 100%; max-width: 1344px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.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;
}
.skip {
  position: absolute; left: 16px; top: -80px; z-index: 30;
  background: var(--brand); color: var(--on-brand); padding: 12px 16px;
  border-radius: 999px; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- Type ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.h2 {
  font-weight: 600;
  font-size: clamp(1.875rem, 1.25rem + 2.2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 22ch;
  text-wrap: balance;
  color: var(--heading);
}
.lead { font-size: 1.125rem; line-height: 1.55; color: var(--muted); max-width: 58ch; }
.mono { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0; color: var(--muted); }

/* The one highlighted word per page: petrol text over an amber bar. */
.mark { position: relative; z-index: 0; white-space: nowrap; }
.mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.06em; right: -0.06em;
  top: 0.56em; bottom: 0.02em;
  border-radius: 4px;
  background: var(--amber);
  transform-origin: 0 50%;
}

/* Placeholder for data the user still has to provide. */
.pending {
  display: inline-block;
  background: var(--pending-bg);
  color: var(--pending-fg);
  border: 1px dashed var(--pending-border);
  border-radius: 6px;
  padding: 2px 8px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
/* Amber is reserved for this class. */
.btn--primary { background: var(--amber); color: var(--amber-ink); border-color: var(--amber-ink); }
.btn--primary:hover { background: var(--amber-hover); transform: translateY(-1px); }
.band .btn--primary { border-color: var(--amber); }
.btn--ghost { border-color: var(--line-strong); color: var(--heading); }
.btn--ghost:hover { border-color: var(--heading); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn--sm { min-height: 44px; padding: 8px 16px; font-size: 0.875rem; }

/* The main CTA again at the end of a long section. */
.section-cta { margin-top: 48px; }

.textlink {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--heading); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: border-color 0.3s var(--ease), gap 0.3s var(--ease);
}
.textlink:hover { border-color: var(--heading); gap: 12px; }

/* ---------- Nav ---------- */
/* Petrol bar so the nav separates from the light hero (10.59:1 against the
   page; light tones only reach about 1.11:1). Text pairs are in the header. */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: #0f3d3e;
  border-bottom: 1px solid #0b2e2f;
}
.nav__inner { display: flex; align-items: center; gap: 12px; height: var(--nav-h); }
.wordmark {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  margin-right: auto;
  color: var(--heading);
}
.nav .wordmark { color: #f4f1ea; }
.nav__links { display: none; gap: 32px; }
.nav__links a, .nav__back {
  font-size: 0.875rem; color: #c5d6d5; text-decoration: none;
  transition: color 0.3s var(--ease);
}
.nav__links a:hover, .nav__back:hover { color: #f4f1ea; }
.nav__links a[aria-current="page"] { color: #f4f1ea; text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 8px; }
/* Full label from 560 px; below it the short one keeps the bar on one line down
   to 320 px. The accessible name is always the full label (same as the pill). */
.nav__cta-full { display: none; }
.nav__back { color: #f4f1ea; text-decoration: underline; text-decoration-color: rgba(244, 241, 234, 0.5); text-underline-offset: 6px; }
.nav a:focus-visible { outline-color: var(--amber); }
/* On petrol the red pill alone is 2.38:1 against the bar; a cream edge
   keeps it standing out without a new colour. */
.nav .pill { display: none; box-shadow: 0 0 0 1.5px #f4f1ea; }

/* Mobile menu: a native <details> whose panel hangs from the sticky bar. The
   prompt link stays plain here because the red is reserved for the pill. */
.nav__toggle {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 8px 10px;
  border: 1px solid rgba(244, 241, 234, 0.5); border-radius: 999px;
  color: #f4f1ea; font-size: 0.875rem; font-weight: 500; line-height: 1.2;
  list-style: none; cursor: pointer;
  transition: border-color 0.3s var(--ease);
}
.nav__toggle::-webkit-details-marker { display: none; }
.nav__toggle:hover, .nav__menu[open] .nav__toggle { border-color: #f4f1ea; }
.nav__toggle:focus-visible { outline-color: var(--amber); }
.nav__panel {
  position: absolute; top: 100%; left: 0; right: 0;
  display: grid;
  padding: 8px var(--gutter) 16px;
  background: #0f3d3e;
  border-bottom: 1px solid #0b2e2f;
}
.nav__panel a {
  display: flex; align-items: center; min-height: 44px;
  color: #f4f1ea; text-decoration: none;
}
.nav__panel a:hover { text-decoration: underline; text-underline-offset: 6px; }
.nav__panel a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* The free prompt pill: the only red element (see header). Smaller and
   lighter than .btn--primary on purpose. The short label shows where the
   full one does not fit; the accessible name is always the full label. */
.pill {
  position: relative;
  isolation: isolate;
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--signal);
  color: var(--on-signal);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.3s var(--ease);
}
.pill:hover { background: var(--signal-hover); }
.pill:focus-visible { outline-color: var(--signal-hover); }
/* The ring behind the pill; invisible unless the load pulse runs. */
.pill::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--signal);
  opacity: 0;
  pointer-events: none;
}
.pill__full { display: none; }
@media (min-width: 560px) {
  .pill__full, .nav__cta-full { display: inline; }
  .pill__short, .nav__cta-short { display: none; }
}
@media (min-width: 768px) {
  .nav__inner { gap: 24px; }
}
@media (min-width: 1024px) {
  .nav__links { display: flex; }
  .nav .pill { display: inline-flex; }
  .nav__menu { display: none; }
}
/* Between 1024 and 1279 the links, the pill and the CTA share one line only
   with the short label. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .pill__full { display: none; }
  .pill__short { display: inline; }
}
@media (min-width: 1280px) {
  .nav__inner { gap: 32px; }
}

/* ---------- Hero: asymmetric split, photo on a petrol panel ---------- */
.hero { padding-block: 32px 48px; }
.hero__grid { display: grid; gap: 40px; }
.hero__title {
  font-weight: 600;
  font-size: clamp(2.25rem, 1.3rem + 3vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-wrap: balance;
  color: var(--heading);
  padding-bottom: 4px;
}
.hero__sub { margin-top: 24px; font-size: 1.125rem; line-height: 1.55; color: var(--muted); max-width: 38ch; text-wrap: balance; }
.hero__ctas { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
/* What happens after the click: lowers the effort of writing to a stranger. */
.hero__next { margin-top: 12px; font-size: 0.875rem; line-height: 1.5; color: var(--muted); max-width: 44ch; }
.hero__proof { margin-top: 24px; }
.hero__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-panel);
  background: var(--brand);
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 480px;
}
.hero__media picture, .hero__media img { width: 100%; height: 100%; }
.hero__media img { object-fit: cover; object-position: 50% 12%; }
@media (min-width: 560px) {
  .hero__ctas { flex-direction: row; flex-wrap: wrap; }
}
@media (min-width: 1024px) {
  .hero { padding-block: 40px; }
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 56px;
    min-height: calc(100dvh - var(--nav-h) - 80px);
  }
  .hero__media {
    height: min(calc(100dvh - var(--nav-h) - 80px), 560px);
    width: auto;
    max-width: none;
  }
}


/* ---------- Problem: copy + calculation card ---------- */
.problem__grid { display: grid; gap: 48px; }
.problem__copy .lead { margin-top: 24px; }
.problem__list { margin-top: 32px; display: grid; gap: 12px; }
.problem__list li { display: flex; align-items: baseline; gap: 12px; }
.problem__list li::before {
  content: ""; flex: none; width: 16px; height: 2px; border-radius: 2px;
  background: var(--heading); transform: translateY(-4px);
}
.calc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow);
  padding: 32px 24px;
  display: grid;
  gap: 16px;
}
.calc__row, .calc__total { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.calc__n { font-weight: 600; font-size: 2.25rem; line-height: 1; letter-spacing: -0.03em; color: var(--heading); }
.calc__op { font-family: var(--font-mono); font-size: 1.25rem; color: var(--muted); width: 1.5ch; }
.calc__t { color: var(--muted); }
.calc__total { padding-top: 24px; margin-top: 8px; border-top: 1px solid var(--line-strong); }
.calc__big { font-weight: 600; font-size: clamp(3.75rem, 2.6rem + 4vw, 6rem); line-height: 0.95; letter-spacing: -0.05em; color: var(--heading); }
.calc__total .calc__t { flex-basis: 100%; color: var(--fg); }
/* Invites the reader to run the same sum for their own team. */
.calc__hint { padding-top: 16px; border-top: 1px solid var(--line); }
@media (min-width: 1024px) {
  .problem__grid { grid-template-columns: 7fr 5fr; gap: 80px; align-items: center; }
  .calc { padding: 48px 40px; }
}

/* ---------- Before / after: ledger rows ---------- */
.shift__title { max-width: 20ch; }
.shift__legend { display: none; }
.shift__table { margin-top: 40px; display: grid; }
.shift__row { display: grid; gap: 4px; padding-block: 24px; border-top: 1px solid var(--line-strong); }
.shift__row:last-child { border-bottom: 1px solid var(--line-strong); }
.shift__from {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--heading);
}
.shift__to { font-weight: 500; font-size: clamp(1.25rem, 1rem + 0.9vw, 1.875rem); line-height: 1.25; letter-spacing: -0.02em; color: var(--heading); }
@media (min-width: 768px) {
  .shift__legend {
    display: grid; grid-template-columns: 240px 1fr; gap: 32px;
    margin-top: 48px; margin-bottom: 12px;
  }
  .shift__table { margin-top: 0; }
  .shift__row { grid-template-columns: 240px 1fr; gap: 32px; align-items: baseline; }
}

/* ---------- Story: editorial statement, stacked ---------- */
.story__title { font-size: clamp(1.875rem, 1.1rem + 2.8vw, 3.75rem); max-width: 20ch; }
.story__body {
  margin-top: 40px;
  display: grid; gap: 16px; justify-items: start;
  max-width: 60ch; color: var(--muted); font-size: 1.125rem; line-height: 1.6;
}
.story__body p:first-child { color: var(--fg); }
.story__body .textlink { margin-top: 8px; }
@media (min-width: 1024px) {
  .story__body { margin-left: 41.6%; margin-top: 48px; }
}

/* ---------- Cases: three real cases, one identical card ---------- */
/* White cards on the page colour (section stays L in the rhythm). Each card:
   capture (4:3, under a slim bar with a «Datos de ejemplo» chip), sector tag, outcome title,
   before and now lines, proof line, estimate line. One column on mobile, image beside the
   copy from 768px, three equal columns from 1024px. */
.cases { margin-top: 48px; display: grid; gap: 16px; }
.case {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-panel);
  background: var(--surface);
  border: 1px solid var(--line);
}
.case__media {
  overflow: hidden;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}
.case__media picture { aspect-ratio: 4 / 3; }
.case__media img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
/* «Datos de ejemplo» lives in a slim top bar of the capture frame, chip in the
   top-right corner, so it never covers the rows that prove the case at any
   card size. Cream on petrol 10.87:1. */
.case__note {
  display: flex;
  justify-content: flex-end;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
.case__note span {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.5;
}
.case__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.case__tag { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
.case__title {
  font-weight: 600;
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--heading);
}
.case__shift { margin: 0; display: grid; gap: 12px; }
.case__shift dt { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.case__shift dd { margin: 2px 0 0; }
.case__shift div:first-child dd { color: var(--muted); }
.case__proof {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-weight: 600;
  color: var(--heading);
}
/* Says it is an estimate, so it stays quieter than the proof above it. */
.case__estimate { font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
@media (min-width: 768px) and (max-width: 1023px) {
  .case { flex-direction: row; }
  /* The capture keeps its 4:3 frame, inset beside the copy, so nothing is cropped. */
  .case__media { flex: 0 0 44%; align-self: center; margin: 24px 0 24px 24px; border: 1px solid var(--line); border-radius: var(--r-small); }
  .case__body { padding: 32px; }
}
@media (min-width: 1024px) {
  .cases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Room for two lines, so a longer estimate does not lift its proof line out
     of step with the other cards. */
  .case__estimate { min-height: 3em; }
}

/* ---------- Web showcase: the petrol colour block, pinned pan on desktop ---------- */
.webs { padding-block: var(--section); overflow: hidden; }
.webs__track { display: grid; gap: 48px; }
.webs__intro { display: grid; gap: 16px; align-content: center; }
.webs__intro .h2 { max-width: 14ch; }
.webs__intro .lead { max-width: 40ch; }
.webs__list { display: grid; gap: 40px; }
.shot { display: grid; gap: 16px; align-content: start; }
.shot__frame {
  overflow: hidden;
  border-radius: var(--r-panel);
  background: #0b3233;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 10;
}
.shot__frame img, .shot__frame video { width: 100%; height: 100%; object-fit: cover; }
.shot__label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent); }
.shot__title { font-weight: 600; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; color: var(--heading); }
.shot__text { color: var(--muted); max-width: 52ch; }
.shot__link { justify-self: start; margin-top: 4px; color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.shot__link:hover { text-decoration-thickness: 2px; }
.shot figcaption { display: grid; gap: 4px; }
@media (min-width: 768px) {
  .webs__list { grid-template-columns: 1fr 1fr; gap: 48px 32px; }
  /* An odd last card spans the row so the grid has no empty cell. */
  .webs:not(.is-pan) .shot:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Pinned horizontal pan (main.js adds .is-pan on desktop without reduced motion). */
.webs.is-pan { padding-block: 0; }
.webs.is-pan .webs__track {
  display: flex;
  align-items: center;
  gap: 64px;
  height: 100dvh;
  width: max-content;
  max-width: none;
  padding-top: var(--nav-h);
  padding-inline: var(--gutter) max(var(--gutter), 8vw);
  will-change: transform;
}
.webs.is-pan .webs__intro { width: min(34vw, 460px); }
.webs.is-pan .webs__list { display: flex; gap: 64px; }
.webs.is-pan .shot { width: min(58vw, calc((100dvh - var(--nav-h) - 200px) * 1.6)); }

/* ---------- Ladder: two ways to start, the main offer wider ---------- */
.ladder__steps { margin-top: 48px; display: grid; gap: 12px; }
.rung {
  border-radius: var(--r-panel);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.rung__need { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
.rung__title { font-weight: 600; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.02em; color: var(--heading); }
.rung__text { color: var(--muted); }
.rung__meta { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--heading); }
.rung__action { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 100%; }
/* Narrow cards: a long label wraps inside its button instead of widening the
   grid (that caused sideways scroll at 1024 to 1280 px). */
.rung__action .btn, .magnet__copy .btn { white-space: normal; text-align: center; max-width: 100%; }
.rung--main { background: var(--surface); border: 2px solid var(--heading); box-shadow: var(--shadow); }
.rung--main .rung__title { font-size: 1.5rem; }
/* For whoever prefers to go alone: one quiet line under the two cards. */
.ladder__alt { margin-top: 24px; font-size: 0.875rem; color: var(--muted); }
.ladder__alt a { color: var(--heading); font-weight: 500; text-underline-offset: 3px; }
/* Inline here: as inline-flex the icon would set the baseline and lift the name
   above the sentence. The underline stays on the name, off the icon. */
.ladder__alt .social-link { display: inline; white-space: nowrap; text-decoration: none; }
.ladder__alt .social-link > span { text-decoration: underline; text-underline-offset: 3px; }
.ladder__alt .social-link .icon { vertical-align: -0.15em; margin-right: 0.3em; }
@media (min-width: 768px) {
  .ladder__steps { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; }
}
@media (min-width: 1024px) {
  .rung { padding: 32px; }
}

/* ---------- How I work: process row + data note ---------- */
.method__title { max-width: 20ch; }
.method__steps { margin-top: 48px; display: grid; gap: 32px; border-top: 1px solid var(--line-strong); padding-top: 32px; }
.mstep__title { font-weight: 600; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 8px; color: var(--heading); }
.mstep p { color: var(--muted); max-width: 46ch; }
/* «Tu parte»: the client's effort per step, kept visibly small. */
.mstep .mstep__you { margin-top: 12px; color: var(--heading); }
@media (min-width: 1024px) {
  .method__steps { grid-template-columns: repeat(3, 1fr); gap: 48px; }
}

/* ---------- Lead magnet: image + copy card ---------- */
.magnet__card {
  display: grid;
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.magnet__media { display: block; background: var(--brand); }
.magnet__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.magnet__copy { padding: 32px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.magnet__title { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); max-width: 20ch; }
@media (min-width: 1024px) {
  .magnet__card { grid-template-columns: 1.1fr 1fr; align-items: stretch; }
  .magnet__media picture { height: 100%; }
  .magnet__media img { height: 100%; aspect-ratio: auto; object-position: 88% 50%; }
  .magnet__copy { padding: 48px; justify-content: center; }
}

/* ---------- Videos: featured placeholder + list ---------- */
.videos__grid { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.video-main {
  border-radius: var(--r-panel);
  background: var(--bg-alt);
  aspect-ratio: 16 / 9;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}
.video-list { display: grid; align-content: start; }
.video-row { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding-block: 24px; border-top: 1px solid var(--line-strong); }
.video-row:last-child { border-bottom: 1px solid var(--line-strong); }
/* Play mark: one simple geometric shape. */
.video__play {
  position: relative;
  width: 48px; height: 48px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  flex: none;
}
.video__play::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-35%, -50%);
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--heading);
}
.video-main .video__play { width: 72px; height: 72px; }
.video-main .video__play::after { border-width: 12px 0 12px 19px; }
.video__body { display: grid; gap: 8px; }
.video__title { font-weight: 600; font-size: 1.125rem; line-height: 1.3; color: var(--heading); }
.video-main .video__title { font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem); line-height: 1.15; max-width: 22ch; }
@media (min-width: 1024px) {
  .videos__grid { grid-template-columns: 7fr 5fr; gap: 48px; }
  .video-main { padding: 40px; }
}

/* ---------- FAQ ---------- */
.faq__grid { display: grid; gap: 40px; }
.faq__list { display: grid; }
.qa { border-top: 1px solid var(--line-strong); }
.qa:last-child { border-bottom: 1px solid var(--line-strong); }
.qa summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-block: 24px;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--heading);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--heading);
  transition: transform 0.4s var(--ease);
}
.qa[open] summary::after { transform: rotate(45deg); }
.qa p { color: var(--muted); padding-bottom: 24px; max-width: 62ch; }
@media (min-width: 1024px) {
  .faq__grid { grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; }
}

/* ---------- Final CTA ---------- */
.final__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.final__title {
  font-weight: 600;
  font-size: clamp(2.25rem, 1.3rem + 3.6vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  max-width: 16ch;
  text-wrap: balance;
  color: var(--heading);
}
.final__lead { margin-top: 24px; }
.final__ctas { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.final__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.final__next { color: var(--muted); font-size: 0.875rem; max-width: 52ch; }
.final__email {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px 12px; color: var(--muted); font-size: 0.875rem;
}
.email { color: var(--fg); font-weight: 600; text-underline-offset: 4px; text-decoration-color: var(--line-strong); overflow-wrap: anywhere; }
.copy {
  font: inherit; font-size: 0.875rem; font-weight: 600;
  color: var(--fg); background: transparent; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 999px;
  min-height: 36px; padding: 4px 16px;
  transition: border-color 0.3s var(--ease);
}
.copy:hover { border-color: var(--fg); }
.copy:active { transform: scale(0.98); }
.copy[hidden] { display: none; }
.copy__status { flex-basis: 100%; min-height: 1.4em; font-size: 0.875rem; color: var(--heading); }

/* ---------- Footer ---------- */
.footer { padding-block: 48px 40px; border-top: 1px solid var(--line); }
.footer.band { border-top: 0; }
.footer__grid { display: grid; gap: 32px; }
.footer__text { color: var(--muted); margin-top: 4px; font-size: 0.875rem; }
.footer__head { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); margin-bottom: 4px; }
.footer__offers, .footer__social { display: grid; gap: 8px; align-content: start; justify-items: start; font-size: 0.875rem; }
.footer__social { color: var(--muted); }
.footer__offers a, .footer__nav a { color: var(--fg); font-size: 0.875rem; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.footer__nav { display: flex; flex-wrap: wrap; gap: 8px 24px; align-content: start; }
.footer__legal { display: grid; gap: 8px; color: var(--muted); font-size: 0.875rem; }
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: repeat(3, 1fr); align-items: start; gap: 40px 48px; }
  .footer__legal { grid-column: span 2; }
}

/* ---------- About page ---------- */
.about-hero { padding-block: 64px 24px; }
.about-hero__title {
  font-weight: 600;
  font-size: clamp(2.25rem, 1.2rem + 3.6vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  max-width: 18ch;
  text-wrap: balance;
  padding-bottom: 4px;
  color: var(--heading);
}
.about { padding-top: 48px; }
.about__beats { display: grid; gap: 48px; }
.beat { display: grid; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line-strong); }
.beat__title { font-weight: 600; font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.875rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--heading); }
.beat__body { display: grid; gap: 16px; color: var(--muted); font-size: 1.125rem; max-width: 62ch; }
.beat__body p:last-child:not(:first-child) { color: var(--fg); }
.timeline__years { margin-top: 48px; display: grid; gap: 48px; }
.year__label {
  font-weight: 600;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--heading);
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line-strong);
}
.year__list { display: grid; gap: 24px; }
.year__list li { color: var(--fg); }
.year__month { display: block; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); margin-bottom: 4px; }
@media (min-width: 768px) {
  .about-hero { padding-block: 96px 32px; }
  .timeline__years { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}
@media (min-width: 1024px) {
  .beat { grid-template-columns: 4fr 8fr; gap: 64px; padding-top: 32px; }
}

/* ---------- Legal pages ---------- */
.legal { padding-block: 64px var(--section); }
.legal__title {
  font-weight: 600;
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  color: var(--heading);
}
.legal__body { display: grid; gap: 16px; max-width: 64ch; color: var(--muted); }
.legal__body a { color: var(--fg); overflow-wrap: anywhere; }
.legal__body h2 {
  margin-top: 24px;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--heading);
}
.legal__body ul { display: grid; gap: 8px; padding-left: 1.25em; list-style: disc; }
.legal__body strong { color: var(--fg); font-weight: 600; }
.legal > p { margin-bottom: 24px; }
.legal__meta { color: var(--muted); font-size: 0.875rem; }

/* ---------- Contact form (contacto.html): one question per screen ----------
   A white card on the page colour. Options are large tappable cards (56px+)
   with the native radio or checkbox restyled inside, so keyboard and screen
   reader behaviour stays native. Selected: petrol border and filled marker.
   Errors use --error (#9B2C1F, 7.57:1 on white, 6.89:1 on the page), a darker,
   different red from the signal red reserved for the nav pill. Without JS the
   form is hidden and the noscript message shows the email. */
:root { --error: #9b2c1f; }
/* The page sits on .tint so the white form card stands off it (1.26:1 vs
   1.13:1 on the page colour). */
.contact { padding-block: 48px var(--section); max-width: 720px; }
.contact__title {
  font-weight: 600;
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--heading);
}
.contact__lead { margin-top: 16px; }
.contact__card {
  margin-top: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow);
  padding: 24px 16px;
}
.contact__noscript p { color: var(--fg); }
:root:not(.js) .stepper { display: none; }
.contact__email { margin-top: 24px; justify-content: flex-start; }
.contact__email .copy__status { flex-basis: 100%; }

.stepper__progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; margin-bottom: 24px; }
.stepper__back {
  justify-self: start;
  font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--heading);
  background: transparent; border: 0; padding: 8px 0; min-height: 44px; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 6px;
}
.stepper__back:hover { text-decoration-color: var(--heading); }
.stepper__back[hidden] { display: block; visibility: hidden; }
.stepper__count { justify-self: end; }
.stepper__bar { grid-column: 1 / -1; height: 4px; border-radius: 999px; background: var(--bg-alt); overflow: hidden; }
.stepper__fill { display: block; height: 100%; background: var(--brand); transform-origin: left center; transform: scaleX(0.1429); }
.stepper__bar[data-step="2"] .stepper__fill { transform: scaleX(0.2857); }
.stepper__bar[data-step="3"] .stepper__fill { transform: scaleX(0.4286); }
.stepper__bar[data-step="4"] .stepper__fill { transform: scaleX(0.5714); }
.stepper__bar[data-step="5"] .stepper__fill { transform: scaleX(0.7143); }
.stepper__bar[data-step="6"] .stepper__fill { transform: scaleX(0.8571); }
.stepper__bar[data-step="7"] .stepper__fill { transform: none; }

.step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 16px; }
.step[hidden] { display: none; }
.step__question {
  padding: 0; margin-bottom: 8px;
  font-weight: 600; font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; color: var(--heading);
}
.step__hint { color: var(--muted); font-size: 0.9375rem; margin-top: -8px; }
.step__actions { display: flex; justify-content: flex-end; margin-top: 8px; }

.options { display: grid; gap: 8px; }
.options--inline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.option {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-small);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.option--compact { min-height: 48px; }
.option:hover { border-color: var(--heading); }
.option:has(.option__input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.option:has(.option__input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.option__input {
  -webkit-appearance: none; appearance: none;
  flex: none; width: 20px; height: 20px; margin: 0;
  border: 1.5px solid var(--muted); border-radius: 50%;
  background: var(--surface);
  display: grid; place-content: center;
  cursor: pointer;
}
.option__input[type="checkbox"] { border-radius: 6px; }
.option__input:focus-visible { outline: none; }
.option__input:checked { border-color: var(--brand); background: var(--brand); }
.option__input[type="radio"]:checked { box-shadow: inset 0 0 0 4px var(--surface); }
.option__input[type="checkbox"]:checked::after {
  content: ""; width: 10px; height: 6px; margin-top: -2px;
  border: solid var(--on-brand); border-width: 0 0 2px 2px; transform: rotate(-45deg);
}
.option__text { color: var(--fg); line-height: 1.35; }
.step.is-invalid .option { border-color: var(--error); }

.field { display: grid; gap: 6px; }
.field[hidden] { display: none; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.field__label { padding: 0; font-size: 0.9375rem; font-weight: 600; color: var(--fg); }
.field__opt { font-weight: 400; color: var(--muted); }
.field__hint { font-size: 0.875rem; color: var(--muted); }
.field__error { font-size: 0.875rem; font-weight: 500; color: var(--error); }
.field__error:empty { display: none; }
.input {
  width: 100%; min-height: 48px; padding: 10px 14px;
  font: inherit; color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-small);
}
.input:hover { border-color: var(--heading); }
.input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--brand); }
.input[aria-invalid="true"] { border-color: var(--error); }
.input--area { resize: vertical; min-height: 96px; line-height: 1.5; }

.check { display: flex; align-items: flex-start; gap: 12px; }
.check__input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--brand); cursor: pointer; }
.check__label { font-size: 0.9375rem; color: var(--fg); line-height: 1.5; cursor: pointer; }
.check__label a { color: var(--heading); text-underline-offset: 3px; }
.check__input[aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 2px; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-alert {
  padding: 12px 16px; border-radius: var(--r-small);
  background: var(--bg); border: 1px solid var(--error); color: var(--fg); font-size: 0.9375rem;
}
.form-alert[hidden] { display: none; }
.form-alert a { color: var(--heading); font-weight: 600; overflow-wrap: anywhere; }
.btn[aria-disabled="true"] { opacity: 0.7; cursor: progress; }

.contact__done { display: grid; gap: 12px; }
.contact__done[hidden] { display: none; }
.contact__done:focus { outline: none; }
.contact__done:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.contact__done-title { font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); letter-spacing: -0.02em; color: var(--heading); }
.contact__done-text { color: var(--fg); font-size: 1.125rem; }

@media (min-width: 640px) {
  .contact__card { padding: 32px; }
}
@media (min-width: 768px) {
  .contact { padding-top: 80px; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Hero entrance: the promise arrives first, then the face. */
  .hero__copy > * { animation: rise 0.9s var(--ease) both; }
  .hero__copy > :nth-child(2) { animation-delay: 0.08s; }
  .hero__copy > :nth-child(n+3) { animation-delay: 0.16s; }
  .hero__media { animation: fade 1.2s var(--ease) 0.2s both; }
  .hero__media img { animation: settle 1.6s var(--ease) 0.2s both; }
  /* The amber bar draws under the key word once the headline is in. */
  .hero .mark::before, .about-hero .mark::before { animation: draw 0.9s var(--ease) 0.5s both; }
  /* Nav pill: three soft rings once on load (1.2 s each, under 1 per second),
     then still. Transform and opacity only. */
  .pill::after { animation: pill-pulse 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.6s 3 both; }

  /* Section reveal, driven by IntersectionObserver in main.js. */
  .js .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  }
  .js .reveal.is-in { opacity: 1; transform: none; }

  /* Contact form: each new step fades in with a short slide (from the right
     going forward, from the left going back); the progress bar eases. */
  .step.is-entering { animation: step-in 0.28s var(--ease) both; }
  .step.is-entering.is-back { animation-name: step-in-back; }
  .stepper__fill { transition: transform 0.4s var(--ease); }
}
@keyframes step-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes step-in-back {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: none; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes settle {
  from { transform: scale(1.04); }
  to { transform: none; }
}
@keyframes pill-pulse {
  0% { opacity: 0.5; transform: none; }
  100% { opacity: 0; transform: scale(1.08, 1.5); }
}
@keyframes draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Social profile links: brand icon (Simple Icons, CC0) + label, inherits the link colour. */
.social-link { display: inline-flex; align-items: center; gap: 8px; }
.social-link .icon { width: 1.125em; height: 1.125em; flex: none; }

/* Castello Consulting card: the partner company's own palette (from castello.consulting
   styles: verde principal #0F2A22, verde vibrante #7ED957, off-white #FAFAF8), so the card
   reads as their brand inside the ladder. Contrast: off-white on #0F2A22 about 14:1;
   #0F2A22 on #7ED957 about 9:1. */
.rung--castello { background: #0F2A22; border-color: #1F4A40; }
.rung--castello .rung__need { color: #7ED957; }
.rung--castello .rung__title { color: #FAFAF8; }
.rung--castello .rung__text { color: rgb(250 250 248 / 0.78); }
.btn--castello { background: #7ED957; color: #0F2A22; border-color: #7ED957; }
.btn--castello:hover { background: #95E373; border-color: #95E373; transform: translateY(-1px); }
.btn--castello:focus-visible { outline: 2px solid #7ED957; outline-offset: 3px; }