/* sitio.css · indivisos.app (V3)
   Variables, tipografía, cabecera, portada, bandas, pie y la línea de tu parte.
   El formulario va en formulario.css. Sin frameworks ni librerías. */

@font-face {
  font-family: 'Archivo';
  src: url('/fuentes/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62.5% 125%;
  font-display: swap;
}

@font-face {
  font-family: 'Newsreader';
  src: url('/fuentes/newsreader-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --blanco: #FFFFFF;
  --negro: #0E0E0E;
  --tinta: #111111;
  --gris-fondo: #F2F2F2;
  --gris-linea: #D6D6D6;
  --gris-texto: #646464;
  --gris-campo: #646464;
  --rojo: #7D1E1E;
  --rojo-encima: #611616;
  --boton: var(--tinta);
  --boton-encima: var(--blanco);
  --boton-pulsado: var(--gris-fondo);
  --radio: 2px;
  --salida: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* La línea de tu parte: de 0 a 1. La fija sitio.js con el porcentaje del formulario. */
  --parte: 0.5;
  --fuente-titulos: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --fuente-texto: 'Newsreader', Georgia, 'Times New Roman', serif;
  --cabecera-alto: 64px;
  --margen: 20px;
  --ancho: 1200px;
}

@media (min-width: 768px) { :root { --margen: 40px; } }
@media (min-width: 1024px) { :root { --cabecera-alto: 76px; } }

/* ——— Base ——— */

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--cabecera-alto) + 16px); }
html.menu-abierto { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { padding: 0; background: none; border: 0; cursor: pointer; }
p { text-wrap: pretty; }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--rojo); }
a:active { color: var(--rojo-encima); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

h1, h2, h3 { font-family: var(--fuente-titulos); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-size: clamp(2rem, 1.45rem + 2.4vw, 3rem); font-stretch: 90%; }
h3 { font-size: 1.25rem; font-weight: 600; font-stretch: 95%; line-height: 1.25; letter-spacing: 0; }

.contenedor { width: 100%; max-width: calc(var(--ancho) + 2 * var(--margen)); margin-inline: auto; padding-inline: var(--margen); }

.saltar {
  position: absolute;
  top: -200px;
  left: 16px;
  z-index: 100;
  padding: 12px 16px;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  color: var(--blanco);
  background: var(--tinta);
  text-decoration: none;
}
.saltar:focus { top: 16px; }

/* ——— La línea de tu parte: el logotipo ———
   Cajita con borde y, dentro, el tramo rojo que mide --parte. */

.logo { display: inline-flex; align-items: center; height: 44px; margin-right: auto; color: inherit; text-decoration: none; }
.logo__parte { display: block; width: 44px; height: 18px; padding: 2px; border: 1.5px solid currentColor; }
.logo__parte::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: var(--rojo);
  transform: scaleX(var(--parte));
  transform-origin: left;
  transition: transform 700ms var(--salida);
}

/* ——— Cabecera ——— */

.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--cabecera-alto);
  color: var(--blanco);
  background: transparent;
  transition: background-color 250ms, color 250ms, box-shadow 250ms;
}
.cabecera.is-solida, .cabecera.is-abierta { color: var(--tinta); background: var(--blanco); box-shadow: inset 0 -1px 0 var(--gris-linea); }
.cabecera a:hover, .cabecera a:active { color: inherit; }
.cabecera__fila { display: flex; align-items: center; gap: 12px; height: 100%; }

.cabecera__boton { width: auto; min-height: 44px; padding: 0 16px; font-size: 15px; white-space: nowrap; }
html.js .cabecera:not(.is-solida):not(.is-abierta) .cabecera__boton { color: var(--tinta); background: var(--blanco); border-color: var(--blanco); }
html.js .cabecera:not(.is-solida):not(.is-abierta) .cabecera__boton:hover { color: var(--blanco); background: transparent; border-color: var(--blanco); }

.cabecera__menu-boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 4px 0 10px;
  font-family: var(--fuente-titulos);
  font-size: 15px;
  font-weight: 600;
}
.cabecera__menu-icono { position: relative; width: 22px; height: 14px; }
/* En móviles estrechos no caben logotipo, botón y la palabra «Menú»: la palabra
   queda solo para lectores de pantalla y el icono no toca el borde */
