/* ===========================================================================
   TIPOGRAFÍAS AUTOALOJADAS
   Switzer lleva ahora TODO el peso: display, cuerpo y UI. Es el movimiento
   central del rediseño — una sola voz en muchos pesos, como hace Apple con
   SF Pro. La jerarquía la cargan la escala, el espacio y el tracking, no el
   cambio de familia.
   Zodiak (serif) queda relegada a dos usos ceremoniales: el nombre de marca y
   las citas destacadas. Ahí su carácter editorial suma; en los titulares
   convertía la web en un archivo histórico.
   Se sirven desde el propio dominio: ninguna petición sale a un tercero
   (LG München I, 20-01-2022, 3 O 17493/20).
   =========================================================================== */

@font-face {
  font-family: 'Switzer';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/switzer-variable-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Switzer';
  font-style: italic; font-weight: 100 900; font-display: swap;
  src: url('../fonts/switzer-variable-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Zodiak';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/zodiak-variable-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Zodiak';
  font-style: italic; font-weight: 100 900; font-display: swap;
  src: url('../fonts/zodiak-variable-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('../fonts/jetbrains-mono-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('../fonts/jetbrains-mono-normal-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ===========================================================================
   THEMIS LEX — Sistema de diseño v2
   Dirección: «Estudio, no bufete». Luz de mediodía sobre papel cálido.

   Los tres colores salen del logotipo, medidos sobre el PNG, no inventados:
     · azul pizarra #385070 — el cuerpo del Pegaso. Pasa a ser el acento.
     · oro          #B8935A — el arco y la balanza. Pasa a ser METAL.
     · crema        #F4F1EC — el fondo del propio emblema.

   El cambio de fondo respecto a v1: el oro sobre claro no alcanza 4,5:1
   (2,74:1 medido), así que no puede portar acción ni texto. El azul sí
   (7,90:1). El oro se queda donde sí funciona: filetes de 1px, el emblema y
   los remates. Es joya, no pintura.
   =========================================================================== */

:root {
  /* --- Neutros (70-90% de los píxeles) --- */
  --bg:            #FBFAF8;   /* papel cálido. Nunca #fff a página completa */
  --surface:       #FFFFFF;   /* la hoja: tarjetas y campos */
  --surface-alt:   #F4F1EC;   /* pergamino: bandas alternas */
  --surface-sunk:  #EDE9E2;   /* la mesa: bajo la hoja */
  --fg:            #16181C;   /* tinta. 17,0:1 sobre --bg. Nunca #000 */
  --fg-soft:       #3A414B;   /* 10,3:1 — cuerpo de lectura larga */
  --muted:         #5E6570;   /* 5,6:1 — texto secundario */
  --faint:         #626871;   /* 4,6:1 sobre la mesa, el fondo mas oscuro del
                                 sistema. Los kicker van a 11px y siguen siendo
                                 texto: tienen que superar 4,5:1 sobre CUALQUIER
                                 superficie, no solo sobre el papel. */
  --border:        rgba(22, 24, 28, 0.10);   /* contención decorativa */
  --border-mid:    rgba(22, 24, 28, 0.16);
  --border-ui:     #8F8C86;   /* 3,2:1 — SOLO bordes de control (WCAG 1.4.11) */

  /* --- Acento único (5-10%) --- */
  --accent:        #385070;   /* azul Pegaso. 7,9:1 sobre --bg */
  --accent-hover:  #2A3E58;   /* 10,4:1 */
  --accent-tint:   rgba(56, 80, 112, 0.07);
  --accent-ring:   rgba(56, 80, 112, 0.28);
  --on-accent:     #FFFFFF;   /* 8,2:1 sobre --accent */

  /* --- Metal de marca (<2% de los píxeles, nunca texto de cuerpo) --- */
  --gold:          #B8935A;   /* filetes, remates, el emblema. 2,7:1: no es texto */
  --gold-ink:      #7E602C;   /* 5,6:1 — la única variante que SÍ puede ser texto */

  /* --- Semánticos (<5%) --- */
  --danger:        #B4392F;   /* 5,6:1 */
  --success:       #2E7D5B;   /* 4,8:1 */

  /* --- Tipografía: una familia, tres pesos --- */
  --font-sans:  'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'Zodiak', 'Iowan Old Style', 'Charter', Georgia, serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Leer 400 · enfatizar 500 · anunciar 600. El display baja a 300: la
     jerarquía la hacen la escala y el aire, no la masa. */
  --w-leer:      400;
  --w-enfasis:   500;
  --w-anuncio:   600;
  --w-display:   300;

  /* --- Ritmo vertical --- */
  --s-1: 0.5rem;
  --s-2: 0.75rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: 4.5rem;
  --s-8: 7rem;
  --s-9: 10rem;

  /* --- Escala de radios POR CLASE DE COMPONENTE ---
     v1 tenía 3px en todo: austero, institucional, de impreso oficial. Apple
     nunca usa un radio único; usa niveles. Este es el marcador visual más
     barato de «software contemporáneo». */
  --r-xs:   6px;    /* insignias, marcadores en línea */
  --r-sm:   10px;   /* campos de formulario, botones secundarios */
  --r-md:   16px;   /* tarjetas, avisos, bloques contenidos */
  --r-lg:   22px;   /* IMÁGENES en columna, figuras */
  --r-xl:   30px;   /* módulos grandes, medios de portada */
  --r-full: 999px;  /* CTA primario, chips, controles circulares */

  /* --- Profundidad: capas tonales y sombras suaves, nunca pesadas --- */
  --sh-xs: 0 1px 2px rgba(22, 24, 28, 0.05);
  --sh-sm: 0 2px 8px rgba(22, 24, 28, 0.055);
  --sh-md: 0 10px 28px rgba(22, 24, 28, 0.07);
  --sh-lg: 0 24px 60px rgba(46, 38, 26, 0.10);   /* teñida de cálido */

  --ancho:       1160px;
  --ancho-texto: 66ch;
  --nav-h:       76px;

  /* --- Movimiento: 150ms confirma estado, 300ms entra un elemento --- */
  --t-rapida:  150ms cubic-bezier(0.2, 0, 0, 1);
  --t-entrada: 300ms cubic-bezier(0.2, 0, 0, 1);
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--fg-soft);
  font-family: var(--font-sans);
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.6;
  font-weight: var(--w-leer);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

/* v1 llevaba grano + viñeta fijos para dar materia al carbón. En claro sobran
   los dos: el papel ya tiene temperatura y la viñeta ensuciaría el aire, que
   es justo lo que aquí hace el trabajo. */

/* === Tipografía ===
   Una sola familia. El salto entre display y cuerpo es de ~5x, que es la
   firma editorial; entre niveles adyacentes nunca baja de 1,25x. */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  color: var(--fg);
  line-height: 1.1;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.display, h1 { font-weight: var(--w-display); }
h2 { font-weight: var(--w-display); }
h3 { font-weight: var(--w-enfasis); }

.display {
  font-size: clamp(2.6rem, 5.4vw, 4.5rem);    /* hasta 72px: 4,2x el cuerpo */
  letter-spacing: -0.038em;
  line-height: 1.0;
}
h1 { font-size: clamp(2.3rem, 4.8vw, 3.6rem); letter-spacing: -0.032em; }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.6rem); letter-spacing: -0.028em; }
h3 {
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.016em;
}

p { max-width: var(--ancho-texto); }
p + p { margin-top: var(--s-3); }
strong, b { font-weight: var(--w-anuncio); color: var(--fg); }
em, i { font-style: italic; }

/* Kicker: mono, versales. Tracking positivo obligatorio (>=0.06em): las
   versales sin tracking se leen apretadas y aficionadas. */
.kicker {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--faint);
}
.kicker--oro { color: var(--gold-ink); }
.kicker--azul { color: var(--accent); }

.entradilla {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: var(--muted);
  line-height: 1.55;
  font-weight: var(--w-leer);
  letter-spacing: -0.006em;
}

.nota {
  font-size: 0.8125rem;
  letter-spacing: 0.008em;
  color: var(--faint);
  line-height: 1.55;
}

/* === Foco visible: nunca se elimina (WCAG 1.4.11 + 2.4.7) === */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-4);
  font-weight: var(--w-anuncio);
  text-decoration: none;
}
.saltar:focus { left: var(--s-3); top: var(--s-3); }

