/* ═══════════════════════════════════════════════════════════════
   TanWeb Studio · Landing loteos
   Dirección: documento técnico de agrimensura / plano catastral
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Tinta verde — nunca negro puro */
  --ink-900:#070F0C;
  --ink-850:#08120E;
  --ink-800:#0A1511;
  --ink-750:#0C1914;
  --ink-700:#0F1E18;
  --ink-600:#13271F;
  --ink-500:#1B342B;

  /* Estados del plano = la paleta de la marca */
  --gold-300:#EFDCAE;
  --gold-400:#E3C27E;
  --gold-500:#C69749;   /* DISPONIBLE */
  --gold-600:#9A7433;
  --sage:#7FA07E;       /* RESERVADO */
  --sage-dim:#5B7A5C;
  --rust:#A0483C;       /* VENDIDO */
  --rust-dim:#6E3129;

  --paper:#E9EEE7;
  --paper-2:#A6B6AB;
  --paper-3:#6C8078;

  --line:rgba(198,151,73,.14);
  --line-2:rgba(198,151,73,.075);
  --line-3:rgba(233,238,231,.07);

  --ff-disp:"Fraunces",Georgia,"Times New Roman",serif;
  --ff-sans:"Archivo","Helvetica Neue",Helvetica,sans-serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  --shell:1220px;
  --shell-wide:1480px;
  --r:2px;                 /* radios casi nulos: esto es un plano */
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ink-800);
  color:var(--paper);
  font-family:var(--ff-sans);
  font-size:clamp(15px,.35vw + 14px,16.5px);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Retícula de fondo + grano: atmósfera de papel técnico */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--line-2) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 20%,transparent 78%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.28'/></svg>");
  mix-blend-mode:overlay;
}
main,.nav,.foot{position:relative;z-index:2}

img,svg{display:block;max-width:100%}
b,strong{font-weight:600;color:var(--paper)}
em{font-style:italic}

.mono{font-family:var(--ff-mono);font-variant-ligatures:none;letter-spacing:-.01em}
.mut{color:var(--paper-2)}
.ph{color:var(--gold-400)}

.shell{width:min(100% - 2.5rem,var(--shell));margin-inline:auto}
.shell--wide{width:min(100% - 2.5rem,var(--shell-wide))}
@media (max-width:600px){.shell,.shell--wide{width:min(100% - 1.6rem,var(--shell))}}

/* Foco visible, siempre */
:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px;border-radius:1px}
.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--gold-500);color:var(--ink-900);padding:.7rem 1.1rem;
  font:500 .85rem/1 var(--ff-sans)
}
.skip:focus{left:1rem;top:1rem}

/* ─────────────────────────────────────────── Tipografía */
.h2{
  font-family:var(--ff-disp);
  font-weight:800;
  font-size:clamp(1.85rem,3.4vw,3.05rem);
  line-height:1.08;
  letter-spacing:-.022em;
  margin:0 0 1.1rem;
  color:var(--paper);
  text-wrap:balance;
}
.h2 em{color:var(--gold-400);font-style:italic;font-weight:700}
.h2--tight{margin-bottom:1.4rem}
.lead{
  max-width:62ch;color:var(--paper-2);
  font-size:clamp(1rem,.5vw + .9rem,1.12rem);margin:0 0 1.1rem
}

.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font:500 .715rem/1 var(--ff-mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-500);
  margin:0 0 1.6rem;padding:.45rem .8rem .45rem .6rem;
  border:1px solid var(--line);background:rgba(198,151,73,.05)
}
.eyebrow__dot{width:5px;height:5px;background:var(--gold-500);display:block}

/* Encabezado de sección: cota de plano */
.sechead{display:flex;align-items:center;gap:.9rem;margin-bottom:1.9rem}
.sechead__n{
  font-size:.72rem;letter-spacing:.12em;color:var(--gold-500);
  border:1px solid var(--line);padding:.28rem .5rem
}
.sechead__rule{
  flex:0 0 auto;width:clamp(40px,8vw,110px);height:9px;
  border-left:1px solid var(--line);border-right:1px solid var(--line);
  background:linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat
}
.sechead__t{
  font-size:.72rem;letter-spacing:.19em;text-transform:uppercase;color:var(--paper-3)
}

