/* ═════════════════════════════════════════════════════════════════════
   MARKA GROUP HVAC CONSULTING
   Visual system: annotated mechanical drawing.
   Beige is the sheet, navy is the ink, sky blue is the construction
   grid, teal carries every annotation. Nothing is decorative — the
   drafting vocabulary is the argument that an engineer made this page.
   ═════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── 1. TOKENS ───────────────────────────── */

:root {
  /* Brand palette — fixed */
  --navy:  #0D1B2A;
  --teal:  #4B6B7C;
  --beige: #F2EFE7;
  --sky:   #C8D9E6;
  --white: #FFFFFF;
  /* Tono intermedio entre teal y sky. Llegó con el logo: es el color de la
     tercera barra, la más clara. No se usaba en ningún otro sitio. */
  --steel: #98B4C7;

  /* Derived ink values */
  --ink:            var(--navy);
  --ink-soft:       rgba(13, 27, 42, 0.72);
  --rule:           rgba(13, 27, 42, 0.16);
  --rule-strong:    rgba(13, 27, 42, 0.34);

  /* On-navy equivalents */
  --ink-on-dark:      var(--beige);
  --ink-on-dark-soft: rgba(242, 239, 231, 0.76);
  --rule-on-dark:     rgba(200, 217, 230, 0.24);

  /* Type */
  --font-display: "Libre Caslon Text", "Iowan Old Style", Georgia, serif;
  --font-title:   "Space Grotesk", "General Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body:    "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Rhythm */
  --gap:      clamp(1.5rem, 3vw, 2.5rem);
  --bay:      clamp(4.5rem, 11vh + 4vw, 9rem);   /* vertical section padding */
  --margin:   clamp(1.25rem, 5vw, 4rem);         /* sheet margin */
  --measure:  62ch;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ───────────────────────────── 2. RESET ────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Cuánto espacio se deja por encima al saltar a un ancla. Tiene que ser
     algo mayor que la barra pegajosa, o el título aterriza debajo de ella.
     Bajó de 6rem a 5rem cuando la barra se hizo más baja. */
  scroll-padding-top: 5rem;

  /* iOS paints a grey plate behind every tapped link. Tinted teal it reads
     as part of the drawing instead of a system artefact — and it stays,
     because removing it would leave a tap with no feedback at all. */
  -webkit-tap-highlight-color: rgba(75, 107, 124, 0.18);
}

body {
  margin: 0;
  background: var(--beige);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* An email address or URL is one unbreakable word to a line breaker. On a
     320px column that is the difference between wrapping and shoving the
     whole page sideways. */
  overflow-wrap: break-word;
}

h1, h2, h3, p, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
strong { font-weight: 600; }

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

.section--dark :focus-visible { outline-color: var(--sky); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: var(--beige);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.skip-link:focus { left: 0; }

/* ──────────────────────── 3. LAYOUT PRIMITIVES ─────────────────────── */

.wrap {
  width: 100%;
  max-width: 1220px;
  margin-inline: auto;
  padding-inline: var(--margin);
}

.wrap--measure > * { max-width: var(--measure); }

.section {
  position: relative;
  padding-block: var(--bay);
}

/* A hairline sheet-edge rule runs down the left margin of every light
   section, the way a drawing sheet carries a trim line. */
.section::before {
  content: "";
  position: absolute;
  left: var(--margin);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule);
  pointer-events: none;
}

.section__head { margin-bottom: clamp(3rem, 6vw, 4.5rem); }

/* ──────────────────────────── 4. TYPE ──────────────────────────────── */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
}

.eyebrow::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: currentColor;
  flex: none;
}

.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.15rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin-bottom: 1.75rem;
  text-wrap: balance;
}

.h2--wide { max-width: 20ch; }
.h2--panel { margin-bottom: 0; }

.prose p + p { margin-top: 1.35rem; }

.prose__turn {
  padding-top: 1.35rem;
  border-top: 1px solid var(--rule-on-dark);
}

/* ──────────────────────────── 5. BUTTON ────────────────────────────── */

.btn {
  --btn-bg: var(--navy);
  --btn-fg: var(--beige);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.05rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--btn-bg);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

/* Hover reveals an offset hairline frame — the drafting convention for
   a part shown in an alternate position. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--btn-bg);
  transform: translate(0, 0);
  opacity: 0;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
  pointer-events: none;
}

.btn:hover::after,
.btn:focus-visible::after {
  transform: translate(6px, 6px);
  opacity: 1;
}

.btn__arrow { transition: transform 0.25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--primary:hover,
.btn--primary:focus-visible { --btn-bg: var(--teal); }

/* Nació para la cabecera: el interlineado del cuerpo (1.62) le daba al texto
   una caja mucho más alta que la letra, y eso engordaba la barra entera sin
   que se viera por qué. Desde el 2 de septiembre lo usa también el botón del
   formulario dentro de la caja de precio, por la misma razón — ahí compite
   con el botón grande de agendar, y el tamaño es lo que los ordena. */
.btn--compact {
  padding: 0.6rem 1rem;
  font-size: 0.68rem;
  line-height: 1.2;
  letter-spacing: 0.1em;
}

.btn--large { padding: 1.25rem 2rem; }

.btn--invert {
  --btn-bg: var(--sky);
  --btn-fg: var(--navy);
}
.btn--invert:hover,
.btn--invert:focus-visible {
  --btn-bg: var(--white);
}

/* ─────────────────────────── 6. MASTHEAD ───────────────────────────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(242, 239, 231, 0.9);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--gap);
  max-width: 1220px;
  margin-inline: auto;
  /* La altura de la barra la manda el botón, no el texto. Con 0.6rem aquí y
     un botón algo más ajustado, la barra queda en torno a 3,4rem en vez de
     las 4,3rem que ocupaba antes: se nota menos y deja respirar al contenido. */
  padding: 0.6rem var(--margin);
}

