/* ============================================================================
   PÁEZ ABOGADOS — Sistema de diseño «Despacho oscuro editorial»
   CSS puro, sin dependencias.
   ---------------------------------------------------------------------------
   Principio rector: la página dice poco y lo dice grande. Cada bloque tiene una
   forma distinta — no se repite el patrón «etiqueta + titular + párrafo».
   No hay botones-caja: las acciones son texto con una regla que se dibuja.
   ---------------------------------------------------------------------------
   01. Tokens          06. Portada          11. Cierre y contacto
   02. Base            07. Carta            12. Pie
   03. Grano y fondos  08. Áreas            13. Documentos legales
   04. Layout          09. Socio            14. Formularios
   05. Acciones y nav  10. Asuntos          15. Movimiento y adaptaciones
   ========================================================================== */

/* ── 01. Tokens ─────────────────────────────────────────────────────────── */
:root {
  --ink-900: #0E110E;
  --ink-800: #131711;
  --ink-700: #1A1F18;

  --bone:    #EDEAE2;
  --bone-80: rgba(237, 234, 226, .80);
  --bone-58: rgba(237, 234, 226, .58);
  --bone-38: rgba(237, 234, 226, .38);
  --bone-18: rgba(237, 234, 226, .18);

  --brass:    #A98F63;
  --brass-hi: #C7AC7D;
  --brass-28: rgba(169, 143, 99, .28);

  --line:      rgba(237, 234, 226, .11);
  --line-soft: rgba(237, 234, 226, .06);

  --shadow-deep: 0 40px 90px -40px rgba(6, 12, 6, .95);

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* El único radio del sistema. Solo para la capa flotante que va sobre el
     medio de fondo (píldora de navegación, círculo de menú, llamada). El cuerpo de la
     página sigue siendo de ángulo vivo. */
  --r-pill: 999px;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --measure: 62ch;
  --bleed: 1440px;
  /* Separación entre secciones. El hueco entre dos secciones cualesquiera es
     siempre --gap-bottom + --gap-top = 7rem (112px), sin excepción.
     El reparto es ASIMÉTRICO a propósito: poco aire encima del rótulo, para que
     se lea pegado a su sección y no flotando en el vacío, y más debajo del
     contenido. El hueco total sigue siendo el mismo en todas.
     La portada NO usa esto — tiene su propio padding. */
  --gap-top: 2.5rem;
  --gap-bottom: 4.5rem;

  --z-grain: 9;
  --z-float: 40;
  --z-nav: 50;
  --z-overlay: 90;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ── 02. Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--bone-80);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .18vw, 1.075rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 { margin: 0; color: var(--bone); font-weight: 400; text-wrap: balance; }
p { margin: 0 0 1.15em; max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

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

.display {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: 300;
  /* Fraunces ocupa ~1.16em de tinta por línea. Con .96 las descendentes de una
     línea invadían las ascendentes de la siguiente y se leía como texto
     cortado; con 1.08 todavía se solapaban 4px. Medido, no ajustado a ojo. */
  line-height: 1.24;
  letter-spacing: -.028em;
  color: var(--bone);
}
.display em {
  font-style: italic;
  font-variation-settings: "SOFT" 8, "WONK" 1;
  color: var(--brass-hi);
}

/* El mínimo está calculado: «Estrategia jurídica» mide 344px a 46px y en un
   móvil de 375 solo caben 335. A 2.75rem entra con holgura. Si cambia el
   titular por uno más largo, vuelva a medirlo — no lo ajuste a ojo.
   El mínimo NO se toca: es lo que hace que quepa en un teléfono. Lo demás subió
   el 04/09/2026 (venía de 8.6vw / 7.6rem) porque con el titular centrado
   sobraba pantalla a los lados y se veía pequeño.

   El `min()` es lo que evita el problema del portátil bajo. Si el tamaño
   dependiera solo del ANCHO, en una pantalla de 1440×700 el titular saldría a
   158px, el bloque entero mediría 583px y solo hay 540px libres: la portada
   recorta lo que se sale. Atándolo también al ALTO (19vh), en esa misma
   pantalla baja a 133px y entra con holgura. Manda el que sea más pequeño. */
.d-xl { font-size: clamp(2.75rem, min(11vw, 19vh), 10rem); }
.d-lg { font-size: clamp(2.4rem, 5.8vw, 4.6rem); }
.d-md { font-size: clamp(1.9rem, 4vw, 3.1rem); }

/* Numeración discreta. Es el único uso sistemático del monoespaciado. */
.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--bone-38);
}

/* Etiqueta sobria. Reservada para páginas interiores, no para la portada. */
.label {
  display: inline-block;
  font-size: .8rem;
  letter-spacing: .02em;
  color: var(--brass);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: fixed; top: .75rem; left: .75rem;
  z-index: 200;
  transform: translateY(-160%);
  padding: .7rem 1.1rem;
  background: var(--bone); color: var(--ink-900);
  font-size: .85rem;
  transition: transform .25s var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ── 03. Grano y fondos ─────────────────────────────────────────────────── */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
}
.glow--brass { background: radial-gradient(circle, rgba(169,143,99,.28), transparent 68%); }
.glow--moss  { background: radial-gradient(circle, rgba(45,82,64,.30), transparent 70%); }

/* ── 04. Layout ─────────────────────────────────────────────────────────── */
.shell {
  width: min(100% - (var(--gutter) * 2), var(--bleed));
  margin-inline: auto;
}

.band {
  position: relative;
  padding-block: var(--gap-top) var(--gap-bottom);
  overflow: clip;
}

/* División visible entre secciones. La línea marca dónde empieza cada una y
   convierte el aire en separación deliberada en vez de hueco. */
main > section + section { border-top: 1px solid var(--line); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Cabecera de páginas interiores. Deliberadamente ausente en la portada. */
.band-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.75rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(2.75rem, 6vw, 5rem);
}
.band-head__aside p { color: var(--bone-58); font-size: .98rem; padding-bottom: .4rem; }

/* ── 05. Acciones y navegación ──────────────────────────────────────────── */
/* Sin cajas: la acción es una palabra con una regla que se dibuja debajo. */
.act {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .75rem;
  padding-bottom: .5rem;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  letter-spacing: -.015em;
  line-height: 1.2;
  color: var(--bone);
  cursor: pointer;
  transition: color .3s var(--ease);
}
.act::before,
.act::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px;
  width: 100%;
}
.act::before { background: var(--bone-18); }
.act::after {
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.act:hover, .act:focus-visible { color: var(--brass-hi); }
.act:hover::after, .act:focus-visible::after { transform: scaleX(1); }
.act .arrow {
  font-family: var(--sans);
  font-size: .8em;
  transition: transform .4s var(--ease);
}
.act:hover .arrow { transform: translateX(5px); }

.act--sm { font-size: clamp(1.05rem, 1.5vw, 1.2rem); }
.act--quiet { color: var(--bone-58); }
.act--quiet:hover { color: var(--bone); }

/* Enlace menor, en sans. Nada de versalitas monoespaciadas por todas partes. */
.qlink {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .93rem;
  color: var(--bone-58);
  background-image: linear-gradient(var(--brass), var(--brass));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  padding-bottom: .25rem;
  transition: background-size .4s var(--ease-out), color .3s var(--ease);
}
.qlink:hover, .qlink:focus-visible, .qlink.is-here { color: var(--bone); background-size: 100% 1px; }

/* ── Navegación ───────────────────────────────────────────────────────────
   El comportamiento es el del sitio en línea, traído entero al carbón:

   1. Arriba del todo se ve la PÍLDORA con los seis destinos.
   2. Al bajar de 80 px la píldora se desvanece hacia arriba y, en su lugar,
      aparece el CÍRCULO FLOTANTE en la esquina derecha.
   3. Cualquiera de los dos abre el CAJÓN LATERAL, que entra desde la derecha
      con sus filas escalonadas.

   El umbral y los tiempos son los mismos del sitio en línea: 80 px, la píldora
   en medio segundo, el cajón en ocho décimas. */
.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-nav);
  padding-top: clamp(.9rem, 2.2vh, 1.5rem);
  pointer-events: none;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
/* La píldora se retira al bajar: deja de estorbar la lectura y su trabajo lo
   recoge el círculo. Se apaga también para el teclado y el lector de pantalla,
   no solo a la vista — un enlace invisible que aún recibe el tabulador es una
   trampa. De eso se encarga `aria-hidden` desde main.js. */
.topbar.is-hidden {
  opacity: 0;
  transform: translateY(-10px);
}
.topbar.is-hidden .topbar__inner { pointer-events: none; }

.topbar__inner {
  pointer-events: auto;
  width: min(100% - (var(--gutter) * 2), 68rem);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: .6rem .8rem .6rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(14, 17, 14, .5);
  backdrop-filter: blur(16px) saturate(130%);
}

.brand img {
  height: clamp(26px, 2.6vw, 32px);
  width: auto;
  transition: opacity .3s var(--ease);
}
.brand:hover img { opacity: .78; }

/* Los seis destinos de la barra, los mismos del sitio en línea. */
.nav-links { display: flex; align-items: center; gap: clamp(.9rem, 1.9vw, 1.7rem); }
.nav-links a {
  position: relative;
  font-size: .93rem;
  color: var(--bone-58);
  padding-block: .3rem;
  transition: color .28s var(--ease);
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--bone); }

/* Destino que todavía no tiene página. Va apagado y con su rótulo, no como
   enlace: mandar a un 404 es peor que decir que aún no está. */
.nav-soon {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  font-size: .93rem;
  color: var(--bone-38);
  cursor: default;
  padding-block: .3rem;
}
.nav-soon i {
  font-style: normal;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
  opacity: .7;
}

/* Dónde está el visitante. Dos fuentes distintas la encienden y comparten la
   misma marca: en la portada el scrollspy (sección visible) y en las páginas
   interiores `paginaActual()`, que compara el nombre del archivo. */
.nav-links a.is-here,
.nav-drop__btn.is-here { color: var(--bone); }
.nav-links a.is-here::after,
.nav-drop__btn.is-here::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--brass);
  animation: navmark .4s var(--ease-out);
  transform-origin: left;
}
@keyframes navmark { from { transform: scaleX(0); } }

