/* ==========================================================================
   Home, versão 2
   Fundo claro, tipografia grande e layout editorial. Mesma identidade da
   marca (cores e Stolzl), sem os blocos da LP e sem fundos verdes.
   Arquivo independente: não usa site.css.
   ========================================================================== */

@font-face{font-family:Stolzl;src:url(../assets/fonts/Stolzl-Thin.woff2) format('woff2');font-weight:250;font-display:swap}
@font-face{font-family:Stolzl;src:url(../assets/fonts/Stolzl-Light.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:Stolzl;src:url(../assets/fonts/Stolzl-Book.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Stolzl;src:url(../assets/fonts/Stolzl-Medium.woff2) format('woff2');font-weight:500;font-display:swap}

:root{
  --verde-escuro:#023223;
  --verde:#01673F;
  --oliva:#70961C;
  --limao:#BBC479;
  --sage:#C6CFB4;
  --papel:#F1F3EC;          /* sage bem claro (25% sage + branco): o fundo da página */
  --sage-claro:#E3E7D9;     /* 50% sage + branco: fundo do bloco do blog */
  --branco:#fff;
  --linha:rgb(2 50 35 / .14);
  --suave:rgb(2 50 35 / .62);

  --margem:clamp(20px, 4.2vw, 64px);
  /* limite do conteúdo em telas largas (30/09): até 1920px tudo segue fluido;
     acima disso o conteúdo para de crescer e fica centralizado. Fundos e a
     faixa de banners continuam de ponta a ponta. */
  --limite:1920px;
  --lateral:max(var(--margem), calc((100vw - var(--limite)) / 2 + var(--margem)));
  --raio-imagem:clamp(14px, 12.6px + .376vw, 18px);   /* o mesmo arredondamento das imagens da v1 */
  --topo:clamp(64px, 56px + 2vw, 88px);
  --curva:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
[id]{scroll-margin-top:calc(var(--topo) + 8px)}
body{
  margin:0;
  font-family:Stolzl,system-ui,sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.55;
  color:var(--verde-escuro);
  background:var(--papel);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{list-style:none;padding:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--verde);outline-offset:3px}

.largura{padding-inline:var(--lateral)}

/* logo e símbolo pintados pela cor do texto (o SVG vira máscara) */
.logo{
  display:block;
  width:clamp(128px, 110px + 3vw, 172px);
  aspect-ratio:130.09/19.36;
  background:currentColor;
  -webkit-mask:url(../assets/img/logo-bamboo.svg) center/contain no-repeat;
          mask:url(../assets/img/logo-bamboo.svg) center/contain no-repeat;
}

/* marca-texto limão: o único recurso de destaque da página */
.marca{
  background:linear-gradient(var(--limao),var(--limao)) 0 88% / 0% .42em no-repeat;
  transition:background-size 1.1s var(--curva);
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;
}
.aceso .marca,.marca.aceso{background-size:100% .42em}
.aceso .marca:nth-of-type(2){transition-delay:.25s}
.aceso .marca:nth-of-type(3){transition-delay:.5s}
@media (prefers-reduced-motion:reduce){.marca{transition:none}}

/* --- Topo --------------------------------------------------------------- */
.topo{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:var(--topo);
  padding-inline:var(--lateral);
  background:rgb(241 243 236 / .86);
  -webkit-backdrop-filter:blur(12px);
          backdrop-filter:blur(12px);
  transition:box-shadow .3s;
}
.topo--rolou{box-shadow:0 1px 0 var(--linha)}
.topo__logo{color:var(--verde-escuro)}
/* o menu mantém as barras do site atual: Home / Sobre / Trabalhos... */
.topo__menu{display:flex;font-size:15px}
.topo__menu li + li::before{content:"/";margin-inline:.7em;color:var(--sage)}
.topo__menu a{color:var(--suave);transition:color .2s}
.topo__menu a:hover,.topo__menu a[aria-current="page"]{color:var(--verde-escuro)}
.topo__menu a[aria-current="page"]{font-weight:500}
.topo__abrir{display:none;padding:8px 0;border:0;background:none;font-size:15px;font-weight:500;cursor:pointer}
@media (max-width:820px){
  .topo__menu{display:none}
  .topo__abrir{display:block}
}
.menu{
  position:fixed;
  inset:0;
  z-index:40;
  display:flex;
  flex-direction:column;
  padding:0 var(--margem) 32px;
  background:var(--papel);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s,visibility 0s .3s;
}
.menu--aberto{opacity:1;visibility:visible;transition:opacity .3s}
.menu__topo{display:flex;align-items:center;justify-content:space-between;height:var(--topo)}
.menu__lista{margin-block:auto}
.menu__lista a{display:block;padding-block:6px;font-weight:300;font-size:clamp(40px, 12vw, 64px);line-height:1.05;letter-spacing:-.02em}
.menu__lista a[aria-current="page"]{color:var(--oliva)}
.menu__rodape{display:flex;flex-wrap:wrap;gap:12px 24px;font-size:15px;color:var(--suave)}

/* --- Abertura: a frase ------------------------------------------------- */
.abertura{padding-top:clamp(36px, 5vw, 80px);padding-bottom:clamp(32px, 3.4vw, 52px)}
.abertura__grade{display:grid;gap:clamp(18px, 2vw, 28px)}
.abertura__frase{
  max-width:13em;
  font-weight:300;
  font-size:clamp(34px, 2px + 4.4vw, 66px);
  line-height:1.06;
  letter-spacing:-.03em;
}
.abertura__frase > span{display:block;overflow:hidden;padding-bottom:.08em}
.abertura__frase > span > span{display:inline-block;animation:sobe 1s var(--curva) both}
.abertura__frase > span:nth-child(2) > span{animation-delay:.08s}
.abertura__frase > span:nth-child(3) > span{animation-delay:.16s}
@keyframes sobe{from{transform:translateY(105%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.abertura__frase > span > span{animation:none}}
/* a proposta de valor: maior, na cor do texto e com um traço limão acima,
   para ler como a segunda voz da abertura e não como legenda */
.abertura__apoio{
  position:relative;
  max-width:26em;
  padding-top:clamp(18px, 1.6vw, 24px);
  font-weight:400;
  font-size:clamp(19px, 15.5px + .75vw, 25px);
  line-height:1.42;
  letter-spacing:-.005em;
  color:var(--verde-escuro);
  animation:aparece 1s .5s both;
}
.abertura__apoio::before{content:"";position:absolute;left:0;top:0;width:48px;height:4px;border-radius:2px;background:var(--limao)}
/* link discreto para o Sobre, sem cara de botão */
.abertura__mais{
  display:inline-block;
  margin-top:clamp(14px, 1.4vw, 20px);
  font-weight:500;
  font-size:15px;
  color:var(--verde);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.3em;
  text-decoration-color:rgb(1 103 63 / .35);
  animation:aparece 1s .65s both;
  transition:text-decoration-color .2s;
}
.abertura__mais span{display:inline-block;margin-left:4px;transition:transform .25s}
.abertura__mais:hover{text-decoration-color:var(--verde)}
.abertura__mais:hover span{transform:translateX(4px)}
@keyframes aparece{from{opacity:0}to{opacity:1}}
@media (min-width:1200px){
  /* a frase ocupa só a largura dela e o apoio vem logo ao lado */
  .abertura__grade{grid-template-columns:max-content minmax(300px,520px);justify-content:start;align-items:end;column-gap:clamp(40px, 4.4vw, 72px)}
  .abertura__lado{padding-bottom:.4em}
}

/* --- Faixa de trabalhos (os 5 banners da home atual) -------------------
   Uma fila horizontal que desliza de lado (arrastando, rolando ou pelas
   setas). O primeiro banner começa alinhado ao texto e o próximo aparece
   cortado na borda da tela, mostrando que tem mais. */
.faixa{padding-bottom:clamp(32px, 4vw, 64px)}
.faixa__trilha{
  display:flex;
  gap:clamp(12px, 1.4vw, 20px);
  padding-inline:var(--lateral);
  scroll-padding-inline:var(--lateral);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  cursor:grab;
}
.faixa__trilha::-webkit-scrollbar{display:none}
.faixa__trilha.arrastando{cursor:grabbing;scroll-snap-type:none}
.faixa__trilha.arrastando a{pointer-events:none}
.faixa__item{flex:0 0 clamp(280px, 52vw, 760px);scroll-snap-align:start}
.faixa__item:last-child{margin-right:var(--margem)}
.faixa__foto{display:block;aspect-ratio:1400/720;overflow:hidden;border-radius:var(--raio-imagem);background:var(--sage)}
.faixa__foto img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--curva);-webkit-user-drag:none;user-select:none}
.faixa__item:hover .faixa__foto img{transform:scale(1.03)}
.faixa__legenda{display:block;margin-top:18px;max-width:26em;font-weight:400;font-size:clamp(19px, 14.5px + .95vw, 27px);line-height:1.28;letter-spacing:-.01em;color:var(--verde-escuro);transition:color .2s}
.faixa__item:hover .faixa__legenda{color:var(--verde)}
.faixa__controles{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}
.faixa__controles button{
  display:grid;place-items:center;
  width:clamp(56px, 50px + .8vw, 66px);height:clamp(56px, 50px + .8vw, 66px);
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--verde-escuro);color:var(--limao);
  box-shadow:0 8px 20px rgb(2 50 35 / .18);
  cursor:pointer;
  transition:background-color .25s,color .25s,transform .3s var(--curva),box-shadow .3s;
}
.faixa__controles .vai{background:var(--limao);color:var(--verde-escuro);box-shadow:0 8px 22px rgb(112 150 28 / .32)}
.faixa__controles button:hover{transform:scale(1.07)}
.faixa__controles .volta:hover{background:var(--verde)}
.faixa__controles button:disabled{opacity:.3;pointer-events:none}
.faixa__controles svg{width:24px;stroke:currentColor;stroke-width:2}
.faixa__controles .volta svg{transform:scaleX(-1)}

/* --- Títulos de bloco: marcam a passagem de um bloco para o outro ------- */
.bloco{position:relative;padding-block:clamp(64px, 7vw, 112px)}
.bloco__cabeca{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px 32px;
  margin-bottom:clamp(28px, 3vw, 48px);
}
.bloco__titulo{font-weight:300;font-size:clamp(28px, 18px + 1.6vw, 42px);line-height:1.1;letter-spacing:-.02em}
.bloco__titulo .marca{background-size:0% .38em}
.bloco__titulo.aceso .marca,.aceso .bloco__titulo .marca{background-size:100% .38em}
.seta-link{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:var(--verde)}
.seta-link i{
  display:grid;place-items:center;
  width:34px;height:34px;
  border:1px solid currentColor;
  border-radius:50%;
  font-style:normal;
  transition:background-color .25s,color .25s,border-color .25s;
}
.seta-link svg{width:14px;stroke:currentColor}
.seta-link:hover i{background:var(--limao);border-color:var(--limao);color:var(--verde-escuro)}

/* Transições suaves: cada bloco começa na cor do anterior e se funde na
   própria cor ao longo de ~240px, sem linha de corte */
.bloco--sage{background:linear-gradient(180deg,var(--papel) 0,var(--sage-claro) 260px,var(--sage-claro) calc(100% - 260px),var(--papel) 100%)}

/* --- Blog em grupos (comum às propostas A e B) -------------------------- */
[data-grupos]{display:grid}
[data-grupos] > .grupo{grid-area:1 / 1;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .6s,transform .6s,visibility 0s .6s}
[data-grupos] > .grupo--atual{opacity:1;visibility:visible;transform:none;transition:opacity .7s,transform .7s var(--curva)}
@media (prefers-reduced-motion:reduce){[data-grupos] > .grupo{transition:none}}

/* fundo do bloco do Sobre: papel → branco → papel, sem linha de corte */
.bloco--branco{background:linear-gradient(180deg,var(--papel) 0,var(--branco) 240px,var(--branco) calc(100% - 240px),var(--papel) 100%)}

/* --- Blog: destaque + lista (o layout da v1) ---------------------------- */
.blog__principal{display:grid;gap:clamp(18px, 2.4vw, 40px);margin-bottom:clamp(32px, 4vw, 56px)}
.blog__principal-foto{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--raio-imagem);background:var(--sage)}
.blog__principal-foto img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--curva)}
.blog__principal:hover .blog__principal-foto img{transform:scale(1.03)}
.blog__data{font-size:14px;color:var(--suave)}
.blog__principal-titulo{display:block;margin-top:12px;font-weight:300;font-size:clamp(26px, 18px + 1.5vw, 40px);line-height:1.12;letter-spacing:-.02em;transition:color .2s}
.blog__principal:hover .blog__principal-titulo{color:var(--verde)}
.blog__principal-resumo{display:block;margin-top:14px;max-width:30em;font-size:clamp(16px, 15px + .2vw, 18px);color:var(--suave)}
@media (min-width:900px){.blog__principal{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center}}

