/* ═══════════════════════════════════════════════════════════════════
   Álvaro Ruiz Ávalos · AuténticoHogar — hoja de estilo

   JAÉN, Y NO UNA PALETA DE CATÁLOGO. Piedra, olivar, cal y sol duro.
   Cálido y sólido, que es distinto de caro.

   LO QUE ESTA WEB NO PUEDE PARECER, y es la única instrucción de diseño
   que no se negocia: una inmobiliaria de lujo. Ni dorados, ni serif de
   alto contraste, ni degradados, ni fondos negros con letras finas. Su
   cliente es de provincias, compra a alguien de confianza y huele el
   escaparate a un kilómetro. Una web que parece cara le dice que va a
   pagar de más.

   EL ALMAGRE NUNCA ES SUPERFICIE GRANDE. Filetes, jambas, números de
   paso, bordes y fondo de los botones principales. Un bloque grande de
   almagre convierte esto en un folleto de agencia de los noventa. Y
   #A35A3A da 4,18 sobre caliza: como filete va sobrado, como palabra no
   llega. Por eso hay cuatro almagres y por eso contraste.mjs los mide.

   EL ELEMENTO MEMORABLE ES UNO SOLO: LAS CINCO PUERTAS. Cada línea de
   negocio es una fila con su jamba de almagre a la izquierda, su número
   en mono y la frase que describe a la persona. Al pasar por encima, la
   jamba engorda y la fila se desplaza: la puerta se abre. Se repite en
   pequeño al pie de las cinco páginas de servicio y es lo único que se
   mueve de toda la web.

   Todo lo demás está quieto a propósito.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Los cinco del encargo */
  --olivar: #2F3A2C;
  --caliza: #EDE7DC;
  --albero: #D9C9A8;
  --almagre: #A35A3A;
  --tinta: #1C1A17;

  /* Los seis derivados. No son licencia creativa: existen porque el
     almagre y el olivar no llegan a contraste en todas las
     combinaciones. contraste.mjs mide los diecisiete pares. */
  --olivar-alto: #3A4636;      /* superficie elevada sobre olivar */
  --almagre-fondo: #985031;    /* el único almagre que puede ser fondo de botón */
  --almagre-texto: #803F24;    /* el único almagre que puede ser texto sobre claro */
  --almagre-claro: #D9A487;    /* el único almagre que puede ser texto sobre olivar */
  --grafito: #565244;          /* texto secundario sobre claro */
  --ceniza: #B5B9AC;           /* texto secundario sobre olivar */

  /* Derivados de opacidad. Se declaran una vez para no repartir rgba()
     por toda la hoja. */
  --linea: rgba(163, 90, 58, 0.34);
  --linea-clara: rgba(217, 164, 135, 0.30);
  --linea-tenue: rgba(28, 26, 23, 0.13);
  --olivar-velo: rgba(47, 58, 44, 0.70);

  --titulares: 'Newsreader', Georgia, 'Times New Roman', serif;
  --texto: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ancho: 74rem;
  --ancho-medio: 56rem;
  --ancho-estrecho: 38rem;
  --canal: clamp(1.25rem, 5vw, 4rem);

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

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

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

html {
  -webkit-text-size-adjust: 100%;
  /* El panel del menú de móvil vive fuera de pantalla a la derecha. Sin
     recortar aquí, esos 22 rem se suman al ancho del documento y el
     móvil se desplaza en horizontal aunque no se vea nada. */
  overflow-x: hidden;

  /* SIN scroll-behavior: smooth, y no por gusto. Con desplazamiento
     suave, cualquier salto programado —el de una captura, el de un
     enlace a #puertas— tarda en llegar, y el IntersectionObserver que
     hace aparecer los bloques no se dispara a tiempo: las filas salían
     en blanco en las capturas. El salto instantáneo no le quita nada a
     la página y quita un fallo entero. */
}

body {
  margin: 0;
  background: var(--caliza);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;          /* red de seguridad: nada debe desbordar igualmente */
}

img, video, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; 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: 2px solid var(--almagre-texto);
  outline-offset: 3px;
}
.oscura :focus-visible, .hero :focus-visible, .banda :focus-visible, .pie :focus-visible {
  outline-color: var(--almagre-claro);
}

::selection { background: var(--olivar); color: var(--caliza); }

.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;
}

.saltar {
  position: absolute; left: 0.5rem; top: 0.5rem;
  transform: translateY(-160%);
  z-index: 60;
  background: var(--olivar); color: var(--caliza);
  padding: 0.6rem 1rem; text-decoration: none;
  font-size: 0.9rem;
}
.saltar:focus { transform: translateY(0); }

/* ── Retícula ─────────────────────────────────────────────────────── */

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

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

/* El eyebrow es la única mayúscula sostenida de la hoja. En mono, corta
   y espaciada, hace de rótulo sin competir con el titular. */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--almagre-texto);
  margin: 0;
}
.oscura .eyebrow, .hero .eyebrow, .banda .eyebrow { color: var(--almagre-claro); }

.titulo-grande {
  font-family: var(--titulares);
  font-size: clamp(2.2rem, 1.45rem + 3.6vw, 4.1rem);
  line-height: 1.06;
  letter-spacing: -0.012em;
  max-width: 20ch;
}
.seccion-titulo {
  font-family: var(--titulares);
  font-size: clamp(1.85rem, 1.35rem + 2.2vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.008em;
  margin-top: 1.2rem;
  max-width: 24ch;
}
.seccion-titulo.ancho { max-width: 32ch; }

.seccion-bajada {
  margin-top: 1.2rem;
  max-width: 56ch;
  font-size: 1.05em;
  color: var(--grafito);
}
.oscura .seccion-bajada, .banda .seccion-bajada { color: var(--ceniza); }

.parrafo { margin-top: 1.1rem; max-width: 64ch; }
.parrafo + .parrafo { margin-top: 0.9rem; }
.oscura .parrafo { color: var(--ceniza); }

.destacado {
  font-family: var(--titulares);
  font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.85rem);
  line-height: 1.3;
  max-width: 34ch;
}

.cifra {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ── Secciones ────────────────────────────────────────────────────────
   Cada sección abre con un filete tenue a sangre. Es un separador, no
   un adorno: aquí el elemento memorable son las puertas y todo lo demás
   tiene que quedarse quieto para que se vean. */

.seccion {
  position: relative;
  padding-block: clamp(3.6rem, 2.8rem + 5vw, 7rem);
  scroll-margin-top: 5.5rem;   /* la cabecera es pegajosa: sin esto, un
                                  enlace a #puertas deja el rótulo debajo
                                  del menú */
}
.seccion::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: var(--linea-tenue);
}
.seccion.oscura::before { background: var(--linea-clara); }
.seccion.sin-umbral::before { display: none; }

