@font-face{
  font-family:"Archivo Variable"; font-style:normal; font-display:swap;
  font-weight:100 900; font-stretch:62% 125%;
  src:url("/fonts/archivo-variable.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
  --verde:#2D6A4F; --verde-hondo:#1F4D39; --dorado:#C9A96E; --hueso:#F8F5F0; --carbon:#1C1C1E;
  --arena:#EFE6D8;            /* tono cálido derivado del dorado, para alternar secciones */
  --fondo:var(--hueso); --alterno:var(--arena); --texto:var(--carbon); --suave:#5e5a55;
  --linea:rgba(28,28,30,.12); --superficie:#fffdf9; --acento:var(--verde);
  --radio:22px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fondo:#171816; --alterno:#201f1b; --texto:#F1EDE6; --suave:#b8b1a6;
    --linea:rgba(248,245,240,.13); --superficie:#22231f; --acento:#8CC4A6;
  }
}
:root[data-theme="dark"]{
  --fondo:#171816; --alterno:#201f1b; --texto:#F1EDE6; --suave:#b8b1a6;
  --linea:rgba(248,245,240,.13); --superficie:#22231f; --acento:#8CC4A6;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 100px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font-family:"Archivo Variable",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-stretch:100%; font-size:1.0625rem; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--acento)}
:focus-visible{outline:3px solid var(--dorado); outline-offset:3px}
.envoltura{width:min(1180px,100% - 2.5rem); margin-inline:auto}
h1,h2,h3{font-stretch:112%; font-weight:500; line-height:1.1; margin:0; letter-spacing:-.015em}
h2{font-size:clamp(1.9rem,1.25rem + 2.4vw,3.1rem)}
h3{font-size:clamp(1.35rem,1.15rem + .7vw,1.75rem)}
p{margin:0 0 1em; max-width:60ch}
em{font-style:italic; font-weight:400}

.pendiente{outline:2px dashed var(--dorado); outline-offset:2px; border-radius:6px; background:rgba(201,169,110,.16); padding:0 .3em}

/* Encabezado */
.barra{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:color-mix(in srgb,var(--fondo) 90%,transparent); backdrop-filter:saturate(1.2) blur(10px)}
.barra .envoltura{display:flex; align-items:center; gap:1.5rem; min-height:clamp(72px,6vw,92px)}
.logo img{height:clamp(50px,4.6vw,68px); width:auto}
.logo .blanco{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo .verde{display:none} :root:not([data-theme="light"]) .logo .blanco{display:block}}
:root[data-theme="dark"] .logo .verde{display:none} :root[data-theme="dark"] .logo .blanco{display:block}
.menu{display:flex; gap:1.6rem; margin-left:auto; font-size:.95rem}
.menu a{color:var(--texto); text-decoration:none; opacity:.85}
.menu a:hover{opacity:1; color:var(--acento)}
.boton{display:inline-flex; align-items:center; gap:.55em; border:0; cursor:pointer; font:inherit; font-weight:600; font-size:1rem; text-decoration:none; padding:.9em 1.45em; border-radius:999px; background:var(--verde); color:var(--hueso); transition:background .2s}
.boton:hover{background:var(--verde-hondo)}
.boton.suave{background:transparent; color:var(--texto); box-shadow:inset 0 0 0 1.5px var(--linea)}
.boton.suave:hover{box-shadow:inset 0 0 0 1.5px var(--acento); color:var(--acento)}
.boton.claro{background:var(--hueso); color:var(--verde-hondo)}
.boton.claro:hover{background:#fff}
.barra .boton{padding:.65em 1.15em; font-size:.92rem}
@media (max-width:860px){.menu{display:none} .barra .boton{margin-left:auto}}
@media (max-width:640px){
  .barra .envoltura{gap:.6rem}
  .logo img{height:clamp(38px,9vw,50px)}
  .menu-movil summary{padding:.55em .8em; font-size:.92rem}
  .barra > .envoltura > .boton{padding:.65em .9em; font-size:.86rem; white-space:nowrap}
}
@media (max-width:360px){.menu-movil summary span.texto-menu{display:none}}
.icono{width:1.25em; height:1.25em; flex:none}

/* Hero: la foto en forma de arco, como una ventana de casa */
.hero{padding:clamp(1rem,3vw,2.5rem) 0 clamp(3rem,7vw,6rem); overflow:hidden}
.hero .envoltura{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2rem,5vw,5rem); align-items:center}
.hero h1{font-size:clamp(2.1rem,1.1rem + 3.5vw,3.9rem); font-weight:450; line-height:1.03}
.hero .subrayo{font-size:clamp(1.05rem,.9rem + .6vw,1.5rem); font-weight:500; font-stretch:100%; letter-spacing:0; line-height:1.3; color:var(--acento); margin:.9em 0 0; max-width:none}
.hero .bajada{margin-top:1.4rem; font-size:clamp(1.05rem,1rem + .3vw,1.2rem); color:var(--suave); max-width:46ch}
.hero .acciones{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}
.precio{margin-top:2rem; display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap}
.precio small{font-size:.95rem; color:var(--suave)}
.precio strong{font-stretch:112%; font-weight:600; font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem)}
.collage{position:relative; padding-bottom:12%}
.arco{border-radius:999px 999px var(--radio) var(--radio); overflow:hidden; aspect-ratio:4/5}
.arco img{width:100%; height:100%; object-fit:cover}
.collage .arco{width:82%; margin-left:auto}
.collage .mini{position:absolute; left:0; bottom:0; width:44%; aspect-ratio:1; border-radius:var(--radio); overflow:hidden; border:8px solid var(--fondo)}
.collage .mini img{width:100%; height:100%; object-fit:cover}
.sello{position:absolute; right:-4%; top:14%; background:var(--verde); color:var(--hueso); width:clamp(124px,12vw,156px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; text-align:center; font-size:clamp(.74rem,.7rem + .15vw,.85rem); line-height:1.2; padding:.9rem}
.sello b{display:block; font-stretch:112%; font-size:2.1em; font-weight:500; line-height:1}
@media (max-width:860px){
  .hero .envoltura{grid-template-columns:1fr}
  .collage{order:-1; max-width:520px; margin-inline:auto; width:100%}
  .sello{right:0}
}
@media (prefers-reduced-motion:no-preference){
  .collage .arco img{animation:acercar 1.6s cubic-bezier(.2,.7,.2,1) both}
  .hero-texto{animation:aparecer 1s .15s cubic-bezier(.2,.7,.2,1) both}
  @keyframes acercar{from{transform:scale(1.08)}to{transform:scale(1)}}
  @keyframes aparecer{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

  /* Aparición al hacer scroll: las secciones entran con un fundido suave hacia
     arriba la primera vez que se ven. Solo se oculta de entrada cuando el JS
     sí corrió (clase .js en <html>, agregada de inmediato en el <head>); si el
     JS no carga, el contenido se queda visible desde siempre, nunca oculto. */
  .js .revelar{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
  .js .revelar.visible{opacity:1; transform:none}

  /* Botones: un ligero levantamiento al pasar el cursor, no solo cambio de color */
  .boton{transition:background .2s, box-shadow .2s, transform .2s}
  .boton:hover{transform:translateY(-2px)}
  a.destacado{transition:transform .25s, box-shadow .25s}
  a.destacado:hover{transform:translateY(-3px); box-shadow:0 24px 48px -24px rgba(28,28,30,.22)}
  .relacionados a{transition:transform .25s}
  .relacionados a:hover{transform:translateY(-3px)}

  /* El flotante de WhatsApp respira suave para llamar la atención sin ser molesto */
  .flotante{animation:respirar 3.2s ease-in-out infinite}
  .flotante:hover{animation-play-state:paused}
  @keyframes respirar{0%,100%{box-shadow:0 10px 28px rgba(0,0,0,.25)}50%{box-shadow:0 10px 28px rgba(0,0,0,.25),0 0 0 10px rgba(45,106,79,.12)}}
}

/* Encabezado: gana una sombra sutil apenas se deja de ver el tope de la página,
   como señal de profundidad al hacer scroll */
.barra{transition:box-shadow .25s, background-color .25s}
.barra.con-scroll{box-shadow:0 1px 0 var(--linea), 0 12px 24px -18px rgba(28,28,30,.18)}

/* FAQ: abrir/cerrar con una transición de alto, en vez del salto seco nativo de <details> */
.faq details{overflow:hidden}
.faq .panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease}
.faq .panel > div{overflow:hidden}
.faq details[open] .panel{grid-template-rows:1fr}

section{padding-block:clamp(3rem,6.5vw,5.25rem)}
.intro{max-width:720px; margin-bottom:clamp(2.5rem,5vw,4rem)}
.intro p{color:var(--suave); margin-top:1.1rem; font-size:1.1rem}
.centro{text-align:center; margin-inline:auto}
.centro p{margin-inline:auto}

/* Vida diaria: filas editoriales alternadas */
.vida{background:var(--alterno)}
.escena{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:center}
.escena + .escena{margin-top:clamp(3.5rem,8vw,6.5rem)}
.escena:nth-of-type(even) .foto{order:2}
.escena .foto{border-radius:var(--radio); overflow:hidden; aspect-ratio:5/4}
.escena:nth-of-type(odd) .foto{border-radius:var(--radio) 180px var(--radio) var(--radio)}
.escena:nth-of-type(even) .foto{border-radius:180px var(--radio) var(--radio) var(--radio)}
.escena .foto img{width:100%; height:100%; object-fit:cover}
.escena h3{margin-bottom:1rem}
.escena p{color:var(--suave); font-size:1.08rem}
.escena .dato{display:inline-block; margin-top:.4rem; font-size:.95rem; color:var(--texto); border-top:2px solid var(--dorado); padding-top:.7rem}
@media (max-width:860px){.escena{grid-template-columns:1fr} .escena:nth-of-type(even) .foto{order:0}}

/* Departamentos */
.pestanas{display:inline-flex; background:var(--alterno); border-radius:999px; padding:5px; margin-bottom:2.5rem}
.pestanas button{font:inherit; font-weight:600; border:0; background:transparent; color:var(--texto); padding:.7em 1.3em; border-radius:999px; cursor:pointer}
.pestanas button[aria-selected="true"]{background:var(--verde); color:var(--hueso)}
.modelo{display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.modelo[hidden]{display:none}
.modelo figure{margin:0; background:#fff; border-radius:var(--radio); padding:1rem; border:1px solid var(--linea)}
.modelo figcaption{font-size:.85rem; color:#5e5a55; padding:.6rem .3rem 0}
.sin-plano{display:grid; place-items:center; aspect-ratio:1235/954; text-align:center; color:#5e5a55; padding:1.5rem}
.modelo .donde{color:var(--suave); margin:.5rem 0 1.6rem}
.ficha{margin:0 0 2rem; display:grid; grid-template-columns:auto 1fr; gap:0 1.5rem}
.ficha dt,.ficha dd{padding:.75rem 0; border-bottom:1px solid var(--linea)}
.ficha dt{color:var(--suave)}
.ficha dd{margin:0; font-weight:600}
@media (max-width:860px){.modelo{grid-template-columns:1fr}}

/* Banner */
.banner{position:relative; padding:0; color:var(--hueso)}
.banner img{width:100%; height:clamp(420px,70vh,640px); object-fit:cover}
.banner::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(20,45,34,.82),rgba(20,45,34,.35) 55%,rgba(20,45,34,0))}
.banner .envoltura{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; z-index:1}
.banner h2{max-width:14ch; font-size:clamp(2rem,1.3rem + 3vw,3.6rem)}
.banner p{margin:1.2rem 0 2rem; max-width:40ch; color:rgba(248,245,240,.88); font-size:1.1rem}

/* Galería */
.galeria{display:grid; grid-template-columns:repeat(12,1fr); gap:.8rem}
.galeria button{all:unset; cursor:zoom-in; overflow:hidden; border-radius:var(--radio); display:block}
.galeria button:focus-visible{outline:3px solid var(--dorado); outline-offset:3px}
.galeria img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.galeria button:hover img{transform:scale(1.03)}
.galeria button:nth-child(1){grid-column:span 7; aspect-ratio:16/11}
.galeria button:nth-child(2){grid-column:span 5; border-radius:var(--radio) 160px var(--radio) var(--radio)}
.galeria button:nth-child(3),.galeria button:nth-child(4),.galeria button:nth-child(5){grid-column:span 4; aspect-ratio:4/3}
@media (max-width:720px){.galeria{grid-template-columns:1fr 1fr} .galeria button:nth-child(n){grid-column:span 1; aspect-ratio:1} .galeria button:nth-child(1){grid-column:span 2; aspect-ratio:16/11}}
.nota{font-size:.85rem; color:var(--suave); margin-top:1rem}
dialog{border:0; padding:0; background:transparent; max-width:min(1200px,94vw)}
dialog::backdrop{background:rgba(16,18,17,.9)}
dialog img{max-height:84vh; width:auto; border-radius:12px}
dialog form{text-align:right; margin-bottom:.5rem}
dialog .boton{padding:.5em 1em}

/* Ubicación */
.ubica{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,5vw,5rem); align-items:center}
.cerca{list-style:none; padding:0; margin:1.5rem 0 2rem; display:flex; flex-wrap:wrap; gap:.5rem}
.cerca li{background:var(--alterno); border-radius:999px; padding:.4em 1em; font-size:.95rem}
.mapa{border-radius:var(--radio); overflow:hidden; background:var(--alterno); aspect-ratio:4/3; display:grid; place-items:center; text-align:center; color:var(--suave)}
.mapa iframe{width:100%; height:100%; border:0}
.mapa p{padding:1.5rem}
@media (max-width:860px){.ubica{grid-template-columns:1fr}}

/* Pago */
.pago{background:var(--verde); color:var(--hueso); border-radius:clamp(28px,5vw,64px) clamp(28px,5vw,64px) 0 0}
.pago .envoltura{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start}
.pago .intro{margin:0}
.pago .intro p{color:rgba(248,245,240,.85)}
.pago ul{margin:0; padding:0; list-style:none; display:grid; gap:.8rem}
.pago li{background:rgba(248,245,240,.08); border-radius:16px; padding:1.1rem 1.3rem}
.pago li strong{display:block; font-stretch:112%; font-weight:500; font-size:1.1rem}
@media (max-width:860px){.pago .envoltura{grid-template-columns:1fr}}

/* Preguntas */
.faq{background:var(--verde); color:var(--hueso); padding-top:0}
.faq .envoltura{max-width:820px}
.faq h2{margin-bottom:2rem}
.faq details{border-bottom:1px solid rgba(248,245,240,.2)}
.faq summary{cursor:pointer; list-style:none; padding:1.2rem 2.5rem 1.2rem 0; position:relative; font-weight:500; font-size:1.1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:.3rem; top:.9rem; font-size:1.6rem; font-weight:300; color:var(--dorado)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:rgba(248,245,240,.82); padding-bottom:1.2rem}
.faq .pendiente{color:var(--hueso)}

/* Contacto */
.contacto .envoltura{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,5vw,5rem); align-items:center}
.contacto .arco{aspect-ratio:3/4; max-width:420px; margin-top:2rem}
.directo{margin-top:1.5rem; display:grid; gap:.4rem}
.directo a{font-weight:600; text-decoration:none; justify-self:start}
form.lead{display:grid; gap:1rem; background:var(--superficie); border-radius:var(--radio); padding:clamp(1.4rem,3.5vw,2.4rem); box-shadow:0 30px 60px -30px rgba(45,106,79,.35)}
form.lead h3{margin-bottom:.3rem}
.campo{display:grid; gap:.35rem}
.campo label{font-size:.92rem; font-weight:600}
.campo input,.campo select,.campo textarea{font:inherit; color:var(--texto); background:var(--fondo); border:1.5px solid var(--linea); border-radius:12px; padding:.8em .95em; width:100%}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--acento); outline:none; box-shadow:0 0 0 3px rgba(45,106,79,.18)}
.acepto{display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; color:var(--suave)}
.acepto input{margin-top:.3rem; accent-color:var(--verde)}
.error{color:#b3261e; font-size:.9rem; min-height:1.2em; margin:0}
/* Campo trampa contra bots: invisible para personas, los bots de formularios lo rellenan igual */
.campo-trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
form.lead .boton{justify-content:center}
@media (max-width:860px){.contacto .envoltura{grid-template-columns:1fr} .contacto .arco{display:none}}

footer{background:var(--carbon); color:rgba(248,245,240,.78); padding:3.5rem 0 calc(3.5rem + 70px); font-size:.92rem}
footer .envoltura{display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem}
footer img{height:56px; width:auto; margin-bottom:1rem}
footer a{color:var(--hueso)}
footer p{margin:.2rem 0}

.flotante{position:fixed; right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom,0px)); z-index:30; box-shadow:0 10px 28px rgba(0,0,0,.25)}
@media (max-width:720px){
  .flotante{padding:0; width:52px; height:52px; justify-content:center}
  .flotante .texto-flotante{display:none}
}