.blog__indice{display:grid;gap:40px}
.blog__lista{border-top:1px solid rgb(2 50 35 / .18)}
.blog__item{border-bottom:1px solid rgb(2 50 35 / .18)}
.blog__item a{
  position:relative;z-index:0;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 20px;align-items:center;
  padding:clamp(16px, 1.4vw, 22px) 0;
  transition:padding .5s var(--curva);
}
/* faixa clara que acende atrás da linha no mouse */
.blog__item a::before{content:"";position:absolute;z-index:-1;inset:0 -14px;border-radius:4px;background:rgb(255 255 255 / .6);opacity:0;transition:opacity .4s}
.blog__item a:hover{padding-inline:14px}
.blog__item a:hover::before{opacity:1}
.blog__item-titulo{font-size:clamp(17px, 15.4px + .4vw, 20px);line-height:1.35;transition:color .2s}
.blog__item a:hover .blog__item-titulo{color:var(--verde)}
.blog__item-data{grid-column:1;font-size:13px;color:var(--suave)}
.blog__item-seta{grid-row:1 / span 2;grid-column:2;width:20px;stroke:currentColor;transition:transform .3s}
.blog__item a:hover .blog__item-seta{transform:translateX(4px)}
.blog__previa{display:none}
@media (min-width:1000px){
  .blog__indice{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(40px, 5vw, 80px)}
  .blog__item a{grid-template-columns:8.5em minmax(0,1fr) auto}
  .blog__item-data{grid-column:auto;grid-row:1}
  .blog__item-seta{grid-column:3;grid-row:1}
  .blog__previa{
    display:block;position:relative;align-self:start;
    aspect-ratio:16/9;overflow:hidden;border-radius:var(--raio-imagem);background:var(--sage);
  }
  .blog__previa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .5s,transform .8s var(--curva)}
  .blog__previa img.visivel{opacity:1;transform:none}
}

