:root{
  --bg:#F8F9FA; --bg2:#f1f3f5; --panel:#fff;
  --ink:#1A1D20; --ink2:#5f5f66; --ink3:#86868b;
  --line:#e6e6eb; --line2:#d2d2d7;
  --acc:#D32F2F; --acc2:#B71C1C; --accSoft:#FDECEC;        /* rojo del logo: botones primarios, acentos */
  --accT:#C62828; --accL:#F28B82;                           /* rojo para texto sobre claro (AA) / sobre oscuro */
  --dark:#20252B; --dark2:#2A3038; --ok:#1f7a4d; --warn:#b26a00;
  --fam:#2f7a46;
  --steel:linear-gradient(135deg,#2b3139 0%,#171b21 55%,#0f1114 100%);
  --r:14px; --r2:22px; --r3:30px;
  --sh1:0 1px 2px rgba(0,0,0,.04),0 10px 30px -14px rgba(0,0,0,.14);
  --sh2:0 2px 4px rgba(0,0,0,.04),0 30px 70px -28px rgba(0,0,0,.3);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:8px}
.in{max-width:1200px;margin:auto;padding:0 24px}
.in.wide{max-width:1480px}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.025em;line-height:1.06;text-wrap:balance}
p{margin:0}
.kicker{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--accT)}
.sec{padding:120px 0}
.sec-head{max-width:780px;margin:0 auto 64px;text-align:center}
.sec-head h2{font-size:clamp(34px,4.6vw,60px)}
.sec-head p{font-size:clamp(17px,1.5vw,21px);color:var(--ink2);margin-top:18px;line-height:1.45}
.sec-head .kicker{margin-bottom:16px;display:block}
.dark{background:var(--dark);color:#fff}
.dark .sec-head p{color:rgba(255,255,255,.72)}
.hide{display:none!important}
.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo{position:relative;overflow:hidden;background:var(--steel)}
.cap{position:absolute;right:12px;bottom:10px;z-index:3;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.72);background:rgba(0,0,0,.28);padding:3px 8px;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none}
@media(max-width:700px){.sec{padding:84px 0}.sec-head{margin-bottom:40px}}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;background:var(--acc);color:#fff;padding:0 22px;height:48px;border-radius:999px;font-weight:600;font-size:16px;cursor:pointer;transition:transform .3s var(--ease),background .2s,box-shadow .3s,border-color .2s;box-shadow:0 10px 24px -12px rgba(211,47,47,.55);white-space:nowrap;letter-spacing:-.005em}
.btn:hover{background:var(--acc2);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn.lg{height:58px;padding:0 32px;font-size:17px}
.btn.sm{height:40px;padding:0 16px;font-size:14px}
.btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line2);box-shadow:none}
.btn.ghost:hover{border-color:var(--ink);background:#fff}
.btn.ghost.on{background:var(--acc);color:#fff;border-color:var(--acc)}
.btn.ghostw{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:none}
.btn.ghostw:hover{background:rgba(255,255,255,.22)}
.btn.white{background:#fff;color:var(--ink);box-shadow:0 12px 30px -14px rgba(0,0,0,.5)}
.btn.white:hover{background:#f2f2f4}

/* Franja superior */
.maqueta{background:#121416;color:#b9bfc6;font-size:12px;text-align:center;padding:7px 16px;letter-spacing:.01em}
.maqueta b{color:#fff;font-weight:600}

/* Cabecera */
.hdr{position:sticky;top:0;z-index:50;background:#1A1D20;border-bottom:1px solid rgba(255,255,255,.08);color:#fff}
.hdr .in{display:flex;align-items:center;gap:28px;height:64px;position:relative}
.logo{display:flex;align-items:center;gap:11px;font-weight:600;font-size:17px;letter-spacing:-.015em;color:var(--ink)}
.logo .lg-h{height:38px;width:auto;display:block}
.logo .lg-m{display:none;width:38px;height:38px;border-radius:8px}
.logo span{display:none;color:#fff}
@media(max-width:620px){.logo .lg-h{display:none}.logo .lg-m{display:block}.logo span{display:inline}}
footer .logo{display:block}
.logo b{font-weight:700}
.hdr nav{display:flex;gap:30px;margin-left:auto;font-size:14px;color:#cfd4da}
.hdr nav a{padding:6px 0;position:relative;transition:color .2s}
.hdr nav a:hover{color:#fff}
.hdr nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.hdr nav a:hover::after{transform:scaleX(1)}
.burger{display:none;width:44px;height:44px;border:0;background:none;margin-left:auto;cursor:pointer;place-items:center;border-radius:50%}
.burger span{display:block;width:20px;height:2px;background:#fff;position:relative;transition:.3s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#fff;transition:.3s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:900px){
  .hdr nav{display:none}
  .hdr nav.open{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:0;background:rgba(26,29,32,.97);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.1);padding:6px 24px 14px}
  .hdr nav.open a{padding:14px 0;font-size:17px;border-bottom:1px solid rgba(255,255,255,.1);color:#fff}
  .hdr nav.open a:last-child{border-bottom:0}
  .hdr nav.open a::after{display:none}
  .burger{display:grid}
  .hdr .cta-h{display:none}
}

/* Hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;color:#fff;background:var(--steel)}
.hero .ph{object-position:72% 50%;transform:scale(1.06);transition:transform 8s ease-out;will-change:transform}
.hero.ld .ph{transform:scale(1)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(8,12,22,.74) 0%,rgba(8,12,22,.42) 40%,rgba(8,12,22,.05) 72%),linear-gradient(0deg,rgba(8,12,22,.82) 0%,rgba(8,12,22,.1) 50%,rgba(8,12,22,.22) 100%)}
.hero .in{position:relative;z-index:2;padding-bottom:14vh;padding-top:150px;width:100%}
.hero h1{font-size:clamp(46px,7.6vw,108px);letter-spacing:-.04em;line-height:.98;max-width:12ch}
.hero .lead{font-size:clamp(18px,1.6vw,23px);max-width:640px;margin-top:26px;color:rgba(255,255,255,.9);line-height:1.45;text-wrap:pretty}
.hero .kicker{color:var(--accL);margin-bottom:22px;display:block}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
.hero .up{opacity:0;transform:translateY(22px);animation:up 1s var(--ease) forwards}
.hero .up:nth-child(2){animation-delay:.12s}.hero .up:nth-child(3){animation-delay:.24s}.hero .up:nth-child(4){animation-delay:.36s}
@keyframes up{to{opacity:1;transform:none}}
.scroll-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;width:26px;height:42px;border:2px solid rgba(255,255,255,.5);border-radius:14px}
.scroll-hint::before{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:wheel 1.9s infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}
.hero .cap{bottom:14px;right:16px}
@media(max-width:700px){.hero .in{padding-bottom:84px;padding-top:120px}.scroll-hint{display:none}.hero .cta .btn{flex:1 1 100%}.hero .ph{object-position:64% 50%}.hero .cap{bottom:8px}.hero::after{background:linear-gradient(0deg,rgba(8,12,22,.9) 0%,rgba(8,12,22,.55) 45%,rgba(8,12,22,.25) 100%)}}

/* Franja de confianza */
.trust{background:#fff;border-bottom:1px solid var(--line)}
.trust .in{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:36px 24px}
.trust .in>div{display:flex;gap:14px;align-items:flex-start}
.trust svg{width:30px;height:30px;flex:none;color:var(--acc)}
.trust b{display:block;font-size:15px;letter-spacing:-.01em;margin-bottom:2px}
.trust span{font-size:13.5px;color:var(--ink2);line-height:1.4}
@media(max-width:900px){.trust .in{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.trust .in{grid-template-columns:1fr;gap:20px;padding:26px 24px}}

/* Cómo funciona */
.how{background:var(--bg2)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{background:#fff;border-radius:var(--r3);padding:18px 18px 30px;box-shadow:var(--sh1);position:relative;transition:transform .5s var(--ease),box-shadow .5s}
.step:hover{transform:translateY(-5px);box-shadow:var(--sh2)}
.step .ill{aspect-ratio:16/11;border-radius:22px;overflow:hidden;background:var(--steel);margin-bottom:24px;position:relative}
.step .ill svg{width:100%;height:100%}
.step .tx{padding:0 8px}
.step .num{font-size:12px;letter-spacing:.16em;color:var(--acc);font-weight:700;text-transform:uppercase}
.step h3{font-size:24px;margin:8px 0 10px;letter-spacing:-.02em}
.step p{color:var(--ink2);font-size:15.5px;line-height:1.5}
.mini{position:absolute;inset:0;display:grid;place-items:center;padding:22px;background:linear-gradient(160deg,#f6f6f8,#e9eaee)}
.mini .tk{background:#fff;border-radius:16px;box-shadow:var(--sh2);width:min(100%,250px);padding:16px 18px;font-size:12.5px;color:var(--ink2)}
.mini .tk div{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.mini .tk div:last-child{border:0;padding-top:10px;color:var(--ink);font-weight:700;font-size:16px}
.mini .tk small{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);font-weight:700;margin-bottom:6px}
@media(max-width:900px){.steps{grid-template-columns:1fr}}

/* Configurador */
.config{position:relative;padding:0 0 120px;overflow:clip;background:var(--bg2)}
.cfg-bg{position:absolute;top:0;left:0;right:0;height:min(100vh,900px);z-index:0;background:var(--steel)}
.cfg-bg .layer{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.cfg-bg .layer.on{opacity:1}
.cfg-bg .layer .ph{object-position:center 60%}
.cfg-bg .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,9,14,.78) 0%,rgba(6,9,14,.5) 30%,rgba(6,9,14,.12) 56%,rgba(245,245,247,0) 72%,var(--bg2) 100%)}
.config .in{position:relative;z-index:1}
.config .sec-head{padding-top:110px;color:#fff;margin-bottom:46px;text-shadow:0 2px 24px rgba(0,0,0,.4)}
.config .sec-head p{color:rgba(255,255,255,.88)}
.config .sec-head .kicker{color:var(--accL)}
.wrap{display:grid;grid-template-columns:minmax(0,1fr) 500px;gap:28px;align-items:start}
.stick{position:sticky;top:80px;max-height:calc(100vh - 96px);overflow:auto;scrollbar-width:none;border-radius:var(--r3)}
.stick::-webkit-scrollbar{display:none}
@media(max-width:1200px){.wrap{grid-template-columns:minmax(0,1fr) 420px}}
@media(max-width:1020px){.wrap{grid-template-columns:1fr}.stick{position:static;max-height:none;overflow:visible;order:-1}.config .sec-head{padding-top:80px}}

/* Diseño visual en vivo (columna derecha) */
.vis{background:#fff;border-radius:var(--r3);box-shadow:var(--sh2);overflow:hidden;border:1px solid rgba(0,0,0,.05)}
.vis .vphoto{position:relative;aspect-ratio:3/1;background:var(--steel)}
@media(max-width:1020px){.vis .vphoto{aspect-ratio:16/7}}
@media(max-height:900px) and (min-width:1021px){.vis .vphoto{aspect-ratio:4/1}.vis .vfoot{display:none}.vis .vphoto .lab b{font-size:19px}}
.opt.row{min-height:92px}
.vis .vphoto .sl{position:absolute;inset:0}
.vis .vphoto::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.08) 55%,rgba(0,0,0,0) 100%);pointer-events:none}
.vis .vphoto .lab{position:absolute;left:20px;right:20px;bottom:14px;color:#fff;z-index:2;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.vis .vphoto .lab small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.9;font-weight:700}
.vis .vphoto .lab b{font-size:22px;letter-spacing:-.025em;line-height:1.1;display:block;margin-top:2px}
.vis .vphoto .lab span{display:block;font-size:13px;opacity:.9;margin-top:4px}
.vis .vphoto .cap{bottom:auto;top:12px}
.vis .vtoggle{display:none;width:100%;border:0;background:#fff;padding:14px 20px;text-align:left;font-weight:600;font-size:15px;cursor:pointer;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.vis .vtoggle::after{content:"";width:10px;height:10px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);transition:transform .3s var(--ease);margin-right:4px}
.vis.open .vtoggle::after{transform:rotate(-135deg)}
.vis .vsec{padding:12px 18px 0}
.vis .vh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px;min-height:32px}
.vis .vh h3{font-size:16px;letter-spacing:-.015em}
.vis .vh .muted{color:var(--ink3);font-size:13px}
.vis .vh .tabs{margin-left:auto;display:flex;gap:5px;flex-wrap:wrap}
.vis .vh .tabs .btn{height:32px;padding:0 11px;font-size:12.5px}
.vis .draw{border-radius:16px;border:1px solid var(--line);background:#fff}
.vis .dwrap{animation:none}
.vis .dwrap.swap{animation:swap .5s var(--ease)}
@keyframes swap{from{opacity:.35;transform:scale(.985)}}
.vis .chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 18px 0}
.vis .chips span{background:var(--bg2);border-radius:999px;padding:5px 11px;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--ink2)}
.vis .chips span b{color:var(--ink);font-weight:600}
.vis .vfoot{padding:12px 18px 16px;font-size:12px;color:var(--ink3);line-height:1.45}
.paso8 .card>header{padding-bottom:4px}
@media(max-width:1020px){
  .vis .vtoggle{display:flex}
  .vis .vbody{display:none}
  .vis.open .vbody{display:block}
}

/* Paso 8 · Tu presupuesto */
.paso8{margin-top:10px}
.paso8 .p8{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:0}
.paso8 .p8>*{min-width:0}
.paso8 .p8 .tblwrap{border-right:1px solid var(--line)}
.paso8 .side{padding:22px 24px 26px;background:var(--bg2)}
.paso8 .side .lines div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:14.5px;color:var(--ink2);font-variant-numeric:tabular-nums;border-bottom:1px solid var(--line)}
.paso8 .side .lines div b{color:var(--ink);font-weight:600;white-space:nowrap}
.paso8 .side .lines small{display:block;font-size:12px;color:var(--ink3);margin-top:2px}
.paso8 .total{padding:18px 0 4px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.paso8 .total small{display:block;color:var(--ink2);font-size:13px;line-height:1.3;max-width:160px}
.paso8 .total b{font-size:38px;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1}
.paso8 .actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.paso8 .actions .btn{width:100%}
.cta3{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 18px}
.cta3 .btn{flex:1 1 150px}
.btn.wa{background:#1ebe5d}
.btn.wa:hover{background:#17a24e}
.aviso .cta3{margin:12px 0 0}
.aviso .cta3 .btn{height:40px;font-size:14px;flex:1 1 120px}
@media(max-width:1020px){.paso8 .p8{grid-template-columns:1fr}.paso8 .p8 .tblwrap{border-right:0;border-bottom:1px solid var(--line)}}

.card{background:#fff;border-radius:var(--r2);box-shadow:var(--sh1);margin-bottom:18px;border:1px solid rgba(0,0,0,.04);overflow:hidden}
.card>header{display:flex;align-items:center;gap:14px;padding:20px 24px 0}
.card>header .n{width:30px;height:30px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.card>header h2{font-size:21px;letter-spacing:-.02em}
.card>header small{color:var(--ink3);margin-left:auto;font-size:13px;text-align:right}
.card .body{padding:16px 24px 24px}
.card .strip{height:150px;position:relative;background:var(--steel)}
.card .strip .ph{object-position:center 45%}
.card .strip::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 40%)}
.card .strip+header{margin-top:-28px;position:relative}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.opt{position:relative;border:1.5px solid var(--line);border-radius:18px;padding:14px;cursor:pointer;background:#fff;text-align:left;transition:border-color .2s,box-shadow .3s,transform .3s var(--ease);min-height:44px}
.opt:hover{border-color:var(--line2);box-shadow:var(--sh1);transform:translateY(-2px)}
.opt.on{border-color:var(--acc);box-shadow:0 0 0 3px rgba(211,47,47,.16)}
.opt.on::after{content:"";position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;z-index:2;background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}
.opt b{display:block;font-size:15px;letter-spacing:-.01em;padding-right:24px;line-height:1.25}
.opt span{display:block;font-size:13px;color:var(--ink2);margin-top:4px;line-height:1.35}
.opt.dim{opacity:.62}
.opt.dim:hover{opacity:1}
.opt .ico{width:34px;height:34px;color:var(--ink);margin-bottom:12px}
.opt.pic{padding:0;overflow:hidden}
.opt.pic .th{aspect-ratio:16/10;position:relative;background:var(--steel)}
.opt.pic .th .ph{transition:transform 1s var(--ease)}
.opt.pic:hover .th .ph{transform:scale(1.05)}
.opt.pic .tx{padding:12px 14px 14px}
.opt .rec{position:absolute;top:10px;left:10px;z-index:2;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;background:rgba(255,255,255,.92);color:var(--ok);padding:3px 8px;border-radius:999px}
.opt.pic .th .fb{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.55)}
.opt.pic .th .fb svg{width:34px;height:34px}
.opts.usos{grid-template-columns:repeat(3,1fr)}
.opts.usos .th{aspect-ratio:4/3}
.opts.mont{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.opts.gadd{grid-template-columns:repeat(3,1fr)}
.opt.row{display:flex;gap:14px;align-items:center;padding:12px 14px}
.opt.row .th{width:92px;aspect-ratio:4/3;border-radius:12px;overflow:hidden;position:relative;flex:none;background:var(--steel)}
.opt.row .tx{flex:1;min-width:0}
.opt.row b{padding-right:28px}
.gate{display:flex;gap:10px;align-items:center;margin:8px 0;padding:10px 56px 10px 12px;background:var(--bg2);border-radius:16px;flex-wrap:wrap;position:relative}
.gate .x{position:absolute;right:8px;top:50%;transform:translateY(-50%);margin:0}
.gate .th{width:64px;height:48px;border-radius:10px;overflow:hidden;position:relative;flex:none;background:var(--steel)}
.gate .t{font-weight:700;color:var(--acc);width:30px}
.gate select{height:40px;border-radius:10px;font-size:14px}
.opts.mont .th{aspect-ratio:16/9}
.opts.color{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.opt.col{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px}
.opt.col .sw{flex:none}
.opt.col b{flex:1 1 auto;min-width:0;padding-right:26px;font-size:14px}
.opt.col span:not(.sw){flex-basis:100%;margin-top:-4px;font-size:12px}
.sw{display:inline-block;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.15)}
.sw.big{width:52px;height:52px}
.ral{display:flex;gap:16px;align-items:flex-start;margin-top:12px;padding:14px 16px;background:var(--bg2);border-radius:16px}
.ral input{width:100%;max-width:260px}
.ral label{font-size:12px;color:var(--ink3);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.galt{font-size:13.5px;color:var(--ink2);display:inline-flex;align-items:center;gap:6px;padding:0 4px}
.aviso{margin-top:14px;padding:12px 14px;background:var(--accSoft);border:1px solid #f4c7a8;border-radius:12px;font-size:13.5px;color:#7a3a0d;line-height:1.45}
.aviso.big{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;margin-top:16px;background:#fff6e5;border:2px solid #f0b35c;color:#5c3d05;font-size:14.5px;box-shadow:0 10px 30px -18px rgba(240,179,92,.8)}
.aviso.big svg{width:30px;height:30px;flex:none;color:#d97b00;margin-top:2px}
.aviso.big b{display:block;font-size:16px;letter-spacing:-.01em;margin-bottom:4px;color:#3d2a06}
.aviso.big p{margin:0;line-height:1.5}
.aviso.big p b{display:inline;font-size:inherit;margin:0;color:inherit}
.paso8 .card.fuera>header .n{background:#d97b00}
.paso8 .card.fuera>header h2{color:#5c3d05}
.mbar{flex-wrap:wrap}
.mbar .mnote{flex-basis:100%;text-align:center;font-size:12.5px;font-weight:600;color:var(--accL);padding:2px 6px 6px}
.modal .aviso.big{margin:0 0 14px}
.inforow td{background:#f7f7fa;color:var(--ink2);font-size:13.5px}
.card h3.sub{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-weight:700;margin:0 0 10px}
.card h3.sub small{text-transform:none;letter-spacing:0;font-weight:500;color:var(--ink3);font-size:13px;margin-left:8px}
.tgs{display:grid;gap:10px}
.tg{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;border:1.5px solid var(--line);border-radius:16px;cursor:pointer;transition:border-color .2s,background .2s;min-height:44px}
.tg:hover{border-color:var(--line2)}
.tg:has(input:checked){background:#fff}
.tg:has(input:not(:checked)){background:var(--bg2);border-style:dashed}
.tg:has(input:not(:checked)) .tx b{text-decoration:line-through;color:var(--ink3)}
.tg input{position:absolute;opacity:0;width:1px;height:1px}
.tg .sl{flex:none;width:46px;height:28px;border-radius:999px;background:#c9c9ce;position:relative;transition:background .25s;margin-top:2px}
.tg .sl::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .25s var(--ease)}
.tg input:checked+.sl{background:var(--ok)}
.tg input:checked+.sl::after{transform:translateX(18px)}
.tg input:focus-visible+.sl{outline:3px solid var(--acc);outline-offset:3px}
.tg .tx b{display:block;font-size:14.5px;letter-spacing:-.01em}
.tg .tx span{display:block;font-size:12.5px;color:var(--ink2);margin-top:2px;line-height:1.4}
@media(max-width:700px){.opts.usos{grid-template-columns:1fr 1fr}.opts.gadd{grid-template-columns:1fr}}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:12px 0}
.row label{font-size:12px;color:var(--ink3);text-transform:uppercase;letter-spacing:.1em;font-weight:700;min-width:106px}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:0 16px;height:44px;cursor:pointer;transition:border-color .2s,background .2s,color .2s;font-size:15px}
.seg button:hover{border-color:var(--ink)}
.seg button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.seg button:disabled{opacity:.35;cursor:not-allowed}
input[type=number],select,input[type=text]{font:inherit;border:1.5px solid var(--line);border-radius:12px;padding:0 12px;height:44px;background:#fff;color:inherit;min-width:0;transition:border-color .2s}
input:hover,select:hover{border-color:var(--line2)}
input[type=number]{width:100px}
select{appearance:none;-webkit-appearance:none;padding-right:34px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center/13px no-repeat}
.tramo{display:flex;align-items:center;gap:10px;margin:8px 0;padding:10px 12px;background:var(--bg2);border-radius:16px;flex-wrap:wrap}
.tramo .t{font-weight:700;width:34px;color:var(--acc);font-variant-numeric:tabular-nums}
.tramo .u{color:var(--ink2);font-size:14px}
.tramo .giro{margin-left:auto;font-size:13px;color:var(--ink2);display:flex;align-items:center;gap:8px}
.tramo select{height:40px;border-radius:10px}
.x{border:0;background:none;color:var(--ink3);cursor:pointer;font-size:24px;line-height:1;width:44px;height:44px;border-radius:50%;flex:none;transition:.2s}
.x:hover{background:#fff;color:#c0392b}
.note{font-size:13px;color:var(--ink2);margin-top:10px;line-height:1.45}
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;background:#ededf0;color:var(--ink2);margin-left:6px;vertical-align:middle;font-weight:600;letter-spacing:.01em}
.tag.real{background:#dff3e7;color:var(--ok)}
.tag.mu{background:#fdecd2;color:var(--warn)}

/* Resumen (tarjeta de producto) */
.sum{background:#fff;border-radius:var(--r3);box-shadow:var(--sh2);overflow:hidden;border:1px solid rgba(0,0,0,.05)}
.sum .scene{position:relative;aspect-ratio:16/9;background:var(--steel);overflow:hidden}
@media(max-height:860px) and (min-width:1021px){.sum .scene{aspect-ratio:2/1}.sum .body{padding:16px 22px 18px}.sum .total b{font-size:32px}}
.sum .scene .sl{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.sum .scene .sl.on{opacity:1}
.sum .scene::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,0) 50%);pointer-events:none}
.sum .scene .lab{position:absolute;left:20px;right:20px;bottom:16px;color:#fff;z-index:2;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.sum .scene .lab small{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.9;font-weight:700}
.sum .scene .lab b{font-size:23px;letter-spacing:-.025em;line-height:1.1;display:block;margin-top:2px}
.sum .scene .cap{bottom:auto;top:12px}
.sum .body{padding:20px 22px 22px}
.sum .spec{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;font-size:14px}
.sum .spec small{display:block;color:var(--ink3);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-bottom:1px}
.sum .spec b{font-weight:600;letter-spacing:-.01em}
.sum .lines{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--ink2)}
.sum .lines div{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-variant-numeric:tabular-nums}
.sum .lines b{color:var(--ink);font-weight:600}
.sum .total{margin-top:12px;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.sum .total small{display:block;color:var(--ink2);font-size:13px;line-height:1.3;max-width:170px}
.sum .total b{font-size:36px;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1}
.sum .actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.sum .actions .btn{flex:1 1 auto}
.sum .intsw{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink2);margin-top:16px;cursor:pointer;user-select:none}
.sum .intsw input{width:18px;height:18px;accent-color:var(--ink)}

/* Detalle: planta, alzado, materiales */
.detail{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.detail .full{grid-column:1/-1}
.view{background:#fff;border-radius:var(--r2);box-shadow:var(--sh1);overflow:hidden;border:1px solid rgba(0,0,0,.04)}
.view>header{display:flex;align-items:center;gap:10px;padding:18px 22px 10px;flex-wrap:wrap}
.view>header h3{font-size:19px;letter-spacing:-.02em}
.view>header .tabs{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.view>header .tabs .btn{height:36px;padding:0 13px;font-size:13px}
.view svg.draw{width:100%;height:auto}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));border-top:1px solid var(--line)}
.kpis div{padding:14px 20px;border-right:1px solid var(--line)}
.kpis div:last-child{border-right:0}
.kpis small{display:block;color:var(--ink3);font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.kpis b{font-size:22px;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
@media(max-width:1020px){.detail{grid-template-columns:1fr}}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);font-weight:700;background:var(--bg2)}
td.n,th.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
tbody tr:hover td{background:#fafafc}
.tot td{border-bottom:0;padding:8px 14px}
.tot.big td{font-size:20px;font-weight:700;padding-top:14px;border-top:2px solid var(--ink);letter-spacing:-.02em}
.tblwrap{overflow:auto;-webkit-overflow-scrolling:touch}
@media(max-width:640px){
  .tblwrap table,.tblwrap tbody,.tblwrap tr,.tblwrap td{display:block}
  .tblwrap thead{display:none}
  .tblwrap tr{padding:12px 20px 10px;border-bottom:1px solid var(--line)}
  .tblwrap td{border:0;padding:0 0 4px}
  .tblwrap td.n{display:inline-block;text-align:left;margin-right:16px;color:var(--ink2);font-size:13.5px}
  .tblwrap td.n::before{content:attr(data-l) " ";color:var(--ink3);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
  .tblwrap td.n:last-child{color:var(--ink);font-weight:600}
  .tblwrap tbody tr:hover td{background:none}
  .opts,.opts.tipos{grid-template-columns:1fr 1fr!important}
  .opts.gadd{grid-template-columns:1fr!important}
  .opt.row b{padding-right:0}
  .opt b{font-size:14px}.opt span{font-size:12.5px}
  .card>header,.card .body{padding-left:18px;padding-right:18px}
  .tot td{padding-left:20px;padding-right:20px}
  .paso8 .card>header small{display:none}
}
@media(max-width:1020px){.config{padding-bottom:150px}}
@media(max-width:640px){.row label{min-width:100%;padding-top:0!important;margin-bottom:-4px}.row>div[style*='flex:1']{flex-basis:100%}}

/* Usos */
.usos .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.uso{position:relative;display:block;width:100%;border-radius:var(--r3);overflow:hidden;aspect-ratio:4/3;background:var(--steel);color:#fff;cursor:pointer;border:0;padding:0;text-align:left;box-shadow:var(--sh1);transition:transform .5s var(--ease),box-shadow .5s,opacity .9s var(--ease)}
.uso:hover{transform:translateY(-5px);box-shadow:var(--sh2)}
.uso .ph{transition:transform 1.4s var(--ease)}
.uso:hover .ph{transform:scale(1.05)}
.uso::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.18) 50%,rgba(0,0,0,0) 100%)}
.uso .tx{position:absolute;left:24px;right:24px;bottom:22px;z-index:2}
.uso .tx b{display:block;font-size:24px;letter-spacing:-.025em;line-height:1.1}
.uso .tx span{display:block;font-size:14px;color:rgba(255,255,255,.86);margin-top:6px}
.uso .tx i{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:13px;font-weight:600;margin-top:12px;color:var(--accL)}
.uso .cap{bottom:auto;top:12px}
@media(max-width:1020px){.usos .grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.usos .grid{grid-template-columns:1fr}.uso{aspect-ratio:16/10}}

/* Transporte */
.transp{position:relative;overflow:hidden;background:var(--steel)}
.transp .bgph{position:absolute;inset:0;z-index:0}
.transp .bgph .ph{object-position:center 55%}
.transp .bgph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,17,20,.84) 0%,rgba(15,17,20,.72) 50%,rgba(15,17,20,.92) 100%)}
.transp .in{position:relative;z-index:1}
.transp .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px}
.transp .col{background:rgba(27,30,36,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:var(--r2);padding:28px;border:1px solid rgba(255,255,255,.08)}
.transp .col svg{width:40px;height:40px;color:var(--accL);margin-bottom:18px}
.transp .col h3{font-size:21px;margin-bottom:10px;letter-spacing:-.02em}
.transp .col p{color:rgba(255,255,255,.76);font-size:15px;line-height:1.5}
.transp .fine{margin-top:28px;color:rgba(255,255,255,.66);font-size:13.5px;max-width:860px;line-height:1.5}
.transp .cap{position:absolute;right:16px;bottom:12px;z-index:2}
@media(max-width:900px){.transp .cols{grid-template-columns:1fr}}

/* FAQ */
.faq .list{max-width:820px;margin:auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;font-size:19px;font-weight:600;letter-spacing:-.015em;position:relative;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .a{padding:0 0 24px;color:var(--ink2);font-size:16px;line-height:1.55;max-width:720px}

/* CTA final y pie */
.final{text-align:center;padding:130px 0;background:radial-gradient(1200px 500px at 50% 120%,#4a1c1c 0%,var(--dark) 60%)}
.final h2{font-size:clamp(36px,5.4vw,72px);letter-spacing:-.035em}
.final p{color:rgba(255,255,255,.7);font-size:clamp(17px,1.5vw,21px);margin:20px auto 36px;max-width:620px}
footer{background:var(--dark);color:rgba(255,255,255,.65);font-size:14px;border-top:1px solid rgba(255,255,255,.08)}
footer .in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr 1fr;gap:24px;padding:56px 24px 28px}

footer h4{color:#fff;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;font-weight:700}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin:8px 0}
footer a:hover,footer .lnk:hover{color:#fff}
footer .lnk{background:none;border:0;padding:0;color:inherit;cursor:pointer;font:inherit}
footer .copy{border-top:1px solid rgba(255,255,255,.08);padding:18px 24px 28px;font-size:12.5px;color:rgba(255,255,255,.45);text-align:center}
footer .copy .in{display:block;padding:0}
@media(max-width:900px){footer .in{grid-template-columns:1fr 1fr}}
@media(max-width:520px){footer .in{grid-template-columns:1fr}}

/* Barra móvil */
.mbar{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:40;background:rgba(26,29,32,.95);color:#fff;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:20px;padding:10px;display:none;align-items:center;gap:10px;box-shadow:0 24px 48px -16px rgba(0,0,0,.55);transform:translateY(130%);transition:transform .45s var(--ease)}
.mbar.show{transform:none}
.mbar .btn{flex:1;height:46px;padding:0 14px}
.mbar .btn.ghostw{border-color:rgba(255,255,255,.25)}
@media(max-width:1020px){.mbar{display:flex}}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(10,12,16,.6);display:grid;place-items:center;padding:20px;z-index:60;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fade .25s}
.modal .box{background:#fff;border-radius:26px;max-width:680px;width:100%;max-height:90vh;overflow:auto;padding:28px;box-shadow:var(--sh2);animation:pop .4s var(--ease)}
.modal h2{font-size:26px;margin-bottom:6px}
.modal .sub{color:var(--ink2);font-size:14px;margin-bottom:16px}
.modal pre{background:var(--bg2);border-radius:14px;padding:16px;white-space:pre-wrap;font-size:12.5px;max-height:300px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.5}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.98)}}

/* Animaciones de entrada */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .hero .up{opacity:1;transform:none}
  .hero .ph{transform:none}
}

/* páginas interiores */
.pg-hero{position:relative;min-height:62svh;display:flex;align-items:flex-end;overflow:hidden;color:#fff;background:var(--steel)}
.pg-hero .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.pg-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,12,18,.88) 0%,rgba(8,12,18,.35) 55%,rgba(8,12,18,.15) 100%)}
.pg-hero .in{position:relative;z-index:2;padding-top:140px;padding-bottom:64px}
.pg-hero h1{font-size:clamp(34px,5.2vw,64px);letter-spacing:-.03em;line-height:1.04;max-width:900px}
.pg-hero .lead{font-size:clamp(17px,1.5vw,21px);max-width:720px;margin-top:20px;color:rgba(255,255,255,.9);line-height:1.45}
.pg-hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.crumbs{font-size:13px;color:#cfd4da;margin-bottom:18px}.crumbs a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.art{padding:80px 0}.art .in{max-width:880px}
.art h2{font-size:clamp(26px,3vw,38px);letter-spacing:-.025em;margin:48px 0 14px}.art h2:first-child{margin-top:0}
.art p{font-size:17px;line-height:1.65;color:var(--ink2);margin:0 0 16px}
.art ul{margin:0 0 18px;padding-left:22px;color:var(--ink2);line-height:1.65;font-size:17px}.art li{margin-bottom:6px}
.art strong{color:var(--ink)}
.specs{width:100%;border-collapse:collapse;margin:8px 0 24px;font-size:16px;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh1)}
.specs th,.specs td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line)}.specs th{width:38%;color:var(--ink);font-weight:600;background:var(--bg2)}.specs td{color:var(--ink2)}
.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:20px}
.rel a{display:block;background:#fff;border-radius:var(--r2);overflow:hidden;box-shadow:var(--sh1);transition:transform .3s var(--ease)}.rel a:hover{transform:translateY(-4px)}
.rel img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}.rel span{display:block;padding:14px 18px 18px;font-weight:600;font-size:17px;line-height:1.25}.rel small{display:block;font-weight:400;color:var(--ink2);margin-top:4px;font-size:14px}
.cta-band{background:var(--accSoft);border-radius:var(--r2);padding:28px 30px;margin:36px 0}.cta-band p{margin:0 0 16px;color:var(--ink)}
.faq{padding:80px 0}
footer .in{grid-template-columns:2fr 1fr 1fr 1fr}
@media(max-width:900px){footer .in{grid-template-columns:1fr 1fr}}@media(max-width:520px){footer .in{grid-template-columns:1fr}}