/* =====================================================================
   Coroas Funeral Portugal — páginas interiores

   Reutiliza los tokens y componentes de `styles.css`. Solo añade lo que las
   páginas de contenido necesitan y la portada no tenía.

   🔴 REGLA DEL USUARIO: el texto ocupa el ANCHO ÚTIL, en ordenador y en móvil.
   Nada de columnas estrechas. El límite vive en UNA variable y, al ampliarlo,
   hay que **subir el cuerpo de letra** a la vez.

   ⚠️ Esta primera versión la incumplía: usaba `.container-narrow` (880 px) y
   encima este comentario decía que respetaba la regla. Corregido el 2026-09-01:
   las páginas usan `.container` — la misma variable `--container` (1240 px) que
   ya usan la cabecera, el pie y la portada, así que el contenido queda alineado
   con el resto del sitio en lugar de flotar en una columna más estrecha.

   Y con el ancho subió el cuerpo: de 17 px a **19 px**, con más interlineado.
   Es la segunda mitad de la regla, y sin ella una línea de 1240 px se lee mal.

   Si algún día se quiere de borde a borde sin tope, es cambiar `--container`
   en `styles.css` y nada más — pero entonces hay que subir el cuerpo otra vez.
   ===================================================================== */

/* ---------- Hero de página interior ---------- */
.pagina-hero {
  padding: var(--sp-12) 0 var(--sp-6);
}
.pagina-hero h1 {
  margin-bottom: var(--sp-5);
}
.pagina-hero .lead {
  /* Sin tope de ancho: antes iba a 62ch y era justo lo que el usuario señaló.
     Sube el cuerpo, que a ancho completo un lead de 20 px se queda corto. */
  font-size: clamp(1.1875rem, 1.8vw, var(--fs-24));
}
.pagina-hero .rule--gold {
  margin-top: var(--sp-8);
}
@media (max-width: 720px) {
  .pagina-hero { padding: var(--sp-8) 0 var(--sp-4); }
}

/* Breadcrumb visible, con aire por encima */
.breadcrumb {
  padding-top: var(--sp-6);
  list-style: none;
  margin: 0;
}

/* ---------- Cuerpo de contenido ---------- */
/* Cuerpo a 19 px, tres por encima del base de 16.
   🔴 Va atado al ancho: al pasar de 880 px a 1240 px hay que subir el cuerpo, o
   la línea se hace difícil de seguir. Es la regla del usuario, y las dos mitades
   se cambian juntas o ninguna. El interlineado también sube, a 1.75. */
.pagina-cuerpo {
  padding: var(--sp-8) 0;
  font-size: 1.1875rem;
  line-height: 1.75;
}
.pagina-cuerpo h2 {
  margin-top: var(--sp-12);
  margin-bottom: var(--sp-4);
}
.pagina-cuerpo h2:first-child { margin-top: 0; }
.pagina-cuerpo h3 {
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
}
.pagina-cuerpo p { color: var(--ink-700); }
.pagina-cuerpo ul,
.pagina-cuerpo ol {
  color: var(--ink-700);
  padding-left: var(--sp-5);
  margin: 0 0 var(--sp-4);
}
.pagina-cuerpo li { margin-bottom: var(--sp-3); }
.pagina-cuerpo a {
  color: var(--gold-deep);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.pagina-cuerpo a:hover { color: var(--ink-900); }

/* ---------- Acordeón: la pregunta va dentro de un h3 ----------
   El patrón WAI-ARIA para acordeones envuelve el botón en un encabezado. El
   `<h3>` no debe aportar ni margen ni tipografía propia: el aspecto lo pone
   `.accordion__trigger`, que ya estaba. */
.accordion__heading {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  line-height: inherit;
}

/* ---------- Mensajes de condolencias ---------- */
/* h3 de relación: algo menor que un h2 de bloque, para que la jerarquía se vea
   además de estar en el marcado. */
.mensagens__grupo h3 {
  font-size: clamp(1.25rem, 1.9vw, var(--fs-24));
  margin-bottom: var(--sp-2);
}
.mensagens__grupo { margin-bottom: var(--sp-12); }
.mensagens__grupo h2 { margin-bottom: var(--sp-2); }
.mensagens__lista {
  list-style: none;
  padding: 0;
  margin: var(--sp-5) 0 0;
  display: grid;
  gap: var(--sp-3);
}
.mensagens__lista li { margin: 0; }
.mensagens__lista blockquote {
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--cream-200);
  border-left: 2px solid var(--gold-soft);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.mensagens__lista blockquote p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-20);
  line-height: 1.45;
  color: var(--ink-800);
}
/* Las frases son cortas. A ancho completo, una sola columna dejaría cajas de
   1240 px con cinco palabras dentro, así que la rejilla crece con el ancho:
   2 columnas desde 760 px y 3 desde 1080. Es la forma de aprovechar el ancho
   útil de verdad y no solo de estirar el texto. */
@media (min-width: 760px) {
  .mensagens__lista { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1080px) {
  .mensagens__lista { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Pasos numerados ---------- */
.passos-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: paso;
}
.passos-lista .passo {
  display: flex;
  gap: var(--sp-5);
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--rule);
  margin: 0;
}
.passos-lista .passo:last-child { border-bottom: 0; }
.passo__num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gold-wash);
  color: var(--gold-deep);
  font-family: var(--font-serif);
  font-size: var(--fs-24);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.passo h3 { margin-top: 0; }
.passo p { margin-bottom: 0; }
@media (max-width: 560px) {
  .passos-lista .passo { gap: var(--sp-4); }
  .passo__num { width: 36px; height: 36px; font-size: var(--fs-18); }
}

/* ---------- Contacto ---------- */
.contacto__email {
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 3.2vw, var(--fs-32));
  margin: 0;
  /* El email es largo: sin esto desborda en móvil. */
  word-break: break-word;
}
.contacto__email a {
  color: var(--ink-900);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--gold);
}
.contacto__email a:hover { color: var(--gold-deep); }

/* ---------- Directorios de recintos ---------- */