/* ─────────────────────────────────────────── Botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font:500 .92rem/1 var(--ff-sans);letter-spacing:.005em;
  padding:.92rem 1.5rem;border:1px solid var(--line);border-radius:var(--r);
  color:var(--paper);text-decoration:none;background:transparent;cursor:pointer;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease)
}
.btn--gold{
  background:var(--gold-500);border-color:var(--gold-500);color:#0A1511;font-weight:600;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset
}
.btn--gold:hover{background:var(--gold-400);border-color:var(--gold-400);transform:translateY(-1px)}
.btn--ghost{border-color:rgba(233,238,231,.16);color:var(--paper-2)}
.btn--ghost:hover{border-color:var(--gold-500);color:var(--paper)}
.btn--sm{padding:.6rem 1rem;font-size:.83rem}
.btn--lg{padding:1.1rem 2rem;font-size:1.02rem}
.btn--full{width:100%}
.btn:disabled{opacity:.42;cursor:not-allowed;transform:none}
.btn__wa{flex:0 0 auto}

/* ─────────────────────────────────────────── Nav */
.nav{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--ink-850) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-2)
}
.nav__in{display:flex;align-items:center;gap:1.6rem;height:66px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--paper)}
.brand__mark{color:var(--gold-500);display:block}
.brand__txt{font-family:var(--ff-disp);font-weight:800;font-size:1.06rem;letter-spacing:-.01em}
.brand__txt em{font-weight:600;color:var(--gold-400);font-style:italic}
.nav__links{margin-left:auto;display:flex;gap:1.7rem}
.nav__links a{
  color:var(--paper-2);text-decoration:none;font-size:.87rem;
  padding:.3rem 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s
}
.nav__links a:hover{color:var(--gold-400);border-color:var(--gold-500)}
@media (max-width:900px){.nav__links{display:none}.nav__in{gap:1rem}.brand+.btn{margin-left:auto}}

/* ─────────────────────────────────────────── Hero */
.hero{padding:clamp(3.2rem,7vw,6rem) 0 clamp(2.5rem,5vw,4rem)}
/* El límite se mide sobre el display (Fraunces ~70px), no sobre el cuerpo:
   con 44ch el titular se partía en seis líneas. */
.hero__copy{max-width:min(100%,1060px)}
.hero__h1{
  font-family:var(--ff-disp);font-weight:900;
  font-size:clamp(2.35rem,5.6vw,4.35rem);
  line-height:.99;letter-spacing:-.033em;margin:0 0 1.5rem;
  text-wrap:balance
}
.hero__h1 em{
  font-style:italic;font-weight:700;color:var(--gold-400);
  position:relative;white-space:nowrap
}
.hero__h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-600) 12%,var(--gold-600) 88%,transparent)
}
.hero__sub{max-width:56ch;color:var(--paper-2);font-size:clamp(1rem,.55vw + .92rem,1.16rem);margin:0 0 2.1rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:clamp(2.5rem,5vw,3.6rem)}

/* ─────────────────────────────────────────── EL PLANO */
.plan{
  border:1px solid var(--line);
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(198,151,73,.055),transparent 62%),
    var(--ink-750);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9)
}
.plan__head{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
  padding:.85rem 1.15rem;border-bottom:1px solid var(--line-2)
}
.plan__headL{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;min-width:0}
.tag{
  display:inline-flex;align-items:center;gap:.5rem;
  font:500 .68rem/1 var(--ff-mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-400);border:1px solid var(--line);padding:.4rem .6rem;white-space:nowrap
}
.tag__pulse{width:6px;height:6px;background:var(--gold-500);border-radius:50%;animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(198,151,73,.5)}50%{opacity:.55;box-shadow:0 0 0 5px rgba(198,151,73,0)}}
.plan__hint{margin:0;font-size:.83rem;color:var(--paper-3)}