.masthead__brand {
  display: flex;
  /* Todo en una fila: la marca, el nombre y la disciplina. Se probó con el
     nombre y la disciplina apilados, como en el archivo del logo, pero en una
     barra donde el resto de piezas son de una sola línea el bloque quedaba
     pesado y desalineado. En fila, los cuatro elementos de la cabecera
     comparten la misma altura y la barra se lee como una sola banda. */
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  margin-right: auto;
}

/* Las tres barras del logo, insertadas en línea en el HTML de cada página.
   Se fija solo el ancho: con "height: auto" el navegador calcula el alto a
   partir del viewBox, así que la proporción nunca se deforma. "flex: none"
   impide que la barra las aplaste cuando el espacio va justo. */
.masthead__mark {
  width: 1.5rem;
  height: auto;
  flex: none;
}

/* Cada barra lleva su tono, de más oscuro a más claro. Esto solo funciona
   porque el SVG va en línea: como <img> sería un documento aparte y no
   podría leer las variables de la paleta. */
.masthead__mark rect:nth-of-type(1) { fill: var(--navy); }
.masthead__mark rect:nth-of-type(2) { fill: var(--teal); }
.masthead__mark rect:nth-of-type(3) { fill: var(--steel); }

/* El nombre y la disciplina, uno al lado del otro y apoyados en la misma
   línea base. "baseline" en vez de "center" es lo que hace que las dos
   letras se apoyen en el mismo suelo aunque tengan tamaños distintos. */
.masthead__wordmark {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  line-height: 1.2;
}

.masthead__name {
  /* El logo escribe "MARKA GROUP" en Space Grotesk, que en esta hoja es
     --font-title. Antes iba en Libre Caslon (--font-display); se cambió
     para que el nombre y la marca de al lado sean la misma tipografía.
     Si algún día se prefiere la serif de antes, basta con volver a poner
     var(--font-display) y quitar el font-weight. */
  font-family: var(--font-title);
  font-weight: 700;
  /* En mayúsculas y algo más pequeño, igual que en el archivo del logo.
     El HTML sigue diciendo "Marka Group" en minúsculas: text-transform solo
     cambia cómo se dibuja, así que al copiar el texto o al leerlo un lector
     de pantalla sigue saliendo bien escrito. */
  text-transform: uppercase;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}

.masthead__discipline {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
}

/* Language switch — a two-position selector plate, drawn like the rest of
   the drafting furniture: hairline box, no radius. The current language is
   the filled position; only its counterpart is a link. */

.langswitch {
  display: flex;
  flex: none;                     /* never squeezed by the booking button */
  align-self: center;
  border: 1px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.langswitch__opt {
  padding: 0.62rem 0.62rem;
  color: var(--teal);
  text-decoration: none;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.langswitch__opt + .langswitch__opt {
  border-left: 1px solid var(--rule-strong);
}

a.langswitch__opt:hover,
a.langswitch__opt:focus-visible {
  background: var(--sky);
  color: var(--navy);
}

.langswitch__opt[aria-current="page"] {
  background: var(--navy);
  color: var(--beige);
}

/* ─────────────────────────── 7. HERO ───────────────────────────────── */

.section--hero { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3.5rem, 7vw, 5.5rem); }

.hero__lede { max-width: 62rem; }

.hero__headline {
  /* Measured on the headline itself — putting it on the parent would
     drag the subhead down to display width too. */
  max-width: 15ch;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(2.5rem, 1.2rem + 5.6vw, 5.4rem);
  line-height: 1.03;
  letter-spacing: -0.022em;
  margin-bottom: 1.75rem;
}

/* Space Grotesk ships no italic, and a synthesised slant at 5.4rem looks
   like a mistake. The emphasis carries on colour alone now. */
.hero__headline em {
  font-style: normal;
  color: var(--teal);
}

.hero__subhead {
  max-width: 46ch;
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.28rem);
  color: var(--ink-soft);
  margin-bottom: 2.4rem;
}

/* ──────────────────── 8. SIGNATURE: THE SCHEMATIC ──────────────────── */

.schematic {
  position: relative;   /* containing block for the switch radios */
  margin-top: clamp(3rem, 7vw, 5rem);
}

.schematic__svg { width: 100%; height: auto; }

/* Below the breakpoint the drawing keeps its scale and scrolls sideways
   inside this frame. Shrinking a 1200x340 drawing onto a 320px screen puts
   its 13-unit annotations at roughly 3px: present, unreadable, and worse
   than asking for a swipe. */
