/* ═══════════════════════════════════════════════════════════════
   JOMI INMOBILIARIA — Pachuca, Hidalgo
   Identidad: "La Bella Airosa al anochecer".
   Azul tinta de la sierra, dorado del Reloj Monumental.
   Tipografía: Fraunces (upright, nunca cursiva) + Archivo + Work Sans.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --ink:#0E1826; --ink-2:#152838; --ink-3:#1A3049;
  /* papel más luminoso y tarjetas en blanco: quita el peso sin perder la calidez */
  --paper:#FCFAF6; --paper-2:#F4EFE6; --card:#FFFFFF;
  --clay:#316593; --clay-dk:#23507A; --clay-lt:#5288B8;
  --gold:#B08542; --gold-lt:#CFA85F; --gold-dk:#8A6B36;
  --mut:#7C7468; --mut-lt:#A9B7C4; --line:#EAE4D9;
  --display:'Archivo',system-ui,sans-serif;
  --serif:'Fraunces',Georgia,serif;
  --body:'Work Sans',system-ui,sans-serif;
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;position:relative;line-height:1.6;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img{max-width:100%;display:block}
::selection{background:var(--gold);color:var(--ink)}

/* grano de papel — textura editorial sutil */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:300;opacity:.045;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
@media(max-width:640px){.wrap{padding:0 20px}}

.kick{
  font-family:var(--display);font-size:11px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--clay);
  display:flex;align-items:center;gap:12px;
}
.kick::before{content:'';width:26px;height:1px;background:var(--gold);flex:none}

h1,h2,h3{font-family:var(--serif);font-weight:500;font-style:normal;line-height:1.08;letter-spacing:-.015em}
.sec{padding:clamp(80px,11vw,150px) 0}
.sec h2{font-size:clamp(30px,4.6vw,56px);margin-top:20px;max-width:17ch}
.lead{font-size:clamp(15px,1.5vw,17.5px);line-height:1.75;color:#4E4639;max-width:56ch;margin-top:24px;font-weight:300}

/* ── botones ────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.01em;
  padding:16px 30px;border-radius:4px;position:relative;overflow:hidden;
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out),color .3s;
  will-change:transform;
}
.btn span{position:relative;z-index:2}
.btn::before{
  content:'';position:absolute;inset:0;z-index:1;
  transform:translateY(101%);transition:transform .55s var(--e-out);
}
.btn:hover::before{transform:translateY(0)}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold::before{background:var(--gold-lt)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(185,155,90,.34)}
.btn-ghost{border:1px solid var(--line);color:var(--ink);background:var(--card)}
.btn-ghost::before{background:var(--paper-2)}
.btn-ghost:hover{border-color:var(--gold);transform:translateY(-3px)}
.btn-line{border:1px solid rgba(246,240,230,.32);color:var(--paper)}
.btn-line::before{background:rgba(246,240,230,.1)}
.btn-line:hover{border-color:rgba(246,240,230,.7);transform:translateY(-3px)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink::before{background:var(--clay)}
.btn-ink:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(14,24,38,.3)}

/* ── nav ────────────────────────────────────────── */
nav{position:fixed;top:0;left:0;right:0;z-index:150;transition:background .5s,backdrop-filter .5s,box-shadow .5s}
/* padding-block y no `padding:20px 0`: el atajo ponía el padding lateral en 0 y
   anulaba el margen de .wrap, así que la barra iba pegada al borde. Con el
   recuadro blanco del logo no se notaba; sin él, sí. */
nav .bar{display:flex;align-items:center;justify-content:space-between;padding-block:20px;transition:padding .5s var(--e-out)}
nav.stuck{background:rgba(14,24,38,.86);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);box-shadow:0 1px 0 rgba(246,240,230,.09)}
nav.stuck .bar{padding-block:12px}
.brand{display:flex;align-items:center;gap:12px}
.brand-chip{background:var(--card);border-radius:12px;padding:9px 16px;display:inline-flex;
  box-shadow:0 6px 22px rgba(14,24,38,.16);border:1px solid var(--line);transition:transform .5s var(--e-out)}
