/* SIPTERMO · identidad de SIP Termo Home (siptermo.cl) · Creado y desarrollado por INVERTECNO.CL (https://invertecno.cl)
   Verde del logo #10681E, carbón #2B2B2D y verde lima de sus banners. Tipografía condensada como en su publicidad. */
:root{
  --bg:#F4F6F3; --surface:#FFFFFF; --surface2:#ECF1EA; --ink:#2B2B2D; --muted:#5C635E; --line:#DCE3D8;
  --accent:#10681E; --accent-ink:#FFFFFF; --accent-2:#0B5016; --hl:#D4F29B; --hl-ink:#173300;
  --teal:#10681E; --teal-soft:#E1F0DF; --danger:#C0352B; --ok:#1E7A32; --warn:#A05F00;
  --plan:#EFF3EC; --grid:#DFE6DA; --grid2:#CBD6C4; --wall:#2B2B2D;
  --bar:#2B2B2D; --bar-ink:#FFFFFF; --osb:#C99A5B; --hero-ink:#F6F7F4;
  --f-display:"Barlow Condensed","Arial Narrow","Roboto Condensed",system-ui,sans-serif;
  --f-body:"Open Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --shadow:0 1px 2px rgba(20,30,20,.06), 0 10px 28px rgba(20,30,20,.09);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#101411; --surface:#171D18; --surface2:#1F2720; --ink:#ECEFEA; --muted:#A1ABA3; --line:#2C372E;
  --accent:#237F33; --accent-ink:#FFFFFF; --accent-2:#1D6B2B; --hl:#C9EE8A; --hl-ink:#173300;
  --teal:#5CC06B; --teal-soft:#183021; --danger:#E46E61; --ok:#6CC08F; --warn:#F0A64A;
  --plan:#131A14; --grid:#1C251D; --grid2:#283429; --wall:#ECEFEA; --bar:#0C0F0C; --bar-ink:#FFFFFF;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.4); color-scheme:dark; } }
:root[data-theme="dark"]{
  --bg:#101411; --surface:#171D18; --surface2:#1F2720; --ink:#ECEFEA; --muted:#A1ABA3; --line:#2C372E;
  --accent:#237F33; --accent-ink:#FFFFFF; --accent-2:#1D6B2B; --hl:#C9EE8A; --hl-ink:#173300;
  --teal:#5CC06B; --teal-soft:#183021; --danger:#E46E61; --ok:#6CC08F; --warn:#F0A64A;
  --plan:#131A14; --grid:#1C251D; --grid2:#283429; --wall:#ECEFEA; --bar:#0C0F0C; --bar-ink:#FFFFFF;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.4); color-scheme:dark; }
body{background:var(--bg);font-family:var(--f-body)}
h1,h2,h3,h4{font-family:var(--f-display);letter-spacing:0;font-weight:800}
h1{text-transform:none}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.eyebrow{font-family:var(--f-body);font-weight:800;color:var(--teal);letter-spacing:.14em}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btn{border-radius:10px;font-weight:700}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-2)}
.btn-light{background:#fff;color:#10681E}
.btn-light:hover{background:#F1F7EE}
.btn-lg{padding:14px 24px;font-size:1rem}
.btn-ghost.on-dark{color:#F6F7F4;border-color:rgba(246,247,244,.45)}
.btn-ghost.on-dark:hover{border-color:#F6F7F4;background:rgba(246,247,244,.08)}
.eyebrow.on-dark{color:var(--hl)}
.link-btn{border:0;background:none;padding:0;color:var(--muted);font-size:.82rem;cursor:pointer;text-decoration:underline}
.section.tight{padding-block:clamp(28px,4vw,52px)}
.price{font-family:var(--f-body);font-weight:800}

/* Barra superior, cabecera y categorías */
.topbar{background:var(--accent);color:#fff;font-size:.8rem}
.topbar .wrap{display:flex;align-items:center;gap:16px;min-height:34px;flex-wrap:wrap;justify-content:space-between}
.tb-item{display:inline-flex;align-items:center;gap:6px}
.tb-item svg.i{width:15px;height:15px}
.tb-item a{color:#fff;text-decoration:none;font-weight:700}
.tb-mid{font-weight:600;opacity:.95}
.tb-sep{opacity:.6;margin:0 6px}
@media (max-width:900px){ .topbar .tb-item:first-child,.tb-mid{display:none} .topbar .wrap{justify-content:center} }
header.top{background:var(--surface);border-bottom:0;backdrop-filter:none;box-shadow:0 2px 10px rgba(20,30,20,.06)}
header.top .hrow{display:flex;align-items:center;gap:22px;height:auto;padding-block:10px}
.brand-logo{height:58px;width:auto;display:block}
#brand-link{flex:none;background:#fff;border-radius:10px;padding:2px 6px}
.hsearch{flex:1;display:flex;max-width:640px;border:2px solid var(--accent);border-radius:12px;overflow:hidden;background:var(--surface)}
.hsearch input{flex:1;border:0;padding:11px 14px;font-size:.95rem;background:none;min-width:0}
.hsearch input:focus{outline:none}
.hsearch button{border:0;background:var(--accent);color:#fff;width:52px;display:grid;place-items:center;cursor:pointer}
.hsearch button svg.i{width:20px;height:20px}
.top-actions{gap:6px}
.hact{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:8px 10px;border-radius:10px;cursor:pointer;text-decoration:none;color:var(--ink);font-weight:700;font-size:.9rem;position:relative}
.hact:hover{background:var(--surface2)}
.hact svg.i{width:24px;height:24px;color:var(--accent)}
.hact small{display:block;font-weight:500;color:var(--muted);font-size:.72rem}
.catbar{background:var(--bar);color:var(--bar-ink)}
.catbar .wrap{display:flex;align-items:stretch;gap:6px;min-height:46px}
.cat-toggle{display:inline-flex;align-items:center;gap:8px;border:0;background:var(--accent);color:#fff;font-weight:800;padding:0 18px;cursor:pointer;font-size:.92rem;text-transform:uppercase;letter-spacing:.04em}
.cat-toggle[aria-expanded="true"]{background:var(--accent-2)}
.catbar nav.main{display:flex!important;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1;align-items:center}
.catbar nav.main::-webkit-scrollbar{display:none}
.catbar nav.main a{color:rgba(255,255,255,.86);text-transform:uppercase;font-size:.84rem;font-weight:700;letter-spacing:.03em;padding:12px 12px;border-radius:0;white-space:nowrap;border-bottom:3px solid transparent}
.catbar nav.main a:hover{background:rgba(255,255,255,.08);color:#fff}
.catbar nav.main a[aria-current="page"]{background:transparent;color:#fff;border-bottom-color:var(--hl)}
.menu-btn{display:none!important}
.cat-menu{background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow);position:relative;z-index:49}
.cm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px;padding-block:14px}
.cm-grid button{display:flex;gap:12px;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:12px;cursor:pointer;text-align:left}
.cm-grid button:hover{border-color:var(--accent);background:var(--teal-soft)}
.cm-grid svg.i{width:26px;height:26px;color:var(--accent);flex:none}
.cm-grid small{display:block;color:var(--muted);font-size:.78rem}
@media (max-width:820px){
  header.top .hrow{flex-wrap:wrap;gap:10px}
  .brand-logo{height:46px}
  .hsearch{order:3;flex-basis:100%;max-width:none}
  .top-actions{margin-left:auto}
  .cat-toggle span{display:none}
  .menu-btn{display:inline-grid!important}
}
.logo-chip{display:inline-block;background:#fff;border-radius:12px;padding:6px 10px}
.foot-logo{height:86px;width:auto;display:block}
.drawer-logo{height:44px;width:auto;display:block}
.foot-brand{display:flex;flex-direction:column;gap:14px;max-width:38ch}
.foot-contact{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.9rem}
.foot-contact li{display:flex;gap:8px;align-items:flex-start}
.foot-contact svg.i{color:var(--accent);flex:none;margin-top:2px}
.foot-contact a{text-decoration:none}
.foot-contact a:hover{text-decoration:underline}

/* Carrusel de banners */
.hero-car{background:var(--surface);padding-block:14px}
.car{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:3/1;max-width:100%;background:var(--surface2)}
.car-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;border:0;padding:0;cursor:pointer;background:none;display:block;width:100%}
.car-slide.on{opacity:1;z-index:1}
.car-slide img{width:100%;height:100%;object-fit:cover;display:block}
.car-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#2B2B2D;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.car-nav.prev{left:12px}.car-nav.next{right:12px}
.car-dots{display:flex;justify-content:center;gap:8px;margin-top:10px}
.car-dots button{width:26px;height:26px;border:0;background:none;cursor:pointer;padding:8px;display:grid;place-items:center}
.car-dots button::before{content:"";width:10px;height:10px;border-radius:999px;background:var(--grid2);transition:width .2s}
.car-dots button[aria-current]{width:44px}
.car-dots button[aria-current]::before{width:28px;background:var(--accent)}
@media (max-width:640px){ .car{border-radius:12px} .car-nav{display:none} .hero-car{padding-block:10px} }
@media (prefers-reduced-motion: reduce){ .car-slide{transition:none} }

/* Promociones */
.promo-grid{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto;gap:12px}
.promo{border:0;padding:0;border-radius:14px;overflow:hidden;cursor:pointer;background:var(--surface);aspect-ratio:1/1;max-width:100%;box-shadow:var(--shadow);transition:transform .2s}
.promo:hover{transform:translateY(-3px)}
.promo img{width:100%;height:100%;object-fit:cover;display:block}
.promo.big{grid-row:span 2;aspect-ratio:auto}
@media (max-width:820px){ .promo-grid{grid-template-columns:1fr 1fr} .promo.big{grid-column:span 2;grid-row:auto;aspect-ratio:1/1} }

/* Banda de diseño 3D */
.design-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:center;border-radius:22px;padding:clamp(22px,4vw,48px);background:linear-gradient(120deg,#0B4F15,#10681E 55%,#165E1B);color:#fff}
.db-copy{display:flex;flex-direction:column;gap:16px;min-width:0}
.db-copy h2{color:#fff}
.db-copy p{color:rgba(255,255,255,.85);max-width:54ch}
@media (max-width:900px){ .design-band{grid-template-columns:1fr} }

/* Servicios */
.svc-strip{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.svc-card{position:relative;border-radius:16px;overflow:hidden;text-decoration:none;color:#fff;display:block;aspect-ratio:16/10;max-width:100%}
.svc-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.svc-card:hover img{transform:scale(1.03)}
.svc-card span{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;background:linear-gradient(transparent,rgba(10,20,10,.88) 40%);display:flex;flex-direction:column;gap:2px}
.svc-card b{font-family:var(--f-display);font-size:1.4rem}
.svc-card small{opacity:.85}
.svc-fig{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.svc-fig img{width:100%;display:block}
.wide-ban{width:100%;border-radius:16px;display:block}
@media (max-width:760px){ .svc-strip{grid-template-columns:1fr} }

/* Contacto */
.visit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.visit h2{margin:8px 0 10px}
.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.cc{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);text-decoration:none;color:var(--ink);min-width:0}
a.cc:hover{border-color:var(--accent)}
.cc>svg.i{width:26px;height:26px;color:var(--accent);flex:none}
.cc small{display:block;color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.cc b{display:block;font-size:.95rem;overflow-wrap:anywhere}
@media (max-width:860px){ .visit{grid-template-columns:1fr} }
@media (max-width:480px){ .contact-cards{grid-template-columns:1fr} }

/* Carro en la cabecera */
.cart-btn{position:relative}
.cart-count{position:absolute;top:0;right:0;min-width:20px;height:20px;border-radius:999px;background:var(--danger);color:#fff;font:700 .72rem/20px var(--f-mono);text-align:center;padding:0 5px;box-shadow:0 0 0 2px var(--surface)}

/* Hero del inicio con fotografía */
.home-hero{position:relative;color:var(--hero-ink);background:#141917;isolation:isolate;overflow:hidden}
.home-hero::before{content:"";position:absolute;inset:0;background:var(--hero) center/cover no-repeat;z-index:-2;transform:scale(1.03)}
.home-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(17,22,20,.94) 0%,rgba(17,22,20,.82) 42%,rgba(17,22,20,.35) 100%)}
.home-hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:44px;align-items:center;padding-block:clamp(48px,7vw,96px)}
.hh-copy{display:flex;flex-direction:column;gap:22px;min-width:0}
.hh-copy h1{font-size:clamp(2.3rem,5.2vw,4.3rem);color:#fff}
.hh-copy h1 em{font-style:normal;color:var(--hl)}
.hh-copy .lead{font-size:1.12rem;color:rgba(246,244,239,.82);max-width:54ch}
.hh-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;border-top:1px solid rgba(246,244,239,.18);padding-top:18px;margin-top:6px}
.hh-stats b{display:block;font-family:var(--f-display);font-size:1.25rem;color:var(--hl)}
.hh-stats span{font-size:.8rem;color:rgba(246,244,239,.7);line-height:1.3;display:block}
.hh-card{background:var(--surface);color:var(--ink);border-radius:20px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08)}
.hh-stage{position:relative;aspect-ratio:5/4;background:var(--plan)}
.hh-stage canvas{display:block}
.hh-card-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-top:1px solid var(--line);font-size:.9rem}
@media (max-width:920px){ .home-hero-in{grid-template-columns:1fr} .hh-stats{grid-template-columns:repeat(2,minmax(0,1fr))} .home-hero::after{background:linear-gradient(180deg,rgba(17,22,20,.9),rgba(17,22,20,.78))} }

/* Barra de confianza */
.trust{background:var(--surface);border-bottom:1px solid var(--line)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding-block:18px}
.trust .wrap>div{display:flex;gap:12px;align-items:center;min-width:0}
.trust svg.i{width:26px;height:26px;color:var(--teal)}
.trust b{display:block;font-size:.92rem}.trust small{display:block;color:var(--muted);font-size:.8rem}
@media (max-width:820px){ .trust .wrap{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* Recorrido de 4 pasos */
.journey{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.jstep{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:16px;background:var(--surface);border:1px solid var(--line);text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s;min-width:0}
.jstep:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--accent)}
.jstep p{color:var(--muted);font-size:.93rem;flex:1}
.jic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--teal-soft);color:var(--accent)}
.jic svg.i{width:24px;height:24px}
.jstep .link{display:inline-flex;align-items:center;gap:6px;border:0;align-self:flex-start}
@media (max-width:900px){ .journey{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .journey{grid-template-columns:1fr} }

/* Categorías */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr));gap:12px}
.cat-tile{position:relative;aspect-ratio:1/1;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--surface);cursor:pointer;padding:0;text-align:left;transition:transform .2s,box-shadow .2s}
.cat-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.cat-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:14% 14% 34%;background:#fff}
.cat-tile img.cover{object-fit:cover;padding:0}
.cat-tile .ct-ic{position:absolute;inset:0 0 30%;display:grid;place-items:center;background:var(--surface2)}
.cat-tile .ct-ic svg.i{width:46px;height:46px;color:var(--teal)}
.ct-l{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;background:linear-gradient(transparent,rgba(17,22,20,.82) 45%);color:#fff;display:flex;flex-direction:column}
.ct-l small{opacity:.8;font-size:.78rem}

/* Tarjeta de producto */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:16px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;min-width:0;transition:box-shadow .2s,transform .2s}
.pcard:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.pcard-media{position:relative;aspect-ratio:1/1;background:#fff;border:0;padding:0;cursor:pointer;display:block;width:100%;overflow:hidden;border-bottom:1px solid var(--line)}
.pcard-media img{width:100%;height:100%;display:block;object-fit:cover}
.pm-photo{object-fit:contain!important;padding:8%;background:#fff;width:100%;height:100%;display:block}
.pm-ph{width:100%;height:100%;display:grid;place-items:center;align-content:center;gap:8px;background:linear-gradient(135deg,var(--surface2),var(--plan));color:var(--muted);font-size:.8rem;font-weight:600}
.pm-ph .pm-ic{width:42px;height:42px;color:var(--teal)}
.badge-off,.badge-3d{position:absolute;top:10px;font:700 .72rem var(--f-mono);border-radius:999px;padding:4px 9px}
.badge-off{left:10px;background:var(--danger);color:#fff}
.badge-3d{right:10px;background:var(--ink);color:var(--bg);display:inline-flex;gap:4px;align-items:center}.badge-3d svg.i{width:13px;height:13px}
.pcard-body{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1}
.pcard-cat{font:600 .7rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.pcard-body h3{font-size:1rem;line-height:1.25;font-family:var(--f-body);font-weight:700}
.pcard-body h3 a{text-decoration:none}.pcard-body h3 a:hover{text-decoration:underline}
.pcard-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.75rem}
.pcard-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:auto}
.pcard-price b{font-family:var(--f-body);font-weight:800;font-size:1.3rem;color:var(--teal)}
.pcard-price s{color:var(--muted);font-size:.85rem}
.pcard-price .muted{font-size:.8rem}
.pcard-buy{display:flex;gap:8px;align-items:center}
.pcard-buy .btn{flex:1}
.badge-s{font-size:.72rem;font-weight:700;padding:3px 8px;border-radius:999px}
.b-ok{background:var(--teal-soft);color:var(--teal)}.b-low{background:#FFF1D6;color:var(--warn)}
.b-out{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)}.b-muted{background:var(--surface2);color:var(--muted)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surface);flex:none}
.qty button{width:32px;height:36px;border:0;background:none;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.qty button:hover{background:var(--surface2)}
.qty svg.i{width:15px;height:15px}
.qty input{width:44px;border:0;text-align:center;font:600 .9rem var(--f-mono);background:none;-moz-appearance:textfield;appearance:textfield}
.qty input::-webkit-inner-spin-button,.qty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.qty.sm button{width:28px;height:30px}.qty.sm input{width:36px}

/* Ficha de producto */
.pd{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px}
.pd-stage{aspect-ratio:1/1;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff;position:relative;touch-action:none}
.pd-stage.is3d{background:var(--plan)}
.pd-info{display:flex;flex-direction:column;gap:14px;min-width:0}
.pd-info>.btn{width:100%}
.spec{font-size:.9rem;background:var(--surface2);border-radius:10px;padding:12px}
.pd-trust{list-style:none;margin:0;padding:12px 0 0;border-top:1px solid var(--line);display:grid;gap:8px;font-size:.86rem;color:var(--muted)}
.pd-trust li{display:flex;gap:8px;align-items:center}.pd-trust svg.i{color:var(--teal)}
@media (max-width:760px){ .pd{grid-template-columns:1fr} }

/* Ferretería */
.shop-hero{background:linear-gradient(120deg,#0B4F15,#10681E 60%,#165E1B);color:#fff}
.shop-hero .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:end;padding-block:48px}
.shop-hero h1{font-size:clamp(2rem,4vw,3.2rem);color:#fff;margin-top:10px}
.shop-hero p{color:rgba(246,244,239,.8);margin-top:10px;max-width:56ch}
.search.big{max-width:none;background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 18px;height:54px}
.search.big input{font-size:1rem}
@media (max-width:820px){ .shop-hero .wrap{grid-template-columns:1fr} }
.shop-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:28px;align-items:start}
.shop-side{position:sticky;top:84px;display:flex;flex-direction:column;gap:14px}
.cat-nav{display:flex;flex-direction:column;gap:2px}
.cat-nav button{display:flex;align-items:center;gap:10px;border:0;background:none;padding:9px 10px;border-radius:10px;cursor:pointer;text-align:left;font-weight:600;color:var(--muted)}
.cat-nav button span:nth-child(2){flex:1}
.cat-nav button:hover{background:var(--surface2);color:var(--ink)}
.cat-nav button[aria-current="true"]{background:var(--ink);color:var(--bg)}
.cat-nav .count{font:600 .75rem var(--f-mono);opacity:.75}
.side-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:8px;font-size:.9rem}
.side-card>svg.i{width:26px;height:26px;color:var(--accent)}
.shop-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.shop-tools select{border:1px solid var(--line);border-radius:999px;padding:8px 14px;background:var(--surface)}
.chk{display:inline-flex;gap:8px;align-items:center;font-size:.9rem;cursor:pointer}
.cat-chips{display:none;gap:8px;overflow-x:auto;padding-bottom:12px;margin-bottom:6px;scrollbar-width:none}
.cat-chips button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 14px;font-weight:600;white-space:nowrap;cursor:pointer;font-size:.85rem}
.cat-chips button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
@media (max-width:900px){ .shop-layout{grid-template-columns:1fr} .shop-side{display:none} .cat-chips{display:flex} }

/* Carro lateral */
.cart-drawer{position:fixed;inset:0;z-index:90;background:rgba(10,14,12,0);transition:background .25s}
.cart-drawer.open{background:rgba(10,14,12,.5)}
.cart-panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--surface);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s ease;box-shadow:-20px 0 40px rgba(0,0,0,.2)}
.cart-drawer.open .cart-panel{transform:none}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:calc(16px + env(safe-area-inset-top,0px)) 18px 16px;border-bottom:1px solid var(--line)}
.cart-head h3{display:flex;gap:8px;align-items:center}
.cart-body{flex:1;overflow:auto;padding:8px 18px}
.cart-line{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center}
.cl-img{width:64px;height:64px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#fff}
.cl-img img,.cl-img .pm-ph{width:100%;height:100%;object-fit:cover}
.cl-img .pm-photo{padding:4px}
.cl-info{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:.9rem}
.cl-info .mono{font-size:.75rem}
.cl-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-family:var(--f-mono)}
.cart-foot{border-top:1px solid var(--line);padding:16px 18px calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px}
.cart-foot .btn{width:100%}
.toast-cart{display:flex;align-items:center;gap:10px}
.toast-cart .btn{flex:none}

/* Checkout */
.co-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:start}
.co-main{display:flex;flex-direction:column;gap:18px;min-width:0}
.co fieldset{border:1px solid var(--line);border-radius:14px;padding:16px;margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.co legend{font-weight:750;padding:0 6px;display:flex;align-items:center;gap:8px;font-family:var(--f-display)}
.co legend span{width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font:700 .78rem var(--f-mono)}
.opt-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt-cards.col{grid-template-columns:1fr}
.opt{position:relative;cursor:pointer}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt>span{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:2px;align-items:center;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;transition:border-color .15s,background .15s}
.opt>span svg.i{grid-row:span 2;width:24px;height:24px;color:var(--teal)}
.opt>span small{color:var(--muted);font-size:.8rem;line-height:1.35}
.opt input:checked+span{border-color:var(--ink);background:var(--surface2)}
.opt input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.co-sum{position:sticky;top:0;background:var(--surface2);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:6px}
.co-sum h4{font-size:1.1rem;margin-bottom:6px}
.shop-row.sm{font-size:.85rem}
.shop-row.total{border-top:2px solid var(--ink);border-bottom:0;padding-top:12px;font-size:1.1rem}
.terms{display:flex;gap:8px;font-size:.82rem;align-items:flex-start;margin:8px 0}
.terms input{margin-top:3px}
.co-sum .btn{width:100%;white-space:normal}
@media (max-width:820px){ .co-grid{grid-template-columns:1fr} .co-sum{position:static} .opt-cards{grid-template-columns:1fr} }

/* Pedido */
.order-card{display:flex;flex-direction:column;gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:clamp(18px,4vw,32px)}
.order-top{display:flex;gap:16px;align-items:flex-start}
.order-top>svg.i{width:46px;height:46px;padding:10px;border-radius:50%;background:var(--surface2);flex:none}
.order-top.ok>svg.i{background:var(--teal-soft);color:var(--teal)}
.order-top.bad>svg.i{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)}
.order-top p.muted{margin-top:8px}
.shop-list{display:flex;flex-direction:column}
.status.s-pagado,.status.s-entregado,.status.s-despachado,.status.s-preparando{background:var(--teal-soft);color:var(--teal)}
.status.s-pendiente,.status.s-transferencia,.status.s-whatsapp{background:color-mix(in srgb,var(--accent) 24%,transparent);color:var(--warn)}
.status.s-rechazado,.status.s-anulado{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)}

/* Paneles SIP */
.sip-hero{background:radial-gradient(1200px 500px at 80% 40%,color-mix(in srgb,var(--accent) 16%,transparent),transparent),var(--plan);border-bottom:1px solid var(--line)}
.sip-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding-block:56px}
.sip-copy{display:flex;flex-direction:column;gap:20px}
.sip-copy .lead{font-size:1.1rem;color:var(--muted);max-width:52ch}
.sip-stage{position:relative;aspect-ratio:1/1;max-height:560px;border-radius:20px;overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.sip-labels span{position:absolute;z-index:2;font:600 .72rem var(--f-mono);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:4px 8px;box-shadow:var(--shadow);pointer-events:none}
@media (max-width:860px){ .sip-hero-grid{grid-template-columns:1fr} }
.benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.benefit{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:10px}
.benefit>svg.i{width:30px;height:30px;color:var(--teal)}
@media (max-width:900px){ .benefits{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .benefits{grid-template-columns:1fr} }
.sip-table td{vertical-align:middle}
.tbl-img{width:60px;height:60px;border-radius:10px;overflow:hidden;border:1px solid var(--line);padding:0;background:#fff;cursor:pointer}
.tbl-img img{width:100%;height:100%;object-fit:cover}.tbl-img .pm-photo{padding:3px}
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:240px 240px;gap:12px}
.gallery figure{margin:0;position:relative;border-radius:16px;overflow:hidden}
.gallery figure:first-child{grid-row:span 2}
.gallery figure:last-child{grid-column:span 2}
.gallery img{width:100%;height:100%;object-fit:cover;display:block}
.gallery figcaption{position:absolute;left:12px;bottom:12px;background:rgba(17,22,20,.75);color:#fff;font-size:.8rem;padding:4px 10px;border-radius:999px}
@media (max-width:760px){ .gallery{grid-template-columns:1fr 1fr;grid-template-rows:200px 160px 160px} .gallery figure:first-child{grid-column:span 2;grid-row:auto} .gallery figure:last-child{grid-column:auto} }

/* Banda dividida con foto */
.split-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:#161C19;color:#F6F4EF}
.sb-img{background-size:cover;background-position:center;min-height:420px}
.sb-copy{padding:clamp(32px,6vw,80px);display:flex;flex-direction:column;gap:18px;justify-content:center}
.sb-copy h2{color:#fff}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ticks li{display:flex;gap:10px;align-items:flex-start;color:rgba(246,244,239,.85)}
.ticks li svg.i{color:var(--hl);margin-top:3px}
.ticks b{color:#fff}
@media (max-width:860px){ .split-band{grid-template-columns:1fr} .sb-img{min-height:240px} }

/* Banda de llamado */
.cta-band{border-radius:22px;padding:clamp(28px,5vw,56px);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;color:#F6F4EF;background:linear-gradient(100deg,rgba(17,22,20,.93),rgba(17,22,20,.7)),var(--img, none) center/cover,#161C19}
.cta-band h2{color:#fff;max-width:24ch}
.cta-band p{color:rgba(246,244,239,.78);margin-top:8px}

/* Encabezado de página con foto */
.page-hero{color:#F6F4EF;background:linear-gradient(100deg,rgba(17,22,20,.92),rgba(17,22,20,.62)),var(--img) center/cover,#161C19}
.page-hero .wrap{padding-block:clamp(48px,8vw,96px);display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.page-hero h1{font-size:clamp(2.1rem,4.4vw,3.4rem);color:#fff;max-width:20ch}
.page-hero p{color:rgba(246,244,239,.8);max-width:56ch;font-size:1.08rem}
.svc-ic{width:44px;height:44px;border-radius:12px;background:var(--teal-soft);color:var(--teal);display:grid;place-items:center}

/* Cotizador */
.quote-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:24px;align-items:start}
.quote-form{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:14px;position:sticky;top:84px}
.quote-form input[type=range]{width:100%;accent-color:var(--accent)}
.quote-form label b{float:right;color:var(--ink)}
.quote-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow)}
.qc-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.qc-head h2{font-size:clamp(1.4rem,2.6vw,2rem);margin-top:6px}
.qc-big{background:var(--ink);color:var(--bg);border-radius:14px;padding:12px 16px;text-align:center;flex:none}
.qc-big span{display:block;font:800 2.2rem/1 var(--f-display);color:var(--hl)}
.qc-big small{font-size:.75rem;opacity:.8}
.qc-totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.qc-opt{border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:4px}
.qc-opt span{font-weight:650;font-size:.9rem}
.qc-opt b{font-family:var(--f-mono);font-size:1.1rem}
.qc-opt small{color:var(--muted);font-size:.75rem}
.qc-opt.main{background:var(--teal-soft);border-color:var(--accent)}
.qc-opt.main b{font-size:1.5rem}
.qc-actions{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:900px){ .quote-grid{grid-template-columns:1fr} .quote-form{position:static} }

/* Pie */
.foot-cta{background:var(--accent);color:#fff}
.foot-cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-block:18px}
.foot-cta b{font-family:var(--f-display);font-size:1.2rem;display:block}

.pay-logos{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:26px;font-size:.8rem;color:var(--muted)}
.pay-logos .pl{border:1px solid var(--line);border-radius:6px;padding:3px 8px;font-weight:650;background:var(--surface)}
.flow-logo{font-family:var(--f-display);font-weight:800;font-size:1.05rem;color:#fff;background:#1C1C1C;border-radius:6px;padding:1px 10px;letter-spacing:-.02em}
.credits{font-size:.75rem;margin-top:14px;line-height:1.6}.credits a{color:inherit}
.made-by{text-align:center;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:.92rem;font-weight:600}
.made-by a{color:var(--teal);text-decoration:none;border-bottom:1px solid currentColor}
.faq-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:40px}
@media (max-width:820px){ .faq-wrap{grid-template-columns:1fr;gap:16px} }

/* Planificador y administración */
.pl-tabs{flex-wrap:wrap}
.adm-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px}
table.inv input{width:100%;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-family:var(--f-mono);background:var(--surface)}
table.inv input.st-out{border-color:var(--danger);color:var(--danger)}
table.inv input.st-low{border-color:var(--warn)}
table.inv tr.dirty td{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.hint{font-size:.78rem;color:var(--muted)}

/* Impresión de la cotización */
@media print{
  body.printing-quote *{visibility:hidden}
  body.printing-quote #qz-print,body.printing-quote #qz-print *{visibility:visible}
  body.printing-quote #qz-print{position:absolute;left:0;top:0;width:100%;box-shadow:none;border:0}
  body.printing-quote .no-print{display:none!important}
}
@media (max-width:1100px){ .top-actions .hide-md{display:none} }
@media (max-width:1200px){ .top-actions #admin-btn{display:none} }

.shop-hero .eyebrow{color:var(--hl)}
.demo-note{background:#FFF8E1;color:#5B4300;font-size:.85rem;border-bottom:1px solid #F3E2A8}.demo-note .wrap{padding-block:8px;text-align:center}.demo-note a{color:inherit;font-weight:700}

/* Accesibilidad, estados y movimiento (Manual Maestro INVERTECNO v4.0) */
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.catbar :focus-visible,.topbar :focus-visible,.design-band :focus-visible{outline-color:var(--hl)}
.qty button{min-width:36px;min-height:40px}
.offline-bar{position:fixed;left:0;right:0;bottom:0;z-index:95;background:#2B2B2D;color:#fff;text-align:center;font-size:.9rem;padding:10px max(16px,env(safe-area-inset-left,0px)) calc(10px + env(safe-area-inset-bottom,0px))}
.offline-bar a{color:var(--hl);font-weight:700}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important} }

main#view{min-height:100vh}
.foot-grid h2.fh{font-family:var(--f-body);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;font-weight:700}
.quote-grid>*{min-width:0}.quote-form select,.quote-form input,.co select,.co input{max-width:100%;min-width:0;width:100%}.quote-form .form-row>*{min-width:0}