.legend{display:flex;gap:1.15rem;margin-left:auto;flex-wrap:wrap}
.legend__i{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;color:var(--paper-2);white-space:nowrap}
.legend__i b{font-family:var(--ff-mono);font-weight:500;color:var(--paper);font-size:.8rem}
.sw{width:11px;height:11px;display:inline-block;border:1px solid currentColor;flex:0 0 auto}
.sw--disp{color:var(--gold-500);background:rgba(198,151,73,.3)}
.sw--res{color:var(--sage);background:rgba(127,160,126,.26)}
.sw--vend{color:var(--rust);background:rgba(160,72,60,.3)}

.plan__body{display:grid;grid-template-columns:minmax(0,1fr) 316px}
.plan__stage{min-width:0;border-right:1px solid var(--line-2)}
.plan__scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--ink-500) transparent}
.plan__canvas{position:relative;padding:.6rem}
#planSvg{width:100%;height:auto;display:block;touch-action:pan-x pan-y}
.plan__swipe{display:none;margin:0;padding:0 1rem .7rem;font:400 .74rem/1 var(--ff-mono);color:var(--paper-3)}

/* Lotes */
.lot{cursor:pointer;outline:none}
.lot__shape{
  stroke:rgba(233,238,231,.22);stroke-width:1;
  transition:fill .18s var(--ease),stroke .18s var(--ease),stroke-width .18s var(--ease)
}
.lot__hatch{pointer-events:none;transition:opacity .18s var(--ease)}
.lot__num{
  font-family:var(--ff-mono);font-size:11px;font-weight:500;
  fill:rgba(233,238,231,.5);text-anchor:middle;pointer-events:none;
  transition:fill .18s var(--ease)
}
.lot--disponible .lot__shape{fill:rgba(198,151,73,.17);stroke:rgba(198,151,73,.5)}
.lot--reservado  .lot__shape{fill:rgba(127,160,126,.15);stroke:rgba(127,160,126,.5)}
.lot--vendido    .lot__shape{fill:rgba(160,72,60,.16);stroke:rgba(160,72,60,.45)}