/* ===== Componentes del sitio multipágina ===== */
.menu a[aria-current="page"]{color:var(--acento); opacity:1; font-weight:600}
.menu-movil{display:none; margin-left:auto; position:relative}
.menu-movil summary{list-style:none; cursor:pointer; font-weight:600; padding:.55em 1em; border-radius:999px; box-shadow:inset 0 0 0 1.5px var(--linea)}
.menu-movil summary::-webkit-details-marker{display:none}
.menu-movil nav{position:absolute; right:0; top:calc(100% + .5rem); background:var(--superficie); border-radius:16px; padding:.6rem; min-width:230px; box-shadow:0 20px 40px -12px rgba(0,0,0,.25); display:none}
.menu-movil[open] nav{display:grid}
.menu-movil nav a{padding:.7rem .9rem; border-radius:10px; text-decoration:none; color:var(--texto)}
.menu-movil nav a:hover{background:var(--alterno)}
@media (max-width:860px){.menu-movil{display:block} .barra .boton{margin-left:0}}

.migas{font-size:.88rem; color:var(--suave); padding-top:1rem}
.migas ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem}
.migas li+li::before{content:"/"; margin-right:.4rem; opacity:.5}
.migas a{color:var(--suave)}

.cabecera .envoltura{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center}
.cabecera{padding-top:clamp(1.5rem,3vw,2.5rem)}
.cabecera h1{font-size:clamp(2rem,1.2rem + 2.7vw,3.3rem); font-weight:450; line-height:1.06}
.cabecera .bajada{margin-top:1.3rem; font-size:1.15rem; color:var(--suave)}
.cabecera .arco{aspect-ratio:4/5; max-width:480px; margin-left:auto}
.cabecera .acciones{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem}
@media (max-width:860px){.cabecera .envoltura{grid-template-columns:1fr} .cabecera .arco{order:-1; aspect-ratio:16/11; max-width:none; margin:0; border-radius:180px 180px var(--radio) var(--radio)}}

