/* =========================================================================
   AZUERO LUXURY — Sistema de diseño
   Residencial de lujo · La Villa de Los Santos, Panamá
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --ink:#12130F;
  --ink-2:#1B1D18;
  --ink-3:#25281F;
  --forest:#0E300E;
  --gold:#A4863D;
  --gold-1:#C9A961;
  --gold-2:#E3CE9B;
  --bone:#F7F5F0;
  --bone-2:#EFEBE2;
  --lavender:#E6E6FA;
  --paper:#FFFFFF;
  --muted:#7E8178;
  --muted-2:#A9AC9F;
  --line:rgba(18,19,15,.12);
  --line-light:rgba(255,255,255,.16);

  --ff-display:"Playfair Display",'Times New Roman',Georgia,serif;
  --ff-sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* Radios: esquinas suavemente redondeadas */
  --r-xs:3px;
  --r-sm:5px;
  --r:8px;
  --r-lg:12px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-2:cubic-bezier(.65,0,.35,1);
  --dur:1.05s;

  --pad-x:clamp(1.25rem,5vw,5.5rem);
  --sect-y:clamp(5.5rem,11vw,10.5rem);
  --maxw:1440px;

  --shadow-1:0 1px 2px rgba(18,19,15,.04),0 8px 24px rgba(18,19,15,.06);
  --shadow-2:0 24px 70px -28px rgba(18,19,15,.38);
  --shadow-3:0 40px 110px -40px rgba(18,19,15,.55);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{
  font-family:var(--ff-sans);
  font-weight:300;
  font-size:clamp(.975rem,.93rem + .22vw,1.075rem);
  line-height:1.75;
  color:var(--ink-2);
  background:var(--bone);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%;height:auto}
/* <picture> no debe crear caja propia: así las reglas de proporción
   se aplican directamente sobre la imagen que contiene. */
picture{display:contents}
a.figure,a.loc__map{color:inherit}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--gold);color:#fff}

/* ---------- 3. Tipografía ---------- */
h1,h2,h3,h4,.display{
  font-family:var(--ff-display);
  font-weight:400;
  line-height:1.14;
  letter-spacing:-.012em;
  color:var(--ink);
}
/* Playfair Display tiene más peso y altura de x que una garamond:
   escalas y interlineado ajustados para que respire igual. */
.t-hero{font-size:clamp(2.5rem,1.2rem + 5.6vw,6.2rem);line-height:1.04;letter-spacing:-.022em}
.t-1{font-size:clamp(1.95rem,1.2rem + 3vw,3.7rem);line-height:1.1}
.t-2{font-size:clamp(1.6rem,1.15rem + 1.9vw,2.6rem);line-height:1.12}
.t-3{font-size:clamp(1.25rem,1.05rem + .9vw,1.7rem);line-height:1.2}
.it{font-style:italic}
.gold{color:var(--gold)}

.eyebrow{
  font-family:var(--ff-sans);
  font-size:.6875rem;
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex;align-items:center;gap:.9rem;
}
.eyebrow::before{content:"";width:clamp(24px,4vw,52px);height:1px;background:var(--gold);opacity:.6;flex:none}
.eyebrow.is-center{justify-content:center}
.eyebrow.is-center::after{content:"";width:clamp(24px,4vw,52px);height:1px;background:var(--gold);opacity:.6;flex:none}
.lead{font-size:clamp(1.05rem,.98rem + .45vw,1.3rem);line-height:1.7;color:var(--ink-2);font-weight:300}
.muted{color:var(--muted)}
.small{font-size:.8125rem;letter-spacing:.02em}