/* ── Desplegable de áreas ─────────────────────────────────────────────────
   Las tres materias tienen página propia desde cualquier punto del sitio, sin
   pasar por la portada ni abrir el menú completo. Es un <button>, no un enlace
   con submenú al pasar el cursor: así funciona igual con dedo y con teclado.
   El destino «Las tres áreas» va dentro del panel, que es donde el visitante
   ya está mirando. */
.nav-drop { position: relative; }
.nav-drop__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .93rem;
  color: var(--bone-58);
  padding-block: .3rem;
  transition: color .28s var(--ease);
}
.nav-drop__btn:hover,
.nav-drop__btn:focus-visible,
.nav-drop.is-open .nav-drop__btn { color: var(--bone); }
.nav-drop__btn svg { transition: transform .35s var(--ease); }
.nav-drop.is-open .nav-drop__btn svg { transform: rotate(180deg); }

.nav-drop__panel {
  position: absolute;
  top: calc(100% + 1rem);
  left: 50%;
  z-index: 1;
  min-width: 15rem;
  padding: .45rem;
  /* Mismo material que la píldora que lo contiene: es la misma capa flotante,
     así que comparte radio, borde y desenfoque. */
  border: 1px solid var(--line);
  border-radius: 1.15rem;
  background: rgba(14, 17, 14, .92);
  backdrop-filter: blur(16px) saturate(130%);
  box-shadow: var(--shadow-deep);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -6px);
  transition: opacity .28s var(--ease), transform .35s var(--ease-out), visibility .28s;
}
.nav-drop.is-open .nav-drop__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
/* Puente invisible: sin él, el hueco entre el botón y el panel cierra el menú
   a mitad de camino cuando se baja con el ratón. */
.nav-drop__panel::before {
  content: "";
  position: absolute;
  top: -1rem; left: 0; right: 0;
  height: 1rem;
}
.nav-drop__panel a {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .58rem .75rem;
  border-radius: .75rem;
  font-size: .93rem;
  color: var(--bone-58);
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.nav-drop__panel a:hover,
.nav-drop__panel a:focus-visible {
  color: var(--bone);
  background: rgba(237, 234, 226, .055);
}
.nav-drop__panel a.is-here { color: var(--brass-hi); }
.nav-drop__panel a.is-here .num { color: var(--brass); }
.nav-drop__sep { height: 1px; margin: .35rem .55rem; background: var(--line-soft); }
.nav-drop__all { color: var(--bone-38); font-size: .88rem; }

.nav-side { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.6rem); }

/* En la barra, «Contacto» va en la misma fila que los demás enlaces y tiene que
   leerse a la misma altura que ellos. `.qlink` lleva relleno SOLO por debajo
   —es el hueco donde se dibuja su subrayado al pasar el cursor—, así que dentro
   de una fila centrada su texto queda 2 px más arriba: justo la mitad de ese
   relleno. Se le devuelve arriba lo mismo que lleva abajo y las dos coinciden.
   Va acotado a `.nav-side` y no al `.qlink` suelto, porque fuera de la barra esa
   asimetría es la que hace que el subrayado no separe renglones. */
.nav-side .qlink { padding-top: .25rem; }

/* El botón de menú está siempre visible, no solo en móvil: si solo apareciera
   al bajar, el menú completo sería inalcanzable desde lo alto de la página. */
.burger {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  padding: .55rem 0 .55rem .2rem;
}
.burger span {
  display: block;
  width: 1.35rem; height: 1px;
  background: var(--bone);
  transition: transform .35s var(--ease), width .35s var(--ease);
}
.burger:hover span:first-child { transform: translateX(3px); }
.burger:hover span:last-child { width: .85rem; }

/* ── El círculo flotante ──────────────────────────────────────────────────
   Releva a la píldora en cuanto esta se retira. Lleva el mismo vidrio y el
   mismo aro giratorio de latón que la llamada principal: es la misma familia
   de superficie, no un botón aparte. */
.fab {
  position: fixed;
  top: clamp(1.05rem, 2.4vh, 1.5rem);
  right: clamp(1.05rem, 3vw, 2rem);
  z-index: var(--z-float);
  width: 3.5rem; height: 3.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-image:
    linear-gradient(135deg,
      rgba(255, 255, 255, .16),
      rgba(255, 255, 255, .02) 48%,
      rgba(255, 255, 255, .11)),
    linear-gradient(0deg, rgba(14, 17, 14, .62), rgba(14, 17, 14, .62));
  -webkit-backdrop-filter: blur(6px) saturate(150%);
          backdrop-filter: blur(6px) saturate(150%);
  box-shadow:
    inset 1.2px 1.2px 0 rgba(255, 255, 255, .50),
    inset -1.2px -1.2px 0 rgba(255, 255, 255, .16),
    inset 0 0 22px rgba(255, 255, 255, .07),
    0 2px 5px -2px rgba(6, 12, 6, .6),
    0 16px 34px -16px rgba(6, 12, 6, .95);
  /* Nace encogido y apagado; entra creciendo cuando la píldora se va. */
  opacity: 0;
  transform: scale(.72);
  pointer-events: none;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.fab.is-visible:hover { transform: scale(1.06); }
.fab.is-visible:active { transform: scale(.97); }

/* El aro de luz, misma receta que la de .cta: el cónico está quieto y lo que
   gira es el cuadrado que lo lleva dentro, para que el compositor lo resuelva
   sin repintar el degradado en cada fotograma. */
.fab__ring {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  padding: 1.4px;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
.fab__ring::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 150%;
  aspect-ratio: 1;
  background: conic-gradient(from 0deg at 50% 50%,
    transparent 0deg,
    transparent 200deg,
    rgba(169, 143, 99, .55) 250deg,
    var(--brass-hi) 290deg,
    #FFF4DD 305deg,
    var(--brass-hi) 320deg,
    rgba(169, 143, 99, .55) 350deg,
    transparent 360deg);
  transform: translate(-50%, -50%) rotate(0deg);
  animation: beam 4s linear infinite;
}
/* Escondido no tiene por qué seguir animando. */
.fab:not(.is-visible) .fab__ring::before { animation-play-state: paused; }

.fab__bars { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.fab__bars span {
  display: block;
  height: 1.5px;
  background: var(--bone);
  transition: width .35s var(--ease);
}
.fab__bars span:first-child { width: 1.5rem; }
.fab__bars span:last-child  { width: .875rem; }
.fab:hover .fab__bars span:last-child { width: 1.5rem; }

@media (min-width: 768px) {
  .fab { width: 4rem; height: 4rem; }
}

/* ── El cajón lateral ─────────────────────────────────────────────────────
   Entra desde la derecha y no tapa toda la pantalla: el sitio sigue ahí
   detrás, y por eso el visitante no pierde el hilo de dónde estaba. */
.menu-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-overlay) - 1);
  background: rgba(8, 11, 8, .55);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ease);
}
.menu-scrim.is-open { opacity: 1; pointer-events: auto; }

.menu {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: var(--z-overlay);
  width: min(100%, 47.5rem);
  display: flex;
  flex-direction: column;
  background: rgba(19, 23, 17, .93);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
          backdrop-filter: blur(24px) saturate(120%);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-deep);
  transform: translateX(100%);
  /* `visibility` se apaga con retraso, no en degradado: al abrir tiene que
     estar visible en el mismo instante (0s) para que el foco pueda entrar en
     el botón de cerrar; al cerrar espera a que termine el deslizamiento. Con
     una transición normal de visibilidad el cajón sigue oculto los primeros
     milisegundos y `focus()` no engancha — el teclado se quedaba fuera. */
  visibility: hidden;
  transition: transform .8s var(--ease-out), visibility 0s linear .8s;
}
.menu.is-open {
  transform: none;
  visibility: visible;
  transition: transform .8s var(--ease-out), visibility 0s linear;
}

.menu__top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem clamp(1.5rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--line);
}
.menu__top img { height: 30px; width: auto; }
.menu__close {
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border: 1px solid var(--bone-18);
  border-radius: .6rem;
  color: var(--bone-58);
  transition: color .3s var(--ease), border-color .3s var(--ease),
              background-color .3s var(--ease), transform .4s var(--ease);
}
.menu__close:hover {
  color: var(--brass-hi);
  border-color: var(--brass-28);
  background: rgba(237, 234, 226, .05);
  transform: rotate(90deg);
}

.menu__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: clamp(1rem, 3vh, 2.5rem) clamp(1.5rem, 4vw, 3.5rem);
}

/* Cada fila entra desde el costado, una detrás de otra. El retardo lo lleva la
   propia fila en `--i`: así el orden lo decide el HTML y no una lista de
   selectores que hay que rehacer cada vez que se agrega un destino. */
.menu__row {
  border-bottom: 1px solid var(--line-soft);
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .7s var(--ease), transform .7s var(--ease-out);
}
.menu.is-open .menu__row {
  opacity: 1;
  transform: none;
  transition-delay: calc(180ms + var(--i, 0) * 80ms);
}
.menu__row > a,
.menu__row > span,
.menu__group > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: clamp(.8rem, 1.6vh, 1.15rem) 0;
  text-align: left;
}
.menu__side { display: inline-flex; align-items: center; gap: clamp(.7rem, 1.6vw, 1.25rem); }

/* El punto de la izquierda dice en cuál estamos. Fuera de esa fila no ocupa
   sitio (nace en escala 0), para que las etiquetas queden alineadas. */
.menu__dot {
  flex: 0 0 auto;
  width: .375rem; height: .375rem;
  border-radius: 50%;
  background: var(--brass);
  transform: scale(0);
  opacity: 0;
  transition: transform .5s var(--ease-out), opacity .5s var(--ease);
}
.menu__row > a.is-here .menu__dot { transform: none; opacity: 1; }

.menu__lbl {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1.15rem, 3.4vw, 2.1rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--bone);
  transition: color .3s var(--ease), transform .35s var(--ease-out);
}
.menu__row > a:hover .menu__lbl,
.menu__row > a:focus-visible .menu__lbl,
.menu__group > button:hover .menu__lbl,
.menu__group > button:focus-visible .menu__lbl {
  color: var(--brass-hi);
  transform: translateX(8px);
}
.menu__row > a.is-here .menu__lbl { color: var(--brass-hi); }

