:root{
  --ink:#0B0B0F; --paper:#FFFFFF; --violet:#6C2BD9; --violet-deep:#5A20B8;
  --lime:#D4FF3D; --muted:rgba(11,11,15,0.62); --muted-2:rgba(11,11,15,0.45);
  --rule:rgba(11,11,15,0.14);
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:'Archivo', system-ui, -apple-system, sans-serif; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }

.wrap{ max-width:1280px; margin:0 auto; padding-left:40px; padding-right:40px; }
@media (max-width:700px){ .wrap{ padding-left:22px; padding-right:22px; } }

header.site{ position:sticky; top:0; z-index:40; background:var(--paper); border-bottom:1px solid var(--rule); }
.site-nav{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 0; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand span{ font-weight:900; font-size:16px; letter-spacing:-0.01em; text-transform:uppercase; }
.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{ font-size:13px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase; text-decoration:none; color:var(--ink); border-bottom:2px solid transparent; padding-bottom:3px; }
.nav-links a:hover, .nav-links a.active{ border-color:var(--ink); }
@media (max-width:760px){ .nav-links{ display:none; } }

.btn-cta, .btn-solid{ background:var(--violet); color:#fff; font-weight:700; font-size:13px; letter-spacing:0.03em; text-transform:uppercase; padding:12px 20px; border-radius:999px; border:none; cursor:pointer; text-decoration:none; }
.btn-cta:hover, .btn-solid:hover{ background:var(--violet-deep); }
.cart-toggle{ position:relative; }
#cart-count{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 4px; margin-left:6px; background:var(--lime); color:var(--ink); border-radius:999px; font-size:11px; font-weight:900; }

.catalog-head{ padding-top:56px; padding-bottom:24px; }
.kicker{ display:flex; align-items:center; gap:9px; margin-bottom:16px; }
.kicker .sq{ width:9px; height:9px; background:var(--violet); flex-shrink:0; }
.kicker span.tx{ font-size:12.5px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; }
.catalog-head h1{ font-weight:900; text-transform:uppercase; line-height:0.98; letter-spacing:-0.01em; font-size:clamp(28px,4.4vw,48px); margin:0 0 14px; text-wrap:balance; }
.catalog-head .lede{ font-size:16px; line-height:1.6; color:var(--muted); max-width:60ch; margin:0 0 28px; }

.catalog-filters{ display:flex; gap:12px; flex-wrap:wrap; }
.catalog-filters input, .catalog-filters select{ font-family:inherit; font-size:14px; padding:12px 14px; border:1.5px solid var(--ink); background:#fff; flex:1 1 200px; }
.catalog-filters button{ flex:0 0 auto; }

.catalog-results{ padding-bottom:80px; }
.catalog-count{ font-size:13px; color:var(--muted-2); margin:0 0 20px; }
.catalog-empty{ font-size:16px; color:var(--muted); padding:40px 0; }

.product-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; }
.product-card{ border:1.5px solid var(--ink); padding:22px; display:flex; flex-direction:column; gap:8px; cursor:pointer; }
.product-card:hover{ border-color:var(--violet); }
.product-card:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }
.product-media{ aspect-ratio:1/1; margin:-22px -22px 6px; background:rgba(11,11,15,0.04); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.product-media img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.product-media-placeholder{ width:100%; height:100%; background:repeating-linear-gradient(135deg, rgba(11,11,15,0.05) 0 10px, rgba(11,11,15,0.02) 10px 20px); }
.stock-badge{ align-self:flex-start; font-size:10.5px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; padding:3px 8px; }
.stock-badge.stock-ok{ background:#0f7a3d; color:#fff; }
.stock-badge.stock-out{ background:rgba(11,11,15,0.08); color:var(--muted-2); }
.stock-badge.stock-unknown{ background:rgba(11,11,15,0.08); color:var(--muted); }
.product-rubro{ align-self:flex-start; font-size:10.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--violet); }
.product-card h3{ margin:4px 0 0; font-size:16px; font-weight:700; line-height:1.3; }
.product-marca{ margin:0; font-size:12.5px; color:var(--muted-2); text-transform:uppercase; letter-spacing:0.03em; }
.product-deposito{ margin:0; font-size:12px; color:var(--muted-2); }
.product-price{ margin-top:auto; padding-top:10px; font-size:20px; font-weight:900; }
.btn-add-cart{ margin-top:8px; background:var(--ink); color:#fff; border:none; font-weight:700; font-size:12.5px; letter-spacing:0.03em; text-transform:uppercase; padding:12px; cursor:pointer; }
.btn-add-cart:hover{ background:var(--violet); }
.btn-add-cart:disabled{ background:var(--muted-2); cursor:not-allowed; }

.catalog-pagination{ display:flex; align-items:center; justify-content:center; gap:24px; margin-top:48px; font-size:13px; font-weight:600; }
.catalog-pagination a{ text-decoration:none; border-bottom:2px solid var(--ink); }
.catalog-pagination a:hover{ color:var(--violet); border-color:var(--violet); }

.cart-panel{ position:fixed; inset:0; z-index:100; background:rgba(11,11,15,0.5); display:flex; justify-content:flex-end; }
.cart-panel[hidden]{ display:none; }
.cart-panel-inner{ width:100%; max-width:420px; height:100%; background:#fff; overflow-y:auto; padding:28px; display:flex; flex-direction:column; gap:20px; }
.cart-panel-head{ display:flex; align-items:center; justify-content:space-between; }
.cart-panel-head h2{ margin:0; font-size:20px; font-weight:900; text-transform:uppercase; }
.cart-panel-head button{ background:none; border:none; font-size:26px; cursor:pointer; line-height:1; }
.cart-items{ display:flex; flex-direction:column; gap:14px; }
.cart-item{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--rule); }
.cart-item-name{ font-size:13.5px; font-weight:600; }
.cart-item-price{ font-size:12.5px; color:var(--muted); }
.cart-item-remove{ background:none; border:none; color:var(--muted-2); font-size:13px; cursor:pointer; text-decoration:underline; }
.cart-empty{ font-size:13.5px; color:var(--muted); }

.cart-form{ display:flex; flex-direction:column; gap:14px; border-top:2px solid var(--ink); padding-top:20px; }
.cart-form .field label{ display:block; font-size:11px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted-2); margin-bottom:6px; }
.cart-form input, .cart-form textarea{ width:100%; font-family:inherit; font-size:14px; padding:11px 12px; border:1.5px solid rgba(11,11,15,0.28); }
.cart-form input:focus, .cart-form textarea:focus{ outline:none; border-color:var(--violet); }
.cart-form-msg{ font-size:13px; }
.cart-form-msg.ok{ color:#0f7a3d; }
.cart-form-msg.error{ color:#c0392b; }

.nav-actions{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; cursor:pointer; }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--ink); }
@media (max-width:760px){
  .nav-toggle{ display:flex; }
  .site-nav{ position:relative; flex-wrap:wrap; }
  .nav-links{ display:none; width:100%; flex-direction:column; align-items:flex-start; gap:0; order:3; border-top:1px solid var(--rule); margin-top:16px; padding-top:4px; }
  .nav-links.open{ display:flex; }
  .nav-links a{ width:100%; box-sizing:border-box; padding:14px 2px; border-bottom:1px solid var(--rule); }
}

.btn-outline{ display:inline-block; background:none; color:var(--ink); font-weight:700; font-size:13px; letter-spacing:0.03em; text-transform:uppercase; padding:12px 20px; border-radius:999px; border:1.5px solid var(--ink); cursor:pointer; text-decoration:none; }
.btn-outline:hover{ background:var(--ink); color:#fff; }

.hero{ padding:64px 0 88px; }
.hero-inner{ max-width:820px; }
.hero h1{ font-weight:900; text-transform:uppercase; line-height:0.95; letter-spacing:-0.01em; font-size:clamp(38px,7vw,84px); margin:0 0 22px; text-wrap:balance; }
.hero .lede{ font-size:18px; line-height:1.6; color:var(--muted); max-width:60ch; margin:0 0 32px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

.contact-section{ padding:72px 0; border-top:1px solid var(--rule); }
.contact-grid{ display:grid; grid-template-columns:1fr 1.3fr; gap:56px; margin-top:32px; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-info-list{ display:flex; flex-direction:column; gap:22px; margin-top:24px; }
.contact-info-item .label{ font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted-2); margin-bottom:4px; }
.contact-info-item .value{ font-size:15px; font-weight:600; line-height:1.5; }
.contact-form-panel{ border:1.5px solid var(--ink); padding:32px; }
.contact-form-panel .field{ margin-bottom:16px; }
.contact-form-panel label{ display:block; font-size:11px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted-2); margin-bottom:6px; }
.contact-form-panel input, .contact-form-panel select, .contact-form-panel textarea{ width:100%; font-family:inherit; font-size:14px; padding:12px 14px; border:1.5px solid rgba(11,11,15,0.28); background:#fff; }
.contact-form-panel input:focus, .contact-form-panel select:focus, .contact-form-panel textarea:focus{ outline:none; border-color:var(--violet); }
.contact-form-panel textarea{ resize:vertical; }

footer.site-footer{ border-top:1px solid var(--rule); padding:36px 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
footer.site-footer .foot-brand{ font-weight:900; font-size:14px; text-transform:uppercase; letter-spacing:-0.01em; }
footer.site-footer .foot-meta{ font-size:13px; color:var(--muted); }
footer.site-footer .foot-meta a{ text-decoration:none; border-bottom:1px solid var(--rule); }

.notice-toast{ position:fixed; top:20px; right:20px; z-index:200; background:var(--ink); color:#fff; padding:14px 18px; font-size:13.5px; font-weight:600; max-width:320px; box-shadow:0 8px 24px rgba(11,11,15,0.2); transform:translateX(130%); transition:transform .25s ease; }
.notice-toast.show{ transform:translateX(0); }
.notice-toast.notice-error{ background:#c0392b; }
.notice-toast.notice-ok{ background:#0f7a3d; }

.product-modal{ position:fixed; inset:0; z-index:110; background:rgba(11,11,15,0.55); display:flex; align-items:flex-start; justify-content:center; padding:40px 20px; overflow-y:auto; }
.product-modal[hidden]{ display:none; }
.product-modal-inner{ position:relative; width:100%; max-width:620px; background:#fff; border:1.5px solid var(--ink); padding:32px; margin:auto 0; }
.product-modal-close{ position:absolute; top:14px; right:14px; z-index:2; background:none; border:none; font-size:28px; line-height:1; cursor:pointer; }
.product-modal-media{ position:relative; isolation:isolate; aspect-ratio:16/10; background:rgba(11,11,15,0.04); display:flex; align-items:center; justify-content:center; margin:-32px -32px 20px; overflow:hidden; }
.product-modal-media img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.product-modal-inner h2{ font-size:22px; font-weight:800; margin:10px 0 4px; line-height:1.25; }
.product-modal-inner .product-marca{ margin:0 0 10px; }
.product-modal-inner .stock-badge{ margin-bottom:10px; }
.product-modal-inner .product-price{ font-size:24px; font-weight:900; margin-bottom:18px; }
.detail-desc{ font-size:14px; line-height:1.6; color:var(--muted); margin:0 0 18px; white-space:pre-line; }
.detail-specs{ display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin:0; padding-top:16px; border-top:1px solid var(--rule); }
.detail-specs dt{ font-size:12px; font-weight:700; color:var(--muted-2); text-transform:uppercase; letter-spacing:0.03em; }
.detail-specs dd{ margin:0; font-size:13.5px; }
.detail-empty{ font-size:13.5px; color:var(--muted-2); padding-top:16px; border-top:1px solid var(--rule); }

/* Home sections: Servicios, Telefonía IP, Nosotros, Cobertura */
.section-block{ padding:72px 0; border-top:1px solid var(--rule); }
.section-title{ font-weight:900; text-transform:uppercase; line-height:1; letter-spacing:-0.01em; font-size:clamp(26px,4vw,42px); margin:0 0 14px; text-wrap:balance; max-width:22ch; }
.section-block > .lede{ font-size:16px; line-height:1.6; color:var(--muted); max-width:60ch; margin:0 0 40px; }

.services-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5px; background:var(--rule); border:1.5px solid var(--ink); }
.service-card{ background:#fff; padding:28px; display:flex; flex-direction:column; gap:10px; }
.service-num{ font-size:13px; font-weight:900; color:var(--violet); }
.service-card h3{ margin:0; font-size:17px; font-weight:800; }
.service-card p{ margin:0; font-size:14px; line-height:1.55; color:var(--muted); }

.telefonia-section{ background:var(--ink); color:#fff; }
.telefonia-section .kicker .sq{ background:var(--lime); }
.telefonia-section .lede{ color:rgba(255,255,255,0.7) !important; }
.telefonia-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px; margin-bottom:32px; }
.telefonia-item h3{ margin:0 0 6px; font-size:16px; font-weight:800; }
.telefonia-item p{ margin:0; font-size:13.5px; line-height:1.55; color:rgba(255,255,255,0.65); }
.telefonia-section .btn-outline{ border-color:#fff; color:#fff; }
.telefonia-section .btn-outline:hover{ background:#fff; color:var(--ink); }

.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1.5px; background:var(--rule); border:1.5px solid var(--ink); }
.stat-card{ background:#fff; padding:32px 20px; display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center; }
.stat-num{ font-size:clamp(28px,4vw,40px); font-weight:900; color:var(--violet); line-height:1; }
.stat-label{ font-size:12.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.03em; }

.coverage-grid{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
.coverage-chip{ border:1.5px solid var(--ink); padding:8px 16px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.02em; }
.coverage-note{ font-size:14px; color:var(--muted); margin:0; }