/* ============================================================================
   CUSTODE · 05-pages — Componentes de portada
   ----------------------------------------------------------------------------
   Compone sobre 00-tokens.css y 01-base.css. Ni un hex ni un px sueltos.
   Principios que este archivo defiende:
     · El latón es filete, nunca superficie.
     · Toda fotografía se monta como LÁMINA: passe-partout + filete interior.
     · Toda imagen recibe --c-grade, para que un inventario fotografiado por
       manos distintas se lea como una sola sesión.
     · El contenido nace visible. La animación realza; jamás condiciona.
   ========================================================================== */

/* ── Lámina: la primitiva de imagen de la marca ──────────────────────────── */
.c-plate            { position: relative; display: block; overflow: hidden;
                      background-color: var(--c-paper-4); }
.c-plate::after     { content: ""; position: absolute; inset: 0; pointer-events: none;
                      box-shadow: inset 0 0 0 var(--c-hair-w) var(--c-plate-inner-hair);
                      z-index: var(--c-z-meta); }
.c-plate img        { display: block; inline-size: 100%; block-size: 100%;
                      object-fit: cover; filter: var(--c-grade);
                      transition: transform var(--c-dur-plate) var(--c-ease-plate); }
.c-plate--wide      { aspect-ratio: var(--c-ratio-wide); }
.c-plate--pano      { aspect-ratio: var(--c-ratio-pano); }
.c-plate--portrait  { aspect-ratio: var(--c-ratio-portrait); }

/* ── Navegación sobre el hero ────────────────────────────────────────────── */
.c-nav              { position: absolute; inset-block-start: 0; inset-inline: 0;
                      z-index: var(--c-z-nav); display: flex; align-items: center;
                      justify-content: space-between; gap: var(--c-sp-6);
                      min-block-size: var(--c-nav-h);
                      padding-inline: var(--c-gutter); padding-block: var(--c-sp-5);
                      color: var(--c-inv-000); }
.c-nav__brand       { display: block; color: inherit; text-decoration: none; }
.c-nav__mark        { display: block; font-family: var(--c-font-display); font-weight: var(--c-fw-display);
                      font-size: var(--c-fs-d4); line-height: 1; letter-spacing: var(--c-tr-l3); }
/* EL LATON NO ES TEXTO SOBRE FOTOGRAFIA. BRAND-DIRECTION certifica --c-brass-hi
   sobre tinta solida y sobre marfil; sobre una foto no lo certifica nadie, y
   medido no llega: 3,83 sobre la lamina fija y 3,71 / 3,13 / 4,05 sobre tres
   fotogramas del video, con un texto de 10 px que exige 4,5. El laton sigue en
   el fold donde el brandbook dice que va —el filete del CTA y el del buscador—,
   que es su uso certificado. Aqui el texto pasa a marfil, y el halo local le da
   el margen que la foto no garantiza. */
.c-nav__sub         { display: block; margin-block-start: var(--c-sp-1); font-family: var(--c-font-label);
                      font-size: var(--c-fs-l3); letter-spacing: var(--c-tr-l2);
                      text-transform: uppercase; color: var(--c-inv-100);
                      text-shadow: 0 0 12px var(--c-veil-86), 0 1px 3px var(--c-veil-62); }
.c-nav__links       { display: flex; gap: var(--c-sp-6); }
.c-nav__links a     { font-family: var(--c-font-label); font-weight: var(--c-fw-label);
                      font-size: var(--c-fs-l2); letter-spacing: var(--c-tr-l1);
                      text-transform: uppercase; color: inherit; text-decoration: none;
                      padding-block-end: var(--c-sp-1);
                      border-block-end: var(--c-hair-w) solid transparent;
                      transition: border-color var(--c-dur-hover) var(--c-ease-rule); }
.c-nav__links a:hover,
.c-nav__links a:focus-visible { border-block-end-color: var(--c-brass); }
.c-nav__cta         { font-family: var(--c-font-label); font-weight: var(--c-fw-label);
                      font-size: var(--c-fs-l2); letter-spacing: var(--c-tr-l1);
                      text-transform: uppercase; color: inherit; text-decoration: none;
                      padding: var(--c-sp-3) var(--c-sp-5);
                      border: var(--c-hair-w) solid var(--c-brass-ring);
                      min-block-size: var(--c-tap-min); display: inline-flex; align-items: center;
                      transition: background-color var(--c-dur-hover) var(--c-ease-ink),
                                  color var(--c-dur-hover) var(--c-ease-ink),
                                  border-color var(--c-dur-hover) var(--c-ease-ink); }
