/* ═══════════════════════════════════════
   TOKENS — Azul celeste do Paysandu
═══════════════════════════════════════ */
:root {
  /* Azuis reais do PSC */
  --celeste:        #00A6E8;
  --celeste-vivo:   #22BDF5;
  --celeste-claro:  #6FD6FB;
  --celeste-pale:   #C7EEFC;
  --celeste-wash:   #EAF8FE;
  --celeste-deep:   #0378B8;
  --celeste-ink:    #024E7C;

  --ouro:           #F2C230;
  --ouro-claro:     #FFD95C;

  --wp:             #25D366;
  --wp-deep:        #17A94E;

  --branco:         #FFFFFF;
  --papel:          #F5FBFE;
  --tinta:          #06283D;
  --tinta-suave:    #3E6E8C;
  --linha:          #D3EAF6;

  --surface:        var(--papel);
  --surface-2:      var(--branco);
  --text:           var(--tinta);
  --text-2:         var(--tinta-suave);
  --card:           var(--branco);
  --border:         var(--linha);
  --shadow-c:       rgba(0, 122, 180, 0.13);
}

/* Identidade fixa: a marca da loja não muda com o tema do aparelho.
   O azul celeste do Paysandu é o ponto — ele se mantém em qualquer device. */
:root, :root[data-theme="dark"], :root[data-theme="light"] {
  color-scheme: light;
}

/* ═══ RESET ═══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--surface);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font:inherit;cursor:pointer;border:none;background:none}
:focus-visible{outline:3px solid var(--celeste);outline-offset:3px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 1.25rem}
.impact{font-family:Impact,'Arial Black','Haettenschweiler',sans-serif;font-weight:900;text-transform:uppercase;line-height:.92;letter-spacing:-.005em}
h1,h2,h3{text-wrap:balance}

/* ═══════════════════════════════════════
   HEADER
═══════════════════════════════════════ */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:200;
  background:transparent;
  transition:background .4s cubic-bezier(.4,0,.2,1),box-shadow .4s,backdrop-filter .4s;
}
.hdr.solid{
  background:rgba(0,166,232,.96);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 6px 30px rgba(0,122,180,.28);
}
@media (max-width:768px){
  /* backdrop-filter num header fixo é caro em Android durante o scroll;
     o fundo já está 96% opaco, então o blur soma pouco visualmente. */
  .hdr.solid{backdrop-filter:none;-webkit-backdrop-filter:none}
}
.hdr-in{display:flex;align-items:center;justify-content:space-between;height:66px;gap:1rem}

.brand{display:flex;align-items:center;gap:.6rem;transition:transform .3s}
.brand:hover{transform:scale(1.03)}
.brand-mark{width:42px;height:42px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 3px 8px rgba(0,0,0,.25))}
.brand-txt{
  font-family:Impact,'Arial Black',sans-serif;font-weight:900;
  font-size:1.05rem;text-transform:uppercase;letter-spacing:.02em;
  color:#fff;line-height:1;text-shadow:0 2px 8px rgba(0,60,100,.4);
}
.brand-txt em{
  display:block;font-family:system-ui,sans-serif;font-style:normal;
  font-size:.5rem;font-weight:700;letter-spacing:.16em;
  color:var(--ouro-claro);margin-top:3px;
}

.nav{display:flex;align-items:center;gap:1.75rem}
@media(max-width:820px){.nav{display:none}}
.nav a{
  position:relative;color:rgba(255,255,255,.85);
  font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:.3rem 0;transition:color .25s;
}
.nav a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:2px;
  background:var(--ouro);border-radius:2px;transition:width .3s cubic-bezier(.4,0,.2,1);
}
.nav a:hover{color:#fff}
.nav a:hover::after{width:100%}

.hdr-cta{
  display:inline-flex;align-items:center;gap:.45rem;
  background:#fff;color:var(--celeste-deep);
  font-size:.78rem;font-weight:800;letter-spacing:.02em;
  padding:.55rem 1.05rem;border-radius:100px;white-space:nowrap;
  box-shadow:0 4px 16px rgba(0,60,100,.2);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;
}
.hdr-cta:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 8px 24px rgba(0,60,100,.3)}
.hdr-cta:active{transform:translateY(0) scale(.98)}
.hdr-cta svg{width:15px;height:15px;color:var(--wp)}

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:5.5rem 1.25rem 4rem;text-align:center;overflow:hidden;
  background:linear-gradient(168deg,#22BDF5 0%,#00A6E8 42%,#0378B8 100%);
}

/* Listras diagonais ANIMADAS — o "bicolor" em movimento */
.hero-stripes{
  position:absolute;inset:-30% -30%;
  background:repeating-linear-gradient(
    -58deg,
    transparent 0 54px,
    rgba(255,255,255,.085) 54px 100px
  );
  animation:stripeSlide 22s linear infinite;
  pointer-events:none;
}
@keyframes stripeSlide{
  to{transform:translate3d(118px,-189px,0)}
}

