/* ============================================================
   VILLARCANGEL · CONINCA
   Sistema visual: "Mediterráneo tropical"
   Crema · tinta verde · terracota · arena
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* color */
  --night:      #0C1310;
  --ink:        #14201A;
  --ink-soft:   #2A3A31;
  --muted:      #6C7A70;
  --cream:      #F7F2E9;
  --paper:      #FCF9F3;
  --sand:       #E7DBC8;
  --sand-2:     #D8C7AC;
  --terra:      #BC5636;
  --terra-dark: #8E3B23;
  --olive:      #55654E;
  --gold:       #C9A46B;
  --line:       rgba(20,32,26,.14);
  --line-light: rgba(247,242,233,.18);

  /* type */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* scale */
  --step--1: clamp(.78rem, .74rem + .18vw, .86rem);
  --step-0:  clamp(.95rem, .9rem + .22vw, 1.06rem);
  --step-1:  clamp(1.12rem, 1rem + .5vw, 1.35rem);
  --step-2:  clamp(1.4rem, 1.15rem + 1vw, 2rem);
  --step-3:  clamp(1.9rem, 1.4rem + 2vw, 3rem);
  --step-4:  clamp(2.4rem, 1.6rem + 3.4vw, 4.4rem);

  /* space */
  --gap: clamp(1rem, .6rem + 1.6vw, 2rem);
  --section: clamp(4.5rem, 3rem + 7vw, 9rem);
  --radius: 2px;

  /* motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --dur: .75s;

  /* layout */
  --wrap: 1240px;
  --pad: clamp(1.15rem, .6rem + 2.4vw, 3.5rem);
  --header-h: 84px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,iframe{ display:block; max-width:100%; }
img{ height:auto; }
h1,h2,h3,h4,p,figure,blockquote,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
::selection{ background:var(--terra); color:#fff; }
:focus-visible{ outline:2px solid var(--terra); outline-offset:3px; border-radius:2px; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ico{ width:1.05em; height:1.05em; flex:none; }
.skip{
  position:fixed; top:-100px; left:1rem; z-index:999;
  background:var(--ink); color:var(--cream); padding:.7rem 1.1rem; border-radius:2px;
  transition:top .2s;
}
.skip:focus{ top:1rem; }

/* ---------- 3. UTILIDADES ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.section{ scroll-margin-top:calc(var(--header-h) - 18px); padding-block:var(--section); }
section[id]{ scroll-margin-top:calc(var(--header-h) + 12px); }
.section--tint{ background:var(--cream); }
.section--dark{ background:var(--night); color:var(--cream); }

.eyebrow{
  font-size:var(--step--1);
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--terra);
  display:flex; align-items:center; gap:.75rem;
  margin-bottom:1.25rem;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:currentColor; opacity:.6; }
.eyebrow--light{ color:var(--gold); }

.s-head{ margin-bottom:clamp(2.2rem,1.4rem + 3vw,4rem); }
.s-head--split{
  display:grid; gap:clamp(1.2rem,1rem + 2vw,3rem);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:end;
}
.s-title{
  font-family:var(--serif);
  font-weight:300;
  font-size:var(--step-3);
  line-height:1.06;
  letter-spacing:-.02em;
  font-variation-settings:"SOFT" 0,"WONK" 0;
}
.s-title em{ font-style:italic; color:var(--terra); }
.s-title--light{ color:var(--cream); }
.s-title--light em{ color:var(--gold); }
.s-lead{
  max-width:44ch;
  color:var(--muted);
  font-size:var(--step-0);
  line-height:1.75;
}
.s-lead--light{ color:rgba(247,242,233,.72); }
.s-lead b{ color:var(--ink-soft); font-weight:600; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:var(--step--1); font-weight:500; letter-spacing:.02em;
  border-bottom:1px solid currentColor; padding-bottom:2px;
  transition:gap .3s var(--ease), color .3s;
}
.link-arrow:hover{ gap:.9rem; color:var(--terra); }
.link-arrow--light:hover{ color:var(--gold); }
.hint{ font-size:.76rem; line-height:1.5; color:var(--muted); }

/* ---- Video de sección (patio) ---- */
.contact .clip{ grid-column:1 / -1; }
.clip{
  position:relative; margin-top:clamp(2rem,1rem + 3vw,3.5rem);
  border-radius:var(--radius); overflow:hidden;
  background:var(--night); box-shadow:0 30px 60px -50px rgba(20,32,26,.6);
}
.clip video{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.clip__play{
  position:absolute; inset:0; margin:auto;
  width:74px; height:74px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(12,19,16,.55); border:1px solid rgba(247,242,233,.55);
  color:var(--cream); cursor:pointer;
  backdrop-filter:blur(4px); transition:background .2s, transform .2s;
}
.clip__play:hover{ background:rgba(188,86,54,.85); transform:scale(1.05); }
.clip__play .ico{ width:26px; height:26px; margin-left:4px; }
.clip.is-playing .clip__play{ display:none; }
.clip__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:.85rem 1.1rem; font-size:.78rem; line-height:1.5; color:var(--cream);
  background:linear-gradient(180deg,rgba(12,19,16,.62),rgba(12,19,16,.80) 55%,rgba(12,19,16,.94));
}
.clip__cap b{ color:var(--gold); font-weight:500; }

.btn{
  --bg:var(--ink); --fg:var(--cream);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1.02rem 1.7rem;
  background:var(--bg); color:var(--fg);
  font-size:var(--step--1); font-weight:500; letter-spacing:.03em;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:transform .35s var(--ease), background .3s, color .3s, border-color .3s;
  white-space:nowrap;
}
.btn .ico{ transition:transform .35s var(--ease); }
.btn:hover{ transform:translateY(-2px); }
.btn:hover .ico{ transform:translateX(3px); }
.btn--solid{ --bg:var(--ink); --fg:var(--cream); }
.btn--solid:hover{ --bg:var(--terra); }
.btn--ghost{ --bg:transparent; --fg:currentColor; border-color:currentColor; }
.btn--ghost:hover{ --bg:var(--cream); --fg:var(--ink); border-color:var(--cream); }
.btn--sm{ padding:.7rem 1.15rem; font-size:.8rem; }
.btn--block{ width:100%; }

/* ---------- 4. PROGRESO + HEADER ---------- */
.progress{ position:fixed; inset:0 0 auto; height:2px; z-index:120; background:transparent; }
.progress span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--terra),var(--gold));
  transition:width .1s linear;
}