.c-nav__cta:hover   { background-color: var(--c-paper); color: var(--c-ink);
                      border-color: var(--c-paper); }

/* ── Navegación táctil: el sustituto que no existía ──────────────────────────
   Por debajo de 1024 px `.c-nav__links` se oculta. Hasta ahora eso dejaba la
   página SIN navegación: en 320, 375, 390 y 768 px los únicos enlaces
   alcanzables de la cabecera eran la marca y el CTA, y a Inventario, Territorio
   y Respaldo legal sólo se llegaba scrolleando 3.903 px a ciegas.
   Es un `<details>` nativo por una razón de doctrina: no depende de una línea de
   JavaScript, así que la navegación no puede desaparecer si el script falla
   (regla nº 1), y sus cuatro anclas están en el DOM abierto o cerrado. Además
   los mismos cuatro se repiten en el pie, que antes no tenía ninguno.
   ------------------------------------------------------------------------- */
/* Sin `position` propia a proposito: el panel se ancla a `.c-nav`, no al
   disparador de 44 px. Anclado al disparador, su borde izquierdo caia en −31 px
   a 390 px de viewport — medido — porque el panel es mas ancho que el boton. */
.c-navmenu          { display: none; }
.c-navmenu__btn     { display: flex; align-items: center; justify-content: center;
                      inline-size: var(--c-tap-min); min-block-size: var(--c-tap-min);
                      cursor: pointer; list-style: none;
                      border: var(--c-hair-w) solid var(--c-brass-ring); }
.c-navmenu__btn::-webkit-details-marker { display: none; }
.c-navmenu__bars,
.c-navmenu__bars::before,
.c-navmenu__bars::after { display: block; inline-size: 18px;
                      block-size: var(--c-hair-w); background-color: currentColor; }
.c-navmenu__bars    { position: relative; }
.c-navmenu__bars::before,
.c-navmenu__bars::after { content: ""; position: absolute; inset-inline-start: 0; }
.c-navmenu__bars::before { inset-block-start: -6px; }
.c-navmenu__bars::after  { inset-block-start:  6px; }
.c-navmenu[open] .c-navmenu__bars { background-color: transparent; }
.c-navmenu[open] .c-navmenu__bars::before { inset-block-start: 0; transform: rotate(45deg); }
.c-navmenu[open] .c-navmenu__bars::after  { inset-block-start: 0; transform: rotate(-45deg); }
.c-navmenu__panel   { position: absolute; inset-block-start: 100%;
                      inset-inline-end: var(--c-gutter); z-index: var(--c-z-nav);
                      display: grid; min-inline-size: 14rem;
                      max-inline-size: calc(100% - var(--c-gutter) * 2);
                      background-color: var(--c-ink);
                      border: var(--c-hair-w) solid var(--c-brass-ring); }
.c-navmenu__panel a { font-family: var(--c-font-label); font-weight: var(--c-fw-label);
                      font-size: var(--c-fs-l2); letter-spacing: var(--c-tr-l1);
                      text-transform: uppercase; color: var(--c-inv-000);
                      text-decoration: none; padding: var(--c-sp-4) var(--c-sp-5);
                      display: flex; align-items: center; min-block-size: var(--c-tap-min);
                      border-block-end: var(--c-hair-w) solid var(--c-hair-inv); }
.c-navmenu__panel a:last-child { border-block-end: 0; }
.c-navmenu__panel a:hover,
.c-navmenu__panel a:focus-visible { color: var(--c-brass-hi); }

@media (max-width: 1023px) {
  .c-nav__links     { display: none; }
  .c-navmenu        { display: block; }
}
/* La fila de cabecera —marca + disparador + CTA— NO se envuelve para caber.
   `.c-nav` está en `position: absolute` sobre el héroe y el héroe sólo reserva
   relleno superior para UNA fila, así que una segunda se pinta encima del
   eyebrow: comprobado en captura a 320 y a 390 px. Se recupera el espacio donde
   no cuesta nada —el aire entre los tres elementos— y sólo en el ancho donde
   hace falta.
   El relleno vertical baja además por una razón medida: en teléfono la caja real
   de `.c-nav` son 111,8 px (la marca son dos líneas) mientras `--c-nav-h` vale
   64, que es lo único que el héroe reserva. Con 16 px de relleno la cabecera
   mide 95,8 y vuelve a caber dentro de lo que se reservó para ella. */