/* ---------- 4. Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)}
.wrap-n{max-width:1120px}
.wrap-s{max-width:820px}
.section{padding-block:var(--sect-y);position:relative}
.section--dark{background:var(--ink);color:var(--bone)}
.section--dark h1,.section--dark h2,.section--dark h3{color:var(--bone)}
.section--forest{background:var(--forest);color:var(--bone)}
.section--forest h2,.section--forest h3{color:var(--bone)}
.section--bone2{background:var(--bone-2)}
.grid{display:grid;gap:clamp(1.5rem,3vw,3rem)}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center .eyebrow::after{content:"";width:clamp(24px,4vw,52px);height:1px;background:var(--gold);opacity:.6;flex:none}

.rule{height:1px;background:var(--line);border:0}
.section--dark .rule{background:var(--line-light)}

/* ---------- 5. Botones ---------- */
.btn{
  --bg:var(--ink);--fg:#fff;--bd:var(--ink);
  border-radius:var(--r-sm);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  padding:1.05rem 2.2rem;
  font-size:.72rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;
  color:var(--fg);border:1px solid var(--bd);background:var(--bg);
  overflow:hidden;isolation:isolate;
  transition:color .55s var(--ease),border-color .55s var(--ease),transform .55s var(--ease);
  will-change:transform;
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--gold);
  transform:translateY(101%);
  transition:transform .62s var(--ease);
}
.btn:hover{color:#fff;border-color:var(--gold)}
.btn:hover::after{transform:translateY(0)}
.btn:active{transform:scale(.98)}
.btn--gold{--bg:var(--gold);--bd:var(--gold);--fg:#fff}
.btn--gold::after{background:var(--ink)}
.btn--gold:hover{border-color:var(--ink)}
.btn--ghost{--bg:transparent;--bd:rgba(255,255,255,.35);--fg:#fff}
.btn--ghost-dark{--bg:transparent;--bd:rgba(18,19,15,.22);--fg:var(--ink)}
.btn--wa{--bg:#1FA855;--bd:#1FA855;--fg:#fff}
.btn--wa::after{background:#178443}
.btn--wa:hover{border-color:#178443}
.btn--sm{padding:.85rem 1.6rem;font-size:.68rem}
.btn--block{display:flex;width:100%}
.btn svg{width:16px;height:16px;flex:none}

.link-u{
  display:inline-flex;align-items:center;gap:.65rem;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
  position:relative;padding-bottom:.4rem;
}
.link-u::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;opacity:.35;transform-origin:right;transition:transform .6s var(--ease)}
.link-u:hover::after{transform:scaleX(0)}
.link-u .arw{transition:transform .6s var(--ease)}
.link-u:hover .arw{transform:translateX(6px)}
.section--dark .link-u{color:var(--gold-1)}

/* ---------- 6. Header ---------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding-block:clamp(.85rem,1.6vw,1.5rem);
  transition:background .6s var(--ease),padding .6s var(--ease),box-shadow .6s var(--ease),transform .6s var(--ease);
}
.header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(10,11,8,.6),rgba(10,11,8,0));
  opacity:1;transition:opacity .6s var(--ease);
}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.header__logo{display:block;position:relative;width:clamp(132px,14vw,196px);flex:none;z-index:2}
.header__logo img{width:100%;transition:opacity .5s var(--ease)}
.header__logo .lg-dark{position:absolute;inset:0;opacity:0}
.header.is-stuck{background:rgba(247,245,240,.94);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);box-shadow:0 1px 0 var(--line)}
.header.is-stuck::before{opacity:0}
.header.is-stuck .lg-light{opacity:0}
.header.is-stuck .lg-dark{opacity:1}
.header.is-hidden{transform:translateY(-104%)}

.nav{display:flex;align-items:center;gap:clamp(1.2rem,2.4vw,2.5rem)}
.nav a{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;
  position:relative;padding-block:.35rem;white-space:nowrap;opacity:.88;
  transition:opacity .4s var(--ease),color .5s var(--ease);
}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.nav a:hover{opacity:1}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.header.is-stuck .nav a{color:var(--ink)}
.header__cta{display:none}
@media (min-width:1080px){.header__cta{display:inline-flex}}

.burger{display:grid;gap:6px;width:30px;padding:6px 0;z-index:2}
.burger span{display:block;height:1.5px;background:#fff;transition:transform .5s var(--ease),opacity .35s,background .5s}
.burger span:nth-child(2){width:66%;margin-left:auto}
.header.is-stuck .burger span{background:var(--ink)}
.burger.is-open span{background:#fff}
.burger.is-open span:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger.is-open span:last-child{transform:translateY(-3.75px) rotate(-45deg);width:100%;margin-left:0}
.burger.is-open span:nth-child(2){opacity:0}
@media (min-width:1080px){.burger{display:none}}
@media (max-width:1079px){.nav--main{display:none}}

/* Menú móvil */
.menu{
  position:fixed;inset:0;z-index:99;
  background:var(--ink);
  display:grid;grid-template-rows:1fr auto;
  padding:clamp(6.5rem,16vw,9rem) var(--pad-x) clamp(2rem,5vw,3.5rem);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .95s var(--ease);
  visibility:hidden;
}
.menu.is-open{clip-path:inset(0 0 0 0);visibility:visible}
.menu__links{display:flex;flex-direction:column;justify-content:center;gap:clamp(.4rem,1.6vw,1rem)}
.menu__links a{
  font-family:var(--ff-display);font-size:clamp(1.75rem,7.4vw,3rem);color:var(--bone);
  line-height:1.15;opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),color .4s;
}
.menu.is-open .menu__links a{opacity:1;transform:none;transition-delay:calc(.18s + var(--i,0)*.075s)}
.menu__links a:hover{color:var(--gold-1)}
.menu__links a .num{font-family:var(--ff-sans);font-size:.6rem;letter-spacing:.2em;color:var(--gold);vertical-align:super;margin-right:.6rem}
.menu__foot{display:grid;gap:1.4rem;border-top:1px solid var(--line-light);padding-top:1.6rem;color:var(--muted-2);font-size:.8rem}
.menu__foot a:hover{color:var(--gold-1)}

/* ---------- 7. Hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;background:var(--ink)}
.hero__media{position:absolute;inset:0;overflow:hidden}
.hero__media img,.hero__media video{
  width:100%;height:100%;object-fit:cover;
  /* Zoom leve: aporta encuadre cinematográfico y recorta las marcas
     de agua que el generador de video deja en las esquinas. */
  transform:scale(1.14);
  transition:opacity 1.4s var(--ease);
}
.hero__media video{opacity:0;position:absolute;inset:0}
.hero__media video.is-ready{opacity:1}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(9,10,7,.94) 0%,rgba(9,10,7,.62) 34%,rgba(9,10,7,.34) 62%,rgba(9,10,7,.58) 100%),
    linear-gradient(to right,rgba(9,10,7,.55) 0%,rgba(9,10,7,.12) 48%,transparent 72%),
    radial-gradient(120% 80% at 50% 100%,rgba(14,48,14,.35),transparent 60%);
}
.hero__in{position:relative;z-index:2;padding-block:clamp(6rem,14vh,9rem) clamp(3.5rem,9vh,6rem);width:100%}
.hero .t-hero{color:#fff;text-shadow:0 2px 40px rgba(0,0,0,.45)}
.hero .eyebrow,.mhero .eyebrow{color:var(--gold-2);text-shadow:0 1px 14px rgba(0,0,0,.75)}
.hero .eyebrow::before,.hero .eyebrow::after,.mhero .eyebrow::before,.mhero .eyebrow::after{background:var(--gold-2)}
.hero__sub{text-shadow:0 1px 18px rgba(0,0,0,.55)}
.hero__sub{max-width:44ch;color:rgba(255,255,255,.78);margin-top:clamp(1.2rem,2.5vw,1.8rem)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:clamp(1.8rem,4vw,2.8rem)}
.hero__bar{
  display:flex;flex-wrap:wrap;gap:clamp(1.2rem,4vw,3.5rem);
  margin-top:clamp(2.4rem,5vw,3.6rem);padding-top:clamp(1.4rem,3vw,2rem);
  border-top:1px solid rgba(255,255,255,.18);
}
.hero__bar div{color:rgba(255,255,255,.72)}
.hero__bar b{display:block;font-family:var(--ff-display);font-size:clamp(1.35rem,2.6vw,1.95rem);font-weight:400;color:#fff;line-height:1.15}
.hero__bar span{font-size:.65rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-1)}
.hero__scroll{
  position:absolute;right:var(--pad-x);bottom:clamp(2rem,5vh,3.5rem);z-index:3;
  display:none;align-items:center;gap:.8rem;
  font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.6);
  writing-mode:vertical-rl;
}
@media (min-width:900px){.hero__scroll{display:flex}}
.hero__scroll::after{content:"";width:1px;height:62px;background:linear-gradient(to bottom,var(--gold),transparent);animation:scrollLine 2.4s var(--ease-2) infinite}
@keyframes scrollLine{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Máscara de aparición por línea */
.mask{display:block;overflow:hidden}
.mask>span{display:block;transform:translateY(105%);transition:transform 1.25s var(--ease);transition-delay:var(--d,0s)}
.is-in .mask>span,.hero.is-in .mask>span{transform:none}

/* ---------- 8. Reveal ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 1.05s var(--ease),transform 1.05s var(--ease);transition-delay:var(--d,0s)}
.reveal.is-in{opacity:1;transform:none}
.reveal-s{opacity:0;transform:scale(1.06);transition:opacity 1.3s var(--ease),transform 1.6s var(--ease);transition-delay:var(--d,0s)}
.reveal-s.is-in{opacity:1;transform:none}
.reveal-l{transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease);transition-delay:var(--d,0s)}
.reveal-l.is-in{transform:scaleX(1)}
.clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease);transition-delay:var(--d,0s)}
.clip.is-in{clip-path:inset(0 0 0 0)}

/* ---------- 9. Intro / Proyecto ---------- */
.intro{display:grid;gap:clamp(2.5rem,6vw,5rem)}
@media (min-width:900px){.intro{grid-template-columns:1fr 1.15fr;align-items:start;gap:clamp(3rem,7vw,7rem)}}
.intro__body p+p{margin-top:1.15rem}

.figure{display:block;position:relative;overflow:hidden;background:var(--bone-2);border-radius:var(--r)}
.figure img{width:100%;transition:transform 1.6s var(--ease)}
.figure:hover img{transform:scale(1.045)}
.figure--tall{aspect-ratio:4/5}
.figure--wide{aspect-ratio:16/10}
.figure--sq{aspect-ratio:1}
.figure--tall img,.figure--wide img,.figure--sq img,
.model__media .figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.figure__cap{position:absolute;left:0;bottom:0;padding:1.1rem 1.3rem;color:#fff;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;background:linear-gradient(to top,rgba(9,10,7,.75),transparent)}

.stat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3vw,2.5rem);margin-top:clamp(2rem,4vw,3rem)}
@media (min-width:760px){.stat-row{grid-template-columns:repeat(4,1fr)}}
.stat{border-top:1px solid var(--line);padding-top:1.1rem}
.section--dark .stat{border-color:var(--line-light)}
.stat b{display:block;font-family:var(--ff-display);font-size:clamp(1.8rem,3.4vw,2.7rem);font-weight:400;line-height:1.1;color:var(--ink)}
.section--dark .stat b{color:var(--bone)}
.stat span{display:block;margin-top:.55rem;font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.section--dark .stat span{color:var(--gold-1)}

/* ---------- 10. Modelos ---------- */
.models{display:grid;gap:clamp(3rem,7vw,6rem)}
.model{display:grid;gap:clamp(1.6rem,4vw,3.5rem);align-items:center}
@media (min-width:940px){
  .model{grid-template-columns:1.15fr 1fr;gap:clamp(3rem,6vw,6rem)}
  .model:nth-child(even) .model__media{order:2}
}
.model__media{position:relative}
.model__media .figure{aspect-ratio:4/3;box-shadow:var(--shadow-2)}
@media (min-width:940px){.model__media .figure{aspect-ratio:5/4}}
.model__badge{
  position:absolute;top:0;left:0;z-index:2;transform:translate(-0px,-50%);
  background:var(--gold);color:#fff;border-radius:var(--r-xs);
  padding:.5rem 1.15rem;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
}
.model__n{font-family:var(--ff-display);font-size:clamp(2.1rem,3.8vw,3.1rem);line-height:1;color:var(--gold);opacity:.34;margin-bottom:.5rem;letter-spacing:.01em}
.model__title{margin:.4rem 0 1rem}
.model__specs{display:grid;grid-template-columns:repeat(2,1fr);gap:.1rem 1.5rem;margin:1.6rem 0 1.8rem;border-top:1px solid var(--line);padding-top:1.4rem}
@media (min-width:520px){.model__specs{grid-template-columns:repeat(3,1fr)}}
.spec{padding-block:.55rem}
.spec b{display:block;font-family:var(--ff-display);font-size:1.35rem;font-weight:400;line-height:1.25;color:var(--ink)}
.spec span{display:flex;align-items:center;gap:.42rem;margin-top:.2rem;font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);line-height:1.3}
.spec span svg{width:14px;height:14px;flex:none;color:var(--gold);stroke-width:1.4}
.section--dark .spec span svg{color:var(--gold-1)}
.model__price{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin-bottom:1.5rem}
.model__price em{font-style:normal;font-size:.63rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.model__price b{font-family:var(--ff-display);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:400;color:var(--ink)}
.model__actions{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

/* ---------- 11. Experiencia ---------- */
.exp{display:grid;gap:clamp(.85rem,1.6vw,1.25rem);grid-template-columns:1fr}
@media (min-width:620px){.exp{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.exp{grid-template-columns:repeat(3,1fr)}}

.exp__i{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--r);background:var(--ink-2);
  display:flex;align-items:flex-end;
  min-height:clamp(290px,32vw,392px);
}
.exp__i img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);filter:saturate(.92);
  transition:transform 1.9s var(--ease),filter 1.1s var(--ease);
}
.exp__i:hover img{transform:scale(1.1);filter:saturate(1.04)}
.exp__i::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(9,10,7,.92) 0%,rgba(9,10,7,.55) 40%,rgba(9,10,7,.1) 74%,rgba(9,10,7,.3) 100%);
}
.exp__marco{
  position:absolute;inset:10px;z-index:1;pointer-events:none;
  border:1px solid rgba(227,206,155,.32);border-radius:calc(var(--r) - 4px);
  opacity:0;transform:scale(1.015);
  transition:opacity .7s var(--ease),transform .9s var(--ease);
}
.exp__i:hover .exp__marco{opacity:1;transform:none}