.lot--disponible:hover .lot__shape,.lot--disponible.is-kb .lot__shape{fill:rgba(198,151,73,.42);stroke:var(--gold-300);stroke-width:1.8}
.lot--reservado:hover  .lot__shape,.lot--reservado.is-kb  .lot__shape{fill:rgba(127,160,126,.34);stroke:#B7CDB6;stroke-width:1.8}
.lot--vendido:hover    .lot__shape,.lot--vendido.is-kb    .lot__shape{fill:rgba(160,72,60,.36);stroke:#D08578;stroke-width:1.8}
.lot:hover .lot__num,.lot.is-kb .lot__num{fill:var(--paper)}

/* Foco de teclado: anillo dorado punteado sobre el lote */
.lot.is-kb .lot__shape{stroke:var(--gold-300);stroke-width:2.4;stroke-dasharray:5 3}

/* Capa accesible sobre el plano */
.kb{position:absolute;pointer-events:none}
.kb__btn{
  position:absolute;margin:0;padding:0;border:0;background:none;
  pointer-events:none;              /* el mouse va al polígono del SVG */
  -webkit-appearance:none;appearance:none;color:transparent;font:inherit
}
.kb__btn:focus-visible{
  outline:2px solid var(--gold-300);outline-offset:2px;
  background:rgba(227,194,126,.08)
}

.lot.is-sel .lot__shape{stroke:var(--gold-300);stroke-width:2.2;filter:drop-shadow(0 0 7px rgba(227,194,126,.4))}
.lot.is-sel .lot__num{fill:var(--paper)}
.lot.is-dim{opacity:.42}

.street{fill:rgba(233,238,231,.028)}
.street__mid{stroke:rgba(233,238,231,.14);stroke-width:1;stroke-dasharray:9 9}
.street__lbl{
  font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.19em;
  fill:var(--paper-3);text-transform:uppercase
}
.mz__lbl{font-family:var(--ff-disp);font-size:15px;font-weight:800;fill:rgba(198,151,73,.42);letter-spacing:.04em}
.note{font-family:var(--ff-mono);font-size:9px;letter-spacing:.13em;fill:var(--paper-3)}
.note--dim{fill:rgba(108,128,120,.66)}
.rule{stroke:var(--line);stroke-width:1}

/* Tooltip */
.tip{
  position:absolute;z-index:5;pointer-events:none;
  padding:.5rem .7rem;min-width:132px;
  background:var(--ink-900);border:1px solid var(--gold-600);
  box-shadow:0 12px 28px -12px rgba(0,0,0,.95);
  opacity:0;transform:translate(-50%,-118%) scale(.97);
  transition:opacity .13s var(--ease),transform .13s var(--ease)
}
.tip.is-on{opacity:1;transform:translate(-50%,-124%) scale(1)}
.tip__n{font:500 .82rem/1.1 var(--ff-mono);color:var(--gold-300);margin:0 0 .22rem}
.tip__m{font:400 .74rem/1.1 var(--ff-mono);color:var(--paper-2);margin:0}
.tip__e{
  display:inline-block;margin-top:.4rem;font:500 .62rem/1 var(--ff-mono);
  letter-spacing:.14em;text-transform:uppercase;padding:.24rem .38rem;border:1px solid currentColor
}
.tip__e[data-e="disponible"]{color:var(--gold-400)}
.tip__e[data-e="reservado"]{color:var(--sage)}
.tip__e[data-e="vendido"]{color:#C4796D}

/* Ficha */
.ficha{padding:1.15rem;display:flex;flex-direction:column;min-width:0}
.ficha__idle{margin:auto 0;text-align:left;color:var(--paper-3)}
.ficha__ico{color:var(--gold-600);margin-bottom:.9rem}
.ficha__idle p{margin:0 0 .4rem;font-size:.9rem}
.ficha__idle strong{color:var(--paper-2);font-weight:500}

.ficha__top{border-bottom:1px solid var(--line-2);padding-bottom:.85rem;margin-bottom:.95rem}
.ficha__mz{margin:0 0 .25rem;font:500 .67rem/1 var(--ff-mono);letter-spacing:.19em;color:var(--gold-500)}
.ficha__lote{font-family:var(--ff-disp);font-weight:800;font-size:1.72rem;line-height:1;margin:0 0 .7rem;letter-spacing:-.02em}
.chip{
  display:inline-block;font:500 .64rem/1 var(--ff-mono);letter-spacing:.15em;text-transform:uppercase;
  padding:.34rem .5rem;border:1px solid currentColor
}
.chip[data-e="disponible"]{color:var(--gold-400);background:rgba(198,151,73,.09)}
.chip[data-e="reservado"]{color:var(--sage);background:rgba(127,160,126,.09)}
.chip[data-e="vendido"]{color:#C4796D;background:rgba(160,72,60,.09)}

.specs{display:grid;grid-template-columns:1fr 1fr;gap:.1rem;margin:0 0 1rem;border:1px solid var(--line-2)}
.specs>div{padding:.6rem .7rem;border:.5px solid var(--line-2)}
.specs dt{font:400 .64rem/1 var(--ff-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--paper-3);margin-bottom:.35rem}
.specs dd{margin:0;font:500 .96rem/1 var(--ff-mono);color:var(--paper)}

.ficha__price{
  display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  padding:.7rem .75rem;border:1px dashed var(--line);margin-bottom:.9rem
}
.ficha__priceLbl{font:400 .64rem/1 var(--ff-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--paper-3)}
.ficha__priceVal{font:500 1.02rem/1 var(--ff-mono)}

.hold{border:1px solid rgba(127,160,126,.34);background:rgba(127,160,126,.07);padding:.7rem .75rem;margin-bottom:.9rem}
.hold__bar{height:3px;background:rgba(127,160,126,.2);margin-bottom:.55rem;overflow:hidden}
.hold__bar span{display:block;height:100%;width:100%;background:var(--sage);transform-origin:left;transition:transform 1s linear}
.hold__txt{margin:0 0 .35rem;font:400 .8rem/1.35 var(--ff-sans);color:var(--paper-2)}
.hold__txt b{font-family:var(--ff-mono);color:var(--sage);font-weight:500}
.hold__note{margin:0;font-size:.74rem;line-height:1.4;color:var(--paper-3)}

.ficha__actions{margin-top:auto;padding-top:.4rem}
.ficha__disc{margin:.6rem 0 0;font-size:.72rem;line-height:1.45;color:var(--paper-3)}

@media (max-width:980px){
  .plan__body{grid-template-columns:1fr}
  .plan__stage{border-right:0;border-bottom:1px solid var(--line-2)}
  .ficha__idle{margin:0}
  .plan__hint{display:none}
  .legend{margin-left:0}
}
@media (max-width:760px){
  #planSvg{min-width:660px}
  .plan__swipe{display:block}
  .specs{grid-template-columns:1fr 1fr}
}

/* ─────────────────────────────────────────── Stats */
.stats{
  list-style:none;margin:1.7rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line-2)
}
.stats li{padding:1.15rem 1.25rem;border-right:1px solid var(--line-2)}
.stats li:last-child{border-right:0}
.stats b{
  display:block;font-size:clamp(1.6rem,2.6vw,2.15rem);font-weight:500;
  color:var(--gold-400);line-height:1;margin-bottom:.45rem;letter-spacing:-.02em
}
.stats span{display:block;font-size:.83rem;color:var(--paper-3);line-height:1.42}
@media (max-width:820px){
  .stats{grid-template-columns:1fr 1fr}
  .stats li{border-bottom:1px solid var(--line-2)}
  .stats li:nth-child(2n){border-right:0}
  .stats li:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:460px){
  .stats{grid-template-columns:1fr}
  .stats li{border-right:0}
  .stats li:nth-last-child(-n+2){border-bottom:1px solid var(--line-2)}
  .stats li:last-child{border-bottom:0}
}

/* ─────────────────────────────────────────── Secciones */
.sec{padding:clamp(4rem,8vw,7rem) 0;border-top:1px solid var(--line-2)}
.sec--alt{background:linear-gradient(var(--ink-850),var(--ink-800))}

/* Problema */
.vs{
  display:grid;grid-template-columns:1fr auto 1fr;gap:1.6rem;align-items:stretch;
  margin-top:2.6rem
}
.vs__arrow{align-self:center;color:var(--gold-600)}
.vs__card{border:1px solid var(--line-2);padding:1.6rem 1.5rem;background:rgba(10,21,17,.5)}
.vs__card--good{border-color:var(--line);background:
  linear-gradient(160deg,rgba(198,151,73,.05),transparent 55%),rgba(15,30,24,.6)}
.vs__card header{margin-bottom:1.4rem;padding-bottom:1rem;border-bottom:1px solid var(--line-2)}
.vs__lbl{
  display:block;font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--paper-3);margin-bottom:.6rem
}
.vs__card--good .vs__lbl{color:var(--gold-500)}
.vs__card h3{
  font-family:var(--ff-disp);font-weight:800;font-size:1.5rem;margin:0;letter-spacing:-.02em;
  color:var(--paper-2)
}
.vs__card--good h3{color:var(--gold-300)}
.vs__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.15rem}
.vs__list li{display:flex;gap:.9rem}
.vs__k{
  flex:0 0 auto;font-size:.66rem;color:var(--paper-3);padding-top:.18rem;
  width:1.5rem;letter-spacing:.05em
}
.vs__card--good .vs__k{color:var(--gold-600)}
.vs__list b{display:block;font-size:.98rem;margin-bottom:.18rem;font-weight:600}
.vs__card--bad .vs__list b{color:var(--paper-2)}
.vs__list p{margin:0;font-size:.88rem;line-height:1.5;color:var(--paper-3)}
@media (max-width:900px){
  .vs{grid-template-columns:1fr;gap:1rem}
  .vs__arrow{transform:rotate(90deg);justify-self:center;margin:.2rem 0}
}

/* Oferta — dos decisiones separadas: la obra (única) y el abono (mensual) */

/* Paso 1 — la obra. Horizontal y a todo el ancho: no compite en columna
   con los mensuales, así el ojo no compara $850.000 contra $350.000. */
.obra{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(1.6rem,3.5vw,3rem);
  margin-top:2.6rem;padding:clamp(1.7rem,3vw,2.4rem);
  border:1px solid rgba(198,151,73,.34);
  background:linear-gradient(150deg,rgba(198,151,73,.07),transparent 55%),rgba(15,30,24,.8)
}
.obra__paso{
  display:inline-block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-900);background:var(--gold-500);padding:.35rem .6rem;margin-bottom:1.1rem
}
.obra__name{
  font-family:var(--ff-disp);font-weight:800;font-size:clamp(2rem,3.4vw,2.6rem);
  line-height:1;margin:0 0 .55rem;letter-spacing:-.028em;color:var(--gold-300)
}
.obra__for{margin:0 0 1.6rem;font-size:.95rem;color:var(--paper-2);line-height:1.45}
.obra__price{padding-top:1.2rem;border-top:1px solid var(--line-2)}
.obra__list{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.85rem;
  align-self:center
}
.obra__list li{
  position:relative;padding-left:1.15rem;font-size:.92rem;line-height:1.5;color:var(--paper-2)
}
.obra__list li::before{
  content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;
  border:1px solid var(--gold-500);background:rgba(198,151,73,.35)
}

