/* ═══════════════════════════════════════════════════════════
   PRADO NORTE CONDOMINIO — landing
   Paleta tomada de los renders del proyecto: verde monte,
   lima de la grama, arena del atardecer.
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:      #16241C;
  --forest:   #1B3A2C;
  --forest-2: #102319;
  --moss:     #2F6B45;
  --moss-dk:  #235436;
  --lime:     #A9C24F;
  --lime-dk:  #8CA53B;
  --sand:     #E2D9C3;
  --sand-hi:  #EEE7D6;
  --paper:    #EFF2E8;
  --paper-hi: #F7F9F2;
  --white:    #FDFDFB;

  --ink-70: rgba(22,36,28,.72);
  --ink-50: rgba(22,36,28,.52);
  --line:   rgba(22,36,28,.14);
  --line-s: rgba(22,36,28,.07);
  --lt-70:  rgba(255,255,255,.74);
  --lt-45:  rgba(255,255,255,.45);
  --lt-line:rgba(255,255,255,.16);

  --fd: "Archivo", system-ui, sans-serif;
  --fb: "Instrument Sans", system-ui, sans-serif;
  --fm: "JetBrains Mono", ui-monospace, monospace;

  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 44px);
  --hdr-h: 72px;

  --e:  cubic-bezier(.2,.8,.25,1);
  --e2: cubic-bezier(.65,0,.35,1);
  --r:  14px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 1.0625rem/1.65 var(--fb);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
[hidden]{ display:none !important; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2.5px solid var(--lime); outline-offset:3px; border-radius:3px; }

.skip{
  position:fixed; left:12px; top:-70px; z-index:200; background:var(--ink); color:#fff;
  padding:10px 16px; border-radius:8px; text-decoration:none; transition:top .2s;
}
.skip:focus{ top:12px; }

/* ── tipografía ───────────────────────────────────────────── */
.h2{
  font-family:var(--fd); font-weight:680; font-stretch:118%;
  font-size:clamp(1.85rem,3.6vw,3.05rem); line-height:1.02;
  letter-spacing:-.022em; margin:.28em 0 .5em; text-wrap:balance;
}
.h2--light{ color:var(--white); }
.lede{ font-size:clamp(1.02rem,1.5vw,1.16rem); color:var(--ink-70); max-width:56ch; margin:0 0 1.4em; }
.sec--dark .lede{ color:var(--lt-70); }
.lede--sm{ font-size:1rem; max-width:34ch; margin:0; }
.prose p{ margin:0 0 1.05em; color:var(--ink-70); max-width:60ch; }
.prose b{ color:var(--ink); font-weight:600; }
.num{ font-family:var(--fm); font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.num--hi{ color:var(--moss); }
.num--lime{ color:var(--lime-dk); }

.eyebrow{
  font-family:var(--fm); font-size:.82rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--moss); display:flex; align-items:flex-start; gap:.65em; margin:0;
}
.eyebrow--light{ color:var(--lime); }
.dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; margin-top:.56em; }
.fine{ font-size:.8rem; line-height:1.5; color:var(--ink-50); margin:1em 0 0; max-width:52ch; }
.fine--light{ color:var(--lt-45); }
.fine--center{ margin:2.2em auto 0; text-align:center; }
.pill{
  display:inline-block; padding:.3em .8em; border-radius:99px; font-family:var(--fm);
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  background:rgba(169,194,79,.22); color:var(--moss-dk); border:1px solid rgba(47,107,69,.25);
}

.link-arrow{
  display:inline-flex; align-items:center; gap:.6em; text-decoration:none;
  font-weight:600; color:var(--moss); border-bottom:1px solid rgba(47,107,69,.3);
  padding-bottom:.25em; transition:gap .3s var(--e), border-color .3s;
}
.link-arrow svg{ width:20px; height:20px; }
.link-arrow:hover{ gap:1em; border-color:var(--moss); }
.link-arrow--light{ color:var(--lime); border-color:rgba(169,194,79,.35); }
.link-arrow--light:hover{ border-color:var(--lime); }