.seccion.oscura {
  background: var(--olivar);
  color: var(--caliza);
}
.seccion.albero { background: var(--albero); }
.seccion.albero::before { background: var(--linea); }

.seccion-cabeza { margin-bottom: clamp(1.8rem, 1.4rem + 1.6vw, 2.8rem); }

/* ── Botones ──────────────────────────────────────────────────────────
   El principal es almagre de fondo (--almagre-fondo, 4,84 con la caliza
   encima). El de sobre oscuro es caliza con texto olivar (9,68). El
   almagre de marca NO es fondo de botón: da 4,18 y se queda corto. */

.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.9rem; }

.boton, .boton-claro, .boton-fantasma, .boton-fantasma-claro {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.82rem 1.4rem;
  font-family: var(--texto);
  font-size: 0.93rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: transform 0.25s var(--curva), background-color 0.25s var(--curva), color 0.25s var(--curva);
}
.boton { background: var(--almagre-fondo); color: var(--caliza); }
.boton-claro { background: var(--caliza); color: var(--olivar); }
.boton-fantasma { background: transparent; color: var(--tinta); border-color: var(--almagre); }
.boton-fantasma-claro { background: transparent; color: var(--caliza); border-color: var(--almagre-claro); }

.boton:hover, .boton-claro:hover { transform: translateY(-2px); }
.boton-fantasma:hover { background: var(--olivar); color: var(--caliza); border-color: var(--olivar); }
.boton-fantasma-claro:hover { background: var(--caliza); color: var(--olivar); border-color: var(--caliza); }

.enlace-texto {
  color: var(--almagre-texto);
  text-decoration: none;
  border-bottom: 1px solid var(--linea);
  padding-bottom: 1px;
}
.enlace-texto:hover { border-bottom-color: var(--almagre-texto); }
.oscura .enlace-texto { color: var(--almagre-claro); border-bottom-color: var(--linea-clara); }

/* ── Franja de propuesta ──────────────────────────────────────────────
   Va arriba del todo y la escribe build.mjs en las trece páginas: no se
   puede quitar editando un HTML. Dice lo que es antes de que nadie se
   pregunte si esto es la web oficial de nadie.

   z-index por debajo de la cabecera: el panel del menú de móvil cuelga
   de la cabecera y hereda su contexto de apilamiento, así que si la
   franja va por encima, el panel abierto se queda debajo de ella y el
   botón de cerrar acaba tapado. */
.franja {
  position: relative;
  z-index: 10;
  background: var(--olivar);
  color: var(--caliza);
  font-size: 0.82rem;
  line-height: 1.4;
}
.franja-interior {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.35rem 1.1rem;
  padding-block: 0.6rem;
}
.franja-texto { color: var(--ceniza); }
.franja-cta {
  color: var(--caliza);
  text-decoration: none;
  border-bottom: 1px solid var(--almagre-claro);
  padding-bottom: 1px;
  font-weight: 500;
}
.franja-cerrar {
  margin-inline-start: auto;
  background: none; border: 0; cursor: pointer;
  color: var(--ceniza);
  font-size: 1.1rem; line-height: 1;
  padding: 0.25rem 0.35rem;
}
.franja-cerrar:hover { color: var(--caliza); }

/* ── Aviso de cookies ─────────────────────────────────────────────────
   NO FLOTA. Va en el flujo, arriba, entre la franja de demo y la
   cabecera. Norma del kit, y el motivo es concreto: flotando abajo se
   come lo último de cada página, que es justo donde viven los avisos
   legales, la nota de «cálculo orientativo» de la calculadora y la nota
   de procedencia de las fotos. Y no vale decir que se cierra al
   responder: hasta que alguien responde, la página está enseñando un
   anuncio sin su aviso obligatorio.

   Ocupando su sitio y empujando no hay nada debajo de él, así que se
   caen de golpe el problema del final del documento, el del aviso
   superpuesto sobre una figura y el de cualquier posición de scroll
   intermedia. */
.cookies {
  position: relative;
  z-index: 9;
  width: min(100% - var(--canal) * 2, var(--ancho));
  margin: var(--canal) auto 0;
  background: var(--albero);
  border: 1px solid var(--linea);
  border-top: 3px solid var(--almagre);
  padding: 1.15rem 1.25rem;
}
.cookies[hidden] { display: none; }
.cookies-titulo { font-family: var(--titulares); font-size: 1.25rem; }
.cookies-texto { margin-top: 0.45rem; font-size: 0.9rem; color: var(--grafito); max-width: 68ch; }
.cookies-texto a { color: var(--almagre-texto); }
.cookies-botones { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.cookies-botones .boton, .cookies-botones .boton-fantasma { padding: 0.55rem 1.05rem; font-size: 0.87rem; }

/* En móvil se aprieta. Va en flujo y empuja —eso no se toca, es la
   norma del kit— pero cada píxel que ocupa es un píxel que le quita al
   hero en la única pantalla que mucha gente va a ver del enlace que le
   llega por DM. */
@media (max-width: 30rem) {
  .cookies { margin-top: 0.8rem; padding: 0.9rem 1rem; }
  .cookies-titulo { font-size: 1.1rem; }
  .cookies-texto { font-size: 0.85rem; margin-top: 0.35rem; }
  .cookies-botones { margin-top: 0.8rem; gap: 0.45rem; }
  .cookies-botones .boton, .cookies-botones .boton-fantasma { padding: 0.5rem 0.9rem; font-size: 0.83rem; }
}

/* ── Cabecera ─────────────────────────────────────────────────────────
   NO HAY LOGOTIPO Y NO SE LE INVENTA UNO. Dibujarle una marca nueva es
   enseñarle la web de otro. Su nombre comercial en Newsreader, el
   filete de almagre debajo y su nombre de persona como descriptor:
   AuténticoHogar es la ficha de los portales y Álvaro Ruiz Ávalos es
   quien tiene los 24.800 seguidores. Los dos hacen falta.

   Fondo sólido y SIN backdrop-filter: un backdrop-filter aquí crea
   bloque contenedor para los descendientes con position:fixed, y el
   panel del menú de móvil —que cuelga de la cabecera— se queda
   recortado a la altura de la propia cabecera. */
.cabecera {
  position: sticky; top: 0; z-index: 30;
  background: var(--caliza);
  border-bottom: 1px solid var(--linea);
}
.cabecera-interior {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
}
.marca { text-decoration: none; flex-shrink: 0; display: block; }
.marca-nombre {
  font-family: var(--titulares);
  font-size: 1.5rem;
  line-height: 1;
  display: block;
}
.marca-filete {
  display: block;
  height: 2px;
  background: var(--almagre);
  margin-top: 0.38rem;
  width: 100%;
}
.marca-descriptor {
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--grafito);
  margin-top: 0.38rem;
}

