/* Layout: una casa recorrida de arriba abajo — cada sección es una estancia, una línea dorada marca el avance. */
:root{
  --bg:#F7F2EA;          /* papel cálido */
  --surface:#FFFDF8;     /* tarjetas */
  --ink:#16203A;         /* azul marino del logo */
  --ink-soft:#4C566E;
  --line:#E4DACA;
  --gold:#B8913C;        /* dorado del logo (texto/acentos) */
  --gold-soft:#E9D9B0;
  --navy-btn:#16203A;
  --on-navy:#FBF7EF;
  --wa:#1F8A55;
  --font-display:"Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body:"Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-room:"Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sw-you:#E9D9B0; --sw-hip:#6F7A93; --sw-tax:#C9A24A; --sw-gas:#A7AEBF;
  --radius:14px;
  --maxw:1120px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1524; --surface:#161E33; --ink:#F1EBDF; --ink-soft:#B4B9C7; --line:#2A3350;
    --gold:#D7B56A; --gold-soft:#3A3426; --navy-btn:#E9D9B0; --on-navy:#121A2C; --wa:#3BB273; --sw-you:#16203A; --sw-hip:#6F7A93; --sw-tax:#9A7425; --sw-gas:#B9AE95;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0F1524; --surface:#161E33; --ink:#F1EBDF; --ink-soft:#B4B9C7; --line:#2A3350;
  --gold:#D7B56A; --gold-soft:#3A3426; --navy-btn:#E9D9B0; --on-navy:#121A2C; --wa:#3BB273; --sw-you:#16203A; --sw-hip:#6F7A93; --sw-tax:#9A7425; --sw-gas:#B9AE95;
  color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:18px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display); line-height:1.12; margin:0; text-wrap:balance; letter-spacing:-0.01em}
h1{font-size:clamp(2.2rem, 5.4vw, 3.9rem); font-weight:300}
h2{font-size:clamp(1.8rem, 3.8vw, 2.7rem); font-weight:300}
h3{font-size:1.2rem; font-weight:600}
h1 b, h2 b{font-weight:600}
p{margin:0}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:20px}
.muted{color:var(--ink-soft)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:6px}

/* ===== Cabecera ===== */
.top{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:30;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.2) blur(10px); -webkit-backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--line);
}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:12px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand svg{width:38px; height:38px; flex:none}
.brand-word{font-family:var(--font-display); font-size:1.25rem; letter-spacing:.04em; line-height:1}
.brand-word b{font-weight:700} .brand-word span{font-weight:300}
.brand-tag{display:block; font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px}
.progress{position:absolute; left:0; bottom:-1px; height:2px; width:100%; transform-origin:left; transform:scaleX(0); background:var(--gold)}

/* ===== Botones ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-body); font-weight:500; font-size:1.02rem; text-decoration:none;
  border-radius:999px; padding:15px 26px; border:1.5px solid transparent; cursor:pointer;
  transition:transform .15s ease, background-color .2s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--navy-btn); color:var(--on-navy); box-shadow:0 6px 18px -8px rgba(22,32,58,.55)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--gold)}
.btn-wa{background:var(--wa); color:#fff}
.btn svg{width:20px; height:20px; flex:none}
.top .btn{padding:10px 18px; font-size:.95rem; white-space:nowrap; gap:0}
@media (max-width:420px){ .brand-tag{display:none} }
@media (max-width:1000px){ .top .btn-label-long{display:none} }

/* ===== Recorrido (rail lateral) ===== */
.rail{
  position:fixed; left:max(16px, calc((100vw - var(--maxw))/2 - 150px)); top:50%; transform:translateY(-50%);
  z-index:20; display:none;
}
.rail{display:none!important}
.rail ol{list-style:none; margin:0; padding:0 0 0 18px; position:relative; display:grid; gap:22px}
.rail ol::before{content:""; position:absolute; left:4px; top:6px; bottom:6px; width:1px; background:var(--line)}
.rail .track{position:relative}
.rail .fill{position:absolute; left:4px; top:6px; z-index:1; width:1px; background:var(--gold); height:0}
.rail li{position:relative}
.rail a{font-family:var(--font-room); font-style:italic; font-size:1.05rem; text-decoration:none; color:var(--ink-soft); transition:color .2s}
.rail li::before{content:""; position:absolute; left:-18px; top:.55em; width:9px; height:9px; border-radius:50%; background:var(--bg); border:1px solid var(--line); transition:all .25s}
.rail li.on a{color:var(--ink)}
.rail li.on::before{background:var(--gold); border-color:var(--gold)}

