/* =============================================================
   ArriendoYa Inmobiliaria — Editorial cinético v3
   Base (Propuesta A): Playfair + Source Serif + Inter.
   .theme-b (Propuesta B): Space Grotesk + Inter, sharp, moderno.
   ============================================================= */

/* 1. Tokens */
:root{
  --bg:#ffffff; --bg-2:#f6f2ee; --paper:#ffffff;
  --ink:#101010; --ink-2:#181818; --ink-soft:#2c2c2c; --ink-mute:#6b6b6b;
  --ink-panel:#121212; --panel-text:#efe9e2; --mast-bg:rgba(255,255,255,.82); --mast-bg-stuck:rgba(255,255,255,.93);
  --accent:#c8102e; --accent-deep:#9e0b22; --accent-bright:#ff5d73; --accent-soft:rgba(200,16,46,.08);
  --line:rgba(20,20,20,.14); --line-2:rgba(20,20,20,.07); --line-strong:#101010;
  --serif-display:"Playfair Display", Georgia, serif;
  --serif-body:"Source Serif 4", Georgia, serif;
  --sans:"Inter", system-ui, -apple-system, sans-serif;
  --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-in:cubic-bezier(0.7,0,0.84,0); --ease-soft:cubic-bezier(0.22,0.61,0.36,1);
  --gutter:clamp(1.2rem,4vw,4.5rem); --maxw:1280px; --nav-h:74px; --radius:2px;
}

/* 2. Reset */
*,*::before,*::after{ box-sizing:border-box; margin:0; }
html{ -webkit-text-size-adjust:100%; tab-size:2; overflow-x:clip; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px); }
body{ font-family:var(--serif-body); font-size:17px; line-height:1.65; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; overscroll-behavior-y:none; }
img,svg,video{ display:block; max-width:100%; } img{ height:auto; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
a{ color:inherit; text-decoration:none; } p{ text-wrap:pretty; } ul{ list-style:none; padding:0; }
html, body{ transition:background-color .4s var(--ease-out), color .4s var(--ease-out); }
h1,h2,h3,h4{ font-family:var(--serif-display); font-weight:700; line-height:1.03; letter-spacing:-0.018em; text-wrap:balance; color:var(--ink); }
h1 em,h2 em,h3 em{ font-style:italic; font-weight:700; }
::selection{ background:var(--accent); color:#fff; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }

/* 3. Utilities */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.container-narrow{ max-width:780px; }
.section{ padding-block:clamp(4rem,9vw,8.5rem); position:relative; }
.section--alt{ background:var(--bg-2); }
.section--paperlines{ background:var(--bg-2) repeating-linear-gradient(to bottom,transparent 0,transparent 2.6rem,var(--line-2) 2.6rem,var(--line-2) calc(2.6rem + 1px)); }
.section--ink{ background:var(--ink-panel); color:var(--panel-text); }
.section--ink h1,.section--ink h2,.section--ink h3{ color:#fff; }
.section--ink .kicker, .section--ink .sec-index{ color:var(--accent-bright); }
.section--ink::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{ position:fixed; top:-100px; left:1rem; z-index:9999; padding:.6rem 1rem; background:var(--ink-panel); color:#fff; font-family:var(--sans); font-weight:600; border-radius:8px; }
.skip-link:focus{ top:1rem; }

/* 4. Type atoms */
.kicker{ font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:.7rem; }
.kicker::before{ content:""; width:2rem; height:2px; background:currentColor; display:inline-block; }
.kicker--plain::before{ display:none; }
.lede{ font-family:var(--serif-body); font-size:clamp(1.12rem,1.9vw,1.45rem); line-height:1.55; color:var(--ink-soft); }
.section--ink .lede{ color:rgba(255,255,255,.82); }
.eyebrow-num{ font-family:var(--serif-display); font-weight:700; font-size:clamp(2.2rem,5vw,3.4rem); color:var(--accent); line-height:1; }
.dropcap::first-letter{ font-family:var(--serif-display); font-weight:700; float:left; font-size:4.8rem; line-height:.8; padding:.28rem .55rem .05rem 0; color:var(--accent); }
.pull-quote{ font-family:var(--serif-display); font-style:italic; font-weight:700; font-size:clamp(1.7rem,3.6vw,2.7rem); line-height:1.22; color:var(--ink); position:relative; padding-left:clamp(1.2rem,3vw,2.2rem); margin-block:1.6rem; }
.pull-quote::before{ content:"\201C"; position:absolute; left:-.1em; top:-.35em; font-size:3.2em; line-height:1; color:var(--accent); opacity:.18; font-family:var(--serif-display); }
.text-accent{ color:var(--accent); }

/* 5. Buttons */
.btn{ font-family:var(--sans); font-weight:600; font-size:.94rem; letter-spacing:.01em; display:inline-flex; align-items:center; gap:.6rem; padding:.92rem 1.6rem; border-radius:var(--radius); transition:background .35s var(--ease-out),color .35s var(--ease-out),transform .35s var(--ease-out),border-color .35s var(--ease-out),box-shadow .35s var(--ease-out); cursor:pointer; white-space:nowrap; }
.btn:hover{ transform:translateY(-3px); } .btn:active{ transform:translateY(-1px); }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 10px 26px -16px rgba(200,16,46,.9); }
.btn-primary:hover{ background:var(--accent-deep); box-shadow:0 18px 40px -16px rgba(200,16,46,.95); }
.btn-ghost{ border:1px solid var(--ink); color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--bg); }
.section--ink .btn-ghost{ border-color:rgba(255,255,255,.55); color:#fff; }
.section--ink .btn-ghost:hover{ background:#fff; color:var(--ink); }
.btn--light{ border:1px solid rgba(255,255,255,.5); color:#fff; }
.btn--light:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn--wa{ background:var(--accent); color:#fff; } .btn--wa:hover{ background:var(--accent-deep); }
.btn-link{ font-family:var(--sans); font-weight:600; font-size:.92rem; color:inherit; display:inline-flex; align-items:center; gap:.45rem; position:relative; }
.btn-link::after{ content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1.5px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease-out); }
.btn-link:hover::after{ transform:scaleX(1); }
.btn-link .arrow{ transition:transform .4s var(--ease-out); display:inline-block; }
.btn-link:hover .arrow{ transform:translateX(5px); }

/* 6. Badges */
.badges{ display:flex; flex-wrap:wrap; gap:.55rem; }
.badge{ font-family:var(--sans); font-size:.78rem; font-weight:500; letter-spacing:.02em; color:var(--ink-soft); display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .9rem; border:1px solid var(--line); border-radius:2rem; background:var(--paper); transition:border-color .3s var(--ease-out),transform .3s var(--ease-out); }
.badge:hover{ border-color:var(--accent); transform:translateY(-2px); }
.badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; }

/* 7. Masthead */
.masthead{ position:sticky; top:0; z-index:200; background:var(--mast-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:3px solid var(--accent); border-bottom:1px solid transparent; transition:border-color .35s var(--ease-out),box-shadow .35s var(--ease-out),background .35s var(--ease-out); }
.masthead.is-stuck{ border-bottom-color:var(--line); box-shadow:0 10px 34px -24px rgba(20,20,20,.55); background:var(--mast-bg-stuck); }
.masthead-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:var(--nav-h); }
.brand{ font-family:var(--serif-display); font-weight:800; font-size:1.6rem; letter-spacing:-0.02em; color:var(--ink); line-height:1; }
.brand .ya{ color:var(--accent); }
.nav{ display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.2rem); font-family:var(--sans); }
.nav a{ font-size:.92rem; font-weight:500; color:var(--ink-soft); position:relative; padding-block:.4rem; transition:color .25s var(--ease-out); }
.nav a:not(.btn)::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1.5px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease-out); }
.nav a:hover{ color:var(--ink); }
.nav a:not(.btn):hover::after,.nav a[aria-current="page"]:not(.btn)::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--ink); }
.nav-wa{ display:inline-flex; } .nav-wa .btn{ color:#fff; }
.nav-toggle{ display:none; width:44px; height:44px; align-items:center; justify-content:center; }
.nav-toggle span{ position:relative; width:22px; height:2px; background:var(--ink); transition:background .2s; }
.nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:22px; height:2px; background:var(--ink); transition:transform .3s var(--ease-out); }
.nav-toggle span::before{ top:-7px; } .nav-toggle span::after{ top:7px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-7px) rotate(-45deg); }

