/* ============================================================
   BAÑOS BEBIDAS — Protótipo A — "POP GELADO"
   Bold, gráfico, cheio de energia. Amarelo + preto + branco.
   ============================================================ */

/* fontes servidas do próprio site (antes vinham do Google Fonts, que
   bloqueava a renderização com 2 conexões extras). Só o subset latin,
   que cobre todo o português. */
@font-face{font-family:'Abril Fatface';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/abril-fatface-400.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/barlow-400.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/barlow-400-italic.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/barlow-500.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-600.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/barlow-700.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/barlow-800.woff2') format('woff2');}

:root{
  --yellow:#EDCE3A;
  --yellow-dark:#D9B819;
  --black:#111111;
  --white:#ffffff;
  --cream:#FFF8E6;
  --teal:#157987; /* uso minimo, só detalhe */
  --font-title:'Abril Fatface', serif;
  --font-body:'Barlow', sans-serif;
  --container:1200px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  html{scroll-behavior:auto;}
}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--black);
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{font-family:var(--font-title);line-height:1.05;margin:0;}
p{margin:0 0 1rem;}
.wrap{max-width:var(--container);margin:0 auto;padding:0 24px;}
.section{position:relative;overflow:hidden;}
.lazy-fallback{filter:none;}

/* botões */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-weight:700;
  font-size:1rem;text-transform:uppercase;letter-spacing:.03em;
  padding:16px 30px;border-radius:999px;border:3px solid var(--black);
  cursor:pointer;transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
  white-space:nowrap;
}
.btn-primary{background:var(--yellow);color:var(--black);}
.btn-primary:hover{transform:translateY(-3px) scale(1.03);box-shadow:6px 8px 0 var(--black);}
.btn-outline{background:transparent;color:var(--white);border-color:var(--white);}
.btn-outline:hover{background:var(--white);color:var(--black);transform:translateY(-3px) scale(1.03);}
.btn-dark{background:var(--black);color:var(--yellow);border-color:var(--black);}
.btn-dark:hover{transform:translateY(-3px) scale(1.03);box-shadow:6px 8px 0 var(--yellow-dark);}

.eyebrow{
  font-family:var(--font-body);font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;font-size:.8rem;color:var(--yellow);
}
.eyebrow.dark{color:var(--black);}

/* ============================================================
   SEAMS — transições fluidas entre seções (sem linha reta)
   ============================================================ */
.seam{
  position:relative;height:120px;margin-top:-1px;z-index:5;pointer-events:none;
}
.seam svg{width:100%;height:100%;display:block;}

/* seam-gradient: transição em degradê (sem corte de cor), usada nas bordas de #numeros */
.seam-gradient{height:160px;}

/* ============================================================
   NAV
   ============================================================ */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:18px 0;transition:background .35s ease, padding .35s ease, box-shadow .35s ease;
}
.navbar .wrap{display:flex;align-items:center;justify-content:space-between;}
.navbar.scrolled{background:rgba(17,17,17,.92);backdrop-filter:blur(8px);padding:10px 0;box-shadow:0 6px 24px rgba(0,0,0,.25);}
.nav-logo img{height:40px;width:auto;filter:brightness(0) invert(1);}
.nav-links{display:flex;gap:34px;align-items:center;}
.nav-links a{
  font-weight:600;font-size:.92rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--white);position:relative;padding:4px 0;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:-2px;height:3px;width:0;background:var(--yellow);
  transition:width .3s ease;
}
.nav-links a:hover::after{width:100%;}
.nav-cta{
  background:var(--yellow);color:var(--black)!important;padding:12px 22px!important;
  border-radius:999px;font-weight:700!important;
}
.nav-cta::after{display:none;}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;z-index:1001;}
.nav-toggle span{display:block;width:28px;height:3px;background:var(--white);margin:6px 0;border-radius:2px;transition:.3s;}