@media (max-width: 767px) {
  .c-nav            { gap: var(--c-sp-4); padding-block: var(--c-sp-4); }
}
@media (max-width: 359px) {
  .c-nav__cta       { padding-inline: var(--c-sp-4); }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.c-hero             { position: relative; display: grid; place-items: center; isolation: isolate;
                      min-block-size: 76svh;
                      padding-block: calc(var(--c-nav-h) + var(--c-sp-9)) var(--c-sp-10);
                      padding-inline: var(--c-gutter); overflow: hidden; }
.c-hero__plate      { position: absolute; inset: 0; z-index: var(--c-z-plate); }
.c-hero__plate img,
.c-hero__plate video { position: absolute; inset: 0;
                      inline-size: 100%; block-size: 100%; object-fit: cover;
                      object-position: 50% 52%; }
/* La lamina fija es la base: pinta el LCP y sobrevive a todo. */
.c-hero__still      { filter: var(--c-grade); }
/* El video entra por encima cuando puede reproducirse. La gradacion ya viene
   horneada en el archivo (eq en ffmpeg): filtrarlo por CSS costaria cada fotograma. */
.c-hero__video      { opacity: 0; transition: opacity var(--c-dur-enter) var(--c-ease-ink); }
.c-hero__video.is-playing { opacity: 1; }

/* Sin JS el video nunca se marca is-playing y manda la foto: el fold no depende de el. */
@media (prefers-reduced-motion: reduce) {
  .c-hero__video    { display: none; }
}
/* Velo mínimo: sólo el necesario para que el titular se lea. La foto manda. */
.c-hero__scrim      { position: absolute; inset: 0; z-index: var(--c-z-scrim);
                      background:
                        /* la banda del titular se oscurece; la terraza sigue luminosa */
                        linear-gradient(180deg,
                          var(--c-veil-62)  0%,
                          var(--c-veil-45) 34%,
                          var(--c-veil-28) 58%,
                          transparent      82%),
                        /* Halo suave detras del bloque de texto, sin bordes visibles.
                           Se AHONDA (28 -> 45 %) y se baja el centro (40 -> 52 %) para
                           que alcance al subtitulo, que vive al 63 % del alto del hero,
                           donde la banda lineal ya se ha apagado casi del todo. Es el
                           unico sitio donde se podia ganar contraste sin apagar la
                           fotografia: la banda lineal cruza el hero de lado a lado y
                           habria oscurecido tambien la terraza y el mar, que es
                           exactamente lo que BRAND-DIRECTION prohibe. Este radial es
                           local por construccion — cae a transparente antes del borde—
                           y solo pisa la columna central, que es donde esta el texto. */
                        radial-gradient(58% 46% at 50% 52%, var(--c-veil-45) 0%, transparent 100%); }
.c-hero__inner      { position: relative; z-index: var(--c-z-meta);
                      inline-size: 100%; max-inline-size: 68rem; text-align: center;
                      color: var(--c-inv-000); }
.c-hero__eyebrow    { justify-content: center; color: var(--c-inv-100);
                      margin-block-end: var(--c-sp-5); }
.c-hero__title      { color: var(--c-inv-000); text-wrap: balance;
                      text-shadow: 0 1px 32px var(--c-veil-45); }
/* HALO, NO VELO. El subtitulo vive al 63 % del alto del hero, donde el degradado
   del scrim ya vale ~0,21 camino de apagarse al 82 %: medido daba 3,02 sobre la
   lamina fija —el caso que ve todo movil— y 3,09 / 2,78 / 5,73 sobre el video,
   contra los 4,5 que exige un texto de 21 px en peso 300.
   La correccion NO baja la parada oscura del scrim: eso apagaria la fotografia
   en toda su anchura, y BRAND-DIRECTION prohibe expresamente «un velo negro que
   apague la imagen» y pide «el minimo que garantice legibilidad». Se oscurece
   solo el entorno del glifo —que es literalmente el minimo— y se sube el texto
   al marfil puro. Es el mismo recurso que el titular ya usaba para pasar. */
.c-hero__sub        { margin-block-start: var(--c-sp-5); font-family: var(--c-font-data);
                      font-weight: var(--c-fw-data-lt); font-size: var(--c-fs-lead);
                      color: var(--c-inv-000);
                      text-shadow: 0 0 16px var(--c-veil-86), 0 1px 4px var(--c-veil-62); }

/* ── Buscador: el protagonista del fold ──────────────────────────────────── */
.c-search           { margin-block-start: var(--c-sp-7); display: grid;
                      grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
                      background-color: var(--c-paper);
                      border: var(--c-hair-w) solid var(--c-brass);
                      text-align: start; }
.c-search__field    { min-inline-size: 0; padding: var(--c-sp-3) var(--c-sp-5);
                      border-inline-end: var(--c-hair-w) solid var(--c-hair);
                      display: flex; flex-direction: column; justify-content: center;
                      min-block-size: var(--c-field-h); }
.c-search__field label { font-family: var(--c-font-label); font-weight: var(--c-fw-label);
                      font-size: var(--c-fs-l3); letter-spacing: var(--c-tr-l1);
                      text-transform: uppercase; color: var(--c-ink-400);
                      margin-block-end: var(--c-sp-1); }
.c-search select    { inline-size: 100%; max-inline-size: 100%; border: 0; background: none;
                      padding: 0; font-family: var(--c-font-data); font-weight: var(--c-fw-data);
                      font-size: var(--c-fs-data); color: var(--c-ink-100);
                      appearance: none; cursor: pointer; text-overflow: ellipsis; }
.c-search__submit   { min-block-size: var(--c-tap-min); padding-inline: var(--c-sp-7);
                      border: 0; cursor: pointer;
                      background-color: var(--c-ink); color: var(--c-inv-000);
                      font-family: var(--c-font-label); font-weight: var(--c-fw-label);
                      font-size: var(--c-fs-l2); letter-spacing: var(--c-tr-l1);
                      text-transform: uppercase;
                      transition: background-color var(--c-dur-hover) var(--c-ease-ink); }
.c-search__submit:hover { background-color: var(--c-brass-hair); }
/* EL FOLD DE TELEFONO, QUE ESTABA ROTO Y NO SE VEIA.
   El desbordamiento horizontal de `.c-sectionhead` obligaba a Chrome a
   encoger la pagina (innerWidth 413 en vez de 390) y eso disimulaba un
   segundo problema: el hero mide 1,160 vh a 320x800 y 1,063 a 390x844, y a
   320 el inventario NO asoma —empieza 31,9 px POR DEBAJO del pliegue—.
   BRAND-DIRECTION es explicito: «Nunca 100vh: matar el indicio de que hay mas
   abajo es el error clasico», y el inventario tiene que asomar dentro del fold.
   La causa es que el hero conserva en telefono el mismo relleno de escritorio
   (64+96 arriba, 128 abajo) mientras su contenido casi se dobla, porque el
   buscador pasa de 73 px en una fila a 268,9 px en cuatro. Nada compensaba.
   Se ajustan las dos cosas que crecieron: el relleno y el buscador. */
@media (max-width: 767px) {
  .c-hero           { padding-block: calc(var(--c-nav-h) + var(--c-sp-7)) var(--c-sp-7); }
  .c-hero__eyebrow  { margin-block-end: var(--c-sp-3); }
  .c-hero__sub      { margin-block-start: var(--c-sp-4); }
  .c-search         { grid-template-columns: 1fr; margin-block-start: var(--c-sp-6); }
  .c-search__field  { border-inline-end: 0; border-block-end: var(--c-hair-w) solid var(--c-hair);
                      min-block-size: var(--c-tap-min); padding: var(--c-sp-2) var(--c-sp-4); }
  .c-search__submit { padding-block: var(--c-sp-3); padding-inline: var(--c-sp-5); }
}

/* ── Inventario: sube y solapa el hero ───────────────────────────────────── */
.c-inventory        { position: relative; z-index: var(--c-z-meta);
                      margin-block-start: calc(var(--c-sp-9) * -1);
                      background-color: var(--c-paper); }
.c-inventory.c-band--3 { padding-block-start: var(--c-sp-7); }
/* `flex-wrap: wrap` no es cosmetica: es lo que impedia que la fila cediera.
   Sin ella, el aside en `nowrap` fijaba el ancho minimo de la fila en 413 px y
   la pagina desbordaba en horizontal en TODO telefono real por debajo de eso
   —320, 360, 375 y 390 px—, con la consecuencia de que innerWidth pasaba a 413
   y el hero se comia la pantalla entera (1,003 vh a 390 px, contra el 78-82 %
   que exige BRAND-DIRECTION). Ahora el aside cae a su propia linea bajo el h2. */
.c-sectionhead      { display: flex; flex-wrap: wrap; align-items: flex-end;
                      justify-content: space-between;
                      gap: var(--c-sp-6); padding-block-end: var(--c-sp-4);
                      border-block-end: var(--c-hair-w) solid var(--c-rule);
                      margin-block-end: var(--c-sp-6); }
.c-sectionhead__t   { margin-block-start: var(--c-sp-2); }
.c-sectionhead__aside,
.c-sectionhead__note { font-family: var(--c-font-label); font-weight: var(--c-fw-label);
                      font-size: var(--c-fs-l2); letter-spacing: var(--c-tr-l1);
                      text-transform: uppercase; color: var(--c-ink-400);
                      white-space: nowrap; text-decoration: none; }
.c-sectionhead__aside:hover { color: var(--c-brass-text); }
/* En su propia linea, dentro de una caja de contenido de 280 px a 320 px de
   viewport, el `nowrap` volveria a desbordar. Por debajo del punto en que el
   aside deja de caber al lado del titulo, se le permite partir. */
@media (max-width: 639px) {
  .c-sectionhead__aside,
  .c-sectionhead__note { white-space: normal; }
}
/* `.c-sectionhead__note` es un DATO, no un enlace: no lleva hover ni filete.
   Ocupa el sitio de un `__aside` cuyo destino todavia no existe (ver H6 en
   scripts/build-home.py). Un dato que informa es honesto; un enlace que no
   lleva a ninguna parte, no. */
.c-sectionhead__note { margin: 0; }

/* `minmax(19rem, ...)` fija una pista de 304 px que NO puede encogerse: dentro
   de una caja de contenido de 280 px a 320 px de viewport, la ficha se salia
   por la derecha (borde en 324). `min(19rem, 100%)` deja que la pista ceda al
   ancho disponible en cuanto este es menor que la pista deseada. */
.c-listings         { display: grid; gap: var(--c-sp-8) var(--c-grid-gap);
                      grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); }