@media (max-width: 400px) {
  .cabecera__menu-boton { padding: 0 2px 0 6px; }
  .cabecera__menu-boton [data-menu-texto] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.cabecera__menu-icono::before, .cabecera__menu-icono::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  transition: transform 250ms var(--salida), top 250ms var(--salida);
}
.cabecera__menu-icono::before { top: 1px; }
.cabecera__menu-icono::after { top: 11px; }
.cabecera.is-abierta .cabecera__menu-icono::before { top: 6px; transform: rotate(45deg); }
.cabecera.is-abierta .cabecera__menu-icono::after { top: 6px; transform: rotate(-45deg); }

/* Menú: en el móvil, a pantalla completa bajo la cabecera */
.cabecera__nav { display: none; }
.cabecera__nav.is-abierto {
  position: fixed;
  inset: var(--cabecera-alto) 0 0 0;
  display: flex;
  flex-direction: column;
  padding: 16px var(--margen) 40px;
  overflow: auto;
  color: var(--tinta);
  background: var(--blanco);
}
.cabecera__lista a {
  display: block;
  padding: 16px 0;
  font-family: var(--fuente-titulos);
  font-size: clamp(1.75rem, 1rem + 4vw, 2.25rem);
  font-weight: 700;
  font-stretch: 90%;
  line-height: 1.1;
  text-decoration: none;
  border-bottom: 1px solid var(--gris-linea);
}
.cabecera__telefono {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 32px;
  font-family: var(--fuente-titulos);
  font-size: 1.5rem;
  font-weight: 600;
  text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
  .cabecera__nav.is-abierto { animation: menu-entra 250ms var(--salida); }
}
@keyframes menu-entra { from { opacity: 0; } }

@media (min-width: 1024px) {
  .cabecera__menu-boton { display: none; }
  .cabecera__nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
  .cabecera__lista { display: flex; gap: 22px; }
  .cabecera__lista a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 2px;
    font-size: 15px;
    font-weight: 500;
    font-stretch: 100%;
    border: 0;
  }
  .cabecera__lista a:hover { text-decoration: underline; text-underline-offset: 6px; }
  .cabecera__telefono { margin-top: 0; font-size: 15px; }
  .cabecera__telefono:hover { text-decoration: underline; text-underline-offset: 6px; }
}

/* Sin JavaScript: cabecera blanca y estática, con el menú a la vista */
html:not(.js) .cabecera { position: static; height: auto; color: var(--tinta); background: var(--blanco); box-shadow: inset 0 -1px 0 var(--gris-linea); }
html:not(.js) .cabecera__fila { flex-wrap: wrap; min-height: var(--cabecera-alto); padding-block: 10px; }
html:not(.js) .cabecera__menu-boton { display: none; }
html:not(.js) .cabecera__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; width: 100%; order: 10; }
html:not(.js) .cabecera__lista { display: flex; flex-wrap: wrap; gap: 4px 20px; }
html:not(.js) .cabecera__lista a { padding: 8px 0; font-size: 15px; font-weight: 500; font-stretch: 100%; border: 0; }
html:not(.js) .cabecera__telefono { margin-top: 0; font-size: 15px; }

/* ——— Portada ———
   Rejilla a sangre. La foto ocupa las primeras filas (titular y nota) y, en el
   móvil, se alarga por debajo para que el formulario quede montado sobre su borde.
   En escritorio, la foto cubre la columna de texto y el formulario la desborda. */

.portada {
  position: relative;
  display: grid;
  grid-template-columns: minmax(var(--margen), 1fr) [content-start] minmax(0, 720px) [content-end] minmax(var(--margen), 1fr);
  padding-bottom: 56px;
  background: var(--blanco);
}

.portada__foto {
  position: relative;
  z-index: 0;
  grid-column: 1 / -1;
  grid-row: 1 / 3;
  min-height: 0;
  margin-bottom: -260px;
  overflow: hidden;
  background: var(--negro);
}

.portada__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  opacity: 0.3;
}

@media (prefers-reduced-motion: no-preference) {
  .portada__img { animation: asentar 2000ms var(--salida) both; }
}
@keyframes asentar { from { transform: scale(1.06); } to { transform: scale(1); } }

