/* =========================================================
   1. VARIABLES (TOKENS)
   ========================================================= */
:root {
  /* --- 1.1 PALETA EXTRAÍDA DEL LOGO ---------------------------
     Medida sobre los píxeles de logo.png. Estos 5 HEX son los
     únicos colores de la web; todo lo demás (tonos derivados y
     escena 3D) se calcula a partir de ellos. */
  --logo-black:      #000000; /* Lettering "Tu Rincón" y "DE PROPIEDADES" */
  --logo-gold:       #A97535; /* Dorado medio (mediana): tejado, ventana, chimenea, rombo */
  --logo-gold-light: #E2A95B; /* Brillo del dorado metálico */
  --logo-gold-dark:  #88551C; /* Sombra del dorado metálico */
  --logo-white:      #FFFFFF; /* Fondo sobre el que se presenta el logo (PNG transparente) */

  /* --- 1.2 ROLES DE MARCA ------------------------------------ */
  --brand-primary:   var(--logo-black);  /* Titulares, textos, botón principal */
  --brand-secondary: color-mix(in oklab, var(--logo-black) 50%, var(--logo-white)); /* Gris derivado del negro */
  --brand-accent:    var(--logo-gold);   /* Acentos, hover, foco, progreso */
  --brand-light:     var(--logo-white);  /* Fondos */
  --brand-dark:      color-mix(in srgb, var(--logo-black) 93%, var(--logo-white)); /* Negro de superficie: hero y cifras */

  /* --- 1.3 TONOS DERIVADOS (no hace falta tocarlos) ---------- */
  --tone-text:           var(--brand-primary);
  --tone-text-muted:     color-mix(in srgb, var(--logo-black) 74%, var(--logo-white));
  --tone-line:           color-mix(in srgb, var(--logo-black) 14%, var(--logo-white));
  --tone-line-strong:    color-mix(in srgb, var(--logo-black) 32%, var(--logo-white));
  --tone-surface:        var(--logo-white);
  --tone-paper:          color-mix(in oklab, var(--logo-gold) 4%, var(--logo-white));  /* casi blanco cálido: tarjetas y campos */
  --tone-champagne:      color-mix(in oklab, var(--logo-gold) 13%, var(--logo-white)); /* champán: secciones claras */
  --tone-sand:           color-mix(in oklab, var(--logo-gold) 22%, var(--logo-white)); /* arena: secciones claras alternas */
  --tone-card-dark:      color-mix(in srgb, var(--logo-white) 7%, var(--brand-dark));  /* tarjetas sobre negro */
  --tone-surface-alt:    var(--tone-champagne);
  --tone-gold-metal:     linear-gradient(90deg, var(--logo-gold-dark), var(--logo-gold-light) 50%, var(--logo-gold)); /* dorado metálico del logo */
  --tone-primary-hover:  color-mix(in oklab, var(--logo-black) 84%, var(--logo-white));
  --tone-accent-text:    var(--logo-gold-dark);  /* dorado legible (AA) sobre blanco */
  --tone-accent-on-dark: var(--logo-gold-light); /* dorado legible sobre negro */
  --tone-on-dark:        var(--logo-white);
  --tone-on-dark-muted:  color-mix(in srgb, var(--logo-white) 74%, var(--logo-black));
  --tone-shadow:         color-mix(in srgb, var(--logo-black) 30%, transparent);

  /* --- 1.4 ASIGNACIÓN POR ZONAS ------------------------------ */
  --bg:        var(--tone-champagne);
  --header-bg: var(--tone-champagne); /* El logo es PNG transparente: se lee bien sobre champán */
  --footer-bg: var(--tone-champagne);

  /* Colores "de sección": cada componente los lee de la sección en
     la que está. .section--dark los redefine para fondo negro. */
  --c-bg:            var(--tone-champagne);
  --c-heading:       var(--brand-primary);
  --c-text:          var(--tone-text);
  --c-muted:         var(--tone-text-muted);
  --c-line:          var(--tone-line);
  --c-line-strong:   var(--tone-line-strong);
  --c-card:          var(--tone-paper);
  --c-card-border:   color-mix(in srgb, var(--logo-gold) 28%, transparent);
  --c-accent-text:   var(--tone-accent-text);
  --c-icon:          var(--brand-primary);
  --c-icon-accent:   var(--brand-accent);
  --c-icon-hover-bg: var(--logo-black);
  --c-icon-hover-fg: var(--logo-white);
  --c-icon-hover-accent: var(--logo-gold-light);
  --hero-bg:   var(--brand-dark);   /* Hero oscuro: máximo contraste */
  --hero-text: var(--logo-white);
  --hero-text-muted: color-mix(in srgb, var(--logo-white) 76%, var(--logo-black));

  /* --- 1.5 COLORES DE LA ESCENA 3D (los lee el JavaScript) --- */
  --scene-edges:     color-mix(in srgb, var(--logo-white) 86%, var(--logo-black)); /* aristas claras */
  --scene-faces:     color-mix(in srgb, var(--logo-black) 88%, var(--logo-white)); /* volúmenes oscuros */
  --scene-grid:      color-mix(in srgb, var(--logo-white) 40%, var(--logo-black));
  --scene-accent:    var(--logo-gold-light);
  --scene-particles: var(--logo-gold);

  /* --- 1.6 TIPOGRAFÍA ---------------------------------------- */
  --font-serif: "Bodoni Moda", "Didot", "Bodoni 72", "Bodoni MT", Georgia, serif;
  --font-sans:  "Jost", "Futura", "Century Gothic", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --track-caps: .14em; /* espaciado de las versalitas, como "DE PROPIEDADES" */

  /* --- 1.7 LAYOUT Y MOVIMIENTO ------------------------------- */
  --container: 1240px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-h: 84px;
  --radius-s: 3px;
  --radius-m: 6px;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
}

@media (min-width: 1024px) { :root { --header-h: 116px; } }
@media (min-width: 1440px) { :root { --container: 1320px; } }

/* =========================================================
   2. BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  /* Reserva siempre el hueco de la barra de scroll: al abrir el panel
     del formulario (que bloquea el scroll) la página no se recoloca */
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--tone-text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.menu-open { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--c-heading);
  font-optical-sizing: auto;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }

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

::selection { background: color-mix(in srgb, var(--brand-accent) 35%, transparent); }

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

.skip-link {
  position: absolute;
  left: 1rem; top: -100px;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--brand-primary);
  color: var(--brand-light);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-s);
}
.skip-link:focus { top: 1rem; }

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

/* =========================================================
   3. COMPONENTES COMUNES
   ========================================================= */

/* --- 3.1 Botones --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: .95rem 1.6rem;
  font: 500 .8125rem/1.3 var(--font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color .25s var(--ease-out),
    border-color .25s var(--ease-out),
    color .25s var(--ease-out),
    box-shadow .3s var(--ease-out),
    transform .3s var(--ease-expo);
}
.btn:active { transform: scale(.98); }

.btn--primary {
  background: var(--brand-primary);
  color: var(--brand-light);
}
.btn--ghost {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  color: var(--brand-primary);
  border-color: var(--tone-line-strong);
}
@media (hover: hover) {
  .btn--primary:hover {
    background: var(--tone-primary-hover);
    box-shadow: inset 0 -2px 0 var(--brand-accent), 0 12px 24px -16px var(--tone-shadow);
    transform: translateY(-2px);
  }
  .btn--ghost:hover {
    border-color: var(--brand-accent);
    background: var(--tone-surface);
    transform: translateY(-2px);
  }
  .btn:hover:active { transform: scale(.98); }
}

/* --- 3.2 Enlace con subrayado animado --- */
.link {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .35s var(--ease-out), color .25s var(--ease-out);
}
.link:hover, .link:focus-visible { background-size: 100% 1px; }

/* --- 3.3 Aparición al hacer scroll --- */
.js .reveal {
  opacity: 0;
  transform: translateY(28px) scale(.985);
  transition:
    opacity .9s var(--ease-out),
    transform 1.1s var(--ease-expo);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* =========================================================
   4. HEADER Y NAVEGACIÓN
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
}
/* El fondo va en un pseudo-elemento: backdrop-filter en el propio
   header rompería el panel fijo del menú móvil. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--header-bg); /* opaco: nada se transparenta tras el logo */
  box-shadow: 0 1px 0 transparent;
  transition: box-shadow .3s var(--ease-out);
}
.site-header.is-scrolled::before {
  box-shadow: 0 1px 0 var(--tone-line), 0 10px 24px -20px var(--tone-shadow);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.brand__wordmark {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--brand-primary);
  white-space: nowrap;
}