/* ── botones ──────────────────────────────────────────────── */
.btn{
  --bg:var(--moss); --fg:#fff; --bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.95em 1.6em; border:1px solid var(--bd); border-radius:99px;
  background:var(--bg); color:var(--fg); text-decoration:none; cursor:pointer;
  font-weight:600; font-size:.95rem; letter-spacing:-.01em; position:relative;
  overflow:hidden; isolation:isolate;
  transition:transform .18s var(--e), box-shadow .28s var(--e), background .25s, color .25s, border-color .25s;
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--ink);
  transform:translateY(101%); transition:transform .4s var(--e);
}
.btn:hover::after{ transform:translateY(0); }
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(22,36,28,.18); }
.btn:active{ transform:translateY(0); }
.btn--solid{ --bg:var(--moss); }
.btn--lime{ --bg:var(--lime); --fg:var(--ink); }
.btn--lime::after{ background:var(--white); }
.btn--lime:hover{ color:var(--ink); }
.btn--ghost{ --bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.4); }
.btn--ghost::after{ background:#fff; }
.btn--ghost:hover{ color:var(--ink); border-color:#fff; }
.btn--sm{ padding:.7em 1.15em; font-size:.86rem; }
.btn--block{ display:flex; width:100%; }

/* ── reveal ───────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .8s var(--e), transform .8s var(--e); }
.reveal.is-in{ opacity:1; transform:none; }

/* ── header ───────────────────────────────────────────────── */
.hdr{
  position:fixed; inset:0 0 auto; z-index:90; color:var(--white);
  transition:background .45s var(--e), color .45s var(--e), box-shadow .45s;
}
.hdr.is-stuck{ background:rgba(247,249,242,.92); backdrop-filter:blur(14px); color:var(--ink); box-shadow:0 1px 0 var(--line-s); }
.hdr__in{
  max-width:var(--wrap); margin:0 auto; padding:0 var(--gut);
  height:var(--hdr-h); display:flex; align-items:center; gap:2rem;
}
.hdr__rule{ height:2px; background:transparent; }
.hdr.is-stuck .hdr__rule{ background:var(--line-s); }
#progress{ display:block; height:100%; width:0; background:var(--lime); transform-origin:left; }

.mark{ display:flex; align-items:center; text-decoration:none; margin-right:auto; }
.mark img{ height:44px; width:auto; display:block; transition:opacity .3s; }
.mark .mark__dk{ display:none; }
.hdr.is-stuck .mark .mark__lt{ display:none; }
.hdr.is-stuck .mark .mark__dk{ display:block; }
.mark--ft img{ height:58px; }

.nav{ display:flex; gap:1.7rem; }
.nav a{
  text-decoration:none; font-size:.92rem; font-weight:500; opacity:.82;
  position:relative; padding:.3em 0; transition:opacity .2s;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .35s var(--e);
}
.nav a:hover{ opacity:1; }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

.burger{ display:none; background:none; border:0; padding:10px; cursor:pointer; }
.burger span{ display:block; width:22px; height:1.8px; background:currentColor; transition:transform .35s var(--e), opacity .2s; }
.burger span+span{ margin-top:6px; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.9px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.9px) rotate(-45deg); }

.menu{
  position:fixed; inset:var(--hdr-h) 0 auto; z-index:89; background:var(--forest-2); color:#fff;
  padding:1.4rem var(--gut) 2.2rem; display:flex; flex-direction:column; gap:1.6rem;
  animation:drop .45s var(--e) both;
}
@keyframes drop{ from{ opacity:0; transform:translateY(-14px); } }
.menu nav{ display:flex; flex-direction:column; }
.menu a{
  text-decoration:none; font-family:var(--fd); font-stretch:112%; font-weight:600; font-size:1.5rem;
  padding:.62rem 0; border-bottom:1px solid var(--lt-line); display:flex; align-items:baseline; gap:1rem;
}
.menu a em{ font:400 .68rem/1 var(--fm); font-style:normal; color:var(--lime); letter-spacing:.1em; }

/* ── hero ─────────────────────────────────────────────────── */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; overflow:hidden; }
.hero__media{ position:absolute; inset:0; will-change:transform; background:var(--forest-2); }
.hero__poster,.hero__video{ position:absolute; inset:0; width:100%; height:118%; object-fit:cover; }
.hero__poster{ z-index:0; animation:kb 20s var(--e) forwards; }
/* el video manda: siempre visible. Si no puede reproducirse, el propio
   elemento <video> pinta su poster, así que nunca queda un hueco negro. */
.hero__video{ z-index:1; opacity:1; background:var(--forest-2); }
.hero.has-video .hero__poster{ animation:none; scale:1; }
.hero__scrim,.hero__orb,.hero__fx,.hero__grain{ z-index:2; }
@keyframes kb{ from{ scale:1.12; } to{ scale:1; } }

.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(16,35,25,.56) 0%, rgba(16,35,25,.10) 30%, rgba(16,35,25,.46) 60%, rgba(16,35,25,.92) 100%),
    radial-gradient(115% 78% at 12% 90%, rgba(16,35,25,.58), transparent 62%);
}
.hero__in{ position:relative; max-width:var(--wrap); width:100%; margin:0 auto; padding:calc(var(--hdr-h) + 4rem) var(--gut) 2.2rem; }
.hero__h1{
  text-shadow:0 2px 34px rgba(8,20,14,.55);
  font-family:var(--fd); font-weight:720; font-stretch:120%;
  font-size:clamp(2.5rem,7.2vw,5.4rem); line-height:.98; letter-spacing:-.035em;
  margin:.42em 0 .5em; max-width:16ch;
}
.hero__h1 .line{ display:block; overflow:hidden; }
.hero__h1 .line>span{ display:block; transform:translateY(105%); animation:rise 1s var(--e) forwards; }
.hero__h1 .line:nth-child(1)>span{ animation-delay:.12s; }
.hero__h1 .line:nth-child(2)>span{ animation-delay:.22s; }
.hero__h1 .line:nth-child(3)>span{ animation-delay:.32s; }
.hero__h1 em{ font-style:normal; color:var(--lime); }
@keyframes rise{ to{ transform:translateY(0); } }
.hero__sub{ font-size:clamp(1rem,1.6vw,1.2rem); color:rgba(255,255,255,.86); max-width:50ch; margin:0 0 2rem; text-shadow:0 1px 18px rgba(8,20,14,.7); }
.hero__acts{ display:flex; flex-wrap:wrap; gap:.8rem; }

.hero__strip{ position:relative; border-top:1px solid var(--lt-line); background:rgba(16,35,25,.42); backdrop-filter:blur(8px); }
.hero__strip dl{ max-width:var(--wrap); margin:0 auto; padding:1.15rem var(--gut); display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.hero__strip dt{ font-family:var(--fm); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--lt-45); margin-bottom:.4em; }
.hero__strip dd{ margin:0; font-size:clamp(.95rem,1.6vw,1.18rem); color:#fff; }

.hero__cue{
  position:absolute; right:var(--gut); bottom:6.5rem; width:26px; height:44px;
  border:1px solid var(--lt-45); border-radius:99px; display:grid; place-items:start center; padding-top:8px;
}
.hero__cue span{ width:3px; height:8px; border-radius:2px; background:var(--lime); animation:cue 1.9s var(--e) infinite; }
@keyframes cue{ 0%,100%{ transform:translateY(0); opacity:1; } 50%{ transform:translateY(14px); opacity:.2; } }

/* ── secciones ────────────────────────────────────────────── */
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }
.sec{ padding:clamp(74px,10vw,136px) 0; position:relative; }
.sec--paper{ background:var(--paper); }
.sec--sand{ background:linear-gradient(180deg,var(--sand-hi),var(--sand)); }
.sec--dark{ background:var(--forest-2); color:var(--white); }
.sec--tight{ padding:clamp(64px,8vw,110px) 0; }
.sec__head{ max-width:44rem; margin:0 0 clamp(2.4rem,5vw,3.6rem); }
.sec__head--row{ max-width:none; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem; }
.sec__head--row .h2{ margin-bottom:0; }