/* ===== Estancias (secciones) ===== */
.room{padding-block:clamp(40px, 5.5vw, 68px); scroll-margin-top:70px}
.room + .room{border-top:1px solid var(--line)}
.room-label{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin-bottom:12px}
.room-label .topic{font-size:.8rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink)}
.room-label em{font-family:var(--font-room); font-style:italic; font-weight:500; font-size:1.15rem; color:var(--gold); display:inline-flex; align-items:center; gap:12px}
.room-label em::before{content:"·"; font-style:normal; color:var(--gold-soft)}
.pill{display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:.92rem; font-weight:500; color:var(--ink); background:var(--surface); border:1px solid var(--gold-soft); border-radius:999px; padding:8px 16px 8px 12px; margin-bottom:22px}
@media (max-width:520px){ .pill-x{display:none} }
.pill{white-space:nowrap}
@media (max-width:420px){ .pill{font-size:.84rem; padding:7px 14px 7px 10px} }
.pill .dot{width:8px; height:8px; border-radius:50%; background:var(--gold); flex:none}
.pill s{color:var(--ink-soft); text-decoration-color:var(--gold)}
.plan-cap{margin-top:34px; font-size:.92rem; color:var(--ink-soft); text-align:center}


/* ===== Entrada (hero) ===== */
.hero{padding-block:clamp(28px, 5vw, 60px) clamp(36px, 5.5vw, 64px)}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px, 5vw, 64px); align-items:center}
.hero-grid > *{min-width:0}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr} }
.hero .lead{font-size:clamp(1.1rem, 1.8vw, 1.28rem); color:var(--ink-soft); margin-top:22px; max-width:34em}
.hero .actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.assure{display:flex; flex-wrap:wrap; gap:10px 22px; margin:28px 0 0; padding:0; list-style:none; font-size:.95rem; color:var(--ink-soft)}
.assure li{display:flex; align-items:center; gap:8px}
.assure svg{width:18px; height:18px; color:var(--gold); flex:none}

@media (max-width:760px){ .plan{display:none} }
.plan{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:18px; box-shadow:0 30px 60px -40px rgba(22,32,58,.45)}
.plan svg{display:block; width:100%; height:auto}
.plan .wallc{stroke:var(--ink); }
.plan .lbl{font-family:var(--font-room); font-style:italic; font-size:15px; fill:var(--ink-soft)}
.plan .route{stroke:var(--gold); stroke-width:2.2; fill:none; stroke-dasharray:2 7; stroke-linecap:round}
.plan .walker{fill:var(--gold)}
.plan-chip{
  position:absolute; display:flex; align-items:center; gap:10px;
  background:var(--navy-btn); color:var(--on-navy); border-radius:999px; padding:9px 16px 9px 10px; font-size:.9rem; font-weight:500;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.5);
}
.plan-chip .play{width:28px; height:28px; border-radius:50%; background:var(--gold); display:grid; place-items:center}
.plan-chip .play svg{width:12px; height:12px; color:#16203A}
.plan-chip.c1{right:-10px; top:62%}
.plan-chip.c2{left:-10px; top:22px; background:var(--surface); color:var(--ink); border:1px solid var(--line)}
@media (max-width:560px){ .plan-chip.c1{right:8px; top:58%} .plan-chip.c2{left:8px; top:-16px} }

/* ===== Pasillo (problema) ===== */
.two{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px, 5vw, 72px); align-items:start}
.two > *{min-width:0}
@media (max-width:860px){ .two{grid-template-columns:1fr} }
.big-p{font-size:clamp(1.08rem, 1.6vw, 1.2rem); color:var(--ink-soft); margin-top:14px; max-width:32em}
.signs{display:grid; gap:0; margin:0; padding:0; list-style:none; border-top:1px solid var(--line)}
.signs li{display:grid; grid-template-columns:44px 1fr; gap:14px; padding:22px 0; border-bottom:1px solid var(--line)}
.signs .ico{width:44px; height:44px; border-radius:50%; border:1px solid var(--gold-soft); display:grid; place-items:center; color:var(--gold)}
.signs .ico svg{width:20px; height:20px}
.signs h3{font-size:1.08rem}
.signs p{color:var(--ink-soft); font-size:.98rem; margin-top:4px}