/* --- Vamos conversar? (com formulário) ---------------------------------- */
.conversa{padding-block:clamp(72px, 8vw, 128px) clamp(56px, 6vw, 96px)}
.conversa__grade{display:grid;gap:clamp(36px, 4vw, 56px);max-width:1200px}   /* título e formulário juntos; em tela larga a sobra fica à direita (30/09) */
@media (min-width:1000px){.conversa__grade{grid-template-columns:minmax(0,1fr) minmax(0,560px);column-gap:clamp(48px, 6vw, 120px);align-items:start}}
.conversa__link{
  font-weight:300;
  font-size:clamp(38px, 16px + 4.2vw, 72px);
  line-height:1.02;
  letter-spacing:-.035em;
}
.conversa__sub{margin-top:clamp(18px, 2vw, 28px);font-size:clamp(17px, 15.6px + .35vw, 20px)}
.conversa__sub a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;text-decoration-color:var(--oliva);transition:color .2s}
.conversa__sub a:hover{color:var(--verde)}

.cv__campo + .cv__campo{margin-top:clamp(20px, 2vw, 28px)}
.cv__campo label{display:block;margin-bottom:4px;font-size:14px;color:var(--suave)}
.cv__campo input{
  width:100%;height:44px;
  padding:0 0 6px;
  border:0;border-bottom:1px solid rgb(2 50 35 / .3);border-radius:0;
  background:none;
  font:400 18px/1 Stolzl,system-ui,sans-serif;
  color:var(--verde-escuro);
  transition:border-color .2s;
}
.cv__campo input:focus{outline:none;border-bottom-color:var(--verde)}
.cv__campo input[aria-invalid="true"]{border-bottom-color:var(--oliva)}
.cv__envio{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:clamp(28px, 3vw, 40px)}
.cv__botao{
  display:inline-flex;align-items:center;gap:14px;
  height:52px;padding:0 6px 0 22px;
  border:0;border-radius:999px;
  background:var(--limao);color:var(--verde-escuro);
  font-weight:500;font-size:16px;
  cursor:pointer;transition:filter .2s;
}
.cv__botao:hover{filter:brightness(1.05)}
.cv__botao span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--verde-escuro)}
.cv__botao svg{width:16px;stroke:var(--limao)}
.cv__aceite{display:flex;align-items:flex-start;gap:10px;max-width:290px;font-size:13px;line-height:19px;color:var(--suave);cursor:pointer}
.cv__aceite input{
  appearance:none;-webkit-appearance:none;flex:none;
  width:18px;height:18px;margin:0;
  border:1px solid rgb(2 50 35 / .45);border-radius:4px;
  background:transparent center / 12px no-repeat;cursor:pointer;
}
.cv__aceite input:checked{border-color:var(--verde);background-color:var(--verde);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3l2.4 2.4 5.2-5.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.cv__aceite input[aria-invalid="true"]{border-color:var(--oliva)}
.contato-form__mel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contato-form__status{margin-top:14px;font-size:15px;color:var(--verde)}
.contato-form__status:empty{display:none}

/* --- Rodapé ------------------------------------------------------------- */
.rodape{padding-top:clamp(40px, 4vw, 64px);background:var(--papel);border-top:1px solid var(--linha)}
.rodape__linha{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px 40px;font-size:15px}
.rodape__menu{display:flex;flex-wrap:wrap;gap:8px 24px}
.rodape__redes{display:flex;gap:24px}
.rodape a{color:var(--suave);transition:color .2s}
.rodape a:hover{color:var(--verde-escuro)}
/* a assinatura ocupa a largura toda, cortada no pé da página */
.rodape__assinatura{
  display:block;
  width:min(100%, 520px);
  aspect-ratio:130.09/19.36;
  margin-top:clamp(32px, 4vw, 56px);
  background:var(--verde-escuro);
  -webkit-mask:url(../assets/img/logo-bamboo.svg) center/contain no-repeat;
          mask:url(../assets/img/logo-bamboo.svg) center/contain no-repeat;
}
.rodape__base{display:flex;justify-content:space-between;gap:16px;padding-block:18px 22px;font-size:13px;color:var(--suave)}

/* --- Modal dos cases ---------------------------------------------------- */
.case-modal{
  position:fixed;inset:0;
  width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:clamp(12px, 3vw, 40px);
  border:0;
  background:rgb(2 50 35 / .45);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  overscroll-behavior:contain;
}
.case-modal[open]{display:grid;place-items:center;animation:case-fundo .3s ease both}
.case-modal::backdrop{background:transparent}
@keyframes case-fundo{from{opacity:0}to{opacity:1}}
.case-modal__caixa{
  position:relative;
  width:min(100%, 920px);
  max-height:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
  border-radius:var(--raio-imagem);
  background:var(--papel);
  color:var(--verde-escuro);
  box-shadow:0 30px 80px rgb(2 50 35 / .3);
  animation:case-sobe .45s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes case-sobe{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.case-modal[open],.case-modal__caixa{animation:none}}
.case-modal__imagem{display:block;width:100%;aspect-ratio:1400/720;object-fit:cover}
.case-modal__texto{padding:clamp(24px, 4vw, 56px) clamp(22px, 5vw, 72px) clamp(32px, 5vw, 64px)}
.case-modal__areas{font-size:13px;letter-spacing:.04em;color:var(--oliva)}
.case-modal__titulo{margin:10px 0 0;font-weight:300;font-size:clamp(28px, 20px + 1.8vw, 44px);line-height:1.1;letter-spacing:-.02em;color:var(--verde-escuro)}
.case-modal__resumo{margin-top:clamp(16px, 2vw, 24px);font-size:clamp(17px, 15.6px + .4vw, 21px);line-height:1.5}
.case-modal__resumo p + p{margin-top:.6em}
.case-modal__corpo{margin-top:clamp(28px, 3vw, 44px);display:grid;gap:clamp(24px, 2.6vw, 36px)}
.case-modal__corpo section{padding-top:clamp(18px, 2vw, 24px);border-top:1px solid var(--linha)}
.case-modal__corpo h3{margin:0 0 10px;font-weight:500;font-size:15px;color:var(--verde)}
.case-modal__corpo p,.case-modal__corpo li{font-size:16px;line-height:1.65;color:var(--suave)}
.case-modal__corpo p + p,.case-modal__corpo ul + p,.case-modal__corpo p + ul{margin-top:.8em}
.case-modal__corpo ul{margin:0;padding-left:1.1em;list-style:disc}
.case-modal__corpo li + li{margin-top:.3em}
.case-modal__corpo li::marker{color:var(--oliva)}
.case-modal__fechar{
  position:sticky;top:14px;float:right;
  z-index:1;
  display:grid;place-items:center;
  width:44px;height:44px;margin:14px 14px -58px 0;
  padding:0;border:0;border-radius:50%;
  background:var(--limao);color:var(--verde-escuro);
  cursor:pointer;
  box-shadow:0 4px 14px rgb(0 0 0 / .15);
  transition:transform .25s;
}
.case-modal__fechar:hover{transform:rotate(90deg)}

/* controles do blog: embaixo dos posts, com o "mais posts" em destaque */
.grupos{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;
  margin-top:clamp(28px, 3vw, 48px);
  padding-top:clamp(20px, 2vw, 28px);
  border-top:1px solid rgb(2 50 35 / .16);
}
.grupos__onde{display:flex;align-items:center;gap:18px}
.grupos__contador{font-size:14px;color:var(--suave);font-variant-numeric:tabular-nums}
.grupos__contador b{font-weight:500;color:var(--verde-escuro)}
.grupos__marcas{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.grupos__marcas button{position:relative;display:block;width:clamp(28px, 3vw, 44px);height:20px;padding:0;border:0;background:none;cursor:pointer}
.grupos__marcas button::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;border-radius:1px;background:rgb(2 50 35 / .18);transition:background-color .3s}
.grupos__marcas button[aria-current="true"]::before{background:var(--verde)}
.grupos__marcas button:hover::before{background:var(--verde)}
.grupos__botoes{display:flex;align-items:center;gap:10px}
.grupos__volta{
  display:grid;place-items:center;
  width:52px;height:52px;padding:0;
  border:1px solid rgb(2 50 35 / .28);border-radius:50%;
  background:none;color:var(--verde-escuro);cursor:pointer;
  transition:background-color .25s,border-color .25s;
}
.grupos__volta:hover{border-color:var(--verde-escuro)}
.grupos__volta svg{width:18px;stroke:currentColor;transform:scaleX(-1)}
.grupos__vai{
  display:inline-flex;align-items:center;gap:14px;
  height:52px;padding:0 6px 0 24px;
  border:0;border-radius:999px;
  background:var(--limao);color:BOTAO_var(--verde-escuro);
  font:500 16px/1 Stolzl,system-ui,sans-serif;
  cursor:pointer;transition:filter .2s;
}
.grupos__vai:hover{filter:brightness(1.05)}
.grupos__vai span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--verde-escuro);transition:transform .3s}
.grupos__vai:hover span{transform:translateX(3px)}
.grupos__vai svg{width:16px;stroke:var(--limao)}

