/* Hallmark · genre: editorial · macrostructure: Marquee Hero · theme: Almanac
 * enrichment: Tier A pure-CSS art (three textured hero panels) · nav: N9 edge-aligned · footer: Ft1 mast-headed
 * tone: editorial · anchor hue: warm-oat 80 · accent: ochre 62 + ZAS gold 88
 * type: Alan Sans única familia (petición del cliente) — jerarquía por peso 300/400/600/900
 * pre-emit critique: P5 H5 E4 S5 R4 V5
 */

@import url("tokens.css?v=38ec7538");

/* ============================================================
   Base
   ============================================================ */

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

html {
  overflow-x: clip;               /* clip, never hidden — preserves sticky/fixed */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.62;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;             /* roman only — italic headers are banned */
  font-weight: var(--weight-display);
  line-height: 1.08;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; }

::selection { background: var(--color-gold); color: var(--color-ink); }

:focus-visible {
  outline: var(--rule-firm) solid var(--color-focus);
  outline-offset: 3px;
  /* never transitioned — the ring must appear instantly */
}

.skip {
  position: absolute; left: var(--space-md); top: -4rem;
  z-index: var(--z-tooltip);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-ink); color: var(--color-paper);
  font-size: var(--text-sm); text-decoration: none;
  transition: top var(--dur-micro) var(--ease-out);
}
.skip:focus-visible { top: var(--space-md); }

.wrap {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: clamp(var(--space-md), 5vw, var(--space-3xl));
}

/* ============================================================
   N9 · Edge-aligned nav — transparent over the hero, solid after
   ============================================================ */

.nav {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md);
  /* el relleno lateral centra el contenido de la barra en la misma caja de
     --ancho-max que el resto de la página, para que el logo quede a plomo
     con los títulos */
  padding-block: var(--space-lg);
  padding-inline: max(clamp(var(--space-md), 5vw, var(--space-3xl)),
                      calc((100vw - var(--ancho-max)) / 2 + clamp(var(--space-md), 5vw, var(--space-3xl))));
  /* los dos extremos del hero son dorados: la barra va en tinta, no en blanco */
  color: var(--color-ink);
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              padding var(--dur-short) var(--ease-out);
}
.nav[data-solid="true"] {
  background: var(--color-paper);
  color: var(--color-ink);
  padding-block: var(--space-md);
  box-shadow: 0 1px 0 var(--color-rule);
}

/* El logotipo es el SVG corporativo. Viene en tinta (#111110); sobre fondo
   oscuro se invierte con un filtro en lugar de mantener dos ficheros. */
.wordmark { display: inline-flex; align-items: center; text-decoration: none; }
.wordmark img { display: block; block-size: 2.1rem; inline-size: auto; }
/* sin filtro por defecto: sobre el dorado del hero y sobre papel manda la tinta */

.nav__side { display: flex; align-items: center; gap: clamp(var(--space-md), 2.5vw, var(--space-xl)); }
.nav__tel {
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;                        /* clickable text never wraps */
  opacity: 0.85;
}
.nav__tel:hover { opacity: 1; }