/* Resumen citable: el párrafo que un buscador o una IA puede tomar tal cual */
.resumen{background:var(--alterno); border-radius:var(--radio); padding:clamp(1.4rem,3vw,2.2rem); font-size:1.12rem; max-width:none}
.resumen p{max-width:70ch; margin:0}
.resumen p+p{margin-top:.8rem}

.texto{max-width:760px}
.texto h2{font-size:clamp(1.6rem,1.2rem + 1.5vw,2.3rem); margin:2.8rem 0 1rem}
.texto h3{margin:2rem 0 .7rem; font-size:1.3rem}
.texto p,.texto li{color:var(--suave); font-size:1.08rem}
.texto ul{padding-left:1.2rem}
.texto li{margin-bottom:.4rem}
.texto strong{color:var(--texto)}

.lugares{list-style:none; padding:0; margin:1.5rem 0 0; display:grid; grid-template-columns:repeat(2,1fr); gap:0 2.5rem}
.lugares li{padding:.95rem 0; border-bottom:1px solid var(--linea)}
.lugares b{display:block; font-weight:600}
.lugares span{color:var(--suave); font-size:.95rem}
@media (max-width:720px){.lugares{grid-template-columns:1fr}}

.pasos{list-style:none; counter-reset:paso; padding:0; margin:2rem 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem}
.pasos li{counter-increment:paso; background:var(--superficie); border-radius:var(--radio); padding:1.4rem; border:1px solid var(--linea)}
.pasos li::before{content:counter(paso); display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:50%; background:var(--verde); color:var(--hueso); font-weight:600; margin-bottom:1rem}
.pasos b{display:block; font-stretch:112%; font-weight:500; font-size:1.15rem; margin-bottom:.4rem}
.pasos span{color:var(--suave); font-size:.98rem}
@media (max-width:980px){.pasos{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pasos{grid-template-columns:1fr}}

.bloque-venta{padding-block:clamp(2rem,5vw,4rem)}
.bloque-venta .caja{background:var(--verde); color:var(--hueso); border-radius:clamp(24px,4vw,48px); padding:clamp(2rem,5vw,4rem); display:grid; grid-template-columns:1.3fr 1fr; gap:2rem; align-items:center; position:relative; overflow:hidden}
.bloque-venta h2{font-size:clamp(1.8rem,1.2rem + 2vw,2.8rem)}
.bloque-venta p{color:rgba(248,245,240,.85); margin:1rem 0 0}
.bloque-venta .acciones{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:flex-end}
.bloque-venta .boton.suave{color:var(--hueso); box-shadow:inset 0 0 0 1.5px rgba(248,245,240,.5)}
.bloque-venta .boton.suave:hover{color:var(--hueso); box-shadow:inset 0 0 0 1.5px var(--hueso)}
@media (max-width:860px){.bloque-venta .caja{grid-template-columns:1fr} .bloque-venta .acciones{justify-content:flex-start}}

.relacionados{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
.relacionados a{text-decoration:none; color:var(--texto); display:block}
.relacionados .foto{border-radius:var(--radio); overflow:hidden; aspect-ratio:4/3; margin-bottom:.9rem}
.relacionados img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.relacionados a:hover img{transform:scale(1.03)}
.relacionados b{font-stretch:112%; font-weight:500; font-size:1.2rem; display:block}
.relacionados span{color:var(--suave); font-size:.95rem}
@media (max-width:860px){.relacionados{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.relacionados{grid-template-columns:1fr}}

/* Modelo destacado en inicio — un solo departamento, imagen + info lado a lado */
.destacado{display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
  background:var(--superficie); border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden}
.destacado .foto{aspect-ratio:5/4; overflow:hidden}
.destacado .foto img{width:100%; height:100%; object-fit:cover}
.destacado .info{padding:clamp(1.5rem,3vw,2.5rem) clamp(1.5rem,3vw,2.5rem) clamp(1.5rem,3vw,2.5rem) 0}
.destacado .donde{color:var(--suave); margin:.4rem 0 1.2rem}
.destacado .rasgos{display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0; margin:0 0 1.4rem}
.destacado .rasgos li{background:var(--alterno); border-radius:999px; padding:.35em .95em; font-size:.95rem}
.destacado .precio-linea{font-stretch:112%; font-weight:600; font-size:1.25rem; margin:0 0 1.4rem}
.destacado .precio-linea small{display:block; font-stretch:100%; font-weight:400; font-size:.85rem; color:var(--suave)}
@media (max-width:760px){.destacado{grid-template-columns:1fr} .destacado .foto{aspect-ratio:16/10} .destacado .info{padding:1.5rem}}

.aviso{max-width:none; background:rgba(201,169,110,.18); border:2px dashed var(--dorado); border-radius:16px; padding:1rem 1.2rem; font-size:.95rem; margin-bottom:2rem}
.mas{margin-top:1.6rem}
.mas a{color:var(--dorado); font-weight:600}
.faq .mas a{color:var(--dorado)}
.pie-enlaces{display:grid; gap:.3rem}
.pie-enlaces a{text-decoration:none}
.pie-enlaces a:hover{text-decoration:underline}
footer .col h4{font-stretch:112%; font-weight:500; color:var(--hueso); margin:0 0 .8rem; font-size:1rem}

/* Encabezado mínimo para la landing de anuncios */
.barra.minima .envoltura{justify-content:space-between}
.faq-claro details{border-bottom-color:var(--linea)}
.faq-claro details:first-of-type{border-top:0}
.faq-claro h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem); margin-bottom:1rem}
.faq-claro details p{color:var(--suave)}
.faq-claro summary::after{color:var(--acento)}
.faq-claro .pendiente{color:var(--texto)}
.directo span{color:var(--suave)}

/* ===== Preventa ===== */
/* Aviso "Imagen ilustrativa": solo en las fotos grandes y protagonistas.
   Las miniaturas (escenas, relacionados, tarjetas de modelo) quedan cubiertas
   por el aviso general del pie de página y el de la sección de galería. */
.arco,.galeria button{position:relative}
.arco::after,.galeria button::after,.marca-ilus{
  content:"Imagen ilustrativa"; position:absolute; left:.8rem; bottom:.8rem; z-index:2; pointer-events:none;
  font-size:.7rem; font-weight:500; letter-spacing:.01em; color:#fff;
  background:rgba(20,24,22,.55); backdrop-filter:blur(4px); padding:.28em .75em; border-radius:999px;
}
.collage .arco::after{left:auto; right:.9rem}
.banner .marca-ilus{left:auto; right:1.2rem; bottom:1.2rem}
.cabecera .arco::after{left:auto; right:.9rem}
/* Insignia de preventa */
.insignia{position:absolute; left:0; top:6%; z-index:3; background:var(--dorado); color:var(--carbon); font-weight:750; font-stretch:115%;
  padding:.6em 1.5em; border-radius:999px; box-shadow:0 14px 30px -10px rgba(0,0,0,.4); font-size:clamp(1.15rem,.85rem + 1vw,1.7rem); letter-spacing:.01em}
.cabecera .insignia-linea{display:inline-block; background:var(--dorado); color:var(--carbon); font-weight:750; font-stretch:115%; font-size:clamp(1rem,.85rem + .5vw,1.25rem); padding:.45em 1.2em; border-radius:999px; margin-bottom:1rem}
/* Avance de obra */
/* Proyectos concluidos: confianza en preventa — "no hay fotos de esta obra,
   pero ya entregamos otras" */
.entregas{display:grid; grid-template-columns:1fr 1fr; gap:1rem; max-width:640px; margin-inline:auto}
.entrega{background:var(--superficie); border:1px solid var(--linea); border-radius:var(--radio); padding:1.8rem 1.4rem; text-align:center}
.entrega b{display:block; font-stretch:112%; font-weight:600; font-size:1.5rem; color:var(--verde); margin-bottom:.35rem}
.entrega span{color:var(--suave); font-size:.95rem}
@media (max-width:560px){.entregas{grid-template-columns:1fr}}

/* Bloque "obra por iniciar": vende el momento de compra, no una foto que no existe */
.etapa{background:var(--alterno); padding-block:clamp(3rem,7vw,5.5rem)}
.etapa-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:center}
.etapa-foto{border-radius:var(--radio); overflow:hidden; aspect-ratio:5/4}
.etapa-foto img{width:100%; height:100%; object-fit:cover}
.etapa-marca{display:inline-block; background:var(--dorado); color:var(--carbon); font-weight:700; font-size:.85rem; padding:.35em .9em; border-radius:999px; margin-bottom:1rem}
.etapa-texto h2{margin-bottom:1rem}
.etapa-texto p{color:var(--suave); font-size:1.08rem}
.etapa-texto .boton{margin-top:.5rem}
@media (max-width:860px){.etapa-grid{grid-template-columns:1fr} .etapa-foto{order:-1; aspect-ratio:16/10}}

