/* ============================================================================
   INMOSSO — hoja de estilo del sitio
   ----------------------------------------------------------------------------
   DIRECCIÓN DE DISEÑO (según el brief de Aerovista Films, 8-08-2026)

   · Encargo    "Limpia, elegante y profesional. Espacio en blanco amplio y
                 fotografías de alta calidad como protagonistas. Menos
                 elementos, pero mejor presentados." Estética cercana a una
                 marca inmobiliaria de alto nivel, no a un portal masivo.
   · Referencia El pie de página de Engel & Völkers que envió Luis: columnas de
                 texto sobrias, mucho aire y un pequeño dibujo de línea de una
                 casa como único adorno. Ese pie está replicado aquí.
   · Tipografía Fraunces para los títulos — una serif de contraste alto que
                 conversa con la fachada neoclásica de la Casa Mosso (simetría,
                 columnas, frontón). Se eligió sobre Cormorant Garamond porque
                 en tamaños de titular aquella se quedaba fina y sin presencia;
                 Fraunces sostiene el peso y además es variable, así que su eje
                 óptico se ajusta por nivel. Inter para el texto corrido, porque
                 un catálogo con precios y metrajes tiene que leerse sin
                 esfuerzo.
   · Color      Blanco frío y celestes. El navy #1F4E79 sale del logo real y se
                 usa con cuentagotas —en un sitio de lujo el color se gana, no se
                 reparte—; los celestes sostienen fondos, líneas y detalles sin
                 tomar protagonismo. El texto es un carbón levemente azulado.
   · Sello      El esquema de la Casa Mosso (dibujo de Aerovista) se usa como
                 marca de agua y cierre, nunca como fotografía. Se recolorea por
                 CSS, así que sirve sobre fondo claro y oscuro.

   SE DESCARTA A PROPÓSITO, por pedido explícito del brief:
   marquees infinitos, tarjetas con tilt 3D, contadores animados, grano, parallax
   y cualquier motion decorativo. El brief pide lo contrario: quietud y aire.

   LA EXCEPCIÓN es la apertura: una toma lenta de Temuco corriendo en bucle con
   el esquema de la Casa Mosso dibujándose encima. No es adorno —cuenta de dónde
   viene la marca y sustituye al header estático del sitio actual—, y por eso se
   ejecuta en clave sobria: un solo movimiento continuo, sin cortes ni tirones.
   ========================================================================== */

/* Paleta: blanco frío y celestes.
   El navy sale del logo real y sigue mandando en botones y titulares; los
   celestes solo sostienen fondos, líneas y detalles, para no perder la
   sobriedad que pide el brief. */
:root{
  --navy:#1F4E79;
  --navy-d:#16395A;
  --cielo:#5B93BF;   /* celeste medio: hovers, acentos, subrayados */
  --cielo-p:#A8CDE8; /* celeste pálido: bordes vivos y estados */
  --ink:#121A22;     /* carbón con matiz azul: texto y secciones oscuras */
  --ink-2:#49535D;
  --dim:#8A97A3;
  --line:#DCE8F0;
  --line-2:#EFF5FA;
  --bg:#FBFDFE;
  --bg-2:#EDF4F9;
  --white:#FFFFFF;
  --ok:#2E7D5B;
  --wa:#25D366;
  --fd:'Fraunces',Georgia,'Times New Roman',serif;
  --fb:'Inter',system-ui,-apple-system,sans-serif;
  --wrap:1280px;
  --ease:cubic-bezier(.25,.8,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 16px/1.65 var(--fb);-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--navy);color:#fff}
.wrap{width:min(var(--wrap),90vw);margin-inline:auto}
.wrap-n{width:min(880px,90vw);margin-inline:auto}

/* Fraunces es variable y trae eje óptico: cuanto más grande el titular, más se
   afina el contraste entre gruesos y finos. Se fija a mano por nivel en vez de
   dejarlo en automático, para que el h1 tenga el contraste de una fuente de
   display y el h3 siga siendo legible en cuerpo pequeño. */
h1,h2,h3{font-family:var(--fd);font-weight:400;line-height:1.1;letter-spacing:-.018em}
h1{font-size:clamp(2.5rem,5.4vw,4.6rem);line-height:1.02;letter-spacing:-.03em;
  font-variation-settings:'opsz' 144,'wght' 400;text-wrap:balance}
h2{font-size:clamp(1.95rem,3.7vw,3.05rem);line-height:1.07;letter-spacing:-.024em;
  font-variation-settings:'opsz' 96,'wght' 400;text-wrap:balance}
h3{font-size:1.32rem;line-height:1.28;letter-spacing:-.012em;
  font-variation-settings:'opsz' 30,'wght' 500}

/* etiqueta pequeña que ordena las secciones */
.eyebrow{font:500 .7rem/1.7 var(--fb);letter-spacing:.22em;text-transform:uppercase;color:var(--dim);display:block;margin-bottom:20px}

.lead{font-size:1.08rem;color:var(--ink-2);max-width:60ch}

/* ---------------------------------------------------------------- botones */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--navy);color:#fff;
  font:500 .9rem/1 var(--fb);letter-spacing:.02em;padding:17px 30px;transition:background .3s var(--ease)}