/* --- Sobre na home (v3): bloco que abre aos poucos ---------------------- */
.sobre__grade{display:grid;gap:clamp(28px, 4vw, 64px)}
.sobre__frase{
  margin-top:clamp(18px, 2vw, 28px);
  max-width:14em;
  font-weight:300;
  font-size:clamp(28px, 18px + 2.2vw, 48px);
  line-height:1.12;
  letter-spacing:-.025em;
}
.sobre__texto p{max-width:34em;font-size:clamp(17px, 15.6px + .4vw, 21px);line-height:1.55}
.sobre__mais[hidden]{display:none}
.sobre__ler{
  margin-top:14px;padding:0;border:0;background:none;
  font-weight:500;font-size:15px;color:var(--verde);cursor:pointer;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;text-decoration-color:rgb(1 103 63 / .35);
}
.sobre__ler:hover{text-decoration-color:var(--verde)}
.sobre__frentes{margin-top:clamp(32px, 4vw, 56px);border-top:1px solid var(--linha)}
.sobre__frente{border-bottom:1px solid var(--linha)}
.sobre__frente h3{margin:0;font:inherit}
.sobre__abre{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  width:100%;padding:clamp(18px, 1.8vw, 26px) 0;
  border:0;background:none;text-align:left;cursor:pointer;
  font-weight:300;font-size:clamp(24px, 17px + 1.5vw, 38px);line-height:1.1;letter-spacing:-.02em;color:var(--verde-escuro);
  transition:color .25s,padding .5s var(--curva);
}
.sobre__abre:hover{color:var(--verde);padding-left:10px}
/* botão + em destaque: disco limão cheio, vira × em verde-escuro ao abrir */
.sobre__abre i{
  position:relative;flex:none;
  width:clamp(48px, 42px + .8vw, 58px);aspect-ratio:1;
  border-radius:50%;
  background:var(--limao);color:var(--verde-escuro);
  box-shadow:0 6px 18px rgb(112 150 28 / .28);
  transition:background-color .3s,color .3s,transform .45s var(--curva),box-shadow .3s;
}
.sobre__abre i::before,.sobre__abre i::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:2px;margin:-1px 0 0 -9px;border-radius:1px;background:currentColor}
.sobre__abre i::after{transform:rotate(90deg)}
.sobre__abre:hover i{transform:scale(1.08) rotate(90deg);box-shadow:0 10px 24px rgb(112 150 28 / .36)}
.sobre__abre[aria-expanded="true"] i{transform:rotate(45deg);background:var(--verde-escuro);color:var(--limao);box-shadow:none}
.sobre__painel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s var(--curva),opacity .35s}
.sobre__painel.aberto{grid-template-rows:1fr;opacity:1}
.sobre__painel > div{min-height:0;overflow:hidden}
.sobre__painel.aberto > div{padding-bottom:clamp(22px, 2.4vw, 36px)}
.sobre__frente-texto p{max-width:36em;font-size:16px;line-height:1.65;color:var(--suave)}
.sobre__frente-texto p + p{margin-top:.7em}
.sobre__entregas{margin-top:20px}
.sobre__entregas ul{display:grid;gap:0 32px}
.sobre__entregas li{padding:9px 0;border-top:1px solid var(--linha);font-size:15px;line-height:1.4}
.sobre__fecho{
  margin-top:clamp(22px, 2.4vw, 34px);
  font-weight:300;
  font-size:clamp(28px, 18px + 1.9vw, 46px);
  line-height:1.08;
  letter-spacing:-.025em;
  color:var(--verde-escuro);
}
/* dentro do acordeão o marca-texto só se desenha quando a frente abre */
.sobre__painel .marca{background-size:0% .42em}
.sobre__painel.aberto .marca{background-size:100% .42em;transition-delay:.35s}
@media (min-width:760px){.sobre__entregas ul{grid-template-columns:1fr 1fr}}
.sobre__convite{display:inline-block;margin-top:clamp(24px, 2.6vw, 36px);font-weight:500;font-size:15px;color:var(--verde);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;text-decoration-color:rgb(1 103 63 / .35)}
.sobre__convite:hover{text-decoration-color:var(--verde)}
@media (min-width:1000px){
  .sobre__grade{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(48px, 6vw, 120px)}
  .sobre__lado{position:sticky;top:calc(var(--topo) + 32px);align-self:start}
}
@media (prefers-reduced-motion:reduce){.sobre__painel,.sobre__abre,.sobre__abre i{transition:none}}