/* === Estructura === */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--s-4);
}

/* Cadencia: las secciones NO respiran igual. Alternar compresión y expansión
   es lo que distingue una composición de una lista de bloques apilados. */
.seccion { padding-block: var(--s-6); }
.seccion--densa  { padding-block: var(--s-5); }
.seccion--amplia { padding-block: var(--s-7); }
.seccion--alterna { background: var(--surface-alt); }

@media (min-width: 900px) {
  .seccion         { padding-block: var(--s-8); }
  .seccion--densa  { padding-block: var(--s-6); }
  .seccion--amplia { padding-block: var(--s-9); }
}

.regla { border: 0; border-top: 1px solid var(--border); }

/* El filete de oro: la firma de marca. 1px, 72px de ancho, sobre el kicker.
   Es el único sitio donde el metal aparece sin el emblema. */
.filete-oro {
  display: block;
  width: 64px;
  height: 1px;
  background: var(--gold);
  margin-bottom: var(--s-4);
}

.cabecera-seccion { margin-bottom: var(--s-7); max-width: 46rem; }
.cabecera-seccion .kicker { display: block; margin-bottom: var(--s-2); }
.cabecera-seccion p { margin-top: var(--s-4); }

/* === Navegación ===
   Barra translúcida con desenfoque sobre papel: es el cromo de utilidad de
   Apple. En claro funciona mucho mejor que en carbón porque el contenido se
   ve pasar por debajo sin ensuciarse. */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(251, 250, 248, 0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav__caja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--s-4);
}
.marca {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  text-decoration: none;
  color: var(--fg);
}
.marca img { width: 40px; height: 38px; }
/* El nombre de marca es el primero de los dos usos ceremoniales de la serif. */
.marca__nombre {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.3125rem;
  letter-spacing: 0.005em;
  line-height: 1;
}
.marca__sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  color: var(--faint);
  margin-top: 3px;
}

