/* fuentes autoalojadas (variables, subconjunto latino) */
@font-face{
  font-family:"Cormorant Garamond"; font-style:normal; font-weight:300 700; font-display:swap;
  src:url("fonts/cormorant-garamond-latin.woff2") format("woff2");
  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;
}
@font-face{
  font-family:"Figtree"; font-style:normal; font-weight:300 900; font-display:swap;
  src:url("fonts/figtree-latin.woff2") format("woff2");
  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;
}
@font-face{
  font-family:"Cormorant Garamond"; font-style:italic; font-weight:300 700; font-display:swap;
  src:url("fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  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;
}

picture{display:contents}
:root{
  --bg:#F7F4EC; --surface:#FFFFFF; --ink:#1C2226; --muted:#5C666E;
  --azul:#12545E; --azul-2:#0E3F47; --oro:#B0842F; --oro-soft:#E9DFC7;
  --line:rgba(18,84,94,.16); --shadow:0 24px 60px -30px rgba(14,63,71,.45);
  --maxw:1120px; --r:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Figtree",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
/* grano de papel sutil (solo dispositivos con ratón: el blending fijo
   dispara el watchdog de memoria de Safari iOS y recarga la página) */
@media (hover:hover){
  body::after{content:""; position:fixed; inset:0; z-index:35; pointer-events:none; opacity:.045; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif; font-weight:600; line-height:1.08; margin:0; letter-spacing:.2px}
h1 em,h2 em{font-style:italic; color:var(--oro)}
.hero h1 em{color:#F0D48A}
.loc h2 em,.contact h2 em{color:var(--oro-soft)}
::selection{background:var(--oro-soft); color:var(--ink)}
p{margin:0 0 1rem}
a{color:var(--azul); text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.eyebrow{font-family:"Figtree"; font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--oro); margin:0 0 .9rem}
.eyebrow::before{content:""; display:inline-block; width:7px; height:7px; margin:0 .6rem 1px 0;
  background:currentColor; transform:rotate(45deg); opacity:.9}
.lead{font-size:1.14rem; color:var(--muted); max-width:60ch}
:focus-visible{outline:2px solid var(--azul); outline-offset:3px; border-radius:4px}

/* azulejo band (signature) */
.tile{height:26px; width:100%;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='56'%20height='26'%20viewBox='0%200%2056%2026'%3E%3Cg%20fill='none'%20stroke='%2312545E'%20stroke-width='1.3'%3E%3Cpath%20d='M28,3L42,13L28,23L14,13Z'/%3E%3Cpath%20d='M0,3L14,13L0,23'/%3E%3Cpath%20d='M56,3L42,13L56,23'/%3E%3C/g%3E%3Ccircle%20cx='28'%20cy='13'%20r='2.3'%20fill='%23B0842F'/%3E%3Ccircle%20cx='14'%20cy='13'%20r='1.4'%20fill='%2312545E'/%3E%3Ccircle%20cx='42'%20cy='13'%20r='1.4'%20fill='%2312545E'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-position:center; background-size:auto 100%; opacity:.5}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.55rem; font-weight:600; font-size:1rem;
  padding:.85rem 1.5rem; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:.2s;
  position:relative; overflow:hidden}
.btn-wa::after{content:""; position:absolute; top:0; bottom:0; left:-70%; width:45%; transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent); transition:left .55s ease}
.btn-wa:hover::after{left:125%}
.btn svg{width:20px;height:20px}
.btn-wa{background:var(--azul); color:#fff}
.btn-wa:hover{background:var(--azul-2)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--azul); color:var(--azul)}

/* header */
.hd{position:sticky; top:0; z-index:40; background:rgba(247,244,236,.86);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line)}
.hd .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{font-family:"Cormorant Garamond"; font-size:1.45rem; font-weight:700; color:var(--ink); letter-spacing:.3px}
.brand span{color:var(--oro)}
.hd .btn{padding:.55rem 1.1rem; font-size:.92rem}

/* hero */
.hero{position:relative; min-height:82vh; display:flex; align-items:flex-end;
  color:#fff; overflow:hidden; background:var(--azul-2)}
.hero .ph{position:absolute; inset:0; margin:0}
.hero .ph::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,45,51,.28) 0%, rgba(14,45,51,.30) 40%, rgba(12,40,46,.86) 100%)}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero .inner{position:relative; z-index:2; padding:0 22px 4.4rem; max-width:var(--maxw); margin:0 auto; width:100%}
.hero h1{font-size:clamp(2.6rem,6vw,4.6rem); max-width:16ch; text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero .eyebrow{color:#F3E7C8}
.hero .sub{font-size:1.16rem; max-width:52ch; margin:1.1rem 0 1.8rem; color:#EFEAE0}
.hero .cta{display:flex; gap:.8rem; flex-wrap:wrap}
.hero .btn-ghost{color:#fff; border-color:rgba(255,255,255,.5)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.12); border-color:#fff; color:#fff}
.trust{display:flex; gap:.5rem 1.4rem; flex-wrap:wrap; align-items:center;
  margin-top:1.7rem; font-size:.92rem; color:#EAE3D6}
.trust b{color:#fff}

/* sections */
section{padding:5.2rem 0}
.alt{background:#F1EBDD}
.sec-head{max-width:64ch; margin-bottom:2.6rem}
.sec-head h2{font-size:clamp(2rem,4vw,3rem)}
.sec-head p{margin-top:1rem}

/* specs strip */
.specs{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.specs div{background:var(--surface); padding:1.2rem 1.3rem; transition:background .25s ease}
.specs div:hover{background:#FBF8F1}
.specs .k{font-family:"Cormorant Garamond"; font-size:2.3rem; font-weight:600; color:var(--azul); line-height:1}
.specs .v{font-size:.86rem; color:var(--muted); margin-top:.3rem; letter-spacing:.02em}

/* two-column */
.cols{display:grid; gap:2.4rem}
.cols h2{font-size:clamp(2rem,4vw,3rem)}
.cols .txt p{color:var(--muted)}

/* location */
.loc{background:var(--azul); color:#F3EFE6}
.loc h2{color:#fff}
.loc .eyebrow{color:var(--oro-soft)}
.loc .lead{color:#D6E0DE}
.loc-grid{display:grid; gap:2rem; margin-top:2.4rem}
.walk{list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,.16)}
.walk li{display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.95rem 0; border-bottom:1px solid rgba(255,255,255,.16)}
.walk .place{font-size:1.05rem}
.walk .dist{color:var(--oro-soft); font-weight:600; white-space:nowrap; font-size:.86rem;
  border:1px solid rgba(233,223,199,.35); border-radius:999px; padding:.18rem .75rem; transition:background .25s ease, border-color .25s ease}
.walk li:hover .dist{background:rgba(233,223,199,.12); border-color:rgba(233,223,199,.6)}
.mapbox{border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); background:#dfe6e4; min-height:340px}
.mapbox iframe{display:block; width:100%; height:100%; min-height:340px; border:0}

/* gallery */
.shot{position:relative; margin:0; border-radius:var(--r); overflow:hidden; aspect-ratio:4/3;
  background:linear-gradient(135deg,#e7ded0,#dfe6e4); cursor:zoom-in}
.shot img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.shot:hover img{transform:scale(1.04)}
.shot.portrait{aspect-ratio:3/4; border-radius:190px 190px var(--r) var(--r)}
.shot figcaption{position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:.9rem 1rem .7rem; color:#fff; font-size:.82rem; letter-spacing:.04em;
  text-transform:uppercase; font-weight:600;
  background:linear-gradient(0deg, rgba(12,40,46,.78), rgba(12,40,46,0))}
.masonry{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; grid-auto-rows:8px; align-items:start}
.masonry .shot{margin:0; border-radius:var(--r); overflow:hidden; position:relative; aspect-ratio:auto;
  background:linear-gradient(135deg,#e7ded0,#dfe6e4); cursor:zoom-in}
.masonry .shot picture{display:block}
.masonry .shot img{width:100%; height:auto; display:block; transition:transform .5s ease}
.masonry .shot:hover img{transform:scale(1.03)}
.masonry .shot.stretch{align-self:stretch}
.masonry .shot.stretch picture{height:100%}
.masonry .shot.stretch img{height:100%; object-fit:cover}

/* amenities */
.grid-eq{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.grid-eq div{background:var(--surface); padding:1.05rem 1.1rem; display:flex; align-items:center; gap:.75rem; font-size:.98rem}
.grid-eq svg{width:24px; height:24px; color:var(--azul); flex:none}

/* conditions */
.cards{display:grid; grid-template-columns:1fr; gap:14px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.4rem 1.5rem}
.card h3{font-size:1.5rem; color:var(--azul); margin-bottom:.3rem}
.card h3::after{content:""; display:block; width:32px; height:2px; background:var(--oro-soft);
  margin-top:.5rem; transition:width .35s cubic-bezier(.2,.7,.2,1)}
.card:hover h3::after{width:64px; background:var(--oro)}
.card p{margin:0; color:var(--muted); font-size:.98rem}
.noel{background:linear-gradient(180deg,#fff,#FBF7EC); border-color:var(--oro-soft)}
.noel h3{color:var(--oro)}
.price-tag{font-family:"Cormorant Garamond"; font-size:2.4rem; color:var(--azul); font-weight:600; font-style:italic}

/* FAQ */
details{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:0 1.3rem; margin-bottom:12px}
summary{list-style:none; cursor:pointer; padding:1.15rem 0; font-weight:600; font-size:1.06rem;
  display:flex; justify-content:space-between; align-items:center; gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--oro); font-size:1.5rem; line-height:1; font-weight:400;
  transition:transform .35s cubic-bezier(.2,.7,.2,1)}
details[open] summary::after{transform:rotate(135deg)}
details p{color:var(--muted); padding:0 0 1.2rem; margin:0}

/* contact */
.contact{background:var(--azul-2); color:#EFEAE0; position:relative; overflow:hidden}
.contact::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='56'%20height='26'%20viewBox='0%200%2056%2026'%3E%3Cg%20fill='none'%20stroke='%23E9DFC7'%20stroke-width='1.3'%3E%3Cpath%20d='M28,3L42,13L28,23L14,13Z'/%3E%3Cpath%20d='M0,3L14,13L0,23'/%3E%3Cpath%20d='M56,3L42,13L56,23'/%3E%3C/g%3E%3Ccircle%20cx='28'%20cy='13'%20r='2.3'%20fill='%23E9DFC7'/%3E%3Ccircle%20cx='14'%20cy='13'%20r='1.4'%20fill='%23E9DFC7'/%3E%3Ccircle%20cx='42'%20cy='13'%20r='1.4'%20fill='%23E9DFC7'/%3E%3C/svg%3E");
  background-size:112px 52px}
.contact .wrap{position:relative}
.contact h2{color:#fff}
.contact .eyebrow{color:var(--oro-soft)}
.contact .lead{color:#D6E0DE}
.contact-cta{text-align:center; max-width:640px; margin:0 auto}
.contact-cta .btn-wa{font-size:1.12rem; padding:1rem 2rem}
.addr{display:flex; align-items:center; justify-content:center; gap:.6rem; color:#CFDAD8; margin-top:1.5rem}
.addr svg{width:20px; height:20px; color:var(--oro-soft)}
.note{font-size:.85rem; color:#AFC0BE; margin-top:.6rem}

/* footer */
footer{background:#0C2C30; color:#9FB6B4; padding:3rem 0 2.4rem; font-size:.92rem}
footer .brand{color:#fff; display:block; margin-bottom:.6rem}
footer .seo{color:#8AA5A2; max-width:70ch; margin-top:1rem; font-size:.85rem; line-height:1.7}

/* lightbox */
.lb{position:fixed; inset:0; background:rgba(10,30,34,.94); display:none;
  align-items:center; justify-content:center; z-index:90; padding:20px}
.lb.open{display:flex}
.lb img{max-width:94vw; max-height:88vh; border-radius:8px; box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb.open img{animation:lbIn .35s cubic-bezier(.2,.7,.2,1)}
@keyframes lbIn{from{opacity:0; transform:scale(.94)}}
.lb button{position:absolute; top:18px; right:22px; background:none; border:0; color:#fff;
  font-size:2.4rem; line-height:1; cursor:pointer}

/* responsive */
@media(max-width:719px){
  section{padding:3.6rem 0}
  .sec-head{margin-bottom:2rem}
  .hero h1{font-size:2.3rem}
  .hero .sub{font-size:1.05rem; margin:.9rem 0 1.4rem}
  .hero .inner{padding-bottom:3.2rem}
  .trust{font-size:.85rem; gap:.4rem 1rem; margin-top:1.2rem}
  .card{padding:1.2rem 1.25rem}
}
@media(min-width:720px){
  .masonry{grid-template-columns:repeat(3,1fr)}
  .specs{grid-template-columns:repeat(4,1fr)}
  .grid-eq{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .cols{grid-template-columns:1.1fr .9fr; align-items:center}
  .loc-grid{grid-template-columns:1fr 1fr; align-items:start}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important; transition:none !important}
  .shot:hover img{transform:none}
}

/* ---------- animaciones y detalles ---------- */
.js .reveal{opacity:0; transform:translateY(22px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1; transform:none}
/* cascada dentro de las cuadrículas */
.js .specs.reveal, .js .grid-eq.reveal, .js .walk.reveal{transform:none}
.js .specs.reveal>div, .js .grid-eq.reveal>div, .js .walk.reveal>li{opacity:0; transform:translateY(16px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1)}
.js .specs.reveal.in>div, .js .grid-eq.reveal.in>div, .js .walk.reveal.in>li{opacity:1; transform:none}
.js .specs.reveal>div:nth-child(2){transition-delay:.08s}
.js .specs.reveal>div:nth-child(3){transition-delay:.16s}
.js .specs.reveal>div:nth-child(4){transition-delay:.24s}
.js .grid-eq.reveal>div:nth-child(2){transition-delay:.05s}
.js .grid-eq.reveal>div:nth-child(3){transition-delay:.1s}
.js .grid-eq.reveal>div:nth-child(4){transition-delay:.15s}
.js .grid-eq.reveal>div:nth-child(5){transition-delay:.2s}
.js .grid-eq.reveal>div:nth-child(6){transition-delay:.25s}
.js .grid-eq.reveal>div:nth-child(7){transition-delay:.3s}
.js .grid-eq.reveal>div:nth-child(8){transition-delay:.35s}
.js .grid-eq.reveal>div:nth-child(9){transition-delay:.4s}
.js .grid-eq.reveal>div:nth-child(10){transition-delay:.45s}
.js .grid-eq.reveal>div:nth-child(11){transition-delay:.5s}
.js .grid-eq.reveal>div:nth-child(12){transition-delay:.55s}
.js .walk.reveal>li:nth-child(2){transition-delay:.07s}
.js .walk.reveal>li:nth-child(3){transition-delay:.14s}
.js .walk.reveal>li:nth-child(4){transition-delay:.21s}
.js .walk.reveal>li:nth-child(5){transition-delay:.28s}
.js .walk.reveal>li:nth-child(6){transition-delay:.35s}
.js .masonry .shot img{opacity:0; transition:opacity .6s ease}
.js .masonry .shot img.loaded{opacity:1}
.hd{transition:box-shadow .3s ease}
.hd.scrolled{box-shadow:0 12px 30px -18px rgba(14,63,71,.55)}
.btn{transition:transform .2s ease, background .2s ease, box-shadow .2s ease}
.btn-wa:hover{transform:translateY(-2px); box-shadow:0 12px 26px -12px rgba(18,84,94,.65)}
.btn-ghost:hover{transform:translateY(-2px)}
.card{transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.walk li{transition:padding-left .3s ease}
.walk li:hover{padding-left:.45rem}
summary{transition:color .2s ease}
summary:hover{color:var(--azul)}
.grid-eq div{transition:background .25s ease}
.grid-eq div:hover{background:#F1EBDD}
@keyframes kenburns{from{transform:scale(1.12)} to{transform:scale(1)}}
.js .hero img{animation:kenburns 9s ease-out forwards}
/* sin Ken Burns en móvil: animar una textura tan grande pesa mucho en GPU */
@media(max-width:719px){ .js .hero img{animation:none} }
@keyframes heroIn{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
.js .hero .inner > *{opacity:0; animation:heroIn .85s cubic-bezier(.2,.7,.2,1) forwards}
.js .hero .eyebrow{animation-delay:.15s}
.js .hero h1{animation-delay:.32s}
.js .hero .sub{animation-delay:.58s}
.js .hero .cta{animation-delay:.78s}
.js .hero .trust{animation-delay:.98s}
.scrollcue{position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:3;
  width:30px; height:30px; border:1px solid rgba(255,255,255,.55); border-radius:50%;
  display:flex; align-items:center; justify-content:center}
.scrollcue::after{content:""; width:8px; height:8px;
  border-right:2px solid #fff; border-bottom:2px solid #fff;
  transform:translateY(-2px) rotate(45deg)}
.js .scrollcue{animation:cue 1.9s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(6px)}}
@keyframes tiledrift{from{background-position:0 center} to{background-position:56px center}}
.js .tile{animation:tiledrift 9s linear infinite}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1 !important; transform:none !important}
  .js .reveal>div,.js .reveal>li{opacity:1 !important; transform:none !important}
  .js .hero img,.js .hero .inner > *,.js .tile,.js .scrollcue{animation:none !important; opacity:1 !important}
  .js .masonry .shot img{opacity:1 !important}
  .lb.open img{animation:none !important}
}