/* ==========================================================================
   Morimá / folha de estilo principal
   Paleta da marca: azul #2E3192 · verde claro #BCD63E
   ========================================================================== */

:root{
  /* Marca */
  --azul:        #2E3192;
  --azul-vivo:   #1c72d6;   /* azul vibrante, para botões e blocos de destaque */
  --azul-900:    #14163f;
  --azul-800:    #1c1f5c;
  --azul-700:    #262a7d;
  --azul-300:    #7c80d4;
  --azul-100:    #e8e9fb;

  --verde:       #bcd63e;
  --verde-600:   #9cb824;
  --verde-700:   #7d9418;
  --verde-100:   #f0f7d4;

  /* Neutros */
  --tinta:       #14163f;
  --texto:       #3b3f5c;
  --cinza:       #5f6478;   /* escurecido: 4.24:1 nao passava no minimo de 4.5:1 */
  --verde-texto: #55660f;   /* verde legivel sobre fundos claros */
  --linha:       #e6e8f2;
  --bg:          #f6f8f0;
  --branco:      #ffffff;

  /* Acentos da faixa "TINTAS" do logo */
  --c1:#e63946; --c2:#f4873a; --c3:#fdd525; --c4:#4caf50; --c5:#2e78c8;

  --r-sm: 12px;
  --r:    20px;
  --r-lg: 32px;
  --sombra:    0 12px 34px rgba(20,22,63,.10);
  --sombra-lg: 0 28px 60px rgba(20,22,63,.18);
  --transicao: .35s cubic-bezier(.22,.61,.36,1);

  --largura: 1200px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:96px; }

body{
  margin:0;
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--texto);
  background:var(--bg);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4,.display{
  font-family:'Fredoka',system-ui,sans-serif;
  color:var(--tinta);
  line-height:1.1;
  margin:0 0 .4em;
  font-weight:600;
  letter-spacing:-.01em;
}
h1{ font-size:clamp(2.2rem,5.4vw,4rem); }
h2{ font-size:clamp(1.8rem,3.8vw,2.85rem); }
h3{ font-size:clamp(1.15rem,2vw,1.45rem); }
p{ margin:0 0 1em; }
a{ color:var(--azul); text-decoration:none; }
img{ max-width:100%; display:block; height:auto; }
button{ font:inherit; }

.container{ width:min(100% - 2rem, var(--largura)); margin-inline:auto; }
/* faixas de fundo nas cores da marca, para o site não ficar só branco */
.fundo-azul{ background:var(--azul-100); }
.fundo-verde{ background:var(--verde-100); }
.secao{ padding:clamp(3.5rem,8vw,6.5rem) 0; position:relative; }
.centro{ text-align:center; }
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* link de atalho para quem navega por teclado */
.pular{
  position:absolute; left:50%; top:-100px; transform:translateX(-50%); z-index:200;
  background:var(--azul); color:#fff; font-weight:800;
  padding:.8rem 1.4rem; border-radius:0 0 14px 14px; transition:top .2s ease;
}
.pular:focus{ top:0; }

/* ---------- Elementos de marca --------------------------------------- */

/* Faixa colorida que cita as letras do logo "TINTAS" */
.faixa-cores{ display:flex; height:6px; width:84px; border-radius:99px; overflow:hidden; }
.faixa-cores span{ flex:1; }
.faixa-cores span:nth-child(1){background:var(--c1)}
.faixa-cores span:nth-child(2){background:var(--c2)}
.faixa-cores span:nth-child(3){background:var(--c3)}
.faixa-cores span:nth-child(4){background:var(--c4)}
.faixa-cores span:nth-child(5){background:var(--c5)}
.centro .faixa-cores{ margin-inline:auto; }

.selo{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--verde-100); color:var(--verde-700);
  font-weight:800; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.45rem 1rem; border-radius:99px; margin-bottom:1rem;
}
.selo--claro{ background:rgba(188,214,62,.16); color:var(--verde); }

.olho{ /* linha de apoio acima dos títulos */
  font-weight:800; letter-spacing:.04em;
  font-size:.88rem; color:var(--verde-texto); margin-bottom:.6rem;
}

/* Onda: eco do "swoosh" azul do logo */
.onda{ display:block; width:100%; height:clamp(48px,7vw,110px); }
.onda path{ fill:var(--bg); }
.onda--branca path{ fill:var(--branco); }
.onda--topo{ transform:rotate(180deg); }

/* Estrelinhas de brilho do logo */
.brilho{ position:absolute; color:var(--verde); opacity:.85; animation:cintila 3.2s ease-in-out infinite; }
@keyframes cintila{ 0%,100%{transform:scale(.7) rotate(0deg);opacity:.35} 50%{transform:scale(1.1) rotate(20deg);opacity:1} }

/* ---------- Botões ---------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.92rem 1.7rem; border-radius:99px; border:2px solid transparent;
  font-family:'Fredoka',sans-serif; font-weight:500; font-size:1.02rem;
  cursor:pointer; transition:var(--transicao); text-align:center;
}
.btn svg{ width:20px; height:20px; }
.btn--verde{ background:var(--verde); color:var(--azul-900); box-shadow:0 10px 24px rgba(188,214,62,.4); }
.btn--verde:hover{ background:#c9e055; transform:translateY(-3px); box-shadow:0 16px 30px rgba(188,214,62,.5); }
.btn--azul{ background:var(--azul); color:#fff; box-shadow:0 10px 24px rgba(46,49,146,.3); }
.btn--azul:hover{ background:var(--azul-700); transform:translateY(-3px); }
.btn--azul-vivo{ background:var(--azul-vivo); color:#fff; box-shadow:0 10px 24px rgba(28,114,214,.45); }
.btn--azul-vivo:hover{ background:#2b8ae6; transform:translateY(-3px); box-shadow:0 16px 30px rgba(43,138,230,.55); }
.btn--linha{ border-color:var(--azul); color:var(--azul); background:transparent; }
.btn--linha:hover{ background:var(--azul); color:#fff; transform:translateY(-3px); }
.btn--linha-claro{ border-color:rgba(255,255,255,.55); color:#fff; }
.btn--linha-claro:hover{ background:#fff; color:var(--azul); }
.btn--bloco{ width:100%; }

/* ---------- Cabeçalho -------------------------------------------------- */
.topo{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.88); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:var(--transicao);
}
.topo.rolou{ border-bottom-color:var(--linha); box-shadow:0 6px 24px rgba(20,22,63,.07); }
.topo__int{ display:flex; align-items:center; gap:1.5rem; min-height:78px; }
.topo__logo img{ height:48px; width:auto; }
/* nessas duas o "TINTAS" e o "PRODUTOS DE LIMPEZA" ocupam parte da altura,
   então o emblema sairia menor que o da home; sobem um pouco para empatar */