/* 8. Hero */
.hero{ padding-top:clamp(2rem,4vw,3.5rem); padding-bottom:clamp(3rem,6vw,5.5rem); overflow:clip; }
.hero-grid{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,4vw,3.4rem); align-items:center; }
.hero-copy{ display:flex; flex-direction:column; gap:1.35rem; align-items:flex-start; }
.hero-meta{ font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute); display:flex; flex-wrap:wrap; gap:.4rem 1rem; }
.hero-meta b{ color:var(--accent); font-weight:600; }
.section--ink .hero-meta{ color:rgba(255,255,255,.6); } .section--ink .hero-meta b{ color:var(--accent-bright); }
.hero-title{ font-family:var(--serif-display); font-weight:700; font-size:clamp(2.8rem,7.4vw,6rem); line-height:.99; letter-spacing:-0.026em; text-wrap:balance; max-width:15ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; }
.hero-figure{ position:relative; isolation:isolate; }
.hero-figure::before{ content:""; position:absolute; z-index:-1; right:-18px; bottom:-18px; width:62%; height:72%; background:var(--accent); }
.hero-figure .frame{ position:relative; overflow:hidden; border:1px solid var(--line-strong); display:block; }
.hero-figure img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; filter:saturate(.97) contrast(1.03); display:block; }
.hero-figure .tag{ position:absolute; left:0; bottom:0; z-index:2; background:var(--accent); color:#fff; font-family:var(--sans); font-weight:600; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; padding:.55rem 1rem; }
.side-label{ display:none; }
.scroll-cue{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--sans); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); margin-top:.4rem; }
.scroll-cue i{ width:1px; height:30px; background:var(--ink-mute); position:relative; overflow:hidden; display:inline-block; }
.scroll-cue i::after{ content:""; position:absolute; inset:0; background:var(--accent); transform:translateY(-100%); animation:cue 1.9s var(--ease-soft) infinite; }
@keyframes cue{ 0%{ transform:translateY(-100%);} 55%,100%{ transform:translateY(100%);} }