.exp__b{position:relative;z-index:2;width:100%;padding:clamp(1.4rem,2.5vw,2.1rem)}
.exp__ico{
  width:clamp(40px,3.6vw,48px);aspect-ratio:1;display:grid;place-items:center;
  border:1px solid rgba(201,169,97,.5);border-radius:50%;margin-bottom:1.05rem;
  background:rgba(9,10,7,.25);backdrop-filter:blur(4px);
  transition:background .6s var(--ease),border-color .6s var(--ease);
}
.exp__ico svg{width:20px;height:20px;color:var(--gold-2);stroke-width:1.2;transition:color .6s var(--ease)}
.exp__i:hover .exp__ico{background:var(--gold);border-color:var(--gold)}
.exp__i:hover .exp__ico svg{color:#fff}

.exp__i h3{color:#fff;font-size:clamp(1.2rem,1.7vw,1.55rem);margin-bottom:.5rem;letter-spacing:-.01em}
.exp__i p{color:rgba(255,255,255,.76);font-size:.92rem;line-height:1.68;max-width:42ch}
.exp__linea{display:block;width:34px;height:1px;background:var(--gold);margin-bottom:.9rem;transform-origin:left;transition:transform .9s var(--ease)}
.exp__i:hover .exp__linea{transform:scaleX(2.4)}

/* ---------- 12. Galería en mosaico (ficha de modelo) ---------- */
.mosaico{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.5rem,1vw,.85rem)}
@media (min-width:820px){.mosaico{grid-template-columns:repeat(6,1fr)}}

.mos{
  position:relative;display:block;width:100%;overflow:hidden;isolation:isolate;
  grid-column:span 1;aspect-ratio:1;
  background:var(--bone-2);border-radius:var(--r);
  cursor:zoom-in;
}
.mos--6{grid-column:span 2;aspect-ratio:16/9}
@media (min-width:820px){
  .mos--2{grid-column:span 2;aspect-ratio:1}
  .mos--3{grid-column:span 3;aspect-ratio:4/3}
  .mos--6{grid-column:span 6;aspect-ratio:21/9}
}
.mos img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.7s var(--ease),filter .9s var(--ease);
}
.mos:hover img{transform:scale(1.065)}
.mos::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(9,10,7,.82) 0%,rgba(9,10,7,.2) 45%,rgba(9,10,7,0) 75%);
  opacity:0;transition:opacity .65s var(--ease);
}
.mos:hover::after{opacity:1}
.mos__marco{
  position:absolute;inset:9px;z-index:2;pointer-events:none;
  border:1px solid rgba(255,255,255,.38);border-radius:calc(var(--r) - 4px);
  opacity:0;transform:scale(1.02);
  transition:opacity .6s var(--ease),transform .8s var(--ease);
}
.mos:hover .mos__marco{opacity:1;transform:none}
.mos__n{
  position:absolute;top:.95rem;left:1.1rem;z-index:3;
  font-family:var(--ff-display);font-size:.8rem;color:var(--gold-2);
  opacity:0;transform:translateY(-6px);
  transition:opacity .55s var(--ease),transform .7s var(--ease);
}
.mos__c{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:center;gap:.7rem;
  padding:1rem 1.15rem;color:#fff;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.4;
  opacity:0;transform:translateY(12px);
  transition:opacity .6s var(--ease),transform .75s var(--ease);
}
.mos__c svg{width:15px;height:15px;flex:none;color:var(--gold-2);stroke-width:1.3}
.mos:hover .mos__c,.mos:hover .mos__n{opacity:1;transform:none}
@media (hover:none){
  .mos::after{opacity:1}
  .mos__c{opacity:1;transform:none;font-size:.62rem}
  .mos__marco,.mos__n{display:none}
}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(9,10,7,.96);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.lb.is-open{opacity:1;visibility:visible}
.lb__img{max-width:min(1400px,92vw);max-height:82vh;object-fit:contain;border-radius:var(--r);opacity:0;transform:scale(.97);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.lb.is-open .lb__img{opacity:1;transform:none}
.lb__cap{position:absolute;bottom:clamp(1.2rem,4vh,2.6rem);left:0;right:0;text-align:center;color:rgba(255,255,255,.72);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.lb__x,.lb__p,.lb__n{position:absolute;color:#fff;width:52px;height:52px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);border-radius:var(--r-sm);transition:background .4s,border-color .4s}
.lb__x:hover,.lb__p:hover,.lb__n:hover{background:var(--gold);border-color:var(--gold)}
.lb__x{top:clamp(1rem,3vh,2rem);right:clamp(1rem,3vw,2rem)}
.lb__p{left:clamp(.6rem,2vw,2rem);top:50%;transform:translateY(-50%)}
.lb__n{right:clamp(.6rem,2vw,2rem);top:50%;transform:translateY(-50%)}

/* ---------- 13. Ubicación ---------- */
.loc{display:grid;gap:clamp(2rem,5vw,4rem)}
@media (min-width:980px){.loc{grid-template-columns:.85fr 1.15fr;align-items:center}}
.loc__map{position:relative;overflow:hidden;aspect-ratio:16/11;background:var(--ink-2);box-shadow:var(--shadow-2);border-radius:var(--r)}
.loc__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.05) brightness(.96);transition:filter .8s var(--ease)}
.loc__map:hover iframe{filter:grayscale(0)}
.loc__list{display:grid;gap:1.4rem;margin:1.8rem 0}
.loc__list li{display:flex;gap:1rem;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:1.2rem}
.section--dark .loc__list li{border-color:var(--line-light)}
.loc__list svg{width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:1.2;flex:none;margin-top:.35rem}
.loc__list b{display:block;font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:400;margin-bottom:.25rem}

/* ---------- 14. CTA ---------- */
.cta{position:relative;overflow:hidden;background:var(--ink)}
.cta__bg{position:absolute;inset:0}
.cta__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34}
.cta__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(9,10,7,.9),rgba(9,10,7,.55))}
.cta__in{position:relative;z-index:2;text-align:center;padding-block:clamp(5rem,11vw,9rem)}
.cta h2{color:#fff}
.cta p{color:rgba(255,255,255,.75);max-width:52ch;margin-inline:auto}

/* ---------- 15. Contacto ---------- */
.contact{display:grid;gap:clamp(2.5rem,6vw,5rem)}
@media (min-width:940px){.contact{grid-template-columns:1fr 1.05fr}}
.field{position:relative;margin-bottom:1.6rem}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:.9rem 0;font-size:.95rem;font-weight:300;
  transition:border-color .5s var(--ease);
}
.field textarea{resize:vertical;min-height:110px}
.field label{
  position:absolute;left:0;top:.9rem;pointer-events:none;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  transition:transform .45s var(--ease),color .45s var(--ease),font-size .45s var(--ease);
  transform-origin:left top;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--gold)}