/* --- Sobre (v4): painel que desliza da direita -------------------------- */
.painel-sobre{
  position:fixed;inset:0;
  width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:0;border:0;
  background:rgb(2 50 35 / .4);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.painel-sobre[open]{display:block;animation:painel-fundo .35s ease both}
.painel-sobre::backdrop{background:transparent}
.painel-sobre.saindo{animation:painel-fundo .32s ease reverse both}
@keyframes painel-fundo{from{opacity:0}to{opacity:1}}
.painel-sobre__caixa{
  position:absolute;top:0;right:0;bottom:0;
  width:min(100%, 820px);
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--papel);
  box-shadow:-30px 0 80px rgb(2 50 35 / .18);
  animation:painel-entra .5s var(--curva) both;
}
.painel-sobre.saindo .painel-sobre__caixa{animation:painel-sai .32s ease-in both}
@keyframes painel-entra{from{transform:translateX(100%)}to{transform:none}}
@keyframes painel-sai{from{transform:none}to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.painel-sobre[open],.painel-sobre__caixa,.painel-sobre.saindo,.painel-sobre.saindo .painel-sobre__caixa{animation:none}}
.painel-sobre__fechar{
  position:sticky;top:18px;float:right;z-index:1;
  display:grid;place-items:center;
  width:48px;height:48px;margin:18px 18px -66px 0;
  padding:0;border:1px solid rgb(2 50 35 / .28);border-radius:50%;
  background:var(--papel);color:var(--verde-escuro);cursor:pointer;
  transition:background-color .25s,border-color .25s,transform .3s;
}
.painel-sobre__fechar:hover{background:var(--limao);border-color:var(--limao);transform:rotate(90deg)}
.painel-sobre__conteudo{padding:clamp(56px, 7vw, 96px) clamp(24px, 6vw, 88px) clamp(48px, 6vw, 88px)}
.painel-sobre__titulo{font-weight:300;font-size:clamp(22px, 18px + .8vw, 28px);letter-spacing:-.01em;color:var(--oliva)}
.painel-sobre .sobre__frase{max-width:13em}
.painel-sobre__texto{margin-top:clamp(24px, 3vw, 40px);font-size:clamp(17px, 15.6px + .4vw, 20px);line-height:1.6}
.painel-sobre__frentes{margin-top:clamp(40px, 5vw, 64px)}
.painel-sobre__frentes .sobre__frente{padding:clamp(24px, 2.6vw, 36px) 0;border-bottom:0;border-top:1px solid var(--linha)}
.painel-sobre__frentes h3{margin:0 0 14px;font-weight:300;font-size:clamp(24px, 17px + 1.4vw, 36px);line-height:1.1;letter-spacing:-.02em}
.painel-sobre__convite{
  display:inline-flex;align-items:center;gap:14px;
  margin-top:clamp(32px, 4vw, 48px);
  height:56px;padding:0 6px 0 26px;border-radius:999px;
  background:var(--limao);color:var(--verde-escuro);
  font-weight:500;font-size:17px;
  transition:filter .2s;
}
.painel-sobre__convite:hover{filter:brightness(1.05)}
.painel-sobre__convite span{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--verde-escuro)}
.painel-sobre__convite svg{width:18px;stroke:var(--limao)}

