/* ═══════════════════════════════════════════════════════════════════
   Marmecasa — hoja de estilo

   REGISTRO: Mar Menor. Luz alta, aire, horizontales largas, agua y sal.
   Nada del ladrillo cálido y el latón de Umbral: aquello era Zaragoza
   en interior y esto es una laguna a la que se le ve el fondo.

   Cómo se traduce eso a decisiones concretas:

     · El fondo es sal, no blanco. Un blanco puro con este azul encima
       da aspecto de plantilla de portal. El blanco cálido deja que el
       azul respire.
     · Todo lo estructural es horizontal: filetes a sangre, secciones
       muy anchas y poco altas, y una retícula que se estira antes que
       apilarse. La orilla del Mar Menor es una línea larguísima y esa
       es la única metáfora que se permite esta hoja.
     · El elemento memorable es UNO: la línea de agua, el filete de
       arena con la marca de coral que abre cada sección. Lo demás está
       quieto.
     · Movimiento solo con transform y opacity, y nada de eso ocurre
       si el sistema pide movimiento reducido.

   PALETA. El azul y el rojo son de Marmecasa, sacados de las variables
   CSS de su propia web y confirmados contra los píxeles de su logotipo.
   Los neutros los pone esta propuesta.

   LAS DOS REGLAS DEL COLOR, que no se rompen en ninguna regla de abajo:

     1. El coral es SOLO acento: botones, filetes de 1-2 px, subrayados.
        Nunca un fondo de sección ni una superficie grande.
     2. El coral y el marino NUNCA se tocan borde con borde. Siempre hay
        sal o arena en medio. A esas dos saturaciones, juntos vibran, y
        se ve sobre todo en pantalla pequeña. Por eso los botones que van
        sobre marino son claros (.boton-claro) y no corales.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --marino: #013C96;
  --coral: #DF0507;
  --coral-texto: #B50406;      /* solo texto sobre claro: el original se queda en 4,47:1 */
  --sal: #F4F1EA;
  --arena: #D8CFC0;
  --tinta: #1A1D26;
  --blanco: #FFFFFF;

  /* Derivados. Se declaran una vez para no repartir rgba() por la hoja. */
  --arena-suave: #E8E2D8;
  --marino-velo: rgba(1, 60, 150, 0.90);
  --tinta-suave: rgba(26, 29, 38, 0.66);
  --tinta-tenue: rgba(26, 29, 38, 0.13);

  --titulares: 'Fraunces', Georgia, 'Times New Roman', serif;
  --texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ancho: 74rem;
  --ancho-estrecho: 40rem;
  --canal: clamp(1.15rem, 4vw, 3rem);

  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── Reset corto ──────────────────────────────────────────────────── */

*, *::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(--sal);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: clamp(1rem, 0.97rem + 0.16vw, 1.075rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;          /* red de seguridad: nada debe desbordar de todos modos */
}

img, video, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.12; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--marino); color: var(--sal); }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Tipografía ───────────────────────────────────────────────────── */

.contenedor {
  width: min(100% - var(--canal) * 2, var(--ancho));
  margin-inline: auto;
}
.contenedor.estrecho { max-width: var(--ancho-estrecho); }

/* El eyebrow es la única mayúscula sostenida de la hoja: en mono, corta y
   con mucho tracking, hace de rótulo de sección sin competir con el
   titular. Va en coral oscurecido, que es la dosis justa de rojo. */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.735rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--coral-texto);
}
.eyebrow-claro { color: var(--arena); }

.seccion-titulo {
  font-family: var(--titulares);
  font-size: clamp(1.85rem, 1.25rem + 2.6vw, 3.05rem);
  letter-spacing: -0.018em;
  margin-block: 0.5rem 0;
  max-width: 22ch;
}
.seccion-titulo.ancho { max-width: 30ch; }

.seccion-nota {
  margin-top: 1rem;
  max-width: 56ch;
  color: var(--tinta-suave);
}

.parrafo { margin-top: 1.05rem; max-width: 66ch; }
.parrafo:first-of-type { margin-top: 0; }

/* Toda cifra en mono: precio, metros, referencia, impuesto, teléfono.
   Es la convención del nicho y aquí además separa el dato del argumento. */
.dato {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.012em;
}

/* ── La línea de agua ─────────────────────────────────────────────────
   El único elemento memorable de la web. Un filete de arena a todo lo
   ancho con una marca corta de coral a la izquierda: la orilla y la
   boya. Abre cada sección y no hace nada más.

   Va con ::before sobre la propia sección para que llegue a sangre sin
   sacar el contenido del contenedor. */

.seccion {
  position: relative;
  padding-block: clamp(3.4rem, 7vw, 6.2rem);
}
.seccion::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: var(--arena);
}
.seccion::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(3rem, 9vw, 6.5rem);
  height: 2px;
  background: var(--coral);
}
.seccion-sin-linea::before, .seccion-sin-linea::after { content: none; }

/* Sobre marino la línea cambia de color: el coral no puede tocar el azul. */
.seccion-marino::before { background: rgba(244, 241, 234, 0.28); }
.seccion-marino::after { background: var(--arena); }