/* --- Logo ---------------------------------------------------
   img/logo-cabecera y img/logo-pie son recortes optimizados de
   logo.png (WebP + PNG de respaldo), a doble resolución. */
.logo {
  --logo-h: 64px;
  display: block;
  height: var(--logo-h);
  transition: height .4s var(--ease-expo);
}
.logo picture { display: block; height: 100%; }
.logo img {
  display: block;
  height: 100%;
  width: auto;
}
/* Pie: incluye la línea y el lema "Vive. Invierte. Crece." */
.logo--pie { --logo-h: 104px; }

@media (min-width: 1024px) {
  .site-header .logo { --logo-h: 88px; }
  .site-header { transition: height .4s var(--ease-expo); }
  .site-header.is-scrolled { height: 88px; }
  .site-header.is-scrolled .logo { --logo-h: 66px; }
}

/* --- 4.1 Botón hamburguesa --- */
.nav-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-s);
  color: var(--brand-primary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle__bar {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform .45s var(--ease-expo), width .3s var(--ease-out);
}
.nav-toggle__bar:nth-child(1) { transform: translateY(-4px); }
.nav-toggle__bar:nth-child(2) { transform: translateY(4px); width: 15px; }
.menu-open .nav-toggle__bar:nth-child(1) { transform: rotate(45deg); }
.menu-open .nav-toggle__bar:nth-child(2) { transform: rotate(-45deg); width: 22px; }

/* --- 4.2 Navegación: móvil (panel a pantalla completa) --- */
.site-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.5rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  background: var(--header-bg);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity .35s var(--ease-out),
    transform .45s var(--ease-expo),
    visibility 0s linear .45s;
}
.menu-open .site-nav {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.nav__list li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s var(--ease-out), transform .5s var(--ease-expo);
}
.menu-open .nav__list li {
  opacity: 1;
  transform: none;
  transition-delay: calc(80ms + var(--i, 0) * 60ms);
}

.nav__link {
  display: block;
  padding: 1rem 0;
  font-family: var(--font-serif);
  font-size: 1.875rem;
  line-height: 1.2;
  color: var(--brand-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--tone-line);
}
.nav__cta { width: 100%; }

/* --- 4.3 Navegación: escritorio --- */
@media (min-width: 1024px) {
  .nav-toggle { display: none; }

  .site-nav {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 2.5rem;
    padding: 0;
    background: none;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .nav__list { display: flex; gap: 2.25rem; }
  .nav__list li { opacity: 1; transform: none; transition: none; }

  .nav__link {
    position: relative;
    padding: .5rem 0;
    font-family: var(--font-sans);
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--brand-primary);
    border: 0;
    transition: color .25s var(--ease-out);
  }
  .nav__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: .15rem;
    height: 1px;
    background: var(--brand-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--ease-expo);
  }
  .nav__link:hover, .nav__link.is-active { color: var(--tone-accent-text); }
  .nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }

  .nav__cta { width: auto; min-height: 46px; padding: .8rem 1.4rem; }
}

/* =========================================================
   5. HERO + ESCENA 3D
   ========================================================= */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
  min-height: 100svh;
  /* En vertical, el hueco inferior es el escenario de la maqueta 3D */
  padding: calc(var(--header-h) + clamp(2rem, 6vh, 4rem)) 0 min(100vw, 540px);
  background: var(--hero-bg);
  color: var(--hero-text);
  overflow: hidden;
}
.hero :focus-visible { outline-color: var(--logo-gold-light); }

.hero__scene {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__scene canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Velo para que el texto se lea siempre.
   En vertical cubre justo hasta donde acaba el texto:
   el JS calcula --veil-stop con la altura real del contenido. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      var(--hero-bg) 0%,
      color-mix(in srgb, var(--hero-bg) 92%, transparent) calc(var(--veil-stop, 60%) - 6%),
      color-mix(in srgb, var(--hero-bg) 0%, transparent) calc(var(--veil-stop, 60%) + 14%)),
    linear-gradient(0deg,
      var(--hero-bg) 0%,
      color-mix(in srgb, var(--hero-bg) 0%, transparent) 12%);
}

/* Mientras la escena 3D no está en marcha (o sin WebGL) se ve la imagen
   fija de la maqueta (.hero__poster); al arrancar, el lienzo aparece
   encima con un fundido y la imagen se retira */
.hero__scene canvas { transition: opacity 1.1s var(--ease-out); }
.hero--fallback .hero__scene canvas { opacity: 0; }

.hero__inner { position: relative; }

/* Entrada del texto del hero: solo desplazamiento, sin ocultarlo.
   Es visible desde el primer pintado (mejor LCP y SEO). */
.hero__content > * { animation: hero-rise .9s var(--ease-expo) both; }
.hero__content > :nth-child(2) { animation-delay: .08s; }
.hero__content > :nth-child(3) { animation-delay: .16s; }
.hero__content > :nth-child(4) { animation-delay: .24s; }
@keyframes hero-rise { from { transform: translateY(14px); } }
.hero__content { max-width: 44rem; }

.hero__title {
  font-size: clamp(2.4rem, 1.4rem + 3.8vw, 5rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.015em;
  max-width: 16ch;
  color: var(--hero-text);
}

/* Antetítulo dentro del H1: la búsqueda principal ("Inmobiliaria en Asturias") */
.hero__kicker {
  display: block;
  margin-bottom: 1.1rem;
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--logo-gold-light);
}

/* Filete dorado con rombo: el mismo remate que el logo */
.hero__rule {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: min(15rem, 70%);
  margin-top: 2rem;
}
.hero__rule::before,
.hero__rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--tone-gold-metal);
}
.hero__rule span {
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--logo-gold-light);
  transform: rotate(45deg);
}

.hero__lead {
  margin-top: 1.5rem;
  max-width: 44ch;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  color: var(--hero-text-muted);
}
.hero__actions {
  display: grid;
  gap: .75rem;
  margin-top: 2.5rem;
}

/* Botones sobre fondo oscuro: dorado y contorno claro */
.hero .btn--primary {
  background: var(--logo-gold-light);
  color: var(--logo-black);
}
.hero .btn--ghost {
  background: transparent;
  color: var(--hero-text);
  border-color: color-mix(in srgb, var(--hero-text) 45%, transparent);
}
@media (hover: hover) {
  .hero .btn--primary:hover {
    background: var(--logo-white);
    box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--logo-gold-light) 70%, transparent);
  }
  .hero .btn--ghost:hover {
    background: color-mix(in srgb, var(--hero-text) 8%, transparent);
    border-color: var(--logo-gold-light);
  }
}
@media (max-width: 479px) {
  .hero .btn { letter-spacing: .08em; padding-inline: 1rem; }
}

@media (min-width: 480px) {
  .hero__actions { display: flex; flex-wrap: wrap; }
}

/* Pantallas anchas: texto a la izquierda, maqueta a la derecha */
@media (min-width: 1024px) and (min-aspect-ratio: 23/20) {
  .hero { align-items: center; padding-bottom: 5rem; }
  .hero::before {
    background:
      linear-gradient(90deg,
        var(--hero-bg) 0%,
        color-mix(in srgb, var(--hero-bg) 90%, transparent) 40%,
        color-mix(in srgb, var(--hero-bg) 0%, transparent) 62%),
      linear-gradient(0deg,
        var(--hero-bg) 0%,
        color-mix(in srgb, var(--hero-bg) 0%, transparent) 14%);
  }
}

/* =========================================================
   5a. ESCENARIO DE LA MAQUETA (portada)
   En vertical, la maqueta ocupa el hueco que queda bajo el texto
   (.hero__stage); en pantallas anchas, la parte derecha. La imagen
   fija se coloca con las mismas cuentas que la cámara 3D (ver
   "Encuadre" en assets/app.js), así que el relevo no se nota.
   En vertical el escenario tiene un alto fijo y va anclado al pie
   del hero: no depende del alto del texto, así que cuando llega la
   tipografía definitiva no se mueve nada (sin saltos de diseño).
   ========================================================= */