.schematic__frame {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.schematic__hint {
  display: none;
  margin-bottom: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}

/* ── BEFORE / AFTER ──
   No JavaScript: two radios parked in the figure hold the state and every
   switch below hangs off :checked. Unscripted, the page still renders the
   BEFORE state, which is the one the section argues from. */

/* Visually hidden but focusable. Absolute with no offsets keeps each radio
   at its static position — inside the figure, right at the toggle — so
   tabbing to it doesn't jump the page somewhere else. */
.schematic__switch {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip-path: inset(50%);
  overflow: hidden;
}

.viewtoggle {
  display: inline-flex;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.viewtoggle__opt {
  padding: 0.62rem 1.05rem;
  color: var(--teal);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.viewtoggle__opt + .viewtoggle__opt { border-left: 1px solid var(--rule-strong); }

.viewtoggle__opt:hover { background: var(--sky); color: var(--navy); }

.schematic__switch--before:checked ~ .viewtoggle .viewtoggle__opt--before,
.schematic__switch--after:checked  ~ .viewtoggle .viewtoggle__opt--after {
  background: var(--navy);
  color: var(--beige);
}

/* The radio itself is off-screen, so its focus ring is drawn on the label. */
.schematic__switch--before:focus-visible ~ .viewtoggle .viewtoggle__opt--before,
.schematic__switch--after:focus-visible  ~ .viewtoggle .viewtoggle__opt--after {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* Both states stay in the DOM. Their entry animations run once on load and
   are long settled before anyone reaches the toggle, so switching is a
   crossfade, not a replay — and role="img" on the svg keeps the hidden half
   out of the accessibility tree either way. */
.schematic__view { transition: opacity 0.45s var(--ease), visibility 0.45s var(--ease); }

.schematic__view--after { opacity: 0; visibility: hidden; }

.schematic__switch--after:checked ~ .schematic__frame .schematic__view--before {
  opacity: 0;
  visibility: hidden;
}

.schematic__switch--after:checked ~ .schematic__frame .schematic__view--after {
  opacity: 1;
  visibility: visible;
}

/* display, not opacity: the inactive line has to leave the accessibility
   tree too, or a screen reader announces both captions at once. */
.schematic__reading--before { display: block; }
.schematic__reading--after  { display: none; }

.schematic__switch--after:checked ~ .schematic__caption .schematic__reading--before { display: none; }
.schematic__switch--after:checked ~ .schematic__caption .schematic__reading--after  { display: block; }

.schematic__grid { opacity: 0.42; }

.schematic__duct path {
  fill: none;
  stroke: var(--navy);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: draw 1.1s var(--ease) forwards;
}

.schematic__flow path {
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.4;
  /* 9 on, 13 off — a 22-unit period. drift travels exactly two periods per
     cycle, so the pattern lands where it started and the loop reads as
     continuous current instead of a repeating jump. */
  stroke-dasharray: 9 13;
  opacity: 0;
  animation: fade-in 0.6s var(--ease) 0.8s forwards;
}

/* The outlet stream resolves last, after the restriction has landed.
   Scoped through the group so it outranks the shorthand above — a bare
   .streamline--out is the weaker selector and loses its delay. */
.schematic__flow .streamline--out {
  stroke-width: 1.1;
  animation-delay: 1.35s;
}

/* The current runs only for viewers who haven't asked their system to hold
   still. Gated on no-preference rather than switched off afterwards, so the
   infinite loop is never scheduled in the first place — section 19 stays as
   the backstop for everything else on the page. */
@media (prefers-reduced-motion: no-preference) {
  .schematic__flow path {
    animation: fade-in 0.6s var(--ease) 0.8s forwards,
               drift 1.4s linear 0.8s infinite;
  }

  .schematic__flow .streamline--out { animation-delay: 1.35s, 1.35s; }
}

.schematic__eddies path {
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.3;
  opacity: 0;
  animation: fade-in 0.6s var(--ease) 1.35s forwards;
}

.schematic__you circle {
  fill: var(--navy);
  /* fill-box keeps the scale centred on the circle across engines —
     user-space transform-origin is unreliable in Safari. */
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: pop 0.55s var(--ease) 1.1s forwards;
}

.schematic__you text {
  fill: var(--sky);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-anchor: middle;
  opacity: 0;
  animation: fade-in 0.4s var(--ease) 1.5s forwards;
}

.leader {
  fill: none;
  stroke: var(--rule-strong);
  stroke-width: 1;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: draw 0.7s var(--ease) 1.5s forwards;
}

.note {
  fill: var(--teal);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  animation: fade-in 0.6s var(--ease) 1.75s forwards;
}

.note--end { text-anchor: end; }
.note--throat { fill: var(--navy); font-weight: 500; }

.schematic__caption {
  margin-top: 1.75rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--rule);
  max-width: 52ch;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.7;
  color: var(--teal);
}

/* drift's offset runs negative on purpose: a decreasing stroke-dashoffset
   carries the dash pattern forward along the path, and every streamline is
   drawn low-x to high-x, so the current reads left to right. */
@keyframes draw   { to { stroke-dashoffset: 0; } }
@keyframes fade-in{ to { opacity: 1; } }
@keyframes drift  { to { stroke-dashoffset: -44; } }
@keyframes pop    { 0% { transform: scale(0); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* ─────────────────────── 9. DARK SECTIONS ──────────────────────────── */

.section--dark {
  background: var(--navy);
  color: var(--ink-on-dark);
}

.section--dark::before { background: var(--rule-on-dark); }
.section--dark .eyebrow { color: var(--sky); }
.section--dark .prose { color: var(--ink-on-dark-soft); }

/* ──────────────────────── 10. PROCESS STEPS ────────────────────────── */

.steps {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  max-width: 60rem;
}

.step {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}

/* Detail bubble — the callout symbol that keys a detail to its drawing. */
.step__bubble {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--teal);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--teal);
  background: var(--beige);
}

.step__body { padding-top: 0.5rem; }

.step__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.65rem);
  line-height: 1.25;
  margin-bottom: 0.7rem;
}

.step__body p { color: var(--ink-soft); max-width: 54ch; }

/* The traced job, drawn as a run of survey stations. */
.run {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--rule);
}

.run__stage {
  position: relative;
  padding-left: 0.95rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  white-space: nowrap;
}

.run__stage::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  background: var(--teal);
  border-radius: 50%;
}

/* ─────────────────────── 11. SCOPE SHEET ───────────────────────────── */

.section--tight { padding-block: 0 var(--bay); }

.sheet {
  background: var(--white);
  border: 1px solid var(--rule);
  padding: clamp(2rem, 5vw, 4rem);
}

.sheet__head {
  padding-bottom: clamp(1.75rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.notes { display: grid; gap: 1.5rem; }

.notes__item {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  align-items: baseline;
}

.notes__idx {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--teal);
}

.notes__item p { max-width: 58ch; }

/* Delivery schedule, drawn as a dimension line with two stations. */
.schedule {
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  padding-top: clamp(1.75rem, 4vw, 2.25rem);
  border-top: 1px solid var(--rule);
}

.schedule__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 1.5rem;
}

.schedule__line {
  display: grid;
  gap: 1.75rem;
  position: relative;
}

.station {
  position: relative;
  padding-left: 1.75rem;
  border-left: 1px solid var(--rule-strong);
}

.station::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 0.55rem;
  width: 7px;
  height: 7px;
  background: var(--navy);
  border-radius: 50%;
}