/* Aviso de neutralidad. Va arriba y visible a propósito: el punto es que nadie
   pueda pensar que estos espacios son nuestros. */
.aviso {
  background: var(--gold-wash);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-10);
}
.aviso p { margin: 0; color: var(--ink-800); }
/* 🔴 Los enlaces del aviso NO van en dorado, y es la TERCERA vez que la misma
   causa muerde en este proyecto: `--gold-deep` (#8a6f38) da 4,76:1 sobre BLANCO
   —0,26 de margen sobre AA— asi que **cualquier fondo con tinte lo tumba**.
   Sobre el `gold-wash` del aviso cae a **3,78:1**.

   Antes se arreglo suelto en `.dados a`, en `.tabla-dados a` y en
   `.painel-dados a`. Arreglarlo otra vez solo donde aparecio seria la trampa
   que este proyecto ya documento: «detectar un fallo en un componente y
   corregirlo solo donde se vio».

   Asi que esta vez se BARRIO EL SITIO: se midio el ratio de cada enlace de
   `<main>` contra su fondo real computado en 12 paginas —28 combinaciones
   distintas de color/fondo/contexto— y este era el unico por debajo de 4,5:1.
   Negro da 19,11:1 y el subrayado mantiene la afordancia. */
.aviso a {
  color: var(--ink-900);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.aviso a:hover { text-decoration-thickness: 2px; }

/* Sin tope: iba a 34rem. */
.recintos-filtro { margin: var(--sp-6) 0 var(--sp-10); }

.distrito { margin-bottom: var(--sp-12); }
.distrito h3 {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.distrito__conta {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
}

/* 🔴 La tabla scrollea DENTRO de su contenedor. El body nunca debe scrollear en
   horizontal: es la regla que ya costó un fallo en el header móvil. */
.tabla-envoltura {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}
.tabla-recintos {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-14);
  font-family: var(--font-sans);
  min-width: 34rem;   /* por debajo de esto, scroll en la envoltura */
}
.tabla-recintos thead th {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  background: var(--cream-200);
  border-bottom: 1px solid var(--rule-strong);
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-600);
  font-weight: 500;
  white-space: nowrap;
}
.tabla-recintos tbody th,
.tabla-recintos tbody td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  color: var(--ink-700);
  font-weight: 400;
  text-align: left;
}
.tabla-recintos tbody th {
  font-family: var(--font-serif);
  font-size: var(--fs-18);
  color: var(--ink-900);
}
.tabla-recintos tbody tr:last-child th,
.tabla-recintos tbody tr:last-child td { border-bottom: 0; }
.tabla-recintos tbody tr:hover { background: var(--cream-200); }

.recinto__pendiente {
  display: inline-block;
  font-size: var(--fs-12);
  letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  color: var(--ink-500);
  white-space: nowrap;
}

/* Utilidad de accesibilidad: visible para lectores, no en pantalla. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Páginas de población ---------- */
/* Hero de dos columnas: texto a la izquierda, banner a la derecha. Igual que la
   portada, para que la página no parezca de otro sitio. */
.pob-hero { padding: var(--sp-10) 0 var(--sp-8); }
.pob-hero__grid {
  display: grid;
  gap: var(--sp-10);
  align-items: center;
}
@media (min-width: 900px) {
  .pob-hero__grid { grid-template-columns: 1.05fr 1fr; }
}
/* Hero sin imagen: una sola columna, texto al ancho util.
   Sin esto, `.pob-hero__grid` deja el texto en la primera de dos columnas y el
   H1 se queda en 590 px de los 1192 que hay. */
.pob-hero--sem-imagem .container > h1,
.pob-hero--sem-imagem .container > .lead { max-width: none; }
.pob-hero h1 { margin-bottom: var(--sp-5); }
.pob-hero .lead { font-size: clamp(1.1875rem, 1.8vw, var(--fs-24)); }
.pob-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.pob-hero__visual img {
  width: 100%;
  height: auto;
  aspect-ratio: 2.41 / 1;
  object-fit: cover;
  border-radius: var(--r-md);
}
@media (max-width: 720px) {
  .pob-hero { padding: var(--sp-6) 0 var(--sp-4); }
  .pob-hero__ctas .btn { width: 100%; }
}

/* ---------- Rejilla de producto ----------
   🔴 Va justo DESPUÉS del banner, no al final: el objetivo de estas páginas es
   vender, y quien llega a una página de población llega con una compra en la
   cabeza y con prisa. */
.produtos-sec {
  padding: var(--sp-8) 0 var(--sp-12);
  background: var(--cream-200);
}
.produtos-sec h2 { margin-bottom: var(--sp-4); }
.produtos-sec .lead { margin-bottom: var(--sp-8); }
.produtos-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px)  { .produtos-grid { grid-template-columns: repeat(3, 1fr); } }
/* 🔴 REGLA: la rejilla llena el ancho util, sea cual sea el numero de productos.
   Con `repeat(6, 1fr)` fijo y 5 productos en catalogo, la sexta columna quedaba
   vacia y la fila moria en 1113 px de los 1292 disponibles. `auto-fit` colapsa
   las pistas vacias y reparte el ancho entre las que hay. */
@media (min-width: 1080px) {
  /* `minmax(160px)` con 5 productos daba 5 columnas de ~215 px: fotos pequenas.
     Con `240px` caben 4 (4x240+72 de gap = 1032 <= 1192) y cada foto pasa a
     ~280 px. Decision del usuario (2026-09-02): menos coronas y mas grandes.
     Se sube el minimo Y se bajan los productos a 4 en las plantillas: solo una
     de las dos cosas no habria cambiado nada, porque `auto-fit` reparte lo que
     haya. */
  .produtos-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

.produto {
  display: flex;
  flex-direction: column;
  background: var(--cream-50);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-med), transform var(--t-med);
}
.produto:hover {
  border-color: var(--gold-soft);
  transform: translateY(-2px);
}
.produto__foto {
  /* Las fotos son 560×680. Se respeta su ratio para no recortar la composición,
     que es justo lo que el cliente está mirando. */
  aspect-ratio: 560 / 680;
  overflow: hidden;
  background: var(--cream-200);
}
.produto__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.produto__body {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}
.produto__nome {
  font-size: var(--fs-18);
  margin: 0;
  line-height: 1.2;
}
.produto__preco {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--gold-deep);
  margin-top: auto;
}
.produtos-sec__mais { margin: var(--sp-10) 0 0; }
@media (max-width: 560px) {
  .produtos-sec__mais .btn { width: 100%; }
}

