:root {
  --bg:#EEF2F1; --surface:#FFFFFF; --ink:#132226; --ink-soft:#4C5D60;
  --line:#D3DEDC; --copper:#C1602E; --copper-soft:#F4E3D6;
  --teal:#177E82; --teal-soft:#DCEFEE; --good:#2F8F4E; --good-soft:#E1F3E6;
  --wa:#1F9D55;
  --radius:14px;
  --display:"Big Shoulders Display", "Arial Narrow", sans-serif;
  --sans:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.55 var(--sans); -webkit-text-size-adjust:100%; }
img, svg { max-width:100%; height:auto; display:block; }
a { color:var(--teal); }
h1, h2, h3 { font-family:var(--display); line-height:1.05; margin:0 0 .5em; letter-spacing:.01em; }
h1 { font-size:clamp(2.4rem, 7vw, 4.2rem); font-weight:800; }
h2 { font-size:clamp(1.9rem, 4.6vw, 2.8rem); font-weight:800; }
h3 { font-size:1.45rem; font-weight:700; }
p { margin:0 0 1em; }
.wrap { max-width:1100px; margin:0 auto; padding:0 16px; }
section { padding:56px 0; }
.eyebrow { font:500 .78rem/1 var(--mono); text-transform:uppercase; letter-spacing:.12em; color:var(--copper); margin-bottom:12px; display:block; }
.lead { font-size:1.12rem; color:var(--ink-soft); max-width:60ch; }
.tenue { color:var(--ink-soft); }