.brand:hover .brand-chip{transform:translateY(-2px) scale(1.03)}
/* 22 ago: el logo pedía más presencia. De 26px a 56px en el nav — el logo trae el
   ícono Y el wordmark "JOMI INMOBILIARIA" dentro, así que a menos de ~50px el
   nombre se volvía ilegible y la marca no se leía. */
.brand-chip img{height:56px;width:auto;display:block}
@media(max-width:640px){.brand-chip{padding:7px 12px}.brand-chip img{height:42px}}
footer .brand-chip img{height:68px}
/* la barra crece con el logo para que no lo recorte */
#nav .bar{min-height:84px}
@media(max-width:640px){#nav .bar{min-height:66px}}
.links{display:flex;gap:34px;font-family:var(--display);font-size:13.5px;font-weight:500;color:var(--mut)}
.links a{position:relative;padding:4px 0;transition:color .3s}
.links a::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--e-out);
}
.links a:hover,.links a.on{color:var(--ink)}
nav.stuck .links{color:var(--mut-lt)}
nav.stuck .links a:hover,nav.stuck .links a.on{color:var(--paper)}
.links a:hover::after,.links a.on::after{transform:scaleX(1);transform-origin:left}
.menu-btn{display:none;flex-direction:column;gap:5px;padding:8px;z-index:200}
.menu-btn i{display:block;width:24px;height:1.5px;background:var(--ink);transition:transform .45s var(--e-out),opacity .3s}
nav.stuck .menu-btn i{background:var(--paper)}
body.nav-open .menu-btn i{background:var(--paper)}
body.nav-open .menu-btn i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.nav-open .menu-btn i:nth-child(2){opacity:0}
body.nav-open .menu-btn i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(max-width:900px){
  .links,nav .bar>.btn{display:none}
  .menu-btn{display:flex}
}
.drawer{
  position:fixed;inset:0;z-index:140;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 34px;
  clip-path:circle(0% at calc(100% - 42px) 42px);
  transition:clip-path .8s var(--e-io);
}
body.nav-open .drawer{clip-path:circle(150% at calc(100% - 42px) 42px)}
.drawer a{
  font-family:var(--serif);font-size:clamp(30px,8vw,46px);color:var(--paper);
  padding:9px 0;opacity:0;transform:translateY(24px);
  transition:opacity .5s var(--e-out),transform .5s var(--e-out),color .3s;
}
body.nav-open .drawer a{opacity:1;transform:none}
.drawer a:nth-child(1){transition-delay:.16s}.drawer a:nth-child(2){transition-delay:.22s}
.drawer a:nth-child(3){transition-delay:.28s}.drawer a:nth-child(4){transition-delay:.34s}
.drawer a:nth-child(5){transition-delay:.4s}.drawer a:nth-child(6){transition-delay:.46s}
.drawer a:hover{color:var(--gold)}
.drawer .d-meta{margin-top:34px;font-family:var(--display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut-lt);opacity:0;transition:opacity .5s .52s}
body.nav-open .drawer .d-meta{opacity:1}

/* ── HERO — claro y arquitectónico ──────────────── */
.hero{
  position:relative;background:var(--paper);
  padding:calc(96px + 5vw) 0 clamp(56px,7vw,92px);
  overflow:hidden;
}
/* retícula de plano, apenas perceptible */
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:76px 76px;
  -webkit-mask-image:radial-gradient(120% 85% at 78% 22%,#000 12%,transparent 72%);
          mask-image:radial-gradient(120% 85% at 78% 22%,#000 12%,transparent 72%);
}
.hero-grid{
  position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(32px,5vw,72px);align-items:center;
}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:38px}}
.hero h1{
  font-size:clamp(38px,6vw,78px);color:var(--ink);line-height:1.03;
  letter-spacing:-.028em;max-width:13ch;margin-top:20px;
}
.hero h1 .gold{color:var(--gold)}
.hero .sub{
  font-size:clamp(15px,1.55vw,18px);color:#4E4639;max-width:46ch;
  margin:26px 0 34px;font-weight:300;line-height:1.75;
}
.hero .cta{display:flex;gap:13px;flex-wrap:wrap}
.hero-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:34px}
.hero-tags span{
  font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.05em;
  padding:7px 14px;border-radius:100px;border:1px solid var(--line);
  background:var(--card);color:var(--mut);
}
/* máscara de revelado por línea */
.mask{display:block;overflow:hidden}
.mask>span{display:block;will-change:transform}