.grid-2{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,6vw,5rem); align-items:start; }
.grid-2--wide{ grid-template-columns:1fr 1fr; align-items:center; }
.grid-2--form{ grid-template-columns:1fr 1.05fr; }

/* ── ficha técnica ────────────────────────────────────────── */
.specs--wide{ margin-top:clamp(2.4rem,5vw,4rem); }
.specs--wide dl{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 2.4rem; }
.specs--wide dl>div{ flex-direction:column; align-items:flex-start; gap:.3rem; border-top:1px solid var(--line-s) !important; padding:.9rem 0 !important; }
.specs--wide dd{ text-align:left; }
.specs{ background:var(--paper-hi); border:1px solid var(--line); border-radius:var(--r); padding:1.6rem 1.7rem 1.9rem; box-shadow:0 20px 40px -30px rgba(22,36,28,.5); }
.specs__cap{ font-family:var(--fm); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-50); margin:0 0 1.1rem; }
.specs dl{ margin:0; }
.specs dl>div{ display:flex; align-items:baseline; justify-content:space-between; gap:1.2rem; padding:.85rem 0; border-top:1px solid var(--line-s); }
.specs dl>div:first-child{ border-top:0; padding-top:0; }
.specs dt{ font-size:.9rem; color:var(--ink-50); flex:none; }
.specs dd{ margin:0; text-align:right; font-weight:500; }

/* ── imagen destacada (portería) ──────────────────────────── */
.feat{ margin:0; position:relative; }
.feat__btn{ display:block; width:100%; padding:0; border:0; border-radius:20px; overflow:hidden; cursor:pointer; background:var(--forest-2); box-shadow:0 34px 60px -40px rgba(22,36,28,.7); aspect-ratio:4/3; }
.feat__btn img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--e); }
.feat__btn:hover img{ transform:scale(1.04); }
.feat figcaption{ display:flex; flex-direction:column; gap:.15em; margin-top:.9rem; padding-left:.2rem; }
.feat figcaption b{ font-family:var(--fd); font-stretch:112%; font-weight:600; font-size:1rem; }
.feat figcaption i{ font:400 .68rem/1.4 var(--fm); font-style:normal; letter-spacing:.12em; text-transform:uppercase; color:var(--moss); }
.feat__iso{ position:absolute; right:-8%; top:-9%; width:clamp(90px,12vw,150px); height:auto; opacity:.14; pointer-events:none; transform:rotate(-6deg); }

/* ── chips de amenidades ──────────────────────────────────── */
.chips{ list-style:none; margin:0 0 2rem; padding:0; display:flex; flex-wrap:wrap; gap:.55rem; }
.chips li{
  font-family:var(--fm); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.55em 1em; border-radius:99px; border:1px solid var(--lt-line); color:var(--lt-70);
  background:rgba(255,255,255,.04);
}

/* ── grid de amenidades ───────────────────────────────────── */
.amen{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:210px; gap:14px; }
.amen > .amen__i{ grid-column:span 1; grid-row:span 1; }
.amen > .amen__i--big{ grid-column:span 2; grid-row:span 2; }
.amen > .amen__i--tall{ grid-column:span 1; grid-row:span 2; }
.amen > .amen__i--wide{ grid-column:span 4; grid-row:span 1; }
.amen > .amen__i--w2{ grid-column:span 2; grid-row:span 1; }
.amen .gal__i{ background:var(--forest); }

/* tarjeta de video vertical */
.vcard{ margin:0; position:relative; border-radius:var(--r); overflow:hidden; background:var(--forest); }
.vcard__v{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vcard::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(16,35,25,.78),transparent 45%); pointer-events:none; }
.vcard .gal__cap{ z-index:2; }
.vcard__snd{
  position:absolute; top:12px; right:12px; z-index:3; width:40px; height:40px; border-radius:50%;
  background:rgba(16,35,25,.55); border:1px solid rgba(255,255,255,.3); color:#fff; cursor:pointer;
  display:grid; place-items:center; backdrop-filter:blur(6px); transition:background .25s;
}
.vcard__snd:hover{ background:var(--lime); color:var(--ink); border-color:var(--lime); }
.vcard__snd svg{ width:20px; height:20px; }
.vcard__snd .ico-on{ display:none; }
.vcard__snd[aria-pressed="true"] .ico-off{ display:none; }
.vcard__snd[aria-pressed="true"] .ico-on{ display:block; }

/* dúo: video del terreno + master plan */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2.2vw,24px); align-items:start; }
.duo > .gal__i{ grid-column:auto; aspect-ratio:16/9; border-radius:18px; box-shadow:0 34px 60px -42px rgba(22,36,28,.75); }
.duo .gal__cap{ left:20px; bottom:18px; }
.duo .gal__cap b{ font-size:1.1rem; }

/* baldosa de video (terreno real) */
.vtile__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  width:74px; height:74px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgba(16,35,25,.45); border:1px solid rgba(255,255,255,.5); backdrop-filter:blur(8px);
  transition:background .3s, color .3s, transform .3s var(--e);
}
.vtile__play svg{ width:30px; height:30px; margin-left:3px; }
.vtile:hover .vtile__play{ background:var(--lime); color:var(--ink); border-color:var(--lime); transform:translate(-50%,-50%) scale(1.08); }
.vtile__badge--soft{ background:rgba(255,255,255,.92); color:var(--ink); }
.vtile__badge{
  position:absolute; top:14px; left:16px; z-index:2; font-family:var(--fm); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); background:var(--lime); padding:.45em .9em; border-radius:99px;
}