/* ── Botones ──────────────────────────────────────────────────────────
   Tres, y cada uno tiene su sitio:
     .boton          coral sobre claro. Es la acción principal.
     .boton-claro    sal sobre marino. La misma jerarquía, pero encima
                     del azul, donde el coral no puede ir.
     .boton-fantasma contorno. Para lo secundario.
   Blanco sobre coral da 5,05:1, así que el principal cumple la AA. */

.boton, .boton-claro, .boton-fantasma {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.82rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.22s var(--curva), color 0.22s var(--curva),
              border-color 0.22s var(--curva), transform 0.22s var(--curva);
}

.boton {
  background: var(--coral);
  color: var(--blanco);
}
.boton:hover { background: #C00406; transform: translateY(-1px); }

.boton-claro {
  background: var(--sal);
  color: var(--tinta);
}
.boton-claro:hover { background: var(--blanco); transform: translateY(-1px); }

.boton-fantasma {
  background: transparent;
  color: var(--tinta);
  border-color: var(--tinta-tenue);
}
.boton-fantasma:hover { border-color: var(--coral-texto); color: var(--coral-texto); }

.boton-inerte {
  background: var(--arena-suave);
  color: var(--tinta-suave);
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .boton:hover, .boton-claro:hover { transform: none; }
}

/* ── Franja de propuesta ──────────────────────────────────────────────
   Pegada arriba, no flotando: ocupa su sitio y no tapa el hero en móvil,
   que es donde una barra fija estorba de verdad.

   Va en marino y no en coral a propósito. Una franja roja a todo lo ancho
   sería la superficie grande de rojo que la regla 1 prohíbe, y además
   gritaría más que el contenido. */

.franja {
  position: relative;
  z-index: 30;
  background: var(--marino);
  color: var(--sal);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem var(--canal);
  font-size: 0.855rem;
  line-height: 1.4;
}
.franja-texto { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.85rem; }
.franja-cta {
  color: var(--blanco);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--arena);
  text-underline-offset: 3px;
}
.franja-cta:hover { text-decoration-color: var(--blanco); }
.franja-cerrar {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--arena);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.1rem 0.4rem;
  cursor: pointer;
  flex-shrink: 0;
}
.franja-cerrar:hover { color: var(--blanco); }

/* ── Cabecera ─────────────────────────────────────────────────────────
   El logotipo de Marmecasa va tal cual: PNG con transparencia, sin
   recolorear y sin recortar. Por eso la cabecera es de fondo claro y no
   marino — el logotipo lleva su propio azul y su propio rojo, y encima
   del azul de la marca desaparecería medio. */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(244, 241, 234, 0.93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--arena);
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 0.7rem var(--canal);
}

.marca { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.marca img { width: 158px; height: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.8rem);
  margin-left: auto;
  font-size: 0.935rem;
}
.nav a {
  text-decoration: none;
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s var(--curva), color 0.2s var(--curva);
}
.nav a:hover { border-bottom-color: var(--coral); }
.nav a[aria-current='page'] { border-bottom-color: var(--marino); font-weight: 600; }

/* «Vende tu casa» no puede ser un enlace más del menú: es la mitad del
   negocio de la agencia y en su web actual está enterrada. Va con caja. */
.nav .nav-destacado {
  background: var(--coral);
  color: var(--blanco);
  padding: 0.5rem 0.95rem;
  border-radius: 2px;
  border-bottom: 0;
  font-weight: 600;
}
.nav .nav-destacado:hover { background: #C00406; border-bottom-color: transparent; }

.idiomas {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-left: 1rem;
  border-left: 1px solid var(--arena);
  flex-shrink: 0;
}
.idiomas a { text-decoration: none; color: var(--tinta-suave); }
.idiomas a:hover { color: var(--coral-texto); }
.idioma-actual { font-weight: 500; }

.menu-abrir {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--arena);
  border-radius: 2px;
  padding: 0.5rem 0.8rem;
  font-size: 0.875rem;
  cursor: pointer;
}

/* ── Hero ─────────────────────────────────────────────────────────────
   Horizontal larguísimo y bajo: 21/9 en escritorio. Un hero cuadrado
   aquí sería un error de registro — lo que se está evocando es una
   orilla, y una orilla es ancha y no alta.

   El texto va en una caja de sal que MUERDE el borde inferior de la
   foto en vez de flotar encima centrada. Así el titular se lee siempre
   sobre fondo opaco, sin depender de un velo que funcione con todas las
   fotos, y de paso la caja hace de horizonte. */

.hero { position: relative; }

/* max-height, y NO min-height. El alto máximo recorta el alto y deja el
   ancho en paz; el mínimo lo calcula al revés y desborda el viewport
   (está explicado en el bloque de móvil). Se recorta para que el titular
   quepa en la primera pantalla de un portátil: a 21/9 sin tope, en un
   viewport de 900 el h1 quedaba a medias por debajo del borde, y esta es
   la pantalla que se ve al abrir el enlace del DM. */