/* Segunda camada de listras, sentido oposto, mais sutil */
.hero-stripes-2{
  position:absolute;inset:-30% -30%;
  background:repeating-linear-gradient(
    58deg,
    transparent 0 90px,
    rgba(255,255,255,.04) 90px 140px
  );
  animation:stripeSlide2 34s linear infinite;
  pointer-events:none;
}
@keyframes stripeSlide2{
  to{transform:translate3d(-106px,-169px,0)}
}

/* Orbs de luz flutuantes.
   Blur pesado em elemento animado é o maior custo de GPU da página —
   em celular mais fraco isso derruba o frame rate do scroll e "balança"
   a tela inteira. Blur menor no mobile mantém o efeito sem o custo. */
.orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;opacity:.5;will-change:transform}
.orb-1{width:420px;height:420px;background:#6FD6FB;top:-6%;left:-8%;animation:float1 16s ease-in-out infinite}
.orb-2{width:340px;height:340px;background:#F2C230;bottom:-10%;right:-6%;opacity:.22;animation:float2 20s ease-in-out infinite}
.orb-3{width:300px;height:300px;background:#C7EEFC;top:45%;right:12%;opacity:.3;animation:float3 24s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,50px) scale(1.14)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-70px,-45px) scale(1.2)}}
@keyframes float3{0%,100%{transform:translate(0,0)}33%{transform:translate(-40px,35px)}66%{transform:translate(35px,-30px)}}
@media (max-width:768px){
  .orb{filter:blur(36px)}
  .orb-1{width:280px;height:280px}
  .orb-2{width:220px;height:220px}
  .orb-3{width:200px;height:200px}
}

/* Vinheta */
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 90% 70% at 50% 45%,transparent 35%,rgba(1,70,110,.32) 100%);
}

.hero-in{position:relative;z-index:5;max-width:860px;width:100%}

/* Badge topo */
.hero-pill{
  display:inline-flex;align-items:center;gap:.55rem;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  padding:.42rem .95rem;border-radius:100px;margin-bottom:1.6rem;
  opacity:0;animation:fadeUp .8s cubic-bezier(.16,1,.3,1) .15s forwards;
}
.hero-pill b{color:var(--ouro-claro);font-weight:900}
.pill-dot{
  width:6px;height:6px;border-radius:50%;background:#4ADE80;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:livePulse 2.2s ease-out infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,.7)}
  70%{box-shadow:0 0 0 9px rgba(74,222,128,0)}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}
}

/* Logo */
.hero-logo{
  width:132px;height:132px;margin:0 auto 1.5rem;display:block;object-fit:contain;
  opacity:0;animation:logoIn 1.1s cubic-bezier(.16,1,.3,1) .05s forwards,logoFloat 6s ease-in-out 1.2s infinite;
}
@keyframes logoIn{
  from{opacity:0;transform:scale(.55) rotate(-14deg)}
  to{opacity:1;transform:scale(1) rotate(0)}
}
@keyframes logoFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-13px) scale(1.025)}
}

/* Headline */
.hero h1{
  font-family:Impact,'Arial Black',sans-serif;font-weight:900;
  font-size:clamp(3.6rem,15vw,9rem);text-transform:uppercase;
  line-height:.85;letter-spacing:-.015em;color:#fff;
  text-shadow:0 6px 40px rgba(1,60,100,.4);
  margin-bottom:.15rem;
}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(70px) rotate(5deg)}
.hero h1 .w-1{animation:wordUp .95s cubic-bezier(.16,1,.3,1) .3s forwards}
.hero h1 .w-2{animation:wordUp .95s cubic-bezier(.16,1,.3,1) .44s forwards;color:var(--ouro);text-shadow:0 6px 40px rgba(180,120,0,.35)}
@keyframes wordUp{to{opacity:1;transform:translateY(0) rotate(0)}}

.hero-sub{
  font-size:clamp(.78rem,2.4vw,1.02rem);color:rgba(255,255,255,.9);
  letter-spacing:.24em;text-transform:uppercase;font-weight:700;
  margin:1.1rem 0 2.4rem;
  opacity:0;animation:fadeUp .9s cubic-bezier(.16,1,.3,1) .7s forwards;
}

/* CTAs */
.hero-btns{
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
  opacity:0;animation:fadeUp .9s cubic-bezier(.16,1,.3,1) .85s forwards;
}
@media(min-width:520px){.hero-btns{flex-direction:row;justify-content:center}}