/* modal de video */
.vm{ position:fixed; inset:0; z-index:120; background:rgba(10,22,16,.96); display:grid; place-items:center; padding:clamp(16px,4vw,48px); animation:fade .3s var(--e); }
.vm figure{ margin:0; width:min(1200px,100%); }
.vm video{ width:100%; max-height:80vh; background:#000; border-radius:10px; display:block; }
.vm figcaption{ color:var(--lt-70); font-size:.86rem; text-align:center; margin-top:1rem; font-family:var(--fm); letter-spacing:.04em; }

/* textura topográfica de marca */
.sec--tex::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("../brand/texture.webp") center / 1100px auto repeat; opacity:.06;
}
.sec--tex > .wrap{ position:relative; }

/* ── plano a escala ───────────────────────────────────────── */
.plot--card{ background:var(--forest-2); color:var(--white); border-radius:24px; padding:clamp(1.4rem,3.6vw,2.8rem); box-shadow:0 40px 70px -48px rgba(22,36,28,.7); }
.plot{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.plot__draw{ background:rgba(255,255,255,.03); border:1px solid var(--lt-line); border-radius:var(--r); padding:1rem; }
#plano{ width:100%; height:auto; }
.pl-lbl{ font-family:var(--fm); font-size:9.5px; letter-spacing:.14em; fill:var(--lt-45); text-transform:uppercase; }
.pl-lbl--c{ text-anchor:middle; }
.pl-lbl--rot{ text-anchor:middle; }
.pl-area{ font-family:var(--fd); font-weight:700; font-stretch:115%; font-size:26px; fill:#fff; text-anchor:middle; }
.pl-casa{ fill:rgba(169,194,79,.9); stroke:var(--lime); stroke-width:2; }
.pl-dim line{ stroke:rgba(255,255,255,.4); stroke-width:1; }
.pl-street text{ fill:var(--lt-45); }
.pl-draw{ stroke-dasharray:var(--len,1400); stroke-dashoffset:var(--len,1400); }
.is-drawn .pl-draw{ transition:stroke-dashoffset 1.4s var(--e2); stroke-dashoffset:0; }
.pl-dash{ animation:march 22s linear infinite; }
@keyframes march{ to{ stroke-dashoffset:-260; } }

.plot__q{ font-family:var(--fm); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--lt-45); margin:0 0 .9rem; }
.seg{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:2rem; }
.seg__b{
  flex:1 1 auto; min-width:104px; background:rgba(255,255,255,.05); border:1px solid var(--lt-line);
  border-radius:10px; padding:.75rem .9rem; cursor:pointer; text-align:left; color:#fff;
  display:flex; flex-direction:column; gap:.25rem; font-weight:600; font-size:.92rem;
  transition:background .25s, border-color .25s, transform .2s var(--e);
}
.seg__b i{ font:400 .74rem/1 var(--fm); font-style:normal; color:var(--lt-45); }
.seg__b:hover{ background:rgba(255,255,255,.1); transform:translateY(-2px); }
.seg__b.is-on{ background:var(--lime); border-color:var(--lime); color:var(--ink); }
.seg__b.is-on i{ color:rgba(22,36,28,.62); }

.plot__stats{ margin:0; border-top:1px solid var(--lt-line); }
.plot__stats>div{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.8rem 0; border-bottom:1px solid var(--lt-line); }
.plot__stats dt{ font-size:.9rem; color:var(--lt-45); }
.plot__stats dd{ margin:0; font-size:1.05rem; color:#fff; }
.plot__stats .num--lime{ color:var(--lime); }

/* ── galería ──────────────────────────────────────────────── */
.gal{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:14px; }
.gal__i{
  position:relative; padding:0; border:0; border-radius:var(--r); overflow:hidden; cursor:pointer;
  background:var(--forest-2); grid-column:span 2;
}
.gal__i--big{ grid-column:span 4; grid-row:span 2; }
.gal__i img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--e), filter .5s; }
.gal__i::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(16,35,25,.78),transparent 55%); opacity:.85; transition:opacity .4s; }
.gal__i:hover img{ transform:scale(1.055); }
.gal__i:hover::after{ opacity:1; }
.gal__cap{ position:absolute; left:16px; bottom:14px; z-index:2; color:#fff; text-align:left; display:flex; flex-direction:column; gap:.15em; }
.gal__cap b{ font-family:var(--fd); font-stretch:112%; font-weight:600; font-size:1rem; }
.gal__cap i{ font:400 .68rem/1 var(--fm); font-style:normal; letter-spacing:.12em; text-transform:uppercase; color:var(--lime); }

/* lightbox */
.lb{ position:fixed; inset:0; z-index:120; background:rgba(10,22,16,.94); display:grid; place-items:center; padding:clamp(16px,4vw,48px); animation:fade .3s var(--e); }
@keyframes fade{ from{ opacity:0; } }
.lb figure{ margin:0; max-width:1100px; }
.lb img{ width:100%; max-height:78vh; object-fit:contain; border-radius:8px; }
.lb figcaption{ color:var(--lt-70); font-size:.86rem; text-align:center; margin-top:1rem; font-family:var(--fm); letter-spacing:.04em; }
.lb__x{ position:absolute; top:18px; right:22px; background:none; border:0; color:#fff; font-size:2.4rem; line-height:1; cursor:pointer; opacity:.7; }
.lb__x:hover{ opacity:1; }
.lb__nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.08); border:1px solid var(--lt-line); color:#fff; width:46px; height:46px; border-radius:50%; font-size:1.7rem; line-height:1; cursor:pointer; transition:background .25s; }
.lb__nav:hover{ background:rgba(255,255,255,.2); }
.lb__nav--p{ left:16px; } .lb__nav--n{ right:16px; }

/* ── simulador ────────────────────────────────────────────── */
.sim{ display:grid; grid-template-columns:1.02fr .98fr; background:var(--paper-hi); border-radius:20px; overflow:hidden; box-shadow:0 34px 60px -40px rgba(22,36,28,.6); }
.sim__left{ padding:clamp(1.6rem,3.4vw,2.8rem); }
.sim__right{ padding:clamp(1.6rem,3.4vw,2.8rem); background:var(--forest-2); color:#fff; display:flex; flex-direction:column; }
.sim__cap{ font-family:var(--fm); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-50); margin:0 0 .5rem; }
.sim__cap--light{ color:var(--lt-45); }
.sim__base{ font-size:clamp(1.5rem,2.6vw,2rem); margin:0 0 2rem; }
.sim__base span{ font-size:.62em; color:var(--ink-50); }
.sim__lab{ display:flex; justify-content:space-between; align-items:baseline; font-weight:600; font-size:.95rem; margin-bottom:.7rem; }
.sim__lab output{ font-family:var(--fm); font-size:1.35rem; color:var(--moss); }
.sim__scale{ display:flex; justify-content:space-between; font-family:var(--fm); font-size:.68rem; color:var(--ink-50); margin-top:.55rem; letter-spacing:.06em; }
.sim__init{ font-size:clamp(1.6rem,3vw,2.3rem); margin:1.4rem 0 0; color:var(--ink); }

input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:30px; background:transparent; cursor:grab; display:block;
}
input[type=range]:active{ cursor:grabbing; }
input[type=range]::-webkit-slider-runnable-track{
  height:6px; border-radius:99px;
  background:linear-gradient(90deg,var(--moss) var(--fill,0%),rgba(22,36,28,.14) var(--fill,0%));
}
input[type=range]::-moz-range-track{ height:6px; border-radius:99px; background:linear-gradient(90deg,var(--moss) var(--fill,0%),rgba(22,36,28,.14) var(--fill,0%)); }
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:26px; height:26px; margin-top:-10px; border-radius:50%;
  background:var(--white); border:2.5px solid var(--moss); box-shadow:0 4px 12px rgba(22,36,28,.25);
  transition:transform .18s var(--e);
}
input[type=range]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--white); border:2.5px solid var(--moss); box-shadow:0 4px 12px rgba(22,36,28,.25); }
input[type=range]:hover::-webkit-slider-thumb{ transform:scale(1.12); }

