:root{
    --deep:#0B0B0B; --charcoal:#161616; --red:#E31E24; --redDark:#8F1216; --ice:#7BE9FF; --gold:#D4AF37;
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; background:var(--deep); }
  body{
    background:var(--deep); color:#EAF2F6; font-family:'Inter',sans-serif;
    overflow-x:hidden; cursor:none;
  }
  @media (max-width: 900px){ body{ cursor:auto; } }
  ::selection{ background:var(--red); color:#fff; }

  ::-webkit-scrollbar{ width:10px; }
  ::-webkit-scrollbar-track{ background:#0B0B0B; }
  ::-webkit-scrollbar-thumb{ background:linear-gradient(#E31E24,#8F1216); border-radius:10px; }

  h1,h2,h3,.display{ font-family:'Bricolage Grotesque', sans-serif; }
  .mono{ font-family:'JetBrains Mono', monospace; }

  /* cursor */
  #cursor-dot, #cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; z-index:9999; border-radius:50%; transform:translate(-50%,-50%); will-change:transform; }
  #cursor-dot{ width:6px; height:6px; background:#7BE9FF; box-shadow:0 0 10px 2px #7BE9FF; }
  #cursor-ring{ width:36px; height:36px; border:1px solid rgba(227,30,36,.5); transition:width .25s,height .25s,border-color .25s,background .25s; }
  .cursor-hover #cursor-ring{ width:64px; height:64px; background:rgba(227,30,36,.08); border-color:#E31E24; }
  @media (max-width:900px){ #cursor-dot,#cursor-ring{ display:none; } }

  /* age gate */

  /* preloader */
  #preloader{ position:fixed; inset:0; z-index:10000; background:#0B0B0B; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px; transition:opacity .8s ease, visibility .8s ease; }
  #preloader.done{ opacity:0; visibility:hidden; }
  .loader-ring{ width:64px; height:64px; border-radius:50%; border:3px solid rgba(227,30,36,.18); border-top-color:#E31E24; animation:spin 1s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .loader-text{ letter-spacing:.3em; font-size:11px; color:#ff9a9d; text-transform:uppercase; }

  /* glass — the frosted-glass panel itself (blurs what's behind the card,
     e.g. the page background; never the card's own content, since
     backdrop-filter only ever affects what's underneath an element, not
     its children). Kept at full original strength: this was never what
     made card content hover-dependent — that was frost-card's old ::after. */
  .glass{ background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border:1px solid rgba(255,255,255,.09); }
  .glass-strong{ background:linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02)); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border:1px solid rgba(255,255,255,.12); }
  .frost-edge{ position:relative; }
  .frost-edge::before{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; padding:1px;
    background:linear-gradient(135deg, rgba(227,30,36,.5), rgba(123,233,255,.25) 40%, rgba(59,167,255,0) 65%, rgba(123,233,255,.35));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

  /* frost-card: visible tempered-glass sheen, always-on and identical on
     mobile/desktop — no mouse tracking, no hover dependency. Card markup
     wraps its real content in a `.relative.z-10` div (see cart.js /
     index.html), so this ::after glass layer can sit at normal stacking
     order (paints first, no z-index needed) and is *structurally*
     guaranteed to render behind the icon/title/price/button, never on
     top of them — unlike the old version, this isn't just "kept subtle
     enough to not be a problem," it's physically impossible for it to
     cover content. */
  .frost-card{
    position:relative; overflow:hidden;
    transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
  }
  .frost-card::after{
    content:'';
    position:absolute; inset:0; pointer-events:none;
    background:
      linear-gradient(135deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.05) 30%, transparent 58%),
      linear-gradient(0deg, rgba(0,0,0,.24) 0%, transparent 42%);
    transition: background .35s ease;
  }
  .frost-card:hover{
    transform:translateY(-6px);
    box-shadow:0 24px 48px -18px rgba(0,0,0,.55), 0 0 36px -10px rgba(227,30,36,.28);
  }
  .frost-card:hover::after{
    background:
      linear-gradient(135deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.08) 32%, transparent 62%),
      linear-gradient(0deg, rgba(0,0,0,.24) 0%, transparent 42%);
  }

  .text-glow{ text-shadow:0 0 30px rgba(227,30,36,.45); }
  .btn-elastic{ transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, background .3s ease; }
  .btn-elastic:hover{ transform:translateY(-3px) scale(1.035); }
  .btn-elastic:active{ transform:scale(.96); }
  .glow-red{ box-shadow:0 0 0 rgba(227,30,36,0); }
  .glow-red:hover{ box-shadow:0 10px 40px -8px rgba(227,30,36,.55); }

  @keyframes floaty{ 0%,100%{ transform:translateY(0px);} 50%{ transform:translateY(-14px);} }
  .floaty{ animation:floaty 6s ease-in-out infinite; }
  @keyframes floaty-product{ 0%,100%{ transform:translateY(0px);} 50%{ transform:translateY(-7px);} }
  .floaty-product{ animation:floaty-product 3.2s ease-in-out infinite; }
  .floaty-slow{ animation:floaty 9s ease-in-out infinite; }

  .shard{ position:absolute; background:linear-gradient(160deg, rgba(123,233,255,.32), rgba(255,255,255,.05));
    clip-path:polygon(50% 0%, 100% 25%, 85% 100%, 15% 100%, 0% 25%); filter:blur(.2px); opacity:.5; }

  /* ============ COLD SIGNATURE SECTION ============ */
  .cold-signature-bg{
    background:
      radial-gradient(ellipse 55% 45% at 16% 12%, rgba(227,30,36,.06), transparent 62%),
      radial-gradient(ellipse 50% 40% at 88% 88%, rgba(123,233,255,.045), transparent 64%),
      radial-gradient(ellipse 90% 75% at 50% 50%, transparent 30%, rgba(0,0,0,.55) 100%);
  }
  .cold-signature-kicker{ color:rgba(227,30,36,.62); }

  /* abstract, unfocused ice-crystal presence behind the copy — never a literal object */
  .cold-signature-halo{
    width:640px; height:640px; max-width:120vw; max-height:120vw; pointer-events:none;
    clip-path:polygon(50% 2%, 78% 16%, 97% 40%, 90% 72%, 61% 97%, 29% 92%, 4% 63%, 10% 29%, 33% 8%);
    background:linear-gradient(155deg, rgba(255,255,255,.045), rgba(123,233,255,.05) 42%, rgba(227,30,36,.02) 76%, transparent 100%);
    filter:blur(46px);
    opacity:.65;
    -webkit-mask-image:radial-gradient(circle, #000 45%, transparent 78%);
    mask-image:radial-gradient(circle, #000 45%, transparent 78%);
  }

  .cold-signature-divider{ display:flex; align-items:center; justify-content:center; width:130px; margin:20px auto 20px; }
  .cold-signature-divider::before, .cold-signature-divider::after{
    content:''; flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(227,30,36,.4));
  }
  .cold-signature-divider::after{ background:linear-gradient(90deg, rgba(227,30,36,.4), transparent); }
  .cold-signature-divider span{
    width:5px; height:5px; margin:0 9px; flex-shrink:0; border-radius:999px;
    background:var(--red); box-shadow:0 0 9px 1px rgba(227,30,36,.55);
  }

  .ice-particle{
    position:absolute; border-radius:999px; pointer-events:none; will-change:transform;
    background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.95), rgba(123,233,255,.4) 46%, rgba(123,233,255,0) 76%);
    animation:iceDrift var(--dur, 14s) ease-in-out infinite;
  }
  .ice-particle.is-glint{
    background:radial-gradient(circle at 38% 32%, rgba(210,248,255,1), rgba(123,233,255,.65) 40%, rgba(123,233,255,0) 74%);
  }
  @keyframes iceDrift{
    0%,100%{ transform:translate(0,0); }
    50%{ transform:translate(var(--driftX, 6px), var(--amp, -20px)); }
  }
  @media (prefers-reduced-motion: reduce){
    .ice-particle{ animation:none; }
  }

  .frozen-frame{ position:relative; }
  .frozen-frame::before{ content:''; position:absolute; top:-1px; left:0; right:0; height:70px; pointer-events:none; z-index:2;
    background:linear-gradient(#0B0B0B 10%, transparent), repeating-linear-gradient(100deg, rgba(255,255,255,.5) 0 2px, transparent 2px 22px);
    -webkit-mask-image:linear-gradient(#000, transparent); mask-image:linear-gradient(#000, transparent); opacity:.3; }

  .carousel{ scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .carousel > *{ scroll-snap-align:start; }
  .carousel::-webkit-scrollbar{ height:8px; }

  .badge-cold{ background:linear-gradient(135deg, rgba(123,233,255,.18), rgba(59,167,255,.08)); border:1px solid rgba(123,233,255,.4); color:#BFF3FF; }
  .badge-red{ background:linear-gradient(135deg, rgba(227,30,36,.22), rgba(143,18,22,.12)); border:1px solid rgba(227,30,36,.5); color:#ffd7d8; }
  .badge-gray{ background:linear-gradient(135deg, rgba(184,194,204,.14), rgba(184,194,204,.05)); border:1px solid rgba(184,194,204,.3); color:#B8C2CC; }

  .nav-link{ position:relative; }
  .nav-link::after{ content:''; position:absolute; left:0; bottom:-4px; height:1px; width:0%; background:linear-gradient(90deg,#E31E24,#7BE9FF); transition:width .3s ease; }
  .nav-link:hover::after{ width:100%; }

  #cart-drawer{ transform:translateX(105%); transition:transform .55s cubic-bezier(.16,1,.3,1); }
  #cart-drawer.open{ transform:translateX(0); }
  #cart-overlay{ opacity:0; pointer-events:none; transition:opacity .4s ease; }
  #cart-overlay.open{ opacity:1; pointer-events:auto; }
  .qty-btn{ transition:background .2s ease, transform .15s ease; }
  .qty-btn:active{ transform:scale(.85); }

  /* checkout: order type toggle + success view */
  .order-type-btn{
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
    border-radius:14px; padding:10px 8px; font-size:13px; font-weight:600;
    color:#B8C2CC; transition:background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
    cursor:pointer; text-align:center;
  }
  .order-type-btn:hover{ background:rgba(255,255,255,.08); }
  .order-type-btn.active{
    background:linear-gradient(135deg, var(--red), var(--redDark)); border-color:transparent;
    color:#fff; box-shadow:0 10px 24px -10px rgba(227,30,36,.65);
  }
  #cart-success{ animation:cartSuccessIn .45s cubic-bezier(.16,1,.3,1); }
  @keyframes cartSuccessIn{ from{ opacity:0; transform:translateY(14px) scale(.97); } to{ opacity:1; transform:translateY(0) scale(1); } }

  #toast{ position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); z-index:9998; opacity:0; transition:opacity .35s ease, transform .35s ease; pointer-events:none; }
  #toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  .reveal{ opacity:0; transform:translateY(40px); }
  #hero-canvas{ position:absolute; inset:0; z-index:1; }
  .noise-fog{ background:radial-gradient(ellipse at 20% 20%, rgba(227,30,36,.10), transparent 55%), radial-gradient(ellipse at 80% 70%, rgba(123,233,255,.10), transparent 55%); }

  /* ============ MARQUEE — premium ice-glass ticker ============ */
  .marquee-wrap{
    position:relative; overflow:hidden;
    background:
      linear-gradient(180deg, rgba(123,233,255,.05) 0%, rgba(255,255,255,.015) 40%, rgba(0,0,0,.22) 100%),
      linear-gradient(120deg, #0c0f11 0%, #14191c 45%, #0c0f11 100%);
    box-shadow:
      inset 0 1px 0 0 rgba(190,235,255,.20),
      inset 0 -1px 0 0 rgba(123,233,255,.10),
      inset 0 14px 22px -18px rgba(123,233,255,.16),
      inset 0 -14px 22px -18px rgba(0,0,0,.45);
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
  /* animated sheen — a soft light sweeping across the glass every few seconds */
  .marquee-wrap::before{
    content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(100deg, transparent 30%, rgba(123,233,255,.10) 46%, rgba(255,255,255,.22) 50%, rgba(123,233,255,.10) 54%, transparent 70%);
    background-size:240% 100%; background-repeat:no-repeat; mix-blend-mode:screen;
    animation: marqueeSheen 8s ease-in-out infinite;
  }
  @keyframes marqueeSheen{
    0%{ background-position:-70% 0; opacity:0; }
    10%{ opacity:1; }
    48%{ background-position:170% 0; opacity:1; }
    58%,100%{ background-position:170% 0; opacity:0; }
  }
  .marquee-track{ animation:marquee 34s linear infinite; color:rgba(184,194,204,.7); }
  @keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
  .marquee-item{ animation:marqueeBreathe 6s ease-in-out infinite; }
  @keyframes marqueeBreathe{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } }
  .marquee-highlight{
    color:#EAFBFF; font-weight:700;
    text-shadow:0 0 14px rgba(123,233,255,.6), 0 0 2px rgba(255,255,255,.5);
  }
  .marquee-icon{
    color:#7BE9FF; flex-shrink:0;
    filter:drop-shadow(0 0 2px rgba(123,233,255,.5));
    animation: marqueeIconGlow 3.6s ease-in-out infinite;
  }
  @keyframes marqueeIconGlow{
    0%,100%{ opacity:.5; filter:drop-shadow(0 0 2px rgba(123,233,255,.35)); }
    50%{ opacity:1; filter:drop-shadow(0 0 7px rgba(123,233,255,.85)); }
  }
  @media (prefers-reduced-motion: reduce){
    .marquee-wrap::before{ animation:none; opacity:0; }
    .marquee-item{ animation:none; }
    .marquee-icon{ animation:none; opacity:.8; }
  }
  .kbd-focus:focus-visible{ outline:2px solid #7BE9FF; outline-offset:3px; }

  .gallery-photo{ transition:transform .6s cubic-bezier(.16,1,.3,1), filter .4s ease; filter:grayscale(.15) contrast(1.05); }
  .gallery-photo:hover{ transform:scale(1.03); filter:grayscale(0) contrast(1.1); }

  /* hero wordmark logo */
  .hero-logo-perspective{ display:block; }
  .hero-logo-wrap{ position:relative; display:inline-block; will-change:transform; }
  .hero-logo-img{
    display:block; width:min(88vw, 640px); height:auto;
    filter:drop-shadow(0 25px 50px rgba(227,30,36,.4)) drop-shadow(0 0 40px rgba(227,30,36,.25));
    animation:heroLogoPulse 4s ease-in-out infinite;
  }
  @keyframes heroLogoPulse{
    0%,100%{ filter:drop-shadow(0 25px 50px rgba(227,30,36,.4)) drop-shadow(0 0 40px rgba(227,30,36,.25)); }
    50%{ filter:drop-shadow(0 25px 60px rgba(227,30,36,.55)) drop-shadow(0 0 60px rgba(227,30,36,.4)); }
  }
  .hero-logo-shine{
    position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
    background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.85) 49%, rgba(255,120,120,.6) 52%, transparent 62%);
    background-size:300% 300%; background-position:-40% -40%; background-repeat:no-repeat;
    -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
    animation:heroLogoShine 5s ease-in-out infinite;
  }
  @keyframes heroLogoShine{
    0%{ background-position:-40% -40%; }
    35%,100%{ background-position:140% 140%; }
  }

/* ============ SELECCIÓN CAROUSEL ============ */
.seleccion-dot{
  width:8px; height:8px; border-radius:999px;
  background:rgba(255,255,255,.25); border:none; cursor:pointer;
  transition:background .3s ease, width .3s ease;
}
.seleccion-dot.active{ background:var(--red); width:22px; }