.hero--3d {
  min-height: max(100svh, 800px);
  padding-top: calc(var(--header-h) + clamp(1.25rem, 5vh, 4rem));
  padding-bottom: 0;
}
.hero__stage {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  height: clamp(260px, 100svh - 540px, 900px);
  container-type: size;
  pointer-events: none;
}
.hero__poster {
  /* Escala de la cámara en vertical: píxeles por unidad de la maqueta.
     --poster-w: ancho de la imagen en unidades; --poster-y: altura del
     punto de mira de la cámara dentro de la imagen, en unidades. */
  --poster-w: 9.848;
  --poster-y: 4.600;
  --ppu: clamp(100cqw / 16.2, 110cqh / 9, 115cqw / 9);
  position: absolute;
  left: calc(50% - var(--poster-w) * var(--ppu) / 2);
  top: calc(50% - var(--poster-y) * var(--ppu));
  width: calc(var(--poster-w) * var(--ppu));
  /* Bordes laterales difuminados: en móviles más anchos que el de
     referencia, la imagen no llega al borde y no debe verse el corte */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  transition: opacity 1.1s var(--ease-out);
}
.hero__poster img { width: 100%; height: auto; }
/* Con JavaScript, la imagen aparece con un fundido en cuanto carga */
.js .hero__poster img { opacity: 0; transition: opacity .9s var(--ease-out); }
.js .hero__poster img.is-loaded { opacity: 1; }
.hero--3d:not(.hero--fallback) .hero__poster { opacity: 0; }

/* Móvil: texto más compacto para que la maqueta asome en la primera pantalla */
@media (max-width: 767px) {
  .hero--3d .hero__rule { margin-top: 1.5rem; }
  .hero--3d .hero__lead { margin-top: 1.1rem; }
  .hero--3d .hero__actions { margin-top: 1.75rem; }
}

@media (min-width: 1024px) and (min-aspect-ratio: 23/20) {
  .hero--3d {
    min-height: 100svh;
    padding-top: calc(var(--header-h) + clamp(2rem, 6vh, 4rem));
    padding-bottom: 5rem;
  }
  .hero__stage { top: 0; height: auto; }
  .hero__poster {
    left: 42%;
    top: 55%;
    width: 58%;
    transform: translateY(-55%);
    -webkit-mask-image: radial-gradient(ellipse 70% 68% at 57.8% 55%, #000 70%, transparent);
    mask-image: radial-gradient(ellipse 70% 68% at 57.8% 55%, #000 70%, transparent);
  }
}

/* =========================================================
   5b. FRANJA DE TIPOS DE INMUEBLE
   ========================================================= */
.ticker {
  position: relative;
  overflow: hidden;
  padding-block: 1.35rem;
  background: var(--brand-dark);
  border-top: 1px solid color-mix(in srgb, var(--logo-gold) 45%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--logo-gold) 45%, transparent);
  /* Bordes laterales difuminados */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  width: max-content;
  animation: ticker 48s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__track span {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1;
  color: var(--tone-on-dark);
  white-space: nowrap;
}
.ticker__track i {
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--logo-gold-light);
  transform: rotate(45deg);
}
@keyframes ticker {
  to { transform: translateX(calc(-50% - 1.125rem)); }
}

/* =========================================================
   6. SECCIONES (estructura común)
   ========================================================= */
.section {
  padding-block: clamp(3.5rem, 2.2rem + 4vw, 6rem);
  background: var(--c-bg);
  color: var(--c-text);
}
/* Fondos de sección: champán, arena y negro (todos derivados del logo) */
.section--alt  { --c-bg: var(--tone-champagne); }
.section--sand { --c-bg: var(--tone-sand); }
.section--dark {
  --c-bg:               var(--brand-dark);
  --c-heading:          var(--logo-white);
  --c-text:             var(--logo-white);
  --c-muted:            var(--tone-on-dark-muted);
  --c-line:             color-mix(in srgb, var(--logo-white) 14%, transparent);
  --c-line-strong:      color-mix(in srgb, var(--logo-white) 26%, transparent);
  --c-card:             var(--tone-card-dark);
  --c-card-border:      color-mix(in srgb, var(--logo-white) 12%, transparent);
  --c-accent-text:      var(--logo-gold-light);
  --c-icon:             var(--logo-white);
  --c-icon-accent:      var(--logo-gold-light);
  --c-icon-hover-bg:    var(--logo-gold-light);
  --c-icon-hover-fg:    var(--logo-black);
  --c-icon-hover-accent: var(--logo-black);
}
.section--dark :focus-visible { outline-color: var(--logo-gold-light); }

/* Textura de plano: retícula dorada muy suave */
.section--grid {
  background-image:
    linear-gradient(color-mix(in srgb, var(--logo-gold) 9%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--logo-gold) 9%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center top;
}

.section__head {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}
.section__title {
  max-width: 18ch;
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.6rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.01em;
}
.section__lead {
  max-width: 48ch;
  font-size: 1.125rem;
  color: var(--c-muted);
}
@media (min-width: 1024px) {
  .section__head {
    grid-template-columns: 1.1fr 1fr;
    align-items: end;
    gap: 4rem;
  }
}

/* =========================================================
   7. TIPOS DE ACTIVOS
   ========================================================= */
.assets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px)  { .assets { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .assets { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
/* Viviendas: tres tarjetas en fila desde tableta */
@media (min-width: 768px)  { .assets--3 { grid-template-columns: repeat(3, 1fr); } }

.asset {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--c-card);
  border: 1px solid var(--c-card-border);
  border-radius: var(--radius-m);
  transition:
    transform .5s var(--ease-expo),
    border-color .3s var(--ease-out),
    box-shadow .5s var(--ease-expo);
}
.asset__icon {
  width: 76px;
  height: 76px;
  padding: 15px;
  margin-bottom: 1.75rem;
  color: var(--c-icon);
  background: var(--c-card);
  border: 1px solid color-mix(in srgb, var(--logo-gold) 55%, transparent);
  border-radius: 50%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out);
}
.asset__icon .ic-accent { stroke: var(--c-icon-accent); }
.asset__icon .ic-mask   { fill: var(--c-card); transition: fill .35s var(--ease-out); }
@media (hover: hover) {
  .asset:hover .asset__icon { background: var(--c-icon-hover-bg); color: var(--c-icon-hover-fg); border-color: var(--c-icon-hover-bg); }
  .asset:hover .asset__icon .ic-accent { stroke: var(--c-icon-hover-accent); }
  .asset:hover .asset__icon .ic-mask { fill: var(--c-icon-hover-bg); }
}

.asset__title {
  margin-bottom: .5rem;
  font-size: 1.5rem;
  line-height: 1.2;
}
.asset__text {
  color: var(--c-muted);
  font-size: 1rem;
}
.asset__link {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1.5rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--c-accent-text);
  text-decoration: none;
}
.asset__link span[aria-hidden] {
  display: inline-block;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease-out);
}
/* Toda la tarjeta es clicable */
.asset__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.asset__link:focus-visible { outline: none; }
.asset:focus-within {
  outline: 2px solid var(--brand-accent);
  outline-offset: 3px;
}

@media (hover: hover) {
  .asset:hover {
    transform: translateY(-6px);
    border-color: var(--brand-accent);
    box-shadow: 0 30px 50px -30px color-mix(in srgb, var(--logo-black) 45%, transparent);
  }
  .asset:hover .asset__link span[aria-hidden] { border-color: currentColor; }
}

/* =========================================================
   7b. IMPUESTOS Y GASTOS
   ========================================================= */