/* rodapé: sem o "Bamboo & co." embaixo do logo (30/09); a política fica à direita */
.rodape__base a{margin-left:auto}

/* rodapé (30/09): assinatura à esquerda e as redes à direita, na mesma
   altura, em letra fina e maior, com o marca-texto limão no mouse */
.rodape__principal{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px 48px;margin-top:clamp(8px, 1vw, 16px)}
.rodape__principal .rodape__assinatura{margin-top:0}
.rodape__redes{display:flex;flex-wrap:wrap;gap:8px clamp(22px, 2.4vw, 40px);margin:0;padding:0;list-style:none}   /* em linha (30/09) */
.rodape .rodape__redes a{
  display:inline-flex;align-items:baseline;gap:.35em;
  font-weight:300;font-size:clamp(22px, 17px + 1vw, 30px);line-height:1.15;letter-spacing:-.015em;
  color:var(--verde-escuro);
}
.rodape__redes a span{
  background:linear-gradient(var(--limao),var(--limao)) 0 88% / 0% .42em no-repeat;
  transition:background-size .5s var(--curva);
}
.rodape__redes a:hover span,.rodape__redes a:focus-visible span{background-size:100% .42em}
.rodape__redes i{font-style:normal;font-size:.7em;color:var(--oliva);transition:transform .3s var(--curva)}
.rodape__redes a:hover i{transform:translate(3px,-3px)}

/* redes na mesma coluna do formulário de contato logo acima (30/09):
   o rodapé usa a mesma grade do "Vamos conversar?" */
@media (min-width:1000px){
  .rodape__principal{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,560px);
    column-gap:clamp(48px, 6vw, 120px);
    align-items:end;
    max-width:1200px;
  }
  .rodape__redes{padding-bottom:.35em}
}

/* --- v3: os retângulos do bambu, suaves (30/09) --------------------------
   Só valem com <body class="com-bambu">. As formas vêm dos SVGs da
   identidade (listras, barras escalonadas, código de barras) usados como
   máscara, então a cor é a do fundo do elemento: sage e limão, apagados. */