.header{
  position:fixed; inset:0 0 auto; z-index:130;
  height:var(--header-h);
  display:flex; align-items:center;
  color:var(--cream);
  transition:background .45s var(--ease), color .35s, box-shadow .35s, height .35s var(--ease);
}
.header.is-menu{
  background:transparent; box-shadow:none; color:var(--cream);
}
.header.is-menu::after{ background:transparent; }
.header::after{
  content:""; position:absolute; inset:auto 0 0; height:1px;
  background:rgba(247,242,233,.16); transition:background .35s;
}
.header.is-solid{
  height:70px;
  background:rgba(252,249,243,.94);
  color:var(--ink);
  box-shadow:0 6px 30px -18px rgba(12,19,16,.5);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.header.is-solid::after{ background:var(--line); }
.header__inner{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; gap:clamp(1rem,2vw,2.5rem);
}

.brand{ display:flex; align-items:center; gap:.7rem; margin-right:auto; }
.brand__logo{
  height:38px; width:auto; display:block; flex:none;
  background:var(--paper); padding:5px 7px; border-radius:3px;
  box-shadow:0 6px 18px rgba(12,19,16,.22);
}
.header.is-solid .brand__logo{ background:transparent; padding:0; box-shadow:none; }
.brand__mark{ width:34px; height:34px; color:var(--terra); flex:none; }
.header.is-solid .brand__mark{ color:var(--terra-dark); }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__name{
  font-family:var(--serif); font-size:1.22rem; font-weight:400;
  letter-spacing:.01em;
}
.brand__sub{
  font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
  opacity:.62; margin-top:.3rem;
}

.nav{ display:flex; align-items:center; gap:1.9rem; }
.nav a{
  font-size:.83rem; letter-spacing:.03em; font-weight:400;
  position:relative; padding-block:.4rem; opacity:.9;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav a:hover{ opacity:1; }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.header__cta{ flex:none; }

.burger{
  display:none; width:44px; height:44px; margin-right:-10px;
  position:relative; z-index:130;
}
.burger span{
  display:block; width:22px; height:1.5px; background:currentColor; margin:4.5px auto;
  transition:transform .35s var(--ease), opacity .2s;
}
.burger[aria-expanded="true"]{ color:var(--cream); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* menú móvil */
.menu{
  position:fixed; inset:0; z-index:105;
  background:var(--night); color:var(--cream);
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--pad);
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s;
}
.menu.is-open{ opacity:1; visibility:visible; }
.menu[hidden]{ display:none; }
.menu__nav{ display:flex; flex-direction:column; gap:.2rem; }
.menu__nav a{
  font-family:var(--serif); font-size:clamp(1.8rem,7vw,2.6rem); font-weight:300;
  padding-block:.35rem; border-bottom:1px solid rgba(247,242,233,.1);
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
.menu.is-open .menu__nav a{ opacity:1; transform:none; }
.menu.is-open .menu__nav a:nth-child(1){ transition-delay:.06s }
.menu.is-open .menu__nav a:nth-child(2){ transition-delay:.12s }
.menu.is-open .menu__nav a:nth-child(3){ transition-delay:.18s }
.menu.is-open .menu__nav a:nth-child(4){ transition-delay:.24s }
.menu.is-open .menu__nav a:nth-child(5){ transition-delay:.30s }
.menu.is-open .menu__nav a:nth-child(6){ transition-delay:.36s }
.menu.is-open .menu__nav a:nth-child(7){ transition-delay:.42s }
.menu__nav a:hover{ color:var(--gold); }
.menu__foot{ margin-top:2.4rem; display:grid; gap:1rem; }
.menu__foot .btn--solid{ background:var(--terra); }
.menu__foot .hint{ color:rgba(247,242,233,.55); text-align:center; }

/* ---------- 5. HERO ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  color:var(--cream);
  overflow:hidden;
  background:var(--night);
}
.hero__media{ position:absolute; inset:0; overflow:hidden; animation:heroZoom 28s ease-out both; }
.hero__media img{
  width:100%; height:calc(100% + 24vh); object-fit:cover; object-position:50% 42%;
  position:relative; top:-12vh;
  transform:translate3d(0,0,0) scale(1.04);
  will-change:transform;
}
.hero__media video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 45%;
  opacity:0; transition:opacity .6s ease;
}
.hero__media video.is-live{ opacity:1; }
.hero__media video.is-off{ display:none; }
.hero__controls{ display:flex; gap:.55rem; margin-top:1.1rem; }
.vidpause{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; margin-top:0;
  border:1px solid rgba(247,242,233,.4); border-radius:50%;
  color:var(--cream); background:rgba(12,19,16,.35);
  backdrop-filter:blur(4px); cursor:pointer;
  transition:background .2s, border-color .2s;
}
.vidpause:hover{ background:rgba(12,19,16,.65); border-color:var(--cream); }
.vidpause--sound[aria-pressed="true"]{ background:var(--terra); border-color:var(--terra); color:#fff; }
/* aviso "Toca para escuchar" junto al botón de sonido */
.sound-hint{
  align-self:center; margin-left:.15rem;
  font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--cream); opacity:.85;
  padding:.35rem .6rem; border-radius:99px;
  background:rgba(12,19,16,.55); backdrop-filter:blur(4px);
  animation:hintPulse 2.2s ease-in-out infinite;
}
@keyframes hintPulse{ 0%,100%{ opacity:.55 } 50%{ opacity:.95 } }
@media (max-width:700px){ .sound-hint{ font-size:.62rem; } }
.vidpause .ico{ width:13px; height:13px; }
/* El velo quedó muy bajo a pedido del cliente: el texto se defiende con contorno */
.hero__title,
.hero__title em{
  paint-order:stroke fill;
  -webkit-text-stroke:5px rgba(8,13,11,.92);
  text-shadow:0 2px 14px rgba(8,13,11,.75), 0 0 30px rgba(8,13,11,.45);
}
.hero__lead{
  paint-order:stroke fill;
  -webkit-text-stroke:3px rgba(8,13,11,.85);
  text-shadow:0 2px 10px rgba(8,13,11,.7);
}
.eyebrow--light{ text-shadow:0 1px 10px rgba(8,13,11,.9); }
/* Solo en el héroe: sobre el cielo claro el dorado se perdía. El contorno oscuro
   lo define sin cambiar el color de marca (mismo tratamiento que el titular). */
.hero .eyebrow--light{
  font-size:clamp(.86rem,.8rem + .3vw,1rem);
  letter-spacing:.17em;
  -webkit-text-stroke:2px rgba(8,13,11,.92);
  paint-order:stroke fill;
  text-shadow:0 2px 10px rgba(8,13,11,.6);
}
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(12,19,16,.25) 0%, rgba(12,19,16,.23) 26%, rgba(12,19,16,.18) 46%, rgba(12,19,16,.11) 64%, rgba(12,19,16,.05) 80%, rgba(12,19,16,.02) 92%, transparent 100%),
    linear-gradient(180deg, rgba(12,19,16,.16) 0%, rgba(12,19,16,.02) 34%, rgba(12,19,16,.13) 70%, rgba(12,19,16,.30) 100%);
}
.hero__content{
  position:relative; z-index:2;
  padding-top:calc(var(--header-h) + 4vh);
  padding-bottom:clamp(2.5rem,2rem + 3vw,5rem);
}
.hero__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.3rem,1.2rem + 4.6vw,5.1rem);
  line-height:1.02; letter-spacing:-.03em;
  max-width:16ch;
  margin-bottom:2rem;
  text-wrap:balance;
}
.hero__title span{ display:block; }
.hero__title em{ font-style:italic; color:var(--gold); }
.hero__lead{
  max-width:52ch; font-size:clamp(1rem,.95rem + .3vw,1.16rem);
  line-height:1.7; color:rgba(247,242,233,.86);
  margin-bottom:2.1rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; }