/* La navegación va en DOS GRUPOS separados por un filete: los cinco
   servicios primero y el resto después. No es decoración: refuerza que
   la web entera es un enrutador y que esas cinco cosas son el negocio.
   En el panel de móvil los grupos llevan además su rótulo. */
.nav-lista { display: flex; align-items: center; gap: clamp(0.7rem, 1.2vw, 1.35rem); }
.nav-grupo { display: contents; }
.nav-grupo-titulo { display: none; }
.nav-separador {
  width: 1px; height: 1.15rem;
  background: var(--linea);
  flex-shrink: 0;
}
.nav-enlace {
  text-decoration: none;
  font-size: 0.88rem;
  color: var(--tinta);
  padding-block: 0.3rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.nav-enlace:hover { border-bottom-color: var(--almagre); }
.nav-enlace[aria-current='page'] { border-bottom-color: var(--almagre); color: var(--almagre-texto); }

/* El botón de WhatsApp vive SOLO en el panel de móvil. A 1440 los ocho
   enlaces ya van justos y un noveno elemento los rompería; en el panel
   sobra sitio y es donde más falta hace, porque hoy el negocio entero
   de Álvaro entra por ahí. En escritorio el número está en el hero, en
   cada página de servicio y en el pie. */
.nav-wa { display: none; }

.menu-abrir {
  display: none;
  background: none; border: 1px solid var(--almagre);
  padding: 0.5rem 0.85rem; cursor: pointer;
  font-family: var(--mono); font-size: 0.73rem;
  letter-spacing: 0.13em; text-transform: uppercase;
}

/* Ocho enlaces no caben en pantalla media. El panel entra antes que en
   otras cazas del kit precisamente por eso. */
@media (max-width: 68rem) {
  .menu-abrir { display: inline-block; }
  .nav {
    position: fixed; inset: 0 0 0 auto;
    width: min(86vw, 23rem);
    background: var(--olivar);
    color: var(--caliza);
    padding: 5rem var(--canal) 2rem;
    transform: translateX(100%);
    transition: transform 0.32s var(--curva);
    z-index: 50;
    overflow-y: auto;
  }
  .nav[data-abierta='true'] { transform: translateX(0); }
  .nav-lista { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-grupo { display: block; }
  .nav-grupo-titulo {
    display: block;
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--almagre-claro);
    margin: 1.6rem 0 0.8rem;
  }
  .nav-grupo:first-child .nav-grupo-titulo { margin-top: 0; }
  .nav-grupo li + li { margin-top: 0.15rem; }
  .nav-separador { display: none; }
  .nav-wa { display: block; margin-top: 2.2rem; }
  .nav-enlace {
    color: var(--caliza);
    font-size: 1.08rem;
    display: block;
    padding-block: 0.5rem;
    white-space: normal;
  }
  .nav-enlace[aria-current='page'] { color: var(--almagre-claro); border-bottom-color: var(--almagre-claro); }
  .nav-cerrar {
    position: absolute; top: 1.4rem; right: var(--canal);
    background: none; border: 0; color: var(--caliza);
    font-family: var(--mono); font-size: 0.73rem;
    letter-spacing: 0.13em; text-transform: uppercase; cursor: pointer;
  }
  .velo-menu {
    position: fixed; inset: 0; z-index: 45;
    background: var(--olivar-velo);
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s var(--curva);
  }
  .velo-menu[data-visible='true'] { opacity: 1; pointer-events: auto; }
}
@media (min-width: 68.001rem) {
  .nav-cerrar, .velo-menu { display: none; }
}

/* En pantalla estrecha se cede el descriptor, que es adorno, y se
   conserva lo que identifica: el nombre y su filete. */
@media (max-width: 26rem) {
  .marca-nombre { font-size: 1.3rem; }
  .marca-descriptor { font-size: 0.55rem; }
}

/* ── Hero ─────────────────────────────────────────────────────────────
   SIN BUSCADOR ENCIMA y sin verbo en imperativo. El hero no vende un
   inmueble: coloca a la persona antes de que baje.

   La foto es el mar de olivos desde el aire, con la tierra roja y el
   polvo del atardecer. Es LA imagen de Jaén y no es la postal del
   ayuntamiento. Va de fondo con velo, no de protagonista: su trabajo es
   sostener la frase, no competir con ella.

   El velo es un degradado OLIVAR, no negro: un velo negro sobre una
   foto cálida la apaga y la vuelve gris. */
.hero {
  position: relative;
  background: var(--olivar);
  color: var(--caliza);
  overflow: hidden;
}
.hero-medio { position: absolute; inset: 0; overflow: hidden; }
.hero-medio img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ── LA DERIVA DEL HERO ───────────────────────────────────────────────
   Ciclo de 14 s, escala de 1 a 1,10 y un desplazamiento de 2,5 % que la
   acompaña. Lenta y en diagonal: se percibe sin mirarla y no le compite
   al titular, que es lo único que esa pantalla tiene que conseguir.

   POR QUÉ LA ESCALA Y EL DESPLAZAMIENTO VAN ACOPLADOS, que es lo único
   que de verdad importa de este bloque:

   Al escalar, la imagen sobresale por cada lado (S − 1) / 2 de su
   tamaño. Con S = 1,10 eso son 5 % por lado. Un desplazamiento de 2,5 %
   cabe de sobra... EN EL PICO. Pero si el desplazamiento fuera
   constante y la escala arrancara en 1, al principio del ciclo el
   sobrante sería CERO y cualquier desplazamiento dejaría a la vista el
   borde de la foto y el fondo olivar por detrás.

   Por eso los dos se mueven juntos en el mismo fotograma clave: en el
   instante p, la escala vale 1 + 0,10p y el sobrante 0,05p, mientras el
   desplazamiento vale 0,025p. Como 0,025p ≤ 0,05p para todo p, el
   sobrante SIEMPRE dobla al desplazamiento y no hay un solo momento del
   ciclo en que asome un borde. No es holgura estimada a ojo: es la
   desigualdad la que lo garantiza, y comprobar.mjs la mide en 21 puntos
   del ciclo comparando el rectángulo de la imagen con el del contenedor.

   Y el orden `translate(...) scale(...)` tampoco es indiferente: así el
   porcentaje del desplazamiento se mide sobre el tamaño SIN escalar del
   elemento, que es sobre lo que está hecha la cuenta de arriba. Al
   revés —`scale(...) translate(...)`— el desplazamiento saldría
   multiplicado por la escala y la desigualdad se estrecharía. */
@keyframes hero-deriva {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-2.5%, -2.5%) scale(1.1); }
  100% { transform: translate(0, 0) scale(1); }
}