.bambu{display:block;pointer-events:none;background:var(--sage)}
.com-bambu .abertura{position:relative;isolation:isolate}
.com-bambu .abertura > :not(.bambu){position:relative;z-index:1}
/* listras escalonadas no canto de cima, à direita, sumindo para a esquerda e para baixo */
.bambu--listras{
  position:absolute;z-index:0;top:0;right:0;
  width:min(52vw, 900px);height:100%;
  opacity:.3;
  -webkit-mask:url(../assets/img/listras.svg) left top / auto 100% repeat-x,linear-gradient(90deg,transparent 0,#000 45%),linear-gradient(180deg,#000 15%,transparent 80%);
  -webkit-mask-composite:source-in,source-in;
          mask:url(../assets/img/listras.svg) left top / auto 100% repeat-x,linear-gradient(90deg,transparent 0,#000 45%),linear-gradient(180deg,#000 15%,transparent 80%);
          mask-composite:intersect;
}
/* barras escalonadas entre blocos: faixa fina, esticada na largura */
.bambu--barras{
  height:clamp(40px, 4.6vw, 84px);
  margin-top:clamp(8px, 1.4vw, 24px);
  opacity:.75;
  -webkit-mask:url(../assets/img/barras.svg) 0 0 / 100% 100% no-repeat;
          mask:url(../assets/img/barras.svg) 0 0 / 100% 100% no-repeat;
}
.bambu--espelho{transform:scaleX(-1);background:var(--limao);opacity:.5;margin-top:0}
/* abertura do rodapé (no lugar do filete): as listras escalonadas da
   identidade (as mesmas do topo da LP), em sage, surgindo de baixo para cima */
.bambu--codigo{
  height:clamp(110px, 11vw, 200px);
  margin-top:clamp(24px, 3vw, 48px);
  opacity:.55;
  -webkit-mask:url(../assets/img/listras.svg) left bottom / auto 190% repeat-x,linear-gradient(180deg,transparent 0,#000 70%);
  -webkit-mask-composite:source-in;
          mask:url(../assets/img/listras.svg) left bottom / auto 190% repeat-x,linear-gradient(180deg,transparent 0,#000 70%);
          mask-composite:intersect;
}
.com-bambu .rodape{border-top:0}

/* --- Blog: carrossel (proposta 1, escolhida em 02/10) ------------------- */
/* A faixa vai de ponta a ponta, como a dos banners,
   começando alinhada ao texto. Cartões com a capa 16:9 grande. */
.carrossel__trilha{
  display:flex;
  gap:clamp(16px, 1.8vw, 28px);
  padding-inline:var(--lateral);
  scroll-padding-inline:var(--lateral);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  cursor:grab;
}
.carrossel__trilha::-webkit-scrollbar{display:none}
.carrossel__trilha.arrastando{cursor:grabbing;scroll-snap-type:none}
.carrossel__trilha.arrastando a{pointer-events:none}
.carrossel__cartao{flex:0 0 clamp(270px, 30vw, 520px);scroll-snap-align:start;display:flex;flex-direction:column}
.carrossel__cartao:last-child{margin-right:var(--lateral)}
.carrossel__foto{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--raio-imagem);background:var(--sage)}
.carrossel__foto img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--curva);-webkit-user-drag:none;user-select:none}
.carrossel__cartao:hover .carrossel__foto img{transform:scale(1.04)}
.carrossel__data{margin-top:18px;font-size:13px;color:var(--suave)}
.carrossel__titulo{margin-top:6px;font-weight:400;font-size:clamp(19px, 15.5px + .7vw, 25px);line-height:1.25;letter-spacing:-.01em;transition:color .2s}
.carrossel__cartao:hover .carrossel__titulo{color:var(--verde)}
.carrossel__resumo{margin-top:10px;font-size:15px;line-height:1.55;color:var(--suave);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.carrossel__base{display:flex;align-items:center;gap:clamp(20px, 3vw, 48px);margin-top:clamp(28px, 3vw, 44px);padding-inline:var(--lateral)}
/* barra que mostra quanto do carrossel já passou */
.carrossel__progresso{position:relative;flex:1;height:2px;border-radius:1px;background:rgb(2 50 35 / .14);overflow:hidden}
.carrossel__progresso i{position:absolute;left:0;top:0;bottom:0;width:20%;border-radius:1px;background:var(--verde);transition:left .3s,width .3s}
.carrossel__setas{display:flex;gap:12px}
.carrossel__setas button{
  display:grid;place-items:center;
  width:clamp(56px, 50px + .8vw, 66px);height:clamp(56px, 50px + .8vw, 66px);
  padding:0;border:0;border-radius:50%;
  background:var(--verde-escuro);color:var(--limao);
  box-shadow:0 8px 20px rgb(2 50 35 / .18);
  cursor:pointer;
  transition:transform .3s var(--curva),opacity .25s;
}
.carrossel__setas .carrossel__vai{background:var(--limao);color:var(--verde-escuro);box-shadow:0 8px 22px rgb(112 150 28 / .32)}
.carrossel__setas button:hover{transform:scale(1.07)}
.carrossel__setas button:disabled{opacity:.3;transform:none;cursor:default}
.carrossel__setas svg{width:24px;stroke:currentColor;stroke-width:2}
.carrossel__volta svg{transform:scaleX(-1)}

/* --- Política de privacidade (02/10) -------------------------------------
   Página de texto no visual da v2. O texto é o da política da LP. */
.politica{padding-top:calc(var(--topo) + clamp(28px, 4vw, 64px));padding-bottom:clamp(64px, 7vw, 120px)}
.politica__voltar,.politica__titulo,.politica__texto{display:block;max-width:760px}
.politica__voltar{width:max-content;font-size:15px;color:var(--suave);transition:color .2s}
.politica__voltar:hover{color:var(--verde-escuro)}
.politica__titulo{margin-top:clamp(20px, 2.4vw, 32px);font-weight:300;font-size:clamp(32px, 24px + 2vw, 52px);line-height:1.1;letter-spacing:-.02em}
.politica__texto{margin-top:clamp(36px, 4vw, 56px)}
.politica__texto h2{margin:clamp(36px, 4vw, 52px) 0 14px;font-weight:300;font-size:clamp(21px, 18px + .7vw, 27px);line-height:1.25;color:var(--verde)}
.politica__texto h2:first-child{margin-top:0}
.politica__texto h3{margin:26px 0 8px;font-weight:500;font-size:17px;line-height:1.5}
.politica__texto p,.politica__texto li{margin:0 0 14px;font-size:clamp(16px, 15.5px + .15vw, 17px);line-height:1.65;color:rgb(2 50 35 / .82)}
.politica__texto strong{font-weight:500;color:var(--verde-escuro)}
.politica__texto a{color:var(--verde);text-decoration:underline;text-underline-offset:3px;word-break:break-word}
.politica__texto .rodape-texto{margin-top:44px;font-size:14px;line-height:1.55;color:var(--suave)}
.politica__texto .botao-cookies{display:inline-flex;align-items:center;height:48px;margin:6px 0 14px;padding:0 24px;border:0;border-radius:999px;background:var(--limao);color:var(--verde-escuro);font-weight:500;font-size:16px;cursor:pointer;transition:transform .2s var(--curva)}
.politica__texto .botao-cookies:hover{transform:scale(1.03)}

/* --- Confirmação do formulário (02/10): o formulário some e isto aparece no lugar */
.contato-ok{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;outline:none;animation:contato-ok .6s var(--curva) both}
.contato-ok__icone{display:grid;place-items:center;width:clamp(56px, 48px + 1.4vw, 72px);aspect-ratio:1;border-radius:50%;background:var(--limao)}
.contato-ok__icone svg{width:44%;stroke:var(--verde-escuro)}
.contato-ok__titulo{margin-top:clamp(20px, 2.4vw, 32px);font-weight:300;font-size:clamp(30px, 22px + 2vw, 48px);line-height:1.1;letter-spacing:-.02em;color:var(--verde-escuro)}
.contato-ok__texto{margin-top:clamp(12px, 1.4vw, 18px);max-width:28em;font-size:clamp(17px, 15.6px + .35vw, 20px);line-height:1.5;color:var(--suave)}
.contato-ok__texto + .contato-ok__texto{margin-top:6px}
.contato-ok__texto a{color:var(--verde-escuro);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;text-decoration-color:var(--oliva)}
@keyframes contato-ok{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.contato-ok{animation:none}}

/* --- Página do post (02/10, modelo para aprovação) ------------------------
   Cabeçalho, capa, texto e imagens na mesma largura, até 1080px, centralizados
   na página (Jeferson, 02/10: antes o texto era uma coluna mais estreita).
   Mesmo topo e rodapé da home. */
.post__cabeca,.post__capa,.post__texto{max-width:calc(1080px + 2 * var(--lateral));margin-inline:auto}
.post__cabeca{padding-top:clamp(28px, 4vw, 64px)}
.post__voltar{display:inline-block;font-size:15px;color:var(--suave);transition:color .2s}
.post__voltar:hover{color:var(--verde-escuro)}
.post__data{margin-top:clamp(28px, 3.4vw, 48px);font-size:14px;color:var(--oliva)}
.post__titulo{margin-top:12px;font-weight:300;font-size:clamp(32px, 22px + 2.6vw, 58px);line-height:1.08;letter-spacing:-.025em}   /* sem text-wrap:balance: o título usa a largura toda (Jeferson, 02/10) */
.post__capa{margin-top:clamp(32px, 4vw, 56px)}
.post__capa img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--raio-imagem);background:var(--sage)}