.faq summary h3{display:inline; font:inherit; font-stretch:normal; letter-spacing:0; margin:0}

.galeria button:nth-child(n+6){grid-column:span 4; aspect-ratio:4/3}
@media (max-width:720px){.galeria button:nth-child(n+6){grid-column:span 1; aspect-ratio:1} .galeria button:nth-child(8){grid-column:span 2; aspect-ratio:16/11}}

/* Tarjetas de datos (medidas, precio, tipos de crédito) */
.medidas{display:grid; grid-template-columns:1fr 1.2fr; gap:1.25rem; align-items:stretch}
.medida-col{display:grid; gap:1.25rem; grid-template-rows:1fr 1fr}
.tarj{background:var(--superficie); border:1px solid var(--linea); border-radius:var(--radio); padding:clamp(1.4rem,3vw,2rem)}
.tarj h3{font-size:clamp(1.15rem,1rem + .5vw,1.4rem); margin-bottom:.5rem}
.tarj p{color:var(--suave); font-size:1.02rem}
.ey{display:block; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--acento,#8a6d2f); margin-bottom:.7rem}
.precio-tarj{background:var(--verde); color:var(--hueso); border-radius:var(--radio); padding:clamp(1.6rem,3.5vw,2.6rem); display:flex; flex-direction:column; justify-content:center}
.precio-tarj h2{font-size:clamp(1.5rem,1.15rem + 1.3vw,2.1rem); margin-bottom:1.6rem}
.precio-tarj ul{list-style:none; padding:0; margin:0 0 1.5rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.precio-tarj li{border-top:1px solid rgba(248,245,240,.3); padding-top:.8rem; font-size:.95rem; color:rgba(248,245,240,.85)}
.precio-tarj li b{display:block; font-stretch:112%; font-weight:500; font-size:clamp(1.15rem,1rem + .6vw,1.5rem); color:var(--hueso); margin-bottom:.15rem}
.precio-tarj p{color:rgba(248,245,240,.85)}
.precio-tarj a{color:var(--dorado)}
.tarjetas{display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; margin-top:1.5rem}
.tarjetas .tarj:last-child{grid-column:1/-1}
@media (max-width:860px){.medidas{grid-template-columns:1fr} .medida-col{grid-template-rows:auto}}
@media (max-width:640px){.precio-tarj ul{grid-template-columns:1fr} .tarjetas{grid-template-columns:1fr}}

.ubica h2{margin-bottom:1.2rem}
.ubica .texto h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem); margin:0 0 1rem}
.pasos-guia .tarj h2{font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem); margin-bottom:.7rem}
.pasos-guia .tarj:last-child{grid-column:auto}
.pasos-guia .tarj p a{color:var(--acento)}

