/* ============================================================
   SPORTZONE — home fullscreen (Nuvemshop)
   Versao para o tema BRASILIA (migracao da conta antiga/Flex).
   Arquivo .css puro em static/css/ — chamado no home.tpl com:
     <link rel="stylesheet" href="{{ 'css/sportzone-home.css' | static_url }}">
   Como so carrega na home, as regras em html/body nao vazam
   para produto, categoria e carrinho.
   ============================================================ */

  :root{
    --void:#060606;
    --red:#ff1f3d;
    --red-deep:#7a0012;
    --white:#ffffff;
    --text-ghost:rgba(255,255,255,.86);
    --text-dim:rgba(255,255,255,.56);
    --font-display:'Anton', sans-serif;
    --font-ui:'Space Grotesk', sans-serif;
    --ease-out:cubic-bezier(.16,1,.3,1);
    --edge:clamp(20px, 6vw, 100px);
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;scroll-snap-type:y mandatory;background:var(--void);}
  body{font-family:var(--font-ui);color:var(--text-ghost);overflow-x:hidden;}
  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer;}
  *:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px;}

  /* ---------- PAGINATION DOTS ---------- */
  .dots{
    position:fixed;top:32px;left:50%;transform:translateX(-50%);
    display: none;/*flex;gap:10px;z-index:60;*/
  }
  .dot{
    width:8px;height:8px;border-radius:50%;
    background:rgba(255,255,255,.35);
    transition:transform .35s var(--ease-out), background .35s var(--ease-out), width .35s var(--ease-out);
  }
  .dot.active{background:var(--red);width:26px;border-radius:5px;}

  /* ---------- SIDE INDEX (menu textual com linhas, tipo referência) ---------- */
  .side-index{
    position:fixed;top:50%;right:44px;transform:translateY(-50%);
    z-index:55;display:flex;flex-direction:column;align-items:flex-end;gap:22px;
  }
  .side-index__item{
    display:flex;align-items:center;gap:16px;
    font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:lowercase;
    color:var(--text-dim);opacity:.55;
    transition:opacity .3s ease, color .3s ease;
    text-transform: uppercase;
  }
  .side-index__item i{
    width:1px;height:26px;background:rgba(255,255,255,.35);display:block;
    transition:background .3s ease, height .3s ease;
  }
  .side-index__item:hover{opacity:1;color:#fff;}
  .side-index__item.active{opacity:1;color:#fff;}
  .side-index__item.active i{background:var(--red);height:32px;}

  /* ---------- PANEL BASE ---------- */
  .panel{
    position:relative;
    height:100vh;
    height:100svh; /* trava na menor altura visível do navegador mobile — sem "pulo" quando a barra de endereço aparece/some */
    width:100%;
    overflow:hidden;
    scroll-snap-align:start;
    display:flex;
    align-items:center;
  }

  /* ambient edge glow: red pop on the left, soft white glint on the right */
  .panel::before{
    content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      radial-gradient(circle at 0% 60%, rgba(255,31,61,.30), transparent 45%),
      radial-gradient(circle at 100% 35%, rgba(255,255,255,.10), transparent 45%);
    mix-blend-mode:screen;
  }
  .panel--mirror::before{
    background:
      radial-gradient(circle at 100% 60%, rgba(255,31,61,.30), transparent 45%),
      radial-gradient(circle at 0% 35%, rgba(255,255,255,.10), transparent 45%);
  }

  /* ---------- MEDIA (video + fallback) ---------- */
  .media{position:absolute;inset:0;z-index:0;background:#050505;}
  .media-fallback{
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(circle at 20% 30%, rgba(255,31,61,.35), transparent 40%),
      radial-gradient(circle at 80% 70%, rgba(122,0,18,.38), transparent 45%),
      linear-gradient(160deg, #0c0a0a, #050505 70%);
    background-size:180% 180%, 180% 180%, 100% 100%;
    background-position:0% 50%, 100% 50%, 0 0;
    animation:fallbackDrift 14s ease-in-out infinite alternate;
    animation-play-state:paused;
  }
  .media-fallback::after{
    content:'';position:absolute;inset:0;opacity:.15;
    background-image:linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
    background-size:42px 42px;
  }
  .panel.is-playing .media-fallback{animation-play-state:running;}
  @keyframes fallbackDrift{
    0%{background-position:0% 50%, 100% 50%, 0 0;}
    100%{background-position:30% 60%, 70% 40%, 0 0;}
  }
  .bg-video{
    position:absolute;inset:0;width:100%;height:100%;z-index:1;
    object-fit:cover;object-position:center center;background:#050505;display:block;
  }
  .media-overlay{
    position:absolute;inset:0;z-index:2;
    background:linear-gradient(100deg, rgba(5,5,5,.82) 15%, rgba(5,5,5,.32) 48%, rgba(5,5,5,.7) 100%);
    pointer-events:none;
  }
  .panel--mirror .media-overlay{
    background:linear-gradient(260deg, rgba(5,5,5,.82) 15%, rgba(5,5,5,.32) 48%, rgba(5,5,5,.7) 100%);
  }

  /* ---------- SIDEBAR (global, fixa — presente em toda a página, não repetida por painel) ---------- */
  .sidebar{
    position:fixed;left:clamp(14px, 3.5vw, 40px);top:50%;transform:translateY(-50%);
    z-index:750;display:flex;flex-direction:column;align-items:center;gap:clamp(14px, 2vw, 22px);
    opacity:0;animation:sidebarFadeIn .6s var(--ease-out) .3s forwards;
  }
  @keyframes sidebarFadeIn{to{opacity:1;}}
  .side-link{
    font-size:18px;color:var(--text-dim);position:relative;
    display:flex;align-items:center;justify-content:center;width:22px;height:22px;
    transition:color .25s, transform .25s;
  }
  .side-link:hover{color:var(--red);transform:scale(1.1);}
  .side-rule{width:1px;height:70px;background:linear-gradient(rgba(255,255,255,.4), transparent);}
  .side-social{display:flex;flex-direction:column;gap:18px;margin-top:6px;}
  .side-social a{font-size:15px;color:var(--text-dim);transition:color .25s, transform .25s var(--ease-out);}
  .side-social a:hover{color:var(--red);transform:scale(1.12);}

  /* ---------- Busca expansiva (hover/foco expande pra direita, ícone vai pra direita) ---------- */
  .side-search{position:relative;display:flex;align-items:center;}
  .side-search__field-wrap{
    position:absolute;left:34px;top:50%;transform:translateY(-50%);
    height:34px;width:0;overflow:hidden;opacity:0;display:flex;margin:0;
    transition:width .35s var(--ease-out), opacity .25s;
  }
  .side-search.is-open .side-search__field-wrap{width:220px;opacity:1;}
  .side-search.is-open .side-search__toggle{opacity:0;pointer-events:none;}
  .side-search__input{
    flex:1;min-width:0;border:none;background:#fff;color:#111;font-size:13px;
    padding:0 12px;height:34px;border-radius:17px 0 0 17px;
  }
  .side-search__input:focus{outline:none;}
  .side-search__submit{
    flex:0 0 auto;width:34px;height:34px;border:none;background:#fff;color:var(--red);
    display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;
    border-radius:0 17px 17px 0;
  }

  /* ---------- LOGO (pronto para receber PNG) ---------- */
  .logo{
    position:absolute;top:clamp(16px, 3vw, 32px);right:clamp(20px, 4vw, 48px);z-index:5;
    opacity:0;transform:translateY(-14px);
    transition:opacity .6s var(--ease-out) .2s, transform .6s var(--ease-out) .2s;
  }
  .panel.in-view .logo{opacity:1;transform:translateY(0);}
  .logo-img{
    display:block;height:clamp(26px, 3.4vw, 38px);width:auto;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
  }

  /* ---------- HERO CONTENT ---------- */
  .hero-content{
    position:relative;z-index:4;width:100%;
    padding:0 var(--edge) 0 max(var(--edge), 68px);
    display:flex;flex-direction:column;align-items:flex-start;
  }

  .giant-title{
    font-family:var(--font-display);
    font-size:clamp(2.6rem, 11vw, 10.5rem);
    line-height:.92;letter-spacing:-.01em;
    color:transparent;
    -webkit-text-stroke:1px rgba(255,255,255,.18);
    background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
    -webkit-background-clip:text;background-clip:text;
    display:inline-block;
  }
  .giant-title .ch{display:inline-block;clip-path:inset(0 0 0 0);}

  /* painel de abertura: a logo ocupa o lugar do título — o h1 some visualmente (não com
     display:none, pra continuar acessível e não quebrar a animação de explosão de letras) */
  .panel--hero-logo .giant-title{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
  .hero-logo{
    display:block;height:clamp(110px, 20vw, 320px);width:auto;
    filter:drop-shadow(0 8px 30px rgba(0,0,0,.55));
    opacity:0;transform:translateY(18px);
    align-self:center;
    transition:opacity .8s var(--ease-out) .15s, transform .8s var(--ease-out) .15s;
  }
  .panel.in-view .hero-logo{opacity:1;transform:translateY(0);}
  /* botão também centralizado, logo abaixo da logo */
  .panel--hero-logo .cta-row{align-self:center;}

  /* type ONE entrance: wipe reveal left to right */
  .panel--one .giant-title{clip-path:inset(0 100% 0 0);}
  .panel--one.in-view .giant-title{
    animation:titleWipeIn 1s var(--ease-out) .1s forwards;
  }
  .panel--one.panel--mirror .giant-title{clip-path:inset(0 0 0 100%);}
  .panel--one.panel--mirror.in-view .giant-title{
    animation:titleWipeInRTL 1s var(--ease-out) .1s forwards;
  }
  @keyframes titleWipeIn{to{clip-path:inset(0 0 0 0);}}
  @keyframes titleWipeInRTL{to{clip-path:inset(0 0 0 0);}}

  /* type ONE exit: letters break apart */
  .panel--one .giant-title.is-exploding .ch{
    animation:letterBreak .55s ease-in forwards;
    animation-delay:calc(var(--i) * 22ms);
  }
  @keyframes letterBreak{
    to{ transform:translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1.3);
        opacity:0; filter:blur(6px); }
  }

  /* type TWO entrance: zoom-blur reveal */
  .panel--two .giant-title{opacity:0;transform:scale(1.4);filter:blur(14px);}
  .panel--two.in-view .giant-title{
    animation:titleZoomIn .9s var(--ease-out) .1s forwards;
  }
  @keyframes titleZoomIn{to{opacity:1;transform:scale(1);filter:blur(0);}}

  /* type TWO exit: tech glitch (red / white channel split) */
  .panel--two .giant-title.is-glitching{
    animation:glitchJitter .6s steps(2,end) forwards;
  }
  @keyframes glitchJitter{
    0%,100%{ transform:translate(0,0); text-shadow:none; opacity:1;}
    10%{ transform:translate(-3px,1px); text-shadow:3px 0 var(--red), -3px 0 var(--white);}
    30%{ transform:translate(3px,-2px); text-shadow:-4px 0 var(--white), 4px 0 var(--red);}
    50%{ transform:translate(-2px,2px) scale(1.02); text-shadow:2px 0 var(--red), -2px 0 var(--white);}
    70%{ transform:translate(4px,0); opacity:.4;}
    90%{ transform:translate(-6px,0); opacity:.1;}
    99%{ opacity:0; }
  }

  .cta-row{position:relative;z-index:4;display:flex;gap:16px;flex-wrap:wrap;margin-top:34px;}

  .cta-btn{
    margin-top:34px;padding:15px 46px;border:1.5px solid var(--red);
    color:#fff;font-weight:600;letter-spacing:2px;font-size:13px;
    border-radius:2px;position:relative;overflow:hidden;
    opacity:0;transform:translateY(18px);
    transition:opacity .6s var(--ease-out) .5s, transform .6s var(--ease-out) .5s,
      color .3s, box-shadow .3s;
  }
  .cta-row .cta-btn{margin-top:0;}
  .panel.in-view .cta-btn{opacity:1;transform:translateY(0);}
  .cta-btn:hover{box-shadow:0 0 26px rgba(255,31,61,.55);}
  .cta-btn::before{
    content:'';position:absolute;inset:0;background:var(--red);
    transform:translateX(-101%);transition:transform .35s var(--ease-out);z-index:-1;
  }
  .cta-btn:hover::before{transform:translateX(0);}

  /* ghost variant */
  .cta-btn--ghost{border-color:rgba(255,255,255,.4);}
  .cta-btn--ghost::before{background:#fff;}
  .cta-btn--ghost:hover{color:var(--void);box-shadow:0 0 26px rgba(255,255,255,.3);}

  /* hero variant: botão de abertura, maior e com o hover invertido — preenchido por
     padrão, esvazia (revela o vídeo por trás) ao passar o mouse */
  .cta-btn--hero{padding:20px 58px;font-size:15px;letter-spacing:2.5px;}
  .cta-btn--hero::before{transform:translateX(0);}
  .cta-btn--hero:hover::before{transform:translateX(-101%);}
  .cta-btn--hero:hover{box-shadow:0 0 30px rgba(255,31,61,.55);}

  /* ---------- SIDE COPY (eyebrow + texto de apoio — só cabe com folga no desktop) ---------- */
  .side-copy{
    position:absolute;z-index:4;right:var(--edge);bottom:120px;max-width:300px;text-align:right;
    opacity:0;transform:translateX(24px);
    transition:opacity .7s var(--ease-out) .6s, transform .7s var(--ease-out) .6s;
  }
  .panel--two .side-copy{transform:translateY(24px);}
  .panel--two.in-view .side-copy{transform:translateX(0) translateY(0);}
  .panel.in-view .side-copy{opacity:1;transform:translateX(0);}
  .side-copy__eyebrow{display:block;font-weight:700;font-size:13px;letter-spacing:1px;margin-bottom:8px;color:#fff;}
  .side-copy p{font-size:13px;line-height:1.6;color:var(--text-dim);}


  /* ---------- SCROLL CUE ---------- */
  .scroll-cue{
    position:absolute;left:50%;bottom:40px;transform:translateX(-50%);
    width:52px;height:52px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:16px;z-index:6;
    opacity:0;transition:opacity .6s ease .9s, transform .3s;
  }
  .panel.in-view .scroll-cue{opacity:1;}
  .scroll-cue:hover{transform:translateX(-50%) translateY(3px);}
  .scroll-cue.is-hidden{opacity:0 !important;pointer-events:none;}
  .scroll-cue.is-waiting{pointer-events:none;}
  .scroll-cue__ring{
    position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--red);
    animation:ringPulse 2s ease-out infinite;
  }
  .panel--two .scroll-cue__ring{border-color:var(--white);}
  @keyframes ringPulse{
    0%{transform:scale(.85);opacity:.9;}
    100%{transform:scale(1.55);opacity:0;}
  }
  /* while the video is playing pre-transition: ring becomes a spinner, chevron dims */
  .scroll-cue.is-waiting .scroll-cue__ring{
    animation:cueSpin .9s linear infinite;
    border-color:transparent;border-top-color:var(--red);
  }
  .panel--two .scroll-cue.is-waiting .scroll-cue__ring{border-top-color:var(--white);}
  @keyframes cueSpin{to{transform:rotate(360deg);}}
  .scroll-cue.is-waiting i{opacity:.35;animation-play-state:paused;}
  .scroll-cue i{animation:chevronBob 1.6s ease-in-out infinite;}
  @keyframes chevronBob{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}

  /* ---------- WIPE TRANSITIONS ---------- */
  .wipe{position:fixed;inset:0;z-index:999;pointer-events:none;opacity:0;overflow:hidden;}
  .wipe--diagonal.is-active{opacity:1;}
  .wipe--diagonal .wipe__bar{
    position:absolute;top:-60%;left:-25%;width:150%;height:220%;
    background:linear-gradient(120deg, transparent 8%, var(--red-deep) 30%, var(--red) 48%, var(--white) 60%, var(--red) 74%, transparent 92%);
    transform:translateX(-130%) skewX(-14deg);filter:blur(1px);
  }
  .wipe--diagonal.is-active .wipe__bar{animation:diagonalSweep .8s ease forwards;}
  @keyframes diagonalSweep{
    0%{transform:translateX(-130%) skewX(-14deg);}
    55%{transform:translateX(15%) skewX(-14deg);}
    100%{transform:translateX(140%) skewX(-14deg);}
  }

  .wipe--blinds{display:flex;}
  .wipe--blinds.is-active{opacity:1;}
  .blind{flex:1;height:100%;background:linear-gradient(180deg, var(--white), var(--red));
    transform:scaleY(0);transform-origin:top;}
  .wipe--blinds.is-active .blind{
    animation:blindsSweep .85s var(--ease-out) forwards;
    animation-delay:calc(var(--n) * 45ms);
  }
  @keyframes blindsSweep{
    0%{transform:scaleY(0);transform-origin:top;}
    45%{transform:scaleY(1);transform-origin:top;}
    55%{transform-origin:bottom;}
    100%{transform:scaleY(0);transform-origin:bottom;}
  }

  /* ================= CONTATO — REVEAL CIRCULAR SIMÉTRICO ================= */
  .contact{
    position:fixed;inset:0;z-index:1001;display:flex;align-items:center;
    background:var(--void);pointer-events:none;
    clip-path:circle(0px at var(--ox,50%) var(--oy,50%));
    transition:clip-path .85s var(--ease-out);
  }
  .contact.is-open{
    clip-path:circle(var(--r,150vmax) at var(--ox,50%) var(--oy,50%));
    pointer-events:auto;
  }
  .contact__bg{
    position:absolute;inset:0;z-index:0;
    background:
      radial-gradient(circle at 12% 25%, rgba(255,31,61,.32), transparent 45%),
      radial-gradient(circle at 88% 78%, rgba(122,0,18,.42), transparent 48%),
      linear-gradient(160deg,#0c0a0a,#050505 70%);
  }
  .contact__bg::after{
    content:'';position:absolute;inset:0;opacity:.12;
    background-image:linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
    background-size:42px 42px;
  }
  .contact__close{
    position:absolute;top:30px;right:44px;z-index:4;
    width:48px;height:48px;border-radius:50%;
    border:1.5px solid rgba(255,255,255,.25);color:#fff;font-size:17px;
    display:flex;align-items:center;justify-content:center;
    transition:border-color .3s, transform .3s var(--ease-out), box-shadow .3s;
  }
  .contact__close:hover{border-color:var(--red);transform:rotate(90deg);box-shadow:0 0 22px rgba(255,31,61,.5);}

  .contact__inner{
    position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;
    padding:clamp(56px, 10vh, 90px) var(--edge);max-height:100vh;overflow-y:auto;
    display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px, 6vw, 70px);align-items:center;
  }
  .contact__eyebrow{
    display:block;font-weight:700;font-size:13px;letter-spacing:2px;color:#fff;margin-bottom:14px;
  }
  .contact__title{
    font-family:var(--font-display);
    font-size:clamp(3rem, 7.5vw, 7rem);line-height:.92;
    color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22);
    background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
    -webkit-background-clip:text;background-clip:text;
  }
  .contact__lead{font-size:14px;line-height:1.7;color:var(--text-dim);max-width:360px;margin-top:22px;}
  .contact__social{display:flex;gap:20px;margin-top:30px;}
  .contact__social a{font-size:17px;color:var(--text-dim);transition:color .25s, transform .25s var(--ease-out);}
  .contact__social a:hover{color:var(--red);transform:translateY(-3px) scale(1.12);}

  .contact__list{list-style:none;display:flex;flex-direction:column;gap:16px;}
  .contact-card{
    display:flex;gap:18px;align-items:flex-start;padding:20px 22px;
    border:1px solid rgba(255,255,255,.1);border-left:2px solid var(--red);
    background:rgba(255,255,255,.03);border-radius:2px;
    transition:transform .35s var(--ease-out), background .35s, box-shadow .35s, opacity .6s var(--ease-out);
  }
  .contact-card:hover{transform:translateX(7px);background:rgba(255,31,61,.08);box-shadow:0 0 26px rgba(255,31,61,.18);}
  .contact-card i{color:var(--red);font-size:18px;margin-top:4px;}
  .contact-card__label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);}
  .contact-card__value{display:block;font-size:16px;font-weight:600;color:#fff;margin-top:5px;}
  .contact-card__note{display:block;font-size:12px;color:var(--text-dim);margin-top:4px;}

  .contact__left, .contact-card{opacity:0;transform:translateY(26px);}
  .contact.is-open .contact__left{
    opacity:1;transform:translateY(0);
    transition:opacity .7s var(--ease-out) .35s, transform .7s var(--ease-out) .35s;
  }
  .contact.is-open .contact-card{
    opacity:1;transform:translateY(0);
    transition:opacity .6s var(--ease-out) calc(.45s + var(--n,0) * 90ms),
               transform .6s var(--ease-out) calc(.45s + var(--n,0) * 90ms),
               background .35s, box-shadow .35s;
  }

  html.contact-open{overflow:hidden;}

  /* ================= CATEGORIAS — OVERLAY TELA CHEIA ================= */
  .categories{
    position:fixed;inset:0;z-index:1000;overflow-y:auto;
    background:var(--void);pointer-events:none;overscroll-behavior:contain;
    clip-path:circle(0px at var(--ox,50%) var(--oy,50%));
    transition:clip-path .85s var(--ease-out);
    display:flex;flex-direction:column;
  }
  .categories.is-open{
    clip-path:circle(var(--r,150vmax) at var(--ox,50%) var(--oy,50%));
    pointer-events:auto;
  }
  html.categories-open{overflow:hidden;}
  .categories__bg{
    position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(circle at 88% 12%, rgba(255,31,61,.28), transparent 45%),
      radial-gradient(circle at 8% 90%, rgba(122,0,18,.4), transparent 50%),
      linear-gradient(160deg,#0c0a0a,#050505 70%);
  }
  .categories__bg::after{
    content:'';position:fixed;inset:0;opacity:.1;pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
    background-size:48px 48px;
  }
  .categories__header{
    position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;
    padding:clamp(24px, 5vh, 38px) var(--edge) 0;
  }
  .categories__back{
    display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:1.5px;
    color:var(--text-dim);text-transform:uppercase;
    transition:color .25s, transform .25s var(--ease-out);
  }
  .categories__back i{font-size:15px;transition:transform .25s var(--ease-out);}
  .categories__back:hover{color:#fff;}
  .categories__back:hover i{transform:translateX(-4px);}
  .categories__title-block{position:relative;z-index:2;padding:8px var(--edge) 0;}
  .categories__eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:2px;color:var(--red);margin-bottom:10px;}
  .categories__title{
    font-family:var(--font-display);font-size:clamp(2.2rem, 5.6vw, 4.4rem);line-height:.95;color:#fff;
  }
  .categories__lead{max-width:min(440px, 80vw);margin-top:14px;font-size:14px;line-height:1.6;color:var(--text-dim);}

  .categories__grid{
    position:relative;z-index:2;display:grid;gap:22px;align-content:start;
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:230px;
    padding:30px var(--edge) 60px;
  }
  .cat-card{
    position:relative;overflow:hidden;border-radius:4px;cursor:pointer;
    border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.02);
    display:flex;flex-direction:column;justify-content:flex-end;padding:30px;
    transition:transform .4s var(--ease-out), border-color .4s;
  }
  .cat-card::after{
    content:'';position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--red);
    transition:width .45s var(--ease-out);z-index:1;
  }
  .cat-card:hover{transform:translateY(-6px);border-color:rgba(255,31,61,.4);}
  .cat-card:hover::after{width:100%;}
  .cat-card__bg{
    position:absolute;inset:0;z-index:0;
    background:linear-gradient(160deg, rgba(255,31,61,.24), rgba(8,8,8,.94) 72%);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    transition:transform .6s var(--ease-out);
    will-change:transform;
  }
  .cat-card--lg .cat-card__bg{
    background-size:contain;
    background-position:center;
  }
  .cat-card:hover .cat-card__bg{transform:scale(1.08);}
  .cat-card__arrow{
    position:absolute;top:24px;right:24px;z-index:1;font-size:16px;color:var(--text-dim);
    opacity:0;transform:translate(-6px,6px);
    transition:opacity .3s ease, transform .3s var(--ease-out), color .3s;
  }
  .cat-card:hover .cat-card__arrow{opacity:1;transform:translate(0,0);color:#fff;}
  .cat-card__icon{position:relative;z-index:1;font-size:30px;color:var(--red);margin-bottom:16px;}
  .cat-card__name{position:relative;z-index:1;font-family:var(--font-display);font-size:clamp(1.3rem,2vw,1.9rem);color:#fff;line-height:1.05;}
  .cat-card__count{position:relative;z-index:1;margin-top:10px;font-size:11px;letter-spacing:1.5px;color:var(--text-dim);text-transform:uppercase;}

  .cat-card--lg{grid-column:span 2;grid-row:span 2;padding:40px;}
  .cat-card--lg .cat-card__icon{font-size:46px;}
  .cat-card--lg .cat-card__name{font-size:clamp(2.1rem,3.6vw,3.4rem);}

  .cat-card--wide{grid-column:span 2;}
  .cat-card--wide .cat-card__name{font-size:clamp(1.6rem,2.6vw,2.3rem);}

  .cat-card--promo{border-color:transparent;}
  .cat-card--promo .cat-card__bg{background:linear-gradient(135deg, var(--red), var(--red-deep));}
  .cat-card--promo .cat-card__icon{color:#fff;}
  .cat-card--promo .cat-card__count{color:rgba(255,255,255,.85);}
  .cat-card--promo::after{background:#fff;}

  html.category-open{overflow:hidden;}

  /* ---------- NAVEGAÇÃO MOBILE (nav inferior + fab de contato + busca em tela cheia) ----------
     Escondidas por padrão (desktop usa a .sidebar vertical); viram visíveis dentro do
     breakpoint mobile mais abaixo, onde a .sidebar é desligada. */
  .mobile-nav, .mobile-search{display:none;}

  .mobile-search{
    position:fixed;inset:0;z-index:1200;background:var(--void);
    opacity:0;pointer-events:none;transform:translateY(-10px);
    transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
  }
  .mobile-search.is-open{opacity:1;pointer-events:auto;transform:translateY(0);}
  .mobile-search__bar{
    display:flex;align-items:center;gap:12px;
    padding:calc(22px + env(safe-area-inset-top)) var(--edge) 20px;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .mobile-search__bar > i{color:var(--red);font-size:17px;}
  .mobile-search__input{
    flex:1;min-width:0;background:none;border:none;color:#fff;
    font-family:var(--font-ui);font-size:17px;
  }
  .mobile-search__input:focus{outline:none;}
  .mobile-search__input::placeholder{color:var(--text-dim);}
  .mobile-search__close{color:var(--text-dim);font-size:19px;flex:0 0 auto;}
  html.mobile-search-open{overflow:hidden;}

  /* ---------- RESPONSIVE ---------- */
  /* A maior parte do espaçamento já é fluida (var(--edge), clamp()) — os breakpoints abaixo
     tratam mudanças estruturais: colunas de grid, texto absoluto virando estático, e a
     barra vertical (desktop) virando navegação inferior (mobile). */

  /* ----- TABLET (laptops pequenos, iPads deitados) ----- */
  @media (max-width:1024px){
    .side-index{display:none;}
    .side-search__field-wrap{left:30px;}
    .side-search.is-open .side-search__field-wrap{width:190px;}

    .categories__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:210px;}
  }

  /* ----- MOBILE (celulares, iPads em pé) -----
     Troca estrutural, não só de escala: a barra vertical de ícones (pensada pra mouse/hover)
     dá lugar a uma nav inferior de alvo de toque real (≥48px, zona de alcance do polegar) —
     ver diretrizes de touch target do Material Design / Apple HIG. */
  @media (max-width:860px){
    html{scroll-snap-type:y proximity;} /* "mandatory" pode prender o usuário se o conteúdo passar da tela — proximity é mais tolerante */

    .sidebar{display:none;}

    /* Mesmo estilo da barra lateral (ícones soltos, sem fundo/rótulo — só cor e escala no toque),
       só que deitada e ancorada embaixo. A seta de avançar e o contato entram na mesma fileira
       (7 ícones ao todo, seta exatamente no meio) — um gradiente bem sutil (mesma linguagem do
       brilho ambiente dos painéis) garante contraste sem virar uma "barra" visível. */
    .mobile-nav{
      display:flex;position:fixed;left:0;right:0;bottom:0;z-index:800;
      justify-content:center;align-items:center;gap:clamp(8px, 3vw, 20px);
      padding:9px 10px calc(9px + env(safe-area-inset-bottom));
      background:linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.3) 55%, transparent 100%);
    }
    .mobile-nav__item{
      display:flex;align-items:center;justify-content:center;flex:0 0 auto;
      width:40px;height:40px;color:var(--text-dim);font-size:17px;border:none;background:none;
      transition:color .25s, transform .25s;
    }
    .mobile-nav__item:active{color:var(--red);transform:scale(1.12);}
    .mobile-nav__item:focus-visible{color:var(--red);}

    /* seta e contato mantêm o tratamento visual que já tinham fora da nav: bolha pulsante e círculo vermelho */
    .mobile-nav__cue{position:relative;}
    .mobile-nav__cue::before{
      content:'';position:absolute;inset:-3px;border-radius:50%;
      border:1.5px solid var(--red);
      animation:ringPulse 2s ease-out infinite;
    }
    .mobile-nav__item.js-mobile-contact{
      background:var(--red);color:#fff;border-radius:50%;
      box-shadow:0 4px 14px rgba(255,31,61,.4);
    }
    .mobile-nav__item.js-mobile-contact:active,
    .mobile-nav__item.js-mobile-contact:focus-visible{color:#fff;transform:scale(1.08);}

    .mobile-search{display:block;}

    .panel{overflow-y:auto;} /* rede de segurança: se o conteúdo passar da altura da tela, rola em vez de cortar */

    .hero-content{
      padding:0 var(--edge);padding-bottom:70px;
      align-items:center;text-align:center;
    }
    .panel--mirror .hero-content{align-items:center;text-align:center;}
    .giant-title{text-align:center;}
    .cta-btn{padding:13px 34px;}
    .scroll-cue{display:none;} /* a seta agora mora na nav inferior */
    .side-copy{display:none;} /* não cabe numa tela pequena — mobile fica só com título + botão */

    .contact__inner{grid-template-columns:1fr;}
    .contact__close{top:18px;right:20px;width:42px;height:42px;}
    .contact__lead{max-width:100%;}

    .categories__grid{
      grid-template-columns:1fr;grid-auto-rows:130px;gap:14px;
    }
    .cat-card{min-height:120px;padding:22px;}
    .cat-card--lg,.cat-card--wide{grid-column:span 1;grid-row:span 1;}
    .cat-card--lg .cat-card__icon{font-size:28px;}
    .cat-card--lg .cat-card__name,.cat-card--wide .cat-card__name{font-size:clamp(1.2rem,4.5vw,1.6rem);}
  }

  /* ----- PHONE PEQUENO (largura ≤480px) ----- */
  @media (max-width:480px){
    .mobile-nav{gap:clamp(6px, 2.4vw, 14px);padding-left:6px;padding-right:6px;}
    .mobile-nav__item{width:36px;height:36px;font-size:16px;}
    .cta-btn{padding:12px 26px;letter-spacing:1.5px;}
    .contact__inner{padding-left:18px;padding-right:18px;}
    .categories__header,.categories__title-block,.categories__grid{padding-left:18px;padding-right:18px;}
    .contact-card{padding:16px 18px;gap:14px;}
  }

  /* ----- LANDSCAPE BAIXO (celular deitado — altura curta, prioriza título + CTA) ----- */
  @media (max-height:500px) and (orientation:landscape){
    .logo{top:10px;}
    .logo-img{height:22px;}
    .giant-title{font-size:clamp(1.8rem, 8vw, 3.4rem);}
    .cta-btn{margin-top:16px;padding:10px 28px;}
    .cta-row .cta-btn{margin-top:0;}
    .mobile-nav{padding-top:5px;padding-bottom:calc(5px + env(safe-area-inset-bottom));gap:clamp(6px, 2vw, 16px);}
    .mobile-nav__item{width:32px;height:32px;font-size:15px;}
    .contact__inner{padding-top:56px;padding-bottom:30px;}
    .categories__header{padding-top:16px;}
  }

  /* ---------- REDUCED MOTION ---------- */
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
      transition-duration:.001ms !important;}
    html{scroll-behavior:auto;}
  }


/* ============================================================
   AJUSTES DA CONVERSAO PARA NUVEMSHOP
   ============================================================ */

/* O layout.tpl do tema desenha header e footer em volta do conteudo do
   home.tpl. Como esta home e fullscreen com scroll-snap, os dois precisam
   sumir só aqui.

   MIGRACAO FLEX -> BRASILIA: estes seletores continuam valendo porque o
   header e o footer sao arquivos proprios (snipplets/header/header.tpl e
   snipplets/footer/footer.tpl), subidos junto com este CSS. Eles carregam
   data-store="head" / "footer" e as classes .js-head-main / .js-footer.
   Se um dia voce voltar a usar o header/footer nativo do tema, confira os
   nomes no inspetor antes de confiar nesta lista.

   A classe .sportzone-on entra em <html> pelo script inline do home.tpl. */
html.sportzone-on [data-store="head"],
html.sportzone-on [data-store="footer"],
html.sportzone-on .js-head-main,
html.sportzone-on .js-footer,
html.sportzone-on .js-whatsapp-chat,
html.sportzone-on .glass-header,
html.sportzone-on .simple-footer{
  display:none !important;
}

/* Rede de seguranca: header/footer de primeiro nivel, caso alguma classe
   mude de nome. O "> body >" evita acertar qualquer coisa dentro dos paineis. */
html.sportzone-on > body > header,
html.sportzone-on > body > footer{
  display:none !important;
}

/* O Brasilia pode envolver o {% template_content %} num wrapper com
   max-width/padding. Se envolver, o painel fullscreen ganha margem lateral
   e o 100svh deixa de bater. Estas regras neutralizam o wrapper — e nao
   fazem mal nenhum se ele nao existir. */
html.sportzone-on main,
html.sportzone-on .js-main-content,
html.sportzone-on [data-store="main-content"],
html.sportzone-on .main-content,
html.sportzone-on .container{
  max-width:none !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
}

/* O tema aplica cor de fundo e fonte no body pelo style-colors.
   Na home o fundo tem que ser o preto do layout. */
html.sportzone-on body{
  background:var(--void);
  color:var(--text-ghost);
  font-family:var(--font-ui);
}

/* Container de paineis: evita que qualquer margem do tema empurre o primeiro painel */
.sportzone-home{margin:0;padding:0;}

/* Os CTAs viraram <a> (para funcionarem como link real de categoria,
   com fallback sem JS). Como o reset de <button> nao se aplica a links,
   as propriedades que vinham "de graca" entram aqui. */
.cta-btn{
  display:inline-block;
  font-family:inherit;
  background:none;
  cursor:pointer;
  text-align:center;
  text-decoration:none;
}

/* FIX — fundo do overlay de categorias.
   .categories e o proprio container de rolagem (position:fixed + overflow-y:auto).
   Com .categories__bg em position:absolute, o inset:0 resolve contra a caixa de
   conteudo e o fundo ROLA JUNTO: ao descer, ele sai de cena e sobra o preto
   chapado de var(--void). Em position:fixed o fundo ancora na viewport e fica
   parado atras dos cards. O clip-path de .categories continua recortando o
   filho fixo, entao a animacao de revelacao em circulo nao muda. */
.categories__bg{
  position:fixed;
}

/* Mesma logica para o grid de linhas do fundo, que e filho do bg. */
.categories__bg::after{
  position:fixed;
}

@media (max-width:860px){
  .panel:not(.panel--hero-logo) .logo{
    left:50%;
    right:auto;
    transform:translateX(-50%) translateY(-14px);
  }
  .panel:not(.panel--hero-logo).in-view .logo{
    transform:translateX(-50%) translateY(0);
  }
  .logo-img{height:clamp(54px, 11vw, 64px);}
}