/* =========================================================
   Base web-build: esqueleto de conversión inmobiliaria (plan v2, Tarea 11), calmado, «revista de moda high class».
   Cabecera con teléfono, WhatsApp y «Valorar mi casa»; barra inferior en móvil; portada con Comprar / Vender;
   cartera con la foto primero; banda de valoración; confianza; avísame de casas nuevas; contacto; pie.
   Movimiento (Emil Kowalski): solo se animan transform y opacity; nunca transition: all.
   Lee solo 7 variables, que define cada dir-*.css:
   --c-fondo --c-texto --c-acento --c-suave --f-display --f-texto --escala
   y 2 opcionales de marca, que escribe assets/css/marca.css (tools/marca.mjs; references/gusto.md «Marca del cliente»):
   --c-sobre-acento  tinta para texto sobre el color de marca (por defecto --c-texto)
   --motivo          url() de un SVG de una línea sacado del logo (tejado, ola…); solo se usa con <body data-motivo>
   El acento (= color primario de la agencia) va en superficies grandes (valoración, cargador), filetes, flechas
   y hovers; como texto solo si pasa contraste (marca.json primario_texto).
   Piezas de WEBS/dhoce (cabecera, menú, apariciones, índice, cursor, pie)
   y WEBS/garcia navarro (galería horizontal, marca del pie ajustada).
   ========================================================= */

:root {
  /* Derivados de las 7 variables (no se definen fuera) */
  --ink: var(--c-texto);
  --paper: var(--c-fondo);
  --mute: color-mix(in srgb, var(--c-texto) 64%, var(--c-fondo));
  --line: color-mix(in srgb, var(--c-texto) 14%, transparent);
  --mute-d: color-mix(in srgb, var(--c-fondo) 62%, var(--c-texto));
  --line-d: color-mix(in srgb, var(--c-fondo) 16%, transparent);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);

  --max: 1520px;
  --pad: clamp(16px, 3.6vw, 56px);
  --gap: clamp(12px, 1.6vw, 24px);
  --section-y: clamp(88px, 9vw, 160px);
  --header-h: 72px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  html.has-smooth { scroll-behavior: auto; }
}
html.is-locked, html.menu-open { overflow: hidden; }

body {
  margin: 0;
  background: var(--c-fondo);
  color: var(--c-texto);
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; font-family: var(--f-display); text-wrap: balance; }
[hidden] { display: none !important; }
::selection { background: var(--c-acento); color: var(--c-fondo); }
/* Foco visible en cualquier sección: el color del texto, no el acento */
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.skip-link {
  position: fixed; left: 16px; top: 16px; z-index: 200;
  padding: 12px 18px; background: var(--c-texto); color: var(--c-fondo);
  transform: translateY(-180%); transition: transform .3s var(--ease-out);
}
.skip-link:focus { transform: none; }

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

/* ---------- Tipografía (tamaños modestos, × --escala) ---------- */
.eyebrow, .label {
  font-size: 12px; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--mute);
}
.h2 {
  margin-top: 18px; max-width: 16em;
  font-size: calc(clamp(1.9rem, 1.2rem + 2.2vw, 3.4rem) * var(--escala));
  line-height: 1.06; letter-spacing: -.02em;
}
.statement {
  max-width: 22em;
  font-size: calc(clamp(1.6rem, 1.1rem + 1.6vw, 2.75rem) * var(--escala));
  line-height: 1.16; letter-spacing: -.015em;
}
.lead { max-width: 46ch; margin-top: 22px; font-size: 1.06rem; color: var(--mute); }

/* ---------- Botones: píldora larga con flecha redonda ----------
   Blanco (#fff) y casi negro (#141414) fijos a propósito: estos elementos van siempre encima
   de fotos (portada, chips de las tarjetas), así que no siguen a --c-fondo/--c-texto.
   Lo mismo vale para el texto y los velos de .hero. */