.menu__idx {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .2em;
  color: var(--bone-38);
}

/* Destino que todavía no existe: rótulo apagado, sin enlace y sin número. */
.menu__row > span { cursor: default; }
.menu__row > span .menu__lbl { color: var(--bone-38); }
.soon {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
  opacity: .75;
}

.menu__chev {
  display: inline-flex;
  color: var(--bone-38);
  transition: transform .45s var(--ease-out), color .3s var(--ease);
}
.menu__group.is-open .menu__chev { transform: rotate(180deg); color: var(--brass); }

/* El submenú abre con `grid-template-rows`, que sí se puede animar de 0 a
   «lo que mida»: nada de medir alturas a mano desde JavaScript. */
.menu__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease-out);
}
.menu__group.is-open .menu__sub { grid-template-rows: 1fr; }
.menu__sub > div {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem clamp(1rem, 2.5vw, 1.6rem);
  padding-left: clamp(1.1rem, 3vw, 1.9rem);
  /* El aire de abajo va aquí y no en cada enlace: en un teléfono las tres
     materias se reparten en dos renglones y, puesto en el enlace, el hueco se
     repetía entre renglón y renglón. */
  padding-bottom: 1.05rem;
}
.menu__sub a {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  padding: .15rem 0;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-58);
  opacity: 0;
  transform: translateY(-8px);
  transition: color .3s var(--ease), opacity .4s var(--ease) calc(var(--j, 0) * 60ms),
              transform .4s var(--ease-out) calc(var(--j, 0) * 60ms);
}
.menu__group.is-open .menu__sub a { opacity: 1; transform: none; }
.menu__sub a:hover, .menu__sub a:focus-visible { color: var(--brass-hi); }
.menu__sub a.is-here { color: var(--brass-hi); }
.menu__sub .num { color: var(--brass); opacity: .6; }

.menu__foot {
  flex: 0 0 auto;
  padding: 1.1rem clamp(1.5rem, 4vw, 3.5rem) 0;
  border-top: 1px solid var(--line);
}
.menu__social { display: flex; align-items: center; gap: .55rem; padding-bottom: 1.1rem; }
.menu__social a {
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border-radius: .5rem;
  background: rgba(237, 234, 226, .05);
  color: var(--bone-58);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.menu__social a:hover, .menu__social a:focus-visible {
  background: var(--brass);
  color: var(--ink-900);
}

/* Cuánto queda de página por debajo. Es la misma cinta del sitio en línea: un
   filo de un píxel que se llena con el desplazamiento. */
.menu__bar { height: 1px; background: var(--line); overflow: hidden; }
.menu__bar span {
  display: block;
  height: 100%;
  width: calc(var(--progreso, 0) * 1%);
  background: var(--brass);
  transition: width .1s linear;
}

.foot__nav span.is-soon { font-size: .93rem; color: var(--bone-38); cursor: default; }
.foot__nav a.is-here { color: var(--brass-hi); }

@media (max-width: 1024px) {
  .menu { width: min(100%, 40rem); }
}

/* ── 06. Portada ────────────────────────────────────────────────────────── */
/* Pantalla completa con medio de fondo (vídeo o fotografía) y contenido encima. */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Repartido casi por igual. Con el texto a la izquierda el relleno de arriba
     era el doble, para que el titular no se metiera debajo de la píldora; ahora
     que el bloque va centrado esa asimetría lo dejaba 38 px por debajo del
     centro de la pantalla. Arriba sigue quedando más, lo justo para que la
     píldora tenga su aire. */
  padding-block: clamp(6rem, 13vh, 9rem) clamp(4rem, 9vh, 6rem);
  overflow: clip;
  text-align: center;
}

/* La capa de medio. En escritorio ocupa la mitad derecha para no pelear con el
   texto; en móvil pasa a sangre completa. */
/* Aura del lado izquierdo. NO es decoración: es el sustrato que hace visible el
   liquid glass de los botones. Sin algo de color y contraste detrás, el vidrio
   no tiene nada que doblar y se lee como simple transparencia — esa fue
   exactamente la razón por la que el efecto nunca se vio en el sitio blanco.
   Va antes de .hero__media en el documento, así queda por debajo del vídeo. */
.hero__aura {
  position: absolute;
  left: 50%; bottom: -26%;
  translate: -50% 0;
  z-index: 0;
  width: min(86%, 780px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(169, 143, 99, .24),
    rgba(45, 82, 64, .17) 46%,
    transparent 70%);
  filter: blur(80px);
}

/* Las capas van apiladas en orden de documento: luz, respaldo, vídeo, velo. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__media > * { position: absolute; }

/* Luz de fondo. Se ve mientras el vídeo carga y si no llegara a cargar. */
.hero__glow {
  left: 50%; top: 46%;
  width: min(80%, 700px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(169,143,99,.16), transparent 66%);
  filter: blur(70px);
}

/* Respaldo: el logotipo como filigrana. Queda DEBAJO del vídeo, así que solo
   aparece si el vídeo todavía no cargó, falló, o el navegador bloqueó el
   autoplay. La portada nunca se queda vacía. */
.hero__fallback {
  left: 50%; top: 50%;
  width: min(112%, 760px);
  height: auto;
  opacity: .12;
  translate: -50% -50%;
  animation: breathe 24s var(--ease) infinite alternate;
}
@keyframes breathe {
  from { transform: scale(.985); opacity: .10; }
  to   { transform: scale(1.045); opacity: .15; }
}

.hero__video {
  top: 0; left: 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: center 12%;
  filter: grayscale(1) sepia(.32) contrast(1.05) brightness(.55);
  animation: drift 30s var(--ease) infinite alternate;
}
@keyframes drift {
  from { transform: scale(1.03); }
  to   { transform: scale(1.11); }
}

/* Velo: funde el medio con el fondo de la página y sostiene la legibilidad.
   Antes venía en diagonal desde la izquierda, porque el texto vivía en esa
   mitad y el vídeo en la otra. Con el texto en el centro esa diagonal dejaba lo
   más claro justo detrás del titular. Ahora oscurece el centro y se abre hacia
   los bordes: el vídeo se sigue viendo por fuera y el texto queda apoyado. */
.hero__veil {
  inset: 0;
  background:
    linear-gradient(to top, var(--ink-900) 5%, rgba(14,17,14,.55) 42%, rgba(14,17,14,.28) 100%),
    radial-gradient(ellipse 74% 62% at 50% 50%,
      rgba(14, 17, 14, .82),
      rgba(14, 17, 14, .60) 58%,
      rgba(14, 17, 14, .34) 100%);
}

.hero__inner { position: relative; z-index: 10; }

/* Flex, no bloque: entre bloques adyacentes los márgenes COLAPSAN — CSS toma
   solo el mayor en vez de sumarlos — y el margen negativo de abajo de una línea
   se comía con el de arriba de la siguiente, dejando ~13px de más entre líneas.
   En un contenedor flex no hay colapso y la resta sale exacta. */
.hero__title {
  display: flex;
  flex-direction: column;
  /* Sin `align-items: center`. Con él, cada línea se encogía al ancho exacto de
     su texto y el recorte de abajo le cortaba la «l» cursiva de «procesal», que
     se sale de su propio ancho. Las líneas ocupan todo el ancho y el texto se
     centra dentro (`text-align` lo hereda de .hero): así el recorte queda lejos
     de las letras. */
  max-width: 20ch;
  margin-inline: auto;
  /* Más apretado que el resto de titulares a propósito: a mayor tamaño, menos
     interlineado. Medido con la tinta real de los glifos (canvas), no con la
     caja de línea: deja ~14px libres entre la cola de la «j» y lo más alto de
     la línea siguiente. Si cambia el titular, vuelva a medirlo — un texto con
     tildes en la segunda línea necesita más. */
  line-height: 1.1;
}
/* El overflow:hidden es lo que oculta la línea antes de que suba, pero también
   le cortaba la cola a la «j» y la «g». El relleno agranda la caja recortada y
   el margen negativo devuelve la altura al layout: se ve completa y no se
   mueve nada. */
.hero__title .ln {
  display: block;
  overflow: hidden;
  /* El relleno agranda la caja recortada y el margen negativo devuelve la
     altura al layout, así que esto no mueve nada. Dimensionado para el peor
     caso medido: una MAYÚSCULA CON TILDE sube 14px más que el titular actual. */
  padding-block: .24em .18em;
  margin-block: -.24em -.18em;
  /* Lo mismo a los lados, por el mismo motivo: la cursiva de Fraunces se sale
     del ancho que dice ocupar. En un teléfono el titular casi toca los bordes y
     ahí no hay holgura de sobra, así que el aire se pone explícito. */
  padding-inline: .1em;
  margin-inline: -.1em;
}
.hero__title .ln > span {
  display: block;
  transform: translateY(105%);
  animation: rise 1.15s var(--ease-out) forwards;
  /* La separación entre una línea y la siguiente estaba en 110 ms y las dos
     parecían subir a la vez. A 190 ms se lee como lo que es: primero una,
     después la otra. El resto de la portada entra detrás, encadenado. */
  animation-delay: calc(.2s + var(--i) * .19s);
}
@keyframes rise { to { transform: translateY(0); } }

.hero__sub {
  margin: clamp(1.75rem, 3.4vh, 2.6rem) auto 0;
  max-width: 52ch;
  font-size: clamp(1rem, .93rem + .35vw, 1.2rem);
  line-height: 1.6;
  color: var(--bone-80);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.1rem 2.25rem;
  margin-top: clamp(1.9rem, 4vh, 2.75rem);
}

/* La cadena de entrada, en cuatro tiempos: línea uno, línea dos, la bajada y
   los botones. El titular tiene su propio gesto (sube desde detrás de un
   recorte); estos dos solo aparecen y se asientan, que es suficiente — si todo
   se moviera igual, la portada se sentiría un carrusel.

   La animación va en el CONTENEDOR de los botones y no en cada botón: con
   `forwards` la transformación final se queda fija y le ganaría al `translateY`
   del cursor encima, así que el botón dejaría de levantarse al pasar el ratón. */
