/* ===========================================================================
   El armazón del sitio: lo que comparten TODAS las páginas.

   La base tipográfica, la barra superior, el encabezado con su menú, el pie y
   el botón de WhatsApp. Lo cargan tanto index.html como las páginas que arma
   el servidor —las de comuna y las fichas de propiedad—, para que no puedan
   verse distintas.

   Antes esto vivía dentro de index.html y las páginas generadas lo copiaban.
   Dos copias del mismo diseño siempre terminan separándose: se ajusta el
   encabezado en una y la otra queda con el de antes.

   Lo específico de la portada —hero, buscador, tarjetas, secciones— sigue
   dentro de index.html, porque no lo usa nadie más.
   =========================================================================== */


@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/marcellus-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;
  src:url('/fonts/jost-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/jost-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/jost-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/jost-latin-600-normal.woff2') format('woff2')}
:root{
  --marino:#0E3A4F; --marino-2:#14506B; --arena:#E6D9C3; --arena-pal:#F5EFE4;
  --cobre:#B5714B; --blanco:#fff; --tinta:#12232C;
  --serif:'Marcellus',Georgia,serif; --sans:'Jost',system-ui,sans-serif;
  --max:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-color:var(--marino) var(--arena);scrollbar-width:thin}
::-webkit-scrollbar{width:13px;height:13px}
::-webkit-scrollbar-track{background:var(--arena)}
::-webkit-scrollbar-thumb{background:var(--marino);border-radius:99px;border:3px solid var(--arena)}
::-webkit-scrollbar-thumb:hover{background:var(--cobre)}
::selection{background:var(--marino);color:#fff}
body{font-family:var(--sans);font-weight:300;color:var(--tinta);background:var(--arena-pal);
     line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.15;letter-spacing:.01em}
.eyebrow{font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--cobre);font-weight:500}
.btn{display:inline-flex;align-items:center;gap:.6em;font-size:.8rem;letter-spacing:.16em;
     text-transform:uppercase;font-weight:500;padding:14px 28px;border:1px solid var(--marino);
     background:var(--marino);color:#fff;cursor:pointer;transition:.25s;font-family:var(--sans)}
.btn:hover{background:transparent;color:var(--marino)}
.btn.ghost{background:transparent;color:var(--marino)}
.btn.ghost:hover{background:var(--marino);color:#fff}
.btn.light{background:#fff;border-color:#fff;color:var(--marino)}
.btn.light:hover{background:transparent;color:#fff}

/* ---------- topbar ---------- */
.topbar{background:var(--marino);color:rgba(255,255,255,.82);font-size:.76rem;letter-spacing:.06em}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:40px}
.topbar a:hover{color:#fff}
/* Arranca oculta y aparece recién con valores reales, para que nunca se vea
   un guión ni una cifra vieja. */
.topbar .indicadores{display:flex;align-items:center;gap:6px;min-width:0}
/* El clima: no compite con la UF, que es el dato duro. Va en el mismo tono
   apagado y solo el número en blanco. */
.topbar .clima{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  color:rgba(255,255,255,.6);white-space:nowrap;padding:3px 0}
.topbar .clima:hover{color:#fff}
.topbar .clima svg{width:15px;height:15px;flex:none;opacity:.9}
.topbar .clima b{font-weight:500;color:#fff}
.topbar .clima .lugar{opacity:.75}
/* El cambio de comuna se desvanece en vez de saltar: un texto que aparece de
   golpe en la esquina distrae de lo que uno está mirando. */
.topbar .clima.cambiando{opacity:0;transition:opacity .3s}
.topbar .clima{transition:opacity .3s}
@media(prefers-reduced-motion:reduce){.topbar .clima{transition:none}}
.topbar .divisas{visibility:hidden}
.topbar .divisas span{margin-left:18px;color:rgba(255,255,255,.6)}
.topbar .divisas b{font-weight:500;color:#fff}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(245,239,228,.92);
       backdrop-filter:blur(10px);border-bottom:1px solid rgba(14,58,79,.12)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:96px;gap:24px}
/* 58px dejaba la palabra PROPIEDADES en 2,8 pixeles de alto: a ese tamano
   las letras no llegan a dibujarse. Con el logo corregido y 66px de alto
   quedan en 5,4, que ya se lee. */
/* Vale para el logo incrustado de la portada y para el que las páginas
   generadas cargan como archivo: los dos tienen que medir lo mismo. */
.logo svg,.logo img{height:66px;width:auto;display:block}
.logo{display:block;line-height:0}
nav ul{display:flex;gap:34px;list-style:none;align-items:center}
nav a{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:400;
      position:relative;padding:6px 0;color:var(--marino)}
nav a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;
             background:var(--cobre);transition:width .3s}
nav a:hover::after{width:100%}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:24px;height:1.5px;background:var(--marino);margin:5px 0;transition:.3s}

/* ---------- menú desplegable de comunas ----------
   Se abre al pasar el mouse Y al recibir el foco con el teclado: solo con
   :hover, quien navega con tabulador nunca lo ve. En pantalla chica el
   despliegue se anula y las comunas quedan como una lista más, porque un
   menú que se abre al pasar el dedo no existe en un teléfono. */
.con-menu{position:relative}
.con-menu > a{display:inline-flex;align-items:center;gap:5px}
.con-menu > a svg{width:13px;height:13px;transition:transform .2s}
.con-menu:hover > a svg,.con-menu:focus-within > a svg{transform:rotate(180deg)}
.submenu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  /* display:block a la fuerza: `nav ul` le pone flex con 34px de separación a
     todas las listas del menú, y sin esto el desplegable salía horizontal y
     de 875px de ancho. */
  display:block;width:max-content;
  background:#fff;border:1px solid var(--borde);min-width:210px;padding:8px 0;
  list-style:none;box-shadow:0 12px 34px rgba(14,58,79,.14);
  /* La transición NO incluye visibility: al transicionarla, el cambio a
     visible se aplica recién al final y el menú tarda en aparecer. Se anima
     lo que se ve —opacidad y posición— y la visibilidad cambia de golpe. */
  opacity:0;visibility:hidden;transition:opacity .18s, transform .18s;z-index:60}
.con-menu:hover .submenu,.con-menu:focus-within .submenu{opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0)}
.submenu li{margin:0}
.submenu a{display:block;padding:9px 20px;font-size:.86rem;letter-spacing:.04em;
  text-transform:none;white-space:nowrap;color:var(--tinta)}
.submenu a:hover{background:var(--arena-pal);color:var(--marino)}
.submenu .separa{border-top:1px solid var(--borde);margin-top:6px;padding-top:6px}
.submenu .separa a{font-size:.8rem;color:var(--cobre)}

/* ---------- footer ---------- */
footer{background:var(--marino);color:rgba(255,255,255,.72);padding:72px 0 0}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:52px}
/* El pie usa el logo vertical, donde la palabra PROPIEDADES ocupa una
   fracción menor del alto total. A 96px quedaba en 3,9 pixeles; con 120 llega
   a 4,9, que es lo mismo que se ve en el encabezado. */
footer .logo svg{height:120px}
footer h4{font-family:var(--serif);font-weight:400;color:#fff;font-size:1.02rem;margin-bottom:18px}
footer ul{list-style:none;display:grid;gap:10px;font-size:.88rem}
footer a:hover{color:#fff}
footer p{font-size:.88rem}
.redes{display:flex;gap:12px;margin-top:18px}
.redes a{width:38px;height:38px;border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;transition:.25s}
.redes a:hover{background:#fff;color:var(--marino);border-color:#fff}
.redes svg{width:16px;height:16px}
.legal{border-top:1px solid rgba(255,255,255,.15);padding:22px 0;display:flex;
       justify-content:space-between;gap:16px;font-size:.78rem;flex-wrap:wrap;color:rgba(255,255,255,.55)}

/* ---------- whatsapp ---------- */
/* Anclado a la derecha y en row-reverse: así el ícono queda fijo en la esquina
   y el texto se despliega hacia adentro, no hacia fuera de la pantalla. */
.wa{position:fixed;right:24px;bottom:24px;z-index:90;display:flex;flex-direction:row-reverse;
    align-items:center;gap:0;
    background:var(--marino);color:#fff;border-radius:999px;padding:0;box-shadow:0 14px 34px -10px rgba(14,58,79,.6);
    transition:.35s cubic-bezier(.4,0,.2,1);overflow:hidden;border:1px solid rgba(255,255,255,.18)}
.wa .ico{width:58px;height:58px;display:grid;place-items:center;flex:none}
.wa svg{width:27px;height:27px}
.wa .txt{max-width:0;white-space:nowrap;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
         opacity:0;transition:.35s;overflow:hidden}
.wa:hover{background:var(--cobre)}
.wa:hover .txt{max-width:180px;opacity:1;padding-left:24px}
.wa .ico::before{content:'';position:absolute;inset:0;border-radius:50%;
  border:1.5px solid var(--marino);animation:pulso 2.8s infinite}
.wa .ico{position:relative}
@keyframes pulso{0%{transform:scale(1);opacity:.6}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}



/* ---------- el armazón en pantallas chicas ----------
   Va acá y no en index.html porque describe el mismo encabezado, el mismo
   menú y el mismo pie que usan todas las páginas. */
@media(max-width:980px){
  /* En el menú de teléfono el desplegable se anula: se abre al pasar el dedo,
     cosa que no existe ahí. Las comunas quedan como una lista más.

     Los tres selectores van juntos a propósito. El de abrir el desplegable
     —`.con-menu:focus-within .submenu`— pesa más que un `.submenu` suelto, así
     que ganaba aunque esté escrito antes, y al tocar una comuna le devolvía el
     `translateX(-50%)` del diseño de escritorio: la lista se corría media
     pantalla hacia la izquierda y desaparecía. Acá los tres casos dicen lo
     mismo, y ninguno puede pisar al otro. */
  .submenu,
  .con-menu:hover .submenu,
  .con-menu:focus-within .submenu{
    position:static;transform:none;opacity:1;visibility:visible;border:0;
    box-shadow:none;padding:0 0 0 16px;min-width:0;width:auto;background:transparent}
  .con-menu > a svg{display:none}
  .submenu a{padding:7px 0;white-space:normal}
  .f-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  /* En un teléfono la barra no alcanza para todo. Se elige qué queda:

     el clima  — es lo que le dice a alguien de Santiago cómo está el litoral
                 hoy, y es la razón por la que está en la barra;
     la UF     — el dato duro con el que se leen los precios.

     Se van el correo y el teléfono, que están en el menú, en el pie y en el
     botón de WhatsApp; y el dólar, que en un aviso de propiedad no se usa.
     Antes se iba el clima, que era quedarse justo con lo que no se ve en
     ninguna otra parte. */
  .topbar .contacto{display:none}
  .topbar .divisas span:last-child{display:none}
  .topbar .wrap{gap:10px}
  /* Con el correo fuera, el grupo de indicadores es lo unico que queda en la
     barra: ocupa el ancho entero y reparte, el clima a la izquierda y la UF a
     la derecha. Sin esto los dos quedaban apretados contra el borde izquierdo
     con la mitad de la barra vacia. */
  .topbar .indicadores{flex:1;justify-content:space-between}
  .topbar .divisas span{margin-left:0}

  /* El menú cuelga de la cabecera, no de una medida fija: la cabecera es
     sticky y cambia de alto al bajar (la barra superior se va), así que
     cualquier número escrito a mano deja un hueco. */
  nav{position:absolute;top:100%;left:0;right:0;background:var(--arena-pal);display:none;
      border-bottom:1px solid rgba(14,58,79,.15);padding:22px 24px;
      box-shadow:0 18px 30px -18px rgba(14,58,79,.45)}
  nav.open{display:block}
  /* Seis enlaces más las cinco comunas no caben en una pantalla chica ni en un
     teléfono acostado. El menú se desplaza dentro de sí mismo en vez de
     empujar la página. */
  nav{max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain}
  nav ul{flex-direction:column;gap:20px;align-items:flex-start;width:100%}
  nav li{width:100%}
  /* Un dedo necesita más blanco que un puntero para no errarle al enlace de
     al lado. */
  nav > ul > li > a{display:block;padding:10px 0}
  .burger{display:block}
  /* La cruz avisa que el mismo botón cierra. */
  .burger span{transform-origin:center;transition:transform .25s,opacity .2s}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  header .wrap{height:76px}
  .logo svg,.logo img{height:50px}
  .f-grid{grid-template-columns:1fr}
  .wa .ico{width:52px;height:52px}
}

/* Se midió: con el nombre más largo —Santo Domingo— el clima ocupa 132 px y
   la UF 86. En la pantalla más angosta que se usa hoy, 320, sobran 54. Así
   que el nombre se queda: escondía el dato justamente en los teléfonos donde
   más se agradece saber qué comuna es. */
@media(max-width:340px){
  .topbar{font-size:.72rem}
}

/* ---------- el mapa ----------
   Lo usan la portada, las páginas de comuna y las fichas. Los estilos van acá
   por lo mismo que el resto del armazón: para que el mapa se vea igual en las
   tres. Leaflet trae su propia hoja (assets/leaflet/leaflet.css) y se carga
   sola cuando el mapa asoma en pantalla; esto es solo lo de la marca. */
.mapa{width:100%;height:clamp(320px,52vh,520px);background:var(--arena);
      border:1px solid var(--borde);position:relative;z-index:1}
.mapa.cargando::after{content:'Cargando el mapa…';position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(18,35,44,.45)}
/* Leaflet pinta su fondo gris; con el color de la arena el mapa no parece un
   agujero mientras cargan los mosaicos. */
.mapa .leaflet-container{background:var(--arena);font-family:var(--sans)}
.mapa .leaflet-control-attribution{background:rgba(255,255,255,.82);font-size:.66rem}

/* El pin es un SVG, no una imagen: toma los colores de la marca y no se ve
   pixelado en pantallas densas. */
.dc-pin{background:none;border:0;filter:drop-shadow(0 3px 5px rgba(14,58,79,.35))}

.mapa .leaflet-popup-content-wrapper{border-radius:0;box-shadow:0 14px 38px rgba(14,58,79,.22);
  background:#fff;padding:0}
.mapa .leaflet-popup-content{margin:0;width:auto!important;line-height:1.5}
.mapa .leaflet-popup-tip{background:#fff}
.dc-globo img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--arena)}
.dc-globo-txt{display:flex;flex-direction:column;gap:3px;padding:13px 15px 15px}
.dc-op{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cobre)}
a.dc-tit{font-family:var(--serif);font-size:1rem;color:var(--marino);line-height:1.28}
a.dc-tit:hover{color:var(--cobre)}
.dc-lugar{font-size:.8rem;color:rgba(18,35,44,.58)}
.dc-precio{font-family:var(--serif);font-size:1.15rem;color:var(--cobre);margin-top:4px}
.dc-pesos{font-size:.76rem;color:rgba(18,35,44,.52)}
/* El pin cae en la cuadra, no en la casa: la coordenada que sale de la base
   viene redondeada a unos 100 metros. Conviene que quien mira lo sepa. */
.dc-aprox{font-size:.66rem;letter-spacing:.06em;color:rgba(18,35,44,.45);margin-top:5px}
a.dc-ir{margin-top:9px;display:inline-block;align-self:flex-start;
  border:1px solid var(--borde);padding:7px 14px;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--marino);transition:.2s}
a.dc-ir:hover{background:var(--marino);color:#fff;border-color:var(--marino)}

/* ---------- el visor de fotos ----------
   Se abre al pinchar una foto de la ficha. Los estilos van acá, junto al
   resto de lo compartido, para que el día que otra página tenga galería no
   haya que copiarlos. */
.visor{position:fixed;inset:0;z-index:200;background:rgba(10,26,35,.94);
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:16px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.visor[hidden]{display:none}
.visor-centro{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;position:relative}
.visor img{max-width:100%;max-height:calc(100% - 40px);object-fit:contain;
  opacity:1;transition:opacity .18s}
.visor.cargando img{opacity:0}
.visor-cuenta{color:rgba(255,255,255,.72);font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;flex:none}

/* La ruedita solo aparece mientras la foto viaja. */
.visor-girando{position:absolute;width:34px;height:34px;border-radius:50%;
  border:2px solid rgba(255,255,255,.25);border-top-color:var(--arena);
  opacity:0;transition:opacity .18s}
.visor.cargando .visor-girando{opacity:1;animation:visor-gira .8s linear infinite}
@keyframes visor-gira{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .visor img{transition:none}
  .visor.cargando .visor-girando{animation:none}
}

.visor button{background:none;border:0;cursor:pointer;color:#fff;padding:0;
  display:flex;align-items:center;justify-content:center;transition:.2s}
.visor-flecha{flex:none;width:52px;height:74px;border-radius:3px;
  background:rgba(255,255,255,.08)}
.visor-flecha:hover{background:rgba(255,255,255,.2)}
.visor-flecha svg{width:26px;height:26px}
.visor-cerrar{position:absolute;top:14px;right:16px;width:44px;height:44px;
  border-radius:50%;background:rgba(255,255,255,.1);z-index:2}
.visor-cerrar:hover{background:rgba(255,255,255,.24)}
.visor-cerrar svg{width:20px;height:20px}
.visor button:focus-visible{outline:2px solid var(--arena);outline-offset:2px}

/* En un teléfono las flechas se van abajo: a los lados no queda ancho para la
   foto, y ahí es donde alcanza el pulgar. */
@media(max-width:640px){
  .visor{flex-wrap:wrap;padding:10px;align-content:center}
  .visor-centro{order:1;flex-basis:100%;height:auto;max-height:78vh}
  .visor-flecha{order:2;width:44%;height:56px}
  .visor-flecha.atras{margin-right:auto}
}

/* La cuadrícula de la ficha: cada foto es un botón, para poder llegar con el
   tabulador y abrirla con Enter. */
.galeria button.foto{padding:0;border:0;background:none;display:block;
  width:100%;cursor:zoom-in;overflow:hidden}
.galeria button.foto:focus-visible{outline:2px solid var(--cobre);outline-offset:3px}
.galeria button.foto img{transition:transform .5s}
.galeria button.foto:hover img{transform:scale(1.04)}