/* Corte Listo · Kit Práctico · página de ventas */
:root{--paper:#FAF8F4;--ink:#1F262E;--mut:#5E6873;--line:#E3DDD2;--or:#E8622A;--or2:#C9501C;--wood:#C59A6B;--soft:#F1ECE3;
--f-tit:Archivo,system-ui,sans-serif;--f-texto:Inter,system-ui,sans-serif;--f-mono:"IBM Plex Mono",ui-monospace,monospace;
--t-xl:clamp(28px,7vw,44px);--t-l:18px;--cacao-2:#3A434C;--verde:#E8622A}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--f-texto);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
.sheet img{width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-left,0px))}
.micro{font:500 12px var(--f-mono);color:var(--mut)}
.aviso-previa{background:var(--ink);color:#fff;text-align:center;font:500 12px var(--f-mono);padding:8px}
.pendiente{background:#FBE3DA;color:#B23A0E;border-radius:4px;padding:1px 5px;margin-left:4px;font-size:11px}

/* barra superior */
.bar{display:flex;justify-content:space-between;align-items:center;padding-top:14px;padding-bottom:14px;font:500 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.bar b{color:var(--ink);font:800 15px var(--f-tit);letter-spacing:0;text-transform:none}
.pill{border:1.5px solid var(--ink);border-radius:99px;padding:5px 10px;color:var(--ink)}

/* hero */
.hero{display:grid;gap:22px;padding-top:14px;padding-bottom:34px}
.kick{font:500 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--or);display:flex;gap:8px;align-items:center}
.kick:before{content:"";width:18px;height:2px;background:var(--or)}
h1{font:800 clamp(36px,9.4vw,62px)/.98 var(--f-tit);letter-spacing:-.03em;margin:12px 0 14px}
h1 em{font-style:normal;color:var(--or)}
.sub{font-size:17px;line-height:1.5;color:var(--mut);max-width:520px}
.sub b{color:var(--ink);font-weight:600}
.cta{display:flex;width:100%;align-items:center;justify-content:center;gap:10px;background:var(--or);color:#fff;text-decoration:none;border:0;cursor:pointer;
font:800 19px var(--f-tit);padding:19px 22px;border-radius:14px;margin-top:22px;text-align:center;
box-shadow:0 8px 0 -2px var(--or2),0 18px 30px -12px rgba(232,98,42,.55);transition:transform .15s}
.cta:active{transform:translateY(3px)}
.cta[aria-disabled="true"]{opacity:.75;cursor:not-allowed}
.cta-off-nota{font:500 11px var(--f-mono);color:var(--mut);margin-top:10px;text-align:center}
.checks{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:16px;font:500 12px var(--f-mono);color:var(--mut)}
.checks span:before{content:"✓ ";color:var(--or);font-weight:700}
.vis{position:relative;height:400px}
.sheet{position:absolute;background:#fff;border-radius:6px;box-shadow:0 1px 0 var(--line),0 24px 50px -18px rgba(31,38,46,.35);overflow:hidden}
.s1{width:58%;left:40%;top:4%;transform:rotate(5deg)}
.s2{width:56%;left:1%;top:12%;transform:rotate(-6deg)}
.furn{position:absolute;width:46%;left:27%;bottom:0;filter:drop-shadow(0 20px 22px rgba(31,38,46,.25))}
.tag{position:absolute;background:var(--ink);color:#fff;font:500 12px var(--f-mono);padding:6px 9px;border-radius:7px;white-space:nowrap}
.tag b{color:#FFB48F;font-weight:500}
.t1{left:0;bottom:22%}.t2{right:0;bottom:7%}

/* secciones */
.sec{padding:52px 0}
.sec h2{font:800 var(--t-xl)/1.05 var(--f-tit);letter-spacing:-.02em;margin:10px 0 10px}
.sec .lead{color:var(--mut);font-size:16px;max-width:560px}
.osc{background:var(--ink);color:#fff}
.osc .lead{color:#B9C1C9}
.osc .kick{color:#FF9466}.osc .kick:before{background:#FF9466}

/* resultado inmediato */
.hoy{display:grid;gap:12px;margin-top:26px;counter-reset:hoy;padding:0}
.hoy li{list-style:none;display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}
.hoy li:before{counter-increment:hoy;content:counter(hoy);flex:none;width:36px;height:36px;border-radius:50%;background:var(--or);color:#fff;font:800 17px var(--f-tit);display:grid;place-items:center}
.hoy b{font:700 17px var(--f-tit);display:block;margin-bottom:2px}
.hoy span{color:var(--mut);font-size:15px}
.wa{display:grid;gap:18px;align-items:center;margin-top:26px;background:var(--soft);border-radius:18px;padding:20px}
.wa img{border-radius:8px;box-shadow:0 18px 36px -16px rgba(31,38,46,.45);max-height:420px;width:auto;margin:0 auto}
.wa p{font-size:15px;color:var(--cacao-2)}
.wa b{font:700 18px var(--f-tit);display:block;margin-bottom:6px;color:var(--ink)}

/* problema */
.dolor{display:grid;gap:10px;margin-top:22px}
.dolor div{border-left:3px solid var(--or);background:#fff;padding:14px 16px;border-radius:0 12px 12px 0;font-size:15px;color:var(--cacao-2)}
.dolor b{color:var(--ink)}

/* carrusel */
.track-wrap{overflow:hidden;margin-top:26px}
.track{display:flex;gap:16px;width:max-content;animation:slide 60s linear infinite}
.track:hover{animation-play-state:paused}
.card{width:220px;flex:none}
.card img{width:100%;border-radius:8px;box-shadow:0 20px 40px -14px rgba(0,0,0,.6)}
.card div{font:500 11px var(--f-mono);color:#9AA4AD;margin-top:10px;letter-spacing:.04em}
.card div b{color:#fff;font-weight:500}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.track{animation:none}.track-wrap{overflow-x:auto}}
.nota{font:500 11px var(--f-mono);color:#7F8A94;margin-top:20px}

/* muebles */
.muebles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.mueble{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 12px 14px;display:flex;flex-direction:column}
.mueble img{height:130px !important;width:auto;margin:6px auto 10px;object-fit:contain}
.mueble b{font:700 14.5px/1.2 var(--f-tit)}
.mueble span{font:500 11px var(--f-mono);color:var(--mut);margin-top:4px}
.mueble .cod{color:var(--or)}

/* verificación */
.verif{display:grid;gap:10px;margin-top:22px}
.verif div{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--cacao-2)}
.verif div:before{content:"✓";flex:none;width:26px;height:26px;border-radius:8px;background:#E3F1E4;color:#1E6B2E;font-weight:700;display:grid;place-items:center}

/* pasos */
.steps{display:grid;gap:12px;margin-top:22px}
.step{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}
.step .n{font:800 30px var(--f-tit);color:var(--or);width:40px;flex:none}
.step b{font:700 17px var(--f-tit);display:block}
.step span{color:var(--mut);font-size:14px}

/* oferta */
.oferta{background:#fff;border:2px solid var(--ink);border-radius:22px;padding:24px 20px;margin-top:26px;box-shadow:0 26px 50px -30px rgba(31,38,46,.5)}
.oferta h3{font:800 24px/1.1 var(--f-tit)}
.oferta ul{list-style:none;padding:0;margin:16px 0;display:grid;gap:9px}
.oferta li{display:flex;gap:10px;font-size:15px}
.oferta li:before{content:"✓";color:var(--or);font-weight:800}
.precio{display:flex;align-items:baseline;gap:10px;margin-top:6px;border-top:1px dashed var(--line);padding-top:16px}
.precio strong{font:800 46px var(--f-tit);letter-spacing:-.02em}
.precio span{font:500 12px var(--f-mono);color:var(--mut)}
.mini{font:500 11.5px var(--f-mono);color:var(--mut);margin-top:12px;text-align:center}

/* garantía */
.garantia{display:flex;gap:16px;align-items:center;background:var(--soft);border-radius:18px;padding:20px;margin-top:22px}
.garantia .sello{flex:none;width:74px;height:74px;border-radius:50%;border:3px solid var(--ink);display:grid;place-items:center;text-align:center;font:800 13px/1.05 var(--f-tit)}
.garantia .sello b{display:block;font-size:26px}
.garantia p{font-size:15px;color:var(--cacao-2)}

/* faq */
.faq{margin-top:22px;display:grid;gap:10px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 16px}
.faq summary{font:700 16px var(--f-tit);padding:12px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--or);font-size:22px;line-height:1}
.faq details[open] summary:after{content:"–"}
.faq p{color:var(--cacao-2);font-size:15px;padding:0 0 14px}

.cta-final{text-align:center}
.cta-final h2{max-width:640px;margin-left:auto;margin-right:auto}

/* pie */
.pie{padding:30px 0 40px;border-top:1px solid var(--line);text-align:center;font-size:13px;color:var(--mut)}
.pie a{color:var(--mut)}
.pie-sep{margin:0 8px}
.pie-vendedor{margin-top:8px;font:500 11px var(--f-mono)}

/* barra fija celular */
.barra-fija{position:fixed;left:0;right:0;bottom:0;z-index:20;background:rgba(250,248,244,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:10px max(16px,env(safe-area-inset-left,0px)) calc(10px + env(safe-area-inset-bottom,0px))}
.barra-fija .cta{margin-top:0;padding:15px 18px;font-size:17px;box-shadow:0 5px 0 -1px var(--or2)}
.barra-fija .cta-off-nota{display:none}
body.con-barra{padding-bottom:84px}

@media(min-width:900px){
 .hero{grid-template-columns:1.05fr 1fr;align-items:center;padding-top:40px;padding-bottom:60px}
 .vis{height:540px}
 .cta{display:inline-flex;width:auto;padding:20px 34px}
 #compra-hero .cta{min-width:420px}
 .hoy{grid-template-columns:repeat(2,1fr)}
 .wa{grid-template-columns:1fr 1.2fr;padding:30px}
 .card{width:270px}
 .muebles{grid-template-columns:repeat(4,1fr)}
 .steps{grid-template-columns:repeat(3,1fr)}
 .oferta{max-width:560px;margin-left:auto;margin-right:auto;padding:32px}
 .oferta .cta{width:100%}
 .barra-fija{display:none}
 .dolor,.verif{grid-template-columns:repeat(3,1fr)}
}