.hero__sub,
.hero__cta {
  opacity: 0;
  animation: hero-entra .95s var(--ease-out) forwards;
}
.hero__sub { animation-delay: .74s; }
.hero__cta { animation-delay: .9s; }
@keyframes hero-entra {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ── SALIDA: la portada se retira al bajar ────────────────────────────────
   `--salida` va de 0 (arriba del todo) a 1 (media pantalla recorrida) y lo
   escribe js/main.js. Todo el bloque se va junto: sube un poco y se desvanece,
   mientras el vídeo se queda quieto detrás. Sin JavaScript `--salida` no
   existe, el respaldo es 0 y la portada simplemente no se mueve. */
.hero__inner {
  --salida: 0;
  transform: translateY(calc(var(--salida) * -4.5rem));
  opacity: calc(1 - var(--salida));
}
/* Desvanecida no puede seguir recibiendo clics: un botón invisible que todavía
   se deja pulsar es una trampa. */
.hero__inner.is-ida { pointer-events: none; }

/* Llamada principal: cápsula, no rectángulo.
   Cuatro capas hacen que se sienta un objeto físico y no un rectángulo pintado:
   relleno con gradiente vertical, luz interior arriba, sombra interior abajo y
   dos sombras exteriores teñidas con el verde del fondo (nunca negro plano). */
/* LIQUID GLASS. Dos condiciones que costó aprender:
   1. El vidrio dobla el fondo EN EL BORDE. Una turbulencia uniforme por toda la
      superficie se lee como simple transparencia, no como vidrio.
   2. Si detrás no hay color ni contraste, no hay nada que doblar. Por eso en el
      sitio blanco nunca se vio: aquí sí hay sustrato — el vídeo y el aura de la
      portada (.hero__aura). Si mueve estos botones a un fondo plano, el efecto
      desaparece y solo queda el rim.
   El doblado real lo monta js/main.js (lente de borde). Esto es la base. */
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: .55rem .55rem .55rem 1.75rem;
  border-radius: var(--r-pill);
  color: var(--bone);
  font-family: var(--serif);
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  letter-spacing: -.012em;
  line-height: 1.2;

  /* Dos capas. Arriba el velo especular, DIAGONAL — uno vertical delata que es
     CSS. Debajo un tinte oscuro: el vidrio oscuro real oscurece lo que hay
     detrás, no lo aclara, y es lo que sostiene el contraste del texto sobre el
     aura. Sin él la letra cae a ~3,3:1, por debajo de lo legible. */
  background-image:
    linear-gradient(135deg,
      rgba(255, 255, 255, .19),
      rgba(255, 255, 255, .02) 48%,
      rgba(255, 255, 255, .11)),
    linear-gradient(0deg, rgba(14, 17, 14, .48), rgba(14, 17, 14, .48));

  /* Respaldo para navegadores sin url() en backdrop-filter. El JS lo reemplaza
     por el filtro de lente donde se puede. Desenfoque LIGERO: con 18px lo de
     atrás se vuelve papilla y deja de reconocerse. */
  -webkit-backdrop-filter: blur(6px) saturate(150%);
          backdrop-filter: blur(6px) saturate(150%);

  /* RIM ESPECULAR — la pieza que hace que se lea como vidrio y no como
     transparencia: luz en el filo superior izquierdo, apagada en el inferior
     derecho, como si la luz entrara por arriba. */
  box-shadow:
    inset 1.2px 1.2px 0 rgba(255, 255, 255, .50),
    inset -1.2px -1.2px 0 rgba(255, 255, 255, .16),
    inset 0 0 22px rgba(255, 255, 255, .07),
    0 2px 5px -2px rgba(6, 12, 6, .6),
    0 16px 34px -16px rgba(6, 12, 6, .95);
  transition: transform .3s var(--ease-out), box-shadow .4s var(--ease);
}
.cta:hover, .cta:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    inset 1.4px 1.4px 0 rgba(255, 255, 255, .62),
    inset -1.4px -1.4px 0 rgba(255, 255, 255, .20),
    inset 0 0 26px rgba(255, 255, 255, .10),
    0 4px 9px -3px rgba(6, 12, 6, .65),
    0 24px 46px -18px rgba(6, 12, 6, 1);
}
.cta:active {
  transform: translateY(0);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .34),
    inset 0 2px 8px rgba(6, 12, 6, .5),
    0 4px 10px -6px rgba(6, 12, 6, .8);
}

/* Secundario: mismo botón, mismo vidrio, menos peso. Sin aro giratorio. */
.cta--ghost {
  color: var(--bone-80);
  background-image:
    linear-gradient(135deg,
      rgba(255, 255, 255, .11),
      rgba(255, 255, 255, .01) 48%,
      rgba(255, 255, 255, .06)),
    linear-gradient(0deg, rgba(14, 17, 14, .38), rgba(14, 17, 14, .38));
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .30),
    inset -1px -1px 0 rgba(255, 255, 255, .10),
    inset 0 0 20px rgba(255, 255, 255, .05),
    0 2px 5px -2px rgba(6, 12, 6, .5),
    0 12px 26px -16px rgba(6, 12, 6, .9);
}
.cta--ghost:hover, .cta--ghost:focus-visible {
  color: var(--bone);
  box-shadow:
    inset 1.2px 1.2px 0 rgba(255, 255, 255, .44),
    inset -1.2px -1.2px 0 rgba(255, 255, 255, .14),
    inset 0 0 24px rgba(255, 255, 255, .08),
    0 4px 9px -3px rgba(6, 12, 6, .6),
    0 20px 40px -18px rgba(6, 12, 6, .95);
}
/* Los dos botones llevan el mismo efecto: vidrio, barrido y aro giratorio.
   La jerarquía la marca solo el relleno, un punto más tenue en el secundario. */

/* EL BRILLO DE PÁEZ, en dos piezas.

   1) El barrido. Es el mismo gesto que el «sheen» del logotipo del sitio actual:
      una banda de luz inclinada que cruza la superficie. Aquí se mueve por
      background-position y no por transform, para que el propio radio de la
      cápsula la recorte y no haga falta overflow:hidden (que se comía el aro). */
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background-image: linear-gradient(105deg,
    transparent 42%,
    rgba(255, 255, 255, .30) 47%,
    rgba(255, 255, 255, .85) 50%,
    rgba(255, 255, 255, .30) 53%,
    transparent 58%);
  background-size: 320% 100%;
  background-repeat: no-repeat;
  background-position: 190% 0;
  animation: sweep 6.5s var(--ease) infinite;
}
/* Al pasar el cursor el barrido se dispara de inmediato, sin esperar el ciclo. */
.cta:hover::before, .cta:focus-visible::before { animation: sweep 1.1s var(--ease-out); }
@keyframes sweep {
  0%        { background-position: 190% 0; }
  22%, 100% { background-position: -90% 0; }
}

/* 2) El aro de luz. Anillo de 1.4px alrededor de la cápsula con un degradado
      cónico que gira sin parar. Va por FUERA del botón, sobre el carbón, que es
      donde el latón contrasta. El recorte a solo-borde se hace con máscaras.

      El degradado cónico es FIJO y lo que gira es el cuadrado que lo lleva
      dentro. Antes se animaba el ángulo del propio cónico y eso obliga a
      REDIBUJAR el degradado completo en cada fotograma, en los seis botones de
      la página a la vez y sin parar. Rotar es transform: lo resuelve el
      compositor sin volver a pintar nada. Mismo efecto, sin el costo. */
.cta__ring {
  position: absolute;
  inset: -2px;
  z-index: 0;
  border-radius: var(--r-pill);
  /* El relleno es el grosor del aro: la máscara descuenta la caja de contenido
     y deja justo este filo. El recorte al contorno lo hace el overflow, que
     corta a la caja de relleno — el borde exterior de la cápsula. */
  padding: 1.4px;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
.cta__ring::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  /* Cuadrado que debe cubrir la cápsula en CUALQUIER giro, así que su lado
     tiene que pasar la diagonal del botón. Con estas proporciones la diagonal
     no llega a 1.15 veces el ancho; 140% deja margen de sobra. */
  width: 140%;
  aspect-ratio: 1;
  background: conic-gradient(from 0deg at 50% 50%,
    transparent 0deg,
    transparent 200deg,
    rgba(169, 143, 99, .55) 250deg,
    var(--brass-hi) 290deg,
    #FFF4DD 305deg,
    var(--brass-hi) 320deg,
    rgba(169, 143, 99, .55) 350deg,
    transparent 360deg);
  transform: translate(-50%, -50%) rotate(0deg);
  animation: beam 4s linear infinite;
}
@keyframes beam { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Un botón que no se está viendo no tiene por qué seguir animando. Lo marca
   js/main.js al salir de pantalla. Sin JavaScript nada se detiene y el botón
   se comporta como antes. */
.cta.is-idle::before,
.cta.is-idle .cta__ring::before { animation-play-state: paused; }

.cta__label { position: relative; z-index: 2; }

/* La flecha vive en su propia ficha, que gira al pasar el cursor. */
.cta__chip {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.35rem; height: 2.35rem;
  border-radius: 50%;
  background: var(--bone);
  color: var(--ink-900);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    0 1px 3px rgba(6, 12, 6, .5);
  transition: transform .45s var(--ease-out), background-color .4s var(--ease),
              color .4s var(--ease), box-shadow .4s var(--ease);
}
.cta:hover .cta__chip, .cta:focus-visible .cta__chip {
  transform: rotate(-45deg);
  background: var(--brass-hi);
}

/* En el secundario la ficha es un aro hueco: misma forma, sin peso. */
.cta--ghost .cta__chip {
  background: rgba(237, 234, 226, .07);
  color: var(--bone);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
}
.cta--ghost:hover .cta__chip, .cta--ghost:focus-visible .cta__chip {
  background: rgba(169, 143, 99, .22);
  box-shadow: inset 0 0 0 1px var(--brass-28);
}

/* ── 07. La firma ───────────────────────────────────────────────────────── */
/* Titular, entrada grande y el desarrollo en DOS COLUMNAS de texto. La
   composición de prensa deja entrar más texto sin recaer en la plantilla de
   «etiqueta + titular + párrafo de apoyo a la derecha». */
.firma__title { max-width: 16ch; }

.firma__lead {
  margin: clamp(1.6rem, 3.4vw, 2.4rem) 0 0;
  max-width: 34ch;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.28rem, 2.3vw, 1.85rem);
  line-height: 1.36;
  letter-spacing: -.018em;
  color: var(--bone);
}
.firma__lead em {
  font-style: italic;
  font-variation-settings: "SOFT" 8, "WONK" 1;
  color: var(--brass-hi);
}