/* ── Ficha de inmueble ───────────────────────────────────────────────────── */
/* `.c-listing__body` es <a> cuando la ficha tiene destino y <div> cuando no lo
   tiene todavia. La ficha se ve igual en los dos casos: lo unico que cambia es
   si promete navegacion. Ver el modelo de enlaces en scripts/build-home.py. */
.c-listing__body    { display: block; color: inherit; text-decoration: none; }
.c-listing__plate   { padding: var(--c-plate-mat); background-color: var(--c-paper-2); }
.c-listing:hover .c-plate img { transform: scale(var(--c-zoom-plate)); }
.c-listing__folio   { display: flex; justify-content: space-between; gap: var(--c-sp-4);
                      margin-block-start: var(--c-sp-4);
                      font-family: var(--c-font-label); font-weight: var(--c-fw-label);
                      font-size: var(--c-fs-l3); letter-spacing: var(--c-tr-l1);
                      text-transform: uppercase; color: var(--c-ink-400); }
.c-listing__title   { margin-block-start: var(--c-sp-2);
                      font-family: var(--c-font-display); font-weight: var(--c-fw-display);
                      font-size: var(--c-fs-d4); line-height: var(--c-lh-d4);
                      letter-spacing: var(--c-tr-d3); color: var(--c-ink-000); }