.sim__big{ font-family:var(--fm); font-weight:500; font-size:clamp(2.1rem,4.6vw,3.15rem); letter-spacing:-.03em; margin:.1rem 0 .35rem; color:var(--lime); font-variant-numeric:tabular-nums; }
.sim__note{ margin:0 0 1.8rem; color:var(--lt-70); font-size:.95rem; }
.sim__break{ margin:0 0 1.8rem; border-top:1px solid var(--lt-line); }
.sim__break>div{ display:flex; justify-content:space-between; gap:1rem; padding:.72rem 0; border-bottom:1px solid var(--lt-line); }
.sim__break dt{ color:var(--lt-45); font-size:.9rem; }
.sim__break dd{ margin:0; font-size:.98rem; }
.sim__right .btn{ margin-top:auto; }

/* ── razones ──────────────────────────────────────────────── */
.raz{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.raz li{
  background:var(--paper-hi); border:1px solid var(--line-s); border-radius:var(--r);
  padding:1.7rem 1.6rem 1.8rem; color:var(--moss);
  transition:transform .35s var(--e), box-shadow .35s var(--e), border-color .35s;
}
.raz li:hover{ transform:translateY(-4px); box-shadow:0 24px 40px -30px rgba(22,36,28,.55); border-color:var(--line); }
.raz li:nth-child(1),.raz li:nth-child(2){ grid-column:span 3; display:grid; grid-template-columns:56px 1fr; column-gap:1.4rem; align-items:start; }
.raz li:nth-child(1) h3,.raz li:nth-child(2) h3{ margin-top:.1rem; }
.raz li:nth-child(1) svg,.raz li:nth-child(2) svg{ grid-row:span 2; margin-bottom:0; }
.raz svg{ width:34px; height:34px; margin-bottom:1.1rem; opacity:.9; }
.raz h3{ font-family:var(--fd); font-stretch:112%; font-weight:640; font-size:1.14rem; letter-spacing:-.015em; margin:0 0 .5em; color:var(--ink); }
.raz p{ margin:0; font-size:.95rem; color:var(--ink-70); max-width:52ch; }
@media (min-width:1001px){
  .raz li:nth-child(1),.raz li:nth-child(2){ grid-column:span 1; grid-template-columns:1fr; }
  .raz li:nth-child(1) svg,.raz li:nth-child(2) svg{ grid-row:auto; margin-bottom:1.1rem; }
}

/* ── distancias ───────────────────────────────────────────── */
.dist{ list-style:none; margin:2.2rem 0; padding:0; }
.dist li{ display:grid; grid-template-columns:minmax(120px,1fr) minmax(60px,2fr) auto; align-items:center; gap:1rem; padding:.95rem 0; border-bottom:1px solid var(--lt-line); }
.dist li:first-child{ border-top:1px solid var(--lt-line); }
.dist__n{ font-weight:500; font-size:.98rem; }
.dist__n i{ display:block; font:400 .68rem/1.4 var(--fm); font-style:normal; color:var(--lt-45); letter-spacing:.1em; text-transform:uppercase; }
.dist__bar{ display:block; height:3px; background:rgba(255,255,255,.12); border-radius:99px; overflow:hidden; }
.dist__bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--moss),var(--lime)); border-radius:99px; transition:width 1.1s var(--e2); }
.dist li.is-in .dist__bar i{ width:calc(var(--v) * 1%); }
.dist__t{ color:var(--lime); font-size:.95rem; }

.ubi-img{ margin:0; border-radius:var(--r); overflow:hidden; position:relative; height:clamp(280px,42vw,460px); }
.ubi-img img{ width:100%; height:114%; object-fit:cover; }
.ubi-img figcaption{ position:absolute; left:0; right:0; bottom:0; padding:2.5rem 1.4rem 1.2rem; font-family:var(--fm); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:linear-gradient(0deg,rgba(16,35,25,.85),transparent); }

