/* ============================================================
   Configurador V2 — página ÚNICA · tema oscuro (negro · grises · café)
   Referencia: ublockout (una sola página que baja) + carrito WooCommerce.
   ============================================================ */
:root{
  --cfg2-bg:#0e0d0c; --cfg2-bg-2:#161412; --cfg2-line:#2a2724;
  --cfg2-text:#f4f1ec; --cfg2-muted:#9a938a;
  --cfg2-cafe:#b89b7d; --cfg2-cafe-2:#8a6f55; --cfg2-ink:#1a1410;
  --cfg2-ok:#7fb98a; --cfg2-warn:#d8b678; --cfg2-err:#d88a78;
}

/* El menú del sitio (Layout) se mantiene arriba. Solo quitamos el padding del main. */
body:has(.cfg2) main#main{ padding:0 !important; }

.cfg2{
  display:grid; grid-template-columns:1.02fr 1fr;
  background:var(--cfg2-bg); color:var(--cfg2-text);
  font-family:'Inter',system-ui,sans-serif;
  position:relative;
}

/* ---------- Izquierda: preview sticky ---------- */
.cfg2__preview{
  position:sticky; top:0; align-self:start;
  height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.2rem;
  padding:2.5rem; background:radial-gradient(130% 100% at 50% 0%, #1b1815 0%, #0e0d0c 70%);
  border-right:1px solid var(--cfg2-line);
}
.cfg2__logo{ position:absolute; top:1.4rem; left:1.6rem; height:22px; opacity:.95; }
.cfg2__scene{ width:min(80%,340px); aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; }
.cfg2__svg{ width:100%; height:100%; filter:drop-shadow(0 24px 60px rgba(0,0,0,.5)); }
.cfg2__scenehint{ color:var(--cfg2-muted); text-align:center; font-size:.9rem; padding:2.5rem 1.5rem; border:1px dashed var(--cfg2-line); border-radius:12px; }
.cfg2__thumb--svg{ background:#20272b; display:grid; place-items:center; padding:5px; height:74px; }
.cfg2__thumb--svg svg{ width:100%; height:100%; }
.cfg2__caption{ color:var(--cfg2-muted); font-size:.9rem; } .cfg2__caption span{ color:var(--cfg2-text); font-weight:600; }
.cfg2__previewprice{ font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:600; margin:0; }

/* ---------- Derecha: flujo (scroll) ---------- */
.cfg2__flow{ background:var(--cfg2-bg-2); padding:2.4rem 2.6rem 7rem; position:relative; }
.cfg2__cart{
  position:sticky; top:1rem; float:right; margin-left:1rem;
  background:#1d1b18; color:var(--cfg2-text); border:1px solid var(--cfg2-line);
  border-radius:999px; padding:.5rem .9rem; font-size:.95rem; cursor:pointer; z-index:5;
}
.cfg2__cart-count{ background:var(--cfg2-cafe); color:var(--cfg2-ink); border-radius:999px; padding:0 .45rem; font-weight:700; font-size:.8rem; margin-left:.2rem; }
.cfg2__intro{ margin-bottom:1.5rem; }
.cfg2__h1{ font-family:'Playfair Display',serif; font-weight:600; font-size:2rem; margin:0 0 .3rem; }
.cfg2__sub{ color:var(--cfg2-muted); margin:0; }

.cfg2__section{ padding:1.6rem 0; border-top:1px solid var(--cfg2-line); transition:opacity .3s; }
.cfg2__section.is-locked{ opacity:.38; pointer-events:none; filter:grayscale(.35); }
.cfg2__sechead{ display:flex; align-items:center; gap:.7rem; margin-bottom:.4rem; }
.cfg2__sechead h2{ font-family:'Playfair Display',serif; font-weight:600; font-size:1.35rem; margin:0; }
.cfg2__step{ width:26px; height:26px; border-radius:999px; background:var(--cfg2-cafe-2); color:var(--cfg2-ink); display:grid; place-items:center; font-size:.85rem; font-weight:700; }
.cfg2__pin{ font-size:1.2rem; line-height:1; }
.cfg2__help{ margin-left:auto; background:#1d1b18; border:1px solid var(--cfg2-cafe-2); color:var(--cfg2-cafe); border-radius:999px; padding:.35rem .85rem; font-size:.82rem; font-weight:600; text-decoration:none; white-space:nowrap; }
.cfg2__help:hover{ background:#241f1a; }
.cfg2__help--sm{ width:26px; height:26px; padding:0; display:grid; place-items:center; font-weight:700; }
.cfg2__warn{ background:rgba(216,182,120,.10); border:1px solid var(--cfg2-warn); color:var(--cfg2-warn); border-radius:10px; padding:.7rem .9rem; font-size:.88rem; line-height:1.45; margin:0 0 1rem; }
.cfg2__warn strong{ color:#e8c98a; }
.cfg2__ref{ margin:.2rem 0 0; text-align:center; max-width:280px; }
.cfg2__ref img{ width:100%; border-radius:10px; border:1px solid var(--cfg2-line); display:block; }
.cfg2__ref figcaption{ color:var(--cfg2-muted); font-size:.82rem; margin-top:.4rem; }
.cfg2__ref a{ color:var(--cfg2-cafe); }
.cfg2__lead{ color:var(--cfg2-muted); line-height:1.5; margin:.2rem 0 1rem; }
.cfg2__lead a{ color:var(--cfg2-cafe); }
.cfg2__subh{ color:var(--cfg2-muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.07em; margin:1.1rem 0 .55rem; }
.cfg2__name{ letter-spacing:normal !important; text-transform:none; width:100%; max-width:420px; font-size:1rem; }

/* ZIP */
.cfg2__ziprow{ display:flex; gap:.6rem; max-width:360px; }
.cfg2__zip{ flex:1; background:#1d1b18; color:var(--cfg2-text); border:1px solid var(--cfg2-line); border-radius:12px; padding:.8rem 1rem; font-size:1.1rem; letter-spacing:.1em; }
.cfg2__btn{ background:var(--cfg2-cafe); color:var(--cfg2-ink); border:0; border-radius:12px; padding:0 1.3rem; font-weight:700; cursor:pointer; }
.cfg2__zipmsg{ margin:.7rem 0 0; font-size:.9rem; min-height:1.2em; }
.cfg2__zipmsg.is-ok{ color:var(--cfg2-ok); } .cfg2__zipmsg.is-warn{ color:var(--cfg2-warn); } .cfg2__zipmsg.is-err{ color:var(--cfg2-err); }

/* Opciones (grid de cards) */
.cfg2__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.7rem; }
.cfg2__grid--fabrics{ grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }
.cfg2__opt{
  display:flex; flex-direction:column; gap:.5rem; text-align:left;
  background:#1d1b18; color:var(--cfg2-text); border:1px solid var(--cfg2-line);
  border-radius:14px; padding:.9rem; cursor:pointer; transition:border-color .2s, transform .1s, background .2s;
}
.cfg2__opt:hover{ border-color:var(--cfg2-cafe-2); transform:translateY(-1px); }
.cfg2__opt.is-selected{ border-color:var(--cfg2-cafe); background:#241f1a; box-shadow:0 0 0 1px var(--cfg2-cafe) inset; }
.cfg2__sw{ width:100%; height:46px; border-radius:9px; border:1px solid rgba(255,255,255,.12); }
.cfg2__thumb{ width:100%; height:74px; border-radius:9px; background-size:cover; background-position:center; border:1px solid rgba(255,255,255,.1); }
.cfg2__opt-t{ font-weight:600; font-size:.95rem; } .cfg2__opt-d{ color:var(--cfg2-muted); font-size:.8rem; }

/* Medidas */
.cfg2__measrow{ display:flex; flex-wrap:wrap; gap:1rem; }
.cfg2__field{ display:flex; flex-direction:column; gap:.35rem; font-size:.85rem; color:var(--cfg2-muted); }
.cfg2__num{ background:#1d1b18; color:var(--cfg2-text); border:1px solid var(--cfg2-line); border-radius:10px; padding:.7rem .8rem; font-size:1.05rem; width:130px; }
.cfg2__measmsg{ margin:.7rem 0 0; font-size:.88rem; } .cfg2__measmsg.is-warn{ color:var(--cfg2-warn); }

/* Resumen */
.cfg2__summary{ background:#1d1b18; border:1px solid var(--cfg2-line); border-radius:14px; padding:1rem 1.2rem; }
.cfg2__sumrow{ display:flex; justify-content:space-between; gap:1rem; padding:.35rem 0; color:var(--cfg2-muted); }
.cfg2__sumrow--total{ border-top:1px solid var(--cfg2-line); margin-top:.4rem; padding-top:.7rem; color:var(--cfg2-text); font-weight:700; font-size:1.05rem; }

/* Barra fija precio + acción */
.cfg2__bar{
  position:sticky; bottom:0; grid-column:1 / -1;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 2.6rem; background:rgba(14,13,12,.94); backdrop-filter:blur(10px); border-top:1px solid var(--cfg2-line); z-index:6;
}
.cfg2__price-label{ display:block; color:var(--cfg2-muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; }
.cfg2__price-val{ font-size:1.4rem; font-weight:700; }
.cfg2__actions{ display:flex; gap:.6rem; }
.cfg2__cta{ background:var(--cfg2-cafe); color:var(--cfg2-ink); border:0; border-radius:999px; padding:.85rem 1.7rem; font-weight:700; cursor:pointer; transition:background .2s; }
.cfg2__cta:hover:not(:disabled){ background:#c8ad90; }
.cfg2__cta:disabled{ opacity:.35; cursor:not-allowed; }
.cfg2__cta--ghost{ background:transparent; color:var(--cfg2-text); border:1px solid var(--cfg2-line); }
.cfg2__cta--wide{ width:100%; }

/* Carrito drawer */
.cfg2__drawer{ position:fixed; inset:0; z-index:1000; }
.cfg2__drawer-scrim{ position:absolute; inset:0; z-index:1; background:rgba(0,0,0,.55); opacity:0; transition:opacity .25s; }
.cfg2__drawer-panel{ position:absolute; top:0; right:0; z-index:2; height:100%; width:min(420px,92vw); background:var(--cfg2-bg-2); border-left:1px solid var(--cfg2-line); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .25s ease; }
.cfg2__drawer.is-open .cfg2__drawer-panel{ transform:translateX(0); }
.cfg2__drawer.is-open .cfg2__drawer-scrim{ opacity:1; }
.cfg2__drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:1.2rem 1.4rem; border-bottom:1px solid var(--cfg2-line); }
.cfg2__drawer-head h3{ margin:0; font-family:'Playfair Display',serif; }
.cfg2__drawer-head button{ background:none; border:0; color:var(--cfg2-muted); font-size:1.6rem; cursor:pointer; line-height:1; }
.cfg2__drawer-body{ flex:1; overflow-y:auto; padding:1rem 1.4rem; }
.cfg2__citem{ display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:.7rem; padding:.7rem 0; border-bottom:1px solid var(--cfg2-line); }
.cfg2__cthumb{ width:44px; height:44px; border-radius:8px; border:1px solid rgba(255,255,255,.1); }
.cfg2__cinfo b{ display:block; font-size:.9rem; } .cfg2__cinfo small{ color:var(--cfg2-muted); }
.cfg2__cline{ font-weight:700; } .cfg2__cdel{ background:none; border:0; color:var(--cfg2-muted); font-size:1.2rem; cursor:pointer; }
.cfg2__drawer-foot{ padding:1.2rem 1.4rem; border-top:1px solid var(--cfg2-line); display:grid; gap:.6rem; }
.cfg2__drawer-line{ display:flex; justify-content:space-between; color:var(--cfg2-muted); font-size:.92rem; padding:.15rem 0; }
.cfg2__drawer-total{ display:flex; justify-content:space-between; font-weight:700; font-size:1.15rem; padding:.4rem 0; border-top:1px solid var(--cfg2-line); margin-top:.2rem; }
.cfg2__shipnote{ color:var(--cfg2-cafe); font-size:.82rem; margin:.15rem 0 .3rem; }
.cfg2__delivery{ color:var(--cfg2-text); font-size:.86rem; background:#20272b; border:1px solid var(--cfg2-line); border-radius:8px; padding:.5rem .7rem; margin:.2rem 0 .5rem; }
.cfg2__checkout{ padding:1.4rem; display:flex; flex-direction:column; gap:.7rem; }
.cfg2__cotitle{ font-family:'Playfair Display',serif; margin:0; font-size:1.35rem; }
.cfg2__comsg{ font-size:.85rem; min-height:1em; margin:0; color:var(--cfg2-muted); }
.cfg2__comsg.is-err{ color:var(--cfg2-err); }

/* Fix: el atributo [hidden] debe ganarle al display del drawer (alterna carrito/checkout) */
.cfg2__drawer [hidden]{ display:none !important; }

/* Toast de aviso (feedback al agregar al carrito) */
.cfg2__toast{ position:fixed; left:50%; bottom:5.5rem; transform:translateX(-50%); z-index:60;
  background:#241f1a; color:var(--cfg2-text); border:1px solid var(--cfg2-cafe); border-radius:12px;
  padding:.75rem 1.15rem; font-size:.92rem; font-weight:600; box-shadow:0 12px 34px rgba(0,0,0,.55);
  max-width:88vw; text-align:center; }
.cfg2__toast[hidden]{ display:none; }

/* Responsive */
@media (max-width:900px){
  .cfg2{ grid-template-columns:1fr; }
  .cfg2__preview{ position:static; height:auto; min-height:40vh; border-right:0; border-bottom:1px solid var(--cfg2-line); }
  .cfg2__flow{ padding:1.6rem 1.3rem 7rem; }
  .cfg2__bar{ padding:.9rem 1.3rem; }
}

/* Cortinas incompletas (traídas del cotizador rápido) — alerta + botón Completar */
.cfg2__citem.is-incomplete{ border-left:2px solid var(--cfg2-warn); padding-left:.5rem; }
.cfg2__cwarn{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:.35rem; font-size:.78rem; color:var(--cfg2-warn); }
.cfg2__ccomplete{ background:var(--cfg2-cafe); color:var(--cfg2-ink); border:0; border-radius:8px; padding:.28rem .75rem; font-weight:700; font-size:.78rem; cursor:pointer; }
.cfg2__ccomplete:hover{ background:#c8ad90; }
.cfg2__cinc{ background:rgba(216,182,120,.12); border:1px solid var(--cfg2-warn); color:var(--cfg2-warn); border-radius:10px; padding:.6rem .8rem; font-size:.82rem; line-height:1.4; margin:0 0 .2rem; }
.cfg2__cinc[hidden]{ display:none; }

/* Términos DIY: aparece bajo Instalación al elegir "Hazlo tú mismo" */
.cfg2__diyterms{ margin:.8rem 0 .2rem; background:#1d1b18; border:1px solid var(--cfg2-line); border-radius:12px; padding:.9rem 1rem; }
.cfg2__diyterms[hidden]{ display:none; }
.cfg2__diycheck{ display:flex; gap:.6rem; align-items:flex-start; cursor:pointer; color:var(--cfg2-text); font-size:.9rem; line-height:1.45; }
.cfg2__diycheck input{ margin-top:.2rem; flex:none; width:18px; height:18px; accent-color:var(--cfg2-cafe); }
.cfg2__diylink{ background:none; border:0; padding:0; color:var(--cfg2-cafe); font:inherit; font-weight:600; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.cfg2__diynote{ color:var(--cfg2-muted); font-size:.78rem; line-height:1.45; margin:.5rem 0 0; }

/* Modal de términos DIY */
.cfg2__diymodal{ position:fixed; inset:0; z-index:4000; background:rgba(8,7,6,.86); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:1rem; }
.cfg2__diybox{ position:relative; width:100%; max-width:560px; max-height:86vh; display:flex; flex-direction:column; background:var(--cfg2-bg-2); border:1px solid var(--cfg2-line); border-radius:16px; padding:1.4rem 1.3rem 1.2rem; box-shadow:0 24px 60px rgba(0,0,0,.5); }
.cfg2__diyclose{ position:absolute; top:.7rem; right:.9rem; background:none; border:0; color:var(--cfg2-muted); font-size:1.6rem; line-height:1; cursor:pointer; }
.cfg2__diyclose:hover{ color:var(--cfg2-text); }
.cfg2__diytitle{ font-family:'Playfair Display',serif; font-size:1.35rem; color:var(--cfg2-text); margin:0 1.6rem .8rem 0; }
.cfg2__diybody{ overflow-y:auto; padding-right:.5rem; color:var(--cfg2-muted); font-size:.9rem; line-height:1.6; }
.cfg2__diybody h4{ color:var(--cfg2-text); font-size:.95rem; margin:1rem 0 .3rem; }
.cfg2__diybody p{ margin:0 0 .6rem; } .cfg2__diybody strong{ color:var(--cfg2-text); }
.cfg2__diyactions{ display:flex; gap:.6rem; justify-content:flex-end; padding-top:1rem; margin-top:.6rem; border-top:1px solid var(--cfg2-line); }
.cfg2__diyactions .cfg2__cta{ width:auto; padding:.7rem 1.4rem; }