/* 9. Section heads */
.sec-head{ display:flex; flex-direction:column; gap:1rem; max-width:66ch; margin-bottom:clamp(2.2rem,4.5vw,3.4rem); }
.sec-head.center{ text-align:center; align-items:center; margin-inline:auto; }
.sec-head h2{ font-size:clamp(2.1rem,5vw,3.6rem); }
.sec-index{ font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); }

/* 10. Stats */
.stats{ display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--line); }
.section--ink .stats{ border-top-color:rgba(255,255,255,.16); }
.stat{ padding:clamp(1.6rem,3vw,2.4rem) 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:.4rem; }
.section--ink .stat{ border-bottom-color:rgba(255,255,255,.16); }
.stat-num{ font-family:var(--serif-display); font-weight:700; font-size:clamp(3rem,8vw,5.5rem); line-height:.9; color:var(--ink); letter-spacing:-0.03em; }
.section--ink .stat-num{ color:#fff; }
.stat-label{ font-family:var(--sans); font-size:.92rem; color:var(--ink-mute); max-width:30ch; }
.section--ink .stat-label{ color:rgba(255,255,255,.66); }

/* 11. Cards */
.grid-3{ display:grid; gap:1.1rem; grid-template-columns:1fr; }
.grid-2{ display:grid; gap:1.1rem; grid-template-columns:1fr; }
.card{ background:var(--paper); border:1px solid var(--line); padding:clamp(1.5rem,2.8vw,2.1rem); display:flex; flex-direction:column; gap:.6rem; height:100%; position:relative; overflow:hidden; transition:transform .3s var(--ease-out),box-shadow .45s var(--ease-out),border-color .45s var(--ease-out); will-change:transform; }
.card::before{ content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-out); }
.card:hover{ box-shadow:0 30px 60px -38px rgba(20,20,20,.55); border-color:rgba(20,20,20,.25); }
.card:hover::before{ transform:scaleX(1); }
.card .eyebrow-num{ font-size:2.2rem; color:var(--line); transition:color .45s var(--ease-out); }
.card:hover .eyebrow-num{ color:var(--accent); }
.card h3{ font-size:1.34rem; } .card p{ color:var(--ink-mute); font-size:.98rem; line-height:1.55; }
.rule{ height:1px; background:var(--line); border:0; }

/* 12. Manifesto / sticky services */
.manifesto{ display:grid; gap:clamp(1.6rem,3vw,3rem); grid-template-columns:1fr; }
.manifesto .lead-col p{ font-size:clamp(1.12rem,1.9vw,1.4rem); line-height:1.62; color:var(--ink-soft); margin-bottom:1rem; }
.sticky-list{ display:grid; grid-template-columns:1fr; gap:1.5rem; }
.sticky-head{ align-self:start; }
.sticky-items{ display:flex; flex-direction:column; }
.sticky-item{ display:grid; grid-template-columns:auto 1fr; gap:1.2rem; padding:1.6rem 0; border-top:1px solid var(--line); align-items:baseline; transition:padding-left .35s var(--ease-out); }
.sticky-item:last-child{ border-bottom:1px solid var(--line); }
.sticky-item:hover{ padding-left:.6rem; }
.sticky-item .n{ font-family:var(--serif-display); font-size:1.4rem; color:var(--accent); }
.sticky-item h3{ font-size:clamp(1.4rem,2.6vw,2rem); }
.sticky-item p{ color:var(--ink-mute); margin-top:.35rem; }