/* ── contacto ─────────────────────────────────────────────── */
.cinfo{ list-style:none; margin:2rem 0 0; padding:0; }
.cinfo li{ padding:.85rem 0; border-top:1px solid var(--line-s); display:flex; flex-wrap:wrap; gap:.3rem 1.5rem; align-items:baseline; }
.cinfo span{ font-family:var(--fm); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-50); min-width:78px; }
.cinfo a{ font-weight:600; text-decoration:none; border-bottom:1px solid var(--line); }
.cinfo a:hover{ border-color:var(--moss); color:var(--moss); }
.cinfo p{ margin:0; color:var(--ink-70); font-size:.95rem; }

.form-card{ background:var(--paper-hi); border:1px solid var(--line); border-radius:20px; padding:clamp(1.5rem,3vw,2.4rem); box-shadow:0 30px 55px -42px rgba(22,36,28,.6); }
.fld{ margin-bottom:1.05rem; }
.fld label{ display:block; font-size:.86rem; font-weight:600; margin-bottom:.42rem; }
.fld label i{ font-style:normal; font-weight:400; color:var(--ink-50); }
.fld input,.fld textarea{
  width:100%; padding:.85rem 1rem; border:1px solid var(--line); border-radius:10px;
  background:var(--white); font:inherit; font-size:.98rem; color:var(--ink); resize:vertical;
  transition:border-color .25s, box-shadow .25s;
}
.fld input::placeholder,.fld textarea::placeholder{ color:rgba(22,36,28,.34); }
.fld input:focus,.fld textarea:focus{ outline:none; border-color:var(--moss); box-shadow:0 0 0 4px rgba(47,107,69,.13); }
.fld.is-bad input,.fld.is-bad textarea{ border-color:#b4462f; }
.err{ display:block; min-height:0; font-size:.78rem; color:#b4462f; margin-top:.35rem; }
.form-card .btn{ margin-top:.5rem; }
.form-ok{ text-align:center; padding:1.5rem .5rem; color:var(--moss); animation:pop .5s var(--e) both; }
@keyframes pop{ from{ opacity:0; transform:scale(.94); } }
.form-ok svg{ width:56px; height:56px; margin:0 auto 1.2rem; }
.form-ok h3{ font-family:var(--fd); font-stretch:114%; font-size:1.5rem; margin:0 0 .5em; color:var(--ink); }
.form-ok p{ color:var(--ink-70); margin:0 auto 1.6rem; max-width:36ch; }

/* ── cierre ───────────────────────────────────────────────── */
.cierre{ position:relative; min-height:62vh; display:grid; place-items:center; text-align:center; color:#fff; overflow:hidden; padding:clamp(4rem,9vw,7rem) var(--gut); }
.cierre > img{ position:absolute; inset:0; width:100%; height:118%; object-fit:cover; }
.cierre::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(16,35,25,.86),rgba(16,35,25,.7)); }
.cierre__in{ position:relative; z-index:2; max-width:42rem; }
.cierre__iso{ width:64px; height:auto; margin:0 auto 1.4rem; opacity:.9; position:static; }
.cimg{ margin:2.2rem 0 0; border-radius:var(--r); overflow:hidden; aspect-ratio:16/10; }
.cimg img{ width:100%; height:100%; object-fit:cover; }
.cierre h2{ font-family:var(--fd); font-weight:700; font-stretch:118%; font-size:clamp(1.9rem,4.4vw,3.4rem); line-height:1.02; letter-spacing:-.03em; margin:0 0 .5em; }
.cierre p{ color:var(--lt-70); margin:0 0 2rem; font-size:1.05rem; }
.cierre .hero__acts{ justify-content:center; }

/* ── footer ───────────────────────────────────────────────── */
.ft{ background:var(--ink); color:var(--lt-70); padding:clamp(3rem,6vw,4.5rem) 0 2rem; position:relative; overflow:hidden; }
.ft::before{ content:""; position:absolute; inset:0; pointer-events:none; background:url("../brand/texture.webp") center / 1100px auto repeat; opacity:.05; filter:invert(1); }
.ft > .wrap{ position:relative; }
.ft__in{ display:grid; grid-template-columns:1.5fr 1fr 1.3fr; gap:2.5rem; }
.ft__brand .mark{ color:#fff; margin-bottom:1.3rem; }
.ft__brand p{ margin:0; font-size:.92rem; max-width:34ch; }
.ft h4{ font-family:var(--fm); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--lime); margin:.4rem 0 1rem; font-weight:400; }
.ft__nav{ display:flex; flex-direction:column; gap:.5rem; }
.ft__nav a,.ft__cta a{ text-decoration:none; font-size:.93rem; width:fit-content; border-bottom:1px solid transparent; transition:color .2s, border-color .2s; }
.ft__nav a:hover,.ft__cta a:hover{ color:#fff; border-color:var(--lime); }
.ft__cta{ display:flex; flex-direction:column; gap:.5rem; }
.ft__cta p{ margin:.6rem 0 0; font-size:.9rem; line-height:1.6; }
.ft__legal{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem; margin-top:3rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.1); }
.ft__legal p{ margin:0; font-size:.76rem; color:var(--lt-45); }

/* ── dock móvil ───────────────────────────────────────────── */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:95; display:none; gap:.6rem;
  padding:.7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(16,35,25,.94); backdrop-filter:blur(12px); border-top:1px solid var(--lt-line);
  transform:translateY(110%); transition:transform .4s var(--e);
}
.dock.is-on{ transform:translateY(0); }
.dock__b{ flex:1; text-align:center; padding:.85rem 1rem; border-radius:99px; background:var(--lime); color:var(--ink); text-decoration:none; font-weight:600; font-size:.92rem; }
.dock__b--gh{ background:transparent; color:#fff; border:1px solid var(--lt-45); }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width:1000px){
  .nav{ display:none; }
  .hdr__cta{ display:none; }
  .burger{ display:block; }
  .grid-2,.grid-2--wide,.grid-2--form{ grid-template-columns:1fr; }
  .plot{ grid-template-columns:1fr; }
  .sim{ grid-template-columns:1fr; }
  .specs--wide dl{ grid-template-columns:repeat(2,1fr); }
  .raz{ grid-template-columns:repeat(2,1fr); }
  .raz li:nth-child(1),.raz li:nth-child(2){ grid-column:span 2; }
  .ft__in{ grid-template-columns:1fr 1fr; }
  .dock{ display:flex; }
  .amen{ grid-template-columns:repeat(3,1fr); grid-auto-rows:190px; }
  .amen > .amen__i--wide{ grid-column:span 3; }
  .feat__iso{ right:-2%; }
  .mark img{ height:38px; }
}
@media (max-width:720px){
  body{ font-size:1rem; }
  .hero{ min-height:92svh; }
  .hero__strip dl{ grid-template-columns:repeat(2,1fr); gap:1.1rem 1rem; }
  .hero__cue{ display:none; }
  .gal{ grid-template-columns:repeat(2,1fr); grid-auto-rows:160px; }
  .gal__i--big{ grid-column:span 2; }
  .amen{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; }
  .amen > .amen__i--big{ grid-column:span 2; grid-row:span 2; }
  .amen > .amen__i--tall{ grid-column:span 1; grid-row:span 2; }
  .amen > .amen__i--wide{ grid-column:span 2; }
  .duo{ grid-template-columns:1fr; }
  .hero__acts{ align-items:center; }
  .vtile__play{ width:58px; height:58px; }
  .vtile__play svg{ width:24px; height:24px; }
  .mark img{ height:34px; }
  .raz{ grid-template-columns:1fr; }
  .raz li,.raz li:nth-child(1),.raz li:nth-child(2){ grid-column:span 1; grid-template-columns:1fr; }
  .raz li:nth-child(1) svg,.raz li:nth-child(2) svg{ grid-row:auto; margin-bottom:1.1rem; }
  .dist li{ grid-template-columns:1fr auto; }
  .dist__bar{ grid-column:1 / -1; order:3; }
  .ft__in{ grid-template-columns:1fr; gap:2rem; }
  .lb__nav{ top:auto; bottom:20px; transform:none; }
  .lb__nav--p{ left:calc(50% - 60px); } .lb__nav--n{ right:calc(50% - 60px); }
  .form-card{ border-radius:16px; }
  .specs--wide dl{ grid-template-columns:1fr; }
}