/* Cota separadora entre las dos decisiones */
.dim{
  display:flex;align-items:center;gap:1rem;
  margin:clamp(2.4rem,5vw,3.6rem) 0 clamp(1.4rem,2.5vw,2rem)
}
.dim::before,.dim::after{
  content:"";flex:1;height:7px;
  border-left:1px solid var(--line);border-right:1px solid var(--line);
  background:linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat
}
.dim__lbl{
  flex:0 0 auto;font-size:.68rem;letter-spacing:.19em;text-transform:uppercase;color:var(--paper-3)
}

/* Paso 2 — los mensuales. Misma altura, sin escalón: son alternativas. */
.mensual__intro{margin-bottom:1.8rem}
.mensual__intro .obra__paso{background:transparent;color:var(--gold-500);border:1px solid var(--line);padding:.35rem .6rem}
.mensual__intro .lead{margin-bottom:0}
.mensual{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;align-items:stretch}

.tier{
  position:relative;display:flex;flex-direction:column;
  border:1px solid var(--line-2);background:rgba(10,21,17,.55);
  padding:1.7rem 1.5rem 1.5rem
}
.tier--top{
  border-color:rgba(198,151,73,.34);
  background:linear-gradient(165deg,rgba(198,151,73,.07),transparent 58%),rgba(15,30,24,.8)
}
.tier__head{margin:0 0 1.2rem}
.tier__name{
  font-family:var(--ff-disp);font-weight:800;font-size:1.85rem;line-height:1;
  margin:0 0 .5rem;letter-spacing:-.025em
}
.tier--top .tier__name{color:var(--gold-300)}
.tier__for{margin:0;font-size:.88rem;color:var(--paper-3);line-height:1.45}
.tier__prev{
  margin:0 0 .8rem;font:500 .7rem/1 var(--ff-mono);letter-spacing:.11em;
  text-transform:uppercase;color:var(--gold-600);
  padding-bottom:.7rem;border-bottom:1px solid var(--line-2)
}
.tier__list{list-style:none;margin:0 0 1.5rem;padding:0;display:flex;flex-direction:column;gap:.75rem}
.tier__list li{
  position:relative;padding-left:1.15rem;font-size:.9rem;line-height:1.48;color:var(--paper-2)
}
.tier__list li::before{
  content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;
  border:1px solid var(--gold-600);background:rgba(198,151,73,.25)
}
.tier__foot{margin-top:auto;padding-top:1.2rem;border-top:1px solid var(--line-2)}
.tier__pl{display:block;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-3);margin-bottom:.3rem}
.tier__price{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:.45rem;
  font-size:1.75rem;font-weight:500;line-height:1;margin-bottom:.5rem;letter-spacing:-.02em;
  color:var(--gold-400)
}
.tier__per{
  font-family:var(--ff-sans);font-style:normal;font-size:.78rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--paper-3)
}
.tier__note{display:block;font-size:.76rem;color:var(--paper-3);line-height:1.4}
@media (max-width:940px){
  .obra{grid-template-columns:1fr;gap:1.6rem}
  .obra__list{align-self:start}
  .mensual{grid-template-columns:1fr;gap:1rem}
}
@media (max-width:520px){
  .dim::before{display:none}
  .dim__lbl{font-size:.62rem;letter-spacing:.14em}
}