.nav__enlaces {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  list-style: none;
}
.nav__enlace {
  display: inline-block;
  padding: 0.5rem 0;
  font-size: 0.9375rem;
  font-weight: var(--w-enfasis);
  letter-spacing: -0.004em;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--t-rapida);
}
.nav__enlace:hover { color: var(--fg); }
/* El estado activo no viaja solo en color: lleva filete inferior. */
.nav__enlace[aria-current="page"] {
  color: var(--fg);
  box-shadow: inset 0 -1.5px 0 var(--accent);
}

.nav__boton {
  display: none;
  background: var(--surface);
  border: 1px solid var(--border-ui);
  border-radius: var(--r-sm);
  color: var(--fg);
  width: 46px;
  height: 42px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--t-rapida), background var(--t-rapida);
}
.nav__boton:hover { border-color: var(--fg); }

@media (max-width: 860px) {
  .nav__boton { display: inline-flex; }
  .nav__enlaces {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-2) var(--s-4) var(--s-4);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--sh-md);
  }
  .nav__enlaces[hidden] { display: none; }
  .nav__enlace {
    padding: var(--s-3) 0;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--border);
  }
  .nav__enlace[aria-current="page"] { box-shadow: none; color: var(--accent); }
}

/* === Botones ===
   El CTA primario va en cápsula: es la geometría de acción que el ojo
   reconoce como «pulsable» sin leer. Área táctil 48px, por encima del suelo
   AA de 24px (WCAG 2.5.8) y del listón AAA de 44px. */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.8125rem 1.625rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: var(--w-anuncio);
  letter-spacing: -0.006em;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-rapida), border-color var(--t-rapida),
              color var(--t-rapida), transform var(--t-rapida),
              box-shadow var(--t-rapida);
}
.boton:active { transform: translateY(1px); }

.boton--primario {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--sh-sm);
}
.boton--primario:hover { background: var(--accent-hover); box-shadow: var(--sh-md); }

.boton--fantasma {
  background: var(--surface);
  color: var(--fg);
  border-color: var(--border-ui);
}
.boton--fantasma:hover { border-color: var(--fg); }

.boton[disabled], .boton[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.boton__icono { width: 17px; height: 17px; flex: none; }

/* === Hero ===
   v1 apilaba texto sobre una foto oscura con un velo de dos gradientes. En
   claro eso no funciona: el texto va sobre papel y la imagen se convierte en
   una pieza de 30px de radio a su lado. Es la composición de una página de
   producto, no la de un cartel. */
.hero {
  position: relative;
  padding-block: var(--s-7) var(--s-5);
  overflow: hidden;
}
/* El pie del hero y el techo de la sección siguiente se SUMAN. Con 72px + 160px
   se abría un vacío de 232px en escritorio que se leía como un fallo, no como
   respiración. La sección que va detrás del hero renuncia a su techo completo. */
.hero + .seccion { padding-top: var(--s-6); }
@media (min-width: 900px) {
  .hero { padding-block: var(--s-7) var(--s-5); }
  .hero + .seccion { padding-top: var(--s-8); }
}
.hero__caja {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--s-4);
  display: grid;
  gap: var(--s-6);
  align-items: center;
}
/* El titular de portada es largo (77 caracteres). Con 1,15fr caía a cinco
   líneas y rompía por sitios malos («IA que uso los / he escrito yo»).
   1,3fr le da el ancho justo para cuatro líneas con cortes de sintagma. */
@media (min-width: 980px) {
  .hero__caja { grid-template-columns: 1.3fr 0.7fr; gap: var(--s-7); }
}
.hero__texto { max-width: 44rem; }
.hero .kicker { display: block; margin-bottom: var(--s-3); }
.hero .display { margin-bottom: var(--s-4); }
.hero .entradilla { max-width: 34rem; }
.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
}

/* El medio del hero: la hoja sobre la mesa. Radio grande, sombra tonal larga
   y ningún borde: la separación la hace la elevación, no un filete. */
.hero__medio {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  background: var(--surface-sunk);
}
.hero__medio img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
@media (max-width: 979px) {
  .hero__medio img { aspect-ratio: 16 / 10; }
}