.hero-medio {
  position: relative;
  /* width: 100% explícito. Sin él, aspect-ratio trata el ancho como auto
     y el tope de alto se lo lleva por delante: la foto dejaba de llegar
     al borde derecho y aparecía una franja de fondo a la derecha. Con el
     ancho declarado, la razón de aspecto solo puede calcular el alto y
     max-height se limita a recortarlo. */
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: min(56vh, 34rem);
  overflow: hidden;
  background: var(--arena-suave);
}
.hero-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--foto-filtro, none);
  /* La deriva. 24 s, ida y vuelta, y SOLO transform: nada de filter ni de
     width animados, que obligan al navegador a repintar la foto entera en
     cada fotograma. Con transform la foto se sube a su propia capa y el
     coste es constante.

     El escalado arranca en 1.04 y no en 1: a escala 1 los bordes de la
     foto entran en el encuadre al trasladarla y se ve la franja de fondo.
     El 4 % de margen es lo que da sitio al ±1,2 % de traslación.

     La recorta .hero-medio, que ya lleva overflow: hidden. */
  transform-origin: 50% 60%;
  animation: hero-deriva 24s var(--curva, ease-in-out) infinite alternate;
  will-change: transform;
}
@keyframes hero-deriva {
  from { transform: scale(1.04) translate3d(-1.2%, -0.5%, 0); }
  to   { transform: scale(1.09) translate3d(1.2%, 0.5%, 0); }
}
.hero-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(1, 60, 150, 0.10) 0%, rgba(1, 60, 150, 0) 45%);
  pointer-events: none;
}
.hero-aviso {
  position: absolute;
  right: 0.7rem;
  top: 0.7rem;
  background: rgba(26, 29, 38, 0.72);
  color: var(--sal);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  padding: 0.28rem 0.55rem;
  border-radius: 2px;
  max-width: 18rem;
}

.hero-caja {
  position: relative;
  width: min(100% - var(--canal) * 2, var(--ancho));
  margin-inline: auto;
  margin-top: -4.5rem;
  background: var(--sal);
  padding: clamp(1.6rem, 3.5vw, 2.9rem) clamp(1.4rem, 3.5vw, 3rem) clamp(1.6rem, 3vw, 2.4rem);
  border-top: 3px solid var(--coral);
  max-width: 52rem;
  margin-left: max(var(--canal), calc((100vw - var(--ancho)) / 2));
}
.hero-titular {
  font-family: var(--titulares);
  font-size: clamp(2.3rem, 1.4rem + 4.2vw, 4.4rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.02;
  margin-top: 0.6rem;
}
.hero-bajada {
  margin-top: 1.05rem;
  font-size: clamp(1.03rem, 0.98rem + 0.35vw, 1.2rem);
  color: var(--tinta-suave);
  max-width: 46ch;
}
.hero-acciones { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.5rem; }

/* Tira de datos duros bajo el hero: años, oficinas, nota de Google.
   Es lo que un portal no puede decir de sí mismo. */
.hero-tira {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--arena);
  border-block: 1px solid var(--arena);
  margin-top: clamp(2rem, 4vw, 3.2rem);
}
.hero-tira div {
  background: var(--sal);
  padding: 1.15rem clamp(1rem, 2vw, 1.6rem);
}
.hero-tira dt {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.hero-tira dd {
  margin: 0.3rem 0 0;
  font-family: var(--titulares);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ── Buscador ─────────────────────────────────────────────────────────
   Debajo del hero y no encima, como pide el nicho: un buscador clavado
   sobre la foto convierte la portada en la de un portal, que es contra
   quien se compite y no a quien hay que parecerse. */

.buscador {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: 0.9rem;
  align-items: end;
  padding: 1.4rem;
  background: var(--arena-suave);
  border: 1px solid var(--arena);
  border-radius: 2px;
  margin-top: 1.7rem;
}
.buscador .campo { margin: 0; }
.buscador-acciones { display: flex; gap: 0.6rem; align-items: end; }

.campo { display: flex; flex-direction: column; gap: 0.35rem; }
.campo label {
  font-family: var(--mono);
  font-size: 0.71rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.campo input, .campo select {
  font: inherit;
  font-size: 0.98rem;
  padding: 0.66rem 0.75rem;
  background: var(--sal);
  color: var(--tinta);
  border: 1px solid var(--arena);
  border-radius: 2px;
  width: 100%;
  min-height: 2.85rem;
}
.campo input:focus, .campo select:focus { border-color: var(--marino); }
.campo-ayuda { font-size: 0.82rem; color: var(--tinta-suave); }
.campo-inerte { opacity: 0.42; }
.requerido { color: var(--coral-texto); }

.buscador-resultado {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  color: var(--tinta-suave);
}

/* ── Tarjetas de inmueble ─────────────────────────────────────────────
   Dos por fila en escritorio y una en móvil, grandes. La rejilla de
   tarjetitas de cuatro columnas es la del portal, y copiarla es perder
   la única partida que se puede ganar. */

.rejilla-inmuebles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.6rem);
  margin-top: 2.2rem;
}

.inmueble { position: relative; }
.inmueble[hidden] { display: none; }

.inmueble-enlace {
  display: block;
  text-decoration: none;
  color: inherit;
}
.inmueble-foto {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--arena-suave);
}
.inmueble-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--foto-filtro, none);
  transition: transform 0.55s var(--curva);
}
.inmueble-enlace:hover .inmueble-foto img { transform: scale(1.028); }
@media (prefers-reduced-motion: reduce) {
  .inmueble-enlace:hover .inmueble-foto img { transform: none; }
}