.nav__cta {
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  padding: var(--space-xs) var(--space-md);
  border: var(--rule-hair) solid currentColor;
  transition: background-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.nav__cta:hover { background: var(--color-ink); color: var(--color-gold); border-color: var(--color-ink); }
.nav[data-solid="true"] .nav__cta:hover { background: var(--color-gold); color: var(--color-ink); border-color: var(--color-gold); }
.nav__cta:active { transform: translateY(1px); }

@media (max-width: 34rem) { .nav__tel { display: none; } }

/* ============================================================
   Marquee Hero — three textured panels, fixed; the document
   scrolls over them. Panels drift at three different rates.
   ============================================================ */

.hero { height: 100svh; }

.hero__stage {
  position: fixed; inset: 0;
  z-index: var(--z-base);
  display: grid;
  place-items: center;
  overflow: hidden;
  /* cuando los paneles laterales se abren, detrás aparece el papel del
     documento: la apertura enlaza el hero con el cuerpo de la página */
  background: var(--color-paper);
}

.hero__panels { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1.35fr 1fr; }

.panel { position: relative; overflow: hidden; }

/* grain, hand-mixed — feTurbulence at low opacity, not a stock texture */
.panel::after {
  content: "";
  position: absolute; inset: -20%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.26;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Los dos laterales son idénticos: dorado plano. Enmarcan el centro oscuro y,
   al abrirse hacia los extremos, dejan que el mensaje se quede solo. Simetría
   a propósito: el hero es un marco, no un collage. Sin tramas: el grano fino
   de los paneles basta para que el color no se vea plástico. */
.panel--paper,
.panel--night { background: var(--color-gold); }

/* El centro: oscuro y limpio. Es el bloque que luego se ensancha para ocupar
   la pantalla mientras la frase se acerca. */
.panel--sky { background: var(--color-ink); transform-origin: 50% 50%; }

.hero__type {
  position: relative;
  z-index: var(--z-raised);
  text-align: center;
  padding-inline: var(--space-lg);
  /* low-biased, not dead centre — breaks the centred-everything default */
  transform: translateY(6vh);
}

.hero__display {
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  font-size: var(--text-marquee);
  font-weight: var(--weight-marquee);
  line-height: 0.9;
  letter-spacing: -0.05em;                   /* Alan Sans en display pide cierre */
  color: var(--color-paper);
  text-transform: uppercase;
  margin: 0;
  text-shadow: var(--shadow-hero);
}

.hero__sub {
  transform-origin: 50% 50%;      /* crece desde su centro: se acerca de frente */
  will-change: transform, opacity;
  margin-block-start: var(--space-md);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.15rem, 2.4vw, var(--text-lg));
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-paper);
  text-shadow: var(--shadow-hero-sub);
  max-width: 34ch;
  margin-inline: auto;
}

.hero__meta {
  position: absolute;
  inset-block-end: var(--space-xl);
  inset-inline-start: clamp(var(--space-md), 5vw, var(--space-2xl));
  z-index: var(--z-raised);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink);                   /* sobre el panel dorado */
  opacity: 0.72;
  max-width: 16rem;
}

.hero__scroll {
  position: absolute;
  inset-block-end: var(--space-xl);
  inset-inline-end: clamp(var(--space-md), 5vw, var(--space-2xl));
  z-index: var(--z-raised);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink);                   /* sobre el lateral dorado */
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--space-xs);
  opacity: 0.72;
  transition: opacity var(--dur-micro) var(--ease-out);
}
.hero__scroll:hover { opacity: 1; }
.hero__scroll .arrow { display: block; inline-size: 1px; block-size: 2.5rem; background: currentColor; }

/* Scroll-driven drift. Progressive enhancement: where scroll timelines are
   unsupported the panels simply hold still and the document still reveals. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .panel, .hero__display, .hero__sub, .hero__meta, .hero__scroll {
      animation-timeline: scroll(root block);
      animation-range: 0 100svh;
      animation-fill-mode: both;
      animation-timing-function: linear;
    }
    /* Los dos paneles exteriores se abren hacia los extremos; el central se
       ensancha hasta cubrir la pantalla, de modo que la frase conserve un
       fondo oscuro detrás mientras se acerca. */
    .panel--paper { animation-name: abrir-izquierda; }
    .panel--night { animation-name: abrir-derecha; }
    .panel--sky   { animation-name: fondo-ocupa; }

    /* El titular cede el sitio: retrocede y se apaga mientras la frase avanza. */
    .hero__display { animation-name: titular-atras; }
    .hero__sub     { animation-name: frase-adelante; }

    .hero__meta, .hero__scroll { animation-name: fade-away; }
  }
}

@keyframes abrir-izquierda { to { transform: translate3d(-102%, 0, 0); } }
@keyframes abrir-derecha   { to { transform: translate3d( 102%, 0, 0); } }
@keyframes fondo-ocupa     { to { transform: scaleX(2.55); } }
@keyframes titular-atras {
  0%   { transform: scale(1);    opacity: 1; }
  52%  { transform: scale(0.86); opacity: 0; }   /* se apaga antes de que la frase lo alcance */
  100% { transform: scale(0.82); opacity: 0; }
}
@keyframes frase-adelante {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.7); opacity: 1; }
  100% { transform: scale(3.6); opacity: 0; }
}
@keyframes fade-away       { to { opacity: 0; } }

/* ============================================================
   Document — scrolls over the hero
   ============================================================ */

.doc {
  position: relative;
  z-index: var(--z-raised);
  background: var(--color-paper);
  border-block-start: var(--rule-thick) solid var(--color-ink);   /* the hard divider */
}