.hero-medio [data-deriva] {
  transform-origin: 50% 50%;
  animation: hero-deriva 14s ease-in-out infinite;
}
.hero-velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg, rgba(28,32,26,0.93) 0%, rgba(31,38,29,0.84) 40%, rgba(40,50,38,0.52) 76%, rgba(47,58,44,0.40) 100%),
    linear-gradient(to top, rgba(28,32,26,0.70) 0%, rgba(28,32,26,0) 48%);
}
.hero-interior {
  position: relative;
  z-index: 1;
  padding-block: clamp(4rem, 3rem + 8vw, 8.5rem);
}
.hero-titular {
  font-family: var(--titulares);
  font-size: clamp(2.4rem, 1.5rem + 4.4vw, 4.7rem);
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin-top: 1.4rem;
  max-width: 17ch;
}
.hero-bajada {
  margin-top: 1.6rem;
  max-width: 48ch;
  color: var(--ceniza);
  font-size: 1.06em;
}
.hero-firma {
  margin-top: 2.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linea-clara);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ceniza);
  max-width: 46ch;
}
/* Un número de móvil partido a mitad entre dos líneas se lee como dos
   números distintos. */
.hero-firma .cifra { white-space: nowrap; }
.tel {
  color: var(--caliza);
  text-decoration: none;
  border-bottom: 1px solid var(--linea-clara);
  padding-bottom: 1px;
}
.tel:hover { border-bottom-color: var(--almagre-claro); }

/* El crédito de la foto. NINGUNA imagen de esta web es suya y el hero
   es la primera que se ve, así que lo dice ahí mismo. Va como chip
   sólido y no como pie desvaído: una marca que nadie lee es, en la
   práctica, una marca que no está. */
.hero-credito {
  position: absolute;
  right: var(--canal);
  bottom: 0;
  z-index: 2;
  background: var(--olivar);
  color: var(--caliza);
  font-family: var(--mono);
  font-size: 0.6rem;
  line-height: 1.35;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.45rem 0.75rem;
  max-width: calc(100% - var(--canal) * 2);
}
/* En pantalla estrecha deja de ser una esquina y pasa a ser una banda a
   lo ancho: en 375 px, un chip flotando sobre el hero se come el aire
   que necesita el titular.

   relative y NO static: en static el z-index se ignora, y como la foto
   y el velo van posicionados se pintan por encima y el crédito
   desaparece justo en la pantalla donde más gente lo va a ver. */
@media (max-width: 44rem) {
  .hero-credito {
    position: relative;
    inset: auto;
    display: block;
    padding-inline: var(--canal);
    max-width: none;
    background: var(--olivar-alto);
    border-top: 1px solid var(--linea-clara);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   LAS CINCO PUERTAS — el elemento memorable
   ═══════════════════════════════════════════════════════════════════

   Hoy sus cinco líneas viven en una lista de biografía de Instagram,
   una debajo de otra, sin explicación y sin destino. Esto es esa lista
   convertida en enrutador.

   NO ES UN MENÚ DE SERVICIOS, y la diferencia está en la frase: cada
   puerta empieza describiendo A LA PERSONA, no al servicio. Nadie sabe
   si necesita «real estate consulting»; todo el mundo sabe si tiene un
   piso heredado y no sabe qué hacer con él.

   Es una lista de filas y NO una rejilla de tarjetas con foto, a
   propósito: la promesa de la portada es encontrar tu caso en diez
   segundos, y cinco tarjetas con imagen obligan a mirar antes de leer.
   Las fotos viven en cada página de servicio, que es donde ayudan.

   LA JAMBA. Cada fila lleva a la izquierda una barra de almagre que
   está SIEMPRE VISIBLE —2 px— y engorda a 6 al pasar por encima o al
   recibir el foco, mientras el contenido se desplaza. La puerta se
   abre. Está siempre visible a propósito: un efecto que solo existe en
   hover no sale en ninguna captura y, en un móvil, no existe. */

.puertas { margin-top: clamp(2rem, 1.6rem + 2vw, 3.2rem); }

/* ── LAS CINCO PUERTAS APARECEN ESCALONADAS ───────────────────────────
   70 ms entre una y otra, y UNA SOLA VEZ: el observador de app.js deja
   de mirar el bloque en cuanto lo marca, así que subir y volver a bajar
   no lo repite. Repetirlo convertiría la firma de la web en un adorno.

   El contenedor sigue llevando .reveal —es lo que el observador mira—
   pero se le anula su propia entrada: si el bloque entero apareciera
   además de sus cinco hijos, se verían dos apariciones encima.

   El estado oculto va detrás de @media (scripting: enabled) igual que
   el resto: sin JavaScript las cinco puertas nacen visibles, en vez de
   quedarse en opacidad 0 esperando a un observador que no va a llegar.
   Una web cuyo argumento es que por fin hay dónde mandar a la gente no
   se puede permitir una portada en blanco.

   El retardo se aplica SOLO a opacity y transform, con
   background-color aparte y sin retardo: metido en la regla corta, el
   fondo del hover de la quinta puerta tardaría 280 ms en responder al
   ratón y se notaría como pesadez. */
@media (scripting: enabled) {
  .puertas.reveal { opacity: 1; transform: none; }

  .puertas .puerta {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity 0.55s var(--curva) calc(var(--i, 0) * 70ms),
      transform 0.55s var(--curva) calc(var(--i, 0) * 70ms),
      background-color 0.3s var(--curva);
  }
  .puertas[data-visible='true'] .puerta { opacity: 1; transform: none; }
}

.puerta {
  position: relative;
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 0.3rem 1.2rem;
  align-items: start;
  padding: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem) 0 clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem) clamp(1rem, 0.6rem + 1.2vw, 1.6rem);
  border-top: 1px solid var(--linea-tenue);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.3s var(--curva);
}
.puerta:last-child { border-bottom: 1px solid var(--linea-tenue); }

