:root{
    --bg: #FFFFFF;
    --bg-soft: #F0FAF9;
    --panel: #FFFFFF;
    --panel-alt: #E7F8F6;
    --line: #D3EDEA;
    --line-soft: #E3F4F2;
    --text: #0F2B30;
    --text-muted: #4C6A6F;
    --text-dim: #85A3A7;
    --pcb: #0284C7;
    --pcb-dim: #E0F2FE;
    --copper: #14B8A6;
    --copper-bright: #2DD4BF;
    --accent: #0F766E;
    --ok: #0284C7;
    --sale: #E11D48;
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
    --radius: 3px;
    --container: 1280px;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    font-size:14px;
  }
  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  button,select,input{ font-family:inherit; }
  button{ cursor:pointer; }
  ul{ list-style:none; }
  ::selection{ background:var(--copper); color:#161311; }
  :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

  .wrap{ max-width:var(--container); margin:0 auto; padding:0 28px; }

  /* ---------- TOPBAR ---------- */
  .topbar{
    background:var(--bg-soft);
    border-bottom:1px solid var(--line);
    font-size:12.5px;
    color:var(--text-muted);
  }
  .topbar .wrap{
    display:flex; justify-content:space-between; align-items:center;
    height:38px;
  }
  .topbar-contact{ display:flex; gap:20px; align-items:center; font-family:var(--font-mono); }
  .topbar-contact span{ display:flex; align-items:center; gap:6px; }
  .topbar-contact svg{ width:13px; height:13px; color:var(--pcb); }
  .topbar-links{ display:flex; gap:18px; }
  .topbar-links a:hover{ color:var(--accent); }

  /* ---------- HEADER ---------- */
  header{
    background:var(--bg);
    border-bottom:1px solid var(--line);
    position:sticky; top:0; z-index:100;
  }
  .header-main{
    display:flex; align-items:center; gap:32px;
    height:78px;
  }
  .logo{
    font-family:var(--font-display);
    font-weight:700; font-size:21px;
    display:flex; align-items:center; gap:9px;
    flex-shrink:0;
  }
  .logo .dot{ width:8px; height:8px; border-radius:50%; background:var(--copper); box-shadow:0 0 8px var(--copper); }
  .logo small{ display:block; font-family:var(--font-mono); font-size:9.5px; font-weight:400; color:var(--text-dim); letter-spacing:0.08em; margin-top:2px; }

  .search-bar{
    flex:1;
    display:flex;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--panel);
    overflow:hidden;
    max-width:560px;
  }
  .search-bar input{
    flex:1; background:none; border:none; color:var(--text);
    padding:12px 14px; font-size:13.5px;
  }
  .search-bar input:focus{ outline:none; }
  .search-bar input::placeholder{ color:var(--text-dim); }
  .search-bar button{
    background:var(--copper); color:#161311; border:none;
    padding:0 18px; display:flex; align-items:center; justify-content:center;
  }
  .search-bar button:hover{ background:var(--copper-bright); }

  .header-actions{ display:flex; align-items:center; gap:22px; margin-left:auto; }
  .header-action{
    display:flex; flex-direction:column; align-items:center; gap:3px;
    font-size:11px; color:var(--text-muted); position:relative;
  }
  .header-action svg{ width:21px; height:21px; color:var(--text); }
  .header-action:hover svg{ color:var(--accent); }
  .cart-badge{
    position:absolute; top:-6px; right:-9px;
    background:var(--copper); color:#161311;
    font-family:var(--font-mono); font-size:10px; font-weight:600;
    width:16px; height:16px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
  }

  /* ---------- CATEGORY NAV ---------- */
  .catnav{
    background:var(--bg-soft);
    border-bottom:1px solid var(--line);
  }
  .catnav ul{ display:flex; gap:2px; height:46px; }
  .catnav a{
    display:flex; align-items:center; height:100%;
    padding:0 16px; font-size:13px; font-weight:500;
    color:var(--text-muted); border-bottom:2px solid transparent;
    transition:color .2s ease, border-color .2s ease;
  }
  .catnav a:hover{ color:var(--text); border-color:var(--line); }
  .catnav a.active{ color:var(--accent); border-color:var(--copper); }
  .catnav a.tag-sale{ color:var(--sale); font-weight:600; }

  /* ---------- BREADCRUMB ---------- */
  .breadcrumb{
    padding:18px 0 0;
    font-family:var(--font-mono);
    font-size:11.5px;
    color:var(--text-dim);
  }
  .breadcrumb a:hover{ color:var(--accent); }
  .breadcrumb span{ margin:0 6px; }

  /* ---------- PAGE HEAD ---------- */
  .page-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    padding:14px 0 28px; flex-wrap:wrap; gap:12px;
    border-bottom:1px solid var(--line);
    margin-bottom:28px;
  }
  .page-head h1{
    font-family:var(--font-display); font-size:26px; font-weight:600;
  }
  .page-head p{ color:var(--text-muted); font-size:13px; margin-top:4px; }

  /* ---------- LAYOUT ---------- */
  .layout{
    display:grid;
    grid-template-columns:250px 1fr;
    gap:36px;
    padding-bottom:72px;
  }

  /* ---------- SIDEBAR ---------- */
  .side-block{
    border-bottom:1px solid var(--line);
    padding-bottom:22px;
    margin-bottom:22px;
  }
  .side-block h3{
    font-family:var(--font-mono);
    font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--text-dim); margin-bottom:14px;
  }
  .cat-tree li{ margin-bottom:2px; }
  .cat-tree a{
    display:flex; justify-content:space-between;
    padding:7px 10px; border-radius:var(--radius);
    font-size:13.5px; color:var(--text-muted);
  }
  .cat-tree a:hover{ background:var(--panel); color:var(--text); }
  .cat-tree a.active{ background:var(--pcb-dim); color:var(--accent); font-weight:600; }
  .cat-tree .sub{ padding-left:14px; margin-top:2px; }
  .cat-tree .sub a{ font-size:13px; }
  .cat-tree .count{ color:var(--text-dim); font-family:var(--font-mono); font-size:11.5px; }

  .filter-list label{
    display:flex; align-items:center; gap:9px;
    padding:6px 2px; font-size:13px; color:var(--text-muted);
    cursor:pointer;
  }
  .filter-list label:hover{ color:var(--text); }
  .filter-list input[type="checkbox"]{
    width:15px; height:15px; accent-color:var(--copper);
    background:var(--panel);
  }
  .filter-list .count{ margin-left:auto; color:var(--text-dim); font-family:var(--font-mono); font-size:11px; }

  .price-range{ display:flex; flex-direction:column; gap:10px; }
  .price-inputs{ display:flex; align-items:center; gap:8px; }
  .price-inputs input{
    width:100%; background:var(--panel); border:1px solid var(--line);
    border-radius:var(--radius); padding:8px 10px; color:var(--text);
    font-family:var(--font-mono); font-size:12.5px;
  }
  .price-inputs input:focus{ outline:none; border-color:var(--copper); }
  .price-inputs span{ color:var(--text-dim); }
  .btn-filter{
    width:100%; margin-top:6px;
    background:var(--panel); border:1px solid var(--line);
    color:var(--text); padding:10px; border-radius:var(--radius);
    font-size:12.5px; font-weight:600; text-align:center;
    transition:border-color .2s ease, color .2s ease;
  }
  .btn-filter:hover{ border-color:var(--copper); color:var(--accent); }
  .clear-filters{
    display:block; text-align:center; margin-top:10px;
    font-size:12px; color:var(--text-dim);
  }
  .clear-filters:hover{ color:var(--sale); }

  /* ---------- TOOLBAR ---------- */
  .toolbar{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:14px;
    margin-bottom:24px;
  }
  .result-count{ font-size:13px; color:var(--text-muted); }
  .result-count b{ color:var(--text); }
  .toolbar-controls{ display:flex; align-items:center; gap:12px; }
  .select-wrap{
    position:relative;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--panel);
  }
  .select-wrap select{
    appearance:none; background:none; border:none; color:var(--text);
    padding:9px 32px 9px 12px; font-size:12.5px; cursor:pointer;
  }
  .select-wrap select:focus{ outline:none; }
  .select-wrap::after{
    content:"";
    position:absolute; right:11px; top:50%; translate:0 -50%;
    width:7px; height:7px;
    border-right:1.4px solid var(--text-dim); border-bottom:1.4px solid var(--text-dim);
    rotate:45deg; pointer-events:none; margin-top:-3px;
  }
  .view-toggle{ display:flex; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
  .view-toggle button{
    width:34px; height:34px; display:flex; align-items:center; justify-content:center;
    background:var(--panel); color:var(--text-dim); border-right:1px solid var(--line);
  }
  .view-toggle button:last-child{ border-right:none; }
  .view-toggle button.active{ background:var(--pcb-dim); color:var(--accent); }
  .view-toggle svg{ width:15px; height:15px; }

  /* ---------- PRODUCT GRID ---------- */
  .product-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
  }
  .product-card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    display:flex; flex-direction:column;
    transition:border-color .2s ease, transform .2s ease;
    position:relative;
  }
  .product-card:hover{ border-color:var(--pcb); transform:translateY(-2px); }
  .product-media{
    aspect-ratio:1/0.82;
    background:linear-gradient(150deg, var(--panel-alt), var(--bg-soft));
    display:flex; align-items:center; justify-content:center;
    position:relative; border-bottom:1px solid var(--line);
    overflow:hidden;
  }
  .product-media svg{ width:44%; color:var(--text-dim); transition:color .2s ease; }
  .product-card:hover .product-media svg{ color:var(--pcb); }
  .badge{
    position:absolute; top:10px; left:10px;
    font-family:var(--font-mono); font-size:10px; font-weight:600;
    padding:4px 8px; border-radius:2px; letter-spacing:0.04em;
  }
  .badge.oferta{ background:var(--sale); color:#fff; }
  .badge.nuevo{ background:var(--pcb); color:#fff; }
  .fav-btn{
    position:absolute; top:8px; right:8px;
    width:30px; height:30px; border-radius:50%;
    background:rgba(255,255,255,0.85); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    color:var(--text-muted);
  }
  .fav-btn:hover{ color:var(--sale); border-color:var(--sale); }
  .fav-btn svg{ width:14px; height:14px; }

  .product-info{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:6px; flex:1; }
  .product-brand{ font-family:var(--font-mono); font-size:10.5px; color:var(--pcb); letter-spacing:0.04em; text-transform:uppercase; }
  .product-name{ font-size:14px; font-weight:600; line-height:1.35; min-height:38px; }
  .product-rating{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-dim); }
  .stars{ color:var(--copper); letter-spacing:1px; font-size:12px; }
  .product-specs{ font-size:12px; color:var(--text-muted); margin-bottom:4px; }
  .price-row{ margin-top:auto; padding-top:8px; display:flex; align-items:baseline; gap:8px; }
  .price-now{ font-family:var(--font-mono); font-size:17px; font-weight:600; color:var(--text); }
  .price-old{ font-family:var(--font-mono); font-size:12px; color:var(--text-dim); text-decoration:line-through; }
  .price-usd{ font-family:var(--font-mono); font-size:11px; color:var(--text-dim); margin-bottom:2px; }
  .btn-add{
    margin-top:12px; width:100%;
    background:var(--copper); color:#161311;
    padding:10px; border-radius:var(--radius);
    font-size:12.5px; font-weight:600;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition:background .2s ease;
  }
  .btn-add:hover{ background:var(--copper-bright); }
  .btn-add svg{ width:14px; height:14px; }

  /* ---------- PAGINATION ---------- */
  .pagination{
    display:flex; justify-content:center; align-items:center;
    gap:6px; margin-top:44px;
    font-family:var(--font-mono); font-size:13px;
  }
  .pagination a{
    width:34px; height:34px; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line); border-radius:var(--radius); color:var(--text-muted);
  }
  .pagination a:hover{ border-color:var(--copper); color:var(--accent); }
  .pagination a.active{ background:var(--copper); border-color:var(--copper); color:#161311; font-weight:600; }
  .pagination a.nav{ width:auto; padding:0 12px; gap:6px; }

  /* ---------- NEWSLETTER ---------- */
  .newsletter{
    background:var(--panel);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:40px 0;
  }
  .newsletter .wrap{
    display:flex; align-items:center; justify-content:space-between;
    gap:28px; flex-wrap:wrap;
  }
  .newsletter h3{ font-family:var(--font-display); font-size:19px; font-weight:600; margin-bottom:4px; }
  .newsletter p{ color:var(--text-muted); font-size:13px; }
  .newsletter form{ display:flex; gap:10px; flex-wrap:wrap; }
  .newsletter input{
    background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius);
    padding:12px 14px; color:var(--text); font-family:var(--font-mono); font-size:13px; min-width:240px;
  }
  .newsletter input:focus{ outline:none; border-color:var(--copper); }
  .newsletter button{
    background:var(--copper); color:#161311; padding:12px 20px; border-radius:var(--radius);
    font-size:13px; font-weight:600;
  }
  .newsletter button:hover{ background:var(--copper-bright); }

  /* ---------- FOOTER ---------- */
  footer{ padding:56px 0 28px; }
  .footer-grid{
    display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr;
    gap:40px; padding-bottom:40px;
  }
  .footer-brand p{ color:var(--text-muted); font-size:13px; margin:14px 0 18px; max-width:270px; }
  .footer-contact{ display:flex; flex-direction:column; gap:9px; font-size:12.5px; color:var(--text-muted); }
  .footer-contact span{ display:flex; align-items:center; gap:9px; }
  .footer-contact svg{ width:14px; height:14px; color:var(--pcb); flex-shrink:0; }
  .footer-col h5{
    font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--text-dim); margin-bottom:15px;
  }
  .footer-col ul{ display:flex; flex-direction:column; gap:10px; }
  .footer-col a{ font-size:13px; color:var(--text-muted); }
  .footer-col a:hover{ color:var(--accent); }
  .payment-row{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
  .payment-row span{
    border:1px solid var(--line); border-radius:2px; padding:5px 9px;
    font-family:var(--font-mono); font-size:10.5px; color:var(--text-dim);
  }
  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center;
    border-top:1px solid var(--line); padding-top:22px;
    font-size:12px; color:var(--text-dim); font-family:var(--font-mono);
    flex-wrap:wrap; gap:10px;
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:1000px){
    .layout{ grid-template-columns:1fr; }
    .sidebar{ display:none; }
    .product-grid{ grid-template-columns:repeat(2,1fr); }
    .footer-grid{ grid-template-columns:1fr 1fr; }
    .catnav ul{ overflow-x:auto; }
  }
  @media (max-width:640px){
    .wrap{ padding:0 18px; }
    .topbar-contact span:nth-child(2){ display:none; }
    .header-main{ flex-wrap:wrap; height:auto; padding:14px 0; gap:14px; }
    .search-bar{ order:3; max-width:none; width:100%; }
    .product-grid{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns:1fr; gap:28px; }
    .newsletter .wrap{ flex-direction:column; align-items:flex-start; }
  }

  /* ---------- CATEGORY HERO STRIP ---------- */
  .cat-strip{
    display:grid; grid-template-columns:repeat(6,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line);
    margin-bottom:36px; border-radius:var(--radius); overflow:hidden;
  }
  .cat-strip a{
    background:var(--bg-soft); padding:16px 14px;
    display:flex; flex-direction:column; gap:8px;
    font-size:12.5px; font-weight:600; color:var(--text-muted);
    transition:background .2s ease, color .2s ease;
  }
  .cat-strip a:hover{ background:var(--panel-alt); color:var(--text); }
  .cat-strip a.active{ background:var(--pcb-dim); color:var(--accent); }
  .cat-strip svg{ width:20px; height:20px; color:var(--copper); }

  /* ---------- PRODUCT DETAIL ---------- */
  .pd-layout{
    display:grid; grid-template-columns:1fr 1fr;
    gap:52px; padding:8px 0 60px;
  }
  .pd-gallery{ position:sticky; top:140px; align-self:start; }
  .pd-main-media{
    aspect-ratio:1/0.86;
    background:linear-gradient(150deg, var(--panel-alt), var(--bg-soft));
    border:1px solid var(--line); border-radius:var(--radius);
    display:flex; align-items:center; justify-content:center;
    position:relative; margin-bottom:12px;
    overflow:hidden;
  }
  .pd-main-media svg{ width:38%; color:var(--pcb); }
  .pd-main-media img{ width:100%; height:100%; object-fit:cover; }
  .pd-thumbs{ display:flex; gap:10px; }
  .pd-thumbs button{
    width:64px; height:64px; border:1px solid var(--line); border-radius:var(--radius);
    background:var(--panel-alt); display:flex; align-items:center; justify-content:center;
    overflow:hidden; padding:0;
  }
  .pd-thumbs button.active{ border-color:var(--copper); }
  .pd-thumbs svg{ width:60%; color:var(--text-dim); }
  .pd-thumbs img{ width:100%; height:100%; object-fit:cover; }

  .pd-brand{ font-family:var(--font-mono); font-size:11.5px; color:var(--pcb); text-transform:uppercase; letter-spacing:0.05em; }
  .pd-title{ font-family:var(--font-display); font-size:28px; font-weight:600; margin:8px 0 10px; line-height:1.2; }
  .pd-meta{ display:flex; align-items:center; gap:14px; font-size:12.5px; color:var(--text-muted); margin-bottom:18px; }
  .pd-meta .stars{ font-size:14px; }
  .pd-sku{ font-family:var(--font-mono); color:var(--text-dim); }

  .pd-price-block{
    display:flex; align-items:baseline; gap:12px;
    padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    margin-bottom:20px;
  }
  .pd-price-now{ font-family:var(--font-mono); font-size:30px; font-weight:600; color:var(--text); }
  .pd-price-old{ font-family:var(--font-mono); font-size:15px; color:var(--text-dim); text-decoration:line-through; }
  .pd-discount{ font-family:var(--font-mono); font-size:12px; font-weight:600; color:#fff; background:var(--sale); padding:3px 8px; border-radius:2px; }

  .pd-highlights{ margin-bottom:22px; }
  .pd-highlights li{
    display:flex; align-items:flex-start; gap:10px;
    font-size:13.5px; color:var(--text-muted); padding:5px 0;
  }
  .pd-highlights svg{ width:15px; height:15px; color:var(--copper); flex-shrink:0; margin-top:2px; }

  .pd-buy-row{ display:flex; gap:12px; margin-bottom:22px; flex-wrap:wrap; }
  .qty-select{
    display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  }
  .qty-select button{ width:38px; height:46px; background:var(--panel-alt); font-size:16px; color:var(--text); }
  .qty-select button:hover{ background:var(--pcb-dim); color:var(--accent); }
  .qty-select span{ width:42px; text-align:center; font-family:var(--font-mono); font-size:14px; }
  .pd-buy-row .btn-add{ flex:1; margin-top:0; padding:0 20px; height:46px; font-size:13.5px; }
  .pd-fav-lg{
    width:46px; height:46px; border:1px solid var(--line); border-radius:var(--radius);
    display:flex; align-items:center; justify-content:center; color:var(--text-muted);
  }
  .pd-fav-lg:hover{ color:var(--sale); border-color:var(--sale); }
  .pd-fav-lg svg{ width:18px; height:18px; }

  .pd-trust{ display:flex; flex-direction:column; gap:10px; }
  .pd-trust div{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--text-muted); }
  .pd-trust svg{ width:17px; height:17px; color:var(--pcb); flex-shrink:0; }

  /* ---------- TABS ---------- */
  .pd-tabs{ margin-top:8px; border-bottom:1px solid var(--line); display:flex; gap:4px; }
  .pd-tabs button{
    padding:12px 18px; font-size:13.5px; font-weight:600; color:var(--text-muted);
    border-bottom:2px solid transparent; margin-bottom:-1px;
  }
  .pd-tabs button.active{ color:var(--accent); border-color:var(--copper); }
  .pd-tab-panel{ padding:28px 0; font-size:14px; color:var(--text-muted); line-height:1.7; }
  .pd-tab-panel h4{ font-family:var(--font-display); font-size:16px; color:var(--text); margin:18px 0 8px; }
  .pd-tab-panel h4:first-child{ margin-top:0; }
  .pd-tab-panel p{ margin-bottom:12px; }

  .specs-table{ width:100%; border-collapse:collapse; }
  .specs-table tr{ border-bottom:1px solid var(--line); }
  .specs-table td{ padding:11px 4px; font-size:13.5px; }
  .specs-table td:first-child{ color:var(--text-dim); width:38%; font-family:var(--font-mono); font-size:12px; }
  .specs-table td:last-child{ color:var(--text); font-weight:500; }

  .review{ padding:18px 0; border-bottom:1px solid var(--line); }
  .review-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
  .review-author{ font-weight:600; color:var(--text); font-size:13.5px; }
  .review-date{ font-family:var(--font-mono); font-size:11px; color:var(--text-dim); }
  .review .stars{ margin-bottom:6px; display:block; }

  /* ---------- RELATED ---------- */
  .related-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:20px; }
  .related-head h2{ font-family:var(--font-display); font-size:20px; font-weight:600; }

  @media (max-width:1000px){
    .cat-strip{ grid-template-columns:repeat(3,1fr); }
    .pd-layout{ grid-template-columns:1fr; gap:28px; }
    .pd-gallery{ position:static; }
  }
  @media (max-width:640px){
    .cat-strip{ grid-template-columns:repeat(2,1fr); }
  }