/* Caso */
.caso{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(1.8rem,4vw,3.6rem);align-items:start}
.caso__stat{position:sticky;top:6rem}
.bignum{
  display:block;font-size:clamp(4.4rem,11vw,8.2rem);font-weight:500;
  line-height:.86;color:var(--gold-400);letter-spacing:-.045em;
  margin-bottom:.4rem;
  text-shadow:0 0 60px rgba(198,151,73,.22)
}
.bignum__lbl{
  display:block;font-family:var(--ff-disp);font-weight:700;font-style:italic;
  font-size:clamp(1.25rem,2.4vw,1.9rem);line-height:1.14;letter-spacing:-.015em;
  color:var(--paper);max-width:20ch
}
.caso__copy .lead:first-child{margin-top:.3rem}
.caso__facts{list-style:none;margin:1.9rem 0 0;padding:0;border-top:1px solid var(--line-2)}
.caso__facts li{
  display:flex;gap:.9rem;align-items:baseline;
  padding:.8rem 0;border-bottom:1px solid var(--line-2);
  font-size:.92rem;color:var(--paper-2)
}
.caso__facts span{font-size:.68rem;color:var(--gold-600);flex:0 0 auto}
/* Crédito de cliente — deliberadamente separado del caso de los 765 */
.credit{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.2rem;
  margin-top:clamp(2rem,4vw,3.2rem);padding-top:1.2rem;
  border-top:1px solid var(--line-2)
}
.credit__k{
  font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;color:var(--paper-3)
}
.credit__list{
  list-style:none;margin:0;padding:0;flex:1 1 32rem;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.5rem 1.4rem
}
.credit__list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  font-size:.86rem;color:var(--paper-3);
  padding-bottom:.35rem;border-bottom:1px solid var(--line-2)
}
.credit__list b{color:var(--paper-2);font-weight:500}
.credit__list .mono{color:var(--gold-400);font-size:.88rem}