.section { padding-block: clamp(var(--space-2xl), 9vw, var(--space-4xl)); }
.section + .section { border-block-start: var(--rule-hair) solid var(--color-rule); }
.section--tight { padding-block: clamp(var(--space-xl), 6vw, var(--space-3xl)); }
.section--night { background: var(--color-night); color: var(--color-night-ink); border-block-start-color: var(--color-night-rule); }

/* Section heads stack vertically — never tag-left / heading-right */
.head { max-width: 42ch; margin-block-end: var(--space-xl); }
.head h2 { font-size: var(--text-3xl); }
.head .lede {
  margin-block-start: var(--space-md);
  color: var(--color-muted);
  font-size: var(--text-md);
  max-width: 58ch;
}
.section--night .head .lede { color: var(--color-night-muted); }

/* The opening statement — a grid-break: it escapes the measure on purpose */
.opener {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-2xl);
  line-height: 1.24;
  letter-spacing: -0.025em;
  max-width: 30ch;
}
.opener .mark {
  background: linear-gradient(to top, var(--color-gold) 0.42em, transparent 0.42em);
}
.prose { max-width: 62ch; display: grid; gap: var(--space-md); color: var(--color-muted); }
.prose strong { color: var(--color-ink); font-weight: 600; }
/* sobre fondo noche la prosa y los enlaces necesitan sus propios valores:
   el ocre y el gris de papel no llegan al contraste mínimo en oscuro */
.section--night .prose { color: var(--color-night-muted); }
.section--night .prose strong { color: var(--color-night-ink); }
.section--night .prose a, .section--night .inline-link { color: var(--color-gold); }

.prose a, .inline-link {
  color: var(--color-accent);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--dur-micro) var(--ease-out);
}
.prose a:hover, .inline-link:hover { background-size: 100% 2px; }

/* Asymmetric two-up: 2fr / 5fr, not equal columns */
.split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 5fr);
  gap: clamp(var(--space-lg), 4vw, var(--space-3xl));
  align-items: start;
}
.split__aside {
  font-size: var(--text-sm);
  color: var(--color-neutral);
  border-block-start: var(--rule-firm) solid var(--color-ink);
  padding-block-start: var(--space-sm);
}

/* ---- Confirmado / Sin definir — hairline lists, no cards ---- */
.ledger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
}
.ledger__col > h3 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-block-end: var(--space-sm);
  border-block-end: var(--rule-firm) solid var(--color-ink);
}
.ledger__col--open > h3 { border-block-end-color: var(--color-rule-firm); color: var(--color-neutral); }
.ledger ul { list-style: none; margin: 0; padding: 0; }
.ledger li {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-block-end: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.ledger__col--open li { color: var(--color-muted); }
.ledger .tick { inline-size: 0.6rem; block-size: 0.6rem; margin-block-start: 0.45em; background: var(--color-gold); }
.ledger__col--open .tick { background: none; border: var(--rule-hair) solid var(--color-rule-firm); }

/* ---- Steps — genuinely ordinal, so numbering is earned ---- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.steps li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: clamp(var(--space-md), 3vw, var(--space-xl));
  padding-block: var(--space-xl);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}
.steps li:first-child { border-block-start: var(--rule-firm) solid var(--color-ink); }
.steps .n {
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
  font-size: var(--text-lg);
  line-height: 1.2;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
.steps h3 { font-size: var(--text-lg); margin-block-end: var(--space-xs); }
.steps p { color: var(--color-muted); max-width: 56ch; }

/* ---- Calendar ---- */
.timeline { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.timeline th, .timeline td { text-align: left; padding: var(--space-md) var(--space-md) var(--space-md) 0; vertical-align: top; border-block-end: var(--rule-hair) solid var(--color-rule); }
.timeline thead th {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-neutral);
  border-block-end: var(--rule-firm) solid var(--color-ink);
}
.timeline tbody th { inline-size: 32%; font-weight: 600; }
.timeline td { color: var(--color-muted); }
.timeline tbody tr:last-child th, .timeline tbody tr:last-child td { border-block-end: 0; }
.tablewrap { overflow-x: auto; }

/* ---- FAQ ---- */
.faq { border-block-start: var(--rule-firm) solid var(--color-ink); }
.faq details { border-block-end: var(--rule-hair) solid var(--color-rule); }
.faq summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md);
  padding-block: var(--space-lg);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-md);
  letter-spacing: -0.015em;
  transition: color var(--dur-micro) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--color-accent); }