.hero__actions .btn--solid{ background:var(--terra); }
.hero__actions .btn--solid:hover{ background:var(--cream); color:var(--ink); }
.hero__actions .btn--ghost{ color:var(--cream); border-color:rgba(247,242,233,.45); }
.hero__actions .btn--ghost:hover{ background:rgba(247,242,233,.12); color:var(--cream); border-color:rgba(247,242,233,.7); }

.hero__strip{
  position:relative; z-index:2;
  border-top:1px solid rgba(247,242,233,.18);
  background:linear-gradient(180deg,rgba(12,19,16,.94) 0%,rgba(12,19,16,.86) 40%,rgba(12,19,16,.78) 100%);
  backdrop-filter:blur(6px);
}
/* Fundido que sube desde la franja: disuelve el texto quemado del video
   (queda justo encima) sin cortar el encuadre con un borde duro. */
.hero__strip::before{
  content:""; position:absolute; left:0; right:0; bottom:100%; height:88px;
  background:linear-gradient(180deg,rgba(12,19,16,0) 0%,rgba(12,19,16,.85) 45%,rgba(12,19,16,.95) 100%);
  pointer-events:none;
}
/* Subtítulos del héroe: el video los trae quemados en la franja baja y los tapa
   la barra de datos, así que se leen aquí, como texto del sitio. */
.hero__subs{
  display:none;
  margin:0; padding:.7rem 1.25rem .05rem;
  min-height:3em;
  text-align:center;
  font-size:clamp(.88rem,.84rem + .3vw,1.02rem);
  line-height:1.4;
  color:rgba(247,242,233,.92);
  letter-spacing:.005em;
}
.hero.is-video .hero__subs{ display:block; }
.hero__strip-in{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)) auto;
  align-items:center; gap:clamp(1.2rem,3vw,3.2rem);
  padding-block:1.15rem;
}
.fact{ display:flex; flex-direction:column; gap:.1rem; }
.fact b{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.3rem,1.1rem + .8vw,1.85rem);
  line-height:1; letter-spacing:-.01em; font-variant-numeric:tabular-nums;
}
.fact span{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(247,242,233,.6); }
.fact--cta{ justify-self:end; }
.fact--cta .link-arrow{ font-size:.78rem; color:var(--gold); border-color:rgba(201,164,107,.5); }

.scroll-cue{
  position:absolute; right:var(--pad); bottom:118px; z-index:3;
  width:34px; height:56px; border:1px solid rgba(247,242,233,.35); border-radius:99px;
  display:none;
}
.scroll-cue span{
  position:absolute; left:50%; top:11px; width:3px; height:3px; margin-left:-1.5px;
  background:var(--cream); border-radius:50%;
  animation:cue 2s infinite ease-in-out;
}

