/* Identidade medida no site atual e nas embalagens */
:root{
  --amarelo:#FFD800; --ouro:#ECC840; --preto:#1A1E25; --fundo:#F5F2F0; --branco:#FFFFFF;
  --cinza:#5C5B60; --texto:#1A1E25; --texto-2:#55565B; --linha:#E3DED9;
  --suave:#DC950E; --forte:#D92B29; --extra:#1D2B48;
  --serif:"Bodoni Moda","Bodoni 72",Didot,Georgia,serif;
  --sans:"Montserrat",system-ui,sans-serif;
  --raio:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fundo);color:var(--texto);font-family:var(--sans);font-variation-settings:"opsz" 11;   /* Bodoni no corte de texto: traço firme (escolha do Bruno, prancha opção 2) */
font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
@media (max-width:560px){.wrap{padding:0 16px}}
h1,h2,h3{margin:0;line-height:1.08;text-wrap:balance}
h2{font-family:var(--serif);font-weight:700;font-size:clamp(34px,4.6vw,56px);letter-spacing:-.01em}
h2 em{font-style:italic;font-weight:500}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--cinza);margin:0 0 14px}
.sub{color:var(--texto-2);max-width:60ch;margin:16px 0 0;font-size:18px}
section{padding:100px 0}
@media (max-width:760px){section{padding:68px 0}}
:focus-visible{outline:3px solid var(--preto);outline-offset:3px}

/* textura de grãos em marca d'água — como no site atual */
.graos{background-color:var(--amarelo);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.07' stroke-width='3'%3E%3Cg transform='rotate(-25 45 45)'%3E%3Cellipse cx='45' cy='45' rx='20' ry='28'/%3E%3Cpath d='M45 17c-10 14 10 42 0 56'/%3E%3C/g%3E%3Cg transform='rotate(30 135 120)'%3E%3Cellipse cx='135' cy='120' rx='20' ry='28'/%3E%3Cpath d='M135 92c-10 14 10 42 0 56'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}

/* ---------- botões: sólido OU contorno, nunca os dois ---------- */
.bt{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:700;font-size:15px;text-decoration:none;padding:14px 24px;border-radius:999px;border:0;cursor:pointer;transition:transform .15s,background .15s}
.bt:hover{transform:translateY(-1px)}
.bt-preto{background:var(--preto);color:var(--amarelo)}
.bt-amarelo{background:var(--amarelo);color:var(--preto)}
.bt-linha{background:transparent;color:var(--preto);box-shadow:inset 0 0 0 2px var(--preto)}
.bt-linha-clara{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #fff}
.bt svg{flex:none}

/* ---------- cabeçalho ---------- */
.faixa-topo{background:var(--preto);color:var(--amarelo);text-align:center;font-size:13px;font-weight:600;letter-spacing:.06em;padding:9px 16px}
.faixa-topo a{text-decoration:underline;text-underline-offset:3px}
.topo{position:sticky;top:0;z-index:30;background:rgba(245,242,240,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--linha)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:78px}
.marca img{height:50px;width:auto}
.menu{display:flex;gap:28px;font-size:15px;font-weight:600}
.menu a{text-decoration:none;color:var(--texto-2)}
.menu a:hover{color:var(--preto)}
.abre-menu{display:none;background:none;border:0;padding:8px;cursor:pointer}
@media (max-width:960px){
  .menu{display:none;position:absolute;top:78px;left:0;right:0;flex-direction:column;gap:0;background:var(--fundo);border-bottom:1px solid var(--linha);padding:8px 24px 20px}
  .menu a{padding:12px 0;font-size:17px}
  .menu.aberto{display:flex}
  .abre-menu{display:block}
  .topo .bt{display:none}
}

/* ---------- abertura ---------- */
.hero{padding:0;overflow:visible;position:relative;z-index:2}   /* os pacotes vazam para a seção de baixo */
.hero.graos{animation:graos-deriva 90s linear infinite}
@keyframes graos-deriva{to{background-position:180px 180px}}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px;align-items:center;min-height:min(80vh,680px);padding-top:56px;padding-bottom:56px}
@media (max-width:860px){.hero .wrap{grid-template-columns:minmax(0,1fr);min-height:0;padding-top:48px}}
.hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(48px,6.2vw,88px);letter-spacing:-.02em;line-height:.98}
.hero h1 em{display:block;font-style:italic;font-weight:500}
.hero p{font-size:clamp(17px,1.5vw,20px);max-width:44ch;margin:24px 0 32px;color:#2a2a2a}
.acoes{display:flex;gap:12px;flex-wrap:wrap}
/* Pacotes: arte do Bruno 2026 (Forte + Suave + xícara) com reflexo no chão. A base dos sacos fica na borda do amarelo
   e o reflexo (terço de baixo da imagem) cai no fundo claro. Sem sombra artificial e sem flutuar: o reflexo é chão. */
.pacotes{--h:clamp(380px,48vw,700px);position:relative;height:var(--h);align-self:end;margin-bottom:calc(-56px - var(--h)*.36)}   /* reflexo = .13 da imagem; .36 faz os sacos vazarem ~23% da altura para o fundo claro (pedido do Bruno 27/09) */
.pac{position:absolute;bottom:0;left:50%;height:100%;translate:-50% 0;z-index:1;animation:pac-sobe 1s .05s cubic-bezier(.2,.8,.2,1) both}
.pac img{display:block;height:100%;width:auto;max-width:none;object-fit:contain}   /* max-width:none: nunca achatar a foto numa coluna estreita */
@keyframes pac-sobe{from{opacity:0;transform:translateY(70px)}to{opacity:1;transform:none}}
@keyframes pac-flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (max-width:860px){.pacotes{--h:clamp(320px,96vw,520px);margin-bottom:calc(-48px - var(--h)*.30)}.intro{padding-top:calc(clamp(320px,96vw,520px)*.30 + 48px)}}
.selo-origem{animation:pac-sobe 1s .6s cubic-bezier(.2,.8,.2,1) both}
.selo-origem{position:absolute;top:-2%;right:-2%;z-index:4;width:132px;height:132px;border-radius:50%;background:var(--preto);color:var(--amarelo);display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.35;rotate:10deg}
.selo-origem b{display:block;font-family:var(--serif);font-size:24px;letter-spacing:0;text-transform:none;font-weight:700}

/* ---------- amamos café ---------- */
.intro{text-align:center;padding-top:clamp(240px,21vw,320px)}   /* espaço para a base dos pacotes */

.intro h2{max-width:16ch;margin:0 auto}
.intro .sub{margin:22px auto 0}
.valores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:52px;text-align:left}
@media (max-width:760px){.valores{grid-template-columns:minmax(0,1fr)}}
.valor{background:var(--branco);border-radius:var(--raio);padding:28px}
.valor h3{font-family:var(--serif);font-size:26px;font-weight:700}
.valor p{margin:10px 0 0;color:var(--texto-2);font-size:15px}