.station__when {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.station__what {
  display: block;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* ─────────────────────── 12. GUARANTEE NOTE ────────────────────────── */

/* Boxed like the general-notes callout that carries the binding terms. */
.guarantee {
  margin: clamp(2.25rem, 5vw, 3rem) 0;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border: 1px solid var(--rule-on-dark);
  border-left: 3px solid var(--sky);
  background: rgba(200, 217, 230, 0.05);
}

.guarantee__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 1.1rem;
}

.guarantee__text {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 0.85vw, 1.7rem);
  line-height: 1.36;
}

.guarantee__text strong {
  color: var(--sky);
  font-weight: 400;
  font-style: italic;
}

.guarantee__sign {
  margin-top: 1.35rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule-on-dark);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--sky);
}

/* ────────────────────────── 13. QUESTIONS ──────────────────────────── */

.qa-list {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  max-width: 62rem;
}

.qa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--rule-strong);
}

.qa__q {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.15rem, 1rem + 0.65vw, 1.5rem);
  line-height: 1.3;
  margin: 0;
  text-wrap: balance;
}

.qa__marker {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.85rem;
}

.qa__a p:not(.qa__marker) { color: var(--ink-soft); }

/* ─────────────────────────── 14. CLOSE ─────────────────────────────── */

.section--close { padding-bottom: clamp(5rem, 10vw, 8rem); }

.close__headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.15rem + 3.2vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 18ch;
  text-wrap: balance;
}

.signoff {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-left: clamp(1.25rem, 3vw, 2rem);
  border-left: 1px solid var(--rule-strong);
}

.signoff__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.9rem;
}

.signoff__text { color: var(--ink-soft); max-width: 54ch; }
.signoff__text strong { color: var(--ink); }

.close__action {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
}

.close__note {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.7;
  color: var(--teal);
  max-width: 26ch;
}

/* ───────────────────────── 15. TITLE BLOCK ─────────────────────────── */

/* The cajetín: who prepared the drawing, for whom, and where it applies. */
.titleblock {
  background: var(--navy);
  color: var(--ink-on-dark);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.titleblock__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  border: 1px solid var(--rule-on-dark);
}

.tb-cell {
  padding: 1.25rem 1.4rem;
  border-right: 1px solid var(--rule-on-dark);
  border-bottom: 1px solid var(--rule-on-dark);
}

.tb-cell__label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 0.5rem;
}

.tb-cell__value { font-size: 0.95rem; }

.tb-cell--links a {
  text-decoration: none;
  border-bottom: 1px solid var(--rule-on-dark);
  padding-bottom: 1px;
  transition: border-color 0.2s var(--ease);
}

.tb-cell--links a:hover { border-bottom-color: var(--sky); }

.tb-sep { color: var(--teal); padding-inline: 0.2rem; }

.titleblock__rights {
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink-on-dark-soft);
}

/* ────────────────────── 16. SCROLL REVEALS ─────────────────────────── */

/* Scoped to .js so content is never hidden when the script fails to run. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ───────────────────── 17. SPANISH TYPE MEASURES ───────────────────── */

/* Spanish sets about 20% longer than English. Only the display measures
   need opening up — body copy already wraps on its own measure, and ch is
   a relative unit, so these stay proportional at every viewport. */

[lang="es"] .hero__headline  { max-width: 18ch; }
[lang="es"] .h2--wide        { max-width: 23ch; }
[lang="es"] .close__headline { max-width: 21ch; }

/* ───────────────────────── 18. RESPONSIVE ──────────────────────────── */

/* Tablet and small laptop: the drawing still fits without scrolling, but
   its annotations are user units and have shrunk along with it. This walks
   them back toward the ~12px they hold at full width. */
@media (max-width: 1100px) {
  .note                 { font-size: 16px; }
  .schematic__you text  { font-size: 17px; }
  .schematic__duct path { stroke-width: 3; }
  .leader               { stroke-width: 1.3; }
}

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

  /* Entre 760 y 900px la cabecera aún muestra las cuatro piezas -- marca,
     región, selector de idioma y botón -- y la marca del logo le ha añadido
     ancho. Estrechar la separación evita que la fila se desborde antes de
     llegar al corte de 760px, donde la región y la disciplina desaparecen. */
  .masthead__inner { gap: 1.25rem; }
}

@media (max-width: 760px) {
  /* A bay of 11vh is a comfortable breath on a desktop sheet and simply a
     long scroll on a phone, where the same rhythm has to be read through a
     window a third the height. */
  :root { --bay: clamp(3.5rem, 8vw + 1.75rem, 5.5rem); }

  /* Aquí la barra pierde la disciplina, así que baja a unas 3rem. El ancla
     necesita algo más que eso, no las 5rem de antes. */
  html { scroll-padding-top: 4.25rem; }

  .masthead__discipline { display: none; }

  /* Sin la disciplina, el selector de idioma gana el sitio que necesita. */
  .masthead__inner { gap: 1rem; }
  .langswitch { font-size: 0.62rem; }
  .langswitch__opt { padding-inline: 0.5rem; }

  /* The drawing holds a legible size and scrolls instead of shrinking. */
  .schematic__hint { display: block; }
  .schematic__svg { min-width: 700px; }

  /* SVG type and line weights are user units, so they scale with the
     viewBox. At 700px the drawing renders at 0.58, which puts these values
     back near 12px on screen. */
  .note                             { font-size: 20px; }
  .schematic__you text              { font-size: 21px; }
  .schematic__duct path             { stroke-width: 3.5; }
  .schematic__flow path             { stroke-width: 2; }
  .schematic__flow .streamline--out { stroke-width: 1.7; }
  .schematic__eddies path           { stroke-width: 1.9; }
  .leader                           { stroke-width: 1.6; }

  .hero__lede { max-width: none; }

  .step { grid-template-columns: 1fr; gap: 1rem; }
  .step__bubble { width: 2.75rem; height: 2.75rem; font-size: 0.9rem; }
  .step__body { padding-top: 0; }

  .notes__item { grid-template-columns: 2.25rem 1fr; gap: 0.75rem; }

  /* 4rem of sheet padding inside a 335px viewport leaves the notes a 200px
     measure. The sheet keeps its border and gives the column back. */
  .sheet { padding: 1.5rem; }

  .tb-cell { border-right: none; }
}

