:root{--ink:#20242a;--ink-deep:#101416;--paper:#fbfaf7;--paper-2:#f2eee8;--sand:#c9ad95;--atlantic:#5f8075;--atlantic-soft:#dfe8e3;--muted:#747872;--line:rgba(32,36,42,.16);--white:#fff;--max:1500px;--pad:clamp(20px,4.7vw,74px);--radius:999px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.wrap{width:min(100%,var(--max));margin:auto;padding-inline:var(--pad)}.eye{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}.muted{color:var(--muted)}.dark{background:var(--ink-deep);color:var(--paper)}.dark .muted{color:#9ca29e}.brand{display:inline-flex;align-items:center;gap:16px}.lockup{display:flex;flex-direction:column;gap:6px}.wordmark{display:flex;align-items:baseline;gap:.08em;font-size:15px;letter-spacing:.29em;text-transform:uppercase;white-space:nowrap}.wordmark .a{position:relative;width:.72em;height:1em;display:inline-block}.wordmark .a:before,.wordmark .a:after{content:"";position:absolute;bottom:.04em;width:1.3px;height:1.05em;background:currentColor;transform-origin:bottom}.wordmark .a:before{left:.18em;transform:rotate(27deg)}.wordmark .a:after{right:.14em;transform:rotate(-27deg)}.brand-sub{font-size:7px;font-weight:600;letter-spacing:.29em;text-transform:uppercase;opacity:.67}.monogram{width:58px;height:41px;display:block;flex:none}.monogram path{fill:none;stroke:currentColor;stroke-width:5.5;stroke-linecap:square;stroke-linejoin:miter}.header{position:absolute;z-index:30;inset:0 0 auto;color:#fff}.header.solid{position:relative;background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line)}.headerin{height:92px;display:flex;align-items:center;justify-content:space-between;gap:24px}.nav{display:flex;align-items:center;gap:clamp(10px,1.25vw,21px)}.nav a,.nav button{border:0;background:none;color:inherit;font-size:8px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}.nav a:hover{opacity:.58}.nav .advisor{border:1px solid currentColor;border-radius:var(--radius);padding:10px 13px}.nav .admin{opacity:.65}.menu-toggle{display:none;border:1px solid currentColor;background:none;color:inherit;border-radius:var(--radius);padding:8px 11px;font-size:9px;text-transform:uppercase}.hero{position:relative;min-height:760px;height:94vh;display:flex;align-items:flex-end;color:#fff;background:var(--ink-deep);overflow:hidden}.film{position:absolute;inset:0;background:radial-gradient(circle at 77% 28%,rgba(95,128,117,.55),transparent 21%),radial-gradient(circle at 57% 70%,rgba(201,173,149,.2),transparent 22%),linear-gradient(126deg,#0c1112,#1d2523 49%,#4f625b);overflow:hidden}.film:before{content:"";position:absolute;width:min(58vw,760px);aspect-ratio:1;border:1px solid rgba(255,255,255,.22);border-radius:50%;right:-10vw;top:9vh;animation:orbit 16s ease-in-out infinite alternate}.film:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,9,8,.86),rgba(6,9,8,.08) 63%)}.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}.hero-video.active{display:block}.hero-content{position:relative;z-index:5;padding-bottom:48px;width:100%}.hero h1,.pagehero h1{font-size:clamp(62px,10.8vw,166px);font-weight:400;line-height:.76;letter-spacing:-.074em;text-transform:uppercase;margin:16px 0 34px}.herofoot{display:grid;grid-template-columns:1.2fr .8fr;gap:45px;padding-top:22px;border-top:1px solid rgba(255,255,255,.34)}.herocopy{font-size:clamp(18px,2vw,27px);line-height:1.34;max-width:710px;margin:0;color:#e8e5e0}.actions{display:flex;gap:8px;justify-content:flex-end;align-items:flex-start;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid currentColor;border-radius:var(--radius);padding:11px 15px;font-size:9px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;background:transparent;color:inherit;cursor:pointer}.btn.fill{background:#fff;color:var(--ink);border-color:#fff}.btn.green{background:var(--atlantic);color:#fff;border-color:var(--atlantic)}.section{position:relative;padding:clamp(80px,9vw,142px) 0;overflow:hidden}.section.tight{padding:clamp(60px,7vw,100px) 0}.head{display:grid;grid-template-columns:.58fr 2.42fr;gap:45px;margin-bottom:58px}.head h2,.big{font-size:clamp(46px,7vw,96px);font-weight:400;line-height:.9;letter-spacing:-.061em;margin:0}.head p{font-size:17px;line-height:1.55;max-width:700px}.circle-bg:before{content:"";position:absolute;width:clamp(260px,34vw,520px);aspect-ratio:1;border:1px solid color-mix(in srgb,var(--atlantic) 42%,transparent);border-radius:50%;right:-9vw;top:10%;pointer-events:none}.circle-bg:after{content:"";position:absolute;width:clamp(110px,14vw,220px);aspect-ratio:1;background:var(--atlantic-soft);border-radius:50%;right:9vw;top:18%;pointer-events:none;opacity:.75}.capabilities{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.cap-card{min-height:330px;border-top:1px solid var(--line);padding:20px 10px 18px 0;display:flex;flex-direction:column;justify-content:space-between;position:relative}.cap-card .circle{width:66px;height:66px;border:1px solid var(--atlantic);border-radius:50%;display:grid;place-items:center;font-size:10px;color:var(--atlantic)}.cap-card h3{font-size:clamp(34px,4vw,56px);font-weight:400;letter-spacing:-.045em;margin:18px 0 8px}.cap-card p{font-size:13px;color:var(--muted);max-width:260px}.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.tool-card{min-height:430px;border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;justify-content:space-between;background:#fff;position:relative;overflow:hidden}.tool-card:after{content:"";position:absolute;width:210px;aspect-ratio:1;border-radius:50%;background:var(--atlantic-soft);right:-65px;top:-65px}.tool-card:nth-child(2):after{background:#efe2d7}.tool-card:nth-child(3):after{background:#e6e7df}.tool-card>*{position:relative;z-index:1}.tool-card h3{font-size:clamp(36px,4vw,58px);font-weight:400;line-height:.95;letter-spacing:-.05em;margin:12px 0}.tool-card p{max-width:330px;color:var(--muted)}.propertygrid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}.property .media{position:relative;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(145deg,#c7b39d,#675a50)}.property:nth-child(2) .media{background:linear-gradient(145deg,#aebbb5,#496159)}.property .media:after{content:"";position:absolute;width:38%;aspect-ratio:1;border:1px solid rgba(255,255,255,.65);border-radius:50%;right:8%;top:10%}.tag{position:absolute;z-index:2;top:15px;left:15px;background:rgba(255,255,255,.93);border-radius:var(--radius);padding:7px 10px;font-size:8px;font-weight:600;letter-spacing:.11em;text-transform:uppercase}.pinfo{display:grid;grid-template-columns:1fr auto;gap:16px;padding-top:13px}.pinfo h3{font-size:clamp(28px,3vw,43px);font-weight:400;letter-spacing:-.04em;margin:0}.price{font-size:17px;font-weight:600}.meta{font-size:12px;color:var(--muted)}.specrow{display:flex;flex-wrap:wrap;gap:13px;margin-top:12px;padding:11px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.spec{font-size:11px}.intelrow{display:grid;grid-template-columns:repeat(4,1fr);margin-top:12px}.intelrow div{padding:0 10px;border-right:1px solid var(--line)}.intelrow div:first-child{padding-left:0}.intelrow div:last-child{border:0}.intelrow small{display:block;font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.intelrow strong{font-size:13px}.intelligence{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(45px,8vw,115px);align-items:center}.dashboard{min-height:540px;padding:24px;border:1px solid #46504c;background:linear-gradient(145deg,#17201d,#0d1211);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.dashboard:after{content:"";position:absolute;width:330px;aspect-ratio:1;border:1px solid rgba(151,183,170,.38);border-radius:50%;right:-110px;top:40px}.dashboard>*{position:relative;z-index:1}.dashtitle{font-size:clamp(54px,7vw,96px);font-weight:400;line-height:.82;letter-spacing:-.07em}.metrics{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(255,255,255,.2)}.metric{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.2)}.metric:nth-child(odd){border-right:1px solid rgba(255,255,255,.2)}.metric small{display:block;font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:#919794}.metric strong{font-size:25px;font-weight:400}.process{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}.step{min-height:250px;padding:22px 18px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between}.step:last-child{border:0}.step .num{width:48px;height:48px;border-radius:50%;background:var(--atlantic-soft);display:grid;place-items:center;color:var(--atlantic);font-size:10px}.step h3{font-size:30px;font-weight:400;margin:0 0 7px}.ecosystem{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.eco{min-height:210px;padding:18px;border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;justify-content:space-between}.eco strong{font-size:24px;font-weight:400;letter-spacing:-.035em}.eco p{font-size:12px;color:var(--muted)}.casegrid,.insights{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.case,.insight{border-top:1px solid var(--line);padding-top:17px;min-height:280px;display:flex;flex-direction:column;justify-content:space-between}.case h3,.insight h3{font-size:clamp(28px,3vw,42px);font-weight:400;line-height:1;letter-spacing:-.04em}.case p,.insight p{font-size:13px;color:var(--muted)}.reviews{background:var(--atlantic-soft)}.reviewhead{display:flex;justify-content:space-between;align-items:end;gap:30px;border-bottom:1px solid var(--line);padding-bottom:22px}.rating{display:flex;align-items:center;gap:12px}.rating strong{font-size:38px;font-weight:400}.reviewstage{min-height:300px;padding:42px 0 18px}.review{display:none}.review.active{display:block}.quote{font-size:clamp(32px,4.7vw,64px);line-height:1.04;letter-spacing:-.05em;font-weight:400;max-width:1140px;margin:0 0 34px}.reviewmeta{font-size:9px;font-weight:600;letter-spacing:.11em;text-transform:uppercase}.round{width:42px;height:42px;border-radius:50%;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer}.areas{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)}.area{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--line);font-size:clamp(30px,4vw,56px);letter-spacing:-.05em}.area:nth-child(odd){padding-right:28px}.area:nth-child(even){padding-left:28px;border-left:1px solid var(--line)}.cta{position:relative;min-height:610px;display:flex;align-items:center;color:#fff;background:var(--atlantic);overflow:hidden}.cta:after{content:"";position:absolute;width:min(55vw,720px);aspect-ratio:1;border:1px solid rgba(255,255,255,.5);border-radius:50%;right:-8vw;top:-15%}.cta h2{font-size:clamp(68px,11vw,150px);font-weight:400;line-height:.77;letter-spacing:-.07em;text-transform:uppercase;margin:15px 0 30px}.footer{background:#fff;color:var(--ink);padding:42px 0;border-top:1px solid var(--line)}.footergrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:38px}.footer p,.footer a{font-size:12px;color:var(--muted)}.footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:36px;padding-top:16px;border-top:1px solid var(--line);font-size:11px}.pagehero{position:relative;padding:clamp(90px,12vw,170px) 0 clamp(70px,9vw,120px);background:var(--paper);overflow:hidden}.pagehero:after{content:"";position:absolute;width:min(44vw,580px);aspect-ratio:1;border-radius:50%;background:var(--atlantic-soft);right:-9vw;top:-16%;z-index:0}.pagehero .wrap{position:relative;z-index:1}.pagehero h1{font-size:clamp(58px,9vw,128px);color:var(--ink);margin-bottom:24px}.pagelede{font-size:clamp(18px,2.2vw,28px);max-width:760px;color:var(--muted)}.feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)}.feature-row{padding:22px 18px 22px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:48px 1fr;gap:14px}.feature-row:nth-child(even){border-left:1px solid var(--line);padding-left:18px}.feature-row b{font-size:20px;font-weight:500}.feature-row p{margin:5px 0 0;color:var(--muted);font-size:13px}.overlay{position:fixed;z-index:80;inset:0;background:rgba(4,7,6,.62);opacity:0;pointer-events:none;transition:opacity .25s}.overlay.open{opacity:1;pointer-events:auto}.adminpanel{position:fixed;z-index:90;inset:0 0 0 auto;width:min(650px,96vw);background:var(--paper);color:var(--ink);transform:translateX(101%);transition:transform .35s;display:flex;flex-direction:column;border-left:1px solid var(--line)}.adminpanel.open{transform:none}.adminhead{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid var(--line)}.adminbody{padding:22px;overflow:auto}.fields{display:grid;grid-template-columns:1fr 1fr;gap:11px}.field{display:flex;flex-direction:column;gap:5px}.field.full{grid-column:1/-1}.field label{font-size:9px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 11px}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.feature{border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff;cursor:pointer;min-height:86px}.feature.active{background:var(--atlantic);color:#fff;border-color:var(--atlantic)}.adminactions{display:flex;gap:8px;margin-top:20px}.statusmsg{font-size:11px;color:var(--muted);margin-top:10px}@keyframes orbit{from{transform:translate3d(0,0,0) scale(.95)}to{transform:translate3d(-4vw,2vh,0) scale(1.08)}}@media(max-width:1050px){.nav{gap:10px}.nav a:not(.advisor):nth-of-type(n+6){display:none}.capabilities,.ecosystem{grid-template-columns:repeat(2,1fr)}}@media(max-width:820px){.nav a,.nav .admin{display:none}.menu-toggle{display:block}.herofoot,.head,.intelligence{grid-template-columns:1fr}.actions{justify-content:flex-start}.propertygrid,.tools-grid,.casegrid,.insights{grid-template-columns:1fr}.process{grid-template-columns:1fr 1fr}.areas{grid-template-columns:1fr}.area:nth-child(even){border-left:0;padding-left:0}.footergrid{grid-template-columns:1fr 1fr}.feature-list{grid-template-columns:1fr}.feature-row:nth-child(even){border-left:0;padding-left:0}}@media(max-width:560px){.headerin{height:76px}.brand-sub{display:none}.wordmark{font-size:11px;letter-spacing:.2em}.hero{min-height:700px;height:auto}.hero h1{font-size:59px}.capabilities,.ecosystem,.process{grid-template-columns:1fr}.cap-card{min-height:240px}.footergrid{grid-template-columns:1fr}.footer-bottom{flex-direction:column}.fields,.features{grid-template-columns:1fr 1fr}.intelrow{grid-template-columns:1fr 1fr}.metrics{grid-template-columns:1fr}.metric:nth-child(odd){border-right:0}}
/* ================= MOTION SYSTEM V2 ================= */
:root{--mo-ease:cubic-bezier(.16,1,.3,1)}
.motion-ready [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--mo-ease),transform .9s var(--mo-ease);will-change:opacity,transform}
.motion-ready [data-reveal="left"]{transform:translateX(-34px)}
.motion-ready [data-reveal="scale"]{transform:scale(.94);transform-origin:bottom}
.motion-ready [data-reveal="mask"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--mo-ease)}
[data-reveal].is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
[data-reveal] [data-stagger],[data-stagger-group]>*{opacity:0;transform:translateY(22px);transition:opacity .8s var(--mo-ease),transform .8s var(--mo-ease);transition-delay:calc(var(--st-i,0)*90ms)}
[data-reveal].is-in [data-stagger],[data-reveal].is-in [data-stagger-group]>*{opacity:1;transform:none}
/* hero intro stagger */
.hero-content>*{opacity:0;transform:translateY(26px)}
.hero-in .hero-content>*{opacity:1;transform:none;transition:opacity 1s var(--mo-ease),transform 1s var(--mo-ease)}
.hero-in .hero-content>*:nth-child(1){transition-delay:.2s}
.hero-in .hero-content>*:nth-child(2){transition-delay:.34s}
.hero-in .hero-content>*:nth-child(3){transition-delay:.48s}
.hero-in .hero-content>*:nth-child(4){transition-delay:.62s}
/* hero film very slow drift + video cover */
.hero .film{transform:scale(1.06);animation:heroDrift 28s ease-in-out infinite alternate}
@keyframes heroDrift{from{transform:scale(1.06) translate3d(-1.4%,0,0)}to{transform:scale(1.14) translate3d(1.6%,-1.6%,0)}}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity 1.4s ease;z-index:0}
.hero-video[data-variant]{opacity:1}
.hero-static .hero-video{display:none}
.film-fallback{position:absolute;inset:0;z-index:0;background:radial-gradient(120% 90% at 72% 24%,rgba(201,173,149,.28),transparent 42%),radial-gradient(120% 120% at 40% 80%,rgba(95,128,117,.36),transparent 46%),linear-gradient(128deg,var(--ink-deep,#101416),#1d2523 48%,#3a4d45)}
.hero .film:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,9,8,.82),rgba(6,9,8,.14) 62%);z-index:1}
.hero-content{position:relative;z-index:2}
/* hero orbs (independent motion, partially off-viewport) */
.hero-orb{position:absolute;border-radius:50%;z-index:1;pointer-events:none;mix-blend-mode:soft-light}
.hero-orb.a{width:54vw;height:54vw;right:-12vw;top:-14vw;background:radial-gradient(circle,rgba(242,239,233,.85),transparent 70%);animation:orbA 32s ease-in-out infinite alternate}
.hero-orb.b{width:42vw;height:42vw;left:-13vw;bottom:-18vw;background:radial-gradient(circle,rgba(95,128,117,.75),transparent 70%);animation:orbB 40s ease-in-out infinite alternate}
@keyframes orbA{from{transform:translate3d(0,0,0)}to{transform:translate3d(-3vw,3vh,0)}}
@keyframes orbB{from{transform:translate3d(0,0,0)}to{transform:translate3d(3vw,-2vh,0)}}
/* scroll cue */
.scroll-cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff;opacity:.82;transition:opacity .5s}
.scroll-cue.hide{opacity:0}
.scroll-cue span{font-size:9px;letter-spacing:.2em;text-transform:uppercase}
.scroll-cue i{width:1px;height:40px;background:linear-gradient(#fff,transparent);animation:cue 2.1s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}
/* reduced motion: everything visible, no animation */
@media (prefers-reduced-motion: reduce){
  .motion-ready [data-reveal],[data-reveal] [data-stagger],[data-stagger-group]>*,.hero-content>*{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .hero .film,.hero-orb,.scroll-cue i{animation:none!important}
  .hero-video{transition:none}
}

[data-stagger-group].is-in>*{opacity:1;transform:none}

/* ================= SCROLL STORY ENGINE v2 ================= */
/* Dynamic header (home only; sub-pages keep .header.solid in flow) */
.header:not(.solid){position:fixed;transition:color .35s ease,background .4s ease,border-color .4s ease}
.header[data-theme="hero"]{background:transparent;color:#fff;border-color:transparent}
.header[data-theme="paper"]{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line)}
.header[data-theme="dark"]{background:var(--ink-deep);color:#fff;border-bottom:1px solid rgba(255,255,255,.1)}
.header[data-theme="green"]{background:var(--atlantic);color:#fff}
/* Big VP circle: navigation language, not decoration */
.hero-bigcircle{position:absolute;left:50%;top:48%;width:min(66vw,860px);aspect-ratio:1;z-index:1;pointer-events:none;transform:translate3d(-50%,calc(-50% + var(--sy,0px)),0) scale(var(--ss,1));will-change:transform,opacity}
.hero-bigcircle .ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(242,239,233,.4);animation:vpSpin 90s linear infinite}
.hero-bigcircle .ring.b{inset:11%;border-color:rgba(201,173,149,.34);animation:vpSpin 130s linear infinite reverse}
.hero-bigcircle .fill{position:absolute;inset:20%;border-radius:50%;background:radial-gradient(circle at 42% 36%,rgba(95,128,117,.42),transparent 66%);animation:vpFloat 20s ease-in-out infinite alternate;mix-blend-mode:screen}
@keyframes vpSpin{to{transform:rotate(360deg)}}
@keyframes vpFloat{from{transform:scale(.97)}to{transform:scale(1.05)}}
/* Reveal families (beyond the uniform fade) */
[data-reveal="text-mask"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--mo-ease)}
[data-reveal="text-mask"].is-in{clip-path:inset(0 0 0 0)}
[data-reveal="image-reveal"]{opacity:1;transform:none;clip-path:inset(0 100% 0 0);transition:clip-path 1.2s var(--mo-ease)}
[data-reveal="image-reveal"].is-in{clip-path:inset(0 0 0 0)}
[data-reveal="scale-in"]{opacity:0;transform:scale(.93);transition:opacity .9s var(--mo-ease),transform .9s var(--mo-ease)}
[data-reveal="scale-in"].is-in{opacity:1;transform:none}
[data-reveal="horizontal-slide"]{opacity:0;transform:translateX(-46px);transition:opacity .9s var(--mo-ease),transform .9s var(--mo-ease)}
[data-reveal="horizontal-slide"].is-in{opacity:1;transform:none}
/* Hover microinteractions (permanent but subtle) */
.property{transition:transform .45s var(--mo-ease)}
.property .media{transition:transform .55s var(--mo-ease)}
.property:hover .media{transform:scale(1.035)}
.property h3{transition:transform .3s ease}
.property:hover h3{transform:translateY(-2px)}
.cap-card h3,.tool-card h3{transition:transform .35s var(--mo-ease)}
.cap-card:hover h3{transform:translateX(5px)}
.area{transition:transform .3s ease}
.area:hover{transform:translateX(6px)}
[data-drift]{will-change:transform}
@media(max-width:820px){.hero-bigcircle{width:118vw;top:42%}}
@media (prefers-reduced-motion: reduce){
  .hero-bigcircle,.hero-bigcircle .ring,.hero-bigcircle .fill{animation:none!important;transform:translate3d(-50%,-50%,0)!important}
  [data-reveal="text-mask"],[data-reveal="image-reveal"]{clip-path:none!important}
  .header:not(.solid){position:absolute}
}

/* ===== MORE MOTION v3: living circles + button color fill + nav ===== */
.circle-bg:before{animation:cbFloatA 24s ease-in-out infinite alternate}
.circle-bg:after{animation:cbFloatB 19s ease-in-out infinite alternate}
@keyframes cbFloatA{from{transform:translate3d(0,0,0) scale(1) rotate(0deg)}to{transform:translate3d(-4vw,3vh,0) scale(1.12) rotate(10deg)}}
@keyframes cbFloatB{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(3vw,-2vh,0) scale(1.22)}}
.dashboard:after{animation:cbFloatA 22s ease-in-out infinite alternate}
.cta:after{animation:cbFloatB 26s ease-in-out infinite alternate}
.tool-card:after{animation:cbFloatB 15s ease-in-out infinite alternate}
/* Buttons: color fill on hover (background-size technique, works with plain text) */
.btn{background-image:linear-gradient(var(--btn-fill,var(--ink)),var(--btn-fill,var(--ink)));background-repeat:no-repeat;background-position:left center;background-size:0% 100%;transition:background-size .45s cubic-bezier(.16,1,.3,1),color .35s ease,border-color .35s ease}
.btn:hover{background-size:100% 100%;color:#fff;border-color:transparent}
.btn.fill{--btn-fill:var(--atlantic)}
.btn.green{--btn-fill:var(--ink-deep)}
/* Nav hover */
.nav a:not(.advisor){position:relative}
.nav a:not(.advisor)::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--mo-ease)}
.nav a:not(.advisor):hover::after{transform:scaleX(1)}
.nav a:not(.advisor):hover{opacity:1}
.nav .advisor{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:left center;background-size:0% 100%;transition:background-size .4s var(--mo-ease),color .3s ease}
.nav .advisor:hover{background-size:100% 100%;color:var(--ink)}
.cap-card,.tool-card,.eco{transition:transform .4s var(--mo-ease)}
.cap-card:hover,.tool-card:hover,.eco:hover{transform:translateY(-6px)}

/* ===== Feil horizontal-parallax orbit circles (injected by motion.js) ===== */
.mo-orbit{position:absolute;z-index:0;pointer-events:none;border-radius:50%;top:6%;
  width:clamp(320px,44vw,640px);aspect-ratio:1;opacity:.5;
  border:1px solid color-mix(in oklab,var(--atlantic) 40%,transparent)}
.mo-orbit--l{left:-16vw;background:radial-gradient(circle,color-mix(in oklab,var(--atlantic-soft) 60%,transparent),transparent 70%)}
.mo-orbit--r{right:-16vw;background:radial-gradient(circle,color-mix(in oklab,var(--sand) 42%,transparent),transparent 70%)}
.section.dark .mo-orbit{opacity:.3;border-color:rgba(255,255,255,.18)}
.section.reviews .mo-orbit{opacity:.35}
.section>.wrap{position:relative;z-index:1}
/* ===== ALL buttons fill with color on hover (incl. WhatsApp .propcta + round + pills + tabs) ===== */
.propcta .btn,.round,.px-pill,.tab{background-image:linear-gradient(var(--btn-fill,var(--ink)),var(--btn-fill,var(--ink)));background-repeat:no-repeat;background-position:left center;background-size:0% 100%;transition:background-size .4s cubic-bezier(.16,1,.3,1),color .3s ease,border-color .3s ease}
.propcta .btn:hover,.round:hover,.px-pill:hover,.tab:hover{background-size:100% 100%;color:#fff;border-color:transparent}
.propcta .btn.green{--btn-fill:var(--ink-deep)}
.round{--btn-fill:var(--ink)}

/* ===== Real closing photo (social proof) ===== */
.review-proof{margin:clamp(28px,5vw,56px) 0 0;position:relative;overflow:hidden;border-radius:18px;
  box-shadow:0 40px 80px -50px rgba(16,20,22,.6)}
.review-proof img{display:block;width:100%;height:auto;transition:transform 1.2s var(--mo-ease)}
.review-proof:hover img{transform:scale(1.03)}
.review-proof figcaption{position:absolute;left:16px;bottom:14px;z-index:2;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#fff;
  background:rgba(16,20,22,.6);backdrop-filter:blur(6px);padding:.5rem .8rem;border-radius:999px}
.review-proof::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,20,22,.35),transparent 42%);pointer-events:none}