/* ---------- cafés ---------- */
.cafes-sec{background:var(--branco)}
.filtros{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.filtro{font-family:var(--sans);font-weight:700;font-size:14px;padding:10px 18px;border-radius:999px;border:0;cursor:pointer;background:transparent;color:var(--preto);box-shadow:inset 0 0 0 2px var(--linha)}
.filtro[aria-pressed="true"]{background:var(--preto);color:var(--amarelo);box-shadow:none}
.cafes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:30px}
@media (max-width:1040px){.cafes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.cafes{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
.cafe{background:var(--fundo);border-radius:var(--raio);padding:18px 18px 22px;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.cafe:hover{transform:translateY(-6px);box-shadow:0 22px 40px -22px rgba(26,30,37,.45)}
.cafe .foto img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cafe:hover .foto img{transform:scale(1.07) rotate(-3deg)}
.cafe[hidden]{display:none}
.cafe .foto{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:14px;background:var(--branco);overflow:hidden}
.cafe .foto img{width:92%;height:92%;object-fit:contain}
.cafe .tipo{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-top:16px;display:flex;align-items:center;gap:8px}
.cafe .tipo i{width:10px;height:10px;border-radius:50%;display:inline-block}
.cafe h3{font-family:var(--serif);font-size:24px;font-weight:700;margin-top:4px}
.cafe p{margin:8px 0 0;font-size:14px;color:var(--texto-2);line-height:1.55;flex:1}
.torra{display:flex;align-items:center;gap:4px;margin-top:12px;font-size:12px;color:var(--texto-2);font-weight:600}
.torra svg{width:14px;height:18px}
.cafe .bt{margin-top:16px;justify-content:center;padding:12px 16px;font-size:14px}
@media (max-width:560px){.cafe h3{font-size:20px}.cafe p{display:none}}
.cafe.destaque{background:var(--amarelo)}
.cafe.destaque .foto{background:#fff6c2}
.aviso-pedido{margin-top:28px;font-size:14px;color:var(--texto-2)}

/* ---------- história ---------- */
.linha-tempo{margin-top:56px;display:flex;flex-direction:column;gap:64px}
.marco{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.marco:nth-child(even) .marco-foto{order:2}
@media (max-width:820px){.marco{grid-template-columns:minmax(0,1fr);gap:18px}.marco:nth-child(even) .marco-foto{order:0}}
.marco-foto img{width:100%;max-width:460px;margin:0 auto}
.ano{font-family:var(--serif);font-weight:700;font-size:clamp(56px,7vw,92px);line-height:1;color:var(--ouro)}
.marco h3{font-family:var(--serif);font-size:32px;font-weight:700;margin-top:6px}
.marco p{color:var(--texto-2);margin:14px 0 0}
/* em abas (liga pelo script; sem script fica a lista corrida acima) */
.hist-topo{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 32px;flex-wrap:wrap}
.anos{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.anos[hidden]{display:none}
.anos button{position:relative;font-family:var(--serif);font-weight:700;font-size:clamp(18px,1.8vw,24px);background:none;border:0;padding:10px 14px 18px;cursor:pointer;color:#ABA59C;transition:color .3s}
.anos button:hover{color:var(--preto)}
.anos button[aria-selected="true"]{color:var(--preto)}
.anos i{position:absolute;left:14px;right:14px;bottom:6px;height:3px;border-radius:3px;background:var(--linha);overflow:hidden}
.anos i::after{content:"";position:absolute;inset:0;background:var(--ouro);transform:scaleX(0);transform-origin:left}
.anos button[aria-selected="true"] i::after{transform:scaleX(1)}
.anos button.correndo i::after{animation:enche 6.5s linear both}
.anos button.pausa i::after{animation-play-state:paused}
@keyframes enche{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.em-abas .linha-tempo{display:grid;gap:0;margin-top:44px}
.em-abas .marco{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s}
.em-abas .marco.ativo{opacity:1;visibility:visible}
.em-abas .marco:nth-child(even) .marco-foto{order:0}
.em-abas .marco-foto img{max-width:420px}
.em-abas .marco.ativo .marco-foto img{animation:foto-entra 1.1s cubic-bezier(.2,.8,.2,1) both}
.em-abas .marco.ativo .ano{animation:sobe-texto .8s .1s cubic-bezier(.2,.8,.2,1) both}
.em-abas .marco.ativo h3{animation:sobe-texto .8s .2s cubic-bezier(.2,.8,.2,1) both}
.em-abas .marco.ativo p{animation:sobe-texto .8s .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes foto-entra{from{opacity:0;transform:scale(.88) rotate(-5deg)}to{opacity:1;transform:none}}
@keyframes sobe-texto{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ---------- entradas no scroll ---------- */
.revela{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.8,.2,1) var(--atraso,0ms),transform .8s cubic-bezier(.2,.8,.2,1) var(--atraso,0ms)}
.revela.visto{opacity:1;transform:none}

/* ---------- fazenda ---------- */
.fazenda{position:relative;color:#fff;padding:0;overflow:hidden}
.fazenda .foto{position:absolute;inset:-8% 0;will-change:transform;background:url("../img/fazenda-drone.jpg") center/cover no-repeat}
.fazenda::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(26,30,37,.88) 0%,rgba(26,30,37,.55) 55%,rgba(26,30,37,.1) 100%)}
.fazenda .wrap{position:relative;z-index:2;padding-top:120px;padding-bottom:120px}
.fazenda img.logo-faz{width:120px;height:auto;margin-bottom:22px}
.fazenda h2{color:#fff;max-width:14ch}
.fazenda p{max-width:48ch;color:rgba(255,255,255,.88);margin:18px 0 30px}

/* ---------- receita ---------- */
.receita{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
@media (max-width:860px){.receita{grid-template-columns:minmax(0,1fr)}}
.ingredientes{display:flex;gap:14px;flex-wrap:wrap;margin:26px 0}
.ingredientes span{background:var(--amarelo);border-radius:999px;padding:8px 16px;font-weight:700;font-size:14px}
.passos{list-style:none;margin:0;padding:0;counter-reset:p}
.passos li{counter-increment:p;display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--linha);color:var(--texto-2);font-size:16px}
.passos li:last-child{border-bottom:0}
.passos li::before{content:counter(p);font-family:var(--serif);font-weight:700;font-size:26px;color:var(--preto);line-height:1.1}
.assina{font-family:var(--serif);font-style:italic;font-size:20px;margin-top:18px}

/* ---------- contato ---------- */
.contato{background:var(--preto);color:#fff}
.contato h2{color:#fff}
.contato .sub{color:rgba(255,255,255,.75)}
.canais{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:44px}
@media (max-width:900px){.canais{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.canais{grid-template-columns:minmax(0,1fr)}}
.canal{background:#262B33;border-radius:var(--raio);padding:26px;text-decoration:none;display:block;transition:background .15s}
.canal:hover{background:#2F353F}
.canal.zap-card{background:var(--amarelo);color:var(--preto)}
.canal small{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.canal strong{display:block;font-size:19px;margin-top:8px;word-break:break-word}

footer{background:#111418;color:rgba(255,255,255,.6);font-size:13px;padding:36px 0}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
footer img{height:54px;width:auto}
footer a{color:rgba(255,255,255,.8)}
.confirmar{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--amarelo);box-shadow:inset 0 0 0 1px var(--amarelo);border-radius:6px;padding:1px 6px;margin-left:6px;white-space:nowrap}
.zap{position:fixed;right:18px;bottom:18px;z-index:40;width:62px;height:62px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px -8px rgba(0,0,0,.45)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.hero.graos,.pac,.pac img,.selo-origem,.em-abas .marco *{animation:none!important}}

/* ---------- troca de idioma: ativo = sólido; demais = só texto ---------- */
.idiomas{display:flex;gap:4px;align-items:center}
.idiomas a{font-size:12px;font-weight:700;letter-spacing:.08em;text-decoration:none;color:var(--texto-2);padding:6px 9px;border-radius:999px}
.idiomas a:hover{color:var(--preto)}
.idiomas a[aria-current]{background:var(--preto);color:var(--amarelo)}
.topo .direita{display:flex;align-items:center;gap:14px}
@media (max-width:960px){.topo .direita{gap:6px}}

/* ---------- momento Petunia (mosaico; moldura só de contorno) ---------- */
.momentos{background:var(--branco)}
.momentos-grade{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(210px,290px));gap:16px}
.moldura{grid-row:1/3;align-self:center;box-shadow:inset 0 0 0 2px var(--preto);border-radius:var(--raio);padding:44px 36px;margin-right:18px}
.moldura h2{font-size:clamp(34px,3.6vw,50px)}
.moldura p:not(.eyebrow){color:var(--texto-2);margin:18px 0 28px}
.momentos figure{margin:0;border-radius:var(--raio);overflow:hidden;background:var(--linha)}
.momentos figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.momentos figure:hover img{transform:scale(1.06)}
.m1{grid-column:2/4;grid-row:1}.m1 img{object-position:30% 30%}
.m2{grid-column:2;grid-row:2}
.m3{grid-column:3;grid-row:2}
@media (max-width:860px){
  .momentos-grade{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto 240px 200px}
  .moldura{grid-column:1/3;grid-row:1;margin:0 0 6px}
  .m1{grid-column:1/3;grid-row:2}.m2{grid-column:1;grid-row:3}.m3{grid-column:2;grid-row:3}
}
.receita img.mestre{width:100%;max-width:520px;margin:0 auto;animation:pac-flutua 7s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.receita img.mestre{animation:none}}
@media (max-width:860px){.selo-origem{right:1%;top:0;width:108px;height:108px;font-size:10px}.selo-origem b{font-size:20px}}