/* El sello de ejemplo. Va SOBRE la foto y no en una nota al pie: si el
   inmueble no es de Marmecasa, hay que verlo al mirar la foto y no al
   leer la letra pequeña. */
.sello-ejemplo {
  position: absolute;
  left: 0;
  top: 0.85rem;
  background: var(--tinta);
  color: var(--sal);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
}
/* Nota de las cuatro fotos que vienen de marmecasa.com. Va SOBRE la
   foto, en la esquina de abajo a la izquierda, y en azul de marca: es una
   atribución, no una advertencia, y el rojo aquí sería alarma. */
.sello-suya {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: min(100%, 27rem);
  background: var(--marino);
  color: var(--sal);
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  padding: 0.35rem 0.6rem;
}
.sello-suya[hidden] { display: none; }

.aviso-suya {
  border-left-color: var(--marino);
  width: min(100% - var(--canal) * 2, var(--ancho));
  margin-inline: auto;
}
.aviso-suya a { color: var(--coral-texto); }

.sello-operacion {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  background: var(--sal);
  color: var(--tinta);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
}

.inmueble-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-top: 1rem;
  border-top: 1px solid var(--arena);
  margin-top: 0.9rem;
}
.inmueble-zona {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--coral-texto);
}
.inmueble-titular {
  font-family: var(--titulares);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.62rem);
  letter-spacing: -0.015em;
  line-height: 1.14;
}
.inmueble-enlace:hover .inmueble-titular {
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.inmueble-precio {
  font-family: var(--mono);
  font-size: 1.32rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.inmueble-datos {
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--tinta-suave);
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.85rem;
}

/* ── Reseñas ──────────────────────────────────────────────────────────
   Su activo más caro y hoy no está en su web por ningún sitio.
   La nota va grande y en mono: es un dato, no un adorno. */

.resenas-cabeza {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: center;
  margin-top: 1.6rem;
}
.resenas-nota {
  font-family: var(--mono);
  font-size: clamp(3.2rem, 2rem + 5vw, 5.4rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--marino);
}
.resenas-nota span { font-size: 0.36em; color: var(--tinta-suave); letter-spacing: 0; }
.resenas-estrellas { color: var(--coral); letter-spacing: 0.12em; font-size: 1.1rem; }
.resenas-total { font-size: 0.95rem; color: var(--tinta-suave); margin-top: 0.3rem; }

.rejilla-resenas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.1rem;
  margin-top: 2.2rem;
}
.resena {
  background: var(--blanco);
  border: 1px solid var(--arena);
  border-top: 2px solid var(--coral);
  padding: 1.3rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.resena-texto { font-size: 0.97rem; }
.resena-marca {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--arena);
}

/* ── Zonas ────────────────────────────────────────────────────────────
   Horizontales otra vez: cada zona es una banda ancha y baja, no una
   tarjeta cuadrada. */

/* Cuatro zonas, y con auto-fit salían tres arriba y una suelta debajo,
   que se lee como si faltara algo. Columnas explícitas: 4, 2 y 1. */
.rejilla-zonas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.3rem;
  margin-top: 2.2rem;
}
@media (min-width: 38rem) { .rejilla-zonas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) { .rejilla-zonas { grid-template-columns: repeat(4, 1fr); } }
.zona-tarjeta {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--blanco);
  border: 1px solid var(--arena);
  transition: border-color 0.24s var(--curva), transform 0.24s var(--curva);
}
.zona-tarjeta:hover { border-color: var(--marino); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .zona-tarjeta:hover { transform: none; } }

.zona-tarjeta figure { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--arena-suave); }
.zona-tarjeta img { width: 100%; height: 100%; object-fit: cover; filter: var(--foto-filtro, none); }
.zona-tarjeta-cuerpo { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.zona-tarjeta h3 { font-family: var(--titulares); font-size: 1.4rem; letter-spacing: -0.015em; }
.zona-tarjeta p { font-size: 0.94rem; color: var(--tinta-suave); }
.zona-tarjeta-mas {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--coral-texto);
  margin-top: auto;
  padding-top: 0.7rem;
}

/* Zonas sin página propia: se nombran, no se enlazan a nada. */
.zonas-resto {
  margin-top: 1.8rem;
  font-size: 0.94rem;
  color: var(--tinta-suave);
}
.zonas-resto strong { color: var(--tinta); font-weight: 600; }

/* Aviso de imagen. Siempre visible, nunca de nota al pie escondida. */
.aviso-imagen {
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--tinta-suave);
  margin-top: 0.6rem;
  padding-left: 0.7rem;
  border-left: 2px solid var(--arena);
  max-width: 52ch;
}

/* ── Banda del propietario ────────────────────────────────────────────
   A pantalla completa y en marino. Regla del nicho que no se rompe: la
   página del propietario va en el menú principal Y con banda propia en
   portada. En la web actual de Marmecasa está en noindex.

   El botón es .boton-claro, no coral: aquí el coral tocaría el azul. */