.costs { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .costs { grid-template-columns: 1fr 1fr; } }
.cost-card {
  padding: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
  background: var(--c-card);
  border: 1px solid var(--c-card-border);
  border-radius: var(--radius-m);
}
.cost-card__title {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1.5rem;
  font-size: clamp(1.5rem, 1.3rem + .8vw, 1.9rem);
  line-height: 1.15;
}
.cost-list { display: grid; gap: 1.25rem; margin: 0; }
.cost-list > div { padding-top: 1.25rem; border-top: 1px solid var(--c-line); }
.cost-list > div:first-child { padding-top: 0; border-top: 0; }
.cost-list dt { font-weight: 600; color: var(--c-heading); }
.cost-list dd { margin: .35rem 0 0; color: var(--c-muted); }
.cost-table {
  width: 100%;
  margin: .75rem 0;
  border-collapse: collapse;
  font-size: .95rem;
}
.cost-table th,
.cost-table td {
  padding: .6rem .75rem;
  text-align: left;
  border-bottom: 1px solid var(--c-line);
}
.cost-table thead th {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--c-accent-text);
}
.cost-table th:last-child,
.cost-table td:last-child { text-align: right; }
.cost-table td:last-child {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--c-heading);
}
.costs__note {
  max-width: 72ch;
  margin-top: 1.75rem;
  font-size: .95rem;
  color: var(--c-muted);
}
.costs__note a { color: var(--c-accent-text); font-weight: 600; }

/* =========================================================
   8. PROPUESTA DE VALOR
   ========================================================= */
.value {
  display: grid;
  gap: 2.5rem;
}
.value__head { display: grid; gap: 1.25rem; }
.value__item {
  display: grid;
  gap: .5rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--c-line-strong);
}
.value__item:last-child { border-bottom: 1px solid var(--c-line-strong); }
.value__title {
  display: flex;
  align-items: center;
  gap: .85rem;
  font-size: 1.375rem;
  line-height: 1.25;
}
.value__icon {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--logo-gold) 55%, transparent);
  border-radius: 50%;
  fill: none;
  stroke: var(--c-accent-text);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.value__text  { color: var(--c-muted); max-width: 52ch; }

/* Título y texto en dos columnas solo cuando hay anchura suficiente */
@media (min-width: 768px) and (max-width: 1023px), (min-width: 1280px) {
  .value__item { grid-template-columns: minmax(12rem, 16rem) 1fr; gap: 2rem; }
}
@media (min-width: 1024px) {
  .value { grid-template-columns: 5fr 7fr; gap: 5rem; }
  .value__head {
    position: sticky;
    top: calc(var(--header-h) + 3rem);
    align-self: start;
  }
}

/* =========================================================
   9. CÓMO TRABAJAMOS (proceso con línea de progreso)
   ========================================================= */
.process {
  position: relative;
  padding-left: 2.5rem;
}
.process__track {
  position: absolute;
  /* Posición y tamaño exactos los calcula el JS (de punto a punto) */
  left: 6px; top: 0;
  width: 1px; height: 100%;
  background: var(--c-line-strong);
}
.process__fill {
  position: absolute;
  inset: 0;
  background: var(--brand-accent);
  transform-origin: top;
  transform: scaleY(var(--progress, 0));
}
.process.is-horizontal .process__fill {
  transform-origin: left;
  transform: scaleX(var(--progress, 0));
}

.steps { display: grid; gap: 2.75rem; }
.step { position: relative; }
.step__dot {
  position: absolute;
  left: -2.5rem;
  top: .3rem;
  width: 13px;
  height: 13px;
  background: var(--c-bg);
  border: 1px solid var(--c-line-strong);
  border-radius: 50%;
  transition:
    background-color .4s var(--ease-out),
    border-color .4s var(--ease-out),
    transform .5s var(--ease-expo);
}
.step.is-active .step__dot {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  transform: scale(1.2);
}
.step__num {
  display: block;
  margin-bottom: .5rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  font-variant-numeric: lining-nums;
  color: var(--c-accent-text);
}
.step__title {
  margin-bottom: .6rem;
  font-size: 1.5rem;
  line-height: 1.2;
}
.step__text { max-width: 38ch; color: var(--c-muted); }

/* Llamada a la acción al final del proceso */
.process__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-top: clamp(2.75rem, 2rem + 2vw, 4rem);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem) clamp(1.25rem, 1rem + 2vw, 2.5rem);
  background: var(--brand-dark);
  border-radius: var(--radius-m);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--logo-gold) 60%, transparent);
}
.process__cta-text {
  max-width: 26ch;
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--tone-on-dark);
}
.process__cta .btn--primary { background: var(--logo-gold-light); color: var(--logo-black); }
.process__cta :focus-visible { outline-color: var(--logo-gold-light); }
@media (hover: hover) {
  .process__cta .btn--primary:hover { background: var(--logo-white); box-shadow: none; }
}

@media (min-width: 1024px) {
  .process { padding-left: 0; padding-top: 3rem; }
  .steps { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; }
  .step__dot { left: 0; top: -3rem; }
}

/* =========================================================
   10. CIFRAS
   ========================================================= */
.stats-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--brand-dark);
  color: var(--tone-on-dark);
}
.stats-band__roof {
  position: absolute;
  right: -4%;
  top: 50%;
  z-index: -1;
  width: min(760px, 90%);
  transform: translateY(-50%);
  fill: none;
  stroke: color-mix(in srgb, var(--logo-gold) 30%, transparent);
  stroke-width: 1.5;
  pointer-events: none;
}
.stats-band .section__title { color: var(--tone-on-dark); }
.stats-band .section__lead  { color: var(--tone-on-dark-muted); }
.stats-band :focus-visible  { outline-color: var(--tone-accent-on-dark); }

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 1.5rem;
}
@media (min-width: 1024px) { .stats { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }

.stat {
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--logo-gold) 65%, transparent);
}
.stat__value {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 1.8rem + 3.2vw, 4.75rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--tone-accent-on-dark);
}
.stat__unit { font-size: .5em; letter-spacing: 0; margin-left: .15em; }
.stat__label {
  margin-top: .85rem;
  max-width: 22ch;
  font-size: 1rem;
  color: var(--tone-on-dark-muted);
}

/* =========================================================
   10b. PREGUNTAS FRECUENTES
   ========================================================= */
.faq { display: grid; gap: 2.5rem; }
.faq__head { display: grid; gap: 1.25rem; align-content: start; }
@media (min-width: 1024px) {
  .faq { grid-template-columns: 5fr 7fr; gap: 5rem; }
  .faq__head { position: sticky; top: calc(var(--header-h) + 3rem); align-self: start; }
}

.faq__item { border-top: 1px solid var(--c-line-strong); }
.faq__item:last-child { border-bottom: 1px solid var(--c-line-strong); }

.faq__q {
  position: relative;
  display: block;
  padding: 1.5rem 3rem 1.5rem 0;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q h3 {
  font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem);
  line-height: 1.3;
  transition: color .25s var(--ease-out);
}
/* Icono + que gira a − al abrir */
.faq__q::before,
.faq__q::after {
  content: "";
  position: absolute;
  right: .35rem;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--brand-accent);
  transition: transform .45s var(--ease-expo);
}
.faq__q::after { transform: rotate(90deg); }
.faq__item[open] .faq__q::after { transform: rotate(0deg); }
@media (hover: hover) {
  .faq__q:hover h3 { color: var(--c-accent-text); }
}

.faq__a {
  max-width: 60ch;
  padding-bottom: 1.6rem;
  color: var(--c-muted);
}
.faq__item[open] .faq__a { animation: faq-in .45s var(--ease-out); }
@keyframes faq-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================
   11. CONTACTO Y FORMULARIO
   ========================================================= */
.contact__address { font-style: normal; }
.contact {
  display: grid;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .contact { grid-template-columns: 5fr 7fr; gap: 5rem; align-items: start; }
}
.contact__intro { display: grid; gap: 1.25rem; align-content: start; }

.contact__note {
  display: flex;
  gap: .9rem;
  margin-top: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--c-card);
  border: 1px solid var(--c-card-border);
  border-radius: var(--radius-m);
  font-size: .95rem;
  color: var(--c-muted);
}
.contact__note svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: .1rem;
  fill: none;
  stroke: var(--brand-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact__note strong { color: var(--c-heading); font-weight: 600; }

.contact__data {
  display: grid;
  gap: 1.25rem;
  margin: 1.25rem 0 0;
}
.contact__data dt {
  font-size: .875rem;
  font-weight: 500;
  color: var(--c-muted);
}
.contact__data dd {
  margin: .15rem 0 0;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--c-heading);
}