.btn-wp{
  position:relative;display:inline-flex;align-items:center;gap:.6rem;
  background:var(--wp);color:#fff;font-size:1.02rem;font-weight:800;
  padding:.95rem 2rem;border-radius:100px;overflow:hidden;
  box-shadow:0 8px 30px rgba(37,211,102,.45);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .28s,background .25s;
}
.btn-wp::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.42) 50%,transparent 75%);
  transform:translateX(-130%);
}
.btn-wp:hover{background:var(--wp-deep);transform:translateY(-4px) scale(1.035);box-shadow:0 16px 44px rgba(37,211,102,.55)}
.btn-wp:hover::before{animation:shine .85s ease-out}
.btn-wp:active{transform:translateY(-1px) scale(.99)}
.btn-wp svg{width:21px;height:21px;flex-shrink:0;position:relative;z-index:1}
.btn-wp span{position:relative;z-index:1}
@keyframes shine{to{transform:translateX(130%)}}

.btn-ghost{
  display:inline-flex;align-items:center;gap:.5rem;
  color:#fff;font-size:.92rem;font-weight:700;
  padding:.95rem 1.7rem;border-radius:100px;
  border:2px solid rgba(255,255,255,.4);
  transition:border-color .25s,background .25s,transform .25s;
}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.14);transform:translateY(-3px)}
.btn-ghost svg{width:15px;height:15px;transition:transform .3s}
.btn-ghost:hover svg{transform:translateY(3px)}

/* Indicador scroll */
.scroll-ind{
  position:absolute;bottom:1.6rem;left:50%;z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  color:rgba(255,255,255,.6);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  opacity:0;transform:translateX(-50%);
  animation:fadeIn 1s ease 1.6s forwards;
}
@keyframes fadeIn{to{opacity:1}}
.mouse{
  width:24px;height:38px;border:2px solid rgba(255,255,255,.45);border-radius:14px;
  display:flex;justify-content:center;padding-top:6px;
}
.mouse i{
  display:block;width:3px;height:7px;border-radius:2px;background:rgba(255,255,255,.8);
  animation:wheel 1.8s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(13px)}}

/* ═══════════════════════════════════════
   MARQUEE
═══════════════════════════════════════ */
.marquee{
  background:var(--ouro);color:#06283D;
  padding:.85rem 0;overflow:hidden;
  border-top:3px solid rgba(0,0,0,.07);border-bottom:3px solid rgba(0,0,0,.07);
}
.marquee-track{display:flex;width:max-content;animation:marq 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee-grp{display:flex;align-items:center;flex-shrink:0}
.marquee-item{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:Impact,'Arial Black',sans-serif;font-size:1.02rem;
  text-transform:uppercase;letter-spacing:.04em;
  padding:0 1.8rem;white-space:nowrap;
}
.marquee-item::after{content:'★';color:rgba(6,40,61,.4);font-size:.72rem;margin-left:1.8rem;font-family:system-ui}
@media (max-width:520px){
  .marquee{padding:.7rem 0}
  .marquee-item{font-size:.92rem;padding:0 1.35rem}
  .marquee-item::after{margin-left:1.35rem}
}


/* ═══════════════════════════════════════
   STATS
═══════════════════════════════════════ */
.stats{background:var(--surface-2);padding:3.6rem 0;border-bottom:1px solid var(--border)}
.stats-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.8rem 1.2rem;
}
@media(min-width:760px){.stats-grid{grid-template-columns:repeat(4,1fr);gap:2rem}}
.stat{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.45rem}
.stat-ico{
  width:50px;height:50px;border-radius:16px;margin-bottom:.25rem;
  background:linear-gradient(140deg,var(--celeste-vivo),var(--celeste-deep));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,140,200,.3);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.stat:hover .stat-ico{transform:translateY(-5px) rotate(-7deg) scale(1.08)}
.stat-ico svg{width:23px;height:23px;color:#fff}
.stat-num{
  font-family:Impact,'Arial Black',sans-serif;font-size:clamp(2rem,5.5vw,2.6rem);
  color:var(--celeste);line-height:1;font-variant-numeric:tabular-nums;
}
.stat-lbl{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);max-width:160px;line-height:1.35}


/* ═══════════════════════════════════════
   SEÇÕES
═══════════════════════════════════════ */
.sec{padding:5.5rem 0;position:relative}
.eyebrow{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.68rem;font-weight:900;letter-spacing:.22em;text-transform:uppercase;
  color:var(--celeste);margin-bottom:.7rem;
}
.eyebrow::before{content:'';width:26px;height:2px;background:var(--ouro);border-radius:2px}
.sec-h2{
  font-family:Impact,'Arial Black',sans-serif;font-weight:900;
  font-size:clamp(2rem,6vw,3.4rem);text-transform:uppercase;
  line-height:.95;letter-spacing:-.01em;color:var(--text);margin-bottom:.85rem;
}
.sec-p{font-size:1.02rem;color:var(--text-2);max-width:560px;line-height:1.68}
.sec-head{margin-bottom:3rem}
.sec-head.mid{text-align:center}
.sec-head.mid .eyebrow{justify-content:center}
.sec-head.mid .sec-p{margin:0 auto}