/* ---------- CTA de cierre ---------- */
.pagina-cta { padding: var(--sp-8) 0 var(--sp-16); }
.pagina-cta .card--ink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: var(--sp-8);
}
.pagina-cta .card--ink p {
  margin: 0;
  color: var(--cream-200);
  font-size: var(--fs-20);
  /* Sin `max-width`: iba a 52ch. Aqui el limite lo pone el flex, porque el
     boton va al lado. */
}
.pagina-cta .btn { flex-shrink: 0; }
@media (max-width: 720px) {
  .pagina-cta .card--ink {
    flex-direction: column;
    align-items: stretch;
    padding: var(--sp-6);
  }
  .pagina-cta .btn { width: 100%; }
}


/* Miniatura del recinto en la tabla del directorio.
   El hueco vacio mide lo mismo que la foto: sin el, las filas con y sin foto
   desalinean la columna del nombre y la tabla se lee peor que sin fotos. */
.recinto__celda {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.recinto__foto {
  width: 56px;
  height: 70px;
  flex-shrink: 0;          /* en un flex, la foto cede sitio al texto por defecto */
  object-fit: cover;
  display: block;
  border: 1px solid var(--rule);
  background: var(--cream-200);
}
.recinto__foto--vazia { border-style: dashed; }


/* =====================================================================
   Ficha de recinto verificado — bloque de datos oficiales

   🔴 REGLA DE ANCHO: la rejilla es `auto-fit` con `minmax`, no un
   `repeat(N, 1fr)`. Con columnas fijas, tres pares de datos en una
   rejilla de cuatro dejaban la ultima pista vacia y la fila moria a
   media pagina — es el segundo de los dos incumplimientos que ya se
   dieron en este proyecto. `auto-fit` colapsa las pistas vacias, asi
   que 3, 4 o 5 pares ocupan igualmente el ancho util.
   ===================================================================== */
/* ⚠️ Aqui vivia la rejilla `.dados` de pares dt/dd del bloque de datos
   oficiales. Retirada el 2026-09-02: el usuario pidio que esa informacion
   fuera en tabla, se hizo, y estas reglas se quedaron sin un solo consumidor.
   Se comprobo sobre lo GENERADO, no sobre el diff: `class="dados"` en 0
   ficheros de `dist/`. Lo que sobrevive es `.dados__fonte`, que sigue en 8
   paginas, y la nueva `.tabla-dados` mas abajo.
   CSS muerto que nadie borra es como una rama inalcanzable: acaba
   describiendo un sitio que ya no existe. */
.dados__fonte { font-size: 1rem; color: var(--ink-700); }

/* =====================================================================
   Tabla de dados oficiais y de horarios (ficha de recinto)

   Sustituye a la rejilla `.dados` de pares dt/dd, que no quedaba bien
   (decision del usuario, 2026-09-02). Las dos tablas de la ficha usan
   esta misma clase para que se parezcan entre si.

   Dos columnas: etiqueta estrecha y valor ancho. La etiqueta lleva su
   ancho en `%` y no en `px` para que a 320 px no ahogue al valor.
   ===================================================================== */
.tabla-dados {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.0625rem;
  background: var(--cream-100);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
}
.tabla-dados tr + tr { border-top: 1px solid var(--rule); }
.tabla-dados th[scope="row"] {
  width: 30%;
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  vertical-align: top;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-600);
  background: var(--cream-200);
  white-space: normal;
}
.tabla-dados td {
  padding: var(--sp-4) var(--sp-5);
  vertical-align: top;
  color: var(--ink-900);
  line-height: 1.55;
  overflow-wrap: break-word;      /* un email largo no desborda la tabla */
}
/* Los enlaces de la tabla, en negro subrayado y NO en dorado: `--gold-deep`
   da 4,76:1 sobre blanco —0,26 de margen sobre AA— y sobre el `cream-200` de
   la columna de etiquetas cae a 4,33:1, que falla. Misma razon que en `.dados`. */
.tabla-dados a {
  color: var(--ink-900);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tabla-dados a:hover { text-decoration-thickness: 2px; }

/* A 480 px las dos columnas no caben: la etiqueta pasa encima del valor.
   Con `width: 30%` y un nombre de via largo, el valor se quedaba en ~120 px. */
@media (max-width: 480px) {
  .tabla-dados, .tabla-dados tbody, .tabla-dados tr,
  .tabla-dados th[scope="row"], .tabla-dados td { display: block; width: auto; }
  .tabla-dados th[scope="row"] { padding-bottom: var(--sp-2); }
  .tabla-dados td { padding-top: 0; }
  .tabla-dados tr + tr { border-top: 1px solid var(--rule); }
}

/* La tabla de horarios no tiene `thead`: las claves van en `th scope="row"`.
   Sin esto la primera columna se estira y los valores quedan pegados. */
.tabla-recintos th[scope="row"] { white-space: normal; }


/* =====================================================================
   FICHAS DE RECINTO — tres plantillas (2026-09-02)

   Decision del usuario: se usan las tres alternando, para que las fichas
   no sean todas iguales. Cual usa cada una lo decide `recintos.py`, y
   `fotografica` esta guardada por el ancho REAL de la foto.

   🔴 Las tres respetan la regla del ancho util: el texto y la rejilla de
   producto van a 1192. Lo unico que se estrecha a proposito es el panel
   de datos de la plantilla A, y son valores de 30 caracteres — una tabla
   de pares a ancho completo era medio ancho de desierto blanco.
   ===================================================================== */

/* ---------- A · «ficha»: datos junto al H1 ---------- */
.ficha-hero { padding: var(--sp-8) 0 var(--sp-10); }
.ficha-hero__grid { display: grid; gap: var(--sp-10); align-items: start; }
@media (min-width: 1000px) {
  /* 400 px fijos para el panel: si fuera `1fr` crecia con el viewport y le
     comia el ancho al H1, que es justo lo que la regla vigila. */
  .ficha-hero__grid { grid-template-columns: minmax(0, 1fr) 400px; gap: var(--sp-12); }
}
.ficha-hero h1 { margin-bottom: var(--sp-5); }
/* La rejilla arranca DEBAJO del h1 y de la entradilla, no a su lado: medido,
   dentro de la rejilla el h1 se quedaba en 744 px de 1192 (60 %) e incumplia
   la regla del ancho util. Ver la nota larga de `_cuerpo_ficha`. */
.ficha-hero__grid { margin-top: var(--sp-8); }
.ficha-hero__ctas { margin-top: 0; }
.ficha-hero__nota {
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-700);
}
.ficha-hero .lead { font-size: clamp(1.1875rem, 1.8vw, var(--fs-24)); }