/* ===== Brand logo in header ===== */
.brand{gap:12px}
.brand-logo{width:clamp(34px,3.4vw,46px);height:auto;flex:none;border-radius:50%;display:block}
.header:not(.solid) .brand-logo{filter:drop-shadow(0 2px 8px rgba(0,0,0,.3))}

/* ===== Vimeo background video (hero) — cover any aspect ratio ===== */
.hero-vimeo{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;transform:translate(-50%,-50%);border:0;pointer-events:none;z-index:0;opacity:0;transition:opacity 1.6s ease}
.hero-in .hero-vimeo{opacity:1}
.hero-static .hero-vimeo{display:none}
@media (prefers-reduced-motion:reduce){.hero-vimeo{display:none}}

/* ===== Header fixes: real "A" instead of geometric X, bigger nav ===== */
.wordmark .a{width:auto;height:auto;position:static}
.wordmark .a:before{content:"A";position:static;left:auto;width:auto;height:auto;background:none;transform:none;font:inherit}
.wordmark .a:after{content:none;display:none}
.nav a,.nav button{font-size:11px!important;letter-spacing:.09em}
@media(max-width:1050px){.nav a,.nav button{font-size:10px!important}}
/* ===== More breathing room so parallax titles never clip at the top ===== */
.section{padding-top:clamp(104px,12vw,176px)}
.section .head{padding-top:clamp(16px,2.5vw,40px)}