.c-listing__price   { margin-block-start: var(--c-sp-2); font-size: var(--c-fs-n2);
                      font-weight: var(--c-fw-figure-md); color: var(--c-ink-000); }
.c-listing__specs   { margin-block-start: var(--c-sp-3); padding-block-start: var(--c-sp-3);
                      border-block-start: var(--c-hair-w) solid var(--c-hair);
                      font-family: var(--c-font-data); font-weight: var(--c-fw-data-lt);
                      font-size: var(--c-fs-data-sm); color: var(--c-ink-300);
                      font-variant-numeric: tabular-nums; }
.c-listing__specs b { font-weight: var(--c-fw-data); color: var(--c-ink-200); }

/* ── Territorio: los barrios como puerta de entrada ──────────────────────── */
.c-territory        { display: grid; gap: var(--c-sp-5);
                      grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.c-zone             { position: relative; display: block; color: inherit; text-decoration: none;
                      overflow: hidden; isolation: isolate; }
.c-zone .c-plate    { aspect-ratio: 3 / 4; }
.c-zone__scrim      { position: absolute; inset: 0; z-index: var(--c-z-scrim);
                      background: linear-gradient(180deg, transparent 34%, var(--c-veil-62) 100%); }
.c-zone__meta       { position: absolute; inset-block-end: 0; inset-inline: 0;
                      z-index: var(--c-z-meta); padding: var(--c-sp-5);
                      color: var(--c-inv-000); }
.c-zone__name       { display: block; font-family: var(--c-font-display); font-weight: var(--c-fw-display);
                      font-size: var(--c-fs-d4); line-height: 1.1; }
.c-zone__count      { display: block; margin-block-start: var(--c-sp-1); font-family: var(--c-font-label);
                      font-size: var(--c-fs-l3); letter-spacing: var(--c-tr-l1);
                      text-transform: uppercase; color: var(--c-brass-hi); }
.c-zone:hover .c-plate img { transform: scale(var(--c-zoom-plate)); }

/* ── Protocolo legal: el diferenciador, después del producto ─────────────── */
.c-protocol         { display: grid; }
.c-step             { display: grid; grid-template-columns: var(--c-sp-8) 1fr;
                      gap: var(--c-sp-5); padding-block: var(--c-sp-5);
                      border-block-start: var(--c-hair-w) solid var(--c-hair); }
.c-step:last-child  { border-block-end: var(--c-hair-w) solid var(--c-hair); }
.c-step__n          { font-family: var(--c-font-figure); font-weight: var(--c-fw-figure);
                      font-size: var(--c-fs-n2); line-height: var(--c-lh-figure);
                      font-variant-numeric: tabular-nums lining-nums;
                      color: var(--c-brass-text); }
.c-step__t          { font-family: var(--c-font-data); font-weight: var(--c-fw-data-md);
                      font-size: var(--c-fs-body); color: var(--c-ink-000);
                      margin-block-end: var(--c-sp-1); }
.c-step__d          { font-family: var(--c-font-prose); font-weight: var(--c-fw-prose);
                      font-size: var(--c-fs-small); line-height: var(--c-lh-small);
                      color: var(--c-ink-300); }

/* ── Cifras ──────────────────────────────────────────────────────────────── */
.c-stats            { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
                      gap: var(--c-sp-6); text-align: center; }
.c-stat__n          { display: block; font-family: var(--c-font-figure);
                      font-weight: var(--c-fw-figure); font-size: var(--c-fs-n1);
                      line-height: var(--c-lh-figure);
                      font-variant-numeric: tabular-nums lining-nums; color: var(--c-ink-000); }
.c-stat__l          { display: block; margin-block-start: var(--c-sp-3);
                      font-family: var(--c-font-label); font-weight: var(--c-fw-label);
                      font-size: var(--c-fs-l3); letter-spacing: var(--c-tr-l1);
                      text-transform: uppercase; color: var(--c-ink-400); }
@media (max-width: 767px) { .c-stats { grid-template-columns: repeat(2, minmax(0, 1fr));
                                       gap: var(--c-sp-7) var(--c-sp-5); } }

/* ── Cierre: aquí sí manda la tinta ──────────────────────────────────────── */
.c-foot             { text-align: center; }
.c-foot__emblem     { inline-size: clamp(3.5rem, 7vw, 5.5rem); block-size: auto;
                      margin-inline: auto; color: var(--c-brass); }
.c-foot__mark       { margin-block-start: var(--c-sp-5);
                      font-family: var(--c-font-display); font-weight: var(--c-fw-display);
                      font-size: var(--c-fs-d1); line-height: 1;
                      letter-spacing: var(--c-tr-l2); color: var(--c-inv-000); }
.c-foot__sub        { margin-block-start: var(--c-sp-3); font-family: var(--c-font-label);
                      font-weight: var(--c-fw-label); font-size: var(--c-fs-l3);
                      letter-spacing: var(--c-tr-l3); text-transform: uppercase;
                      color: var(--c-brass); }
.c-foot__nav        { margin-block-start: var(--c-sp-7); display: flex; flex-wrap: wrap;
                      justify-content: center; gap: var(--c-sp-4) var(--c-sp-6); }
.c-foot__nav a      { font-family: var(--c-font-label); font-weight: var(--c-fw-label);
                      font-size: var(--c-fs-l3); letter-spacing: var(--c-tr-l1);
                      text-transform: uppercase; color: var(--c-inv-200);
                      text-decoration: none; padding-block-end: var(--c-sp-1);
                      border-block-end: var(--c-hair-w) solid transparent;
                      transition: border-color var(--c-dur-hover) var(--c-ease-rule),
                                  color var(--c-dur-hover) var(--c-ease-rule); }
.c-foot__nav a:hover,
.c-foot__nav a:focus-visible { color: var(--c-inv-000); border-block-end-color: var(--c-brass); }
.c-foot__bar        { margin-block-start: var(--c-sp-8); padding-block-start: var(--c-sp-5);
                      border-block-start: var(--c-hair-w) solid var(--c-hair-inv);
                      font-family: var(--c-font-label); font-size: var(--c-fs-l3);
                      letter-spacing: var(--c-tr-l1); text-transform: uppercase;
                      color: var(--c-inv-400); }

/* ── Realce al entrar: sólo con JS y sólo si el usuario no pidió lo contrario.
      El contenido YA es visible sin esto. Google no hace scroll. ─────────── */
.js .c-reveal       { opacity: 0; transform: translateY(var(--c-enter-y));
                      transition: opacity var(--c-dur-enter) var(--c-ease-ink),
                                  transform var(--c-dur-enter) var(--c-ease-ink); }
.js .c-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .c-reveal     { opacity: 1; transform: none; transition: none; }
}

