/* Vigilia · web pública
   Un solo tipo de letra, el del sistema. Sin fuentes remotas, sin JavaScript de
   framework, sin color de acento. El contenido se ancla al margen izquierdo: no hay
   contenedor centrado, hay una columna de lectura que empieza donde empieza la página.
   Las separaciones son líneas de un píxel a todo lo ancho, no tarjetas. */

:root {
  --papel: #fbfaf8;
  --tinta: #14140f;
  --tinta-2: #4b4a44;
  --tinta-3: #6b6960;
  --linea: #d9d6cf;
  --linea-fuerte: #14140f;
  --realce: #efede8;

  --margen: clamp(1.25rem, 5vw, 5rem);
  --medida: 36rem;        /* columna de lectura */
  --medida-ancha: 52rem;  /* titulares y tablas */

  --paso-1: 0.5rem;
  --paso-2: 1rem;
  --paso-3: 1.75rem;
  --paso-4: 3rem;
  --paso-5: 4.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel: #111110;
    --tinta: #edece7;
    --tinta-2: #b4b2aa;
    --tinta-3: #96948c;
    --linea: #2f2f2b;
    --linea-fuerte: #edece7;
    --realce: #1a1a18;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 1.1875rem;      /* 19px: el público incluye gente mayor */
  line-height: 1.6;
  font-synthesis-weight: none;
  text-underline-offset: 0.2em;
}
@media (min-width: 60rem) {
  body { font-size: 1.25rem; line-height: 1.62; }
}

/* ---------- utilidades de estructura ---------- */

.limite { padding-inline: var(--margen); }
.col { max-width: var(--medida); }
.col-ancha { max-width: var(--medida-ancha); }

.salta-a-contenido {
  position: absolute;
  left: var(--margen);
  top: 0;
  transform: translateY(-120%);
  background: var(--tinta);
  color: var(--papel);
  padding: 0.6rem 0.9rem;
  z-index: 10;
  font-size: 1rem;
}
.salta-a-contenido:focus { transform: translateY(0); }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--linea-fuerte);
  outline-offset: 2px;
}

/* ---------- cabecera ---------- */

.cabecera {
  border-bottom: 1px solid var(--linea);
}
.cabecera > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--paso-2) var(--paso-3);
  padding-block: 0.9rem;
}
.marca {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta);
  text-decoration: none;
  margin-right: auto;
}
.marca:hover { text-decoration: underline; }
.cabecera nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--paso-1) var(--paso-3);
  font-size: 1rem;
}
.cabecera nav a {
  color: var(--tinta-2);
  text-decoration: none;
  padding-block: 0.25rem;
}
.cabecera nav a:hover,
.cabecera nav a[aria-current="page"] {
  color: var(--tinta);
  text-decoration: underline;
}
.cabecera nav a[aria-current="page"] { font-weight: 600; }

/* En móvil la cabecera ocupaba tres filas y empujaba el titular fuera de la primera
   pantalla. El idioma sube a la misma fila que la marca y la navegación baja entera. */
@media (max-width: 29.9375rem) {
  .cabecera > div { row-gap: 0.6rem; }
  .marca { margin-right: auto; }
  .idioma { order: 2; margin-left: auto; }
  .cabecera nav { order: 3; width: 100%; gap: var(--paso-1) var(--paso-2); }
}

/* ---------- tipografía ---------- */