/* Phones. Brand, language switch and a full booking button want about
   410px of masthead at the Spanish label, and a 360px Android gives 320.
   The button leaves the bar here and re-docks at the bottom of the screen
   (section 24), which both resolves the crowding and puts the one action
   on the page within reach of a thumb. */
@media (max-width: 620px) {
  .masthead .btn { display: none; }
  .masthead__inner { padding-block: 0.4rem; }
}

@media (max-width: 560px) {
  /* At this measure a button that stops short of the margin reads as an
     accident rather than a choice — and the full width is the easier
     target besides. */
  .btn { width: 100%; justify-content: space-between; }
  .btn--compact { width: auto; }

  .close__note { max-width: none; }

  /* The eyebrow rule is a fifth of the line at 320px. Shortened, it still
     reads as a leader without crowding the label off the end. */
  .eyebrow { gap: 0.7rem; }
  .eyebrow::before { width: 1.6rem; }
}

/* ── Touch targets ──
   A coarse pointer lands within about 9mm of where it aimed, so every
   standalone control here is given the 44px it takes to hit reliably.
   Placed after the width queries on purpose: these have to outrank the
   padding those queries set. Prose links are left alone — padding out an
   inline link would open holes in the paragraph it sits in. */
@media (pointer: coarse) {
  .langswitch__opt,
  .viewtoggle__opt {
    display: grid;
    place-items: center;
    min-height: 2.75rem;
    padding-block: 0;
  }

  .crumb a,
  .docnav__all,
  .register__foot a,
  .tb-cell--legal a,
  .tb-cell--links a {
    display: inline-block;
    padding-block: 0.5rem;
  }

  .docnav__step { padding-block: 0.4rem; }

  .skip-link { padding: 1rem 1.25rem; }
}

/* ── No hover ──
   Touch browsers still latch :hover on tap and leave it latched until you
   tap somewhere else, so the offset frame — a hover-only drafting device —
   would appear after a tap and stay. It goes, and :active takes over:
   immediate, and it clears itself. */
@media (hover: none) {
  .btn::after { display: none; }

  .btn:active { --btn-bg: var(--teal); }
  .btn--invert:active { --btn-bg: var(--white); }

  .doccard:active { background: rgba(200, 217, 230, 0.34); }
  .doccard:active::before { transform: scaleY(1); }
}

/* ─────────────────────── 19. REDUCED MOTION ────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Land every animated element on its finished state. */
  .schematic__duct path,
  .leader { stroke-dashoffset: 0; }

  .schematic__flow path,
  .schematic__eddies path,
  .schematic__you text,
  .note { opacity: 1; }

  .schematic__you circle { transform: scale(1); }

  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ──────────────────────────── 20. PRINT ────────────────────────────── */

@media print {
  /* The toggle is a control; on paper only the chosen state means anything. */
  .masthead, .skip-link, .viewtoggle, .schematic__hint { display: none; }

  /* A printed sheet is typically narrower than 760px, so the mobile rules
     apply here too — and a scroll frame on paper just crops the drawing.
     Let it fit the page instead. */
  .schematic__frame { overflow: visible; }
  .schematic__svg   { min-width: 0; }
  body { background: var(--white); }
  .section--dark, .titleblock { background: var(--white); color: var(--navy); }

  /* Sky blue is a legible ink on navy and invisible on white. */
  .section--dark .eyebrow,
  .guarantee__label,
  .guarantee__sign,
  .guarantee__text strong,
  .tb-cell__label,
  .tb-cell__note,
  .titleblock__rights { color: var(--teal); }

  .guarantee { border-color: var(--rule); border-left-color: var(--navy); }
  .tb-cell { border-color: var(--rule); }
  .titleblock__grid { border-color: var(--rule); }

  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ─────────────────────── 21. LEGAL REGISTER ────────────────────────── */

/* A drawing set opens with its sheet index: every sheet numbered and
   titled before the first line is read. The legal set opens the same way. */

.section--register { padding-block: clamp(3rem, 6vw, 4.5rem) var(--bay); }

.register__headline {
  max-width: 16ch;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(2.1rem, 1.2rem + 3.8vw, 3.9rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

.register__lede {
  max-width: 52ch;
  font-size: clamp(1.02rem, 0.97rem + 0.3vw, 1.2rem);
  color: var(--ink-soft);
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

/* Bordered cell grid — the same construction as the title block: hairline
   boxes sharing edges, no radius, nothing floating. */
.docindex {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  border-top: 1px solid var(--rule-strong);
  border-left: 1px solid var(--rule-strong);
}

.docindex > li {
  display: flex;
  border-right: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}

.doccard {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: clamp(1.5rem, 3vw, 2rem);
  text-decoration: none;
  transition: background 0.25s var(--ease);
}

/* The left edge thickens on approach — the emphasis the guarantee note
   already carries, borrowed so the whole set reads as one system. */
.doccard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--teal);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s var(--ease);
}

.doccard:hover,
.doccard:focus-visible { background: rgba(200, 217, 230, 0.34); }

.doccard:hover::before,
.doccard:focus-visible::before { transform: scaleY(1); }

.doccard__no {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--teal);
  margin-bottom: 1.1rem;
}

.doccard__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.24;
  margin-bottom: 0.6rem;
  text-wrap: balance;
}

.doccard__desc {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}

.doccard__cue {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
}

.doccard:hover .btn__arrow,
.doccard:focus-visible .btn__arrow { transform: translateX(4px); }

.register__foot {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.register__foot a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
}
.register__foot a:hover { border-bottom-color: var(--teal); }

/* ─────────────────────── 22. LEGAL DOCUMENT ────────────────────────── */