.hero-vis{position:relative;display:flex;flex-direction:column;align-items:center}
.plano-wrap{width:100%;max-width:520px}
.plano{width:100%;height:auto;overflow:visible}
/* jerarquía de líneas, como en un plano real */
.plano .pl-main{fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.plano .pl-thin{fill:none;stroke:var(--gold);stroke-width:1;opacity:.75;stroke-linecap:round}
.plano .pl-aux{fill:none;stroke:var(--clay);stroke-width:.9;opacity:.55;stroke-linecap:round}
.plano .pl-grid{fill:none;stroke:var(--ink);stroke-width:.5;opacity:.09}
.plano .pl-txt{
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.16em;
  fill:var(--mut);text-transform:uppercase;
}
.vis-cap{
  font-family:var(--display);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--mut);margin-top:10px;text-align:center;
}
@media(max-width:940px){.plano-wrap{max-width:400px}}

/* ── propiedades ────────────────────────────────── */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-top:44px}
.filter{
  font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:.03em;
  padding:11px 22px;border-radius:100px;border:1px solid var(--line);
  background:transparent;color:var(--mut);transition:.35s var(--e-out);
}
.filter:hover{border-color:var(--gold);color:var(--gold-dk)}
.filter.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:38px;perspective:1400px}
@media(max-width:800px){.pgrid{grid-template-columns:1fr}}
.pcard{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:36px 34px 30px;overflow:hidden;transform-style:preserve-3d;
  transition:box-shadow .55s var(--e-out),border-color .45s,transform .18s ease-out;
  will-change:transform;
}
.pcard::before{
  content:'';position:absolute;inset:0;border-radius:14px;opacity:0;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(185,155,90,.13),transparent 62%);
  transition:opacity .45s;
}
.pcard:hover::before{opacity:1}
.pcard:hover{box-shadow:0 30px 70px -22px rgba(14,24,38,.26);border-color:rgba(185,155,90,.5)}
/* ── foto del proyecto (22 ago) ────────────────────────────────────────────
   Reemplaza el ícono de línea por el render real. Mismo patrón que VELTOR: la
   imagen manda, el texto va debajo sobre papel. */
.pcard{padding:0}
.pcard .shot{
  position:relative;display:block;width:100%;aspect-ratio:16/11;overflow:hidden;
  background:var(--paper-2) center/cover no-repeat;
}
/* en una sola columna la tarjeta ocupa todo el ancho: con 4/3 la foto se comía
   la pantalla, así que se achata un poco más */
@media(max-width:800px){.pcard .shot{aspect-ratio:16/10}}
.pcard .shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--e-out);transform:scale(1.01);
}
.pcard:hover .shot img{transform:scale(1.06)}
/* velo inferior para que la etiqueta se lea sobre cualquier render */
.pcard .shot::after{
  content:'';position:absolute;inset:auto 0 0 0;height:46%;pointer-events:none;
  background:linear-gradient(to top,rgba(14,24,38,.42),transparent);
}
.pcard .shot .tag{position:absolute;top:14px;left:14px;z-index:2;backdrop-filter:blur(6px)}
.pcard .txt{display:block;padding:24px 28px 26px}
.pcard .art{display:none}
.p-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;transform:translateZ(20px)}
.pcard h3{font-size:25px;font-weight:600;line-height:1.15}
.tag{
  font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;padding:6px 12px;border-radius:100px;white-space:nowrap;
}
.tag.preventa{background:rgba(176,133,66,.16);color:var(--gold-dk)}
.tag.inmediata{background:rgba(46,125,91,.14);color:#2A6B4F}
.tag.renta{background:rgba(49,101,147,.13);color:var(--clay-dk)}
.tag.inversion{background:rgba(14,24,38,.09);color:var(--ink)}
.tag.venta{background:rgba(49,101,147,.13);color:var(--clay-dk)}
.pcard .loc{
  font-family:var(--display);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);margin-top:9px;display:flex;align-items:center;gap:7px;transform:translateZ(14px);
}
.pcard .loc svg{width:12px;height:12px;fill:none;stroke:var(--gold);stroke-width:1.6}
.pcard .desc{display:block;font-size:14px;color:#5A5145;line-height:1.65;margin-top:13px;max-width:40ch;font-weight:300;transform:translateZ(10px)}
/* fila de datos duros — lo que VELTOR muestra y aquí faltaba: precio y entrega */
.pcard .facts{display:flex;gap:26px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);transform:translateZ(12px)}
/* los hijos van como bloque: son <span> dentro de un <a>, y en línea se
   amontonaban ("PRECIO $6.7M" pegado en un renglón) */