.painel-dados {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--cream-100);
}
.painel-dados__cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--cream-200);
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.painel-dados__lista { margin: 0; padding: var(--sp-1) var(--sp-5) var(--sp-2); }
.painel-dados__par { padding: var(--sp-3) 0; border-bottom: 1px solid var(--cream-300); }
.painel-dados__par:last-child { border-bottom: none; }
.painel-dados dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: var(--sp-1);
}
.painel-dados dd { margin: 0; font-size: var(--fs-16); line-height: 1.5; overflow-wrap: break-word; }
.painel-dados__pie {
  margin: 0;
  padding: var(--sp-3) var(--sp-5);
  background: var(--cream-200);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-14);
  line-height: 1.5;
}
/* Los enlaces del panel en negro subrayado, no en dorado: `gold-deep` da
   4,76:1 sobre blanco y sobre el `cream-200` de la cabecera cae a 4,33:1. */
.painel-dados a { color: var(--ink-900); text-decoration: underline; text-underline-offset: 2px; }

/* Dos columnas de contenido. `auto-fit` no vale aqui: son dos bloques de
   prosa concretos, no una rejilla de N elementos. */
.ficha-duo { display: grid; gap: var(--sp-10); }
@media (min-width: 900px) { .ficha-duo { grid-template-columns: 1fr 1fr; gap: var(--sp-12); } }
.ficha-duo > div > h2:first-child { margin-top: 0; }

/* ---------- B · «fotografica»: foto a sangre con velo ---------- */
.ficha-hero-foto { position: relative; overflow: hidden; background: var(--ink-900); }
.ficha-hero-foto__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
/* 🔴 EL VELO NO ES DECORATIVO: es lo que hace legible el texto encima.
   PLANO, no degradado — con degradado la seguridad depende de que la foto sea
   clara justo en la franja del texto, y al cambiarla habria que remedir. Plano,
   no depende de la imagen.

   🔑 EL 0,62 ESTA MEDIDO, no elegido a ojo, y el camino importa:
     0,78  0 fallos AA — pero la foto NO SE VE. Se paga el bloque oscuro y no
           se cobra el beneficio, que era darle cara de sitio real.
     0,66  0 fallos, pero el mas bajo era el eyebrow en `gold-soft` a 4,62:1:
           **0,12 de margen**, y con el fondo siendo una FOTO que cambia por
           recinto. 0,12 no es margen.
     0,60  1 fallo.
   Se quito el dorado del eyebrow (ahora `cream-300`) para que dejara de ser la
   restriccion, y entonces 0,62 pasa con holgura: los ratios mas bajos de la
   pagina vuelven a ser los enlaces dorados sobre blanco del resto del sitio
   (4,76:1), o sea que el hero ya no es el limite.

   ⚠️ El velo hace un segundo trabajo: la foto mayor son 552 px y se estira a
   1240 (x2,2). Bajo el velo esa falta de resolucion se lee como profundidad de
   campo. Con fotos de >=1400 px se podria bajar mas; antes, no.
   🔴 Al cambiar la foto de un recinto, REMEDIR: el velo es plano justo para no
   depender de la imagen, pero 0,62 se valido contra esta. */