.form {
  display: grid;
  gap: 1.35rem;
  padding: clamp(1.25rem, .9rem + 2vw, 2.5rem);
  color: var(--tone-text);
  background: var(--tone-paper);
  border: 1px solid color-mix(in srgb, var(--logo-gold) 28%, transparent);
  border-radius: var(--radius-m);
}
.form__row { display: grid; gap: 1.35rem; }
@media (min-width: 768px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field {
  display: grid;
  gap: .45rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.field__label {
  padding: 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--brand-primary);
}
.field__opt { font-weight: 400; color: var(--tone-text-muted); }

.field__control {
  width: 100%;
  min-height: 48px;
  padding: .8rem .95rem;
  font: inherit;
  font-size: 1rem;
  color: var(--brand-primary);
  background: var(--tone-surface);
  border: 1px solid var(--tone-line-strong);
  border-radius: var(--radius-s);
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color .2s var(--ease-out),
    box-shadow .2s var(--ease-out),
    background-color .2s var(--ease-out);
}
.field__control::placeholder { color: var(--tone-text-muted); opacity: .85; }
.field__control:hover { border-color: var(--brand-secondary); }
.field__control:focus {
  outline: none;
  border-color: var(--brand-accent);
  background: var(--tone-surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 35%, transparent);
}
textarea.field__control { min-height: 9rem; resize: vertical; line-height: 1.5; }

.field__control[aria-invalid="true"] {
  border-color: var(--tone-accent-text);
  box-shadow: inset 3px 0 0 var(--tone-accent-text);
}
.field__error {
  font-size: .875rem;
  font-weight: 500;
  color: var(--tone-accent-text);
}

.select { position: relative; }
.select::after {
  content: "";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  width: .5rem;
  height: .5rem;
  border-right: 1.5px solid var(--brand-secondary);
  border-bottom: 1.5px solid var(--brand-secondary);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.select .field__control { padding-right: 2.75rem; cursor: pointer; }

/* Selector de operación (radios con aspecto de botones) */
.choice { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.choice__label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .6rem 1.15rem;
  font-size: .95rem;
  font-weight: 500;
  color: var(--brand-primary);
  background: var(--tone-surface);
  border: 1px solid var(--tone-line-strong);
  border-radius: var(--radius-s);
  cursor: pointer;
  transition:
    background-color .25s var(--ease-out),
    border-color .25s var(--ease-out),
    color .25s var(--ease-out);
}
.choice__label:hover { border-color: var(--brand-accent); }
.choice__input:checked + .choice__label {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-light);
}
.choice__input:focus-visible + .choice__label {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}
.choice[aria-invalid="true"] .choice__label { border-color: var(--tone-accent-text); }

.check {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .95rem;
  color: var(--tone-text-muted);
}
.check input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: .2rem 0 0;
  accent-color: var(--brand-primary);
}
.check a { color: var(--brand-primary); }

.form__submit { width: 100%; }
@media (min-width: 768px) { .form__submit { width: auto; justify-self: start; } }
.form__submit[disabled] { opacity: .7; cursor: progress; }

.form__legal {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--tone-text-muted);
}

.form__status {
  padding: .9rem 1rem;
  font-size: .95rem;
  background: var(--tone-surface);
  border: 1px solid var(--tone-line-strong);
  border-radius: var(--radius-s);
}
.form__status:empty { display: none; }
.form__status[data-state="success"] { border-color: var(--brand-primary); color: var(--brand-primary); }
.form__status[data-state="error"]   { border-color: var(--tone-accent-text); color: var(--tone-accent-text); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* =========================================================
   12. FOOTER
   ========================================================= */
.site-footer {
  padding: 4rem 0 2rem;
  background: var(--footer-bg);
  border-top: 1px solid var(--tone-line);
  font-size: .95rem;
}
.footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 768px)  { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

.footer__tag {
  margin-top: 1.1rem;
  max-width: 34ch;
  color: var(--tone-text-muted);
}
.footer__title {
  margin-bottom: 1rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--brand-primary);
}
.footer__links { display: grid; gap: .55rem; }
.footer__links a {
  color: var(--tone-text-muted);
  transition: color .25s var(--ease-out), background-size .35s var(--ease-out);
}
.footer__links a:hover { color: var(--brand-primary); }
.footer__nap a { color: inherit; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 2rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--tone-line);
  font-size: .875rem;
  color: var(--tone-text-muted);
}

/* =========================================================
   12b. CONTACTO RÁPIDO (siempre a mano al hacer scroll)
   Móvil: barra flotante con WhatsApp, llamada y formulario.
   Desde tableta: WhatsApp y formulario, abajo a la derecha.
   Aparece al dejar atrás los botones del hero y se retira
   mientras el bloque de contacto está en pantalla.
   ========================================================= */
.contact-dock {
  position: fixed;
  left: 50%;
  bottom: max(.75rem, env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  gap: 4px;
  width: min(calc(100% - 1.5rem), 26rem);
  padding: 5px;
  background: var(--brand-dark);
  border: 1px solid color-mix(in srgb, var(--logo-gold) 55%, transparent);
  border-radius: 999px;
  box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--logo-black) 65%, transparent);
  transform: translateX(-50%);
  transition:
    transform .45s var(--ease-expo),
    opacity .3s var(--ease-out),
    border-color .3s var(--ease-out),
    visibility 0s linear 0s;
}
.contact-dock__item {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-width: 0;
  min-height: 46px;
  padding: 0 .5rem;
  font: 500 .8125rem/1 var(--font-sans);
  letter-spacing: .02em;
  color: var(--tone-on-dark);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), transform .3s var(--ease-expo);
}
.contact-dock__item svg {
  flex: none;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--logo-gold-light);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact-dock__item--main {
  font-weight: 600;
  color: var(--logo-black);
  background: var(--logo-gold-light);
}
.contact-dock__item--main svg { stroke: var(--logo-black); }
.contact-dock__item:active { transform: scale(.96); }
.contact-dock__item:focus-visible { outline-color: var(--logo-gold-light); outline-offset: 2px; }
@media (hover: hover) {
  .contact-dock__item:not(.contact-dock__item--main):hover { background: color-mix(in srgb, var(--logo-white) 10%, transparent); }
  .contact-dock__item--main:hover { background: var(--logo-white); }
}
/* Sobre secciones oscuras, el borde dorado se ilumina */
.contact-dock.on-dark { border-color: var(--logo-gold-light); }
.js .contact-dock:not(.is-shown),
.menu-open .contact-dock {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition:
    transform .45s var(--ease-expo),
    opacity .3s var(--ease-out),
    visibility 0s linear .3s;
}
@media (max-width: 359px) {
  .contact-dock__item svg { display: none; }
}
@media (min-width: 768px) {
  .contact-dock {
    left: auto;
    right: max(1.25rem, env(safe-area-inset-right));
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    width: auto;
    transform: none;
  }
  .contact-dock__item { flex: none; padding: 0 1.15rem; }
  .contact-dock__item--call { display: none; }
  .js .contact-dock:not(.is-shown),
  .menu-open .contact-dock { transform: translateY(16px); }
}
@media (min-width: 1024px) {
  .contact-dock { right: 2rem; bottom: 2rem; }
}
/* Espacio al final para que la barra no tape el pie */
.site-footer { padding-bottom: calc(2rem + 72px); }

/* =========================================================
   12c. PANEL DEL FORMULARIO
   Escritorio: panel lateral derecho. Móvil: hoja inferior.
   ========================================================= */
html.drawer-open { overflow: hidden; }

.drawer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--logo-black) 0%, transparent);
  overflow: hidden;
  transition: background-color .4s var(--ease-out);
}
.drawer::backdrop { background: transparent; }
.drawer.is-open { background: color-mix(in srgb, var(--logo-black) 58%, transparent); }

.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(540px, 100%);
  background: var(--tone-paper);
  box-shadow: -30px 0 60px -30px color-mix(in srgb, var(--logo-black) 60%, transparent);
  transform: translateX(100%);
  transition: transform .55s var(--ease-expo);
}
.drawer.is-open .drawer__panel { transform: none; }

.drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem clamp(1.25rem, 1rem + 2vw, 2rem) 1.35rem;
  background: var(--brand-dark);
  color: var(--tone-on-dark);
  border-bottom: 1px solid color-mix(in srgb, var(--logo-gold) 60%, transparent);
}
.drawer__title {
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem);
  line-height: 1.1;
  color: var(--tone-on-dark);
}
.drawer__sub {
  margin-top: .45rem;
  font-size: .9375rem;
  color: var(--tone-on-dark-muted);
}
.drawer__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -.35rem -.5rem 0 0;
  padding: 0;
  color: var(--tone-on-dark);
  background: none;
  border: 1px solid color-mix(in srgb, var(--tone-on-dark) 30%, transparent);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .25s var(--ease-out), color .25s var(--ease-out), transform .4s var(--ease-expo);
}
.drawer__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.drawer__close:focus-visible { outline-color: var(--logo-gold-light); }
@media (hover: hover) {
  .drawer__close:hover { border-color: var(--logo-gold-light); color: var(--logo-gold-light); transform: rotate(90deg); }
}

.drawer__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.25rem, 1rem + 1.5vw, 1.75rem) clamp(1.25rem, 1rem + 2vw, 2rem) calc(1.5rem + env(safe-area-inset-bottom));
}
/* Dentro del panel el formulario no necesita su propia caja */
.drawer .form {
  padding: 0;
  border: 0;
  background: none;
  opacity: 1;
  transform: none;
}

@media (max-width: 767px) {
  .drawer__panel {
    top: auto;
    left: 0;
    width: 100%;
    max-height: 92svh;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -24px 60px -20px color-mix(in srgb, var(--logo-black) 60%, transparent);
    transform: translateY(100%);
    overflow: hidden;
  }
}

/* =========================================================
   13. MOVIMIENTO REDUCIDO
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   14. PÁGINAS DE CIUDAD (Gijón, Oviedo)
   ========================================================= */
/* Hero sin escena 3D: el tejado del logo como trazo de fondo */
.hero--static { min-height: 0; padding-bottom: clamp(3.5rem, 2rem + 5vw, 6rem); }
.hero--static::before { display: none; }
@media (min-width: 1024px) and (min-aspect-ratio: 23/20) {
  .hero--static { min-height: 0; padding-bottom: 6rem; }
}
.hero__deco {
  position: absolute;
  right: -4%;
  bottom: -6%;
  z-index: -1;
  width: min(760px, 85%);
  fill: none;
  stroke: color-mix(in srgb, var(--logo-gold) 34%, transparent);
  stroke-width: 1.5;
  pointer-events: none;
}

/* Ruta de navegación (migas de pan) */
.breadcrumb { margin-bottom: 1.5rem; font-size: .8125rem; letter-spacing: .06em; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .5rem; }
.breadcrumb li + li::before { content: "/"; margin-right: .5rem; color: var(--logo-gold); }
.breadcrumb a { color: var(--hero-text-muted); text-decoration: none; transition: color .25s var(--ease-out); }
.breadcrumb a:hover { color: var(--logo-gold-light); }
.breadcrumb [aria-current] { color: var(--hero-text); }

/* Barrios */
.barrios {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.barrio {
  padding: 1.5rem;
  background: var(--c-card);
  border: 1px solid var(--c-card-border);
  border-radius: var(--radius-m);
}
.barrio__title { margin-bottom: .45rem; font-size: 1.35rem; line-height: 1.2; }
.barrio__text { color: var(--c-muted); font-size: .98rem; }

/* Botón dorado (sobre fondos oscuros) */
.btn--gold { background: var(--logo-gold-light); color: var(--logo-black); }
@media (hover: hover) { .btn--gold:hover { background: var(--logo-white); transform: translateY(-2px); } }
.value__head .btn { justify-self: start; margin-top: .5rem; }

.faq__more { justify-self: start; font-weight: 600; color: var(--c-accent-text); }

/* =========================================================
   15. MOVIMIENTO AL HACER SCROLL
   ========================================================= */
/* Barra de lectura dorada bajo la cabecera */
.scroll-progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  background: var(--tone-gold-metal);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}

/* Titulares: las palabras suben desde una máscara */
.js .section__title.split.reveal { opacity: 1; transform: none; }
.section__title .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.section__title .w__i {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--ease-expo);
  transition-delay: calc(var(--wi, 0) * 55ms);
}
.section__title.is-visible .w__i { transform: none; }

/* Iconos de línea que se dibujan al aparecer */
.js .reveal :is(.asset__icon, .value__icon) :is(path, circle, rect):not([stroke-dasharray]) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s var(--ease-out) .25s;
}
.js .reveal.is-visible :is(.asset__icon, .value__icon) :is(path, circle, rect):not([stroke-dasharray]) {
  stroke-dashoffset: 0;
}

.ticker__track { will-change: transform; }

/* Efectos ligados al scroll (navegadores compatibles; el resto, sin ellos) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* El texto del hero se eleva y se desvanece al salir */
    .hero__content {
      animation: hero-out linear both;
      animation-timeline: scroll(root);
      animation-range: 0 85vh;
    }
    @keyframes hero-out { to { transform: translateY(-70px); opacity: 0; } }

    /* Las secciones negras "se abren" al entrar en pantalla */
    .section--dark.section--grid {
      animation: section-open linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    @keyframes section-open {
      from { clip-path: inset(0 3.5% round 28px); }
      to   { clip-path: inset(0 0 round 0); }
    }
  }
}

/* =========================================================
   16. MÓVIL: FILAS DE TARJETAS EN CARRUSEL
   ========================================================= */
@media (max-width: 767px) {
  .assets,
  .barrios {
    display: flex;
    gap: .85rem;
    margin-inline: calc(var(--gutter) * -1);
    padding: .25rem var(--gutter) .5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .assets::-webkit-scrollbar,
  .barrios::-webkit-scrollbar { display: none; }
  .assets > li,
  .barrios > li {
    flex: 0 0 min(84%, 21rem);
    scroll-snap-align: start;
  }
}
.carousel-dots {
  display: flex;
  justify-content: center;
  margin-top: .5rem;
}
/* Zona táctil de 24 px; el punto visible es el ::before */
.carousel-dots button {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  transition: width .4s var(--ease-expo);
}
.carousel-dots button::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--c-line-strong);
  transform: translate(-50%, -50%);
  transition: width .4s var(--ease-expo), background-color .3s var(--ease-out);
}
.carousel-dots button[aria-current="true"] { width: 34px; }
.carousel-dots button[aria-current="true"]::before { width: 22px; background: var(--c-accent-text); }
@media (min-width: 768px) { .carousel-dots { display: none; } }

/* Tarjetas más compactas */
.asset { padding: 1.5rem 1.35rem 1.35rem; }
.asset__icon { width: 66px; height: 66px; padding: 13px; margin-bottom: 1.25rem; }
.asset__title { font-size: 1.4rem; }

/* =========================================================
   17. INTERACCIÓN
   ========================================================= */
/* Luz que sigue al cursor sobre las tarjetas + leve inclinación */
@media (hover: hover) and (pointer: fine) {
  .asset,
  .barrio,
  .cost-card { position: relative; isolation: isolate; }
  .asset::before,
  .barrio::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
      color-mix(in srgb, var(--logo-gold-light) 22%, transparent), transparent 70%);
    opacity: 0;
    transition: opacity .35s var(--ease-out);
    pointer-events: none;
  }
  .asset:hover::before,
  .barrio:hover::before { opacity: 1; }
  .asset.is-tilting {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
    transition: transform .12s linear, border-color .3s var(--ease-out), box-shadow .5s var(--ease-expo);
  }
}
/* Botones que "atraen" el cursor */
.btn.is-magnetic { transition: transform .25s var(--ease-out), background-color .25s, box-shadow .3s, color .25s; }
/* Pulsación en pantallas táctiles */
.asset:active, .barrio:active, .op-card:active { transform: scale(.985); }

/* Preguntas frecuentes: apertura suave (la altura la anima el JS) */
.faq__item { overflow: hidden; }
.faq__item[open] .faq__a { animation: none; }