/* La jamba.

   CON AIRE ARRIBA Y ABAJO, y esto es lo que hace que la idea funcione.
   La primera versión iba de borde a borde de la fila (top:-1px;
   bottom:0) y, como las filas van pegadas, las cinco jambas se soldaban
   en una única línea vertical continua: no parecían cinco puertas,
   parecía un bloque con borde izquierdo. Separándolas se leen como
   cinco montantes distintos, que es justo lo que la sección afirma. */
.puerta::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.1rem; bottom: 1.1rem;
  width: 2px;
  background: var(--almagre);
  transition: width 0.28s var(--curva);
}
.puerta:hover, .puerta:focus-visible { background: rgba(217, 201, 168, 0.34); }
.puerta:hover::before, .puerta:focus-visible::before { width: 6px; }

.puerta-indice {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--almagre-texto);
  padding-top: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.puerta-nombre {
  font-family: var(--titulares);
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
  line-height: 1.14;
}
.puerta-frase {
  grid-column: 2;
  margin-top: 0.5rem;
  color: var(--grafito);
  max-width: 60ch;
}
/* «Esto es para ti si» va en cursiva y en el mismo párrafo que la
   frase: separarlo en su propia línea lo convertía en un rótulo que se
   repetía cinco veces y cansaba a la tercera. */
.puerta-frase em {
  font-family: var(--titulares);
  font-style: italic;
  color: var(--almagre-texto);
  font-size: 1.06em;
}
.puerta-ir {
  grid-column: 2;
  margin-top: 0.85rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--almagre-texto);
  display: inline-flex; align-items: center; gap: 0.45rem;
}
.puerta-ir::after {
  content: '→';
  transition: transform 0.28s var(--curva);
}
.puerta:hover .puerta-ir::after { transform: translateX(6px); }

/* En pantalla ancha, «ver cómo funciona» se va al extremo derecho y se
   centra en vertical. Dos motivos: la frase tiene un tope de 60ch para
   que se lea, así que en 1440 la mitad derecha de la fila se quedaba
   vacía; y con el tirador al otro lado, la fila entera se lee como una
   puerta —montante a la izquierda, manilla a la derecha— en vez de
   como un párrafo con un enlace debajo. */
@media (min-width: 52rem) {
  .puerta { grid-template-columns: 3.2rem minmax(0, 1fr) auto; column-gap: 2rem; }
  .puerta-indice { grid-row: 1 / span 2; }
  .puerta-nombre, .puerta-frase { grid-column: 2; }
  .puerta-ir {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    margin-top: 0;
    white-space: nowrap;
  }
}

.puertas-pie {
  margin-top: 1.8rem;
  color: var(--grafito);
  max-width: 56ch;
  font-size: 0.96rem;
}

/* Las otras puertas, al pie de cada página de servicio. Mismo lenguaje
   en pequeño: por si alguien ha entrado por donde no era. */
.otras-puertas {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.6rem;
}
@media (min-width: 46rem) {
  .otras-puertas { grid-template-columns: repeat(2, 1fr); }
}
.otra-puerta {
  position: relative;
  display: block;
  text-decoration: none;
  padding: 0.85rem 0.9rem 0.85rem 1.1rem;
  border: 1px solid var(--linea-tenue);
  transition: background-color 0.25s var(--curva);
}
.otra-puerta::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--almagre);
  transition: width 0.25s var(--curva);
}
.otra-puerta:hover { background: rgba(217, 201, 168, 0.34); }
.otra-puerta:hover::before { width: 5px; }
.otra-puerta-nombre { font-family: var(--titulares); font-size: 1.2rem; }
.otra-puerta-frase {
  margin-top: 0.2rem;
  font-size: 0.9rem;
  color: var(--grafito);
}

/* ── Página de servicio ───────────────────────────────────────────── */

.servicio-cabeza {
  display: grid;
  gap: clamp(2rem, 1.6rem + 2.5vw, 3.5rem);
}
@media (min-width: 58rem) {
  .servicio-cabeza { grid-template-columns: 1.15fr 0.85fr; align-items: start; }
}

/* El titular de una página de servicio vive dentro de una columna, no a
   todo lo ancho como el de la portada, así que no puede usar el mismo
   tamaño: con el grande, «Comprar, reformar y vender. Con los números
   antes de firmar» se partía en cuatro líneas de tres palabras y
   parecía una columna de periódico mal cerrada. */
.servicio-cabeza .titulo-grande {
  font-size: clamp(2rem, 1.35rem + 2.4vw, 3.1rem);
  max-width: 22ch;
}

/* «Esto es para ti si...» en grande, al principio de cada página de
   servicio. Es la misma frase del enrutador y se repite a propósito:
   quien ha pulsado una puerta tiene que aterrizar en la misma frase que
   le hizo pulsar, o cree que se ha equivocado de sitio. */
.para-ti {
  margin-top: 1.6rem;
  padding: 1.2rem 0 1.2rem 1.3rem;
  border-inline-start: 3px solid var(--almagre);
}
.para-ti-rotulo {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--almagre-texto);
}
.para-ti-frase {
  margin-top: 0.55rem;
  font-family: var(--titulares);
  font-size: clamp(1.2rem, 1.02rem + 0.9vw, 1.6rem);
  line-height: 1.34;
  max-width: 40ch;
}

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

.pasos { margin-top: clamp(1.8rem, 1.4rem + 1.8vw, 2.8rem); }
.paso {
  display: grid;
  gap: 0.35rem 1.8rem;
  padding-block: clamp(1.3rem, 1.05rem + 1.2vw, 2.1rem);
  border-top: 1px solid var(--linea-tenue);
}
@media (min-width: 50rem) {
  .paso { grid-template-columns: 5.5rem 1fr 1.15fr; align-items: baseline; }
}
.paso:last-child { border-bottom: 1px solid var(--linea-tenue); }
.paso-numero {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--almagre-texto);
  font-variant-numeric: tabular-nums;
}
.paso-titulo {
  font-family: var(--titulares);
  font-size: clamp(1.25rem, 1.08rem + 0.8vw, 1.65rem);
  line-height: 1.18;
}
.paso-texto { color: var(--grafito); max-width: 50ch; }
.oscura .paso { border-top-color: var(--linea-clara); }
.oscura .paso:last-child { border-bottom-color: var(--linea-clara); }
.oscura .paso-numero { color: var(--almagre-claro); }
.oscura .paso-texto { color: var(--ceniza); }