/* ===== Salón (cómo funciona) ===== */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px, 2.5vw, 28px); margin-top:28px; counter-reset:s}
@media (max-width:860px){ .steps{grid-template-columns:1fr} }
.step{border-top:2px solid var(--gold-soft); padding:16px 0 0; display:flex; flex-direction:column; gap:12px}
.step .n{font-family:var(--font-room); font-style:italic; font-size:2.6rem; line-height:1; color:var(--gold)}
.step p{color:var(--ink-soft); font-size:1rem}
.step .when{margin-top:auto; padding-top:10px; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink)}
.see-example{margin-top:20px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; padding:22px 26px; border:1px dashed var(--gold-soft); border-radius:var(--radius)}
.see-example p{flex:1 1 280px; color:var(--ink-soft)}
.see-example strong{color:var(--ink); font-weight:600}

/* ===== Cocina (precio) ===== */
.price-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(20px, 3vw, 36px); margin-top:28px; align-items:stretch}
.price-grid > *{min-width:0}
@media (max-width:900px){ .price-grid{grid-template-columns:1fr} }
.price-card{background:var(--surface); border:1.5px solid var(--gold-soft); border-radius:20px; padding:clamp(26px, 4vw, 40px); position:relative}
.ribbon{display:inline-block; font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--gold); border:1px solid var(--gold-soft); border-radius:999px; padding:6px 12px}
.price{display:flex; align-items:baseline; gap:16px; margin-top:18px; flex-wrap:wrap}
.price .now{font-family:var(--font-display); font-weight:300; font-size:clamp(3.6rem, 8vw, 5rem); line-height:1}
.price .now sup{font-size:.4em; vertical-align:.95em; margin-left:2px}
.price .was{font-family:var(--font-room); font-style:italic; font-size:1.7rem; color:var(--ink-soft); text-decoration:line-through; text-decoration-color:var(--gold)}
.price-note{color:var(--ink-soft); margin-top:6px}
.incl{list-style:none; margin:20px 0 24px; padding:0; display:grid; gap:12px}
.incl li{display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start}
.incl svg{width:20px; height:20px; color:var(--gold); margin-top:4px}
.side{display:grid; gap:18px; align-content:start}
.guarantee{background:var(--navy-btn); color:var(--on-navy); border-radius:20px; padding:22px 24px}
.guarantee .seal{width:58px; height:58px; margin-bottom:14px}
.guarantee h3{font-size:1.45rem; font-weight:500}
.guarantee p{opacity:.85; margin-top:10px}

/* ===== Despacho (formulario guiado) ===== */
.quiz{margin-top:24px; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:clamp(22px, 4vw, 40px); max-width:780px}
.quiz-head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px}
.dots{display:flex; gap:6px}
.dots i{display:block; width:26px; height:3px; border-radius:2px; background:var(--line)}
.dots i.on{background:var(--gold)}
.qcount{font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.q h3{font-size:clamp(1.25rem, 2.4vw, 1.55rem); font-weight:500}
.opts{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin-top:20px}
@media (max-width:520px){ .opts{grid-template-columns:1fr} }
.opt{
  text-align:left; font:inherit; font-size:1rem; color:var(--ink); background:var(--bg);
  border:1.5px solid var(--line); border-radius:12px; padding:16px 18px; cursor:pointer; transition:border-color .15s, background-color .15s;
  display:flex; align-items:center; gap:12px;
}
.opt:hover{border-color:var(--gold)}
.opt[aria-pressed="true"]{border-color:var(--gold); background:var(--gold-soft)}
.opt .k{width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line); flex:none}
.opt[aria-pressed="true"] .k{border-color:var(--gold); background:var(--gold); box-shadow:inset 0 0 0 4px var(--gold-soft)}
.field{margin-top:20px; display:grid; gap:8px}
.field label{font-size:.9rem; color:var(--ink-soft)}
.field input{font:inherit; font-size:1.05rem; color:var(--ink); background:var(--bg); border:1.5px solid var(--line); border-radius:12px; padding:15px 16px; width:100%}
.field input:focus{outline:none; border-color:var(--gold)}
.quiz-nav{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:26px; flex-wrap:wrap}
.linkbtn{background:none; border:0; font:inherit; color:var(--ink-soft); cursor:pointer; padding:8px 0; text-decoration:underline; text-underline-offset:4px}
.result .msg{margin-top:22px; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:18px 20px; font-size:1rem; white-space:pre-wrap; color:var(--ink)}
.result .hint{margin-top:14px; font-size:.95rem; color:var(--ink-soft)}
.copyrow{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:16px; font-size:.95rem; color:var(--ink-soft)}
.copyrow code{font-family:var(--font-body); font-weight:600; color:var(--ink); font-size:1.05rem; user-select:all}
.copybtn{font:inherit; font-size:.88rem; background:none; border:1px solid var(--line); color:var(--ink); border-radius:999px; padding:6px 14px; cursor:pointer}