/* ---------- 6. MANIFIESTO ---------- */
.statement__grid{
  display:grid; grid-template-columns:minmax(0,.24fr) minmax(0,.76fr);
  gap:clamp(1rem,2vw,3rem);
}
.statement__text{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.55rem,1.1rem + 2.2vw,2.9rem);
  line-height:1.22; letter-spacing:-.02em;
  max-width:24ch;
}
.statement__text .dim{ color:var(--sand-2); }
.statement__text em{ font-style:italic; color:var(--terra); }
.statement__sub{
  margin-top:1.8rem; max-width:46ch; color:var(--muted); line-height:1.8;
  padding-left:1.4rem; border-left:1px solid var(--line);
}

/* ---------- 7. COMPARADOR ---------- */
.compare{ margin-top:clamp(1.5rem,1rem + 2vw,3rem); }
.compare__head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.2rem; padding-bottom:1.4rem; border-bottom:1px solid var(--line);
}
.compare__intro{ font-size:var(--step--1); color:var(--muted); letter-spacing:.02em; }
.switch{
  position:relative; display:inline-flex; padding:4px;
  border:1px solid var(--line); border-radius:99px; background:var(--paper);
}
.switch__opt{
  position:relative; z-index:2; padding:.5rem 1.15rem; border-radius:99px;
  font-size:.8rem; letter-spacing:.04em; color:var(--muted);
  transition:color .35s;
}
.switch__opt.is-on{ color:var(--cream); }
.switch__pill{
  position:absolute; z-index:1; top:4px; bottom:4px; left:4px;
  width:calc(50% - 4px); background:var(--ink); border-radius:99px;
  transition:transform .45s var(--ease), width .45s var(--ease);
}
.switch[data-mode="villa"] .switch__pill{ transform:translateX(100%); }

.compare__grid{ margin-top:.5rem; }
.crow{
  display:grid; grid-template-columns:minmax(120px,.55fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(.8rem,2vw,2.4rem);
  padding-block:1.35rem;
  border-bottom:1px solid var(--line);
  align-items:start;
}
.crow h3{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; color:var(--muted); padding-top:.2rem;
}
.crow__before,.crow__after{ transition:opacity .5s var(--ease), transform .5s var(--ease), color .5s; }
.crow__before{ color:var(--muted); text-decoration:line-through; text-decoration-thickness:1px; text-decoration-color:rgba(108,122,112,.45); }
.crow__after{ color:var(--ink); font-weight:400; }
.compare[data-mode="hoy"] .crow__after{ opacity:.3; }
.compare[data-mode="villa"] .crow__before{ opacity:.3; }
.compare[data-mode="villa"] .crow__after{ color:var(--terra-dark); }

/* ---------- 8. MOMENTOS ---------- */
.moments{ display:grid; gap:clamp(1.5rem,1rem + 3vw,4rem); }
.moment{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(1.2rem,1rem + 3vw,4rem); align-items:center;
}
.moment:nth-child(even){ direction:rtl; }
.moment:nth-child(even) > *{ direction:ltr; }
.moment__img{ overflow:hidden; border-radius:var(--radius); position:relative; aspect-ratio:16/10; background:var(--sand); }
.moment__img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease);
  will-change:transform;
}
.moment:hover .moment__img img{ transform:scale(1.045); }
.moment__body{ max-width:42ch; }
.moment__n{
  font-family:var(--serif); font-size:.85rem; letter-spacing:.2em;
  color:var(--terra); display:block; margin-bottom:.9rem;
}
.moment__body h3{
  font-family:var(--serif); font-weight:400; font-size:var(--step-2);
  line-height:1.15; letter-spacing:-.015em; margin-bottom:.9rem;
}
.moment__body p{ color:var(--muted); line-height:1.8; }

/* ---------- 9. CONJUNTO ---------- */
.conjunto{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(1.5rem,1rem + 3vw,3.5rem); align-items:start;
}
.conjunto__plan{ position:relative; }
.conjunto__plan img{ width:100%; border-radius:var(--radius); }
.conjunto__plan figcaption{
  margin-top:.9rem; font-size:.74rem; letter-spacing:.06em;
  color:rgba(247,242,233,.5);
}
.conjunto__stats{ display:grid; gap:1.5rem; padding-top:.5rem; }
.stat{ padding-bottom:1.35rem; border-bottom:1px solid var(--line-light); }
.stat b{
  font-family:var(--serif); font-weight:300; font-size:clamp(2rem,1.5rem + 1.6vw,2.9rem);
  line-height:1; display:block; color:var(--cream); font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.stat span{
  display:block; margin-top:.45rem; font-size:.72rem; letter-spacing:.13em;
  text-transform:uppercase; color:rgba(247,242,233,.55);
}
.amenities{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1rem,1.4vw,2rem);
  margin-top:clamp(2.5rem,2rem + 3vw,4.5rem);
  padding-top:clamp(1.8rem,2vw,2.8rem);
  border-top:1px solid var(--line-light);
}
.amenities li{ display:flex; gap:.85rem; align-items:flex-start; }
.amenities .ico{ width:22px; height:22px; color:var(--gold); margin-top:.2rem; }
.amenities b{ display:block; font-size:.92rem; font-weight:500; margin-bottom:.2rem; }
.amenities span{ font-size:.78rem; line-height:1.55; color:rgba(247,242,233,.55); }