@media (max-width:860px){
  .nav-links{
    position:fixed;inset:0;background:var(--black);flex-direction:column;justify-content:center;
    gap:28px;transform:translateX(100%);transition:transform .4s ease;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{font-size:1.4rem;}
  .nav-toggle{display:block;}
  .nav-toggle.open span:nth-child(1){transform:translateY(9px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}

  /* BUG do menu ao rolar: .navbar.scrolled usa backdrop-filter, e qualquer
     backdrop-filter/filter/transform num ancestral vira "containing block"
     pra descendentes position:fixed. Como .nav-links é fixed só aqui no
     mobile, assim que rolava a página o menu fullscreen (inset:0) parava de
     se referir à viewport e passava a se referir só à caixinha do header
     (.navbar), encolhendo o menu e cortando logo/itens. Por isso só ficava
     certo bem no topo (antes de .scrolled ligar o blur). Desligando o
     blur aqui (só no mobile) o menu volta a cobrir a tela inteira em
     qualquer posição de scroll. Desktop não usa .nav-links fixed, então
     mantém o blur normalmente (regra base intocada). */
  .navbar.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;}
}

/* ============================================================
   1. HERO
   ============================================================ */
.hero{
  background:var(--black);color:var(--white);
  min-height:100vh;display:flex;align-items:center;
  padding:140px 0 90px;position:relative;
}
.hero-bg-dots{
  position:absolute;inset:0;opacity:.06;
  background-image:radial-gradient(var(--yellow) 2px, transparent 2px);
  background-size:26px 26px;pointer-events:none;
}
.hero-grid{
  display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;position:relative;z-index:2;
}
.hero-title{
  font-size:clamp(2.7rem, 7vw, 5.6rem);color:var(--yellow);letter-spacing:.01em;
  margin:18px 0 22px;
}
.hero-title span{display:block;}
/* o eyebrow "Distribuidora de bebidas em Campinas/SP" fica DENTRO do h1
   (SEO local) mas com a mesma cara de antes, quando era um span solto
   acima do título: mesma altura de linha e o mesmo respiro de 18px */
.hero-title .eyebrow{line-height:19px;margin:0 0 18px;}
.hero-title{margin-top:0;}
/* "em" é um caractere a mais que o antigo "·": no celular o espaçamento
   cai um pouco para continuar cabendo em uma linha só, como antes */
@media (max-width:480px){.hero-title .eyebrow{letter-spacing:.12em;}}
.hero-title .stroke{
  -webkit-text-stroke:3px var(--yellow);color:transparent;
}
@supports not (-webkit-text-stroke: 1px solid){
  .hero-title .stroke{color:var(--yellow);}
}
.hero-lead{max-width:460px;font-size:1.1rem;color:#e9e9e9;margin-bottom:34px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;}
/* .hero-phone era <span> (display:inline) sem margem no desktop — ficava
   colado/sobreposto embaixo dos botões. Agora é um bloco próprio
   (.hero-contact) com espaço de verdade acima, incluindo o horário. */
.hero-contact{display:flex;flex-direction:column;gap:6px;margin-top:30px;}
.hero-phone{display:block;font-weight:700;letter-spacing:.03em;font-size:1.05rem;color:var(--white);opacity:.9;}
.hero-hours{display:block;font-size:.85rem;color:#c9c9c9;opacity:.85;}

.hero-figure{position:relative;display:flex;justify-content:center;align-items:center;}
.hero-blob{
  position:absolute;width:min(760px,128%);aspect-ratio:1/1;background:var(--yellow);
  border-radius:62% 38% 57% 43%/45% 61% 39% 55%;
  animation:blobMove 9s ease-in-out infinite;
  z-index:1;
}
@keyframes blobMove{
  0%,100%{border-radius:62% 38% 57% 43%/45% 61% 39% 55%;}
  33%{border-radius:41% 59% 64% 36%/58% 42% 58% 42%;}
  66%{border-radius:55% 45% 35% 65%/37% 55% 45% 63%;}
}
.hero-caricatura-float{
  position:relative;z-index:2;width:min(440px,92%);
  animation:heroFloat 6s ease-in-out infinite;
}
.hero-caricatura{display:block;width:100%;height:auto;filter:drop-shadow(0 20px 30px rgba(0,0,0,.35));}
@keyframes heroFloat{
  0%,100%{transform:translateY(0) rotate(-1deg);}
  50%{transform:translateY(-16px) rotate(1deg);}
}
.hero-halftone{
  position:absolute;width:140px;height:140px;border-radius:50%;
  background-image:radial-gradient(var(--white) 2px, transparent 2px);
  background-size:12px 12px;opacity:.5;top:-10px;right:0;z-index:0;
}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;text-align:center;}
  .hero-lead{margin-left:auto;margin-right:auto;}
  .hero-actions{justify-content:center;}
  .hero-figure{order:-1;margin-bottom:10px;}
  .hero-contact{align-items:center;}
}

/* mobile (até 768px): reduz a figura (estava enorme) e dá espaço vertical
   próprio pro telefone e pro horário, que se sobrepunham aos botões. */
@media (max-width:768px){
  .hero-blob{width:min(290px,78%);}
  .hero-caricatura-float{width:min(190px,54%);}
  .hero-halftone{width:90px;height:90px;}
  .hero-figure{margin-bottom:6px;}
  /* mais respiro entre o bloco telefone+horário e os botões "Fazer pedido"/
     "Conhecer a Baños" no mobile, com uma linha fina separando os dois. */
  .hero-contact{
    margin-top:40px;padding-top:16px;position:relative;align-items:center;
  }
  .hero-contact::before{
    content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:52px;height:2px;background:rgba(255,255,255,.3);border-radius:2px;
  }
}

/* ============================================================
   2. NOSSA HISTÓRIA
   ============================================================ */
.historia{background:var(--cream);padding:40px 0 0;}
.historia-head{padding:48px 0 10px;text-align:center;}
.historia-head h2{font-size:clamp(2.4rem,5vw,3.6rem);color:var(--black);}
.historia-head .eyebrow{color:var(--teal);} /* único uso mínimo do petróleo, letras pequenas */

.historia-row{display:grid;grid-template-columns:1fr 1fr;gap:0;}
.historia-media{
  position:relative;height:100vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:70px 48px;
}
.historia-frame{position:relative;width:min(420px,78%);height:min(520px,58vh);transform:rotate(-1.6deg);}
.historia-frame::before{
  content:'';position:absolute;top:-22px;left:34px;width:62%;height:16px;background:var(--yellow);
  border-radius:9px;transform:rotate(-5deg);z-index:4;box-shadow:0 6px 14px rgba(0,0,0,.2);
}
.historia-frame .img-stack{
  position:absolute;inset:0;overflow:hidden;
  border-radius:14px 86px 14px 86px;
  box-shadow:
    18px 22px 0 0 var(--yellow),
    0 8px 0 0 var(--black),
    0 46px 80px -14px rgba(0,0,0,.5),
    0 16px 28px rgba(0,0,0,.3);
}
.historia-frame img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
}
.historia-frame img.is-active{opacity:1;}
.historia-frame .frame-ring{
  position:absolute;inset:14px;border:3px solid var(--black);border-radius:10px 70px 10px 70px;
  transform:rotate(2.2deg);z-index:3;pointer-events:none;
}
.historia-frame .badge-stamp{
  position:absolute;bottom:-18px;right:-30px;z-index:5;
  width:96px;height:96px;background:var(--yellow);border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;transform:rotate(-8deg);box-shadow:0 10px 24px rgba(0,0,0,.25), 0 0 0 4px var(--black);
}
.badge-stamp img{width:48px;height:auto;margin-bottom:3px;filter:none;}
.badge-stamp small{font-size:.5rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;line-height:1.1;}