.btn:hover{background:var(--navy-d)}
.btn-line{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--ink);color:var(--ink);
  font:500 .9rem/1 var(--fb);padding:16px 29px;transition:background .3s var(--ease),color .3s var(--ease)}
.btn-line:hover{background:var(--ink);color:#fff}
/* enlace con subrayado que crece: el único gesto de motion del sitio */
.link{display:inline-flex;align-items:center;gap:9px;font:500 .88rem/1 var(--fb);letter-spacing:.02em;
  padding-bottom:5px;border-bottom:1px solid var(--line);transition:border-color .3s var(--ease)}
.link:hover{border-color:var(--ink)}
.link .ar{transition:transform .3s var(--ease)}
.link:hover .ar{transform:translateX(5px)}

/* ------------------------------------------------------------------- nav */
.nav{position:sticky;top:0;z-index:70;background:rgba(251,253,254,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:82px}
.nav .logo img{height:26px;width:auto}
.menu{display:flex;align-items:center;gap:36px;list-style:none}
.menu>li{position:relative}
.menu>li>a,.menu>li>button{display:inline-flex;align-items:center;gap:7px;font:500 .87rem/1 var(--fb);
  letter-spacing:.03em;color:var(--ink-2);padding:30px 0;transition:color .25s}
.menu>li>a:hover,.menu>li>button:hover,.menu>li>a.on{color:var(--ink)}
.menu .caret{font-size:.6rem;transition:transform .3s var(--ease)}
.menu li:hover .caret,.menu li.abierto .caret{transform:rotate(180deg)}

/* menú desplegable por zonas — el corazón de la navegación según el brief */
.mega{position:absolute;top:100%;left:50%;translate:-50% 0;background:var(--white);border:1px solid var(--line);
  padding:34px 38px;display:grid;grid-template-columns:repeat(4,minmax(158px,1fr));gap:34px;
  box-shadow:0 24px 60px -30px rgba(21,24,28,.28);opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s}
.menu li:hover .mega,.menu li.abierto .mega{opacity:1;visibility:visible;transform:none}
.mega h4{font:500 .68rem/1 var(--fb);letter-spacing:.2em;text-transform:uppercase;color:var(--navy);
  padding-bottom:13px;border-bottom:1px solid var(--line);margin-bottom:15px}
.mega ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.mega ul a{display:block;font-size:.92rem;color:var(--ink-2);padding:7px 0;transition:color .2s,padding-left .25s var(--ease)}
.mega ul a:hover{color:var(--navy);padding-left:7px}
.mega .todas{margin-top:12px;font-size:.82rem;color:var(--dim)}

.burger{display:none;flex-direction:column;gap:5px;padding:10px}
.burger span{width:24px;height:1.5px;background:var(--ink);transition:transform .3s,opacity .2s}
.burger.x span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media(max-width:1000px){
  .nav .wrap{height:70px}
  .burger{display:flex}
  .menu{position:fixed;inset:70px 0 auto 0;background:var(--white);flex-direction:column;align-items:stretch;
    gap:0;padding:8px 5vw 26px;border-bottom:1px solid var(--line);max-height:calc(100vh - 70px);overflow-y:auto;
    transform:translateY(-130%);transition:transform .4s var(--ease)}
  .menu.open{transform:none}
  .menu>li>a,.menu>li>button{padding:17px 0;width:100%;justify-content:space-between;border-bottom:1px solid var(--line-2)}
  .mega{position:static;translate:none;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;
    padding:6px 0 14px;grid-template-columns:1fr;gap:20px;display:none}
  .menu li.abierto .mega{display:grid}
}

/* ---------------------------------------------- la casa dibujándose (header)
   El GIF que entregó el cliente, pasado a vídeo: pesa 5 veces menos y se puede
   controlar (se reproduce una vez al entrar en pantalla y se queda en el trazo
   final). `multiply` hace desaparecer el fondo blanco del dibujo sin necesidad
   de canal alfa. */
.dibujo{position:relative;width:100%;max-width:560px;margin-inline:auto}
/* El dibujo terminado es la capa base y NUNCA desaparece: si el vídeo no carga
   o el navegador bloquea la reproducción, la casa se ve igual.
   Mientras el lápiz dibuja, esa capa baja a guía tenue —como el trazo auxiliar
   de un plano— y el vídeo marca encima las líneas definitivas. Así el hero
   nunca está vacío y se conserva la gracia de ver cómo se dibuja. */
/* El esquema terminado trae canal alfa, así que se apoya directamente sobre la
   ciudad sin mezcla ninguna. El vídeo del lápiz sí llega con fondo blanco —los
   MP4 no tienen alfa—, y ahí `multiply` lo hace desaparecer dejando solo el
   trazo. Para que esa mezcla alcance al vídeo de la ciudad, el contenedor del
   hero no puede aislarse: ver `.hero > .wrap`. */
.dibujo img{width:100%;display:block;
  opacity:1;transition:opacity .5s var(--ease)}
.dibujo.dibujando img{opacity:.16}
/* El trazo se pinta ya recortado —el fondo blanco del vídeo se elimina por
   píxel en el canvas—, así que no necesita ningún modo de mezcla: se apoya
   sobre la ciudad como lo haría un PNG con transparencia. */
.dibujo canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .35s var(--ease);pointer-events:none}
.dibujo.dibujando canvas{opacity:1}

/* ------------------------------------------------------------------ hero */
.hero{position:relative;padding:96px 0 0}
.hero-txt{max-width:19ch}
.hero h1{margin:22px 0 0}
.hero .lead{margin-top:26px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
.hero-img{margin-top:64px;aspect-ratio:16/9;overflow:hidden;background:var(--bg-2)}
.hero-img img{width:100%;height:100%;object-fit:cover}
@media(max-width:760px){.hero{padding-top:56px}.hero-img{aspect-ratio:4/3;margin-top:40px}}

/* ------------------------------------------------- la ciudad de fondo (hero)
   Temuco desde el cerro Ñielol, la misma vista del sitio actual pero con un
   movimiento muy lento. Vive detrás del texto y se apaga cuando la toma acaba,
   dejando el sitio en blanco para que la Casa Mosso se dibuje encima.
   El póster está siempre debajo: si el vídeo no carga, el hero se ve igual. */
/* Solo ocupa la franja del titular: más abajo empieza el mosaico y necesita
   fondo limpio, así que la ciudad no llega hasta ahí. */
.cine{position:absolute;top:0;left:0;right:0;height:clamp(460px,78vh,720px);
  overflow:hidden;pointer-events:none;z-index:0}
.cine-poster,.cine-video,.cine-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cine-video{opacity:0;transition:opacity 1.1s var(--ease)}
.cine.rodando .cine-video{opacity:1}

/* Las otras dos zonas del país. Entran por encima de la toma de Temuco con un
   fundido largo; el JS les va poniendo `visible` por turnos. */
.cine-foto{opacity:0;transition:opacity 2.4s var(--ease)}
.cine-foto.visible{opacity:1}

/* Velo permanente: sostiene la lectura del texto sobre la ciudad.
   Es opaco donde va la columna de texto, se abre hacia la derecha y vuelve a
   cerrarse abajo, porque ahí empieza el mosaico y necesita fondo limpio. */
.cine-velo{position:absolute;inset:0;
  background:
    linear-gradient(to top,
      var(--bg) 0%, var(--bg) 27%,
      color-mix(in srgb, var(--bg) 55%, transparent) 44%,
      transparent 60%),
    linear-gradient(100deg,
      var(--bg) 0%, var(--bg) 24%,
      color-mix(in srgb, var(--bg) 86%, transparent) 40%,
      color-mix(in srgb, var(--bg) 42%, transparent) 62%,
      color-mix(in srgb, var(--bg) 20%, transparent) 100%)}

/* Asiento: cuando la casa entra, la ciudad baja un punto para que el trazo se
   lea sobre ella. No la tapa —el vídeo sigue corriendo y viéndose—, solo le
   quita fuerza en la mitad derecha, que es donde va el dibujo. */
.cine-cierre{position:absolute;inset:0;opacity:0;
  background:linear-gradient(100deg,
    transparent 0%, transparent 34%,
    color-mix(in srgb, var(--bg) 46%, transparent) 52%,
    color-mix(in srgb, var(--bg) 62%, transparent) 74%,
    color-mix(in srgb, var(--bg) 58%, transparent) 100%);
  transition:opacity 1.6s var(--ease)}
.hero.revelada .cine-cierre{opacity:1}

/* El contenido del hero va sobre la ciudad por orden del DOM, sin `z-index`:
   dárselo crearía un contexto de apilamiento y el `multiply` del lápiz dejaría
   de alcanzar al vídeo de fondo, apareciendo con un recuadro blanco. */
.hero > .wrap{position:relative}

/* Halo detrás del esquema: las líneas son de trazo fino y la ciudad tiene mucho
   detalle, así que sin este respiro el dibujo se confunde con los edificios.
   Va como fondo del propio bloque —no como capa aparte— para no depender de
   z-index negativos, que aquí se irían detrás del vídeo. */
.hero .dibujo{background:radial-gradient(ellipse 64% 60% at 50% 50%,
    color-mix(in srgb, var(--bg) 92%, transparent) 0%,
    color-mix(in srgb, var(--bg) 62%, transparent) 56%,
    transparent 78%);
  background-repeat:no-repeat}

/* La casa espera a que la ciudad ya esté rodando.
   Solo se esconde si el script está vivo (`js-cine`): sin JS se ve desde el
   principio, como antes. */
.hero.js-cine .dibujo{opacity:0;transform:translateY(16px);
  transition:opacity 1.2s var(--ease) .45s, transform 1.2s var(--ease) .45s}
.hero.js-cine.revelada .dibujo{opacity:1;transform:none}
/* sin animación no hay espera: la casa está desde el principio */
@media(prefers-reduced-motion:reduce){
  .cine-video{display:none}
  .cine-cierre{opacity:1;transition:none}
  .hero .dibujo{opacity:1;transform:none;transition:none}
}

/* --------------------------------------------------------------- secciones */
section{padding:104px 0}
.sec-head{margin-bottom:52px;max-width:64ch}
.sec-head h2{margin-bottom:18px}
@media(max-width:760px){section{padding:66px 0}.sec-head{margin-bottom:36px}}

/* acceso por zonas */
.zonas{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.zona-c{background:var(--bg);padding:44px 34px;transition:background .35s var(--ease)}
.zona-c:hover{background:var(--white)}
.zona-c .num{font:400 .74rem/1 var(--fb);letter-spacing:.16em;color:var(--dim)}
.zona-c h3{margin:16px 0 18px;font-size:1.7rem}
.zona-c ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.zona-c ul a{font-size:.87rem;color:var(--ink-2);border:1px solid var(--line);padding:7px 13px;transition:border-color .25s,color .25s}
.zona-c ul a:hover{border-color:var(--navy);color:var(--navy)}
.zona-c .cta{margin-top:26px}

/* La persona que atiende cada zona, con su contacto directo. Se separa de las
   ciudades con un filete para que se lea como un dato de otra naturaleza. */
.zona-enc{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:5px}
.zona-enc-n{font:500 .95rem/1.3 var(--fb);color:var(--ink);letter-spacing:-.01em}
.zona-enc a{font-size:.85rem;color:var(--ink-2);width:fit-content;
  border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.zona-enc a:hover{color:var(--navy);border-bottom-color:var(--navy)}

@media(max-width:900px){.zonas{grid-template-columns:1fr}}

/* ------------------------------------------------------------- propiedades */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:44px 32px}
.pcard{display:block;background:transparent}
.pcard-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-2);margin-bottom:20px}
.pcard-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.pcard:hover .pcard-media img{transform:scale(1.035)}
.pcard .op{position:absolute;top:0;left:0;z-index:2;background:var(--white);color:var(--ink);
  font:500 .66rem/1 var(--fb);letter-spacing:.16em;text-transform:uppercase;padding:11px 15px}
/* Va bajo la etiqueta de operación, en oscuro para que se lea como un estado
   y no como otra categoría más del catálogo. */
.pcard .no-disp{top:auto;bottom:0;left:0;background:var(--ink);color:#fff}
.pcard .nfotos{position:absolute;bottom:12px;right:12px;z-index:2;background:rgba(21,24,28,.62);color:#fff;
  font:400 .7rem/1 var(--fb);padding:7px 10px;backdrop-filter:blur(4px)}
.pcard .ciudad{font:500 .7rem/1 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.pcard h3{margin:11px 0 0;font-size:1.42rem;line-height:1.2}
.pcard .precio{font:500 1.12rem/1 var(--fb);margin-top:14px;letter-spacing:-.01em}
.pcard .precio small{font-weight:400;color:var(--dim);font-size:.8rem;margin-left:5px}
.pcard .specs{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  font-size:.84rem;color:var(--ink-2)}
.vacio{padding:70px 0;text-align:center;color:var(--dim)}

/* filtros del listado */
.filtros{display:flex;gap:26px;align-items:flex-end;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid var(--line);margin-bottom:44px}
.campo{display:flex;flex-direction:column;gap:8px;min-width:170px}
.campo label{font:500 .68rem/1 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.campo select,.campo input{border:0;border-bottom:1px solid var(--line);background:transparent;padding:9px 0;
  font:400 .97rem/1.3 var(--fb);color:var(--ink);transition:border-color .25s}
.campo select:focus,.campo input:focus{outline:none;border-color:var(--navy)}
.campo input{min-width:220px}
.nres{margin-left:auto;font-size:.86rem;color:var(--dim);padding-bottom:9px}

/* --------------------------------------------------------- ficha propiedad */
.ficha-head{padding:56px 0 34px}
.migas{font-size:.82rem;color:var(--dim);margin-bottom:26px}
.migas a:hover{color:var(--ink)}
.migas span{margin:0 8px;opacity:.5}
.ficha-top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.ficha-top h1{font-size:clamp(2rem,4vw,3.2rem);max-width:20ch}
.ficha-precio{font:500 clamp(1.5rem,2.6vw,2.1rem)/1 var(--fb);letter-spacing:-.02em;white-space:nowrap}
.ficha-precio small{display:block;font:400 .8rem/1 var(--fb);color:var(--dim);margin-top:9px;letter-spacing:.04em}

.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.galeria a{overflow:hidden;background:var(--bg-2);aspect-ratio:1;cursor:zoom-in}
.galeria a:first-child{grid-column:span 4;aspect-ratio:16/8}
.galeria img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.galeria a:hover img{transform:scale(1.04)}
@media(max-width:760px){.galeria{grid-template-columns:1fr 1fr}.galeria a:first-child{grid-column:span 2;aspect-ratio:4/3}}

.ficha-cuerpo{display:grid;grid-template-columns:1.5fr .9fr;gap:70px;padding:76px 0}
.ficha-desc p{margin-bottom:19px;color:var(--ink-2);line-height:1.8}
.datos{list-style:none;border-top:1px solid var(--line)}
.datos li{display:flex;justify-content:space-between;gap:18px;padding:16px 0;border-bottom:1px solid var(--line);font-size:.94rem}
.datos .k{color:var(--dim)}
.datos .v{font-weight:500;text-align:right}
.aside-cta{margin-top:32px;border:1px solid var(--line);padding:30px}
.aside-cta h3{font-size:1.3rem;margin-bottom:12px}
.aside-cta p{font-size:.92rem;color:var(--ink-2);margin-bottom:20px}
@media(max-width:900px){.ficha-cuerpo{grid-template-columns:1fr;gap:44px;padding:48px 0}}

/* --------------------------------------------------------------- historia */
.historia-hero{padding:86px 0 0;text-align:center}
.historia-hero h1{max-width:16ch;margin:22px auto 0}
.historia-hero .lead{margin:26px auto 0;text-align:left}
.casa-sello{margin:60px auto 0;max-width:760px}
.casa-sello img{width:100%;opacity:.9}
.historia-cuerpo{padding:76px 0}
.historia-cuerpo p{font-size:1.06rem;line-height:1.85;color:var(--ink-2);margin-bottom:22px}
/* Separa el relato familiar del texto de arriba, que habla de la casa */
.historia-h2{margin:58px 0 26px;font-size:clamp(1.7rem,3.2vw,2.5rem)}
.historia-cuerpo p.destacado{font-family:var(--fd);font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.35;
  color:var(--ink);margin:44px 0;padding-left:26px;border-left:2px solid var(--navy)}

/* cifras discretas */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
.cifra{background:var(--bg);padding:40px 26px}
.cifra .n{font:400 clamp(2rem,3.4vw,2.9rem)/1 var(--fd);color:var(--navy)}
.cifra .l{font-size:.86rem;color:var(--ink-2);margin-top:10px;line-height:1.45}
@media(max-width:820px){.cifras{grid-template-columns:1fr 1fr}}

/* --------------------------------------------------------------- contacto */
.cont-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}
.form label{display:block;margin-bottom:22px}
.form span{display:block;font:500 .68rem/1 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:9px}
.form input,.form textarea,.form select{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;
  padding:11px 0;font:400 1rem/1.5 var(--fb);color:var(--ink);transition:border-color .25s}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--navy)}
.form textarea{resize:vertical;min-height:110px}
.datos-cont{list-style:none;border-top:1px solid var(--line)}
.datos-cont li{border-bottom:1px solid var(--line)}
.datos-cont a,.datos-cont div{display:flex;justify-content:space-between;gap:18px;padding:20px 0;transition:padding-left .3s var(--ease)}
.datos-cont a:hover{padding-left:9px}
.datos-cont .k{font:500 .68rem/1 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);padding-top:5px}
.datos-cont .v{text-align:right;font-size:1rem}
.aviso{padding:15px 18px;margin-bottom:24px;font-size:.92rem;border-left:2px solid var(--ok);background:#EFF6F2}
.aviso.mal{border-color:#C0392B;background:#FBEDEC}
@media(max-width:880px){.cont-grid{grid-template-columns:1fr;gap:48px}}

/* ------------------------------------------------------------------ footer
   Réplica del pie de Engel & Völkers que envió el cliente como referencia:
   columnas de texto sobrias y el dibujo de la casa centrado abajo. */
footer{background:var(--ink);color:#9DA5AD;padding:78px 0 40px;margin-top:20px}
.fcols{display:grid;grid-template-columns:repeat(4,1fr);gap:38px;padding-bottom:56px}
.fcols h4{font:500 .68rem/1 var(--fb);letter-spacing:.2em;text-transform:uppercase;color:#6E7780;margin-bottom:22px}
.fcols ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.fcols a{font-size:.93rem;color:#D6DBDF;transition:color .25s}
.fcols a:hover{color:#fff}
.fsello{display:flex;justify-content:center;padding:12px 0 44px}
.fsello img{width:min(330px,62vw);opacity:.42;filter:brightness(0) invert(1)}
.fbase{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;
  padding-top:30px;border-top:1px solid rgba(255,255,255,.1);font-size:.83rem}
.fbase a{color:#D6DBDF}
.fbase a:hover{color:#fff}
@media(max-width:880px){.fcols{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:520px){.fcols{grid-template-columns:1fr}}

/* -------------------------------------------------------- WhatsApp flotante */
.wa-flota{position:fixed;right:22px;bottom:22px;z-index:80;width:56px;height:56px;border-radius:50%;
  background:var(--wa);color:#08331C;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px -8px rgba(37,211,102,.6);transition:transform .3s var(--ease)}
.wa-flota:hover{transform:scale(1.07)}
@media(max-width:600px){.wa-flota{right:16px;bottom:16px;width:52px;height:52px}}

/* ------------------------------------------------------------- lightbox */
.lb{position:fixed;inset:0;z-index:120;background:rgba(14,16,19,.96);display:none;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:85vh;object-fit:contain}
.lb-btn{position:absolute;top:50%;translate:0 -50%;width:54px;height:54px;color:#fff;font-size:1.6rem;
  display:flex;align-items:center;justify-content:center;transition:opacity .2s;opacity:.65}
.lb-btn:hover{opacity:1}
.lb-prev{left:14px}.lb-next{right:14px}
.lb-x{position:absolute;top:20px;right:22px;color:#fff;font:400 .85rem/1 var(--fb);letter-spacing:.12em;
  text-transform:uppercase;padding:12px;opacity:.7}
.lb-x:hover{opacity:1}
.lb-n{position:absolute;bottom:24px;left:50%;translate:-50% 0;color:#9DA5AD;font:400 .8rem/1 var(--fb);letter-spacing:.18em}

/* ============================================================================
   FONDO CON VIDA
   El fondo plano dejaba la página muerta. En vez de un aurora genérico se usa
   el lenguaje del propio proyecto: la trama de un plano de arquitectura, que es
   de donde sale el esquema de la Casa Mosso. Dos rejillas (fina y gruesa) que
   derivan muy despacio, más un halo que respira. Contraste bajísimo: se percibe
   como textura, nunca compite con el texto.
   ========================================================================== */
.fondo{position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--bg);overflow:hidden}
.fondo::before{
  content:"";position:absolute;inset:-60px;
  background-image:
    linear-gradient(var(--linea-plano) 1px,transparent 1px),
    linear-gradient(90deg,var(--linea-plano) 1px,transparent 1px);
  background-size:90px 90px;
  animation:deriva 90s linear infinite;
}
.fondo::after{
  content:"";position:absolute;inset:-60px;
  background-image:
    linear-gradient(var(--linea-plano-2) 1px,transparent 1px),
    linear-gradient(90deg,var(--linea-plano-2) 1px,transparent 1px);
  background-size:18px 18px;
  animation:deriva 60s linear infinite reverse;
  mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000 0%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000 0%,transparent 75%);
}
/* halo cálido que respira, para que el blanco no quede muerto */
.halo{position:absolute;inset:0;
  background:
    radial-gradient(60% 45% at 18% 12%,rgba(31,78,121,.055),transparent 70%),
    radial-gradient(50% 40% at 88% 8%,rgba(200,122,40,.04),transparent 70%);
  animation:respirar 26s ease-in-out infinite}
@keyframes deriva{to{transform:translate3d(90px,90px,0)}}
@keyframes respirar{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
:root{--linea-plano:rgba(31,78,121,.055);--linea-plano-2:rgba(31,78,121,.03)}

/* las secciones con fondo propio tapan la trama; las transparentes la dejan ver */
.seccion.crema{background:color-mix(in srgb,var(--bg-2) 88%,transparent)}
.seccion.oscura{position:relative;isolation:isolate}
.seccion.oscura::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:90px 90px}

/* ---------------------------------------------- texto que se vaporiza (21st.dev) */
.vapor{display:block;height:1.35em;position:relative;margin-top:14px;
  font-family:var(--fb);font-weight:500;font-size:clamp(1.05rem,2.1vw,1.5rem);letter-spacing:-.01em}

/* ============================================================================
   SECCIONES NAVEGABLES
   La portada se lee como un conjunto de secciones con identidad propia, no
   como un scroll continuo: cada una numerada, con su franja superior y su
   entrada en el navegador lateral.
   ========================================================================== */
.seccion{position:relative;padding:110px 0;border-top:1px solid var(--line)}
.seccion:first-of-type{border-top:0}
.seccion.oscura{background:var(--ink);color:#C9D0D6;border-top-color:rgba(255,255,255,.1)}
.seccion.oscura h2,.seccion.oscura h3{color:#fff}
.seccion.oscura .eyebrow{color:#7E8892}
.seccion.oscura .lead{color:#A8B2BB}
.seccion.crema{background:var(--bg-2)}
.sec-num{position:absolute;top:36px;right:calc((100vw - min(var(--wrap),90vw))/2);
  font:400 .72rem/1 var(--fb);letter-spacing:.28em;color:var(--dim)}
.seccion.oscura .sec-num{color:#5E6871}
@media(max-width:900px){.seccion{padding:74px 0}.sec-num{display:none}}

/* navegador lateral de secciones */
.secnav{position:fixed;right:26px;top:50%;translate:0 -50%;z-index:60;display:flex;flex-direction:column;gap:14px}
.secnav a{display:flex;align-items:center;gap:11px;justify-content:flex-end;color:var(--dim);
  font:500 .68rem/1 var(--fb);letter-spacing:.14em;text-transform:uppercase}
.secnav .punto{width:7px;height:7px;border-radius:50%;background:var(--line);border:1px solid var(--dim);
  transition:background .3s var(--ease),transform .3s var(--ease)}
.secnav .txt{opacity:0;transform:translateX(6px);transition:opacity .3s var(--ease),transform .3s var(--ease);white-space:nowrap}
.secnav a:hover .txt{opacity:1;transform:none}
.secnav a.on .punto{background:var(--navy);border-color:var(--navy);transform:scale(1.5)}
.secnav a.on{color:var(--ink)}
.secnav.claro a{color:#8A939C}
.secnav.claro .punto{background:transparent;border-color:#6E7780}
.secnav.claro a.on .punto{background:#fff;border-color:#fff}
.secnav.claro a.on{color:#fff}
@media(max-width:1240px){.secnav{display:none}}

/* ============================================================================
   MOSAICO INTERACTIVO  (bajo el título de la portada)
   Paneles en blanco y negro que se colorean y se expanden al pasar el cursor.
   Es el gesto que el cliente valoraba de su sitio actual, rehecho en CSS puro
   y con datos reales. En táctil se apila y va siempre a color.
   ========================================================================== */
.mosaico{display:flex;gap:4px;height:min(60vh,500px);min-height:340px}
.panel{position:relative;flex:1;overflow:hidden;cursor:pointer;background:var(--bg-3,#EAEEF2);
  transition:flex .7s var(--ease)}
.panel img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);
  transform:scale(1.05);transition:filter .7s var(--ease),transform 1.2s var(--ease)}
.panel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(14,17,21,.88) 0%,rgba(14,17,21,.12) 55%,transparent 100%)}
.mosaico:hover .panel{flex:.74}
.panel:hover,.panel:focus-visible{flex:2.5;outline:none}
.panel:hover img,.panel:focus-visible img{filter:grayscale(0) contrast(1);transform:scale(1)}
.panel-info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 22px;color:#fff}
.panel-op{display:inline-block;font:500 .6rem/1 var(--fb);letter-spacing:.2em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.5);padding:6px 10px;margin-bottom:12px}
.panel h3{font-size:1.15rem;line-height:1.25;color:#fff}
.panel-precio{display:block;font:500 1.15rem/1 var(--fb);margin-top:12px;letter-spacing:-.01em;
  opacity:0;transform:translateY(10px);transition:opacity .45s .12s var(--ease),transform .45s .12s var(--ease)}
.panel-meta{display:block;font-size:.8rem;color:rgba(255,255,255,.75);margin-top:8px;
  opacity:0;transform:translateY(10px);transition:opacity .45s .18s var(--ease),transform .45s .18s var(--ease)}
.panel:hover .panel-precio,.panel:hover .panel-meta,
.panel:focus-visible .panel-precio,.panel:focus-visible .panel-meta{opacity:1;transform:none}
@media(max-width:900px){
  .mosaico{height:auto;flex-wrap:wrap;min-height:0;gap:4px}
  .panel{flex:1 1 calc(50% - 4px);height:210px}
  .mosaico:hover .panel,.panel:hover{flex:1 1 calc(50% - 4px)}
  .panel img{filter:none;transform:none}
  .panel-precio,.panel-meta{opacity:1;transform:none}
}

/* ============================================================================
   RECORRIDOS  (reels de Instagram)
   ========================================================================== */
.reels{display:flex;gap:18px;overflow-x:auto;padding:4px 0 18px;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.reels::-webkit-scrollbar{height:3px}
.reels::-webkit-scrollbar-track{background:rgba(255,255,255,.1)}
.reels::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35)}
.reel{flex:0 0 250px;scroll-snap-align:start}
.reel-marco{position:relative;aspect-ratio:9/16;overflow:hidden;background:#000;cursor:pointer;
  border:1px solid rgba(255,255,255,.14);transition:border-color .4s var(--ease)}
.reel-marco:hover{border-color:rgba(255,255,255,.45)}
.reel-marco video{width:100%;height:100%;object-fit:cover}
.reel-repro{position:absolute;top:12px;left:12px;z-index:2;display:flex;align-items:center;gap:6px;
  font:500 .68rem/1 var(--fb);color:#fff;background:rgba(14,17,21,.6);backdrop-filter:blur(6px);padding:7px 10px}
.reel-son{position:absolute;bottom:12px;right:12px;z-index:2;width:34px;height:34px;border-radius:50%;
  background:rgba(14,17,21,.6);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;color:#fff;transition:background .25s}
.reel-marco:hover .reel-son{background:rgba(14,17,21,.85)}
.reel p{font-size:.88rem;line-height:1.5;color:#A8B2BB;margin-top:14px}
.reels-pie{font-size:.83rem;color:#7E8892;margin-top:20px}
@media(max-width:600px){.reel{flex:0 0 78vw}}

/* ============================================================================
   OPERACIONES CERRADAS  (carrusel en movimiento continuo)
   ========================================================================== */
.carrusel{overflow:hidden;position:relative;padding:6px 0}
.carrusel-pista{display:flex;gap:14px;width:max-content;animation:correr 80s linear infinite}
.carrusel:hover .carrusel-pista{animation-play-state:paused}
@keyframes correr{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.carrusel::before,.carrusel::after{content:"";position:absolute;top:0;bottom:0;width:14%;z-index:2;pointer-events:none}
.carrusel::before{left:0;background:linear-gradient(90deg,var(--bg-2),transparent)}
.carrusel::after{right:0;background:linear-gradient(270deg,var(--bg-2),transparent)}
.cerrada{position:relative;width:250px;height:250px;flex-shrink:0;overflow:hidden;background:var(--bg-3,#EAEEF2)}
.cerrada img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .5s var(--ease),transform .9s var(--ease)}
.cerrada:hover img{filter:grayscale(0);transform:scale(1.05)}
.cerrada-sello{position:absolute;top:12px;left:12px;font:500 .58rem/1 var(--fb);letter-spacing:.18em;
  text-transform:uppercase;background:var(--white);color:var(--ink);padding:7px 10px}
.cerrada-fecha{position:absolute;bottom:12px;left:12px;font:400 .7rem/1 var(--fb);color:#fff;
  background:rgba(14,17,21,.62);backdrop-filter:blur(4px);padding:6px 9px}

/* ============================================================================
   OBRAS DE CONSTRUCCIÓN  (galería)
   ========================================================================== */
.obras-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:12px}
.obra{position:relative;overflow:hidden;background:var(--bg-3,#EAEEF2);cursor:zoom-in}
.obra img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.obra:hover img{transform:scale(1.05)}
.obra::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(14,17,21,.85),rgba(14,17,21,.06) 62%,transparent);
  transition:opacity .4s}
.obra h3{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px;color:#fff;
  font-size:1rem;line-height:1.3;font-family:var(--fb);font-weight:500}
.obra .nfotos{position:absolute;top:12px;right:12px;z-index:2;font:400 .68rem/1 var(--fb);color:#fff;
  background:rgba(14,17,21,.55);backdrop-filter:blur(4px);padding:6px 9px;opacity:0;transition:opacity .3s}
.obra:hover .nfotos{opacity:1}
.obra.g2{grid-column:span 2}
.obra.v2{grid-row:span 2}
@media(max-width:900px){.obras-grid{grid-template-columns:1fr 1fr;grid-auto-rows:170px}.obra.v2{grid-row:span 1}}
@media(max-width:560px){.obras-grid{grid-template-columns:1fr}.obra.g2{grid-column:span 1}}

/* --------------------------------------------------------------- reveals
   Una sola entrada, muy contenida (14px). El brief pide quietud: la página no
   debe "actuar" mientras se lee. */
.rv{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important}
  *{animation:none!important;transition-duration:.01ms!important}
  .carrusel-pista{animation:none!important}
  .fondo::before,.fondo::after,.halo{animation:none!important}
  .panel img{filter:none!important;transform:none!important}
  .panel-precio,.panel-meta{opacity:1!important;transform:none!important}
}