.topo__logo img[src*="logo-tintas"]{ height:60px; }
.topo__logo img[src*="logo-limpeza"]{ height:56px; }
.topo nav{ margin-left:auto; }
.menu{ display:flex; align-items:center; gap:.4rem; list-style:none; margin:0; padding:0; }
.menu a{
  display:block; padding:.55rem .95rem; border-radius:99px; font-weight:700;
  color:var(--tinta); font-size:.97rem; transition:var(--transicao);
}
.menu a:hover{ background:var(--azul-100); color:var(--azul); }
.menu a.ativo{ color:var(--azul); background:var(--azul-100); }
.topo__cta{ display:inline-flex; }
.hamburguer{
  display:none; margin-left:auto; width:46px; height:46px; border:0; border-radius:14px;
  background:var(--azul-100); color:var(--azul); cursor:pointer; align-items:center; justify-content:center;
}
.hamburguer svg{ width:24px; height:24px; }

@media (max-width:940px){
  .topo nav{
    position:fixed; inset:78px 0 auto; background:#fff; padding:1rem;
    border-bottom:1px solid var(--linha); box-shadow:var(--sombra);
    transform:translateY(-130%); transition:var(--transicao); margin-left:0;
  }
  .topo nav.aberto{ transform:translateY(0); }
  .menu{ flex-direction:column; align-items:stretch; gap:.2rem; }
  .menu a{ padding:.9rem 1rem; }
  .hamburguer{ display:flex; }
  .topo__cta{ display:none; }
}

/* ---------- Carrinho --------------------------------------------------- */
.topo__acoes{ display:flex; align-items:center; gap:.5rem; margin-left:1rem; }