/* Una sola columna de lectura. La ficha de datos que iba a la derecha se
   eliminó — parecía una tabla pegada — y sus datos se movieron al contacto,
   que es donde tienen sentido. */
.firma__body {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  max-width: 60ch;
}
.firma__body p {
  margin: 0 0 1.15em;
  font-size: .97rem;
  color: var(--bone-58);
}
.firma__body p:last-child { margin-bottom: 0; }

/* Identificador de sección. Restringido a propósito: el número en mono — la
   única familia mono del sistema — y el nombre en sans. Lo que antes se sentía
   de plantilla era la repetición del bloque entero, no el rótulo. */
.band-id {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 clamp(1.4rem, 3vw, 2.1rem);
  font-size: .85rem;
  color: var(--bone-38);
}
.band-id::before {
  content: "";
  width: clamp(1.5rem, 3vw, 2.5rem);
  height: 1px;
  background: var(--brass-28);
}
.band-id b {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: .78rem;
  color: var(--brass);
}

.firma__more { margin-top: clamp(2rem, 4vw, 2.75rem); }

/* ── 09b. Notas ─────────────────────────────────────────────────────────── */
.notas__title { margin-top: 1.2rem; max-width: 18ch; }
.notas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.nota {
  display: block;
  padding-top: clamp(1.4rem, 2.6vw, 2rem);
  color: inherit;
}
.nota__cat { display: block; font-size: .8rem; color: var(--brass); margin-bottom: .7rem; }
.nota h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin-bottom: .7rem;
  transition: color .3s var(--ease);
}
.nota:hover h3, .nota:focus-visible h3 { color: var(--brass-hi); }
.nota p { font-size: .95rem; color: var(--bone-58); margin: 0; }
.nota p em { font-style: italic; color: var(--bone-80); }
.nota__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  margin-top: 1.1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line-soft);
  font-size: .82rem;
  color: var(--bone-38);
}
.notas__more { margin-top: clamp(2rem, 4vw, 2.75rem); }

/* ── 08. Áreas ──────────────────────────────────────────────────────────── */
/* COLECCIÓN DE MATERIAS.
   Las tres áreas permanecen abiertas, pero dejan de leerse como filas de una
   tabla. En escritorio forman una colección de tres portadas jurídicas: nombre,
   criterio, acceso y asuntos. La comparación es inmediata y cada especialidad
   conserva personalidad sin introducir fotografías de banco. */

.areas__title {
  margin-top: 1.2rem;
  max-width: 14ch;
}

/* Tres materias, tres piezas. En escritorio se leen como portadas de una
   colección jurídica; cada una tiene jerarquía propia y la oferta se compara
   de un vistazo. El fondo de la rejilla funciona como filete entre tarjetas. */
.pliego {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 4.25rem);
  border: 1px solid var(--line);
  background: var(--line);
}

.mat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: clamp(31rem, 39vw, 36rem);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  color: inherit;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, .026), transparent 44%),
    var(--ink-900);
}

/* La línea superior identifica la materia activa sin convertir la tarjeta en
   un botón brillante. Se anima solo transform: respuesta rápida y barata. */
.mat::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  height: 2px;
  background: var(--brass);
  transform: scaleX(.12);
  transform-origin: left;
  transition: transform .24s var(--ease-out);
}

/* Luz ambiental, no una segunda animación protagonista. */
.mat::after {
  content: "";
  position: absolute;
  right: -9rem;
  bottom: -11rem;
  z-index: 0;
  width: 24rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(169, 143, 99, .12), transparent 68%);
  opacity: 0;
  transform: translate3d(1rem, 1rem, 0) scale(.94);
  transition: opacity .24s var(--ease), transform .24s var(--ease-out);
  pointer-events: none;
}

.mat > * {
  position: relative;
  z-index: 1;
}

.mat__num {
  justify-self: end;
  padding: 0;
  font-size: .78rem;
  color: var(--brass);
}

.mat__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: clamp(3rem, 6vw, 5.5rem);
}

.mat__name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.45rem, 4.2vw, 4.15rem);
  line-height: .98;
  letter-spacing: -.045em;
  color: var(--bone);
  transition: color .22s var(--ease);
}

.mat__go {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .65rem;
  margin-top: auto;
  padding-top: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: .4rem;
  font-family: var(--serif);
  font-size: 1.06rem;
  color: var(--bone);
  transition: color .22s var(--ease);
}
.mat__go::before,
.mat__go::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
}
.mat__go::before { background: var(--bone-18); }
.mat__go::after {
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .24s var(--ease-out);
}
.mat__go .arrow {
  display: inline-block;
  transition: transform .24s var(--ease-out);
}

.mat__list {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.mat__list li {
  display: grid;
  grid-template-columns: .75rem minmax(0, 1fr);
  gap: .75rem;
  align-items: baseline;
  padding: .62rem 0;
  font-size: .9rem;
  color: var(--bone-58);
  transition: color .22s var(--ease);
}
.mat__list li + li { border-top: 1px solid var(--line-soft); }
.mat__list li::before {
  content: "";
  width: .45rem;
  height: 1px;
  background: var(--brass-28);
  transform: translateY(-.32em);
  transition: width .24s var(--ease-out), background-color .22s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .mat:hover::before,
  .mat:focus-visible::before { transform: scaleX(1); }
  .mat:hover::after,
  .mat:focus-visible::after {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  .mat:hover .mat__name,
  .mat:focus-visible .mat__name { color: var(--brass-hi); }
  .mat:hover .mat__go,
  .mat:focus-visible .mat__go { color: var(--brass-hi); }
  .mat:hover .mat__go::after,
  .mat:focus-visible .mat__go::after { transform: scaleX(1); }
  .mat:hover .mat__go .arrow,
  .mat:focus-visible .mat__go .arrow { transform: translateX(5px); }
  .mat:hover .mat__list li,
  .mat:focus-visible .mat__list li { color: var(--bone-80); }
  .mat:hover .mat__list li::before,
  .mat:focus-visible .mat__list li::before {
    width: .62rem;
    background: var(--brass);
  }
}

@media (max-width: 1000px) {
  .pliego { grid-template-columns: 1fr; }
  .mat {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, .8fr);
    grid-template-rows: auto 1fr;
    gap: 0 clamp(2rem, 6vw, 4rem);
    min-height: 0;
  }
  .mat__num { grid-column: 1 / -1; }
  .mat__head { padding-top: clamp(2rem, 5vw, 3.5rem); }
  .mat__list {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    margin-top: clamp(2rem, 5vw, 3.5rem);
  }
  .mat__name { font-size: clamp(2.5rem, 8vw, 4rem); }
}

@media (max-width: 620px) {
  .pliego { margin-top: 2.25rem; }
  .mat {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    padding: 1.35rem;
  }
  .mat__num,
  .mat__head,
  .mat__list { grid-column: 1; grid-row: auto; }
  .mat__head { padding-top: 2.4rem; }
  .mat__name { font-size: clamp(2.45rem, 13vw, 3.4rem); }
  .mat__list { margin-top: 2rem; }
}

/* ── 08b. Páginas de área ───────────────────────────────────────────────── */
/* Las tres páginas usan el mismo esqueleto y solo cambian de contenido. Cada
   bloque tiene una forma distinta, como en la portada: rejilla numerada, luego
   citas, luego dos columnas desiguales. Si los tres bloques se parecieran, la
   página se leería como una plantilla — que es justo lo que no es. */

/* ── Asuntos: rejilla numerada a dos columnas.
   Los filetes de arriba de cada celda coinciden porque las filas de la rejilla
   miden lo mismo; queda un renglón continuo de lado a lado sin dibujarlo. */
.asuntos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}
.asunto {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0 1rem;
  padding: clamp(1.35rem, 2.6vw, 1.9rem) 0;
  border-top: 1px solid var(--line);
}
.asunto .num { grid-row: span 2; align-self: start; padding-top: .35rem; color: var(--brass); }
.asunto h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.7vw, 1.32rem);
  line-height: 1.3;
  letter-spacing: -.015em;
  margin-bottom: .5rem;
}
.asunto p { margin: 0; max-width: 46ch; font-size: .95rem; color: var(--bone-58); }

/* ── Casos: la consulta tal como llega, en la voz de quien la trae.
   Van en cursiva y entre comillas angulares porque son formulaciones tipo, no
   testimonios: el rótulo de arriba y la nota al pie lo dicen sin ambigüedad. */
.casos { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); border-top: 1px solid var(--line); }
.caso {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1.4rem, 2.8vw, 2rem) 0;
  border-bottom: 1px solid var(--line);
}
.caso__q {
  margin: 0;
  max-width: 58ch;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.12rem, 2vw, 1.5rem);
  line-height: 1.42;
  letter-spacing: -.015em;
  color: var(--bone);
}
.caso__tag { font-size: .82rem; color: var(--brass); text-align: right; }
.casos__nota { margin-top: 1.25rem; font-size: .87rem; color: var(--bone-38); }

/* ── Cómo avanza: dos columnas desiguales. A la izquierda el orden del trabajo,
   a la derecha lo que hay que traer. Es la única rejilla 7/5 de estas páginas. */
.trabajo {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
.trabajo__t {
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: .85rem;
  color: var(--bone-38);
}

.paso {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0 1rem;
  padding: clamp(1.05rem, 2.2vw, 1.5rem) 0;
  border-top: 1px solid var(--line-soft);
}
.paso:first-child { border-top: 0; padding-top: 0; }
.paso .num { grid-row: span 2; align-self: start; padding-top: .3rem; color: var(--brass); }
.paso h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1rem;
  margin-bottom: .3rem;
}
.paso p { margin: 0; font-size: .93rem; color: var(--bone-58); }

/* Mismo guion de latón que la columna de asuntos de la portada. Se repite a
   propósito: es la marca de «lista de expediente» del sistema. */