.portada__texto { display: contents; }
.portada__titulo, .portada__nota, .portada__subtitulo, .apoyos, .portada .formulario-caja { position: relative; z-index: 1; grid-column: content; }

.portada__titulo {
  grid-row: 1;
  margin-top: calc(var(--cabecera-alto) + 28px);
  color: var(--blanco);
  font-size: clamp(2.375rem, 1.5rem + 4vw, 4.25rem);
  font-stretch: 87.5%;
  line-height: 0.98;
  letter-spacing: -0.015em;
}

/* «Tú pones el precio.»: la marca roja del titular, en todas las portadas con formulario */
.portada__precio {
  display: block;
  width: fit-content;
  margin-top: 0.16em;
  padding: 0.04em 0.16em 0.1em;
  margin-left: -0.16em;
  background: var(--rojo);
  color: var(--blanco);
}

.portada__nota {
  grid-row: 2;
  margin-top: 18px;
  padding-bottom: 28px;
  color: var(--blanco);
  font-family: var(--fuente-titulos);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* «Sin darnos tu teléfono si no quieres.»: la misma marca roja que «Tú pones el precio.» */
.portada__marca {
  padding: 0.1em 0.3em 0.15em;
  background: var(--rojo);
  color: var(--blanco);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  white-space: nowrap;
}

.portada .formulario-caja { grid-row: 3; z-index: 2; width: 100%; max-width: none; margin: 0; }

/* «También compramos pisos de renta antigua» (portada, 25 oct 2026): enlace
   grande debajo de la nota, a la vista sin bajar, a /vender-piso-renta-antigua/.
   Con la misma marca roja que «Sin darnos tu teléfono…»: el rojo va en el texto
   (portada__renta-texto) y se ciñe a cada línea si el enlace ocupa dos. La
   flecha va pegada a la última palabra (portada__renta-fin, sin cortes). */
.portada__renta {
  display: block;
  width: fit-content;
  margin-top: 22px;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 1.875rem);
  font-stretch: 87.5%;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--blanco);
  text-decoration: none;
}
.portada__renta-texto {
  padding: 0.1em 0.3em 0.15em;
  background: var(--rojo);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-color 200ms;
}
.portada__renta-fin { white-space: nowrap; }
.portada__renta .icono { width: 0.9em; height: 0.9em; margin-left: 0.25em; vertical-align: -0.1em; stroke-width: 2; transition: transform 250ms var(--salida); }
.portada__renta:hover, .portada__renta:active { color: var(--blanco); }
.portada__renta:hover .portada__renta-texto { background: var(--rojo-encima); }
.portada__renta:hover .icono { transform: translateX(6px); }
/* Móvil y tableta (6 nov 2026): el enlace va debajo del formulario, para que quien
   llega de un anuncio vea el formulario sin bajar. En ordenador sigue en la nota,
   porque allí el formulario va en su propia columna. */
.portada__nota .portada__renta { display: none; }
.portada__renta--bajo { position: relative; z-index: 1; grid-column: content; grid-row: 4; font-family: var(--fuente-titulos); }

.portada__subtitulo { grid-row: 5; margin-top: 40px; font-size: 1.125rem; line-height: 1.5; }

.apoyos { grid-row: 6; display: grid; gap: 14px; margin-top: 28px; }
.apoyos li {
  position: relative;
  padding-left: 20px;
  font-family: var(--fuente-titulos);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
}
.apoyos li::before { content: ''; position: absolute; left: 0; top: 0.45em; width: 8px; height: 8px; background: var(--tinta); }

@media (min-width: 768px) {
  .portada__foto { margin-bottom: -320px; }
  .portada__titulo { margin-top: calc(var(--cabecera-alto) + 48px); }
  .portada__nota { padding-bottom: 40px; }
  .apoyos { grid-template-columns: 1fr 1fr; gap: 16px 32px; }
}