/* ── movimiento reducido ──────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  .hero__h1 .line>span{ transform:none; }
  .hero__poster{ transform:none; height:100%; scale:1; animation:none; }
  .pl-draw{ stroke-dashoffset:0; }
  .dist__bar i{ width:calc(var(--v) * 1%); }
}

/* ═══════════════════════════════════════════════════════════
   EFECTOS VISUALES
   ═══════════════════════════════════════════════════════════ */

/* ── hero en movimiento ───────────────────────────────────── */
.hero__in{ will-change:transform; transition:transform .25s ease-out; }
.hero__orb{
  position:absolute; border-radius:50%; pointer-events:none; mix-blend-mode:screen; filter:blur(40px);
  will-change:transform; opacity:.55;
}
.hero__orb--a{
  width:46vw; height:46vw; max-width:640px; max-height:640px; left:-10%; top:-8%;
  background:radial-gradient(circle, rgba(169,194,79,.55), rgba(169,194,79,0) 65%);
  animation:orbA 18s ease-in-out infinite alternate;
}
.hero__orb--b{
  width:38vw; height:38vw; max-width:520px; max-height:520px; right:-8%; bottom:12%;
  background:radial-gradient(circle, rgba(93,196,150,.5), rgba(93,196,150,0) 65%);
  animation:orbB 22s ease-in-out infinite alternate;
}
@keyframes orbA{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(18vw,14vh) scale(1.25); } }
@keyframes orbB{ from{ transform:translate(0,0) scale(1.1); } to{ transform:translate(-14vw,-18vh) scale(.85); } }
.hero__fx{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hero__grain{
  position:absolute; inset:-100%; pointer-events:none; opacity:.09; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(6) infinite;
}
@keyframes grain{
  0%{ transform:translate(0,0); } 20%{ transform:translate(-3%,2%); } 40%{ transform:translate(2%,-4%); }
  60%{ transform:translate(-4%,-1%); } 80%{ transform:translate(3%,3%); } 100%{ transform:translate(0,0); }
}
.hero__h1 em{
  background:linear-gradient(100deg, var(--lime) 0%, #eaf7b0 45%, var(--lime) 55%, #b8d35c 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shine 5s linear infinite;
}
@keyframes shine{ from{ background-position:200% 0; } to{ background-position:-20% 0; } }
.hero__scrim{ animation:breathe 9s ease-in-out infinite alternate; }
@keyframes breathe{ from{ opacity:1; } to{ opacity:.82; } }
.hero__strip dd{ transition:color .3s; }

/* ── marquee ──────────────────────────────────────────────── */
.marq{ background:var(--lime); color:var(--ink); overflow:hidden; padding:.9rem 0; border-block:1px solid rgba(22,36,28,.15); }
.marq__track{ display:flex; align-items:center; gap:2.2rem; width:max-content; animation:marq 42s linear infinite; }
.marq:hover .marq__track{ animation-play-state:paused; }
.marq span{ font-family:var(--fd); font-stretch:112%; font-weight:640; font-size:.98rem; letter-spacing:-.005em; white-space:nowrap; }
.marq i{ width:8px; height:8px; border-radius:50%; background:var(--ink); opacity:.55; flex:none; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ── revelado con desenfoque ──────────────────────────────── */
.reveal{ filter:blur(8px); transition:opacity .9s var(--e), transform .9s var(--e), filter .9s var(--e); }
.reveal.is-in{ filter:blur(0); }

/* ── tilt 3D + brillo ─────────────────────────────────────── */
[data-tilt]{ transform-style:preserve-3d; transition:transform .5s var(--e), box-shadow .5s var(--e); will-change:transform; }
[data-tilt].is-tilting{ transition:transform .08s linear; }
[data-tilt]::before{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.22), transparent 55%);
  opacity:0; transition:opacity .4s;
}
[data-tilt]:hover::before{ opacity:1; }
.raz li[data-tilt]{ position:relative; overflow:hidden; }
.raz li[data-tilt]::before{ background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(169,194,79,.28), transparent 60%); }