/* Resplandor cálido detrás del medio: profundidad tonal, no decoración.
   Sustituye a la viñeta de v1, que en claro no tenía sentido. */
.hero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  max-width: 780px;
  max-height: 780px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 147, 90, 0.10) 0%, rgba(184, 147, 90, 0) 65%);
  pointer-events: none;
  z-index: 0;
}

/* === Rejillas === */
.rejilla { display: grid; gap: var(--s-4); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }

/* Asimetría deliberada: 7/5, no 6/6. */
.dos-columnas {
  display: grid;
  gap: var(--s-6);
  align-items: start;
}
@media (min-width: 900px) {
  .dos-columnas { grid-template-columns: 1.35fr 1fr; gap: var(--s-7); }
  .dos-columnas--invertida { grid-template-columns: 1fr 1.35fr; }
}

/* === Tarjetas ===
   La hoja blanca sobre papel. La elevación es la señal de agrupación (Ley de
   la Región Común); el borde es solo un remate de 1px al 10%.
   Prohibido el cliché «tarjeta redondeada con borde-izquierdo de color». */
.tarjeta {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  transition: box-shadow var(--t-entrada), transform var(--t-entrada);
}
.tarjeta--caja { /* alias heredado de v1: mismo tratamiento */ }
.seccion--alterna .tarjeta { background: var(--surface); }
.tarjeta h3 { margin-bottom: var(--s-2); }
.tarjeta p { color: var(--muted); font-size: 0.9375rem; }

.tarjeta-enlace {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.tarjeta-enlace:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }

/* Tarjeta de bifurcación a ancho completo. Razón: p tiene max-width 66ch para
   proteger la medida de lectura, así que a ancho completo dejaría media
   tarjeta vacía. Se reparte en dos columnas y en móvil se apila sola. */
.tarjeta--ancha { padding: var(--s-6); }
.tarjeta--ancha .tarjeta-enlace__pie { margin-top: var(--s-4); }
@media (min-width: 820px) {
  .tarjeta--ancha {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--s-6);
    align-items: center;
  }
}
.tarjeta-enlace__pie {
  margin-top: auto;
  padding-top: var(--s-4);
  font-size: 0.8125rem;
  font-weight: var(--w-anuncio);
  letter-spacing: -0.004em;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.tarjeta-enlace__pie svg { width: 15px; height: 15px; transition: transform var(--t-rapida); }
.tarjeta-enlace:hover .tarjeta-enlace__pie svg { transform: translateX(3px); }

/* Numeral de área: mono, azul, tabular. Es el ancla de escaneo. */
.area__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Destino de anclas: la barra superior es fija, así que el título tiene que
   dejarle sitio al saltar. */
.cabecera-seccion h2[id] { scroll-margin-top: calc(var(--nav-h) + var(--s-5)); }

/* === Área de práctica (ficha larga) === */
.area {
  scroll-margin-top: calc(var(--nav-h) + var(--s-4));
  padding-block: var(--s-7);
  border-top: 1px solid var(--border);
}
.area__imagen {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
}
.area__imagen img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.lista-marcada {
  list-style: none;
  margin-top: var(--s-3);
  display: grid;
  gap: var(--s-2);
}
.lista-marcada li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.9375rem;
  color: var(--muted);
}
.lista-marcada li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 9px;
  height: 1px;
  background: var(--gold);
}

/* Bloque «para quién»: región común diferenciada, sin borde-izquierdo de color. */
.para-quien {
  margin-top: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: var(--surface-alt);
}
.seccion--alterna .para-quien { background: var(--surface); }
.para-quien .kicker { display: block; margin-bottom: var(--s-2); }
.para-quien p { font-size: 0.9375rem; color: var(--muted); }

/* === Cita destacada ===
   Segundo y último uso ceremonial de la serif. Es tipográfica: sin caja, sin
   fondo, sin filete. Peso light, tracking ligeramente negativo, mucho aire. */
.cita {
  border: 0;
  padding-block: var(--s-6);
}
.cita blockquote {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.16;
  letter-spacing: -0.018em;
  color: var(--fg);
  max-width: 20rem;
  text-wrap: balance;
}
.cita figcaption {
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--faint);
}