.faq summary .sign { flex: 0 0 auto; inline-size: 0.9rem; block-size: 0.9rem; position: relative; }
.faq summary .sign::before, .faq summary .sign::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%;
  block-size: var(--rule-firm); background: var(--color-accent);
  transition: transform var(--dur-short) var(--ease-in-out);
}
.faq summary .sign::after { transform: rotate(90deg); }
.faq details[open] summary .sign::after { transform: rotate(0deg); }
.faq details > div { padding-block-end: var(--space-lg); color: var(--color-muted); max-width: 66ch; }

/* ============================================================
   Form — waiting list
   ============================================================ */

.formgrid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
  align-items: start;
}

.field { display: grid; gap: var(--space-2xs); margin-block-end: var(--space-md); }
.field label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-night-muted);
}
.field .hint { font-size: var(--text-xs); color: var(--color-night-muted); opacity: 0.8; }

.field input, .field select, .field textarea {
  inline-size: 100%;
  padding: var(--space-sm) var(--space-md);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-night-ink);
  background: var(--color-night-2);
  border: var(--rule-hair) solid var(--color-night-rule);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-micro) var(--ease-out),
              background-color var(--dur-micro) var(--ease-out);
}
.field textarea { min-block-size: 6rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-night-muted); opacity: 0.55; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-night-muted); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--color-gold); }
.field select option { background: var(--color-night-2); color: var(--color-night-ink); }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select { border-color: var(--color-gold-deep); }

.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); }

.check { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: var(--space-sm); align-items: start; margin-block-end: var(--space-sm); cursor: pointer; }
.check input { inline-size: 1.1rem; block-size: 1.1rem; margin-block-start: 0.2rem; accent-color: var(--color-gold); }
.check span { font-size: var(--text-sm); color: var(--color-night-muted); line-height: 1.45; }
.check a { color: var(--color-gold); }

.submit {
  inline-size: 100%;
  margin-block-start: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
  background: var(--color-gold);
  border: var(--rule-firm) solid var(--color-gold);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-out),
              opacity var(--dur-micro) var(--ease-out);
}
.submit:hover, .submit.is-hover { background: var(--color-gold-deep); border-color: var(--color-gold-deep); }
.submit:active, .submit.is-active { transform: translateY(1px); }
.submit:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.submit[data-state="loading"] { opacity: 0.75; cursor: progress; }
.submit[data-state="error"] { background: transparent; color: var(--color-gold); }

.formnote { margin-block-start: var(--space-sm); font-size: var(--text-xs); color: var(--color-night-muted); }

.formmsg { margin-block-start: var(--space-md); padding: var(--space-md); font-size: var(--text-sm); border-inline-start: var(--rule-thick) solid var(--color-gold); background: var(--color-night-2); }
.formmsg[data-tone="error"] { border-inline-start-color: var(--color-gold-deep); }

.done { border: var(--rule-firm) solid var(--color-gold); padding: clamp(var(--space-lg), 4vw, var(--space-2xl)); }
.done h3 { font-size: var(--text-xl); margin-block-end: var(--space-md); }
.done p { color: var(--color-night-muted); margin-block-end: var(--space-sm); max-width: 48ch; }

/* ============================================================
   Ft1 · Mast-headed footer
   ============================================================ */

.foot { background: var(--color-ink); color: var(--color-paper); padding-block: var(--space-2xl); }
.foot__band { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-lg); }
.foot__mark img { display: block; block-size: 2.1rem; inline-size: auto; filter: invert(1) brightness(1.9); }
.foot__tag { color: var(--color-foot-tag); font-size: var(--text-sm); max-width: 34ch; }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); font-size: var(--text-sm); }
.foot__links a { text-decoration: none; white-space: nowrap; opacity: 0.8; }
.foot__links a:hover { opacity: 1; color: var(--color-gold); }
.foot__rule { block-size: var(--rule-hair); background: var(--color-foot-rule); margin-block: var(--space-xl); border: 0; }
.foot__fine { font-size: var(--text-xs); color: var(--color-foot-fine); display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }

/* ============================================================
   Responsive — verified at 320 / 375 / 414 / 768
   ============================================================ */