/* ── foco de luz en secciones oscuras ─────────────────────── */
.sec--dark{ isolation:isolate; }
.sec--dark::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(640px circle at var(--sx,50%) var(--sy,30%), rgba(169,194,79,.13), transparent 60%);
  opacity:0; transition:opacity .6s;
}
.sec--dark:hover::before{ opacity:1; }
.sec--dark > .wrap{ position:relative; z-index:1; }

/* ── borde conic animado en el simulador ──────────────────── */
@property --ang{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
.sim{ position:relative; }
.sim::before{
  content:""; position:absolute; inset:-2px; z-index:-1; border-radius:22px;
  background:conic-gradient(from var(--ang), var(--lime), var(--moss), #5dc496, var(--lime));
  animation:spin 6s linear infinite; filter:blur(.5px);
}
.sim::after{ content:""; position:absolute; inset:0; border-radius:20px; z-index:-1; background:var(--paper-hi); }
@keyframes spin{ to{ --ang:360deg; } }
.sim__big{ text-shadow:0 0 22px rgba(169,194,79,.45); }

/* ── botón magnético ──────────────────────────────────────── */
.btn.is-mag{ transition:transform .12s ease-out, box-shadow .28s var(--e), background .25s, color .25s, border-color .25s; }
.btn--lime{ box-shadow:0 0 0 0 rgba(169,194,79,.55); animation:limeglow 3.2s ease-in-out infinite; }
@keyframes limeglow{ 50%{ box-shadow:0 0 0 9px rgba(169,194,79,0); } }

/* ── chips con entrada escalonada ─────────────────────────── */
.chips li{ transition:background .3s, transform .3s var(--e), border-color .3s; }
.chips li:hover{ background:var(--lime); color:var(--ink); border-color:var(--lime); transform:translateY(-3px); }

/* ── WhatsApp flotante ────────────────────────────────────── */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:96; display:flex; align-items:center; gap:.8rem;
  text-decoration:none; color:#fff;
  transform:translateY(120px); opacity:0; transition:transform .6s var(--e), opacity .6s;
}
.wa-float.is-on{ transform:none; opacity:1; }
.wa-float__core{ position:relative; width:62px; height:62px; flex:none; }
.wa-float__btn{
  position:relative; z-index:2; width:62px; height:62px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(145deg,#3ee27a,#20b858); box-shadow:0 12px 30px -8px rgba(37,211,102,.7);
  animation:wiggle 5s ease-in-out infinite; transition:transform .25s var(--e);
}
.wa-float__btn svg{ width:34px; height:34px; }
.wa-float:hover .wa-float__btn{ transform:scale(1.08) rotate(-6deg); animation:none; }
.wa-float__ring{
  position:absolute; left:0; top:0; width:62px; height:62px; border-radius:50%; z-index:1;
  border:2px solid rgba(37,211,102,.8); animation:ring 2.4s ease-out infinite;
}
.wa-float__ring--2{ animation-delay:1.2s; }
@keyframes ring{ from{ transform:scale(1); opacity:.9; } to{ transform:scale(2.1); opacity:0; } }
@keyframes wiggle{
  0%,80%,100%{ transform:rotate(0); } 84%{ transform:rotate(-12deg) scale(1.06); }
  88%{ transform:rotate(10deg) scale(1.06); } 92%{ transform:rotate(-8deg); } 96%{ transform:rotate(6deg); }
}
.wa-float__lbl{
  order:-1; background:var(--white); color:var(--ink); font-weight:600; font-size:.9rem;
  padding:.65em 1em; border-radius:12px; box-shadow:0 14px 30px -14px rgba(22,36,28,.5);
  opacity:0; transform:translateX(12px); transition:opacity .4s var(--e), transform .4s var(--e); pointer-events:none;
  white-space:nowrap; position:relative;
}
.wa-float__lbl::after{ content:""; position:absolute; right:-6px; top:50%; width:12px; height:12px; background:var(--white); transform:translateY(-50%) rotate(45deg); border-radius:2px; }
.wa-float:hover .wa-float__lbl, .wa-float.has-lbl .wa-float__lbl{ opacity:1; transform:none; }

/* ── responsive de los efectos ────────────────────────────── */
@media (max-width:1000px){
  .wa-float{ right:16px; bottom:calc(84px + env(safe-area-inset-bottom)); }
  .wa-float__core,.wa-float__btn,.wa-float__ring{ width:56px; height:56px; }
  .wa-float__btn svg{ width:30px; height:30px; }
  .sec--dark::before{ display:none; }
  .hero__orb{ filter:blur(28px); }
}
@media (max-width:720px){
  .wa-float__lbl{ display:none; }
  .marq__track{ animation-duration:28s; }
  .marq span{ font-size:.88rem; }
  .hero__orb--a{ width:90vw; height:90vw; }
  .hero__orb--b{ width:70vw; height:70vw; }
}
@media (hover:none){
  [data-tilt]::before{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .hero__orb, .hero__grain, .hero__fx{ display:none; }
  .hero__h1 em{ animation:none; background:none; color:var(--lime); -webkit-text-fill-color:currentColor; }
  .marq__track{ animation:none; }
  .reveal{ filter:none; }
  .sim::before{ animation:none; }
  .wa-float__ring{ display:none; }
  .wa-float__btn{ animation:none; }
  .btn--lime{ animation:none; }
  .hero__scrim{ animation:none; }
}