@media (max-width:900px){.caso{grid-template-columns:1fr}}

/* ─────────────────────────────────────────── CTA */
.cta{padding:clamp(4rem,8vw,7rem) 0 clamp(3rem,6vw,5rem);border-top:1px solid var(--line-2)}
.cta__box{
  position:relative;border:1px solid var(--line);padding:clamp(2.2rem,5vw,4.2rem);
  background:
    radial-gradient(90% 120% at 50% 0%,rgba(198,151,73,.09),transparent 60%),
    var(--ink-750);
  text-align:center
}
.cta__marks span{
  position:absolute;width:11px;height:11px;border:1px solid var(--gold-600);opacity:.75
}
.cta__marks span:nth-child(1){top:-1px;left:-1px;border-right:0;border-bottom:0}
.cta__marks span:nth-child(2){top:-1px;right:-1px;border-left:0;border-bottom:0}
.cta__marks span:nth-child(3){bottom:-1px;left:-1px;border-right:0;border-top:0}
.cta__marks span:nth-child(4){bottom:-1px;right:-1px;border-left:0;border-top:0}
.cta__k{display:block;margin-bottom:1.3rem;color:var(--gold-500)}
.cta__h{
  font-family:var(--ff-disp);font-weight:800;
  font-size:clamp(1.7rem,3.6vw,2.85rem);line-height:1.1;letter-spacing:-.025em;
  margin:0 auto 1.2rem;max-width:22ch;text-wrap:balance
}
.cta__h em{font-style:italic;color:var(--gold-400);font-weight:700}
.cta__p{max-width:56ch;margin:0 auto 2.1rem;color:var(--paper-2)}
.cta__reassure{
  list-style:none;margin:2rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:center
}
.cta__reassure li{
  font:400 .78rem/1 var(--ff-mono);color:var(--paper-3);
  display:flex;align-items:center;gap:.5rem
}
.cta__reassure li::before{content:"";width:4px;height:4px;background:var(--gold-600);flex:0 0 auto}

