/* ==========================================================================
   valor-de-referencia-catastral.com
   Sistema visual — despacho boutique / editorial económica
   --------------------------------------------------------------------------
   PRINCIPIOS
   · Fondos claros (marfil / piedra). El oscuro es excepcional, no decorativo.
   · Filetes de 1px antes que tarjetas. Sombras: prácticamente ninguna.
   · Jerarquía por tipografía y espacio, no por tamaño ni por color.
   · Radio 2px. Nada de píldoras, glassmorphism ni degradados de color.
   · Movimiento solo cuando comunica algo.

   ÍNDICE
   1. Tokens          6. Composición editorial
   2. Reset y base    7. Datos y tablas
   3. Tipografía      8. Formularios
   4. Estructura      9. Árbol de decisión
   5. Cabecera       10. Pie · 11. Utilidades · 12. Responsive · 13. Impresión
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* --- Neutros: marfil y piedra --- */
  --paper:       #fcfbf8;   /* fondo principal, blanco roto */
  --paper-warm:  #f7f5f0;
  --stone:       #f2efe9;   /* secciones alternas */
  --stone-deep:  #eae6dd;
  --sand:        #e8e2d6;   /* bloques cálidos destacados */
  --sand-soft:   #f4f0e8;

  /* --- Corporativo: azul petróleo desaturado --- */
  --petrol-900:  #15302f;
  --petrol-800:  #1b3c3a;
  --petrol-700:  #234b49;   /* color de marca */
  --petrol-600:  #2f605d;
  --petrol-500:  #3d7370;
  --petrol-100:  #dfe8e6;
  --petrol-050:  #eef3f2;

  /* --- Salvia, en dosis mínimas --- */
  --sage:        #7e9384;
  --sage-soft:   #e3e9e2;

  /* --- Tinta --- */
  --ink:         #16211f;
  --ink-soft:    #33403d;
  --muted:       #6b7773;
  --muted-light: #949e9a;

  /* --- Líneas --- */
  --line:        #e3ded4;
  --line-strong: #cec8ba;
  --line-dark:   rgba(255, 255, 255, 0.14);

  /* --- Semánticos, deliberadamente apagados --- */
  --ok:        #3f6b4f;
  --ok-bg:     #eaf0ea;
  --alert:     #8a5c2b;
  --alert-bg:  #f7f0e5;
  --stop:      #8c4038;
  --stop-bg:   #f7ebe9;

  /* --- Tipografía ---
     Pilas del sistema: cero peticiones externas, cero problema de RGPD.
     Para sustituirlas por fuentes propias, ver el bloque @font-face
     comentado al final de este archivo. */
  --font-serif: "Iowan Old Style", "Hoefler Text", "Palatino Linotype",
                Palatino, "Book Antiqua", Georgia, serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* --- Escala tipográfica: contenida, editorial --- */
  --fs-xs:   0.775rem;
  --fs-sm:   0.885rem;
  --fs-base: 1.0625rem;
  --fs-md:   clamp(1.09rem, 0.3vw + 1.02rem, 1.19rem);
  --fs-lg:   clamp(1.24rem, 0.5vw + 1.12rem, 1.42rem);
  --fs-xl:   clamp(1.5rem,  0.9vw + 1.3rem,  1.85rem);
  --fs-2xl:  clamp(1.8rem,  1.5vw + 1.4rem,  2.4rem);
  --fs-3xl:  clamp(2.1rem,  2.2vw + 1.55rem, 3rem);

  /* --- Espaciado ---
     Los tres últimos escalones marcan el ritmo vertical de la página. Se
     reducen en el bloque responsive: en una pantalla estrecha, el mismo hueco
     en píxeles se percibe mucho más grande y deja la página llena de vacíos. */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;
  --sp-4: 1rem;    --sp-5: 1.5rem;  --sp-6: 1.9rem;
  --sp-7: 2.5rem;  --sp-8: 3.5rem;  --sp-9: 4.5rem;

  --radius: 2px;
  --container: 1140px;
  --container-narrow: 720px;
  --container-wide: 1280px;
  --header-h: 74px;
}

/* ==========================================================================
   2. RESET Y BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  /* El menú móvil off-canvas es `position: fixed` y queda fuera de la ventana.
     `clip` recorta sin crear contenedor de scroll, así `sticky` sigue vivo. */
  overflow-x: clip;
}
@supports not (overflow-x: clip) { html { overflow-x: hidden; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Sin overflow-x aquí: rompería `position: sticky`. */
}

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

::selection { background: var(--sand); color: var(--petrol-900); }

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

/* Los elementos que reciben el foco por programa (para que los lectores de
   pantalla anuncien el cambio de paso) no deben mostrar recuadro visible. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible { outline: none; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--petrol-800); color: #fff;
  padding: var(--sp-3) var(--sp-4);
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   3. TIPOGRAFÍA
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--petrol-900);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.011em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); line-height: 1.12; letter-spacing: -0.018em; }
h2 { font-size: var(--fs-2xl); margin-top: var(--sp-7); }
h3 { font-size: var(--fs-lg); margin-top: var(--sp-6); }
h4 { font-size: var(--fs-md); margin-top: var(--sp-5); font-weight: 650; }
h2:first-child, h3:first-child, h4:first-child { margin-top: 0; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--petrol-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong);
  transition: color .15s ease, text-decoration-color .15s ease;
}
a:hover { color: var(--petrol-900); text-decoration-color: var(--petrol-600); }

strong, b { color: var(--ink); font-weight: 640; }

/* Etiqueta de sección: versalitas espaciadas, sin color chillón */
.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 640;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--sp-4);
}
.eyebrow--light { color: rgba(255,255,255,.62); }