/* ═══════════════════════════════════════
   PRODUTOS
═══════════════════════════════════════ */
.sec-prod{background:var(--surface)}
.prod-grid{display:grid;grid-template-columns:1fr;gap:1.4rem}
@media(min-width:560px){.prod-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.prod-grid{grid-template-columns:repeat(4,1fr)}}

.prod{
  background:var(--card);border:1px solid var(--border);border-radius:20px;
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s,border-color .35s;
}
.prod:hover{
  transform:translateY(-11px);
  box-shadow:0 26px 55px var(--shadow-c);
  border-color:var(--celeste-claro);
}
.prod-vis{
  height:180px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--celeste-vivo) 0%,var(--celeste) 55%,var(--celeste-deep) 100%);
}
/* Listras nos cards */
.prod-vis::before{
  content:'';position:absolute;inset:-40%;
  background:repeating-linear-gradient(-58deg,transparent 0 18px,rgba(255,255,255,.09) 18px 32px);
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.prod:hover .prod-vis::before{transform:translate(38px,-61px)}
/* Brilho radial */
.prod-vis::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.28),transparent 62%);
  opacity:0;transition:opacity .45s;
}
.prod:hover .prod-vis::after{opacity:1}
.prod-vis svg{
  width:104px;height:104px;position:relative;z-index:2;
  filter:drop-shadow(0 8px 18px rgba(0,60,100,.28));
  transition:transform .55s cubic-bezier(.34,1.56,.64,1);
}
.prod:hover .prod-vis svg{transform:scale(1.12) translateY(-5px)}

.prod-tag{
  position:absolute;top:.85rem;left:.85rem;z-index:3;
  background:rgba(255,255,255,.92);color:var(--celeste-deep);
  font-size:.6rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
  padding:.28rem .6rem;border-radius:100px;
  backdrop-filter:blur(6px);
}
.prod-body{padding:1.3rem 1.25rem 1.4rem;flex:1;display:flex;flex-direction:column}
.prod-nome{font-size:1.06rem;font-weight:800;color:var(--text);line-height:1.22;margin-bottom:.45rem}
.prod-desc{font-size:.83rem;color:var(--text-2);line-height:1.58;flex:1}
.prod-link{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:1.1rem;
  font-size:.79rem;font-weight:800;color:var(--celeste);letter-spacing:.02em;
  transition:gap .3s,color .25s;
}
.prod-link svg{width:14px;height:14px;transition:transform .3s}
.prod-link:hover{gap:.65rem;color:var(--celeste-deep)}
.prod-link:hover svg{transform:translateX(3px)}

