/* ══════════════════════════════════════════════════════════════════
   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; 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. */
.hero__copy .btn-verde { margin-left: 8px; }
.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.3s ease-in-out infinite; }
.pulso > .btn-verde{ position:relative; z-index:1;
  animation:cta-pulsa 2.3s 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;
  animation:fotoFlutua 3.2s ease-in-out 1s infinite; }
/* Flutuação suave da foto do produto — home e internas.
   Fica na <img>, não na .hero__foto: essa já roda a entrada heroFoto, e uma
   segunda `animation` ali apagaria a entrada. Anima `translate`/`rotate`
   (propriedades próprias), nunca `transform`, pelo mesmo motivo. Começa
   depois da entrada (1s). Sem opacity: a foto pode ser o LCP. */
@keyframes fotoFlutua{
  0%, 100%{ translate:0 0;     rotate:0deg; }
  50%     { translate:0 -14px; rotate:-1deg; }
}
@media (prefers-reduced-motion: reduce){ .hero__foto img{ animation:none; } }
@media (max-width:820px){
  .hero{ padding-top:5.5rem; padding-bottom:3.5rem; }
  .hero .wrap{ grid-template-columns:1fr; }
  .hero__copy{ padding-bottom:1rem; text-align:center; }
  .hero__foto{ margin-bottom:6vw; scale:0.86;}
}

/* ══════════ 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; }
/* Link opcional no pé do card — leva pra dobra que aprofunda o assunto
   (ex.: o card "Com tirante" da /copos-label leva pra dobra #tirante).
   Compartilhado: qualquer card de qualquer página pode usar. */
.card__mais{ display:inline-flex; align-items:center; gap:.3rem; margin-top:.8rem;
  font-weight:600; font-size:.88rem; color:var(--verde); text-decoration:none; }
.card__mais svg{ width:15px; height:15px; transition:translate .18s var(--saida); }
.card__mais:hover{ text-decoration:underline; }
.card__mais:hover svg{ translate:3px 0; }
.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; }
/* Foto de produto com lazy por linha (js/site.js, 1a). Enquanto espera,
   o placeholder (mesma proporção) mostra um fundo neutro; quando a foto
   chega ela entra num fade curto. Sem JS o <img> com data-src some e fica
   só a cópia do <noscript> — `js-anim` é posta no <html> pelo _head.php. */
.prod__foto[data-src]{ background:#F3EFEA; }
.prod__foto.is-entrou{ animation:fotoEntra .4s ease-out both; }
@keyframes fotoEntra{ from{ opacity:0; } to{ opacity:1; } }
html:not(.js-anim) .prod__foto{ display:none; }
@media (prefers-reduced-motion: reduce){ .prod__foto.is-entrou{ animation:none; } }
.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; margin-bottom: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.3s 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); }
/* Contagem no ponto ativo — só nos slides com data-primeira-ms (o JS põe
   .is-contando enquanto conta e tira quando a caixa sai da tela). O ponto
   fica mais largo e translúcido e uma barra branca enche até a troca. */
.foto-slide.is-contando .slide__ponto{ position:relative; overflow:hidden; }
.foto-slide.is-contando .slide__ponto.is-vis{ width:32px; background:rgb(255 255 255 / .45); }
.foto-slide.is-contando .slide__ponto.is-vis::after{ content:''; position:absolute; inset:0;
  border-radius:inherit; background:#FFFFFF; transform-origin:left center;
  animation:slideConta var(--slide-tempo, 4.5s) linear both; }
@keyframes slideConta{ from{ scale:0 1; } to{ scale:1 1; } }
.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.
   ⚠️ Os marcadores MODAL:INICIO / MODAL:FIM não são decorativos: o
   /copos-do-verao (export do Elementor, não carrega este arquivo) lê só
   o trecho entre eles e imprime inline. Não renomear nem apagar; regra
   nova do modal vai DENTRO deles.
   ══════════════════════════════════════════════════════════════════ */
/* MODAL:INICIO */
.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;
  }
}
/* MODAL:FIM */

/* ══════════════════════════════════════════════════════════════════
   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; } }
/* ⚠ Nunca opacity no elemento LCP: elemento transparente não conta como
   "pintado" e atrasa a métrica. O título em texto (.hero__titulo) anima
   opacity porque foi MEDIDO que não é o LCP — ver a entrada dele. */
@keyframes heroFoto { from{ opacity:0; transform:translateY(26px) scale(.985); } to{ opacity:1; transform:none; } }

.topo          { animation: heroDesce .55s 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__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; }
/* ícone do produto (campo 'ico' do $MENU); "Ver todos" não tem */
.menu__ico{ width:18px; height:18px; flex:none; color:var(--laranja); }
/* 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;
  }
  /* rede de segurança: se a janela encolheu do desktop pro mobile, os
     clones do loop infinito já existem — no grid eles repetiriam a lista */
  .carrossel:not(.carrossel--depo):not(.carrossel--fotos) .carrossel__trilho > [aria-hidden="true"]{
    display:none; }
  .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'); }
}

/* ══════════ TÍTULO DO HERO EM TEXTO (.hero__titulo) ══════════════════
   H1 de verdade no lugar do lockup em imagem (o Google lê texto, não alt).
   Markup: _titulo.php, a partir do array $TITULO de cada página. O visual
   refaz a arte 3D do cliente: Poppins 900 itálico em caixa-alta, uma cor
   por linha, relevo em text-shadow, tarja escura opcional e manuscrito
   (Yellowtail) opcional. Home e internas usam o MESMO componente — o que
   é só da home (tamanho, alinhamento à esquerda) mora no home.css.
   · `rotate` (propriedade própria) no H1: a entrada linha a linha anima
     `transform` nas linhas, e as duas coisas não se somam.
   · Tudo em `em` a partir do font-size do H1 → o bloco escala junto.
     --titulo-escala encolhe páginas com linha mais longa (ex.: galão).
   · A altura das linhas vem do line-height, então a troca da fonte de
     fallback pela Poppins/Yellowtail não empurra o CTA (CLS ~0). */
.hero__titulo{ width:fit-content; max-width:100%; margin: 0 0 15px 0; text-align:left;
  font-size:calc(clamp(2.6rem, 1.2rem + 4.6vw, 5rem) * var(--titulo-escala, 1));
  rotate:-4deg; transform-origin:center; }