/* ── Listas de «qué incluye» ──────────────────────────────────────── */

.incluye { margin-top: 1.4rem; }
.incluye li {
  display: grid;
  grid-template-columns: 1.3rem 1fr;
  gap: 0.8rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--linea-tenue);
  max-width: 62ch;
}
.incluye li::before {
  content: '';
  width: 10px; height: 2px;
  background: var(--almagre);
  margin-top: 0.82em;
}
.oscura .incluye li { border-bottom-color: var(--linea-clara); }
.oscura .incluye li::before { background: var(--almagre-claro); }

/* ── Bloques de cierre y notas ────────────────────────────────────── */

.cierre {
  margin-top: clamp(2.2rem, 1.8rem + 1.8vw, 3.4rem);
  padding-inline-start: clamp(1.1rem, 1.8vw, 1.8rem);
  border-inline-start: 2px solid var(--almagre);
}
.cierre .destacado { margin-top: 0.7rem; }
.oscura .cierre { border-inline-start-color: var(--almagre-claro); }

.nota-legal {
  margin-top: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  background: var(--albero);
  border-top: 3px solid var(--almagre);
  padding: clamp(1.3rem, 1.1rem + 1.2vw, 2rem);
}
.nota-legal-titulo {
  font-family: var(--titulares);
  font-size: 1.35rem;
}
.nota-legal ul { margin-top: 1rem; }
.nota-legal li {
  display: grid;
  grid-template-columns: 1.3rem 1fr;
  gap: 0.7rem;
  padding-block: 0.55rem;
  max-width: 68ch;
  font-size: 0.96rem;
}
.nota-legal li::before {
  content: '';
  width: 10px; height: 2px;
  background: var(--almagre-texto);
  margin-top: 0.78em;
}
.nota-legal .fuente {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--grafito);
}
.nota-legal .fuente a { color: var(--almagre-texto); }

.aviso-legalillo {
  margin-top: 1.8rem;
  font-size: 0.86rem;
  color: var(--grafito);
  max-width: 62ch;
  padding-inline-start: 0.95rem;
  border-inline-start: 1px solid var(--almagre);
}
.oscura .aviso-legalillo { color: var(--ceniza); border-inline-start-color: var(--almagre-claro); }

/* El dato con fuente: el 2 % de ITP del artículo 44 en la página de
   flipping. Es de las pocas cosas de toda la web que el visitante no va
   a encontrar en ningún portal, así que se pinta como el dato que es:
   la cifra grande en mono y la norma justo debajo, con su enlace. */
.dato-destacado {
  margin-top: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  display: grid;
  gap: 1rem 2.5rem;
}
@media (min-width: 52rem) {
  .dato-destacado { grid-template-columns: 10rem 1fr; align-items: start; }
}
.dato-destacado-cifra {
  font-family: var(--mono);
  font-size: clamp(2.6rem, 2rem + 2.6vw, 4rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--almagre-claro);
  white-space: nowrap;
}
.dato-destacado-titulo {
  font-family: var(--titulares);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.2;
}
.dato-destacado-texto { margin-top: 0.8rem; color: var(--ceniza); max-width: 62ch; }
.dato-destacado-fuente {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--ceniza);
}
.dato-destacado-fuente a { color: var(--almagre-claro); }

/* ── Banda del propietario ────────────────────────────────────────────
   Regla del nicho: la página del que vende nunca vive escondida en el
   pie. Aquí la puerta del propietario es HOME STAGING —una de sus cinco
   líneas reales— y la consultoría cubre al que aún no ha decidido si
   vender. La banda enlaza a las dos. */

.banda {
  background: var(--olivar-alto);
  color: var(--caliza);
  padding-block: clamp(3.2rem, 2.4rem + 4.5vw, 6rem);
}
.banda-titular {
  font-family: var(--titulares);
  font-size: clamp(1.9rem, 1.35rem + 2.5vw, 3.1rem);
  line-height: 1.1;
  margin-top: 1.1rem;
  max-width: 22ch;
}
.banda-texto { margin-top: 1.2rem; max-width: 52ch; color: var(--ceniza); }

/* ── Propiedades ──────────────────────────────────────────────────────
   Dos por fila como mucho y grandes. Copiar la rejilla de tarjetitas
   del portal es perder: el portal siempre va a tener más inmuebles.

   NINGUNA ES REAL Y TODAS LO DICEN. El sello de ejemplo va en almagre
   sobre albero, encima de la imagen, no en letra pequeña debajo. */

.rejilla-props {
  display: grid;
  gap: clamp(1.8rem, 1.4rem + 2.5vw, 3rem);
  margin-top: clamp(1.4rem, 1rem + 1.8vw, 2.2rem);
}
@media (min-width: 52rem) {
  .rejilla-props { grid-template-columns: repeat(2, 1fr); }
}
.prop { position: relative; }
.prop-medio { position: relative; overflow: hidden; }
.prop-cuerpo { padding-top: 1.1rem; }
.prop-titulo {
  font-family: var(--titulares);
  font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem);
  line-height: 1.16;
}
.prop-datos {
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.5rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--linea-tenue);
}
.dato { display: flex; flex-direction: column; gap: 0.12rem; }
.dato-etiqueta {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grafito);
}
.dato-valor {
  font-family: var(--mono);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
/* El campo que espera dato lleva una raya, no una frase. La frase va
   una sola vez debajo de la tabla: repetida campo a campo salía doce
   veces en la misma pantalla y la ficha parecía rota. */
.dato-valor.pendiente { color: var(--grafito); }
.prop-pendiente {
  margin-top: 0.7rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--grafito);
}

.sello {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.38rem 0.65rem;
}
/* Encima de la imagen y no debajo: un sello que dice «esto es una
   maqueta» debajo de la foto se lee después de haberse creído la foto.

   ARRIBA A LA IZQUIERDA Y NO ABAJO, que era donde estaba. Abajo se
   sentaba justo encima del rótulo del hueco —que va alineado al pie de
   su caja— y tapaba media frase. Es el fallo típico de este kit: el
   nodo existía, tenía texto y color, y no se leía. */