/* ===== Sistema tipográfico único (una sola escala para todo el sitio) =====
   Títulos: H1 página · H2 sección · H3 tarjeta/subtema.
   Texto: lead (introducciones) · cuerpo · pequeño. Cambiar aquí cambia todo el sitio. */
:root{
  --t-h1:clamp(2rem,1.25rem + 2.8vw,3.4rem);
  --t-h2:clamp(1.7rem,1.3rem + 1.6vw,2.4rem);
  --t-h3:clamp(1.2rem,1.08rem + .5vw,1.45rem);
  --t-lead:1.15rem; --t-cuerpo:1.0625rem; --t-small:.92rem;
}
main h1,.hero h1,.cabecera h1{font-size:var(--t-h1); font-weight:450; line-height:1.06}
h2,.texto h2,.ubica .texto h2,.banner h2,.bloque-venta h2,.faq-claro h2,.precio-tarj h2,.pago h2,.contacto h2{font-size:var(--t-h2)}
h3,.texto h3,.escena h3,.tarj h3,.tarj h2,.pasos-guia .tarj h2,form.lead h3{font-size:var(--t-h3)}
.pasos b,.entrega b,.pago li strong{font-size:var(--t-h3)}
.texto p,.texto li,.escena p,.tarj p,.faq details p{font-size:var(--t-cuerpo)}
.intro p,.banner p,.hero .bajada,.cabecera .bajada,.resumen{font-size:var(--t-lead)}
.nota,.lugares span,.entrega span,.escena .dato,.pasos span{font-size:var(--t-small)}
.intro{margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}
.escena + .escena{margin-top:clamp(2.5rem,6vw,4.5rem)}
.faq h2{margin-bottom:1.2rem}

footer .creditos{flex:0 0 100%; width:100%; max-width:none; margin:1rem 0 0; padding-top:1.2rem; border-top:1px solid rgba(248,245,240,.15); text-align:center; font-size:var(--t-small)}