/* ═══════════════════════════════════════
   DIFERENCIAIS
═══════════════════════════════════════ */
.sec-dif{
  position:relative;overflow:hidden;
  background:linear-gradient(155deg,#22BDF5 0%,#00A6E8 50%,#0378B8 100%);
}
.sec-dif .dif-stripes{
  position:absolute;inset:-25%;
  background:repeating-linear-gradient(-58deg,transparent 0 60px,rgba(255,255,255,.055) 60px 108px);
  animation:stripeSlide 30s linear infinite;
}
.sec-dif .wrap{position:relative;z-index:2}
.sec-dif .eyebrow{color:#fff}
.sec-dif .eyebrow::before{background:var(--ouro-claro)}
.sec-dif .sec-h2{color:#fff;text-shadow:0 4px 24px rgba(1,60,100,.25)}
.sec-dif .sec-p{color:rgba(255,255,255,.85)}

.dif-grid{display:grid;grid-template-columns:1fr;gap:1.1rem}
@media(min-width:560px){.dif-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.dif-grid{grid-template-columns:repeat(4,1fr)}}
.dif{
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-radius:18px;padding:1.7rem 1.35rem;
  display:flex;flex-direction:column;gap:.8rem;
  transition:transform .4s cubic-bezier(.16,1,.3,1),background .35s,border-color .35s;
}
.dif:hover{
  transform:translateY(-8px);
  background:rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.45);
}
.dif-ico{
  width:50px;height:50px;border-radius:14px;
  background:rgba(255,255,255,.95);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,60,100,.18);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.dif:hover .dif-ico{transform:rotate(-9deg) scale(1.1)}
.dif-ico svg{width:24px;height:24px;color:var(--celeste-deep)}
.dif-t{font-size:1rem;font-weight:800;color:#fff;line-height:1.28}
.dif-d{font-size:.83rem;color:rgba(255,255,255,.82);line-height:1.6}

/* ═══════════════════════════════════════
   AVALIAÇÕES
   ═══════════════════════════════════════ */
.sec-aval{background:var(--surface-2)}
.aval-layout{display:grid;grid-template-columns:1fr;justify-items:center}

.score-box{
  width:100%;max-width:360px;
  background:linear-gradient(150deg,var(--celeste-vivo),var(--celeste-deep));
  border-radius:22px;padding:2rem 1.6rem;text-align:center;
  color:#fff;box-shadow:0 18px 45px rgba(0,140,200,.3);
  position:relative;overflow:hidden;
}
.score-box::before{
  content:'';position:absolute;inset:-30%;
  background:repeating-linear-gradient(-58deg,transparent 0 26px,rgba(255,255,255,.07) 26px 46px);
}
.score-in{position:relative;z-index:1}
.score-n{
  font-family:Impact,'Arial Black',sans-serif;font-size:5rem;line-height:1;
  font-variant-numeric:tabular-nums;text-shadow:0 5px 24px rgba(0,60,100,.35);
}
.score-stars{display:flex;justify-content:center;gap:.18rem;margin:.55rem 0 .45rem}
.score-stars svg{width:26px;height:26px;fill:var(--ouro-claro);filter:drop-shadow(0 2px 5px rgba(0,0,0,.18))}
.score-stars svg.half{fill:rgba(255,255,255,.4)}
.score-c{font-size:.8rem;font-weight:700;color:rgba(255,255,255,.9);letter-spacing:.04em}
.score-src{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:1.2rem;
  background:rgba(255,255,255,.95);color:var(--celeste-ink);
  font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:.42rem .85rem;border-radius:100px;
}
.gicon{width:14px;height:14px;flex-shrink:0}


/* Mapa estilizado */
.map{
  border-radius:22px;overflow:hidden;position:relative;
  aspect-ratio:4/3.4;min-height:340px;
  background:linear-gradient(160deg,var(--celeste-wash),var(--celeste-pale));
  border:1px solid var(--border);
  box-shadow:0 20px 50px var(--shadow-c);
}
.map-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(0,140,200,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,140,200,.09) 1px,transparent 1px);
  background-size:38px 38px;
}
.map-road{position:absolute;background:rgba(0,140,200,.16);border-radius:2px}
.r1{top:38%;left:-5%;width:110%;height:11px;transform:rotate(-11deg)}
.r2{top:12%;left:22%;width:11px;height:120%;transform:rotate(9deg)}
.r3{top:68%;left:-5%;width:110%;height:8px;transform:rotate(-6deg)}
.map-blk{position:absolute;background:rgba(0,140,200,.07);border-radius:5px}
.b1{top:14%;left:38%;width:80px;height:56px}
.b2{top:52%;left:12%;width:60px;height:70px}
.b3{top:76%;left:52%;width:90px;height:44px}

/* Estádio */
.map-stadium{
  position:absolute;top:20%;left:52%;
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
}
.stadium-shape{
  width:62px;height:42px;border-radius:50%;
  border:3px solid rgba(0,140,200,.35);
  background:rgba(0,166,232,.12);
  display:flex;align-items:center;justify-content:center;
}
.stadium-shape::before{content:'';width:30px;height:16px;border-radius:3px;background:rgba(0,140,200,.22)}
.map-stadium span{
  font-size:.56rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--celeste-deep);background:var(--card);padding:.15rem .4rem;border-radius:4px;
  white-space:nowrap;
}