@media (min-width: 1024px) {
  .portada {
    grid-template-columns: minmax(var(--margen), 1fr) [content-start] minmax(0, 616px) 64px [form-start] minmax(400px, 460px) [content-end] minmax(var(--margen), 1fr);
    padding-bottom: 80px;
  }
  .portada__foto { grid-row: 1; min-height: clamp(640px, 100svh, 820px); margin-bottom: 0; }
  .portada__texto {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    grid-column: content-start / 3;
    grid-row: 1;
    padding-top: calc(var(--cabecera-alto) + 72px);
    padding-bottom: 88px;
    color: var(--blanco);
  }
  .portada__titulo { margin-top: 0; font-size: clamp(3rem, 1rem + 3.4vw, 4.25rem); }
  .portada__subtitulo { margin-top: 28px; color: var(--blanco); font-size: 1.25rem; max-width: 32em; }
  .portada__nota { margin-top: 28px; padding-bottom: 0; }
  .portada .formulario-caja { grid-column: form-start / content-end; grid-row: 1 / 3; align-self: start; margin-top: calc(var(--cabecera-alto) + 56px); }
  .apoyos { grid-column: content-start / 3; grid-row: 2; align-self: start; gap: 20px 32px; margin-top: 0; padding-top: 56px; }
  .portada__nota .portada__renta { display: block; }
  .portada__renta--bajo { display: none; }
}

@media (min-width: 1200px) {
  .portada {
    grid-template-columns: minmax(var(--margen), 1fr) [content-start] minmax(0, 616px) 64px [form-start] minmax(440px, 520px) [content-end] minmax(var(--margen), 1fr);
  }
}

/* ——— Bandas ——— */

.banda { padding-block: clamp(64px, 9vw, 112px); }
.banda--negra { color: var(--blanco); background: var(--negro); }
.banda--negra a:hover, .banda--negra a:active { color: var(--blanco); }
.banda--gris { background: var(--gris-fondo); }
.banda--blanca { background: var(--blanco); }

/* ——— La línea de tu parte: raya que abre las secciones claras ———
   Negra de lado a lado y, encima, el tramo rojo que mide --parte.
   Se dibuja al entrar en pantalla (sitio.js añade .is-visto). */

.raya { position: relative; height: 2px; margin-bottom: clamp(40px, 6vw, 72px); }
.raya::before, .raya::after { content: ''; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; }
.raya::before { background: var(--tinta); }
.raya::after { background: var(--rojo); }
.raya.is-visto::before, html:not(.js) .raya::before { transform: scaleX(1); }
.raya.is-visto::after, html:not(.js) .raya::after { transform: scaleX(var(--parte)); }

@media (prefers-reduced-motion: no-preference) {
  .raya::before { transition: transform 1000ms var(--salida); }
  .raya::after { transition: transform 800ms var(--salida) 400ms; }
}

/* ——— Cómo funciona ——— */

.como h2 { max-width: 18ch; }
.pasos { display: grid; margin-top: 48px; counter-reset: paso; }
.paso {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 16px;
  padding: 24px 0;
  border-top: 1px solid var(--gris-texto);
  counter-increment: paso;
}
.paso::before {
  content: counter(paso);
  grid-row: 1 / 3;
  font-family: var(--fuente-titulos);
  font-size: 2.5rem;
  font-weight: 700;
  font-stretch: 80%;
  line-height: 0.9;
}
.paso__titulo { font-size: 1.25rem; }
.paso p { margin-top: 8px; color: var(--gris-linea); }

@media (min-width: 768px) {
  .pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 64px; }
  .paso { display: block; padding: 20px 0 0; }
  .paso::before { display: block; margin-bottom: 28px; font-size: 4.5rem; }
}

/* ——— ¿Es tu caso? ——— */

.casos-seccion h2 { max-width: 20ch; font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); }
.casos { margin-top: 48px; border-top: 1px solid var(--gris-linea); }
.casos li { border-bottom: 1px solid var(--gris-linea); }
.casos__enlace, .casos__texto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  font-family: var(--fuente-texto);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  line-height: 1.3;
  text-decoration: none;
}
.casos__enlace .icono { width: 28px; height: 28px; transition: transform 250ms var(--salida); }
.casos__enlace:hover .icono { transform: translateX(6px); }
.casos__cierre { display: grid; gap: 24px; margin-top: 48px; }
.casos__cierre p { max-width: 30em; font-family: var(--fuente-titulos); font-size: 1.25rem; font-weight: 600; line-height: 1.35; }

@media (min-width: 768px) {
  .casos__cierre { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; margin-top: 64px; }
}

/* ——— Qué compramos ——— */

