/* ══════════════════════════════════════════════════════════════════
   Plastix — BASE
   Tokens, reset e todos os componentes usados em mais de uma página:
   topo/menu, hero, marquee, cards, produtos, passos, depoimentos, FAQ,
   CTA final, rodapé, modal de orçamento e as animações de entrada.
   Cada página carrega este arquivo + o seu próprio (home.css etc).
   ══════════════════════════════════════════════════════════════════ */
/* ══ TOKENS — herdados do site (plastix-site-final-murillo/index.html) ══
   Página interna /copos-termicos que se comporta como LP: mesmo sistema visual,
   mas construída responsiva (tráfego pago = maioria mobile). */
:root{
  --verde:        #08944E;   /* verde escuro de texto */
  --verde-marca:  #05C275;
  --verde-eyebrow:#08694C;
  --escuro-1:     #012A1E;   /* dobra 4 do site */
  --escuro-2:     #024E36;   /* dobra 7 do site */
  --amarelo:      #F7B513;
  --amarelo-hl:   #FFCA18;   /* highlight em fundo escuro (padrão d7) */
  --laranja:      #F2542D;
  --creme:        #FBF6F1;   /* card da dobra 3 */
  --preto-fosco:  #2A2926;   /* headlines em fundo claro */
  --cinza-txt:    #5F5E5D;
  --rodape:       #161F1C;
  --font:  'Montserrat', system-ui, sans-serif;
  --pop:   'Poppins', system-ui, sans-serif;
  --saida: cubic-bezier(.16,1,.3,1);
  --raio:  18px;
}
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--pop); background:#FFFFFF; color:var(--preto-fosco);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; }
/* height:auto é obrigatório junto dos atributos width/height do HTML —
   sem ele o height="…" vira altura fixa e a imagem estica. Com ele o
   navegador ainda usa os atributos pra reservar espaço (segura o CLS). */
img{ display:block; max-width:100%; height:auto; }
a{ text-decoration:none; color:inherit; }
:where(a,button):focus-visible{ outline:3px solid var(--amarelo); outline-offset:3px; }

.wrap{ width:min(1200px, 92vw); margin-inline:auto; }

/* ══ BOTÃO PADRÃO DO SITE (.btn-verde) — rótulo BRANCO por decisão travada no site ══ */
.btn-verde{ display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  background:linear-gradient(180deg,#06CE7D 0%,#05C275 100%); color:#FFFFFF;
  border:0; border-radius:8px; cursor:pointer;
  box-shadow:0 14px 26px -8px rgb(3 78 47 / .40), inset 0 2px 0 rgb(255 255 255 / .38);
  font-family:var(--pop); font-weight:500; font-size:1rem; line-height:1;
  padding:0 1.6em; height:51px; white-space:nowrap;
  transition:transform .18s var(--saida), box-shadow .22s var(--saida); }
.btn-verde:hover{ transform:translateY(-2px);
  box-shadow:0 18px 30px -8px rgb(3 78 47 / .46), inset 0 2px 0 rgb(255 255 255 / .38); }
.btn-out{ display:inline-flex; align-items:center; justify-content:center;
  height:51px; padding:0 1.6em; border-radius:8px; white-space:nowrap;
  font-family:var(--pop); font-weight:500; font-size:1rem; line-height:1;
  color:#FFFFFF; border:1.5px solid var(--verde-marca); background:rgb(5 194 117 / .10);
  transition:background-color .2s, transform .18s var(--saida); }
.btn-out:hover{ background:rgb(5 194 117 / .22); transform:translateY(-2px); }
.wa-ico{ width:1.25em; height:1.25em; flex:none; }

/* ══ EYEBROW padrão do site: tracinhos amarelo+laranja + tag verde ══ */
.eyebrow{ display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--font); font-weight:700; color:var(--verde-eyebrow);
  font-size:clamp(.72rem, .6rem + .4vw, .9rem); letter-spacing:.14em; text-transform:uppercase; }