.banda {
  background: var(--marino);
  color: var(--sal);
  padding-block: clamp(3.6rem, 8vw, 6.5rem);
  position: relative;
}
.banda-titular {
  font-family: var(--titulares);
  font-size: clamp(1.95rem, 1.3rem + 3vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.06;
  margin-top: 0.6rem;
  max-width: 20ch;
}
.banda-bajada {
  margin-top: 1.1rem;
  max-width: 52ch;
  color: rgba(244, 241, 234, 0.85);
  font-size: 1.06rem;
}
.banda-acciones { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.7rem; }

/* El botón fantasma hereda tinta sobre claro y aquí el fondo es marino:
   tal cual, quedaba texto oscuro con borde casi invisible encima del
   azul. Sobre la banda va en claro. Sigue sin ser coral: el rojo no
   toca el azul. */
.banda .boton-fantasma {
  color: var(--sal);
  border-color: rgba(244, 241, 234, 0.45);
}
.banda .boton-fantasma:hover {
  color: var(--marino);
  background: var(--sal);
  border-color: var(--sal);
}
.banda-nota {
  margin-top: 1.3rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--arena);
}

/* ── Equipo ───────────────────────────────────────────────────────────
   Huecos marcados a propósito. Un retrato de banco con el nombre de una
   persona real debajo es una mentira con cara, y es peor que un hueco.
   El hueco, además, es medio argumento de la propuesta. */

.rejilla-equipo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1.3rem;
  margin-top: 2.2rem;
}

/* Con dos personas, auto-fit las estira a media pantalla cada una y el
   hueco cuadrado se vuelve enorme: media web pidiendo una foto. Se fijan
   al ancho de una tarjeta y se alinean a la izquierda, que es como se lee
   «faltan estas dos» y no «esta web está vacía». */
.rejilla-equipo-par {
  grid-template-columns: repeat(2, minmax(0, 15rem));
  justify-content: start;
}
@media (max-width: 34rem) {
  .rejilla-equipo-par { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.persona { display: flex; flex-direction: column; gap: 0.75rem; }
.persona-hueco {
  aspect-ratio: 1;
  border: 2px dashed var(--arena);
  background: var(--arena-suave);
  display: grid;
  place-content: center;
  gap: 0.35rem;
  text-align: center;
  padding: 1rem;
}
.persona-hueco span {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.persona-hueco svg { width: 2.2rem; height: 2.2rem; margin-inline: auto; color: var(--arena); }
.persona-nombre { font-family: var(--titulares); font-size: 1.25rem; }
.persona-cargo {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--coral-texto);
}
.persona-linea { font-size: 0.92rem; color: var(--tinta-suave); }
.persona-vacia .persona-nombre { color: var(--tinta-suave); }

/* ── Ficha de inmueble ────────────────────────────────────────────── */

.ficha-hero { position: relative; }
.galeria { display: grid; gap: 0.6rem; }
.galeria-grande {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--arena-suave);
  position: relative;
}
.galeria-grande img { width: 100%; height: 100%; object-fit: cover; filter: var(--foto-filtro, none); }
.galeria-miniaturas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  gap: 0.6rem;
  width: min(100% - var(--canal) * 2, var(--ancho));
  margin-inline: auto;
}
.galeria-mini {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  opacity: 0.62;
  transition: opacity 0.2s var(--curva);
}
.galeria-mini img { width: 100%; height: 100%; object-fit: cover; filter: var(--foto-filtro, none); }
.galeria-mini:hover, .galeria-mini[aria-current='true'] { opacity: 1; }
.galeria-mini[aria-current='true'] { outline: 2px solid var(--coral); outline-offset: -2px; }
.galeria-pie {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--tinta-suave);
  width: min(100% - var(--canal) * 2, var(--ancho));
  margin-inline: auto;
}

.ficha-encabezado { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.ficha-titular {
  font-family: var(--titulares);
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.05rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.06;
  margin-top: 0.5rem;
  max-width: 20ch;
}
.ficha-precio {
  font-family: var(--mono);
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
  font-weight: 500;
  margin-top: 0.9rem;
}
.ficha-precio small {
  display: block;
  font-family: var(--texto);
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--tinta-suave);
  margin-top: 0.2rem;
}

.ficha-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3.6rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3.2rem);
}
.ficha-principal .seccion-titulo { font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.85rem); margin-top: 2.4rem; }
.ficha-principal .seccion-titulo:first-child { margin-top: 0; }

.ficha-lateral {
  position: sticky;
  top: 5.5rem;
  background: var(--blanco);
  border: 1px solid var(--arena);
  padding: 1.5rem 1.5rem 1.7rem;
}
.datos-duros { margin-top: 1rem; font-size: 0.92rem; }
.dato-fila {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.52rem 0;
  border-bottom: 1px solid var(--arena-suave);
}
.dato-fila:last-child { border-bottom: 0; }
.dato-fila dt { color: var(--tinta-suave); }
.dato-fila dd { margin: 0; font-weight: 500; text-align: right; }

.nota-cee {
  font-family: var(--mono);
  font-size: 0.73rem;
  line-height: 1.5;
  color: var(--tinta-suave);
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--arena);
}

/* Aviso de honorarios de alquiler. Va en la ficha y no escondido: la Ley
   12/2023 dice quién paga y todavía hay quien se lo cobra al inquilino. */