h1, h2, h3 {
  font-weight: 600;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0;
}
h1 {
  font-size: clamp(2.1rem, 7.5vw, 3.5rem);
  line-height: 1.04;
  max-width: 24ch;
}
h2 {
  font-size: clamp(1.4rem, 4vw, 1.875rem);
  line-height: 1.15;
  max-width: 28ch;
}
h3 {
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
p, li { text-wrap: pretty; }
p { margin: 0 0 var(--paso-2); max-width: var(--medida); }
p:last-child { margin-bottom: 0; }

.entradilla {
  font-size: clamp(1.25rem, 3.4vw, 1.5rem);
  line-height: 1.45;
  color: var(--tinta);
  max-width: 34rem;
}
.apunte { color: var(--tinta-3); font-size: 1rem; line-height: 1.5; }

.rotulo {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin: 0 0 var(--paso-2);
}

main a { color: var(--tinta); text-decoration-thickness: 1px; }
main a:hover { text-decoration-thickness: 2px; }

/* ---------- secciones ---------- */

.bloque {
  border-top: 1px solid var(--linea);
  padding-block: var(--paso-4);
}
.bloque:first-of-type { border-top: 0; }
.portada-bloque { padding-block: var(--paso-4) var(--paso-5); }
@media (min-width: 60rem) {
  .bloque { padding-block: var(--paso-5); }
}
.bloque > * + * { margin-top: var(--paso-3); }
.bloque > h2 + p, .bloque > h2 + .entradilla { margin-top: var(--paso-2); }

/* ---------- pasos numerados ---------- */

.pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.pasos > li {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0 var(--paso-2);
  padding-block: var(--paso-3);
  border-top: 1px solid var(--linea);
  max-width: var(--medida-ancha);
}
.pasos > li:first-child { border-top: 0; padding-top: 0; }
.pasos > li::before {
  content: counter(paso);
  grid-row: 1 / span 2;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}
.pasos h3 { margin: 0 0 0.35rem; }
.pasos p { margin: 0; }
@media (min-width: 48rem) {
  .pasos > li { grid-template-columns: 4rem 1fr; }
  .pasos > li::before { font-size: 2rem; }
}

/* ---------- listas ---------- */

.lista { list-style: none; margin: 0; padding: 0; max-width: var(--medida); }
.lista > li {
  padding-block: 0.7rem;
  border-top: 1px solid var(--linea);
}
.lista > li:first-child { border-top: 0; }

.lista-puntos { margin: 0; padding-left: 1.2em; max-width: var(--medida); }
.lista-puntos > li { margin-bottom: 0.5rem; }

/* ---------- datos y precio ---------- */

.cifra {
  display: block;
  font-size: clamp(2.25rem, 8vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

table {
  border-collapse: collapse;
  width: 100%;
  max-width: var(--medida-ancha);
  font-variant-numeric: tabular-nums;
  font-size: 1.0625rem;
}
caption { text-align: left; color: var(--tinta-3); font-size: 1rem; padding-bottom: var(--paso-1); }
th, td {
  text-align: left;
  padding: 0.7rem 1rem 0.7rem 0;
  border-bottom: 1px solid var(--linea);
  vertical-align: baseline;
}
thead th { border-bottom: 1px solid var(--linea-fuerte); font-weight: 600; }
td.num, th.num { text-align: right; padding-right: 0; }
.tabla-marco { overflow-x: auto; max-width: 100%; }

/* ---------- botones y acciones ---------- */

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--paso-2);
  align-items: center;
}
.boton {
  display: inline-block;
  background: var(--tinta);
  color: var(--papel);
  border: 1px solid var(--tinta);
  padding: 0.8rem 1.25rem;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.boton:hover { background: transparent; color: var(--tinta); text-decoration: none; }
.boton-sec {
  background: transparent;
  color: var(--tinta);
  border: 1px solid var(--linea-fuerte);
}
.boton-sec:hover { background: var(--realce); }

/* ---------- bifurcación de recorridos ---------- */

.caminos { display: grid; gap: 0; max-width: var(--medida-ancha); }
.caminos > a {
  display: block;
  border-top: 1px solid var(--linea);
  padding-block: var(--paso-3);
  text-decoration: none;
  color: var(--tinta);
}
.caminos > a:first-child { border-top: 0; padding-top: 0; }
.caminos > a:hover h3 { text-decoration: underline; }
.caminos p { color: var(--tinta-2); margin: 0.35rem 0 0; }
.caminos .flecha { color: var(--tinta-3); }
@media (min-width: 52rem) {
  .caminos { grid-template-columns: 1fr 1fr; gap: 0 var(--paso-4); }
  .caminos > a { border-top: 1px solid var(--linea); padding-top: var(--paso-3); }
  .caminos > a:first-child { border-top: 1px solid var(--linea); }
}

/* ---------- cita ---------- */

blockquote {
  margin: 0;
  max-width: var(--medida);
  border-left: 2px solid var(--linea-fuerte);
  padding-left: var(--paso-2);
  font-size: 1.1875rem;
}

/* ---------- preguntas ---------- */

.preguntas { max-width: var(--medida-ancha); }
.preguntas details { border-top: 1px solid var(--linea); }
.preguntas details:last-of-type { border-bottom: 1px solid var(--linea); }
.preguntas summary {
  cursor: pointer;
  padding-block: var(--paso-2);
  font-weight: 600;
  list-style: none;
  display: flex;
  gap: var(--paso-2);
  align-items: baseline;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: "+";
  margin-left: auto;
  font-weight: 400;
  color: var(--tinta-3);
}
.preguntas details[open] summary::after { content: "−"; }
.preguntas details > :not(summary) { padding-bottom: var(--paso-2); }

/* ---------- formulario ---------- */

form.contacto { max-width: var(--medida); }
.campo { margin-bottom: var(--paso-3); }
.campo label { display: block; font-weight: 600; font-size: 1.0625rem; margin-bottom: 0.35rem; }
.campo .ayuda { display: block; color: var(--tinta-3); font-size: 0.9375rem; margin-bottom: 0.45rem; }
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  width: 100%;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--tinta-3);
  border-radius: 0;
  padding: 0.7rem 0.8rem;
  min-height: 2.75rem;
}
textarea { min-height: 8rem; resize: vertical; }
.oculto-visualmente {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.aviso {
  border-left: 2px solid var(--linea-fuerte);
  padding: var(--paso-2);
  background: var(--realce);
  max-width: var(--medida);
  font-size: 1.0625rem;
}

/* ---------- pie ---------- */

.pie {
  border-top: 1px solid var(--linea);
  padding-block: var(--paso-3) var(--paso-4);
  font-size: 1rem;
  color: var(--tinta-3);
}
.pie a { color: var(--tinta-2); }
.pie nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--paso-1) var(--paso-3);
  margin-bottom: var(--paso-2);
}
.pie p { max-width: var(--medida); margin-bottom: 0.5rem; }