/* Pin da loja */
.map-pin-wrap{
  position:absolute;top:48%;left:36%;
  display:flex;flex-direction:column;align-items:center;
  animation:pinDrop 1s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes pinDrop{from{opacity:0;transform:translateY(-46px)}to{opacity:1;transform:translateY(0)}}
.pin-ripple{
  position:absolute;top:34px;width:34px;height:34px;border-radius:50%;
  background:rgba(0,166,232,.3);
  animation:ripple 2.6s ease-out infinite;
}
@keyframes ripple{
  0%{transform:scale(.4);opacity:.85}
  100%{transform:scale(3.4);opacity:0}
}
.pin{
  width:44px;height:44px;position:relative;z-index:2;
  background:linear-gradient(140deg,var(--celeste-vivo),var(--celeste-deep));
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(0,120,180,.45);
  animation:pinBob 3s ease-in-out 1s infinite;
}
@keyframes pinBob{0%,100%{transform:rotate(-45deg) translateY(0)}50%{transform:rotate(-45deg) translateY(-6px)}}
.pin i{
  transform:rotate(45deg);font-family:Impact,sans-serif;font-style:normal;
  color:#fff;font-size:.85rem;letter-spacing:.02em;
}
.pin-lbl{
  margin-top:.5rem;position:relative;z-index:2;
  background:var(--card);border:1px solid var(--border);
  padding:.35rem .65rem;border-radius:8px;
  font-size:.62rem;font-weight:900;color:var(--text);white-space:nowrap;
  box-shadow:0 5px 14px var(--shadow-c);
}

.map-cta{
  position:absolute;bottom:1rem;left:1rem;right:1rem;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:.8rem 1rem;
  box-shadow:0 10px 28px var(--shadow-c);
}
.map-cta-tx{font-size:.75rem;line-height:1.35;color:var(--text)}
.map-cta-tx b{display:block;font-size:.82rem;font-weight:800}
.map-cta-tx span{color:var(--text-2);font-size:.7rem}
.btn-map{
  display:inline-flex;align-items:center;gap:.35rem;flex-shrink:0;
  background:var(--celeste);color:#fff;font-size:.72rem;font-weight:800;
  padding:.5rem .9rem;border-radius:100px;white-space:nowrap;
  transition:background .25s,transform .25s;
}
.btn-map:hover{background:var(--celeste-deep);transform:scale(1.05)}
.btn-map svg{width:13px;height:13px}

/* ═══════════════════════════════════════
   CTA FINAL
═══════════════════════════════════════ */
.sec-cta{
  position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(140deg,#22BDF5,#00A6E8 48%,#0378B8);
  padding:6rem 0;
}
.cta-stripes{
  position:absolute;inset:-25%;
  background:repeating-linear-gradient(-58deg,transparent 0 46px,rgba(255,255,255,.07) 46px 82px);
  animation:stripeSlide 26s linear infinite;
}
.cta-glow{
  position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.3),transparent 68%);
  top:50%;left:50%;transform:translate(-50%,-50%);
  animation:glowPulse 5s ease-in-out infinite;
}
@keyframes glowPulse{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:.85;transform:translate(-50%,-50%) scale(1.16)}}
.cta-in{position:relative;z-index:3;max-width:620px;margin:0 auto}
.cta-in .eyebrow{color:#fff;justify-content:center}
.cta-in .eyebrow::before{background:var(--ouro-claro)}
.cta-t{
  font-family:Impact,'Arial Black',sans-serif;font-weight:900;
  font-size:clamp(2rem,7vw,3.6rem);text-transform:uppercase;
  line-height:.95;color:#fff;margin-bottom:1.1rem;
  text-shadow:0 5px 30px rgba(1,60,100,.3);
}
.cta-d{font-size:1rem;color:rgba(255,255,255,.9);margin-bottom:2.2rem;line-height:1.68}
.cta-grp{display:flex;flex-direction:column;align-items:center;gap:1rem}
@media(min-width:520px){.cta-grp{flex-direction:row;justify-content:center}}
.cta-tel{color:rgba(255,255,255,.85);font-size:.85rem;font-weight:600}
.cta-tel b{color:#fff;font-weight:800}

/* ═══════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════ */
.ft{background:#032F4A;color:rgba(255,255,255,.6);padding:.75rem 0 .65rem;position:relative;overflow:hidden}
.ft::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(-58deg,transparent 0 70px,rgba(255,255,255,.022) 70px 128px);
}
.ft .wrap{position:relative;z-index:1;text-align:center}

.ft-brand{display:flex;flex-direction:column;align-items:center;gap:.2rem;margin-bottom:.25rem}
.ft-logo{width:30px;height:auto;display:block;filter:drop-shadow(0 3px 8px rgba(0,0,0,.25))}
.ft-bn{font-family:Impact,'Arial Black',sans-serif;font-size:.92rem;text-transform:uppercase;color:#fff;line-height:1;letter-spacing:.02em}
.ft-bn em{display:block;font-family:system-ui,sans-serif;font-style:normal;font-size:.46rem;font-weight:700;letter-spacing:.16em;color:var(--ouro-claro);margin-top:1px}

.ft-tag{font-size:.78rem;line-height:1.4;max-width:240px;margin:0 auto .35rem;color:rgba(255,255,255,.6);text-align:center}

.ft-soc{display:flex;justify-content:center;gap:.45rem;margin-bottom:.3rem}
.soc{
  width:30px;height:30px;border-radius:9px;
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.85);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .3s,transform .3s cubic-bezier(.34,1.56,.64,1),color .3s;
}
.soc:hover{background:var(--celeste);color:#fff;transform:translateY(-4px) scale(1.08)}
.soc svg{width:15px;height:15px}

.ft-block{margin-bottom:.25rem}
.ft-h{font-size:.68rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:.15rem}
.ft-links{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:.25rem .6rem;max-width:320px;margin:0 auto;text-align:center}
.ft-links li{font-size:.78rem}
.ft-links a{color:rgba(255,255,255,.55);transition:color .25s}
.ft-links a:hover{color:#fff}
.ft-links.contact-links{grid-template-columns:1fr;gap:.12rem}

.ft-contact-cols{display:grid;grid-template-columns:repeat(2,auto);gap:0 1rem;justify-content:center;align-items:start}

.ft-hr{border:none;border-top:1px solid rgba(255,255,255,.09);margin:.25rem 0 .2rem}
.ft-bot{display:flex;justify-content:center;gap:.5rem;font-size:.68rem;color:rgba(255,255,255,.42);text-align:center}

/* ═══════════════════════════════════════
   FAB WHATSAPP
═══════════════════════════════════════ */
.fab{
  position:fixed;bottom:1.2rem;right:1.2rem;z-index:300;
  width:58px;height:58px;border-radius:50%;
  background:var(--wp);display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 28px rgba(37,211,102,.5);
  opacity:0;visibility:hidden;transform:scale(.4) translateY(20px);
  transition:opacity .4s,visibility .4s,transform .5s cubic-bezier(.34,1.56,.64,1),background .25s;
}
.fab.on{opacity:1;visibility:visible;transform:scale(1) translateY(0)}
.fab:hover{background:var(--wp-deep);transform:scale(1.11)}
.fab svg{width:29px;height:29px;color:#fff}
.fab::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--wp);
  animation:fabRing 2.4s ease-out infinite;
}
@keyframes fabRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.65);opacity:0}}