.compramos__rejilla {
  display: grid;
  grid-template-areas: 'texto texto' 'vivienda local';
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px 16px;
  align-items: end;
}
.compramos__texto { grid-area: texto; }
.compramos__foto { position: relative; overflow: hidden; background: var(--gris-fondo); }
.compramos__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compramos__foto--vivienda { grid-area: vivienda; aspect-ratio: 4 / 5; }
.compramos__foto--local { grid-area: local; aspect-ratio: 1; }
.tipos {
  margin-top: 28px;
  font-family: var(--fuente-titulos);
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  font-weight: 500;
  font-stretch: 85%;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.compramos__porcentaje { margin-top: 20px; font-size: 1.125rem; }
.compramos__texto h3 { margin-top: 40px; }
.compramos__texto h3 + p { max-width: 34em; margin-top: 10px; }

@media (min-width: 1024px) {
  .compramos__rejilla {
    grid-template-areas: 'vivienda texto local';
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) minmax(0, 4fr);
    gap: 64px;
    align-items: center;
  }
  .compramos__foto--local { align-self: end; }
}

/* ——— Marquesina de provincias ——— */

.marquesina { padding-block: 26px; overflow: hidden; color: var(--blanco); background: var(--negro); }
.marquesina__pista { display: flex; width: max-content; }
.marquesina__lista { display: flex; flex: none; }
.marquesina__lista li {
  display: flex;
  align-items: center;
  gap: 36px;
  padding-right: 36px;
  font-family: var(--fuente-titulos);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  font-weight: 500;
  font-stretch: 90%;
  line-height: 1;
  white-space: nowrap;
}
.marquesina__lista li::after { content: ''; width: 7px; height: 7px; background: currentColor; }

@media (prefers-reduced-motion: no-preference) {
  .marquesina__pista { animation: desplazar 48s linear infinite; }
  .marquesina.is-parada .marquesina__pista { animation-play-state: paused; }
}
@keyframes desplazar { to { transform: translateX(-50%); } }

/* ——— Dónde compramos ——— */

.donde__rejilla { display: grid; gap: 40px; }
.donde__selector { display: grid; gap: 8px; max-width: 420px; margin-top: 28px; font-family: var(--fuente-titulos); }
html:not(.js) .donde__selector { display: none; }

.zonas { display: grid; gap: 1px; border: 1px solid var(--gris-linea); background: var(--gris-linea); }
.zona { padding: 28px 24px; background: var(--blanco); transition: background-color 300ms, color 300ms; }
.zona h3 { font-size: 1.375rem; }
.zona p { margin-top: 12px; }
.zonas.is-zona-1 .zona[data-zona="1"], .zonas.is-zona-2 .zona[data-zona="2"] { color: var(--blanco); background: var(--tinta); }
.zonas.is-zona-1 .zona[data-zona="2"], .zonas.is-zona-2 .zona[data-zona="1"] { color: var(--gris-texto); }

.por-zonas { display: grid; gap: 12px; margin-top: 56px; }
.por-zonas h3 { font-size: 1.125rem; }
.por-zonas ul { display: flex; flex-wrap: wrap; gap: 4px 32px; }
.por-zonas a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--fuente-titulos);
  font-size: 1.125rem;
  font-weight: 500;
  text-underline-offset: 5px;
}

@media (min-width: 768px) {
  .zonas { grid-template-columns: 1fr 1fr; }
  .zona { padding: 32px 28px; }
}

@media (min-width: 1024px) {
  .donde__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .por-zonas { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: baseline; margin-top: 72px; }
}

/* ——— Tratas con quien compra ——— */