@media (max-width: 62rem) {
  .formgrid { grid-template-columns: minmax(0, 1fr); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split__aside { border-block-start: 0; border-inline-start: var(--rule-firm) solid var(--color-ink); padding: 0 0 0 var(--space-md); }
}

@media (max-width: 48rem) {
  .ledger { grid-template-columns: minmax(0, 1fr); }
  .hero__panels { grid-template-columns: 1fr 1.6fr 1fr; }
  .head h2 { font-size: var(--text-2xl); }
  .opener { font-size: var(--text-xl); }
}

@media (max-width: 34rem) {
  .steps li { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .duo { grid-template-columns: minmax(0, 1fr); }
  /* En móvil el marco no cabe: se queda solo el bloque central oscuro a
     pantalla completa. Todo el texto del hero es claro sobre oscuro y el
     contraste deja de depender de sobre qué columna cae cada palabra. */
  .panel--paper, .panel--night { display: none; }
  .hero__panels { grid-template-columns: 1fr; }
  .nav:not([data-solid="true"]) { color: var(--color-paper); }
  .hero__scroll { color: var(--color-paper); }
  .hero__meta { max-width: 12rem; font-size: 0.58rem; letter-spacing: 0.12em; color: var(--color-paper); opacity: 0.8; }
  .wordmark img { block-size: 1.6rem; }
  .nav:not([data-solid="true"]) .wordmark img { filter: invert(1) brightness(1.9); }
  .hero__scroll .arrow { block-size: 1.6rem; }
  .foot__band { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
}

/* ============================================================
   Progreso de lectura — una línea fina, sin librerías.
   Usa scroll timeline: cero JavaScript, cero listeners.
   ============================================================ */

.progress {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  block-size: 2px;
  z-index: var(--z-toast);
  background: var(--color-accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
  opacity: 0;
  transition: opacity var(--dur-short) var(--ease-out);
  pointer-events: none;
}
.progress[data-on="true"] { opacity: 1; }

@supports (animation-timeline: scroll()) {
  .progress {
    animation: progress-grow linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes progress-grow { to { transform: scaleX(1); } }

/* ============================================================
   Barra de acción persistente — aparece al salir del hero y se
   retira cuando el formulario ya está a la vista. La página tiene
   una sola acción; conviene que esté siempre a un clic.
   ============================================================ */

.dock {
  position: fixed;
  inset-block-end: var(--space-lg);
  inset-inline: 0;
  max-inline-size: var(--ancho-max);
  margin-inline: auto;
  z-index: var(--z-sticky);
  display: flex; justify-content: center;
  padding-inline: var(--space-md);
  pointer-events: none;
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity var(--dur-short) var(--ease-out),
              transform var(--dur-short) var(--ease-out);
}
.dock[data-on="true"] { opacity: 1; transform: none; }
.dock[data-on="true"] .dock__inner { pointer-events: auto; }

.dock__inner {
  display: flex; align-items: center; gap: var(--space-md);
  max-inline-size: 100%;
  padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-lg);
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dock);
}
.dock__text { font-size: var(--text-sm); line-height: 1.3; }
.dock__text b { font-weight: var(--weight-strong); }
.dock__text span { display: block; color: var(--color-dock-sub); font-size: var(--text-xs); }

.dock__cta {
  flex: 0 0 auto;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  color: var(--color-ink);
  background: var(--color-gold);
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.dock__cta:hover { background: var(--color-gold-deep); }
.dock__cta:active { transform: translateY(1px); }

@media (max-width: 34rem) {
  .dock { inset-block-end: var(--space-md); }
  .dock__inner { inline-size: 100%; padding-inline-start: var(--space-md); }
  .dock__text span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dock { transition: opacity 150ms linear; transform: none; }
}

/* ---- Validación en línea: el error se ve al salir del campo ---- */
.field .err {
  font-size: var(--text-xs);
  color: var(--color-gold);
  font-weight: var(--weight-strong);
}
.field:not([data-invalid="true"]) .err { display: none; }

/* La apertura, cuando encabeza el bloque del formulario, va sobre fondo
   oscuro y con un poco más de aire por debajo. */
.section--night .opener--lead p { color: var(--color-night-ink); }
.opener--lead {
  max-width: 34ch;
  margin-block-end: clamp(var(--space-xl), 5vw, var(--space-3xl));
  padding-block-end: var(--space-xl);
  border-block-end: var(--rule-firm) solid var(--color-night-rule);
}
.opener--lead p {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-2xl);
  line-height: 1.24;
  letter-spacing: -0.025em;
}
/* sobre fondo oscuro el destacado se invierte: banda dorada con tinta encima */
.section--night .opener--lead p .mark {
  background: var(--color-gold);
  color: var(--color-ink);
  padding: 0 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
@media (max-width: 48rem) { .opener--lead p { font-size: var(--text-xl); } }

/* ============================================================
   Menú principal — el sitio dejó de ser una sola página
   ============================================================ */

.menu { display: flex; align-items: center; gap: clamp(var(--space-sm), 1.8vw, var(--space-lg)); }

.menu__link {
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.78;
  padding-block: var(--space-2xs);
  border-block-end: var(--rule-firm) solid transparent;
  transition: opacity var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
.menu__link:hover { opacity: 1; border-block-end-color: currentColor; }
.menu__link[aria-current="page"] { opacity: 1; border-block-end-color: var(--color-accent); }
.nav:not([data-solid="true"]) .menu__link[aria-current="page"] { border-block-end-color: var(--color-ink); }
.menu__link--ext { opacity: 0.6; }

/* Botón de menú: solo por debajo del umbral donde los enlaces dejan de caber */
.menu__toggle {
  display: none;
  align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  color: inherit;
  background: none;
  border: var(--rule-hair) solid currentColor;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.menu__bars { position: relative; inline-size: 1rem; block-size: 2px; background: currentColor; }
.menu__bars::before, .menu__bars::after {
  content: ""; position: absolute; inset-inline: 0; block-size: 2px; background: currentColor;
  transition: transform var(--dur-short) var(--ease-in-out);
}
.menu__bars::before { inset-block-start: -5px; }
.menu__bars::after  { inset-block-start:  5px; }
.menu__toggle[aria-expanded="true"] .menu__bars { background: transparent; }
.menu__toggle[aria-expanded="true"] .menu__bars::before { transform: translateY(5px) rotate(45deg); }
.menu__toggle[aria-expanded="true"] .menu__bars::after  { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 64rem) {
  .menu__toggle { display: inline-flex; }
  .menu {
    display: none;
    position: absolute; inset-block-start: 100%; inset-inline: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--space-sm) clamp(var(--space-md), 5vw, var(--space-3xl)) var(--space-lg);
    background: var(--color-paper);
    color: var(--color-ink);
    box-shadow: var(--shadow-menu);
  }
  .menu[data-open="true"] { display: flex; }
  .menu__link {
    opacity: 1;
    padding-block: var(--space-sm);
    border-block-end: var(--rule-hair) solid var(--color-rule);
  }
  .menu__link[aria-current="page"] { color: var(--color-accent); border-block-end-color: var(--color-rule); }
  .menu .nav__cta { margin-block-start: var(--space-md); text-align: center; }
}

/* ============================================================
   Encabezado de las páginas interiores — sin hero, con migas
   ============================================================ */

body.is-inner { padding-block-start: 0; }
body.is-inner .doc { border-block-start: 0; }

.pagehead {
  background: var(--color-paper-2);
  border-block-end: var(--rule-thick) solid var(--color-ink);
  padding-block: clamp(var(--space-3xl), 11vw, 11rem) clamp(var(--space-xl), 5vw, var(--space-3xl));
}
.pagehead__crumbs {
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-neutral);
  margin-block-end: var(--space-lg);
}
.pagehead__crumbs a { text-decoration: none; }
.pagehead__crumbs a:hover { color: var(--color-accent); }
.pagehead h1 {
  font-size: var(--text-3xl);
  max-width: 20ch;
}
.pagehead__lede {
  margin-block-start: var(--space-md);
  max-width: 58ch;
  font-size: var(--text-md);
  color: var(--color-muted);
}

/* ============================================================
   Cierre de página interior
   ============================================================ */

.cierre { background: var(--color-gold); border-block-start: var(--rule-firm) solid var(--color-ink); }
.cierre__band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-lg);
}
.cierre h2 { font-size: var(--text-2xl); max-width: 18ch; }
.cierre p { margin-block-start: var(--space-sm); max-width: 54ch; color: var(--color-on-gold); }
.cierre__cta {
  flex: 0 0 auto;
  padding: var(--space-md) var(--space-xl);
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
  color: var(--color-gold);
  background: var(--color-ink);
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out);
}
.cierre__cta:hover { opacity: 0.88; }
.cierre__cta:active { transform: translateY(1px); }

/* ============================================================
   Portada clara — mensaje a la izquierda, formulario a la derecha.
   Variante sin hero a pantalla completa: el formulario se ve sin
   desplazar, que es lo que importa cuando la página tiene una sola
   acción.
   ============================================================ */

.claro {
  background: var(--color-paper);
  padding-block: clamp(var(--space-3xl), 10vw, 10rem) clamp(var(--space-2xl), 7vw, var(--space-4xl));
  border-block-end: var(--rule-thick) solid var(--color-ink);
}

.claro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(var(--space-xl), 5vw, var(--space-4xl));
  align-items: start;
}

.claro__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-neutral);
  margin-block-end: var(--space-md);
}