.eyebrow .dash{ display:flex; gap:.32rem; }
.eyebrow .dash i{ display:block; width:18px; height:3px; border-radius:2px; }
.eyebrow .dash .y{ background:var(--amarelo); }
.eyebrow .dash .o{ background:var(--laranja); }
.eyebrow .dash .r{ background:var(--laranja); }
.eyebrow--claro{ color:#CFE3D8; }

/* headlines no padrão do site: Poppins 500, preto-fosco no claro / branco no escuro */
.titulo{ font-family:var(--pop); font-weight:500; color:var(--preto-fosco);
  font-size:clamp(1.7rem, 1.1rem + 2.6vw, 3rem); line-height:1.08; letter-spacing:-.015em;
  margin-top:.9rem; }
.titulo--claro{ color:#FFFFFF; }
.titulo .hl{ color:var(--amarelo-hl); }
.sub{ margin-top:.9rem; font-weight:400; color:var(--cinza-txt);
  font-size:clamp(.95rem, .85rem + .4vw, 1.1rem); line-height:1.55; }
.sub--claro{ color:rgba(255,255,255,.55); }

section{ padding:clamp(3.2rem, 2.2rem + 3vw, 5.5rem) 0; }

/* ══════════ TOPO — barra-cartão creme (padrão do site):
   logo | menu centralizado | CTA. Mesma largura do .wrap ══════════ */
.topo{ position:absolute; z-index:20; top:18px;
  left:0; right:0; width:min(1200px, 92vw); margin-inline:auto;  /* mesma largura do .wrap */
  height:64px; display:grid; grid-template-columns:auto 1fr auto auto; align-items:center;
  gap:.7rem; padding-inline:22px; background:#F7F5F4; border-radius:14px;
  box-shadow:0 10px 24px rgb(40 16 2 / .18); }
.topo img{ height:34px; width:auto; }
.topo .btn-verde{ height:44px; font-size:.92rem; }
/* CTA da Loja: vazado (fundo claro do topo, não dá pra usar o .btn-out
   branco de hero escuro) — mesma caixa dos outros botões do topo. */
.topo .btn-loja{ display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  height:44px; padding:0 1.2em; border-radius:8px; white-space:nowrap;
  font-family:var(--pop); font-weight:500; font-size:.92rem; line-height:1;
  color:var(--preto-fosco); border:1.5px solid var(--verde-marca); background:transparent;
  transition:background-color .2s, transform .18s var(--saida); }
.topo .btn-loja:hover{ background:rgb(5 194 117 / .10); transform:translateY(-2px); }
.topo .btn-loja svg{ width:1.1em; height:1.1em; flex:none; }
.menu{ justify-self:center; display:flex; align-items:center; gap:clamp(1.2rem, 1rem + 1.4vw, 2.6rem);
  list-style:none; }
.menu a{ font-family:var(--pop); font-weight:500; font-size:.95rem; color:var(--preto-fosco);
  white-space:nowrap; transition:color .18s; }
.menu a:hover{ color:var(--verde); }
/* ══ Menu hambúrguer (só mobile) ══ */
.menu-burger{ display:none; flex-direction:column; justify-content:center;
  align-items:center; gap:5px; width:34px; height:34px; padding:0;
  border:0; background:transparent; cursor:pointer; flex:none; }
.menu-burger span{ display:block; width:22px; height:2px; border-radius:2px;
  background:var(--preto-fosco);
  transition:transform .22s var(--saida), opacity .18s; }
.menu-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.menu-mobile{ position:absolute; z-index:25; top:calc(100% + 10px); left:0; right:0;
  max-height:calc(100vh - 100px); overflow-y:auto;
  background:#FFFFFF; border:1px solid rgb(20 10 2 / .08); border-radius:14px;
  box-shadow:0 20px 40px -14px rgb(20 10 2 / .3); padding:.6rem; }
.menu-mobile[hidden]{ display:none; }
.menu-mobile ul{ list-style:none; margin:0; padding:0; display:grid; gap:.15rem; }
.menu-mobile > ul > li > a{ display:block; padding:.75rem .8rem; border-radius:9px;
  font-family:var(--pop); font-weight:500; font-size:1rem; color:var(--preto-fosco); }
.menu-mobile > ul > li > a:hover,
.menu-mobile > ul > li > a.ativo{ background:var(--creme); color:var(--verde); }
.menu-mobile__titulo{ display:block; padding:.75rem .8rem .2rem;
  font-family:var(--font); font-weight:700; font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--cinza-txt); }
.menu-mobile__grupo ul{ padding-left:.5rem; }
.menu-mobile__grupo ul a{ font-size:.92rem; }
.menu-mobile .menu__flag{ margin-left:.4rem; }

/* o <nav> desktop sai do grid, senão o CTA cai pra 2ª linha.
   Loja Online some junto (entra na lista do menu mobile). */
@media (max-width:900px){
  .topo nav.menu-desktop{ display:none; }
  .topo .btn-loja{ display:none; }
  .topo{ grid-template-columns:auto 1fr auto auto; justify-content:normal;
    padding-inline:22px 10px; }
  .topo .btn-verde{ height:38px; font-size:.78rem; padding:0 .75em; gap:.4em; }
  .menu-burger{ display:flex; margin-right:-4px; }
}
@media (max-width:560px){
  .topo{ padding-inline:14px 6px; }
  .topo .btn-verde{ font-size:.7rem; padding:0 1.2em; margin:0 auto; }
  .topo img{ height:26px; }
}

/* ══════════ HERO — composição do mockup hero-modelo.png:
   Esqueleto usado pela home e pelas internas: copy à esquerda, foto à
   direita, faixa opcional em ::before. Cada página põe o próprio fundo. */
.hero{ position:relative; overflow:hidden; isolation:isolate;
  background:var(--escuro-1);   /* cada página define a sua imagem de fundo */
  padding-top:clamp(6.5rem, 1rem + 4vw, 9rem); padding-bottom:0; }
/* isolation:isolate prende o z-index do #menu-mobile dentro do hero — sem
   isso ele pinta atrás da próxima seção da página. Com o menu aberto, é o
   .hero inteiro (a stacking context) que precisa subir, não só o painel. */
.hero--menu-aberto{ z-index:40; }
.hero::before{ display:none; content:''; position:absolute; z-index:3; left:0; right:0; bottom:-1px;
  aspect-ratio:1920 / 164; pointer-events:none;
  background:url('../img/bar-hero.webp') center bottom / 100% 100% no-repeat; }
.hero .wrap{ position:relative; z-index:1; display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(1rem, 2vw, 2.5rem); align-items:end; }
.hero__copy{ align-self:center; text-align:center; padding-bottom:clamp(3rem, 9vw, 11rem); }
/* só existe .titulo dentro do .hero__copy nas heroes sem lockup em imagem
   (hoje só /contato) — mais respiro no topo, pro fundo (bg-hero-transparent)
   cobrir mais caixa antes da faixa transparente do rodapé da imagem aparecer */
.hero__copy .titulo{ padding-top:clamp(1rem, 4vw, 3rem); }
/* ── CTA pulsante (hero e seção de orçamento) ──
   Halo verde-claro respirando atrás do botão. Só transform/opacity animam
   (roda no compositor, não repinta); o glow vive num ::before do wrapper
   pra não brigar com a box-shadow nem com o :hover do próprio .btn-verde. */
.pulso{ position:relative; display:inline-flex; }
.pulso::before{ content:''; position:absolute; inset:0; z-index:0;
  border-radius:10px; pointer-events:none;
  background:#4CFFA5; filter:blur(17px);   /* blur = o halo escapa da silhueta do botão */
  animation:pulsa 2.9s ease-in-out infinite; }
.pulso > .btn-verde{ position:relative; z-index:1;
  animation:cta-pulsa 2.9s ease-in-out infinite; }
/* o botão respira junto com o halo; no hover a animação sai de cena para
   o translateY(-2px) do :hover poder valer (animação vence transition) */
.pulso > .btn-verde:hover{ animation:none; }
@keyframes cta-pulsa{
  0%, 100%{ transform:scale(1);    }
  50%     { transform:scale(1.035); }
}
@media (prefers-reduced-motion:reduce){ .pulso > .btn-verde{ animation:none; } }
.hero__copy .pulso{ margin-top:clamp(1.4rem, 2.5vw, 2.6rem); }
@keyframes pulsa{
  0%, 100%{ transform:scale(1);    opacity:.30; }
  50%     { transform:scale(1.13); opacity:.72; }
}
@media (prefers-reduced-motion:reduce){
  .pulso::before{ animation:none; opacity:.6; }
}
/* micro-prova sob os CTAs do hero (lista de 3 benefícios) */
.feats{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:1.1rem 1.6rem; list-style:none; }
.feats li{ display:flex; align-items:center; gap:.6rem;
  color:rgba(255,255,255,.9); font-weight:400; font-size:.95rem; line-height:1.2; }
.feats svg{ width:30px; height:30px; flex:none; color:#E8951F; }

.hero__foto{ align-self:end; margin-bottom:4.5vw; }   /* base dos copos fica atrás da faixa */
.hero__foto img{ width:100%; max-width:949px; height:auto; margin-inline:auto; }
@media (max-width:820px){
  .hero{ padding-top:5.5rem; padding-bottom:3.5rem; }
  .hero .wrap{ grid-template-columns:1fr; }
  .hero__copy{ padding-bottom:1rem; }
  .hero__foto{ margin-bottom:6vw; }
}

/* ══════════ BARRA DE CREDIBILIDADE — marquee infinito ══════════
   Dois tracks idênticos lado a lado; ambos correm -100% da própria largura,
   então quando o 1º sai da tela o 2º já ocupou o lugar = loop sem emenda.
   O 2º é aria-hidden (é cópia visual, não conteúdo novo pro leitor de tela). */
.cred{ background:#FFFFFF; padding:4rem 0 0 0; }
.cred__marquee{ display:flex; overflow:hidden; user-select:none;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.cred__track{ flex:none; display:flex; align-items:center; gap:2.6rem; padding-right:2.6rem;
  animation:correr 42s linear infinite;
  will-change:transform; backface-visibility:hidden; }
.cred__marquee:hover .cred__track{ animation-play-state:paused; }
@keyframes correr{ to{ transform:translateX(-100%); } }
.cred__item{ display:flex; align-items:center; gap:.7rem; white-space:nowrap;
  font-weight:500; font-size:.92rem; color:var(--preto-fosco); }
.cred__item svg{ width:26px; height:26px; flex:none; color:var(--verde-marca); }
.cred__sep{ flex:none; width:7px; height:7px; rotate:45deg; border-radius:1px;
  background:var(--amarelo); opacity:.85; }
@media (prefers-reduced-motion:reduce){ .cred__track{ animation:none; } }

/* ══════════ CARDS GENÉRICOS (padrão creme da dobra 3) ══════════ */
.grid-cards{ margin-top:2.2rem; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.card{ position:relative; background:var(--creme); border:1px solid rgb(20 10 2 / .06);
  border-radius:var(--raio); padding:1.6rem 1.4rem;
  box-shadow:0 18px 34px -16px rgb(20 10 2 / .10), 0 4px 10px rgb(20 10 2 / .04); }
.card::before{ content:''; position:absolute; inset:5px; border-radius:13px;
  background:#FFFFFF; pointer-events:none; }
.card > *{ position:relative; z-index:1; }
.card__ico{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:rgb(5 194 117 / .10); margin-bottom:1rem; }
.card__ico svg{ width:26px; height:26px; color:var(--verde); }
.card h3{ font-weight:700; font-size:1.06rem; color:#211C18; }
.card p{ margin-top:.5rem; font-weight:400; color:var(--cinza-txt);
  font-size:.92rem; line-height:1.5; }

/* ══════════ MODELOS — cards de produto (padrão d3 do site) ══════════ */
.modelos{ background: var(--creme); margin-top: -180px; padding-top: 260px;}
@media (max-width:820px){
.modelos{ margin-top:-40px; padding-top:80px; }
}

.prod-grid{ margin-top:2.2rem; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.prod{ position:relative; background-color: #ffffff; border:1px solid rgb(20 10 2 / .06);
  border-radius:var(--raio); padding:1.3rem 1.3rem 1.65rem; display:flex; flex-direction:column;
  box-shadow:0 18px 34px -16px rgb(20 10 2 / .10), 0 4px 10px rgb(20 10 2 / .04); }
.prod::before{ content:''; position:absolute; inset:5px; border-radius:13px;
  pointer-events:none; }
.prod > *{ position:relative; z-index:1; }
.prod__img{ border-radius:10px; overflow:hidden; }
.prod__img img{ width:100%; height:auto; }
.prod__name{ display:flex; align-items:center; justify-content:center; gap:.5rem;
  margin-top:.9rem; font-weight:700; color:#211C18; font-size:1.05rem; }
.prod__desc{ margin-top:.3rem; text-align:center; font-weight:400;
  color:var(--cinza-txt); font-size:.88rem; line-height:1.35; }
.prod .btn-verde{ margin-top:1.35rem; height:44px; font-size:.92rem; }
/* o CTA do card tem dois rótulos no HTML: o longo vale no desktop, o curto
   ("Orçamento") entra só no mobile do #produtos — ver @media (max-width:820px) */
.prod__cta-curto{ display:none; }
.modelos__nota{ margin-top:1.4rem; text-align:center; font-size:.9rem;
  color:var(--cinza-txt); }
/* CTA único da seção (a vitrine de fotos não tem botão por card) */
.modelos__cta{ margin-top:1.6rem; text-align:center; }

/* ══════════ COMO FUNCIONA — barra de passos (padrão d5 do site) ══════════ */
.passos{ background:var(--creme); }
.passos__barra{ margin-top:2.2rem; background:#FFFFFF; border-radius:14px;
  box-shadow:0 12px 30px -8px rgb(20 30 26 / .20);
  display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap;
  padding:1.4rem 1.8rem; }
.passo{ display:flex; align-items:center; gap:.8rem; white-space:nowrap;
  font-weight:400; color:var(--preto-fosco); font-size:1rem; line-height:1.2; }
.passo svg{ width:34px; height:34px; flex:none; }
.passo b{ display:block; font-weight:700; font-size:.78rem; color:var(--verde);
  letter-spacing:.08em; text-transform:uppercase; }
.passos__barra .btn-verde{ margin-left:auto; }
@media (max-width:900px){
  .passos__barra{ flex-direction:column; align-items:flex-start; }
  .passos__barra .btn-verde{ margin-left:0; width:100%; }
}

/* ══════════ DEPOIMENTOS (padrão d7 do site) ══════════ */
.depo{ background:var(--escuro-2); border-top:1px solid rgb(255 255 255 / .07); }
.depo__grid{ margin-top:2.2rem; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.depo__card{ position:relative; overflow:hidden;
  background:rgba(255,255,255,.045); border:1px solid rgb(255 255 255 / .08);
  border-radius:16px; padding:1.7rem 1.7rem 1.5rem; display:flex; flex-direction:column; }
.depo__aspas{ position:absolute; top:.4rem; right:1.2rem;
  font-family:Georgia,'Times New Roman',serif; font-weight:700;
  font-size:3rem; line-height:1; color:rgb(255 202 24 / .45); }
.depo__stars{ color:var(--amarelo-hl); font-size:1.1rem; letter-spacing:2px; line-height:1; }
.depo__quando{ margin-top:1rem; color:#F6B27A; font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; }
.depo__texto{ margin-top:.7rem; color:#FFFFFF; font-size:.97rem; line-height:1.55;
  /* 5 linhas por max-height (e não line-clamp): line-clamp troca de valor
     de uma vez só, sem transição — a abertura ficava seca. */
  max-height:calc(1.55em * 5); overflow:hidden; position:relative;
  transition:max-height .5s cubic-bezier(.4, 0, .2, 1);
  font-weight:400; }
.depo__quem{ margin-top:auto; padding-top:1.7rem; display:flex; align-items:center;
  gap:.8rem; border-top:1px solid rgb(255 255 255 / .1); }
.depo__quem img{ width:42px; height:42px; border-radius:50%; object-fit:cover; }
.depo__quem strong{ display:block; color:#FFFFFF; font-size:.92rem; font-weight:700; }
.depo__quem span{ display:block; color:rgb(255 255 255 / .5); font-size:.78rem;
  margin-top:2px; }

/* ══════════ FAQ ══════════ */
.faq{ background:#FFFFFF; }
.faq__lista{ margin-top:2rem; display:grid; gap:12px; max-width:820px; }
.faq details{ background:var(--creme); border:1px solid rgb(20 10 2 / .06);
  border-radius:14px; overflow:hidden; }
.faq summary{ cursor:pointer; list-style:none; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; padding:1.1rem 1.3rem;
  font-weight:600; font-size:.98rem; color:#211C18; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; font-weight:500; font-size:1.4rem; line-height:1;
  color:var(--verde); transition:rotate .2s var(--saida); }
.faq details[open] summary::after{ rotate:45deg; }
.faq details p{ padding:0 1.3rem 1.2rem; font-weight:400; color:var(--cinza-txt);
  font-size:.93rem; line-height:1.6; }

/* ══════════ ORÇAMENTO — argumentos + CTA pulsante + foto de desejo ══════════ */
.orc{ background:var(--creme); }
.orc .wrap{ display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem, 3vw, 3.5rem); align-items:center; }
.orc__args{ margin-top:1.6rem; display:grid; gap:.9rem; list-style:none; }
.orc__args li{ display:flex; align-items:flex-start; gap:.65rem;
  font-weight:400; color:var(--preto-fosco); font-size:.98rem; line-height:1.5; }
.orc__args svg{ width:22px; height:22px; flex:none; color:var(--verde-marca);
  margin-top:2px; }
/* mesmo pulso do hero — o wrapper .pulso é compartilhado (ver regra .pulso abaixo) */
.orc .pulso{ margin-top:1.9rem; }
.orc__nota{ display:block; margin-top:1rem; font-size:.85rem; color:var(--cinza-txt); }
.orc__foto{ border-radius:var(--raio); overflow:hidden;
  box-shadow:0 30px 60px -24px rgb(20 10 2 / .38); }
.orc__foto img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:820px){
  .orc .wrap{ grid-template-columns:1fr; }
  .orc__foto{ order:-1; max-height:320px; }
}

/* ══════════ RODAPÉ ══════════
   Colunas: logo · Navegação · Atendimento · Redes sociais */
.rodape{ position:relative;
  padding:clamp(4.5rem, 3.4rem + 2.6vw, 6.5rem) 0 clamp(2.8rem, 2.2rem + 1.5vw, 3.6rem);
  background:var(--rodape) url('../img/bg-footer.webp') center top / cover no-repeat; }
.rodape .wrap{ display:flex; flex-wrap:wrap; align-items:flex-start;
  justify-content:space-between; gap:2rem 2.5rem; }
.rodape__logo{ width:190px; height:auto; }
.rodape__bloco{ display:grid; gap:.45rem; align-content:start; }
.rodape__label{ font-family:var(--font); font-weight:700; color:var(--amarelo-hl);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:.3rem; }
.rodape__bloco a, .rodape__bloco p{ color:#E6E9E7; font-weight:400; font-size:.92rem;
  line-height:1.5; }
.rodape__bloco a:hover{ color:var(--amarelo-hl); }

/* submenu do rodapé (linhas de produto sob "Produtos") */
.rodape__sub{ list-style:none; display:grid; gap:.4rem;
  margin:.15rem 0 .35rem .2rem; padding-left:.75rem;
  border-left:1px solid rgb(255 255 255 / .14); }
.rodape__sub a{ font-size:.86rem; color:#B9C2BE; }
.rodape__sub a:hover{ color:var(--amarelo-hl); }

/* linhas de contato: ícone alinhado ao topo da 1ª linha do texto */
.rodape__linha{ display:grid; grid-template-columns:auto 1fr;
  gap:.55rem; align-items:start; max-width:24rem; }
.rodape__linha svg{ width:17px; height:17px; flex:none;
  margin-top:.18rem; color:var(--verde-marca); transition:color .2s; }
.rodape__linha:hover svg{ color:var(--amarelo-hl); }
p.rodape__linha{ color:#E6E9E7; }          /* horário não é link */
p.rodape__linha svg{ color:var(--verde-marca); }

/* botões de rede social */
.rodape__redes{ display:flex; gap:.6rem; }
.rodape__redes a{ display:grid; place-items:center; width:42px; height:42px;
  border-radius:12px; background:rgb(255 255 255 / .07);
  border:1px solid rgb(255 255 255 / .12); color:#E6E9E7;
  transition:background-color .2s, color .2s, transform .18s var(--saida); }
.rodape__redes a:hover{ background:var(--verde-marca); color:#FFFFFF;
  border-color:transparent; transform:translateY(-2px); }
.rodape__redes svg{ width:21px; height:21px; }
/* ⚠️ Esta linha é `class="wrap rodape__fine"`, então também casa com
   `.rodape .wrap` (0-2-0) logo acima, que já define justify/align para as
   colunas de cima. Um seletor de uma classe só (0-1-0) PERDE dele — por
   isso as propriedades que precisam divergir vão no `.rodape .rodape__fine`. */
.rodape__fine{ margin-top:2.2rem; padding-top:2.2rem;
  border-top:1px solid rgb(255 255 255 / .09);
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem;
  color:#7F8884; font-weight:400; font-size:.82rem; }
.rodape .rodape__fine{ align-items:center; }

/* assinatura da agência: 3ª coluna da linha fina do rodapé.
   Fica discreta e só ganha opacidade no hover — é crédito, não CTA. */
.rodape__assinatura{ display:inline-flex; align-items:center; flex:none;
  opacity:.55; transition:opacity .2s; }
.rodape__assinatura:hover,
.rodape__assinatura:focus-visible{ opacity:1; }
.rodape__assinatura img{ width:118px; height:auto; display:block; }
@media (max-width:560px){
  /* empilhou: centraliza as três colunas (precisa de 0-2-0, ver nota acima) */
  .rodape .rodape__fine{ justify-content:center; text-align:center; }
}

/* botão WhatsApp flutuante — LP de tráfego, contato a um toque em qualquer ponto */
.zap-flut{ position:fixed; right:18px; bottom:18px; z-index:50;
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(180deg,#06CE7D 0%,#05C275 100%); color:#fff;
  box-shadow:0 12px 26px -6px rgb(3 78 47 / .55);
  transition:transform .18s var(--saida); }
.zap-flut:hover{ transform:scale(1.08); }

/* ══ Botão flutuante do WhatsApp: pulso + tooltip ══ */
.zap-caixa{ position:fixed; right:18px; bottom:18px; z-index:50; }
/* o botão precisa continuar sendo o contexto de posicionamento: é nele que
   o halo (::before) se ancora. Um position:static aqui jogaria o halo para
   a caixa inteira e ele vazaria em faixa para a esquerda. */
.zap-caixa .zap-flut{ position:relative; right:auto; bottom:auto; }
/* Halo pulsando atrás do botão. Fica num ::before MAIOR que o botão e
   centrado por translate: com inset:0 + blur o brilho era cortado pela
   caixa e escapava em faixa para a esquerda. */
.pulsa-zap{ position:relative; }
.pulsa-zap::before{
  content:''; position:absolute; top:50%; left:50%; z-index:-1;
  width:100%; height:100%; border-radius:50%;
  translate:-50% -50%;
  /* miolo bem mais fraco e queda rápida: vira um brilho discreto, não um halo */
  background:radial-gradient(circle, rgb(76 255 165 / .40) 0%, rgb(76 255 165 / .16) 52%, rgb(76 255 165 / 0) 70%);
  animation:pulsa-halo 2.9s ease-in-out infinite; pointer-events:none;
}
@keyframes pulsa-halo{
  0%, 100%{ transform:scale(1);    opacity:.20; }
  50%     { transform:scale(1.42); opacity:.46; }
}
@media (prefers-reduced-motion:reduce){ .pulsa-zap::before{ animation:none; opacity:.5; } }

.zap-tip{
  position:absolute; right:calc(100% + .6rem); top:50%; translate:0 -50%;
  display:flex; align-items:center; gap:.7rem;
  background:#FFFFFF; border-radius:14px; padding:.5rem .9rem .5rem .5rem;
  box-shadow:0 16px 34px -10px rgb(20 10 2 / .34);
  opacity:0; visibility:hidden; transform:translateX(8px);
  transition:opacity .22s, transform .22s var(--saida), visibility .22s;
  white-space:nowrap;
}
.zap-caixa{ display:flex; align-items:center; }
.zap-tip img{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none; }
.zap-tip__txt{ display:grid; gap:.1rem; }
.zap-tip__txt strong{ font-size:.9rem; color:var(--preto-fosco); font-weight:600; }
.zap-tip__txt > span{ font-size:.76rem; color:var(--verde); }
/* tooltip só no desktop (num toque não existe hover) */
@media (min-width: 900px){
  .zap-caixa:hover .zap-tip{ opacity:1; visibility:visible; transform:translateX(0); }
}
@media (max-width: 899px){ .zap-tip{ display:none; } }

/* ══════════ FOTO-SLIDE — fade automático com setas e pontos ══════════
   Componente compartilhado (nasceu na "Quem somos" da home, hoje também
   usado em internas de produto). Todas as fotos ficam empilhadas no
   mesmo espaço; só a .is-vis fica opaca. A 1ª imagem (sem position:absolute)
   é quem dita a altura do bloco — as demais seguem o mesmo enquadramento.
   JS: slideFoto() em js/site.js, uma instância por elemento .foto-slide. */
.foto-slide{ position:relative; border-radius:var(--raio); overflow:hidden;
  box-shadow:0 26px 50px -22px rgb(0 0 0 / .5); }
.foto-slide img{ width:100%; height:auto; transition:opacity .9s ease; }
.foto-slide img + img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.foto-slide img:not(.is-vis){ opacity:0; }
.foto-slide img.is-vis{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .foto-slide img{ transition:none; } }

/* ══ Controles do slide (setas + pontos, ficam dentro de .foto-slide) ══ */
.slide__seta{
  position:absolute; top:50%; translate:0 -50%; z-index:3;
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:rgb(255 255 255 / .92); color:var(--preto-fosco); border:0; cursor:pointer;
  box-shadow:0 8px 18px -6px rgb(0 0 0 / .35);
  opacity:0; transition:opacity .25s, background-color .2s, transform .18s var(--saida);
}
.foto-slide:hover .slide__seta,
.foto-slide:focus-within .slide__seta{ opacity:1; }
.slide__seta:hover{ background:var(--verde-marca); color:#FFFFFF; transform:scale(1.08); }
.slide__seta svg{ width:19px; height:19px; }
.slide__seta--ant{ left:10px; }
.slide__seta--pro{ right:10px; }

.slide__pontos{ position:absolute; z-index:3; left:0; right:0; bottom:12px;
  display:flex; justify-content:center; gap:.4rem; }
.slide__ponto{ width:8px; height:8px; padding:0; border:0; border-radius:999px; cursor:pointer;
  background:rgb(255 255 255 / .45); transition:background-color .25s, width .25s var(--saida); }
.slide__ponto.is-vis{ width:22px; background:#FFFFFF; }
.slide__ponto:hover{ background:rgb(255 255 255 / .8); }
.zap-flut svg{ width:30px; height:30px; }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

/* ══════════════════════════════════════════════════════════════════
   MODAL DE ORÇAMENTO — replicado de lp.plastix.com.br/labelads-forms/
   Mesmos nomes de classe, ids e comportamento da LP Label, pra que os
   dois formulários da Plastix sejam a mesma peça.
   ══════════════════════════════════════════════════════════════════ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal.is-open {
  display: flex;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(3, 10, 18, 0.78);
  backdrop-filter: blur(6px);
}

.modal__content {
  position: relative;
  z-index: 1;
  width: min(100%, 560px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  background:
    radial-gradient(circle at 90% 0%, rgba(40, 180, 70, 0.16), transparent 32%), #ffffff;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
}

.modal__close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #000;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.modal__close:hover {
  background: rgba(255, 255, 255, 0.14);
}

.modal__header {
  margin-bottom: 24px;
  text-align: center;
}

.modal__header h2 {
  margin: 0 0 10px;
  color: #000;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.8px;
}

.modal__header p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  line-height: 1.5;
}

.modal-form {
  display: grid;
  gap: 16px;
}

.form-group {
  display: grid;
  gap: 8px;
}

.form-group label {
  color: #000;
  font-size: 14px;
  font-weight: 400;
}

.form-group input,
.form-group textarea {
  width: 100%;
  border: 1px solid rgb(0 0 0 / 12%);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #000;
  font: inherit;
  font-size: 16px;
  outline: none;
}

.form-group input {
  min-height: 50px;
  padding: 0 15px;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(0, 0, 0, 0.48);
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: rgba(40, 180, 70, 0.75);
  box-shadow: 0 0 0 3px rgba(40, 180, 70, 0.16);
}

/* Erro de validação: mensagem embaixo do campo. Não usamos o balão nativo
   (o form é `novalidate`), então este bloco é a única sinalização — quem
   escreve o texto é o js/site.js. O <span> já existe no HTML e só ganha
   conteúdo quando há erro, por isso o `display:none` no estado normal. */
.form-erro {
  display: none;
  margin-top: -2px;
  color: #C62828;
  font-size: 13px;
  line-height: 1.35;
}

.form-group.is-erro .form-erro { display: block; }

.form-group.is-erro input {
  border-color: rgba(198, 40, 40, 0.65);
}

.form-group.is-erro input:focus {
  border-color: rgba(198, 40, 40, 0.85);
  box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.14);
}

.modal-form__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  margin-top: 6px;
  border: 0;
  border-radius: 12px;
  background: #28b446;
  color: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.modal-form__button:hover {
  background: #2fbd52;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(40, 180, 70, 0.24);
}

/* no mobile o form vira uma coluna de grid (largura toda) e o botão
   esticava junto — sem padding, virava uma barra sem respiro nenhuma
   ao redor do texto. Aqui ele encolhe pro tamanho do conteúdo e centraliza. */
@media (max-width:820px){
  .modal-form__button{ padding:0 1.2em; width:min-content; white-space:nowrap; margin:0 auto; }
}

.modal-form__button .button-loader {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: button-loading 0.8s linear infinite;
}

.modal-form__button.is-loading {
  pointer-events: none;
  opacity: 0.85;
}

.modal-form__button.is-loading .button-loader {
  display: inline-block;
}

@keyframes button-loading {
  to {
    transform: rotate(360deg);
  }
}

body.modal-open {
  overflow: hidden;
}

@media (max-width: 520px) {
  .modal {
    padding: 14px;
  }

  .modal__content {
    padding: 28px 20px 22px;
    border-radius: 18px;
  }

  .modal__close {
    top: 12px;
    right: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal-form__button .button-loader {
    animation: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   ENTRADAS AO ROLAR — leve de propósito
   · Sem biblioteca: IntersectionObserver nativo (ver script no rodapé).
   · Anima SÓ opacity e transform → roda no compositor, não dispara
     layout nem repaint, então não trava a rolagem.
   · Escopado em .js-anim (classe posta no <html> antes do 1º paint):
     se o JS não rodar, nada fica invisível.
   · O HERO fica de fora de propósito — esconder o que está acima da
     dobra atrasaria o LCP e pioraria o PageSpeed.
   ══════════════════════════════════════════════════════════════════ */
/* usa `translate` (propriedade individual), não `transform`: o
   `transform: none` do estado final vencia por especificidade e matava o
   translateY dos :hover em elementos que também são animados. */
.js-anim .anima{
  opacity: 0;
  translate: 0 18px;
  transition: opacity .5s ease, translate .5s cubic-bezier(.16, 1, .3, 1);
}
.js-anim .anima.is-vis{ opacity: 1; translate: 0 0; }

/* escalonamento por posição — CSS puro, sem style inline vindo do JS */
.js-anim .grid-cards > .anima:nth-child(2),
.js-anim .prod-grid  > .anima:nth-child(2),
.js-anim .depo__grid > .anima:nth-child(2),
.js-anim .faq__lista > .anima:nth-child(2){ transition-delay: .08s; }
.js-anim .grid-cards > .anima:nth-child(3),
.js-anim .prod-grid  > .anima:nth-child(3),
.js-anim .depo__grid > .anima:nth-child(3),
.js-anim .faq__lista > .anima:nth-child(3){ transition-delay: .16s; }
.js-anim .grid-cards > .anima:nth-child(4),
.js-anim .prod-grid  > .anima:nth-child(4),
.js-anim .faq__lista > .anima:nth-child(4){ transition-delay: .24s; }
.js-anim .faq__lista > .anima:nth-child(5){ transition-delay: .32s; }
.js-anim .faq__lista > .anima:nth-child(6){ transition-delay: .40s; }

/* quem pediu menos movimento recebe o conteúdo direto, sem deslocamento */
@media (prefers-reduced-motion: reduce){
  .js-anim .anima{ opacity: 1; transform: none; transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   ENTRADA DO HERO — roda no carregamento (CSS puro, sem JS)
   · O elemento LCP aqui é o FUNDO da .hero, que NÃO é animado —
     por isso o fade dos filhos não atrasa a métrica.
   · animation-fill-mode: both segura o estado inicial durante o delay.
   · Só opacity/transform, como no resto da página.
   ══════════════════════════════════════════════════════════════════ */
@keyframes heroDesce{ from{ opacity:0; transform:translateY(-14px); } to{ opacity:1; transform:none; } }
@keyframes heroSobe { from{ opacity:0; transform:translateY(22px); }  to{ opacity:1; transform:none; } }
/* ⚠ o lockup do hero é o elemento LCP no mobile: NADA de opacity:0 nele.
   Um elemento transparente não conta como "pintado", então o fade empurrava
   o LCP pra frente. Só o movimento anima — o LCP registra na 1ª pintura. */
@keyframes heroLcp  { from{ transform:translateY(18px); } to{ transform:none; } }
@keyframes heroFoto { from{ opacity:0; transform:translateY(26px) scale(.985); } to{ opacity:1; transform:none; } }

.topo          { animation: heroDesce .55s var(--saida) both; }
.hero__h1      { animation: heroLcp   .70s var(--saida) both; }
.hero__copy .pulso{ animation: heroSobe .70s var(--saida) .26s both; }
.hero__foto    { animation: heroFoto  .80s var(--saida) .16s both; }

@media (prefers-reduced-motion: reduce){
  .topo, .hero__h1, .hero__copy .pulso, .hero__foto{ animation: none; }
}

/* ══════════ SUBMENU DO HEADER ══════════ */
.menu__tem-sub{ position:relative; }
.menu__tem-sub > a{ display:inline-flex; align-items:center; gap:.3rem; }
.menu__seta{ width:14px; height:14px; transition:rotate .2s var(--saida); }
.menu__tem-sub:hover .menu__seta,
.menu__tem-sub:focus-within .menu__seta{ rotate:180deg; }
.menu__sub{
  position:absolute; top:100%; left:50%; translate:-50% 0;
  margin-top:.55rem; padding:.5rem; min-width:13.5rem;
  list-style:none; display:grid; gap:.1rem;
  background:#FFFFFF; border:1px solid rgb(20 10 2 / .08); border-radius:12px;
  box-shadow:0 18px 34px -12px rgb(20 10 2 / .28);
  opacity:0; visibility:hidden; translate:-50% 6px;
  transition:opacity .18s, translate .18s var(--saida), visibility .18s;
  z-index:30;
}
.menu__tem-sub:hover .menu__sub,
.menu__tem-sub:focus-within .menu__sub{ opacity:1; visibility:visible; translate:-50% 0; }
/* ponte invisível: sem ela o menu fecha ao atravessar o vão até o submenu */
.menu__tem-sub::after{ content:''; position:absolute; top:100%; left:0; right:0; height:.6rem; }
.menu__sub a{ display:flex; align-items:center; gap:.5rem;
  padding:.55rem .7rem; border-radius:8px;
  font-size:.9rem; color:var(--preto-fosco); white-space:nowrap; }
.menu__sub a:hover{ background:var(--creme); color:#f2542d; }
/* selo "Novo" ao lado do item */
.menu__flag{ flex:none; font-family:var(--font); font-weight:700;
  font-size:.6rem; letter-spacing:.08em; text-transform:uppercase;
  color:#FFFFFF; background:var(--laranja); border-radius:999px;
  padding:.18em .55em; line-height:1.35; }

/* ══════════════════════════════════════════════════════════════════
   PRODUTOS — carrossel automático
   Desktop: trilho com scroll nativo que o JS empurra devagar; para no
   hover/foco. Mobile (<820px): vira grid de 2 colunas e o auto-scroll
   desliga (o JS checa a media query).
   ══════════════════════════════════════════════════════════════════ */
.modelos__topo{ display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap; }
.modelos__catalogo{ flex:none; }

.carrossel{ position:relative; margin-top:2.2rem; }
.carrossel__janela{
  /* o trilho anda por transform (JS), não por scroll: sem barra e sem
     scroll nativo, o movimento fica sub-pixel e sem "degraus" */
  overflow:hidden;
  touch-action:pan-y;                   /* deixa a página rolar na vertical */
  cursor:grab;
  /* cards somem em fade nas bordas em vez de cortar seco sob as setas */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 4.5%, #000 95.5%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 4.5%, #000 95.5%, transparent 100%);
}
.carrossel__janela:active{ cursor:grabbing; }
.carrossel__janela::-webkit-scrollbar{ display:none; }

.carrossel__trilho{
  display:flex; gap:16px; list-style:none; margin:0;
  will-change:transform;                /* mantém o trilho na própria camada */
  backface-visibility:hidden;
  /* alinha o 1º card com o .wrap (min(1200px, 92vw) centralizado) */
  padding:.4rem max(4vw, calc((100vw - 1200px) / 2)) 1.6rem;
  width:max-content;
}
.carrossel__trilho > .prod{ flex:0 0 clamp(224px, 21vw, 262px);
  transition:transform .3s var(--saida), box-shadow .3s; }
/* mesma ênfase dos depoimentos: cresce e ganha sombra (fundo não muda) */
.carrossel__trilho > .prod:hover{
  transform:scale(1.035);
  box-shadow:0 22px 44px -14px rgb(20 10 2 / .28);
  z-index:2;
}
/* descrição com altura mínima: sem isso os botões desalinham entre os cards */
.carrossel__trilho .prod__desc{ min-height:3.4em; }
.carrossel__trilho .prod .btn-verde{ margin-top:auto; }
/* o auto empurra o botão pro fim do card; este respiro garante distância
   mínima da descrição mesmo quando ela ocupa 3 linhas */
.carrossel__trilho .prod__desc{ margin-bottom:1.35rem; }

/* setas — só no desktop */
.carrossel__seta{
  position:absolute; top:calc(50% - 1.6rem); z-index:4;
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:#FFFFFF; color:var(--preto-fosco);
  border:1px solid rgb(20 10 2 / .10); cursor:pointer;
  box-shadow:0 10px 22px -8px rgb(20 10 2 / .28);
  transition:transform .18s var(--saida), background-color .2s, color .2s;
}
.carrossel__seta:hover{ background:var(--verde-marca); color:#FFFFFF;
  border-color:transparent; transform:scale(1.08); }
.carrossel__seta svg{ width:22px; height:22px; }
.carrossel__seta--ant{ left:16px; }
.carrossel__seta--pro{ right:16px; }

@media (max-width:820px){
  /* sem slide: 2 por linha */
  .carrossel__janela{ overflow:visible; }
  .carrossel:not(.carrossel--depo):not(.carrossel--fotos) .carrossel__trilho{
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px;
    width:auto; padding:.4rem 4vw 0;
    transform:none !important; will-change:auto;
  }
  .carrossel:not(.carrossel--depo):not(.carrossel--fotos) .carrossel__janela{ cursor:auto; }
  .carrossel__trilho > .prod{ flex:none; padding:.9rem .9rem .8rem; }
  .carrossel__trilho .prod__desc{ min-height:0; font-size:.82rem; }
  .carrossel__trilho .prod__name{ font-size:.95rem; line-height:18px; text-align:center;}
  /* O card tem ~130px úteis. Com o rótulo longo o texto só cabia encolhendo a
     fonte pra .62rem (ilegível); com "Orçamento" ele cabe em uma linha e a
     tipografia volta ao tamanho de leitura. O ícone do WhatsApp continua. */
  #produtos .prod__cta-longo{ display:none; }
  #produtos .prod__cta-curto{ display:inline; }
  #produtos .carrossel__trilho .btn-verde{
    font-size:clamp(.9rem, .62rem + 1.2vw, 1rem);
    padding:0 .7em; gap:.45em; height:44px; }
  .carrossel__trilho .wa-ico{ width:1.1em; height:1.1em; }
  .carrossel__seta{ display:none; }
  .modelos__topo{ flex-direction:column; align-items:flex-start; }
  .modelos__catalogo{ width:100%; }
}


/* ══════════ DEPOIMENTOS — cabeçalho, nota do Google e slide ══════════ */
.depo__topo{ display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap; }

/* selo da nota: vira link pro perfil do Google Business */
.depo__nota{ flex:none; display:flex; align-items:center; gap:.85rem;
  background:rgb(255 255 255 / .07); border:1px solid rgb(255 255 255 / .14);
  border-radius:14px; padding:.85rem 1.15rem;
  transition:background-color .2s, transform .18s var(--saida); }
.depo__nota:hover{ background:rgb(255 255 255 / .12); transform:translateY(-2px); }
.depo__nota-g{ width:30px; height:30px; flex:none; }
.depo__nota-txt{ display:grid; gap:.15rem; }
.depo__nota-txt strong{ display:flex; align-items:center; gap:.5rem;
  color:#FFFFFF; font-size:1.22rem; font-weight:700; line-height:1; }
.depo__nota-estrelas{ display:inline-flex; gap:1px; }
.depo__nota-estrelas svg{ width:14px; height:14px; color:#FBBC05; }
.depo__nota-txt > span{ color:rgb(255 255 255 / .62); font-size:.82rem; line-height:1.2; }

/* cards no trilho */
.carrossel--depo .carrossel__trilho > .depo__card{ flex:0 0 clamp(266px, 26vw, 336px);
  transition:transform .4s cubic-bezier(.4, 0, .2, 1),
             background-color .4s ease, box-shadow .4s ease; }

/* o degradê marca que o texto continua além das 5 linhas */
.depo__card .depo__texto::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2.2em;
  background:linear-gradient(to bottom, rgb(13 86 63 / 0) 0%, rgb(13 86 63 / .82) 55%, rgb(13 86 63 / .97) 100%);
  pointer-events:none; transition:opacity .4s cubic-bezier(.4, 0, .2, 1);
}
/* no hover o card cresce, clareia e o texto abre por inteiro */
.carrossel--depo .depo__card:hover{
  transform:scale(1.035);
  background:rgba(255,255,255,.085);
  box-shadow:0 22px 44px -14px rgb(0 0 0 / .45);
  z-index:2;
}
.carrossel--depo .depo__card:hover .depo__texto{ max-height:calc(1.55em * 26); }
.carrossel--depo .depo__card:hover .depo__texto::after{ opacity:0; }
.carrossel--depo .carrossel__seta{ background:#FFFFFF; }
/* sem isto a regra acima (mesma especificidade, declarada depois) vence
   também no hover e a seta ficaria branca */
.carrossel--depo .carrossel__seta:hover{ background:var(--verde-marca); color:#FFFFFF; }
.depo__quem .depo__foto{ width:42px; height:42px; flex:none; border-radius:50%;
  object-fit:cover; background:rgb(255 255 255 / .12); }
.depo__quem > div{ flex:1; min-width:0; }
.depo__g{ width:20px; height:20px; flex:none; }   /* "G" no canto direito do autor */

@media (max-width:820px){
  .depo__topo{ flex-direction:column; align-items:flex-start; }
  .depo__nota{ width:100%; }
  .carrossel--depo .carrossel__trilho{ display:flex; width:max-content;
    grid-template-columns:none; padding:.4rem 4vw 1.2rem;
    transform:translate3d(0,0,0); will-change:transform; }
  .carrossel--depo .carrossel__trilho > .depo__card{ flex:0 0 min(82vw, 320px); }
  .carrossel--depo .carrossel__janela{ overflow-x:auto; }
  /* a vitrine de fotos continua deslizando por transform no mobile, então
     precisa DESFAZER o `overflow:visible` lá de cima — sem isso o trilho
     (width:max-content) vaza e a página inteira rola pro lado. */
  .carrossel--fotos .carrossel__janela{ overflow:hidden; }
}

/* ══════════ INSTAGRAM — faixa 100% acima do rodapé ══════════ */
.insta{ background:var(--creme); padding:clamp(2.6rem, 2rem + 2vw, 4rem) 0 0; }
.insta__topo{ display:flex; align-items:center; justify-content:space-between;
  gap:1.2rem; flex-wrap:wrap; padding-bottom:1.6rem; }
.insta__quem{ display:flex; align-items:center; gap:.9rem; }
.insta__avatar{ width:58px; height:58px; flex:none; border-radius:50%;
  overflow:hidden; background:#FFFFFF; border:2px solid var(--verde-marca); }
.insta__avatar img{ width:100%; height:100%; object-fit:cover; }
.insta__quem strong{ display:block; font-size:1.05rem; color:var(--preto-fosco); }
.insta__quem span{ display:block; margin-top:.15rem; font-size:.88rem; color:var(--cinza-txt); }
.insta__seguir{ display:inline-flex; align-items:center; gap:.55em; flex:none;
  height:46px; padding:0 1.3em; border-radius:999px;
  background:linear-gradient(120deg, #F7B513 0%, #F2542D 48%, #C13584 100%);
  color:#FFFFFF; font-weight:600; font-size:.94rem;
  transition:transform .18s var(--saida), box-shadow .22s; }
.insta__seguir:hover{ transform:translateY(-2px);
  box-shadow:0 14px 26px -10px rgb(193 53 132 / .55); }
.insta__seguir svg{ width:20px; height:20px; }

/* grade 100% de largura: 8 quadrados numa linha no desktop */
.insta__grade{ list-style:none; display:grid; gap:2px;
  grid-template-columns:repeat(8, 1fr); }
.insta__grade a{ position:relative; display:block; aspect-ratio:1; overflow:hidden; }
.insta__grade img{ width:100%; height:100%; object-fit:cover;
  transition:transform .35s var(--saida); }
.insta__grade a:hover img{ transform:scale(1.07); }
.insta__over{ position:absolute; inset:0; display:grid; place-items:center;
  background:rgb(20 10 2 / .45); color:#FFFFFF; opacity:0; transition:opacity .25s; }
.insta__grade a:hover .insta__over,
.insta__grade a:focus-visible .insta__over{ opacity:1; }
.insta__over svg{ width:28px; height:28px; }

@media (max-width:1100px){ .insta__grade{ grid-template-columns:repeat(4, 1fr); } }
/* mobile: só 3 posts, numa fileira única — os demais saem do DOM renderizado.
   As 3 colunas vêm junto pra fileira nunca ficar com célula vazia. */
@media (max-width:820px){
  .insta__grade{ grid-template-columns:repeat(3, 1fr); }
  .insta__grade li:nth-child(n+4){ display:none; }
}
@media (max-width:560px){
  .insta__grade{ grid-template-columns:repeat(3, 1fr); }
  .insta__topo{ justify-content:center; text-align:center; }
  .insta__quem{ flex-direction:column; text-align:center; }
}

/* faixa de arte que separa duas seções (largura total, sem margem) */
.barra-sep{ line-height:0; }
.barra-sep img{ width:100%; height:auto; display:block; }

/* ══ BOTÃO VAZADO LARANJA ══ mesma caixa do .btn-verde, só o traço muda */
.btn-laranja{ display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  height:51px; padding:0 1.6em; border-radius:8px; white-space:nowrap;
  font-family:var(--pop); font-weight:500; font-size:1rem; line-height:1;
  color:var(--laranja); background:transparent; border:1.6px solid var(--laranja);
  cursor:pointer;
  transition:background-color .2s, color .2s, box-shadow .22s; }
.btn-laranja:hover{ background:var(--laranja); color:#FFFFFF;
  box-shadow:0 18px 30px -8px rgb(242 84 45 / .45); }

/* ══════════════════════════════════════════════════════════════════
   PÁGINAS INTERNAS DE PRODUTO — dobras compartilhadas
   ──────────────────────────────────────────────────────────────────
   Nasceram na /copos-termicos e vieram pra cá quando a /copos-label
   entrou: as internas têm a MESMA estrutura, só muda o conteúdo do
   produto. Página de produto nova = copiar o HTML de uma delas e
   trocar os textos; CSS novo, nenhum.
   ══════════════════════════════════════════════════════════════════ */

/* fundo do hero das internas (a home tem o dela, em home.css) */
.hero--interna{ background:url('../img/bg-hero-transparent-m.webp') center bottom / cover no-repeat;
  background-color:var(--creme); }
@media (min-width: 821px){
  .hero--interna{ background-image:url('../img/bg-hero-transparent.webp'); }
}

/* headline das internas: lockup 3D do cliente no lugar de texto.
   As duas páginas usam a mesma caixa; a arte é que muda. */
.hero__h1{ width:min(100%, 560px); height:auto; margin-inline:auto;
  filter:drop-shadow(0 18px 30px rgb(0 0 0 / .35)); }

/* hero sem foto de produto (ex.: /contato) — 1 coluna só, texto centralizado */
.hero--sem-foto .wrap{ grid-template-columns:1fr; }
.hero--sem-foto .hero__copy{ max-width:640px; margin-inline:auto; }

/* ══════════ CONTATO — formulário + informações ══════════
   Mesmo grid 2 colunas das outras dobras (.comparativo/.quem), com um
   card cor de creme pro formulário (reaproveita .modal-form/.form-group
   do modal de orçamento — são genéricos, não dependem do overlay) e um
   card escuro sólido pras informações (mesmas classes .rodape__linha/
   .rodape__redes do rodapé, forma clicável idêntica de novo). O card
   escuro é cor sólida (não translúcido) porque a seção agora é clara —
   um overlay preto ficaria claro demais em cima do bege. */
.contato{ background:var(--creme);
  /* metade do padding-top padrão de `section` — o hero já empurra bastante
     conteúdo pra baixo, não precisa do respiro inteiro de novo aqui */
  padding-top:calc(clamp(3.2rem, 2.2rem + 3vw, 5.5rem) / 2); }
.contato .wrap{ display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem, 3vw, 3.5rem); align-items:start; }
.contato__form{ margin-top:1.8rem; background:#FFFFFF; border-radius:var(--raio);
  padding:1.8rem; box-shadow:0 18px 34px -16px rgb(20 10 2 / .10), 0 4px 10px rgb(20 10 2 / .04); }
.contato__info{ margin-top:1.8rem; background:var(--escuro-1); border-radius:16px;
  padding:1.8rem; display:grid; gap:1.5rem;
  box-shadow:0 18px 34px -16px rgb(20 10 2 / .18), 0 4px 10px rgb(20 10 2 / .06); }
.contato__info .rodape__label{ display:block; margin-bottom:.6rem; }
.contato__info .rodape__bloco{ display:grid; gap:.45rem; }
@media (max-width:820px){ .contato .wrap{ grid-template-columns:1fr; } }

/* honeypot do form de contato: existe pro bot preencher, some pra gente
   (display:none seria ignorado por alguns bots — off-screen é mais eficaz) */
.contato__site{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* feedback de envio (contato/enviar.php), abaixo do botão */
.contato__status{ margin-top:.9rem; font-size:.9rem; line-height:1.4; min-height:1.3em; }
.contato__status--ok{ color:var(--verde-marca); }
.contato__status--erro{ color:#C62828; }
@media (max-width:820px){ .hero__h1{ width:min(88%, 420px); } }

/* ══════════ DOBRA COMPARATIVA — texto + foto, fundo escuro ══════════ */
.comparativo{ background:var(--escuro-1); }
.comparativo .wrap{ display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,3vw,3.5rem); align-items:center; }
.comparativo__foto{ border-radius:var(--raio); overflow:hidden;
  box-shadow:0 30px 60px -20px rgb(0 0 0 / .55); }
.versus{ margin-top:1.8rem; display:grid; gap:12px; }
.versus__linha{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.versus__cel{ display:flex; align-items:center; gap:.65rem; border-radius:12px;
  padding:.85rem 1rem; font-size:.92rem; line-height:1.35; font-weight:400; }
.versus__cel svg{ width:20px; height:20px; flex:none; }
.versus__cel--ruim{ background:rgb(255 255 255 / .05); color:rgba(255,255,255,.55);
  border:1px solid rgb(255 255 255 / .08); }
.versus__cel--ruim svg{ color:var(--laranja); }
.versus__cel--bom{ background:rgb(5 194 117 / .10); color:#FFFFFF;
  border:1px solid rgb(5 194 117 / .35); }
.versus__cel--bom svg{ color:var(--verde-marca); }
.versus__head{ font-family:var(--font); font-weight:700; font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase; padding-bottom:0; }
.versus__head.versus__cel--ruim{ background:none; border:0; color:rgba(255,255,255,.45); }
.versus__head.versus__cel--bom{ background:none; border:0; color:var(--verde-marca); }
@media (max-width:820px){ .comparativo .wrap{ grid-template-columns:1fr; } }

/* ══════════ CONDIÇÕES — banner escuro centralizado ══════════ */
.cond{ background:var(--escuro-2); }
.cond .wrap{ text-align:center; }
.cond__bullets{ margin-top:2rem; display:flex; flex-wrap:wrap; justify-content:center;
  gap:.9rem 1.1rem; list-style:none; }
.cond__bullets li{ display:flex; align-items:center; gap:.55rem;
  background:rgb(255 255 255 / .06); border:1px solid rgb(255 255 255 / .10);
  border-radius:999px; padding:.7rem 1.25rem;
  color:#FFFFFF; font-weight:400; font-size:.95rem; line-height:1; }
.cond__bullets svg{ width:18px; height:18px; color:var(--amarelo-hl); flex:none; }
.cond .btn-verde{ margin-top:2.2rem; }

/* ══════════ BLOCO REGIONAL — só aparece com ?regiao= na URL ══════════
   Google Ads regional: a página lê o parâmetro e mostra a cidade perto do
   H1 (nota de "experiência na página de destino"). Sem parâmetro o bloco
   fica `hidden` e a página é idêntica. Mora no hero, entre o lockup e o
   CTA — a coluna de texto tem folga, então a altura do hero não muda.
   O snippet original era pra fundo claro; aqui é a versão pro hero escuro. */
.regional{ margin:1.3rem auto 0; max-width:560px; text-align:left;
  padding:.85rem 1.1rem .9rem; border-left:4px solid var(--verde-marca);
  border-radius:10px; background:rgb(255 255 255 / .08);
  color:#FFFFFF; }
.regional strong{ display:block; font-weight:700; font-size:1.05rem; line-height:1.25; }
.regional span{ display:block; margin-top:.3rem; font-weight:400;
  font-size:.9rem; line-height:1.45; color:rgba(255,255,255,.78); }
@media (max-width:820px){ .regional{ max-width:min(88%, 420px); } }

/* ══════════ CARROSSEL DE FOTOS — vitrine de artes já produzidas ══════════
   Variante sem card de texto: cada slide é só a foto. Diferente do carrossel
   de produtos, este NÃO vira grid no mobile (9 fotos empilhadas seriam uma
   rolagem sem fim) — desliza igual ao de depoimentos. A exclusão está nas
   duas regras de @media lá em cima e no `soDesktop` do js/site.js. */
.carrossel--fotos .carrossel__trilho > li{
  flex:0 0 clamp(230px, 23vw, 296px);
  border-radius:var(--raio); overflow:hidden; background:#FFFFFF;
  border:1px solid rgb(20 10 2 / .06);
  box-shadow:0 18px 34px -16px rgb(20 10 2 / .10), 0 4px 10px rgb(20 10 2 / .04);
  transition:transform .3s var(--saida), box-shadow .3s;
}
.carrossel--fotos .carrossel__trilho > li:hover{
  transform:scale(1.035);
  box-shadow:0 22px 44px -14px rgb(20 10 2 / .28);
  z-index:2;
}
.carrossel--fotos .carrossel__trilho > li img{ display:block; width:100%; height:auto; }
@media (max-width:820px){
  .carrossel--fotos .carrossel__trilho > li{ flex:0 0 min(72vw, 300px); }
}

/* ══════════ CARROSSEL DE CARDS — vitrine de tamanho/variante ══════════
   Mesma base do carrossel de fotos (desliza também no mobile — herda
   .carrossel--fotos pro JS/CSS tratarem como "sempre slide"), mas cada
   slide é um cartão com título (tamanho) e bolinhas de cor, não só a foto.
   O <li> perde o visual de moldura (fica só o tamanho do slide); quem
   desenha o cartão é o .prod-card por dentro, um pouco maior que o card
   padrão de produto (.prod) pra a foto ficar mais em evidência. */
.carrossel--cards .carrossel__trilho > li{
  background:none; border:none; box-shadow:none; overflow:visible;
  flex:0 0 clamp(250px, 25vw, 300px);
}
.prod-card{ background:#FFFFFF; border:1px solid rgb(20 10 2 / .06);
  border-radius:var(--raio); padding:1rem 1rem 1.3rem; }
.prod-card__img{ border-radius:10px; overflow:hidden; }
.prod-card__img img{ display:block; width:100%; height:auto; }
.prod-card__nome{ margin-top:.85rem; text-align:center; font-weight:700;
  color:#211C18; font-size:1.05rem; }
.prod-card__cores{ display:flex; justify-content:center; flex-wrap:wrap;
  gap:.4rem; margin-top:.65rem; }
.prod-card__cores i{ width:16px; height:16px; border-radius:50%; flex:none;
  border:1px solid rgb(20 10 2 / .14); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .4); }