.pill {
  display: inline-flex; align-items: center; gap: 14px;
  height: 52px; padding: 0 8px 0 24px; border-radius: 999px;
  font-size: 15px; letter-spacing: .01em; white-space: nowrap;
  position: relative; isolation: isolate; overflow: hidden;
}
/* Hover: una capa del color del texto que aparece con opacidad (nada de animar colores) */
.pill::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: currentColor; opacity: 0; transition: opacity .6s var(--ease-out);
}
.pill:hover::after { opacity: .1; }
.pill:not(:has(.pill__arrow)) { padding-right: 24px; }
.pill__arrow {
  position: relative; display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%; background: var(--c-acento);
}
.pill__arrow::before {
  content: ""; width: 8px; height: 8px; margin-left: -3px;
  border-top: 1.5px solid var(--c-fondo); border-right: 1.5px solid var(--c-fondo); transform: rotate(45deg);
}
.pill--sm { height: 40px; padding: 0 18px; font-size: 14px; }
.pill--light { background: #fff; color: #141414; }
.pill--ghost { border: 1px solid rgba(255, 255, 255, .6); color: #fff; }
.pill--solid { background: var(--c-texto); color: var(--c-fondo); }

.link-arrow {
  position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 6px 0;
  font-size: 15px;
}
.link-arrow::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform-origin: left; transition: transform .8s var(--ease-out);
}
.link-arrow::after { content: "→"; transition: transform .8s var(--ease-out); }
.link-arrow:hover::before { transform: scaleX(0); transform-origin: right; }
.link-arrow:hover::after { transform: translateX(4px); }

.round {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line);
}
.round::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; opacity: 0; transition: opacity .5s var(--ease-out); }
.round:hover::after { opacity: .08; }
.round__arrow { width: 8px; height: 8px; margin-left: -3px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.round__arrow--l { margin: 0 -3px 0 0; transform: rotate(-135deg); }

/* =========================================================
   Cabecera: barra a todo el ancho, transparente sobre la portada,
   sólida después, oscura sobre secciones data-theme="dark". Nunca se oculta.
   Escritorio (≥1100): logo · Comprar, Vender, La agencia, Contacto · teléfono, WhatsApp, idioma, «Valorar mi casa».
   Por debajo: logo · idioma · menú, y la barra inferior lleva Llamar · WhatsApp · Valorar mi casa.
   ========================================================= */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  padding: 10px var(--pad);
  color: #fff; isolation: isolate;
}
/* Barra a todo el ancho (nunca cápsula): el logo va suelto, sin caja alrededor */
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--c-fondo); border-bottom: 1px solid var(--line);
  opacity: 0; transition: opacity .4s var(--ease-out);
}
.header__inner {
  position: relative; max-width: var(--max); margin-inline: auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  height: 60px;
}
.header.is-solid { color: var(--c-texto); }
.header.is-solid::before { opacity: 1; }
.header.is-solid.is-dark { color: var(--c-fondo); }
.header.is-solid.is-dark::before { background: color-mix(in srgb, var(--c-texto) 94%, var(--c-fondo)); border-color: var(--line-d); }
.menu-open .header { color: var(--c-fondo); }
.menu-open .header::before { opacity: 0; }