.lead {
  font-size: var(--fs-md);
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 62ch;
}
.subhead { font-size: var(--fs-md); color: var(--muted); max-width: 64ch; }

/* Filete corto bajo los titulares de sección */
.rule {
  width: 42px; height: 1px;
  background: var(--petrol-700);
  border: 0;
  margin: 0 0 var(--sp-5);
}
.rule--center { margin-left: auto; margin-right: auto; }

blockquote {
  margin: var(--sp-6) 0;
  padding-left: var(--sp-5);
  border-left: 1px solid var(--petrol-700);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--petrol-900);
}

code {
  font-family: var(--font-mono);
  font-size: .89em;
  background: var(--stone);
  padding: .1em .35em;
}

.source {
  font-size: var(--fs-xs);
  color: var(--muted-light);
  letter-spacing: .01em;
}

/* ==========================================================================
   4. ESTRUCTURA
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }

.section { padding: var(--sp-9) 0; }
.section--tight { padding: var(--sp-8) 0; }
.section--alt   { background: var(--stone); }
.section--sand  { background: var(--sand-soft); }
.section--dark  { background: var(--petrol-900); color: #c3d0ce; }
.section--dark h1, .section--dark h2,
.section--dark h3, .section--dark h4 { color: #fff; }
.section--dark strong { color: #fff; }
.section--dark a { color: #cfdedb; text-decoration-color: rgba(255,255,255,.3); }
.section--dark a:hover { color: #fff; }
.section--dark .subhead { color: rgba(255,255,255,.66); }
.section--dark .rule { background: rgba(255,255,255,.4); }

/* Separación por filete en vez de por caja */
.section + .section:not(.section--alt):not(.section--dark):not(.section--sand) {
  border-top: 1px solid var(--line);
}

.section-head { max-width: 66ch; margin-bottom: var(--sp-7); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .subhead { margin-left: auto; margin-right: auto; }

.grid { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

/* Composición editorial: texto principal + margen */
.editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: start;
}
.editorial--wide { grid-template-columns: 1.4fr 1fr; }
.editorial--aside { grid-template-columns: 1fr .68fr; }

/* La columna de la izquierda empieza por una etiqueta pequeña y la de la
   derecha por texto grande. Sin compensar, el bloque de la derecha arranca a
   la altura de la etiqueta y parece descolgado del titular. Este desplazamiento
   lo baja hasta la línea del <h2>. */
.editorial--aside > :last-child {
  padding-top: calc(var(--fs-xs) * 1.35 + var(--sp-4));
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 244px;
  gap: var(--sp-8);
  align-items: start;
}

/* Sumario lateral */
.toc {
  position: sticky;
  top: calc(var(--header-h) + 28px);
  font-size: var(--fs-sm);
  border-top: 1px solid var(--ink);
  padding-top: var(--sp-4);
}
.toc h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 640;
  margin: 0 0 var(--sp-4);
}
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin-bottom: 1px; }
/* Acotado a la lista: si no, este estilo pisaba el color de los botones
   que van dentro del sumario y el texto quedaba ilegible sobre el fondo. */
.toc ol a {
  display: block;
  color: var(--muted);
  text-decoration: none;
  line-height: 1.4;
  padding: 5px 0 5px 11px;
  border-left: 1px solid var(--line);
  transition: color .15s ease, border-color .15s ease;
}
.toc ol a:hover { color: var(--ink); border-left-color: var(--line-strong); }
.toc ol a.is-active {
  color: var(--petrol-800);
  font-weight: 620;
  border-left-color: var(--petrol-700);
}

/* ==========================================================================
   5. CABECERA
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(252, 251, 248, .93);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
  transition: border-color .2s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line-strong); }

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

/* --- Logotipo --- */
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; flex-shrink: 0; }
.brand__mark { width: 30px; height: 30px; flex-shrink: 0; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--font-serif);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--petrol-900);
  letter-spacing: -.012em;
}
.brand__tag {
  font-size: .625rem;
  letter-spacing: .21em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 640;
  margin-top: 3px;
}

.nav__menu {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.nav__link {
  display: block;
  padding: 8px 11px;
  font-size: .905rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  position: relative;
  white-space: nowrap;
  transition: color .15s ease;
}
.nav__link:hover { color: var(--petrol-800); }
.nav__link[aria-current="page"] { color: var(--petrol-900); font-weight: 600; }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute; left: 11px; right: 11px; bottom: 0;
  height: 1px; background: var(--petrol-700);
}

.nav__actions { display: flex; align-items: center; gap: var(--sp-3); }

/* La llamada a la acción del menú solo existe en móvil */
.nav__cta { display: none; }

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  width: 42px; height: 38px;
  cursor: pointer;
  align-items: center; justify-content: center;
  color: var(--petrol-800);
  border-radius: var(--radius);
}

/* ==========================================================================
   6. COMPOSICIÓN EDITORIAL
   ========================================================================== */

/* --- Hero --- */
.hero {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-9) 0 var(--sp-8);
  position: relative;
}
.hero::after {
  /* Filete cálido a media altura: profundidad sin degradados */
  content: "";
  position: absolute; inset: auto 0 0 0; height: 46%;
  background: linear-gradient(to bottom, transparent, var(--paper-warm));
  z-index: 0;
}
.hero > .container { position: relative; z-index: 1; }
.hero__inner {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: var(--sp-8);
  align-items: center;
}
.hero h1 { margin-bottom: var(--sp-5); max-width: 15ch; }
.hero h1 em { font-style: italic; color: var(--petrol-700); }
.hero__lead { font-size: var(--fs-md); color: var(--ink-soft); max-width: 52ch; margin-bottom: var(--sp-6); line-height: 1.62; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; margin-bottom: var(--sp-6); }