.post__texto{padding-top:clamp(36px, 4.4vw, 64px);padding-bottom:clamp(64px, 7vw, 112px);font-size:clamp(17px, 16px + .3vw, 20px);line-height:1.7}
.post__texto > * + *{margin-top:1.1em}
.post__texto p{color:rgb(2 50 35 / .86)}
.post__texto p:first-child{font-size:1.12em;line-height:1.6;color:var(--verde-escuro)}
.post__texto strong{font-weight:500;color:var(--verde-escuro)}
.post__texto a{color:var(--verde);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--oliva)}
.post__texto h2{margin-top:2.2em;font-weight:300;font-size:clamp(24px, 19px + 1.1vw, 34px);line-height:1.2;letter-spacing:-.015em;color:var(--verde-escuro)}
.post__texto h3{margin-top:1.8em;font-weight:400;font-size:clamp(19px, 17px + .5vw, 23px);line-height:1.3}
.post__texto h2 + *,.post__texto h3 + *{margin-top:.7em}
.post__texto ul,.post__texto ol{padding-left:1.2em;list-style:disc}
.post__texto ol{list-style:decimal}
.post__texto li + li{margin-top:.4em}
.post__texto blockquote{padding-left:1em;border-left:3px solid var(--limao);font-size:1.12em}
.post__texto figure{margin:2em 0}
.post__texto figure img,.post__texto iframe{width:100%;height:auto;border-radius:var(--raio-imagem);background:var(--sage)}
/* imagem pequena (menos de 900px) ou vertical: tamanho real, alinhada com o texto, no máximo 720px de altura */
.post__texto figure img.pequena{width:auto;max-width:100%;max-height:720px}
.post__texto iframe{aspect-ratio:16/9;border:0}
.post__texto figcaption{margin-top:10px;font-size:14px;color:var(--suave)}

.post__mais-cabeca{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:clamp(28px, 3vw, 44px)}
.post__todos{display:inline-flex;align-items:center;gap:12px;font-size:15px;font-weight:500;color:var(--verde-escuro)}
.post__todos span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--limao);transition:transform .2s var(--curva)}
.post__todos:hover span{transform:translateX(3px)}
.post__todos svg{width:16px;stroke:var(--verde-escuro)}
.post__cartoes{display:grid;gap:clamp(28px, 3vw, 40px) clamp(16px, 1.8vw, 28px)}
@media (min-width:760px){.post__cartoes{grid-template-columns:repeat(3,1fr)}}
.post-cartao{display:flex;flex-direction:column}
.post-cartao__foto{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--raio-imagem);background:var(--sage)}
.post-cartao__foto img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--curva)}
.post-cartao:hover .post-cartao__foto img{transform:scale(1.04)}
.post-cartao__data{margin-top:14px;font-size:13px;color:var(--suave)}
.post-cartao__titulo{margin-top:6px;font-size:clamp(18px, 15.5px + .5vw, 22px);line-height:1.28;transition:color .2s}
.post-cartao:hover .post-cartao__titulo{color:var(--verde)}

/* --- Página /news/ com todos os posts (02/10) ------------------------------
   Como a página News do site antigo: grade de 3 colunas (2 no tablet, 1 no
   celular) e "carregar mais". Mesma largura das páginas de post. */
.news{max-width:calc(1080px + 2 * var(--lateral));margin-inline:auto;padding-top:clamp(28px, 4vw, 64px);padding-bottom:clamp(64px, 7vw, 112px)}
.news__titulo{font-weight:300;font-size:clamp(36px, 24px + 3vw, 66px);line-height:1.05;letter-spacing:-.025em}
.news__grade{display:grid;gap:clamp(36px, 3.6vw, 52px) clamp(16px, 1.8vw, 28px);margin-top:clamp(32px, 4vw, 56px)}
@media (min-width:640px){.news__grade{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.news__grade{grid-template-columns:repeat(3,1fr)}}
.post-cartao[hidden],.news__botao[hidden]{display:none}
.news__mais{margin-top:clamp(40px, 4.4vw, 64px)}
.news__botao{display:inline-flex;align-items:center;gap:14px;height:52px;padding:0 6px 0 22px;border:0;border-radius:999px;background:var(--limao);color:var(--verde-escuro);font-weight:500;font-size:16px;cursor:pointer;transition:filter .2s}
.news__botao:hover{filter:brightness(1.05)}
.news__botao span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--verde-escuro)}
.news__botao svg{width:16px;stroke:var(--limao);transform:rotate(90deg)}