/* ═══════════════════════════════════════════════════════════
   Terrano Propiedades — hoja de estilos
   Proyecto conceptual diseñado y construido por Markxs
   ═══════════════════════════════════════════════════════════ */

:root{
  --navy:#101C2B; --navy-2:#1B2C40; --navy-3:#2A3E56;
  --brass:#C9A24A; --brass-l:#E4CE96; --brass-d:#8A6D22;
  --paper:#F5F5F3; --white:#FFFFFF;
  --ink:#141A21; --soft:#5A6673; --line:#DEDDD8;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --wrap:76rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{text-wrap:balance}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.2rem,5vw,2.6rem)}
.saltar{position:absolute;left:-999px;top:0;background:var(--brass);color:var(--navy);padding:.7rem 1.1rem;z-index:99}
.saltar:focus{left:.5rem;top:.5rem}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

.demo-bar{background:var(--navy);color:#A9B8C8;font-size:.78rem;padding:.6rem 0;border-bottom:1px solid #ffffff14}
.demo-bar .wrap{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center;justify-content:center;text-align:center}
.demo-bar b{color:var(--brass-l)}
.demo-bar a{color:#fff;text-underline-offset:3px}

/* ── cabecera ───────────────────────────────────────────── */
.top{background:var(--navy);color:#fff;position:sticky;top:0;z-index:40}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:80px}
.logo{text-decoration:none;color:#fff;display:flex;align-items:baseline;gap:.55rem;z-index:2}
.logo b{font-family:var(--serif);font-weight:600;font-size:1.6rem}
.logo i{font-style:normal;font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--brass)}
.menu{display:flex;align-items:center;gap:1.8rem;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.menu a{color:#C3CEDB;text-decoration:none;transition:color .3s}
.menu a:hover{color:var(--brass-l)}
.menu a[aria-current="page"]{color:var(--brass-l);border-bottom:1px solid var(--brass);padding-bottom:.2rem}
.cta{border:1px solid var(--brass);color:var(--brass-l)!important;padding:.62rem 1.25rem;transition:background-color .3s,color .3s}
.cta:hover{background:var(--brass);color:var(--navy)!important}
.cta[aria-current="page"]{border-bottom:1px solid var(--brass)}
.burger{display:none;width:46px;height:46px;border:1px solid #ffffff30;background:transparent;cursor:pointer;position:relative;z-index:2}
.burger span{position:absolute;left:13px;width:20px;height:1.5px;background:#fff;transition:transform .35s var(--ease)}
.burger span:nth-child(1){top:18px}
.burger span:nth-child(2){bottom:18px}
.top.open .burger span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.top.open .burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
@media(max-width:920px){
  .burger{display:block}
  .menu{position:fixed;inset:0 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--navy);padding:98px 1.6rem 1.8rem;
    transform:translateY(-102%);transition:transform .45s var(--ease);z-index:1}
  .menu a:not(.cta){padding:1rem 0;border-bottom:1px solid #ffffff1a;font-size:.95rem}
  .menu .cta{margin-top:1.1rem;text-align:center}
  .top.open .menu{transform:none}
}

/* ── portada ────────────────────────────────────────────── */
.portada{position:relative;color:#fff;overflow:hidden;background:var(--navy);
  min-height:min(80vh,620px);display:flex;align-items:center}
.portada img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portada::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,18,28,.92) 0%,rgba(10,18,28,.74) 48%,rgba(10,18,28,.34) 100%)}
.portada .wrap{position:relative;z-index:2;padding-block:clamp(3rem,9vw,5rem)}
.k{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--brass);margin:0 0 1.4rem}
.portada h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,7vw,4.8rem);
  line-height:1.02;margin:0 0 1.2rem;max-width:17ch}
.portada h1 i{font-style:italic;color:var(--brass-l)}
.portada>.wrap>p{max-width:46ch;color:#C6D2DE;margin:0 0 2.2rem}

.cabecera{position:relative;color:#fff;overflow:hidden;background:var(--navy)}
.cabecera img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4}
.cabecera::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,18,28,.7),rgba(10,18,28,.92))}
.cabecera .wrap{position:relative;z-index:2;padding-block:clamp(2.8rem,7vw,4.2rem)}
.cabecera h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,5.6vw,3.6rem);line-height:1.04;margin:0 0 .7rem}
.cabecera h1 i{font-style:italic;color:var(--brass-l)}
.cabecera p{margin:0;color:#B9C6D4;max-width:48ch}
.miga{font-size:.82rem;color:#8FA1B4;margin:0 0 1.2rem;letter-spacing:.04em}
.miga a{text-decoration:none;border-bottom:1px solid #ffffff33}
.miga span{padding-inline:.45rem;color:#6C7F94}

/* ── buscador ───────────────────────────────────────────── */
.buscador{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:#ffffff26;border:1px solid #ffffff26;max-width:54rem}
.campo-b{background:var(--navy-2);padding:.9rem 1.1rem}
.campo-b span{display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#8FA1B4;margin-bottom:.25rem}
.campo-b b{font-weight:500;font-size:.98rem}
.buscar{background:var(--brass);color:var(--navy);display:grid;place-items:center;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.82rem;padding:.9rem;text-decoration:none}

/* ── secciones ──────────────────────────────────────────── */
.sec{padding-block:clamp(3.5rem,9vw,5.5rem)}
.sec-blanca{background:var(--white)}
.sec-oscura{background:var(--navy);color:#fff}
.sec-head{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;justify-content:space-between;
  margin-bottom:2rem;border-bottom:1px solid var(--line);padding-bottom:1.4rem}
.sec-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,5vw,2.9rem);line-height:1.06;margin:0}
.sec-head h2 i{font-style:italic;color:var(--brass-d)}
.sec-head p{margin:0;color:var(--soft);font-size:.94rem}
.sec-oscura .sec-head{border-color:#ffffff2e}
.sec-oscura .sec-head h2 i{color:var(--brass-l)}
.sec-oscura .sec-head p{color:#A9B8C8}

/* ── controles de cartera ───────────────────────────────── */
.controles{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin-bottom:2rem}
.filtros{display:flex;flex-wrap:wrap;gap:.5rem}
.filtro{border:1px solid var(--line);background:var(--white);color:var(--soft);padding:.5rem 1.05rem;
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500;font-family:var(--sans);
  cursor:pointer;transition:all .28s var(--ease)}
.filtro:hover{border-color:var(--navy-3);color:var(--ink)}
.filtro[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.orden{display:flex;align-items:center;gap:.6rem;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.orden select{font-family:var(--sans);font-size:.86rem;padding:.5rem .7rem;border:1px solid var(--line);
  background:var(--white);color:var(--ink);cursor:pointer}

/* ── fichas de propiedad ────────────────────────────────── */
.props{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.6rem}
.prop{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;
  text-decoration:none;color:inherit;transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.prop:hover{transform:translateY(-4px);box-shadow:0 26px 44px -32px rgba(16,28,43,.6)}
.prop[hidden]{display:none}
.shot{position:relative;overflow:hidden;aspect-ratio:4/3}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.prop:hover .shot img{transform:scale(1.05)}
.estado{position:absolute;left:1rem;bottom:1rem;z-index:2;background:#ffffffee;color:var(--navy);
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:.32rem .7rem}
.estado.alq{background:var(--brass);color:var(--navy)}
.prop-in{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.prop h3{font-family:var(--serif);font-weight:600;font-size:1.42rem;margin:0;line-height:1.15}
.zona{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin:0}
.precio{font-size:1.24rem;font-weight:600;font-variant-numeric:tabular-nums;margin:0;color:var(--navy)}
.precio small{font-size:.74rem;font-weight:500;color:var(--soft);letter-spacing:.04em}
.datos{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin:0;padding:.8rem 0 0;border-top:1px solid var(--line);
  list-style:none;font-size:.86rem;color:var(--soft);margin-top:auto}
.datos b{color:var(--ink);font-weight:600}
.vacio{color:var(--soft);font-style:italic;padding:2.5rem 0;text-align:center}

/* ── ficha detallada ────────────────────────────────────── */
.detalle{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,3rem);align-items:start}
@media(max-width:860px){.detalle{grid-template-columns:1fr}}
.galeria-p{display:grid;gap:.8rem}
.galeria-p .principal{aspect-ratio:16/10;object-fit:cover;width:100%}
.tiras{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.tiras img{aspect-ratio:4/3;object-fit:cover;width:100%;cursor:pointer;transition:opacity .3s}
.tiras img:hover{opacity:.82}
.ficha{background:var(--white);border:1px solid var(--line);padding:clamp(1.4rem,3vw,1.9rem);position:sticky;top:100px}
.ficha .precio{font-family:var(--serif);font-size:2.4rem;line-height:1;margin:0 0 .3rem}
.ficha .zona{margin-bottom:1.2rem}
.ficha dl{margin:0 0 1.4rem;display:grid;grid-template-columns:auto 1fr;gap:.6rem 1rem;font-size:.94rem;
  border-top:1px solid var(--line);padding-top:1.2rem}
.ficha dt{color:var(--soft)}
.ficha dd{margin:0;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--navy);color:#fff;
  text-decoration:none;padding:.9rem 1.7rem;font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;border:1px solid var(--navy);cursor:pointer;font-family:var(--sans);
  transition:transform .3s var(--ease),background-color .3s}
.btn:hover{transform:translateY(-2px)}
.btn-2{background:transparent;color:var(--navy);border-color:var(--line)}
.btn-2:hover{border-color:var(--navy)}
.btn-oro{background:var(--brass);border-color:var(--brass);color:var(--navy)}
.btn-oro:hover{background:var(--brass-l)}
.bloque{margin-top:2.4rem}
.bloque h2{font-family:var(--serif);font-weight:400;font-size:1.9rem;margin:0 0 .9rem}
.bloque p{color:var(--soft);margin:0 0 1rem}
.caracteristicas{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.7rem;list-style:none;margin:0;padding:0}
.caracteristicas li{display:flex;gap:.6rem;align-items:flex-start;font-size:.93rem;color:var(--soft)}
.caracteristicas li::before{content:"";flex:none;width:7px;height:7px;margin-top:.55rem;background:var(--brass)}

/* ── calculadora ────────────────────────────────────────── */
.calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(1.6rem,4vw,3rem);align-items:start}
.campos{display:grid;gap:1.5rem}
.campo-r label{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-size:.8rem;
  letter-spacing:.08em;text-transform:uppercase;color:#8FA1B4;margin-bottom:.7rem}
.campo-r label b{font-family:var(--sans);font-size:1.05rem;color:#fff;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:#ffffff2e}
input[type=range]::-moz-range-track{height:3px;background:#ffffff2e}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-8.5px;border-radius:50%;background:var(--brass);border:none}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:50%;background:var(--brass)}
input[type=range]:focus-visible{outline:2px solid var(--brass-l);outline-offset:6px}
.resultado{background:var(--navy-2);border:1px solid #ffffff1f;padding:clamp(1.5rem,4vw,2.2rem)}
.resultado .et{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#8FA1B4;margin:0 0 .5rem}
.cuota{font-family:var(--serif);font-size:clamp(2.6rem,7vw,3.8rem);line-height:1;color:var(--brass-l);
  margin:0 0 .3rem;font-variant-numeric:tabular-nums}
.resultado .nota{font-size:.86rem;color:#A9B8C8;margin:0 0 1.5rem}
.desglose{margin:0;display:grid;gap:.6rem;font-size:.9rem;border-top:1px solid #ffffff1f;padding-top:1.2rem}
.linea{display:flex;justify-content:space-between;gap:1rem;color:#B9C6D4}
.linea b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.aviso{font-size:.8rem;color:#7F8FA0;margin:1.4rem 0 0;line-height:1.5}

/* ── proceso y cifras ───────────────────────────────────── */
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2rem}
.paso{border-top:1px solid var(--line);padding-top:1.1rem}
.sec-oscura .paso{border-color:#ffffff2e}
.paso b{display:block;font-family:var(--serif);font-size:1.9rem;color:var(--brass);line-height:1;margin-bottom:.5rem}
.paso h3{font-size:1rem;margin:0 0 .35rem;font-weight:600}
.paso p{margin:0;font-size:.92rem;color:var(--soft)}
.sec-oscura .paso p{color:#A9B8C8}
.numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:2rem;
  border-top:1px solid var(--line);padding-top:2.4rem;margin-top:2.6rem}
.numero b{display:block;font-family:var(--serif);font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;
  color:var(--navy);font-variant-numeric:tabular-nums}
.numero span{font-size:.88rem;color:var(--soft)}

.cita{background:var(--white);border:1px solid var(--line);padding:clamp(1.8rem,5vw,3rem);display:grid;gap:1.4rem;max-width:54rem}
.cita p{font-family:var(--serif);font-size:clamp(1.3rem,3vw,1.75rem);line-height:1.35;margin:0}
.cita footer{font-size:.86rem;color:var(--soft);letter-spacing:.06em;text-transform:uppercase}

.equipo{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem}
.miembro{background:var(--white);border:1px solid var(--line);padding:1.6rem}
.miembro h3{font-family:var(--serif);font-weight:600;font-size:1.3rem;margin:0 0 .2rem}
.miembro .rol{margin:0 0 .8rem;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-d);font-weight:600}
.miembro p{margin:0;font-size:.92rem;color:var(--soft)}

/* ── cierre y pie ───────────────────────────────────────── */
.cierre{background:var(--brass);color:var(--navy)}
.cierre .wrap{padding-block:clamp(3rem,8vw,4.4rem);display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;justify-content:space-between}
.cierre h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,4.6vw,2.8rem);margin:0;max-width:20ch;line-height:1.1}
.cierre p{margin:.5rem 0 0;max-width:40ch;color:#4A3D1C}

.pie{background:#0A121C;color:#8496A8;padding-block:3rem 2rem;font-size:.88rem}
.pie-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;padding-bottom:2rem;border-bottom:1px solid #ffffff1a}
.pie h4{font-family:var(--serif);font-weight:600;font-size:1.5rem;color:#fff;margin:0 0 .8rem}
.pie h5{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#5F7488;margin:0 0 .8rem;font-weight:600}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.pie a{text-decoration:none;transition:color .3s}
.pie a:hover{color:#fff}
.pie-base{padding-top:1.4rem;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;font-size:.84rem;color:#5F7488}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .prop:hover .shot img{transform:none}
}