/* ─────────────────────────────────────────── Footer */
.foot{border-top:1px solid var(--line-2);padding:2.6rem 0 1.6rem;background:var(--ink-850)}
.foot__in{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.foot__brand{max-width:40ch}
.foot__brand .brand__txt{display:block;margin-bottom:.5rem;font-size:1.1rem}
.foot__brand p{margin:0;font-size:.84rem;color:var(--paper-3);line-height:1.5}
.foot__ck{
  margin:0 0 .7rem;font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;color:var(--paper-3)
}
.foot__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.foot__links a{
  display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;
  color:var(--paper-2);text-decoration:none;font-size:.83rem;
  /* alto mínimo táctil: sin esto los links quedan en 22 px */
  min-height:44px;padding:.35rem 0;
  transition:color .2s
}
.foot__links a .mono{font-size:.78rem;color:var(--paper-3);transition:color .2s}
.foot__links a:hover{color:var(--gold-300)}
.foot__links a:hover .mono{color:var(--gold-400)}

.foot__meta{display:flex;flex-direction:column;gap:.3rem;font-size:.74rem;color:var(--paper-3)}
.foot__meta span{color:var(--gold-600);margin-right:.55rem;letter-spacing:.1em}
.foot__sep{margin:0 .3rem;color:var(--paper-3)!important}
.foot__legal{
  margin:2.2rem 0 0;padding-top:1.2rem;border-top:1px solid var(--line-2);
  font-size:.76rem;color:var(--paper-3);
  width:min(100% - 2.5rem,var(--shell));margin-inline:auto
}

/* ─────────────────────────────────────────── WhatsApp flotante */
.wafloat{
  position:fixed;right:clamp(.9rem,2vw,1.5rem);bottom:clamp(.9rem,2vw,1.5rem);
  z-index:45;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.85rem 1.2rem;min-height:52px;
  background:var(--gold-500);color:var(--ink-900);
  border:1px solid var(--gold-400);border-radius:var(--r);
  text-decoration:none;font:600 .9rem/1 var(--ff-sans);
  box-shadow:0 16px 38px -14px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.2) inset;
  transition:opacity .3s var(--ease),transform .3s var(--ease),background .2s var(--ease)
}
.wafloat:hover{background:var(--gold-400)}
.wafloat.is-off{
  opacity:0;transform:translateY(14px) scale(.96);pointer-events:none
}
@media (max-width:560px){
  .wafloat{padding:0;width:54px;height:54px;justify-content:center}
  .wafloat__t{display:none}
}

/* ─────────────────────────────────────────── Reveal on scroll */
.rv{opacity:0;transform:translateY(18px)}
.rv.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important
  }
  .rv{opacity:1;transform:none}
  .tag__pulse{animation:none}
  .caso__stat{position:static}
}