.sello-ejemplo, .sello-suya {
  position: absolute;
  left: 0; top: 0;
  background: var(--almagre-fondo);
  color: var(--caliza);
}
/* El de la vivienda real va en olivar y no en almagre. Son dos cosas
   distintas y tienen que leerse distintas: «ficha de ejemplo» avisa de
   que no hay piso detrás; «datos pendientes de confirmar» dice que el
   piso existe y lo que falta son los números. */
.sello-suya { background: var(--olivar); }

/* Las notas de procedencia. SON DOS Y DICEN LO CONTRARIO:

     .aviso-imagenes  foto de banco → niega que sea suya
     .aviso-suya      foto suya     → reconoce que lo es

   Comparten forma para que se lean como la misma clase de nota, pero
   son clases distintas a propósito: verificar-visibles.mjs las lleva
   las dos en su lista y así comprueba por separado que ninguna acaba
   tapada. Un aviso de procedencia que no se ve es una atribución que
   no se hace. */
.aviso-imagenes, .aviso-suya {
  margin-top: 0.6rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--grafito);
  max-width: 62ch;
}
.oscura .aviso-imagenes, .oscura .aviso-suya { color: var(--ceniza); }

/* La suya lleva además el filete de almagre: es la única nota de la web
   que dice «esto sí es tuyo», y conviene que se distinga de un vistazo
   de la que dice lo contrario. */
.aviso-suya {
  padding-inline-start: 0.7rem;
  border-inline-start: 2px solid var(--almagre);
}

/* ── Huecos de foto ───────────────────────────────────────────────────
   Queda uno: su retrato. Aquí NO se pone una foto de banco de un señor
   con americana, porque sería lo único de toda la web que finge ser él.
   El hueco se pinta a propósito, con la proporción final y el rótulo de
   qué va ahí. No pide ningún archivo, no pesa y no puede fallar. */

.hueco {
  position: relative;
  background:
    repeating-linear-gradient(-45deg, transparent 0 11px, rgba(163, 90, 58, 0.10) 11px 12px),
    var(--albero);
  border: 1px solid var(--linea);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1rem, 2vw, 1.5rem);
  aspect-ratio: 3 / 2;
}
.hueco.retrato { aspect-ratio: 4 / 5; }
.hueco.panoramica { aspect-ratio: 16 / 9; }
.hueco-rotulo {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--almagre-texto);
}
.hueco-que {
  margin-top: 0.45rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--grafito);
  max-width: 36ch;
}

/* ── Impuestos y calculadora ─────────────────────────────────────────
   Cada cifra lleva su artículo al lado con enlace al BOE. Es la única
   parte de la web donde el dato manda sobre el diseño, y por eso va
   entera en mono y sin adornos.

   En Jaén esto no es relleno: los tipos reducidos se aplican a
   viviendas de hasta 150.000 €, que allí no es el caso raro sino el
   normal. Un comprador de menos de 35 años paga la mitad. */

.impuestos { margin-top: clamp(1.6rem, 1.3rem + 1.6vw, 2.6rem); }
.impuesto {
  display: grid;
  gap: 0.4rem 2rem;
  padding-block: 1.4rem;
  border-top: 1px solid var(--linea-tenue);
}
@media (min-width: 52rem) {
  .impuesto { grid-template-columns: 7rem 1fr 1.05fr; align-items: baseline; }
}
.impuesto:last-of-type { border-bottom: 1px solid var(--linea-tenue); }
.impuesto-tipo {
  font-family: var(--mono);
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--almagre-texto);
  white-space: nowrap;   /* «3,5 %» partido en dos líneas se lee como dos cifras */
}
.impuesto-caso {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grafito);
  display: block;
  margin-bottom: 0.35rem;
}
.impuesto-nombre { font-weight: 600; }
.impuesto-texto { color: var(--grafito); font-size: 0.94rem; margin-top: 0.3rem; }
.impuesto-fuente {
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--grafito);
}
.impuesto-fuente a { color: var(--almagre-texto); }

.sin-cifra { margin-top: 2.2rem; }
.sin-cifra li {
  padding-block: 0.65rem;
  border-bottom: 1px solid var(--linea-tenue);
  font-size: 0.95rem;
  max-width: 68ch;
}

.calculadora {
  margin-top: clamp(2rem, 1.6rem + 1.8vw, 3rem);
  border: 1px solid var(--linea-clara);
  padding: clamp(1.3rem, 1.1rem + 1.4vw, 2.2rem);
}
.calc-campos {
  display: grid;
  gap: 1.3rem;
  margin-top: 1.3rem;
}
@media (min-width: 42rem) {
  .calc-campos { grid-template-columns: 1fr 1.3fr; }
}
.calc-resultado { margin-top: 1.8rem; border-top: 1px solid var(--linea-clara); }
.calc-fila {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem;
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--linea-clara);
}
/* Sin esto, `hidden` no oculta nada: display:flex gana a la regla del
   navegador para [hidden], y en segunda mano se quedaban en pantalla
   las filas de IVA y AJD con un guion —que es exactamente el error que
   esta calculadora existe para no cometer—. */
.calc-fila[hidden] { display: none; }
.calc-etiqueta { font-size: 0.94rem; color: var(--ceniza); }
.calc-valor {
  font-family: var(--mono);
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.calc-fila.total .calc-etiqueta { color: var(--caliza); font-weight: 600; }
.calc-fila.total .calc-valor { font-size: clamp(1.35rem, 1.15rem + 1vw, 1.8rem); color: var(--almagre-claro); }
.calc-nota { margin-top: 1.1rem; font-size: 0.85rem; color: var(--ceniza); max-width: 56ch; }

/* El aviso de que el precio se ha pasado del límite del tipo reducido.
   Aparece en lugar de calcular una cifra que no corresponde, que es la
   parte más fácil de hacer mal de toda la calculadora. */
.calc-aviso {
  margin-top: 1.1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--almagre-claro);
  font-size: 0.9rem;
  color: var(--caliza);
  max-width: 62ch;
}
.calc-aviso[hidden] { display: none; }

/* ── Formularios ──────────────────────────────────────────────────────
   No envían nada y lo dicen en pantalla, arriba y no en letra pequeña
   al final. Un formulario que se traga los datos en silencio durante
   una demo es la forma más tonta de perder la confianza que la web
   entera está intentando construir. */