.aviso-ley {
  margin-top: 1.6rem;
  padding: 1.1rem 1.25rem;
  background: var(--arena-suave);
  border-left: 3px solid var(--marino);
  font-size: 0.94rem;
}
.aviso-ley strong { display: block; margin-bottom: 0.25rem; }

/* ── Calculadora de gastos de compra ──────────────────────────────── */

.calc-caja {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
  margin-top: 2rem;
}
.calc-campos { display: flex; flex-direction: column; gap: 1.05rem; }

.calc-salida {
  width: 100%;
  border-collapse: collapse;
  background: var(--blanco);
  border: 1px solid var(--arena);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.96rem;
}
.calc-salida th, .calc-salida td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--arena-suave);
  font-weight: 400;
}
.calc-salida td { text-align: right; white-space: nowrap; }
.calc-salida th { color: var(--tinta-suave); }
.calc-total th, .calc-total td {
  border-top: 2px solid var(--coral);
  border-bottom: 0;
  font-weight: 500;
  font-size: 1.12rem;
  color: var(--tinta);
  background: var(--sal);
}

.calc-excluye {
  margin-top: 1.3rem;
  padding: 1.1rem 1.25rem;
  background: var(--arena-suave);
  border: 1px solid var(--arena);
}
.calc-excluye h3 {
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--coral-texto);
}
.calc-excluye ul { margin-top: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; }
.calc-excluye li { font-size: 0.9rem; color: var(--tinta-suave); }
.calc-excluye li::before { content: '— '; color: var(--arena); }

.calc-aviso, .costes-fuente {
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--tinta-suave);
  margin-top: 1.1rem;
  max-width: 62ch;
}
.calc-aviso { padding-left: 0.8rem; border-left: 2px solid var(--coral); }
.costes-fuente a { color: var(--coral-texto); }

.bloque-base {
  margin-top: 2.4rem;
  padding: 1.4rem 1.5rem;
  background: var(--blanco);
  border: 1px solid var(--arena);
}
.bloque-base h2 {
  font-family: var(--titulares);
  font-size: 1.35rem;
  letter-spacing: -0.015em;
}
.bloque-base p { margin-top: 0.7rem; max-width: 66ch; color: var(--tinta-suave); }
.bloque-base a { color: var(--coral-texto); }

/* ── Pasos ────────────────────────────────────────────────────────── */

.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem);
  margin-top: 2.4rem;
  counter-reset: paso;
}
.paso { padding-top: 1.2rem; border-top: 2px solid var(--arena); position: relative; }
.paso::before {
  content: '';
  position: absolute;
  left: 0; top: -2px;
  width: 2.4rem; height: 2px;
  background: var(--coral);
}
.paso-numero {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  color: var(--coral-texto);
}
.paso-titulo { font-family: var(--titulares); font-size: 1.42rem; letter-spacing: -0.015em; margin-top: 0.5rem; }
.paso-texto { margin-top: 0.65rem; color: var(--tinta-suave); font-size: 0.97rem; }

/* ── Huecos de dato pendiente ─────────────────────────────────────────
   Lo que no se sabe, se dibuja como hueco y se dice. Un porcentaje de
   honorarios inventado en la web de una agencia real es un problema de
   verdad, no un detalle de maqueta. */

.hueco {
  margin-top: 1.4rem;
  padding: 1.3rem 1.4rem;
  border: 2px dashed var(--arena);
  background: var(--arena-suave);
}
.hueco-etiqueta {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--coral-texto);
}
.hueco-texto { font-family: var(--titulares); font-size: 1.5rem; margin-top: 0.45rem; }
.hueco-nota { margin-top: 0.6rem; font-size: 0.93rem; color: var(--tinta-suave); max-width: 58ch; }

/* ── Rejilla de argumentos ────────────────────────────────────────── */

.rejilla-razones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1px;
  background: var(--arena);
  border: 1px solid var(--arena);
  margin-top: 2.2rem;
}
.razon { background: var(--sal); padding: 1.3rem 1.35rem; }
.razon h3 { font-family: var(--titulares); font-size: 1.24rem; letter-spacing: -0.012em; }
.razon p { margin-top: 0.5rem; font-size: 0.93rem; color: var(--tinta-suave); }

/* ── Oficinas y contacto ─────────────────────────────────────────── */

.rejilla-oficinas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.3rem;
  margin-top: 2.2rem;
}
.oficina {
  background: var(--blanco);
  border: 1px solid var(--arena);
  border-left: 3px solid var(--marino);
  padding: 1.3rem 1.4rem;
}
.oficina h3 { font-family: var(--titulares); font-size: 1.28rem; }
.oficina address { font-style: normal; margin-top: 0.6rem; line-height: 1.65; }
.oficina .dato { font-size: 0.93rem; }
.oficina p { margin-top: 0.6rem; font-size: 0.92rem; color: var(--tinta-suave); }

.contacto-lineas { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin-top: 1.3rem; }
.contacto-lineas a { font-family: var(--mono); font-size: 1.02rem; }

/* ── Mapa esquemático ─────────────────────────────────────────────── */