.carrinho-btn,
.busca-btn{
  position:relative; width:46px; height:46px; border:0; border-radius:14px;
  background:var(--azul-100); color:var(--azul); cursor:pointer;
  display:grid; place-items:center; transition:var(--transicao); flex:none;
}
.busca-btn:hover{ background:var(--azul); color:#fff; }
.busca-btn svg{ width:22px; height:22px; }
.busca-btn:focus-visible,
.carrinho-btn:focus-visible{ outline:3px solid var(--azul-vivo); outline-offset:2px; }
.carrinho-btn:hover{ background:var(--azul); color:#fff; }
.carrinho-btn svg{ width:23px; height:23px; }
.carrinho-btn__contador{
  position:absolute; top:-5px; right:-5px; min-width:21px; height:21px; padding:0 5px;
  border-radius:99px; background:var(--verde); color:var(--azul-900);
  font-size:.72rem; font-weight:900; display:grid; place-items:center;
  border:2px solid #fff; transform:scale(0); transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.carrinho-btn__contador.tem{ transform:scale(1); }

.carrinho{ position:fixed; inset:0; z-index:120; visibility:hidden; }
.carrinho.aberto{ visibility:visible; }
.carrinho__fundo{
  position:absolute; inset:0; background:rgba(20,22,63,.55); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .35s ease;
}
.carrinho.aberto .carrinho__fundo{ opacity:1; }
.carrinho__painel{
  position:absolute; top:0; right:0; height:100%; width:min(100%,420px);
  background:var(--bg); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .38s cubic-bezier(.22,.61,.36,1);
  box-shadow:-10px 0 40px rgba(20,22,63,.25);
}
.carrinho.aberto .carrinho__painel{ transform:none; }

.carrinho__topo{
  display:flex; align-items:center; gap:1rem; padding:1.2rem 1.3rem;
  background:var(--azul); color:#fff;
}
.carrinho__topo h2{ color:#fff; font-size:1.3rem; margin:0; flex:1; }
.carrinho__fechar{
  width:38px; height:38px; border:0; border-radius:50%; cursor:pointer; flex:none;
  background:rgba(255,255,255,.18); color:#fff; display:grid; place-items:center;
  transition:var(--transicao);
}
.carrinho__fechar:hover{ background:#fff; color:var(--azul); transform:rotate(90deg); }
.carrinho__fechar svg{ width:19px; height:19px; }

.carrinho__itens{ flex:1; overflow-y:auto; padding:1rem 1.1rem; display:grid; gap:.7rem; align-content:start; }

.item-carrinho{
  display:grid; grid-template-columns:62px 1fr auto; gap:.8rem; align-items:center;
  background:#fff; border-radius:16px; padding:.7rem; border:1px solid var(--linha);
}
.item-carrinho__foto{
  width:62px; height:62px; border-radius:12px; overflow:hidden; background:var(--cor,#eee);
  display:grid; place-items:center;
}
.item-carrinho__foto img{ width:100%; height:100%; object-fit:cover; }
.item-carrinho__foto--claro img{ object-fit:contain; padding:3px; background:#fff; }
.item-carrinho h3{ font-size:.97rem; margin:0 0 .15rem; line-height:1.25; }
.item-carrinho small{ color:var(--cinza); font-size:.82rem; font-weight:700; }
.item-carrinho__lado{ display:grid; gap:.4rem; justify-items:center; }
.qtd{ display:flex; align-items:center; gap:.1rem; background:var(--bg); border-radius:99px; padding:2px; }
.qtd button{
  width:28px; height:28px; border:0; border-radius:50%; background:transparent;
  color:var(--azul); font-size:1.1rem; font-weight:900; cursor:pointer; line-height:1;
  display:grid; place-items:center; transition:var(--transicao);
}
.qtd button:hover{ background:var(--azul); color:#fff; }
.qtd span{ min-width:24px; text-align:center; font-weight:900; font-size:.92rem; }
.item-carrinho__tirar{
  border:0; background:transparent; color:var(--cinza); cursor:pointer;
  font-size:.78rem; font-weight:800; text-decoration:underline; padding:2px;
}
.item-carrinho__tirar:hover{ color:#c0392b; }

.carrinho__vazio{ text-align:center; padding:3rem 1.5rem; color:var(--cinza); }
.carrinho__vazio svg{ width:64px; height:64px; color:var(--linha); margin:0 auto 1rem; }
.carrinho__vazio strong{ display:block; color:var(--tinta); font-size:1.05rem; margin-bottom:.3rem; }

.carrinho__rodape{ padding:1.1rem 1.2rem 1.3rem; background:#fff; border-top:1px solid var(--linha); }
/* itens e formulário rolam juntos; o botão do WhatsApp fica fixo embaixo */
.carrinho__corpo{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.carrinho__corpo .carrinho__itens{ flex:0 0 auto; overflow:visible; }

/* dados de quem está pedindo, logo acima do botão do WhatsApp */
.carrinho__dados{
  flex:none; padding:1rem 1.2rem; border-top:1px solid var(--linha);
  background:var(--bg); display:grid; gap:.7rem;
}
.campo-linha{ display:grid; gap:.3rem; }
.campo-linha label{
  font-size:.82rem; font-weight:800; color:var(--tinta);
}
.campo-linha label span{ color:#c0392b; }
.campo-linha label small{ font-weight:700; color:var(--cinza); }
.campo-linha input,
.campo-linha select,
.campo-linha textarea{
  width:100%; border:2px solid var(--linha); border-radius:10px;
  padding:.55rem .7rem; font:inherit; font-size:.92rem;
  color:var(--texto); background:#fff; transition:border-color .18s, box-shadow .18s;
}
.campo-linha textarea{ resize:vertical; min-height:2.6rem; }
.campo-linha input:focus,
.campo-linha select:focus,
.campo-linha textarea:focus{
  outline:0; border-color:var(--azul-vivo); box-shadow:0 0 0 3px rgba(28,114,214,.15);
}
.campo-linha input[aria-invalid="true"]{ border-color:#c0392b; }
.campo-erro{
  margin:0; font-size:.82rem; font-weight:800; color:#c0392b;
}
.campo-erro[hidden]{ display:none; }

.carrinho__resumo{ font-weight:800; color:var(--tinta); margin:0 0 .8rem; font-size:.95rem; }
.carrinho__contagem{ display:block; color:var(--cinza); font-size:.88rem; }
.carrinho__soma{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-top:.35rem; padding-top:.45rem; border-top:1px solid var(--linha);
}
.carrinho__soma small{ font-size:.85rem; color:var(--cinza); }
.carrinho__soma b{ font-size:1.3rem; font-weight:900; color:var(--azul); }
.carrinho__ressalva{ display:block; margin-top:.3rem; font-size:.78rem; font-weight:700; color:var(--cinza); }
.item-carrinho__valor{ display:block; margin-top:.15rem; font-size:.95rem; font-weight:900; color:var(--azul); }
.item-carrinho__valor--consulta{ font-size:.8rem; font-weight:800; color:var(--cinza); }

/* valor dentro do detalhe do produto, que acompanha o volume escolhido */
.modal__valor{
  display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
  margin:.9rem 0 1rem; padding:.85rem 1rem;
  background:var(--azul-100); border-radius:var(--r);
}
.modal__valor-rotulo{ font-size:.82rem; font-weight:800; color:var(--cinza); }
.modal__valor-num{ font-size:1.6rem; font-weight:900; color:var(--azul); letter-spacing:-.02em; }
.modal__valor-num--consulta{ font-size:1.1rem; }
.modal__valor small{ flex-basis:100%; font-size:.8rem; font-weight:700; color:var(--cinza); }
.carrinho__limpar{
  width:100%; margin-top:.6rem; border:0; background:transparent; color:var(--cinza);
  font-weight:800; font-size:.88rem; cursor:pointer; padding:.5rem;
}
.carrinho__limpar:hover{ color:#c0392b; }
.carrinho__nota{ font-size:.8rem; color:var(--cinza); margin:.7rem 0 0; text-align:center; line-height:1.45; }

/* botão de adicionar dentro do card */
.produto__rodape{
  display:flex; align-items:center; gap:.5rem .7rem;
  justify-content:space-between; flex-wrap:wrap;
}
.produto__rodape .produto__link{ white-space:nowrap; }
.add-carrinho{
  border:0; border-radius:99px; background:var(--verde); color:var(--azul-900);
  font-family:'Fredoka',sans-serif; font-weight:500; font-size:.9rem;
  padding:.45rem .9rem; cursor:pointer; display:inline-flex; align-items:center; gap:.3rem;
  transition:var(--transicao); flex:none; white-space:nowrap;
}
.add-carrinho:hover{ background:#c9e055; transform:translateY(-2px); }
.add-carrinho svg{ width:17px; height:17px; }
.add-carrinho.feito{ background:var(--azul); color:#fff; }

/* aviso curto quando um item entra no carrinho */
.aviso{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,120%);
  background:var(--azul-900); color:#fff; padding:.85rem 1.4rem; border-radius:99px;
  font-weight:800; font-size:.92rem; z-index:130; box-shadow:var(--sombra-lg);
  transition:transform .35s cubic-bezier(.22,.61,.36,1); max-width:90vw; text-align:center;
}
.aviso.aparece{ transform:translate(-50%,0); }

@media (max-width:940px){
  .topo__acoes{ margin-left:auto; }
}

/* ---------- Hero ------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(120% 90% at 85% 0%, #3a3eb0 0%, transparent 55%),
    linear-gradient(160deg, var(--azul) 0%, var(--azul-800) 55%, var(--azul-900) 100%);
  padding:clamp(3.5rem,8vw,6rem) 0 0;
}
.hero h1,.hero h2{ color:#fff; }

/* variação verde para a linha de limpeza */
.hero--limpeza{
  background:
    radial-gradient(120% 90% at 85% 0%, #a9c832 0%, transparent 55%),
    linear-gradient(160deg, #8fae22 0%, #55781a 55%, #2f4a0c 100%);
}
.hero__lata--branca{ background:#fff; padding:1.1rem; }
.hero__grade{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem);
  align-items:center; padding-bottom:clamp(3rem,7vw,5rem); position:relative; z-index:2;
}
.hero__texto p{ color:rgba(255,255,255,.82); font-size:clamp(1.02rem,1.5vw,1.2rem); max-width:52ch; }
.hero__acoes{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.8rem; }
.hero .destaque-verde{ color:var(--verde); }

/* Gotas / borrões de tinta desfocados ao fundo */
.borrao{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; pointer-events:none; }
.borrao--1{ width:420px; height:420px; background:var(--verde); top:-140px; right:-90px; opacity:.32; }
.borrao--2{ width:340px; height:340px; background:#4a4fd1; bottom:-120px; left:-100px; opacity:.55; }

/* Bloco de imagem do hero (lata + anéis) */
.hero__arte{ position:relative; display:flex; justify-content:center; align-items:center; min-height:340px; }
.hero__anel{
  position:absolute; border-radius:50%; border:2px dashed rgba(255,255,255,.18);
  animation:gira 26s linear infinite;
}
.hero__anel--1{ width:min(94%,430px); aspect-ratio:1; }
.hero__anel--2{ width:min(74%,340px); aspect-ratio:1; border-style:solid; border-color:rgba(188,214,62,.28); animation-direction:reverse; animation-duration:34s; }
@keyframes gira{ to{ transform:rotate(360deg); } }
.hero__lata{
  position:relative; width:min(78%,330px); border-radius:26px;
  box-shadow:0 40px 70px rgba(0,0,0,.35); animation:flutua 6s ease-in-out infinite;
}
@keyframes flutua{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }
.hero__lata--logo{
  width:min(86%,380px); background:#fff;
  padding:clamp(1.3rem,3vw,2.1rem); border-radius:28px;
}

.hero__rodape{ position:relative; z-index:2; }

@media (max-width:860px){
  .hero__grade{ grid-template-columns:1fr; text-align:center; }
  .hero__texto p{ margin-inline:auto; }
  .hero__acoes{ justify-content:center; }
  .hero .faixa-cores{ margin-inline:auto; }
  .hero__arte{ order:-1; min-height:280px; }
}

/* ---------- Faixa de indicadores -------------------------------------- */
.numeros{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
  background:var(--branco); border-radius:var(--r-lg); padding:clamp(1.4rem,3vw,2.2rem);
  box-shadow:var(--sombra); margin-top:-3.5rem; position:relative; z-index:5;
}
.numeros div{ text-align:center; padding:.6rem; }
.numeros b{
  display:block; font-family:'Fredoka',sans-serif; font-size:clamp(1.7rem,3.4vw,2.5rem);
  color:var(--azul); line-height:1;
}
.numeros span{ font-size:.86rem; color:var(--cinza); font-weight:700; }
@media (max-width:700px){ .numeros{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Carrossel -------------------------------------------------- */
.carrossel{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sombra-lg); background:var(--azul-900);
}
.carrossel__janela{ overflow:hidden; }
.carrossel__trilho{
  display:flex; transition:transform .65s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.slide{
  min-width:100%; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
  padding:clamp(2rem,4.5vw,3.8rem) clamp(1.6rem,5vw,4rem);
  background-color:var(--cor);
  background-image:
    radial-gradient(90% 70% at 85% 10%, rgba(255,255,255,.16) 0%, transparent 60%),
    linear-gradient(150deg, rgba(255,255,255,.08) 0%, rgba(0,0,0,.3) 100%);
  color:#fff; position:relative;
}
.slide h2{ color:#fff; font-size:clamp(1.6rem,3.6vw,2.7rem); margin-bottom:.5rem; }
.slide p{ color:rgba(255,255,255,.85); max-width:44ch; margin-bottom:1.5rem; }
.slide__olho{
  font-weight:800; letter-spacing:.03em;
  font-size:.9rem; color:rgba(255,255,255,.92); display:block; margin-bottom:.7rem;
}
.slide__acoes{ display:flex; flex-wrap:wrap; gap:.7rem; }
.slide__arte{ display:flex; justify-content:center; }
.slide__foto{
  width:min(100%,290px); border-radius:24px; overflow:hidden;
  box-shadow:0 26px 50px rgba(0,0,0,.35);
}
.slide__foto img{ width:100%; display:block; }
.slide__foto--branca{ background:#fff; padding:.9rem; }

.carrossel__seta{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:46px; height:46px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.9); color:var(--tinta);
  display:grid; place-items:center; transition:var(--transicao);
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.carrossel__seta:hover{ background:#fff; transform:translateY(-50%) scale(1.08); }
.carrossel__seta svg{ width:22px; height:22px; }
.carrossel__seta--ant{ left:14px; }
.carrossel__seta--prox{ right:14px; }

.carrossel__controles{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%); z-index:4;
  display:flex; align-items:center; gap:.25rem;
}
.carrossel__pontos{ display:flex; gap:.15rem; }
/* alvo de toque de 24px conforme WCAG 2.2; o ponto visivel continua pequeno */
.carrossel__pontos button{
  width:26px; height:26px; padding:0; border:0; background:transparent;
  cursor:pointer; position:relative;
}
.carrossel__pontos button::after{
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:10px; height:10px; border-radius:99px;
  background:rgba(255,255,255,.5); transition:var(--transicao);
}
.carrossel__pontos button:hover::after{ background:rgba(255,255,255,.85); }
.carrossel__pontos button[aria-current="true"]::after{ width:22px; background:var(--verde); }

.carrossel__pausa{
  width:30px; height:26px; border:0; background:transparent; cursor:pointer;
  color:rgba(255,255,255,.75); display:grid; place-items:center;
  transition:var(--transicao); border-radius:8px;
}
.carrossel__pausa:hover{ color:#fff; background:rgba(255,255,255,.18); }
.carrossel__pausa svg{ width:15px; height:15px; }

@media (max-width:820px){
  .slide{ grid-template-columns:1fr; text-align:center; padding-bottom:3.4rem; }
  .slide p{ margin-inline:auto; }
  .slide__acoes{ justify-content:center; }
  .slide__arte{ order:-1; }
  .slide__foto{ width:min(62%,210px); }
  .carrossel__seta{ width:38px; height:38px; }
  .carrossel__seta--ant{ left:8px; }
  .carrossel__seta--prox{ right:8px; }
}

/* ---------- Cards de linha (Tintas / Limpeza) ------------------------- */
.linhas{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem; }
@media (max-width:820px){ .linhas{ grid-template-columns:1fr; } }

.linha-card{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  padding:clamp(1.8rem,4vw,2.8rem); color:#fff; min-height:330px;
  display:flex; flex-direction:column; justify-content:flex-end;
  transition:var(--transicao); box-shadow:var(--sombra);
}
.linha-card::after{
  content:''; position:absolute; inset:0; opacity:.16; pointer-events:none;
  background:radial-gradient(circle at 80% 15%, #fff 0%, transparent 45%);
}
.linha-card:hover{ transform:translateY(-8px); box-shadow:var(--sombra-lg); }
.linha-card--tintas{ background:linear-gradient(150deg,var(--azul) 0%,var(--azul-900) 100%); }
.linha-card--limpeza{ background:linear-gradient(150deg,var(--verde-600) 0%,#5f8a1c 100%); }
.linha-card h3{ color:#fff; font-size:clamp(1.5rem,3vw,2rem); }
.linha-card p{ color:rgba(255,255,255,.85); position:relative; z-index:2; max-width:42ch; }
.linha-card__logo{
  position:relative; z-index:2; background:#fff; border-radius:16px; padding:.55rem .8rem;
  align-self:flex-start; margin-bottom:auto; box-shadow:0 10px 26px rgba(0,0,0,.2);
}
.linha-card__logo img{ height:52px; width:auto; }
.linha-card .btn{ align-self:flex-start; position:relative; z-index:2; margin-top:.6rem; }
.linha-card__tag{
  position:absolute; top:1.4rem; right:1.4rem; z-index:2;
  background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.35);
  padding:.35rem .9rem; border-radius:99px; font-size:.76rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
}

/* ---------- Diferenciais ---------------------------------------------- */
.vantagens{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
@media (max-width:980px){ .vantagens{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .vantagens{ grid-template-columns:1fr; } }
.vantagem{
  border-radius:var(--r); padding:1.8rem 1.5rem; position:relative; overflow:hidden;
  border:0; transition:var(--transicao);
  background:var(--azul); color:#fff;
}
/* leve brilho no canto, para o bloco de cor não ficar chapado */
.vantagem::after{
  content:''; position:absolute; top:-40px; right:-40px; width:140px; height:140px;
  border-radius:50%; background:rgba(255,255,255,.12); pointer-events:none;
}
.vantagem:hover{ transform:translateY(-6px); box-shadow:var(--sombra-lg); }
.vantagem__icone{
  width:56px; height:56px; border-radius:18px; display:grid; place-items:center;
  background:rgba(255,255,255,.2); color:#fff; margin-bottom:1rem;
  position:relative; z-index:2;
}
.vantagem__icone svg{ width:28px; height:28px; }
.vantagem h3{ font-size:1.15rem; margin-bottom:.35rem; color:#fff; position:relative; z-index:2; }
.vantagem p{ font-size:.95rem; color:rgba(255,255,255,.85); margin:0; position:relative; z-index:2; }

/* ciclo de cores da marca: azul · verde-limão · azul vivo · verde */
.vantagem:nth-child(4n+2){ background:var(--verde); }
.vantagem:nth-child(4n+3){ background:var(--azul-vivo); }
.vantagem:nth-child(4n+4){ background:var(--verde-600); }

.vantagem:nth-child(4n+2) h3,
.vantagem:nth-child(4n+4) h3{ color:var(--azul-900); }
.vantagem:nth-child(4n+2) p,
.vantagem:nth-child(4n+4) p{ color:#2f3d0c; }
.vantagem:nth-child(4n+2) .vantagem__icone,
.vantagem:nth-child(4n+4) .vantagem__icone{ background:rgba(255,255,255,.7); color:var(--azul); }
.vantagem:nth-child(4n+2)::after,
.vantagem:nth-child(4n+4)::after{ background:rgba(255,255,255,.35); }

/* ---------- Grade de produtos ----------------------------------------- */
/* ---------- Painel de busca (lupa do cabeçalho) ------------------------ */
.busca-painel{ position:fixed; inset:0; z-index:140; }
.busca-painel[hidden]{ display:none; }
.busca-painel__fundo{
  position:absolute; inset:0; background:rgba(16,19,46,.55);
  backdrop-filter:blur(3px); animation:bp-fundo .2s ease;
}
/* O JS escreve --busca-topo e --busca-altura a partir do visualViewport,
   que é a única medida que encolhe quando o teclado do celular abre.
   Sem isso a lista fica atrás do teclado e não dá para rolar.            */
.busca-painel__caixa{
  position:relative; width:min(640px, calc(100% - 2rem));
  margin:var(--busca-topo, max(6vh, 4.5rem)) auto 0; background:#fff;
  border-radius:var(--r-lg); box-shadow:var(--sombra-lg);
  padding:.9rem; animation:bp-caixa .22s cubic-bezier(.2,.8,.3,1);
  max-height:var(--busca-altura, 84vh); display:flex; flex-direction:column;
}
@keyframes bp-fundo{ from{ opacity:0 } }
@keyframes bp-caixa{ from{ opacity:0; transform:translateY(-14px) } }

.busca-painel__campo{
  display:flex; align-items:center; gap:.7rem; flex:none;
  border:2px solid var(--linha); border-radius:99px;
  padding:.15rem .25rem .15rem 1.1rem; transition:border-color .18s, box-shadow .18s;
}
.busca-painel__campo:focus-within{
  border-color:var(--azul-vivo); box-shadow:0 0 0 4px rgba(28,114,214,.16);
}
.busca-painel__lupa{ display:flex; color:var(--azul); flex:none; }
.busca-painel__lupa svg{ width:21px; height:21px; display:block; }
.busca-painel__campo input{
  flex:1 1 auto; min-width:0; border:0; outline:0; background:none;
  font:inherit; font-size:1.05rem; color:var(--texto); padding:.8rem 0;
}
.busca-painel__campo input::placeholder{ color:var(--cinza); }
.busca-painel__campo input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
.busca-painel__fechar{
  flex:none; display:grid; place-items:center; width:38px; height:38px;
  border:0; border-radius:50%; background:var(--azul-100); color:var(--azul);
  cursor:pointer; transition:background .18s, color .18s;
}
.busca-painel__fechar svg{ width:17px; height:17px; }
.busca-painel__fechar:hover{ background:var(--azul); color:#fff; }
.busca-painel__fechar:focus-visible{ outline:3px solid var(--azul-vivo); outline-offset:2px; }

.busca-painel__dica{
  margin:.85rem .4rem .2rem; flex:none;
  font-size:.88rem; font-weight:700; color:var(--cinza);
}
.busca-painel__lista{
  list-style:none; margin:.3rem 0 0; padding:0 .15rem .15rem;
  overflow-y:auto; flex:1 1 auto; min-height:0;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.busca-item{
  display:flex; align-items:center; gap:.85rem;
  padding:.6rem; border-radius:var(--r); text-decoration:none;
  color:var(--texto); transition:background .15s;
}
.busca-item:hover,
.busca-item:focus-visible{ background:var(--azul-100); outline:0; }
.busca-item:focus-visible{ box-shadow:inset 0 0 0 2px var(--azul-vivo); }
.busca-item img{
  width:52px; height:52px; flex:none; object-fit:contain;
  background:#fff; border:1px solid var(--linha); border-radius:10px; padding:3px;
}
.busca-item__texto{ display:flex; flex-direction:column; gap:.15rem; min-width:0; flex:1 1 auto; }
.busca-item__texto b{ font-size:.98rem; }
.busca-item__texto small{
  color:var(--cinza); font-size:.82rem; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* a etiqueta diz a linha, então a cor é da linha e não do produto */
.busca-item__linha{
  flex:none; align-self:flex-start; font-size:.68rem; font-weight:900;
  letter-spacing:.06em; text-transform:uppercase;
  border-radius:99px; padding:.25rem .6rem;
}
.busca-item__linha--tintas{ background:var(--azul); color:#fff; }
.busca-item__linha--limpeza{ background:var(--verde); color:var(--azul-900); }
body.sem-rolagem{ overflow:hidden; }

@media (max-width:560px){
  .busca-painel__caixa{ margin-top:var(--busca-topo, 3rem); padding:.7rem; }
  .busca-item img{ width:44px; height:44px; }
  .busca-item__linha{ display:none; }
}

.filtros{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:2.5rem; }
.chip{
  border:2px solid var(--linha); background:#fff; color:var(--texto);
  padding:.55rem 1.25rem; border-radius:99px; font-weight:800; font-size:.92rem;
  cursor:pointer; transition:var(--transicao);
}
.chip:hover{ border-color:var(--azul-300); color:var(--azul); }
.chip.ativo{ background:var(--azul); border-color:var(--azul); color:#fff; box-shadow:0 8px 20px rgba(46,49,146,.25); }

.grade-produtos{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:1.5rem;
}

.produto{
  background:#fff; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--linha);
  display:flex; flex-direction:column; text-align:left; padding:0; cursor:pointer;
  transition:var(--transicao); animation:sobe .5s both;
  color:inherit; text-decoration:none; min-width:0;
}
.produto:focus-visible{ outline:3px solid var(--verde); outline-offset:3px; }
.produto:hover{ transform:translateY(-8px); box-shadow:var(--sombra-lg); border-color:transparent; }
.produto__foto{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  display:grid; place-items:center; background:var(--cor,#ddd);
}
.produto__foto img{
  width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.produto:hover .produto__foto img{ transform:scale(1.07); }
.produto__cat{
  position:absolute; top:.9rem; left:.9rem; z-index:2;
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(255,255,255,.95); color:var(--tinta);
  font-size:.78rem; font-weight:800; letter-spacing:.01em;
  padding:.32rem .75rem; border-radius:99px;
}
/* a cor do produto entra como marcador, nao como fundo do texto */
.produto__cat::before{
  content:''; width:8px; height:8px; border-radius:50%;
  background:var(--cor,var(--azul)); flex:none;
}
.produto__corpo{ padding:1.35rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.produto__corpo h3{ margin-bottom:.35rem; font-size:1.22rem; }
.produto__resumo{ font-size:.93rem; color:var(--cinza); margin-bottom:.8rem; flex:1; }
.produto__preco{
  display:flex; align-items:baseline; gap:.35rem; flex-wrap:wrap;
  margin:0 0 .9rem; color:var(--azul);
}
.produto__preco small{ font-size:.76rem; font-weight:800; color:var(--cinza); }
.produto__preco b{ font-size:1.32rem; font-weight:900; letter-spacing:-.01em; }
.produto__preco .sem-preco{
  font-size:.86rem; font-weight:800; color:var(--cinza);
  background:var(--bg); border-radius:8px; padding:.25rem .6rem;
}
.specs{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.1rem; }
.spec{
  font-size:.78rem; font-weight:800; color:var(--azul);
  background:var(--azul-100); padding:.3rem .7rem; border-radius:8px;
}
.spec--pro{ background:var(--verde-100); color:#4a5a10; }

/* Linha de limpeza: fotos com fundo branco, cor do produto como base */
.produto--limpeza .produto__foto{ background:#fff; }
.produto--limpeza .produto__foto img{ object-fit:contain; padding:.7rem; }
.produto--limpeza .produto__foto::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:46%;
  background:linear-gradient(to top, var(--cor), transparent);
  opacity:.16; pointer-events:none;
}

.nota{ font-size:.85rem; color:var(--cinza); font-style:italic; margin:-.4rem 0 1rem; }

/* seletor de volume dentro do detalhe do produto.
   Especificidade dupla: a mesma classe .campo é usada na calculadora,
   que tem fundo escuro e texto branco. */
.campo.campo--volume{ margin-bottom:.9rem; }
.campo.campo--volume label{ color:var(--tinta); font-size:.88rem; }
.campo.campo--volume select{
  border-color:var(--linha); background:#fff; color:var(--tinta);
  font-family:'Fredoka',sans-serif; font-weight:500; cursor:pointer;
}
.campo.campo--volume select:focus{ border-color:var(--azul); background:#fff; }
.produto__link{
  font-family:'Fredoka',sans-serif; color:var(--azul); font-weight:500;
  display:inline-flex; align-items:center; gap:.4rem;
}
.produto__link svg{ width:18px; height:18px; transition:var(--transicao); }
.produto:hover .produto__link svg{ transform:translateX(5px); }

/* No celular, três produtos por linha. Com cerca de 105px de largura o
   cartão só comporta o essencial: foto, nome, preço e botão.           */
@media (max-width:620px){
  .grade-produtos{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; }
  .produto__corpo{ padding:.5rem .5rem .6rem; }
  /* "Desengraxante" sozinha nao cabe em 90px na tela de 320px:
     deixa a palavra quebrar com hifen em vez de ser cortada. */
  .produto__corpo h3{
    font-size:.8rem; line-height:1.15; margin-bottom:.25rem;
    overflow-wrap:break-word; hyphens:auto;
  }
  /* resumo e fichas roubam a altura que o preço e o botão precisam */
  .produto__resumo{ display:none; }
  .specs{ display:none; }
  /* "a partir de" vai para cima do valor: lado a lado não cabe */
  .produto__preco{
    flex-direction:column; align-items:flex-start; gap:0;
    margin-bottom:auto; padding-bottom:.5rem;
  }
  .produto__preco small{ font-size:.6rem; }
  .produto__preco b{ font-size:.9rem; }
  .produto__preco .sem-preco{ font-size:.66rem; padding:.2rem .4rem; }
  .produto__cat{ top:.3rem; left:.3rem; font-size:.58rem; padding:.18rem .42rem; }
  .produto__cat::before{ width:5px; height:5px; }
  /* o cartão inteiro já abre o produto, então o texto do link sobra */
  .produto__link{ display:none; }
  /* o preço empurra o rodapé para baixo e os botões da linha se alinham */
  .produto__rodape{ margin-top:auto; flex-direction:column; align-items:stretch; gap:.4rem; }
  .add-carrinho{ justify-content:center; font-size:.72rem; padding:.42rem .3rem; gap:.25rem; }
  .add-carrinho svg{ width:14px; height:14px; }

  /* A vitrine da home tem 4 produtos: em 3 colunas sobraria um sozinho
     na segunda linha. Ali ficam 2 por linha, com a letra um pouco maior. */
  .grade-produtos[data-destaques]{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
  .grade-produtos[data-destaques] .produto__corpo{ padding:.85rem .85rem 1rem; }
  .grade-produtos[data-destaques] .produto__corpo h3{ font-size:1rem; }
  .grade-produtos[data-destaques] .produto__preco small{ font-size:.68rem; }
  .grade-produtos[data-destaques] .produto__preco b{ font-size:1.05rem; }
  .grade-produtos[data-destaques] .produto__preco .sem-preco{ font-size:.78rem; padding:.25rem .6rem; }
  .grade-produtos[data-destaques] .produto__cat{ top:.5rem; left:.5rem; font-size:.66rem; padding:.24rem .55rem; }
  .grade-produtos[data-destaques] .add-carrinho{ font-size:.82rem; padding:.5rem .6rem; gap:.3rem; }
  .grade-produtos[data-destaques] .add-carrinho svg{ width:17px; height:17px; }
}
@keyframes sobe{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }

/* ---------- Modal de produto ------------------------------------------ */
.modal{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  padding:1rem; background:rgba(20,22,63,.62); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:var(--transicao);
}
.modal.aberto{ opacity:1; visibility:visible; }
.modal__caixa{
  background:#fff; border-radius:var(--r-lg); width:min(100%,940px);
  max-height:92vh; overflow-y:auto; overflow-x:hidden;
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  transform:translateY(26px) scale(.98); transition:var(--transicao); box-shadow:var(--sombra-lg);
}
.modal.aberto .modal__caixa{ transform:none; }
.modal__foto{ background:var(--cor,#eee); display:grid; place-items:center; min-width:0; overflow:hidden; position:relative; }
.modal__foto img{ width:100%; height:100%; object-fit:cover; }
.modal__foto--limpeza{ background:#fff; }
.modal__foto--limpeza img{ object-fit:contain; padding:1.4rem; }
.modal__foto--limpeza::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:46%;
  background:linear-gradient(to top, var(--cor), transparent);
  opacity:.16; pointer-events:none;
}
.modal__info{ padding:clamp(1.6rem,3vw,2.5rem); min-width:0; }
.modal__info h2{ font-size:clamp(1.6rem,3vw,2.1rem); margin-bottom:.6rem; }
.modal__info > p{ color:var(--texto); font-size:.98rem; }
.modal__fechar{
  position:absolute; top:1rem; right:1rem; z-index:3; width:44px; height:44px;
  border:0; border-radius:50%; background:#fff; color:var(--tinta);
  cursor:pointer; display:grid; place-items:center; box-shadow:var(--sombra);
  transition:var(--transicao);
}
.modal__fechar:hover{ transform:rotate(90deg); background:var(--azul); color:#fff; }
.modal__caixa{ position:relative; }
.ficha{ display:grid; gap:.6rem; margin:1.4rem 0; }
.ficha div{
  display:flex; align-items:center; gap:.7rem; background:var(--bg);
  border-radius:14px; padding:.8rem 1.1rem; font-weight:700; color:var(--tinta); font-size:.95rem;
}
.ficha svg{ width:20px; height:20px; color:var(--verde-700); flex:none; }
.ficha b{ font-family:'Fredoka',sans-serif; font-weight:500; margin-left:auto; color:var(--azul); }
@media (max-width:760px){
  .modal__caixa{ grid-template-columns:minmax(0,1fr); }
  .modal__foto{ aspect-ratio:4/3; }
}

/* ---------- Calculadora ------------------------------------------------ */
.calc{
  background:linear-gradient(145deg,var(--azul) 0%,var(--azul-900) 100%);
  border-radius:var(--r-lg); color:#fff; padding:clamp(1.8rem,4vw,3rem);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem);
  align-items:center; position:relative; overflow:hidden;
}
.calc h2,.calc h3{ color:#fff; }
.calc p{ color:rgba(255,255,255,.8); }
.calc__form{ position:relative; z-index:2; display:grid; gap:1rem; }
.campo label{ display:block; font-weight:800; font-size:.85rem; margin-bottom:.35rem; color:rgba(255,255,255,.85); }
.campo input,.campo select{
  width:100%; padding:.85rem 1rem; border-radius:14px; border:2px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.1); color:#fff; font:inherit; font-weight:700;
  transition:var(--transicao);
}
.campo input:focus,.campo select:focus{ outline:0; border-color:var(--verde); background:rgba(255,255,255,.16); }
.campo select option{ color:var(--tinta); }
.calc__resultado{
  position:relative; z-index:2; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2); border-radius:var(--r); padding:clamp(1.4rem,3vw,2rem); text-align:center;
}
.calc__resultado .valor{
  font-family:'Fredoka',sans-serif; font-size:clamp(3rem,9vw,4.6rem); line-height:1;
  color:var(--verde); display:block;
}
.calc__resultado .rotulo{ font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:.82rem; }
.calc__resultado small{ display:block; margin-top:.9rem; color:rgba(255,255,255,.7); font-size:.85rem; line-height:1.5; }
@media (max-width:820px){ .calc{ grid-template-columns:1fr; } }

/* ---------- Tabela de rendimento -------------------------------------- */
.tabela-envolve{
  overflow-x:auto; border-radius:var(--r); border:0;
  background:#fff; box-shadow:var(--sombra);
}
table.rend{ width:100%; border-collapse:collapse; min-width:620px; }
table.rend th,table.rend td{ padding:.95rem 1.2rem; text-align:left; border-bottom:1px solid var(--linha); }

/* cabeçalho no azul da marca */
table.rend th{
  background:var(--azul); color:#fff;
  font-family:'Fredoka',sans-serif; font-weight:500; font-size:.95rem;
  border-bottom:0; white-space:nowrap;
}
table.rend tbody tr:nth-child(odd){ background:rgba(188,214,62,.10); }
table.rend tbody tr:hover{ background:var(--verde-100); }
table.rend tr:last-child td{ border-bottom:0; }

/* traço na cor do próprio produto abrindo cada linha */
table.rend td:first-child{
  font-weight:800; color:var(--tinta);
  border-left:5px solid var(--cor,transparent);
}
.ponto{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:.55rem; vertical-align:-1px; }

/* valor em destaque dentro da tabela */
.pilula{
  display:inline-block; background:var(--azul-100); color:var(--azul);
  font-weight:800; font-size:.85rem; padding:.28rem .7rem; border-radius:8px;
  white-space:nowrap;
}
.pilula--verde{ background:var(--verde-100); color:#4a5a10; }

/* ---------- Chamada final --------------------------------------------- */
.cta{
  background:var(--verde); border-radius:var(--r-lg); padding:clamp(2rem,5vw,3.5rem);
  text-align:center; position:relative; overflow:hidden;
}
.cta::before,.cta::after{
  content:''; position:absolute; border-radius:50%; background:rgba(255,255,255,.22);
}
.cta::before{ width:240px; height:240px; top:-90px; left:-60px; }
.cta::after{ width:180px; height:180px; bottom:-80px; right:-40px; }
.cta > *{ position:relative; z-index:2; }
.cta h2{ color:var(--azul-900); }
.cta p{ color:#46561a; font-weight:700; max-width:56ch; margin-inline:auto; }

/* ---------- Rodapé ----------------------------------------------------- */
.rodape{ background:var(--azul-900); color:rgba(255,255,255,.72); padding:clamp(3rem,6vw,4.5rem) 0 1.5rem; }
.rodape h3{ color:#fff; font-size:1.05rem; margin-bottom:1rem; }
.rodape a{ color:rgba(255,255,255,.72); transition:var(--transicao); }
.rodape a:hover{ color:var(--verde); }
.rodape__grade{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2rem; }
@media (max-width:860px){ .rodape__grade{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .rodape__grade{ grid-template-columns:1fr; } }
.rodape__logo{ background:#fff; border-radius:16px; padding:.6rem .9rem; display:inline-block; margin-bottom:1rem; }
.rodape__logo img{ height:50px; width:auto; }
.rodape ul{ list-style:none; margin:0; padding:0; display:grid; gap:.3rem; font-size:.95rem; }
/* alvo de toque de 24px+ nos links do rodape (WCAG 2.2) */
.rodape ul a{ display:inline-block; padding:.28rem 0; }
.rodape__base{
  border-top:1px solid rgba(255,255,255,.12); margin-top:2.5rem; padding-top:1.5rem;
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.86rem;
}
.redes{ display:flex; gap:.6rem; }
.redes a{
  width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.1);
  display:grid; place-items:center; color:#fff;
}
.redes a:hover{ background:var(--verde); color:var(--azul-900); }
.redes svg{ width:20px; height:20px; }

/* ---------- WhatsApp flutuante ---------------------------------------- */
.zap{
  position:fixed; right:18px; bottom:18px; z-index:70;
  width:58px; height:58px; border-radius:50%; background:#25d366; color:#fff;
  display:grid; place-items:center; box-shadow:0 12px 28px rgba(37,211,102,.45);
  transition:var(--transicao);
}
.zap:hover{ transform:scale(1.1) translateY(-3px); }
.zap svg{ width:30px; height:30px; }

/* ---------- Animação de entrada --------------------------------------- */
.revela{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.revela.visivel{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .revela{ opacity:1; transform:none; }
}

/* ---------- Foco visível (anel de foco padrão) -------------------------
   Quem navega por teclado precisa enxergar onde está. Os elementos que já
   têm foco próprio mais acima continuam valendo, porque vêm depois na
   cascata ou têm seletor mais específico.                                */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--azul-vivo);
  outline-offset:2px;
  border-radius:4px;
}
/* sobre fundo azul escuro o anel azul some: troca por branco */
.hero a:focus-visible,
.hero button:focus-visible,
.fundo-azul a:focus-visible,
.fundo-azul button:focus-visible,
.calc a:focus-visible,
.calc button:focus-visible,
.calc select:focus-visible,
.calc input:focus-visible,
.rodape a:focus-visible,
.cta a:focus-visible{
  outline-color:#fff;
}