/* Maqueta 3D interactiva: arrastrar para girar, pasar por encima para ver qué es */
.hero.is-scene-hover { cursor: pointer; }
.hero.is-dragging { cursor: grabbing; }
/* El gesto horizontal gira la maqueta; el vertical sigue haciendo scroll */
#inicio:not(.hero--static) { touch-action: pan-y pinch-zoom; }
.scene-tip {
  position: absolute;
  z-index: 2;
  left: 0; top: 0;
  display: grid;
  gap: .15rem;
  padding: .6rem .85rem;
  background: color-mix(in srgb, var(--logo-black) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--logo-gold) 60%, transparent);
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
  transform: translate(var(--tx, 0), var(--ty, 0)) translate(14px, -120%) scale(.96);
  transition: opacity .2s var(--ease-out), transform .25s var(--ease-expo);
  white-space: nowrap;
}
.scene-tip.is-on { opacity: 1; transform: translate(var(--tx, 0), var(--ty, 0)) translate(14px, -120%) scale(1); }
.scene-tip__title { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 500; color: var(--logo-white); }
.scene-tip__hint { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--logo-gold-light); }
.scene-hint {
  position: absolute;
  z-index: 1;
  right: var(--gutter);
  bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hero-text-muted);
  opacity: 0;
  transition: opacity .6s var(--ease-out);
  pointer-events: none;
}
.scene-hint.is-on { opacity: 1; }
.scene-hint svg { width: 22px; height: 22px; fill: none; stroke: var(--logo-gold-light); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Lejos del botón flotante (abajo a la derecha): a la izquierda en vertical,
   centrado bajo la maqueta en pantallas anchas */
.scene-hint { left: var(--gutter); right: auto; }
.hero--3d .scene-hint { top: calc(var(--veil-stop, 60%) + .75rem); bottom: auto; }
@media (min-width: 1024px) and (min-aspect-ratio: 23/20) {
  .scene-hint,
  .hero--3d .scene-hint { top: auto; left: 68%; bottom: 1.5rem; transform: translateX(-50%); }
}

/* =========================================================
   18. PESTAÑAS (impuestos)
   ========================================================= */
.tabs__list {
  position: relative;
  display: inline-flex;
  padding: 4px;
  margin-bottom: 1.25rem;
  background: var(--c-card);
  border: 1px solid var(--c-card-border);
  border-radius: 999px;
}
.tabs__tab {
  position: relative;
  z-index: 1;
  min-height: 44px;
  padding: .7rem 1.4rem;
  font: 500 .8125rem/1 var(--font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-heading);
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: color .35s var(--ease-out);
}
.tabs__tab[aria-selected="true"] { color: var(--logo-white); }
.tabs__ink {
  position: absolute;
  top: 4px; bottom: 4px; left: 0;
  width: var(--w, 0);
  transform: translateX(var(--x, 0));
  background: var(--logo-black);
  border-radius: 999px;
  transition: transform .5s var(--ease-expo), width .5s var(--ease-expo);
}
.tabs__panel.is-entering { animation: panel-in .55s var(--ease-expo); }
@keyframes panel-in { from { opacity: 0; transform: translateY(12px); } }
@media (min-width: 900px) {
  .cost-list--grid { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
  .cost-list--grid > div { padding-top: 0; border-top: 0; }
  .cost-list--grid > .cost-list__wide { grid-row: span 3; }
}

/* =========================================================
   19. CÓMO TRABAJAMOS: cifras dentro de la tarjeta final
   ========================================================= */
.process__cta {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  align-items: center;
}
@media (min-width: 1024px) { .process__cta { grid-template-columns: 1.25fr 1fr; } }
.stats.stats--inline { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.stats--inline .stat { padding-top: 1rem; }
.stats--inline .stat__value { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem); }
.stats--inline .stat__label { margin-top: .5rem; font-size: .85rem; }
.process__cta-row { display: grid; gap: 1rem; justify-items: start; }

/* =========================================================
   20. FORMULARIO EN DOS PASOS
   ========================================================= */
.form {
  gap: 1.25rem;
  border-radius: 16px;
  box-shadow: 0 40px 80px -50px color-mix(in srgb, var(--logo-black) 70%, transparent);
}
.drawer .form { box-shadow: none; }
.form__top { display: grid; gap: .6rem; }
.form__step-label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--tone-accent-text);
}
.form__progress { height: 3px; overflow: hidden; background: var(--tone-line); border-radius: 3px; }
.form__progress span {
  display: block;
  height: 100%;
  background: var(--tone-gold-metal);
  transform-origin: left;
  transform: scaleX(var(--form-progress, .5));
  transition: transform .7s var(--ease-expo);
}
.form__step { display: grid; gap: 1.25rem; }
.form__step.is-entering { animation: step-in .55s var(--ease-expo); }
@keyframes step-in { from { opacity: 0; transform: translateX(22px); } }
.form.is-sent .form__top,
.form.is-sent .form__step { display: none; }