.mapa {
  margin-top: 2.2rem;
  background: var(--blanco);
  border: 1px solid var(--arena);
  padding: clamp(1.2rem, 3vw, 2.2rem);
}
.mapa svg { width: 100%; height: auto; }
.mapa-nota {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--tinta-suave);
  margin-top: 0.9rem;
  padding-left: 0.7rem;
  border-left: 2px solid var(--arena);
}

/* ── Páginas interiores ───────────────────────────────────────────── */

.interior { padding-block: clamp(2.4rem, 5vw, 4.2rem); }
.pagina-titular {
  font-family: var(--titulares);
  font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.026em;
  line-height: 1.05;
  margin-top: 0.6rem;
  max-width: 20ch;
}
.pagina-entradilla {
  margin-top: 1.1rem;
  font-size: clamp(1.03rem, 0.98rem + 0.35vw, 1.2rem);
  color: var(--tinta-suave);
  max-width: 58ch;
}
.bloque { margin-top: 2.6rem; }
.seccion-subtitulo {
  font-family: var(--titulares);
  font-size: clamp(1.3rem, 1.15rem + 0.8vw, 1.7rem);
  letter-spacing: -0.015em;
  margin-bottom: 0.85rem;
}
.puntos { display: flex; flex-direction: column; gap: 0.5rem; }
.puntos li { padding-left: 1.15rem; position: relative; max-width: 66ch; }
.puntos li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.72em;
  width: 0.5rem; height: 2px;
  background: var(--coral);
}
.aviso-bloque {
  margin-top: 2.2rem;
  padding: 1.15rem 1.3rem;
  background: var(--arena-suave);
  border-left: 3px solid var(--marino);
  font-size: 0.94rem;
  max-width: 66ch;
}
.legal-pendiente { border-left: 3px solid var(--coral); padding-left: 1.2rem; }

/* Datos de zona en dos columnas: cifra en mono a la derecha. */
.zona-puntos {
  margin-top: 1.6rem;
  border-top: 1px solid var(--arena);
}
.zona-puntos > div {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--arena);
}
.zona-puntos dt { color: var(--tinta-suave); font-size: 0.93rem; }
.zona-puntos dd { margin: 0; font-family: var(--mono); font-size: 0.93rem; text-align: right; }

.zona-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: start;
  margin-top: 2.4rem;
}

/* ── Pie ──────────────────────────────────────────────────────────── */

/* Sin margin-top. Toda página termina en una .banda o en una .seccion, y
   las dos traen ya su padding-block: el margen se sumaba encima y dejaba
   una franja de color sal de más de cien píxeles, vacía, justo antes del
   pie. Se leía como un fallo de maquetado, no como aire. */
.pie {
  background: var(--marino);
  color: var(--sal);
  padding-block: clamp(2.8rem, 6vw, 4.4rem);
}
.pie-columnas {
  width: min(100% - var(--canal) * 2, var(--ancho));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: clamp(1.6rem, 3.5vw, 3rem);
}
.pie-marca img {
  width: 168px;
  background: var(--sal);
  padding: 0.6rem 0.8rem;
  border-radius: 2px;
}
.pie .eyebrow { color: var(--arena); }
.pie-linea { margin-top: 0.45rem; font-size: 0.94rem; color: rgba(244, 241, 234, 0.86); }
.pie-linea a { color: var(--blanco); }
.pie-hueco { color: var(--arena); font-style: italic; }

.pie-legal {
  width: min(100% - var(--canal) * 2, var(--ancho));
  margin: clamp(2.2rem, 4vw, 3.2rem) auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(244, 241, 234, 0.24);
}
.pie-legal nav { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; }
.pie-legal nav a { font-size: 0.9rem; color: var(--arena); text-decoration: underline; text-underline-offset: 3px; }
.pie-legal nav a:hover { color: var(--blanco); }
.pie-demo {
  margin-top: 1.2rem;
  font-size: 0.83rem;
  line-height: 1.6;
  color: rgba(244, 241, 234, 0.72);
  max-width: 78ch;
}

/* ── Aviso de cookies ─────────────────────────────────────────────── */

/* A la DERECHA. Abajo a la izquierda es donde cae la caja del hero, y el
   aviso tapaba el titular justo en la primera pantalla: la única que
   mucha gente va a ver del enlace que le llega por DM. La derecha del
   hero está vacía a propósito. */
.cookies {
  position: fixed;
  right: var(--canal);
  bottom: var(--canal);
  z-index: 40;
  max-width: 24rem;
  background: var(--sal);
  border: 1px solid var(--arena);
  border-top: 3px solid var(--marino);
  padding: 1.2rem 1.3rem;
  box-shadow: 0 12px 34px rgba(26, 29, 38, 0.16);
}
.cookies[hidden] { display: none; }
.cookies-titulo { font-family: var(--titulares); font-size: 1.2rem; }
.cookies-texto { margin-top: 0.5rem; font-size: 0.9rem; color: var(--tinta-suave); }
.cookies-texto a { color: var(--coral-texto); }
.cookies-botones { display: flex; gap: 0.6rem; margin-top: 1rem; }
.cookies-botones .boton, .cookies-botones .boton-fantasma { padding: 0.6rem 1.1rem; font-size: 0.88rem; }

/* ── Formularios ──────────────────────────────────────────────────── */