.ficha-hero-foto__velo { position: absolute; inset: 0; background: #1f1b16; opacity: 0.62; }
.ficha-hero-foto__cuerpo { position: relative; padding-bottom: var(--sp-12); }
.ficha-hero-foto h1 { color: #ffffff; margin-bottom: var(--sp-5); }
.ficha-hero-foto .lead { color: var(--cream-300); font-size: clamp(1.1875rem, 1.8vw, var(--fs-24)); }
/* 🔴 Crema, NO `gold-soft`. Medido: con el dorado suave sobre el velo el
   eyebrow era la restriccion de toda la plantilla — 4,62:1, o sea 0,12 de
   margen sobre AA, y eso con ESTA foto. El fondo aqui es una imagen que cambia
   por recinto, asi que 0,12 de margen no es margen. Con crema el eyebrow deja
   de ser el limite y el velo puede bajar, que es lo que hace visible la foto. */
.eyebrow--claro { color: var(--cream-300); }
.breadcrumb--escuro { color: var(--ink-100); }
.breadcrumb--escuro a { color: var(--ink-100); }
.breadcrumb--escuro a:hover { color: #ffffff; }
.breadcrumb--escuro .breadcrumb__sep { color: var(--ink-400); }
/* 🔴 El item actual necesita SU PROPIA regla, no basta el color del contenedor.
   `styles.css` trae `.breadcrumb [aria-current="page"] { color: var(--ink-900) }`
   con especificidad 0,2,0, asi que ganaba a `.breadcrumb--escuro` (0,1,0) y el
   nombre del cementerio salia en NEGRO sobre el velo oscuro: medido 1,82:1,
   fallo AA. Es la trampa de siempre: el color se elige sobre SU fondo, y aqui
   el fondo cambia sin que el selector base lo sepa. */
.breadcrumb--escuro [aria-current="page"] { color: #ffffff; }
/* Boton claro: solo existe sobre el hero oscuro. `btn--outline` es negro y
   ahi seria invisible. */
.btn--claro { background: transparent; color: #ffffff; border-color: #ffffff; }
.btn--claro:hover { background: #ffffff; color: var(--ink-900); }

.franja-dados { background: var(--cream-200); border-bottom: 1px solid var(--rule); }
.franja-dados__grid {
  display: grid;
  /* `auto-fit` para que 4 o 5 datos llenen igual el ancho util: la trampa de
     la rejilla con mas columnas que elementos ya se pago una vez aqui. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-6) var(--sp-8);
  padding: var(--sp-6) var(--sp-6);
}
.franja-dados__item { min-width: 0; }
.franja-dados__et {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-2);
}
.franja-dados__val { margin: 0; font-size: var(--fs-16); line-height: 1.5; overflow-wrap: break-word; }

/* ---------- C · «editorial»: cero cajas, secciones numeradas ---------- */
.ed-hero { padding: var(--sp-12) 0 var(--sp-16); }
.ed-hero h1 { margin-bottom: var(--sp-6); }
.ed-hero .lead { font-size: clamp(1.25rem, 2vw, var(--fs-24)); }

.ed-sec { padding: var(--sp-10) 0; font-size: 1.1875rem; line-height: 1.75; }
.ed-sec .container > p { color: var(--ink-700); }
.ed-sec__cabeza {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  /* La regla NEGRA es lo que da la jerarquia en esta plantilla: sustituye a
     las cajas. El h2 baja de tamano y deja de competir con el h1. */
  border-top: 1px solid var(--ink-900);
  padding-top: var(--sp-6);
  margin-bottom: var(--sp-8);
}
.ed-sec__cabeza h2 { font-size: clamp(1.375rem, 2.2vw, var(--fs-28)); margin: 0; }
.ed-sec__num {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gold-deep);
}
.ed-sec__cabeza .selo-ok { margin-left: auto; }

.ed-dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-8) var(--sp-12);
  margin: 0 0 var(--sp-6);
}
.ed-dado { min-width: 0; }
.ed-dado dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.ed-dado dd { margin: 0; font-size: 1.0625rem; line-height: 1.55; overflow-wrap: break-word; }
/* El horario en serif grande: es el dato que se busca en una ficha de recinto. */
.ed-dado__destaque {
  font-family: var(--font-serif);
  font-size: var(--fs-24);
  line-height: 1.25;
}
.ed-duo { display: grid; gap: var(--sp-6) var(--sp-12); }
@media (min-width: 900px) { .ed-duo { grid-template-columns: 1fr 1fr; } }
.ed-duo p { color: var(--ink-700); }

/* ---------- Sello de estado, compartido por las tres ---------- */
.selo-ok {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  /* Verde hondo, no el verde de la tienda: sobre `cream-200` el de la tienda
     da 4,2:1 y falla AA. Medido mas abajo. */
  color: var(--shop-green-deep);
}
.selo-ok svg { flex-shrink: 0; }


/* =====================================================================
   DIRECTORIOS — lista de espacios (2026-09-02, noche 3)

   Sustituye a las tablas por grupo. El diseno anterior pintaba UNA TABLA
   POR GRUPO con su cabecera completa: en `/tanatorios/` eran nueve
   cabeceras para 15 espacios (siete localidades con UNA fila), y en
   `/igrejas/` CUARENTA Y SIETE para 77 filas, con la pagina a 17.174 px.

   🔴 Y sin columna de foto: de 98 cementerios solo 8 tienen, y de los 15
   centros funerarios y las 77 igrejas, NINGUNO. El hueco reservado
   bajaba por la pagina como una columna de recuadros punteados vacios.
   ===================================================================== */

/* La banda de filtro, pegada al hero. Antes el filtro estaba enterrado
   debajo de tres bloques de explicacion. */
.filtro-banda {
  background: var(--cream-200);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.filtro-banda__grid {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-5);
}
.filtro-banda__et {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.filtro-banda__input {
  flex: 1 1 260px;
  min-width: 0;          /* en un flex, sin esto el input no baja de su tamano */
  min-height: 48px;
  background: var(--cream-100);
}
.filtro-banda__conta {
  /* ⚠️ SIN `flex-shrink: 0`. Lo tenia, y en `/tanatorios/` el texto es
     «15 centros funerários, tanatórios e crematórios · 0 confirmados»: a 320 px
     no encogia y desbordaba la pagina a 502 px. Aqui el contador SI puede
     partirse en varias lineas; lo que no debe encoger es el boton de un CTA,
     no un contador. */
  margin: 0;
  min-width: 0;
  font-size: var(--fs-16);
}

/* Los grupos. `auto-fit` para que llenen el ancho util: con 10 distritos o
   con 3 localidades, la rejilla reparte lo que haya. */
/* 🔴 UNA SOLA COLUMNA, tambien en ordenador. Decision del usuario
   (2026-09-02): «me gusta el acordeon como se ve en movil, ponlo igual en
   formato pc». Iba en `repeat(auto-fit, minmax(min(360px,100%), 1fr))`, que
   daba 3 columnas a 1440 px y 1 en movil.
   Y no es solo gusto: con los grupos en varias columnas, **abrir uno reflota
   los de al lado** y la lista salta bajo el cursor. A una columna cada grupo
   ocupa los 1192 px del ancho util y al abrirse solo empuja hacia abajo.
   ⚠️ Se conserva la rejilla (no `block`) para que el `gap` siga siendo el
   unico sitio donde vive la separacion entre grupos. */
.pagina-cuerpo [data-tanatorio-list] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}
/* Los grupos son `<details>` nativos, cerrados por defecto. Ver la nota de
   `_lista()`: no se reutiliza `.accordion` porque su panel abre con
   `max-height: 800px` y el grupo de Braga (37 espacios) se habria cortado. */
.espacos-grupo { min-width: 0; break-inside: avoid; }
.espacos-grupo__cabeza {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-3);
  /* Regla negra bajo el titulo del grupo: es lo que separa un grupo de otro
     ahora que no hay cabecera de tabla. */
  border-bottom: 1px solid var(--ink-900);
  padding: var(--sp-2) 0;
  margin: 0;
  cursor: pointer;
  list-style: none;        /* Firefox: quita el triangulo por defecto */
}
/* Safari/Chrome: el marcador va por pseudoelemento, no por `list-style`. */
.espacos-grupo__cabeza::-webkit-details-marker { display: none; }
.espacos-grupo__cabeza:hover .espacos-grupo__titulo { color: var(--gold-deep); }
/* Foco visible: el `summary` es el control, y sin esto no se ve al tabular. */
.espacos-grupo__cabeza:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}
.espacos-grupo__titulo {
  margin: 0;
  font-size: var(--fs-24);
  transition: color var(--t-fast);
}
.espacos-grupo__conta {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
/* El «+» que pasa a «−» al abrir. `margin-left: auto` lo manda al extremo.
   ⚠️ El `gap` del flex no es opcional: sin el, cuando el titulo es largo el
   icono acaba pegado a la ultima letra. Es la regla de componente que este
   proyecto ya pago a 320 px. */
.espacos-grupo__icone {
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
  position: relative;
  width: 20px;
  height: 20px;
}
.espacos-grupo__icone::before,
.espacos-grupo__icone::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--ink-900);
  transform: translate(-50%, -50%);
}
.espacos-grupo__icone::before { width: 13px; height: 1px; }
.espacos-grupo__icone::after {
  width: 1px;
  height: 13px;
  transition: transform var(--t-med);
}
.espacos-grupo[open] .espacos-grupo__icone::after { transform: translate(-50%, -50%) scaleY(0); }
.espacos-grupo[open] .espacos-grupo__cabeza { margin-bottom: var(--sp-1); }

.espacos-lista { list-style: none; margin: 0; padding: 0; }
/* 🔴 `gap` y `flex-shrink: 0` en el ultimo hijo NO son opcionales en un
   `space-between`: sin ellos, cuando no sobra ancho los items se TOCAN y el
   estado cede su sitio al nombre. Es la regla de componente que este proyecto
   ya pago una vez, con la flecha montada sobre la ultima letra a 320 px. */
.espaco {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--cream-300);
  font-size: 1.0625rem;
  line-height: 1.5;
}
.espaco:last-child { border-bottom: none; }
/* Por debajo de 420 px el nombre y el estado no caben en la misma linea: el
   estado bajaba y quedaba pegado al nombre. Se apilan. */