.hero__meta {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.hero__meta span { position: relative; padding-left: 15px; }
.hero__meta span::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 5px; height: 5px; background: var(--sage);
}

/* Ficha documental del hero: parece un extracto real, no una tarjeta flotante */
.ficha {
  border: 1px solid var(--line-strong);
  background: var(--paper);
  padding: var(--sp-6);
}
.ficha__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--ink);
  margin-bottom: var(--sp-2);
}
.ficha__title {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: .17em;
  text-transform: uppercase;
  font-weight: 640;
  color: var(--muted);
  margin: 0;
}
.ficha__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}
.ficha__row:last-of-type { border-bottom: 0; }
.ficha__label { font-size: var(--fs-sm); color: var(--muted); }
.ficha__value { font-family: var(--font-serif); font-size: 1.24rem; color: var(--petrol-900); font-weight: 600; white-space: nowrap; }
.ficha__row--total { border-top: 1px solid var(--ink); border-bottom: 0; margin-top: var(--sp-2); padding-top: var(--sp-4); }
.ficha__row--total .ficha__label { color: var(--ink); font-weight: 640; }
.ficha__row--total .ficha__value { font-size: 1.5rem; color: var(--stop); }
.ficha__foot { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); }

/* --- Cabecera de página interior --- */
.page-hero {
  background: var(--stone);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-8) 0;
}
.page-hero h1 { margin-bottom: var(--sp-4); max-width: 20ch; }
.page-hero p { color: var(--ink-soft); max-width: 62ch; font-size: var(--fs-md); margin-bottom: 0; line-height: 1.6; }

.breadcrumb { font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--sp-5); letter-spacing: .04em; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.breadcrumb li::after { content: "/"; margin-left: 7px; color: var(--line-strong); }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--petrol-800); text-decoration: underline; }

/* --- Botones --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: var(--font-sans);
  font-size: .93rem;
  font-weight: 580;
  letter-spacing: .005em;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .17s ease, color .17s ease, border-color .17s ease;
}
.btn--primary { background: var(--petrol-700); color: #fff; border-color: var(--petrol-700); }
.btn--primary:hover { background: var(--petrol-900); border-color: var(--petrol-900); color: #fff; }

.btn--outline { background: transparent; color: var(--petrol-800); border-color: var(--line-strong); }
.btn--outline:hover { border-color: var(--petrol-700); background: var(--petrol-050); color: var(--petrol-900); }

.btn--light { background: #fff; color: var(--petrol-900); border-color: #fff; }
.btn--light:hover { background: var(--sand); border-color: var(--sand); color: var(--petrol-900); }

.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.07); color: #fff; }

.btn--sm { padding: 9px 17px; font-size: .855rem; }
.btn--lg { padding: 15px 32px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }

/* Enlace-acción discreto, alternativa al segundo botón */
.link-action {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .93rem; font-weight: 560;
  color: var(--petrol-800);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: border-color .17s ease, color .17s ease;
}
.link-action:hover { color: var(--petrol-900); border-bottom-color: var(--petrol-700); }
.link-action::after { content: "→"; transition: transform .17s ease; }
.link-action:hover::after { transform: translateX(3px); }

/* --- Bloques numerados (sustituyen a las tarjetas) --- */
.numbered { display: grid; gap: 0; }
.numbered__item {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: var(--sp-5);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--line);
}
.numbered__item:last-child { border-bottom: 1px solid var(--line); }
.numbered__n {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--muted-light);
  line-height: 1.1;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.numbered__item h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); }
.numbered__item p:last-child { margin-bottom: 0; }

/* --- Pasos de proceso ---
   Maquetado en bloque con el número posicionado en absoluto, no en rejilla:
   así funciona tanto si el contenido del <li> va envuelto en un <div> como si
   los elementos cuelgan sueltos del <li>. Con `display: grid` cada hijo suelto
   se convertía en celda y el texto se superponía al número. */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.steps > li {
  counter-increment: paso;
  position: relative;
  padding: var(--sp-6) 0 var(--sp-6) 62px;
  border-top: 1px solid var(--line);
}
.steps > li:last-child { border-bottom: 1px solid var(--line); }
.steps > li::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: calc(var(--sp-6) + .3em);
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--petrol-600);
}
.steps h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); }
.steps p:last-child { margin-bottom: 0; }
.step-meta {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 620;
  margin-bottom: 5px;
}

/* --- Notas al margen del texto --- */
.note {
  border-left: 1px solid var(--petrol-700);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  margin: var(--sp-6) 0;
}
.note__title {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 660;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--petrol-700);
  margin: 0 0 var(--sp-3);
}
.note p:last-child { margin-bottom: 0; }

.note--alert { border-left-color: var(--alert); background: var(--alert-bg); padding: var(--sp-5); }
.note--alert .note__title { color: var(--alert); }
.note--stop  { border-left-color: var(--stop);  background: var(--stop-bg);  padding: var(--sp-5); }
.note--stop  .note__title { color: var(--stop); }
.note--ok    { border-left-color: var(--ok);    background: var(--ok-bg);    padding: var(--sp-5); }
.note--ok    .note__title { color: var(--ok); }
.note--sand  { border-left-color: var(--petrol-700); background: var(--sand-soft); padding: var(--sp-5); }

/* --- Destacado tipográfico a toda página --- */
.pullquote {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  line-height: 1.42;
  color: var(--petrol-900);
  max-width: 26ch;
  font-weight: 500;
}