/* ============ VILLA'S INTELLIGENCE · STICKY STORY ============ */
.is-scene{position:relative;height:220vh;overflow:clip;background:var(--ink-deep,#101416);color:var(--paper,#fbfaf7)}
.is-track{position:relative;height:100%}
.is-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding:clamp(1.5rem,4vw,var(--pad,4rem));overflow:hidden}
.is-sticky::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 60% at var(--halo-x,28%) 40%,color-mix(in oklab,var(--atlantic,#5f8075) 26%,transparent),transparent 70%),radial-gradient(50% 50% at 88% 82%,color-mix(in oklab,var(--sand,#c9ad95) 14%,transparent),transparent 70%);opacity:.9;transition:background 700ms var(--mo-ease,cubic-bezier(.16,1,.3,1))}
.is-grid{position:relative;z-index:1;width:min(100%,var(--max,1200px));margin-inline:auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,5vw,5rem);align-items:center}
.is-brand{display:flex;align-items:center;gap:.7rem;margin-bottom:1.4rem;color:var(--paper,#fbfaf7)}
.is-mono{color:var(--sand,#c9ad95);flex:none}
.is-kicker{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;opacity:.72}
.is-title{margin:0 0 1rem;line-height:.92;letter-spacing:-.02em}
.is-title-l1{display:block;font-size:clamp(2rem,5vw,3.4rem);font-weight:600;opacity:.6}
.is-title-l2{display:block;font-size:clamp(2.6rem,7.5vw,5.4rem);font-weight:800;background:linear-gradient(100deg,var(--paper,#fbfaf7),var(--atlantic-soft,#dfe8e3) 55%,var(--sand,#c9ad95));-webkit-background-clip:text;background-clip:text;color:transparent}
.is-lede{max-width:34ch;font-size:clamp(.9rem,1.3vw,1.02rem);line-height:1.5;opacity:.68;margin:0 0 1.8rem}
.is-lede em{font-style:normal;color:var(--sand,#c9ad95)}
.is-orbit-wrap{width:clamp(140px,16vw,200px);aspect-ratio:1;margin-bottom:1.6rem}
.is-orbit{position:relative;width:100%;height:100%;transform:rotate(var(--orbit-rot,0deg)) scale(var(--orbit-scale,1));transition:transform 700ms var(--mo-ease,cubic-bezier(.16,1,.3,1))}
.is-orbit-svg{width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}
.is-ring{fill:none;stroke-linecap:round}
.is-ring--track{stroke:color-mix(in oklab,var(--paper,#fbfaf7) 14%,transparent);stroke-width:2}
.is-ring--inner{stroke:color-mix(in oklab,var(--sand,#c9ad95) 24%,transparent);stroke-width:1;stroke-dasharray:2 7}
.is-ring--prog{stroke:var(--atlantic-soft,#dfe8e3);stroke-width:3;stroke-dasharray:540;stroke-dashoffset:var(--ring-offset,540);transition:stroke-dashoffset 300ms linear,stroke 700ms var(--mo-ease,cubic-bezier(.16,1,.3,1))}
.is-orbit-core{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.is-orbit-index{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--paper,#fbfaf7);font-variant-numeric:tabular-nums}
.is-orbit-total{font-size:.7rem;letter-spacing:.14em;opacity:.5}
.is-orbit-sat{position:absolute;top:50%;left:50%;width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--sand,#c9ad95);box-shadow:0 0 0 4px color-mix(in oklab,var(--sand,#c9ad95) 30%,transparent),0 0 14px var(--sand,#c9ad95);transform:rotate(var(--sat-rot,0deg)) translateY(-86px);transition:transform 700ms var(--mo-ease,cubic-bezier(.16,1,.3,1))}
.is-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem}
.is-step{display:flex;align-items:baseline;gap:.7rem;padding:.35rem .1rem;opacity:.4;transition:opacity 400ms var(--mo-ease,cubic-bezier(.16,1,.3,1)),transform 400ms var(--mo-ease,cubic-bezier(.16,1,.3,1))}
.is-step-n{font-size:.72rem;letter-spacing:.1em;font-variant-numeric:tabular-nums;color:var(--sand,#c9ad95)}
.is-step-t{font-size:.95rem;font-weight:600;position:relative}
.is-step-t::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:2px;background:var(--atlantic-soft,#dfe8e3);transition:width 400ms var(--mo-ease,cubic-bezier(.16,1,.3,1))}
.is-step.is-on{opacity:1;transform:translateX(4px)}
.is-step.is-on .is-step-t::after{width:100%}
.is-step.is-done{opacity:.66}
.is-stage{position:relative;min-height:clamp(300px,42vh,460px)}
.is-sub{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;visibility:hidden;transform:translateY(26px) scale(.985);transition:opacity 560ms var(--mo-ease,cubic-bezier(.16,1,.3,1)),transform 560ms var(--mo-ease,cubic-bezier(.16,1,.3,1)),visibility 0s linear 560ms;pointer-events:none}
.is-sub.active{opacity:1;visibility:visible;transform:translateY(0) scale(1);transition:opacity 560ms var(--mo-ease,cubic-bezier(.16,1,.3,1)),transform 560ms var(--mo-ease,cubic-bezier(.16,1,.3,1)),visibility 0s;pointer-events:auto}
.is-sub.is-leave-up{transform:translateY(-26px) scale(.985)}
.is-sub-head{margin-bottom:1rem}
.is-sub-tag{display:inline-block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sand,#c9ad95);padding:.28rem .7rem;border:1px solid color-mix(in oklab,var(--sand,#c9ad95) 40%,transparent);border-radius:999px;margin-bottom:.7rem}
.is-sub-title{margin:0;font-size:clamp(1.3rem,2.6vw,2rem);font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.is-demo{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;background:color-mix(in oklab,var(--atlantic,#5f8075) 55%,transparent);color:var(--paper,#fbfaf7);padding:.18rem .5rem;border-radius:4px}
.is-dash{background:color-mix(in oklab,var(--paper,#fbfaf7) 5%,transparent);border:1px solid color-mix(in oklab,var(--paper,#fbfaf7) 12%,transparent);border-radius:18px;padding:clamp(1rem,2.4vw,1.6rem);backdrop-filter:blur(6px);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.is-dash .dashtitle{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;letter-spacing:.04em;opacity:.7;margin-bottom:1rem}
.is-live{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--atlantic-soft,#dfe8e3);padding:.16rem .5rem;border-radius:999px;background:color-mix(in oklab,var(--atlantic,#5f8075) 35%,transparent)}
.is-live--warn{color:var(--sand,#c9ad95);background:color-mix(in oklab,var(--sand,#c9ad95) 26%,transparent)}
.is-hero-metric{display:flex;flex-direction:column;gap:.25rem;margin-bottom:1.2rem}
.is-hero-val{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--paper,#fbfaf7)}
.is-hero-val.is-neg{color:var(--sand,#c9ad95)}
.is-hero-sub{font-size:.82rem;opacity:.6}
.is-dash .metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:.6rem}
.is-dash .metric{display:flex;flex-direction:column;gap:.2rem;padding:.7rem .8rem;border-radius:12px;background:color-mix(in oklab,var(--ink,#20242a) 30%,transparent);border:1px solid color-mix(in oklab,var(--paper,#fbfaf7) 8%,transparent)}
.is-m-k{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;opacity:.55}
.is-m-v{font-size:1.1rem;font-weight:700;font-variant-numeric:tabular-nums}
.is-bar{position:relative;height:8px;margin-top:1rem;border-radius:99px;background:color-mix(in oklab,var(--paper,#fbfaf7) 10%,transparent);overflow:hidden}
.is-bar-fill{position:absolute;inset:0 auto 0 0;width:var(--w,0%);border-radius:99px;background:linear-gradient(90deg,var(--atlantic,#5f8075),var(--atlantic-soft,#dfe8e3))}
.is-bar-mark{position:absolute;top:-3px;left:var(--x,50%);width:2px;height:14px;background:var(--sand,#c9ad95)}
.is-comp{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.is-comp-row{display:flex;justify-content:space-between;font-size:.86rem;padding:.55rem .8rem;border-radius:10px;background:color-mix(in oklab,var(--ink,#20242a) 28%,transparent);font-variant-numeric:tabular-nums}
.is-comp-row--you{background:color-mix(in oklab,var(--atlantic,#5f8075) 30%,transparent);font-weight:700;border:1px solid color-mix(in oklab,var(--atlantic-soft,#dfe8e3) 40%,transparent)}
.is-scen{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:1rem}
.is-scen-card{display:flex;flex-direction:column;gap:.2rem;padding:.8rem;border-radius:12px;background:color-mix(in oklab,var(--ink,#20242a) 30%,transparent);border:1px solid color-mix(in oklab,var(--paper,#fbfaf7) 8%,transparent)}
.is-scen-card--best{background:color-mix(in oklab,var(--atlantic,#5f8075) 34%,transparent);border-color:color-mix(in oklab,var(--atlantic-soft,#dfe8e3) 45%,transparent);box-shadow:0 0 22px -6px color-mix(in oklab,var(--atlantic,#5f8075) 70%,transparent)}
.is-scen-k{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.is-scen-v{font-size:1.3rem;font-weight:800;font-variant-numeric:tabular-nums}
.is-scen-c{font-size:.68rem;opacity:.55}
.is-ab{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.8rem;margin-bottom:1rem}
.is-ab-col{display:flex;flex-direction:column;gap:.25rem;padding:1rem;border-radius:14px;background:color-mix(in oklab,var(--ink,#20242a) 30%,transparent);border:1px solid color-mix(in oklab,var(--paper,#fbfaf7) 8%,transparent)}
.is-ab-col--win{background:color-mix(in oklab,var(--atlantic,#5f8075) 32%,transparent);border-color:color-mix(in oklab,var(--atlantic-soft,#dfe8e3) 45%,transparent);box-shadow:0 0 24px -8px color-mix(in oklab,var(--atlantic,#5f8075) 70%,transparent)}
.is-ab-tag{font-size:.7rem;letter-spacing:.2em;font-weight:800;color:var(--sand,#c9ad95)}
.is-ab-price{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums}
.is-ab-line{font-size:.78rem;opacity:.65}
.is-ab-vs{font-size:.8rem;opacity:.5;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:860px){.is-scene{height:auto}.is-sticky{position:static;height:auto;padding:clamp(2rem,7vw,3rem) var(--pad,1.4rem)}.is-grid{grid-template-columns:1fr;gap:2.2rem}.is-orbit-wrap{margin-inline:auto}.is-stage{position:static;min-height:0}.is-sub{position:static;opacity:1;visibility:visible;transform:none;pointer-events:auto;margin-bottom:1.6rem}.is-sub:not(.active){display:flex}}
@media (prefers-reduced-motion:reduce){.is-scene{height:auto}.is-sticky{position:static;height:auto;overflow:visible}.is-sticky::before{transition:none}.is-grid{grid-template-columns:1fr}.is-stage{position:static;min-height:0}.is-sub{position:static;opacity:1;visibility:visible;transform:none;pointer-events:auto;margin-bottom:1.6rem;transition:none}.is-orbit,.is-orbit-sat,.is-ring--prog,.is-step{transition:none}}

.footergrid{grid-template-columns:1.4fr 1fr 1fr 1fr}
@media(max-width:820px){.footergrid{grid-template-columns:1fr 1fr}}

/* ============ TENERIFE CINEMATIC STORYTELLING (tf-) ============ */
.tf-section{--tf-zones:5;--tf-crossfade:900ms;height:calc(var(--tf-zones) * 90vh);position:relative;background:var(--ink-deep);color:var(--paper);overflow:hidden}
.tf-sticky{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:grid}
.tf-stage{position:absolute;inset:0;overflow:hidden}
.tf-layer{position:absolute;inset:0;opacity:0;transform:scale(1.12);background-size:cover;background-position:center;will-change:opacity,transform;transition:opacity var(--tf-crossfade) var(--mo-ease),transform 1600ms var(--mo-ease)}
.tf-layer.is-active{opacity:1;transform:scale(1)}
.tf-layer--adeje{background-image:radial-gradient(120% 90% at 78% 18%,#7fa094 0%,transparent 55%),linear-gradient(200deg,var(--atlantic) 0%,var(--ink) 62%,var(--ink-deep) 100%)}
.tf-layer--cristianos{background-image:radial-gradient(110% 80% at 22% 80%,var(--sand) 0%,transparent 52%),linear-gradient(160deg,var(--ink) 0%,var(--atlantic) 78%,var(--ink-deep) 100%)}
.tf-layer--palmmar{background-image:radial-gradient(130% 100% at 88% 88%,var(--atlantic) 0%,transparent 58%),linear-gradient(300deg,var(--ink-deep) 0%,var(--ink) 46%,var(--sand) 130%)}
.tf-layer--medano{background-image:radial-gradient(120% 90% at 50% 12%,#e6d3bf 0%,transparent 50%),linear-gradient(210deg,var(--sand) 0%,var(--atlantic) 66%,var(--ink) 100%)}
.tf-layer--golf{background-image:radial-gradient(140% 110% at 18% 22%,var(--atlantic-soft) 0%,transparent 46%),linear-gradient(140deg,var(--ink-deep) 0%,var(--atlantic) 72%,var(--ink) 100%)}
.tf-layer.has-photo{filter:saturate(1.02)}
.tf-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(16,20,22,.78) 0%,rgba(16,20,22,.30) 42%,rgba(16,20,22,0) 70%),linear-gradient(0deg,rgba(16,20,22,.72) 0%,rgba(16,20,22,0) 46%)}
.tf-overlay{position:relative;z-index:2;height:100%;padding:var(--pad,clamp(1.5rem,5vw,5rem));max-width:var(--max,1400px);margin-inline:auto;width:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(1.25rem,3vw,2.5rem)}
.tf-kicker{position:absolute;top:var(--pad,clamp(1.5rem,5vw,5rem));left:var(--pad,clamp(1.5rem,5vw,5rem));margin:0;font-size:clamp(.7rem,1.1vw,.82rem);letter-spacing:.28em;text-transform:uppercase;color:color-mix(in oklab,var(--paper) 80%,var(--atlantic))}
.tf-kicker span{color:var(--sand)}
.tf-captions{position:relative;min-height:clamp(180px,34vh,340px)}
.tf-caption{position:absolute;inset:auto auto 0 0;opacity:0;transform:translateY(22px);transition:opacity 560ms var(--mo-ease),transform 720ms var(--mo-ease);pointer-events:none}
.tf-caption.is-active{opacity:1;transform:translateY(0);pointer-events:auto}
.tf-index{display:inline-block;font-size:clamp(.8rem,1.4vw,1rem);letter-spacing:.2em;color:var(--sand);margin-bottom:clamp(.5rem,1.4vw,1rem)}
.tf-index i{color:color-mix(in oklab,var(--paper) 55%,transparent);font-style:normal}
.tf-name{margin:0;font-size:clamp(48px,8vw,140px);line-height:.92;letter-spacing:-.02em;font-weight:700;text-wrap:balance;color:var(--paper);text-shadow:0 2px 40px rgba(16,20,22,.4)}
.tf-meta,.tf-demand{margin:clamp(.4rem,1.2vw,.9rem) 0 0;max-width:46ch}
.tf-meta{font-size:clamp(1rem,2vw,1.6rem);color:color-mix(in oklab,var(--paper) 92%,var(--atlantic));font-weight:500}
.tf-demand{font-size:clamp(.82rem,1.3vw,1rem);letter-spacing:.06em;text-transform:uppercase;color:var(--sand)}
.tf-progress{display:flex;gap:.6rem;align-items:center}
.tf-dot{width:34px;height:3px;border-radius:2px;background:color-mix(in oklab,var(--paper) 26%,transparent);transition:background 420ms var(--mo-ease),width 420ms var(--mo-ease)}
.tf-dot.is-active{width:54px;background:var(--sand)}
@media (prefers-reduced-motion:reduce){.tf-section{height:auto;overflow:visible}.tf-sticky{position:static;height:auto;display:block}.tf-stage,.tf-vignette,.tf-progress{display:none}.tf-overlay{display:block;padding-block:clamp(2rem,6vw,4rem)}.tf-kicker{position:static;margin-bottom:2rem}.tf-captions{min-height:0}.tf-caption{position:relative;inset:auto;opacity:1;transform:none;pointer-events:auto;padding:clamp(1.5rem,4vw,2.5rem);margin-bottom:clamp(1rem,3vw,2rem);border-radius:14px;background:linear-gradient(160deg,var(--ink) 0%,var(--ink-deep) 100%);border:1px solid color-mix(in oklab,var(--atlantic) 40%,transparent)}.tf-name{font-size:clamp(40px,9vw,88px)}}

/* ===== Header over cinematic scenes: gradient, not a solid bar (no tapa la imagen) ===== */
.header[data-theme="dark"]{background:linear-gradient(to bottom,rgba(16,20,22,.72),rgba(16,20,22,.28) 58%,transparent)!important;border-bottom:none!important;backdrop-filter:none}
/* ===== Hero big circle: scroll + independent float (--fx/--fy from JS) ===== */
.hero-bigcircle{transform:translate3d(calc(-50% + var(--fx,0px)),calc(-50% + var(--sy,0px) + var(--fy,0px)),0) scale(var(--ss,1))!important}

/* ===== Bug fixes batch ===== */
/* +12%: pedido expreso, el logotipo se quedaba pequeño junto al lockup. */
.brand-logo{width:clamp(47px,4.8vw,65px)!important}
.is-title-l2{font-size:clamp(2rem,5.2vw,3.7rem)!important}
.is-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
.header[data-theme="hero"]{background:linear-gradient(to bottom,rgba(6,9,8,.5),rgba(6,9,8,.12) 60%,transparent)!important}
.property .media:after{animation:cardOrbit 13s ease-in-out infinite alternate}
@keyframes cardOrbit{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-10px,12px,0) scale(1.12)}}

/* =====================================================================
   Valorador gratis (valuation.html)
   ===================================================================== */
.vw-trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:46px;max-width:860px}
.vw-trust>div{background:var(--paper);padding:18px 20px;display:flex;flex-direction:column;gap:4px}
.vw-trust strong{font-size:clamp(26px,3vw,38px);font-weight:400;letter-spacing:-.045em;line-height:1}
.vw-trust span{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

.vw-shell{border:1px solid var(--line);background:#fff;position:relative;overflow:hidden}
.vw-shell:after{content:"";position:absolute;width:340px;aspect-ratio:1;border-radius:50%;background:var(--atlantic-soft);right:-140px;top:-150px;pointer-events:none}
.vw-progress{display:flex;gap:0;list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line);position:relative;z-index:1}
.vw-dot{flex:1;padding:16px 20px;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-right:1px solid var(--line);display:flex;align-items:center;gap:9px;transition:color .4s ease,background .4s ease}
.vw-dot:last-child{border-right:none}
.vw-dot span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);font-size:9px}
.vw-dot.is-on{color:var(--ink);background:var(--paper-2)}
.vw-dot.is-on span{border-color:var(--atlantic);color:var(--atlantic)}

.vw-step{display:none;padding:clamp(26px,3.4vw,52px);position:relative;z-index:1}
.vw-step.is-active{display:block;animation:vwIn .5s cubic-bezier(.16,1,.3,1) both}
@keyframes vwIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.vw-title{font-size:clamp(32px,4.4vw,58px);font-weight:400;line-height:.95;letter-spacing:-.05em;margin:0 0 12px}
.vw-grid{display:grid;grid-template-columns:1.45fr .95fr;gap:clamp(24px,3vw,54px);align-items:start}
.vw-side{border:1px solid var(--line);background:var(--paper);padding:22px;min-height:220px}
.vw-preview-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:16px}
.vw-preview-grid>div{background:var(--paper);padding:12px 14px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.vw-preview-grid small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.vw-preview-grid strong{font-size:19px;font-weight:400;letter-spacing:-.03em}

.vw-actions{display:flex;flex-direction:row;gap:10px;flex-wrap:wrap;margin-top:28px;align-items:center}
.vw-opt{font-weight:400;letter-spacing:0;text-transform:none;opacity:.6}
.vw-error{font-size:11px;color:#b4442f;min-height:14px}
.field input.is-invalid,.field select.is-invalid{border-color:#b4442f}

.vw-fieldset{border:none;margin:32px 0 26px;padding:0}
.vw-fieldset legend{color:var(--muted);margin-bottom:11px;padding:0}
.vw-chips{display:flex;flex-wrap:wrap;gap:8px}
.vw-chip{position:relative;display:inline-flex}
.vw-chip input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.vw-chip span{border:1px solid var(--line);border-radius:var(--radius);padding:10px 18px;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;transition:all .3s ease;background:#fff}
.vw-chip input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.vw-chip input:focus-visible+span{outline:2px solid var(--atlantic);outline-offset:2px}
.vw-chip:hover span{border-color:var(--ink)}

/* --- Resultado --- */
.vw-result-head{display:grid;grid-template-columns:1.5fr .9fr;gap:26px;align-items:end;border-bottom:1px solid var(--line);padding-bottom:26px}
.vw-range{font-size:clamp(34px,5.4vw,74px);font-weight:400;line-height:.94;letter-spacing:-.055em;margin:10px 0 8px}
.vw-range span{color:var(--sand)}
.vw-applied{border-left:1px solid var(--line);padding-left:22px;display:flex;flex-direction:column;gap:5px}
.vw-applied small{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.vw-applied strong{font-size:clamp(24px,2.6vw,34px);font-weight:400;letter-spacing:-.035em}
.vw-applied span{font-size:11px;color:var(--muted)}

.vw-scale{margin:30px 0 6px}
.vw-scale-bar{position:relative;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--atlantic-soft),var(--sand))}
.vw-scale-bar i{position:absolute;top:50%;width:15px;height:15px;border-radius:50%;background:var(--ink);border:3px solid #fff;box-shadow:0 2px 10px rgba(16,20,22,.25);transform:translate(-50%,-50%)}
.vw-scale-legend{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

.vw-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.vw-card{border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:8px}
.vw-card strong{font-size:clamp(20px,2.2vw,29px);font-weight:400;letter-spacing:-.035em;line-height:1.05}
.vw-card p{font-size:13px;color:var(--muted);margin:0}
.vw-card b{color:var(--ink);font-weight:600}

.vw-refs{margin-top:32px;border-top:1px solid var(--line);padding-top:18px}
.vw-refs summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.vw-refs summary::-webkit-details-marker{display:none}
.vw-refs summary span{color:var(--atlantic);font-size:17px}
.vw-refs[open] summary span{transform:rotate(45deg)}
.vw-refgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:18px}
.vw-refgrid>div{background:#fff;padding:13px 15px;display:flex;flex-direction:column;gap:3px}
.vw-refgrid span{font-size:11px;color:var(--muted)}
.vw-refgrid b{font-size:18px;font-weight:400;letter-spacing:-.03em}
.vw-refgrid small{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--sand)}
.vw-note{font-size:11px;color:var(--muted);margin-top:14px;max-width:640px}

.vw-abstain{border:1px solid var(--line);background:var(--paper);padding:clamp(22px,3vw,38px)}
.vw-abstain h3{font-size:clamp(26px,3.2vw,42px);font-weight:400;line-height:1;letter-spacing:-.04em;margin:12px 0}
.vw-abstain p{color:var(--muted);max-width:640px;margin:0}

.vw-lead{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,50px);margin-top:44px;border-top:1px solid var(--line);padding-top:34px}
.vw-lead h3{font-size:clamp(24px,2.8vw,38px);font-weight:400;line-height:1.03;letter-spacing:-.04em;margin:12px 0}
.vw-consent label{display:flex;gap:9px;align-items:flex-start;font-size:12px;line-height:1.5;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:400}
.vw-consent input{margin-top:3px;flex:none}
.vw-consent label>span{flex:1}
.vw-consent a{text-decoration:underline}
.vw-done{max-width:640px}

.vw-method{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.vw-method article{border-top:1px solid var(--line);padding-top:17px;min-height:230px;display:flex;flex-direction:column;gap:9px;transition:transform .4s var(--mo-ease,cubic-bezier(.16,1,.3,1))}
.vw-method article:hover{transform:translateY(-6px)}
.vw-method h3{font-size:clamp(24px,2.6vw,34px);font-weight:400;letter-spacing:-.04em;margin:0}
.vw-method p{font-size:13px;color:var(--muted);margin:0}

.vw-faq{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.vw-faq details{background:var(--paper);padding:20px 4px}
.vw-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:clamp(16px,1.7vw,21px);letter-spacing:-.02em}
.vw-faq summary::-webkit-details-marker{display:none}
.vw-faq summary span{color:var(--atlantic);font-size:20px;transition:transform .3s ease}
.vw-faq details[open] summary span{transform:rotate(45deg)}
.vw-faq p{font-size:14px;color:var(--muted);max-width:760px;margin:12px 0 0}

@media(max-width:1000px){
  .vw-grid,.vw-lead,.vw-result-head{grid-template-columns:1fr}
  .vw-applied{border-left:none;border-top:1px solid var(--line);padding:16px 0 0}
  .vw-cards,.vw-method{grid-template-columns:1fr 1fr}
  .vw-trust{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .vw-shell:after{width:210px;right:-115px;top:-105px;opacity:.55}
  .vw-cards,.vw-method{grid-template-columns:1fr}
  .vw-progress{flex-wrap:wrap}
  .vw-dot{flex:1 0 50%;border-bottom:1px solid var(--line)}
  .vw-scale-legend{font-size:9px}
}

/* =====================================================================
   Blog / News (insights.html + post-*.html)
   ===================================================================== */
.bloghead{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap;margin-bottom:44px}
.pfilters{display:flex;gap:7px;flex-wrap:wrap}
.pfilter{border:1px solid var(--line);background:transparent;border-radius:var(--radius);padding:9px 17px;font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;cursor:pointer;transition:all .3s ease;color:var(--ink)}
.pfilter:hover{border-color:var(--ink)}
.pfilter.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* Figura generativa: composición geométrica propia por artículo. */
.pcard-fig{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper-2);border:1px solid var(--line)}
.pcard-fig i,.pcard-fig b{position:absolute;display:block;border-radius:50%}
.pcard-fig[data-accent="sand"]{background:linear-gradient(150deg,#f3ece4,#e3d3c2)}
.pcard-fig[data-accent="atlantic"]{background:linear-gradient(150deg,#e6ece9,#cddbd4)}
.pcard-fig[data-accent="ink"]{background:linear-gradient(150deg,#e9eaea,#cfd3d2)}
.pcard-fig i{width:58%;aspect-ratio:1;border:1px solid rgba(32,36,42,.28);right:-12%;top:-24%;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.pcard-fig b{width:26%;aspect-ratio:1;background:rgba(95,128,117,.4);left:9%;bottom:-14%;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.pcard-fig[data-fig="chart"]:after,.pcard-fig[data-fig="gap"]:after,.pcard-fig[data-fig="volume"]:after,.pcard-fig[data-fig="method"]:after{content:"";position:absolute;inset:auto 12% 16% 12%;height:44%}
.pcard-fig[data-fig="chart"]:after{background:linear-gradient(to top,rgba(32,36,42,.7) 22%,transparent 22%),linear-gradient(to top,rgba(32,36,42,.7) 48%,transparent 48%),linear-gradient(to top,rgba(32,36,42,.7) 88%,transparent 88%),linear-gradient(to top,rgba(32,36,42,.7) 64%,transparent 64%);background-size:14% 100%;background-position:0 100%,26% 100%,52% 100%,78% 100%;background-repeat:no-repeat}
.pcard-fig[data-fig="gap"]:after{background:repeating-linear-gradient(90deg,rgba(32,36,42,.62) 0 2px,transparent 2px 15px);height:1px;inset:auto 12% 42% 12%;box-shadow:0 22px 0 -10px rgba(95,128,117,.55)}
.pcard-fig[data-fig="volume"]:after{background:radial-gradient(circle at 18% 78%,rgba(32,36,42,.72) 0 12%,transparent 12%),radial-gradient(circle at 44% 70%,rgba(32,36,42,.5) 0 8%,transparent 8%),radial-gradient(circle at 68% 82%,rgba(32,36,42,.38) 0 5.5%,transparent 5.5%),radial-gradient(circle at 86% 76%,rgba(32,36,42,.3) 0 4%,transparent 4%)}
.pcard-fig[data-fig="method"]:after{background:linear-gradient(90deg,rgba(32,36,42,.62) 0 34%,transparent 34%),linear-gradient(90deg,rgba(32,36,42,.44) 0 58%,transparent 58%),linear-gradient(90deg,rgba(32,36,42,.28) 0 82%,transparent 82%);background-size:100% 3px;background-position:0 20%,0 50%,0 80%;background-repeat:no-repeat}

.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pcard{border-top:1px solid var(--line);padding-top:16px}
.pcard-link{display:flex;flex-direction:column;gap:16px;height:100%}
.pcard:hover .pcard-fig i{transform:translate(-9%,9%) scale(1.06)}
.pcard:hover .pcard-fig b{transform:translate(12%,-14%) scale(1.1)}
.pcard-body{display:flex;flex-direction:column;gap:9px;flex:1}
.pcard-meta{display:flex;justify-content:space-between;gap:12px;align-items:baseline;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.pcard-meta .eye{color:var(--atlantic)}
.pcard h3{font-size:clamp(23px,2.3vw,31px);font-weight:400;line-height:1.02;letter-spacing:-.038em;margin:0;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.pcard:hover h3{transform:translateX(5px)}
.pcard p{font-size:13px;color:var(--muted);margin:0}
.pcard-cta{margin-top:auto;padding-top:12px;color:var(--atlantic)}

.pfeat{border-top:1px solid var(--line);padding-top:22px}
.pfeat-link{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.pfeat .pcard-fig{aspect-ratio:16/9}
.pfeat-body h2{font-size:clamp(34px,5vw,68px);font-weight:400;line-height:.95;letter-spacing:-.05em;margin:14px 0 16px;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.pfeat:hover .pfeat-body h2{transform:translateX(6px)}
.pfeat:hover .pcard-fig i{transform:translate(-9%,9%) scale(1.06)}
.pfeat-body p{font-size:16px;color:var(--muted);max-width:560px}
.pfeat-body .pcard-cta{display:inline-block;margin-top:20px}

.bnews{display:grid;grid-template-columns:1.4fr .9fr;gap:clamp(24px,4vw,60px);align-items:center}
.bnews h2{font-size:clamp(32px,4.4vw,58px);font-weight:400;line-height:.98;letter-spacing:-.05em;margin:14px 0 12px}
.bnews p{max-width:560px}
.bnews-cta{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.dark .btn{border-color:rgba(255,255,255,.35);color:#fff}
.dark .btn:hover{background:rgba(255,255,255,.1)}

/* --- Página de artículo --- */
.readbar{position:fixed;top:0;left:0;right:0;height:2px;background:var(--atlantic);transform-origin:0 50%;transform:scaleX(0);z-index:90}
.post-hero{padding:clamp(110px,13vw,180px) 0 clamp(30px,4vw,54px);position:relative;overflow:hidden}
.post-hero:after{content:"";position:absolute;width:min(38vw,480px);aspect-ratio:1;border-radius:50%;background:var(--atlantic-soft);right:-8vw;top:-10%;z-index:0}
.post-hero .wrap{position:relative;z-index:1}
.post-kicker{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.post-kicker b{color:var(--atlantic);font-weight:600}
.post-hero h1{font-size:clamp(38px,6.4vw,92px);font-weight:400;line-height:.94;letter-spacing:-.055em;margin:22px 0 20px;max-width:16ch}
.post-dek{font-size:clamp(17px,2vw,25px);line-height:1.4;color:var(--muted);max-width:800px}
.post-body{max-width:760px;margin:0 auto;padding:clamp(30px,5vw,70px) 0 clamp(50px,7vw,110px)}
.post-body>*{margin-block:0 22px}
.post-body h2{font-size:clamp(27px,3.4vw,42px);font-weight:400;line-height:1.02;letter-spacing:-.04em;margin-top:clamp(44px,5vw,72px)}
.post-body h3{font-size:clamp(20px,2.2vw,26px);font-weight:600;letter-spacing:-.02em;margin-top:36px}
.post-body p{font-size:17px;line-height:1.68}
.post-body a:not(.btn){text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--sand)}
.post-body ul,.post-body ol{padding-left:20px;font-size:17px;line-height:1.68;color:var(--ink)}
.post-body li{margin-bottom:10px}
.post-body strong{font-weight:600}
.post-lead{font-size:20px;line-height:1.55}
.post-lead:first-letter{float:left;font-size:74px;line-height:.78;padding:6px 12px 0 0;font-weight:400}
.pullquote{border-left:2px solid var(--atlantic);padding:6px 0 6px 24px;font-size:clamp(20px,2.4vw,29px);line-height:1.25;letter-spacing:-.025em;color:var(--ink);margin-block:36px}
.post-note{border:1px solid var(--line);background:var(--paper-2);padding:20px 22px;font-size:13px;line-height:1.6;color:var(--muted)}
.post-note strong{color:var(--ink)}

/* Gráfico de barras editorial, en HTML: los datos son parte del texto. */
.bchart{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;margin-block:34px;display:grid;gap:13px}
.bchart-cap{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.brow{display:grid;grid-template-columns:130px 1fr auto;gap:14px;align-items:center;font-size:13px}
.brow span{color:var(--muted)}
.brow i{height:9px;background:var(--sand);display:block;width:var(--w);border-radius:2px;transition:width 1s cubic-bezier(.16,1,.3,1)}
.brow.alt i{background:var(--atlantic)}
.brow b{font-weight:400;font-size:15px;letter-spacing:-.02em;min-width:86px;text-align:right}
.dual{display:grid;gap:5px}
.dual .brow{grid-template-columns:130px 1fr auto}

.post-table{width:100%;border-collapse:collapse;font-size:14px;margin-block:30px}
.post-table th,.post-table td{text-align:right;padding:11px 10px;border-bottom:1px solid var(--line)}
.post-table th:first-child,.post-table td:first-child{text-align:left}
.post-table thead th{font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:600}
.post-table tbody tr:hover{background:var(--paper-2)}

.post-cta{border:1px solid var(--line);background:#fff;padding:clamp(24px,3vw,40px);display:flex;justify-content:space-between;gap:24px;align-items:center;flex-wrap:wrap;margin-top:50px}
.post-cta h3{font-size:clamp(23px,2.6vw,33px);font-weight:400;letter-spacing:-.04em;margin:8px 0 0;max-width:22ch}
.post-related{border-top:1px solid var(--line);padding-top:34px}

@media(max-width:1000px){
  .pgrid{grid-template-columns:1fr 1fr}
  .pfeat-link,.bnews{grid-template-columns:1fr}
  .bnews-cta{flex-direction:row;flex-wrap:wrap}
}
@media(max-width:640px){
  .pgrid{grid-template-columns:1fr}
  .bloghead{align-items:flex-start}
  .brow{grid-template-columns:96px 1fr auto;font-size:12px}
  .brow b{min-width:74px;font-size:13px}
  .post-lead:first-letter{font-size:56px}
  .post-table{font-size:12px}
  .post-table th,.post-table td{padding:9px 6px}
}

/* =====================================================================
   Mapa de precios (Leaflet + OpenStreetMap)
   ===================================================================== */
.pricemap-wrap{display:grid;grid-template-columns:1.35fr .95fr;gap:20px;align-items:stretch}
.pricemap{position:relative;border:1px solid var(--line);background:var(--paper-2);overflow:hidden;min-height:520px}
#priceMap{position:absolute;inset:0;background:var(--paper-2)}
.pricemap-expand{position:absolute;z-index:500;right:14px;top:14px;background:#fff}
.map-fallback{position:absolute;inset:0;display:grid;place-items:center;padding:30px;text-align:center;font-size:13px;color:var(--muted)}

/* Etiqueta de precio sobre cada municipio */
.map-chip{pointer-events:auto;width:0!important;height:0!important;overflow:visible}
.map-chip-in{position:absolute;left:0;top:0;width:max-content;transform:translate(-50%,-50%);white-space:nowrap;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:6px 12px;display:flex;gap:8px;align-items:baseline;box-shadow:0 8px 22px -14px rgba(16,20,22,.55);cursor:pointer;transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s ease}
.map-chip-in:hover{transform:translate(-50%,-50%) scale(1.06);border-color:var(--ink)}
.map-chip-in b{font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase}
.map-chip-in span{font-size:11px;color:var(--muted)}

.mappanel{border:1px solid var(--line);background:#fff;padding:22px;display:flex;flex-direction:column;gap:18px;max-height:520px;overflow:auto}
.mp-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.mp-head h3{font-size:clamp(26px,3vw,38px);font-weight:400;letter-spacing:-.045em;line-height:1;margin:8px 0 6px}
.mp-price{font-size:19px;margin:0;color:var(--muted)}
.mp-cta{font-size:9px}
.mp-sources{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.mp-sources>div{background:#fff;padding:11px 12px;display:flex;flex-direction:column;gap:2px}
.mp-sources span{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mp-sources b{font-size:15px;font-weight:400;letter-spacing:-.02em}
.mp-sources small{font-size:9px;color:var(--sand);letter-spacing:.08em;text-transform:uppercase}
.mp-zones{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.mp-zones li{display:grid;grid-template-columns:1fr 74px auto;gap:10px;align-items:center;font-size:12px}
.mp-zones li span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-zones i{display:block;height:5px;background:var(--paper-2);border-radius:3px;overflow:hidden}
.mp-zones i b{display:block;height:100%;background:var(--sand);border-radius:3px}
.mp-zones em{font-style:normal;font-size:12px;min-width:74px;text-align:right}
.mp-foot{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}

.pricemap-wrap.is-expanded{position:fixed;inset:0;z-index:120;background:var(--paper);grid-template-columns:1.5fr .8fr;gap:0;padding:0}
.pricemap-wrap.is-expanded .pricemap{border:none;min-height:100vh}
.pricemap-wrap.is-expanded .mappanel{max-height:100vh;border:none;border-left:1px solid var(--line)}

@media(max-width:1000px){
  .pricemap-wrap{grid-template-columns:1fr}
  .pricemap{min-height:400px}
  .mappanel{max-height:none}
  .pricemap-wrap.is-expanded{grid-template-rows:60vh 40vh;grid-template-columns:1fr;overflow:auto}
  .pricemap-wrap.is-expanded .pricemap{min-height:60vh}
  .pricemap-wrap.is-expanded .mappanel{border-left:none;border-top:1px solid var(--line);max-height:40vh}
}

/* Página actual en el menú (el shell la marca con .is-current) */
.nav a.is-current{opacity:1}
.nav a.is-current::after{transform:scaleX(1)!important;opacity:1!important}
.map-chip-in.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.map-chip-in.is-on span{color:rgba(251,250,247,.72)}

/* Móvil: el header suma logo + Menu + Config y se salía 20px. El botón del
   Back Office se reduce a su icono. */
@media(max-width:560px){
  .headerin{gap:8px}
  #mobileAdmin{font-size:0;padding-inline:12px}
  #mobileAdmin::before{content:"⚙";font-size:13px;letter-spacing:0}
}
@media(max-width:700px){
  .map-chip-in{padding:4px 9px;gap:5px;transform:translate(-50%,-50%) scale(.82)}
  .map-chip-in b{font-size:9px;letter-spacing:.07em}
  .map-chip-in span{font-size:10px}
}

/* El menú se perdía al bajar en las páginas interiores: solo la home tenía
   header fijo. Aquí se queda pegado arriba sin desplazar el contenido. */
.header.solid{position:sticky;top:0}
/* Leaflet usa z-index 400 en sus panes: sin stacking context propio, el mapa
   se pintaría por encima del header al hacer scroll. */
.pricemap{z-index:0}

/* =====================================================================
   Ficha de propiedad (property.html)
   ===================================================================== */
.phero{padding:clamp(38px,5vw,72px) 0 clamp(20px,3vw,34px)}
.pbread{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.pbread a:hover{color:var(--ink);text-decoration:underline}
.phead{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.phead h1{font-size:clamp(30px,4.6vw,62px);font-weight:400;line-height:.98;letter-spacing:-.05em;margin:14px 0 10px;max-width:18ch}
.pplace{color:var(--muted);font-size:15px;margin:0}
.pprice{text-align:right}
.pprice strong{display:block;font-size:clamp(30px,3.6vw,48px);font-weight:400;letter-spacing:-.045em;line-height:1}
.pprice span{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

.pgal{display:grid;grid-template-columns:1.62fr 1fr;gap:10px}
.pgal button{padding:0;border:none;background:none;cursor:pointer;position:relative;overflow:hidden;display:block}
.pgal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.pgal button:hover img{transform:scale(1.05)}
.pgal-main{aspect-ratio:3/2}
.pgal-side{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px}
.pgal-thumb{min-height:0}
.pgal-side .pgal-thumb img{height:100%}
.pgal-count,.pgal-more{position:absolute;bottom:12px;right:12px;background:rgba(16,20,22,.78);color:#fff;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;border-radius:var(--radius);backdrop-filter:blur(4px)}
.pgal-more{inset:0;bottom:0;right:0;display:grid;place-items:center;border-radius:0;background:rgba(16,20,22,.55);font-size:13px}

.pquick{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:26px}
.pquick>div{background:var(--paper);padding:15px 16px;display:flex;flex-direction:column;gap:3px}
.pquick small{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pquick strong{font-size:20px;font-weight:400;letter-spacing:-.03em}

.pmain{display:grid;grid-template-columns:1.55fr .95fr;gap:clamp(26px,4vw,66px);align-items:start}
.pcol p{font-size:16px;line-height:1.65;color:var(--ink);margin:0 0 16px}
.ph2{font-size:clamp(26px,3.2vw,42px);font-weight:400;line-height:1.02;letter-spacing:-.042em;margin:12px 0 22px}
.ph3{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:40px 0 16px}
.ptags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ptags li{border:1px solid var(--line);border-radius:var(--radius);padding:8px 15px;font-size:12px;background:#fff}
.pspecs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin:0}
.pspecs>div{background:#fff;padding:13px 16px;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.pspecs dt{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0}
.pspecs dd{margin:0;font-size:14px;text-align:right}

.pside{display:grid;gap:16px;position:sticky;top:96px}
.pcard-side{border:1px solid var(--line);background:#fff;padding:24px;display:flex;flex-direction:column;gap:10px}
.pcard-side h3{font-size:clamp(22px,2.4vw,30px);font-weight:400;letter-spacing:-.04em;line-height:1.03;margin:6px 0 0}
.pgap{font-size:clamp(30px,3.6vw,46px);font-weight:400;letter-spacing:-.05em;line-height:1}
.pgap.is-under{color:var(--atlantic)}
.pgap.is-over{color:#b4442f}
.pmini{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:8px}
.pmini>div{background:#fff;padding:10px 13px;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.pmini span{font-size:11px;color:var(--muted)}
.pmini b{font-size:14px;font-weight:400}
.plink{color:var(--atlantic);margin-top:6px}
.pcta-side{background:var(--paper-2)}
.pcta-side .btn{justify-content:center;text-align:center}

.pmap{height:400px;border:1px solid var(--line);position:relative;z-index:0;background:var(--paper-2)}
.pmedia-video{width:100%;border:1px solid var(--line);display:block}
.pplans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.pplans img{width:100%;border:1px solid var(--line);background:#fff}
.pdocs{list-style:none;padding:0;display:grid;gap:8px}
.pdocs a{text-decoration:underline;font-size:14px}
.pmedia-pending{border:1px dashed var(--line);background:var(--paper-2);padding:clamp(20px,3vw,34px);display:flex;flex-direction:column;gap:12px;align-items:flex-start;max-width:720px}
.pmedia-pending p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}

.pothers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pother{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:12px}
.pother-img{aspect-ratio:4/3;background-size:cover;background-position:center;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.pother:hover .pother-img{transform:scale(1.04)}
.pother h3{font-size:17px;font-weight:400;line-height:1.15;letter-spacing:-.025em;margin:4px 0}
.pother-price{font-size:13px;color:var(--muted)}

/* Lightbox */
.plight{position:fixed;inset:0;z-index:200;background:rgba(10,13,14,.94);display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,50px)}
.plight.is-open{display:flex}
.plight figure{margin:0;max-width:min(1300px,92vw);max-height:88vh;display:flex;flex-direction:column;gap:12px}
.plight img{max-width:100%;max-height:80vh;object-fit:contain;display:block}
.plight figcaption{color:rgba(255,255,255,.72);font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-align:center}
.plight button{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);color:#fff;width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:18px;transition:background .3s ease}
.plight button:hover{background:rgba(255,255,255,.24)}
.plight-close{top:22px;right:22px}
.plight-prev{left:2vw}
.plight-next{right:2vw}

@media(max-width:1000px){
  .pmain{grid-template-columns:1fr}
  .pside{position:static}
  .pquick{grid-template-columns:repeat(3,1fr)}
  .pothers{grid-template-columns:1fr 1fr}
  .pgal{grid-template-columns:1fr}
  .pgal-side{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:640px){
  .phead{flex-direction:column;align-items:flex-start}
  .pprice{text-align:left}
  .pquick{grid-template-columns:1fr 1fr}
  .pspecs{grid-template-columns:1fr}
  .pothers{grid-template-columns:1fr}
  .pgal-side{grid-template-columns:1fr 1fr}
  .plight button{width:40px;height:40px}
  .plight-prev{left:6px}.plight-next{right:6px}
}

/* =====================================================================
   Redes sociales y compartir
   ===================================================================== */
.social-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:9px}
.social-list a{display:inline-flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);transition:color .3s ease}
.social-list a:hover{color:var(--ink)}
.social-list svg{width:30px;height:30px;padding:6px;border:1px solid var(--line);border-radius:50%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:background .3s ease,border-color .3s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.social-list a:hover svg{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:translateY(-2px)}

.wa-float{position:fixed;right:clamp(14px,2.2vw,26px);bottom:clamp(14px,2.2vw,26px);z-index:80;display:inline-flex;align-items:center;gap:9px;background:var(--atlantic);color:#fff;border-radius:var(--radius);padding:12px 18px 12px 14px;box-shadow:0 18px 40px -18px rgba(16,20,22,.6);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;transition:transform .35s cubic-bezier(.16,1,.3,1),background .3s ease}
.wa-float:hover{transform:translateY(-3px);background:#4f6c62}
.wa-float svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:560px){
  .wa-float span{display:none}
  .wa-float{padding:14px;border-radius:50%}
}

[data-share]{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin:38px 0}
[data-share] .eye{color:var(--muted)}
.share-row{display:flex;gap:8px}
.share-row a,.share-row button{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:transparent;cursor:pointer;color:var(--ink);transition:all .3s cubic-bezier(.16,1,.3,1)}
.share-row svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.share-row a:hover,.share-row button:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:translateY(-2px)}
.share-row button.is-done{background:var(--atlantic);border-color:var(--atlantic);color:#fff}
/* Logos de marca: sólidos; los iconos de utilidad siguen en trazo. */
.social-list svg.brandicon,.share-row svg.brandicon,.wa-float svg.brandicon{fill:currentColor;stroke:none}
.wa-float svg.brandicon{width:19px;height:19px}

/* Filtros del catálogo */
.catfilters{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;border-block:1px solid var(--line);padding:16px 0;margin-bottom:26px}
.catfilter{display:flex;flex-direction:column;gap:5px}
.catfilter label{font-size:9px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.catfilter select{border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 11px;font-size:13px;min-width:190px}
.catcount{margin-left:auto;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
@media(max-width:640px){.catfilter select{min-width:0;width:100%}.catfilter{flex:1 1 100%}.catcount{margin:4px 0 0}}

/* =====================================================================
   Back Office del catálogo
   ===================================================================== */
.bo-pick{display:flex;flex-direction:column;gap:5px;margin-bottom:16px}
.bo-pick label{font-size:9px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.bo-pick select{border:1px solid var(--line);background:#fff;border-radius:10px;padding:11px;font-size:14px}
.bo-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:20px;flex-wrap:wrap}
.bo-tab{background:none;border:none;border-bottom:2px solid transparent;padding:9px 12px;font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:color .3s ease,border-color .3s ease}
.bo-tab:hover{color:var(--ink)}
.bo-tab.is-on{color:var(--ink);border-bottom-color:var(--atlantic)}
.bo-panel{animation:vwIn .35s cubic-bezier(.16,1,.3,1) both}

.bo-drop{border:1px dashed var(--line);background:var(--paper-2);border-radius:12px;padding:22px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;transition:border-color .25s ease,background .25s ease}
.bo-drop.is-over{border-color:var(--atlantic);background:var(--atlantic-soft)}
.bo-drop strong{font-size:15px;font-weight:400}
.bo-drop span{font-size:11px;color:var(--muted)}
.bo-hint{font-size:11px;color:var(--muted);line-height:1.5;margin:4px 0 0;max-width:44ch}

.bo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:16px}
.bo-photo{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line);background:var(--paper-2)}
.bo-photo.is-cover{outline:2px solid var(--atlantic);outline-offset:-2px}
.bo-photo img{width:100%;height:100%;object-fit:cover;display:block}
.bo-photo figcaption{position:absolute;top:6px;left:6px;background:var(--atlantic);color:#fff;font-size:8px;letter-spacing:.12em;text-transform:uppercase;padding:3px 7px;border-radius:var(--radius)}
.bo-photo-actions{position:absolute;inset:auto 0 0 0;display:flex;gap:3px;justify-content:center;padding:5px;background:linear-gradient(to top,rgba(16,20,22,.72),transparent);opacity:0;transition:opacity .25s ease}
.bo-photo:hover .bo-photo-actions,.bo-photo:focus-within .bo-photo-actions{opacity:1}
.bo-photo-actions button{width:26px;height:26px;border-radius:50%;border:none;background:rgba(255,255,255,.9);color:var(--ink);cursor:pointer;font-size:13px;line-height:1}
.bo-photo-actions button:hover{background:#fff}

.bo-steps{display:grid;gap:8px;margin:16px 0;font-size:13px;color:var(--muted);line-height:1.55}
.bo-steps code{background:var(--paper-2);padding:1px 6px;border-radius:5px;font-size:12px;color:var(--ink)}
.adminbody textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 11px;font-size:13px;line-height:1.5;resize:vertical}
.bo-gh{border:1px solid var(--line);background:var(--paper-2);padding:18px;border-radius:12px}
.bo-log{background:var(--ink-deep);color:#cfe3d9;font-size:11px;line-height:1.6;padding:12px 14px;border-radius:8px;max-height:220px;overflow:auto;white-space:pre-wrap;margin:14px 0 0}
.pmedia-frame{position:relative;aspect-ratio:16/9;border:1px solid var(--line);background:var(--paper-2);overflow:hidden}
.pmedia-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* =====================================================================
   FIX: la foto de la firma en notaría nunca aparecía.
   `image-reveal` recortaba el propio elemento observado con
   clip-path:inset(0 100% 0 0) — área visible cero —, así que el
   IntersectionObserver devolvía ratio 0, nunca añadía .is-in y nunca se
   quitaba el recorte: bloqueo circular. El barrido pasa al contenido, que es
   donde se ve, y el contenedor conserva su área para que el observer dispare.
   ===================================================================== */
[data-reveal="image-reveal"]{clip-path:none!important}
[data-reveal="image-reveal"]>img,[data-reveal="image-reveal"]>picture>img{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s var(--mo-ease),transform 1.2s var(--mo-ease)}
[data-reveal="image-reveal"].is-in>img,[data-reveal="image-reveal"].is-in>picture>img{clip-path:inset(0 0 0 0)}
/* Mismo motivo en `mask`: el recorte va al contenido, no al observado. */
.motion-ready [data-reveal="mask"]{clip-path:none!important}
.motion-ready [data-reveal="mask"]>*{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--mo-ease)}
[data-reveal="mask"].is-in>*{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion: reduce){
  [data-reveal="image-reveal"]>img,[data-reveal="mask"]>*{clip-path:none!important}
}

/* FIX: la tarjeta de propiedad pasó a enlazar la foto (<a class="media">) y un
   <a> es inline, así que aspect-ratio no aplicaba: la imagen desaparecía y la
   etiqueta de estado, posicionada sobre ella, caía encima del título. */
.property .media{display:block}

/* =====================================================================
   Robustez y táctil
   ===================================================================== */
/* Sin JavaScript, .hero-content>*{opacity:0} dejaba la portada en negro: el
   titular solo aparecía cuando motion.js añadía .hero-in. Ahora la ocultación
   depende de que el motor de animación esté vivo. */
.hero-content>*{opacity:1;transform:none}
/* :not(.hero-in) evita el empate de especificidad con `.hero-in .hero-content>*`,
   que dejaba la portada oculta también CON JavaScript. */
.motion-ready:not(.hero-in) .hero-content>*{opacity:0;transform:translateY(26px)}

/* Zonas de toque: en pantalla táctil, los enlaces de acción y los controles
   necesitan alto suficiente para el dedo (WCAG 2.2 pide 24px; Apple, 44). */
@media (hover:none) and (pointer:coarse){
  /* Solo objetivos de navegación y acción. Los enlaces dentro de un párrafo
     están exentos (WCAG 2.2, 2.5.8) y agrandarlos rompería el interlineado. */
  a.eye,.pcard-cta,.plink,.insight a{min-height:44px;display:inline-flex;align-items:center}
  .footer p a{display:flex;align-items:center;min-height:40px}
  .footer .footer-bottom a{display:inline-block;padding-block:10px}
  .pbread a{display:inline-flex;align-items:center;min-height:36px}
  .menu-toggle,.nav .admin,.round{min-height:44px}
  .share-row a,.share-row button,.social-list svg{width:44px;height:44px}
  .bo-photo-actions button{width:34px;height:34px}
  .vp-auth-logout,#closeAdmin{min-height:40px;padding-inline:14px}
  .leaflet-control-zoom a{width:38px!important;height:38px!important;line-height:38px!important}
  .vw-chip span{padding-block:13px}
  .field input,.field select,.field textarea{min-height:46px;font-size:16px}
  /* 16px evita que iOS haga zoom automático al enfocar un campo */
}

/* El header sticky tapaba el arranque de la sección al saltar a un ancla o al
   cambiar de paso en el valorador. */
[id]{scroll-margin-top:clamp(84px,13vw,104px)}

/* =====================================================================
   Sell — dossier del propietario
   La página se escribe con los números del municipio de quien la lee: el
   argumento no es un eslogan, es su propio mercado.
   ===================================================================== */
.sell-hero{position:relative;padding:clamp(76px,10vw,150px) 0 clamp(40px,5vw,72px);overflow:hidden}
.sell-hero:before{content:"";position:absolute;width:min(64vw,780px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(201,173,149,.34),transparent 62%);
  right:-16vw;top:-24%;pointer-events:none}
.sell-hero-grid{display:grid;grid-template-columns:1.42fr .86fr;gap:clamp(28px,4.5vw,76px);align-items:end;position:relative;z-index:1}
.sell-hero h1{font-size:clamp(46px,8.4vw,124px);font-weight:400;line-height:.86;letter-spacing:-.062em;margin:18px 0 26px}
.sell-hero h1 em{font-style:normal;position:relative;white-space:nowrap}
/* Subrayado que se dibuja al entrar: marca la palabra que sostiene la página */
.sell-hero h1 em:after{content:"";position:absolute;left:0;right:0;bottom:.1em;height:3px;background:var(--atlantic);
  transform:scaleX(0);transform-origin:0 50%;animation:sellRule 1.1s cubic-bezier(.16,1,.3,1) .55s forwards}
@keyframes sellRule{to{transform:scaleX(1)}}
.sell-lede{font-size:clamp(16px,1.75vw,21px);line-height:1.62;max-width:60ch;color:var(--muted)}
.sell-lede strong{color:var(--ink);font-weight:600}
.sell-town-pick{position:relative;display:inline-flex;align-items:baseline;border-bottom:2px solid var(--sand);
  padding-right:18px;transition:border-color .3s ease}
.sell-town-pick:hover{border-bottom-color:var(--atlantic)}
.sell-town-label{font-weight:600;color:var(--ink);white-space:nowrap}
.sell-town-pick:after{content:"▾";position:absolute;right:0;bottom:.12em;pointer-events:none;color:var(--sand);font-size:.72em}
.sell-town-pick select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
  font:inherit;appearance:none;border:none;background:transparent}
.sell-town-pick:focus-within{border-bottom-color:var(--atlantic);outline:2px solid var(--atlantic);outline-offset:4px}
.sell-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}

.sell-ticker{border:1px solid var(--line);background:#fff;padding:22px}
.sell-ticker-list{margin:14px 0 0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.sell-ticker-list>div{background:#fff;padding:12px 14px;display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.sell-ticker-list dt{font-size:11px;color:var(--muted);margin:0}
.sell-ticker-list dd{margin:0;font-size:19px;font-weight:400;letter-spacing:-.03em;text-align:right}
.sell-ticker-list small{display:block;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--sand)}
.sell-hero-rule{height:1px;background:var(--line);margin-top:clamp(30px,4vw,58px)}

.sell-split{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,58px);align-items:start;max-width:960px}
.sell-split-num{font-size:clamp(56px,9vw,132px);line-height:.8;letter-spacing:-.07em;color:var(--sand);opacity:.5}
.sell-h2{font-size:clamp(30px,4.6vw,62px);font-weight:400;line-height:.98;letter-spacing:-.05em;margin:0 0 22px}
.sell-cost p{font-size:17px;line-height:1.68;max-width:62ch;margin:0 0 16px}

.sell-figures{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sell-figure{border-top:2px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:10px;
  transition:border-color .45s var(--mo-ease),transform .45s var(--mo-ease)}
.sell-figure:hover{transform:translateY(-5px);border-top-color:var(--sand)}
.sell-figure.is-key{border-top-color:var(--atlantic)}
.sell-figure-tag{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.sell-figure.is-key .sell-figure-tag{color:var(--atlantic)}
.sell-figure strong{font-size:clamp(20px,2.4vw,31px);font-weight:400;letter-spacing:-.04em;line-height:1.05}
.sell-figure p{font-size:13px;color:var(--muted);margin:0}
.sell-note{font-size:12px;color:var(--muted);margin-top:26px;max-width:76ch;line-height:1.6}

.sell-zonelist{display:grid;gap:11px}
.sell-zone{display:grid;grid-template-columns:minmax(150px,.9fr) 1fr auto;gap:18px;align-items:center;font-size:14px}
.sell-zone-name{color:var(--muted)}
.sell-zone-bar{height:8px;background:var(--paper-2);border-radius:4px;overflow:hidden}
.sell-zone-bar i{display:block;height:100%;width:var(--w);border-radius:4px;
  background:linear-gradient(90deg,var(--atlantic),var(--sand));
  transform-origin:0 50%;animation:sellBar 1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0)*70ms)}
@keyframes sellBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sell-zone b{font-weight:400;font-size:15px;letter-spacing:-.02em;min-width:96px;text-align:right}

.sell-steps{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.sell-steps li{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3.4vw,54px);align-items:start;
  padding:clamp(22px,3vw,38px) 0;border-bottom:1px solid var(--line);transition:background .4s ease}
.sell-steps li:hover{background:var(--paper-2)}
.sell-step-n{font-size:clamp(30px,4vw,54px);line-height:.85;letter-spacing:-.06em;color:var(--sand)}
.sell-steps h3{font-size:clamp(22px,2.6vw,34px);font-weight:400;letter-spacing:-.04em;margin:0 0 8px}
.sell-steps p{font-size:15px;line-height:1.6;color:var(--muted);margin:0;max-width:64ch}

.sell-stance-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,70px)}
.sell-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.sell-list li{font-size:15px;line-height:1.55;padding-left:26px;position:relative}
.sell-list li:before{position:absolute;left:0;top:0;font-size:15px}
.sell-list.is-do li:before{content:"→";color:var(--atlantic)}
.sell-list.is-dont li{color:var(--muted)}
.sell-list.is-dont li:before{content:"×";color:var(--sand)}

.sell-cta{background:var(--atlantic);color:#fff;padding:clamp(64px,9vw,124px) 0;position:relative;overflow:hidden}
.sell-cta:after{content:"";position:absolute;width:min(60vw,700px);aspect-ratio:1;border:1px solid rgba(255,255,255,.42);
  border-radius:50%;right:-10vw;top:-38%}
.sell-cta .wrap{position:relative;z-index:1}
.sell-cta h2{font-size:clamp(40px,7vw,104px);font-weight:400;line-height:.88;letter-spacing:-.06em;margin:16px 0 20px}
.sell-cta p{max-width:52ch;margin:0}
.sell-cta .btn{border-color:rgba(255,255,255,.45);color:#fff}
.sell-cta .btn:hover{background:rgba(255,255,255,.12)}
.sell-cta .btn.fill{background:#fff;color:var(--atlantic);border-color:#fff}

@media(max-width:1000px){
  .sell-hero-grid,.sell-stance-grid{grid-template-columns:1fr}
  .sell-figures{grid-template-columns:1fr}
  .sell-split{grid-template-columns:1fr}
  .sell-split-num{font-size:clamp(44px,12vw,72px)}
}
@media(max-width:640px){
  .sell-zone{grid-template-columns:1fr auto;gap:8px 12px}
  .sell-zone-bar{grid-column:1/-1;order:3}
  .sell-zone b{min-width:0}
  .sell-steps li{grid-template-columns:1fr;gap:10px}
  .sell-ticker-list dd{font-size:17px}
}
.wa-float.is-away{transform:translateY(140%);opacity:0;pointer-events:none}

/* =====================================================================
   Buy — contraste de anuncio y due diligence
   ===================================================================== */
.buy-tool{display:grid;grid-template-columns:.95fr 1.25fr;gap:clamp(20px,3vw,44px);align-items:start}
.buy-form{border:1px solid var(--line);background:#fff;padding:22px}
.buy-result{display:block;border:1px solid var(--line);background:var(--paper);padding:clamp(20px,2.6vw,32px)}
.buy-verdict{border-left:3px solid var(--line);padding-left:18px}
.buy-verdict h3{font-size:clamp(23px,2.6vw,33px);font-weight:400;letter-spacing:-.04em;line-height:1.05;margin:6px 0 4px}
.buy-verdict p{font-size:14px;color:var(--muted);margin:10px 0 0;max-width:56ch}
.buy-diff{font-size:clamp(30px,4vw,52px);font-weight:400;letter-spacing:-.055em;line-height:1}
.buy-verdict.is-good{border-left-color:var(--atlantic)}
.buy-verdict.is-good .buy-diff{color:var(--atlantic)}
.buy-verdict.is-fair{border-left-color:var(--sand)}
.buy-verdict.is-warn{border-left-color:#c98a4b}
.buy-verdict.is-warn .buy-diff{color:#b4712f}
.buy-verdict.is-bad{border-left-color:#b4442f}
.buy-verdict.is-bad .buy-diff{color:#b4442f}
.buy-numbers{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:26px}
.buy-numbers>div{background:#fff;padding:13px 15px;display:flex;flex-direction:column;gap:3px}
.buy-numbers span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.buy-numbers b{font-size:18px;font-weight:400;letter-spacing:-.03em}
.buy-deed{font-size:14px;line-height:1.6;margin:20px 0 0;max-width:62ch}
.buy-deed strong{font-weight:600}

.buy-checks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.buy-checks article{border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:8px;
  transition:border-color .4s var(--mo-ease)}
.buy-checks article:hover{border-top-color:var(--atlantic)}
.buy-checks .eye{color:var(--sand)}
.buy-checks h3{font-size:clamp(21px,2.2vw,27px);font-weight:400;letter-spacing:-.035em;margin:0}
.buy-checks p{font-size:13px;line-height:1.6;color:var(--muted);margin:0}

@media(max-width:1000px){
  .buy-tool{grid-template-columns:1fr}
  .buy-checks{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .buy-checks{grid-template-columns:1fr}
  .buy-numbers{grid-template-columns:1fr}
}

/* =====================================================================
   Invest — matriz precio × liquidez
   ===================================================================== */
.inv-matrix{display:grid;grid-template-columns:1.5fr .9fr;gap:clamp(20px,3vw,44px);align-items:start}
.inv-plot{margin:0;border:1px solid var(--line);background:#fff;padding:14px 14px 10px}
.inv-plot figcaption{font-size:11px;color:var(--muted);line-height:1.5;margin-top:10px;padding:0 4px}
.inv-svg{width:100%;height:auto;display:block;font-family:inherit}
.inv-q{fill:var(--paper-2);opacity:.55}
.inv-q2{fill:var(--atlantic-soft);opacity:.4}
.inv-qlabel{font-size:9px;letter-spacing:.14em;text-transform:uppercase;fill:var(--muted)}
.inv-axis{stroke:var(--line);stroke-width:1}
.inv-axis-label{font-size:9px;letter-spacing:.13em;text-transform:uppercase;fill:var(--muted)}
.inv-dot{cursor:pointer;outline:none}
/* Un círculo transparente amplio hace pulsable el punto con el dedo: el SVG se
   escala en móvil y la marca visible se queda en 7px reales. */
.inv-hit{fill:transparent}
.inv-dot .inv-mark{fill:var(--atlantic);opacity:.55;transition:opacity .3s ease,stroke-width .3s ease;
  stroke:var(--atlantic);stroke-width:0}
.inv-dot .inv-mark.is-down{fill:var(--sand);stroke:var(--sand)}
.inv-dot text{font-size:11px;fill:var(--ink);letter-spacing:-.01em}
.inv-dot:hover .inv-mark,.inv-dot:focus-visible .inv-mark{opacity:.85}
.inv-dot.is-on .inv-mark{opacity:1;stroke-width:8;stroke-opacity:.22}
.inv-dot:focus-visible text{text-decoration:underline}

.inv-read{border:1px solid var(--line);background:var(--paper);padding:22px;display:flex;flex-direction:column;gap:14px}
.inv-read-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.inv-read-grid>div{background:#fff;padding:11px 13px;display:flex;flex-direction:column;gap:2px}
.inv-read-grid small{font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.inv-read-grid b{font-size:18px;font-weight:400;letter-spacing:-.03em}
.inv-read-grid b.is-up{color:var(--atlantic)}
.inv-read-grid b.is-down{color:#b4442f}
.inv-read p{font-size:14px;line-height:1.62;color:var(--muted);margin:0}

.inv-questions{margin:20px 0 0;padding-left:20px;display:grid;gap:14px}
.inv-questions li{font-size:16px;line-height:1.6;color:var(--muted);max-width:62ch}
.inv-questions b{color:var(--ink);font-weight:600}

@media(max-width:1000px){
  .inv-matrix{grid-template-columns:1fr}
}
@media(max-width:640px){
  .inv-read-grid{grid-template-columns:1fr}
  .inv-qlabel{font-size:8px}
}

/* Finance — reparto del precio entre préstamo y entrada */
.fin-bar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--paper-2);margin-top:26px}
.fin-bar i{display:block;width:var(--w);transition:width .6s cubic-bezier(.16,1,.3,1)}
.fin-bar-loan{background:var(--atlantic)}
.fin-bar-entry{background:var(--sand)}
.fin-legend{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);margin:9px 0 0;letter-spacing:.04em}
.fin-legend span{width:11px;height:11px;border-radius:3px;display:inline-block}
.fin-legend .is-loan{background:var(--atlantic)}
.fin-legend .is-entry{background:var(--sand)}

/* ================= PRELOADER DE MARCA =================
   El primer fotograma es la marca: logotipo, nombre y línea de posicionamiento
   sobre papel, con un aro que gira. Idea tomada de feil.com.

   Sin tocar el HTML de las 25 páginas: todo va en ::before/::after del body. El
   ::before lleva el logo de fondo y el texto en `content` (dos líneas con \A);
   el ::after es el aro.

   Se usa logo-disc.webp: el .webp original trae un fondo negro CUADRADO que
   sobre papel se recortaba como un recuadro. Se probó también a hacer el negro
   transparente (logo-mark.png), pero el logotipo está diseñado para fondo
   oscuro —degrada de blanco a dorado— y sobre papel la mitad superior
   desaparecía. logo-disc.webp conserva su disco oscuro y recorta solo las
   esquinas: sobre papel queda un disco limpio y el logo con todo su contraste.

   CLAVE DE SEGURIDAD: la salida lleva `forwards` con retardo, así que el
   preloader se retira SOLO aunque el JS falle. app.js solo lo adelanta cuando
   la página —y el vídeo del hero— están de verdad listos. */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  animation: pl-out .5s cubic-bezier(.16,1,.3,1) 9s forwards;  /* solo red de seguridad */
}
/* Lienzo + logotipo + nombre + tagline */
body::before {
  inset: 0;
  content: "VILLA’S PROPERTIES\A PROPERTY INTELLIGENCE · TENERIFE";
  white-space: pre;
  text-align: center;
  display: grid;
  align-content: center;
  justify-items: center;
  padding-top: 190px;              /* deja hueco al logo, que va de fondo */
  background: var(--paper) url("assets/brand/logo-disc.webp")
              center calc(50% - 74px) / 104px auto no-repeat;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .29em;
  line-height: 2.6;
  text-indent: .29em;              /* compensa el tracking del último carácter */
}
/* Aro girando alrededor del logotipo */
body::after {
  top: calc(50% - 74px);
  left: 50%;
  width: 152px;
  height: 152px;
  margin: -76px 0 0 -76px;
  border: 3px solid var(--sand);   /* arena: el tono del propio logo */
  border-right-color: transparent; /* el hueco es lo que deja ver el giro */
  border-radius: 50%;
  animation: pl-spin .9s linear infinite,
             pl-out .5s cubic-bezier(.16,1,.3,1) 9s forwards;  /* solo red de seguridad */
}
/* Cuando la web está lista de verdad (incluido el vídeo), sale antes. */
body.is-loaded::before,
body.is-loaded::after {
  animation: pl-out .5s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes pl-spin { to { transform: rotate(360deg); } }
@keyframes pl-out { to { opacity: 0; visibility: hidden; } }

@media (max-width: 560px) {
  body::before { font-size: 11px; letter-spacing: .2em; background-size: 84px auto; }
}

/* Quien pide menos movimiento no quiere el aro girando. */
@media (prefers-reduced-motion: reduce) {
  body::after { animation: pl-out .01s linear .4s forwards; }
  body::before { animation: pl-out .01s linear .4s forwards; }
}

/* En el back office el preloader estorba: son herramientas. */
body.no-preloader::before,
body.no-preloader::after { content: none; }

/* ── Consentimiento dentro del preloader ─────────────────────────────────
   Mientras hay una decisión pendiente el preloader se PAUSA, no se desactiva.
   La diferencia importa: `animation-play-state` congela también el retardo de
   9 s, pero si vp-consent.js no llegara a ejecutarse nunca se pone esta clase
   y la red de seguridad retira el preloader como siempre. Nadie se queda
   encerrado por un script que no cargó.

   Cuelga de <html> y no de <body> a propósito: <html> existe desde el primer
   byte del documento, así que la pausa se puede aplicar antes incluso de que
   haya <body>. Con una conexión lenta, esperar a <body> llegaba tarde —se
   midió DOMContentLoaded a 5,3 s— y la web se colaba por debajo del aviso. */
html.vp-consent-espera body::before,
html.vp-consent-espera body::after { animation-play-state: paused; }

/* La barra de progreso: la carga deja de ser un aro girando sin sentido y pasa
   a decir cuánto falta. El aviso sale justo al 75%. */
body::after { z-index: 10000; }

/* Va pegada al borde superior y no bajo el logo: centrada chocaba con el
   tagline del preloader —quedaba detrás y no se veía—, y cualquier posición
   calculada respecto al centro se rompe al cambiar el alto de la ventana.
   Arriba y a todo el ancho no colisiona con nada, a ningún alto. */
.vp-progreso {
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  overflow: hidden;
}
.vp-progreso__barra {
  height: 100%;
  width: var(--pl-progreso, 0%);
  background: var(--ink);
  transition: width .5s cubic-bezier(.16, 1, .3, 1);
}
body.is-loaded .vp-progreso {
  animation: pl-out .5s cubic-bezier(.16, 1, .3, 1) forwards;
}
html.vp-consent-espera .vp-progreso { animation-play-state: paused; }

/* El aviso. Va por encima del preloader (9999) porque se lee SOBRE él. */
.vp-consent {
  position: fixed;
  z-index: 10001;
  left: 50%;
  bottom: clamp(18px, 4vh, 48px);
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 40px));
  /* Compacto a propósito: en una ventana de 720px de alto el aviso llegaba a
     comerse el tagline del preloader. */
  padding: 20px 24px 18px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(16, 20, 22, .13);
  animation: vp-consent-in .5s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes vp-consent-in {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.vp-consent__titulo {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.vp-consent__texto {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
.vp-consent__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Botones propios y no `.btn.fill`: sobre papel el relleno blanco desaparece.
   El principal va en tinta —contraste de sobra para un texto de 9px—. */
.vp-consent__si,
.vp-consent__no {
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  padding: 11px 17px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, color .2s, opacity .2s;
}
.vp-consent__si { background: var(--ink); color: var(--paper); }
.vp-consent__si:hover { opacity: .82; }
.vp-consent__no { background: transparent; color: var(--ink); }
.vp-consent__no:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.vp-consent__si:focus-visible,
.vp-consent__no:focus-visible,
.vp-consent__mas:focus-visible { outline: 2px solid var(--atlantic); outline-offset: 3px; }

/* El relleno vertical no es estético: con solo la altura del texto el objetivo
   táctil se quedaba en 17px y no hay dedo que acierte. El subrayado sigue
   ciñendo la palabra; lo que crece es la zona que se puede pulsar. */
.vp-consent__mas {
  display: inline-block;
  margin-top: 2px;
  padding: 16px 4px;
  font-size: 11px;
  line-height: 1.1;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Si no se decide a tiempo, el aviso NO se queda bloqueando: baja al pie y la
   web queda usable. Es el seguro contra el fallo que ya pasó en producción,
   donde el modal cubría la ventana con el botón muerto. */
.vp-consent--pie {
  bottom: 0;
  left: 0;
  transform: none;
  width: 100%;
  max-width: none;
  border: 0;
  border-top: 1px solid var(--line);
  animation: none;
}
.vp-consent--fuera {
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}

@media (max-width: 560px) {
  .vp-consent { padding: 20px 20px 18px; }
  .vp-consent__texto { font-size: 13px; }
  .vp-consent__si,
  .vp-consent__no { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .vp-consent { animation-duration: .01s; }
  .vp-progreso__barra { transition: none; }
}

/* ================= COLOR EN EL MOVIMIENTO =================
   El motion system movía las cosas pero todo entraba en gris. Estos tres
   toques meten los colores de la casa (atlántico y arena) EN la animación,
   no como decoración fija. Sin tocar el HTML: todo va sobre los selectores
   que motion.js ya usa. */

/* 1. Barrido — los títulos que se revelan con máscara pasan por una banda de
      color mientras se descubren. Es el gesto más cinematográfico y son pocos
      elementos, así que no cansa. */
.motion-ready [data-reveal="mask"] {
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--atlantic) 22%, transparent),
    transparent 62%);
  background-repeat: no-repeat;
  background-size: 100% 0;
  transition: clip-path 1.1s var(--mo-ease), background-size 1.1s var(--mo-ease);
}
[data-reveal="mask"].is-in {
  background-size: 100% 0;   /* la banda ya ha pasado: no deja rastro */
}
.motion-ready [data-reveal="mask"]:not(.is-in) { background-size: 100% 100%; }

/* 2. La escalera — cada elemento del stagger dibuja bajo sí una línea de color
      que crece con su propio retardo. Es lo que convierte el escalonado en algo
      que se VE, en vez de un simple fundido. */
[data-reveal] [data-stagger],
[data-stagger-group] > * {
  background-image: linear-gradient(90deg, var(--atlantic), var(--sand));
  background-repeat: no-repeat;
  /* ARRIBA, no abajo: estas tarjetas miden 280px y ya tienen un borde superior
     donde el ojo aterriza. Con la línea al fondo el color quedaba tan lejos del
     texto que no se percibía. */
  background-position: 0 0;
  background-size: 0 3px;
  transition:
    opacity .8s var(--mo-ease),
    transform .8s var(--mo-ease),
    background-size .9s var(--mo-ease);
  transition-delay: calc(var(--st-i, 0) * 90ms);
}
/* Ojo: en este sitio `data-reveal` y `data-stagger-group` suelen ir en el MISMO
   elemento, así que el selector de descendiente no casa. Hacen falta los dos:
   sin espacio (mismo elemento) y con espacio (anidado). */
[data-reveal].is-in [data-stagger],
[data-reveal].is-in[data-stagger-group] > *,
[data-reveal].is-in [data-stagger-group] > * {
  background-size: 100% 3px;
}

/* 3. Los círculos numerados laten en color al entrar en pantalla. El círculo ya
      es la forma de la marca; aquí se le da el momento. */
[data-reveal].is-in .cap-card .circle,
[data-reveal].is-in .step .num,
[data-reveal].is-in .round,
[data-reveal].is-in.cap-card .circle,
[data-reveal].is-in.step .num {
  animation: mo-pulse 1.1s var(--mo-ease) both;
  animation-delay: calc(var(--st-i, 0) * 90ms + 120ms);
}
@keyframes mo-pulse {
  0%   { border-color: var(--atlantic); box-shadow: 0 0 0 0 color-mix(in srgb, var(--atlantic) 55%, transparent); }
  60%  { box-shadow: 0 0 0 12px color-mix(in srgb, var(--atlantic) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Quien pide menos movimiento se queda con el color quieto, sin barridos. */
@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-reveal="mask"],
  [data-reveal] [data-stagger],
  [data-stagger-group] > * { background-image: none; }
  [data-reveal].is-in .cap-card .circle,
  [data-reveal].is-in .step .num,
  [data-reveal].is-in .round { animation: none; }
}

/* ================= LAS OPCIONES, EN CUATRO COLORES =================
   Los bloques de opciones (capacidades, pasos del proceso, herramientas) tenían
   todos sus círculos en verde atlántico: se leían como una masa. Ahora cada uno
   toma un color del ciclo — los primarios de la casa más el negro — y al pasar
   por encima el círculo se rellena con ese mismo color.

   El ciclo es de 4 con `nth-child(4n+…)`, así que sirve igual para grupos de 3,
   de 4 o de 6: cuando se acaban los colores, vuelve a empezar.

   El dorado NO está inventado: es el #f0c060 muestreado del propio logotipo. */
:root {
  --opt-1: var(--atlantic);   /* verde atlántico */
  --opt-2: var(--sand);       /* arena          */
  --opt-3: #f0c060;           /* dorado del logo */
  --opt-4: var(--ink);        /* negro          */
}

.cap-card:nth-child(4n+1), .step:nth-child(4n+1), .tool-card:nth-child(4n+1), .eco:nth-child(4n+1) { --opt: var(--opt-1); }
.cap-card:nth-child(4n+2), .step:nth-child(4n+2), .tool-card:nth-child(4n+2), .eco:nth-child(4n+2) { --opt: var(--opt-2); }
.cap-card:nth-child(4n+3), .step:nth-child(4n+3), .tool-card:nth-child(4n+3), .eco:nth-child(4n+3) { --opt: var(--opt-3); }
.cap-card:nth-child(4n+4), .step:nth-child(4n+4), .tool-card:nth-child(4n+4), .eco:nth-child(4n+4) { --opt: var(--opt-4); }

/* Círculo de las capacidades: borde en su color, relleno al pasar. */
.cap-card .circle {
  border-color: var(--opt, var(--atlantic));
  color: var(--opt, var(--atlantic));
  transition: background-color .3s var(--mo-ease), color .3s var(--mo-ease),
              border-color .3s var(--mo-ease), transform .3s var(--mo-ease);
}
.cap-card:hover .circle,
.cap-card:focus-within .circle {
  background: var(--opt, var(--atlantic));
  color: #fff;
  transform: scale(1.06);
}
/* La línea superior de la tarjeta se tiñe también: ata el color al bloque
   entero, no solo al círculo. */
.cap-card {
  transition: border-color .3s var(--mo-ease);
}
.cap-card:hover { border-top-color: var(--opt, var(--line)); }

/* Número del proceso: mismo criterio. */
.step .num {
  background: color-mix(in srgb, var(--opt, var(--atlantic)) 18%, transparent);
  color: var(--opt, var(--atlantic));
  transition: background-color .3s var(--mo-ease), color .3s var(--mo-ease),
              transform .3s var(--mo-ease);
}
.step:hover .num,
.step:focus-within .num {
  background: var(--opt, var(--atlantic));
  color: #fff;
  transform: scale(1.06);
}

/* El círculo grande de las herramientas: ya tenía un color por tarjeta a mano;
   ahora sale del mismo ciclo y reacciona al pasar. */
.tool-card:after {
  background: color-mix(in srgb, var(--opt, var(--atlantic)) 22%, transparent);
  transition: background-color .35s var(--mo-ease), transform .45s var(--mo-ease);
}
.tool-card:nth-child(2):after,
.tool-card:nth-child(3):after { background: color-mix(in srgb, var(--opt) 22%, transparent); }
.tool-card:hover:after {
  background: color-mix(in srgb, var(--opt, var(--atlantic)) 42%, transparent);
  transform: scale(1.12);
}

/* Bloques del ecosistema: no llevan círculo, así que el color entra por el borde. */
.eco {
  transition: border-color .3s var(--mo-ease), transform .3s var(--mo-ease);
}
.eco:hover {
  border-color: var(--opt, var(--line));
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .cap-card:hover .circle, .step:hover .num,
  .tool-card:hover:after, .eco:hover { transform: none; }
}

/* ================= TITULAR DEL HERO, LETRA A LETRA =================
   Cada letra entra en BLANCO y se tiñe de su color con su propio retardo, así
   que el color recorre el titular como una ola. Los tonos los genera motion.js
   girando el círculo cromático (pastel), y los deja en --c y --i por letra.

   Solo se anima `color`: no toca layout ni provoca reflow. */
.hero h1 .ltr {
  color: #fff;
  transition: color .55s var(--mo-ease);
  transition-delay: calc(var(--i, 0) * 55ms + 550ms);  /* tras el fundido del preloader */
  will-change: color;
}
/* La ola arranca cuando el preloader SE VA (body.is-loaded), no con el reveal
   del hero: si no, se coloreaba por detrás de la pantalla de carga y al
   descubrirse el titular ya estaba pintado. Ahora se ve entera. */
body.is-loaded .hero h1 .ltr { color: var(--c, #fff); }

/* Sin movimiento: el color aparece ya puesto, sin ola ni retardos. */
@media (prefers-reduced-motion: reduce) {
  .hero h1 .ltr { transition: none; transition-delay: 0s; color: var(--c, #fff); }
}

/* ================= EL ENTORNO DE CADA INMUEBLE =================
   Datos reales de OpenStreetMap, no adjetivos. Dos bloques: las ventajas
   deducidas de lo medido, y la tabla completa de servicios con su distancia. */

/* Ventajas: frases cortas, cada una con su línea de color al entrar. */
.pventajas {
  display: grid;
  gap: 0;
  margin: 0 0 clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--line);
}
.pventajas li {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.45;
  max-width: 68ch;
}

/* Tabla de servicios: categoría · distancia · nombre · cuántos hay. */
.pnear {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.pnear-item {
  display: grid;
  grid-template-columns: 1.1fr auto 1.6fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.pnear-cat { font-weight: 600; font-size: 13px; }
.pnear-d {
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;   /* las cifras alineadas se comparan mejor */
}
.pnear-n { color: var(--muted); font-size: 13px; }
.pnear-t {
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
.pnear-fuente {
  margin-top: 18px;
  font-size: 11px;
  color: var(--muted);
  max-width: 70ch;
}

@media (max-width: 720px) {
  .pnear-item { grid-template-columns: 1fr auto; row-gap: 4px; }
  .pnear-n { grid-column: 1 / -1; }
  .pnear-t { grid-column: 2; text-align: right; }
}

/* ================= TÍTULOS DE SECCIÓN, ESTILO EDITORIAL =================
   El gesto de feil.com ("OUR FUTURE / LEGACY"): la primera parte del titular en
   tipografía DELGADA y la última palabra en NEGRA, ambas en color sólido. El
   contraste es de PESO, no de relleno.

   Primero se probó con -webkit-text-stroke y relleno transparente: quedaba una
   letra hueca de contorno que no es lo que hace Feil y encima se leía peor sobre
   fondos con textura. Se descarta.

   motion.js parte el titular y envuelve la última palabra; aquí se les da forma.
   Se copia la GRAMÁTICA, no sus textos. */
/* Doble selector a propósito: la hoja original trae `.head h2,.big{line-height:.9}`
   minificada arriba del todo y, a igual especificidad, gana la que se declare
   después… salvo que el navegador ya la haya resuelto. Con `.section` delante no
   hay duda de quién manda. */
.section .head h2,
.pagehero h1,
.section .big,
.head h2 {
  /* Interlineado holgado y tracking abierto: en mayúsculas y a este tamaño, el
     aire es lo que hace que se lea como titular editorial y no como un bloque
     apelmazado. Es lo que separa el original de una copia apretada. */
  line-height: 1.14;
  letter-spacing: .02em;
  text-transform: uppercase;
  max-width: 22ch;
}
.head h2 .t-ligero,
.pagehero h1 .t-ligero,
.head h2 .t-solido,
.pagehero h1 .t-solido {
  display: block;
  color: inherit;
}
/* Delgada: el peso ligero es lo que le da el aire editorial.
   100 y no 200: en la pila del sistema es Ultralight de verdad (San Francisco
   en Mac/iOS, Roboto Thin en Android). Donde no exista ese corte —Segoe UI en
   Windows— el navegador cae al más fino disponible, nunca a uno más grueso. */
.head h2 .t-ligero,
.pagehero h1 .t-ligero {
  font-weight: 100;
  letter-spacing: .085em;   /* a menos trazo, más aire: si no, se deshilacha */
}
/* Y la última palabra, con todo el peso. */
.head h2 .t-solido,
.pagehero h1 .t-solido {
  font-weight: 800;
  letter-spacing: .005em;   /* la negra necesita menos, pero ya no va apretada */
  margin-top: .12em;        /* respiro entre la línea delgada y la negra */
}

/* Un titular largo NO puede ensanchar su propia columna.
   Los hijos de un grid nacen con min-width:auto, así que una palabra que no
   quepa —"INTERPRETAMOS" a 46px mide 385px— estira la columna por encima del
   ancho de la pantalla. Como .section lleva overflow:hidden, el sobrante no
   genera scroll: se recorta en silencio y la palabra pierde la última letra.
   Ningún test de desborde lo caza, porque no hay scroll y dentro del h2 el
   texto "cabe". Solo se ve mirando una captura. */
.head > *,
.pagehero > * { min-width: 0; }

/* Y que quepa de verdad en móvil: a 375px el hueco útil es 335px, así que el
   mínimo del clamp baja hasta que la palabra más larga entre entera. */
@media (max-width: 560px) {
  .head h2,
  .pagehero h1,
  .big { font-size: clamp(32px, 8.6vw, 46px); }
}

/* La rayita de debajo, como en el original. */
.head h2::after,
.pagehero h1::after {
  content: "";
  display: block;
  margin-top: .5em;
  height: 1px;
  background: var(--line);
  max-width: 34ch;
}

.head p { max-width: 60ch; }

/* Aparición por máscara: el titular se descubre de abajo arriba en vez de
   limitarse a subir. Es el gesto de Feil, aplicado a nuestros títulos. */
.motion-ready [data-reveal] .head h2,
.motion-ready [data-reveal] > div > h2,
.motion-ready [data-reveal].head h2 {
  clip-path: inset(0 0 105% 0);
  transition: clip-path 1s var(--mo-ease);
}
[data-reveal].is-in .head h2,
[data-reveal].is-in > div > h2,
[data-reveal].is-in.head h2 {
  clip-path: inset(0 0 -12% 0);   /* margen abajo: las colas de la g y la j */
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-reveal] .head h2,
  .motion-ready [data-reveal] > div > h2,
  .motion-ready [data-reveal].head h2 { clip-path: none; transition: none; }
}

@media (max-width: 720px) {
  .head h2, .big, .pagehero h1 { max-width: none; }
}

/* ================= EL ENTORNO DE CADA INMUEBLE =================
   Datos reales de OpenStreetMap, no adjetivos. Dos bloques: las ventajas
   deducidas de lo medido, y la tabla completa de servicios con su distancia. */

/* Ventajas: frases cortas, cada una con su línea de color al entrar. */
.pventajas {
  display: grid;
  gap: 0;
  margin: 0 0 clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--line);
}
.pventajas li {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.45;
  max-width: 68ch;
}

/* Tabla de servicios: categoría · distancia · nombre · cuántos hay. */
.pnear {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.pnear-item {
  display: grid;
  grid-template-columns: 1.1fr auto 1.6fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.pnear-cat { font-weight: 600; font-size: 13px; }
.pnear-d {
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;   /* las cifras alineadas se comparan mejor */
}
.pnear-n { color: var(--muted); font-size: 13px; }
.pnear-t {
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
.pnear-fuente {
  margin-top: 18px;
  font-size: 11px;
  color: var(--muted);
  max-width: 70ch;
}

@media (max-width: 720px) {
  .pnear-item { grid-template-columns: 1fr auto; row-gap: 4px; }
  .pnear-n { grid-column: 1 / -1; }
  .pnear-t { grid-column: 2; text-align: right; }
}

/* ================= TÍTULOS DE SECCIÓN, ESTILO EDITORIAL =================
   El gesto de feil.com: "OUR FUTURE" en HUECO (solo contorno) y "LEGACY" en
   SÓLIDO, en mayúsculas, muy grandes y con una línea fina debajo. El golpe lo da
   ese contraste entre lo vacío y lo lleno, no el tamaño.

   motion.js parte el titular y envuelve la última palabra; aquí se les da forma.
   Se copia la GRAMÁTICA, no sus textos: los títulos siguen siendo los nuestros. */
.head h2,
.pagehero h1,
.big {
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.02em;
  text-transform: uppercase;
  max-width: 18ch;
}
.head h2 .t-hueco,
.pagehero h1 .t-hueco,
.head h2 .t-solido,
.pagehero h1 .t-solido {
  display: block;
}
/* Hueco: relleno transparente y solo el trazo. -webkit-text-stroke lo entienden
   todos los navegadores actuales; si alguno no, se ve sólido y no se rompe nada. */
.head h2 .t-hueco,
.pagehero h1 .t-hueco {
  color: transparent;
  -webkit-text-stroke: 1.4px var(--ink);
  font-weight: 400;          /* el trazo fino es lo que lo hace elegante */
  letter-spacing: .01em;
}
.dark .head h2 .t-hueco,
.dark .pagehero h1 .t-hueco,
.cta .head h2 .t-hueco { -webkit-text-stroke-color: currentColor; }

.head h2 .t-solido,
.pagehero h1 .t-solido { color: inherit; }

/* La rayita de debajo, como en el original. */
.head h2::after,
.pagehero h1::after {
  content: "";
  display: block;
  margin-top: .38em;
  height: 1px;
  background: var(--line);
  max-width: 30ch;
}

.head p { max-width: 60ch; }

/* Aparición por máscara: el titular se descubre de abajo arriba en vez de
   limitarse a subir. Es el gesto de Feil, aplicado a nuestros títulos. */
.motion-ready [data-reveal] .head h2,
.motion-ready [data-reveal] > div > h2,
.motion-ready [data-reveal].head h2 {
  clip-path: inset(0 0 105% 0);
  transition: clip-path 1s var(--mo-ease);
}
[data-reveal].is-in .head h2,
[data-reveal].is-in > div > h2,
[data-reveal].is-in.head h2 {
  clip-path: inset(0 0 -12% 0);   /* margen abajo: las colas de la g y la j */
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-reveal] .head h2,
  .motion-ready [data-reveal] > div > h2,
  .motion-ready [data-reveal].head h2 { clip-path: none; transition: none; }
}

@media (max-width: 720px) {
  .head h2, .big, .pagehero h1 { max-width: none; }
  .head h2 .t-hueco, .pagehero h1 .t-hueco { -webkit-text-stroke-width: 1px; }
}

/* ================= EL ENTORNO DE CADA INMUEBLE =================
   Datos reales de OpenStreetMap, no adjetivos. Dos bloques: las ventajas
   deducidas de lo medido, y la tabla completa de servicios con su distancia. */

/* Ventajas: frases cortas, cada una con su línea de color al entrar. */
.pventajas {
  display: grid;
  gap: 0;
  margin: 0 0 clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--line);
}
.pventajas li {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.45;
  max-width: 68ch;
}

/* Tabla de servicios: categoría · distancia · nombre · cuántos hay. */
.pnear {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.pnear-item {
  display: grid;
  grid-template-columns: 1.1fr auto 1.6fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.pnear-cat { font-weight: 600; font-size: 13px; }
.pnear-d {
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;   /* las cifras alineadas se comparan mejor */
}
.pnear-n { color: var(--muted); font-size: 13px; }
.pnear-t {
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
.pnear-fuente {
  margin-top: 18px;
  font-size: 11px;
  color: var(--muted);
  max-width: 70ch;
}

@media (max-width: 720px) {
  .pnear-item { grid-template-columns: 1fr auto; row-gap: 4px; }
  .pnear-n { grid-column: 1 / -1; }
  .pnear-t { grid-column: 2; text-align: right; }
}

/* ================= TÍTULOS DE SECCIÓN, ESCALA EDITORIAL =================
   Adaptado de feil.com ("Our Future Legacy", "Longevity and commitment"): el
   titular pesa, va en dos líneas y el contraste con el cuerpo de texto es
   brutal. Lo que se copia es la GRAMÁTICA —peso, escala y aparición—, no sus
   textos: los títulos siguen siendo los nuestros.

   Cambios sobre el estilo anterior: peso 400 -> 700, interlineado más ceñido y
   tracking más negativo. Sin tocar el HTML de las 25 páginas. */
.head h2,
.big,
.pagehero h1 {
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.045em;
  max-width: 16ch;          /* fuerza el corte en dos líneas, como en Feil */
}
.head p { max-width: 60ch; }

/* Aparición por máscara: el titular se descubre de abajo arriba en vez de
   limitarse a subir. Es el gesto de Feil, aplicado a nuestros títulos. */
.motion-ready [data-reveal] .head h2,
.motion-ready [data-reveal] > div > h2,
.motion-ready [data-reveal].head h2 {
  clip-path: inset(0 0 105% 0);
  transition: clip-path 1s var(--mo-ease);
}
[data-reveal].is-in .head h2,
[data-reveal].is-in > div > h2,
[data-reveal].is-in.head h2 {
  clip-path: inset(0 0 -12% 0);   /* margen abajo: las colas de la g y la j */
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-reveal] .head h2,
  .motion-ready [data-reveal] > div > h2,
  .motion-ready [data-reveal].head h2 { clip-path: none; transition: none; }
}

@media (max-width: 720px) {
  .head h2, .big, .pagehero h1 { max-width: none; }
}

/* ── Pieza de presentación (18 s, antes del CTA) ─────────────────────────
   Va aquí y no en el hero por una razón concreta: el vídeo lleva su propio
   texto quemado —"TENERIFE.", "PROPERTY.", "DIFFERENT."— que es justo el que
   la portada ya dice en HTML. De fondo, ambos se pisarían. Colocado antes del
   CTA, en cambio, remata: el vídeo cierra en "HABLEMOS" y el botón real está
   justo debajo. */
.filmbox {
  margin: 0;
  position: relative;
}
.filmvid {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--ink-deep);
  /* El filo, no una sombra: el resto del sitio tampoco usa sombras. */
  border: 1px solid var(--line);
}
.filmbox figcaption {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* El disco de la marca asomando por detrás, como en el resto de secciones. */
.filmreel { position: relative; }
.filmreel::before {
  content: "";
  position: absolute;
  width: clamp(180px, 22vw, 340px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--atlantic) 38%, transparent);
  border-radius: 50%;
  right: -6vw;
  top: 12%;
  pointer-events: none;
}

/* ── Vídeo vertical a dos columnas (sell.html) ───────────────────────────
   Un 9:16 a todo ancho dejaría un hueco enorme a los lados y empujaría el
   resto de la página fuera de pantalla. Repartido con el texto, el formato
   deja de ser un problema y pasa a ser el encuadre natural de la columna. */
.videosplit {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.vidvert { margin: 0; }
.vidvert__v {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  background: var(--ink-deep);
  border: 1px solid var(--line);
}
.videosplit__txt h2 {
  font-size: clamp(34px, 4.6vw, 62px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.045em;
  margin: 10px 0 18px;
}
.videosplit__txt p { max-width: 52ch; }

@media (max-width: 820px) {
  /* Apilado, y el vídeo con tope de alto: en un móvil un 9:16 a ancho completo
     ocupa más que la pantalla entera y obliga a hacer scroll dentro del vídeo. */
  .videosplit { grid-template-columns: 1fr; }
  .vidvert { max-width: 300px; margin-inline: auto; }
}

/* El bloque de vídeo que va pegado al hero: sin el respiro de arriba, para que
   la imagen en movimiento asome en cuanto se pasa la portada y no haya que
   bajar a ciegas hasta encontrarla. */
.filmreel--top { padding-top: clamp(18px, 2.5vw, 34px); }
.filmreel--top .head { margin-top: clamp(22px, 3vw, 40px); margin-bottom: 0; }

/* ── Vídeo a sangre ──────────────────────────────────────────────────────
   Sin marco y de borde a borde: lo que se busca es que la imagen mande, y un
   filo de 1px alrededor la convierte en "una foto puesta en la página".
   El ancho completo se consigue sacando el <figure> del .wrap en el HTML y no
   con width:100vw, que en Windows incluye la barra de scroll y provoca
   desborde horizontal. */
.filmbox--sangre { width: 100%; }
.filmbox--sangre .filmvid {
  border: 0;                    /* fuera el marco */
  width: 100%;
  /* Tope de alto para pantallas muy anchas: a 1920px un 16:9 pediría 1080px de
     alto y no cabría de una vez. `contain` en lugar de `cover` porque el vídeo
     lleva rótulos y datos pegados a los bordes: recortar se comería cifras. */
  max-height: 90vh;
  object-fit: contain;
}
.filmbox--sangre figcaption {
  /* El pie sí vuelve al margen del resto del texto. */
  padding-inline: var(--pad);
  max-width: var(--max);
  margin-inline: auto;
}

/* ── Espacio del fundador y contacto ─────────────────────────────────────
   Una inmobiliaria vende confianza antes que inmuebles: saber quién responde
   al otro lado vale más que otra sección de servicios. */
.ceogrid {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(26px, 5vw, 64px);
  align-items: start;
}
.ceofoto { margin: 0; }
/* Hueco marcado, no una foto de banco de imágenes: en el sitio donde va la
   cara del responsable, o está la suya o no hay ninguna. */
.ceofoto__hueco {
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  background: var(--paper-2);
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ceofoto figcaption { margin-top: 10px; font-size: 11px; }
.ceotxt h3 {
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 400;
  letter-spacing: -.04em;
  margin: 0 0 4px;
}
.ceorol {
  margin: 0 0 18px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--atlantic);
}
.ceotxt p { max-width: 58ch; }

/* Los datos de contacto, en fila y separados por filos: se leen de un vistazo
   y sin jerarquía falsa entre ellos. */
.nap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: clamp(34px, 5vw, 60px);
  border-top: 1px solid var(--line);
}
.nap > div {
  padding: 18px 16px 0 0;
  border-right: 1px solid var(--line);
}
.nap > div:last-child { border-right: 0; }
.nap small {
  display: block;
  margin-bottom: 6px;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.nap a, .nap span { font-size: 13px; line-height: 1.45; }
.nap a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 820px) {
  .ceogrid { grid-template-columns: 1fr; }
  .ceofoto { max-width: 240px; }
  .nap { grid-template-columns: 1fr 1fr; }
  .nap > div { padding-right: 14px; padding-bottom: 16px; }
  .nap > div:nth-child(2n) { border-right: 0; }
}
@media (max-width: 480px) {
  .nap { grid-template-columns: 1fr; }
  .nap > div { border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
  .nap > div:last-child { border-bottom: 0; }
}

/* El vídeo propio del hero es MUCHO más claro que el que había antes (cielo y
   arena a plena luz), y el titular va en tonos pastel: con el velo original
   —un degradado que solo carga en la parte baja— las primeras líneas quedaban
   ilegibles. Se añade una capa uniforme por encima del vídeo, no del hero
   entero, para no ensuciar el fallback de degradado cuando no hay vídeo. */
.hero .film:has(.hero-video.active)::after {
  background:
    linear-gradient(to top, rgba(6, 9, 8, .88), rgba(6, 9, 8, .30) 58%, rgba(6, 9, 8, .42)),
    linear-gradient(90deg, rgba(6, 9, 8, .42), rgba(6, 9, 8, .06) 62%);
}
/* Sin :has() —Safari antiguo, Firefox ESR— el velo uniforme se aplica igual a
   través del propio vídeo, que va bajo el texto. */
.hero-video.active { filter: brightness(.82) saturate(1.05); }
/* En escritorio el hero es casi 16:9 y cover recorta como mucho un 6%. Se
   deja, pero eligiendo por dónde: al bajar el encuadre se sacrifica cielo
   en vez de la cala y las sombrillas, que es lo que vende la escena. */
.hero-video.active { object-position: center 58%; }

/* La foto ya está: el hueco marcado desaparece. width/height van en el HTML
   para reservar el sitio antes de que cargue y que no salte la maquetación. */
.ceofoto__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--line);
}

/* ── Zonas de Tenerife: recorrido más corto ──────────────────────────────
   Cinco zonas a 90vh cada una daban 4.050px de scroll: cuatro pantallas y
   media para ver cinco fotos. A 58vh el cambio se sigue leyendo y el bloque
   deja de ser un pasillo. */
@media (prefers-reduced-motion: no-preference) {
  .tf-section { height: calc(var(--tf-zones) * 58vh); }
}

/* Y con "reducir movimiento", rejilla en vez de columna: las cinco zonas
   caben de una vez, cada una con su foto detrás en lugar de texto suelto
   sobre negro. */
@media (prefers-reduced-motion: reduce) {
  .tf-captions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(12px, 2vw, 20px);
  }
  .tf-caption { margin-bottom: 0; }
  .tf-caption--foto {
    position: relative;
    min-height: 260px;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
  }
  /* Velo para que el texto se lea sobre cualquier foto. */
  .tf-caption--foto::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 9, 8, .88), rgba(6, 9, 8, .25));
    z-index: 0;
  }
  .tf-caption--foto > * { position: relative; z-index: 1; }
}

/* ── La biografía ────────────────────────────────────────────────────────
   Cinco párrafos son bastante más de lo que había: el texto pasa a mandar y
   la foto se queda arriba en lugar de centrarse, que si no queda flotando en
   mitad de una columna larga. */
.ceogrid:has(.ceobio) { align-items: start; }
.ceofoto { position: sticky; top: 110px; }
.ceobio {
  margin: 0 0 14px;
  max-width: 62ch;
  color: var(--muted);
  line-height: 1.6;
}
/* La entradilla en mayor cuerpo: es la que engancha y da el origen. */
.ceobio--entrada {
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 18px;
}
/* Y el cierre, que es la frase que resume todo, no se deja como una línea más. */
.ceobio--cierre {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--ink);
  font-style: italic;
}
@media (max-width: 820px) {
  .ceofoto { position: static; }
}

/* ── La casilla de consentimiento ────────────────────────────────────────
   `.field input{width:100%}` está pensada para campos de texto, pero también
   alcanzaba al checkbox: ocupaba los 296px del bloque y empujaba el texto
   fuera de la caja, que se cortaba por la derecha —31px fuera de la ventana
   en móvil—. Aquí recupera su tamaño natural. */
.vw-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex: 0 0 18px;
  padding: 0;
  border-radius: 4px;
  accent-color: var(--atlantic);
}
/* Y el texto, que pueda encoger: en flex los hijos nacen con min-width:auto y
   no bajan de su contenido, así que una línea larga desborda en vez de partir. */
.vw-consent label > span { flex: 1 1 auto; min-width: 0; }

/* ── EL bug del carrusel de zonas ────────────────────────────────────────
   `.tf-section` llevaba `overflow:hidden`, y eso ROMPE el `position:sticky`
   de `.tf-sticky`: un ancestro con overflow distinto de visible crea un
   contenedor de scroll y el hijo deja de pegarse. Resultado: la escena se iba
   hacia arriba con el scroll y lo que quedaba en pantalla era el fondo negro
   de la sección. Se veía Costa Adeje al entrar y negro el resto del recorrido.

   `overflow: clip` recorta igual pero NO crea contenedor de scroll, así que el
   sticky vuelve a funcionar. Donde no se soporte, el navegador lo ignora y
   queda `visible`: no recorta, pero el carrusel funciona igual. */
.tf-section { overflow: clip; }

/* ── Selección múltiple del brief ────────────────────────────────────────
   Casillas convertidas en fichas pulsables: con nueve opciones, una lista de
   checkboxes se lee como un formulario de Hacienda. Y el objetivo táctil pasa
   de los 13px de una casilla suelta a toda la ficha. */
.chiplabel {
  display: block;
  margin-bottom: 10px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font-size: 12px;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.chip:hover { border-color: var(--atlantic); }
/* La casilla sigue ahí para el lector de pantalla y el teclado: se hace
   pequeña, no se oculta, porque `display:none` la sacaría del recorrido. */
.chip input {
  width: 14px;
  height: 14px;
  min-width: 14px;
  margin: 0;
  padding: 0;
  flex: none;
  accent-color: var(--atlantic);
}
.chip:has(input:checked) {
  background: var(--atlantic);
  border-color: var(--atlantic);
  color: #fff;
}
.chip:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.chipnota {
  display: block;
  margin-top: 9px;
  font-size: 11px;
  color: var(--muted);
}

/* ── Botones sociales con su color de marca ──────────────────────────────
   Cada red tiene su color y su gente lo reconoce antes de leer la palabra.
   El color va en el borde y en el hover, no en el relleno permanente: cuatro
   rectángulos saturados en el pie del sitio le robarían el sitio al contenido.
   Al pasar por encima, cada uno se llena del suyo. */
.footer p:has(.social) { display: flex; flex-wrap: wrap; gap: 8px; }
.social {
  --c: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--c) !important;
  background: transparent;
  transition: background .2s, color .2s, border-color .2s;
}
/* El punto de color: lee la marca de un vistazo aunque no se pase el ratón. */
.social::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--fondo, var(--c));
  flex: none;
}
.social:hover {
  background: var(--fondo, var(--c));
  border-color: transparent;
  color: var(--sobre, #fff) !important;
}
.social:hover::before { background: var(--sobre, #fff); }
.social:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }

/* Colores oficiales de cada red. */
.social--ig { --c: #E4405F; --fondo: linear-gradient(45deg, #F58529, #DD2A7B 45%, #8134AF 75%, #515BD4); }
.social--fb { --c: #1877F2; --fondo: #1877F2; }
.social--tt { --c: #111; --fondo: #111; }
.social--yt { --c: #FF0000; --fondo: #FF0000; }
.social--li { --c: #0A66C2; --fondo: #0A66C2; }
/* TikTok es negro: en el pie claro se distingue por sus dos acentos. */
.social--tt::before { background: linear-gradient(135deg, #25F4EE 45%, #FE2C55 55%); }
.social--tt:hover::before { background: linear-gradient(135deg, #25F4EE 45%, #FE2C55 55%); }

/* ── Carrusel de entidades ───────────────────────────────────────────────
   Cinta infinita: el track lleva la tira de logos TRES veces y se desplaza un
   tercio exacto, así el bucle no tiene costura. La máscara de los extremos
   evita que los logos aparezcan y desaparezcan de golpe contra el borde. */
.bank-slider {
  overflow: hidden;
  margin-top: clamp(26px, 4vw, 44px);
  padding-block: 10px;
  border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.bank-track {
  display: flex;
  width: max-content;
  animation: bankScroll 32s linear infinite;
}
.bank-item {
  width: clamp(195px, 21vw, 273px);
  flex: none;
  display: grid;
  place-items: center;
  padding-inline: 10px;
}
.bank-item img {
  /* 30% más grandes: son la prueba de que hay veinte bancos detrás y en 32px
     no se leían las marcas. */
  height: 42px;
  width: auto;
  max-width: 100%;
  /* En COLOR por defecto: los logos son la prueba social de la página y en
     gris pasaban desapercibidos. Se apagan al pasar el ratón, que es cuando el
     visitante ya está mirando y el color deja de hacer falta. */
  filter: none;
  transition: filter .25s;
}
.bank-slider:hover .bank-item img { filter: grayscale(1) opacity(.55); }
@keyframes bankScroll { to { transform: translateX(-33.333%); } }

/* Quien pide menos movimiento no ve una cinta girando sin parar: los logos se
   quedan quietos y se reparten en rejilla, que se leen igual de bien. */
@media (prefers-reduced-motion: reduce) {
  .bank-track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
  .bank-item:nth-child(n+7) { display: none; }   /* la tira se repite 3 veces (6 logos) */
  .bank-item img { filter: none; }
}

.bankcifras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: clamp(22px, 3vw, 34px);
  border-top: 1px solid var(--line);
}
.bankcifras > div { padding: 16px 14px 0 0; border-right: 1px solid var(--line); }
.bankcifras > div:last-child { border-right: 0; }
.bankcifras strong { display: block; font-size: clamp(26px, 3.2vw, 42px); font-weight: 400; letter-spacing: -.03em; }
.bankcifras small { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.bankpie { margin-top: 16px; font-size: 12px; max-width: 62ch; }

@media (max-width: 560px) {
  .bankcifras { grid-template-columns: 1fr; }
  .bankcifras > div { border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
  .bankcifras > div:last-child { border-bottom: 0; }
}

/* Honeypot: fuera de la vista pero NO con display:none, que muchos bots ya
   detectan. Sin tamaño y fuera de pantalla: una persona no lo ve ni lo tabula
   —lleva tabindex -1— y un bot que rellene todo cae. */
.vp-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  /* clip-path en lugar de left:-9999px: aquello ensanchaba el documento y
     provocaba scroll horizontal en pantallas de 320px. */
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Nota metodológica de los artículos: va marcada porque no es el argumento,
   es la letra pequeña que hace que el argumento se sostenga. */
.post-note {
  margin: 22px 0;
  padding: 16px 18px;
  border-left: 3px solid var(--sand);
  background: var(--paper-2);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

/* ── Capabilities con retrato ────────────────────────────────────────────
   El montaje de Feil: una fotografía vertical sostiene la columna izquierda y
   las decisiones se leen al lado. La foto va en monocromo CÁLIDO y no en gris
   neutro: la paleta de la casa es papel y arena, y un B/N frío se queda encima
   de la página en lugar de pertenecer a ella. */
.capsplit {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 66px);
  align-items: start;
}
.capfoto { margin: 0; }
.capfoto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--line);
}
.capfoto figcaption {
  margin-top: 10px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Dentro del split las tarjetas van a dos columnas, no a cuatro: con la foto
   al lado, cuatro columnas dejarían cada una en un carril demasiado estrecho. */
.capsplit .capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .capsplit { grid-template-columns: 1fr; }
  .capfoto { max-width: 320px; }
}
@media (max-width: 560px) {
  .capsplit .capabilities { grid-template-columns: 1fr; }
}

/* ── Pantallas de 320px (iPhone SE, Galaxy S9+) ──────────────────────────
   A ese ancho el botón de menú se salía 21px y provocaba scroll horizontal en
   cuatro páginas. `vp-touch` no lo cazaba porque empezaba a medir en 360. */
@media (max-width: 340px) {
  .headerin { gap: 10px; }
  .menu-toggle { padding: 7px 8px; font-size: 8px; letter-spacing: .04em; }
  .wordmark { font-size: 10px; letter-spacing: .16em; }
  .brand { gap: 9px; }
  .brand-logo { width: 38px !important; }
}
/* Los orbes son decoración: si se salen, que los recorte su sección en lugar
   de empujar la página. */
.hero, .section { overflow-x: clip; }

/* Saltar al contenido: quien navega con teclado o lector no tiene por qué
   pasar por el menú entero en cada página. Invisible hasta que recibe foco. */
.skip-link {
  position: fixed;
  z-index: 200;
  top: 0;
  left: 12px;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  font-weight: 600;
  border-radius: 0 0 10px 10px;
  transform: translateY(-110%);
  transition: transform .18s;
}
.skip-link:focus { transform: none; outline: 2px solid var(--atlantic); outline-offset: 2px; }

/* ── Financiación: página de conversión ──────────────────────────────────
   Aquí solo se viene a una cosa: que el visitante pida el estudio. Todo lo
   demás —calculadoras, explicaciones largas— se quitó porque competía con el
   botón. La regla es que el CTA se vea SIN hacer scroll. */
.fin-hero {
  /* Más compacto que un .pagehero normal: aquí el CTA tiene que caber en la
     primera pantalla, y el titular editorial ya ocupa lo suyo. Con el padding
     por defecto el botón caía a 864px y se salía de una ventana de 900. */
  padding: clamp(34px, 4.5vw, 62px) 0 clamp(34px, 5vw, 60px) !important;
  background: var(--paper);
  position: relative;
  overflow: clip;
}
.fin-hero::after {
  content: "";
  position: absolute;
  width: min(46vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--atlantic-soft);
  right: -10vw;
  top: -18%;
  z-index: 0;
  pointer-events: none;
}
.fin-hero .wrap { position: relative; z-index: 1; }
/* El h1 NO lleva estilo propio: la clase .pagehero le da el tratamiento
   editorial del resto del sitio (línea fina + línea negra, que reparte
   motion.js). Tenerlo aparte era la regresión: este título se veía distinto a
   todos los demás. Solo se ajusta el margen inferior. */
.fin-hero h1 {
  margin-top: 10px;
  margin-bottom: clamp(14px, 1.8vw, 22px);
  font-size: clamp(34px, 5.2vw, 68px);
  max-width: 18ch;
}
.fin-hero .fin-lede { margin-bottom: clamp(20px, 2.6vw, 30px); }
.fin-lede {
  font-size: clamp(16px, 1.7vw, 21px);
  line-height: 1.5;
  color: var(--muted);
  max-width: 56ch;
  margin: 0 0 clamp(26px, 4vw, 40px);
}

/* El botón: grande, con dos líneas —qué haces y qué te cuesta— y objetivo
   táctil holgado. Un `.btn` normal aquí se perdía entre los demás. */
.fin-acciones { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.fin-cta {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  padding: 18px 34px;
  background: var(--atlantic);
  color: #fff !important;
  border-radius: var(--radius);
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(95, 128, 117, .28);
  transition: transform .18s var(--ease, cubic-bezier(.16,1,.3,1)), box-shadow .18s, background .18s;
}
.fin-cta:hover { background: #4f6d63; transform: translateY(-2px); box-shadow: 0 16px 40px rgba(95,128,117,.36); }
.fin-cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.fin-cta__txt { font-size: 15px; font-weight: 600; letter-spacing: .01em; }
.fin-cta__sub { font-size: 11px; opacity: .82; letter-spacing: .06em; text-transform: uppercase; }
.fin-cta--claro { background: #fff; color: var(--ink) !important; box-shadow: 0 12px 34px rgba(6,9,8,.22); }
.fin-cta--claro:hover { background: #f3f1ec; }

.fin-alt {
  font-size: 13px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 12px 4px;   /* objetivo táctil, no solo la altura del texto */
}
.fin-alt:hover { color: var(--ink); }

.fin-cifras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(34px, 5vw, 56px);
  border-top: 1px solid var(--line);
}
.fin-cifras > div { padding: 18px 16px 0 0; border-right: 1px solid var(--line); }
.fin-cifras > div:last-child { border-right: 0; }
.fin-cifras strong { display: block; font-size: clamp(30px, 3.6vw, 48px); font-weight: 400; letter-spacing: -.035em; }
.fin-cifras small { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }

.fin-prueba {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.fin-razones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 44px);
}
.fin-razones b { display: block; font-size: clamp(17px, 1.8vw, 21px); font-weight: 500; margin-bottom: 8px; }
.fin-razones p { margin: 0; font-size: 14px; line-height: 1.55; }

.fin-cierre {
  background: var(--atlantic);
  color: #fff;
  padding: clamp(56px, 8vw, 100px) 0;
  text-align: center;
}
/* El titular del cierre va en el mismo sistema que el resto: lo parte
   motion.js en línea fina y línea negra. Aquí sobre verde, así que ambas en
   blanco; lo que cambia es el peso, no el color. */
.fin-cierre .head { display: block; margin-bottom: 14px; }
.fin-cierre h2 { margin: 0 0 14px; }
.fin-cierre h2 .t-ligero,
.fin-cierre h2 .t-solido { color: #fff; }
.fin-cierre p { margin: 0 auto clamp(26px, 4vw, 38px); max-width: 46ch; opacity: .92; }
.fin-cierre .fin-cta { margin-inline: auto; }

@media (max-width: 700px) {
  .fin-cifras { grid-template-columns: 1fr; }
  .fin-cifras > div { border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
  .fin-cifras > div:last-child { border-bottom: 0; }
  .fin-razones { grid-template-columns: 1fr; }
  .fin-acciones { flex-direction: column; align-items: stretch; }
  .fin-cta { align-items: center; }
  .fin-alt { text-align: center; }
}

/* ── El vídeo del hero en móvil ──────────────────────────────────────────
   Aquí se sirve un montaje VERTICAL propio (720x1280), reencuadrado plano a
   plano. Recortar el horizontal por el centro se comía la cala en unos planos
   y la montaña en otros; y dejarlo entero llenaba solo un tercio de la
   pantalla. Con material 9:16 real, cover lo deja a pantalla completa sin
   recorte apreciable.

   Se anulan explícitamente el aspect-ratio y la máscara que hicieron falta
   mientras aquí se servía un 16:9, para que no queden reglas huérfanas. */
@media (max-width: 820px) {
  .hero-video.active {
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
    -webkit-mask-image: none;
    mask-image: none;
  }
}


/* ── Legibilidad del titular sobre el vídeo vertical ─────────────────────
   Mientras el vídeo llenaba solo el tercio superior, el titular caía sobre el
   fondo oscuro del hero y se leía solo. Ahora ocupa toda la pantalla y queda
   sobre arena y agua clara: medido a lo largo del bucle, la franja de detrás
   llega a 180/255 de luminancia en tres de los cinco planos, y las letras son
   de colores pastel.

   Subir el velo hasta que el texto se leyera dejaba la mitad inferior casi
   negra, o sea el mismo problema de antes por otro camino. Así que el velo
   sube solo lo justo y el resto lo hace una sombra bajo el texto, que es
   local: protege las letras sin apagar la imagen. */
@media (max-width: 820px) {
  .hero .film:has(.hero-video.active)::after,
  .hero-static .hero .film::after {
    background:
      linear-gradient(to top,
        rgba(6, 9, 8, .86) 0%,
        rgba(6, 9, 8, .54) 34%,
        rgba(6, 9, 8, .30) 64%,
        rgba(6, 9, 8, .14) 100%);
  }
  .hero-video.active { filter: brightness(.78) saturate(1.05); }
  .hero h1,
  .hero .herocopy,
  .hero .eye { text-shadow: 0 2px 22px rgba(6, 9, 8, .62), 0 1px 3px rgba(6, 9, 8, .5); }
}

/* La firma del artículo, dentro de la línea de datos que ya existe (categoría ·
   fecha · lectura). Sin marcar en negrita: es información, no reclamo. */
.post-firma a { border-bottom: 1px solid currentColor; }
.post-firma a:hover { opacity: .65; }


/* ── El titular del artículo ─────────────────────────────────────────────
   Este h1 se diseñó para dos o tres palabras y funciona muy bien así. Con un
   titular importado de 91 caracteres ocupaba pantalla y media, en mayúsculas
   de 92 px, y era ilegible.

   Y había un fallo peor y menos evidente: con `line-height` por debajo de 1 y
   texto en mayúsculas, **las tildes de Á, Í, Ú y la virgulilla de la Ñ se
   solapan con la línea de arriba**. En "ESPAÑA" y "ÚLTIMOS" se veía recortado.
   La caja de la mayúscula acentuada es más alta que la de la mayúscula normal,
   y el interlineado apretado no le deja sitio.

   Se escala por longitud —la clase la pone nuevo-post.js al generar, así que
   no hace falta JavaScript en el navegador— y se da aire cuando hay acentos. */
.post-hero h1 {
  /* Sitio para las tildes de las mayúsculas, sin separar visiblemente las
     líneas: el ajuste va en el padding, no en el interlineado. */
  padding-top: .08em;
}
.post-hero h1.titular-largo {
  font-size: clamp(32px, 4.6vw, 62px);
  line-height: 1.02;
  letter-spacing: -.035em;
  max-width: 24ch;
}
.post-hero h1.titular-muy-largo {
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.08;
  letter-spacing: -.02em;
  max-width: 30ch;
  /* A este tamaño las mayúsculas ya no aportan carácter, solo estorban la
     lectura de una frase larga. */
  text-transform: none;
}