/* Encabezado */
.top { position:sticky; top:0; z-index:20; background:rgba(238,242,241,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.top .wrap { display:flex; align-items:center; justify-content:space-between; gap:12px; height:64px; }
.marca { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.mono-t { width:36px; height:36px; border-radius:50%; background:var(--copper); color:#fff; display:grid; place-items:center; font:800 1.25rem/1 var(--display); flex:none; }
.marca b { font:800 1.3rem/1 var(--display); letter-spacing:.02em; }
.marca small { display:block; font:500 .7rem/1.2 var(--mono); color:var(--ink-soft); text-transform:uppercase; letter-spacing:.08em; }

/* Botones */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 20px; border-radius:999px; font:600 1rem/1 var(--sans); text-decoration:none; border:2px solid transparent; cursor:pointer; transition:transform .12s, background .12s; }
.btn:active { transform:scale(.98); }
.btn-copper { background:var(--copper); color:#fff; }
.btn-copper:hover { background:#A9511F; }
.btn-wa { background:var(--wa); color:#fff; }
.btn-wa:hover { background:#18834A; }
.btn-line { border-color:var(--ink); color:var(--ink); background:transparent; }
.btn-sm { padding:10px 14px; font-size:.92rem; }
.btn.apagado { opacity:.45; cursor:not-allowed; }
.wa-ico { width:18px; height:18px; flex:none; }

/* Portada */
.hero { padding:40px 0 48px; }
.hero .wrap { display:grid; gap:32px; align-items:center; }
@media (min-width:880px) { .hero .wrap { grid-template-columns:1.1fr .9fr; } }
.hero h1 em { font-style:normal; color:var(--copper); }
.hero .ctas { display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 18px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0; list-style:none; }
.chips li { background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:6px 12px; font:500 .85rem/1.2 var(--mono); }
.hero-fig { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; }
.hero-fig figcaption { font:.82rem/1.4 var(--mono); color:var(--ink-soft); margin-top:10px; }

/* Ficha citable */
.ficha { background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px 0; }
.ficha dl { display:grid; gap:14px 28px; margin:0; }
@media (min-width:720px) { .ficha dl { grid-template-columns:repeat(3, 1fr); } }
.ficha dt { font:500 .74rem/1 var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--teal); margin-bottom:4px; }
.ficha dd { margin:0; font-size:.98rem; }

/* Tarjetas */
.grid { display:grid; gap:16px; }
@media (min-width:640px) { .grid-2 { grid-template-columns:repeat(2, 1fr); } .grid-4 { grid-template-columns:repeat(2, 1fr); } }
@media (min-width:980px) { .grid-4 { grid-template-columns:repeat(4, 1fr); } }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; }
.card .ico { width:44px; height:44px; border-radius:12px; background:var(--teal-soft); color:var(--teal); display:grid; place-items:center; margin-bottom:14px; }
.card .ico svg { width:24px; height:24px; }
.card p:last-child { margin-bottom:0; }
.card h3 { margin-bottom:.35em; }

/* Sistemas */
.sistema { display:flex; flex-direction:column; }
.sistema .esq { background:var(--bg); border-radius:10px; padding:10px; margin-bottom:16px; }
.sistema .tag { align-self:flex-start; font:600 .74rem/1 var(--mono); text-transform:uppercase; letter-spacing:.08em; padding:6px 10px; border-radius:999px; background:var(--good-soft); color:var(--good); margin-bottom:10px; }
.sistema .tag.prov { background:var(--copper-soft); color:var(--copper); }
.sistema .medir { margin-top:auto; padding-top:12px; border-top:1px dashed var(--line); font-size:.92rem; color:var(--ink-soft); }
.sistema .medir b { color:var(--ink); }

/* Cotizador */
.cotizador { background:var(--ink); color:#E9F0EF; }
.cotizador h2, .cotizador .lead { color:#fff; }
.cotizador .lead { opacity:.85; }
.cot-grid { display:grid; gap:20px; margin-top:24px; }
@media (min-width:960px) { .cot-grid { grid-template-columns:1.35fr .9fr; align-items:start; } }
.panel { background:var(--surface); color:var(--ink); border-radius:var(--radius); padding:20px; }
.panel label.campo { display:block; font:600 .82rem/1.2 var(--sans); margin-bottom:6px; }
select, input[type=number], input[type=text] { width:100%; font:1rem var(--sans); padding:12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); }
select:focus, input:focus { outline:2px solid var(--teal); outline-offset:1px; }
.zona { margin-bottom:16px; }
.ventana { border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:12px; background:#FBFCFC; }
.ventana-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.num { font:700 1.2rem/1 var(--display); }
.quitar { background:none; border:0; color:var(--ink-soft); font:.88rem var(--sans); cursor:pointer; text-decoration:underline; padding:4px; }
.fila-campos { display:grid; grid-template-columns:1fr 1fr 84px; gap:10px; margin-top:10px; }
.ayuda { font-size:.86rem; color:var(--teal); background:var(--teal-soft); border-radius:8px; padding:8px 10px; margin:10px 0 0; }
.colores { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.colores label { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; padding:7px 12px; font-size:.9rem; cursor:pointer; background:#fff; }
.colores input { accent-color:var(--copper); }
.colores label:has(input:checked) { border-color:var(--copper); background:var(--copper-soft); }
.instala { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:.95rem; }
.instala input { width:20px; height:20px; accent-color:var(--copper); }
.precio-linea { margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); }
.precio-linea b { font:600 1.35rem/1 var(--mono); }
.precio-linea small { display:block; color:var(--ink-soft); margin-top:4px; font-size:.84rem; }
.pendiente { font:600 1rem/1 var(--mono); color:var(--copper); }
#agregar { width:100%; margin-top:4px; }
.resumen-panel { position:sticky; top:80px; }
.resumen-panel h3 { margin-bottom:12px; }
.fila { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:.95rem; }
.fila span:last-child { font-family:var(--mono); white-space:nowrap; }
.fila.total { border-bottom:0; font-weight:700; font-size:1.05rem; padding-top:14px; }
.fila.total span:last-child { font-size:1.4rem; color:var(--copper); }
.nota { font-size:.86rem; color:var(--ink-soft); margin:10px 0 0; }
.aviso { font-size:.85rem; color:var(--ink-soft); background:var(--bg); border-radius:10px; padding:10px 12px; margin:14px 0; }
#enviar-wa { width:100%; }

/* Precios */
.tabla-wrap { overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
table { width:100%; border-collapse:collapse; min-width:560px; }
th, td { text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font:500 .74rem/1.2 var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); background:#F7F9F9; }
td.precio { font:600 1.02rem var(--mono); white-space:nowrap; }
td small { display:block; color:var(--ink-soft); font-size:.84rem; }
tr:last-child td { border-bottom:0; }
.link-btn { background:none; border:0; padding:0; color:var(--teal); font:600 .9rem var(--sans); text-decoration:underline; cursor:pointer; }
.extras { margin-top:18px; color:var(--ink-soft); font-size:.95rem; }

/* Pasos */
.pasos { list-style:none; padding:0; margin:24px 0 0; counter-reset:p; display:grid; gap:12px; }
@media (min-width:760px) { .pasos { grid-template-columns:repeat(2, 1fr); } }
.pasos li { counter-increment:p; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 16px 16px 64px; position:relative; }
.pasos li::before { content:counter(p); position:absolute; left:16px; top:14px; width:34px; height:34px; border-radius:50%; background:var(--teal-soft); color:var(--teal); display:grid; place-items:center; font:700 1.1rem/1 var(--display); }
.pasos b { display:block; }
.pasos .plazo { font:500 .78rem/1.2 var(--mono); color:var(--copper); }

/* FAQ */
.faq { max-width:780px; }
.faq h3 { font-family:var(--sans); font-size:1.08rem; font-weight:700; line-height:1.35; margin:26px 0 6px; }
.faq p { color:var(--ink-soft); }

/* Guía */
.guia h3 { margin-top:8px; }
.guia ul { padding-left:1.2em; margin:0 0 1em; }
.guia li { margin-bottom:.4em; }

/* Pie */
footer { background:var(--ink); color:#C9D5D3; padding:40px 0; font-size:.92rem; }
footer a { color:#fff; }
footer .wrap { display:grid; gap:20px; }
@media (min-width:760px) { footer .wrap { grid-template-columns:1.4fr 1fr 1fr; } }
footer h4 { font:500 .74rem/1 var(--mono); text-transform:uppercase; letter-spacing:.1em; color:#8FA3A0; margin:0 0 10px; }
footer ul { list-style:none; padding:0; margin:0; }
footer li { margin-bottom:6px; }

/* Botón flotante WhatsApp (móvil) */
.wa-float { position:fixed; right:16px; bottom:16px; z-index:30; width:56px; height:56px; border-radius:50%; background:var(--wa); display:grid; place-items:center; box-shadow:0 6px 18px rgba(0,0,0,.2); }
.wa-float svg { width:28px; height:28px; }
@media (min-width:960px) { .wa-float { display:none; } }

/* Seguimiento de pedido */
.estado-head { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:20px; }
.estado-head .codigo { font:600 .9rem var(--mono); color:var(--teal); }
.estado-head .prometida { font:700 1.6rem/1.1 var(--display); margin-top:6px; }
.demo { background:var(--copper-soft); color:#7A3B18; border-radius:10px; padding:10px 14px; font-size:.9rem; margin-bottom:18px; }
.timeline { list-style:none; margin:0; padding:0; }
.timeline li { position:relative; padding:0 0 22px 60px; min-height:56px; }
.timeline li::before { content:""; position:absolute; left:21px; top:44px; bottom:0; width:2px; background:var(--line); }
.timeline li:last-child::before { display:none; }
.timeline li.hecho::before { background:var(--good); }
.timeline .punto { position:absolute; left:0; top:0; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; border:2px solid var(--line); background:var(--surface); color:#9AAAA8; }
.timeline .punto svg { width:22px; height:22px; }
.timeline li.hecho .punto { background:var(--good); border-color:var(--good); color:#fff; }
.timeline li.actual .punto { background:var(--copper); border-color:var(--copper); color:#fff; box-shadow:0 0 0 6px var(--copper-soft); }
.timeline details { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.timeline li.actual details { border-color:var(--copper); }
.timeline summary { cursor:pointer; list-style:none; }
.timeline summary::-webkit-details-marker { display:none; }
.timeline .nombre { font-weight:700; display:block; }
.timeline .cuando { font:500 .82rem/1.3 var(--mono); color:var(--ink-soft); }
.timeline li.hecho .cuando { color:var(--good); }
.timeline li.actual .cuando { color:var(--copper); }
.timeline .detalle { margin-top:10px; font-size:.92rem; color:var(--ink-soft); }
.timeline .corrida { font-size:.85rem; color:var(--copper); margin-top:4px; }
.wa-corto { display:none; }
@media (max-width:560px) {
  .wa-largo { display:none; } .wa-corto { display:inline; }
  .marca b { font-size:1.15rem; } .marca small { display:none; }
}
section[id] { scroll-margin-top:72px; }