/* ---------- 10. LA CASA ---------- */
.house{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.5rem,1rem + 3vw,4rem); align-items:start;
}
.house__plan{ position:sticky; top:calc(var(--header-h) + 1.5rem); }
.house__plan-frame{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:var(--cream); box-shadow:0 30px 60px -50px rgba(20,32,26,.6);
  cursor:pointer;
}
.plan-canvas{ position:relative; }
.plan-canvas img{ display:block; width:100%; }
.house__plan-frame img{ width:100%; }
.house__hint{
  display:flex; align-items:center; gap:.5rem; margin-top:.9rem;
  font-size:.76rem; color:var(--muted); letter-spacing:.03em;
}
.house__hint .ico{ width:14px; height:14px; color:var(--terra); }

/* zonas de resaltado del plano (se encienden al tocar un punto) */
.zone{
  position:absolute;
  left:var(--x1); top:var(--y1);
  width:calc(var(--x2) - var(--x1));
  height:calc(var(--y2) - var(--y1));
  border-radius:4px;
  background:rgba(188,86,54,.30);
  box-shadow:inset 0 0 0 1.5px rgba(188,86,54,.85);
  opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease);
}
.zone.is-on{ opacity:1; }
.house__plan-frame.is-focus img{ filter:brightness(.72) saturate(.85); transition:filter .35s var(--ease); }

.hotspot{
  position:absolute; left:var(--x); top:var(--y);
  width:30px; height:30px; margin:-15px 0 0 -15px;
  display:grid; place-items:center; border-radius:50%;
}
.hotspot span{
  width:11px; height:11px; border-radius:50%; background:var(--terra);
  box-shadow:0 0 0 0 rgba(188,86,54,.5);
  animation:pulse 2.6s infinite;
  transition:transform .3s var(--ease);
}
.hotspot:hover span,.hotspot.is-on span{ transform:scale(1.5); background:var(--terra-dark); }
.hotspot:focus-visible{ outline-offset:2px; }

.roomcard{
  position:absolute; right:.8rem; bottom:.8rem; z-index:3;
  max-width:min(58%, 430px);
  padding:.85rem 1rem;
  background:rgba(12,19,16,.92); color:var(--cream);
  border-radius:var(--radius); backdrop-filter:blur(3px);
  display:grid; gap:.2rem;
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.roomcard.is-on{ opacity:1; transform:none; }
/* esquina contraria al ambiente elegido, para no tapar el área resaltada */
.roomcard.at-left{ right:auto; left:.8rem; }
.roomcard.at-top{ bottom:auto; top:.8rem; }
.roomcard b{ font-family:var(--serif); font-weight:400; font-size:1rem; color:var(--gold); }
.roomcard p{ font-size:.78rem; color:rgba(247,242,233,.8); line-height:1.5; }

.tabs{ display:flex; gap:.2rem; border-bottom:1px solid var(--line); margin-bottom:1.6rem; flex-wrap:wrap; }
.tab{
  padding:.7rem .1rem; margin-right:1.4rem;
  font-size:.82rem; letter-spacing:.03em; color:var(--muted);
  border-bottom:1px solid transparent; margin-bottom:-1px;
  transition:color .3s, border-color .3s;
}
.tab.is-on{ color:var(--ink); border-color:var(--terra); }
.tabpanel{ animation:fadeIn .4s var(--ease); }
.specs{ display:grid; }
.specs > div{
  display:grid; grid-template-columns:minmax(90px,.7fr) minmax(0,1.3fr);
  gap:1rem; padding-block:.78rem; border-bottom:1px solid var(--line);
}
.specs dt{ font-size:.76rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.specs dd{ font-size:.92rem; }
.house__detail .link-arrow{ margin-top:1.8rem; }

/* ---------- 11. GALERÍA ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.8rem; }
.chip{
  padding:.52rem 1rem; border:1px solid var(--line); border-radius:99px;
  font-size:.78rem; letter-spacing:.03em; color:var(--muted);
  transition:all .3s var(--ease);
}
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip.is-on{ background:var(--ink); border-color:var(--ink); color:var(--cream); }

.gallery{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.5rem,.4rem + .6vw,.9rem);
}
.gal{
  position:relative; overflow:hidden; border-radius:var(--radius);
  aspect-ratio:1/1; background:var(--sand);
  padding:0; text-align:left;
}
.gal--wide{ grid-column:span 2; aspect-ratio:2/1; }
.gal img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .9s var(--ease), filter .5s;
}
.gal:hover img{ transform:scale(1.06); }
.gal__cap{
  position:absolute; inset:auto 0 0; z-index:2;
  padding:1.4rem .9rem .8rem;
  font-size:.74rem; letter-spacing:.05em; color:var(--cream);
  background:linear-gradient(0deg,rgba(12,19,16,.82),transparent);
  opacity:0; transform:translateY(8px);
  transition:opacity .35s, transform .35s var(--ease);
}
.gal:hover .gal__cap,.gal:focus-visible .gal__cap{ opacity:1; transform:none; }
.gal.is-hidden{ display:none; }

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(8,12,10,.96);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:1rem; padding:clamp(1rem,3vw,2.5rem);
  animation:fadeIn .3s ease;
}
.lightbox[hidden]{ display:none; }
.lightbox__fig{ display:grid; gap:1rem; justify-items:center; max-height:100%; }
.lightbox__fig img{
  max-width:100%; max-height:78vh; width:auto; object-fit:contain;
  border-radius:2px;
}
.lightbox__fig figcaption{ font-size:.8rem; color:rgba(247,242,233,.65); letter-spacing:.05em; }
.lightbox__close{
  position:absolute; top:1rem; right:1rem; width:46px; height:46px;
  display:grid; place-items:center; color:var(--cream); border-radius:50%;
  border:1px solid rgba(247,242,233,.2);
}
.lightbox__nav{
  width:48px; height:48px; display:grid; place-items:center;
  color:var(--cream); border:1px solid rgba(247,242,233,.2); border-radius:50%;
  transition:background .3s, color .3s;
}
.lightbox__nav:hover,.lightbox__close:hover{ background:var(--cream); color:var(--ink); }

/* ---------- 12. PLANES ---------- */
.plans{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,.45fr);
  gap:clamp(1.2rem,1rem + 2vw,2.5rem); align-items:start;
}
.plans__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.6rem,.5rem + .6vw,1rem);
}
.plan{ position:relative; display:block; cursor:pointer; }
.plan-help{
  display:flex; flex-direction:column; justify-content:center; gap:.75rem;
  padding:1.35rem 1.25rem; border:1px dashed var(--sand-2); border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(231,219,200,.22),transparent);
}
.plan-help h3{ font-family:var(--serif); font-weight:400; font-size:1.12rem; line-height:1.22; letter-spacing:-.01em; }
.plan-help p{ font-size:.78rem; color:var(--muted); line-height:1.55; }
.plan-help .link-arrow{ margin-top:.15rem; font-size:.78rem; }
.plan input{
  position:absolute; opacity:0; width:1px; height:1px; pointer-events:none;
}
.plan__body{
  display:flex; flex-direction:column; height:100%;
  padding:1.35rem 1.25rem 1.15rem;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--paper);
  transition:border-color .35s, background .35s, transform .35s var(--ease), box-shadow .35s;
  position:relative; overflow:hidden;
}
.plan__body::after{
  content:""; position:absolute; inset:auto 0 0; height:3px; background:var(--terra);
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);
}
.plan:hover .plan__body{ border-color:var(--sand-2); transform:translateY(-3px); }
.plan input:checked + .plan__body{
  border-color:var(--ink); background:#fff;
  box-shadow:0 26px 50px -40px rgba(20,32,26,.8);
}
.plan input:checked + .plan__body::after{ transform:scaleX(1); }
.plan input:focus-visible + .plan__body{ outline:2px solid var(--terra); outline-offset:2px; }

