/* =========================================================
   MÍDIA FLEX — LP de Conversão (Google Ads)
   Paleta: branco / laranja / amarelo — títulos em preto com destaque
   ========================================================= */

:root{
  --preto:        #17130E;
  --preto-suave:  #3A342C;
  --branco:       #FFFFFF;
  --creme:        #FFF9F1;
  --creme-2:      #FFF2DD;
  --laranja:      #FF6A13;
  --laranja-esc:  #E0530A;
  --amarelo:      #FFC933;
  --amarelo-esc:  #F2AE00;
  --linha:        #F0E4D3;
  --sombra:       0 14px 34px rgba(23,19,14,.10);
  --sombra-forte: 0 20px 46px rgba(224,83,10,.28);
  --raio: 14px;
  --wpp: #22C55E;
  --wpp-esc: #16A34A;
}

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

body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:var(--preto);
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
section{ position:relative; }

.container{
  width:100%;
  max-width:1160px;
  margin:0 auto;
  padding:0 24px;
}

h1,h2,h3{
  font-family:'Anton', sans-serif;
  font-weight:400;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--preto);
  margin:0;
}

h1{ font-size:clamp(2.3rem, 5.2vw, 3.9rem); line-height:1.25; }
h2{ font-size:clamp(1.7rem, 3.4vw, 2.5rem); line-height:1.12; }
h3{ font-size:1.15rem; letter-spacing:.2px; }

p{ margin:0; }

.marca{
  position:relative;
  white-space:normal;
  z-index:0;
}
.marca::after{
  content:"";
  position:absolute;
  left:-4px; right:-6px; bottom:.06em; height:.36em;
  background:var(--amarelo);
  z-index:-1;
  transform:rotate(-1deg);
  border-radius:3px 8px 4px 9px;
}
.marca.laranja::after{ background:var(--laranja); opacity:.9; }

/* Remove o destaque amarelo apenas no título principal do topo (hero) */
.hero h1 .marca::after{ display:none; }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:.82rem;
  color:var(--laranja-esc);
  background:var(--creme-2);
  border:1px solid var(--amarelo-esc);
  padding:6px 14px;
  border-radius:999px;
}
.eyebrow svg{ width:14px; height:14px; }

.sub{ color:var(--preto-suave); font-size:1.05rem; max-width:56ch; }

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:700;
  font-size:1rem;
  padding:16px 28px;
  border-radius:10px;
  border:2px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn svg{ width:20px; height:20px; flex:none; }
.btn:active{ transform:translateY(1px); }

.btn-laranja{
  background:var(--laranja);
  color:var(--branco);
  box-shadow:var(--sombra-forte);
}
.btn-laranja:hover{ background:var(--laranja-esc); transform:translateY(-2px); }

.btn-preto{
  background:var(--preto);
  color:var(--branco);
}
.btn-preto:hover{ transform:translateY(-2px); background:#000; }

.btn-outline{
  background:transparent;
  color:var(--preto);
  border-color:var(--preto);
}
.btn-outline:hover{ background:var(--preto); color:var(--branco); }

.btn-wpp{
  background:var(--wpp);
  color:var(--branco);
  box-shadow:0 14px 30px rgba(34,197,94,.30);
}
.btn-wpp:hover{ background:var(--wpp-esc); transform:translateY(-2px); }

.btn-full{ width:100%; }
.btn-lg{ padding:18px 30px; font-size:1.05rem; }

/* ---------- Header ---------- */
.topbar{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linha);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.logo{ display:flex; align-items:center; gap:10px; }
.logo-mark{
  width:40px; height:40px; border-radius:9px;
  background:linear-gradient(155deg,var(--laranja),var(--amarelo));
  display:flex; align-items:center; justify-content:center;
  color:var(--branco); flex:none;
}
.logo-mark svg{ width:22px; height:22px; }
.logo-txt{ line-height:1.1; }
.logo-txt strong{ display:block; font-family:'Anton'; letter-spacing:.4px; font-size:1.05rem; text-transform:uppercase; }
.logo-txt span{ display:block; font-size:.72rem; color:var(--preto-suave); font-weight:600; }

.topbar .btn{ padding:11px 18px; font-size:.92rem; }
.topbar-tel{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:.92rem; }

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(900px 420px at 88% -8%, var(--creme-2) 0%, transparent 60%),
    linear-gradient(180deg,var(--branco) 0%, var(--creme) 100%);
  overflow:hidden;
  padding:56px 0 40px;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:48px;
  align-items:center;
}
.hero-badges{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:22px;
}
.hero-badge{
  display:flex; align-items:center; gap:8px;
  background:var(--branco);
  border:1px solid var(--linha);
  padding:9px 14px; border-radius:999px;
  font-size:.85rem; font-weight:600; color:var(--preto-suave);
  box-shadow:0 6px 16px rgba(23,19,14,.05);
}
.hero-badge svg{ width:16px; height:16px; color:var(--laranja); flex:none; }