.llevar li {
  display: grid;
  grid-template-columns: .8rem minmax(0, 1fr);
  gap: .9rem;
  align-items: baseline;
  padding: .8rem 0;
  font-size: .94rem;
  color: var(--bone-58);
}
.llevar li + li { border-top: 1px solid var(--line-soft); }
.llevar li:first-child { padding-top: 0; }
.llevar li::before {
  content: "";
  height: 1px;
  background: var(--brass-28);
  transform: translateY(-.34em);
}

/* ── Las otras dos áreas. Cierra la página devolviendo al visitante al pliego
   en vez de dejarlo en un callejón. Repite el lenguaje de .mat: el nombre pasa
   a latón y el filete corre hasta el margen. */
.otras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--line);
}
.otra {
  display: grid;
  gap: .6rem;
  padding: clamp(1.4rem, 2.8vw, 2rem) 0;
  border-top: 1px solid var(--line);
  color: inherit;
}
.otra__w {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--bone);
  transition: color .4s var(--ease);
}
.otra__w::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
  transition: background-color .5s var(--ease);
}
.otra__t { font-size: .93rem; color: var(--bone-58); }
.otra:hover .otra__w, .otra:focus-visible .otra__w { color: var(--brass-hi); }
.otra:hover .otra__w::after, .otra:focus-visible .otra__w::after { background: var(--brass-28); }

/* Variante de tres, para las páginas que no son de área y listan las tres.
   Va como clase y no como style en línea: un estilo en línea le gana a la media
   query de abajo y deja tres columnas de 90px en el teléfono. */
.otras--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 860px) {
  .asuntos, .otras, .otras--3 { grid-template-columns: 1fr; }
  .trabajo { grid-template-columns: 1fr; }
  /* Sin la columna vecina, el rótulo de «lo que debe traer» necesita su propio
     filete para no quedar pegado al último paso. */
  .trabajo__doc { padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--line); }
}

@media (max-width: 640px) {
  .caso { grid-template-columns: 1fr; gap: .7rem; }
  .caso__tag { text-align: left; }
}

/* ── 08c. El proceso y el contacto ──────────────────────────────────────── */
/* La única cifra grande del sistema. En el resto del sitio los números son
   mono y diminutos: aquí son de la serif y a tamaño de titular, porque en esta
   página el orden de las etapas ES el contenido. No repita este recurso en
   otras secciones o deja de significar algo. */
.ruta { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); border-top: 1px solid var(--line); }
.etapa {
  display: grid;
  grid-template-columns: clamp(3.25rem, 6.5vw, 5.5rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.75rem);
  padding-block: clamp(1.6rem, 3.2vw, 2.6rem);
  border-bottom: 1px solid var(--line);
}
.etapa__n {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height: .95;
  letter-spacing: -.04em;
  color: var(--brass);
  opacity: .6;
}
.etapa h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
  line-height: 1.3;
  letter-spacing: -.015em;
  margin-bottom: .55rem;
}
.etapa p { margin: 0; font-size: .98rem; color: var(--bone-58); }

/* Dos listas a la par: lo que ponemos nosotros y lo que pone el cliente.
   Deliberadamente del mismo ancho — el compromiso es recíproco. */
.pactos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* El separador dentro de una columna del cierre: divide canales de etapas sin
   introducir otra caja. */
.corte { margin-block: clamp(1.75rem, 3.5vw, 2.5rem); }

@media (max-width: 860px) {
  .pactos { grid-template-columns: 1fr; }
  .pactos > div + div { padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--line); }
}

@media (max-width: 620px) {
  .etapa { grid-template-columns: 2.6rem minmax(0, 1fr); gap: 1rem; }
  .etapa__n { font-size: 1.75rem; }
}

/* ── 08d. Blog y artículos ──────────────────────────────────────────────── */
/* El texto de los artículos viene del sitio anterior sin tocar una coma: lo que
   cambia es el envase. Allí eran cajas de vidrio sobre blanco; aquí son filetes
   sobre carbón, con la misma jerarquía de siempre.

   Los nombres de archivo y las URL canónicas se conservan
   (`blog-mutuo-incumplimiento.html`, etc.) para no romper enlaces ni el
   posicionamiento que ya tenga el sitio publicado. */

/* Migas de pan. Dicen dónde está y devuelven al blog en el mismo renglón, sin
   gastar una línea entera en un «volver» como antes. */
.art-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.5rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-38);
}
.art-crumbs a { color: var(--bone-58); transition: color .26s var(--ease); }
.art-crumbs a:hover, .art-crumbs a:focus-visible { color: var(--brass-hi); }

.art-title { max-width: 20ch; }

/* Firma del artículo: sello, nombre y cargo a la izquierda; fecha y duración
   detrás de un filete. */
.art-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.25rem;
  margin-top: clamp(1.6rem, 3vw, 2.25rem);
  font-size: .88rem;
  color: var(--bone-38);
}
.art-meta__sello {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--brass-28);
  background: rgba(169, 143, 99, .1);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--brass-hi);
}
.art-meta__quien { display: grid; line-height: 1.35; }
.art-meta__quien strong { font-weight: 500; color: var(--bone); }
.art-meta__quien > span {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-38);
}
.art-meta__raya { width: 1px; height: 2rem; background: var(--line); }
/* En pantalla estrecha el filete deja de ser una raya y pasa a ser un salto de
   renglón: una pieza de ancho completo y altura cero dentro del flex empuja la
   fecha y la duración a su propia línea, en vez de dejarlas repartidas a media
   altura del nombre. */
@media (max-width: 560px) {
  .art-meta__raya { width: 100%; height: 0; background: none; }
  .art-meta { gap: .35rem 1.1rem; }
}

/* El texto manda y va a la izquierda; la columna auxiliar —índice, artículo
   relacionado y salida al blog— queda a la derecha y pegada mientras se lee,
   como en el sitio en línea. Antes era al revés y el índice se llevaba la
   columna de entrada, que es donde el ojo empieza a leer. */
.art-grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.art-side {
  position: sticky;
  top: 7.5rem;
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
  justify-items: start;
}
.art-side .crumb { margin-bottom: 0; }
.toc__t {
  margin: 0 0 1rem;
  font-size: .85rem;
  color: var(--bone-38);
}
.toc ol { counter-reset: toc; }
.toc li { counter-increment: toc; border-top: 1px solid var(--line-soft); }
.toc li:first-child { border-top: 1px solid var(--line); }
.toc a {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: .7rem;
  padding: .7rem 0;
  font-size: .93rem;
  line-height: 1.4;
  color: var(--bone-58);
  transition: color .3s var(--ease);
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--bone-38);
  transition: color .3s var(--ease);
}
.toc a:hover { color: var(--bone); }
/* Lo enciende el mismo scrollSpy() de la barra: los enlaces del índice llevan
   data-spy y las secciones del artículo llevan el id. Cero JavaScript nuevo. */
.toc a.is-here { color: var(--brass-hi); }
.toc a.is-here::before { color: var(--brass); }

.prose { max-width: 68ch; }
.prose p { margin: 0 0 1.2em; max-width: none; font-size: 1.03rem; color: var(--bone-80); }
.prose .lead {
  font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem);
  line-height: 1.6;
  color: var(--bone);
  margin-bottom: 1.5em;
}
/* Capitular, como en el sitio en línea. Va flotada para que el texto la rodee.
   El interlineado de .82 es lo que la sienta sobre la línea base del segundo
   renglón: con el valor normal quedaría colgando por encima del párrafo. */
.prose .lead::first-letter {
  float: left;
  margin: .04em .1em 0 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 3.4em;
  line-height: .82;
  color: var(--brass-hi);
}
/* flow-root, no un div cualquiera: sin él, el margen superior del h2 se escapa
   del <section> y deja huecos entre las cajas de las secciones. El scrollSpy
   busca la sección que contiene la línea de corte, y en esos huecos no
   encontraba ninguna: el índice se apagaba a cada salto de apartado. */
.art-sec { display: flow-root; scroll-margin-top: 7rem; }
.art-sec h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  line-height: 1.25;
  letter-spacing: -.02em;
  /* Medido: el párrafo que cierra el apartado anterior deja 20 px de margen
     propio, así que con 56 px aquí el hueco hasta el filete daba 76 px y el
     texto parecía cortado a la mitad de la página. Con 32 px quedan 52, y el
     filete se lee pegado al titular que introduce —que es de quien es— y no
     flotando entre los dos apartados. */
  margin: clamp(1.5rem, 3vw, 2rem) 0 1.05rem;
  padding-top: clamp(1.1rem, 2.2vw, 1.5rem);
  border-top: 1px solid var(--line);
}
.prose a {
  color: var(--bone);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--brass-28);
  transition: text-decoration-color .26s var(--ease);
}
.prose a:hover { text-decoration-color: var(--brass); }
.prose strong { font-weight: 500; color: var(--bone); }
.prose em { font-style: italic; }

/* Cita destacada: sin caja y sin comillas decorativas. Un filete de latón a la
   izquierda y la serif en cursiva bastan para sacarla del cuerpo. */
.prose blockquote {
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0;
  padding-left: clamp(1.25rem, 3vw, 2rem);
  border-left: 1px solid var(--brass-28);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.12rem, 1.9vw, 1.45rem);
  line-height: 1.45;
  letter-spacing: -.015em;
  color: var(--bone);
}
.prose blockquote.muted { color: var(--bone-58); border-left-color: var(--line); }

/* Los puntos numerados dentro del artículo. El título es opcional: hay
   artículos que enumeran requisitos pelados y otros que los titulan. */
.puntos { margin: clamp(1.75rem, 3.5vw, 2.5rem) 0; border-bottom: 1px solid var(--line); }
.punto {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0 1rem;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) 0;
  border-top: 1px solid var(--line);
}
.punto .num { grid-row: span 2; align-self: start; padding-top: .3rem; color: var(--brass); }
.punto__t {
  margin: 0 0 .4rem;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1rem;
  color: var(--bone);
}
.punto p { margin: 0; font-size: .96rem; color: var(--bone-58); }

/* Un punto más de aire que entre apartados: aquí sí se acaba el artículo. */
.refs { margin-top: clamp(2rem, 4vw, 2.75rem); padding-top: clamp(1.1rem, 2.2vw, 1.5rem); border-top: 1px solid var(--line); }
.refs__t { margin: 0 0 1.25rem; font-size: .85rem; color: var(--bone-38); }
.refs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.ref h4 {
  margin: 0 0 .7rem;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .84rem;
  color: var(--brass);
}
.ref p { margin: 0 0 .5rem; max-width: none; font-size: .87rem; line-height: 1.55; color: var(--bone-58); }