.section--doc { padding-block: clamp(2.5rem, 5vw, 3.5rem) var(--bay); }

.crumb {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
}

.crumb a { text-decoration: none; border-bottom: 1px solid transparent; }
.crumb a:hover { border-bottom-color: var(--teal); }
.crumb__sep { color: var(--rule-strong); }
.crumb [aria-current="page"] { color: var(--ink-soft); }

.doc__no {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--teal);
  margin-bottom: 1rem;
}

.doc__headline {
  max-width: 20ch;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.15rem + 3vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

/* Sheet metadata, ruled top and bottom like a revision strip. */
.doc__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 clamp(2.25rem, 4vw, 3rem);
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}

.doc__meta-row { padding: 1rem 1.25rem 1rem 0; }

.doc__meta dt {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.45rem;
}

.doc__meta dd { margin: 0; font-size: 0.95rem; }

/* Body styles hang off elements, not classes, so the document markup
   stays as plain as the source it came from. */

.doc__body { max-width: 70ch; }

.doc__body > * + * { margin-top: 1.2rem; }

.doc__body h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.05rem + 0.75vw, 1.6rem);
  line-height: 1.24;
  margin-top: clamp(2.5rem, 5vw, 3.25rem);
  padding-top: 1.35rem;
  border-top: 1px solid var(--rule);
}

.doc__body h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.04rem;
  margin-top: 2rem;
}

.doc__body p,
.doc__body li { color: var(--ink-soft); }

.doc__body ul,
.doc__body ol { padding-left: 1.5rem; }
.doc__body ul { list-style: disc; }
.doc__body ol { list-style: decimal; }
.doc__body li + li { margin-top: 0.55rem; }
.doc__body li::marker { color: var(--teal); }

.doc__body a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  transition: border-color 0.2s var(--ease);
}
.doc__body a:hover { border-bottom-color: var(--teal); }

.doc__body strong { color: var(--ink); font-weight: 600; }

.doc__body hr {
  border: 0;
  border-top: 1px solid var(--rule-strong);
  margin-block: clamp(2.5rem, 5vw, 3.5rem);
}

/* Table of contents — an ordered list that keeps the source numbering. */
.doc__toc { padding-left: 0 !important; list-style: none !important; }
.doc__toc li { font-family: var(--font-mono); font-size: 0.82rem; }
.doc__toc li + li { margin-top: 0.4rem; }

/* ── Unfilled fields ──
   Marked, never hidden. A field still waiting on a real value should be
   impossible to publish by accident. */
.ph {
  background: rgba(200, 217, 230, 0.62);
  border-bottom: 1px dashed var(--teal);
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: 0.86em;
  padding: 0.1em 0.36em;
}

/* ── Editorial blocks: NOT policy ──
   Drafting hatches an area that is provisional or out of scope. These
   blocks carry the author notes and the pre-publication checklist, and
   the hatch is there so no reader — and no one doing a final pass —
   can mistake them for terms that have been agreed. */
.doc__draft,
.doc__note,
.doc__todo {
  position: relative;
  padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.25rem, 3vw, 1.75rem);
  border: 1px dashed var(--rule-strong);
  border-left: 3px solid var(--teal);
  font-size: 0.93rem;
  background-color: rgba(242, 239, 231, 0.6);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(75, 107, 124, 0.09) 0,
    rgba(75, 107, 124, 0.09) 1px,
    transparent 1px,
    transparent 9px
  );
}

.doc__draft p,
.doc__note p,
.doc__todo p,
.doc__todo li { color: var(--ink-soft); }

.doc__draft p + p,
.doc__note p + p { margin-top: 0.9rem; }

.doc__draft-label,
.doc__note-label,
.doc__todo-label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.7rem;
}

.doc__todo ul {
  padding-left: 0 !important;
  list-style: none !important;
  margin-top: 0.9rem;
}
.doc__todo li {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.5;
}
.doc__todo li::before {
  content: "\2610";
  color: var(--teal);
  margin-right: 0.6rem;
}

/* ── Sheet-to-sheet navigation ── */
.docnav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--gap);
  align-items: center;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule-strong);
}

.docnav__step {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-decoration: none;
}

.docnav__step--next { text-align: right; }

.docnav__dir {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
}

.docnav__name {
  font-family: var(--font-display);
  font-size: 0.98rem;
  line-height: 1.3;
}

a.docnav__step:hover .docnav__name { color: var(--teal); }

.docnav__all {
  justify-self: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 2px;
}
.docnav__all:hover { border-bottom-color: var(--teal); }

/* ── Legal link in the title block ── */
.tb-cell--legal a {
  text-decoration: none;
  border-bottom: 1px solid var(--rule-on-dark);
  padding-bottom: 1px;
  transition: border-color 0.2s var(--ease);
}
.tb-cell--legal a:hover { border-bottom-color: var(--sky); }

/* The Spanish page links to a legal set that exists only in English. The
   note says so before the click, not after it. */
.tb-cell__note {
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--ink-on-dark-soft);
}

/* ────────────── 23. LEGAL — RESPONSIVE & PRINT OVERRIDES ───────────── */