.formulario {
  margin-top: 1.8rem;
  display: grid;
  gap: 1.1rem;
}
@media (min-width: 46rem) {
  .formulario { grid-template-columns: repeat(2, 1fr); }
  .campo.ancho, .campo-casilla, .formulario-acciones { grid-column: 1 / -1; }
}
.campo { display: flex; flex-direction: column; gap: 0.35rem; }
.campo-etiqueta {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--grafito);
}
.campo input, .campo select, .campo textarea {
  font: inherit;
  font-size: 0.97rem;
  color: var(--tinta);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--almagre);
  padding: 0.55rem 0.2rem;
  border-radius: 0;
}
.campo textarea { min-height: 7rem; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-bottom-color: var(--olivar);
  border-bottom-width: 2px;
  padding-bottom: calc(0.55rem - 1px);
}
.campo-casilla {
  display: flex; align-items: flex-start; gap: 0.65rem;
  font-size: 0.91rem;
  color: var(--grafito);
}
.campo-casilla input { margin-top: 0.28rem; accent-color: var(--almagre-fondo); }

.oscura .campo input, .oscura .campo select, .oscura .campo textarea {
  color: var(--caliza);
  border-bottom-color: var(--almagre-claro);
}
.oscura .campo-etiqueta { color: var(--ceniza); }
.oscura .campo input:focus, .oscura .campo select:focus { border-bottom-color: var(--caliza); }
.oscura .campo select option { color: var(--tinta); }

.aviso-demo {
  padding: 0.95rem 1.15rem;
  border: 1px solid var(--almagre);
  font-size: 0.89rem;
  color: var(--grafito);
  max-width: 62ch;
}
.oscura .aviso-demo { border-color: var(--almagre-claro); color: var(--ceniza); }

/* ── Páginas legales ──────────────────────────────────────────────── */

.legal-seccion { margin-top: 2.6rem; }
.legal-titulo {
  font-family: var(--titulares);
  font-size: 1.55rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--linea-tenue);
}
.ficha-identidad { margin-top: 1.8rem; display: grid; gap: 0.8rem; }
.ficha-identidad div {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: 0.35rem 1.2rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--linea-tenue);
  font-size: 0.93rem;
}
.ficha-identidad dt {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--grafito);
  padding-top: 0.2rem;
}
.ficha-identidad dd { margin: 0; }

/* El hueco de un dato que no se inventa. Nunca imprime el PENDIENTE_:
   lo traduce a una frase que dice la verdad sin parecer un error de
   programación. */
.pendiente-dato {
  font-family: var(--mono);
  font-size: 0.85em;
  color: var(--almagre-texto);
}
.oscura .pendiente-dato { color: var(--almagre-claro); }

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

.pie {
  background: var(--olivar);
  color: var(--caliza);
  padding-block: clamp(2.8rem, 2.2rem + 3vw, 4.5rem) 2.2rem;
}
.pie-rejilla { display: grid; gap: 2.2rem; }
@media (min-width: 54rem) {
  .pie-rejilla { grid-template-columns: 1.25fr 1fr 1fr 1fr; }
}
.pie-marca-nombre {
  font-family: var(--titulares);
  font-size: 1.55rem;
  line-height: 1.1;
}
.pie-reclamo {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--almagre-claro);
  margin-top: 0.7rem;
}
.pie-columna-titulo {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ceniza);
  margin-bottom: 0.9rem;
}
.pie-lista li + li { margin-top: 0.6rem; }
.pie-lista a { text-decoration: none; font-size: 0.93rem; border-bottom: 1px solid transparent; }
.pie-lista a:hover { border-bottom-color: var(--almagre-claro); }
.pie-cierre {
  margin-top: clamp(2.2rem, 1.8rem + 1.8vw, 3.4rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--linea-clara);
  display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; justify-content: space-between;
  font-size: 0.8rem;
  color: var(--ceniza);
}
.pie-nota { max-width: 72ch; }

/* ── Aparición ────────────────────────────────────────────────────────
   Lo único que se mueve además del menú y de las jambas. Sube 12 px y
   aparece.

   El estado oculto va detrás de @media (scripting: enabled): sin
   JavaScript el contenido nace visible, en vez de quedarse en opacidad
   0 esperando a un observador que nunca va a llegar. Contenido sin
   animar es mejor que contenido invisible. */

@media (scripting: enabled) {
  .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s var(--curva), transform 0.6s var(--curva);
  }
}
.reveal[data-visible='true'] { opacity: 1; transform: none; }

/* ── Movimiento reducido ──────────────────────────────────────────────
   GLOBAL Y SIN NOMBRAR ELEMENTOS. Va sobre el selector universal para
   que dé igual cómo se llame lo que venga mañana.

   Ya falló una vez en el kit: la regla que paraba una deriva decía
   `.hero-foto img`, el hero pasó a ser un div con background y dejó de
   alcanzarla. La animación siguió corriendo y en una captura eso NO SE
   VE: una animación viva sale idéntica a una parada en una foto fija.

   Las dos excepciones de abajo NO quitan movimiento —de eso ya se
   encarga la regla global—: existen para que algo SE VEA. `.reveal`
   nace en opacidad 0 y sin ellas la página quedaría vacía para quien
   tenga la preferencia activada. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }

  /* Las dos únicas excepciones, y las dos son PARA QUE ALGO SE VEA, no
     para quitar movimiento: de eso ya se encarga la regla universal de
     arriba, que apaga la deriva del hero y el escalonado de las puertas
     sin necesidad de nombrarlos.

     Estos dos nacen en opacidad 0 esperando a que un observador los
     encienda. Sin estas dos líneas, quien tenga la preferencia activada
     se encontraría la portada sin sus cinco puertas —que es la web
     entera— si el observador fallara. */
  .reveal { opacity: 1 !important; transform: none !important; }
  .puertas .puerta { opacity: 1 !important; transform: none !important; }
}

/* ── Impresión ────────────────────────────────────────────────────────
   Alguien va a imprimir la página de gastos de compra para llevársela
   al banco. Que salga sin franja, sin menú y sin cookies es gratis. */
@media print {
  .franja, .cabecera, .cookies, .banda, .hero-medio, .hero-velo { display: none !important; }
  body { background: #fff; color: #000; }
  .seccion.oscura, .hero, .pie { background: #fff !important; color: #000 !important; }
  .seccion { padding-block: 1.5rem; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 0.75em; }
}