.razones-seccion h2 {
  max-width: 14ch;
  font-size: clamp(2.75rem, 1.5rem + 6vw, 6rem);
  font-stretch: 80%;
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.razones { display: grid; margin-top: 56px; }
.razon { padding: 24px 0 28px; border-top: 1px solid var(--gris-texto); }
.razon h3 { font-size: 1.25rem; }
.razon p { margin-top: 10px; color: var(--gris-linea); }

@media (min-width: 768px) {
  .razones { grid-template-columns: 1fr 1fr; column-gap: 64px; margin-top: 72px; }
}

/* ——— Preguntas frecuentes ——— */

.preguntas__rejilla { display: grid; gap: 32px; }
.preguntas__rejilla .raya { grid-column: 1 / -1; margin-bottom: 8px; }
.preguntas__lista { border-top: 1px solid var(--gris-linea); }
.pregunta { border-bottom: 1px solid var(--gris-linea); }
.pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  font-family: var(--fuente-titulos);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta__mas { position: relative; flex: none; width: 16px; height: 16px; }
.pregunta__mas::before, .pregunta__mas::after { content: ''; position: absolute; background: currentColor; transition: transform 250ms var(--salida); }
.pregunta__mas::before { left: 0; right: 0; top: 7px; height: 2px; }
.pregunta__mas::after { top: 0; bottom: 0; left: 7px; width: 2px; }
.pregunta[open] .pregunta__mas::after { transform: scaleY(0); }
.pregunta__respuesta { max-width: 62ch; padding: 0 40px 24px 0; }

@media (prefers-reduced-motion: no-preference) {
  .pregunta { interpolate-size: allow-keywords; }
  .pregunta::details-content { height: 0; overflow: clip; transition: height 300ms var(--salida), content-visibility 300ms allow-discrete; }
  .pregunta[open]::details-content { height: auto; }
}

@media (min-width: 1024px) {
  .preguntas__rejilla { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 64px; align-items: start; }
  .preguntas__rejilla h2 { position: sticky; top: calc(var(--cabecera-alto) + 24px); }
  .pregunta summary { padding: 22px 0; font-size: 1.1875rem; }
}

/* ——— Contacto ——— */

.contacto__nombre { margin-top: 20px; font-family: var(--fuente-titulos); font-size: 1.375rem; font-weight: 600; }
.contacto__lista { display: grid; gap: 28px 40px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--gris-linea); }
.contacto__lista > div { display: grid; gap: 6px; align-content: start; }
.contacto__lista dt { font-family: var(--fuente-titulos); font-size: 0.9375rem; font-weight: 500; color: var(--gris-texto); }
.contacto__lista dd { font-family: var(--fuente-titulos); font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem); font-weight: 500; line-height: 1.3; }
.contacto__lista dd a { text-decoration: none; }
.contacto__lista dd a:hover { text-decoration: underline; }
.contacto__horario { display: block; margin-top: 8px; font-family: var(--fuente-texto); font-size: 1.0625rem; font-weight: 400; }

@media (min-width: 600px) { .contacto__lista { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .contacto__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 56px; } }

/* ——— Pie ——— */

.pie { padding: 64px 0 32px; font-family: var(--fuente-titulos); color: var(--blanco); background: var(--negro); }
.pie a:hover, .pie a:active { color: var(--blanco); }
.pie__arriba { display: grid; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--gris-texto); }
.pie .logo { margin-right: 0; }
.pie__nav { display: grid; gap: 32px; }
.pie__grupo-titulo { margin-bottom: 8px; font-size: 15px; font-weight: 600; }
.pie__grupo a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; color: var(--gris-linea); text-decoration: none; }
.pie__grupo a:hover { text-decoration: underline; }
.pie__datos { margin-top: 32px; font-size: 15px; line-height: 1.8; color: var(--gris-linea); }
.pie__datos a { color: var(--blanco); text-underline-offset: 4px; }
.pie__abajo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 24px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--gris-texto);
  font-size: 14px;
  color: var(--gris-linea);
}
.pie__legal { display: flex; flex-wrap: wrap; gap: 0 24px; }
.pie__legal a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.pie__legal a:hover { text-decoration: underline; }

@media (min-width: 768px) {
  .pie__arriba { grid-template-columns: minmax(0, 1fr) auto; }
  .pie__nav { grid-template-columns: repeat(2, minmax(180px, auto)); gap: 64px; }
}

/* ——— Subpáginas (situación y zona) ———
   Mismas bandas, raya y tipografía que la portada. Cada bloque de texto de la
   V1 cae en uno de estos componentes: prosa, opciones, datos, lista de zonas,
   oficina, preguntas con cierre y «Sigue leyendo». */

/* Prosa: el título arriba y el texto en una columna de lectura, desplazada a la derecha en escritorio */
.prosa__texto { max-width: 64ch; margin-top: 32px; }
.prosa__texto p + p { margin-top: 1em; }
.prosa__texto p { font-size: 1.125rem; line-height: 1.6; }
.banda--negra .prosa__texto p { color: var(--gris-linea); }
.banda--negra .prosa__texto a { color: var(--blanco); }
.prosa h2 { max-width: 22ch; }