@media (max-width: 640px) {
  .docnav {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .docnav__step--next { text-align: left; }
  .docnav__step--void { display: none; }
  .docnav__all { justify-self: start; }

  .doc__meta-row { padding-right: 0; }
  .doc__meta-row + .doc__meta-row { border-top: 1px solid var(--rule); }

  .doc__body table { display: block; overflow-x: auto; }
}

@media print {
  .crumb, .docnav { display: none; }

  /* Teal survives on paper where sky blue does not. */
  .doccard__no,
  .doc__no,
  .doc__meta dt { color: var(--teal); }

  .doccard, .docindex > li { break-inside: avoid; }
  .doc__body h2 { break-after: avoid; }

  /* An unfilled field must still read as unfilled on paper, and an
     editorial block must still read as one. */
  .ph { background: none; border-bottom: 1px dashed var(--navy); }
  .doc__draft, .doc__note, .doc__todo { background: none; }
}

/* ─────────────────────── 24. MOBILE ACTION BAR ─────────────────────── */

/* The booking button, re-docked. Below 620px the masthead drops it (see
   18) and it reappears here: same plate, same hairline, no radius — the
   action strip of the drawing rather than a floating widget.

   No JavaScript and no duplication to manage. The markup sits on every
   page and is simply display:none above the breakpoint, which keeps it
   out of the accessibility tree too, so a desktop reader never meets the
   same link twice. */

.actionbar { display: none; }

/* Scoped to screen, not just to width: a printed sheet is usually narrower
   than 620px, and a fixed bar on paper is a stripe across the last page. */
@media screen and (max-width: 620px) {
  .actionbar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 0.6rem var(--margin);
    /* env() resolves to 0 unless the viewport is set to cover the display,
       which this site's is not. It is here for the Android gesture bar,
       which some browsers do report. */
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: rgba(242, 239, 231, 0.94);
    backdrop-filter: saturate(1.4) blur(10px);
    border-top: 1px solid var(--rule-strong);
  }

  .actionbar .btn {
    width: 100%;
    justify-content: space-between;
    padding-block: 1rem;
  }

  /* The bar is fixed, so it sits over whatever the page ends on. The title
     block carries the clearance rather than the body: padding on the body
     would leave a beige band under the navy footer. */
  .titleblock {
    padding-bottom: calc(7.25rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ────────────────── 23. FORMULARIO DE SOLICITUD ────────────────────── */
/* Páginas /es/agenda/ y /schedule/. El formulario se dibuja como un
   bloque de casillas rotuladas de un plano: cada campo es una casilla de
   fondo blanco con su rótulo en mono arriba, igual que las celdas del
   cajetín del pie. No se inventa nada nuevo — usa los mismos tokens. */

:root {
  /* La paleta de marca no tiene un color de error, y hacía falta uno: un
     mensaje de "revisa este campo" en teal se pierde entre el resto de
     las anotaciones. Este ladrillo apagado convive con el navy sin
     gritar, y contrasta de sobra sobre el beige (7.1:1). */
  --alert: #96331F;
}

/* El atributo hidden lo respeta el navegador por su cuenta, pero abajo
   hay reglas que dan display a estos elementos. Sin esta línea, ganarían
   ellas y el mensaje de éxito se vería desde el primer momento. */
[hidden] { display: none !important; }

.lead__intro {
  max-width: 58ch;
  margin: clamp(1.5rem, 3vw, 2rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  font-size: 1.05rem;
  color: var(--ink-soft);
}

/* El formulario no se estira más allá de esto: un campo de texto de 60rem
   de ancho es incómodo de leer y parece un error de maquetación. */
.lead {
  max-width: 40rem;
  border-top: 1px solid var(--rule-strong);
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
}

.lead__field + .lead__field,
.lead__row + .lead__field,
.lead__field + .lead__row { margin-top: 1.5rem; }

/* Estado y ciudad, uno al lado del otro. auto-fit con minmax hace que se
   apilen solos cuando no caben, sin necesidad de un media query. */
.lead__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: 1.5rem;
}

.lead__label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
}

.lead__input {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  /* 1rem es el mínimo que evita que Safari en iPhone haga zoom al tocar
     un campo. Por debajo de eso, la página salta al escribir. */
  font-size: 1rem;
  line-height: 1.4;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.lead__input:hover { border-color: var(--teal); }

.lead__input:focus {
  outline: none;                        /* Se sustituye por el borde de abajo */
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(75, 107, 124, 0.18);
}

/* Campo marcado como incorrecto. Se engancha a aria-invalid, el mismo
   atributo que ya avisa al lector de pantalla, para que el aviso visual
   y el sonoro no puedan separarse por descuido. */
.lead__input[aria-invalid="true"] {
  border-color: var(--alert);
  box-shadow: 0 0 0 3px rgba(150, 51, 31, 0.14);
}

/* El desplegable, con su flecha dibujada a mano: appearance:none quita la
   del sistema, que en Windows y en Mac no se parecen en nada. */
.lead__input--select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--teal) 50%),
                    linear-gradient(135deg, var(--teal) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 55%, calc(100% - 1rem) 55%;
  background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
  background-repeat: no-repeat;
  cursor: pointer;
}

.lead__hint {
  margin-top: 0.45rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* Vacío ocupa cero: el hueco del error no separa los campos mientras no
   haya nada que decir. :empty se encarga, sin tocar el HTML. */
.lead__error {
  margin-top: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--alert);
}
.lead__error:empty { display: none; }

/* ── Aceptación de las políticas ───────────────────────────────────── */

.lead__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-top: clamp(1.75rem, 4vw, 2.25rem);
  padding-top: clamp(1.75rem, 4vw, 2.25rem);
  border-top: 1px solid var(--rule);
}

/* La casilla se agranda a 1.35rem: el tamaño de fábrica es de los pocos
   controles que en un móvil quedan por debajo del objetivo táctil
   cómodo, y esta en concreto es obligatoria para poder enviar. */
.lead__check {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.15rem;
  accent-color: var(--teal);
  cursor: pointer;
}

.lead__consent-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft);
  cursor: pointer;
}

.lead__consent-text a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
}
.lead__consent-text a:hover { border-bottom-color: var(--teal); }

/* ── Turnstile ─────────────────────────────────────────────────────── */

/* El widget lo dibuja Cloudflare dentro de un iframe de tamaño fijo, así
   que aquí solo se reserva el espacio y se le da aire alrededor. */
.lead__turnstile {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  min-height: 65px;
}

/* ── Aviso general y botón ─────────────────────────────────────────── */

.lead__notice {
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  background: rgba(150, 51, 31, 0.08);
  border-left: 3px solid var(--alert);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink);
}

.lead__notice:focus-visible { outline: 2px solid var(--alert); outline-offset: 3px; }