/* Desktop: cada bloco de texto ocupa um "slot" de 100vh, centralizado
   dentro dele — e não mais o grupo inteiro centralizado com gap:55vh.
   Isso bate exatamente com a divisão do scroll que o GSAP já faz no JS
   (scrollTrigger de 'top top' a 'bottom bottom', dividido em n frações
   iguais = n*100vh, uma por imagem). Antes, o 1º bloco começava colado no
   topo (padding 60px) enquanto a imagem ficava centralizada nos primeiros
   100vh do pin — os textos ficavam visivelmente mais altos que as fotos.
   Com cada bloco em min-height:100vh, o texto correspondente também fica
   centralizado bem no meio da mesma janela de 100vh que a foto ocupa. */
.historia-text{padding:0 50px 0 60px;display:flex;flex-direction:column;gap:0;}
.historia-block{max-width:480px;min-height:100vh;display:flex;flex-direction:column;justify-content:center;}
.historia-block h3{font-size:1.9rem;color:var(--black);margin-bottom:16px;font-family:var(--font-title);}
.historia-block p{font-size:1.08rem;line-height:1.65;color:#2b2b2b;}
.historia-block-img{display:none;} /* só aparece no mobile, ver media query abaixo */

/* mobile (até 900px): o dono pediu explicitamente SEM nenhum efeito de
   imagem flutuando/grudando (nada de sticky/pin) — é pra ser uma sequência
   simples e linear, tudo no fluxo normal da página, rolando junto com o
   resto: imagem 1 -> texto 1 -> imagem 2 -> texto 2 -> imagem 3 -> texto 3.
   Por isso aqui a gente ESCONDE o .historia-media (o container sticky com
   crossfade usado só no desktop) e mostra uma <img> simples e estática
   dentro de cada .historia-block (ver historia-block-img no HTML) — nada
   de JS, nada de scroll listener, só imagem e texto empilhados normalmente. */
@media (max-width:900px){
  .historia-row{display:block;}
  .historia-media{display:none;}
  .historia-text{display:flex;flex-direction:column;gap:0;padding:0 20px 36px;}
  .historia-block{
    max-width:100%;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;
    padding:0 0 40px;margin-bottom:0;
  }
  .historia-block:last-child{padding-bottom:0;}
  .historia-block-img{
    display:block;width:100%;height:54vw;max-height:300px;object-fit:cover;
    border-radius:14px 54px 14px 54px;margin-bottom:20px;
    box-shadow:10px 12px 0 0 var(--yellow), 0 6px 0 0 var(--black);
  }
}

/* ============================================================
   3. CATÁLOGO — esteiras
   ============================================================ */
.catalogo{background:var(--white);padding:64px 0;}
.catalogo-head{text-align:center;margin-bottom:36px;}
.catalogo-head h2{font-size:clamp(2.4rem,5vw,3.6rem);}
.catalogo-head p{max-width:560px;margin:14px auto 0;color:#444;font-size:1.05rem;}

.esteira-block{margin-bottom:46px;}
.esteira-label{
  display:flex;align-items:center;gap:14px;margin:0 auto 20px;max-width:var(--container);padding:0 24px;
}
.esteira-label h3{font-family:var(--font-body);font-weight:800;font-size:1.3rem;text-transform:uppercase;letter-spacing:.03em;}
.esteira-label .dot{width:12px;height:12px;border-radius:50%;background:var(--yellow);border:2px solid var(--black);}
.esteira-label.alc .dot{background:var(--black);}

.marquee{
  width:100%;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;gap:28px;width:max-content;animation:marqueeScroll 52s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-track.reverse{animation-direction:reverse;animation-duration:58s;}
@keyframes marqueeScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

.brand-card{
  flex:0 0 auto;width:190px;height:128px;background:transparent;
  display:flex;align-items:center;justify-content:center;padding:16px;
  border:none;box-shadow:none;
  transition:transform .25s ease;
}
.brand-card:hover{
  transform:translateY(-4px) scale(1.05);
}
.brand-card img{width:auto;height:auto;max-height:84px;max-width:100%;object-fit:contain;mix-blend-mode:multiply;}

.catalogo-cta{text-align:center;margin-top:40px;}

@media (max-width:768px){
  /* logos grandes demais no mobile, cabia pouco na esteira — reduz o card
     e a imagem, e aperta o espaçamento, pra caber mais marcas visíveis ao
     mesmo tempo. Desktop (acima de 768px) mantém o tamanho original. */
  .marquee-track{gap:16px;}
  .brand-card{width:112px;height:86px;padding:10px;}
  .brand-card img{max-height:52px;}
}

/* ============================================================
   4. NÚMEROS — glassmorphism
   ============================================================ */
.numeros{
  position:relative;padding:85px 0;color:var(--white);
  background:linear-gradient(160deg, rgba(17,17,17,.88), rgba(17,17,17,.72)), url('../assets/fachada-numeros.webp') center/cover no-repeat;
}
.numeros::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(237,206,58,.18), transparent 55%);
}
/* as seams de cima/baixo (seam-gradient) terminam em preto sólido #111111,
   mas a seção em si mostra a foto crua logo ali — sem transição real, só
   a aparência de "corte". Esse fade escurece as bordas da própria seção até
   preto puro, continuando o degradê da seam de forma integrada. */
.numeros::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom, #111111 0%, transparent 22%, transparent 78%, #111111 100%);
}
.numeros-head{text-align:center;max-width:620px;margin:0 auto 42px;position:relative;z-index:2;}
.numeros-head h2{font-size:clamp(2.2rem,4.6vw,3.2rem);color:var(--white);}
.numeros-head p{color:#ddd;margin-top:12px;}

.glass-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;position:relative;z-index:2;margin-bottom:42px;}
.glass-card{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
  border-radius:22px;padding:38px 26px;text-align:center;position:relative;overflow:hidden;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 40px rgba(0,0,0,.25);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, border-color .35s ease;
}
.glass-card::after{
  content:'';position:absolute;inset:0;border-radius:22px;pointer-events:none;opacity:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(237,206,58,.28), transparent 62%);
  transition:opacity .35s ease;
}
.glass-card:hover{
  transform:translateY(-8px) scale(1.035);
  border-color:rgba(237,206,58,.55);
  box-shadow:0 28px 54px rgba(0,0,0,.35);
}
.glass-card:hover::after{opacity:1;}
.glass-card .num{font-family:var(--font-title);font-size:clamp(2.4rem,5vw,3.4rem);color:var(--yellow);display:block;position:relative;z-index:1;}
.glass-card .lbl{font-size:.92rem;text-transform:uppercase;letter-spacing:.04em;color:#f1f1f1;margin-top:8px;display:block;position:relative;z-index:1;}

.reels-row{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:24px;justify-content:center;position:relative;z-index:2;}
.reel-card{
  aspect-ratio:9/16;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.25);
  border-radius:20px;backdrop-filter:blur(10px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;color:#eee;position:relative;overflow:hidden;
}
.reel-card .play{
  width:52px;height:52px;border-radius:50%;background:var(--yellow);color:var(--black);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
.reel-card small{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;opacity:.8;text-align:center;padding:0 10px;}

/* .reel-embed: o embed oficial do Instagram vem dentro de um iframe de
   outro domínio — não dá pra "editar" o que tem lá dentro (cabeçalho de
   perfil, barra de curtir/comentar), só cortar visualmente por fora com
   overflow:hidden. BUG CORRIGIDO: um max-height FIXO em px (calibrado pro
   card de 300px do desktop) não cortava nada no mobile, porque lá o grid
   encolhe o card (card mais estreito = vídeo mais baixo, já que o vídeo
   escala com a largura), então vídeo+link ficavam MENORES que o max-height
   fixo e a barra de like/comentário reaparecia por baixo. Trocado pelo
   truque clássico de "altura responsiva": height:0 + padding-top em % (que
   o CSS calcula sobre a LARGURA do próprio elemento) cria uma caixa cuja
   altura visível é sempre proporcional à largura real do card, em
   QUALQUER tamanho de tela — ~117% da largura (proporção do vídeo) + 41px
   fixos (a linha do link, que não escala). O cabeçalho continua escondido
   com o iframe deslocado pra cima (top:-80px), agora via position:absolute
   pra não interferir no cálculo de altura do height:0. Valores ESTIMADOS a
   partir de um print real — conferir visualmente em desktop E mobile. */
.reel-card.reel-embed{
  aspect-ratio:auto;padding:0;background:rgba(0,0,0,.25);
  height:0;padding-top:calc(117.4% + 26px);position:relative;
}
.reel-card.reel-embed .instagram-media{
  position:absolute;top:-80px;left:0;right:0;
  width:100% !important;min-width:0 !important;border-radius:20px;
}
/* placeholder escuro enquanto o embed monta: o Instagram cria o iframe com
   fundo branco inline, que piscava antes da capa chegar */
.reel-card.reel-embed iframe{border-radius:20px;background:#111 !important;}

@media (max-width:860px){
  .glass-grid{grid-template-columns:1fr;}
}

/* ============================================================
   5. DIFERENCIAIS — stepper/tabs
   ============================================================ */
.diferenciais{background:var(--yellow);padding:72px 0;}
.diferenciais-head{text-align:center;max-width:620px;margin:0 auto 38px;}
.diferenciais-head h2{font-size:clamp(2.2rem,4.6vw,3.2rem);color:var(--black);}
.diferenciais-head p{color:#1c1c1c;margin-top:12px;}

.stepper{display:grid;grid-template-columns:.9fr 1.3fr;gap:50px;align-items:center;}
.stepper-nav{display:flex;flex-direction:column;gap:14px;}
.step-btn{
  display:flex;align-items:center;gap:16px;background:transparent;border:3px solid var(--black);
  border-radius:999px;padding:16px 24px;cursor:pointer;font-family:var(--font-body);
  font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:.95rem;color:var(--black);
  transition:background .25s, color .25s, transform .25s;text-align:left;
}
.step-btn .step-num{
  width:34px;height:34px;border-radius:50%;background:var(--black);color:var(--yellow);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-title);flex:0 0 auto;
}
.step-btn.active{background:var(--black);color:var(--yellow);transform:translateX(8px);}
.step-btn.active .step-num{background:var(--yellow);color:var(--black);}
.step-btn:hover{transform:translateX(4px);}

.stepper-panel{
  background:var(--black);border-radius:28px;padding:48px;min-height:360px;position:relative;overflow:hidden;
  color:var(--white);
}
.step-content{display:none;grid-template-columns:1fr 1fr;gap:30px;align-items:center;}
.step-content.active{display:grid;}
.step-content h3{color:var(--yellow);font-size:2rem;margin-bottom:16px;}
.step-content p{color:#e4e4e4;font-size:1.05rem;line-height:1.6;}
.step-visual{
  aspect-ratio:1/1;border-radius:20px;background:var(--yellow);display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.step-visual img{width:100%;height:100%;object-fit:cover;}
.step-visual .icon-fallback{font-size:3.4rem;}

@media (max-width:860px){
  .stepper{grid-template-columns:1fr;}
  .stepper-nav{flex-direction:row;flex-wrap:wrap;}
  .step-btn{flex:1 1 46%;justify-content:center;}
  .step-content{grid-template-columns:1fr;}
  .step-content .step-visual{order:-1;max-width:240px;margin:0 auto;}
}

/* ============================================================
   6. ÁGUA / ACQUA NOVA — vídeo em loop + overlay de marca
   ============================================================ */
.agua{
  background:var(--black);color:var(--white);
  min-height:92vh;display:flex;align-items:center;
  padding:120px 0;position:relative;overflow:hidden;
}
.agua-media{position:absolute;inset:0;z-index:0;}
.agua-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(1.15) brightness(.82) contrast(1.05);
}
.agua-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(17,17,17,.92) 0%, rgba(17,17,17,.55) 42%, rgba(17,17,17,.2) 70%, rgba(237,206,58,.22) 100%),
    linear-gradient(180deg, rgba(17,17,17,.25) 0%, rgba(17,17,17,.15) 40%, rgba(17,17,17,.75) 100%);
}
.agua-noise{
  position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;pointer-events:none;
  background-image:radial-gradient(var(--white) 1px, transparent 1px);
  background-size:4px 4px;
}

.agua-content{position:relative;z-index:2;}
.agua-copy{max-width:580px;}
.agua-copy .eyebrow{color:var(--yellow);}
.agua-copy h2{font-size:clamp(2.6rem,6vw,4.4rem);margin:16px 0 20px;color:var(--white);}
.agua-copy p{color:#e8e8e8;font-size:1.12rem;line-height:1.65;text-shadow:0 2px 12px rgba(0,0,0,.4);}
.agua-copy small{display:block;margin-top:16px;color:var(--yellow);font-style:italic;opacity:.95;}

.agua-ph{
  display:inline-flex;align-items:center;gap:16px;margin-top:26px;padding:16px 26px;
  border-radius:20px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 18px 36px rgba(0,0,0,.3);
}
.agua-ph-num{font-family:var(--font-title);font-size:2.6rem;color:var(--yellow);line-height:1;}
.agua-ph-lbl{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:#f1f1f1;line-height:1.4;}

@media (max-width:900px){
  .agua{min-height:72vh;padding:90px 0;}
  .agua-copy{max-width:100%;text-align:center;margin:0 auto;}
  .agua-ph{margin-left:auto;margin-right:auto;}
}

/* ============================================================
   7. PEÇA JÁ — CTA final
   ============================================================ */
.cta-final{
  background:var(--yellow);padding:78px 0;text-align:center;position:relative;overflow:hidden;
}
.cta-final h2{
  font-size:clamp(2.8rem,8vw,5.4rem);color:var(--black);line-height:1;margin-bottom:18px;
}
.cta-final p{font-size:1.15rem;color:#1c1c1c;max-width:520px;margin:0 auto 34px;}
.cta-final .btn-whats{
  background:var(--black);color:var(--yellow);border-color:var(--black);font-size:1.1rem;padding:20px 40px;
  position:relative;overflow:hidden;
}
.btn-whats-icon{width:24px;height:24px;fill:var(--yellow);flex:0 0 auto;}
.cta-final .btn-whats::before{
  content:'';position:absolute;inset:0;border-radius:999px;border:3px solid var(--black);
  animation:pulseRing 2.2s ease-out infinite;
}
.cta-final .btn-whats::after{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(120deg, transparent, rgba(237,206,58,.5), transparent);
  transform:skewX(-20deg);animation:ctaSheen 3.4s ease-in-out infinite;pointer-events:none;
}
@keyframes ctaSheen{
  0%{left:-60%;}
  55%{left:130%;}
  100%{left:130%;}
}
@keyframes pulseRing{
  0%{box-shadow:0 0 0 0 rgba(17,17,17,.35);}
  100%{box-shadow:0 0 0 22px rgba(17,17,17,0);}
}
.cta-final .phone-big{display:block;margin-top:26px;font-family:var(--font-title);font-size:1.6rem;color:var(--black);}
.cta-blob{position:absolute;border-radius:50%;background:rgba(17,17,17,.06);}
.cta-blob.b1{width:260px;height:260px;top:-80px;left:-80px;}
.cta-blob.b2{width:180px;height:180px;bottom:-60px;right:-40px;}

/* ============================================================
   8. BLOG
   ============================================================ */
.blog{background:var(--cream);padding:72px 0;}
.blog-head{text-align:center;max-width:600px;margin:0 auto 36px;}
.blog-head h2{font-size:clamp(2.2rem,4.6vw,3.2rem);}
.blog-head p{color:#444;margin-top:12px;}

.blog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.blog-card{
  background:var(--white);border-radius:20px;overflow:hidden;border:2px solid var(--black);
  display:flex;flex-direction:column;transition:transform .25s, box-shadow .25s;
}
.blog-card:hover{transform:translateY(-8px);box-shadow:8px 10px 0 var(--black);}
.blog-thumb{height:140px;display:flex;align-items:center;justify-content:center;font-size:2.4rem;background:var(--yellow);}
.blog-thumb-img{padding:0;overflow:hidden;}
.blog-thumb-img img{width:100%;height:100%;object-fit:cover;}
.blog-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1;}
.blog-date{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--teal);font-weight:700;}
.blog-body h3{font-family:var(--font-body);font-weight:800;font-size:1.08rem;line-height:1.3;}
.blog-body p{font-size:.92rem;color:#555;flex:1;}
.blog-more{font-weight:700;text-transform:uppercase;font-size:.78rem;letter-spacing:.04em;color:var(--black);
  display:inline-flex;align-items:center;gap:6px;}
.blog-more:hover{color:var(--teal);}

@media (max-width:1000px){.blog-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.blog-grid{grid-template-columns:1fr;}}

/* ============================================================
   9. MAPA
   ============================================================ */
.mapa{background:var(--black);color:var(--white);padding:72px 0;}
.mapa-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.mapa-copy .eyebrow{color:var(--yellow);}
.mapa-copy h2{color:var(--white);font-size:clamp(2.2rem,4.6vw,3.2rem);margin:14px 0 22px;}
.mapa-info{display:flex;gap:16px;margin-bottom:20px;align-items:flex-start;}
.mapa-info .ic{
  width:44px;height:44px;border-radius:50%;background:var(--yellow);color:var(--black);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:1.1rem;
}
.mapa-info strong{display:block;margin-bottom:4px;}
.mapa-info p{margin:0;color:#ccc;}
.mapa-frame{border-radius:24px;overflow:hidden;border:4px solid var(--yellow);aspect-ratio:4/3;}
.mapa-frame iframe{width:100%;height:100%;border:0;}

@media (max-width:900px){.mapa-grid{grid-template-columns:1fr;}}

/* ============================================================
   10. RODAPÉ
   ============================================================ */
.footer{background:var(--black);color:var(--white);padding:70px 0 30px;}
.footer-top{display:flex;justify-content:center;margin-bottom:50px;}
.footer-top img{height:70px;width:auto;filter:brightness(0) invert(1);}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12);}
.footer-col h2{font-family:var(--font-body);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.95rem;color:var(--yellow);margin-bottom:16px;}
.footer-col p{color:#ccc;font-size:.95rem;}
.footer-col ul li{margin-bottom:10px;color:#ccc;font-size:.95rem;}
.footer-col ul li a:hover{color:var(--yellow);}
.footer-phone{font-family:var(--font-title);font-size:1.6rem;color:var(--yellow);margin-top:10px;display:block;}
.footer-social{display:flex;gap:14px;margin-top:18px;}
.footer-social a{
  width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;transition:background .25s, transform .25s;
}
.footer-social a:hover{background:var(--yellow);transform:translateY(-3px);}
.footer-social svg{width:20px;height:20px;fill:var(--white);}
.footer-social a:hover svg{fill:var(--black);}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:24px;font-size:.82rem;color:#999;}

@media (max-width:860px){
  .footer-grid{grid-template-columns:1fr;gap:30px;text-align:left;}
}

/* reveal utility usado pelo GSAP (estado inicial via JS/CSS fallback) */
.reveal{opacity:0;transform:translateY(30px);}
.reveal.in{opacity:1;transform:none;}

/* ============================================================
   REDES SOCIAIS FLUTUANTES — fixo em todas as páginas
   ============================================================ */
.social-float{
  position:fixed;right:28px;bottom:28px;z-index:900;
  display:flex;flex-direction:column;align-items:flex-end;gap:16px;
}
.whats-float,.insta-float{position:relative;display:flex;align-items:center;justify-content:flex-end;}
.insta-float a{
  position:relative;z-index:2;
  width:60px;height:60px;border-radius:50%;
  background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  border:3px solid var(--black);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,.3);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.insta-float a:hover{transform:scale(1.08);box-shadow:0 14px 30px rgba(0,0,0,.35);}
.insta-float-icon{width:28px;height:28px;position:relative;z-index:1;}
.whats-float a{
  position:relative;z-index:2;
  width:60px;height:60px;border-radius:50%;
  background:#25D366;border:3px solid var(--black);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,.3);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.whats-float a::before{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  box-shadow:0 0 0 0 rgba(37,211,102,.55);
  animation:whatsFloatPulse 2.4s ease-out infinite;
  pointer-events:none;
}
.whats-float a:hover{transform:scale(1.08);box-shadow:0 14px 30px rgba(0,0,0,.35);}
.whats-float-icon{width:30px;height:30px;fill:#fff;position:relative;z-index:1;}
@keyframes whatsFloatPulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.55);}
  70%{box-shadow:0 0 0 18px rgba(37,211,102,0);}
  100%{box-shadow:0 0 0 18px rgba(37,211,102,0);}
}
.whats-float-label{
  position:absolute;right:76px;bottom:16px;
  background:var(--black);color:var(--yellow);font-weight:700;font-size:.85rem;
  white-space:nowrap;padding:10px 18px;border-radius:999px;
  opacity:0;transform:translateX(10px);pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.whats-float:hover .whats-float-label,.insta-float:hover .whats-float-label{opacity:1;transform:translateX(0);}

@media (max-width:600px){
  .social-float{right:16px;bottom:16px;gap:12px;}
  .whats-float a,.insta-float a{width:52px;height:52px;}
  .whats-float-icon{width:26px;height:26px;}
  .insta-float-icon{width:24px;height:24px;}
  .whats-float-label{display:none;}
}

/* ============================================================
   CATALOGO.HTML — página completa de marcas
   ============================================================ */
.cat-hero{
  background:var(--black);color:var(--white);padding:160px 0 80px;text-align:center;position:relative;overflow:hidden;
}
.cat-hero h1{font-size:clamp(2.6rem,7vw,4.6rem);color:var(--yellow);margin:16px 0 14px;}
.cat-hero p{max-width:560px;margin:0 auto;color:#ddd;font-size:1.05rem;}
.cat-hero .back-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:28px;color:var(--yellow);font-weight:700;
  text-transform:uppercase;font-size:.82rem;letter-spacing:.04em;
}

.cat-nav{
  position:sticky;top:60px;z-index:50;background:var(--white);border-bottom:2px solid var(--black);
  padding:14px 0;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  transition:top .35s ease;
}
.cat-nav a{
  font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  padding:9px 18px;border-radius:999px;border:2px solid var(--black);color:var(--black);
  transition:background .2s, color .2s;
}
.cat-nav a:hover, .cat-nav a.active{background:var(--black);color:var(--yellow);}

.cat-body{background:var(--cream);padding:70px 0;}
.cat-section{margin-bottom:70px;}
.cat-section-head{display:flex;align-items:baseline;gap:16px;margin-bottom:26px;}
.cat-section-head h2{font-size:clamp(1.8rem,3.6vw,2.4rem);}
.cat-section-head span{font-size:.85rem;color:#666;text-transform:uppercase;letter-spacing:.04em;}

.cat-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;
}
.cat-item{
  background:var(--white);border-radius:16px;border:2px solid rgba(17,17,17,.1);
  padding:18px;display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.cat-item:hover{transform:translateY(-5px);box-shadow:6px 8px 0 var(--black);border-color:var(--black);}
.cat-item img{height:70px;width:auto;object-fit:contain;mix-blend-mode:multiply;}
.cat-item span{font-size:.8rem;font-weight:600;text-align:center;color:#333;}

.cat-cta{
  background:var(--yellow);border-radius:28px;padding:50px 30px;text-align:center;margin-top:10px;
}
.cat-cta h3{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:12px;}
.cat-cta p{color:#1c1c1c;margin-bottom:24px;}

@media (max-width:600px){
  .cat-nav{position:static;}
  .cat-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
}