/* --- Tarjeta: solo donde organiza de verdad --- */
.panel {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: var(--sp-6);
}
.panel--sand { background: var(--sand-soft); border-color: var(--stone-deep); }
.panel--dark { background: var(--petrol-800); border-color: var(--petrol-800); color: rgba(255,255,255,.78); }
.panel--dark h3, .panel--dark h4, .panel--dark strong { color: #fff; }
.panel h3 { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }

/* --- Índice de enlaces (sustituye a la rejilla de tarjetas) --- */
.index-list { border-top: 1px solid var(--ink); }
.index-list__item {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  gap: var(--sp-5);
  align-items: baseline;
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: padding-left .2s ease;
}
.index-list__item:hover { padding-left: 8px; }
.index-list__item:hover .index-list__title { color: var(--petrol-700); }
.index-list__n {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--muted-light);
  letter-spacing: .06em;
}
.index-list__title {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  color: var(--petrol-900);
  font-weight: 600;
  margin-bottom: 5px;
  transition: color .17s ease;
}
.index-list__desc { display: block; font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; max-width: 58ch; }
.index-list__arrow { color: var(--muted-light); font-size: 1.1rem; transition: color .17s ease, transform .17s ease; }
.index-list__item:hover .index-list__arrow { color: var(--petrol-700); transform: translateX(4px); }

/* --- Listas --- */
.list-check, .list-cross, .list-plain, .list-dash {
  list-style: none; padding: 0; margin: 0 0 var(--sp-4);
}
.list-check li, .list-cross li, .list-dash li {
  position: relative; padding-left: 26px; margin-bottom: var(--sp-3);
}
.list-check li::before {
  content: ""; position: absolute; left: 1px; top: .55em;
  width: 11px; height: 6px;
  border-left: 1.5px solid var(--ok); border-bottom: 1.5px solid var(--ok);
  transform: rotate(-45deg);
}
.list-cross li::before {
  content: ""; position: absolute; left: 2px; top: .78em;
  width: 11px; height: 1.5px; background: var(--stop);
}
.list-dash li::before {
  content: ""; position: absolute; left: 0; top: .82em;
  width: 13px; height: 1px; background: var(--line-strong);
}
.list-plain li { padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
.list-plain li:first-child { border-top: 1px solid var(--line); }

ul.prose-list, ol.prose-list { padding-left: 1.15em; margin: 0 0 var(--sp-4); }
ul.prose-list li, ol.prose-list li { margin-bottom: var(--sp-2); padding-left: 5px; }
ul.prose-list li::marker { color: var(--sage); }
ol.prose-list li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }

/* --- Etiquetas de estado: rectangulares y discretas --- */
.tag {
  display: inline-block;
  padding: 3px 8px;
  font-size: var(--fs-xs);
  font-weight: 620;
  letter-spacing: .07em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  background: transparent;
}
.tag--ok    { border-color: #b9cbbc; color: var(--ok); background: var(--ok-bg); }
.tag--alert { border-color: #ddc9a8; color: var(--alert); background: var(--alert-bg); }
.tag--stop  { border-color: #dcbcb7; color: var(--stop); background: var(--stop-bg); }
.tag--solid { background: var(--petrol-800); border-color: var(--petrol-800); color: #fff; }

/* ==========================================================================
   7. DATOS Y TABLAS
   ========================================================================== */
.figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink);
}
.figures > div { padding: var(--sp-5) var(--sp-5) var(--sp-5) 0; }
.figures > div + div { border-left: 1px solid var(--line); padding-left: var(--sp-5); }

/* Variante centrada: cifra y descripción alineadas al centro de cada columna */
.figures--center > div { text-align: center; padding: var(--sp-6) var(--sp-4); }
.figures--center > div + div { padding-left: var(--sp-4); }
.figures--center .figure__label { max-width: 26ch; margin: 0 auto; }
.figure__value {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 2vw, 2.15rem);
  line-height: 1.05;
  color: var(--petrol-900);
  font-weight: 600;
  margin-bottom: var(--sp-3);
  font-variant-numeric: tabular-nums;
}
.figure__label { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; display: block; }
.section--dark .figures { border-top-color: rgba(255,255,255,.45); }
.section--dark .figures > div + div { border-left-color: var(--line-dark); }
.section--dark .figure__value { color: #fff; }
.section--dark .figure__label { color: rgba(255,255,255,.62); }

.table-wrap { overflow-x: auto; margin: var(--sp-6) 0; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 540px; }
thead th {
  font-family: var(--font-sans);
  font-weight: 640;
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 0 var(--sp-4) var(--sp-3) 0;
  border-bottom: 1px solid var(--ink);
  vertical-align: bottom;
}
thead th:last-child { padding-right: 0; }
tbody td, tbody th {
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
  line-height: 1.6;
}
tbody td:last-child, tbody th:last-child { padding-right: 0; }
tbody th { font-weight: 620; color: var(--petrol-900); }

/* Tabla comparativa: la columna de criterios queda a la izquierda y las dos
   columnas de valores centradas, para leerlas enfrentadas. */
.tbody-center td { text-align: center; padding-right: var(--sp-4); }
.tbody-center th { text-align: left; }
tbody tr:hover td, tbody tr:hover th { background: var(--paper-warm); }
caption { caption-side: bottom; padding-top: var(--sp-4); font-size: var(--fs-xs); color: var(--muted); text-align: left; line-height: 1.6; }

/* --- Comparativa a dos columnas --- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); border-top: 1px solid var(--ink); padding-top: var(--sp-5); }
.compare__col + .compare__col { border-left: 1px solid var(--line); padding-left: var(--sp-7); }
.compare__head { margin-bottom: var(--sp-5); }
.compare__head h3 { margin: var(--sp-3) 0 0; font-size: var(--fs-lg); }
.compare dl { margin: 0; }
.compare dt {
  font-size: var(--fs-xs);
  font-weight: 640;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: var(--sp-5);
}
.compare dt:first-child { margin-top: 0; }
.compare dd { margin: 5px 0 0; }

/* --- FAQ --- */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  color: var(--petrol-900);
  font-weight: 600;
  line-height: 1.35;
  transition: color .15s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--petrol-600); }