.pcard .facts>span{display:block}
.pcard .facts .f-k{display:block;font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mut);margin-bottom:5px}
.pcard .facts .f-v{display:block;font-family:var(--serif);font-size:16px;font-weight:600;color:var(--ink);line-height:1.2}
.pcard .facts .f-v small{display:block;font-family:var(--body);font-size:11.5px;font-weight:400;color:var(--mut);margin-top:2px}
.pcard .go{
  display:inline-flex;align-items:center;gap:9px;margin-top:20px;transform:translateZ(22px);
  font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:.03em;color:var(--clay-dk);
  transition:gap .4s var(--e-out),color .3s;
}
.pcard .go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .4s var(--e-out)}
.pcard .go:hover{gap:15px;color:var(--ink)}
.pnote{font-size:12.5px;color:var(--mut);margin-top:30px;max-width:62ch;line-height:1.7;font-weight:300}

/* ── cifras ─────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
@media(max-width:760px){.stats{grid-template-columns:1fr}}
.stat{padding:34px 30px;background:var(--card);border:1px solid var(--line);border-radius:12px;border-top:2px solid var(--clay);transition:.5s var(--e-out)}
.stat:hover{transform:translateY(-5px);box-shadow:0 24px 54px -20px rgba(14,24,38,.2);border-top-color:var(--gold)}
.stat .n{font-family:var(--serif);font-size:clamp(30px,4vw,44px);font-weight:600;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.stat .n .u{font-size:.5em;color:var(--gold);margin-left:3px}
.stat .l{font-size:13.5px;color:var(--mut);margin-top:14px;line-height:1.6;font-weight:300}

/* ── proceso ────────────────────────────────────── */
.steps{margin-top:60px;border-top:1px solid var(--line)}
.step{
  display:grid;grid-template-columns:80px 1fr 1.1fr;gap:30px;align-items:start;
  padding:38px 0;border-bottom:1px solid var(--line);position:relative;transition:.5s var(--e-out);
}
.step::after{content:'';position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--gold);transition:width .8s var(--e-out)}
.step:hover::after{width:100%}
.step:hover{padding-left:12px}
@media(max-width:820px){.step{grid-template-columns:56px 1fr;gap:18px}.step .sd{grid-column:2}}
.step .sn{font-family:var(--display);font-size:12px;font-weight:700;color:var(--gold);letter-spacing:.1em;padding-top:7px}
.step h3{font-size:clamp(21px,2.4vw,27px);font-weight:600}
.step .sd{font-size:14.5px;color:#5A5145;line-height:1.75;font-weight:300;max-width:44ch}

/* ── formulario ─────────────────────────────────── */
.form-sec{
  background:linear-gradient(160deg,#1B3350,#0E1826 65%);color:var(--paper);
  border-radius:22px;padding:clamp(44px,6vw,76px) 0;position:relative;overflow:hidden;
}
.form-sec::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(62% 62% at 84% 12%,rgba(185,155,90,.16),transparent 62%);
}
/* retícula de plano sobre el panel oscuro — mismo lenguaje que el hero, invertido */
.form-sec::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(246,240,230,.09) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(246,240,230,.09) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(130% 100% at 20% 0%,#000 18%,transparent 76%);
          mask-image:radial-gradient(130% 100% at 20% 0%,#000 18%,transparent 76%);
}
/* el recuadro de preguntas se lee como un cuadro de plano: esquinas marcadas */
.qbox{position:relative}
.qbox::before,.qbox::after{
  content:'';position:absolute;width:16px;height:16px;pointer-events:none;
  border:1px solid rgba(185,155,90,.55);
}
.qbox::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.qbox::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.form-sec .inner{position:relative;z-index:2;padding:0 clamp(24px,4.4vw,58px)}
.form-sec .kick{color:var(--gold)}
.form-sec .kick::before{background:var(--gold)}
.form-sec h2{color:var(--paper)}
.qbox{margin-top:44px;background:rgba(246,240,230,.04);border:1px solid rgba(246,240,230,.12);border-radius:16px;padding:clamp(26px,3.4vw,40px)}
.fld{margin-bottom:30px}
.fld:last-of-type{margin-bottom:18px}
.fld .q{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.02em;color:#C9BEAC;margin-bottom:14px}
.fld .q b{color:var(--gold);font-weight:700;margin-right:7px}
.opts{display:flex;gap:10px;flex-wrap:wrap}
.opt{
  font-size:13.5px;padding:12px 20px;border-radius:5px;border:1px solid rgba(246,240,230,.2);
  background:rgba(246,240,230,.03);color:var(--paper);transition:.35s var(--e-out);position:relative;
}
.opt:hover{border-color:rgba(185,155,90,.75);transform:translateY(-2px)}
.opt.sel{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:600}
.wa{
  background:#25D366;color:#06301A;width:100%;padding:18px;border-radius:8px;
  font-family:var(--display);font-weight:700;font-size:15.5px;
  display:flex;align-items:center;justify-content:center;gap:11px;
  transition:.45s var(--e-out);margin-top:8px;
}
.wa:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(37,211,102,.32)}
.wa svg{width:21px;height:21px;fill:currentColor}

/* ── por qué ────────────────────────────────────── */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:56px;background:var(--line)}
@media(max-width:760px){.why{grid-template-columns:1fr}}
.w{background:var(--paper);padding:38px 34px;transition:.55s var(--e-out);position:relative}
.w:hover{background:var(--card)}
.w .wi{width:34px;height:34px;margin-bottom:20px}
.w .wi svg{width:100%;height:100%;fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round}
.w h3{font-size:20px;font-weight:600;margin-bottom:11px}
.w p{font-size:14px;color:var(--mut);line-height:1.72;font-weight:300}

/* ── footer ─────────────────────────────────────── */
footer{background:var(--ink);color:#A9A093;padding:80px 0 36px;position:relative;overflow:hidden}
footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5}
.f-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.f-brand p{font-size:13.5px;margin-top:18px;max-width:32ch;line-height:1.7;color:#8A8175;font-weight:300}
.f-cols{display:flex;gap:70px;flex-wrap:wrap}
.f-cols b{
  display:block;color:var(--paper);font-family:var(--display);font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;
}
.f-cols a,.f-cols span{display:block;font-size:13.5px;margin-bottom:11px;transition:color .3s;font-weight:300}
.f-cols a:hover{color:var(--gold)}
.f-legal{margin-top:56px;padding-top:26px;border-top:1px solid rgba(246,240,230,.08);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:#6E665B}

/* ── WhatsApp flotante ──────────────────────────── */
.wa-float{
  position:fixed;bottom:26px;right:26px;z-index:120;width:58px;height:58px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 34px rgba(37,211,102,.4);transition:transform .45s var(--e-out);
}
.wa-float:hover{transform:scale(1.09) rotate(6deg)}
.wa-float svg{width:29px;height:29px;fill:#fff}
.wa-float::after{
  content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
  animation:ring 2.6s infinite;
}
@keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.65);opacity:0}}


/* ── cobertura + escena 3D ─────────────────────── */
.cob{background:var(--paper-2)}
.cob-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,68px);align-items:center}
@media(max-width:900px){.cob-grid{grid-template-columns:1fr}}
.cob-list{margin-top:38px;display:flex;flex-direction:column;gap:22px}
.cob-i{border-left:2px solid var(--gold);padding-left:18px}
.cob-n{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--ink)}
.cob-s{font-size:14px;color:#5A5145;line-height:1.7;margin-top:6px;font-weight:300;max-width:42ch}
.cob-mapa{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:30px;box-shadow:var(--sh,0 20px 50px -24px rgba(14,24,38,.16))}
.cob-badge{font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dk);margin-bottom:18px}
.cob-place{padding:15px 0;border-bottom:1px solid var(--line)}
.cob-place b{display:block;font-family:var(--serif);font-size:19px;font-weight:600}
.cob-place span{font-size:13px;color:var(--mut);font-weight:300}
.cob-foot{font-size:13px;color:#5A5145;line-height:1.7;margin-top:18px;font-weight:300}
.cob-3d{position:relative}
.cob-cap{
  font-family:var(--display);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mut);margin-top:14px;text-align:center;
}
.city-fb{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:var(--mut-lt);font-size:13px;padding:20px;text-align:center;
}