.brand {
  justify-self: start; display: flex; align-items: center; height: 48px; max-width: 100%;
  font-family: var(--f-display); font-size: 17px; letter-spacing: .02em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* Logo real de la agencia (tools/marca.mjs). Alto fijo y ancho acotado: un logo apaisado se encoge
   dentro de la caja (contain) y uno cuadrado queda de 48 px (40 en móvil); nunca deforma ni se sale de la píldora. */
.brand__logo { display: block; height: 100%; width: auto; max-width: min(190px, 44vw); object-fit: contain; object-position: left center; }
/* Claro sobre la foto, sobre la cabecera oscura y con el menú abierto; el normal sobre la píldora clara */
.brand__logo[data-logo="normal"] { display: none; }
.header.is-solid:not(.is-dark) .brand__logo[data-logo="normal"] { display: block; }
.header.is-solid:not(.is-dark) .brand__logo[data-logo="claro"] { display: none; }
.menu-open .header .brand__logo[data-logo="normal"] { display: none; }
.menu-open .header .brand__logo[data-logo="claro"] { display: block; }
.nav { display: none; }
.nav ul { display: flex; gap: 6px; }
.nav a { position: relative; display: block; padding: 8px 12px; font-size: 14.5px; }
.nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .7s var(--ease-out);
}
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.header__actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }
.icono { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.header__tel, .header__wa { display: none; align-items: center; gap: 8px; padding: 8px 6px; font-size: 14.5px; white-space: nowrap; }
/* El número siempre en el DOM (nombre accesible «Llamar +34…»); visible a partir de 1360 px */
.header__num { font-variant-numeric: tabular-nums; }
@media (max-width: 1359px) {
  .header__num { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.header__tel:hover, .header__wa:hover { text-decoration: underline; text-underline-offset: 5px; }
.lang { display: flex; gap: 2px; font-size: 12px; letter-spacing: .08em; }
.lang button { padding: 8px 6px; opacity: .55; transition: opacity .3s; }
.lang button[aria-pressed="true"], .lang button:hover { opacity: 1; }
.header__cta { display: none; border: 1px solid currentColor; }
.header.is-solid:not(.is-dark) .header__cta { background: var(--c-acento); border-color: var(--c-acento); color: var(--c-sobre-acento, var(--c-texto)); }

.menu-toggle { display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.menu-toggle__icon { position: relative; display: block; width: 22px; height: 10px; }
.menu-toggle__icon i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .5s var(--ease-out); }
.menu-toggle__icon i:first-child { top: 1px; }
.menu-toggle__icon i:last-child { top: 8px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

@media (min-width: 1100px) {
  .nav { display: block; }
  .header__cta, .header__tel, .header__wa { display: inline-flex; }
  .menu-toggle { display: none; }
}


/* ---------- Menú a pantalla completa (diálogo) ---------- */
.menu {
  position: fixed; inset: 0; z-index: 55;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--c-texto); color: var(--c-fondo);
  transform: translateY(-100%); visibility: hidden;
  transition: transform 1.1s var(--ease-io), visibility 0s linear 1.1s;
}
.menu.is-open { transform: none; visibility: visible; transition: transform 1.1s var(--ease-io), visibility 0s; }
.menu__inner {
  min-height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 36px;
  padding-top: calc(var(--header-h) + 40px); padding-bottom: 28px;
}
.menu__list { align-self: center; }
.menu__list li { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--ease-out), transform 1.1s var(--ease-out); }
.menu.is-open .menu__list li { opacity: 1; transform: none; transition-delay: calc(.36s + var(--i, 0) * 60ms); }
.menu__list a {
  display: flex; align-items: baseline; gap: 16px; padding: 6px 0;
  font-family: var(--f-display); font-size: min(clamp(2.2rem, 1.4rem + 4vw, 4rem), 8.6vh); line-height: 1.06; letter-spacing: -.02em;
}
.menu__list b { font-weight: 400; }
.menu__list span { flex: none; width: 30px; font-family: var(--f-texto); font-size: 12px; letter-spacing: .08em; color: var(--mute-d); transform: translateY(-.5em); }
.menu__foot { display: grid; gap: 16px 24px; padding-top: 22px; border-top: 1px solid var(--line-d); font-size: 15px; }
.menu__foot .label { display: block; margin-bottom: 4px; color: var(--mute-d); }
@media (min-width: 640px) { .menu__foot { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =========================================================
   1. Portada: fotos de sus casas a sangre, fundido lento.
   Texto blanco fijo (va sobre foto). El velo inferior izquierdo está medido sobre la foto
   más clara de Casa First: título ≥ 3:1 y entradilla ≥ 4,5:1 en el peor píxel, a 390 y 1440.
   ========================================================= */
.hero {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  height: 100svh; min-height: 600px; max-height: 1100px;
  overflow: hidden; background: color-mix(in srgb, var(--c-texto) 82%, var(--c-fondo)); color: #fff;
}
.hero__media { position: absolute; inset: 0; }
.hero__slides, .hero__slide { position: absolute; inset: 0; }
.hero__slide { opacity: 0; transition: opacity 2.6s var(--ease-io); }
/* Hasta que el motor marque la activa, la primera se ve ya, sin fundido (es el LCP). Las demás no se piden
   hasta el load (están en pantalla, así que loading=lazy no las frena) salvo que les toque ser la activa */
.js:not(.is-loaded) .hero__slide:not(:first-child):not(.is-active) { display: none; }
/* Lo mismo con las fotos de la cartera: con red lenta Chrome pide las perezosas a ~3000 px y compiten con la
   foto de portada. Hasta el load se ve el fondo suave de la tarjeta */
.js:not(.is-loaded) .card__media img { display: none; }
.hero__slides:not(:has(.is-active)) .hero__slide:first-child { opacity: 1; transition: none; }
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.0); transition: transform 0s 2.6s;
}
.hero__slide.is-active img { transform: scale(1.07); transition: transform 10s cubic-bezier(.25, .1, .25, 1); }
.hero-paused .hero__slide.is-active img { transform: scale(1.0); }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s var(--ease-out); }
.has-hero-video .hero__video { opacity: 1; }
.hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, .14) 40%,
      rgba(0, 0, 0, .34) 50%, rgba(0, 0, 0, .52) 60%, rgba(0, 0, 0, .62) 72%, rgba(0, 0, 0, .72) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 62%);
}
.hero__inner { position: relative; padding-bottom: clamp(36px, 5vw, 72px); }
.hero__title {
  max-width: 15em;
  font-size: calc(clamp(2.2rem, 1.3rem + 3vw, 4.4rem) * var(--escala));
  line-height: 1.04; letter-spacing: -.02em;
  text-shadow: 0 0 32px rgba(0, 0, 0, .28);
}
.hero__dek { max-width: 40ch; margin-top: 18px; font-size: 1.06rem; color: rgba(255, 255, 255, .92); text-shadow: 0 0 18px rgba(0, 0, 0, .35); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__foot {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 52px; border-top: 1px solid rgba(255, 255, 255, .22);
}
.hero__caption { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.hero__toggle { display: grid; place-items: center; width: 36px; height: 36px; }
.hero__toggle span { width: 8px; height: 10px; border-left: 2px solid #fff; border-right: 2px solid #fff; }
.hero__toggle[aria-pressed="true"] span { width: 0; height: 0; border: 0; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }

/* Caminos Comprar / Vender: la etiqueta pequeña dice el camino; el texto, la acción */
.hero__caminos { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.camino__label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .62; }
.pill--ghost .camino__label { opacity: .86; }
@media (max-width: 560px) {
  .hero__caminos { display: grid; }
  .camino { justify-content: space-between; }
}

/* Entrada de la portada solo con CSS, sin esperar al JS. El titular es el LCP: se pinta opaco desde el
   primer fotograma y solo se desliza (transform); los caminos entran después, tras el cargador */
@keyframes hero-sube { from { transform: translate3d(0, 28px, 0); } }
@keyframes hero-entra { from { opacity: 0; transform: translate3d(0, 28px, 0); } }
.hero__title { animation: hero-sube 2.2s var(--ease-out) 1.2s both; }
.hero__caminos { animation: hero-entra 2s var(--ease-out) 1.45s both; }
html:not(.js) .hero__title, html:not(.js) .hero__caminos { animation: none; }

/* =========================================================
   2. Cartera: galería horizontal nativa (sin pin) + zonas
   ========================================================= */
.cartera { padding-top: var(--section-y); }
.sec-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 20px 40px; margin-bottom: clamp(32px, 4vw, 56px);
}
.track {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(272px, 30vw, 460px); gap: var(--gap);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding-inline: max(var(--pad), calc((100% - var(--max)) / 2));
  scroll-padding-inline: max(var(--pad), calc((100% - var(--max)) / 2));
  scrollbar-width: none; cursor: grab;
}
.track::-webkit-scrollbar { display: none; }
.track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.track:focus-visible { outline-offset: -2px; }
.card { scroll-snap-align: start; }
.card__link { display: block; }
.card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-suave); }
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 2.8s var(--ease-out);
}
@media (hover: hover) { .card__link:hover .card__media img { transform: scale(1.04); } }
/* Nada encima de la foto: tipo y lugar, precio y datos van debajo (The Modern House, Inigo) */
.card__body { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin-top: 16px; }
.card__title { font-size: calc(1.2rem * var(--escala)); line-height: 1.25; letter-spacing: -.01em; }
.card__precio { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card__meta { margin-top: 4px; font-size: 14px; color: var(--mute); }

.rail__foot { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 20px; margin-top: 28px; }
.rail__progress { position: relative; height: 1px; background: var(--line); overflow: hidden; }
.rail__progress span { position: absolute; inset: 0; background: var(--c-acento); transform-origin: 0 50%; transform: scaleX(calc(.08 + var(--p, 0) * .92)); transition: transform .5s var(--ease-out); }
.rail__count { font-size: 12px; letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--mute); }
.rail__nav { display: flex; gap: 8px; }