@media (max-width: 420px) {
  .espaco { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
}
.espaco__nome { min-width: 0; }
.espaco__nome a { color: var(--ink-900); text-decoration: underline; text-underline-offset: 2px; }
.espaco__nome a:hover { color: var(--gold-deep); }
.espaco__sub {
  display: block;
  font-size: var(--fs-14);
  color: var(--ink-700);
}
.espaco__ok {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  letter-spacing: 0.04em;
  /* Verde hondo: sobre blanco el verde de la tienda da 4,2:1 y falla AA. */
  color: var(--shop-green-deep);
}
.espaco .recinto__pendiente { flex-shrink: 0; }

/* Dos columnas para la explicacion, que ahora va DEBAJO de la lista. */
.colunas-info { display: grid; gap: var(--sp-10) var(--sp-12); }
@media (min-width: 900px) { .colunas-info { grid-template-columns: 1fr 1fr; } }
.colunas-info > div > h2:first-child { margin-top: 0; }

/* El aviso de neutralidad al pie del cuerpo. Sigue estando y sigue siendo
   visible, pero deja de ser lo primero que pesa en la pagina: es informacion
   legal necesaria, no el contenido que la gente viene a buscar. */
.aviso--pie { margin-top: var(--sp-10); margin-bottom: 0; }


/* =====================================================================
   /como-funciona/ — los pasos como ESCALERA (2026-09-02, noche 3)

   Antes eran `.passos-lista` con un circulito de 24 px y una regla fina:
   se leian como una lista con viñetas, no como un proceso. Ahora cada
   paso ocupa su franja con el numero en serif grande.
   ===================================================================== */
.passos-escada { list-style: none; margin: 0; padding: 0; }
.passo {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--rule);
}
.passo:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 720px) {
  /* 120 px fijos para el numero: con `auto` la columna cambiaba de ancho
     entre «01» y «05» y los titulos no alineaban. */
  .passo { grid-template-columns: 120px minmax(0, 1fr); gap: var(--sp-8); }
}
.passo__num {
  font-family: var(--font-serif);
  font-size: var(--fs-56);
  line-height: 0.9;
  color: var(--gold-soft);
  /* No es texto para leer: es un ordinal decorativo, y el `<ol>` ya da el
     orden a un lector de pantalla. Por eso lleva `aria-hidden` en el HTML y
     por eso `gold-soft` aqui no es un fallo de contraste. */
}
/* h2, no h3: cada paso es una seccion de primer nivel (ver la nota de
   `_como_funciona_body`). El tamano se fija aqui para que no herede el clamp
   del h2 global, que llega a 3rem y competiria con el h1. */
.passo__corpo h2 {
  margin: 0 0 var(--sp-3);
  font-size: clamp(1.375rem, 2.2vw, var(--fs-28));
}
.passo__corpo p { margin: 0 0 var(--sp-3); color: var(--ink-700); }
.passo__corpo p:last-child { margin-bottom: 0; }
.passo__extra { font-size: var(--fs-16); }

/* =====================================================================
   /contacto/ — el email como CANAL
   ===================================================================== */