/* === Trayectoria === */
.hitos { list-style: none; }
.hito {
  display: grid;
  gap: var(--s-1) var(--s-5);
  padding-block: var(--s-4);
  border-top: 1px solid var(--border);
}
@media (min-width: 760px) {
  .hito { grid-template-columns: 9rem 1fr; align-items: baseline; }
}
.hito__ano {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.hito h3 { font-size: 1.125rem; margin-bottom: 0.375rem; }
.hito p { color: var(--muted); font-size: 0.9375rem; }

/* Trayectoria plegada: sigue en el HTML servido y en el schema — Google y los
   agentes de IA la leen igual — pero deja de ser un muro delante del cliente. */
.plegable {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.plegable > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  min-height: 48px;
  cursor: pointer;
  list-style: none;
  font-size: 1.0625rem;
  font-weight: var(--w-enfasis);
  color: var(--fg);
  letter-spacing: -0.012em;
  transition: color var(--t-rapida);
}
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary:hover { color: var(--accent); }
.plegable > summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-right: 1.6px solid var(--muted);
  border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg);
  transition: transform var(--t-rapida);
}
.plegable[open] > summary::after { transform: rotate(-135deg); }
.plegable__cuerpo { padding-bottom: var(--s-5); }

/* === Credenciales: ficha de datos, no prosa ===
   Presentar la acreditación como dato tabular en lugar de como párrafo es lo
   que separa «acreditar» (permitido) de «autoalabanza» (Cód. Deont. art. 8). */
.credenciales {
  list-style: none;
  display: grid;
  gap: var(--s-3);
}
@media (min-width: 760px) { .credenciales { grid-template-columns: repeat(3, 1fr); } }
.credencial {
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
}
.seccion--alterna .credencial { background: var(--surface); }
.credencial strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: var(--w-anuncio);
  letter-spacing: -0.014em;
  color: var(--fg);
  margin-bottom: 0.375rem;
}
.credencial span { font-size: 0.875rem; color: var(--muted); line-height: 1.5; }

/* === Formulario === */
.formulario { display: grid; gap: var(--s-4); max-width: 34rem; }
.campo { display: grid; gap: 0.4375rem; }
.campo label {
  font-size: 0.875rem;
  font-weight: var(--w-anuncio);
  letter-spacing: -0.004em;
  color: var(--fg);
}
.campo label .opcional {
  font-weight: var(--w-leer);
  color: var(--faint);
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.9375rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border-ui);   /* 3,2:1 — el borde ES el control */
  border-radius: var(--r-sm);
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
.campo textarea { min-height: 8.5rem; resize: vertical; line-height: 1.55; }
.campo input:hover,
.campo textarea:hover,
.campo select:hover { border-color: var(--fg); }
.campo input:focus,
.campo textarea:focus,
.campo select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.campo input::placeholder,
.campo textarea::placeholder { color: var(--faint); }

/* El chrome de error solo aparece tras perder el foco o al enviar. */
.campo input:user-invalid,
.campo textarea:user-invalid,
.campo select:user-invalid,
.campo [aria-invalid="true"] { border-color: var(--danger); }

.ayuda { font-size: 0.8125rem; color: var(--faint); }
.error {
  display: none;
  font-size: 0.8125rem;
  color: var(--danger);
  font-weight: var(--w-enfasis);
  align-items: center;
  gap: 0.375rem;
}
.error svg { width: 14px; height: 14px; flex: none; }
.error:not(:empty) { display: flex; }

.consentimiento {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: var(--s-4);
  background: var(--surface-alt);
  border-radius: var(--r-md);
}
.consentimiento input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 0;
  margin-top: 2px;
  accent-color: var(--accent);
}
.consentimiento label { font-size: 0.875rem; font-weight: var(--w-leer); line-height: 1.5; }

/* Resumen de errores: destino de foco, sin role="alert" (evita doble anuncio). */
.resumen-errores {
  padding: var(--s-4);
  border: 1px solid var(--danger);
  border-radius: var(--r-md);
  background: rgba(180, 57, 47, 0.05);
}
.resumen-errores h2 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: var(--w-anuncio);
  letter-spacing: -0.008em;
}
.resumen-errores ul { margin-top: var(--s-2); padding-left: 1.125rem; font-size: 0.875rem; }

.aviso-envio {
  padding: var(--s-4);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 0.9375rem;
  box-shadow: var(--sh-xs);
}
.aviso-envio--ok { border-color: var(--success); }
.aviso-envio strong { display: block; margin-bottom: 0.25rem; }

/* === Prosa === */
.prosa { max-width: var(--ancho-texto); }
.prosa h2 { margin-top: var(--s-6); margin-bottom: var(--s-3); }
.prosa h3 {
  font-size: 1.0625rem;
  font-weight: var(--w-anuncio);
  letter-spacing: -0.008em;
  margin-top: var(--s-4);
  margin-bottom: var(--s-2);
}
.prosa p, .prosa li { color: var(--fg-soft); }
.prosa ul, .prosa ol { margin: var(--s-2) 0 var(--s-3) 1.25rem; display: grid; gap: 0.375rem; }
.prosa dl { display: grid; margin-top: var(--s-4); max-width: none; }
.prosa dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--faint);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}
.prosa dd {
  color: var(--fg);
  font-size: 0.9375rem;
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  margin: 0;
}
.prosa dd:last-of-type { padding-bottom: var(--s-3); border-bottom: 1px solid var(--border); }
@media (min-width: 720px) {
  .prosa dl { grid-template-columns: 16rem 1fr; column-gap: var(--s-5); }
  .prosa dt { padding-bottom: var(--s-3); }
  .prosa dd { padding-bottom: var(--s-3); }
  .prosa dt + dd { border-top: 1px solid var(--border); }
  .prosa dd:last-of-type { border-bottom: 0; }
}