/* Zonas: lista con foto que sigue al cursor (solo zonas, nunca destacados) */
.zonas { margin-top: clamp(96px, 10vw, 168px); padding-bottom: var(--section-y); }
.zonas__title { margin-bottom: clamp(20px, 2.4vw, 36px); font-family: var(--f-texto); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.zonas__list { border-top: 1px solid var(--line); }
.zonas__list li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 64px; grid-template-areas: "num name thumb" "num tipos thumb";
  align-items: center; gap: 2px 14px; padding: 18px 0; border-bottom: 1px solid var(--line);
  transition: opacity .9s var(--ease-out);
}
.zona__num { grid-area: num; align-self: start; padding-top: .6em; font-size: 12px; letter-spacing: .1em; color: var(--mute); }
.zona__name { grid-area: name; font-family: var(--f-display); font-size: calc(clamp(1.45rem, 1rem + 1.4vw, 2.4rem) * var(--escala)); line-height: 1.1; letter-spacing: -.015em; transition: transform 1.2s var(--ease-out); }
.zona__tipos { grid-area: tipos; font-size: 14px; color: var(--mute); }
.zona__thumb { grid-area: thumb; width: 64px; height: 64px; object-fit: cover; }
.zonas-cursor { display: none; }
@media (min-width: 1024px) {
  .zonas__list li { grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "num name tipos"; padding: clamp(18px, 1.8vw, 28px) 0; }
  .zona__num { align-self: center; padding-top: 0; }
  .zona__tipos { justify-self: end; text-align: right; }
  .zona__thumb { display: none; }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .zonas__list:hover li { opacity: .35; }
  .zonas__list li:hover { opacity: 1; }
  .zonas__list li:hover .zona__name { transform: translateX(1.2rem); }
  .zonas-cursor {
    position: fixed; left: 0; top: 0; z-index: 50; display: block;
    width: clamp(260px, 22vw, 360px); aspect-ratio: 4 / 5; overflow: hidden;
    background: var(--c-suave); pointer-events: none; opacity: 0; visibility: hidden; scale: .7;
    transition: opacity .7s var(--ease-out), scale 1s var(--ease-out), visibility 0s linear .7s;
  }
  .zonas-cursor.is-on { opacity: 1; visibility: visible; scale: 1; transition: opacity .9s var(--ease-out), scale 1.2s var(--ease-out), visibility 0s; }
  .zonas-cursor img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transform: scale(1.14); transition: opacity .7s var(--ease-out), transform 1.4s var(--ease-out);
  }
  .zonas-cursor img.is-active { opacity: 1; transform: none; }
}