.claro__title {
  font-family: var(--font-display);
  font-weight: var(--weight-marquee);
  font-size: clamp(3.4rem, 8vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.claro__sub {
  margin-block-start: var(--space-sm);
  font-size: clamp(1.2rem, 2.2vw, var(--text-lg));
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--color-muted);
}

.claro__estado {
  margin-block-start: clamp(var(--space-xl), 4vw, var(--space-2xl));
  padding: var(--space-lg);
  background: var(--color-paper-2);
  border-inline-start: var(--rule-thick) solid var(--color-gold);
}
.claro__estado-tag {
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-neutral);
  margin-block-end: var(--space-xs);
}
.claro__estado-txt { font-size: var(--text-base); line-height: 1.6; color: var(--color-muted); max-width: 46ch; }
.claro__estado-txt strong { color: var(--color-ink); font-weight: var(--weight-strong); }
.claro__estado-txt .mark {
  background: var(--color-gold);
  color: var(--color-ink);
  padding: 0 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.claro__datos {
  margin-block-start: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-block-start: var(--rule-firm) solid var(--color-ink);
}
.claro__datos > div {
  padding-block: var(--space-md);
  padding-inline-end: var(--space-md);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}
.claro__datos dt {
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral);
}
.claro__datos dd { margin: var(--space-2xs) 0 0; font-size: var(--text-base); color: var(--color-ink); }