@media (min-width: 1024px) {
  .prosa .contenedor { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; }
  .prosa .raya { grid-column: 1 / -1; }
  .prosa h2 { grid-column: 1 / -1; max-width: 20ch; }
  .prosa__texto { grid-column: 2; margin-top: 48px; }
  .prosa .prosa__texto p { font-size: 1.1875rem; }
}

/* Entradilla y cierre que acompañan a opciones, datos y zonas */
.bloque__entradilla { max-width: 60ch; margin-top: 24px; font-size: 1.125rem; line-height: 1.6; }
.bloque__cierre { max-width: 52ch; margin-top: 40px; font-family: var(--fuente-titulos); font-size: 1.1875rem; font-weight: 600; line-height: 1.4; }
.bloque__cierre + .bloque__cierre { margin-top: 16px; font-family: var(--fuente-texto); font-size: 1.0625rem; font-weight: 400; }

/* Opciones: las cuatro salidas, con el mismo peso (la web no recomienda ninguna) */
.opciones { display: grid; gap: 1px; margin-top: 40px; border: 1px solid var(--gris-linea); background: var(--gris-linea); }
.opcion { padding: 28px 24px; background: var(--blanco); }
.opcion h3 { font-size: 1.375rem; }
.opcion p { margin-top: 12px; }

@media (min-width: 768px) {
  .opciones { grid-template-columns: 1fr 1fr; }
  .opcion { padding: 36px 32px; }
}

/* Datos: lo que pide el formulario, en columnas con raya negra arriba */
.datos { display: grid; gap: 32px; margin-top: 40px; }
.dato { padding-top: 20px; border-top: 2px solid var(--tinta); }
.dato h3 { font-size: 1.375rem; }
.dato p { margin-top: 10px; }

@media (min-width: 768px) {
  .datos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 56px; }
}

/* Lista de zonas: el nombre a la izquierda y los municipios a la derecha */
.lista-zonas { margin-top: 40px; border-top: 1px solid var(--tinta); }
.lista-zonas li { display: grid; gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--gris-linea); }
.lista-zonas h3 { font-size: 1.25rem; }
.lista-zonas p { line-height: 1.55; }

@media (min-width: 768px) {
  .lista-zonas li { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; padding: 24px 0; }
  .lista-zonas p { font-size: 1.125rem; }
}

/* Oficina (Barcelona): texto y vías de contacto */
.oficina__texto { max-width: 60ch; margin-top: 24px; font-size: 1.125rem; line-height: 1.6; }

/* Cierre de las preguntas: frase y botón al formulario */
.preguntas .casos__cierre { margin-top: 48px; }

/* Sigue leyendo: las otras páginas, con título y una línea */
.sigue h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); }
.sigue__lista { display: grid; margin-top: 32px; border-top: 1px solid var(--gris-linea); }
.sigue__lista li { border-bottom: 1px solid var(--gris-linea); }
.sigue__enlace { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 24px; padding: 20px 0; text-decoration: none; }
.sigue__titulo { font-family: var(--fuente-titulos); font-size: 1.25rem; font-weight: 600; line-height: 1.25; }
.sigue__linea { grid-column: 1; color: var(--gris-texto); }
.sigue__enlace .icono { grid-column: 2; grid-row: 1 / 3; width: 28px; height: 28px; transition: transform 250ms var(--salida); }
.sigue__enlace:hover .icono { transform: translateX(6px); }
.sigue__enlace:hover .sigue__titulo { text-decoration: underline; text-underline-offset: 4px; }

@media (min-width: 768px) {
  .sigue__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
}

/* ——— Páginas de texto (aviso legal, privacidad, cookies) y de gracias ———
   Sin foto: la cabecera sale blanca desde el principio. */