/* ═══════════════════════════════════════
   REVEAL
═══════════════════════════════════════ */
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:translateY(0)}

@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}

/* ═══ Instagram CTA ═══ */
.btn-ig{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:.95rem 1.5rem;border-radius:999px;
  background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.55);
  color:#fff;font-weight:800;font-size:.95rem;letter-spacing:.01em;
  transition:background .3s,border-color .3s,transform .3s;
}
.btn-ig:hover{background:rgba(255,255,255,.2);border-color:#fff;transform:translateY(-3px)}
.btn-ig:active{transform:translateY(-1px)}
.btn-ig svg{width:19px;height:19px;flex-shrink:0}
.btn-ig-lt{background:#fff;border-color:#fff;color:var(--celeste-ink)}
.btn-ig-lt:hover{background:var(--celeste-wash);border-color:var(--celeste-wash);color:var(--celeste-ink)}

/* ═══ Correção mobile: header não pode estourar a largura da tela ═══ */
@media (max-width:440px){
  .hdr-in{gap:.5rem}
  .brand{min-width:0}
  .brand-txt{font-size:.95rem;min-width:0}
  .brand-txt em{font-size:.44rem;letter-spacing:.1em}
  .hdr-cta{padding-left:.85rem;padding-right:.85rem;font-size:.75rem}
}

/* ═══ Correção mobile: o mapa não pode ultrapassar a largura do container ═══ */
.map{width:100%;max-width:100%}


/* ═══════════════════════════════════════
   MOBILE — Hero compacto e legibilidade
   ═══════════════════════════════════════ */
@media (max-width:520px){
  /* Hero com mais presença na tela do mobile */
  .hero{min-height:95svh;padding:4.6rem 1rem 2.8rem}
  .hero-in{max-width:100%}
  .hero-logo{width:120px;height:120px;margin-bottom:1.1rem}
  .hero h1{font-size:clamp(3rem,14vw,4.6rem);margin-bottom:.05rem}
  .hero-sub{
    font-size:clamp(.86rem,3vw,.98rem);
    letter-spacing:.16em;
    margin:.75rem 0 1.6rem;
    line-height:1.45;
  }
  .hero-btns{gap:.7rem}
  .btn-wp,.btn-ig{min-height:52px;padding:.8rem 1.5rem;font-size:.92rem}
  .btn-ghost{min-height:52px;padding:.8rem 1.4rem}

  /* Seções mais compactas */
  .sec{padding:3.4rem 0}
  .sec-head{margin-bottom:2rem}

  /* Legibilidade dos textos pequenos */
  .sec-h2{font-size:clamp(1.7rem,6.5vw,2.3rem)}
  .sec-p{
    font-size:.98rem;
    line-height:1.66;
    max-width:100%;
  }
  .prod-nome{font-size:1.15rem}
  .prod-desc{font-size:.93rem;line-height:1.62;color:var(--text-2)}
  .prod-link{font-size:.82rem}
  .dif-t{font-size:1.08rem}
  .dif-d{font-size:.92rem;line-height:1.62;color:rgba(255,255,255,.88)}
  .cta-d{font-size:.98rem;line-height:1.66}
  .map-cta-tx{font-size:.86rem;line-height:1.5}
  .ft-tag{font-size:.87rem;line-height:1.64}

  .cta-tel{font-size:.88rem}

  /* Avaliações: caixa de pontuação ajustada */
  .score-box{padding:1.8rem 1.3rem}
  .score-n{font-size:4.4rem}
  .score-stars svg{width:23px;height:23px}
  .score-c{font-size:.92rem}
}


/* ═══════════════════════════════════════
   MOBILE EXTRA — fontes e footer horizontal
   ═══════════════════════════════════════ */
@media (max-width:520px){
  .eyebrow{font-size:.74rem}
  .prod-nome{font-size:1.15rem}
  .prod-tag{font-size:.66rem}
  .dif-t{font-size:1.08rem}
  .stat-lbl{font-size:.78rem;max-width:170px}
  .map-cta-tx{font-size:.86rem}
  .map-cta-tx b{font-size:.92rem}
  .map-cta-tx span{font-size:.8rem}
  .btn-map{font-size:.8rem;padding:.6rem 1.05rem}
  .score-c{font-size:.93rem}
  .score-src{font-size:.76rem}
  .ft-tag{font-size:.85rem;max-width:30ch;margin:0 auto .55rem}
  .ft-h{font-size:.72rem;margin-bottom:.3rem}
  .ft-links li{font-size:.88rem}
  .ft-hr{margin:.5rem 0 .4rem}
  .ft-bot{font-size:.75rem}

  /* Footer compacto no mobile */
  .ft{padding:1.2rem 0 5rem}
  .ft-brand{margin-bottom:.4rem}
  .ft-logo{width:44px}
  .ft-bn{font-size:1rem}
  .ft-soc{margin-bottom:.45rem}
  .ft-block{margin-bottom:.4rem}

}


/* ═══════════════════════════════════════
   SEÇÃO UNIFICADA (diferenciais + localização)
   ═══════════════════════════════════════ */
.uni-anchor{height:0;scroll-margin-top:90px}
.sec-uni .dif-grid{margin-bottom:2.6rem}
.sec-uni .map{
  width:100%;max-width:100%;margin:0 auto;
  box-shadow:0 20px 50px rgba(0,100,150,.22);
}

/* ═══════════════════════════════════════
   TIPOGRAFIA CENTRALIZADA
   ═══════════════════════════════════════ */
.sec-head,.sec-head .eyebrow,.sec-head .sec-p{text-align:center}
.sec-head .eyebrow{justify-content:center}
.sec-head .sec-p{margin-left:auto;margin-right:auto}
.prod-nome,.prod-desc,.prod-tag,.prod-body,.prod-foot{text-align:center}
.prod-foot,.prod-body{align-items:center}
.dif,.dif-t,.dif-d{text-align:center}
.dif{align-items:center}
.dif-ico{margin-left:auto;margin-right:auto}
.map-cta{flex-direction:column;align-items:center;text-align:center;gap:.7rem}
.map-cta-tx{text-align:center;align-items:center}
.cta-in,.cta-t,.cta-d{text-align:center}
.score-in,.score-c,.score-src{text-align:center}
.ft-bot{text-align:center;justify-content:center}

@media (max-width:520px){
  .sec-uni .dif-grid{margin-bottom:2rem;gap:.9rem}
  .sec-uni .map{margin-top:1rem}
  .sec-p,.dif-d,.cta-d{max-width:36ch;margin-left:auto;margin-right:auto}
}

/* Seção unificada — compactação no mobile */
@media (max-width:520px){
  .sec-uni .dif-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
  .sec-uni .dif{padding:1.05rem .8rem}
  .sec-uni .dif-t{font-size:.95rem}
  .sec-uni .dif-d{font-size:.82rem;line-height:1.52}
}



/* Rodapé — compactação final de espaçamentos verticais */
.ft-block{margin-bottom:.25rem}
.ft-h{margin-bottom:.15rem}
.ft-hr{margin:.25rem 0 .2rem}
@media (max-width:520px){
  .ft{padding:.55rem 0 .85rem}
  .ft-brand{gap:.15rem;margin-bottom:.15rem}
  .ft-logo{width:26px}
  .ft-bn{font-size:.86rem}
  .ft-bn em{font-size:.42rem;margin-top:1px}
  .ft-tag{font-size:.74rem;line-height:1.35;max-width:220px;margin-bottom:.25rem}
  .ft-soc{margin-bottom:.2rem;gap:.4rem}
  .soc{width:28px;height:28px;border-radius:8px}
  .soc svg{width:14px;height:14px}
  .ft-block{margin-bottom:.15rem}
  .ft-h{font-size:.64rem;margin-bottom:.1rem}
  .ft-links.contact-links{gap:.08rem}
  .ft-links.contact-links li{font-size:.72rem}
  .ft-contact-cols{gap:0 .55rem}
  .ft-hr{margin:.18rem 0 .15rem}
  .ft-bot{font-size:.64rem}
}
@media (max-width:360px){
  .ft-links.contact-links li{font-size:.66rem}
  .ft-contact-cols{gap:0 .4rem}
}