.contacto-hero { padding: var(--sp-8) 0 var(--sp-16); }
/* 🔴 EL H1 Y LA ENTRADILLA VAN FUERA DE LA REJILLA, a ancho completo.
   Medido: dentro de la rejilla, junto al aside de 460 px, el h1 se quedaba en
   **684 px de 1192 — un 55 %**. Es EL MISMO error que se cometio hoy en la
   plantilla `ficha` de las fichas de cementerio y que la medicion ya delato una
   vez: da igual que al lado haya datos utiles en vez de una imagen, la regla
   habla del ancho del h1. */
.contacto-hero__grid { display: grid; gap: var(--sp-10); align-items: start; margin-top: var(--sp-8); }
@media (min-width: 1000px) {
  .contacto-hero__grid { grid-template-columns: minmax(0, 1fr) 460px; gap: var(--sp-12); }
}
.contacto-hero h1 { margin-bottom: var(--sp-5); }
.contacto-hero .lead { font-size: clamp(1.1875rem, 1.8vw, var(--fs-24)); }

.canal { border: 1px solid var(--ink-900); border-radius: var(--r-md); overflow: hidden; }
.canal__et {
  margin: 0;
  padding: var(--sp-3) var(--sp-6);
  background: var(--ink-900);
  color: var(--cream-200);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.canal__corpo { padding: var(--sp-6); }
.canal__email {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, var(--fs-32));
  line-height: 1.2;
  color: var(--ink-900);
  text-decoration: none;
  border-bottom: 2px solid var(--gold-soft);
  /* Un email largo en un contenedor estrecho: sin esto desborda la caja. */
  word-break: break-word;
}
.canal__email:hover { border-color: var(--ink-900); }
.canal__corpo p { margin: var(--sp-5) 0 0; font-size: var(--fs-16); line-height: 1.6; }

.email-check {
  background: var(--cream-200);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--sp-8);
}
.email-check h2 { margin: 0 0 var(--sp-2); font-size: clamp(1.375rem, 2.2vw, var(--fs-28)); }
.email-check > p { font-size: var(--fs-16); margin: 0 0 var(--sp-6); }
.email-check__lista { list-style: none; margin: 0; padding: 0; }
.email-check__lista li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--rule);
}
.email-check__lista li:last-child { border-bottom: 1px solid var(--rule); }
.email-check__num {
  font-family: var(--font-serif);
  font-size: var(--fs-24);
  line-height: 1;
  color: var(--gold-deep);
}
.email-check__texto { font-size: 1.0625rem; line-height: 1.5; }
.email-check__pie { margin: var(--sp-5) 0 0; font-size: var(--fs-16); }

/* Banda clara a ancho completo, para el bloque de «como tratamos os pedidos»:
   es la duda que trae a la gente a esta pagina, asi que se responde de frente
   en vez de en un h2 mas de la columna.

   🔴 Este comentario nombraba la frase que se retiro del sitio el 2026-09-03, y
   el CSS SE PUBLICA (va dentro del paquete `base-<hash>.css`). O sea que el
   barrido de `linha telef` daba positivo sobre lo servido y el diagnostico
   parecia un incumplimiento de la regla. Es la regla del proyecto: si un
   barrido busca una cadena, esa cadena no se escribe en un comentario. */
.banda-clara {
  background: var(--cream-200);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--sp-16) 0;
  font-size: 1.1875rem;
  line-height: 1.75;
}
.banda-clara p { color: var(--ink-700); }
.banda-clara h2 { margin-top: var(--sp-10); margin-bottom: var(--sp-4); }
.banda-clara .colunas-info > div > h2:first-child { margin-top: 0; }


/* La tercera linea de la fila: morada y telefone del recinto. Es lo que aporto
   el export del CRM (2026-09-02). El telefono es del RECINTO, no nuestro. */
.espaco__dado {
  display: block;
  font-size: var(--fs-14);
  line-height: 1.45;
  color: var(--ink-700);
  margin-top: 2px;
}
.espaco__tel { white-space: nowrap; }
/* Estado propio del tier «registo»: ni «Confirmado» (que es la ficha municipal)
   ni «Por confirmar» (que es no tener datos). Gris de texto, no verde: el verde
   esta reservado a lo verificado contra la camara. */
.espaco__registo {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  letter-spacing: 0.04em;
  color: var(--ink-700);
}
/* La fila crece a tres lineas: `baseline` alineaba el estado con la primera
   linea del nombre y quedaba flotando. `start` lo deja arriba, a su altura. */
.espaco { align-items: flex-start; }
.espaco__ok, .espaco__registo, .espaco .recinto__pendiente { margin-top: 3px; }

/* Los recintos del concelho en la pagina de poblacion: lista sin estado, que
   ahi el estado es el mismo para todos (nuestro registro). Ver la nota de
   `_recintos_do_concelho`: es lo que baja la similitud entre las 8 paginas. */
.espacos-lista--concelho { margin-bottom: var(--sp-6); }
.espacos-lista--concelho .espaco { align-items: flex-start; }

/* ---------- Navegación entre fichas de cementerio ----------
   Cierra el silo que midió el auditor (Q2): Monte d'Arcos y Prado do Repouso
   tenían 2 enlaces entrantes. Es NAVEGACIÓN, no contenido: no afirma nada de
   terceros, solo dice que en esta web hay otra ficha.

   🔴 Fondo BLANCO y enlace NEGRO a propósito. El oro (`--gold-deep`, 4.76:1
   sobre blanco) tiene 0,26 de margen y suspende AA en cuanto el fondo se tinta
   — ya pasó tres veces en este proyecto. Los mismos colores que
   `.espaco__nome`, que están medidos. */
.pagina-cuerpo--apertada { padding-top: 0; }
.nav-fichas {
  border-top: 1px solid var(--cream-300);
  padding-top: var(--sp-8);
}
.nav-fichas h2 { font-size: var(--fs-24); }
.nav-fichas__lista {
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--sp-5);
  display: grid;
  /* `min()` para que a 320 px la pista no fuerce desbordamiento: es el fallo
     que ya dio 502 px de ancho en el barrido 320-1440. */
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: var(--sp-4) var(--sp-6);
}
.nav-fichas__lista li { margin-bottom: 0; }
.nav-fichas__lista a {
  display: block;
  color: var(--ink-900);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}