.pagina-texto, .pagina-simple { padding: calc(var(--cabecera-alto) + clamp(40px, 7vw, 88px)) 0 clamp(64px, 9vw, 112px); }
html:not(.js) .pagina-texto, html:not(.js) .pagina-simple { padding-top: clamp(40px, 7vw, 88px); }
.pagina-texto .contenedor, .pagina-simple .contenedor { max-width: calc(760px + 2 * var(--margen)); }
.pagina-texto__titulo { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4rem); font-stretch: 85%; line-height: 1; letter-spacing: -0.015em; }
.pagina-texto__titulo + p { margin-top: 16px; color: var(--gris-texto); }
.pagina-texto h2 { margin-top: 48px; font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); }
.pagina-texto h2 + p, .pagina-texto h2 + ul { margin-top: 14px; }
.pagina-texto p, .pagina-texto li { font-size: 1.125rem; line-height: 1.6; }
.pagina-texto p + p, .pagina-texto ul + p, .pagina-texto p + ul { margin-top: 14px; }
.pagina-texto ul { display: grid; gap: 10px; }
.pagina-texto li { position: relative; padding-left: 22px; }
.pagina-texto li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 8px; height: 2px; background: var(--tinta); }

.pagina-simple p { margin-top: 20px; max-width: 46ch; font-size: 1.25rem; line-height: 1.5; }
.pagina-simple .boton { margin-top: 16px; }
.pagina-simple .formulario__resultado { font-size: 1.0625rem; }

/* ——— Botón flotante de WhatsApp ———
   Se oculta mientras el formulario está en pantalla (sitio.js). */

.whatsapp-flotante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 18px;
  font-family: var(--fuente-titulos);
  font-size: 15px;
  font-weight: 600;
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--tinta);
  text-decoration: none;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.4);
  transition: opacity 250ms, visibility 250ms, transform 250ms var(--salida), background-color 200ms, color 200ms;
}
.whatsapp-flotante:hover { color: var(--blanco); background: var(--tinta); }
.whatsapp-flotante.is-oculto, html.menu-abierto .whatsapp-flotante { opacity: 0; visibility: hidden; transform: translateY(8px); }
html:not(.js) .whatsapp-flotante { display: none; }

@media (min-width: 768px) {
  .whatsapp-flotante { right: 24px; bottom: 24px; }
}

/* ——— Movimiento reducido ——— */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* ——— Aviso de cookies ———
   Lo muestra medicion.js si el visitante aún no ha elegido (oct. 2026).
   Sobrio: una línea y dos botones iguales, como manda la AEPD (rechazar tan
   fácil como aceptar). Mientras está visible, el botón de WhatsApp se aparta. */

.aviso-cookies {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  font-family: var(--fuente-titulos);
  font-size: 15px;
  line-height: 1.45;
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--tinta);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.4);
}
.aviso-cookies[hidden] { display: none; }
.aviso-cookies__texto { margin: 0; }
.aviso-cookies__botones { display: flex; gap: 8px; }
.aviso-cookies__boton {
  flex: 1 1 0;
  min-height: 44px;
  padding: 0 16px;
  font-weight: 600;
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--tinta);
  border-radius: var(--radio);
  transition: background-color 200ms, color 200ms;
}
.aviso-cookies__boton:hover { color: var(--blanco); background: var(--tinta); }
html.aviso-cookies-visible .whatsapp-flotante { opacity: 0; visibility: hidden; transform: translateY(8px); }
/* Mientras el aviso está abierto, al llegar a un campo con el teclado el
   navegador lo deja por encima del aviso, no debajo (25 oct 2026) */
html.aviso-cookies-visible { scroll-padding-bottom: 150px; }

/* Móvil (6 nov 2026): franja pegada abajo, lo más baja posible, para no tapar el
   formulario de la primera pantalla. Mismo texto y dos botones iguales. */
@media (max-width: 767px) {
  .aviso-cookies {
    left: 0;
    right: 0;
    bottom: 0;
    gap: 8px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    font-size: 13px;
    line-height: 1.35;
    border-width: 1px 0 0;
  }
  .aviso-cookies__boton { min-height: 38px; }
}

@media (min-width: 768px) {
  .aviso-cookies { left: auto; right: 24px; bottom: 24px; max-width: 420px; }
  html.aviso-cookies-visible { scroll-padding-bottom: 200px; }
}

/* «Ajustes de cookies» en el pie: un botón que parece un enlace */
.pie__boton-enlace { display: inline-flex; align-items: center; min-height: 44px; font: inherit; color: inherit; cursor: pointer; }
.pie__boton-enlace:hover { text-decoration: underline; }