.faq summary::after {
  content: ""; flex-shrink: 0;
  width: 11px; height: 11px; margin-top: 9px;
  border-right: 1px solid var(--petrol-700);
  border-bottom: 1px solid var(--petrol-700);
  transform: rotate(45deg);
  transition: transform .22s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 13px; }
.faq__body { padding: 0 0 var(--sp-5); max-width: 74ch; }
.faq__body > :last-child { margin-bottom: 0; }

/* --- Casos --- */
.cases { display: block; }
.case { padding: var(--sp-6) 0; border-top: 1px solid var(--line); }
.case:first-of-type { border-top: 1px solid var(--ink); }
.case__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.case__type { font-family: var(--font-serif); font-size: var(--fs-lg); color: var(--petrol-900); font-weight: 600; }
.case__meta { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
/* Rejilla de cifras del caso: cada columna se alinea abajo para que los
   importes queden a la misma altura aunque la etiqueta ocupe dos líneas. */
.case__figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  margin: var(--sp-5) 0;
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.case__figures > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}
.case__fig-label {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted-light);
  margin-bottom: var(--sp-3);
  line-height: 1.35;
  min-height: 2.7em;   /* dos líneas: mantiene los importes alineados */
}
.case__fig-value {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--petrol-900);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  white-space: nowrap;
}
.case__fig-value--win { color: var(--ok); }
.case__foot-wrap { margin-top: var(--sp-5); }
.case__foot { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--muted); }
.case__saving { font-family: var(--font-serif); font-size: 1.32rem; color: var(--ok); font-weight: 600; }

/* --- Franja de llamada a la acción --- */
.cta-band { background: var(--petrol-900); color: rgba(255,255,255,.74); padding: var(--sp-8) 0; }
.cta-band__inner { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-7); align-items: center; }
.cta-band h2 { color: #fff; font-size: var(--fs-xl); margin: 0 0 var(--sp-3); max-width: 22ch; }
.cta-band p { margin: 0; max-width: 54ch; }

.cta-inline {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: var(--sp-6) 0;
  margin: var(--sp-7) 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-6);
  align-items: center;
}
.cta-inline h3 { margin: 0 0 var(--sp-2); }
.cta-inline p { margin: 0; font-size: var(--fs-sm); color: var(--muted); max-width: 52ch; }

/* --- Nota legal al pie de artículo --- */
.legal-note {
  font-size: var(--fs-sm);
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-4);
  margin-top: var(--sp-7);
  line-height: 1.6;
}

/* --- Vídeo con carga diferida ---
   El iframe no se inserta hasta que el usuario lo pide: así el sitio sigue sin
   hacer ninguna petición a terceros mientras no se solicite expresamente. */
.video {
  border: 1px solid var(--line-strong);
  background: var(--paper-warm);
  margin: var(--sp-6) 0;
}
.video__marco {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--petrol-900);
  overflow: hidden;
}
.video__marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video__portada {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--sp-4);
  background: var(--petrol-900);
  border: 0;
  cursor: pointer;
  color: rgba(255,255,255,.72);
  font-family: var(--font-sans);
  text-align: center;
  padding: var(--sp-6);
  transition: background-color .2s ease;
}
.video__portada:hover { background: var(--petrol-800); }
.video__play {
  width: 54px; height: 54px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s ease, background-color .2s ease;
}
.video__portada:hover .video__play { border-color: #fff; background: rgba(255,255,255,.08); }
.video__play svg { margin-left: 3px; }
.video__rotulo { font-family: var(--font-serif); font-size: var(--fs-lg); color: #fff; font-weight: 600; }
.video__aviso { font-size: var(--fs-xs); color: rgba(255,255,255,.55); max-width: 44ch; line-height: 1.55; }
.video__pie { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted); }
.video__pie p { margin: 0; }

/* --- Confianza --- */
.trust { display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-7); align-items: center; }
.trust__item { font-size: var(--fs-sm); color: var(--muted); position: relative; padding-left: 15px; }
.trust__item::before { content: ""; position: absolute; left: 0; top: .68em; width: 5px; height: 5px; background: var(--sage); }

/* ==========================================================================
   8. FORMULARIOS
   ========================================================================== */
.form-field { margin-bottom: var(--sp-5); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }

label, .label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--petrol-900);
  margin-bottom: 7px;
}
.label-hint { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }
.optional { font-weight: 400; color: var(--muted-light); }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="date"], select, textarea {
  width: 100%;
  padding: 11px 13px;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--petrol-600);
  box-shadow: inset 0 0 0 1px var(--petrol-600);
}
textarea { min-height: 118px; resize: vertical; line-height: 1.65; }
select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7773' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
  padding-right: 36px;
}
input::placeholder, textarea::placeholder { color: var(--muted-light); }

.field-error { color: var(--stop); font-size: var(--fs-sm); margin-top: 5px; display: none; }
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea { border-color: var(--stop); }
.form-field.has-error .field-error { display: block; }

.check-inline {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: var(--fs-sm); font-weight: 400; color: var(--ink-soft);
  line-height: 1.55; cursor: pointer;
}
.check-inline input[type="checkbox"] {
  width: 17px; height: 17px; margin: 3px 0 0;
  flex-shrink: 0; accent-color: var(--petrol-700); cursor: pointer;
}

.hp-field { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; width: 0; overflow: hidden; }