/* Compartir: círculos de vidrio con el logo de cada red. Comparten material con
   el botón flotante del menú —mismo relleno, mismo rim especular— pero SIN el
   aro giratorio de latón: ese gesto está reservado para la llamada principal,
   y cinco aros girando a la vez en una fila convertirían una fila de servicio
   en el elemento más ruidoso de la página. */
.art-share {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--line);
}
.art-share__t { margin: 0; font-size: .88rem; color: var(--bone-38); }
/* Arriba la barra va antes de leer, así que el rótulo es una etiqueta y no una
   pregunta: nadie puede decir todavía si le resultó útil. */
.art-share--top { margin-top: clamp(2.25rem, 4vw, 3rem); }
.art-share--top .art-share__t {
  display: grid;
  gap: .3rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-58);
}
.art-share--top .art-share__t span {
  font-family: var(--sans);
  font-size: .88rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bone-38);
}
.art-share__links { display: flex; flex-wrap: wrap; gap: .55rem; }
.art-share__links a, .art-share__links button {
  position: relative;
  display: grid;
  place-items: center;
  /* 44 px es el área mínima de toque cómoda; por debajo de eso el dedo falla. */
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  color: var(--bone-58);
  background-image:
    linear-gradient(135deg,
      rgba(255, 255, 255, .14),
      rgba(255, 255, 255, .02) 48%,
      rgba(255, 255, 255, .09)),
    linear-gradient(0deg, rgba(14, 17, 14, .55), rgba(14, 17, 14, .55));
  -webkit-backdrop-filter: blur(6px) saturate(150%);
          backdrop-filter: blur(6px) saturate(150%);
  box-shadow:
    inset 1.1px 1.1px 0 rgba(255, 255, 255, .42),
    inset -1.1px -1.1px 0 rgba(255, 255, 255, .14),
    inset 0 0 18px rgba(255, 255, 255, .06),
    0 2px 5px -2px rgba(6, 12, 6, .6),
    0 12px 26px -14px rgba(6, 12, 6, .9);
  transition: color .3s var(--ease), transform .3s var(--ease-out), box-shadow .4s var(--ease);
}
.art-share__links svg { width: 1.05rem; height: 1.05rem; }
.art-share__links a:hover, .art-share__links button:hover,
.art-share__links a:focus-visible, .art-share__links button:focus-visible {
  color: var(--brass-hi);
  transform: translateY(-2px);
  box-shadow:
    inset 1.3px 1.3px 0 rgba(255, 255, 255, .55),
    inset -1.3px -1.3px 0 rgba(255, 255, 255, .18),
    inset 0 0 22px rgba(255, 255, 255, .09),
    0 4px 9px -3px rgba(6, 12, 6, .65),
    0 18px 34px -16px rgba(6, 12, 6, .95);
}
.art-share__links a:active, .art-share__links button:active { transform: translateY(0); }

/* Copiar enlace: el icono cambia a un visto mientras dura el aviso. El rótulo
   sigue ahí para el lector de pantalla —lo cambia main.js—, solo que no se ve. */
.art-share__links .ic-listo { display: none; }
.art-share__links button[data-copiado] { color: var(--brass-hi); }
.art-share__links button[data-copiado] .ic-enlace { display: none; }
.art-share__links button[data-copiado] .ic-listo { display: block; }

.art-rel { width: 100%; padding-top: clamp(1.25rem, 2.5vw, 1.75rem); border-top: 1px solid var(--line); }
.art-rel__t {
  margin: 0 0 1.1rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-58);
}
.art-rel a { display: grid; gap: .35rem; }
.art-rel__cat {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
}
.art-rel__h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--bone);
  transition: color .28s var(--ease);
}
.art-rel a:hover .art-rel__h, .art-rel a:focus-visible .art-rel__h { color: var(--brass-hi); }
.art-rel__f { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; color: var(--bone-38); }

/* El mismo destino que la tarjeta de la columna, pero al final del texto: es
   el que se ve en pantalla estrecha, donde la columna se va arriba. */
.art-next { margin-top: clamp(2rem, 4vw, 2.75rem); display: none; }

@media (max-width: 980px) {
  .art-grid { grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 2.5rem); }
  /* Sin columna propia el índice deja de tener sentido pegado: sube antes del
     texto y hace de entradilla. El relacionado y la salida al blog no suben con
     él —arriba no sirven de nada—: aparecen al final, en `.art-next`. */
  .art-side { order: -1; position: static; gap: 0; }
  .art-rel, .art-side .crumb { display: none; }
  .art-next { display: block; }
  .prose { max-width: none; }
}

/* ── 09. Socio ──────────────────────────────────────────────────────────── */
.partner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.partner__shot {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  box-shadow: var(--shadow-deep);
}
.partner__shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) sepia(.35) contrast(1.06) brightness(.82);
  transform: scale(1.02);
  transition: filter .7s var(--ease), transform .9s var(--ease-out);
}
.partner__shot:hover img, .partner__shot:focus-within img {
  filter: none;
  transform: scale(1);
}
.partner__body { position: relative; z-index: 2; }
.partner__name { margin-bottom: 1.4rem; }
.partner__body p { color: var(--bone-58); max-width: 42ch; }
.partner__role { display: block; margin-top: .8rem; font-size: .9rem; color: var(--bone-38); }
.partner__actions { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

/* ── 10. Contacto ───────────────────────────────────────────────────────── */
.close { position: relative; }
/* Los halos son el sustrato del vidrio de la tarjeta. Sin color detrás no hay
   nada que refractar y el efecto desaparece. Ver la nota de .cta. */
.close .glow--brass { top: -14%; left: 30%; width: 46vw; height: 46vw; opacity: .34; }
.close .glow--moss  { bottom: -20%; left: -6%; width: 38vw; height: 38vw; opacity: .3; }

.close__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
/* La columna izquierda queda a su altura natural. Estirarla hasta la tarjeta y
   empujar los enlaces al pie con margin-top:auto abría un vacío de 600px en la
   mitad: peor el remedio. */
.close__col {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.close__line { max-width: 12ch; margin: 0; }
.close__ways {
  display: grid;
  gap: clamp(.75rem, 2vw, 1.25rem);
  max-width: 30ch;
}
.close__where {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  font-size: .85rem;
  color: var(--bone-38);
  max-width: 30ch;
}
.close__way {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--bone);
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
  transition: color .3s var(--ease), border-color .4s var(--ease), padding-left .4s var(--ease-out);
}
.close__way:hover, .close__way:focus-visible {
  color: var(--brass-hi);
  border-color: var(--brass-28);
  padding-left: .6rem;
}
.close__way small { display: block; font-family: var(--sans); font-size: .8rem; color: var(--bone-38); margin-bottom: .25rem; letter-spacing: 0; }
.close__foot { margin: 0; font-size: .93rem; color: var(--bone-58); max-width: 42ch; }

/* Tarjeta de vidrio: el mismo material de los botones, a mayor escala.
   Radio moderado — es una superficie, no una cápsula. El doblado de borde se lo
   pone el mismo motor (js/main.js) gracias al atributo data-lens. */
.card-glass {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: 20px;

  background-image:
    linear-gradient(135deg,
      rgba(255, 255, 255, .16),
      rgba(255, 255, 255, .02) 46%,
      rgba(255, 255, 255, .09)),
    linear-gradient(0deg, rgba(14, 17, 14, .55), rgba(14, 17, 14, .55));

  -webkit-backdrop-filter: blur(7px) saturate(150%);
          backdrop-filter: blur(7px) saturate(150%);

  box-shadow:
    inset 1.4px 1.4px 0 rgba(255, 255, 255, .42),
    inset -1.4px -1.4px 0 rgba(255, 255, 255, .12),
    inset 0 0 70px rgba(255, 255, 255, .045),
    0 4px 10px -4px rgba(6, 12, 6, .6),
    0 34px 74px -32px rgba(6, 12, 6, .98);
}
.card-glass__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.18rem, 2vw, 1.5rem);
  letter-spacing: -.015em;
  color: var(--bone);
}
.field__opt { color: var(--bone-18); }
.card-glass .form__note a {
  color: var(--bone);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--brass-28);
  transition: text-decoration-color .26s var(--ease);
}
.card-glass .form__note a:hover { text-decoration-color: var(--brass); }

/* ── 12. Pie ────────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); }
.foot__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem 3rem;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.foot__top img { height: 34px; width: auto; }
.foot__nav { display: flex; flex-wrap: wrap; gap: .9rem 1.75rem; }
.foot__nav a { font-size: .93rem; color: var(--bone-58); transition: color .26s var(--ease); }
.foot__nav a:hover { color: var(--brass-hi); }

.foot__bottom {
  display: flex; flex-wrap: wrap; gap: .7rem 2rem;
  justify-content: space-between; align-items: center;
  padding-block: 1.4rem;
  border-top: 1px solid var(--line-soft);
  font-size: .81rem;
  color: var(--bone-38);
}
.foot__bottom p { margin: 0; max-width: 62ch; }
.foot__legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.foot__legal a:hover { color: var(--bone); }

.wa {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-float);
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--ink-800);
  border: 1px solid var(--line);
  color: var(--brass);
  transition: color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.wa:hover { border-color: var(--brass-28); transform: translateY(-2px); }
.wa svg { width: 17px; height: 17px; }

/* ── 13. Documentos legales ─────────────────────────────────────────────── */
/* El relleno de abajo era 0 y eso dejaba lo último de la cabecera PEGADO al
   filete que separa secciones —sin un píxel de por medio— en las seis páginas
   interiores. Antes no cantaba porque la cabecera solía cerrar con un párrafo,
   y el margen del párrafo hacía de aire por accidente; en cuanto cerró con algo
   sin margen (el titular en los documentos legales, la barra de compartir en
   los artículos) quedó a la vista. Ahora respeta la regla de separación del
   sitio: --gap-bottom arriba del filete y --gap-top debajo, 7rem en total,
   igual que entre dos secciones cualesquiera. */