.indice {
  list-style: none;
  position: sticky;
  top: calc(var(--nav-h) + var(--s-4));
  display: grid;
  gap: 0.625rem;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
}
.indice a { font-size: 0.875rem; color: var(--muted); text-decoration: none; }
.indice a:hover { color: var(--accent); }

/* === Pie === */
.pie {
  padding-block: var(--s-7) var(--s-5);
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
}
.pie__rejilla {
  display: grid;
  gap: var(--s-5);
  margin-bottom: var(--s-6);
}
@media (min-width: 760px) {
  .pie__rejilla { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--s-6); }
}
.pie h2 {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--faint);
  margin-bottom: var(--s-3);
}
.pie ul { list-style: none; display: grid; gap: 0.625rem; }
.pie a {
  font-size: 0.9375rem;
  color: var(--fg-soft);
  text-decoration: none;
  transition: color var(--t-rapida);
}
.pie a:hover { color: var(--accent); }
.pie address { font-style: normal; font-size: 0.9375rem; color: var(--muted); line-height: 1.7; }
.pie address strong { color: var(--fg); }
.pie__legal {
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  justify-content: space-between;
  align-items: center;
}
.pie__legal p { font-size: 0.8125rem; color: var(--faint); }

/* === Utilidades === */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.centrado { text-align: center; }
.apilar > * + * { margin-top: var(--s-3); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }

/* === Movimiento ===
   Una sola secuencia orquestada al cargar el hero. Nada de microinteracciones
   repartidas: un despliegue escalonado bien hecho da más que veinte efectos
   sueltos. Solo desplazamiento, sin desvanecido: si la animación no llegara a
   correr, el contenido sigue visible. Un CTA que depende de una animación
   para existir es un CTA roto. */
.revelar {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms cubic-bezier(0.2, 0, 0, 1),
              transform 420ms cubic-bezier(0.2, 0, 0, 1);
}
.revelar.visible { opacity: 1; transform: none; }

@keyframes entrar {
  from { transform: translateY(20px); }
  to   { transform: none; }
}
.hero__texto > * { animation: entrar 640ms cubic-bezier(0.2, 0, 0, 1) both; }
.hero__texto > :nth-child(1) { animation-delay: 60ms; }
.hero__texto > :nth-child(2) { animation-delay: 150ms; }
.hero__texto > :nth-child(3) { animation-delay: 260ms; }
.hero__texto > :nth-child(4) { animation-delay: 370ms; }
.hero__texto > :nth-child(5) { animation-delay: 460ms; }
.hero__texto > :nth-child(6) { animation-delay: 550ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* No se pone `animation: none`: la regla global de arriba ya reduce a 0,01ms,
     que es lo que preserva el disparo de `transitionend` / `animationend`.
     Movimiento reducido significa reducir, no apagar (informe 05 §6). */
  .revelar { opacity: 1; transform: none; }
}

@media print {
  .nav, .pie, .boton, .hero__medio { display: none; }
  body { background: #fff; color: #111; }
  .tarjeta, .credencial { box-shadow: none; border: 1px solid #ccc; }
}

/* ===========================================================================
   COMPONENTES DE PÁGINA INTERIOR
   =========================================================================== */

/* Enlaces de contenido: azul Pegaso con subrayado atenuado. En v1 iban en
   color de texto porque el oro estaba ocupado como acento; ahora el acento
   puede hacer su trabajo real, que es señalar lo pulsable. */
main p a, .credencial a, .hito a, .lista-marcada a, .faq__cuerpo a, .plazos a,
.prosa a, main :where(a:not([class])) {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(56, 80, 112, 0.32);
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--t-rapida);
}
main p a:hover, .credencial a:hover, .hito a:hover, .lista-marcada a:hover,
.faq__cuerpo a:hover, .plazos a:hover, .prosa a:hover,
main :where(a:not([class]):hover) { text-decoration-color: var(--accent); }

/* Marcador honesto para un dato que aún no existe. Nunca se inventa. */
.pendiente {
  font-family: var(--font-mono);
  font-size: 0.8em;
  letter-spacing: 0.05em;
  padding: 0.15em 0.5em;
  border: 1px dashed var(--border-ui);
  border-radius: var(--r-xs);
  color: var(--faint);
}

/* === Migas de pan === */
.migas { padding-block: var(--s-4) 0; }
.migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--faint);
}
.migas a { color: var(--faint); text-decoration: none; }
.migas a:hover { color: var(--accent); }
.migas li + li::before { content: "/"; margin-right: 0.5rem; opacity: 0.5; }
.migas [aria-current="page"] { color: var(--fg); }