/* ── ficha de proyecto ─────────────────────────── */
.ficha{
  position:fixed;inset:0;z-index:200;background:rgba(11,20,32,.62);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:none;align-items:center;justify-content:center;padding:18px;
}
.ficha.on{display:flex;animation:fq .3s var(--e-out)}
@keyframes fq{from{opacity:0}to{opacity:1}}
.ficha-card{
  position:relative;width:100%;max-width:720px;max-height:92dvh;overflow-y:auto;
  background:var(--card);border-radius:18px;padding:clamp(26px,4vw,44px);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.5);animation:fp .45s var(--e-out);
}
@keyframes fp{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.ficha-x{
  position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:10px;
  background:var(--paper-2);display:flex;align-items:center;justify-content:center;transition:.25s;
}
.ficha-x:hover{background:var(--line)}
.ficha-x svg{width:17px;height:17px;fill:none;stroke:var(--ink);stroke-width:2}
.ficha h3{font-size:clamp(28px,3.6vw,40px);margin:10px 0 6px}
.ficha .fl-loc{
  font-family:var(--display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);display:flex;align-items:center;gap:7px;
}
.ficha .fl-loc svg{width:13px;height:13px;fill:none;stroke:var(--gold);stroke-width:1.7}
.ficha .fl-desc{font-size:15px;line-height:1.75;color:#4E4639;margin:20px 0 0;font-weight:300}
.fl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:26px 0}
.fl-box{background:var(--paper-2);border-radius:11px;padding:16px 18px}
.fl-box .k{font-family:var(--display);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.fl-box .v{font-family:var(--serif);font-size:19px;font-weight:600;margin-top:5px;line-height:1.25}
.fl-feat{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.fl-feat span{
  font-size:12.5px;padding:7px 13px;border-radius:100px;background:var(--paper-2);
  color:#5A5145;border:1px solid var(--line);
}
.fl-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.fl-note{font-size:12px;color:var(--mut);margin-top:18px;line-height:1.65;font-weight:300}
.pcard{cursor:pointer}

/* ── reveal (GSAP + fallback) ───────────────────── */
.rv{opacity:0;transform:translateY(28px)}
.no-js .rv,.reduced .rv{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv{opacity:1!important;transform:none!important}
}

/* ── ficha de proyecto: foto grande + galería (22 ago) ────────────────────── */
.fl-hero{margin:26px 0 6px;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 26px 60px -28px rgba(14,24,38,.32);background:var(--paper-2)}
.fl-hero img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}
@media(min-width:900px){.fl-hero img{aspect-ratio:16/10}}
.fl-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
@media(max-width:760px){.fl-gal{grid-template-columns:1fr 1fr}}
.gal-item{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  background:var(--paper-2);transition:transform .5s var(--e-out),box-shadow .5s var(--e-out)}
.gal-item img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform 1s var(--e-out)}
.gal-item:hover{transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(14,24,38,.3)}
.gal-item:hover img{transform:scale(1.06)}
/* el encabezado ya no tiene ícono al costado: el título usa todo el ancho */
.pg-head{align-items:flex-start}

/* ── páginas de ficha (URL propia, no el modal) ────────────────────────────
   BUG 22 ago: los estilos de .fl-loc / .fl-desc / h3 estaban dentro de `.ficha`,
   que era el MODAL de una versión anterior. Las páginas /propiedad/<x>/ reusan
   esas clases pero no viven dentro de `.ficha`, así que no heredaban NADA —
   el pin de ubicación salía del tamaño de media pantalla por no tener width. */
.pg-main{padding:120px 0 90px}
@media(max-width:640px){.pg-main{padding:96px 0 70px}}
.volver{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--display);
  font-size:12.5px;font-weight:600;color:var(--mut);margin-bottom:26px;transition:color .3s;
}
.volver:hover{color:var(--gold-dk)}
.pg-head{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;margin-bottom:6px}
.pg-head h1{font-size:clamp(32px,5vw,52px);line-height:1.08;margin:12px 0 8px}
.pg-main .fl-loc{
  font-family:var(--display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);display:flex;align-items:center;gap:7px;
}
/* ESTA es la línea que faltaba: sin width/height el <svg> se estira sin control */
.pg-main .fl-loc svg{width:13px;height:13px;flex:none;fill:none;stroke:var(--gold);stroke-width:1.7}
.pg-main .fl-desc{font-size:16px;line-height:1.75;color:#4E4639;margin:22px 0 0;font-weight:300;max-width:70ch}
.pg-h2{font-size:clamp(20px,2.6vw,26px);font-weight:600;margin:44px 0 4px}

/* ══ LENGUAJE DE PLANO EN TODO EL SITIO (22 ago) ═══════════════════════════
   A Sebastián le gustó la retícula del hero y pidió verla en más partes. Se
   extiende con la misma lógica: siempre de fondo, siempre con máscara para que
   se desvanezca, nunca compitiendo con el contenido. */

/* 1. Retícula suave detrás de las secciones de contenido */
.sec{position:relative}
.sec::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:76px 76px;
  -webkit-mask-image:radial-gradient(100% 60% at 50% 0%,#000 4%,transparent 68%);
          mask-image:radial-gradient(100% 60% at 50% 0%,#000 4%,transparent 68%);
}
.sec>.wrap{position:relative;z-index:1}

/* 2. Los números de sección se leen como cota de plano */
.kick{position:relative}

/* 3. Tarjeta de proyecto: marca de esquina, como un detalle acotado */
.pcard{position:relative}
.pcard .txt::before{
  content:'';position:absolute;left:28px;top:0;width:22px;height:1px;
  background:var(--gold);opacity:.85;
}
/* la foto lleva una retícula tenue encima: render + plano, que es justo el oficio */
.pcard .shot::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.28;
  background-image:linear-gradient(rgba(252,250,246,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(252,250,246,.5) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 58%);
          mask-image:linear-gradient(to bottom,#000,transparent 58%);
  transition:opacity .6s var(--e-out);
}
.pcard:hover .shot::before{opacity:.1}

/* 4. Los pasos numerados: línea de cota vertical, como un corte */
.steps{position:relative}
.steps::before{
  content:'';position:absolute;left:26px;top:0;bottom:0;width:1px;z-index:0;
  background:linear-gradient(to bottom,transparent,var(--line) 8%,var(--line) 92%,transparent);
}
@media(max-width:820px){.steps::before{left:18px}}
.step{position:relative;z-index:1}
/* el número se apoya en la línea, con su marca */
.step .sn{position:relative}
.step .sn::after{
  content:'';position:absolute;left:-14px;top:13px;width:7px;height:7px;border-radius:50%;
  background:var(--paper);border:1px solid var(--gold);
}
@media(max-width:820px){.step .sn::after{left:-11px}}

/* 5. Ficha de proyecto: la foto principal también lleva su retícula */
.fl-hero{position:relative}
.fl-hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.2;
  background-image:linear-gradient(rgba(252,250,246,.55) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(252,250,246,.55) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 46%);
          mask-image:linear-gradient(to bottom,#000,transparent 46%);
}
/* los datos duros se ven como tabla de plano */
.fl-box{position:relative;overflow:hidden}
.fl-box::before{
  content:'';position:absolute;top:0;left:0;width:20px;height:1px;background:var(--gold);opacity:.7;
}

/* 6. Cierre de sección: una regla acotada en vez de un borde plano */
.pnote{position:relative;padding-top:20px}
.pnote::before{
  content:'';position:absolute;top:0;left:0;width:100%;height:1px;
  background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px);
}

/* ═══════════════════════════════════════════════════════════════
   27 ago — la marca, ya con el logo vectorial sin fondo
   ═══════════════════════════════════════════════════════════════ */

/* El logo deja el recuadro blanco: al ser transparente y de alta
   resolución, se apoya directo sobre el papel y respira mejor. */
.brand-mark{position:relative;display:inline-block;line-height:0}
.brand-mark img{
  height:64px;width:auto;display:block;
  filter:drop-shadow(0 2px 10px rgba(14,24,38,.13));
  transition:transform .5s var(--e-out),filter .5s var(--e-out);
}
.brand:hover .brand-mark img{transform:translateY(-2px) scale(1.02)}
@media(max-width:640px){.brand-mark img{height:48px}}
.brand-mark--pie img{height:76px;filter:drop-shadow(0 2px 14px rgba(0,0,0,.35))}

/* Barrido dorado sobre la silueta del logo. Solo es posible porque el
   PNG es transparente: la máscara usa su propio canal alfa, así que la
   luz corre por las letras y no por un rectángulo. */
.brand-mark::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(104deg,transparent 38%,rgba(255,246,222,.92) 50%,transparent 62%);
  background-repeat:no-repeat;background-size:260% 100%;background-position:170% 0;
  /* silueta de 6 KB y no el logo de 172 KB: la máscara solo necesita el alfa,
     y apuntarla al PNG grande obligaba a bajarlo aunque <picture> sirviera el WebP */
  -webkit-mask:url(logo-silueta.png) center/contain no-repeat;
          mask:url(logo-silueta.png) center/contain no-repeat;
  mix-blend-mode:screen;
}
.brand:hover .brand-mark::after,
.brand:focus-visible .brand-mark::after{opacity:1;animation:brillo 1.05s var(--e-out) forwards}
@keyframes brillo{from{background-position:170% 0}to{background-position:-70% 0}}

/* El isotipo, grande y apenas encendido, dentro del pie oscuro:
   sobre tinta el dorado transparente da profundidad sin ruido. */
footer .marca-agua{
  position:absolute;z-index:0;pointer-events:none;
  right:-9%;bottom:-30%;width:min(44vw,500px);aspect-ratio:1426/1400;
  background:url(marca-agua.webp) center/contain no-repeat;
  opacity:.055;
  -webkit-mask-image:radial-gradient(58% 58% at 50% 42%,#000 24%,transparent 82%);
          mask-image:radial-gradient(58% 58% at 50% 42%,#000 24%,transparent 82%);
}
footer .wrap{position:relative;z-index:1}
@media(max-width:640px){footer .marca-agua{width:78vw;right:-22%;bottom:-14%;opacity:.06}}
@media(prefers-reduced-motion:no-preference){
  footer .marca-agua{animation:flota 20s ease-in-out infinite alternate}
  @keyframes flota{to{transform:translate3d(0,-16px,0) rotate(-1.4deg)}}
}

/* Foco visible en todo lo que se puede tabular. No existía: quien navega
   con teclado no veía dónde estaba parado. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--gold);outline-offset:3px;border-radius:2px;
}
footer a:focus-visible,nav.stuck a:focus-visible{outline-color:var(--gold-lt)}

@media(prefers-reduced-motion:reduce){
  .brand:hover .brand-mark::after{animation:none;opacity:0}
  .brand:hover .brand-mark img{transform:none}
}