.page-head { padding-block: clamp(9rem, 18vh, 12rem) var(--gap-bottom); position: relative; }
.page-head .glow--brass { top: -10%; right: 4%; width: 34vw; height: 34vw; opacity: .34; }
.crumb {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: 1.6rem;
  font-size: .9rem;
  color: var(--bone-38);
  transition: color .26s var(--ease), gap .3s var(--ease);
}
.crumb:hover { color: var(--brass-hi); gap: .8rem; }

.doc { max-width: 68ch; }
.doc h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  letter-spacing: -.015em;
  margin: 3rem 0 1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.doc h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.doc p, .doc li { color: var(--bone-58); font-size: .98rem; }
.doc ul { margin: .8rem 0 1.2rem; }
.doc li { position: relative; padding-left: 1.4rem; margin-bottom: .55rem; max-width: var(--measure); }
.doc li::before { content: "—"; position: absolute; left: 0; color: var(--brass); }
.doc a { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--brass-28); transition: text-decoration-color .26s var(--ease); }
.doc a:hover { text-decoration-color: var(--brass); }
.doc__stamp { font-size: .85rem; color: var(--bone-38); margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }

.lede {
  font-size: clamp(1.075rem, 1rem + .42vw, 1.28rem);
  line-height: 1.6;
  color: var(--bone-80);
  max-width: 56ch;
}

/* ── 14. Formularios (páginas interiores) ───────────────────────────────── */
.form { display: grid; gap: 1.9rem; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; }

.field { display: grid; gap: .35rem; }
.field > label { font-size: .85rem; color: var(--bone-38); transition: color .28s var(--ease); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .75rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 1rem;
  border-radius: 0;
  transition: border-color .3s var(--ease);
}
.field textarea { min-height: 4.5rem; resize: vertical; line-height: 1.6; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23EDEAE2' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .2rem center;
  padding-right: 1.5rem;
  cursor: pointer;
}
.field select option { background: var(--ink-800); color: var(--bone); }
.field input::placeholder, .field textarea::placeholder { color: var(--bone-18); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--brass); }
.field:focus-within > label { color: var(--brass); }

/* Sin min-height: reservar el hueco del error en los cinco campos añadía unos
   100px muertos a la tarjeta. El salto al aparecer es mínimo. */
.field__err {
  font-size: .82rem;
  color: #C98A78;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-bottom-color: #C98A78; }
.field.has-error .field__err { opacity: 1; transform: translateY(0); }

/* Los dos envíos son botones del mismo material. Centrado, no baseline: con
   cápsulas de vidrio la línea base del texto no es la referencia correcta. */
.form__actions { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }

/* Con etiquetas cortas los dos envíos caben en una fila: el contexto ya dice
   que es un formulario de consulta, así que «WhatsApp» y «Correo» bastan.
   El nombre completo va en aria-label para quien use lector de pantalla. */
.card-glass .form__actions .cta { padding-left: 1.4rem; }

/* Trampa antispam: fuera de pantalla, sin ocultarla con display:none, que
   algunos bots detectan. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.form__note { font-size: .84rem; color: var(--bone-38); max-width: 52ch; }
.form__status { font-size: .88rem; color: var(--brass-hi); min-height: 1.2em; }

/* ── 15. Movimiento y adaptaciones ──────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .85s var(--ease-out) calc(var(--d, 0) * 1ms),
              transform .95s var(--ease-out) calc(var(--d, 0) * 1ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

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

/* En pantallas táctiles los enlaces de texto quedan por debajo del área mínima
   de toque (44px). Se agranda solo el área, sin mover nada en escritorio. */
@media (pointer: coarse) {
  .qlink { padding-block: .5rem .45rem; }
  /* Mismo motivo que arriba, con el relleno agrandado del táctil. */
  .nav-side .qlink { padding-top: .45rem; }
  .act   { padding-block: .4rem .6rem; }
}

/* En pantallas anchas el medio se retira a la derecha: el retrato deja de
   competir con el titular y el velo hace la costura. */
@media (min-width: 900px) {
  .hero__video { object-position: center 8%; }
}

@media (max-width: 899px) {
  /* Con los seis destinos la fila queda más apretada que con cuatro, pero
     entra: a 900 px ocupa 681 px en un hueco de 759. Por debajo de ahí la barra
     se reduce al logo, Contacto y la hamburguesa, y los seis siguen estando en
     el menú completo. */
  .nav-links { display: none; }
  .partner, .band-head { grid-template-columns: 1fr; }
  .band-head { align-items: start; }
  .partner__shot { max-width: 24rem; }
}

/* Teléfonos estrechos: el titular no cabe ni al mínimo del clamp. */
@media (max-width: 360px) {
  .d-xl { font-size: 2.25rem; }
}

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

@media (max-width: 700px) {
  .notas { grid-template-columns: 1fr; }
  /* No caben en una fila dentro de la tarjeta: se apilan a ancho completo, que
     es más limpio que dos cápsulas de anchos distintos. */
  .card-glass .form__actions { flex-direction: column; align-items: stretch; }
  .card-glass .form__actions .cta { justify-content: space-between; }
  .foot__top { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__title .ln > span { transform: none; }
  .hero__sub, .hero__cta { opacity: 1; transform: none; animation: none; }
  .hero__inner { transform: none; opacity: 1; }
  .hero__video { animation: none; transform: scale(1.03); }
  .hero__fallback { animation: none; transform: none; opacity: .13; }
  .cta::before, .cta__ring, .fab__ring { display: none; }
}

/* ── 16. Refinamiento editorial ───────────────────────────────────────────
   Esta capa afina la composición sin intervenir el sistema de botones. Las
   reglas de .cta, su lente, barrido y aro luminoso permanecen intactas. */

/* Un punto más de contraste en textos secundarios y filetes. En el monitor
   oscuro original el cuerpo se perdía antes que los titulares. */
:root {
  --bone-58: rgba(237, 234, 226, .64);
  --bone-38: rgba(237, 234, 226, .44);
  --line:      rgba(237, 234, 226, .13);
  --line-soft: rgba(237, 234, 226, .075);
}

body {
  background:
    radial-gradient(75rem 46rem at 52% -18rem, rgba(169, 143, 99, .055), transparent 68%),
    var(--ink-900);
}

/* Las secciones dejan de sentirse como una única plancha negra. El cambio es
   deliberadamente tenue: da profundidad sin convertir el sitio en tarjetas. */
.band {
  isolation: isolate;
}
.band > .shell {
  position: relative;
  z-index: 1;
}
#firma {
  background:
    radial-gradient(46rem 32rem at 82% 20%, rgba(169, 143, 99, .05), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, .008), transparent 70%);
}
#areas {
  background: linear-gradient(115deg, rgba(26, 31, 24, .34), transparent 58%);
}
#socio {
  background:
    radial-gradient(38rem 34rem at 20% 56%, rgba(45, 82, 64, .085), transparent 74%),
    linear-gradient(180deg, transparent, rgba(255, 255, 255, .006));
}
#blog {
  background: linear-gradient(180deg, rgba(255, 255, 255, .008), transparent 78%);
}

/* El rótulo gana ritmo y presencia, pero sigue subordinado al titular. */
.band-id {
  letter-spacing: .012em;
}
.band-id::before {
  box-shadow: 0 0 18px rgba(169, 143, 99, .2);
}

/* En escritorio, La firma se compone como una doble página: la tesis a la
   izquierda y la explicación a la derecha. Se elimina el gran vacío lateral
   que aparecía en monitores anchos. */
@media (min-width: 900px) {
  #firma .shell {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(28rem, 5.5fr);
    column-gap: clamp(3.5rem, 8vw, 8.5rem);
    align-items: start;
  }
  #firma .band-id {
    grid-column: 1 / -1;
  }
  #firma .firma__title {
    grid-column: 1;
    grid-row: 2 / span 3;
    max-width: 11ch;
  }
  #firma .firma__lead,
  #firma .firma__body,
  #firma .firma__more {
    grid-column: 2;
  }
  #firma .firma__lead {
    margin-top: .3rem;
    max-width: 31ch;
  }
  #firma .firma__body {
    margin-top: clamp(1.75rem, 3vw, 2.35rem);
    max-width: 56ch;
  }
  #firma .firma__more {
    margin-top: clamp(2rem, 3.5vw, 2.6rem);
  }
}

/* El retrato recibe un filo de luz muy fino. La foto conserva su revelado y
   su transición originales; solo se refuerza el encuadre. */
.partner__shot {
  outline: 1px solid rgba(237, 234, 226, .1);
  outline-offset: -1px;
}
.partner__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .045),
    inset 0 -7rem 8rem -7rem rgba(6, 12, 6, .85);
}

/* Las notas se leen como dos piezas editoriales relacionadas: una línea las
   separa y cada una tiene un pequeño gesto direccional al recorrerla. */
@media (min-width: 701px) {
  .notas {
    gap: 0;
  }
  .nota {
    position: relative;
    min-height: 100%;
    padding-bottom: .35rem;
  }
  .nota:first-child {
    padding-right: clamp(1.75rem, 4vw, 3.5rem);
  }
  .nota + .nota {
    padding-left: clamp(1.75rem, 4vw, 3.5rem);
    border-left: 1px solid var(--line);
  }
  .nota::after {
    content: "→";
    position: absolute;
    top: clamp(1.4rem, 2.6vw, 2rem);
    right: 0;
    color: var(--bone-38);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .3s var(--ease), transform .4s var(--ease-out), color .3s var(--ease);
  }
  .nota:first-child::after {
    right: clamp(1.75rem, 4vw, 3.5rem);
  }
  .nota:hover::after,
  .nota:focus-visible::after {
    opacity: 1;
    color: var(--brass-hi);
    transform: translateX(0);
  }
}

/* Los campos oscuros necesitaban una referencia ligeramente más nítida. */
.field input,
.field select,
.field textarea {
  border-bottom-color: rgba(237, 234, 226, .15);
}
.field input::placeholder,
.field textarea::placeholder {
  color: rgba(237, 234, 226, .26);
}

/* El pie cierra la composición con una franja apenas más profunda. */
.foot {
  background: rgba(6, 10, 7, .18);
}

@media (max-width: 700px) {
  .nota + .nota {
    margin-top: 1.6rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--line);
  }
}