/* === Cabecera de página interior === */
.portada {
  padding-block: var(--s-6) var(--s-7);
  border-bottom: 1px solid var(--border);
}
.portada .kicker { display: block; margin-bottom: var(--s-3); }
.portada h1 { max-width: 30rem; }
.portada .entradilla { margin-top: var(--s-4); max-width: 58ch; }
.portada__medios {
  margin-top: var(--s-6);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
  background: var(--surface);
}
.portada__medios img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.portada__medios figcaption {
  padding: var(--s-3) var(--s-4);
  font-size: 0.8125rem;
  color: var(--faint);
  border-top: 1px solid var(--border);
}

/* Respuesta directa: lo que un motor generativo extrae y cita literalmente.
   Lidera por escala y aire, no por contenedor — nada de radio + borde
   izquierdo de color + fondo tintado, que es la forma canónica del «mosaico
   de dashboard de IA». */
.respuesta-directa {
  padding-block: var(--s-3);
  border-block: 1px solid var(--border);
}
.respuesta-directa p {
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.5;
  color: var(--fg);
  max-width: 54ch;
  letter-spacing: -0.01em;
}
.respuesta-directa p + p { margin-top: var(--s-3); }

/* === Proceso numerado === */
.proceso { list-style: none; counter-reset: paso; display: grid; gap: 0; }
.proceso li {
  counter-increment: paso;
  position: relative;
  padding: var(--s-4) 0 var(--s-4) 3.75rem;
  border-top: 1px solid var(--border);
}
.proceso li::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: calc(var(--s-4) + 0.15em);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.proceso h3 { font-size: 1.125rem; margin-bottom: 0.375rem; }
.proceso p { color: var(--muted); font-size: 0.9375rem; }

/* === Plazos: dato duro, citable y con fuente === */
.plazos {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin-top: var(--s-4);
}
.plazos caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--faint);
  padding-bottom: var(--s-3);
}
.plazos th, .plazos td {
  text-align: left;
  padding: 0.8125rem 1rem 0.8125rem 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.plazos thead th {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--faint);
  border-bottom-color: var(--border-mid);
}
.plazos tbody th { font-weight: var(--w-enfasis); color: var(--fg); padding-right: var(--s-4); }
.plazos td { color: var(--muted); }
.plazos .cifra {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-weight: 500;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .plazos, .plazos tbody, .plazos tr, .plazos td, .plazos th { display: block; }
  .plazos thead { display: none; }
  .plazos tr { padding-block: var(--s-3); border-bottom: 1px solid var(--border); }
  .plazos th, .plazos td { border: 0; padding: 0.2rem 0; }
}

/* === Preguntas frecuentes === */
.faq { display: grid; gap: 0; }
.faq__item { border-top: 1px solid var(--border); }
.faq__item:last-child { border-bottom: 1px solid var(--border); }
.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  min-height: 48px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: var(--w-enfasis);
  color: var(--fg);
  line-height: 1.35;
  letter-spacing: -0.012em;
  transition: color var(--t-rapida);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  margin-top: 0.4em;
  border-right: 1.6px solid var(--muted);
  border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg);
  transition: transform var(--t-rapida);
}
.faq__item[open] summary::after { transform: rotate(-135deg); }
.faq__item summary:hover { color: var(--accent); }
.faq__cuerpo { padding-bottom: var(--s-4); }
.faq__cuerpo p, .faq__cuerpo li { color: var(--muted); font-size: 0.9375rem; max-width: 66ch; }
.faq__cuerpo p + p { margin-top: var(--s-2); }
.faq__cuerpo ul { margin: var(--s-2) 0 0 1.125rem; display: grid; gap: 0.375rem; }

/* === Honorarios ===
   El precio es la demanda nº1 del cliente (58% → 61,6% año tras año,
   Martindale-Avvo). Va como cifra grande y sola, con la unidad debajo en
   mono: se lee de un vistazo sin entrar en la letra pequeña. */
.tarifa {
  display: grid;
  gap: var(--s-3);
  align-content: start;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
}
.tarifa__precio {
  font-family: var(--font-sans);
  font-weight: var(--w-display);
  font-size: 2.75rem;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--fg);
}
.tarifa__precio small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--faint);
  margin-top: 0.625rem;
}
.tarifa__desde {
  font-size: 0.5em;
  font-weight: var(--w-enfasis);
  letter-spacing: -0.01em;
  color: var(--faint);
  margin-right: 0.15em;
}
.tarifa p { font-size: 0.9375rem; color: var(--muted); }
.tarifa ul { margin-left: 1.125rem; display: grid; gap: 0.375rem; font-size: 0.9375rem; color: var(--muted); }
/* El filete de oro remata la tarjeta destacada. Único uso de metal por vista. */
.tarifa--destacada { border-top: 2px solid var(--gold); }