/* ===== Navegación por apartados ===== */
.tabs{display:flex; gap:4px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:4px}
.tabs a{text-decoration:none; font-size:.92rem; font-weight:500; padding:8px 16px; border-radius:999px; color:var(--ink-soft); white-space:nowrap}
.tabs a[aria-current="page"]{background:var(--navy-btn); color:var(--on-navy)}
.top .wrap{gap:12px}
@media (max-width:640px){ .top .cta-top{display:none} .brand-word{font-size:1.05rem} .brand svg{width:32px;height:32px} .tabs a{padding:7px 12px; font-size:.86rem} }
@media (max-width:360px){ .brand-word{display:none} }

/* ===== La ventana (simulador) ===== */
.sim{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,64px); align-items:center; margin-top:8px}
.sim > *{min-width:0}
@media (max-width:860px){ .sim{grid-template-columns:1fr} }
.seg{display:inline-flex; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:4px; margin-top:26px}
.seg button{font:inherit; font-size:.95rem; font-weight:500; border:0; background:none; color:var(--ink-soft); padding:10px 20px; border-radius:999px; cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--navy-btn); color:var(--on-navy)}
.feed{background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:14px; display:grid; gap:10px; box-shadow:0 30px 60px -45px rgba(22,32,58,.5)}
.feed-top{display:flex; justify-content:space-between; align-items:center; padding:4px 6px 8px; font-size:.82rem; color:var(--ink-soft)}
.feed-top b{color:var(--ink); font-weight:600}
.card{display:grid; grid-template-columns:120px 1fr; gap:14px; align-items:center; padding:10px; border-radius:14px; border:1.5px solid transparent; transition:border-color .3s, background-color .3s, opacity .3s}
.card .ph{position:relative; aspect-ratio:4/3; border-radius:10px; overflow:hidden; background:linear-gradient(160deg, var(--line), color-mix(in srgb, var(--line) 55%, var(--surface)))}
.card .ph::before{content:""; position:absolute; left:14%; right:14%; bottom:0; height:46%; background:color-mix(in srgb, var(--ink-soft) 18%, transparent); clip-path:polygon(0 100%,0 35%,50% 0,100% 35%,100% 100%)}
.card .ph .cnt{position:absolute; right:6px; bottom:6px; font-size:.68rem; background:rgba(0,0,0,.45); color:#fff; border-radius:6px; padding:2px 6px}
.card .meta b{display:block; font-size:1.05rem; font-variant-numeric:tabular-nums}
.card .meta span{display:block; font-size:.85rem; color:var(--ink-soft)}
.card .meta i{display:inline-block; margin-top:6px; height:6px; width:70%; border-radius:3px; background:var(--line)}
.card .play{position:absolute; inset:0; display:grid; place-items:center; opacity:0; transition:opacity .3s}
.card .play span{width:42px; height:42px; border-radius:50%; background:var(--gold); display:grid; place-items:center; box-shadow:0 6px 16px -6px rgba(0,0,0,.5)}
.card .play svg{width:16px; height:16px; color:#16203A; margin-left:3px}
.card .meta .tag{display:none; margin-top:6px; font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold)}
.feed.on .card:not(.mine){opacity:.55}
.feed.on .card.mine{border-color:var(--gold); background:color-mix(in srgb, var(--gold-soft) 45%, var(--surface))}
.feed.on .card.mine .play{opacity:1}
.feed.on .card.mine .cnt{display:none}
.feed.on .card.mine .meta .tag{display:block}
.feed.on .card.mine .ph{background:linear-gradient(160deg, #C9B48A, #8E7A55)}
@media (max-width:420px){ .card{grid-template-columns:96px 1fr} }
.sim-note{font-size:.85rem; color:var(--ink-soft); margin-top:12px}
.teaser{margin-top:clamp(24px,4vw,40px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 28px; padding:24px 28px; border-radius:18px; background:var(--navy-btn); color:var(--on-navy)}
.teaser p{flex:1 1 320px; font-size:1.08rem}
.teaser p small{display:block; opacity:.75; font-size:.9rem; margin-top:4px}
.teaser .btn{background:var(--gold); color:#16203A}

/* ===== Apartado calculadora ===== */
.calc-hero{padding-block:clamp(40px,6vw,72px) 8px}
.calc-hero .lead{font-size:clamp(1.08rem,1.7vw,1.22rem); color:var(--ink-soft); margin-top:18px; max-width:40em}
.vgrid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,36px); align-items:start; padding-block:32px clamp(56px,8vw,96px)}
.vgrid > *{min-width:0}
@media (max-width:900px){ .vgrid{grid-template-columns:1fr} }
.form{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:clamp(20px,3.5vw,32px); display:grid; gap:26px}
.fgroup{display:grid; gap:12px}
.fgroup > h3{font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--gold)}
.money{display:grid; grid-template-columns:1fr minmax(120px,150px); gap:12px; align-items:center}
.money label{font-size:.98rem; line-height:1.35}
.money label small{display:block; color:var(--ink-soft); font-size:.82rem}
.money .inp{display:flex; align-items:center; background:var(--bg); border:1.5px solid var(--line); border-radius:12px; padding:0 12px}
.money .inp:focus-within{border-color:var(--gold)}
.money input{font:inherit; font-size:1.02rem; color:var(--ink); background:transparent; border:0; outline:0; width:100%; min-width:0; padding:11px 0; text-align:right; font-variant-numeric:tabular-nums}
.money .u{color:var(--ink-soft); margin-left:6px; font-size:.9rem}
.check{display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start; font-size:.96rem; cursor:pointer}
.check input{width:20px; height:20px; margin:2px 0 0; accent-color:var(--gold)}
.check small{display:block; color:var(--ink-soft); font-size:.82rem}
.res{position:sticky; top:calc(env(safe-area-inset-top,0px) + 84px); display:grid; gap:16px}
.res-main{background:var(--navy-btn); color:var(--on-navy); border-radius:20px; padding:clamp(22px,3.5vw,32px)}
.res-main .k{font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; opacity:.75}
.res-main .bigv{font-family:var(--font-display); font-weight:300; font-size:clamp(2.6rem,6vw,3.6rem); line-height:1.05; margin-top:6px; font-variant-numeric:tabular-nums}
.res-main .sub{opacity:.8; margin-top:4px; font-size:.95rem}
.bar{display:flex; height:14px; border-radius:7px; overflow:hidden; margin-top:20px; background:color-mix(in srgb, var(--on-navy) 15%, transparent)}
.bar span{display:block; height:100%; transition:width .4s ease}
.legend{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:8px; font-size:.92rem}
.legend li{display:grid; grid-template-columns:12px 1fr auto; gap:10px; align-items:center}
.legend i{width:12px; height:12px; border-radius:3px}
.legend b{font-weight:500; font-variant-numeric:tabular-nums}
.legend .tot{border-top:1px solid color-mix(in srgb, var(--on-navy) 22%, transparent); padding-top:8px; margin-top:2px}
.sw-you{background:var(--sw-you)} .sw-hip{background:var(--sw-hip)} .sw-tax{background:var(--sw-tax)} .sw-gas{background:var(--sw-gas)}
.agency{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px 24px}
.agency .range-row{display:grid; gap:6px; margin-bottom:14px}
.agency .range-row .lbl{display:flex; justify-content:space-between; font-size:.95rem}
.agency input[type=range]{width:100%; accent-color:var(--gold)}
.agency .vs{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.agency .vs div{background:var(--bg); border-radius:12px; padding:12px 14px; font-size:.86rem; color:var(--ink-soft)}
.agency .vs b{display:block; font-size:1.25rem; color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums}
.agency .save{margin-top:14px; font-size:1.02rem}
.agency .save b{color:var(--gold)}
.hook{border:1.5px solid var(--gold-soft); border-radius:18px; padding:22px 24px; display:grid; gap:12px; background:var(--surface)}
.hook h3{font-size:1.15rem; font-weight:500}
.hook p{color:var(--ink-soft); font-size:.97rem}
.hook .btn{justify-self:start}
.fine{font-size:.82rem; color:var(--ink-soft); line-height:1.55}
.notes{max-width:860px; padding-bottom:clamp(56px,8vw,96px)}
.notes h2{font-size:clamp(1.4rem,2.6vw,1.8rem)}
.notes p{color:var(--ink-soft); margin-top:12px; max-width:68ch}

/* ===== Puntuación ===== */
.score{display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center; margin-top:8px}
@media (max-width:520px){ .score{grid-template-columns:1fr; justify-items:start} }
.gauge{position:relative; width:150px; height:150px}
.gauge svg{width:150px; height:150px; transform:rotate(-90deg)}
.gauge .bg{stroke:var(--line)}
.gauge .fg{stroke:var(--gold); transition:stroke-dashoffset 1s ease}
.gauge .num{position:absolute; inset:0; display:grid; place-items:center; text-align:center; font-family:var(--font-display)}
.gauge .num b{font-size:2.8rem; font-weight:300; line-height:1; display:block; font-variant-numeric:tabular-nums}
.gauge .num span{font-size:.8rem; color:var(--ink-soft)}
.score h3{font-size:1.35rem; font-weight:500}
.score .frena{margin-top:8px; color:var(--ink-soft)}
.score .frena b{color:var(--ink)}
.tips{list-style:none; padding:0; margin:20px 0 0; display:grid; gap:10px}
.tips li{display:grid; grid-template-columns:22px 1fr; gap:10px; font-size:.98rem; color:var(--ink-soft)}
.tips svg{width:18px; height:18px; color:var(--gold); margin-top:5px}
.disc{font-size:.82rem; color:var(--ink-soft); margin-top:14px}
@media (prefers-reduced-motion: reduce){ .gauge .fg{transition:none} }

/* ===== Plazas ===== */
.slots{display:flex; gap:5px; margin-top:16px}
.slots i{flex:1; height:8px; border-radius:3px; background:var(--gold)}
.slots i.used{background:var(--line)}
.slots-txt{font-size:.92rem; margin-top:8px; color:var(--ink-soft)}
.slots-txt b{color:var(--ink)}


/* ===== Calculadora v2 ===== */
.choice{display:grid; gap:8px}
.choice > span{font-size:.98rem}
.choice .seg2{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.choice > span{font-weight:500}
.ocard{position:relative; display:flex; align-items:center; gap:12px; text-align:left; font:inherit; color:var(--ink); background:var(--bg); border:1.5px solid var(--line); border-radius:14px; padding:14px 14px; cursor:pointer; transition:border-color .2s, background-color .2s, box-shadow .2s; min-width:0}
.ocard:hover{border-color:var(--gold)}
.ocard .oi{width:40px; height:40px; flex:none; border-radius:10px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line); color:var(--gold); transition:all .2s}
.ocard .oi svg{width:22px; height:22px}
.ocard .ot{display:grid; min-width:0}
.ocard .ot b{font-weight:600; font-size:.98rem; line-height:1.2}
.ocard .ot small{font-size:.8rem; color:var(--ink-soft)}
.ocard .ok{position:absolute; top:8px; right:8px; width:18px; height:18px; border-radius:50%; border:1.5px solid var(--line); background:var(--surface)}
.ocard[aria-pressed="true"]{border-color:var(--gold); background:color-mix(in srgb, var(--gold-soft) 55%, var(--surface)); box-shadow:0 8px 20px -14px rgba(22,32,58,.6)}
.ocard[aria-pressed="true"] .oi{background:var(--navy-btn); color:var(--gold); border-color:var(--navy-btn)}
.ocard[aria-pressed="true"] .ok{border-color:var(--gold); background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316203A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
.ocard{padding-right:34px}
@media (max-width:480px){ .choice .seg2{grid-template-columns:1fr} .ocard .ok{top:50%; right:14px; margin-top:-9px} }
.more{border-top:1px solid var(--line); padding-top:4px}
.more summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; padding:14px 0; font-weight:600; font-size:1rem}
.more summary::-webkit-details-marker{display:none}
.more summary span{font-size:.85rem; font-weight:400; color:var(--ink-soft)}
.more summary::after{content:""; width:10px; height:10px; border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold); transform:rotate(45deg); margin-left:12px; transition:transform .2s; flex:none}
.more[open] summary::after{transform:rotate(-135deg)}
.more .inner{display:grid; gap:22px; padding-top:6px}
.est{font-size:.78rem; color:var(--gold); margin-left:6px}
.cmp{display:grid; gap:12px}
.cmp .row{display:grid; gap:6px}
.cmp .row .t{display:flex; justify-content:space-between; font-size:.92rem}
.cmp .row .t b{font-variant-numeric:tabular-nums; font-weight:600}
.cmp .track{height:12px; border-radius:6px; background:var(--bg); overflow:hidden}
.cmp .track span{display:block; height:100%; border-radius:6px; transition:width .4s ease}
.cmp .a .track span{background:var(--ink)} .cmp .b .track span{background:var(--gold)}
@media (max-width:520px){ .money{grid-template-columns:1fr 128px} .money label small{font-size:.78rem} }
.cmp .diff{font-size:.92rem; color:var(--ink-soft)}
.cbar{position:fixed; left:0; right:0; bottom:0; z-index:41; display:none; padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); background:var(--navy-btn); color:var(--on-navy)}
.cbar .in{display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:var(--maxw); margin-inline:auto}
.cbar small{display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; opacity:.75}
.cbar b{font-family:var(--font-display); font-size:1.6rem; font-weight:400; font-variant-numeric:tabular-nums}
.cbar a{font-size:.88rem; color:var(--on-navy); opacity:.9; white-space:nowrap}
body.calc-mode .mbar{display:none!important}
@media (max-width:900px){ body.calc-mode .cbar{display:block} body.calc-mode footer{padding-bottom:110px} .res{position:static} }

.pro{display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start; padding:18px 20px; border-radius:16px; border:1px dashed var(--gold-soft); background:transparent}
.pro-i{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--navy-btn); color:var(--gold)}
.pro-i svg{width:22px; height:22px}
.pro-k{font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
.pro p{font-size:.94rem; color:var(--ink-soft); margin-top:4px}
.pro a{display:inline-block; margin-top:8px; font-weight:600; font-size:.94rem; color:var(--ink); text-decoration:none; border-bottom:1.5px solid var(--gold)}

/* ===== Calculadora v3: modos y compra ===== */
.modes{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:24px; max-width:620px}
.mode{font:inherit; text-align:left; cursor:pointer; border-radius:16px; padding:16px 18px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); display:flex; gap:12px; align-items:center; transition:all .2s}
.mode:hover{border-color:var(--gold)}
.mode svg{width:26px; height:26px; color:var(--gold); flex:none}
.mode b{display:block; font-size:1.05rem; font-weight:600}
.mode small{display:block; font-size:.82rem; color:var(--ink-soft)}
.mode[aria-pressed="true"]{background:var(--navy-btn); border-color:var(--navy-btn); color:var(--on-navy)}
.mode[aria-pressed="true"] small{color:var(--on-navy); opacity:.75}
@media (max-width:480px){ .mode{padding:12px 12px; gap:10px} .mode b{font-size:.95rem} .mode svg{width:22px;height:22px} }
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font:inherit; font-size:.93rem; font-weight:500; padding:10px 16px; border-radius:999px; border:1.5px solid var(--line); background:var(--bg); color:var(--ink); cursor:pointer; transition:all .2s}
.chip:hover{border-color:var(--gold)}
.chip[aria-pressed="true"]{background:var(--navy-btn); border-color:var(--navy-btn); color:var(--on-navy)}
.sel{display:grid; gap:8px}
.sel select{font:inherit; font-size:1rem; color:var(--ink); background:var(--bg); border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; width:100%; appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size:6px 6px; background-repeat:no-repeat}
.sel select:focus{outline:none; border-color:var(--gold)}
.money input::placeholder{color:color-mix(in srgb, var(--ink-soft) 60%, transparent)}
.empty-hint{font-size:.95rem; opacity:.85; margin-top:6px}