.claro__pie {
  margin-block-start: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-muted);
  max-width: 46ch;
}

/* ---- La tarjeta del formulario, en claro ---- */
.claro__card {
  background: var(--color-paper-2);
  border: var(--rule-firm) solid var(--color-ink);
  padding: clamp(var(--space-lg), 3vw, var(--space-2xl));
}
.claro__card-title { font-size: var(--text-xl); margin-block-end: var(--space-sm); }
.claro__card-lede {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-block-end: var(--space-xl);
  max-width: 44ch;
}

/* El formulario nace pensado para fondo oscuro: aquí se reviste en claro. */
.claro__card .field label { color: var(--color-muted); }
.claro__card .field .hint { color: var(--color-neutral); }
.claro__card .field input,
.claro__card .field select,
.claro__card .field textarea {
  color: var(--color-ink);
  background: var(--color-paper);
  border-color: var(--color-rule-firm);
}
.claro__card .field input::placeholder,
.claro__card .field textarea::placeholder { color: var(--color-neutral); opacity: 0.8; }
.claro__card .field input:hover,
.claro__card .field select:hover,
.claro__card .field textarea:hover { border-color: var(--color-neutral); }
.claro__card .field input:focus-visible,
.claro__card .field select:focus-visible,
.claro__card .field textarea:focus-visible { border-color: var(--color-accent); }
.claro__card .field select option { background: var(--color-paper); color: var(--color-ink); }
.claro__card .field[data-invalid="true"] input,
.claro__card .field[data-invalid="true"] select { border-color: var(--color-accent); }
.claro__card .field .err { color: var(--color-accent); }
.claro__card .check span { color: var(--color-muted); }
.claro__card .check a { color: var(--color-accent); }
.claro__card .check input { accent-color: var(--color-ink); }
.claro__card .submit {
  color: var(--color-gold);
  background: var(--color-ink);
  border-color: var(--color-ink);
}
.claro__card .submit:hover { background: var(--color-night-2); border-color: var(--color-night-2); }
.claro__card .submit[data-state="error"] { background: transparent; color: var(--color-ink); }
.claro__card .formnote { color: var(--color-neutral); }
.claro__card .formmsg { background: var(--color-paper); border-inline-start-color: var(--color-accent); color: var(--color-ink); }
.claro__card .done { border-color: var(--color-ink); }
.claro__card .done h3 { color: var(--color-ink); }
.claro__card .done p { color: var(--color-muted); }
.claro__card .done .w-14,
.claro__card .done div:first-child { background: var(--color-gold); color: var(--color-ink); }