.field input:focus+label,.field textarea:focus+label,
.field input:not(:placeholder-shown)+label,.field textarea:not(:placeholder-shown)+label,
.field select:valid+label{transform:translateY(-1.5rem) scale(.86);color:var(--gold)}
.field select+label{transform:translateY(-1.5rem) scale(.86)}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;margin-top:.6rem}
.field .chev{position:absolute;right:0;top:1.6rem;pointer-events:none;color:var(--muted)}
.form-note{font-size:.75rem;color:var(--muted);margin-top:1rem;line-height:1.6}
.alert{padding:1rem 1.2rem;border-left:2px solid var(--gold);background:var(--bone-2);margin-bottom:1.8rem;font-size:.9rem;border-radius:0 var(--r-sm) var(--r-sm) 0}
.alert--ok{border-color:#1FA855;background:rgba(31,168,85,.08)}
.alert--err{border-color:#C0392B;background:rgba(192,57,43,.07)}

.contact__aside{background:var(--ink);color:var(--bone);padding:clamp(2rem,4.5vw,3.5rem);border-radius:var(--r)}
.contact__aside h3{color:var(--bone)}
.contact__aside a:hover{color:var(--gold-1)}
.contact__aside .rowc{display:flex;gap:1rem;align-items:flex-start;padding-block:1.15rem;border-bottom:1px solid var(--line-light)}
.contact__aside .rowc:last-of-type{border-bottom:0}
.contact__aside svg{width:19px;height:19px;stroke:var(--gold);fill:none;stroke-width:1.2;flex:none;margin-top:.3rem}
.contact__aside b{display:block;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:400;margin-bottom:.2rem}
.contact__aside span{color:var(--muted-2);font-size:.92rem;line-height:1.6}

/* ---------- 16. FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq__i{border-bottom:1px solid var(--line)}
.faq__q{display:flex;justify-content:space-between;align-items:center;gap:2rem;width:100%;text-align:left;padding:1.5rem 0;font-family:var(--ff-display);font-size:clamp(1.02rem,1.7vw,1.32rem);line-height:1.35;color:var(--ink);transition:color .4s}
.faq__q:hover{color:var(--gold)}
.faq__q i{flex:none;width:22px;height:22px;position:relative}
.faq__q i::before,.faq__q i::after{content:"";position:absolute;inset:50% 0 auto 0;height:1px;background:currentColor;transition:transform .5s var(--ease)}
.faq__q i::after{transform:rotate(90deg)}
.faq__i.is-open .faq__q i::after{transform:rotate(0)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.faq__i.is-open .faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{padding-bottom:1.6rem;max-width:70ch;color:var(--muted)}

/* ---------- 17. Footer ---------- */
.footer{background:var(--ink);color:var(--muted-2);padding-block:clamp(3.5rem,7vw,5.5rem) clamp(1.5rem,3vw,2.2rem)}
.footer__top{display:grid;gap:clamp(2rem,5vw,3.5rem);padding-bottom:clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--line-light)}
@media (min-width:820px){.footer__top{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}
.footer__logo{width:clamp(150px,16vw,215px);filter:none;margin-bottom:1.4rem}
.footer h4{font-family:var(--ff-sans);font-size:.65rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:400;margin-bottom:1.2rem}
.footer ul{display:grid;gap:.7rem}
.footer a{font-size:.9rem;transition:color .4s}
.footer a:hover{color:var(--gold-1)}
.footer__bot{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;padding-top:1.8rem;font-size:.75rem}
.footer__soc{display:flex;gap:.7rem}
.footer__soc a{width:38px;height:38px;border:1px solid var(--line-light);border-radius:var(--r-sm);display:grid;place-items:center;transition:background .45s var(--ease),border-color .45s}
.footer__soc a:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.footer__soc svg{width:16px;height:16px;fill:currentColor}
.dev-key{cursor:default;user-select:none}

/* ---------- 18. WhatsApp flotante ---------- */
.wa{
  position:fixed;right:clamp(1rem,2.5vw,2rem);bottom:clamp(1rem,2.5vw,2rem);z-index:90;
  display:grid;place-items:center;
  width:clamp(54px,6vw,62px);aspect-ratio:1;
  background:#1FA855;color:#fff;border-radius:50%;
  box-shadow:0 14px 40px -10px rgba(31,168,85,.6);
  transform:translateY(120%) scale(.9);opacity:0;
  transition:transform .8s var(--ease),opacity .6s var(--ease),background .4s;
}
.wa.is-in{transform:none;opacity:1}
.wa:hover{background:#178443}
.wa svg{width:clamp(27px,3vw,31px);height:auto;fill:currentColor}
.wa .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.wa::before{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(31,168,85,.55);animation:pulseWa 2.6s var(--ease-2) infinite}
@keyframes pulseWa{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}

/* ---------- 19. Loader ---------- */
.loader{position:fixed;inset:0;z-index:300;background:var(--ink);display:grid;place-items:center;transition:clip-path 1.1s var(--ease) .25s,visibility 0s 1.4s}
.loader img{width:clamp(60px,8vw,92px);filter:brightness(0) invert(1);opacity:0;transform:translateY(14px);animation:loaderIn 1.1s var(--ease) forwards}
@keyframes loaderIn{to{opacity:.95;transform:none}}
.loader.is-done{clip-path:inset(0 0 100% 0);visibility:hidden}

/* ---------- 20. Página de modelo ---------- */
.mhero{position:relative;min-height:78svh;display:grid;align-items:end;background:var(--ink);overflow:hidden}
.mhero__media{position:absolute;inset:0}
.mhero__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.mhero__media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to top,rgba(9,10,7,.94),rgba(9,10,7,.42) 55%,rgba(9,10,7,.72)),
  linear-gradient(to right,rgba(9,10,7,.6),rgba(9,10,7,.1) 55%,transparent 78%)}
.mhero__in{position:relative;z-index:2;padding-block:clamp(7rem,14vh,10rem) clamp(2.5rem,6vh,4.5rem)}
.crumbs{display:flex;gap:.6rem;flex-wrap:wrap;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:1.5rem;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.crumbs a:hover{color:var(--gold-1)}
.specs-band{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line);overflow:hidden}
@media (min-width:700px){.specs-band{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1060px){.specs-band{grid-template-columns:repeat(6,1fr)}}
.specs-band .sb{background:var(--bone);padding:clamp(1.4rem,3vw,2.2rem) clamp(1rem,2vw,1.6rem);text-align:center}
.specs-band .sb span.sb__i{display:block;margin:0 0 .75rem}
.specs-band .sb span.sb__i svg{width:23px;height:23px;margin-inline:auto;color:var(--gold);stroke-width:1.2}
.specs-band .sb--price span.sb__i svg{color:var(--gold-1)}
.specs-band .sb b{display:block;font-family:var(--ff-display);font-size:clamp(1.4rem,2.6vw,2rem);font-weight:400;color:var(--ink);line-height:1.15}
.specs-band .sb span{display:block;margin-top:.4rem;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.specs-band .sb--price{background:var(--ink)}
.specs-band .sb--price b{color:var(--bone);font-size:clamp(1.15rem,2vw,1.6rem);letter-spacing:-.01em}
.specs-band .sb--price span{color:var(--gold-1)}
.feat-list{display:grid;gap:.85rem}
@media (min-width:640px){.feat-list{grid-template-columns:repeat(2,1fr) ;gap:.85rem 2.5rem}}
.feat-list li{display:flex;gap:.85rem;align-items:flex-start;font-size:.95rem;padding-bottom:.85rem;border-bottom:1px solid var(--line)}
.feat-list li::before{content:"";width:5px;height:5px;background:var(--gold);flex:none;margin-top:.65rem;transform:rotate(45deg)}
.plan{background:var(--bone-2);padding:clamp(1rem,2.5vw,2rem);box-shadow:var(--shadow-1);border-radius:var(--r)}
.plan img{width:100%;cursor:zoom-in;border-radius:var(--r-sm)}
.tour{position:relative;aspect-ratio:16/9;background:var(--ink-2);overflow:hidden;box-shadow:var(--shadow-2);border-radius:var(--r)}
.tour iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.model-nav{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:2rem}

/* ---------- 21. Utilidades ---------- */
.mt-1{margin-top:.6rem}.mt-2{margin-top:1.2rem}.mt-3{margin-top:2rem}.mt-4{margin-top:3rem}
.mb-2{margin-bottom:1.2rem}.mb-3{margin-bottom:2rem}.mb-4{margin-bottom:3rem}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:400;background:var(--gold);color:#fff;padding:1rem 1.5rem}
.skip:focus{left:0}
.noscroll{overflow:hidden}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- 22. Accesibilidad de movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,.reveal-s,.mask>span,.clip{opacity:1!important;transform:none!important;clip-path:none!important}
  .loader{display:none}
}