/* ===== Terraza (preguntas) ===== */
.faq{margin-top:20px; border-top:1px solid var(--line); max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative; font-size:1.1rem; font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:6px; top:50%; width:12px; height:12px; border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold); transform:translateY(-70%) rotate(45deg); transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{padding:0 0 22px; color:var(--ink-soft); max-width:62ch}

/* ===== Salida (cierre) ===== */
.exit{text-align:center}
.exit h2{max-width:18em; margin-inline:auto}
.exit p{max-width:34em; margin:18px auto 0; color:var(--ink-soft)}
.exit .actions{display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:30px}
.door{width:64px; height:64px; margin:0 auto 18px; color:var(--gold)}

footer{border-top:1px solid var(--line); padding-block:34px 110px; font-size:.9rem; color:var(--ink-soft)}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px}
@media (min-width:761px){ footer{padding-bottom:40px} }

/* ===== Barra móvil ===== */
.mbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40; display:none;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
}
.mbar .btn{width:100%}
@media (max-width:760px){ .mbar{display:block} }

@media (prefers-reduced-motion: reduce){
  .plan .walker{display:none}
  .btn, .rail a, .rail li::before{transition:none}
}

/* ===== Navegación global ===== */
.nav{display:flex; gap:2px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:4px}
.nav a{text-decoration:none; font-size:.92rem; font-weight:500; padding:8px 14px; border-radius:999px; color:var(--ink-soft); white-space:nowrap}
.nav a[aria-current="page"]{background:var(--navy-btn); color:var(--on-navy)}
@media (max-width:640px){ .nav a{padding:7px 10px; font-size:.84rem} .brand-word{font-size:1rem} .brand svg{width:30px;height:30px} }
@media (max-width:440px){ .brand-word{display:none} }
@media (max-width:400px){ .brand-tag{display:none} .nav a{padding:6px 8px} }
/* ===== Pie ===== */
.site-foot{border-top:1px solid var(--line); padding-block:40px 120px; font-size:.92rem; color:var(--ink-soft); background:var(--bg)}
.site-foot .cols{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:28px}
.site-foot .cols > *{min-width:0}
@media (max-width:760px){ .site-foot .cols{grid-template-columns:1fr 1fr} }
.site-foot h4{margin:0 0 10px; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink)}
.site-foot ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.site-foot a{color:var(--ink-soft); text-decoration:none} .site-foot a:hover{color:var(--ink); text-decoration:underline}
.site-foot .legal{margin-top:28px; padding-top:18px; border-top:1px solid var(--line); font-size:.82rem}
@media (min-width:761px){ .site-foot{padding-bottom:40px} }
/* ===== Migas ===== */
.crumbs{font-size:.86rem; color:var(--ink-soft); padding-top:22px}
.crumbs a{color:var(--ink-soft)} .crumbs span{margin:0 6px}
/* ===== Artículos ===== */
.article{max-width:760px; margin-inline:auto; padding-block:12px 72px}
.article h1{font-size:clamp(2rem,4.6vw,3rem); font-weight:300; margin-top:14px}
.article h1 b{font-weight:600}
.article .meta{color:var(--ink-soft); font-size:.9rem; margin-top:14px}
.article .intro{font-size:1.15rem; color:var(--ink-soft); margin-top:18px}
.article h2{font-size:clamp(1.4rem,2.8vw,1.8rem); font-weight:500; margin-top:44px}
.article h3{font-size:1.15rem; margin-top:26px}
.article p, .article li{color:var(--ink); max-width:68ch}
.article p{margin-top:14px}
.article ul, .article ol{margin-top:12px; padding-left:22px; display:grid; gap:8px}
.article .tbl{overflow-x:auto; margin-top:18px; border:1px solid var(--line); border-radius:14px; background:var(--surface)}
.article table{width:100%; border-collapse:collapse; font-size:.95rem; min-width:420px}
.article th, .article td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums}
.article tr:last-child td{border-bottom:0}
.article th{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); font-weight:600}
.article .note{margin-top:18px; padding:16px 18px; border-radius:14px; background:var(--surface); border:1px solid var(--line); font-size:.95rem; color:var(--ink-soft)}
.article .cta-box{margin-top:40px; padding:26px; border-radius:18px; background:var(--navy-btn); color:var(--on-navy); display:grid; gap:12px}
.article .cta-box p{color:var(--on-navy); opacity:.85; margin:0}
.article .cta-box .btn{justify-self:start; background:var(--gold); color:#16203A}
.article .toc{margin-top:26px; padding:18px 20px; border-radius:14px; border:1px dashed var(--gold-soft)}
.article .toc b{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
.article .toc ol{margin-top:8px}
.article .toc a{color:var(--ink)}
.article .faq{max-width:none}
.article .src{font-size:.85rem; color:var(--ink-soft); margin-top:30px}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-top:28px}
@media (max-width:860px){ .cards{grid-template-columns:1fr} }
.gcard{display:grid; gap:10px; padding:22px; border-radius:16px; border:1px solid var(--line); background:var(--surface); text-decoration:none; color:var(--ink); transition:border-color .2s}
.gcard:hover{border-color:var(--gold)}
.gcard small{font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:600}
.gcard b{font-size:1.12rem; font-weight:600; line-height:1.25}
.gcard span{color:var(--ink-soft); font-size:.95rem}
.calc-faq{padding-bottom:40px}