/* Salesio Estates — landing de venta (10-nov-2026, v3 «viva»).
   Idea: la página no describe el producto, lo DEMUESTRA. Una dirección que
   escribe la visitante recorre, al hacer scroll, la venta entera: página de la
   casa → visita → tablero → seguimiento → vendida.
   Negro y oro metálico. Inter (variable) + Cormorant cursiva para los acentos.
   Nada de terceros al abrir: fuentes, vídeo e imágenes son propios. */

@font-face{font-family:"Inter";src:url("/estates/fonts/inter-var-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Cormorant";src:url("/estates/fonts/cormorant-garamond-latin.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url("/estates/fonts/cormorant-garamond-italic-latin.woff2") format("woff2");font-weight:300 700;font-style:italic;font-display:swap}

:root{
  --bg:#070707;
  --bg-2:#0e0e0f;
  --bg-3:#151517;
  --ivory:#f4efe4;
  --t2:rgba(244,239,228,.68);
  --t3:rgba(244,239,228,.42);
  --line:rgba(244,239,228,.12);
  --line-2:rgba(244,239,228,.07);
  --gold:#d8b26a;
  --gold-hi:#f3dca2;
  --gold-lo:#9a7533;
  --metal:linear-gradient(105deg,#8e6a2c 0%,#c9a159 18%,#f6e3ae 34%,#d2ab62 48%,#a07a35 62%,#e8cd8c 80%,#9c7631 100%);
  --red:#e0675a;--amber:#e3a63e;--green:#5fae78;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --serif:"Cormorant",Georgia,serif;
  --max:1320px;
  --gut:clamp(16px,4vw,44px);
  --ease:cubic-bezier(.2,.75,.1,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ivory);font-family:var(--sans);font-size:17px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
::selection{background:var(--gold);color:#000}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* Grano de película: da vida al negro sin pesar nada */
body::after{content:"";position:fixed;inset:-50%;z-index:100;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* Tipografía */
h1,h2,h3,h4{font-weight:300;letter-spacing:-.025em;line-height:1.04}
h2{font-size:clamp(30px,3.4vw,54px)}
h3{font-size:clamp(20px,1.6vw,24px);letter-spacing:-.015em;line-height:1.15}
.it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.au{background:var(--metal);background-size:220% 100%;background-position:var(--mx,30%) 0;-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position .6s var(--ease)}
.lead{font-size:clamp(16px,1.15vw,18px);color:var(--t2);max-width:560px;font-weight:300}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:11px;font-weight:400;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}

/* Botones */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:50px;padding:0 30px;border-radius:0;font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;overflow:hidden;isolation:isolate;transition:transform .4s var(--spring),box-shadow .4s}
.btn-gold{color:#120d04;background:var(--metal);background-size:220% 100%;background-position:30% 0;box-shadow:0 0 0 1px rgba(246,227,174,.4) inset,0 14px 40px -14px rgba(216,178,106,.7)}
.btn-gold:hover{transform:translateY(-2px);background-position:90% 0;box-shadow:0 0 0 1px rgba(246,227,174,.6) inset,0 20px 50px -14px rgba(216,178,106,.9)}
.btn-gold::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:sheen 4.5s ease-in-out infinite}
@keyframes sheen{0%,60%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.btn-ghost{color:var(--ivory);box-shadow:0 0 0 1px var(--line) inset}
.btn-ghost:hover{box-shadow:0 0 0 1px var(--gold) inset;color:var(--gold-hi)}
.btn .ar{transition:transform .4s var(--spring)}
.btn:hover .ar{transform:translateX(4px)}
.btn-sm{height:40px;padding:0 20px;font-size:10.5px}

/* Barra de progreso dorada */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:80;background:var(--metal);transform-origin:0 50%;transform:scaleX(var(--sp,0))}

/* ── NAV ───────────────────────────────────────── */
.nav{position:fixed;top:14px;left:0;right:0;z-index:70;pointer-events:none}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.pillnav{pointer-events:auto;display:flex;align-items:center;gap:6px;padding:6px 6px 6px 18px;border-radius:0;background:rgba(14,14,15,.55);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 0 0 1px var(--line) inset;transition:background .4s}
.nav.solid .pillnav{background:rgba(14,14,15,.85)}
.logo{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;letter-spacing:-.01em;margin-right:12px}
.logo i{width:24px;height:24px;border-radius:0;background:var(--metal);display:grid;place-items:center;color:#120d04;font-style:normal;font-family:var(--serif);font-size:17px;font-weight:600}
.logo span{color:var(--t3);font-weight:500}
.navlinks{display:flex}
.navlinks a{padding:10px 14px;border-radius:0;font-size:14px;color:var(--t2);transition:color .25s,background .25s}
.navlinks a:hover{color:var(--ivory);background:rgba(255,255,255,.06)}
.navend{pointer-events:auto;display:flex;align-items:center;gap:6px;padding:6px;border-radius:0;background:rgba(14,14,15,.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 0 0 1px var(--line) inset}
.navend a:not(.btn){padding:10px 14px;font-size:14px;color:var(--t2);border-radius:0}
.navend a:not(.btn):hover{color:var(--ivory)}
.navend .on{color:var(--gold)!important}
@media (max-width:1060px){.navlinks{display:none}}
@media (max-width:560px){.navend .lg,.navend .lng{display:none}.logo span{display:none}.pillnav{padding:6px 14px}}

/* ── HERO ──────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.hero .poster{z-index:-4}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:
  radial-gradient(90% 70% at 20% 100%,rgba(7,7,7,.92),rgba(7,7,7,.2) 70%),
  linear-gradient(180deg,rgba(7,7,7,.65),rgba(7,7,7,.1) 30%,rgba(7,7,7,.35) 60%,var(--bg) 100%)}
.hero canvas{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.hero .wrap{padding-top:140px;padding-bottom:clamp(40px,7vh,80px)}
.hero h1{font-size:clamp(40px,5.6vw,88px);max-width:13ch;line-height:1}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .ln>span{display:inline-block;transform:translateY(110%);animation:rise 1.3s var(--ease) forwards}
.hero h1 .ln:nth-child(2)>span{animation-delay:.15s}
@keyframes rise{to{transform:none}}
.hero .row{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-top:34px}
.hero .lead{color:rgba(244,239,228,.82);opacity:0;animation:fade 1s .7s forwards}
@keyframes fade{to{opacity:1}}

/* Campo «escribe una dirección» */
.try{opacity:0;animation:fade 1s 1s forwards;width:min(560px,100%)}
.try label{display:block;font-size:13px;color:var(--t3);margin-bottom:10px;letter-spacing:.02em}
.field{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 22px;border-radius:0;background:rgba(14,14,15,.62);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 0 0 1px var(--line) inset,0 30px 60px -30px #000;transition:box-shadow .3s}
.field:focus-within{box-shadow:0 0 0 1px var(--gold) inset,0 0 0 6px rgba(216,178,106,.12),0 30px 60px -30px #000}
.field svg{flex-shrink:0;opacity:.6}
.field input{flex:1;min-width:0;height:48px;background:transparent;border:0;outline:0;font-size:16px;color:var(--ivory)}
.field input::placeholder{color:var(--t3)}
.try .alt{display:inline-flex;gap:8px;margin-top:14px;font-size:14px;color:var(--t2)}
.try .alt a{color:var(--gold-hi);border-bottom:1px solid rgba(243,220,162,.35)}
.scrolly{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--t3)}
.scrolly i{width:22px;height:36px;border-radius:0;box-shadow:0 0 0 1px var(--line) inset;position:relative}
.scrolly i::after{content:"";position:absolute;left:50%;top:8px;width:3px;height:7px;margin-left:-1.5px;border-radius:0;background:var(--gold);animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}100%{opacity:0;transform:translateY(10px)}}
@media (max-width:860px){.hero .row{grid-template-columns:1fr}.scrolly{display:none}.field .btn{padding:0 18px}}
@media (max-width:460px){.field{flex-wrap:wrap;border-radius:0;padding:8px}.field input{padding-left:12px}.field .btn{width:100%}.field svg{display:none}}

/* ── CINTA (letras huecas que corren) ──────────── */
.ticker{overflow:hidden;padding:clamp(28px,4vw,52px) 0;border-block:1px solid var(--line-2)}
.ticker .tr{display:flex;width:max-content;animation:marq 40s linear infinite}
.ticker span{font-size:clamp(30px,4vw,62px);font-weight:300;letter-spacing:-.04em;line-height:1;padding:0 .35em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(244,239,228,.28)}
.ticker span.f{color:var(--ivory);-webkit-text-stroke:0}
.ticker span.g{font-family:var(--serif);font-style:italic;font-weight:400;-webkit-text-stroke:0;background:var(--metal);background-size:220% 100%;-webkit-background-clip:text;background-clip:text}
@keyframes marq{to{transform:translateX(-50%)}}

/* ── HISTORIA DE UNA VENTA (scroll) ────────────── */
.story{position:relative;height:620vh}
.story .pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.story .pin .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,80px);align-items:center}
.story .intro{margin-bottom:34px}
.story .intro h2{font-size:clamp(28px,2.8vw,44px);margin-top:16px}
.chap{list-style:none;position:relative;padding-left:26px}
.chap::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--line)}
.chap .bar{position:absolute;left:0;top:6px;width:1px;height:calc((100% - 12px) * var(--sp-story,0));background:var(--metal);box-shadow:0 0 12px rgba(216,178,106,.6)}
.chap li{padding:10px 0;opacity:.32;transition:opacity .5s,transform .5s var(--ease);cursor:pointer}
.chap li b{display:flex;align-items:baseline;gap:12px;font-size:clamp(16px,1.25vw,19px);font-weight:400;letter-spacing:-.02em}
.chap li b small{font-size:12px;font-weight:600;color:var(--gold);letter-spacing:.1em}
.chap li p{max-height:0;overflow:hidden;font-size:15px;color:var(--t2);transition:max-height .6s var(--ease),margin .6s var(--ease)}
.chap li.on{opacity:1;transform:translateX(6px)}
.chap li.on p{max-height:90px;margin-top:6px}
.chap li.done{opacity:.55}

.stage{position:relative;aspect-ratio:5/4;width:100%;border-radius:0;background:radial-gradient(120% 90% at 80% 0%,rgba(216,178,106,.16),transparent 55%),var(--bg-2);box-shadow:0 0 0 1px var(--line-2) inset,0 60px 120px -50px #000;overflow:hidden}
.stage::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(244,239,228,.07) 1px,transparent 1px);background-size:22px 22px;mask-image:radial-gradient(80% 70% at 50% 50%,#000,transparent)}
.scene{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(18px,3vw,40px);opacity:0;transform:scale(.96) translateY(18px);filter:blur(6px);transition:opacity .7s var(--ease),transform .9s var(--ease),filter .7s;pointer-events:none}
.scene.on{opacity:1;transform:none;filter:none}
.scene .cap{display:none}
.demo-tag{position:absolute;top:16px;right:18px;z-index:5;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);padding:6px 10px;border-radius:0;box-shadow:0 0 0 1px var(--line-2) inset}

/* Escena 1: dirección + registros */
.s-search{width:min(470px,100%)}
.s-search .box{display:flex;align-items:center;gap:12px;padding:18px 20px;border-radius:0;background:var(--bg-3);box-shadow:0 0 0 1px var(--gold) inset,0 0 0 6px rgba(216,178,106,.1)}
.s-search .box .tx{font-size:18px;white-space:nowrap;overflow:hidden}
.caret{display:inline-block;width:2px;height:22px;background:var(--gold);animation:blink 1s steps(1) infinite;margin-left:2px;vertical-align:middle}
@keyframes blink{50%{opacity:0}}
.s-search .drop{margin-top:8px;border-radius:0;background:var(--bg-3);box-shadow:0 0 0 1px var(--line-2) inset;overflow:hidden;opacity:0;transform:translateY(-6px);transition:all .5s var(--ease) .1s}
.scene.on .s-search .drop.show{opacity:1;transform:none}
.s-search .drop div{display:flex;gap:10px;align-items:center;padding:12px 16px;font-size:14px;color:var(--t2)}
.s-search .drop div:first-child{background:rgba(216,178,106,.1);color:var(--ivory)}
.s-search .drop div::before{content:"⌖";color:var(--gold)}
.recs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:22px}
.recs div{padding:14px 16px;border-radius:0;background:rgba(244,239,228,.04);box-shadow:0 0 0 1px var(--line-2) inset;opacity:0;transform:translateY(10px)}
.recs small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
.recs b{font-size:22px;font-weight:500;letter-spacing:-.03em}
.scene.on .recs.show div{animation:pop .7s var(--spring) forwards}
.scene.on .recs.show div:nth-child(2){animation-delay:.12s}
.scene.on .recs.show div:nth-child(3){animation-delay:.24s}
.scene.on .recs.show div:nth-child(4){animation-delay:.36s}
@keyframes pop{to{opacity:1;transform:none}}
.recs-h{margin-top:22px;font-size:12px;color:var(--t3);display:flex;align-items:center;gap:8px;opacity:0;transition:opacity .5s}
.recs.show+.recs-h,.scene.on .recs-h.show{opacity:1}

/* Escena 2: página de la casa */
.s-page{width:100%;max-width:560px;border-radius:0;overflow:hidden;background:#fff;color:#111;box-shadow:0 40px 80px -30px #000}
.s-page .bar{display:flex;gap:6px;align-items:center;padding:10px 12px;background:#f3f1ec}
.s-page .bar i{width:8px;height:8px;border-radius:50%;background:#d6d2c9}
.s-page .bar span{margin-left:8px;font-size:11px;color:#8b877f;flex:1}
.s-page .bar em{font-style:normal;font-size:11px;font-weight:600;display:flex;gap:2px;border-radius:0;background:#e7e3db;padding:2px}
.s-page .bar em u{text-decoration:none;padding:2px 8px;border-radius:0}
.s-page .bar em u.a{background:#111;color:#fff}
.scene.on .s-page .bar em u{animation:lang 3s 1.2s infinite}
.scene.on .s-page .bar em u.a{animation:lang2 3s 1.2s infinite}
@keyframes lang{0%,45%{background:transparent;color:#111}50%,95%{background:#111;color:#fff}}
@keyframes lang2{0%,45%{background:#111;color:#fff}50%,95%{background:transparent;color:#111}}
.s-page .ph{position:relative;aspect-ratio:16/8;overflow:hidden}
.s-page .ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 2.4s var(--ease)}
.scene.on .s-page .ph img{transform:scale(1)}
.s-page .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.7))}
.s-page .ph .ov{position:absolute;z-index:2;left:18px;right:18px;bottom:14px;color:#fff;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.s-page .ph .ov small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi)}
.s-page .ph .ov h4{font-family:var(--serif);font-weight:500;font-size:clamp(20px,2.2vw,28px);letter-spacing:0;line-height:1.05;margin-top:4px}
.s-page .ph .ov b{font-family:var(--serif);font-size:clamp(20px,2vw,26px);font-weight:500;white-space:nowrap}
.s-page .body{display:grid;grid-template-columns:1fr 1.2fr;gap:18px;padding:16px 18px 18px}
.s-page .st{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.s-page .st div{background:#f5f3ee;border-radius:0;padding:8px 10px}
.s-page .st b{display:block;font-size:16px;font-weight:600;letter-spacing:-.02em}
.s-page .st small{font-size:10px;color:#8b877f;text-transform:uppercase;letter-spacing:.1em}
.s-page .pl small{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lo)}
.s-page .br{display:grid;grid-template-columns:70px 1fr 46px;gap:8px;align-items:center;font-size:11.5px;color:#55524c;margin-top:9px}
.s-page .br .tk{height:6px;border-radius:0;background:#ece9e2;overflow:hidden}
.s-page .br .tk i{display:block;height:100%;width:0;border-radius:0;background:linear-gradient(90deg,var(--gold-lo),var(--gold));transition:width 1.4s var(--ease)}
.scene.on .s-page .br .tk i{width:var(--w)}
.scene.on .s-page .br:nth-child(3) .tk i{transition-delay:.2s}
.scene.on .s-page .br:nth-child(4) .tk i{transition-delay:.4s}
.s-page .br b{font-weight:600;color:#111;text-align:right}
.s-page .cta{margin-top:12px;display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:#111;color:#fff;padding:9px 14px;border-radius:0}
@media (max-width:520px){.s-page .body{grid-template-columns:1fr}}

/* Escena 3: visita desde el teléfono + aviso */
.s-show{position:relative;width:100%;height:100%;display:grid;place-items:center}
.ph-mini{width:min(250px,62%);aspect-ratio:9/18.5;border-radius:0;padding:9px;background:#141416;box-shadow:0 0 0 1px #2a2a2e,0 40px 80px -30px #000}
.ph-mini .sc{height:100%;border-radius:0;background:#fff;color:#111;padding:38px 14px 14px;position:relative;overflow:hidden}
.ph-mini .sc::before{content:"";position:absolute;top:9px;left:50%;width:70px;height:20px;margin-left:-35px;border-radius:0;background:#000}
.ph-mini h5{font-size:15px;font-weight:600;letter-spacing:-.02em}
.ph-mini .ad{font-size:11px;color:#8b877f;margin-top:2px}
.ph-mini .days{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:14px}
.ph-mini .days span{text-align:center;border-radius:0;padding:7px 0;font-size:10px;background:#f3f1ec;color:#55524c;line-height:1.2}
.ph-mini .days span b{display:block;font-size:15px;color:#111}
.ph-mini .days span.sel{background:#111;color:#cfc8b8}
.ph-mini .days span.sel b{color:var(--gold-hi)}
.ph-mini .slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.ph-mini .slots span{text-align:center;font-size:11px;padding:8px 0;border-radius:0;box-shadow:0 0 0 1px #e6e2d9 inset}
.ph-mini .slots span.sel{box-shadow:0 0 0 2px var(--gold) inset;font-weight:600}
.ph-mini .chk{display:flex;align-items:center;gap:8px;font-size:11.5px;margin-top:12px;color:#333}
.ph-mini .chk i{width:16px;height:16px;border-radius:0;background:var(--gold);display:grid;place-items:center;font-style:normal;font-size:10px;color:#111}
.ph-mini .go{position:absolute;left:14px;right:14px;bottom:14px;text-align:center;background:#111;color:#fff;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:12px;border-radius:0}
.scene.on .ph-mini .go{animation:press .5s 1s ease}
@keyframes press{50%{transform:scale(.94);background:var(--gold-lo)}}
.push{position:absolute;top:22px;left:50%;width:min(360px,88%);margin-left:max(-180px,-44%);background:rgba(250,248,243,.97);color:#111;border-radius:0;padding:12px 14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.8);display:grid;grid-template-columns:30px 1fr;gap:10px;opacity:0;transform:translateY(-40px) scale(.96)}
.push i{width:30px;height:30px;border-radius:0;background:#000;color:var(--gold);display:grid;place-items:center;font-style:normal;font-family:var(--serif);font-size:18px}
.push small{font-size:11px;color:#8a8a8e;display:flex;justify-content:space-between;text-transform:uppercase;letter-spacing:.04em}
.push b{display:block;font-size:13.5px;font-weight:600;margin-top:1px}
.push p{font-size:12.5px;color:#333;line-height:1.35}
.scene.on .push{animation:drop .8s 1.6s var(--spring) forwards}
@keyframes drop{to{opacity:1;transform:none}}

/* Escena 4: tablero */
.s-board{width:100%;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;position:relative}
.s-board .c{border-radius:0;background:rgba(244,239,228,.03);box-shadow:0 0 0 1px var(--line-2) inset;padding:10px 8px;min-height:250px}
.s-board .c h6{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-bottom:10px;display:flex;justify-content:space-between}
.s-board .c h6 i{font-style:normal;color:var(--gold)}
.s-board .k{border-radius:0;background:var(--bg-3);box-shadow:0 0 0 1px var(--line-2) inset;padding:9px 9px 8px;margin-bottom:7px;font-size:11px;color:var(--t2)}
.s-board .k b{display:block;font-size:12px;font-weight:500;color:var(--ivory);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-board .k em{font-style:normal;display:inline-block;margin-top:6px;font-size:10px;font-weight:600;color:var(--gold-hi);background:rgba(216,178,106,.12);padding:2px 7px;border-radius:0}
.s-board .k.hot{position:absolute;top:34px;left:8px;width:calc((100% - 32px) / 5 - 16px);box-shadow:0 0 0 1px var(--gold) inset,0 18px 40px -16px rgba(216,178,106,.7);z-index:2}
.scene.on .s-board .k.hot{animation:travel 2.4s .6s var(--ease) forwards}
@keyframes travel{0%{transform:translate(0,0)}35%{transform:translate(calc(100% + 24px),-6px) rotate(2deg)}70%,100%{transform:translate(calc(200% + 48px),0) rotate(0)}}
.s-board .lt{float:right;width:7px;height:7px;border-radius:50%;margin-top:4px}
.lt.r{background:var(--red)}.lt.a{background:var(--amber)}.lt.g{background:var(--green)}
.s-board .fz{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:0;background:linear-gradient(90deg,rgba(216,178,106,.1),transparent);font-size:12px;color:var(--t2)}
.s-board .fz b{color:var(--gold);font-weight:600}
@media (max-width:620px){.s-board{grid-template-columns:repeat(3,1fr)}.s-board .c:nth-child(n+4){display:none}.s-board .k.hot{width:calc((100% - 16px) / 3 - 16px)}}

/* Escena 5: seguimiento */
.s-seq{width:min(440px,100%)}
.s-seq .tl{position:relative;padding-left:28px}
.s-seq .tl::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:1px;background:var(--line)}
.s-seq .it2{position:relative;padding:10px 0 12px;opacity:.35;transition:opacity .4s}
.s-seq .it2::before{content:"";position:absolute;left:-25px;top:15px;width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 1px var(--gold) inset;background:var(--bg-2)}
.s-seq .it2 small{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.s-seq .it2 b{display:block;font-weight:500;font-size:16px}
.s-seq .it2 span{font-size:13px;color:var(--t3)}
.scene.on .s-seq .it2{animation:lit .5s forwards}
.scene.on .s-seq .it2:nth-child(1){animation-delay:.2s}
.scene.on .s-seq .it2:nth-child(2){animation-delay:.7s}
.scene.on .s-seq .it2:nth-child(3){animation-delay:1.2s}
@keyframes lit{to{opacity:1}}
.scene.on .s-seq .it2:nth-child(-n+3)::before{background:var(--gold);transition:background .3s .2s}
.s-seq .it2.x{text-decoration:line-through;text-decoration-color:var(--t3)}
.bub{margin:10px 0 0 28px;max-width:300px;background:#e9e4d8;color:#111;font-size:14px;padding:12px 15px;border-radius:0;opacity:0;transform:translateY(12px) scale(.9);transform-origin:0 100%}
.bub small{display:block;font-size:11px;color:#6d6a63;margin-bottom:2px}
.scene.on .bub{animation:pop .7s 1.9s var(--spring) forwards}
.stopped{display:inline-flex;align-items:center;gap:8px;margin:14px 0 0 28px;font-size:12.5px;font-weight:600;color:#120d04;background:var(--metal);background-size:220% 100%;padding:8px 14px;border-radius:0;opacity:0;transform:translateY(8px)}
.scene.on .stopped{animation:pop .6s 2.6s var(--spring) forwards}

/* Escena 6: vendida */
.s-sold{position:relative;width:100%;max-width:560px}
.s-sold .ph{position:relative;aspect-ratio:16/10;border-radius:0;overflow:hidden;box-shadow:0 40px 80px -30px #000}
.s-sold .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.8)}
.stamp{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-8deg) scale(2.4);opacity:0;font-size:clamp(38px,6vw,72px);font-weight:700;letter-spacing:.12em;color:var(--gold-hi);padding:6px 26px;border:3px solid var(--gold-hi);border-radius:0;text-shadow:0 2px 20px rgba(0,0,0,.5);box-shadow:0 0 0 6px rgba(0,0,0,.18)}
.scene.on .stamp{animation:stamp .6s .5s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes stamp{to{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}}
.review{position:absolute;right:-6px;bottom:-26px;width:min(300px,80%);background:#fff;color:#111;border-radius:0;padding:14px 16px;box-shadow:0 30px 60px -20px rgba(0,0,0,.8);opacity:0;transform:translateY(20px)}
.review small{font-size:11px;color:#8a8a8e}
.review b{display:block;font-size:14px;font-weight:600;margin:2px 0 6px}
.review .stars{color:var(--gold);letter-spacing:3px;font-size:18px}
.scene.on .review{animation:pop .8s 1.3s var(--spring) forwards}
.confetti{position:absolute;inset:0;pointer-events:none}
.confetti i{position:absolute;top:44%;left:50%;width:6px;height:10px;background:var(--gold);opacity:0;border-radius:0}
.scene.on .confetti i{animation:burst 1.6s .6s var(--ease) forwards}
@keyframes burst{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}

/* Historia en móvil: escenas una debajo de otra */
.story.stacked{height:auto}
.story.stacked .pin{position:relative;height:auto;display:block;padding:clamp(80px,12vw,120px) 0}
.story.stacked .pin .wrap{display:block}
.story.stacked .chap{display:none}
.story.stacked .stage{aspect-ratio:auto;background:none;box-shadow:none;overflow:visible;border-radius:0}
.story.stacked .stage::before{display:none}
.story.stacked .scene{position:relative;inset:auto;min-height:0;margin-bottom:56px;padding:0;display:block}
.story.stacked .scene .cap{display:block;margin-bottom:20px}
.story.stacked .scene .cap small{font-size:12px;font-weight:600;color:var(--gold);letter-spacing:.1em}
.story.stacked .scene .cap b{display:block;font-size:24px;font-weight:500;letter-spacing:-.02em;margin-top:4px}
.story.stacked .scene .cap p{font-size:15px;color:var(--t2);margin-top:6px}
.story.stacked .scene .inner{position:relative;border-radius:0;background:radial-gradient(120% 90% at 80% 0%,rgba(216,178,106,.14),transparent 55%),var(--bg-2);box-shadow:0 0 0 1px var(--line-2) inset;padding:22px 16px;min-height:340px;display:grid;place-items:center;overflow:hidden}
.story.stacked .demo-tag{display:none}
.story.stacked .s-show{min-height:460px}
.story.stacked .review{right:6px}
.inner{display:contents}

/* ── GALERÍA HORIZONTAL DE WEBS ────────────────── */
.hgal{position:relative;height:340vh}
.hgal .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.hgal .hd{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:clamp(28px,4vh,50px)}
.hgal .hd h2{max-width:12ch}
.hgal .hd .lead{max-width:420px}
.htrack{display:flex;gap:28px;padding-left:var(--gut);will-change:transform}
.wsite{flex:0 0 auto;width:clamp(300px,46vw,700px);border-radius:0;overflow:hidden;background:#fff;color:#111;box-shadow:0 50px 100px -40px #000}
.wsite .bar{display:flex;gap:6px;align-items:center;padding:12px 14px;background:#f3f1ec}
.wsite .bar i{width:9px;height:9px;border-radius:50%;background:#d6d2c9}
.wsite .bar span{margin-left:8px;font-size:12px;color:#8b877f}
.wsite .shot{position:relative;aspect-ratio:16/9.5;overflow:hidden}
.wsite .shot img{width:100%;height:100%;object-fit:cover}
.wsite .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.4),transparent 30%,rgba(0,0,0,.65))}
.wsite .top{position:absolute;z-index:2;top:16px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;color:#fff;font-size:10px;letter-spacing:.26em;text-transform:uppercase}
.wsite .top b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:28px;letter-spacing:0;text-transform:none}
.wsite .hl{position:absolute;z-index:2;left:22px;bottom:22px;right:22px;color:#fff}
.wsite .hl i{display:block;width:40px;height:2px;margin-bottom:14px}
.wsite .hl h4{font-family:var(--serif);font-weight:400;letter-spacing:-.005em;font-size:clamp(26px,3vw,44px);line-height:1.02}
.wsite .hl span{display:inline-block;margin-top:14px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:9px 14px;color:#111}
.wsite .ft{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;font-size:13px;color:#6d6a63}
.wsite .ft b{color:#111;font-weight:600}
.sw{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-1px;margin-right:8px}
.hgal .end{flex:0 0 auto;width:clamp(260px,30vw,420px);display:flex;flex-direction:column;justify-content:center;gap:22px;padding-right:var(--gut)}
.hgal .end p{font-size:clamp(20px,1.7vw,26px);font-weight:300;letter-spacing:-.02em;color:var(--ivory);line-height:1.2}
@media (max-width:860px){
  .hgal{height:auto}.hgal .pin{position:relative;height:auto;padding:90px 0}
  .hgal .hd{flex-direction:column;align-items:flex-start}
  .htrack{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:20px;padding-right:var(--gut);transform:none!important;scrollbar-width:none}
  .htrack::-webkit-scrollbar{display:none}
  .wsite{width:84vw;scroll-snap-align:center}
  .hgal .end{width:78vw;scroll-snap-align:center}}

/* ── CIFRAS QUE GIRAN ──────────────────────────── */
.facts{padding:clamp(100px,12vw,170px) 0}
.facts .grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.facts .f{padding:34px 26px 0 0}
.facts .f+.f{padding-left:26px;border-left:1px solid var(--line)}
.facts .f b{display:block;font-size:clamp(48px,4.8vw,80px);font-weight:200;letter-spacing:-.04em;line-height:.95}
.facts .f p{margin-top:16px;font-size:15.5px;max-width:240px}
.facts h2{margin-bottom:clamp(40px,5vw,70px);max-width:15ch}
@media (max-width:900px){.facts .grid{grid-template-columns:1fr 1fr}.facts .f,.facts .f+.f{padding:28px 16px 28px 0;border-left:0;border-bottom:1px solid var(--line)}}

/* ── TODO LO QUE INCLUYE (foco que sigue el cursor) ─ */
.allsec{padding:clamp(90px,11vw,150px) 0}
.allsec .hd{text-align:center;max-width:820px;margin:0 auto clamp(44px,5vw,70px)}
.allsec .hd h2{margin:18px 0 20px}
.allsec .hd .lead{margin:0 auto}
.all{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.spot{position:relative;border-radius:0;background:var(--bg-2);box-shadow:0 0 0 1px var(--line-2) inset;padding:30px 26px;overflow:hidden;isolation:isolate}
.spot::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;background:radial-gradient(360px circle at var(--x,50%) var(--y,0%),rgba(216,178,106,.18),transparent 60%)}
.spot::after{content:"";position:absolute;inset:0;border-radius:0;padding:1px;opacity:0;transition:opacity .4s;background:radial-gradient(260px circle at var(--x,50%) var(--y,0%),rgba(243,220,162,.7),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.spot:hover::before,.spot:hover::after{opacity:1}
.spot .ic{width:44px;height:44px;border-radius:0;display:grid;place-items:center;background:rgba(216,178,106,.1);color:var(--gold);margin-bottom:22px}
.spot h4{font-size:13px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.spot ul{list-style:none}
.spot li{padding:10px 0;border-top:1px solid var(--line-2);font-size:15px;line-height:1.35}
.spot li small{display:block;color:var(--t3);font-size:13px;margin-top:3px}
@media (max-width:1100px){.all{grid-template-columns:1fr 1fr}}
@media (max-width:580px){.all{grid-template-columns:1fr}}

/* ── PRECIO: tarjeta de metal ──────────────────── */
.pricing{padding:clamp(90px,11vw,150px) 0;overflow:hidden}
.pricing .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:center}
.pricing h2{margin:18px 0 22px}
.pricing ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 26px;margin:30px 0 36px}
.pricing li{padding:12px 0;border-top:1px solid var(--line-2);font-size:15px;display:flex;gap:10px}
.pricing li::before{content:"";flex-shrink:0;width:7px;height:7px;margin-top:8px;background:var(--gold);transform:rotate(45deg)}
.pricing .fine{font-size:13px;color:var(--t3);margin-top:16px}
.card3d{perspective:1200px}
.mcard{position:relative;aspect-ratio:1.586;width:100%;max-width:520px;margin:0 auto;border-radius:0;padding:clamp(22px,3vw,34px);background:
  radial-gradient(140% 120% at var(--gx,30%) var(--gy,0%),rgba(255,255,255,.14),transparent 45%),
  repeating-linear-gradient(115deg,rgba(255,255,255,.025) 0 2px,transparent 2px 5px),
  linear-gradient(145deg,#1d1d20,#08080a 60%,#151517);
  box-shadow:0 0 0 1px rgba(246,227,174,.25) inset,0 70px 120px -50px #000,0 30px 60px -40px rgba(216,178,106,.35);
  transform:rotateX(var(--rx,8deg)) rotateY(var(--ry,-14deg));transform-style:preserve-3d;transition:transform .5s var(--ease);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.mcard.live{transition:transform .08s linear}
.mcard .row1{display:flex;justify-content:space-between;align-items:flex-start}
.mcard .chip{width:clamp(42px,5vw,56px);aspect-ratio:1.3;border-radius:0;background:var(--metal);background-size:220% 100%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.mcard .chip::after{content:"";display:block;margin:22% 18%;height:56%;border:1px solid rgba(0,0,0,.25);border-radius:0}
.mcard .brand{text-align:right;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--t2)}
.mcard .brand b{display:block;font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:0;text-transform:none;font-size:clamp(24px,2.6vw,34px)}
.mcard .amt{font-size:clamp(44px,4.8vw,72px);font-weight:200;letter-spacing:-.04em;line-height:.9;transform:translateZ(40px)}
.mcard .amt sup{font-size:.34em;vertical-align:top;position:relative;top:.25em;margin-right:4px;color:var(--gold)}
.mcard .amt small{font-size:.2em;letter-spacing:0;color:var(--t2);margin-left:8px;font-weight:400}
.mcard .row2{display:flex;justify-content:space-between;align-items:flex-end;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--t3)}
.mcard .row2 b{color:var(--gold-hi);font-weight:500}
.mcard .glare{position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.12) 48%,transparent 60%);transform:translateX(var(--gl,-30%));pointer-events:none}
@media (max-width:900px){.pricing .grid{grid-template-columns:1fr}.card3d{order:-1}}
@media (max-width:520px){.pricing ul{grid-template-columns:1fr}}

/* ── CIERRE ────────────────────────────────────── */
.final{position:relative;min-height:90vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;isolation:isolate;padding:120px 0}
.final>video,.final>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.final::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 70% at 50% 50%,rgba(7,7,7,.55),rgba(7,7,7,.92))}
.final h2{font-size:clamp(36px,4.8vw,80px);line-height:1;max-width:14ch;margin:22px auto 26px}
.final .lead{margin:0 auto}
.final .ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:40px}

footer{border-top:1px solid var(--line-2);padding:60px 0 36px;color:var(--t2);font-size:15px}
.f-cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px}
.f-cols h6{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory);margin-bottom:16px}
.f-cols a{display:block;padding:5px 0}
.f-cols a:hover{color:var(--gold)}
.f-cols p{max-width:300px;margin-top:16px;font-size:14px;color:var(--t3)}
.f-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:50px;padding-top:24px;border-top:1px solid var(--line-2);font-size:13px;color:var(--t3)}
.f-bot nav{display:flex;gap:20px}
@media (max-width:820px){.f-cols{grid-template-columns:1fr 1fr}}

/* Revelado */
.rv{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  body::after{display:none}
  .rv,.hero .lead,.try{opacity:1;transform:none}
  .hero h1 .ln>span{transform:none}
  .scene .recs div,.push,.bub,.stopped,.review,.stamp{opacity:1!important}
  .stamp{transform:translate(-50%,-50%) rotate(-8deg)}
  .s-page .br .tk i{width:var(--w)}
}
.s-board .k.ghost{visibility:hidden}

/* Ajustes tras ver las capturas (10-nov): el teléfono cabía mal en la escena 3
   y la galería no entraba en pantallas de 900 px de alto. */
.ph-mini{width:auto;height:88%;max-height:500px;aspect-ratio:9/18.5}
.s-show .push{top:auto;bottom:24px}
.story.stacked .ph-mini{height:420px}
.hgal .hd h2{font-size:clamp(28px,3vw,48px)}
.wsite{width:min(46vw,640px,calc((100vh - 300px) * 1.5))}
.wsite .shot{aspect-ratio:16/9}
@media (max-width:860px){.wsite{width:84vw}}

/* ── ELEGANCIA (Zoe, 10-nov: «demasiado grande, dale más elegancia, los bordes
   cuadrados no redondos»). Esquinas a 0 en todo; menú en barra fina; pesos finos. ── */
.nav{top:0}
.nav .wrap{height:78px;border-bottom:1px solid rgba(216,178,106,.22)}
.pillnav,.navend{background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0}
.nav.solid{background:rgba(7,7,7,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.nav.solid .pillnav{background:transparent}
.logo{font-weight:400;letter-spacing:.28em;text-transform:uppercase;font-size:13px}
.logo i{width:26px;height:26px;background:none;box-shadow:0 0 0 1px var(--gold) inset;color:var(--gold);font-weight:400}
.logo span{letter-spacing:.28em}
.navlinks a,.navend a:not(.btn){font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:10px 14px}
.navlinks a:hover{background:none;color:var(--gold-hi)}
.field{padding:6px 6px 6px 18px;background:rgba(7,7,7,.6)}
.field input{height:44px;font-size:15px;font-weight:300}
.btn-gold{box-shadow:0 0 0 1px rgba(246,227,174,.35) inset}
.btn-gold:hover{transform:none;box-shadow:0 0 0 1px rgba(246,227,174,.6) inset,0 14px 40px -18px rgba(216,178,106,.8)}
.btn:hover .ar{transform:translateX(3px)}
.hero h1 .it{font-weight:300}
.chap li b small{font-weight:400}
.facts .f b.au{font-weight:200}
.mcard{max-width:460px}
/* el teléfono sigue siendo un teléfono */
.ph-mini{border-radius:30px}.ph-mini .sc{border-radius:22px}.ph-mini .sc::before{border-radius:12px}
.scrolly i{border-radius:12px}.s-page .bar i,.wsite .bar i{border-radius:50%}

/* ── REAL, NO «IA» (Zoe, 10-nov: «más variación de colores en las secciones, que se
   note real, no AI»). Fuera grano, polvo, oro metálico que brilla y destellos:
   oro PLANO y secciones con color propio, como una revista de casas. ── */
body::after{display:none}
.au{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--gold)}
.btn-gold{background:#c9a45c;color:#16110a}
.btn-gold:hover{background:#d6b46e}
.btn-gold::after{display:none}
.progress{background:#c9a45c}
.chap .bar{background:var(--gold);box-shadow:none}
.stopped{background:#c9a45c}
.stage{background:rgba(255,255,255,.03)}
.stage::before{display:none}
.fill,.s-page .br .tk i{background:var(--gold)}

/* Tonos de sección: cada uno redefine las variables y los componentes se adaptan solos */
.tone-espresso{background:#16120e}
.tone-espresso .stage{background:#1d1813;box-shadow:0 0 0 1px rgba(244,239,228,.08) inset}
.tone-ivory,.tone-stone{--ivory:#17140f;--t2:rgba(23,20,15,.7);--t3:rgba(23,20,15,.48);--line:rgba(23,20,15,.16);--line-2:rgba(23,20,15,.09);--gold:#8f6c2e;color:#17140f}
.tone-ivory{background:#f3eee5}
.tone-stone{background:#ddd4c4}
.tone-ivory .wsite{box-shadow:0 30px 60px -36px rgba(40,30,15,.45)}
.tone-ivory .btn-ghost{color:#17140f}
.tone-ivory .mcard .amt,.tone-ivory .mcard{color:#f4efe4}
.tone-ivory .mcard{--t2:rgba(244,239,228,.68);--t3:rgba(244,239,228,.42);--gold:#d8b26a;box-shadow:0 0 0 1px rgba(246,227,174,.25) inset,0 50px 90px -40px rgba(30,20,8,.55)}
.tone-stone .facts .f b,.tone-stone .f b{color:#17140f}
.tone-stone .f b.au{color:#8f6c2e}
.wsite{background:none}
.hgal .sample{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--t3);margin-top:14px}

/* ── DÍA UNO · SEO (heredado de Salesio Web: publish_edge/seo_web.py —
   RealEstateAgent, IndexNow, resumen para IA). Fondo verde bosque. ── */
.tone-forest{background-color:#1a2420;background-image:
  radial-gradient(70% 60% at 50% 120%,rgba(10,15,12,.75),transparent 70%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='900'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .011' numOctaves='6' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .30  0 0 0 0 .40  0 0 0 0 .35  0 0 0 1.9 -.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  radial-gradient(55% 45% at 75% 30%,rgba(58,78,68,.45),transparent 70%),
  radial-gradient(50% 45% at 20% 70%,rgba(46,64,55,.6),transparent 72%),
  radial-gradient(40% 35% at 8% 10%,rgba(14,20,17,.9),transparent 70%);
  background-size:auto,cover,auto,auto,auto;
  --line:rgba(236,240,232,.16);--line-2:rgba(236,240,232,.09)}
/* verde de platos.world (muestreado de su web, 10-nov): base #1b2520, nubes #222d29, fondo #151c18 */
.seo{padding:clamp(90px,11vw,150px) 0}
.seo .hd{max-width:760px;margin-bottom:clamp(50px,6vw,90px)}
.seo .hd h2{margin:18px 0 20px}
.seo-row{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,5vw,80px);align-items:center;padding:clamp(40px,5vw,70px) 0;border-top:1px solid var(--line)}
.seo-row:nth-child(even) .viz{order:-1}
.seo-row .num{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.seo-row h3{margin:14px 0 14px;font-size:clamp(22px,2vw,30px)}
.seo-row p{font-size:16px;font-weight:300}
.seo-row ul{list-style:none;margin-top:20px}
.seo-row li{padding:9px 0 9px 22px;border-top:1px solid var(--line-2);font-size:14.5px;position:relative;color:var(--t2)}
.seo-row li::before{content:"";position:absolute;left:0;top:16px;width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}
.viz{background:rgba(244,239,228,.035);box-shadow:0 0 0 1px var(--line) inset;padding:clamp(18px,2.4vw,30px)}
.viz .lbl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--t3);margin-bottom:8px}
.viz code{display:block;font:13px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--t2);white-space:pre-wrap}
.viz code .k{color:var(--gold-hi)}.viz code .x{text-decoration:line-through;color:var(--t3)}.viz code .s{color:#b9d3c2}
.viz .pane+.pane{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-2)}
.viz .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.viz .tags span{font-size:12px;padding:6px 10px;box-shadow:0 0 0 1px var(--line) inset;color:var(--t2)}
.viz .tags b{color:var(--ivory);font-weight:400}
.urls div{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--line-2);font-size:13.5px}
.urls div span{color:var(--t3);font:12px ui-monospace,Menlo,monospace}
.urls div b{font-weight:400}
.urls div em{grid-column:1/-1;font-style:normal;font-size:12px;color:var(--gold)}
.urls div em::before{content:"⌕ ";}
.serp{margin-top:18px;background:#fff;color:#202124;padding:14px 16px;font-family:Arial,sans-serif}
.serp small{color:#4d5156;font-size:12px}
.serp b{display:block;color:#1a0dab;font-weight:400;font-size:17px;margin:3px 0}
.serp p{color:#4d5156;font-size:13px;line-height:1.45}
.gv{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line-2)}
.gv b{font-weight:400;font-size:16px}.gv small{display:block;color:var(--t3);font-size:12px}
.gv .ok{font-size:12px;color:#9fd1b0;box-shadow:0 0 0 1px rgba(159,209,176,.4) inset;padding:6px 10px}
.ais{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
.ais span{text-align:center;font-size:12.5px;padding:12px 4px;box-shadow:0 0 0 1px var(--line) inset;color:var(--t2)}
.exit{position:relative;aspect-ratio:16/10;overflow:hidden}
.exit img{width:100%;height:100%;object-fit:cover}
.exit .ov{position:absolute;left:16px;right:16px;bottom:16px;display:flex;justify-content:space-between;align-items:center;gap:12px;background:rgba(27,37,32,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:14px 16px;box-shadow:0 0 0 1px var(--line) inset}
.exit .ov small{display:block;font-size:11px;color:var(--t3);letter-spacing:.06em}
.exit .ov b{display:block;font-weight:400;font-size:15px}
.exit .ov span{font-size:12px;color:var(--t2)}
.exit .ov i{font-style:normal;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;background:#c9a45c;color:#16110a;padding:10px 14px;white-space:nowrap}
.ess{margin-top:14px;padding:14px 16px;box-shadow:0 0 0 1px var(--line) inset;font-size:13px}
.ess .t{display:flex;justify-content:space-between;color:var(--t2);margin-bottom:8px}
.ess .t b{color:var(--gold);font-weight:400}
.ess div{display:flex;justify-content:space-between;padding:6px 0;border-top:1px solid var(--line-2);color:var(--t2)}
.ess div.d::after{content:"✓";color:#9fd1b0}
.ess div.n::after{content:"Next";font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.xg{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(40px,5vw,70px);border-top:1px solid var(--line)}
.xg div{padding:24px 22px 24px 0;border-bottom:1px solid var(--line-2)}
.xg div:not(:nth-child(4n+1)){padding-left:22px;border-left:1px solid var(--line-2)}
.xg b{display:block;font-weight:400;font-size:16px;margin-bottom:6px}
.xg span{font-size:14px;color:var(--t3);font-weight:300}
.xhead{margin-top:clamp(60px,7vw,100px)}
.xhead h3{font-size:clamp(24px,2.4vw,36px);margin-top:14px}
@media (max-width:900px){.seo-row{grid-template-columns:1fr}.seo-row:nth-child(even) .viz{order:0}.xg{grid-template-columns:1fr 1fr}.xg div,.xg div:not(:nth-child(4n+1)){padding:20px 14px 20px 0;border-left:0}}
@media (max-width:520px){.xg{grid-template-columns:1fr}.ais{grid-template-columns:1fr 1fr}}
/* Móvil: la reseña va debajo de la foto para no tapar el sello */
.story.stacked .s-sold .review{position:relative;right:auto;bottom:auto;width:auto;margin:-18px 10px 0 30px}
.story.stacked .stamp{font-size:28px;padding:4px 16px}
/* Logo nuevo de Estates (marco dorado + S, media/logo-mark.svg) */
.logo .mk{width:30px;height:30px;flex-shrink:0}
.f-cols a.logo{display:flex;padding:0}

/* ── EL PAQUETE DE CADA PROPIEDAD (Zoe, 10-nov: «al medio la casa y al costado todos
   los componentes… hasta que el listing is closed; ese es nuestro resultado: ventas»).
   La casa en el centro, 10 piezas alrededor unidas por líneas; se reproduce sola. ── */
.hub{position:relative;padding:clamp(90px,11vw,150px) 0}
.hub .hd{text-align:center;max-width:820px;margin:0 auto clamp(44px,5vw,70px)}
.hub .hd h2{margin:18px 0 20px}
.hub .hd .lead{margin:0 auto}
.hub-grid{position:relative;display:grid;grid-template-columns:1fr minmax(0,1.25fr) 1fr;gap:clamp(40px,5vw,90px);align-items:center}
.hub-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.hub-lines path{fill:none;stroke:var(--line);stroke-width:1;transition:stroke .4s}
.hub-lines path.on{stroke:var(--gold);stroke-width:1.4}
.hub-lines circle{fill:var(--gold);opacity:0}
.hub-lines circle.on{opacity:1}
.hub-col{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px}
.hub-col h6{font-size:10.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--t3);margin-bottom:6px}
.hub-col.r h6{text-align:right}
.node{display:grid;grid-template-columns:38px 1fr;gap:14px;align-items:center;text-align:left;padding:14px 16px;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px var(--line) inset;border:0;cursor:pointer;transition:background .35s,box-shadow .35s,transform .35s var(--ease)}
.hub-col.r .node{grid-template-columns:1fr 38px;text-align:right}
.hub-col.r .node .ic{order:2}
.node .ic{width:38px;height:38px;display:grid;place-items:center;box-shadow:0 0 0 1px var(--line) inset;color:var(--gold);transition:background .35s,color .35s}
.node b{display:block;font-weight:500;font-size:15px;letter-spacing:-.01em;color:var(--ivory)}
.node small{display:block;font-size:12.5px;color:var(--t3);line-height:1.35;margin-top:2px}
.node:hover{background:#fff}
.node.on{background:#fff;box-shadow:0 0 0 1px var(--gold) inset,0 18px 40px -26px rgba(60,40,10,.5)}
.node.on .ic{background:var(--gold);color:#fff;box-shadow:none}
.node.done .ic{color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.hub-col.l .node.on{transform:translateX(6px)}
.hub-col.r .node.on{transform:translateX(-6px)}

.house{position:relative;z-index:1;aspect-ratio:4/5;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 50px 90px -50px rgba(40,30,15,.6)}
.house>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 6s var(--ease)}
.hub.play .house>img{transform:scale(1)}
.house::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 28%,transparent 45%,rgba(0,0,0,.6))}
.house .top{position:absolute;z-index:2;top:16px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:flex-start;color:#fff}
.house .st{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;padding:8px 12px;background:#c9a45c;color:#16110a;transition:background .4s}
.house .st.sold{background:#16110a;color:#ebc684;box-shadow:0 0 0 1px #ebc684 inset}
.house .ad{text-align:right;font-family:var(--serif);font-size:20px;line-height:1.1;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.house .ad small{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.8;margin-top:4px}
.house .det{position:absolute;z-index:3;left:16px;right:16px;bottom:16px;min-height:150px}
.dm{position:absolute;left:0;right:0;bottom:0;background:rgba(255,255,255,.97);color:#17140f;padding:16px 18px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .6s var(--ease);pointer-events:none}
.dm.on{opacity:1;transform:none}
.dm .k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#8f6c2e;margin-bottom:8px;display:flex;justify-content:space-between}
.dm .k em{font-style:normal;color:#9a958b}
.dm .serp small{color:#4d5156;font-size:11.5px;font-family:Arial,sans-serif}
.dm .serp b{display:block;color:#1a0dab;font-weight:400;font-size:15px;margin:2px 0;font-family:Arial,sans-serif}
.dm .serp p{color:#4d5156;font-size:12.5px;line-height:1.4;font-family:Arial,sans-serif}
.dm .q{display:inline-block;font-size:12px;padding:6px 10px;margin-bottom:8px;box-shadow:0 0 0 1px #dfdcd4 inset;color:#55524c}
.dm .row{display:flex;gap:12px;align-items:center}
.dm .th{width:64px;height:64px;flex-shrink:0;background-size:cover;background-position:center}
.dm .ig{display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:center}
.dm .ig .ph2{position:relative;aspect-ratio:1;background:url("/estates/media/white-living.webp") center/cover}
.dm .ig .ph2 span{position:absolute;left:6px;bottom:6px;font-size:8px;letter-spacing:.2em;background:#16110a;color:#ebc684;padding:4px 6px}
.dm .ig p{font-size:12.5px;line-height:1.4;color:#333}
.dm .ig p b{font-weight:600}
.dm .ig .re{font-size:11px;color:#8a8a8e;margin-top:6px}
.dm .mail b{display:block;font-size:14px;font-weight:600}
.dm .mail p{font-size:12.5px;color:#55524c;margin-top:3px}
.dm .mail .who{display:flex;justify-content:space-between;font-size:11.5px;color:#8a8a8e;margin-bottom:6px}
.dm .fly{display:grid;grid-template-columns:1fr 70px;gap:12px;align-items:center}
.dm .fly b{display:block;font-family:var(--serif);font-size:20px;font-weight:500;line-height:1.05}
.dm .fly p{font-size:12px;color:#55524c;margin-top:4px}
.qr{width:70px;height:70px;background:
  conic-gradient(from 90deg at 3px 3px,#17140f 90deg,transparent 0) 0 0/10px 10px,#fff;box-shadow:0 0 0 4px #fff,0 0 0 5px #17140f;image-rendering:pixelated}
.dm .shw{display:flex;justify-content:space-between;align-items:center;gap:12px}
.dm .shw b{display:block;font-size:14px;font-weight:600}
.dm .shw p{font-size:12.5px;color:#55524c}
.dm .pill{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:7px 10px;background:#16110a;color:#ebc684;white-space:nowrap}
.dm .brd{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.dm .brd div{background:#f3eee5;padding:8px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8a8579;min-height:66px}
.dm .brd i{display:block;font-style:normal;margin-top:6px;padding:6px;background:#fff;font-size:11px;letter-spacing:0;text-transform:none;color:#17140f;box-shadow:0 0 0 1px #e7e1d5 inset}
.dm .brd i.g{box-shadow:0 0 0 1px #c9a45c inset}
.dm .tl2{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
.dm .tl2 span{font-size:11px;padding:8px 4px;box-shadow:0 0 0 1px #e2ddd2 inset;color:#55524c}
.dm .tl2 span b{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8f6c2e;font-weight:500}
.dm .tl2 span.x{color:#b7b2a7;text-decoration:line-through}
.dm .rep{margin-top:8px;font-size:12.5px;background:#ece6d8;padding:8px 10px;display:inline-block}
.dm .bars2 div{display:grid;grid-template-columns:78px 1fr 34px;gap:8px;align-items:center;font-size:12px;color:#55524c;margin-top:6px}
.dm .bars2 div i{height:6px;background:#ece9e2;position:relative}
.dm .bars2 div i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:#c9a45c}
.dm .bars2 div b{font-weight:600;color:#17140f;text-align:right}
.dm .sold2{display:flex;justify-content:space-between;align-items:center;gap:12px}
.dm .sold2 b{font-size:26px;font-weight:300;letter-spacing:.14em;color:#8f6c2e}
.dm .sold2 span{font-size:12px;color:#55524c;text-align:right}
.dm .sold2 span i{display:block;font-style:normal;color:#c9a45c;letter-spacing:3px;font-size:15px}

.road{margin-top:clamp(44px,5vw,70px);display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--t3)}
.road .tr2{position:relative;height:1px;background:var(--line)}
.road .tr2 i{position:absolute;left:0;top:-1px;height:3px;width:var(--rp,0%);background:var(--gold);transition:width .8s var(--ease)}
.road b{color:var(--gold);font-weight:500}
.punch{text-align:center;margin-top:clamp(50px,6vw,90px)}
.punch p{font-size:clamp(22px,2.4vw,36px);font-weight:300;letter-spacing:-.02em;line-height:1.25;color:var(--t2)}
.punch p strong{display:block;font-weight:400;color:var(--ivory);font-size:1.5em;margin-top:6px}
.punch p strong .it{color:var(--gold)}

@media (max-width:1000px){
  .hub-grid{grid-template-columns:1fr 1fr;gap:12px}
  .hub-lines{display:none}
  .house{grid-column:1/-1;order:-1;aspect-ratio:4/4.4;margin-bottom:18px}
  .hub-col.r .node{grid-template-columns:38px 1fr;text-align:left}
  .hub-col.r .node .ic{order:0}
  .hub-col.r h6{text-align:left}
  .hub-col.l .node.on,.hub-col.r .node.on{transform:none}}
@media (max-width:560px){.hub-grid{grid-template-columns:1fr}.node small{display:none}.house{aspect-ratio:4/5}}
.navlinks a,.navend a{white-space:nowrap}