.form-status { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); font-size: var(--fs-sm); display: none; border-left: 2px solid; }
.form-status.is-visible { display: block; }
.form-status--ok   { background: var(--ok-bg);    color: var(--ok);       border-color: var(--ok); }
.form-status--err  { background: var(--stop-bg);  color: var(--stop);     border-color: var(--stop); }
.form-status--info { background: var(--petrol-050); color: var(--petrol-800); border-color: var(--petrol-600); }

.form-panel { border: 1px solid var(--line); background: var(--paper); padding: var(--sp-6); }

/* ==========================================================================
   9. ÁRBOL DE DECISIÓN
   ========================================================================== */
.dt { border: 1px solid var(--line-strong); background: var(--paper); }

.dt__progress-wrap {
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--line);
  background: var(--paper-warm);
}
.dt__progress { flex: 1; min-width: 140px; height: 2px; background: var(--line-strong); }
.dt__progress-bar { height: 100%; width: 0; background: var(--petrol-700); transition: width .4s cubic-bezier(.4,0,.2,1); }
.dt__progress-label { font-size: var(--fs-xs); font-weight: 640; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

.dt__stage { padding: var(--sp-7) var(--sp-6); }
.dt__step { display: none; }
.dt__step.is-active { display: block; animation: dtIn .26s ease; }
@keyframes dtIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.dt__question { font-family: var(--font-serif); font-size: var(--fs-xl); color: var(--petrol-900); font-weight: 600; line-height: 1.28; margin: 0 0 var(--sp-3); }
.dt__help { color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--sp-6); max-width: 62ch; line-height: 1.6; }

.dt__options { display: grid; gap: 0; margin-bottom: var(--sp-5); border-top: 1px solid var(--line); }
.dt__options--2 { grid-template-columns: 1fr 1fr; gap: 0 var(--sp-6); }

.dt__option {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-4) var(--sp-3) var(--sp-4) 0;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--ink-soft);
  transition: background-color .15s ease, padding-left .18s ease;
}
.dt__option:hover { background: var(--paper-warm); padding-left: var(--sp-3); }
.dt__option.is-selected { background: var(--petrol-050); padding-left: var(--sp-3); }

.dt__option-mark {
  flex-shrink: 0; width: 17px; height: 17px; margin-top: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  position: relative;
  transition: border-color .15s ease;
}
.dt__option:hover .dt__option-mark { border-color: var(--petrol-600); }
.dt__option.is-selected .dt__option-mark { border-color: var(--petrol-700); }
.dt__option.is-selected .dt__option-mark::after {
  content: ""; position: absolute; inset: 3px; background: var(--petrol-700); border-radius: 50%;
}
.dt__option--check .dt__option-mark { border-radius: 0; }
.dt__option--check.is-selected .dt__option-mark::after { border-radius: 0; inset: 2px; }

.dt__option-text strong { display: block; color: var(--petrol-900); font-weight: 620; margin-bottom: 3px; }
.dt__option-text span { display: block; font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }

.dt__nav { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding-top: var(--sp-5); border-top: 1px solid var(--line); flex-wrap: wrap; }
.dt__back {
  background: none; border: 0; color: var(--muted);
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 560;
  cursor: pointer; padding: 8px 0;
}
.dt__back:hover { color: var(--petrol-800); }
.dt__back[hidden] { visibility: hidden; }

/* --- Resultado --- */
.dt__result-head {
  background: var(--petrol-900);
  color: rgba(255,255,255,.72);
  padding: var(--sp-6);
  margin: calc(var(--sp-7) * -1) calc(var(--sp-6) * -1) var(--sp-6);
}
.dt__result-head h3 { color: #fff; margin: 0 0 var(--sp-2); font-size: var(--fs-xl); }
.dt__result-head p { margin: 0; font-size: var(--fs-sm); }

.verdict { display: flex; gap: var(--sp-4); padding: var(--sp-5); margin-bottom: var(--sp-6); border-left: 2px solid; font-size: var(--fs-base); line-height: 1.6; }
.verdict--go    { background: var(--ok-bg);      color: var(--ok);         border-color: var(--ok); }
.verdict--maybe { background: var(--alert-bg);   color: var(--alert);      border-color: var(--alert); }
.verdict--no    { background: var(--petrol-050); color: var(--petrol-800); border-color: var(--petrol-600); }
.verdict svg { flex-shrink: 0; margin-top: 4px; }

.result-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); border-top: 1px solid var(--ink); margin-bottom: var(--sp-6); }
.result-figure { padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; border-bottom: 1px solid var(--line); }
.result-figure + .result-figure { border-left: 1px solid var(--line); padding-left: var(--sp-4); }
.result-figure__label { display: block; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-light); margin-bottom: 6px; }
.result-figure__value { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 600; color: var(--petrol-900); line-height: 1.15; font-variant-numeric: tabular-nums; }
.result-figure__value--accent { color: var(--petrol-600); }
.result-figure__value--win { color: var(--ok); }
.result-figure__value--alert { color: var(--stop); }

.deadline-box { border-left: 2px solid var(--stop); background: var(--stop-bg); padding: var(--sp-5); margin-bottom: var(--sp-6); }
.deadline-box__label { display: block; font-size: var(--fs-xs); letter-spacing: .13em; text-transform: uppercase; font-weight: 640; color: var(--stop); margin-bottom: 6px; }
.deadline-box__value { font-family: var(--font-serif); font-size: var(--fs-lg); color: var(--petrol-900); font-weight: 600; }

/* Lista de documentación.
   Maquetada en bloque con la casilla posicionada en absoluto. NO usar rejilla:
   el <li> tiene varios hijos sueltos (b, span, em) y cada uno acabaría en una
   celda distinta, con el texto cayendo en la columna de 15 px y saliendo
   una palabra por línea. */