/* =========================================================
   3. Valoración: banda «¿Cuánto vale tu casa?» (contenedor; la Tarea 15 pone el formulario en el hueco)
   ========================================================= */
.valoracion { position: relative; overflow: hidden; padding-block: var(--section-y); }
/* La valoración va entera en el color de marca; el texto, en la tinta que pasa contraste sobre él */
.valoracion--marca { background: var(--c-acento); color: var(--c-sobre-acento, var(--c-texto)); }
.valoracion--marca .eyebrow, .valoracion--marca .lead { color: inherit; }
.valoracion--marca ::selection { background: var(--c-sobre-acento, var(--c-texto)); color: var(--c-acento); }
.valoracion--neutra { background: var(--c-suave); }
.valoracion .wrap { position: relative; }
.valoracion__motivo { display: none; }
[data-motivo] .valoracion__motivo {
  display: block; position: absolute; right: calc(var(--pad) * -1); bottom: 0; width: min(46vw, 680px); aspect-ratio: 112 / 40;
  background: currentColor; -webkit-mask: var(--motivo) center / contain no-repeat; mask: var(--motivo) center / contain no-repeat;
  opacity: .9; pointer-events: none;
}
@media (max-width: 899px) { [data-motivo] .valoracion__motivo { top: -56px; bottom: auto; right: 0; width: 120px; } }
/* Botón en tinta sobre la superficie de marca: el texto va en el color de marca (contrasta con la tinta por construcción) */
.pill--tinta { background: var(--c-sobre-acento, var(--c-texto)); color: var(--c-acento); }
.pill--tinta .pill__arrow::before { border-color: var(--c-sobre-acento, var(--c-texto)); }
.pill--tinta:focus-visible { outline-color: var(--c-sobre-acento, var(--c-texto)); }
.valoracion__grid { display: grid; gap: 36px var(--gap); }
.valoracion__slot:empty { display: none; }
@media (min-width: 1024px) {
  .valoracion__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; }
  .valoracion__slot { grid-column: 1 / -1; grid-row: 2; }
  .valoracion__accion { grid-column: 2; grid-row: 1; justify-self: end; }
}

/* Formulario de valoración en frase, 3 pasos (valoracion-ui.js). Hereda la tinta de la superficie (en marca,
   --c-sobre-acento): líneas, texto y error en currentColor, sin grises ni rojos que rompan el contraste sobre el color de marca */