.hero__titulo-linha{ display:block; white-space:nowrap;
  font-family:var(--pop); font-weight:900; font-style:italic; text-transform:uppercase;
  font-size:1em; line-height:.86; letter-spacing:-.04em; word-spacing:.06em;
  /* --lado = cor da lateral do relevo; --borda = sombra escura da base */
  --borda:#0a0500b3;
  text-shadow:1px 0 0 var(--lado), 9px 1px 4px var(--borda), .12em .2em .27em rgb(20 6 0 / .45); }
.hero__titulo-linha--creme  { color:#F1EDE7; --lado:#A1927E; }
.hero__titulo-linha--verde  { color:#029B87; --lado:#01614F; }
.hero__titulo-linha--amarelo{ color:#FBAC00; --lado:#B36F00; }
.hero__titulo-linha--ouro   { color:#EBBE55; --lado:#A87420; }   /* /copos-termicos */
.hero__titulo-linha--prata  { color:#DCD2C6; --lado:#857A6E; }

/* tarja escura com o nome do produto (a palavra-chave da página) */
.hero__titulo-faixa{ display:block; width:fit-content; margin:.3em 0 0 .15em;
  padding:.5em 1.1em .45em; border-radius:999px;
  background:#161616; color:#FFFFFF;
  font-family:var(--pop); font-weight:700; font-style:normal; text-transform:uppercase;
  font-size:.26em; line-height:1; letter-spacing:.03em; white-space:nowrap;
  box-shadow:0 .6em 1.2em rgb(0 0 0 / .35), inset 0 1px 0 rgb(255 255 255 / .14); }

/* manuscrito: branco com sombra escura e o traço amarelo por baixo */
.hero__titulo-script{ position:relative; display:block; width:max-content;
  margin:.34em 0 0 .12em;
  font-family:'Yellowtail', 'Brush Script MT', cursive; font-weight:300;
  font-size:.45em; line-height:1.1; letter-spacing:.01em; color:#FFFFFF;
  rotate:-3deg;
  text-shadow:2px 2px 0 #111, 3px 5px 8px rgb(20 6 0 / .45); }
.hero__titulo-script::after{ content:''; position:absolute; z-index:-1;
  left:8%; right:8%; bottom:-.05em; height:3px;
  background:var(--amarelo); border-radius:50%; }

/* tema ouro (/copos-termicos): tarja verde-escura com filete dourado e
   manuscrito dourado sem traço — como na arte "Em laser" */
.hero__titulo--ouro .hero__titulo-faixa{ background:#0B2E24; color:#F4EBD8;
  border:.12em solid #D9A441; border-radius:.45em; letter-spacing:.07em; }
.hero__titulo--ouro .hero__titulo-script{ color:#EBBE55;
  text-shadow:1px 1px 0 #3A2400, 3px 5px 8px rgb(0 0 0 / .5); }
.hero__titulo--ouro .hero__titulo-script::after{ display:none; }

@media (max-width:820px){
  .hero__titulo{ font-size:calc(min(14vw, 4rem) * var(--titulo-escala, 1)); }
  .hero__titulo-linha, .hero__titulo-script{ text-align:center; }
  /* margem do manuscrito no celular: vale pra home e /copos-label, e é a
     mesma das demais páginas — quem precisar de outra sobrescreve pelo id
     do <body> (ver "Ajustes por página", no fim deste arquivo) */
  .hero__titulo-script{ margin:.34em 0 0 1.3em; }
  /* a tarja tem o texto mais comprido do bloco: no celular ela encolhe
     um pouco pra não passar da largura das linhas */
  .hero__titulo-faixa{ margin-inline:auto; font-size:.225em; letter-spacing:.01em; }
  .hero__titulo--ouro .hero__titulo-faixa{ letter-spacing:.04em; }
}

/* ── ENTRADA: linha por linha ──────────────────────────────────────────
   Cada linha sobe e "estoura" (escala com overshoot + desfoque saindo),
   uma depois da outra; a tarja vem em seguida, o manuscrito se escreve da
   esquerda pra direita (clip-path) e o traço amarelo corre por baixo.
   O CTA (e o bloco regional) só sobem depois do título.
   · PODE animar opacity aqui: medido via CDP, o LCP é o fundo/foto do
     hero, não uma linha do H1. Se o hero mudar, medir de novo.
   · `both` segura o estado inicial durante o atraso (sem piscar). */
@keyframes tituloLinha{
  0%  { opacity:0; transform:translateY(.45em) scale(.7); filter:blur(8px); }
  60% { opacity:1; transform:translateY(-.04em) scale(1.06); filter:blur(0); }
  100%{ opacity:1; transform:none; filter:none; }
}
@keyframes tituloEscreve{
  from{ clip-path:inset(-40% 100% -60% -10%); }
  to  { clip-path:inset(-40% -10% -60% -10%); }
}
@keyframes tituloTraco{ from{ scale:0 1; } to{ scale:1 1; } }

.hero__titulo-linha,
.hero__titulo-faixa{ animation:tituloLinha .6s cubic-bezier(.34,1.56,.64,1) .15s both; }
.hero__titulo-linha:nth-child(2){ animation-delay:.32s; }
.hero__titulo-linha:nth-child(3){ animation-delay:.49s; }
.hero__titulo-faixa{ animation-delay:.66s; }
.hero__titulo-script{ animation:tituloEscreve .7s cubic-bezier(.65,0,.35,1) .75s both; }
.hero__titulo-faixa ~ .hero__titulo-script{ animation-delay:.9s; }
.hero__titulo-script::after{ transform-origin:left center;
  animation:tituloTraco .45s var(--saida) 1.3s both; }
.hero__titulo ~ .pulso,
.hero__titulo ~ .regional{ animation:heroSobe .7s var(--saida) 1.1s both; }

@media (prefers-reduced-motion: reduce){
  .hero__titulo-linha, .hero__titulo-faixa, .hero__titulo-script,
  .hero__titulo-script::after, .hero__titulo ~ .pulso, .hero__titulo ~ .regional{ animation:none; }
}

/* 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; }

/* ══════════ 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; } }

/* ── Variante CLARA da dobra comparativa ──────────────────────────────
   Mesmo grid "texto + foto" de 2 colunas, em fundo claro. Existe pra
   qualquer interna poder aprofundar um assunto sem CSS novo: hoje é o
   que sustenta as dobras #tirante e #eco da /copos-label, e serve igual
   pra /copos-termicos e /galao-fit quando elas precisarem.
     .comparativo--claro   → fundo branco
     .comparativo--creme   → fundo creme (pra alternar com a dobra vizinha)
     .comparativo--inverso → foto à esquerda, texto à direita (no desktop;
                             no mobile a ordem natural do HTML volta a valer
                             e o texto vem primeiro, que é o que importa) */
.comparativo--claro{ background:#FFFFFF; }
.comparativo--creme{ background:var(--creme); }
.comparativo--claro .comparativo__foto,
.comparativo--creme .comparativo__foto{
  box-shadow:0 26px 52px -26px rgb(20 10 2 / .30); }
@media (min-width:821px){
  .comparativo--inverso .wrap > .comparativo__foto,
  .comparativo--inverso .comparativo__galeria{ order:-1; }
}
/* Galeria de 2-3 fotos no lugar da foto única: a primeira ocupa a largura
   toda, as demais dividem a linha de baixo. Cada item usa o mesmo
   .comparativo__foto (raio, sombra), então nada muda de aparência entre
   dobra com foto única e dobra com galeria. Hoje: #eco da /copos-label. */
.comparativo__galeria{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.comparativo__galeria > :first-child{ grid-column:1 / -1; }
.comparativo__galeria .comparativo__foto{ margin:0; }
.comparativo__galeria img{ width:100%; height:100%; object-fit:cover; }

/* ══════════ 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); } }

/* ── Hero com região ativa ────────────────────────────────────────────
   Com ?regiao= o hero ganha uma caixa de texto a mais, e a dobra precisa
   de dois ajustes pra continuar equilibrada. Valem SÓ nesse caso: sem o
   parâmetro a classe não existe e a página fica idêntica à de sempre.
     · o título (H1) encolhe um pouco, abrindo espaço pro bloco regional
     · a foto do produto centraliza em vez de alinhar pela base, que fica
       baixa demais em relação à coluna de texto, agora mais alta

   `scale` é a propriedade própria, NÃO `transform: scale()`: `rotate` e
   `scale` se somam no .hero__titulo sem apagar um ao outro. */
.hero--regional .hero__titulo{ scale:.9; }
.hero--regional .hero__foto{ align-self:center; }

/* ── ARTE DE GRAÇA (fundo claro, texto à esquerda + foto) ───────── */
.arte{ background:#FFFFFF; }
.arte .wrap{ display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem, 3vw, 3.5rem); align-items:center; }
.arte .pulso{ margin-top:1.8rem; }
.arte__foto{ border-radius:var(--raio); overflow:hidden; }
.arte__foto img{ width:100%; height:auto; }
.hl-verde-claro{ color:var(--verde-marca); }
@media (max-width:820px){
  .arte .wrap{ grid-template-columns:1fr; }
  .arte__foto{ order:-1; }
}

/* ══════════ #arte — pilares com ícone (entre a descrição e o CTA) ══════════ */
.pilares{ margin-top:1.8rem; display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1rem 1.4rem; list-style:none; }
.pilar{ display:grid; grid-template-columns:50px 1fr; gap:.75rem; align-items:flex-start; }
.pilar__ico{ width:45px; height:45px; border-radius:11px; display:grid;
  place-items:center; background:#f7b51324; }
.pilar__ico svg{ width:21px; height:21px; color:var(--laranja); display:block; }
.pilar strong{ display:block; font-size:.95rem; color:#211C18; line-height:1.25; }
.pilar span{ display:flex; align-content:center;
  margin-top:.15rem; font-size:.85rem; color:var(--cinza-txt); line-height:1.4; }
.pilar>span { justify-content:center; }
@media (max-width:560px){ .pilares{ grid-template-columns:1fr; } }

/* Variante Label: mesmo fundo da antiga seção de impressão. */
.arte--escura{ background:var(--escuro-1); }
.arte--escura .titulo,.arte--escura .pilar strong{ color:#fff; }
.arte--escura .eyebrow{ color:#c7ded5; }
.arte--escura .sub,.arte--escura .pilar div>span{ color:#c7ded5; }
.arte--escura .pilar__ico{ background:rgb(255 202 24 / .12); }
.arte--escura .pilar__ico svg{ color:var(--amarelo-hl); }
.arte--escura .arte__foto{ background:#fff; }
.arte--escura .wrap > *{ min-width:0; }
@media (max-width:820px){ .arte--escura .arte__foto{ order:0; } }

/* ══════════ 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); }

/* ══════════════════════════════════════════════════════════════════
   AJUSTES POR PÁGINA
   Cada <body> tem um id único gerado pelo _head.php (#pagina-home,
   #pagina-copos-label, #pagina-copos-termicos, #pagina-galao-fit,
   #pagina-contato, #pagina-copos-termicos-personalizados2, #pagina-labelads-forms2). CSS que só vale numa página entra aqui, prefixado
   pelo id — sem criar arquivo de CSS por página nem classe extra no HTML.
   ══════════════════════════════════════════════════════════════════ */

/* ── /copos-label ── */
@media (max-width:820px){
  #pagina-copos-label .hero{ padding-top:7.5rem; }
  /* textos do .hero__copy centralizados: o título volta a ter margem
     automática nas laterais (o .hero__titulo base é alinhado à esquerda) e
     o bloco regional (?regiao=) centraliza o texto dentro da caixa */
  #pagina-copos-label .hero__titulo{ margin-inline:auto; }
  #pagina-copos-label .hero__copy .regional{ text-align:center; }
}

/* ── /copos-termicos ── */
@media (max-width:820px){
  #pagina-copos-termicos .hero{ padding-top:7.5rem; }
  #pagina-copos-termicos .hero__titulo-script{ margin:.34em 0 0 .3em; }
}

/* ── /galao-fit ── */
@media (max-width:820px){
  #pagina-galao-fit .hero{ padding-top:7.5rem; }
  #pagina-galao-fit .hero__titulo-script{ margin:.34em 0 0 4.8em; }
}

/* Informações de decisão nas LPs de anúncios; conteúdo disponível sem JS. */
.hero__resumo{ max-width:36rem; margin:1.2rem 0 0; color:#fff;
  font-size:1rem; line-height:1.55; text-wrap:pretty; }
.hero__atalhos{ display:flex; flex-wrap:wrap; gap:.65rem 1.1rem; margin-top:1.3rem; }
.hero__atalhos a{ color:#fff; font-weight:600; font-size:.875rem;
  text-decoration:underline; text-underline-offset:.25em; padding:.5rem 0; }
.hero__atalhos a:focus-visible{ outline:2px solid currentColor; outline-offset:4px; }
#pagina-copos-label .hero__titulo-faixa,
#pagina-copos-termicos .hero__titulo-faixa{ white-space:normal; max-width:100%; line-height:1.3; }
@media (max-width:820px){
  .hero__resumo{ margin-inline:auto; }
  .hero__atalhos{ justify-content:center; }
}

/* Oferta de frete confirmada; texto sempre renderizado pelo PHP. */
.hero__frete{ margin-top:1rem; padding:.85rem 1rem; max-width:36rem;
  border:1px solid rgb(255 255 255 / .25); border-radius:12px;
  background:rgb(1 42 30 / .88); color:#fff; font-size:.875rem; line-height:1.45; }
.hero__frete strong, .hero__frete span{ display:block; }
.hero__frete strong{ color:#fff; font-size:1rem; }
.hero__frete span{ margin-top:.25rem; }
@media (max-width:820px){ .hero__frete{ margin-inline:auto; } }

/* Hero das internas /copos-termicos e /copos-label — mesmo acabamento
   nas duas: frete discreto em laranja antes do CTA, atalhos com ícone,
   foto alinhada ao topo e entrada em cascata depois do título. O que é
   só de uma página (lista de checks, delays) fica logo abaixo. */
:is(#pagina-copos-termicos, #pagina-copos-label) .hero{ padding-top:clamp(8.5rem, 1rem + 4vw, 9rem); }
:is(#pagina-copos-termicos, #pagina-copos-label) .hero__foto{ align-self:self-start; }
:is(#pagina-copos-termicos, #pagina-copos-label) .hero__copy .pulso{ margin-top:clamp(1.4rem, 2.5vw, 1.6rem); }
:is(#pagina-copos-termicos, #pagina-copos-label) .hero__frete{ padding:.6rem .85rem; max-width:23rem;
  border-left-width: 4px; border-color:rgb(242 84 45 / .45); background:rgb(242 84 45 / .14);
  font-size:.8rem; color:rgb(255 255 255 / .82); }
:is(#pagina-copos-termicos, #pagina-copos-label) .hero__frete strong{ display:flex; align-items:center; gap:.45rem;
  font-size:.875rem; color:#FFB199; }
:is(#pagina-copos-termicos, #pagina-copos-label) .hero__frete strong svg{ width:17px; height:17px; flex:none; }
:is(#pagina-copos-termicos, #pagina-copos-label) .hero__frete span{ margin-top:.15rem; }
:is(#pagina-copos-termicos, #pagina-copos-label) .hero__atalhos{ gap:.45rem; margin-top:1.4rem; }
:is(#pagina-copos-termicos, #pagina-copos-label) .hero__atalhos a{ display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:600; text-decoration:none;
  padding:.42rem .75rem; border-radius:8px; color:rgb(255 255 255 / .88);
  transition:background .2s, border-color .2s, color .2s; }
:is(#pagina-copos-termicos, #pagina-copos-label) .hero__atalhos svg{ width:14px; height:14px; flex:none; color:var(--verde-marca); }
:is(#pagina-copos-termicos, #pagina-copos-label) .hero__atalhos a:hover{ background:rgb(255 255 255 / .14);
  border-color:rgb(255 255 255 / .3); color:#fff; }

/* Checks: no térmico são as linhas do .hero__resumo; na Label, a lista
   .hero__condicoes (o .hero__resumo da Label é o preço). */
#pagina-copos-termicos .hero__resumo{ margin-top:2.5rem; }
#pagina-copos-termicos .hero__resumo span{ display:flex; align-items:center; gap:.5rem; }
#pagina-copos-termicos .hero__resumo span + span{ margin-top:.3rem; }
#pagina-copos-label .hero__condicoes li{ display:inline-flex; align-items:center; gap:.45rem; }
:is(#pagina-copos-termicos .hero__resumo, #pagina-copos-label .hero__condicoes) svg{ width:18px; height:18px; flex:none; color:var(--verde-marca); }
/* Label: condições 2 por linha (desktop — no celular seguem empilhadas,
   ver "Benefícios sempre empilhados") e atalhos 2 por linha sempre. */
@media (min-width:821px){
  #pagina-copos-label .hero .hero__condicoes{ display:grid; grid-template-columns:repeat(2, max-content); gap:.6rem 1.6rem; }
}
#pagina-copos-label .hero__atalhos{ display:grid; grid-template-columns:repeat(2, max-content); justify-items:start; }
@media (max-width:820px){ #pagina-copos-label .hero__atalhos{ justify-content:center; } }
/* Preço da Label na mesma caixa do frete, em verde (frete = laranja). */
#pagina-copos-label .hero__condicoes + .hero__resumo{ padding:.6rem .85rem; max-width:23rem;
  border:1px solid rgb(5 194 117 / .45); border-left-width:4px; border-radius:12px;
  background:rgb(5 194 117 / .12); font-size:.8rem; line-height:1.45; color:rgb(255 255 255 / .82); }
#pagina-copos-label .hero__condicoes + .hero__resumo strong{ display:inline-flex; align-items:center; gap:.45rem;
  font-size:.95rem; color:#7FE3B5; }
#pagina-copos-label .hero__condicoes + .hero__resumo strong svg{ width:17px; height:17px; flex:none;
  animation:heroItemIcone .5s var(--saida) 1.3s both; }
@media (prefers-reduced-motion: reduce){ #pagina-copos-label .hero__condicoes + .hero__resumo strong svg{ animation:none; } }
#pagina-copos-label .hero__condicoes + .hero__resumo small{ font-size:inherit; }
/* frete compacto (só a manchete): caixa do tamanho do texto */
#pagina-copos-label .hero__frete{ width:fit-content; }
@media (min-width:821px){ #pagina-copos-label .hero__titulo + :is(.hero__resumo, .hero__condicoes){ margin-top:2.5rem; } }

/* Entrada em cascata depois do título (a faixa entra em .66s):
   checks um a um → preço (Label) → regional → frete → CTA → atalhos.
   Só opacity/transform; nenhum desses é o LCP (o LCP é o fundo do hero). */
@keyframes heroItemSobe{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes heroItemCheck{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:none; } }
@keyframes heroItemIcone{ from{ opacity:0; transform:translateX(-6px); } to{ opacity:1; transform:none; } }
:is(#pagina-copos-termicos .hero__resumo span, #pagina-copos-label .hero__condicoes li){ animation:heroItemSobe .55s var(--saida) .8s both; }
:is(#pagina-copos-termicos .hero__resumo, #pagina-copos-label .hero__condicoes) svg{ animation:heroItemCheck .4s cubic-bezier(.34,1.56,.64,1) .95s both; }
:is(#pagina-copos-termicos, #pagina-copos-label) .hero__frete{ animation:heroItemSobe .6s var(--saida) 1.1s both; }
:is(#pagina-copos-termicos, #pagina-copos-label) .hero__frete strong svg{ animation:heroItemIcone .5s var(--saida) 1.35s both; }
:is(#pagina-copos-termicos, #pagina-copos-label) .hero__atalhos a{ animation:heroItemSobe .5s var(--saida) 1.45s both; }
/* delays — térmico: 2 checks, 3 atalhos */
#pagina-copos-termicos .hero__resumo span + span{ animation-delay:.9s; }
#pagina-copos-termicos .hero__resumo span + span svg{ animation-delay:1.05s; }
#pagina-copos-termicos .hero__titulo ~ .regional{ animation-delay:1s; }
#pagina-copos-termicos .hero__titulo ~ .pulso{ animation-delay:1.25s; }
#pagina-copos-termicos .hero__atalhos a:nth-child(2){ animation-delay:1.53s; }
#pagina-copos-termicos .hero__atalhos a:nth-child(3){ animation-delay:1.61s; }
/* delays — Label: 4 checks + preço, 4 atalhos (tudo ~.1s depois do térmico) */
#pagina-copos-label .hero__condicoes li:nth-child(2){ animation-delay:.86s; }
#pagina-copos-label .hero__condicoes li:nth-child(3){ animation-delay:.92s; }
#pagina-copos-label .hero__condicoes li:nth-child(4){ animation-delay:.98s; }
#pagina-copos-label .hero__condicoes li:nth-child(2) svg{ animation-delay:1.01s; }
#pagina-copos-label .hero__condicoes li:nth-child(3) svg{ animation-delay:1.07s; }
#pagina-copos-label .hero__condicoes li:nth-child(4) svg{ animation-delay:1.13s; }
#pagina-copos-label .hero__condicoes + .hero__resumo{ animation:heroItemSobe .55s var(--saida) 1.05s both; }
#pagina-copos-label .hero__titulo ~ .regional{ animation-delay:1.1s; }
#pagina-copos-label .hero__frete{ animation-delay:1.15s; }
#pagina-copos-label .hero__frete strong svg{ animation-delay:1.4s; }
#pagina-copos-label .hero__titulo ~ .pulso{ animation-delay:1.28s; }
#pagina-copos-label .hero__atalhos a{ animation-delay:1.4s; }
#pagina-copos-label .hero__atalhos a:nth-child(2){ animation-delay:1.47s; }
#pagina-copos-label .hero__atalhos a:nth-child(3){ animation-delay:1.54s; }
#pagina-copos-label .hero__atalhos a:nth-child(4){ animation-delay:1.61s; }
@media (prefers-reduced-motion: reduce){
  :is(#pagina-copos-termicos .hero__resumo span, #pagina-copos-label .hero__condicoes li,
      #pagina-copos-label .hero__condicoes + .hero__resumo),
  :is(#pagina-copos-termicos .hero__resumo, #pagina-copos-label .hero__condicoes) svg,
  :is(#pagina-copos-termicos, #pagina-copos-label) :is(.hero__frete, .hero__frete strong svg, .hero__atalhos a){ animation:none; }
}

@media (max-width:820px){
  #pagina-copos-termicos .hero__resumo{ width:fit-content; }
  :is(#pagina-copos-termicos, #pagina-copos-label) .hero__frete strong{ justify-content:center; }
}

/* CTAs longos das dobras não devem alargar o grid em celulares estreitos. */
@media (max-width:480px){
  .comparativo .wrap > *{ min-width:0; }
  .comparativo .btn-verde{ max-width:100%; white-space:normal;
    height:auto; min-height:51px; padding:.75em 1.2em; text-align:center; }
}

/* Prévia local: abertura Label orientada ao produto e à intenção de busca. */
#pagina-copos-label .hero--label-direto .hero__titulo{ font-size:clamp(2.8rem,4.7vw,4.6rem); rotate:-3deg; }
#pagina-copos-label .hero--label-direto .hero__titulo-linha:last-child{ font-size:.72em; margin-top:.18em; line-height:1; }
#pagina-copos-label .hero__condicoes{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem 1.1rem; margin:1.15rem 0 1.4rem; color:#fff; font-size:.875rem; }
#pagina-copos-label .hero__legenda{ color:#c7ded5; font-size:.75rem; line-height:1.5; text-align:center; margin:.75rem auto 0; max-width:32rem; }
@media(max-width:820px){
  #pagina-copos-label .hero--label-direto .hero__titulo{ font-size:clamp(2rem,10.4vw,4.6rem); margin-inline:auto; }
  #pagina-copos-label .hero__condicoes{ justify-content:center; gap:.5rem .9rem; }
  #pagina-copos-label .hero--label-direto .btn-verde{ white-space:normal; text-align:center; max-width:100%; padding-inline:1rem; }
}
#pagina-copos-label .hero__legenda{ position:relative; z-index:1; padding:0.8rem; margin-top:-35px; border-radius:8px; font-style:italic; width:50%; opacity: 0.8;}

/* Tirante: a foto aparece só no hero; benefícios ficam em uma coluna. */
#pagina-copos-label .comparativo--sem-foto .wrap{ grid-template-columns:1fr; max-width:760px; }

/* Label: comparação de capacidades e condições comerciais — 24/09/2026. */
#pagina-copos-label .label-tamanhos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:32px 0 20px;text-align:left}
/* ?linha=eco / ?linha=tirante: outra dobra entra entre a faixa de
   credibilidade e o .modelos. O .modelos sobe por baixo da .cred com margem
   negativa (padrão da página); aqui quem faz isso é a dobra que vem logo
   depois da .cred, e o .modelos volta ao espaçamento normal.
   Eco: #eco creme (sobe) → .modelos branco. Tirante: arte escura →
   #tirante branco → .modelos creme. Sem ?linha= nada disso casa. */
#pagina-copos-label .cred + #eco{ background:var(--creme); margin-top:-180px; padding-top:260px; }
#pagina-copos-label #eco + .modelos{ background:#fff; }
#pagina-copos-label :is(#eco, #tirante) + .modelos{ margin-top:0; padding-top:clamp(3.2rem, 2.2rem + 3vw, 5.5rem); }
@media (max-width:820px){
  #pagina-copos-label .cred + #eco{ margin-top:-40px; padding-top:80px; }
}

/* Cards de tamanho: palco creme com a ilustração (550 mais alto, mesma
   escala) + rótulo, capacidade e texto. */
#pagina-copos-label .label-tamanhos article{display:grid;grid-template-columns:104px 1fr;gap:24px;align-items:center;
  padding:22px 26px 22px 22px;border:1px solid rgb(20 10 2 / .06);border-radius:20px;background:#fff;
  box-shadow:0 16px 32px -24px rgb(1 42 30 / .35);transition:transform .25s var(--saida), box-shadow .25s}
#pagina-copos-label .label-tamanhos article:hover{transform:translateY(-3px);box-shadow:0 22px 38px -24px rgb(1 42 30 / .45)}
#pagina-copos-label .label-tamanhos__figura{height:124px;border-radius:16px;background:var(--creme);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px}
#pagina-copos-label .label-tamanhos__copo{width:54px;height:72px;filter:drop-shadow(0 6px 6px rgb(1 42 30 / .18))}
#pagina-copos-label .label-tamanhos__copo--550{height:90px}
#pagina-copos-label .label-tamanhos__rot{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--verde-eyebrow)}
#pagina-copos-label .label-tamanhos h3{display:flex;align-items:baseline;gap:.25em;flex-wrap:wrap;
  font-size:clamp(34px,4vw,48px);line-height:1.1;color:#006b4d;margin:4px 0 8px}
#pagina-copos-label .label-tamanhos small{font-size:.45em}
#pagina-copos-label .label-tamanhos article h3{letter-spacing:-2px}
#pagina-copos-label .label-tamanhos article h3 > span,
#pagina-copos-label .label-tamanhos__extra{letter-spacing:0}
/* nota logo abaixo dos cards: faixa laranja-clara com ícone, afastada da vitrine */
#pagina-copos-label .label-tamanhos + .modelos__nota{display:flex;align-items:center;justify-content:center;gap:.6rem;
  width:fit-content;max-width:100%;margin:0 auto 2.6rem;padding:.7rem 1.1rem;border-radius:12px;
  background:rgb(242 84 45 / .08);border:1px solid rgb(242 84 45 / .22);color:#7a2c17;text-align:left}
#pagina-copos-label .label-tamanhos + .modelos__nota svg{width:20px;height:20px;flex:none;color:var(--laranja)}
#pagina-copos-label .label-tamanhos__extra{align-self:center;margin-left:.3rem;font-size:.75rem;font-weight:700;line-height:1;
  color:#fff;background:var(--laranja);border-radius:999px;padding:.35em .65em}
#pagina-copos-label .label-tamanhos p{line-height:1.6;margin:0;font-size:.9rem}
/* Etapas do pedido: caixas translúcidas no verde escuro da .cond, número
   grande em amarelo (mesma cor dos checks da dobra) e fio ligando as caixas. */
#pagina-copos-label .label-etapas{list-style:none;counter-reset:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;margin:2.4rem 0 .5rem;text-align:left}
#pagina-copos-label .label-etapas li{position:relative;padding:26px 26px 28px;border-radius:18px;
  background:rgb(255 255 255 / .05);border:1px solid rgb(255 255 255 / .12);
  transition:background .25s, border-color .25s, transform .25s var(--saida)}
#pagina-copos-label .label-etapas li:hover{background:rgb(255 255 255 / .08);border-color:rgb(255 202 24 / .35);transform:translateY(-3px)}
#pagina-copos-label .label-etapas li:not(:last-child)::after{content:'';position:absolute;top:50px;right:-21px;width:22px;height:2px;
  background:linear-gradient(90deg, rgb(255 202 24 / .6), rgb(255 202 24 / 0))}
#pagina-copos-label .label-etapas__num{display:inline-flex;align-items:center;justify-content:center;
  min-width:56px;height:48px;padding:0 .6rem;border-radius:12px;
  font-family:var(--pop);font-weight:800;font-size:1.6rem;letter-spacing:-.02em;line-height:1;
  color:var(--escuro-2);background:var(--amarelo-hl);box-shadow:0 10px 22px -10px rgb(255 202 24 / .55)}
#pagina-copos-label .label-etapas h3{color:#fff;font-size:1.15rem;line-height:1.3;margin:18px 0 8px}
#pagina-copos-label .label-etapas p{color:#d5e8df;font-size:.92rem;line-height:1.65;margin:0}
@media(max-width:640px){#pagina-copos-label .label-etapas li::after{display:none}#pagina-copos-label .label-tamanhos,#pagina-copos-label .label-etapas{grid-template-columns:1fr;gap:16px}#pagina-copos-label .label-tamanhos article{padding:18px;grid-template-columns:80px 1fr;gap:16px}#pagina-copos-label .label-tamanhos__figura{height:104px}}

/* Arte inclusa ganha uma linha própria antes do pedido mínimo. */
#pagina-copos-label .hero__condicoes li:first-child{flex-basis:100%}

/* Mobile Label: título → foto única → condições; desktop preservado. */
@media(max-width:820px){
  #pagina-copos-label .hero--label-direto > .wrap{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center}
  #pagina-copos-label .hero--label-direto .hero__copy{display:contents}
  #pagina-copos-label .hero--label-direto .hero__copy > *{order:2}
  #pagina-copos-label .hero--label-direto .hero__copy > .hero__titulo{order:0}
  #pagina-copos-label .hero--label-direto .hero__foto{order:1;align-self:center;width:min(72vw,280px);margin:12px auto 4px;scale:1}
  #pagina-copos-label .hero--label-direto .hero__foto img{max-height:250px;object-fit:contain}
  #pagina-copos-label .hero--label-direto .hero__atalhos{width:100%}
}

/* O fundo ilustrado contém uma faixa clara: não pode ficar atrás dos links
   quando o hero mobile cresce. Fundo sólido mantém o contraste até o fim. */
@media(max-width:820px){
  #pagina-copos-label .hero--label-direto{background-image:none;background-color:#012a1e;padding-bottom:2rem}
  #pagina-copos-label .hero--label-direto + template + .cred{padding-top:1.5rem}
}

/* Benefícios sempre empilhados no mobile, independentemente da largura. */
@media(max-width:820px){
  #pagina-copos-label .hero--label-direto .hero__condicoes{flex-direction:column;flex-wrap:nowrap;align-items:center;gap:.5rem}
  #pagina-copos-label .hero--label-direto .hero__condicoes li{flex-basis:auto}
}

/* Label mobile: cabeçalho removido por aprovação do cliente. */
@media(max-width:820px){
  #pagina-copos-label .hero--label-direto > .topo{display:none}
  #pagina-copos-label .hero--label-direto{padding-top:2rem}
}

/* Aproxima a oferta dos benefícios no celular. */
@media(max-width:820px){
  #pagina-copos-label .hero--label-direto .hero__condicoes{margin-bottom:.5rem}
  #pagina-copos-label .hero--label-direto .hero__condicoes + .hero__resumo{margin-top:.5rem}
}

/* ── /lp/copos-termicos-personalizados2 (landing de campanha Meta Ads) ──
   Sem barra de topo. Hero no molde da /copos-termicos: texto à esquerda,
   foto à direita (empilha e centraliza no celular, como as internas). */
#pagina-copos-termicos-personalizados2 .hero{ padding-top:clamp(3rem, 5vw, 5rem); }
#pagina-copos-termicos-personalizados2 .lp-args{ list-style:none; margin:3.2rem 0 0; display:flex; flex-wrap:wrap;
  gap:.5rem 1.4rem; }
#pagina-copos-termicos-personalizados2 .lp-args li{ display:flex; align-items:center; gap:.45rem;
  font-size:.95rem; color:rgb(255 255 255 / .92); }
#pagina-copos-termicos-personalizados2 .lp-args svg{ width:20px; height:20px; color:var(--verde-marca); flex:none; }
#pagina-copos-termicos-personalizados2 .hero__copy .pulso{ margin-top:1.8rem; }
@media (max-width:820px){
  #pagina-copos-termicos-personalizados2 .hero{ padding-top:2.5rem; }
  #pagina-copos-termicos-personalizados2 .hero__titulo{ margin-inline:auto; }
  #pagina-copos-termicos-personalizados2 .hero__titulo-script{ margin:.34em 0 0 .3em; }
  #pagina-copos-termicos-personalizados2 .lp-args{ justify-content:center; }
}
#pagina-copos-termicos-personalizados2 .modelos .titulo,
#pagina-copos-termicos-personalizados2 .lp-bene .titulo,
#pagina-copos-termicos-personalizados2 .lp-brinde .titulo,
#pagina-copos-termicos-personalizados2 .cond .titulo{ text-align:center; }

/* Por que pedir: cards empilhados à esquerda (50%) + foto-slide à direita (50%) */
#pagina-copos-termicos-personalizados2 .lp-bene{ padding-block:clamp(2.5rem, 4vw, 4rem); }
#pagina-copos-termicos-personalizados2 .lp-bene__linha{ margin-top:2.2rem; display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem, 4vw, 3.5rem); align-items:stretch; }
#pagina-copos-termicos-personalizados2 .lp-bene .grid-cards{ margin-top:0; grid-template-columns:1fr; }
/* ícone ao lado do título; a frase vai embaixo, na largura toda do card */
#pagina-copos-termicos-personalizados2 .lp-bene .card{ display:grid; grid-template-columns:auto 1fr; align-items:center;
  column-gap:1rem; }
#pagina-copos-termicos-personalizados2 .lp-bene .card__ico{ margin-bottom:0; }
#pagina-copos-termicos-personalizados2 .lp-bene .card h3{ font-size:1.3rem; }
#pagina-copos-termicos-personalizados2 .lp-bene .card p{ grid-column:1 / -1; margin-top:.8rem; }
/* a altura do slide acompanha a dos 3 cards (a linha do grid estica); as fotos cobrem a caixa */
#pagina-copos-termicos-personalizados2 .lp-bene__slide{ width:100%; min-height:100%; }
#pagina-copos-termicos-personalizados2 .lp-bene__slide img,
#pagina-copos-termicos-personalizados2 .lp-bene__slide img + img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:820px){
  #pagina-copos-termicos-personalizados2 .lp-bene__linha{ grid-template-columns:1fr; }
  #pagina-copos-termicos-personalizados2 .lp-bene__slide{ min-height:0; aspect-ratio:1 / 1; }
}

/* O brinde perfeito para... */
#pagina-copos-termicos-personalizados2 .lp-brinde{ padding-block:clamp(2.5rem, 4vw, 4rem); }

/* Condições: ícone grande em cima do título de cada item */
#pagina-copos-termicos-personalizados2 .cond__bullets{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:1rem; max-width:980px; margin-inline:auto; }
#pagina-copos-termicos-personalizados2 .cond__bullets li{ flex-direction:column; justify-content:flex-start; gap:.8rem;
  padding:1.6rem 1rem; text-align:center; font-size:1rem; font-weight:600; border-radius:16px; }
#pagina-copos-termicos-personalizados2 .cond__bullets svg{ width:46px; height:46px; }
#pagina-copos-termicos-personalizados2 .cond .pulso{ margin-top:2.2rem; }
#pagina-copos-termicos-personalizados2 .cond .pulso .btn-verde{ margin-top:0; }

/* rodapé mínimo ($rodape_minimo): só marca pequena + copyright, centralizados, com respiro */
.rodape--minimo{ padding:4rem 0; }
.rodape--minimo .wrap{ flex-direction:column; align-items:center; justify-content:center;
  gap:1.2rem; text-align:center; }
.rodape--minimo .rodape__logo{ width:110px; }
.rodape--minimo small{ color:#7F8884; font-weight:400; font-size:.82rem; }

/* ── /lp/labelads-forms2 (landing de campanha, Copos Label — versão no padrão do site) ──
   Mesma organização da LP antiga: hero centralizado (H1 + texto + CTA, foto larga embaixo),
   3 cards em linha + foto, 2 cards, 3 cards + CTA + foto, preços. */
#pagina-labelads-forms2 .hero{ padding-top:clamp(2.5rem, 4vw, 4rem); padding-bottom:clamp(6rem, 13vw, 15rem); }   /* deixa a faixa ondulada do fundo aparecer abaixo da foto */
#pagina-labelads-forms2 .hero .wrap{ grid-template-columns:1fr; justify-items:center; gap:3rem; text-align:center; }
#pagina-labelads-forms2 .hero__copy{ padding-bottom:0; display:flex; flex-direction:column; align-items:center; }
#pagina-labelads-forms2 .hero__titulo{ margin:0 auto 15px; text-align:center; font-size:4rem; }
#pagina-labelads-forms2 .hero__titulo small{ font-size:.55em; }
@media (max-width:820px){ #pagina-labelads-forms2 .hero__titulo{ font-size:min(7vw, 4rem); } }   /* a linha mais longa tem ~12em de largura */
#pagina-labelads-forms2 .hero__titulo-faixa{ margin:.3em auto 0; }
#pagina-labelads-forms2 .lp-texto{ max-width:760px; text-wrap:balance; margin:2rem auto 1.6rem; font-size:1.02rem; line-height:1.55;
  color:rgb(255 255 255 / .92); }
#pagina-labelads-forms2 .lp-texto strong{ color:#FFFFFF; font-weight:700; }
#pagina-labelads-forms2 .hero__copy .pulso{ margin-top:0; }
#pagina-labelads-forms2 .hero__copy .btn-verde{ margin-left:0; }
#pagina-labelads-forms2 .hero__foto{ width:100%; max-width:1000px; margin:0; align-self:auto; animation:none; }
#pagina-labelads-forms2 .hero__foto img{ animation:none; }
/* fotos das LPs são retangulares (não recortes): moldura arredondada com sombra */
#pagina-labelads-forms2 .hero__foto img,
#pagina-labelads-forms2 .lp-foto img{ display:block; width:100%; height:auto; border-radius:var(--raio); }
#pagina-labelads-forms2 .hero__foto img{ box-shadow:0 30px 60px -22px rgb(0 0 0 / .6); }
#pagina-labelads-forms2 .lp-foto{ max-width:1000px; margin:2.4rem auto 0; border-radius:var(--raio); overflow:hidden;
  box-shadow:0 26px 52px -26px rgb(20 10 2 / .35); }
#pagina-labelads-forms2 .lp-foto img{ border-radius:0; }
#pagina-labelads-forms2 .lp-bene .titulo,
#pagina-labelads-forms2 .lp-vantagens .titulo,
#pagina-labelads-forms2 .lp-brinde .titulo,
#pagina-labelads-forms2 .cond .titulo{ text-align:center; }
#pagina-labelads-forms2 .lp-bene,
#pagina-labelads-forms2 .lp-vantagens,
#pagina-labelads-forms2 .lp-brinde{ padding-block:clamp(2.5rem, 4vw, 4rem); }
#pagina-labelads-forms2 .lp-bene .card__ico b{ font-family:var(--pop); font-weight:800; font-size:1.3rem; color:var(--verde); }
#pagina-labelads-forms2 .grid-cards{ grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
#pagina-labelads-forms2 .lp-bene .card{ display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:1rem; }
#pagina-labelads-forms2 .lp-bene .card__ico{ margin-bottom:0; }
#pagina-labelads-forms2 .lp-bene .card p{ grid-column:1 / -1; margin-top:.8rem; }
#pagina-labelads-forms2 .card h3{ font-size:1.2rem; }
#pagina-labelads-forms2 .lp-vantagens__lista{ max-width:820px; margin-inline:auto; }
#pagina-labelads-forms2 .lp-brinde .wrap{ text-align:center; }
#pagina-labelads-forms2 .lp-brinde .card{ text-align:left; }
#pagina-labelads-forms2 .lp-brinde .pulso{ margin-top:2.2rem; }

/* Preços e pedido mínimo: 3 cartões translúcidos sobre o fundo escuro */
#pagina-labelads-forms2 .lp-precos{ margin:2rem auto 0; max-width:980px; display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1rem; }
#pagina-labelads-forms2 .lp-preco{ background:rgb(255 255 255 / .06); border:1px solid rgb(255 255 255 / .10);
  border-radius:16px; padding:1.6rem 1rem; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
#pagina-labelads-forms2 .lp-preco__tag{ font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--verde-marca); }
#pagina-labelads-forms2 .lp-preco strong{ font-family:var(--pop); font-weight:700; font-size:clamp(1.5rem, 3vw, 2rem);
  line-height:1.15; color:var(--amarelo-hl); }
#pagina-labelads-forms2 .lp-preco p{ font-size:.92rem; line-height:1.45; color:rgb(255 255 255 / .8); }
#pagina-labelads-forms2 .cond .pulso{ margin-top:2.2rem; }
#pagina-labelads-forms2 .cond .pulso .btn-verde{ margin-top:0; }
#pagina-labelads-forms2 .rodape{ display:none; }   /* sem rodapé nesta LP (o modal e o botão flutuante continuam) */
/* seções verdes do fim: linha de topo e cards no estilo dos depoimentos (.depo__card) */
#pagina-labelads-forms2 .lp-brinde,
#pagina-labelads-forms2 .cond{ border-top:1px solid rgb(255 255 255 / .07); }
#pagina-labelads-forms2 .lp-brinde .card{ background:rgba(255,255,255,.045); border:1px solid rgb(255 255 255 / .08);
  border-radius:16px; box-shadow:none; }
#pagina-labelads-forms2 .lp-brinde .card::before{ display:none; }
#pagina-labelads-forms2 .lp-brinde .card h3,
#pagina-labelads-forms2 .lp-brinde .card strong{ color:#FFFFFF; }
#pagina-labelads-forms2 .lp-brinde .card p{ color:rgb(255 255 255 / .8); }
#pagina-labelads-forms2 .lp-brinde .card__ico{ background:rgb(5 194 117 / .14); }
#pagina-labelads-forms2 .lp-brinde .card__ico svg{ color:var(--verde-marca); }