.plan__tag{
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--terra); font-weight:600; margin-bottom:.7rem;
}
.plan__name{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.plan__term{
  font-family:var(--serif); font-weight:400; font-size:1.5rem;
  line-height:1.1; letter-spacing:-.01em; margin:.15rem 0 1rem;
}
.plan__cuota{
  font-family:var(--serif); font-weight:300; font-size:clamp(1.7rem,1.4rem + 1vw,2.2rem);
  line-height:1; letter-spacing:-.02em; display:flex; align-items:baseline;
  font-variant-numeric:tabular-nums;
}
.plan__cuota i{ font-size:.5em; font-style:normal; margin-right:.06em; color:var(--muted); }
.plan__cuota small{ font-size:.52em; }
.plan__per{ font-size:.72rem; color:var(--muted); margin-top:.45rem; line-height:1.4; min-height:2.2em; }
.plan__meta{
  display:flex; flex-direction:column; gap:.18rem;
  margin-top:auto; padding-top:1rem; border-top:1px solid var(--line);
  font-size:.72rem; color:var(--muted); letter-spacing:.02em;
}
.plan__meta span:last-child{ color:var(--ink-soft); }

.summary{
  position:sticky; top:calc(var(--header-h) + 1.5rem);
  background:var(--ink); color:var(--cream);
  border-radius:var(--radius); padding:1.6rem 1.5rem;
  display:grid; gap:1.1rem;
}
.summary__head .eyebrow{ color:var(--gold); margin-bottom:.5rem; }
.summary__head h3{
  font-family:var(--serif); font-weight:400; font-size:1.45rem; line-height:1.15;
  letter-spacing:-.01em;
}
.summary__rows{ display:grid; gap:.15rem; }
.summary__rows > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding-block:.62rem; border-bottom:1px solid var(--line-light);
}
.summary__rows dt{ font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(247,242,233,.55); }
.summary__rows dd{
  font-family:var(--serif); font-size:1.02rem; font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.summary__total dd{ font-size:1.32rem; color:var(--gold); }
.summary__note{ font-size:.74rem; color:rgba(247,242,233,.6); line-height:1.6; }
.summary .btn--solid{
  background:var(--terra); margin-top:.2rem;
  white-space:normal; min-width:0; line-height:1.3;
  padding-inline:1rem; text-align:center;
}
.summary .btn--solid:hover{ background:var(--cream); color:var(--ink); }
.summary .hint{ color:rgba(247,242,233,.45); }
.summary .hint b{ color:rgba(247,242,233,.8); }

.disclaimer{
  margin-top:clamp(1.8rem,2vw,2.8rem); padding-top:1.2rem; border-top:1px solid var(--line);
  font-size:.72rem; line-height:1.7; color:var(--muted); max-width:78ch;
}

/* ---------- 13. UBICACIÓN ---------- */
.location{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(1.2rem,1rem + 2.5vw,3rem); align-items:stretch;
}
.location__map{
  border-radius:var(--radius); overflow:hidden; min-height:clamp(300px,42vw,480px);
  background:var(--ink-soft); position:relative;
}
.location__map iframe{ width:100%; height:100%; min-height:inherit; border:0; filter:saturate(.85) contrast(1.02); }
.location__list{ display:flex; flex-direction:column; align-content:start; }
.dist{
  display:flex; align-items:baseline; gap:1rem;
  padding-block:.85rem; border-bottom:1px solid var(--line-light);
}
.dist b{
  font-family:var(--serif); font-weight:300; font-size:1.5rem; line-height:1;
  min-width:4.2rem; letter-spacing:-.01em;
}
.dist b small{ font-size:.5em; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); }
.dist span{ font-size:.82rem; line-height:1.5; color:rgba(247,242,233,.66); }
.location__list .link-arrow{ margin-top:auto; padding-top:1.4rem; align-self:flex-start; }