.formulario { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.6rem; }
.formulario .boton { align-self: start; margin-top: 0.4rem; }
.formulario-nota {
  font-size: 0.88rem;
  color: var(--tinta-suave);
  font-family: var(--mono);
}
.formulario-nota-error { color: var(--coral-texto); }

.caja-formulario {
  background: var(--blanco);
  border: 1px solid var(--arena);
  border-top: 3px solid var(--coral);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}

/* ── Aparición ────────────────────────────────────────────────────────
   Solo opacity y un desplazamiento corto. Sin parallax, sin scroll
   secuestrado y sin cadenas de animación. */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--curva), transform 0.6s var(--curva);
}
.reveal.visible { opacity: 1; transform: none; }

/* Escalonado de las tarjetas de inmueble. El retraso lo pone build.mjs en
   --retraso según la posición de cada una en su rejilla, y va en el
   transition-delay del estado final: así entra escalonada UNA vez —el
   observador deja de mirar la tarjeta en cuanto la muestra— y al filtrar
   con el buscador no se vuelve a escalonar, que sería mareante.

   El retraso se anula al salir para que ocultar sea instantáneo. */
.inmueble.reveal { transition-delay: 0ms; }
.inmueble.reveal.visible { transition-delay: var(--retraso, 0ms); }

/* ── La banda de agua de la sección de zonas ──────────────────────────
   Cuelga de <section> y no de .contenedor, para que llegue a los dos
   bordes sin usar 100vw: con barra de scroll visible, 100vw se pasa del
   ancho del documento y aparece scroll horizontal. */

.agua-banda { margin: 0 0 var(--e4); }
.agua-video {
  display: block;
  width: 100%;
  height: clamp(9rem, 22vh, 15rem);
  object-fit: cover;
  background: var(--arena-suave);
  filter: saturate(0.9) contrast(1.03);
}
.agua-banda figcaption {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--tinta-suave);
  padding-top: 0.35rem;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .inmueble.reveal.visible { transition-delay: 0ms; }
  /* Sin deriva. app.js además no llega a pedir el vídeo: se queda el
     póster, que es el atributo poster del propio <video>. */
  .hero-foto { animation: none; transform: none; will-change: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── Pantallas medianas ───────────────────────────────────────────── */

@media (max-width: 60rem) {
  .ficha-columnas, .calc-caja, .zona-columnas { grid-template-columns: minmax(0, 1fr); }
  .ficha-lateral { position: static; }
  .hero-caja { margin-left: auto; margin-right: auto; max-width: none; }
}

/* ── Móvil ────────────────────────────────────────────────────────────
   El menú se pliega. Su web actual, además de plegarse mal, bloquea el
   zoom con user-scalable=no: aquí el zoom es libre, y por eso todo lo de
   abajo está en rem y aguanta que alguien amplíe al 200 %. */

@media (max-width: 52rem) {
  .cabecera { flex-wrap: wrap; gap: 0.7rem 1rem; }
  .marca img { width: 132px; }
  .menu-abrir { display: block; }

  .nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    border-top: 1px solid var(--arena);
    padding-top: 0.5rem;
  }
  .nav.abierto { display: flex; }
  .nav a { padding: 0.75rem 0; border-bottom: 1px solid var(--arena-suave); }
  .nav a:hover { border-bottom-color: var(--arena-suave); }
  .nav .nav-destacado { text-align: center; margin-top: 0.7rem; }

  .idiomas { margin-left: 0; padding-left: 0; border-left: 0; }

  /* min-height fuera en móvil. Con aspect-ratio puesto, un alto mínimo
     NO recorta: manda sobre el ancho y lo calcula al revés. 19rem de alto
     por 4/3 son 405 px de ancho, y el hero empujaba el documento entero
     30 px más allá del viewport de 375. Se veía como scroll horizontal en
     toda la portada y el culpable no era ninguna imagen. */
  .hero-medio { aspect-ratio: 4 / 3; min-height: 0; }
  .hero-caja { margin-top: -2.4rem; border-top-width: 2px; }
  .hero-aviso { max-width: calc(100% - 1.4rem); font-size: 0.62rem; }

  .resenas-cabeza { grid-template-columns: 1fr; gap: 0.6rem; }
  .buscador { grid-template-columns: 1fr; }
  .buscador-acciones { flex-direction: column; align-items: stretch; }
  .buscador-acciones .boton, .buscador-acciones .boton-fantasma { justify-content: center; }

  .cookies { left: 0.7rem; right: 0.7rem; bottom: 0.7rem; max-width: none; }
  /* El hero de móvil ya es 4/3 y no necesita tope: el titular va debajo. */
  .hero-medio { max-height: none; }

  .galeria-miniaturas { grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
  .calc-salida th, .calc-salida td { padding: 0.62rem 0.7rem; font-size: 0.9rem; }
}

/* ── Impresión ────────────────────────────────────────────────────────
   La valoración se la lleva la gente en papel; que la ficha se imprima
   sin franja, sin menú y sin cookies es gratis y se agradece. */

@media print {
  .franja, .cabecera, .cookies, .banda, .buscador, .galeria-miniaturas { display: none !important; }
  body { background: #fff; }
  .pie { background: #fff; color: #000; }
  .pie-legal nav a, .pie-linea { color: #000; }
}