:root{
    --ink:#141414;
    --ink-2:#1d1d1d;
    --dim:#6b6b6b;
    --dim-light:#a8a8a8;
    --line:#dddddd;
    --line-dark:rgba(255,255,255,0.14);
    --paper:#ffffff;
    --bg:#f4f4f4;
    --text-on-dark:#f2f2f2;
    --accent:#e2231a;
    --accent-hover:#b8170f;
    --ok:#2e7d32;
    --radius:4px;
    --card-radius:16px;
    --font-display:'Anton', 'Inter', sans-serif;
    --header-h:76px;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    font-family: 'Inter', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-feature-settings:"cv11","ss01";
    letter-spacing:-0.011em;
    color:var(--text-on-dark);
    background-color:var(--ink);
    background-image:
      radial-gradient(ellipse 900px 500px at 15% 0%, rgba(226,35,26,0.16), transparent 60%),
      repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 3px),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 3px);
    background-attachment:fixed;
  }
  h1,h2,h3{ font-weight:800; letter-spacing:-0.034em; line-height:1.08; text-wrap:balance; margin:0; }
  .display{ font-family:var(--font-display); font-weight:400; letter-spacing:0.01em; text-transform:uppercase; }

  /* ---------- reveal on scroll system ---------- */
  .reveal-up, .reveal-left, .reveal-right, .reveal-pop, .reveal-fade{
    opacity:0;
    transition: translate 1.2s cubic-bezier(.22,1.4,.36,1), scale 1.2s cubic-bezier(.22,1.4,.36,1), rotate 1.2s cubic-bezier(.22,1.4,.36,1), opacity 1.2s cubic-bezier(.22,1.4,.36,1);
  }
  .reveal-up{ translate:0 80px; scale:.94; }
  .reveal-left{ translate:-120px 0; }
  .reveal-right{ translate:120px 0; }
  .reveal-pop{ scale:.55; rotate:-4deg; }
  .reveal-fade{ translate:0 24px; }
  .reveal-up.in-view, .reveal-left.in-view, .reveal-right.in-view, .reveal-pop.in-view, .reveal-fade.in-view{
    opacity:1; translate:0 0; scale:1; rotate:0deg;
  }
  @media (prefers-reduced-motion: reduce){
    .reveal-up, .reveal-left, .reveal-right, .reveal-pop, .reveal-fade{ opacity:1 !important; translate:0 0 !important; scale:1 !important; rotate:0deg !important; transition:none !important; }
  }
  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; cursor:pointer; }
  img{ max-width:100%; display:block; }

  /* ---------- layout shells ---------- */
  #site-view{ display:none; min-height:100vh; flex-direction:column; }
  #site-view.show{ display:flex; }

  /* ---------- site header ---------- */
  .site-header{
    background:transparent;
    border-bottom:1px solid transparent;
    position:fixed; top:0; left:0; right:0; z-index:20;
    color:#fff;
    transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease, backdrop-filter .35s ease;
  }
  .site-header.scrolled{
    background-color:rgba(20,20,20,0.82);
    backdrop-filter:blur(10px);
    box-shadow:0 4px 20px rgba(0,0,0,0.3);
    border-bottom-color:var(--line-dark);
  }
  .site-header-top{
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
    max-width:1400px; margin:0 auto; padding:16px 24px;
  }
  .nav-side{ display:flex; align-items:center; gap:20px; }
  .nav-side nav{ display:flex; align-items:center; gap:20px; }
  .nav-left{ justify-content:flex-start; }
  .nav-right{ justify-content:flex-end; }
  .nav-link{
    font-size:clamp(13px, 1.02vw, 16px); font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    line-height:1.15; text-align:center; max-width:130px;
    color:rgba(255,255,255,0.88); position:relative; padding:4px 0;
  }
  .nav-link::after{
    content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--accent);
    transition:right .25s ease;
  }
  .nav-link.active, .nav-link:hover{ color:#fff; }
  .nav-link.active::after, .nav-link:hover::after{ right:0; }
  .menu-btn{ display:none; width:44px; height:44px; border:none; background:transparent; flex-direction:column; justify-content:center; align-items:center; gap:5px; padding:0; }
  .menu-btn span{ display:block; width:24px; height:2px; background:#fff; border-radius:2px; }
  @media (max-width:1100px){
    .nav-side nav{ display:none; }
    .menu-btn{ display:flex; }
    .site-header-top{ grid-template-columns:1fr auto 1fr; padding:10px 14px; }
  }
  .site-logo{ color:#fff; text-align:center; }
  .site-logo img{ height:42px; width:auto; display:block; margin:0 auto; border-radius:50%; }
  .cart-btn{ transition:scale .3s ease; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.35); color:#fff; padding:9px 16px; font-size:0.85rem; font-weight:700; position:relative; display:inline-flex; align-items:center; gap:8px; border-radius:999px; min-height:44px; }
  .cart-btn svg{ width:20px; height:20px; flex:none; }
  @media (max-width:640px){ .cart-label{ display:none; } .cart-btn{ padding:0; width:44px; justify-content:center; } }

  /* ---------- mobile menu (drawer) ---------- */
  .mobile-menu-backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:44; }
  .mobile-menu-backdrop.show{ display:block; }
  .mobile-menu{
    position:fixed; top:0; left:0; bottom:0; width:min(84vw, 340px); z-index:45;
    background:#121212; border-right:1px solid var(--line-dark);
    transform:translateX(-100%); transition:transform .32s cubic-bezier(.22,1,.36,1);
    display:flex; flex-direction:column; padding:calc(env(safe-area-inset-top,0px) + 14px) 22px 30px;
    overflow-y:auto; overscroll-behavior:contain;
  }
  .mobile-menu.show{ transform:translateX(0); }
  .mobile-menu-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
  .mobile-menu-head img{ height:52px; border-radius:50%; }
  .mobile-menu-close{ background:none; border:none; color:#fff; font-size:2.2rem; line-height:1; width:44px; height:44px; }
  #mobile-menu-links{ display:flex; flex-direction:column; }
  .mobile-menu-link{
    display:block; font-family:var(--font-display); font-size:1.45rem; text-transform:uppercase; letter-spacing:.02em;
    color:#fff; padding:14px 0; border-bottom:1px solid var(--line-dark);
  }
  .mobile-menu-link.active{ color:var(--accent); }
  .site-header.scrolled .cart-btn{ background:var(--accent); border-color:var(--accent); }
  .cart-btn:hover{ background:var(--accent); border-color:var(--accent); }
  @media (hover:hover){ .cart-btn:hover{ scale:1.06; } }
  .cart-btn:active{ scale:.95; }
  .cart-count{ transition:scale .25s cubic-bezier(.22,1.4,.36,1); }
  .cart-count.bump{ animation:bumpCount .4s cubic-bezier(.22,1.4,.36,1); }
  @keyframes bumpCount{ 0%{ scale:1; } 40%{ scale:1.5; } 100%{ scale:1; } }

  /* ---------- whatsapp floating button ---------- */
  .wa-float{
    position:fixed; right:20px; bottom:20px; z-index:35;
    width:58px; height:58px; border-radius:50%;
    background:#25D366; color:#fff; border:none;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 20px rgba(37,211,102,0.45);
    animation: waBounce 2.5s ease-in-out infinite;
    transition: scale .3s ease;
  }
  @media (hover:hover){ .wa-float:hover{ scale:1.1; animation-play-state:paused; } }
  .wa-float:active{ scale:.94; }
  .wa-float svg{ width:28px; height:28px; }
  @keyframes waBounce{ 0%,100%{ translate:0 0; } 50%{ translate:0 -10px; } }
  @media (prefers-reduced-motion: reduce){ .wa-float{ animation:none; } }
  .cart-count{
    position:absolute; top:-8px; right:-8px; background:var(--accent); color:#fff;
    border-radius:50%; width:20px; height:20px; font-size:0.7rem;
    display:flex; align-items:center; justify-content:center;
  }

  main.site-main{ flex:1; max-width:1200px; margin:0 auto; width:100%; padding:20px; }
  main.site-main.with-header-space{ padding-top:calc(var(--header-h) + 24px); }

  /* ---------- full-bleed home hero ---------- */
  .home-hero{ display:none; position:relative; width:100%; height:100svh; overflow:hidden; background:#000; }
  .home-hero.show{ display:block; }
  .home-hero .banner-slider{ width:100%; height:100%; margin:0; border-radius:0; aspect-ratio:auto; }
  .home-hero .banner-slide{ filter:brightness(0.78); }
  .home-hero{ background:#000 center/cover no-repeat; }
  .home-hero-media{ position:absolute; inset:0; background:#000; }
  .home-hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
  .home-hero-video.fit-h{ left:50%; right:auto; width:auto; height:100%; aspect-ratio:auto; transform:translateX(-50%);
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%); }
  .home-hero-video.fit-w{ top:50%; bottom:auto; width:100%; height:auto; transform:translateY(-50%);
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
            mask-image:linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
  .home-hero-scroll{
    position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
    color:#fff; display:flex; flex-direction:column; align-items:center; gap:6px;
    font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
    animation:heroScrollBounce 2s ease-in-out infinite; z-index:2; opacity:.9;
  }
  .home-hero-scroll svg{ width:18px; height:18px; }
  @keyframes heroScrollBounce{ 0%,100%{ translate:0 0; } 50%{ translate:0 8px; } }
  @media (prefers-reduced-motion: reduce){ .home-hero-scroll{ animation:none; } }

  .site-footer{
    background-color:rgba(0,0,0,0.35); border-top:1px solid var(--line-dark);
    color:#ccc; padding:28px 20px; font-size:0.8rem; text-align:center;
  }
  .site-footer a{ color:#fff; }

  /* ---------- banner slider ---------- */
  .banner-slider{
    position:relative; aspect-ratio:2.4/1; border-radius:var(--radius); overflow:hidden;
    background:#222; margin-bottom:28px;
  }
  .banner-slide{
    position:absolute; inset:0; background-size:cover; background-position:center;
    opacity:0; transition:opacity .6s ease;
  }
  .banner-slide.active{ opacity:1; }
  .banner-dots{ position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; gap:6px; }
  .banner-dots span{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.5); }
  .banner-dots span.active{ background:#fff; }
  .banner-empty{
    aspect-ratio:2.4/1; border-radius:var(--radius); border:1px dashed var(--line-dark);
    display:flex; align-items:center; justify-content:center; color:var(--dim-light);
    font-size:0.85rem; margin-bottom:28px;
  }
  .banner-secondary{
    aspect-ratio:3.2/1; border-radius:var(--radius); overflow:hidden; background:#eee center/cover no-repeat;
    margin:36px 0; cursor:default;
  }
  .banner-secondary.clickable{ cursor:pointer; }

  /* ---------- category carousel (formato slide) ---------- */
  .cat-carousel-wrap{ position:relative; margin-bottom:40px; }
  .cat-carousel-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; }
  .cat-carousel-head a{ white-space:nowrap; flex:none; margin-left:12px; font-size:0.78rem; font-weight:700; color:var(--dim-light); text-transform:uppercase; letter-spacing:.04em; }
  @media (hover:hover){ .cat-carousel-head a:hover{ color:var(--accent); } }
  .cat-carousel-track{
    overflow:hidden; padding:10px 0 14px;
    touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; overscroll-behavior-x:contain;
  }
  .cat-carousel-track::-webkit-scrollbar{ display:none; }
  .cat-carousel-strip{ display:flex; gap:16px; width:max-content; will-change:transform; transform:translate3d(0,0,0); }
  .cat-carousel-track .pcard{ flex-shrink:0; }
  .cat-carousel-track:active{ cursor:grabbing; }
  .cat-carousel-track img{ -webkit-user-drag:none; pointer-events:none; }
  .cat-carousel-wrap{ margin-bottom:34px; }
  .cat-carousel-arrow{
    position:absolute; top:calc(50% + 18px); transform:translateY(-50%); z-index:5;
    width:46px; height:46px; border-radius:50%; padding:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(12,10,10,0.72); color:#fff; border:1px solid rgba(255,255,255,0.22);
    box-shadow:0 8px 24px rgba(0,0,0,0.45);
    opacity:.85; transition:background-color .25s ease, border-color .25s ease, opacity .25s ease, scale .25s ease;
  }
  .cat-carousel-arrow svg{ width:20px; height:20px; }
  .cat-carousel-wrap:hover .cat-carousel-arrow{ opacity:1; }
  @media (hover:hover){ .cat-carousel-arrow:hover{ scale:1.08; background:var(--accent); border-color:var(--accent); } }
  .cat-carousel-arrow:active{ scale:.94; }
  .cat-carousel-arrow:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  .cat-carousel-arrow.prev{ left:-10px; }
  .cat-carousel-arrow.next{ right:-10px; }
  @media (max-width:640px){ .cat-carousel-arrow{ display:none; } }

  /* ---------- product rows / grids ---------- */
  .section-title{ font-family:var(--font-display); color:#fff; font-size:1.5rem; font-weight:400; margin:0 0 12px; text-transform:uppercase; letter-spacing:0.02em; }
  .row-scroll{
    display:flex; gap:14px; overflow-x:auto; padding-bottom:6px; margin-bottom:32px;
    -webkit-overflow-scrolling:touch;
  }
  .grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:16px; margin-bottom:20px;
  }
  .pcard{
    position:relative;
    background:#111; border-radius:24px;
    overflow:hidden; flex:0 0 250px; width:250px; aspect-ratio:9/12;
    display:block; box-shadow:0 10px 28px rgba(0,0,0,0.35);

    transition:transform .4s ease-out, box-shadow .4s ease;
  }
  @media (hover:hover){ .pcard{ transform-style:preserve-3d; } }
  .grid .pcard{ flex:none; width:auto; }
  .pcard-photo{
    position:absolute; inset:0; transform:translateZ(-20px) scale(1.04);
  }
  .pcard-photo img{
    width:100%; height:100%; object-fit:contain; object-position:center 64%;
    animation: swayRight 4.2s ease-in-out infinite;
  }
  .pcard:nth-child(even) .pcard-photo img{ animation-name: swayLeft; }
  @media (hover:none){ .pcard-photo img{ animation:none !important; } .pcard-photo{ transform:none; } .pcard-content, .pcard-badge{ transform:none; } .pcard{ box-shadow:0 6px 16px rgba(0,0,0,0.3); } }
  @keyframes swayRight{ 0%,100%{ translate:0 0; } 50%{ translate:5px 0; } }
  @keyframes swayLeft{ 0%,100%{ translate:0 0; } 50%{ translate:-5px 0; } }
  @media (prefers-reduced-motion: reduce){ .pcard-photo img{ animation:none; } }
  .pcard-overlay{
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.25) 45%, transparent 72%);
  }
  .pcard-badge{
    position:absolute; bottom:30px; left:16px; background:var(--accent); color:#fff;
    font-size:0.62rem; font-weight:800; padding:4px 8px; border-radius:3px; text-transform:uppercase; letter-spacing:.04em;
    z-index:3; transform:translateZ(45px);
  }
  .pcard-content{
    position:absolute; inset:0; padding:16px; display:flex; flex-direction:column;
    transform:translateZ(40px);
  }
  .pcard-header{
    display:flex; align-items:flex-start; justify-content:space-between; gap:8px;
    border-radius:14px; border:1px solid rgba(255,255,255,0.14);
    background:rgba(255,255,255,0.08); backdrop-filter:blur(10px);
    padding:12px 14px;
  }
  .pcard-cat{ font-size:0.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,0.65); }
  .pcard-name{ font-size:1rem; font-weight:700; line-height:1.2; color:#fff; margin-top:2px; }
  .pcard-logo{ height:16px; width:auto; opacity:0.9; flex:none; border-radius:50%; }
  .pcard-price-row{ margin-top:10px; }
  .pcard-price{
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(0,0,0,0.45); backdrop-filter:blur(6px);
    color:#fff; font-size:0.85rem; font-weight:700;
    padding:6px 14px; border-radius:999px;
  }
  .pcard-price .old{ color:rgba(255,255,255,0.55); text-decoration:line-through; font-weight:500; font-size:0.72rem; }
  .pcard-dots{ margin-top:auto; display:flex; justify-content:center; gap:6px; padding-bottom:2px; }
  .pcard-dots span{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.3); }
  .pcard-dots span:first-child{ background:#fff; }
  .empty-note{ color:var(--dim-light); font-size:0.85rem; padding:20px 0; }

  /* ---------- category title ---------- */
  .page-title{ font-family:var(--font-display); color:#fff; font-size:2rem; font-weight:400; margin:0 0 18px; text-transform:uppercase; }

  /* ---------- product detail ---------- */
  .pdetail{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
  @media (max-width:700px){ .pdetail{ grid-template-columns:1fr; } }
  .pdetail-photo{
    aspect-ratio:1/1; background:#0b0b0b center/contain no-repeat; border-radius:12px;
    cursor:zoom-in; position:relative; overflow:hidden; border:1px solid var(--line-dark); max-width:100%;
  }
  .pdetail-photo.lens-mode{ touch-action:none; cursor:none; }
  .pdetail-tools{ position:absolute; left:10px; right:10px; bottom:10px; display:flex; justify-content:space-between; gap:8px; pointer-events:none; z-index:3; }
  .pdetail-tools button{
    pointer-events:auto; display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:0 14px;
    border-radius:999px; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.7); color:#fff;
    font-size:.8rem; font-weight:700;
  }
  .pdetail-tools button svg{ width:17px; height:17px; }
  .pdetail-tools .lens-toggle.on{ background:var(--accent); border-color:var(--accent); }
  .pdetail-tools .lens-hint{ pointer-events:none; align-self:center; font-size:.72rem; color:#fff; background:rgba(0,0,0,.6); padding:6px 10px; border-radius:999px; }
  @media (hover:none){ .pdetail-tools .lens-hint{ display:none; } }
  @media (hover:hover) and (pointer:fine){ .pdetail-tools .lens-toggle{ display:none; } }
  .lens{
    position:absolute; z-index:4; width:var(--lens,230px); height:var(--lens,230px); border-radius:50%;
    border:3px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 12px 40px rgba(0,0,0,.6), inset 0 0 18px rgba(0,0,0,.35);
    background:#000 no-repeat; pointer-events:none; opacity:0; transform:scale(.6); transition:opacity .15s ease, transform .15s ease;
    will-change:left, top, background-position;
  }
  .lens.on{ opacity:1; transform:scale(1); }
  .lens::after{
    content:attr(data-z); position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
    font-size:.68rem; font-weight:800; color:#fff; background:rgba(0,0,0,.65); padding:2px 8px; border-radius:999px;
  }
  @media (max-width:700px){ .lens{ --lens:150px; } }
  .pdetail-thumbs{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
  .pdetail-thumb{
    width:64px; height:64px; border-radius:8px; background:#0b0b0b center/cover no-repeat;
    border:2px solid transparent; cursor:pointer; transition:border-color .2s ease, scale .2s ease;
  }
  .pdetail-thumb.active{ border-color:var(--accent); }
  @media (hover:hover){ .pdetail-thumb:hover{ scale:1.06; } }

  /* ---------- visor a pantalla completa ---------- */
  .zoomer{ position:fixed; inset:0; z-index:80; background:#060606; color:#fff; overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none; }
  .zoomer-stage{ position:absolute; inset:0; cursor:grab; }
  .zoomer-stage.dragging{ cursor:grabbing; }
  .zoomer-stage img{ position:absolute; left:0; top:0; max-width:none; transform-origin:0 0; will-change:transform; -webkit-user-drag:none; image-rendering:auto; }
  .zoomer-top{ position:absolute; top:0; left:0; right:0; display:flex; align-items:center; gap:12px; padding:calc(12px + env(safe-area-inset-top,0px)) max(14px, env(safe-area-inset-right,0px)) 12px max(16px, env(safe-area-inset-left,0px)); background:linear-gradient(rgba(0,0,0,.7), transparent); z-index:2; }
  .zoomer-count{ font-weight:800; font-size:.9rem; }
  .zoomer-hd{ font-size:.72rem; color:#ccc; background:rgba(255,255,255,.1); padding:4px 10px; border-radius:999px; }
  .zoomer-hd.ok{ color:#7ee39a; }
  .zoomer-btn{ width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.6); color:#fff; font-size:1.5rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
  .zoomer-btn:hover{ background:rgba(255,255,255,.15); }
  .zoomer-close{ margin-left:auto; font-size:2rem; }
  .zoomer-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:52px; height:52px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.55); color:#fff; font-size:2.2rem; line-height:1; display:flex; align-items:center; justify-content:center; }
  .zoomer-nav.prev{ left:max(14px, env(safe-area-inset-left,0px)); }
  .zoomer-nav.next{ right:max(14px, env(safe-area-inset-right,0px)); }
  .zoomer-bar{ position:absolute; left:50%; bottom:calc(18px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:2; display:flex; align-items:center; gap:8px; padding:6px; border-radius:999px; background:rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.15); }
  .zoomer-level{ min-width:58px; text-align:center; font-weight:800; font-size:.85rem; font-variant-numeric:tabular-nums; }
  .zoomer-fit{ min-height:46px; padding:0 16px; border-radius:999px; border:none; background:var(--accent); color:#fff; font-weight:800; font-size:.85rem; }
  .zoomer-hint{ position:absolute; left:50%; bottom:calc(84px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:2; font-size:.78rem; color:#ddd; background:rgba(0,0,0,.6); padding:7px 14px; border-radius:999px; white-space:nowrap; transition:opacity .4s ease; pointer-events:none; }
  .zoomer-hint.gone{ opacity:0; }
  .zoomer-mini{ position:absolute; right:max(14px, env(safe-area-inset-right,0px)); bottom:calc(84px + env(safe-area-inset-bottom,0px)); z-index:2; width:132px; border-radius:8px; overflow:hidden; border:1px solid rgba(255,255,255,.3); background:#000; opacity:0; transition:opacity .2s ease; pointer-events:none; }
  .zoomer-mini.on{ opacity:1; pointer-events:auto; cursor:pointer; }
  .zoomer-mini img{ display:block; width:100%; height:auto; opacity:.75; }
  .zoomer-mini i{ position:absolute; border:2px solid var(--accent); box-shadow:0 0 0 999px rgba(0,0,0,.35); }
  @media (max-width:640px){
    .zoomer-nav{ width:44px; height:44px; font-size:1.8rem; }
    .zoomer-hint{ white-space:normal; width:calc(100% - 40px); text-align:center; }
    .zoomer-mini{ width:96px; bottom:calc(88px + env(safe-area-inset-bottom,0px)); }
  }
  .pdetail-name{ font-family:var(--font-display); color:#fff; font-size:2.1rem; font-weight:400; margin:0 0 8px; text-transform:uppercase; }
  .pdetail-cat{ color:var(--accent); font-size:0.78rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; margin-bottom:14px; }
  .pdetail-price{ font-size:1.6rem; font-weight:800; color:var(--accent); margin-bottom:18px; }
  .pdetail-price .old{ color:var(--dim-light); text-decoration:line-through; font-weight:500; font-size:1rem; margin-right:8px; }
  .pdetail-desc{ line-height:1.6; margin-bottom:22px; white-space:pre-wrap; color:var(--text-on-dark); }
  .qty-row{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
  .qty-row button{ width:34px; height:34px; border:1px solid var(--line-dark); background:rgba(255,255,255,0.06); color:#fff; border-radius:var(--radius); font-size:1.1rem; }
  .qty-row span{ min-width:24px; text-align:center; font-weight:700; color:#fff; }
  .btn{
    background:var(--ink); color:#fff; border:none; border-radius:var(--radius);
    padding:12px 20px; font-weight:700; font-size:0.9rem;
  }
  .btn:hover{ background:#000; }
  .btn.accent{ background:var(--accent); }
  .btn.accent:hover{ background:var(--accent-hover); }
  .btn.secondary{ background:rgba(255,255,255,0.08); color:#fff; border:1px solid var(--line-dark); }
  .back-link{ display:inline-block; margin-bottom:16px; font-size:0.85rem; color:var(--dim-light); }
  @media (hover:hover){ .back-link:hover{ color:#fff; } }

  /* ---------- cart drawer (oscuro, legible) ---------- */
  .cart-backdrop{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:40;
  }
  .cart-backdrop.show{ display:block; }
  .cart-drawer{
    position:fixed; top:0; right:-400px; width:380px; max-width:92vw; height:100%;
    background:#151515; color:var(--text-on-dark); border-left:1px solid var(--line-dark);
    z-index:41; transition:right .28s cubic-bezier(.22,1,.36,1); display:flex; flex-direction:column;
    box-shadow:-10px 0 40px rgba(0,0,0,0.5);
    padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .cart-drawer.show{ right:0; }
  .cart-head{ padding:14px 14px 14px 20px; border-bottom:1px solid var(--line-dark); display:flex; justify-content:space-between; align-items:center; }
  .cart-head h3{ margin:0; font-family:var(--font-display); font-weight:400; font-size:1.5rem; letter-spacing:.02em; text-transform:uppercase; color:#fff; }
  .cart-close{ background:none; border:none; color:#fff; font-size:2rem; line-height:1; width:44px; height:44px; border-radius:50%; }
  .cart-close:hover{ background:rgba(255,255,255,0.08); }
  .cart-items{ flex:1; overflow-y:auto; padding:6px 20px; overscroll-behavior:contain; }
  .cart-item{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line-dark); }
  .cart-item-photo{ width:68px; height:68px; border-radius:10px; background:#0c0c0c center/cover no-repeat; flex:none; }
  .cart-item-body{ flex:1; min-width:0; font-size:0.9rem; }
  .cart-item-name{ font-weight:700; color:#fff; margin-bottom:3px; line-height:1.3; }
  .cart-item-price{ color:#cfcfcf; font-weight:600; margin-bottom:8px; }
  .cart-item-qty{ display:flex; align-items:center; gap:10px; color:#fff; font-weight:700; }
  .cart-item-qty button{ width:32px; height:32px; border:1px solid var(--line-dark); background:rgba(255,255,255,0.08); color:#fff; border-radius:8px; font-size:1rem; line-height:1; }
  .cart-item-qty button:hover{ background:rgba(255,255,255,0.16); }
  .cart-item-qty .cart-item-remove{ width:auto; height:auto; border:none; background:none; font-size:0.8rem; color:#ff6b62; margin-left:auto; text-decoration:underline; font-weight:600; padding:4px 0; }
  .cart-foot{ padding:16px 20px 20px; border-top:1px solid var(--line-dark); background:#111; }
  .cart-total{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-weight:800; margin-bottom:14px; color:#fff; font-size:1.05rem; }
  .cart-total span:last-child{ font-size:1.3rem; text-align:right; }
  .cart-empty{ color:#bdbdbd; font-size:0.95rem; padding:48px 0; text-align:center; }
  #cart-checkout-btn{
    background:#25D366; color:#fff; border:none; border-radius:999px; min-height:52px; font-size:1rem; font-weight:800;
    display:flex; align-items:center; justify-content:center; gap:10px; box-shadow:0 8px 24px rgba(37,211,102,0.3);
  }
  #cart-checkout-btn svg{ width:22px; height:22px; flex:none; }
  #cart-checkout-btn:hover{ background:#1ebe5b; }
  #cart-checkout-btn:active{ transform:scale(.98); }

  .toast{
    position:fixed; bottom:calc(20px + env(safe-area-inset-bottom,0px)); left:50%; transform:translateX(-50%) translateY(150%);
    background:#fff; color:#141414; padding:12px 20px; border-radius:999px; font-size:0.9rem; font-weight:700;
    box-shadow:0 10px 30px rgba(0,0,0,0.5); transition:transform .25s ease; z-index:60; max-width:calc(100% - 32px); text-align:center;
  }
  .toast{ opacity:0; visibility:hidden; }
  .toast.show{ transform:translateX(-50%) translateY(0); opacity:1; visibility:visible; }



  /* ================= RESPONSIVE / ANDROID ================= */
  html, body{ overflow-x:hidden; }
  @supports (overflow-x:clip){ html, body{ overflow-x:clip; } }
  *{ -webkit-tap-highlight-color:transparent; }
  img, video{ max-width:100%; }
  @media (max-width:768px){
    :root{ --header-h:64px; }
    body{ background-attachment:scroll; }
    main.site-main{ padding:16px 14px; }
    .section-title{ font-size:1.6rem; }
    .page-title{ font-size:1.9rem; }
    .pcard{ flex-basis:68vw; width:68vw; max-width:270px; border-radius:20px; }
    .grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
    .grid .pcard{ width:auto; max-width:none; border-radius:16px; }
    .grid .pcard-content{ padding:10px; }
    .grid .pcard-header{ padding:8px 10px; border-radius:10px; }
    .grid .pcard-name{ font-size:0.82rem; }
    .grid .pcard-price{ font-size:0.75rem; padding:5px 10px; }
    .pcard-header, .pcard-price{ backdrop-filter:none; -webkit-backdrop-filter:none; }
    .pcard-header{ background:rgba(0,0,0,0.45); }
    .pcard-price{ background:rgba(0,0,0,0.6); }
    .site-header.scrolled{ backdrop-filter:none; background-color:#121212; }
    .pdetail{ gap:18px; }
    .pdetail-name{ font-size:1.7rem; }
    .pdetail-desc{ font-size:0.95rem; }
    .qty-row button{ width:44px; height:44px; }
    #add-to-cart-btn{ max-width:none !important; min-height:50px; font-size:1rem; }
    .cart-drawer{ width:100vw; max-width:100vw; right:-100vw; border-left:none; }
    .cart-item-qty button{ width:32px; height:32px; }
    .wa-float{ right:14px; bottom:calc(14px + env(safe-area-inset-bottom,0px)); width:54px; height:54px; }
    .home-hero-scroll{ bottom:calc(20px + env(safe-area-inset-bottom,0px)); }
    .banner-secondary{ aspect-ratio:16/9; margin:24px 0; }
    .site-footer{ padding:24px 20px calc(90px + env(safe-area-inset-bottom,0px)); font-size:0.85rem; }
    .field-row{ flex-direction:column; gap:0; }
    .upload-card{ grid-template-columns:1fr; }
    input, select, textarea{ font-size:16px !important; } /* evita zoom automático en Android/iOS */
  }

  /* ---------- textos opcionales sobre la portada ---------- */
  .home-hero-copy{
    position:absolute; z-index:2; left:0; right:0; bottom:clamp(90px, 16vh, 160px);
    max-width:1200px; margin:0 auto; padding:0 24px; color:#fff;
    display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center;
  }
  .home-hero-copy.align-left{ align-items:flex-start; text-align:left; }
  .home-hero-title{
    font-family:var(--font-display); font-weight:400; text-transform:uppercase; letter-spacing:.01em;
    font-size:clamp(2.4rem, 7vw, 6rem); line-height:.95; text-shadow:0 4px 30px rgba(0,0,0,.45); max-width:16ch;
  }
  .home-hero-sub{ margin:0; font-size:clamp(1rem, 1.6vw, 1.25rem); max-width:52ch; color:rgba(255,255,255,.9); text-shadow:0 2px 16px rgba(0,0,0,.5); }
  .home-hero-cta{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 28px; margin-top:6px; }

  /* ---------- footer ---------- */
  .site-footer{ text-align:left; padding:40px 24px calc(28px + env(safe-area-inset-bottom,0px)); }
  .footer-inner{ max-width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; gap:28px 56px; justify-content:space-between; }
  .footer-brand{ display:flex; gap:14px; align-items:center; max-width:420px; }
  .footer-brand img{ width:56px; height:56px; border-radius:50%; flex:none; }
  .footer-name{ font-family:var(--font-display); font-size:1.3rem; text-transform:uppercase; color:#fff; letter-spacing:.02em; }
  .footer-tag{ color:#aaa; margin-top:4px; line-height:1.5; }
  .footer-col{ display:flex; flex-direction:column; gap:8px; }
  .footer-col a, .footer-col span{ color:#ddd; }
  .footer-col a:hover{ color:var(--accent); }
  .footer-legal{ max-width:1200px; margin:28px auto 0; padding-top:18px; border-top:1px solid var(--line-dark); color:#888; font-size:.75rem; }
  .footer-legal a{ color:#aaa; text-decoration:underline; }

  /* ---------- barra de vista previa ---------- */
  .preview-bar{
    position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:60;
    background:#ffd60a; color:#141414; font-weight:700; font-size:.8rem; padding:10px 16px; border-radius:999px;
    box-shadow:0 8px 30px rgba(0,0,0,.4); display:flex; gap:12px; align-items:center; white-space:nowrap;
  }
  .preview-bar a{ text-decoration:underline; }
  @media (max-width:640px){ .preview-bar{ white-space:normal; width:calc(100% - 32px); justify-content:space-between; } }

  /* ---------- precio oculto / acciones de detalle ---------- */
  .price-ask{ font-size:.82em; font-weight:700; letter-spacing:.01em; }
  .pdetail-price .price-ask{ font-size:1.1rem; color:var(--text-on-dark); }
  .pdetail-actions{ display:flex; flex-wrap:wrap; gap:10px; max-width:440px; }
  .pdetail-actions .btn{ flex:1 1 200px; min-height:48px; display:inline-flex; align-items:center; justify-content:center; }
  .btn.wa-ask{ background:transparent; border:1.5px solid #25D366; color:#fff; }
  @media (hover:hover){ .btn.wa-ask:hover{ background:rgba(37,211,102,.14); } }

  /* ---------- fondo con imagen (capa fija, fluida en Android) ---------- */
  .bg-layer{ position:fixed; left:0; top:0; width:100%; height:100vh; height:100lvh; z-index:-1; background-position:center; background-size:cover; background-repeat:no-repeat; pointer-events:none; }
  /* la portada se funde con el fondo al bajar */
  .has-bg-image .home-hero{ background:transparent; }
  .has-bg-image .home-hero-media, .has-bg-image .home-hero .banner-slider{
    -webkit-mask-image:linear-gradient(to bottom, #000 72%, rgba(0,0,0,.6) 86%, transparent 100%);
            mask-image:linear-gradient(to bottom, #000 72%, rgba(0,0,0,.6) 86%, transparent 100%);
  }
  .has-bg-image .site-footer{ background-color:rgba(0,0,0,.55); }

  /* ---------- secciones: cuadrícula, flyers, texto ---------- */
  .home-grid{ margin-bottom:44px; }
  .flyers{ margin:10px 0 44px; }
  .flyers-grid{ display:grid; gap:16px; grid-template-columns:repeat(var(--cols,3), minmax(0,1fr)); align-items:start; }
  .flyers-grid.cols-1{ --cols:1; max-width:760px; margin:0 auto; }
  .flyers-grid.cols-2{ --cols:2; }
  .flyer{ display:block; border-radius:14px; overflow:hidden; background:#0c0c0c; box-shadow:0 10px 30px rgba(0,0,0,.35); }
  .flyer img{ width:100%; height:auto; }
  @media (hover:hover){ a.flyer{ transition:transform .3s ease; } a.flyer:hover{ transform:translateY(-4px); } }
  @media (max-width:640px){ .flyers-grid{ --cols:1 !important; gap:12px; } .flyers-grid.cols-3{ --cols:2 !important; } }
  .text-block{ max-width:760px; margin:10px auto 48px; text-align:center; }
  .text-block p{ white-space:pre-line; line-height:1.7; color:#cfcfcf; margin:14px 0 0; font-size:1.02rem; }

  /* ---------- flyer emergente ---------- */
  .flyer-pop{ position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.72); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity .3s ease; }
  .flyer-pop.show{ opacity:1; }
  .flyer-pop-box{ position:relative; max-width:min(520px, 100%); transform:scale(.92); transition:transform .35s cubic-bezier(.22,1.3,.36,1); }
  .flyer-pop.show .flyer-pop-box{ transform:none; }
  .flyer-pop img{ width:100%; height:auto; max-height:82svh; object-fit:contain; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
  .flyer-pop-x{ position:absolute; top:-14px; right:-10px; width:44px; height:44px; border-radius:50%; border:none; background:#fff; color:#111; font-size:1.6rem; line-height:1; box-shadow:0 4px 14px rgba(0,0,0,.4); z-index:1; }
  .cart-drawer.show ~ .toast{ bottom:calc(110px + env(safe-area-inset-bottom,0px)); }

  /* ---------- banner con bordes difuminados (se funde con el fondo) ---------- */
  .banner-secondary.fade{
    border-radius:0; background-color:transparent;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
    -webkit-mask-composite:source-in;
            mask-image:linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
            mask-composite:intersect;
  }
  @media (min-width:1320px){ .banner-secondary.fade{ margin-left:-40px; margin-right:-40px; } }
  @media (max-width:640px){ .banner-secondary.fade{ margin-left:-14px; margin-right:-14px; } }

  /* ---------- pantallas grandes: filas de productos de borde a borde ---------- */
  main.site-main{ max-width:1320px; }
  .cat-carousel-track{
    margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    padding-top:6px; padding-bottom:10px;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  }
  /* flechas en los bordes de la pantalla (no encima de las tarjetas); en escritorio aparecen al pasar el mouse */
  .cat-carousel-arrow{ width:42px; height:42px; top:calc(50% + 20px); }
  .cat-carousel-arrow.prev{ left:calc(50% - 50vw + 10px); }
  .cat-carousel-arrow.next{ right:calc(50% - 50vw + 10px); }
  @media (hover:hover) and (pointer:fine){
    .cat-carousel-arrow{ opacity:0; pointer-events:none; }
    .cat-carousel-wrap:hover .cat-carousel-arrow, .cat-carousel-arrow:focus-visible{ opacity:1; pointer-events:auto; }
  }
  @media (min-width:1500px){
    .pcard{ flex-basis:280px; width:280px; }
    .cat-carousel-strip{ gap:20px; }
    .section-title, .page-title{ font-size:1.8rem; }
  }
  @media (min-width:2200px){
    main.site-main{ max-width:1600px; }
    .pcard{ flex-basis:320px; width:320px; }
  }
  @media (max-width:640px){
    .cat-carousel-track{ -webkit-mask-image:none; mask-image:none; }
  }

  /* ---------- vitrina PROMO FLASH ---------- */
  .flash{ margin:6px 0 56px; }
  .flash-head{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-bottom:20px; }
  .flash-bolt{ width:44px; height:44px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 6px rgba(226,35,26,.18), 0 0 30px rgba(226,35,26,.55); flex:none; }
  .flash-bolt svg{ width:22px; height:22px; }
  .flash-title{ font-family:var(--font-display); font-weight:400; text-transform:uppercase; color:#fff; font-size:clamp(2rem, 4.4vw, 3.4rem); letter-spacing:.01em; line-height:1; margin:0; text-shadow:0 0 24px rgba(255,255,255,.18); }
  .flash-title em{ font-style:italic; color:var(--accent); text-shadow:0 0 22px rgba(226,35,26,.7); display:inline-block; transform:skewX(-8deg); }
  .flash-sub{ flex-basis:100%; margin:2px 0 0 58px; color:#d6d6d6; font-size:1rem; }
  .flash-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:22px; }
  .flash-card{ display:flex; flex-direction:column; background:rgba(14,12,12,.88); border:1px solid rgba(255,255,255,.1); border-radius:18px; overflow:hidden; box-shadow:0 14px 40px rgba(0,0,0,.5); transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease; }
  @media (hover:hover){ .flash-card:hover{ transform:translateY(-6px); border-color:rgba(226,35,26,.6); box-shadow:0 22px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(226,35,26,.35); } .flash-card:hover .flash-media img{ transform:scale(1.04); } }
  .flash-media{ position:relative; display:block; aspect-ratio:4/5; overflow:hidden; background:#000; }
  .flash-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,1,.36,1); }
  .flash-tag{ position:absolute; left:12px; top:12px; display:inline-flex; align-items:center; gap:5px; padding:6px 11px 6px 9px; border-radius:999px; background:var(--accent); color:#fff; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; box-shadow:0 4px 14px rgba(226,35,26,.5); }
  .flash-tag svg{ width:13px; height:13px; }
  .flash-info{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; }
  .flash-name{ font-weight:800; font-size:1.08rem; color:#fff; line-height:1.25; }
  .flash-price{ font-weight:800; font-size:1.3rem; color:var(--accent); }
  .flash-price .old{ color:#9a9a9a; text-decoration:line-through; font-weight:500; font-size:.9rem; margin-right:8px; }
  .flash-price .price-ask{ color:#fff; font-size:1rem; }
  .flash-actions{ display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:4px; }
  .flash-btn{ flex:1 1 130px; white-space:nowrap; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:999px; font-weight:800; font-size:.86rem; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); color:#fff; padding:0 14px; }
  .flash-btn.wa{ background:#25D366; border-color:#25D366; }
  .flash-btn svg{ width:17px; height:17px; }
  @media (hover:hover){ .flash-btn:hover{ background:rgba(255,255,255,.14); } .flash-btn.wa:hover{ background:#1ebe5b; } }
  .flash-dots{ display:none; }
  @media (min-width:641px){ .flash-row{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); } }
  @media (max-width:640px){
    .flash{ margin-bottom:40px; }
    .flash-head{ margin-bottom:14px; }
    .flash-bolt{ width:38px; height:38px; }
    .flash-sub{ margin-left:0; font-size:.92rem; }
    .flash-row{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -14px; padding:4px 14px 6px; scroll-padding-left:14px; scrollbar-width:none; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
    .flash-row::-webkit-scrollbar{ display:none; }
    .flash-card{ flex:0 0 64%; max-width:300px; scroll-snap-align:start; border-radius:14px; }
    .flash-row > .flash-card:only-child{ flex-basis:100%; max-width:none; }
    .flash-tag{ left:8px; top:8px; padding:4px 9px 4px 7px; font-size:.64rem; }
    .flash-info{ padding:11px 12px 12px; gap:5px; }
    .flash-name{ font-size:.92rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.5em; }
    .flash-price{ font-size:1.08rem; }
    .flash-price .old{ font-size:.78rem; }
    .flash-price .price-ask{ font-size:.9rem; }
    .flash-actions{ margin-top:2px; }
    .flash-actions .flash-btn:not(.wa){ display:none; }
    .flash-btn{ min-height:42px; font-size:.85rem; }
    .flash-dots{ display:flex; justify-content:center; gap:7px; margin-top:12px; }
    .flash-dots span{ width:7px; height:7px; border-radius:99px; background:rgba(255,255,255,.3); transition:width .25s ease, background-color .25s ease; }
    .flash-dots span.on{ width:22px; background:var(--accent); }
  }
  @media (min-width:1500px){ .flash-row{ grid-template-columns:repeat(auto-fit, minmax(300px, 380px)); justify-content:center; } }
  .flash-info{ flex:1; } .flash-actions{ margin-top:auto; padding-top:4px; }

  /* Botón "Descargar catálogo PDF" en la página de categoría (se activa por categoría en el panel) */
  .cat-tools{ display:flex; justify-content:center; margin:-6px 0 26px; }
  .btn-pdf{
    display:inline-flex; align-items:center; gap:10px; min-height:46px; padding:0 22px; border-radius:999px;
    background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.22);
    font:600 .92rem/1 Inter, system-ui, sans-serif; cursor:pointer; transition:background .2s, border-color .2s;
  }
  .btn-pdf svg{ width:19px; height:19px; flex:none; }
  .btn-pdf:disabled{ opacity:.7; cursor:progress; }
  @media (hover:hover){ .btn-pdf:hover{ background:var(--accent); border-color:var(--accent); } }
  .btn-pdf:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

  /* =================================================================
     Barra superior con redes · pie de página · carrito (v2)
     ================================================================= */
  .site-topbar{
    background:rgba(0,0,0,.38); border-bottom:1px solid rgba(255,255,255,.08);
    font-size:.78rem; overflow:hidden; max-height:40px; opacity:1;
    transition:max-height .3s ease, opacity .25s ease, border-color .3s ease;
  }
  .site-header.scrolled .site-topbar{ max-height:0; opacity:0; border-bottom-color:transparent; }
  .tb-inner{ max-width:1400px; margin:0 auto; padding:0 24px; height:36px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .tb-left{ display:flex; align-items:center; gap:20px; min-width:0; }
  .tb-item{ display:inline-flex; align-items:center; gap:7px; color:rgba(255,255,255,.86); white-space:nowrap; font-weight:500; }
  .tb-item svg{ width:15px; height:15px; flex:none; }
  a.tb-item svg{ color:#25D366; }
  .tb-hours svg{ color:var(--accent); }
  @media (hover:hover){ a.tb-item:hover{ color:#fff; } }
  .tb-social{ display:flex; align-items:center; gap:4px; }
  .tb-icon{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.88); transition:background-color .2s ease, color .2s ease; }
  .tb-icon svg{ width:15px; height:15px; }
  @media (hover:hover){ .tb-icon:hover{ background:var(--accent); color:#fff; } }
  .tb-icon:focus-visible, .social-circle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  body.has-topbar main.site-main.with-header-space{ padding-top:calc(var(--header-h) + 36px + 24px); }
  @media (max-width:700px){
    .tb-inner{ padding:0 14px; height:34px; }
    .tb-hours{ display:none; }
  }

  /* menú del celular: redes al final */
  .mobile-menu-social{ margin-top:auto; padding-top:26px; }
  .mobile-menu-social:empty{ display:none; }
  .mobile-menu-social > span{ display:block; font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#8f8f8f; margin-bottom:12px; }
  .mobile-menu-social > div{ display:flex; gap:10px; flex-wrap:wrap; }

  /* ---------- pie de página ---------- */
  .site-footer{ padding:56px 24px calc(28px + env(safe-area-inset-bottom,0px)); background-color:rgba(0,0,0,.55); text-align:left; }
  .footer-grid{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.5fr 1fr 1.3fr auto; gap:36px 48px; }
  .footer-grid .social-row{ max-width:270px; }
  .site-footer .footer-brand{ display:block; max-width:none; }
  .footer-logo{ display:inline-flex; align-items:center; gap:14px; color:#fff; }
  .site-footer .footer-logo img{ width:68px; height:68px; border-radius:50%; flex:none; box-shadow:0 0 0 2px rgba(255,255,255,.12); }
  .footer-name{ font-family:var(--font-display); font-size:1.6rem; line-height:1; text-transform:uppercase; letter-spacing:.02em; color:#fff; }
  .footer-tagline{ margin-top:18px; color:var(--accent); font-weight:800; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; }
  .footer-desc{ margin:10px 0 0; max-width:340px; color:#d4d4d4; font-size:.95rem; line-height:1.6; }
  .site-footer .footer-col{ display:block; }
  .footer-col h4{ margin:4px 0 18px; color:#fff; font-size:1.02rem; font-weight:800; letter-spacing:.01em; }
  .site-footer .footer-col > a, .site-footer .footer-col > span{ display:flex; align-items:flex-start; gap:10px; margin-bottom:13px; color:#d0d0d0; font-size:.94rem; line-height:1.4; width:fit-content; transition:color .2s ease; }
  @media (hover:hover){ .site-footer .footer-col > a:hover{ color:#fff; } }
  .footer-contact svg{ width:17px; height:17px; flex:none; margin-top:1px; color:var(--accent); }
  .footer-contact a:first-of-type svg{ color:#25D366; }
  .social-row{ display:flex; gap:12px; flex-wrap:wrap; }
  .social-circle{ width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; color:#fff; transition:background-color .2s ease, border-color .2s ease, transform .2s ease; }
  .social-circle svg{ width:18px; height:18px; }
  @media (hover:hover){ .social-circle:hover{ background:var(--accent); border-color:var(--accent); transform:translateY(-2px); } }
  .footer-bottom{ max-width:1200px; margin:44px auto 0; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; color:#a5a5a5; font-size:.84rem; }
  .footer-bottom a{ color:#cfcfcf; text-decoration:underline; }
  .footer-top{ display:inline-flex; align-items:center; gap:7px; background:none; border:none; padding:6px 0; color:#d0d0d0; font-size:.84rem; font-weight:600; cursor:pointer; }
  .footer-top svg{ width:15px; height:15px; }
  @media (hover:hover){ .footer-top:hover{ color:#fff; } }
  @media (max-width:960px){
    .footer-grid{ grid-template-columns:1fr 1fr; }
    .site-footer .footer-brand{ grid-column:1 / -1; }
  }
  @media (max-width:560px){
    .site-footer{ padding:40px 18px calc(100px + env(safe-area-inset-bottom,0px)); }
    .footer-grid{ grid-template-columns:1fr; gap:30px; }
    .footer-cats{ display:grid !important; grid-template-columns:1fr 1fr; column-gap:16px; }
    .footer-cats h4{ grid-column:1 / -1; }
    .footer-bottom{ flex-direction:column; align-items:flex-start; }
  }

  /* ---------- carrito ---------- */
  .cart-drawer{ width:420px; right:-460px; background:#121212; }
  .cart-head{ padding:18px 16px 18px 22px; background:#151515; }
  .cart-head-title{ display:flex; align-items:center; gap:12px; min-width:0; }
  .cart-head-ico{ width:44px; height:44px; border-radius:12px; flex:none; display:flex; align-items:center; justify-content:center; background:rgba(226,35,26,.14); color:var(--accent); }
  .cart-head-ico svg{ width:21px; height:21px; }
  .cart-head h3{ line-height:1; font-size:1.5rem; }
  .cart-head-count{ display:block; margin-top:5px; font-size:.78rem; color:#9a9a9a; }
  .cart-head-count:empty{ display:none; }
  .cart-close{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line-dark); border-radius:50%; flex:none; }
  .cart-close svg{ width:18px; height:18px; }
  .cart-items{ padding:14px 14px 6px; }
  .cart-item{
    display:grid; grid-template-columns:84px 1fr auto; gap:14px; align-items:start;
    padding:12px; margin-bottom:10px; border:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08);
    border-radius:14px; background:rgba(255,255,255,.035); animation:cartIn .3s ease both;
  }
  @keyframes cartIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
  @media (prefers-reduced-motion: reduce){ .cart-item{ animation:none; } }
  .cart-item-photo{ display:block; width:84px; height:84px; border-radius:10px; overflow:hidden; background:#0b0b0b; }
  .cart-item-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .cart-item-body{ min-width:0; }
  .cart-item-cat{ display:block; font-size:.66rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#8f8f8f; }
  .cart-item-name{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:3px 0 10px; color:#fff; font-weight:700; font-size:.95rem; line-height:1.3; }
  @media (hover:hover){ .cart-item-name:hover{ color:var(--accent); } }
  .cart-item-row{ display:flex; align-items:center; justify-content:space-between; gap:8px 10px; flex-wrap:wrap; }
  .qty-stepper{ display:inline-flex; align-items:center; border:1px solid rgba(255,255,255,.18); border-radius:999px; overflow:hidden; background:rgba(0,0,0,.25); }
  .qty-stepper button{ width:34px; height:32px; border:none; background:none; color:#fff; font-size:1.05rem; line-height:1; cursor:pointer; }
  @media (hover:hover){ .qty-stepper button:hover{ background:rgba(255,255,255,.1); } }
  .qty-stepper span{ min-width:24px; text-align:center; font-weight:700; color:#fff; font-size:.92rem; }
  .cart-item-price{ text-align:right; margin:0; }
  .cart-item-price strong{ display:block; color:#fff; font-size:1rem; }
  .cart-item-price strong.ask{ font-size:.8rem; color:#d0d0d0; font-weight:700; }
  .cart-item-price small{ display:block; color:#8a8a8a; font-size:.72rem; margin-top:1px; }
  .cart-item-remove{ width:34px; height:34px; margin:-4px -4px 0 0; border:none; border-radius:50%; background:none; color:#8a8a8a; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:color .2s ease, background-color .2s ease; }
  .cart-item-remove svg{ width:17px; height:17px; }
  @media (hover:hover){ .cart-item-remove:hover{ color:#ff6b62; background:rgba(255,80,80,.1); } }
  .cart-foot{ padding:18px 20px 20px; background:#0e0e0e; box-shadow:0 -12px 30px rgba(0,0,0,.35); }
  .cart-total{ margin-bottom:6px; }
  .cart-total span:last-child{ font-size:1.45rem; }
  #cart-total small{ display:block; font-size:.8rem; font-weight:600; color:#bdbdbd; margin-top:2px; }
  .cart-note{ margin:0 0 14px; color:#9a9a9a; font-size:.78rem; line-height:1.45; }
  .cart-note:empty{ display:none; }
  .btn-wa{
    width:100%; min-height:54px; display:flex; align-items:center; justify-content:center; gap:10px;
    border:none; border-radius:999px; background:#25D366; color:#062b13; font-weight:800; font-size:1rem; cursor:pointer;
    box-shadow:0 10px 26px rgba(37,211,102,.25); transition:transform .2s ease, filter .2s ease;
  }
  .btn-wa svg{ width:22px; height:22px; flex:none; }
  @media (hover:hover){ .btn-wa:hover{ filter:brightness(1.06); transform:translateY(-1px); } }
  .btn-wa:active{ transform:scale(.98); }
  .btn-wa:focus-visible, .cart-continue:focus-visible, .cart-browse:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
  .cart-continue{ width:100%; margin-top:8px; padding:10px; background:none; border:none; color:#cfcfcf; font-weight:600; font-size:.88rem; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
  @media (hover:hover){ .cart-continue:hover{ color:#fff; } }
  .cart-drawer.is-empty .cart-foot{ display:none; }
  .cart-empty{ display:flex; flex-direction:column; align-items:center; gap:16px; padding:80px 20px; text-align:center; }
  .cart-empty-ico{ width:84px; height:84px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#bdbdbd; background:rgba(255,255,255,.05); border:1px dashed rgba(255,255,255,.22); }
  .cart-empty-ico svg{ width:34px; height:34px; }
  .cart-empty p{ margin:0; color:#d0d0d0; font-size:1rem; }
  .cart-browse{ min-height:48px; padding:0 28px; border:none; border-radius:999px; background:var(--accent); color:#fff; font-weight:700; font-size:.95rem; cursor:pointer; }
  @media (max-width:640px){
    .cart-drawer{ width:100vw; right:-100vw; }
    .cart-item{ grid-template-columns:72px 1fr auto; gap:12px; padding:10px; }
    .cart-item-photo{ width:72px; height:72px; }
  }

  /* ---------- Lenis (scroll suave) ---------- */
  html.lenis, html.lenis body{ height:auto; }
  .lenis.lenis-smooth{ scroll-behavior:auto !important; }
  .lenis:not(.lenis-autoToggle).lenis-stopped{ overflow:clip; }
  .lenis [data-lenis-prevent], .cart-items, .mobile-menu{ overscroll-behavior:contain; }
  .lenis.lenis-smooth iframe{ pointer-events:none; }