.doc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.doc-list li {
  position: relative;
  padding: var(--sp-4) 0 var(--sp-4) 27px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.doc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--sp-4) + .25em);
  width: 13px; height: 13px;
  border: 1px solid var(--line-strong);
}
.doc-list li b { color: var(--petrol-900); font-weight: 620; }
.doc-list li em {
  display: block;
  font-style: normal;
  color: var(--muted);
  font-size: var(--fs-xs);
  margin-top: 4px;
  line-height: 1.5;
}
.doc-list li .tag { margin-left: 8px; vertical-align: 1px; }

/* Cierre del diagnóstico: bloque destacado que empuja al envío */
.dt__cierre {
  margin-top: var(--sp-7);
  padding: var(--sp-6);
  background: var(--sand-soft);
  border-left: 2px solid var(--petrol-700);
}
.dt__cierre p { max-width: 62ch; }

.summary-box {
  border: 1px solid var(--line);
  background: var(--paper-warm);
  padding: var(--sp-5);
  font-family: var(--font-mono);
  font-size: .78rem;
  line-height: 1.7;
  color: var(--ink-soft);
  white-space: pre-wrap;
  max-height: 300px;
  overflow-y: auto;
}

/* ==========================================================================
   10. PIE
   ========================================================================== */
.site-footer { background: var(--petrol-900); color: rgba(255,255,255,.6); font-size: var(--fs-sm); padding-top: var(--sp-8); }
.footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1.1fr; gap: var(--sp-8); padding-bottom: var(--sp-7); }
.site-footer h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
  margin: 0 0 var(--sp-4);
  font-weight: 640;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); }
.site-footer p { margin-bottom: var(--sp-4); line-height: 1.65; }
.footer-brand .brand__name { color: #fff; }
.footer-brand .brand__tag { color: rgba(255,255,255,.45); }

/* Firma discreta de Fiscaly */
.footer-group {
  display: flex; align-items: center; gap: 13px;
  margin-top: var(--sp-5); padding-top: var(--sp-5);
  border-top: 1px solid var(--line-dark);
}
.footer-group__label { font-size: var(--fs-xs); letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.footer-group__logo { height: 15px; width: auto; opacity: .82; transition: opacity .17s ease; }
.footer-group a:hover .footer-group__logo { opacity: 1; }

.footer-bottom {
  border-top: 1px solid var(--line-dark);
  padding: var(--sp-5) 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-4); flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.44);
}
.footer-legal-strip {
  background: #101f1e;
  padding: var(--sp-5) 0;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.4);
  line-height: 1.7;
}
.footer-legal-strip strong { color: rgba(255,255,255,.62); }

/* ==========================================================================
   10 bis. EQUIVALENCIAS DE MARCADO
   Clases heredadas de páginas interiores, reinterpretadas en el lenguaje
   visual nuevo: filetes en lugar de tarjetas, sin sombras, sin relleno de
   color innecesario.
   ========================================================================== */
.card {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: var(--sp-6);
  height: 100%;
}
.card h3 { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card--hover { transition: border-color .18s ease; }
.card--hover:hover { border-color: var(--line-strong); }

/* Bloque numerado sin caja */
.card--numbered { border: 0; border-top: 1px solid var(--ink); padding: var(--sp-5) 0 0; background: transparent; }
.card__num {
  display: block;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--petrol-600);
  margin-bottom: var(--sp-4);
}

.card__link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: var(--sp-4);
  font-size: var(--fs-sm); font-weight: 580;
  color: var(--petrol-700); text-decoration: none;
  border-bottom: 1px solid var(--line-strong); padding-bottom: 2px;
}
.card__link:hover { color: var(--petrol-900); border-bottom-color: var(--petrol-700); }

/* Rejilla de enlaces → filas editoriales con filete */
.link-cards { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--ink); }
.link-card {
  display: block;
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: padding-left .2s ease;
}
.link-card:hover { padding-left: 8px; }
.link-card strong {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  color: var(--petrol-900);
  font-weight: 600;
  margin-bottom: 5px;
  transition: color .17s ease;
}
.link-card:hover strong { color: var(--petrol-700); }
.link-card span { display: block; font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; max-width: 62ch; }

/* Composición a dos columnas */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: start; }
.split--wide-left { grid-template-columns: 1.42fr 1fr; }

.list-arrow { list-style: none; padding: 0; margin: 0 0 var(--sp-4); }
.list-arrow li { position: relative; padding-left: 26px; margin-bottom: var(--sp-3); }
.list-arrow li::before {
  content: ""; position: absolute; left: 0; top: .82em;
  width: 13px; height: 1px; background: var(--petrol-600);
}

.case__body { padding: 0; }

@media (max-width: 1024px) {
  .split, .split--wide-left { grid-template-columns: 1fr; gap: var(--sp-7); }
}

/* ==========================================================================
   11. UTILIDADES
   ========================================================================== */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.mt-0 { margin-top: 0 !important; }