@media (max-width: 62rem) {
  .claro__grid { grid-template-columns: minmax(0, 1fr); }
  .claro__col--form { margin-block-start: var(--space-xl); }
}
@media (max-width: 34rem) {
  .claro__datos { grid-template-columns: minmax(0, 1fr); }
}

/* v3 no dibuja casilla: en su lugar va el aviso que exigen los términos de
   Google cuando el distintivo no se muestra. */
.formnote--legal { margin-block-start: var(--space-2xs); opacity: 0.75; }
.formnote--legal a { color: inherit; text-decoration: underline; }
/* el distintivo flotante estorba sobre la barra de acción */
.grecaptcha-badge { visibility: hidden; }

/* ============================================================
   Línea de proceso — el gráfico de la portada.
   Sin librerías ni canvas: un raíl, cinco nodos y cuatro piezas
   que lo recorren. Solo se animan transform y opacity, así que
   el navegador lo resuelve en el compositor.
   ============================================================ */

.proceso { background: var(--color-paper-2); }

.linea { margin: 0; }

/* ---- el raíl y las piezas que lo recorren ---- */
.linea__rail {
  position: relative;
  block-size: var(--rule-firm);
  margin-block-end: var(--space-xl);
}
.linea__pista {
  position: absolute; inset: 0;
  background: var(--color-rule-firm);
}
.linea__pieza {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  inline-size: 0.55rem;
  block-size: 0.55rem;
  margin-block-start: -0.275rem;
  background: var(--color-gold);
  box-shadow: 0 0 0 3px var(--color-paper-2);
  animation: recorre 9s linear infinite;
  animation-delay: calc(var(--i) * -2.25s);   /* reparto, no arranque escalonado */
}
@keyframes recorre {
  0%   { transform: translateX(0)       scale(0.6); opacity: 0; }
  6%   { transform: translateX(6vw)     scale(1);   opacity: 1; }
  94%  { transform: translateX(94cqw);             opacity: 1; }
  100% { transform: translateX(100cqw)  scale(0.6); opacity: 0; }
}

/* contenedor para que los porcentajes del recorrido sean del ancho real */
.linea { container-type: inline-size; }

/* ---- los cinco nodos ---- */
.linea__nodos {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-lg);
}
.nodo { position: relative; padding-inline-end: var(--space-md); }
.nodo b {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-block-end: var(--space-2xs);
}
.nodo span:not(.nodo__punto) {
  display: block;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-muted);
}
.nodo--entra b, .nodo--sale b { color: var(--color-accent); }

/* el punto late justo cuando una pieza pasa por su posición */
.nodo__punto {
  position: absolute;
  inset-block-start: calc(var(--space-xl) * -1 - 0.2rem);
  inset-inline-start: 0;
  inline-size: 0.75rem;
  block-size: 0.75rem;
  background: var(--color-paper-2);
  border: var(--rule-firm) solid var(--color-rule-firm);
  transform: translateY(0.1rem);
}
.nodo--entra .nodo__punto,
.nodo--sale .nodo__punto { border-color: var(--color-ink); }

@media (prefers-reduced-motion: no-preference) {
  .nodo__punto {
    animation: late 9s ease-out infinite;
    animation-delay: calc(var(--n) * 1.62s);
  }
}
@keyframes late {
  0%, 12%, 100% { background: var(--color-paper-2); transform: translateY(0.1rem) scale(1); }
  3%            { background: var(--color-gold);    transform: translateY(0.1rem) scale(1.35); }
}

/* ---- el pie ---- */
.linea__pie {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm);
  color: var(--color-muted);
  max-width: 72ch;
}
.linea__pie strong { color: var(--color-ink); font-weight: var(--weight-strong); }
.linea__etiqueta {
  display: inline-block;
  margin-inline-end: var(--space-xs);
  padding: 2px var(--space-xs);
  background: var(--color-gold);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---- móvil: la línea se pone en vertical ---- */
@media (max-width: 62rem) {
  .linea__nodos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .linea__rail { display: none; }
  .nodo__punto { position: static; display: block; margin-block-end: var(--space-xs); transform: none; }
  @media (prefers-reduced-motion: no-preference) { .nodo__punto { animation: none; background: var(--color-gold); } }
}
@media (max-width: 34rem) {
  .linea__nodos { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
}

/* Con movimiento reducido el diagrama se queda quieto y completo:
   los puntos en oro, que es el estado final de la animación. */
@media (prefers-reduced-motion: reduce) {
  .linea__pieza { display: none; }
  .nodo__punto { background: var(--color-gold); }
}