/* ── Salvedad obligatoria del crédito ────────────────────────────────────────
   docs/COPY-FINAL.md la marca como innegociable: no se omite, no se acorta y
   no se esconde en letra pequeña. Va en el cuerpo de la sección. */
.c-disclaimer       { margin-block-start: var(--c-sp-5); padding-block-start: var(--c-sp-4);
                      border-block-start: var(--c-hair-w) solid var(--c-brass-a42);
                      font-family: var(--c-font-prose); font-size: var(--c-fs-small);
                      line-height: var(--c-lh-small); color: var(--c-ink-200); }

/* ── Cierre: los cuatro pilares ──────────────────────────────────────────── */
.c-pillars          { display: grid; gap: var(--c-sp-5);
                      grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
                      margin-block-start: var(--c-sp-7); }
.c-pillar           { padding-block-start: var(--c-sp-4);
                      border-block-start: var(--c-hair-w) solid var(--c-rule); }
.c-pillar__n        { display: block; font-family: var(--c-font-figure);
                      font-weight: var(--c-fw-figure); font-size: var(--c-fs-d4);
                      font-variant-numeric: tabular-nums lining-nums;
                      color: var(--c-brass-text); }
.c-pillar__t        { display: block; margin-block-start: var(--c-sp-2);
                      font-family: var(--c-font-display); font-weight: var(--c-fw-display);
                      font-size: var(--c-fs-d4); line-height: var(--c-lh-d4);
                      color: var(--c-ink-000); }
.c-pillar__note     { display: block; margin-block-start: var(--c-sp-1);
                      font-family: var(--c-font-label); font-size: var(--c-fs-l3);
                      letter-spacing: var(--c-tr-l1); text-transform: uppercase;
                      color: var(--c-ink-400); }
.c-closing__body    { max-inline-size: var(--c-prose); margin-block-start: var(--c-sp-6); }

/* ── Línea fina del pie ──────────────────────────────────────────────────── */
.c-foot__fine       { max-inline-size: var(--c-prose); margin: var(--c-sp-4) auto 0;
                      font-family: var(--c-font-prose); font-size: var(--c-fs-fine);
                      line-height: var(--c-lh-small); color: var(--c-inv-400); }