/* Operación: tarjetas con icono */
.op-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.op-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: .3rem;
  padding: 1rem .9rem .95rem;
  background: var(--tone-surface);
  border: 1px solid var(--tone-line-strong);
  border-radius: 12px;
  cursor: pointer;
  transition:
    border-color .25s var(--ease-out),
    background-color .3s var(--ease-out),
    transform .35s var(--ease-expo),
    box-shadow .35s var(--ease-expo);
}
.op-card__icon {
  width: 26px; height: 26px;
  margin-bottom: .35rem;
  fill: none;
  stroke: var(--logo-gold);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .3s var(--ease-out);
}
.op-card__title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--brand-primary);
  transition: color .3s var(--ease-out);
}
.op-card__text { font-size: .8rem; line-height: 1.35; color: var(--tone-text-muted); transition: color .3s var(--ease-out); }
.op-card::after {
  content: "";
  position: absolute;
  top: .7rem; right: .7rem;
  width: 18px; height: 18px;
  border: 1.5px solid var(--tone-line-strong);
  border-radius: 50%;
  transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out), transform .4s var(--ease-expo);
}
@media (hover: hover) { .op-card:hover { border-color: var(--logo-gold); transform: translateY(-2px); } }
.choice__input:checked + .op-card {
  background: var(--logo-black);
  border-color: var(--logo-black);
  box-shadow: 0 18px 32px -20px color-mix(in srgb, var(--logo-black) 70%, transparent);
}
.choice__input:checked + .op-card .op-card__title { color: var(--logo-white); }
.choice__input:checked + .op-card .op-card__text { color: var(--tone-on-dark-muted); }
.choice__input:checked + .op-card .op-card__icon { stroke: var(--logo-gold-light); }
.choice__input:checked + .op-card::after {
  background: var(--logo-gold-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
  border-color: var(--logo-gold-light);
  transform: scale(1.1);
}
.choice__input:focus-visible + .op-card { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.choice[aria-invalid="true"] .op-card { border-color: var(--tone-accent-text); }
@media (max-width: 420px) {
  .op-card { padding: .85rem .7rem; }
  .op-card__text, .op-card::after { display: none; }
}

/* Campos con etiqueta flotante */
.form .field__control { min-height: 56px; background: var(--tone-surface); border-radius: 10px; }
.field--float,
.field--select .select { position: relative; }
.field--float .field__control { padding: 1.45rem 1rem .5rem; }
.field--float textarea.field__control { min-height: 6.5rem; padding-top: 1.75rem; }
.field--float .field__control::placeholder { color: transparent; }
.field--float .field__label,
.field--select .field__label {
  position: absolute;
  left: 1rem;
  top: 1.05rem;
  max-width: calc(100% - 2rem);
  overflow: hidden;
  font-size: 1rem;
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--tone-text-muted);
  pointer-events: none;
  transform-origin: left top;
  transition: transform .3s var(--ease-expo), color .25s var(--ease-out);
}
.field--float .field__control:focus + .field__label,
.field--float .field__control:not(:placeholder-shown) + .field__label,
.field--select .field__label {
  transform: translateY(-.62rem) scale(.76);
  font-weight: 600;
  color: var(--tone-accent-text);
}
.field--select .field__control { padding: 1.45rem 2.75rem .5rem 1rem; }

/* Casilla de privacidad propia */
.check input {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-content: center;
  width: 1.3rem;
  height: 1.3rem;
  margin: .1rem 0 0;
  background: var(--tone-surface);
  border: 1.5px solid var(--tone-line-strong);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.check input::before {
  content: "";
  width: .7rem;
  height: .7rem;
  background: var(--logo-white);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transition: transform .3s var(--ease-expo);
}
.check input:checked { background: var(--logo-black); border-color: var(--logo-black); }
.check input:checked::before { transform: scale(1); }
.check input:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }

/* Botones del formulario */
.form__next { width: 100%; }
.form__actions { display: flex; align-items: center; gap: .75rem; }
.form__actions .form__submit { flex: 1; width: auto; }
.form__back {
  min-height: 50px;
  padding: 0 .75rem;
  font: 500 .8125rem/1 var(--font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tone-text-muted);
  background: none;
  border: 0;
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: color .25s var(--ease-out);
}
.form__back:hover { color: var(--brand-primary); }

/* Confirmación de envío */
.form__success { display: grid; justify-items: center; gap: .6rem; padding: 2rem 1rem 1rem; text-align: center; }
.form__success-icon { width: 64px; height: 64px; fill: none; stroke: var(--logo-gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.form__success-icon :is(circle, path) { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1s var(--ease-out) forwards; }
.form__success-icon path { animation-delay: .45s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.form__success-title { font-family: var(--font-serif); font-size: 1.75rem; font-weight: 500; color: var(--brand-primary); }
.form__success-text { max-width: 34ch; color: var(--tone-text-muted); }

/* Movimiento reducido: sin nada de lo anterior */
@media (prefers-reduced-motion: reduce) {
  .section__title .w__i { transform: none; }
  .js .reveal :is(.asset__icon, .value__icon) :is(path, circle, rect) { stroke-dashoffset: 0; }
  .asset.is-tilting { transform: none; }
}

/* =========================================================
   21. VALORACIÓN DE VIVIENDA (dentro de Viviendas)
   ========================================================= */
.valuation {
  display: grid;
  gap: 1.75rem;
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  color: var(--tone-on-dark);
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--logo-gold) 24%, transparent), transparent 60%),
    var(--brand-dark);
  border: 1px solid color-mix(in srgb, var(--logo-gold) 45%, transparent);
  border-radius: 16px;
  box-shadow: 0 40px 80px -50px color-mix(in srgb, var(--logo-black) 70%, transparent);
}
.valuation :focus-visible { outline-color: var(--logo-gold-light); }
@media (min-width: 1024px) {
  .valuation { grid-template-columns: 5fr 7fr; gap: 3.5rem; align-items: center; }
}
.valuation__eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--logo-gold-light);
}
.valuation__title {
  margin-top: .6rem;
  font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem);
  line-height: 1.08;
  color: var(--logo-white);
}
.valuation__text { margin-top: .9rem; max-width: 42ch; color: var(--tone-on-dark-muted); }
.valuation__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.valuation__form > .valuation__zona,
.valuation__form > .valuation__submit,
.valuation__form > .valuation__note,
.valuation__form > .field:nth-child(4) { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .valuation__form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .valuation__form > .field:nth-child(4) { grid-column: auto; }
}
.valuation__form .field__control {
  min-height: 56px;
  background: var(--tone-surface);
  border-color: transparent;
  border-radius: 10px;
}
.valuation__form input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.valuation__form input::-webkit-outer-spin-button,
.valuation__form input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.valuation__form .field__control[aria-invalid="true"] { border-color: transparent; box-shadow: 0 0 0 2px var(--logo-gold-light); }
.valuation__form .field__error { color: var(--logo-gold-light); }
.valuation__submit { width: 100%; min-height: 56px; margin-top: .25rem; }
.valuation__note { font-size: .875rem; text-align: center; color: var(--tone-on-dark-muted); }

/* =========================================================
   22. TARJETAS: inversión compacta y viviendas en tableta
   ========================================================= */
/* Inversión: icono y título en línea, flecha en la esquina
   (toda la tarjeta es el enlace) */
.assets--compact .asset {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 1rem;
  row-gap: .85rem;
  padding: 1.25rem 1.25rem 1.4rem;
}
.assets--compact .asset__icon { width: 54px; height: 54px; padding: 11px; margin: 0; }
.assets--compact .asset__title { margin: 0; padding-right: 2.75rem; font-size: 1.3rem; }
.assets--compact .asset__text { grid-column: 1 / -1; font-size: .95rem; }
.assets--compact .asset__link { position: absolute; inset: 0; margin: 0; padding: 0; border-radius: inherit; }
.asset__arrow {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 36px;
  height: 36px;
  padding: 9px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  border: 1px solid color-mix(in srgb, var(--logo-gold) 50%, transparent);
  border-radius: 50%;
  transition:
    background-color .3s var(--ease-out),
    border-color .3s var(--ease-out),
    color .3s var(--ease-out),
    transform .45s var(--ease-expo);
}
@media (hover: hover) {
  .assets--compact .asset:hover .asset__arrow {
    color: var(--logo-black);
    background: var(--logo-gold-light);
    border-color: var(--logo-gold-light);
    transform: rotate(45deg);
  }
}

/* Tableta: las filas de tres tarjetas pasan a una columna, con el
   icono a la izquierda (tres columnas quedaban demasiado estrechas) */
@media (min-width: 768px) and (max-width: 1023px) {
  .assets--3 { grid-template-columns: 1fr; }
  .assets--3 .asset {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto 1fr;
    column-gap: 1.5rem;
    align-items: start;
  }
  .assets--3 .asset__icon { grid-row: 1 / span 3; margin: 0; }
  .assets--3 .asset__link { padding-top: .9rem; }
}

/* Tipos del ITP: cifras con la fuente de texto (el % de la Bodoni no se lee bien) */
.cost-table td:last-child {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   23. CONTACTO: el formulario, justo después del título
   En móvil: título, formulario y datos. En escritorio: título y
   datos a la izquierda, formulario a la derecha.
   ========================================================= */
.contact { gap: 2rem; }
.contact__info { display: grid; gap: 1.25rem; align-content: start; }
.contact__info .contact__note { margin-top: 0; }
@media (min-width: 1024px) {
  .contact {
    grid-template-columns: 5fr 7fr;
    grid-template-rows: auto 1fr;
    column-gap: 5rem;
    row-gap: 2rem;
  }
  .contact__intro { grid-column: 1; grid-row: 1; }
  .contact__info { grid-column: 1; grid-row: 2; }
  .contact__form-home { grid-column: 2; grid-row: 1 / span 2; }
}

/* Panel del formulario: alternativa para quien prefiere hablar */
.drawer__alt { margin-top: .6rem; font-size: .875rem; color: var(--tone-on-dark-muted); }
.drawer__alt a { font-weight: 600; color: var(--logo-gold-light); text-underline-offset: 3px; }

/* =========================================================
   24. PÁGINAS LEGALES
   ========================================================= */
.hero--legal { padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.hero--legal .hero__title { max-width: none; font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem); }
.hero--legal .hero__lead { max-width: 60ch; }
.legal { max-width: 72ch; }
.legal h2 {
  margin: 2.75rem 0 .9rem;
  font-size: clamp(1.45rem, 1.25rem + .8vw, 1.9rem);
  line-height: 1.15;
}
.legal h2:first-child { margin-top: 0; }
.legal p, .legal ul { margin: 0 0 1rem; }
.legal ul { padding-left: 1.2rem; list-style: disc; }
.legal li + li { margin-top: .45rem; }
.legal li::marker { color: var(--logo-gold); }
.legal a { font-weight: 500; color: var(--c-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.legal strong { font-weight: 600; color: var(--c-heading); }
.legal__data {
  display: grid;
  gap: .6rem;
  margin: 0 0 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--c-card);
  border: 1px solid var(--c-card-border);
  border-radius: var(--radius-m);
}
.legal__data div { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; }
.legal__data dt { font-weight: 600; color: var(--c-heading); }
.legal__data dd { margin: 0; color: var(--c-muted); }
@media (max-width: 559px) {
  .legal__data div { grid-template-columns: 1fr; gap: .1rem; }
}
.legal__updated { margin-top: 2.5rem; font-size: .875rem; color: var(--c-muted); }