/* 13. Dual CTA */
.dual{ display:grid; gap:1.1rem; grid-template-columns:1fr; }
.dual-panel{ border:1px solid var(--line); padding:clamp(1.8rem,3.6vw,2.8rem); display:flex; flex-direction:column; gap:1rem; align-items:flex-start; background:var(--paper); position:relative; overflow:hidden; transition:transform .3s var(--ease-out),box-shadow .45s var(--ease-out); will-change:transform; }
.dual-panel:hover{ box-shadow:0 34px 64px -40px rgba(20,20,20,.5); }
.dual-panel--ink{ background:var(--ink-panel); color:var(--panel-text); border-color:var(--ink-panel); }
.dual-panel--ink h3{ color:#fff; } .dual-panel--ink p{ color:rgba(255,255,255,.78); }
.dual-panel h3{ font-size:clamp(1.6rem,3vw,2.2rem); } .dual-panel p{ color:var(--ink-mute); }

/* 14. City cards (cobertura) */
.city-grid{ display:grid; gap:1rem; grid-template-columns:1fr; }
.city-card{ position:relative; display:block; aspect-ratio:4/5; overflow:hidden; isolation:isolate; border:1px solid rgba(255,255,255,.14); will-change:transform; transition:transform .3s var(--ease-out); }
.city-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.03); transition:transform .9s var(--ease-out); z-index:-2; }
.city-card:hover img{ transform:scale(1.12); }
.city-card::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top,rgba(8,8,8,.94) 2%,rgba(8,8,8,.34) 46%,rgba(8,8,8,.08) 100%); transition:background .5s var(--ease-out); }
.city-card:hover::after{ background:linear-gradient(to top,rgba(158,11,34,.78) 2%,rgba(8,8,8,.5) 52%,rgba(8,8,8,.12) 100%); }
.city-card__meta{ position:absolute; right:1.1rem; top:1rem; color:#fff; font-family:var(--sans); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; opacity:.82; }
.city-card__name{ position:absolute; left:1.2rem; bottom:2.5rem; color:#fff; font-family:var(--serif-display); font-weight:700; font-size:clamp(1.7rem,3.2vw,2.3rem); }
.city-card__go{ position:absolute; left:1.2rem; bottom:1.2rem; color:#fff; font-family:var(--sans); font-size:.82rem; letter-spacing:.06em; display:inline-flex; gap:.4rem; opacity:0; transform:translateY(8px); transition:opacity .4s var(--ease-out),transform .4s var(--ease-out); }
.city-card:hover .city-card__go{ opacity:.96; transform:none; }

/* 15. Service rows / steps / portal / form / contact */
.service-row{ display:grid; gap:1rem 2.4rem; grid-template-columns:1fr; padding-block:clamp(2.2rem,4.5vw,3.4rem); border-top:1px solid var(--line); align-items:start; }
.service-row h3{ font-size:clamp(1.7rem,3.2vw,2.4rem); }
.service-row .bullets{ display:flex; flex-direction:column; gap:.5rem; margin-top:1rem; }
.service-row .bullets li{ position:relative; padding-left:1.4rem; color:var(--ink-soft); }
.service-row .bullets li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; background:var(--accent); border-radius:50%; }
.steps{ display:grid; gap:1.1rem; grid-template-columns:1fr; }
.step{ display:flex; gap:1.3rem; padding:1.5rem 0; border-top:1px solid var(--line); }
.step .eyebrow-num{ flex:none; } .step h3{ font-size:1.32rem; margin-bottom:.3rem; } .step p{ color:var(--ink-mute); }
.portal-card{ display:flex; flex-direction:column; gap:.6rem; border:1px solid var(--line); background:var(--paper); padding:clamp(1.5rem,2.8vw,2rem); position:relative; overflow:hidden; transition:transform .3s var(--ease-out),box-shadow .45s var(--ease-out),border-color .45s; will-change:transform; }
.portal-card::before{ content:""; position:absolute; top:0; left:0; width:3px; height:100%; background:var(--accent); transform:scaleY(0); transform-origin:top; transition:transform .5s var(--ease-out); }
.portal-card:hover{ box-shadow:0 30px 60px -40px rgba(20,20,20,.5); border-color:rgba(20,20,20,.25); }
.portal-card:hover::before{ transform:scaleY(1); }
.portal-card .city{ font-family:var(--serif-display); font-size:1.55rem; font-weight:700; }
.portal-card .meta{ font-family:var(--sans); font-size:.78rem; letter-spacing:.16em; color:var(--accent); text-transform:uppercase; }
.portal-card .go{ margin-top:auto; }
.form{ display:grid; gap:1rem; grid-template-columns:1fr; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field label{ font-family:var(--sans); font-size:.8rem; font-weight:600; letter-spacing:.06em; color:var(--ink-soft); text-transform:uppercase; }
.field input,.field select{ font-family:var(--serif-body); font-size:1rem; padding:.85rem .95rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); color:var(--ink); transition:border-color .25s var(--ease-out); }
.field input:focus,.field select:focus{ outline:none; border-color:var(--accent); }
.form-msg{ font-family:var(--sans); font-size:.95rem; color:var(--accent-deep); min-height:1.2em; }
.form.is-sent .form-body{ opacity:.5; pointer-events:none; }
.contact-list{ display:flex; flex-direction:column; gap:1.1rem; }
.contact-item{ display:flex; flex-direction:column; gap:.15rem; padding-bottom:1.1rem; border-bottom:1px solid var(--line); }
.contact-item .label{ font-family:var(--sans); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.contact-item .value{ font-family:var(--serif-display); font-size:1.35rem; color:var(--ink); }
.contact-item a.value:hover{ color:var(--accent); }

/* 16. WhatsApp QR modal + FAB */
.wa-modal{ border:0; padding:0; background:transparent; color:var(--ink); position:fixed; inset:0; margin:auto; width:min(92vw,430px); height:max-content; max-height:90vh; }
.wa-modal::backdrop{ background:rgba(8,8,8,.62); backdrop-filter:blur(4px); }
.wa-modal__card{ background:var(--paper); border:1px solid var(--line); padding:clamp(1.8rem,4vw,2.6rem); text-align:center; position:relative; display:flex; flex-direction:column; gap:1rem; align-items:center; max-height:90vh; overflow:auto; }
.wa-modal__close{ position:absolute; top:.5rem; right:.6rem; font-size:1.7rem; line-height:1; color:var(--ink-mute); width:42px; height:42px; }
.wa-modal__close:hover{ color:var(--accent); }
.wa-modal h3{ font-size:1.6rem; }
.wa-modal__desc{ color:var(--ink-mute); font-size:.96rem; max-width:34ch; }
.wa-modal__qr{ border:1px solid var(--line); padding:.85rem; background:#fff; }
.wa-modal__qr img{ width:200px; height:200px; }
.wa-modal__num{ font-family:var(--sans); font-weight:600; color:var(--ink); letter-spacing:.02em; }
.wa-modal[open]{ animation:waIn .35s var(--ease-out); }
@keyframes waIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } }
.wa-fab{ position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:240; width:60px; height:60px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 16px 36px -10px rgba(200,16,46,.7); transition:transform .3s var(--ease-out),background .3s; }
.wa-fab:hover{ transform:translateY(-4px) scale(1.06); background:var(--accent-deep); }
.wa-fab svg{ width:30px; height:30px; fill:#fff; }

/* 17. Footer */
.footer{ background:var(--ink-panel); color:#cfc9c1; padding-block:clamp(3.2rem,6vw,5rem); position:relative; }
.footer a{ color:#cfc9c1; transition:color .25s; } .footer a:hover{ color:#fff; }
.footer-grid{ display:grid; gap:2rem; grid-template-columns:1fr; }
.footer .brand{ color:#fff; font-size:1.8rem; }
.footer h4{ font-family:var(--sans); font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#8d8780; margin-bottom:.9rem; }
.footer ul{ display:flex; flex-direction:column; gap:.5rem; font-family:var(--sans); font-size:.94rem; }
.footer .socials{ flex-direction:row; gap:1rem; }
.footer-bottom{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.14); display:flex; flex-wrap:wrap; gap:.8rem 1.5rem; justify-content:space-between; align-items:center; font-family:var(--sans); font-size:.8rem; color:#8d8780; }
.footer-credits a{ color:#cfc9c1; } .footer-credits a:hover{ color:#fff; }

/* 18. Reveal / motion */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease-out),transform .9s var(--ease-out); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-split]{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.09s; } .reveal.d2{ transition-delay:.18s; } .reveal.d3{ transition-delay:.27s; } .reveal.d4{ transition-delay:.36s; } .reveal.d5{ transition-delay:.45s; }
.reveal--scale{ transform:scale(.9); } .reveal--scale.is-visible{ transform:none; }
.reveal--left{ transform:translateX(-44px); } .reveal--left.is-visible{ transform:none; }
.reveal--right{ transform:translateX(44px); } .reveal--right.is-visible{ transform:none; }
.reveal--clip{ opacity:1; transform:none; clip-path:inset(0 100% 0 0); transition:clip-path 1.05s var(--ease-out); } .reveal--clip.is-visible{ clip-path:inset(0 0 0 0); }
.hero .reveal{ opacity:1; transform:none; clip-path:none; }
@media (prefers-reduced-motion: no-preference){
  .hero-copy > *{ animation:heroUp 1s var(--ease-out) backwards; }
  .hero-copy > *:nth-child(1){ animation-delay:.05s; } .hero-copy > *:nth-child(2){ animation-delay:.16s; }
  .hero-copy > *:nth-child(3){ animation-delay:.27s; } .hero-copy > *:nth-child(4){ animation-delay:.38s; }
  .hero-copy > *:nth-child(5){ animation-delay:.49s; } .hero-copy > *:nth-child(6){ animation-delay:.6s; }
  .hero-figure{ animation:heroFig 1.2s var(--ease-out) .15s backwards; }
  .hero-figure .frame{ animation:figClip 1.3s var(--ease-soft) .2s backwards; }
}
@keyframes heroUp{ from{ opacity:0; transform:translateY(26px); } }
@keyframes heroFig{ from{ opacity:0; transform:translateY(30px) scale(.98); } }
@keyframes figClip{ from{ clip-path:inset(0 0 100% 0); } to{ clip-path:inset(0 0 0 0); } }
.progress{ position:fixed; top:0; left:0; height:3px; width:0%; background:var(--accent); z-index:300; transition:width .1s linear; pointer-events:none; }
@view-transition{ navigation:auto; }
::view-transition-old(root),::view-transition-new(root){ animation-duration:.5s; animation-timing-function:cubic-bezier(0.16,1,0.3,1); }
::view-transition-old(root){ animation-name:vtOut; } ::view-transition-new(root){ animation-name:vtIn; }
@keyframes vtOut{ to{ opacity:0; transform:translateY(-10px); } } @keyframes vtIn{ from{ opacity:0; transform:translateY(10px); } }

/* 19. Responsive */
@media (min-width:540px){
  .grid-2{ grid-template-columns:repeat(2,1fr); }
  .form{ grid-template-columns:repeat(2,1fr); } .field--full{ grid-column:1/-1; }
  .stats{ grid-template-columns:repeat(2,1fr); column-gap:2.5rem; }
  .city-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:720px){
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .dual{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); column-gap:2.5rem; }
  .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; }
  .service-row{ grid-template-columns:.7fr 1.3fr; }
}
@media (min-width:960px){
  .grid-3{ grid-template-columns:repeat(3,1fr); }
  .stats{ grid-template-columns:repeat(4,1fr); }
  .city-grid{ grid-template-columns:repeat(3,1fr); }
  .hero-grid{ grid-template-columns:1.12fr .88fr; }
  .manifesto{ grid-template-columns:1.1fr .9fr; }
  .footer-grid{ grid-template-columns:1.6fr 1fr 1fr 1fr; }
  .sticky-list{ grid-template-columns:.85fr 1.15fr; gap:3rem; }
  .sticky-head{ position:sticky; top:calc(var(--nav-h) + 2rem); }
  .hero-figure .side-label{ display:flex; position:absolute; top:0; left:-2.6rem; writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-mute); gap:1rem; align-items:center; height:100%; }
}
@media (max-width:860px){
  .nav-toggle{ display:inline-flex; }
  .nav{ position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:flex-start; gap:0; background:var(--bg); border-bottom:1px solid var(--line); padding:.5rem var(--gutter) 1.4rem; transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity .3s var(--ease-out),transform .3s var(--ease-out); max-height:calc(100dvh - var(--nav-h)); overflow-y:auto; }
  .nav.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav a{ width:100%; padding:.95rem 0; border-bottom:1px solid var(--line); font-size:1.05rem; }
  .nav a:not(.btn)::after{ display:none; }
  .nav-wa{ margin-top:1rem; } .nav-wa .btn{ width:100%; justify-content:center; }
}

/* 20. Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; clip-path:none; transition:none; }
  .scroll-cue i::after{ animation:none; }
}

/* =============================================================
   21. THEME B — Propuesta moderna (Space Grotesk, sans, sharp)
   ============================================================= */
.theme-b{
  --serif-display:"Space Grotesk", system-ui, sans-serif;
  --serif-body:"Inter", system-ui, sans-serif;
  --bg-2:#f2f0ee;
  --radius:0px;
}
.theme-b body, .theme-b{ letter-spacing:-0.005em; }
.theme-b h1,.theme-b h2,.theme-b h3,.theme-b h4{ letter-spacing:-0.035em; font-weight:700; }
.theme-b .hero-title{ letter-spacing:-0.05em; font-weight:700; line-height:.95; }
.theme-b .brand{ letter-spacing:-0.05em; }
.theme-b h1 em,.theme-b h2 em,.theme-b h3 em{ font-style:normal; color:var(--accent); }
.theme-b .pull-quote{ font-style:normal; }
.theme-b .dropcap::first-letter{ font-style:normal; }
.theme-b .card,.theme-b .portal-card,.theme-b .dual-panel,.theme-b .badge,.theme-b .btn,.theme-b .field input,.theme-b .field select,.theme-b .hero-figure .frame,.theme-b .city-card,.theme-b .wa-modal__card,.theme-b .wa-modal__qr{ border-radius:0; }
.theme-b .wa-fab{ border-radius:0; }
.theme-b .badge{ border-radius:0; }
.theme-b .kicker{ letter-spacing:.2em; }
.theme-b .stat-num{ letter-spacing:-0.05em; }
.theme-b .eyebrow-num,.theme-b .sticky-item .n,.theme-b .city-card__name{ font-weight:700; }
.theme-b .masthead{ border-top-width:5px; }
.theme-b .hero-figure::before{ background:var(--ink); right:-14px; bottom:-14px; }
.theme-b .hero-meta b{ color:var(--accent); }
.theme-b .sec-index{ background:var(--accent); color:#fff; padding:.3rem .6rem; }
.theme-b .section--ink .sec-index{ background:var(--accent); color:#fff; }
.theme-b .tag{ font-weight:700; }
.theme-b .badge::before{ border-radius:0; }
@media (min-width:960px){
  .theme-b .hero-grid{ grid-template-columns:.92fr 1.08fr; }
  .theme-b .hero-figure{ order:-1; }
  .theme-b .hero-figure .side-label{ left:auto; right:-2.6rem; transform:rotate(0deg); }
}

/* =============================================================
   22. Theme toggle, buscador Finca Raíz, modal WA opciones
   ============================================================= */
.theme-toggle{ width:42px; height:42px; border:1px solid var(--line); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:var(--ink); transition:border-color .25s var(--ease-out),transform .25s var(--ease-out),background .25s; flex:none; }
.theme-toggle:hover{ border-color:var(--accent); transform:translateY(-2px); }
.theme-toggle svg{ width:18px; height:18px; fill:currentColor; }
.theme-toggle .i-sun{ display:none; }
html[data-theme="dark"] .theme-toggle .i-moon{ display:none; }
html[data-theme="dark"] .theme-toggle .i-sun{ display:inline-flex; }
.theme-b .theme-toggle{ border-radius:0; }
@media (max-width:860px){ .theme-toggle{ width:100%; border-radius:6px; gap:.6rem; margin-top:.6rem; } .theme-b .theme-toggle{ border-radius:0; } .theme-toggle::after{ content:"Modo claro / oscuro"; font-family:var(--sans); font-size:.95rem; font-weight:500; } }

/* Buscador Finca Raíz */
.finca{ display:flex; flex-direction:column; gap:1.2rem; background:var(--paper); border:1px solid var(--line); padding:clamp(1.5rem,3.4vw,2.2rem); }
.finca__row{ display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:720px){ .finca__row{ grid-template-columns:repeat(3,1fr); } }
.finca .field select{ width:100%; cursor:pointer; }
.finca__actions{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }
.finca__preview{ font-family:var(--sans); font-size:.82rem; color:var(--ink-mute); word-break:break-all; }
.finca__preview b{ color:var(--accent); font-weight:600; }

/* Modal WA: dos opciones */
.wa-modal__opts{ display:flex; flex-direction:column; gap:.6rem; width:100%; }
.wa-modal__or{ font-family:var(--sans); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); display:flex; align-items:center; gap:.8rem; }
.wa-modal__or::before,.wa-modal__or::after{ content:""; flex:1; height:1px; background:var(--line); }
.wa-modal .btn{ width:100%; justify-content:center; }
.wa-modal__hint{ font-family:var(--sans); font-size:.82rem; color:var(--ink-mute); }

/* =============================================================
   23. DARK MODE
   ============================================================= */
html[data-theme="dark"]{
  --bg:#111111; --bg-2:#181818; --paper:#1c1c1c;
  --ink:#f1ece4; --ink-2:#e8e2d8; --ink-soft:#d6d0c6; --ink-mute:#9a948b;
  --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.055); --line-strong:#e8e2d8;
  --ink-panel:#000000; --panel-text:#efe9e2;
  --mast-bg:rgba(17,17,17,.82); --mast-bg-stuck:rgba(17,17,17,.94);
  --accent-soft:rgba(255,93,115,.12);
}
html[data-theme="dark"] body{ background:var(--bg); color:var(--ink); }
html[data-theme="dark"] .badge{ background:#202020; }
html[data-theme="dark"] .field input, html[data-theme="dark"] .field select{ background:#202020; color:var(--ink); }
html[data-theme="dark"] .card:hover{ box-shadow:0 30px 60px -34px rgba(0,0,0,.8); }
html[data-theme="dark"] .dual-panel:hover, html[data-theme="dark"] .portal-card:hover{ box-shadow:0 34px 64px -36px rgba(0,0,0,.8); }
html[data-theme="dark"] .masthead.is-stuck{ box-shadow:0 10px 34px -22px rgba(0,0,0,.85); }
html[data-theme="dark"] .hero-figure img{ filter:saturate(.95) contrast(1.02) brightness(.95); }
html[data-theme="dark"] .wa-modal__qr{ background:#fff; }
html[data-theme="dark"]::selection, html[data-theme="dark"] ::selection{ background:var(--accent); color:#fff; }

/* =============================================================
   24. Formulario de asesoría (busca) — textarea + estado enviado
   ============================================================= */
.field textarea{ font-family:var(--serif-body); font-size:1rem; padding:.85rem .95rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); color:var(--ink); min-height:96px; resize:vertical; line-height:1.5; transition:border-color .25s var(--ease-out); }
.field textarea:focus{ outline:none; border-color:var(--accent); }
html[data-theme="dark"] .field textarea{ background:#202020; color:var(--ink); }
.finca__body{ display:flex; flex-direction:column; gap:1.1rem; }
.finca__success{ display:none; text-align:center; padding:1rem 0; }
.finca.is-sent .finca__body{ display:none; }
.finca.is-sent .finca__success{ display:block; animation:waIn .4s var(--ease-out); }
.finca__success .ok-badge{ display:inline-flex; align-items:center; gap:.5rem; color:var(--accent); font-family:var(--sans); font-weight:600; letter-spacing:.04em; }
.finca__success h3{ font-size:clamp(1.4rem,3vw,2rem); margin-top:.6rem; }

/* =============================================================
   25. Tarjetas de oferta (venta roja / arriendo hover-rojo) + form limpio
   ============================================================= */
.offer-grid{ display:grid; gap:1.1rem; grid-template-columns:1fr; }
@media (min-width:720px){ .offer-grid{ grid-template-columns:1fr 1fr; } }
.offer-card{ display:flex; flex-direction:column; gap:.7rem; min-height:240px; padding:clamp(1.8rem,3.6vw,2.6rem); border:1px solid var(--line); background:var(--paper); color:var(--ink); position:relative; overflow:hidden; will-change:transform;
  transition:background .45s var(--ease-out), color .45s var(--ease-out), transform .4s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s var(--ease-out); }
.offer-card__meta{ font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); transition:color .45s var(--ease-out); }
.offer-card__title{ font-size:clamp(1.6rem,3vw,2.2rem); transition:color .45s var(--ease-out); }
.offer-card p{ color:var(--ink-mute); transition:color .45s var(--ease-out); }
.offer-card__go{ margin-top:auto; font-family:var(--sans); font-weight:600; font-size:.95rem; display:inline-flex; align-items:center; gap:.5rem; transition:color .45s var(--ease-out); }
.offer-card__go .arrow{ transition:transform .4s var(--ease-out); }
.offer-card:hover .offer-card__go .arrow{ transform:translateX(5px); }

/* ESTADO ROJO: la tarjeta de venta por defecto, y CUALQUIER tarjeta al hover */
.offer-card--red, .offer-card:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.offer-card--red{ box-shadow:0 20px 46px -30px rgba(200,16,46,.55); }
.offer-card:hover{ transform:translateY(-6px); box-shadow:0 32px 64px -34px rgba(200,16,46,.6); }
.offer-card--red:hover{ background:var(--accent-deep); border-color:var(--accent-deep); box-shadow:0 34px 66px -32px rgba(158,11,34,.7); }
.offer-card--red .offer-card__title, .offer-card:hover .offer-card__title{ color:#fff; }            /* título grande SIEMPRE blanco en rojo */
.offer-card--red .offer-card__meta, .offer-card:hover .offer-card__meta{ color:#141414; }          /* "En venta/arriendo" en negro */
.offer-card--red p, .offer-card:hover p{ color:rgba(255,255,255,.92); }
.offer-card--red .offer-card__go, .offer-card:hover .offer-card__go{ color:#fff; }

/* Al pasar el mouse por una, la OTRA vuelve al formato fondo blanco */
.offer-grid:hover .offer-card:not(:hover){ background:var(--paper); color:var(--ink); border-color:var(--line); box-shadow:none; transform:none; }
.offer-grid:hover .offer-card:not(:hover) .offer-card__title{ color:var(--ink); }
.offer-grid:hover .offer-card:not(:hover) .offer-card__meta{ color:var(--accent); }
.offer-grid:hover .offer-card:not(:hover) p{ color:var(--ink-mute); }
.offer-grid:hover .offer-card:not(:hover) .offer-card__go{ color:var(--ink); }

/* Formulario de asesoría — grid limpio */
.finca{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.6rem,4vw,2.8rem); }
.finca__grid{ display:grid; gap:1.1rem; grid-template-columns:1fr; }
@media (min-width:600px){ .finca__grid{ grid-template-columns:1fr 1fr; } }
.finca__grid .field--full{ grid-column:1 / -1; }
.finca__actions{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-top:1.5rem; }
.finca__actions .btn{ flex:none; }
.finca__preview{ font-family:var(--sans); font-size:.86rem; color:var(--ink-mute); }

/* =============================================================
   26. Página de contacto (moderna) — info + mapa Google
   ============================================================= */
.contact-layout{ display:grid; gap:clamp(1.6rem,4vw,3rem); grid-template-columns:1fr; align-items:start; }
@media (min-width:860px){ .contact-layout{ grid-template-columns:1fr 1.15fr; } }
.contact-cards{ display:flex; flex-direction:column; gap:.8rem; margin-top:1.4rem; }
.contact-card{ display:block; border:1px solid var(--line); background:var(--paper); padding:1.05rem 1.3rem; transition:border-color .3s var(--ease-out), transform .3s var(--ease-out), box-shadow .35s var(--ease-out); }
a.contact-card:hover{ border-color:var(--accent); transform:translateY(-3px); box-shadow:0 20px 42px -28px rgba(20,20,20,.45); }
.contact-card .label{ font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); display:block; }
.contact-card .value{ font-family:var(--serif-display); font-size:clamp(1.15rem,2vw,1.35rem); color:var(--ink); display:block; margin-top:.15rem; }
.contact-socials{ display:flex; gap:1.3rem; margin-top:1.5rem; }
.contact-map{ display:flex; flex-direction:column; gap:1rem; }
.contact-map iframe{ width:100%; height:clamp(300px,42vw,470px); border:1px solid var(--line); display:block; filter:grayscale(.15) contrast(1.02); }
html[data-theme="dark"] .contact-map iframe{ filter:grayscale(.3) invert(.9) hue-rotate(180deg) contrast(.95); }

/* =============================================================
   27. Hero en MÓVIL — imagen primero + menos texto/clutter
   ============================================================= */
@media (max-width:859px){
  .hero{ padding-top:1.4rem; padding-bottom:2.4rem; }
  .hero-grid{ gap:1.5rem; }
  .hero-figure{ order:-1; }                 /* la imagen aparece ANTES del texto */
  .hero-figure img{ aspect-ratio:4 / 3; }   /* banner, no retrato a pantalla completa */
  .hero-figure::before{ right:-10px; bottom:-10px; width:52%; height:58%; }
  .hero .scroll-cue{ display:none; }         /* fuera el "desliza" */
  .hero-meta{ display:none; }                /* fuera la línea de metadatos (ya está en los badges) */
  .hero-copy{ gap:1rem; }
  .hero-title{ font-size:clamp(2.4rem,9vw,3.2rem); }
  .hero-actions{ width:100%; }
  .hero-actions .btn{ flex:1 1 auto; justify-content:center; }
}