/* ---------- 14. CONTACTO ---------- */
.contact{
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(1.5rem,1rem + 4vw,5rem); align-items:start;
  position:relative; z-index:2;
}
/* sección de contacto con video de fondo, tipo héroe */
.contact--video{
  position:relative; overflow:hidden;
  background:var(--night); color:var(--cream);
  min-height:88svh; display:flex; align-items:center;
}
.contact__bg{ position:absolute; inset:0; z-index:0; }
.contact__bg video{ width:100%; height:100%; object-fit:cover; object-position:50% 55%; }
.contact__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(12,19,16,.90) 0%, rgba(12,19,16,.74) 42%, rgba(12,19,16,.34) 72%, rgba(12,19,16,.12) 100%),
    linear-gradient(180deg, rgba(12,19,16,.55) 0%, rgba(12,19,16,.10) 40%, rgba(12,19,16,.55) 100%);
}
.contact--video .s-title{ color:var(--cream); }
.contact--video .s-title em{ color:var(--gold); }
.contact--video .s-lead{ color:rgba(247,242,233,.82); }
.contact--video .eyebrow{ color:var(--gold); }
.contact--video .contact__data b{ color:rgba(247,242,233,.55); }
.contact--video .contact__data span{ color:rgba(247,242,233,.9); }
.contact--video .contact__data .ico{ color:var(--gold); }
.contact--video .rif{ color:rgba(247,242,233,.5); border-top-color:rgba(247,242,233,.2); }
.contact--video .form{ background:rgba(252,249,243,.97); color:var(--ink); }
.contact .s-title{ font-size:clamp(2rem,1.5rem + 2.4vw,3.4rem); margin-bottom:1.2rem; }
.contact__wa{ margin-top:clamp(1.2rem,1.6vw,1.9rem); }
.contact__data{ display:grid; gap:1.05rem; margin-top:clamp(1.2rem,1.6vw,1.9rem); }
.contact__data li{ display:flex; gap:.85rem; align-items:flex-start; }
.contact__data .ico{ width:19px; height:19px; color:var(--terra); margin-top:.25rem; }
.contact__data b{ display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.15rem; }
.contact__data span{ font-size:.92rem; line-height:1.6; }
.rif{
  margin-top:1.8rem; padding-top:1.2rem; border-top:1px solid var(--line);
  font-size:.74rem; letter-spacing:.06em; color:var(--muted);
}

.form{
  background:var(--cream); padding:clamp(1.2rem,1rem + 1.5vw,2.2rem);
  border-radius:var(--radius); border:1px solid var(--line);
  display:grid; gap:1rem;
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field{ display:grid; gap:.4rem; }
.field > span{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.field input,.field select,.field textarea{
  width:100%; padding:.82rem .9rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  font-size:.92rem; color:var(--ink);
  transition:border-color .25s, background .25s, box-shadow .25s;
  appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C7A70' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center; background-size:16px;
  padding-right:2.2rem;
}
.field textarea{ resize:vertical; min-height:96px; }
.field input::placeholder,.field textarea::placeholder{ color:#9AA69E; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--ink); background:#fff;
  box-shadow:0 0 0 3px rgba(20,32,26,.06);
}
.field.is-error input,.field.is-error select,.field.is-error textarea{ border-color:var(--terra); }
.check{ display:flex; gap:.6rem; align-items:flex-start; font-size:.78rem; color:var(--muted); line-height:1.5; cursor:pointer; }
.check input{ width:16px; height:16px; margin-top:.15rem; accent-color:var(--terra); flex:none; }
.form .btn--solid{ background:var(--ink); margin-top:.3rem; }
.form .btn--solid:hover{ background:var(--terra); }
.form__status{ font-size:.8rem; color:var(--olive); min-height:1.2em; }
.form__status.is-bad{ color:var(--terra-dark); }
.form__status.is-ok{ color:var(--olive); font-weight:600; }
/* campo trampa para robots: invisible para personas, nunca oculto con display:none
   (algunos robots lo detectan y lo saltan) */
.form .hp{ position:absolute!important; left:-9999px!important; top:auto; width:1px; height:1px; opacity:0; pointer-events:none; }
.form .hint{ text-align:center; }

/* ---------- 15. FOOTER ---------- */
.footer{
  background:var(--night); color:var(--cream);
  padding-block:clamp(2.5rem,3vw,4rem) calc(clamp(2.5rem,3vw,4rem) + 60px);
  border-top:1px solid var(--line-light);
}
.footer__inner{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) minmax(0,.9fr);
  gap:clamp(1.5rem,2vw,3rem); align-items:start;
}
.footer__brand .brand__name{ font-size:1.6rem; }
.footer__brand p{ margin-top:.7rem; font-size:.8rem; line-height:1.7; color:rgba(247,242,233,.5); }
.footer__nav{ display:grid; grid-template-columns:1fr 1fr; gap:.45rem 1.5rem; align-content:start; }
.footer__nav a{ font-size:.82rem; color:rgba(247,242,233,.7); transition:color .25s; }
.footer__nav a:hover{ color:var(--gold); }
.footer__legal{ display:grid; gap:.35rem; font-size:.74rem; color:rgba(247,242,233,.45); }
.footer__credit b{ color:rgba(247,242,233,.75); font-weight:500; }

/* ---------- 16. CTA STICKY ---------- */
.sticky-cta{
  position:fixed; inset:auto 0 0; z-index:90;
  display:none; gap:.6rem; padding:.7rem var(--pad) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(252,249,243,.95);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .45s var(--ease);
}
.sticky-cta.is-on{ transform:none; }
.sticky-cta .btn{ flex:1; }
.sticky-cta .btn--ghost{ border-color:var(--line); }
.sticky-cta .btn--solid{ background:var(--terra); }

/* ---------- 16-bis. BOTÓN FLOTANTE DE WHATSAPP ---------- */
.wa-float{
  position:fixed; left:20px; bottom:20px; z-index:95;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center;
  background:#25D366; color:#fff;
  box-shadow:0 12px 30px -10px rgba(12,19,16,.55), 0 0 0 0 rgba(37,211,102,.55);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wa-float svg{ width:31px; height:31px; }
.wa-float:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 16px 34px -10px rgba(12,19,16,.6), 0 0 0 10px rgba(37,211,102,.14); }
.wa-float:focus-visible{ outline:2px solid var(--cream); outline-offset:3px; }
.wa-float::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 rgba(37,211,102,.5);
  animation:waPulse 2.8s infinite;
}
@keyframes waPulse{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5); }
  70%{ box-shadow:0 0 0 16px rgba(37,211,102,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}

/* ---------- 17. ANIMACIONES ---------- */
.js .reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay:var(--d,0s);
}
.js .reveal.is-in{ opacity:1; transform:none; }