.lead__submit {
  margin-top: clamp(1.75rem, 4vw, 2.25rem);
  appearance: none;
  cursor: pointer;
}

/* Mientras se envía: el botón se apaga y deja de responder al ratón, para
   que un doble clic nervioso no cree dos solicitudes iguales. */
.lead__submit:disabled {
  --btn-bg: var(--teal);
  opacity: 0.6;
  cursor: progress;
}
.lead__submit:disabled::after { display: none; }

/* ── Mensaje de éxito ──────────────────────────────────────────────── */

.lead__done {
  max-width: 40rem;
  border-top: 1px solid var(--rule-strong);
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
}

.lead__done:focus-visible { outline: none; }

.lead__done-title {
  max-width: 20ch;
  margin: 0.5rem 0 1.25rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem);
  line-height: 1.18;
}

.lead__done p { color: var(--ink-soft); }
.lead__done-back { margin-top: clamp(2rem, 4vw, 2.75rem); }

/* En las páginas del formulario no hay barra de acción abajo — el botón
   que llevaría hasta aquí sería esta misma página — así que el cajetín
   del pie recupera su separación normal. */
@media (max-width: 619.98px) {
  .page--form .titleblock { padding-bottom: var(--bay); }
}

/* ────────────── 25. BLOQUES DEL MODELO DE DOS FASES ─────────────────── */

/* Componentes que entraron con la oferta de dos fases: la lista de preguntas
   del problema, la comparación «qué sí es / qué no es», las dos fases, las
   dos columnas de la hoja de alcance y los dos precios.

   Van al final del archivo a propósito, para no tener que renumerar las
   veinticuatro secciones anteriores. Dentro de este bloque el orden sí
   importa: las reglas de impresión son las últimas, porque tienen que ganarle
   a los colores que se declaran más arriba. */

/* ── Lista de preguntas / de entregables ─────────────────────────────── */

/* Se usa dos veces: las diez preguntas del dueño (sobre fondo navy) y lo que
   se suele construir en la Fase 02 (sobre fondo claro). Los colores de la
   versión oscura se ajustan más abajo, como hace el resto de la hoja. */
.checklist {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--rule);
}

.checklist__label {
  max-width: 62ch;
  margin-bottom: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--teal);
}

/* min(19rem, 100%) y no 19rem a secas: en un teléfono de 320px la columna
   mínima sería más ancha que la pantalla y la página se desbordaría de lado.
   Con min() la columna nunca pide más de lo que hay. */
.checklist__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: 0.9rem clamp(1.5rem, 4vw, 3rem);
}

.checklist__item {
  position: relative;
  max-width: 46ch;
  padding-left: 1.4rem;
  color: var(--ink-soft);
}

/* El cuadrito que hace de viñeta. Es un cuadrado y no un punto para que
   combine con las estaciones del calendario, que también son cuadradas. */
.checklist__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 6px;
  height: 6px;
  background: var(--teal);
}

.section--dark .checklist            { border-top-color: var(--rule-on-dark); }
.section--dark .checklist__label     { color: var(--sky); }
.section--dark .checklist__item      { color: var(--ink-on-dark-soft); }
.section--dark .checklist__item::before { background: var(--sky); }

/* ── Las dos fases ───────────────────────────────────────────────────── */

/* La segunda fase se separa de la primera con una regla, no con una tarjeta:
   son dos tramos del mismo recorrido, no dos productos en un catálogo. */
.phase + .phase {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--rule);
}

.phase__head { margin-bottom: clamp(2rem, 4vw, 3rem); }

.phase__tag {
  display: inline-block;
  margin-bottom: 1.15rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--teal);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
}

.phase__title {
  max-width: 26ch;
  margin-bottom: 0.9rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  line-height: 1.2;
}

.phase__meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

.phase__note {
  max-width: 54ch;
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--teal);
}

/* Estos párrafos viven en un .wrap de ancho completo (1220px), no en un
   .wrap--measure, así que sin esto la línea se haría ilegible de tan larga. */
.phase .prose,
.section__head .prose { max-width: var(--measure); }

/* ── Hoja de alcance: una columna por fase ───────────────────────────── */

.parts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}

.part__label {
  margin-bottom: 1.5rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
}

/* ── Impresión ───────────────────────────────────────────────────────── */

/* En papel las secciones oscuras se imprimen en blanco (sección 20), así que
   todo lo que aquí va en beige o azul cielo quedaría invisible. Se devuelve
   a tinta, igual que hace esa sección con la nota de garantía. */
@media print {
  .section--dark .checklist            { border-top-color: var(--rule); }
  .section--dark .checklist__item      { color: var(--ink-soft); }
  .section--dark .checklist__item::before { background: var(--teal); }

  .section--dark .checklist__label { color: var(--teal); }
}

/* ──────────────── 26. ENLACE SECUNDARIO AL FORMULARIO ───────────────── */

/* Va debajo del botón de reserva en los tres CTA en prosa de cada portada,
   y como un elemento más de la fila de contacto del cajetín.

   Es deliberadamente discreto. La acción preferida sigue siendo agendar la
   llamada: esto es la salida para quien todavía no quiere comprometerse a
   una hora concreta y prefiere dejar sus datos. Si se dibujara como un
   segundo botón, las dos opciones competirían y ninguna ganaría. */
.altcta {
  margin-top: 1.1rem;
  font-size: 0.88rem;
}

.altcta a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color 0.25s var(--ease);
}

.altcta a:hover,
.altcta a:focus-visible { color: var(--teal); }

/* Sobre el navy de la sección de precio, la tinta oscura no se vería. */
.section--dark .altcta a { color: var(--ink-on-dark-soft); }

.section--dark .altcta a:hover,
.section--dark .altcta a:focus-visible { color: var(--sky); }

/* En papel las secciones oscuras se imprimen en blanco (sección 20), así
   que este enlace tiene que volver a tinta como el resto. */
@media print {
  .section--dark .altcta a { color: var(--teal); }
}