.nav-fichas__lista a:hover { color: var(--gold-deep); }
.nav-fichas__local {
  display: block;
  font-size: var(--fs-14);
  color: var(--ink-700);
  text-decoration: none;
  font-weight: 400;
}
.nav-fichas__mais { font-size: var(--fs-16); }

/* Enlace al distrito dentro del panel del acordeón (cierra el silo Q2). */
.espacos-grupo__mais {
  margin: var(--sp-4) 0 0;
  padding-left: var(--sp-4);
  font-size: var(--fs-16);
}

/* =====================================================================
   /contacto/ — el FORMULARIO (2026-09-09)
   =====================================================================
   Reutiliza `.input`, `.select`, `.textarea`, `.field-label` y `.btn--primary`
   de `styles.css`: son componentes del sistema y ya estan medidos. Aqui solo
   va lo que es propio de esta seccion.

   🔴 REGLA DE ANCHO UTIL. El formulario ocupa el `.container` completo (1192 px
   utiles) y los campos van en dos columnas, no en una columna estrecha al lado
   de un texto. El h2 y la entradilla, fuera de cualquier rejilla — es el mismo
   error que ya se cometio en el hero de esta pagina y en la plantilla `ficha`.
   ===================================================================== */
.form-sec {
  padding: var(--sp-16) 0;
  border-top: 1px solid var(--rule);
}
.form-sec h2 { margin: 0 0 var(--sp-4); }
.form-sec .lead { font-size: clamp(1.1875rem, 1.8vw, var(--fs-24)); margin-bottom: var(--sp-10); }

.form-contacto__fila { display: grid; gap: 0 var(--sp-6); }
@media (min-width: 760px) {
  .form-contacto__fila { grid-template-columns: 1fr 1fr; }
}

/* 🔴 El honeypot se esconde SACANDOLO DEL VIEWPORT, no con `display:none` ni
   `visibility:hidden`: hay bots que descartan lo que el navegador no pinta, y
   entonces la trampa no atrapa a nadie. `aria-hidden` + `tabindex="-1"` en el
   HTML lo mantienen fuera del lector de pantalla y del recorrido de tabulacion,
   asi que para una persona no existe. */
.form-contacto__trampa {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 0;
  height: 0;
  overflow: hidden;
}

.form-contacto .field { margin-bottom: var(--sp-5); }
/* El asterisco de obligatorio: `<abbr>` sin subrayado punteado, que en un
   asterisco no aporta y en Firefox se ve como suciedad. El titulo se conserva
   para el lector de pantalla. */
.form-contacto abbr[title] { text-decoration: none; color: var(--gold-deep); }
.form-contacto__consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  margin: var(--sp-2) 0 var(--sp-6);
  font-size: 1.0625rem;
  line-height: 1.5;
  cursor: pointer;
}
/* 24 px y no el tamano por defecto (13 px): es un control que hay que acertar
   con el dedo. El area util efectiva la da el `<label>`, que envuelve el texto
   entero. */
.form-contacto__consent input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--ink-900);
  flex-shrink: 0;
}
.form-contacto__consent a { color: var(--ink-900); text-decoration: underline; text-underline-offset: 2px; }
.form-contacto__consent a:hover { color: var(--gold-deep); }

/* El widget de Google mide 302x78 px fijos y no es responsive. A 375 px de
   ancho cabe (el contenedor tiene 343), pero a 320 desborda: el `overflow-x`
   lo deja desplazarse dentro de su caja en vez de ensanchar la pagina, que es
   la regla del proyecto para cualquier bloque ancho. */
/* 🔴 `min-height` reservado: el widget lo inyecta `contacto.js` al primer foco
   (ver la nota larga alli), asi que el hueco tiene que existir ANTES de que
   llegue. Sin esto, el iframe de 78 px empuja el resto del formulario al
   aparecer y el CLS sube — el sitio esta en 0,0000 y no se rompe por esto. */
.form-contacto .g-recaptcha { margin-bottom: var(--sp-6); overflow-x: auto; min-height: 78px; }

.form-contacto__msg {
  margin: 0 0 var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  font-size: 1.0625rem;
  line-height: 1.5;
}
/* Los dos estados van con borde ADEMAS del fondo: el color por si solo no es
   un canal accesible, y el texto del mensaje ya dice lo que ha pasado.
   Contrastes sobre su propio fondo, no sobre el de la pagina. */
.form-contacto__msg.is-ok   { background: #eaf3ec; border: 1px solid #b9d5c1; color: #17402c; }
.form-contacto__msg.is-erro { background: #f9ebea; border: 1px solid #e0b6b3; color: #6d211c; }

/* 🔴 UNA SOLA COLUMNA, y esto se decidio MIDIENDO. La primera version ponia el
   boton y la nota legal en dos columnas (`auto minmax(0,1fr)`): se ve bien y
   dejaba el parrafo legal en **944 px de los 1192 utiles, un 79 %**, o sea
   incumpliendo la regla de ancho del proyecto sin que hubiera ni un `max-width`
   de por medio. Es la segunda forma de incumplirla de las dos que documenta el
   CLAUDE.md: una rejilla que estrecha texto sin que se note.

   Asi el boton ocupa su contenido (es un control, no texto) y la nota legal
   ocupa el ancho util completo. Medido: 1192 px, 100 %. */
.form-contacto__pie {
  display: grid;
  gap: var(--sp-6);
  justify-items: start;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--rule);
}
.form-contacto__legal { margin: 0; font-size: var(--fs-16); line-height: 1.55; color: var(--ink-700); }
.form-contacto__legal a { color: var(--ink-900); text-decoration: underline; text-underline-offset: 2px; }

/* El puente desde la tarjeta del email hacia el formulario. */
.canal__alt { font-size: var(--fs-16); }
.canal__alt a { color: var(--ink-900); text-decoration: underline; text-underline-offset: 2px; }
.canal__alt a:hover { color: var(--gold-deep); }