/* ============================================================
   datacommerce.css — extensión aditiva de site.css para la
   landing de e-commerce DataCommerce. No sobreescribe reglas
   existentes: solo añade componentes nuevos (hero de tienda,
   barra de filtros, grid de productos, carrito).
   ============================================================ */

/* ---------- Hero de tienda ---------- */
.dc-hero{position:relative;min-height:64vh;display:flex;align-items:flex-end;overflow:hidden;padding:130px 0 40px}
.dc-hero::before{content:"";position:absolute;inset:0;z-index:-2;background-image:url('hero-datacommerce.jpg');background-size:cover;background-position:center}
.dc-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,13,35,.55) 0%,rgba(0,13,35,.78) 60%,rgba(0,13,35,.96) 100%)}
.dc-hero .eyebrow{color:#fff}
.dc-hero h1{font-size:clamp(34px,5.4vw,60px);letter-spacing:-.025em;line-height:1.02;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.5);max-width:18ch}
.dc-hero .lede{margin-top:16px;font-size:clamp(15px,1.6vw,18px);color:#E4E1F0;max-width:56ch}

/* ---------- Barra de búsqueda + filtros ---------- */
.dc-toolbar{background:var(--panel-bg);border-bottom:1px solid rgba(var(--rgb-fg),.1);position:sticky;top:62px;z-index:20;padding:16px 0}
.dc-search{display:flex;align-items:center;gap:10px;background:rgba(var(--rgb-fg),.05);border:1px solid rgba(var(--rgb-fg),.14);border-radius:999px;padding:10px 16px;max-width:520px}
.dc-search svg{width:17px;height:17px;stroke:var(--plata);flex:none}
.dc-search input{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:var(--font-display);font-size:14px}
.dc-search input::placeholder{color:var(--plata)}
.dc-filters-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.dc-pills{display:flex;gap:8px;flex-wrap:wrap}
.dc-pill{font-family:var(--font-mono);font-size:12px;color:var(--text);background:rgba(var(--rgb-fg),.05);border:1px solid rgba(var(--rgb-fg),.16);padding:8px 15px;border-radius:999px;cursor:pointer;transition:.2s;white-space:nowrap}
.dc-pill:hover{border-color:var(--accent)}
.dc-pill.active{background:var(--accent);border-color:var(--accent);color:#fff}
.dc-selects{display:flex;gap:10px;margin-inline-start:auto;flex-wrap:wrap}
.dc-selects select{font-family:var(--font-mono);font-size:12px;color:var(--text);background:rgba(var(--rgb-fg),.05);border:1px solid rgba(var(--rgb-fg),.16);border-radius:10px;padding:9px 12px;cursor:pointer}
.dc-count{font-family:var(--font-mono);font-size:11.5px;color:var(--plata);margin-top:12px}

/* ---------- Grid de productos ---------- */
.dc-body{background:var(--panel-bg);padding:34px 0 90px}
.dc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:20px;margin-top:8px}
.dc-card{position:relative;border:1px solid rgba(var(--rgb-fg),.1);border-radius:16px;background:linear-gradient(180deg,rgba(var(--rgb-fg),.045),rgba(var(--rgb-fg),.012));display:flex;flex-direction:column;overflow:hidden;transition:.25s var(--ease)}
.dc-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 16px 40px rgba(0,0,0,.4)}
.dc-card .dc-imgwrap{position:relative;aspect-ratio:4/3;background:rgba(var(--rgb-fg),.06);display:flex;align-items:center;justify-content:center;overflow:hidden}
.dc-card .dc-imgwrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease)}
.dc-card:hover .dc-imgwrap img{transform:scale(1.05)}
.dc-card .dc-icon-fallback{width:56px;height:56px;stroke:var(--accent);fill:none;stroke-width:1.4;opacity:.55}
.dc-badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;z-index:2}
.dc-badge{font-family:var(--font-mono);font-size:10px;letter-spacing:.4px;padding:4px 9px;border-radius:999px;color:#fff;white-space:nowrap}
.dc-badge.destacado{background:var(--accent)}
.dc-badge.off{background:#0E9F6E}
.dc-badge.stock-low{background:#EF4444}
.dc-badge.gratis{background:#7A5CFF}
.dc-illus-tag{position:absolute;bottom:8px;right:8px;font-family:var(--font-mono);font-size:9px;color:#fff;background:rgba(0,0,0,.55);padding:3px 7px;border-radius:6px;z-index:2}
.dc-body2{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1}
.dc-cat{font-family:var(--font-mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--accent)}
.dc-card h4{font-size:15.5px;margin-top:6px;letter-spacing:-.01em;line-height:1.25;min-height:2.5em}
.dc-card .dc-desc{font-size:12px;color:var(--plata);margin-top:6px;line-height:1.4;flex:1}
.dc-card .dc-brand{font-family:var(--font-mono);font-size:10.5px;color:var(--plata);margin-top:10px}
.dc-price-row{margin-top:12px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.dc-price-old{font-family:var(--font-mono);font-size:12px;color:var(--plata);text-decoration:line-through}
.dc-price-pretax{font-family:var(--font-mono);font-size:11.5px;color:var(--plata)}
.dc-price-new{font-family:var(--font-mono);font-size:19px;font-weight:700;color:var(--text)}
.dc-price-new.gratis-text{color:#7A5CFF}
.dc-iva{flex-basis:100%;font-family:var(--font-mono);font-size:10px;letter-spacing:.3px;text-transform:uppercase;color:var(--plata)}
.dc-badge.exento{background:#0E9F6E}
.dc-badge.obsequio{background:#7A5CFF}
.dc-disclaimer{font-family:var(--font-mono);font-size:9.5px;color:var(--plata);line-height:1.4;margin-top:8px;opacity:.75}
.dc-stock{margin-top:6px;font-family:var(--font-mono);font-size:11px;color:var(--plata)}
.dc-stock.low{color:#EF4444}
.dc-actions{margin-top:14px;display:flex;gap:8px}
.dc-btn-add{flex:1;font-family:var(--font-mono);font-size:12px;color:#fff;background:var(--accent);border:none;border-radius:10px;padding:11px 10px;cursor:pointer;transition:.2s}
.dc-btn-add:hover{filter:brightness(1.12)}
.dc-btn-compare{width:42px;flex:none;border:1px solid rgba(var(--rgb-fg),.18);border-radius:10px;background:transparent;color:var(--text);cursor:pointer;display:grid;place-items:center;transition:.2s}
.dc-btn-compare:hover{border-color:var(--accent)}
.dc-btn-cmp{width:42px;flex:none;border:1px solid rgba(var(--rgb-fg),.18);border-radius:10px;background:transparent;color:var(--text);cursor:pointer;display:grid;place-items:center;transition:.2s}
.dc-btn-cmp:hover{border-color:#0029FF}
.dc-btn-cmp.active{background:#0029FF;border-color:#0029FF;color:#fff}
.dc-empty{grid-column:1/-1;text-align:center;padding:70px 20px;color:var(--plata);font-family:var(--font-mono);font-size:13px}

/* ---------- Carrito flotante ---------- */
.dc-cart-fab{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;align-items:center;gap:10px;background:var(--accent);color:#fff;border:none;border-radius:999px;padding:14px 20px 14px 16px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.4);font-family:var(--font-mono);font-size:13px;transition:.2s}
.dc-cart-fab:hover{transform:translateY(-2px)}
.dc-cart-fab svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.8}
.dc-cart-fab .dc-cart-n{background:rgba(255,255,255,.25);border-radius:999px;padding:2px 8px;font-weight:700}
.dc-cart-overlay{position:fixed;inset:0;background:rgba(0,6,20,.6);backdrop-filter:blur(3px);z-index:90;opacity:0;pointer-events:none;transition:.25s}
.dc-cart-overlay.open{opacity:1;pointer-events:auto}
.dc-cart-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--panel-bg);border-left:1px solid rgba(var(--rgb-fg),.12);z-index:91;transform:translateX(100%);transition:.3s var(--ease);display:flex;flex-direction:column}
.dc-cart-overlay.open .dc-cart-drawer{transform:translateX(0)}
.dc-cart-head{display:flex;align-items:center;justify-content:space-between;padding:22px 22px 16px;border-bottom:1px solid rgba(var(--rgb-fg),.1)}
.dc-cart-head h3{font-size:19px;letter-spacing:-.01em}
.dc-cart-close{width:34px;height:34px;border-radius:50%;border:1px solid rgba(var(--rgb-fg),.2);background:transparent;color:var(--text);cursor:pointer;display:grid;place-items:center}
.dc-cart-items{flex:1;overflow-y:auto;padding:14px 22px}
.dc-cart-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid rgba(var(--rgb-fg),.08)}
.dc-cart-item img,.dc-cart-item .dc-ci-icon{width:56px;height:56px;border-radius:9px;object-fit:cover;background:rgba(var(--rgb-fg),.06);flex:none;display:flex;align-items:center;justify-content:center}
.dc-cart-item .dc-ci-icon svg{width:26px;height:26px;stroke:var(--accent);fill:none;stroke-width:1.5}
.dc-cart-item .ci-info{flex:1;min-width:0}
.dc-cart-item .ci-info h5{font-size:13px;line-height:1.3}
.dc-cart-item .ci-info .ci-price{font-family:var(--font-mono);font-size:12px;color:var(--accent);margin-top:4px}
.dc-cart-item .ci-qty{display:flex;align-items:center;gap:6px;margin-top:6px}
.dc-cart-item .ci-qty button{width:22px;height:22px;border-radius:6px;border:1px solid rgba(var(--rgb-fg),.2);background:transparent;color:var(--text);cursor:pointer;font-size:13px;line-height:1}
.dc-cart-item .ci-remove{font-family:var(--font-mono);font-size:10.5px;color:var(--plata);text-decoration:underline;cursor:pointer;background:none;border:none;margin-top:6px}
.dc-cart-empty{padding:50px 10px;text-align:center;color:var(--plata);font-family:var(--font-mono);font-size:12.5px}
.dc-cart-foot{padding:18px 22px 24px;border-top:1px solid rgba(var(--rgb-fg),.1)}
.dc-cart-total{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font-mono);margin-bottom:14px}
.dc-cart-total b{font-size:19px;color:var(--text)}
.dc-pay-btn{width:100%;background:var(--accent);color:#fff;border:none;border-radius:12px;padding:14px;font-family:var(--font-mono);font-size:13px;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center;gap:8px}
.dc-pay-btn:hover{filter:brightness(1.12)}
.dc-pay-note{font-size:10.5px;color:var(--plata);text-align:center;margin-top:9px;line-height:1.5}

/* ---------- Comparador flotante ---------- */
.dc-cmp-fab{position:fixed;left:22px;bottom:22px;z-index:60;display:flex;align-items:center;gap:10px;background:#0029FF;color:#fff;border:1px solid #0029FF;border-radius:999px;padding:14px 20px 14px 16px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.4);font-family:var(--font-mono);font-size:13px;transition:.2s}
.dc-cmp-fab:hover{transform:translateY(-2px);filter:brightness(1.15)}
.dc-cmp-fab svg{width:20px;height:20px}
.dc-cmp-fab .dc-cmp-n{background:#fff;color:#0029FF;border-radius:999px;padding:2px 8px;font-weight:700}
.dc-cmp-overlay{position:fixed;inset:0;background:rgba(0,6,20,.6);backdrop-filter:blur(3px);z-index:90;opacity:0;pointer-events:none;transition:.25s;display:flex;align-items:center;justify-content:center;padding:24px}
.dc-cmp-overlay.open{opacity:1;pointer-events:auto}
.dc-cmp-modal{background:var(--panel-bg);border:1px solid rgba(var(--rgb-fg),.12);border-radius:18px;width:min(920px,94vw);max-height:88vh;display:flex;flex-direction:column;transform:translateY(12px);transition:.3s var(--ease)}
.dc-cmp-overlay.open .dc-cmp-modal{transform:translateY(0)}
.dc-cmp-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid rgba(var(--rgb-fg),.1)}
.dc-cmp-head h3{font-size:18px;letter-spacing:-.01em}
.dc-cmp-close{width:34px;height:34px;border-radius:50%;border:1px solid rgba(var(--rgb-fg),.2);background:transparent;color:var(--text);cursor:pointer;display:grid;place-items:center;flex:none}
.dc-cmp-body{flex:1;overflow:auto;padding:18px 22px}
.dc-cmp-empty{padding:50px 10px;text-align:center;color:var(--plata);font-family:var(--font-mono);font-size:12.5px}
.dc-cmp-table{width:100%;border-collapse:collapse}
.dc-cmp-table th,.dc-cmp-table td{border-bottom:1px solid rgba(var(--rgb-fg),.08);padding:12px 14px;text-align:left;vertical-align:top;font-size:12.5px;min-width:170px}
.dc-cmp-table th{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--plata);white-space:nowrap;min-width:120px}
.dc-cmp-table td img{width:100%;max-width:140px;aspect-ratio:4/3;object-fit:cover;border-radius:10px;background:rgba(var(--rgb-fg),.06)}
.dc-cmp-table td .dc-cmp-icon{width:64px;height:64px;border-radius:10px;background:rgba(var(--rgb-fg),.06);display:flex;align-items:center;justify-content:center}
.dc-cmp-table td .dc-cmp-icon svg{width:28px;height:28px;stroke:var(--accent);fill:none;stroke-width:1.4}
.dc-cmp-table td h5{font-size:13.5px;line-height:1.3}
.dc-cmp-rm{font-family:var(--font-mono);font-size:10.5px;color:var(--plata);text-decoration:underline;cursor:pointer;background:none;border:none}
.dc-cmp-foot{padding:16px 22px 22px;border-top:1px solid rgba(var(--rgb-fg),.1);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dc-cmp-clear{font-family:var(--font-mono);font-size:11.5px;color:var(--plata);text-decoration:underline;cursor:pointer;background:none;border:none}
.dc-cmp-wa{margin-inline-start:auto;background:var(--accent);color:#fff;border:none;border-radius:12px;padding:12px 18px;font-family:var(--font-mono);font-size:12.5px;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center;gap:8px}
.dc-cmp-wa:hover{filter:brightness(1.12)}

@media(max-width:760px){
  .dc-toolbar{top:0}
  .dc-selects{margin-inline-start:0;width:100%}
  .dc-selects select{flex:1}
  .dc-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .dc-card h4{font-size:13.5px}
  .dc-cmp-fab span:not(.dc-cmp-n){display:none}
  .dc-cmp-wa{margin-inline-start:0;width:100%}
  .dc-cmp-foot{flex-direction:column;align-items:stretch}
  .dc-cmp-clear{text-align:center}
}