/* hero: no depende de JS */
.hero .reveal{ opacity:1; transform:none; animation:heroIn 1s var(--ease) both; animation-delay:var(--d,0s); }

@keyframes heroIn{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:none; } }
@keyframes heroZoom{ from{ transform:scale(1.12) translate3d(0,0,0); } to{ transform:scale(1.04) translate3d(0,0,0); } }
@keyframes cue{ 0%{ transform:translateY(0); opacity:0 } 30%{ opacity:1 } 100%{ transform:translateY(22px); opacity:0 } }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(188,86,54,.45) } 70%{ box-shadow:0 0 0 12px rgba(188,86,54,0) } 100%{ box-shadow:0 0 0 0 rgba(188,86,54,0) } }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .js .reveal{ opacity:1 !important; transform:none !important; }
}

/* ---------- 18. RESPONSIVE ---------- */
@media (min-width:1080px){
  .vidpause{ width:50px; height:50px; }
  .vidpause .ico{ width:17px; height:17px; }
}
@media (min-width:1200px){
  .scroll-cue{ display:block; }
}

@media (max-width:1080px){
  .nav{ gap:1.4rem; }
  .nav a{ font-size:.78rem; }
  .amenities{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .plans{ grid-template-columns:1fr; }
  .summary{ position:static; }
  .plans__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:900px){
  :root{ --header-h:72px; }
  /* en pantalla chica la tarjeta de ambiente sale del plano y va debajo:
     encima tapaba justo el ambiente seleccionado */
  .roomcard{
    position:static; left:auto; right:auto; bottom:auto; top:auto;
    max-width:none; margin:.55rem .6rem .7rem;
  }
  .nav,.header__cta{ display:none; }
  .burger{ display:block; }

  .hero__strip-in{ grid-template-columns:1fr 1fr; gap:.9rem 1rem; padding-block:1rem; }
  .fact--cta{ grid-column:1 / -1; justify-self:start; }

  .s-head--split{ grid-template-columns:1fr; }
  .s-lead{ max-width:100%; }

  .statement__grid{ grid-template-columns:1fr; gap:1.2rem; }
  .statement__text{ max-width:100%; }

  .crow{ grid-template-columns:1fr; gap:.5rem; padding-block:1.2rem; }
  .crow h3{ margin-bottom:.2rem; }
  .crow__before::before{ content:"Hoy: "; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--terra); }
  .crow__after::before{ content:"Con Villarcangel: "; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--olive); }

  .moment,.moment:nth-child(even){ grid-template-columns:1fr; direction:ltr; }
  .moment:nth-child(even) .moment__img{ order:-1; }
  .moment__body{ max-width:100%; }

  .conjunto,.house,.location,.contact{ grid-template-columns:1fr; }
  .house__plan{ position:static; }
  .location__map{ min-height:320px; }

  .gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gal--wide{ grid-column:span 2; aspect-ratio:16/10; }

  .plans__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer__inner{ grid-template-columns:1fr; }
  .footer__nav{ grid-template-columns:1fr 1fr; max-width:340px; }
  .sticky-cta{ display:flex; }
  .footer{ padding-bottom:calc(clamp(2.5rem,3vw,4rem) + 76px); }
  /* el botón flotante sube para no chocar con la barra fija de abajo */
  .wa-float{ bottom:calc(84px + env(safe-area-inset-bottom)); left:16px; width:54px; height:54px; }
  .wa-float svg{ width:29px; height:29px; }
}

@media (max-width:560px){
  .hero__title{ font-size:clamp(2rem,1.3rem + 6vw,2.9rem); max-width:100%; }
  .hero__lead{ font-size:.95rem; }
  .hero__actions .btn{ flex:1; }
  .hero__strip-in{ grid-template-columns:1fr 1fr; }
  .fact b{ font-size:1.3rem; }
  .fact span{ font-size:.62rem; letter-spacing:.08em; }

  .plans__grid{ grid-template-columns:1fr; }
  .plan__body{ padding:1.15rem 1.1rem 1rem; }
  .plan__per{ min-height:0; }

  .form__row{ grid-template-columns:1fr; }
  .amenities{ grid-template-columns:1fr; }
  .lightbox{ grid-template-columns:1fr; grid-template-rows:1fr auto; gap:.5rem; }
  .lightbox__nav{ display:none; }
  .lightbox__fig img{ max-height:70vh; }
  .switch__opt{ padding:.45rem .85rem; font-size:.74rem; }
  .summary{ padding:1.3rem 1.15rem; }
}