/* ---------- selector de idioma ---------- */

.idioma { display: flex; gap: 0.5rem; align-items: baseline; font-size: 1rem; }
.idioma a, .idioma span { padding: 0.25rem 0; }
.idioma [aria-current="true"] { font-weight: 600; color: var(--tinta); }
.idioma a { color: var(--tinta-3); text-decoration: none; }
.idioma a:hover { text-decoration: underline; color: var(--tinta); }
.idioma .barra { color: var(--linea); }

/* ---------- variantes de portada en estudio (/variantes/a y /variantes/b) ----------
   Añadido al final, sin tocar nada de lo anterior. Solo lo usan esas dos páginas,
   que van con noindex. Si se descarta una variante, se borra su bloque. */

/* variantes A y B · nota interna de andamiaje: no es contenido del sitio */
.v-nota {
  border: 1px dashed var(--tinta-3);
  padding: var(--paso-2);
  margin: var(--paso-2) 0 0;
  max-width: var(--medida-ancha);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--tinta-2);
}
.v-nota strong { color: var(--tinta); }
.v-nota a { color: var(--tinta); }

/* variante A «el expediente» · fichas en forma de registro, término y valor */
.v-campos { margin: 0; max-width: var(--medida-ancha); }
.v-campos > div {
  border-top: 1px solid var(--linea);
  padding-block: 0.8rem;
}
.v-campos > div:first-child { border-top: 0; padding-top: 0; }
.v-campos dt {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.v-campos dd { margin: 0.3rem 0 0; }
@media (min-width: 48rem) {
  .v-campos > div {
    display: grid;
    grid-template-columns: 13rem 1fr;
    gap: 0 var(--paso-3);
    align-items: baseline;
  }
  .v-campos dd { margin-top: 0; }
}
.v-alto { font-weight: 600; }

/* variante B «la objeción» · duda y respuesta */
.v-dubidas { max-width: var(--medida-ancha); }
.v-dubidas > section {
  border-top: 1px solid var(--linea);
  padding-block: var(--paso-3);
}
.v-dubidas > section:first-child { border-top: 0; padding-top: 0; }
.v-dubidas h3 { max-width: 32ch; }
.v-dubidas h3 + p { margin-top: var(--paso-1); }
.v-dubidas p + p { margin-top: var(--paso-2); }

/* ---------- impresión ---------- */

@media print {
  :root { --papel: #fff; --tinta: #000; --tinta-2: #222; --tinta-3: #444; --linea: #bbb; --realce: #f2f2f2; }
  body { font-size: 10.5pt; line-height: 1.45; }
  .cabecera nav, .idioma, .salta-a-contenido, .no-imprimir { display: none !important; }
  a { text-decoration: none; color: #000; }
  .bloque { padding-block: 10pt; break-inside: avoid; }
  h1 { font-size: 20pt; }
  h2 { font-size: 12pt; }
  @page { margin: 14mm; }
}

/* ---------- dossier de una página (/dossier) ----------
   Añadido para la hoja que se imprime y se deja encima de la mesa. No modifica ni una
   línea de lo anterior: solo una rejilla de dos columnas que faltaba y un bloque
   @media print propio, acotado a `body.dossier`, para que todo quepa en una cara de A4. */

.dos-columnas {
  display: grid;
  gap: var(--paso-3);
  max-width: var(--medida-ancha);
}
.dos-columnas h3 { margin: 0 0 var(--paso-1); }
@media (min-width: 44rem) {
  .dos-columnas { grid-template-columns: 1fr 1fr; gap: var(--paso-3) var(--paso-4); }
}

.dossier-aviso-papel { margin-top: var(--paso-3); }

@media print {
  /* Reglas de impresión del dossier, solo para esa página. */
  .dossier .limite { padding-inline: 0; }
  .dossier .cabecera { border-bottom: 0; }
  .dossier .cabecera > div { padding-block: 0 0; }
  .dossier .marca { font-size: 9pt; }

  .dossier .bloque { padding-block: 3pt; break-inside: avoid; }
  .dossier .bloque > * + * { margin-top: 5pt; }
  .dossier .bloque > h2 + p,
  .dossier .bloque > h2 + .entradilla,
  .dossier .bloque > h2 + .tabla-marco { margin-top: 4pt; }
  .dossier p { margin-bottom: 4pt; }

  .dossier h1 { font-size: 17.5pt; line-height: 1.08; max-width: 40ch; }
  .dossier h2 { font-size: 11.5pt; max-width: 52ch; }
  .dossier h3 { font-size: 10.5pt; margin-bottom: 4pt; }
  .dossier .entradilla { font-size: 11pt; line-height: 1.35; max-width: 64ch; }
  .dossier .rotulo { font-size: 8pt; margin-bottom: 3pt; }

  .dossier .aviso { padding: 5pt 8pt; font-size: 11pt; max-width: none; }
  .dossier .pasos > li { padding-block: 4pt; grid-template-columns: 1.4rem 1fr; max-width: none; }
  .dossier .pasos > li::before { font-size: 12pt; }
  .dossier .lista { max-width: none; }
  .dossier .lista > li { padding-block: 2.5pt; }

  .dossier table { font-size: 9.5pt; max-width: 105mm; }
  .dossier th, .dossier td { padding: 2pt 8pt 2pt 0; }

  .dossier .dos-columnas { grid-template-columns: 1fr 1fr; gap: 0 10mm; max-width: none; }
  .dossier .dos-columnas .lista { max-width: none; }

  .dossier .pie { padding-block: 4pt 0; font-size: 9pt; }
  .dossier .pie p { margin-bottom: 2pt; max-width: none; }
}

/* ---------- ficha técnica ----------
   Añadido para /ficha-tecnica: una hoja densa que tiene que caber en una cara de A4
   al imprimirse y adjuntarse a un expediente. Solo afecta a <main class="ficha">,
   no toca ninguna otra página. */

.ficha .bloque { padding-block: var(--paso-3); }
.ficha .bloque > * + * { margin-top: var(--paso-2); }
.ficha .lista > li { padding-block: 0.45rem; }
.ficha table { font-size: 1rem; }
.ficha th, .ficha td { padding: 0.45rem 1rem 0.45rem 0; }

@media print {
  .ficha .bloque { padding-block: 5pt; border-top-color: #999; }
  .ficha .bloque > * + * { margin-top: 3pt; }
  .ficha p, .ficha li, .ficha td, .ficha th, .ficha .apunte { font-size: 8.6pt; line-height: 1.3; }
  .ficha p { margin-bottom: 3pt; }
  .ficha h1 { font-size: 15pt; }
  .ficha h2 { font-size: 9.6pt; }
  .ficha .entradilla { font-size: 9.2pt; line-height: 1.3; }
  .ficha .rotulo { display: none; }
  .ficha .lista > li { padding-block: 1.6pt; }
  .ficha .lista-puntos > li { margin-bottom: 1.6pt; }
  .ficha th, .ficha td { padding: 1.6pt 8pt 1.6pt 0; }
  .ficha caption { font-size: 7.8pt; padding-bottom: 1.5pt; }
  .ficha .col, .ficha .lista, .ficha .lista-puntos, .ficha p { max-width: none; }
  .ficha + .pie, .ficha + .pie p { font-size: 7.8pt; }
}

/* ---------- ajustes de impresión comprobados con Chrome ----------
   Medido imprimiendo a A4 con márgenes de 14mm (caja útil de 688×1017 px a 96 dpi):
   el dossier se pasaba 38 px y la ficha técnica ocupaba 2.109 px, más del doble.
   Estas reglas van al final a propósito: son las últimas del archivo y ganan. */

@media print {
  /* El dossier se pasaba por poco. Se aprieta el interlineado de los bloques y el pie. */
  .dossier .bloque { padding-block: 2pt; }
  .dossier .bloque > * + * { margin-top: 4pt; }
  .dossier p { margin-bottom: 3pt; }
  .dossier h1 { font-size: 16.5pt; }
  .dossier .entradilla { font-size: 10.5pt; }
  .dossier .pie { padding-block: 3pt 0; }
  .dossier .lista > li { padding-block: 2pt; }

  /* La ficha técnica es un documento denso de nueve apartados: a una sola columna no
     cabe en una cara por mucho que se encoja la letra, y encogerla más la haría
     ilegible para quien la lee en papel. Va a dos columnas, que es como se maqueta de
     verdad una ficha para un expediente. Cada apartado se mantiene entero. */
  /* Una sola columna. Probé dos y no sirve: repartir el mismo texto en dos columnas
     no reduce la altura, solo reparte la misma superficie, y forzarle una altura de
     página hace que Chrome descarte los apartados que no caben. La ficha cabe en una
     cara porque el texto está medido para caber, no por un truco de maquetación.
     Si se añade texto, hay que volver a medirlo: `scripts/medir-impresion.mjs`. */
  .ficha > * { break-inside: avoid; }
  .ficha .bloque {
    break-inside: avoid;
    padding-block: 3pt;
    border-top: 1px solid #bbb;
  }
  .ficha .bloque:first-of-type { border-top: 0; }
  .ficha .bloque > * + * { margin-top: 2.5pt; }
  .ficha p, .ficha li, .ficha td, .ficha th, .ficha .apunte { font-size: 8pt; line-height: 1.28; }
  .ficha p { margin-bottom: 2.5pt; }
  .ficha h1 { font-size: 13pt; line-height: 1.1; }
  .ficha h2 { font-size: 8.8pt; }
  .ficha .entradilla { font-size: 8.4pt; line-height: 1.3; }
  .ficha table { font-size: 7.4pt; max-width: none; }
  .ficha th, .ficha td { padding: 1.2pt 5pt 1.2pt 0; }
  .ficha caption { font-size: 7pt; }
  .ficha .lista > li { padding-block: 1.2pt; }
  .ficha .tabla-marco { overflow: visible; }

  /* En papel sobran la navegación y el pie entero del sitio: son 169 px de A4. */
  .ficha-pagina .cabecera,
  .ficha-pagina > .pie { display: none; }
}

@media print {
  /* En el papel «VIGILIA» salía dos veces seguidas: la marca de la cabecera y el rótulo
     del propio dossier. En pantalla la cabecera sirve para volver a la portada; impresa
     no sirve de nada y además repite. */
  .dossier .cabecera { display: none; }
}