.hero-cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }

.hero-jumps{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.hero-jumps a{
  font-size:.82rem; font-weight:700; color:var(--preto);
  border-bottom:2px solid var(--amarelo);
  padding-bottom:2px;
}
.hero-jumps a:hover{ border-color:var(--laranja); color:var(--laranja-esc); }

/* Cartaz do herói: banner ondulando */
.hero-art{ position:relative; display:flex; justify-content:center; }
.flag-wrap{
  width:100%; max-width:460px;
  position:relative;
}
.flag{
  display:block;
  width:100%; height:auto;
}
.hero-pin{
  position:absolute; top:-8%; right:-2%;
  background:var(--amarelo); color:var(--preto);
  font-weight:800; font-size:.78rem;
  padding:8px 12px; border-radius:10px;
  transform:rotate(6deg);
  box-shadow:var(--sombra);
}

/* ---------- Faixa de confiança ---------- */
.faixa{
  background:var(--preto); color:var(--branco);
  padding:14px 0;
}
.faixa .container{
  display:flex; gap:34px; justify-content:center; flex-wrap:wrap;
}
.faixa-item{ display:flex; align-items:center; gap:8px; font-size:.86rem; font-weight:600; color:#F5EFE4; }
.faixa-item svg{ width:16px; height:16px; color:var(--amarelo); }

/* ---------- Seções genéricas ---------- */
.section{ padding:76px 0; }
.section-alt{ background:var(--creme); }
.section-head{ max-width:640px; margin:0 auto 44px; text-align:center; }
.section-head .eyebrow{ margin-bottom:16px; }
.section-head h2{ margin-top:10px; }
.section-head p{ margin-top:14px; }

.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Formulário de orçamento ---------- */
.orcamento{
  background:linear-gradient(135deg, var(--laranja) 0%, var(--laranja-esc) 100%);
  border-radius:24px;
  padding:44px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
  color:var(--branco);
  box-shadow:0 30px 60px rgba(224,83,10,.25);
}
.orcamento h2{ color:var(--branco); }
.orcamento .sub{ color:#FFE6D2; }
.orcamento-lista{ margin-top:22px; display:flex; flex-direction:column; gap:12px; }
.orcamento-lista li{ display:flex; gap:10px; align-items:flex-start; font-weight:600; font-size:.95rem; }
.orcamento-lista svg{ width:19px; height:19px; flex:none; color:var(--preto); background:var(--amarelo); border-radius:50%; padding:3px; margin-top:1px; }

.form-card{
  background:var(--branco);
  border-radius:16px;
  padding:28px;
  color:var(--preto);
  box-shadow:0 20px 40px rgba(0,0,0,.18);
}
.form-card h3{ margin-bottom:4px; }
.form-card .sub{ font-size:.88rem; margin-bottom:18px; color:var(--preto-suave); }
.campo{ margin-bottom:14px; }
.campo label{ display:block; font-size:.82rem; font-weight:700; margin-bottom:6px; }
.campo input, .campo select{
  width:100%; padding:12px 14px;
  border:1.5px solid var(--linha); border-radius:9px;
  font-family:inherit; font-size:.95rem; background:var(--creme);
  transition:border-color .15s ease;
}
.campo input:focus, .campo select:focus{ outline:none; border-color:var(--laranja); background:var(--branco); }
.form-msg{ font-size:.78rem; color:var(--preto-suave); margin-top:10px; text-align:center; }

/* ---------- Produtos ---------- */
.produtos-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.tag-card{
  position:relative;
  background:var(--branco);
  border:1.5px solid var(--linha);
  border-radius:16px;
  padding:26px 22px 24px;
  box-shadow:var(--sombra);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tag-card:hover{ transform:translateY(-6px); box-shadow:0 24px 44px rgba(23,19,14,.14); border-color:var(--amarelo-esc); }
.tag-hole{
  position:absolute; top:16px; right:16px;
  width:16px; height:16px; border-radius:50%;
  background:var(--creme); border:2px solid var(--linha);
}
.tag-icon{
  width:56px; height:56px; border-radius:13px;
  background:linear-gradient(155deg,var(--amarelo),var(--laranja));
  display:flex; align-items:center; justify-content:center;
  color:var(--branco); margin-bottom:18px;
}
.tag-icon svg{ width:28px; height:28px; }
/* Foto do produto: ocupa o topo do card de ponta a ponta */
.tag-foto{
  margin:-26px -22px 18px;
  border-radius:14px 14px 0 0;
  overflow:hidden;
  background:var(--branco);
  border-bottom:1px solid var(--linha);
}
.tag-foto img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:contain;
}
.tag-card h3{ margin-bottom:8px; }
.tag-card p{ font-size:.9rem; color:var(--preto-suave); }
.tag-preco{
  display:inline-block; margin-top:14px;
  font-family:'Anton'; font-size:1.15rem;
  color:var(--laranja-esc);
}
.tag-preco small{ font-family:'Inter'; font-weight:600; font-size:.7rem; color:var(--preto-suave); display:block; text-transform:none; }
.tag-badge{
  position:absolute; top:-10px; left:20px;
  background:var(--preto); color:var(--amarelo);
  font-size:.68rem; font-weight:800; letter-spacing:.4px;
  padding:5px 10px; border-radius:6px;
  text-transform:uppercase;
}

/* ---------- Promoção ---------- */
.promo{
  background:var(--preto);
  color:var(--branco);
  border-radius:22px;
  padding:44px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:32px;
  align-items:center;
}
.promo h2{ color:var(--branco); }
.promo .sub{ color:#D9D2C6; }
.promo-preco{
  background:var(--amarelo);
  color:var(--preto);
  border-radius:16px;
  padding:22px 30px;
  text-align:center;
  min-width:220px;
}
.promo-preco .de{ font-size:.85rem; text-decoration:line-through; opacity:.65; font-weight:700; }
.promo-preco .por{ font-family:'Anton'; font-size:2.4rem; line-height:1; margin:2px 0; }
.promo-preco .por sup{ font-size:1rem; top:-0.8em; }
.promo-preco .obs{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.3px; }
.promo-nota{ margin-top:18px; font-size:.85rem; color:#D9D2C6; }

/* ---------- Diferenciais ---------- */
.dif-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.dif-item{
  background:var(--branco);
  border:1.5px solid var(--linha);
  border-radius:16px;
  padding:26px 22px;
  text-align:left;
}
.dif-num{
  font-family:'Anton'; font-size:1.6rem; color:var(--laranja);
  display:block; margin-bottom:10px;
}
.dif-item h3{ margin-bottom:8px; font-size:1rem; }
.dif-item p{ font-size:.87rem; color:var(--preto-suave); }

/* ---------- Área de atendimento ---------- */
.area-grid{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center;
}
.area-mapa{
  background:linear-gradient(155deg,var(--creme-2),var(--branco));
  border:1.5px solid var(--linha);
  border-radius:20px;
  padding:26px;
  display:flex; align-items:center; justify-content:center;
}
.area-mapa svg{ width:100%; max-width:420px; height:auto; }
.area-lista{ margin-top:20px; display:flex; flex-direction:column; gap:14px; }
.area-lista li{ display:flex; gap:12px; align-items:flex-start; }
.area-lista svg{ width:22px; height:22px; color:var(--laranja); flex:none; margin-top:2px; }
.area-lista strong{ display:block; font-size:.98rem; }
.area-lista span{ font-size:.87rem; color:var(--preto-suave); }

/* ---------- Prova social ---------- */
.prova-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.prova-card{
  background:var(--branco); border:1.5px solid var(--linha);
  border-radius:16px; padding:24px;
}
.estrelas{ display:flex; gap:3px; color:var(--amarelo-esc); margin-bottom:12px; }
.estrelas svg{ width:16px; height:16px; }
.prova-card p{ font-size:.92rem; color:var(--preto-suave); }
.prova-autor{ margin-top:16px; display:flex; align-items:center; gap:10px; }
.prova-avatar{
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(155deg,var(--amarelo),var(--laranja));
  display:flex; align-items:center; justify-content:center;
  color:var(--branco); font-family:'Anton'; font-size:.9rem;
}
.prova-autor strong{ display:block; font-size:.85rem; }
.prova-autor span{ display:block; font-size:.75rem; color:var(--preto-suave); }
.prova-nota{
  text-align:center; margin-top:30px; font-size:.82rem; color:var(--preto-suave);
  border-top:1px dashed var(--linha); padding-top:20px;
}

/* ---------- FAQ ---------- */
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{
  background:var(--branco); border:1.5px solid var(--linha); border-radius:14px; overflow:hidden;
}
.faq-q{
  width:100%; background:none; border:none; text-align:left;
  padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-weight:700; font-size:.98rem; color:var(--preto);
}
.faq-q svg{ width:20px; height:20px; color:var(--laranja); flex:none; transition:transform .25s ease; }
.faq-item.aberto .faq-q svg{ transform:rotate(45deg); }
.faq-a{
  max-height:0; overflow:hidden; transition:max-height .3s ease;
  padding:0 22px;
}
.faq-a p{ padding-bottom:18px; font-size:.9rem; color:var(--preto-suave); }
.faq-item.aberto .faq-a{ max-height:220px; }

/* ---------- CTA final ---------- */
.cta-final{
  background:linear-gradient(120deg,var(--amarelo) 0%, var(--laranja) 100%);
  border-radius:24px;
  padding:52px 40px;
  text-align:center;
}
.cta-final h2{ color:var(--preto); }
.cta-final .sub{ color:#3A2A14; margin:14px auto 26px; }
.cta-final .btn-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- Footer ---------- */
footer{ background:var(--preto); color:#D9D2C6; padding:44px 0 26px; }
.footer-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:26px; }
.footer-brand strong{ color:var(--branco); font-family:'Anton'; font-size:1.1rem; letter-spacing:.3px; }
.footer-brand p{ font-size:.82rem; margin-top:8px; max-width:34ch; }
.footer-col h4{ color:var(--branco); font-size:.82rem; text-transform:uppercase; letter-spacing:.4px; margin-bottom:12px; }
.footer-col a, .footer-col span{ display:block; font-size:.86rem; margin-bottom:8px; color:#D9D2C6; }
.footer-col a:hover{ color:var(--amarelo); }
.footer-social{ display:flex; gap:10px; margin-top:6px; }
.footer-social a{
  width:34px; height:34px; border-radius:9px; background:#2A241C;
  display:flex; align-items:center; justify-content:center;
}
.footer-social svg{ width:16px; height:16px; }
.footer-bottom{
  margin-top:34px; padding-top:20px; border-top:1px solid #2A241C;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:.76rem; color:#8B8477;
}

/* ---------- Flutuantes ---------- */
.wpp-float{
  position:fixed; right:22px; bottom:22px; z-index:70;
  width:60px; height:60px; border-radius:50%;
  background:var(--wpp); color:var(--branco);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px rgba(34,197,94,.45);
}
.wpp-float svg{ width:30px; height:30px; }
.wpp-float::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--wpp); animation:pulso 2.2s ease-out infinite;
}
@keyframes pulso{
  0%{ transform:scale(1); opacity:.7; }
  100%{ transform:scale(1.9); opacity:0; }
}

.mobile-bar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:65;
  background:var(--branco); border-top:1px solid var(--linha);
  padding:10px 14px; box-shadow:0 -8px 24px rgba(0,0,0,.08);
  gap:10px;
}
.mobile-bar .btn{ flex:1; padding:13px 10px; font-size:.86rem; }

/* ---------- Responsivo ---------- */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-art{ order:-1; max-width:340px; margin:0 auto; }
  .produtos-grid{ grid-template-columns:repeat(2,1fr); }
  .dif-grid{ grid-template-columns:repeat(2,1fr); }
  .orcamento{ grid-template-columns:1fr; padding:30px; }
  .promo{ grid-template-columns:1fr; text-align:center; }
  .promo-preco{ margin:0 auto; }
  .area-grid{ grid-template-columns:1fr; }
  .prova-grid{ grid-template-columns:1fr; }
  .topbar-tel{ display:none; }
}
@media (max-width:640px){
  .section{ padding:56px 0; }
  .produtos-grid{ grid-template-columns:1fr; }
  .tag-foto img{ max-height:340px; }
  .dif-grid{ grid-template-columns:1fr; }
  .faixa .container{ gap:16px 22px; }
  .mobile-bar{ display:flex; }
  body{ padding-bottom:74px; }
  .wpp-float{ right:16px; bottom:88px; width:52px; height:52px; }
  .wpp-float svg{ width:26px; height:26px; }
  .cta-final{ padding:38px 22px; }
}

/* =========================================================
   ALTERAÇÕES — logo, carrossel de promoções, bandeira, contato
   ========================================================= */

/* Logo real no topo e no rodapé */
.logo img{ height:46px; width:auto; display:block; }
.footer-logo{ height:54px; width:auto; display:block; }
.topbar-tel a{ color:var(--preto); }
.topbar-tel a:hover{ color:var(--laranja-esc); }
@media (max-width:640px){ .logo img{ height:38px; } }

/* Título com bandeira do Brasil */
/* bandeira pequena, na mesma linha do texto, como um emoji */
.sem-quebra{ white-space:nowrap; }
.bandeira-br{
  display:inline-block;
  width:auto; height:.7em;
  vertical-align:.02em;
  margin-left:.1em;
  border-radius:2px;
  box-shadow:0 1px 3px rgba(23,19,14,.2);
}

/* Link de endereço na área de atendimento */
.area-lista span a{ color:var(--preto); font-weight:600; border-bottom:1.5px solid var(--amarelo); }
.area-lista span a:hover{ color:var(--laranja-esc); border-color:var(--laranja); }

/* ---------- Carrossel de promoções ----------
   Cada banner ocupa 100% da largura, proporção 2:1 (ex.: 1600 x 800 px). */
.carrossel{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  background:var(--preto);
  box-shadow:var(--sombra);
}
.carrossel-trilho{
  display:flex;
  transition:transform .55s cubic-bezier(.22,.7,.2,1);
  touch-action:pan-y;
}
.carrossel-slide{
  flex:0 0 100%;
  aspect-ratio:2 / 1;
  display:block;
  background:#2A241C;
}
.carrossel-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.carrossel-slide:focus-visible{ outline:3px solid var(--amarelo); outline-offset:-3px; }

.carrossel-seta{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  border:0; cursor:pointer;
  background:rgba(255,255,255,.92); color:var(--preto);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.carrossel-seta svg{ width:22px; height:22px; }
.carrossel-seta:hover{ background:var(--amarelo); }
.carrossel-seta:focus-visible{ outline:3px solid var(--laranja); outline-offset:2px; }
.carrossel-seta.anterior{ left:14px; }
.carrossel-seta.proximo{ right:14px; }

.carrossel-pontos{
  position:absolute; left:0; right:0; bottom:12px;
  display:flex; justify-content:center; gap:8px;
}
.carrossel-pontos button{
  width:10px; height:10px; padding:0; border-radius:999px; border:0; cursor:pointer;
  background:rgba(255,255,255,.55);
  transition:width .25s, background .25s;
}
.carrossel-pontos button[aria-current="true"]{ width:28px; background:var(--amarelo); }
.carrossel-pontos button:focus-visible{ outline:2px solid var(--laranja); outline-offset:2px; }

/* Com só 1 banner, setas e bolinhas somem */
.carrossel.unico .carrossel-seta,
.carrossel.unico .carrossel-pontos{ display:none; }

@media (max-width:640px){
  .carrossel{ border-radius:16px; }
  .carrossel-seta{ width:36px; height:36px; }
  .carrossel-seta svg{ width:18px; height:18px; }
  .carrossel-seta.anterior{ left:8px; }
  .carrossel-seta.proximo{ right:8px; }
  .carrossel-pontos{ bottom:8px; }
}
@media (prefers-reduced-motion: reduce){
  .carrossel-trilho{ transition:none; }
}

/* ícone do WhatsApp dentro dos botões */
.mobile-bar .btn-wpp .icone-wpp{ width:18px; height:18px; }