.val .campo, .val__campo, .val__acciones, .val__resultado { scroll-margin-bottom: 96px; }   /* por encima de la barra inferior móvil */
.val ::placeholder { color: inherit; opacity: .7; }
.val { display: grid; gap: 26px; max-width: 920px; }
.val__progreso { color: inherit; }
.val fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.val__frase, .val__resumen {
  font-family: var(--f-display); font-size: calc(clamp(1.35rem, 1rem + 1.3vw, 2.2rem) * var(--escala));
  line-height: 1.6; letter-spacing: -.01em;
}
.val__resumen { margin-bottom: 26px; }
.val .campo select, .val .campo input, .val__campo input {
  max-width: 100%; border: 0; border-bottom: 1.5px solid currentColor; border-radius: 0; background: transparent;
  color: inherit; font: inherit; letter-spacing: inherit; line-height: 1.3;
}
.val .campo select { padding: 0 24px 2px 2px; -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis; }
.val .campo input { width: 4.5ch; padding: 0 2px 2px; text-align: center; }
.campo--m2::after { display: none; }
/* La lista desplegable del sistema va sobre blanco: sus opciones no heredan la tinta de la marca */
.val option, .val optgroup { color: var(--c-texto); background: var(--c-fondo); }
.val__datos { display: grid; gap: 22px; max-width: 520px; }
.val__campo { display: grid; gap: 4px; font-size: 14px; }
.val__campo input { width: 100%; padding: 6px 0 8px; font-size: 1.25rem; font-family: var(--f-texto); }
.val__aviso { margin-top: 18px; max-width: 52ch; font-size: 14px; line-height: 1.5; }
.val__error { margin: 0; font-weight: 600; }
.val__error:empty { display: none; }
.val__error::before { content: "! "; content: "! " / ""; }
.val__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.val__atras { padding: 6px 0; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
.val__resultado { max-width: 920px; outline: none; }
.val__resultado:empty { display: none; }
.val__etiqueta { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.val__rango {
  margin-top: 10px; font-family: var(--f-display); font-size: calc(clamp(1.7rem, 1rem + 3.4vw, 3.6rem) * var(--escala));
  line-height: 1.1; letter-spacing: -.01em; text-wrap: balance;
}
.val__rango--texto { font-size: calc(clamp(1.5rem, 1rem + 2vw, 2.6rem) * var(--escala)); }
.val__agente { margin-top: 16px; font-size: 1.1rem; }
.val__nota { margin-top: 8px; font-size: 14px; max-width: 52ch; }
.val__resultado .val__acciones { margin-top: 28px; }
@media (prefers-reduced-motion: no-preference) {
  .val__paso:not([hidden]) { animation: val-entra .6s var(--ease-out); }
  .val__resultado:not(:empty) { animation: val-entra .6s var(--ease-out); }
  @keyframes val-entra { from { opacity: 0; transform: translateY(10px); } }
}

/* =========================================================
   4. Confianza (#agencia): cifras, equipo con caras y testimonios, solo con datos reales (portada-ui.js)
   ========================================================= */
.agencia { padding-block: var(--section-y); }
.agencia__head { display: grid; gap: 0 var(--gap); }
.agencia__head .h2 { margin-top: 18px; }
@media (min-width: 1024px) {
  .agencia__head { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); }
  .agencia__head .eyebrow { padding-top: 1.6em; }
  .agencia__head .h2 { margin-top: 0; }
}
.cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 28px var(--gap);
  margin-top: clamp(40px, 5vw, 72px); padding-top: 28px; border-top: 1px solid var(--line);
}
.cifras b {
  display: block; margin-bottom: 8px; font-family: var(--f-display); font-weight: 400;
  font-size: calc(clamp(2rem, 1.3rem + 2vw, 3.2rem) * var(--escala)); line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.cifras__de { font-size: .45em; letter-spacing: 0; color: var(--mute); }
.cifras span { font-size: 14px; color: var(--mute); }
.cifras a { text-decoration: underline; text-underline-offset: 4px; }
.equipo {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--gap);
  margin-top: clamp(48px, 6vw, 88px);
}
@media (min-width: 900px) { .equipo { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.persona__foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-suave); }
.persona__foto img { width: 100%; height: 100%; object-fit: cover; }
.persona__foto span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--f-display); font-size: clamp(2rem, 1.4rem + 2vw, 3.4rem); color: var(--mute);
}
.persona__nombre { margin-top: 14px; font-family: var(--f-display); font-size: calc(1.15rem * var(--escala)); line-height: 1.25; }
.persona__cargo { font-size: 14px; color: var(--mute); }
.persona__idiomas { margin-top: 6px; font-size: 12px; letter-spacing: .12em; color: var(--mute); }
.testimonios { display: grid; gap: 0 calc(var(--gap) * 3); margin-top: clamp(24px, 3vw, 40px); }
@media (min-width: 900px) { .testimonios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.testimonios .cita blockquote { max-width: 36ch; font-size: calc(clamp(1.1rem, 1rem + .4vw, 1.35rem) * var(--escala)); line-height: 1.45; }
@media (max-width: 1099px) { .hero { height: calc(100svh - 56px - env(safe-area-inset-bottom)); } }

/* =========================================================
   5. Avísame de casas nuevas: frase con huecos (tipo, zona, precio) -> WhatsApp
   ========================================================= */
.alertas {
  padding-block: var(--section-y); background: var(--c-suave);
  /* El gris de apoyo se mezcla con el fondo real de la sección (--c-suave), no con el papel: pasa AA */
  --mute: color-mix(in srgb, var(--c-texto) 72%, var(--c-suave));
}
.alertas__grid { display: grid; gap: 40px var(--gap); align-items: end; }
@media (min-width: 1024px) { .alertas__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.alerta__frase {
  font-family: var(--f-display); font-size: calc(clamp(1.35rem, 1rem + 1.3vw, 2.2rem) * var(--escala));
  line-height: 1.6; letter-spacing: -.01em;
}
.campo { position: relative; display: inline-block; max-width: 100%; vertical-align: baseline; }
.campo select {
  max-width: 100%; padding: 0 24px 2px 2px; border: 0; border-bottom: 1.5px solid var(--c-acento); border-radius: 0;
  background: transparent; color: inherit; font: inherit; letter-spacing: inherit; line-height: 1.3;
  -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis;
}
.campo::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 7px; height: 7px; pointer-events: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-70%) rotate(45deg);
}
.campo__medida { position: absolute; visibility: hidden; white-space: nowrap; padding: 0 2px; }
.alerta .pill { margin-top: 28px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* =========================================================
   6. Contacto
   ========================================================= */
.contacto { padding-block: var(--section-y); border-top: 1px solid var(--line); }
.contacto__grid { display: grid; gap: 48px var(--gap); align-items: end; }
.contacto .pill { margin-top: 34px; }
.contacto__list { border-top: 1px solid var(--line); }
.contacto__list div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contacto__list dt { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.contacto__list dd { font-size: 1.06rem; overflow-wrap: anywhere; }
.contacto__list a:hover { text-decoration: underline; text-underline-offset: 5px; }
@media (min-width: 768px) {
  .contacto__list div { grid-template-columns: 9rem minmax(0, 1fr); align-items: baseline; }
}
@media (min-width: 1024px) {
  .contacto__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

/* =========================================================
   Pie: oscuro (texto/fondo invertidos), la marca sube
   ========================================================= */
.footer { position: relative; overflow: hidden; padding-top: clamp(64px, 7vw, 112px); background: var(--c-texto); color: var(--c-fondo); }
.footer__top { display: grid; gap: 36px var(--gap); padding-bottom: clamp(48px, 6vw, 88px); }
.footer__logo { display: block; height: clamp(44px, 4.4vw, 64px); width: auto; max-width: min(260px, 70vw); object-fit: contain; object-position: left center; margin-bottom: 28px; }
.footer__claim { max-width: 18ch; font-family: var(--f-display); font-size: calc(clamp(1.4rem, 1.1rem + 1vw, 2rem) * var(--escala)); line-height: 1.15; }
.footer__nav li, .footer__contact { font-size: 15px; line-height: 2; color: var(--mute-d); }
.footer__nav a:hover, .footer__contact a:hover { color: var(--c-fondo); }
.footer__brand { position: relative; overflow: hidden; line-height: .8; }
[data-motivo] .footer__brand::before {
  content: ""; display: block; width: clamp(80px, 12vw, 180px); aspect-ratio: 112 / 40; margin-bottom: 10px;
  background: var(--c-acento); -webkit-mask: var(--motivo) left bottom / contain no-repeat; mask: var(--motivo) left bottom / contain no-repeat;
}
.footer__word {
  display: inline-block; font-family: var(--f-display); font-size: 12vw; letter-spacing: -.02em;
  white-space: nowrap; will-change: transform;
}
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px;
  margin-top: clamp(16px, 2vw, 28px); padding: 22px 0 28px; border-top: 1px solid var(--line-d);
  font-size: 13.5px; color: var(--mute-d);
}
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: 22px; }
@media (min-width: 768px) {
  .footer__top { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
}

/* =========================================================
   Apariciones (solo con JS): lentas, nunca más rápidas que dhoce
   ========================================================= */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .12em; margin-block: -.12em; }
.w__i { display: inline-block; }
.js [data-split] .w__i { transform: translate3d(0, 108%, 0); transition: transform 2s var(--ease-out); transition-delay: calc(var(--i) * 75ms + var(--d, 0ms)); }
.js [data-split].is-in .w__i { transform: none; }
.js [data-reveal] { opacity: 0; transform: translate3d(0, 40px, 0); transition: opacity 2s var(--ease-out), transform 2.5s var(--ease-out); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Cursor: punto de 8 px en modo diferencia; etiqueta sobre fotos ---------- */
.cursor { display: none; }
.has-cursor, .has-cursor * { cursor: none !important; }
.has-cursor .cursor { position: fixed; left: 0; top: 0; z-index: 300; display: block; width: 0; height: 0; pointer-events: none; mix-blend-mode: difference; }
.has-cursor .cursor.is-label { mix-blend-mode: normal; }
.cursor__dot {
  position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%;
  background: #fff; opacity: 0;
  transition: transform .5s var(--ease-out), opacity .3s;
}
.cursor.is-visible .cursor__dot { opacity: 1; }
.cursor.is-hover .cursor__dot { transform: scale(1.9); }
.cursor.is-down .cursor__dot { transform: scale(.7); }
.cursor.is-label .cursor__dot { transform: scale(12); background: var(--c-texto); }
.cursor__text {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(.6);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: var(--c-fondo); opacity: 0; transition: opacity .3s, transform .5s var(--ease-out);
}
.cursor.is-label .cursor__text { opacity: 1; transform: translate(-50%, -50%); }

/* ---------- Móvil: el mismo diseño, adaptado ---------- */
@media (max-width: 767px) {
  .header { padding: 10px 12px; }
  .header__inner { height: 52px; gap: 8px; }
  .brand { height: 40px; }
  .hero { min-height: 560px; }
  .hero__dek { font-size: 1rem; }
  .hero__actions .pill { height: 48px; }
  .rail__foot { grid-template-columns: 1fr auto; }
  .rail__nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .hero__slide.is-active img { transform: none; }
  .js [data-reveal], .js [data-split] .w__i { opacity: 1; transform: none; }
  .hero__title, .hero__caminos { animation: none; }
  .barra { transition: none; }
}

/* =========================================================
   Motivo de marca y cargador
   - Sin <body data-motivo>, el cargador es solo color de marca + logo en tinta, y no hay marcadores.
   - Con data-motivo y --motivo (marca.css), el motivo marca las etiquetas, se dibuja en el cargador,
     va grande en la valoración y encima del nombre del pie.
   ========================================================= */
[data-motivo] .eyebrow::before {
  content: ""; display: inline-block; width: 28px; height: 11px; margin-right: 12px; vertical-align: -1px;
  background: var(--c-acento); -webkit-mask: var(--motivo) center / contain no-repeat; mask: var(--motivo) center / contain no-repeat;
}
[data-motivo] .valoracion--marca .eyebrow::before { background: currentColor; }
.loader {
  position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 22px;
  background: var(--c-acento); color: var(--c-sobre-acento, var(--c-texto)); pointer-events: none;
  animation: loader-fuera .9s var(--ease-io) 1.5s forwards;
}
.loader__motivo { display: none; }
[data-motivo] .loader__motivo {
  display: block; width: min(200px, 46vw); aspect-ratio: 112 / 40; background: currentColor;
  -webkit-mask: var(--motivo) center / contain no-repeat; mask: var(--motivo) center / contain no-repeat;
  opacity: 0; animation: aparece 1s var(--ease-out) .1s forwards;
}
/* El logo en tinta: marca.css pone el filtro (brightness(0) para tinta oscura; brightness(0) invert(1) para blanca) */
.loader__logo { height: 54px; width: auto; max-width: 70vw; object-fit: contain; filter: brightness(0); opacity: 0; animation: aparece .5s ease-out .7s forwards; }
@keyframes aparece { to { opacity: 1; } }
@keyframes loader-fuera { to { transform: translateY(-100%); visibility: hidden; } }
html:not(.js) .loader { display: none; }
@media (prefers-reduced-motion: reduce) { .loader { display: none; } }

/* ---------- Datos y cita de la agencia (texto literal suyo; si no hay, se quitan del HTML) ---------- */
.claims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: clamp(32px, 4vw, 56px); padding-top: 24px; border-top: 1px solid var(--line); }
.claims b { display: block; font-family: var(--f-display); font-weight: 500; font-size: calc(clamp(1.8rem, 1.2rem + 2vw, 3.2rem) * var(--escala)); line-height: 1; letter-spacing: -.03em; margin-bottom: 8px; }
.claims span { font-size: 14px; color: var(--mute); }
.cita { margin: clamp(36px, 4vw, 56px) 0 28px; }
.cita blockquote { font-family: var(--f-display); font-size: calc(clamp(1.25rem, 1rem + .8vw, 1.75rem) * var(--escala)); line-height: 1.3; letter-spacing: -.01em; max-width: 30ch; }
.cita figcaption { margin-top: 14px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
@media (max-width: 600px) { .claims { grid-template-columns: 1fr; } }


/* Palabra clave del titular (<em>): subrayado del color de marca, legible sobre foto o papel.
   Las direcciones con fondo blanco (Índice) la pintan del color si pasa 3:1 en texto grande. */
.hero__title em { font-style: normal; background: linear-gradient(var(--c-acento), var(--c-acento)) 0 92% / 100% .12em no-repeat; }

/* =========================================================
   Barra inferior fija (por debajo de 1100 px, donde la cabecera no lleva sus acciones):
   Llamar · WhatsApp · Valorar mi casa. Barra a todo el ancho, nunca botón flotante.
   El body deja su alto libre abajo para que no tape «Cookies» ni el pie.
   ========================================================= */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--c-fondo); color: var(--c-texto); border-top: 1px solid var(--line);
  transform: translate3d(0, 110%, 0); transition: transform .9s var(--ease-out);
}
.is-ready .barra, html:not(.js) .barra { transform: none; }
.menu-open .barra { transform: translate3d(0, 110%, 0); }
.barra a { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; height: 56px; padding: 0 8px; font-size: 14px; white-space: nowrap; }
.barra a + a { border-left: 1px solid var(--line); }
.barra .barra__valorar { border-left: 0; background: var(--c-acento); color: var(--c-sobre-acento, var(--c-texto)); }
.barra a:active { opacity: .7; }
@media (max-width: 1099px) {
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}
@media (min-width: 1100px) { .barra { display: none; } }