.mt-3 { margin-top: var(--sp-3) !important; }
.mt-4 { margin-top: var(--sp-4) !important; }
.mt-5 { margin-top: var(--sp-5) !important; }
.mt-6 { margin-top: var(--sp-6) !important; }
.mt-7 { margin-top: var(--sp-7) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-4 { margin-bottom: var(--sp-4) !important; }
.mb-5 { margin-bottom: var(--sp-5) !important; }
.mb-6 { margin-bottom: var(--sp-6) !important; }
.mb-7 { margin-bottom: var(--sp-7) !important; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  /* minmax(0, …) es imprescindible: con `1fr` a secas la columna no puede
     encogerse por debajo del contenido más ancho (una tabla) y el texto se
     sale del contenedor en móvil. */
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
  .toc ol { columns: 2; column-gap: var(--sp-6); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .figures { grid-template-columns: repeat(2, 1fr); }
  .figures > div:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .figures > div:nth-child(4) { border-top: 1px solid var(--line); }
  .hero__inner, .editorial, .editorial--wide, .editorial--aside { grid-template-columns: 1fr; gap: var(--sp-7); }
  /* En una sola columna ya no hay nada que compensar */
  .editorial--aside > :last-child { padding-top: 0; }
  .hero h1 { max-width: 100%; }
}

@media (max-width: 860px) {
  :root {
    --header-h: 62px;
    /* Ritmo vertical más apretado: en móvil los huecos grandes obligan a
       desplazarse por pantallas vacías entre bloque y bloque. */
    --sp-6: 1.5rem;
    --sp-7: 1.85rem;
    --sp-8: 2.25rem;
    --sp-9: 2.75rem;
  }

  /* IMPRESCINDIBLE: `backdrop-filter` convierte a la cabecera en el bloque
     contenedor de sus descendientes `position: fixed`. Con él activo, el menú
     se posicionaba respecto de la cabecera (116 px de alto) en lugar de
     respecto de la ventana, y los enlaces quedaban atrapados en esa franja.
     En móvil se desactiva y el fondo pasa a ser opaco. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--paper);
  }

  .nav__menu {
    position: fixed; inset: 0 0 0 auto;
    width: min(330px, 86vw);
    height: 100dvh;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    border-left: 1px solid var(--line);
    padding: calc(var(--header-h) + 22px) var(--sp-5) var(--sp-6);
    transform: translateX(100%);
    transition: transform .26s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 90;
  }
  .nav__menu.is-open { transform: none; }
  .nav__link { padding: 14px 2px; font-size: 1rem; border-bottom: 1px solid var(--line); }
  .nav__link[aria-current="page"]::after { left: 2px; right: auto; width: 20px; bottom: 7px; }
  .nav__toggle { display: inline-flex; }

  /* La llamada a la acción de la barra se oculta y reaparece dentro del menú */
  .nav__actions > .btn { display: none; }
  .nav__cta { display: block; margin-top: var(--sp-5); }
  .nav__cta .btn { width: 100%; padding: 14px 20px; font-size: .98rem; }

  .nav-backdrop {
    position: fixed; inset: 0; background: rgba(21,48,47,.42);
    z-index: 80; opacity: 0; pointer-events: none; transition: opacity .26s ease;
  }
  .nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; gap: var(--sp-6); }
  .compare__col + .compare__col { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: var(--sp-6); }
  .cta-band__inner, .cta-inline { grid-template-columns: 1fr; gap: var(--sp-5); }
  .dt__options--2 { grid-template-columns: 1fr; }
  .section { padding: var(--sp-8) 0; }
  .case__figures { grid-template-columns: 1fr 1fr; }
  .toc ol { columns: 1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .index-list__item { grid-template-columns: 1.9rem 1fr; }
  .index-list__arrow { display: none; }
  .numbered__item { grid-template-columns: 44px 1fr; gap: var(--sp-4); }
}

@media (max-width: 560px) {
  :root { --fs-base: 1rem; }
  .container { padding: 0 var(--sp-4); }
  .dt__stage { padding: var(--sp-5) var(--sp-4); }
  .dt__progress-wrap { padding: var(--sp-3) var(--sp-4); }
  .dt__result-head { margin: calc(var(--sp-5) * -1) calc(var(--sp-4) * -1) var(--sp-5); padding: var(--sp-5) var(--sp-4); }
  .panel, .form-panel, .ficha { padding: var(--sp-5); }
  .figures { grid-template-columns: 1fr; }
  .figures > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .case__figures { grid-template-columns: 1fr; gap: var(--sp-3); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .btn { width: 100%; }
  .btn-row .btn { width: auto; flex: 1 1 190px; }
  .hero__actions .btn { width: 100%; }
  .steps > li { padding-left: 44px; }
  .numbered__item { grid-template-columns: 32px 1fr; gap: var(--sp-3); }
}

/* ==========================================================================
   13. IMPRESIÓN
   ========================================================================== */
@media print {
  .site-header, .site-footer, .cta-band, .cta-inline, .dt__nav, .no-print { display: none !important; }
  body { color: #000; font-size: 11pt; background: #fff; }
  .hero, .page-hero, .section--dark, .dt__result-head { background: none !important; color: #000 !important; border-bottom: 1px solid #000; }
  .dt__result-head h3, .section--dark h2 { color: #000 !important; }
  a { text-decoration: none; color: #000; }
  .panel, .dt, .form-panel { border: 1px solid #999; page-break-inside: avoid; }
  .section { padding: 12pt 0; }
}

/* ==========================================================================
   FUENTES PROPIAS (opcional)
   --------------------------------------------------------------------------
   El sitio usa pilas del sistema: carga instantánea y ninguna petición a
   terceros (relevante para el RGPD: nada de Google Fonts).

   Para subir un escalón tipográfico, descarga los .woff2 de una serif
   editorial contemporánea (Newsreader, Fraunces o Instrument Serif funcionan
   muy bien con esta paleta) y una sans neutra (Inter), colócalos en
   `assets/fonts/` y descomenta:

   @font-face {
     font-family: "Serif propia";
     src: url("../fonts/serif-propia.woff2") format("woff2");
     font-weight: 400 700; font-display: swap; font-style: normal;
   }
   @font-face {
     font-family: "Sans propia";
     src: url("../fonts/sans-propia.woff2") format("woff2");
     font-weight: 300 700; font-display: swap; font-style: normal;
   }
   :root {
     --font-serif: "Serif propia", Georgia, serif;
     --font-sans:  "Sans propia", -apple-system, "Segoe UI", sans-serif;
   }
   ========================================================================== */