/* === Retrato === */
.retrato {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--sh-md);
}
.retrato img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.retrato__hueco {
  aspect-ratio: 4 / 5;
  display: grid;
  place-content: center;
  gap: var(--s-2);
  text-align: center;
  padding: var(--s-5);
  margin: var(--s-2);
  border: 1px dashed var(--border-ui);
  border-radius: var(--r-md);
  background: var(--surface-alt);
}
.retrato__hueco svg { width: 34px; height: 34px; margin-inline: auto; color: var(--faint); }
.retrato__hueco p { font-size: 0.8125rem; color: var(--faint); max-width: 26ch; margin-inline: auto; }
.retrato figcaption {
  padding: var(--s-3) var(--s-4);
  font-size: 0.8125rem;
  color: var(--faint);
  border-top: 1px solid var(--border);
}

/* === Firma de autoría y fecha de revisión (E-E-A-T) === */
.firma {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--muted);
}
.firma img { width: 38px; height: 37px; flex: none; }
.firma strong { color: var(--fg); font-weight: var(--w-anuncio); }
.firma time { font-family: var(--font-mono); letter-spacing: 0.03em; }

/* === Aviso de plazo (una sola vez por página, nunca decorativo) === */
.aviso-plazo {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: var(--accent-tint);
}
.aviso-plazo svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--accent); }
.aviso-plazo p { font-size: 0.9375rem; color: var(--fg-soft); }
.aviso-plazo strong { color: var(--fg); }

/* === Transición entre páginas (Baseline desde octubre de 2025) === */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ---------------------------------------------------------------------------
   Banda de imagen.
   En v1 iba a sangre completa y con velo, porque el fondo era carbón y la foto
   tenía que fundirse con él. En claro se comporta al revés: es una pieza
   contenida, con radio grande y elevación, que respira dentro del contenedor.
   --------------------------------------------------------------------------- */
.banda {
  position: relative;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--s-4);
  padding-block: var(--s-5);
}
.banda picture {
  display: block;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-md);
}
.banda img {
  width: 100%;
  height: clamp(220px, 32vw, 400px);
  object-fit: cover;
  object-position: center 55%;
}
.banda figcaption {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--faint);
}

/* Imagen de apoyo dentro de una columna. */
.figura { margin-top: var(--s-5); }
.figura img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.figura figcaption {
  margin-top: var(--s-3);
  font-size: 0.8125rem;
  color: var(--faint);
}

/* ---------------------------------------------------------------------------
   Capítulo: marca de sección para textos muy largos (legal).
   --------------------------------------------------------------------------- */
.capitulo {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--s-4);
  margin-top: var(--s-8);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-mid);
  scroll-margin-top: calc(var(--nav-h) + var(--s-4));
}
.capitulo:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.capitulo__num {
  font-family: var(--font-sans);
  font-weight: var(--w-display);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--border-ui);
  font-variant-numeric: lining-nums;
}
.capitulo h2 { margin: 0; }

/* ---------------------------------------------------------------------------
   Línea de tiempo del procedimiento.
   Es una <ol> de verdad: se lee igual en un lector de pantalla y en un
   rastreador que no ejecuta JavaScript. El dibujo lo pone el CSS.
   --------------------------------------------------------------------------- */
.linea-tiempo {
  list-style: none;
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-5);
  counter-reset: hito;
}
@media (min-width: 860px) {
  .linea-tiempo { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
}
.linea-tiempo li {
  counter-increment: hito;
  position: relative;
  padding-top: var(--s-5);
  padding-right: var(--s-4);
}
.linea-tiempo li::before {
  content: "";
  position: absolute;
  top: 9px; left: 0; right: 0;
  height: 1px;
  background: var(--border-mid);
}
.linea-tiempo li:last-child::before { right: auto; width: 9px; }
.linea-tiempo li::after {
  content: "";
  position: absolute;
  top: 5px; left: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border-ui);
}
.seccion--alterna .linea-tiempo li::after { background: var(--surface-alt); }
/* El hito con plazo lleva nodo lleno: es donde corre el reloj. */
.linea-tiempo li[data-plazo]::after { background: var(--accent); border-color: var(--accent); }

.linea-tiempo__fase {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--faint);
  margin-bottom: 0.5rem;
}
.linea-tiempo h3 { font-size: 1rem; line-height: 1.3; margin-bottom: 0.375rem; }
.linea-tiempo p { font-size: 0.875rem; color: var(--muted); max-width: 30ch; }
.linea-tiempo__plazo {
  display: inline-block;
  margin-top: 0.625rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}