/* =======================================================================
   MODELO 6 · O PERCURSO DO GRÃO
   Aqui a página conta UMA HISTÓRIA em ordem, do talhão até a saca, e o
   visitante acompanha por uma linha do tempo que anda com a rolagem. É o
   único modelo em que a estrutura é uma sequência, e não um índice.
   ======================================================================= */
@font-face{font-family:"Anton";src:url("fontes/anton.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex";src:url("fontes/plexsans-var.woff2") format("woff2");font-weight:100 700;font-display:swap}
@font-face{font-family:"PlexMono";src:url("fontes/plexmono.woff2") format("woff2");font-weight:400;font-display:swap}
:root{--flor:#eae3d2;--planta:#4f8a45;--lavoura:#11463f;--cafe:#e52330;
  --titulo:"Anton","Arial Narrow",sans-serif;--corpo:"Plex",Arial,sans-serif;--dado:"PlexMono",Menlo,monospace;
  --gut:clamp(20px,5vw,64px)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--flor);color:var(--lavoura);font-family:var(--corpo);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--titulo);font-weight:400;text-transform:uppercase;
  line-height:1.16;margin:0 0 .5em;text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
a{color:inherit}
.dentro{max-width:1180px;margin:0 auto;padding:0 var(--gut)}
.olho{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--planta);display:block;margin-bottom:.85rem}

.topo{position:sticky;top:0;z-index:50;background:var(--flor);
  border-bottom:1px solid rgba(17,70,63,.16)}
.topo .dentro{display:flex;align-items:center;gap:20px;min-height:70px;flex-wrap:wrap;
  padding-top:clamp(11px,1.1vw,16px);padding-bottom:clamp(11px,1.1vw,16px)}
.topo .marca img{width:clamp(145px,15vw,185px);height:auto}
.topo nav{margin-left:auto;display:flex;align-items:center;
  gap:clamp(12px,1.8vw,24px);flex-wrap:wrap}
.topo nav a{font-size:.73rem;letter-spacing:.11em;text-transform:uppercase;font-weight:500;
  text-decoration:none;border-bottom:2px solid transparent;padding:6px 0 4px;line-height:1}
.topo nav a:hover{border-bottom-color:var(--planta)}

.abre{padding:clamp(40px,6vw,92px) 0 clamp(26px,3.4vw,48px)}
.abre h1{font-size:clamp(2.2rem,6vw,4.6rem);max-width:15ch}
.abre .sub{max-width:46ch;font-size:clamp(1rem,1.6vw,1.2rem)}

/* ---- a linha do percurso ---- */
.percurso{position:relative;padding:clamp(20px,3vw,40px) 0 clamp(40px,5vw,80px)}
.percurso .trilho{position:absolute;left:calc(50% - 590px + var(--gut) + 15px);
  top:clamp(20px,3vw,40px);bottom:clamp(40px,5vw,80px);width:2px;background:rgba(17,70,63,.18)}
.percurso .andado{position:absolute;left:calc(50% - 590px + var(--gut) + 15px);
  top:clamp(20px,3vw,40px);width:2px;background:var(--planta);height:0;transition:height .12s linear}
@media(max-width:1180px){
  .percurso .trilho,.percurso .andado{left:calc(var(--gut) + 15px)}
}
@media(max-width:760px){.percurso .trilho,.percurso .andado{left:calc(var(--gut) + 7px)}}

.etapa{position:relative;padding:clamp(22px,3vw,44px) 0 clamp(22px,3vw,44px) clamp(50px,7vw,86px)}
.etapa .bola{position:absolute;left:calc(var(--gut) - var(--gut) + 8px);top:calc(clamp(22px,3vw,44px) + 6px);
  width:16px;height:16px;border-radius:50%;background:var(--flor);
  border:2px solid rgba(17,70,63,.35);transition:background .3s,border-color .3s,transform .3s}
.etapa.aqui .bola{background:var(--planta);border-color:var(--planta);transform:scale(1.25)}
@media(max-width:760px){.etapa .bola{left:0;width:14px;height:14px}}
.etapa .quando{font-family:var(--dado);font-size:.72rem;color:var(--planta);display:block;margin-bottom:.7rem}
.etapa h2{font-size:clamp(1.4rem,3vw,2.2rem);max-width:20ch}
.etapa .corpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(18px,3vw,44px);align-items:start;margin-top:1rem}
@media(max-width:820px){.etapa .corpo{grid-template-columns:1fr}}
.etapa figure{margin:0}
.etapa figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.etapa figcaption{font-family:var(--dado);font-size:.71rem;color:rgba(17,70,63,.6);padding-top:8px}
.etapa .ficha{border-top:1.5px solid rgba(17,70,63,.2);margin:1rem 0 0}
.etapa .ficha div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px solid rgba(17,70,63,.12);font-size:.86rem}
.etapa .ficha dt{opacity:.66;margin:0}
.etapa .ficha dd{font-family:var(--dado);font-size:.81rem;margin:0;text-align:right}

.chegada{background:var(--lavoura);color:var(--flor);padding:clamp(44px,6vw,92px) 0}
.chegada p{color:rgba(234,227,210,.9);max-width:48ch}
.chegada .olho{color:rgba(234,227,210,.72)}
.bt{display:inline-block;background:var(--flor);color:var(--lavoura);padding:15px 28px;
  text-decoration:none;font:600 .77rem/1 var(--corpo);letter-spacing:.14em;text-transform:uppercase;margin-top:1.3rem}
.bt:hover{background:transparent;color:var(--flor);box-shadow:inset 0 0 0 1.5px var(--flor)}
.rodape{background:var(--lavoura);color:rgba(234,227,210,.85);padding:0 0 28px;
  font-family:var(--dado);font-size:.73rem}
.rodape .rodape-fim{border-top:1px solid rgba(234,227,210,.18);margin-top:clamp(26px,3.4vw,44px);
  padding-top:20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
:focus-visible{outline:3px solid var(--planta);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.percurso .andado{transition:none}}

/* ---- vídeo no lugar da foto, no mesmo quadro ----
   Cada passo do percurso ganha movimento. O vídeo só carrega quando o passo
   entra na tela, e pausa quando sai: quem não chega até ali não paga por ele.
   O cartaz fica por trás, então nunca há quadro vazio. */
.etapa .quadro{position:relative;aspect-ratio:4/3;overflow:hidden;background:rgba(17,70,63,.08)}
.etapa .quadro video,.etapa .quadro img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.etapa .quadro video{z-index:2;opacity:0;transition:opacity .5s ease}
.etapa .quadro video.pronto{opacity:1}
.etapa .quadro .marca-video{position:absolute;z-index:3;right:8px;top:8px;
  font-family:var(--dado);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(17,70,63,.8);color:var(--flor);padding:5px 8px}
@media (prefers-reduced-motion:reduce){.etapa .quadro video{display:none}}

/* =======================================================================
   AMPLIAÇÃO: o percurso vira o MIOLO, e não a página inteira.
   Antes dele entra a abertura e a origem; depois dele os cafés, a
   responsabilidade e o contato. Assim a estrutura que funciona continua,
   e o site volta a dizer tudo o que precisa.
   ======================================================================= */

/* abertura com imagem larga logo abaixo do título */
.abre .grade{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(22px,4vw,60px);align-items:end}
@media(max-width:860px){.abre .grade{grid-template-columns:1fr}}
.abre .marcas{border-top:1.5px solid rgba(17,70,63,.22);padding-top:14px}
.abre .marcas div{display:flex;justify-content:space-between;gap:14px;padding:7px 0;
  border-bottom:1px solid rgba(17,70,63,.12);font-size:.87rem}
.abre .marcas dt{opacity:.66;margin:0}
.abre .marcas dd{font-family:var(--dado);font-size:.82rem;margin:0;text-align:right}
.faixa{width:100%;height:clamp(220px,34vw,460px);overflow:hidden;margin-top:clamp(24px,3.4vw,48px)}
.faixa img{width:100%;height:100%;object-fit:cover}
.faixa+.leg{font-family:var(--dado);font-size:.71rem;color:rgba(17,70,63,.6);
  padding:8px var(--gut) 0;max-width:80ch}

/* seções fora do percurso */
.sec{padding:clamp(38px,5.4vw,86px) 0;border-top:1px solid rgba(17,70,63,.16)}
.sec>.dentro>.cab{margin-bottom:clamp(20px,2.8vw,40px)}
.sec h2{font-size:clamp(1.7rem,3.6vw,2.8rem);max-width:20ch}
.medida{max-width:56ch}
.doisblocos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(22px,4vw,58px);align-items:start}
@media(max-width:880px){.doisblocos{grid-template-columns:1fr}}

/* os cafés, como índice que abre */
.indice{border-top:1.5px solid rgba(17,70,63,.22)}
.indice details{border-bottom:1px solid rgba(17,70,63,.15)}
.indice summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;
  gap:clamp(12px,2.2vw,30px);align-items:baseline;padding:clamp(16px,2.2vw,26px) 0;
  transition:padding-left .22s ease}
.indice summary::-webkit-details-marker{display:none}
.indice summary:hover{padding-left:9px}
.indice .num{font-family:var(--dado);font-size:.74rem;color:var(--planta)}
.indice .nome{font-family:var(--titulo);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.25rem,2.8vw,2.05rem);line-height:1.14}
.indice .cat{font-family:var(--dado);font-size:.72rem;color:rgba(17,70,63,.6);
  justify-self:end;text-align:right;white-space:nowrap}
.indice details[open] .nome{color:var(--planta)}
.indice .corpo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3.4vw,48px);
  padding:0 0 clamp(20px,2.6vw,32px)}
@media(max-width:760px){
  .indice summary{grid-template-columns:auto 1fr;row-gap:3px}
  .indice .cat{grid-column:2;justify-self:start;text-align:left}
  .indice .corpo{grid-template-columns:1fr}
}
.indice .corpo p{margin:0 0 .9em}
.ficha2{border-top:1.5px solid rgba(17,70,63,.2);margin:0}
.ficha2 div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px solid rgba(17,70,63,.12);font-size:.86rem}
.ficha2 dt{opacity:.66;margin:0}
.ficha2 dd{font-family:var(--dado);font-size:.81rem;margin:0;text-align:right}

/* públicos como frase */
.frase{font-family:var(--titulo);font-size:clamp(1.25rem,2.9vw,2.05rem);line-height:1.3;
  text-transform:uppercase;margin:0 0 clamp(20px,2.6vw,34px);max-width:25ch}
.frase b{font-weight:400;color:var(--planta)}
.ofertas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(14px,2vw,24px)}
.oferta{background:rgba(17,70,63,.055);padding:clamp(18px,2.3vw,26px)}
.oferta h3{font-size:1rem;margin-bottom:.55em}
.oferta p{font-size:.93rem;color:rgba(17,70,63,.82);margin:0}

/* mapa que aproxima, desenho nosso, sem serviço externo */
.mapa2{position:relative;background:rgba(17,70,63,.05);padding:clamp(18px,2.4vw,28px);overflow:hidden}
.mapa2 svg{width:100%;height:auto;display:block}
.mapa2 .zoom{transform-box:view-box;transform-origin:var(--fx) var(--fy);
  transition:transform 1.6s cubic-bezier(.22,.61,.36,1)}
.mapa2.perto .zoom{transform:scale(var(--esc))}
.mapa2 .rot{font:600 9.5px "Plex",system-ui,sans-serif;fill:#eae3d2;fill-opacity:1;
  letter-spacing:.14em;text-transform:uppercase;
  stroke:#11463f;stroke-width:2.6px;stroke-linejoin:round;paint-order:stroke fill}
.mapa2 .passos{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.mapa2 .passos button{font-family:var(--dado);font-size:.72rem;border:1px solid rgba(17,70,63,.28);
  background:none;color:var(--lavoura);padding:8px 13px;cursor:pointer;transition:background .2s,border-color .2s}
.mapa2 .passos button[aria-pressed="true"]{background:var(--lavoura);color:var(--flor);border-color:var(--lavoura)}
.mapa2 .passos button:hover{border-color:var(--lavoura)}
.mapa2 .nota{font-family:var(--dado);font-size:.72rem;color:rgba(17,70,63,.58);margin:12px 0 0}
@media (prefers-reduced-motion:reduce){.mapa2 .zoom{transition:none}}

/* corte do terreno, medido ponto a ponto */
.relevo{margin-top:clamp(26px,3.6vw,48px)}
.relevo svg{width:100%;height:auto;display:block}
.relevo .nota{font-family:var(--dado);font-size:.72rem;color:rgba(17,70,63,.6);margin:10px 0 0}
.altit{border-top:1.5px solid rgba(17,70,63,.2);margin-top:clamp(18px,2.4vw,30px);padding-top:14px}
.altit b{font-family:var(--titulo);font-weight:400;font-size:clamp(1.9rem,3.8vw,2.9rem);
  line-height:1;display:block;margin-bottom:.2em}
.altit small{font-family:var(--dado);font-size:.72rem;color:rgba(17,70,63,.6);display:block;max-width:48ch}

/* pilares */
.pilares{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:clamp(18px,2.6vw,34px)}
.pilar h3{font-size:1rem;margin-bottom:.5em}
.pilar p{font-size:.92rem;color:rgba(17,70,63,.82);margin:0 0 .6em}
.pilar .fonte{font-family:var(--dado);font-size:.69rem;color:rgba(17,70,63,.55)}

/* contato e rodapé completos */
.contatos{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(20px,3vw,44px);margin-top:clamp(24px,3vw,42px)}
.contatos h3{font-family:var(--corpo);font-size:.71rem;letter-spacing:.19em;text-transform:uppercase;
  font-weight:600;color:rgba(234,227,210,.58);margin:0 0 .8em}
.contatos a{color:var(--flor);text-decoration:none;display:block;padding:4px 0;width:fit-content;
  border-bottom:1px solid transparent}
.contatos a:hover{border-bottom-color:var(--planta)}
.rodape .grade{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(22px,4vw,52px);
  padding:clamp(30px,4vw,52px) 0 0;font-family:var(--corpo);font-size:.9rem}
@media(max-width:800px){.rodape .grade{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.rodape .grade{grid-template-columns:1fr}}
.rodape .grade h4{font-family:var(--corpo);font-size:.7rem;letter-spacing:.19em;text-transform:uppercase;
  font-weight:600;color:rgba(234,227,210,.5);margin:0 0 .9em}
.rodape .grade a{color:rgba(234,227,210,.85);text-decoration:none;display:block;padding:4px 0;width:fit-content}
.rodape .grade a:hover{color:var(--flor)}
.rodape .marca-rod{max-width:190px;margin-bottom:16px;line-height:0}
.rodape .marca-rod img{width:100%;height:auto}
.rodape .selos{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.rodape .selos span{font-family:var(--dado);font-size:.68rem;color:rgba(234,227,210,.6);
  border:1px solid rgba(234,227,210,.22);padding:5px 9px}
.subir{position:fixed;right:14px;bottom:14px;z-index:60;background:var(--lavoura);color:var(--flor);
  border:1px solid rgba(234,227,210,.3);width:42px;height:42px;cursor:pointer;font:600 15px/1 var(--corpo);
  opacity:0;pointer-events:none;transition:opacity .3s}
.subir.aparece{opacity:1;pointer-events:auto}
.subir:hover{background:var(--flor);color:var(--lavoura)}
@media print{.subir,.topo{position:static}}

/* respiro no meio do percurso: uma faixa larga entre o 3º e o 4º passo, para
   a sequência não virar uma lista sem pausa */
.respiro{margin:clamp(14px,2vw,26px) 0 clamp(14px,2vw,26px) clamp(50px,7vw,86px)}
.respiro .quadro-largo{width:100%;height:clamp(190px,26vw,360px);overflow:hidden}
.respiro img{width:100%;height:100%;object-fit:cover}
.respiro figcaption{font-family:var(--dado);font-size:.71rem;color:rgba(17,70,63,.6);padding-top:8px}
.respiro figure{margin:0}

/* menu do celular: botão que abre, para a barra fixa não roubar um quinto da tela */
.abre-menu{display:none;margin-left:auto;background:none;border:1px solid rgba(17,70,63,.3);
  color:var(--lavoura);font:600 .73rem/1 var(--corpo);letter-spacing:.14em;text-transform:uppercase;
  padding:11px 15px;cursor:pointer;min-height:44px}
.abre-menu[aria-expanded="true"]{background:var(--lavoura);color:var(--flor);border-color:var(--lavoura)}
@media(max-width:760px){
  .abre-menu{display:block}
  .topo .dentro{min-height:62px}
  .topo .marca img{width:132px;height:auto}
  .topo nav{display:none;width:100%;margin:0;flex-direction:column;gap:0;
    border-top:1px solid rgba(17,70,63,.16);padding:6px 0 12px}
  .topo nav.aberto{display:flex}
  .topo nav a{padding:13px 0;border-bottom:none;font-size:.82rem}
}

/* troca de idioma: sinalizada, não escondida no meio dos outros itens */
.topo nav a.idioma{border:1px solid rgba(17,70,63,.3);padding:5px 12px;font-size:.73rem;
  border-bottom-width:1px;margin-left:6px;line-height:1}
.topo nav a.idioma:hover{background:var(--lavoura);color:var(--flor);border-color:var(--lavoura)}
@media(max-width:760px){
  .topo nav a.idioma{align-self:flex-start;margin:8px 0 0;padding:9px 13px}
}

/* a faixa da abertura também é vídeo: o cartaz fica por trás, então nunca há
   quadro vazio, e o vídeo só aparece quando já tem imagem */
.faixa{position:relative}
.faixa img,.faixa video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.faixa video{z-index:2;opacity:0;transition:opacity .6s ease}
.faixa video.pronto{opacity:1}
@media (prefers-reduced-motion:reduce){.faixa video{display:none}}

/* =======================================================================
   OS EFEITOS DO SITE, EM UM LUGAR SÓ
   Antes cada estado de foco ou de passagem do cursor trocava de cor num
   estalo, e a página não tinha nenhuma entrada. Aqui ficam a curva e o tempo
   que valem para tudo, para o site inteiro se mover do mesmo jeito.
   Nada disso esconde conteúdo: a animação MOVE, nunca apaga. Quem pede menos
   movimento no sistema recebe a página parada, e inteira.
   ======================================================================= */
:root{
  --tempo:.28s;          /* passagem do cursor, foco, estados      */
  --tempo-longo:.6s;     /* entrada de bloco ao rolar              */
  --curva:cubic-bezier(.22,.61,.36,1);   /* sai rápido, chega devagar */
}

/* ---- passagem do cursor e foco ---- */
.topo nav a{transition:border-bottom-color var(--tempo) var(--curva),
  color var(--tempo) var(--curva)}
.topo nav a.idioma{transition:background var(--tempo) var(--curva),
  color var(--tempo) var(--curva), border-color var(--tempo) var(--curva)}
.abre-menu{transition:background var(--tempo) var(--curva),
  color var(--tempo) var(--curva), border-color var(--tempo) var(--curva)}
.bt{transition:background var(--tempo) var(--curva), color var(--tempo) var(--curva),
  box-shadow var(--tempo) var(--curva), transform var(--tempo) var(--curva)}
.bt:active{transform:translateY(1px)}
.contatos a{transition:border-bottom-color var(--tempo) var(--curva),
  color var(--tempo) var(--curva)}
.rodape .grade a{transition:color var(--tempo) var(--curva),
  transform var(--tempo) var(--curva)}
.rodape .grade a:hover{transform:translateX(3px)}
.subir{transition:opacity var(--tempo) var(--curva), background var(--tempo) var(--curva),
  color var(--tempo) var(--curva), transform var(--tempo) var(--curva)}
.subir:hover{transform:translateY(-2px)}
.mapa2 .passos button{transition:background var(--tempo) var(--curva),
  color var(--tempo) var(--curva), border-color var(--tempo) var(--curva)}

/* o cartão de oferta responde ao cursor sem sair do lugar da grade */
.oferta{transition:background var(--tempo) var(--curva),
  transform var(--tempo) var(--curva)}
.oferta:hover{background:rgba(17,70,63,.09);transform:translateY(-3px)}

/* a bola do percurso acende e o passo em que se está ganha peso */
.etapa .bola{transition:background .4s var(--curva),border-color .4s var(--curva),
  transform .4s var(--curva)}
.etapa h2,.etapa .quando{transition:color .4s var(--curva)}
.etapa.aqui .quando{color:var(--planta)}

/* o foco do teclado passeia junto, em vez de pular */
:focus-visible{transition:outline-offset var(--tempo) var(--curva)}

/* ---- o índice dos cafés abre em vez de saltar ---- */
.indice summary{transition:padding-left var(--tempo) var(--curva),
  background var(--tempo) var(--curva)}
.indice summary:hover{background:rgba(17,70,63,.04)}
.indice .nome{transition:color var(--tempo) var(--curva)}
@supports selector(::details-content){
  .indice details::details-content{
    block-size:0;overflow:clip;opacity:0;
    transition:block-size var(--tempo-longo) var(--curva),
               opacity var(--tempo) var(--curva),
               content-visibility var(--tempo-longo) allow-discrete;
  }
  .indice details[open]::details-content{block-size:auto;opacity:1}
  @supports (interpolate-size: allow-keywords){ :root{interpolate-size:allow-keywords} }
}

/* ---- entrada dos blocos, conduzida pela rolagem, sem JavaScript ----
   Fica dentro de @supports: onde a técnica não existir, o conteúdo aparece
   normalmente, sem depender de script nenhum para se revelar. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .sec>.dentro>.cab,.doisblocos>*,.indice details,.oferta,.pilar,
    .etapa .corpo,.etapa h2,.etapa .quando,.abre .grade>*,.contatos>*,
    .relevo,.respiro,.leg{
      animation:entra var(--tempo-longo) var(--curva) both;
      animation-timeline:view();
      animation-range:entry 5% cover 22%;
    }
    @keyframes entra{ from{opacity:.35;transform:translateY(14px)} to{opacity:1;transform:none} }
  }
}

/* ---- botão flutuante do WhatsApp ----
   Fica embaixo, e o "voltar ao topo" sobe para cima dele, para os dois nunca
   disputarem o mesmo canto. Alvo de 54 px, acima do mínimo de toque. */
.zap{position:fixed;right:14px;bottom:14px;z-index:60;width:54px;height:54px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--planta);color:var(--flor);text-decoration:none;
  box-shadow:0 6px 18px rgba(17,70,63,.28);
  transition:transform var(--tempo) var(--curva), background var(--tempo) var(--curva),
             box-shadow var(--tempo) var(--curva)}
.zap svg{width:28px;height:28px;fill:currentColor}
.zap:hover{background:var(--lavoura);transform:translateY(-3px) scale(1.04);
  box-shadow:0 10px 24px rgba(17,70,63,.34)}
.zap:active{transform:translateY(0) scale(.98)}
.subir{bottom:78px}
@media(max-width:520px){
  .zap{width:50px;height:50px;right:12px;bottom:12px}
  .zap svg{width:26px;height:26px}
  .subir{right:12px;bottom:70px;width:38px;height:38px}
}
@media print{.zap{display:none}}

/* ---- sumário dos seis passos, na abertura ----
   No lugar da ficha técnica que não orientava ninguém: o título promete seis
   passos, aqui estão eles, e cada um leva direto ao seu trecho. */
.sumario{list-style:none;margin:0;padding:0;border-top:1.5px solid rgba(17,70,63,.22)}
.sumario li{border-bottom:1px solid rgba(17,70,63,.12)}
.sumario a{display:flex;align-items:baseline;gap:clamp(12px,1.8vw,22px);
  padding:clamp(9px,1.1vw,13px) 0;text-decoration:none;
  transition:padding-left var(--tempo) var(--curva),color var(--tempo) var(--curva)}
.sumario a:hover{padding-left:9px;color:var(--planta)}
.sumario .n{font-family:var(--dado);font-size:.74rem;color:var(--planta);flex:none}
.sumario .q{font-size:.95rem}
@media(max-width:860px){ .sumario{margin-top:clamp(18px,3vw,28px)} }

/* =======================================================================
   SEGUNDA CAMADA DE EFEITOS
   Tudo aqui é conduzido pelo MOTOR DO NAVEGADOR, não por JavaScript: a
   rolagem é a linha do tempo. Sai mais macio que qualquer script, não trava
   com o dedo na tela e não custa processamento a cada quadro.
   Regra que não se quebra: nada disso esconde conteúdo. Cada efeito vive
   dentro de @supports e some para quem pede menos movimento.
   ======================================================================= */

/* ---- 1. régua de leitura, no fio da barra fixa ----
   Diz onde a pessoa está numa página longa, sem ocupar espaço nenhum. */
.topo::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:var(--planta);transform-origin:0 50%;transform:scaleX(0)}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .topo::after{animation:regua linear both;animation-timeline:scroll(root block)}
    @keyframes regua{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }
}

/* ---- 2. a marca recolhe quando a página anda ----
   Dá a sensação de barra que responde, sem mexer na altura (que causaria
   solavanco no texto). Só o desenho encolhe. */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference) and (min-width:761px){
    .topo .marca img{
      animation:recolhe linear both;animation-timeline:scroll(root block);
      animation-range:0 320px}
    @keyframes recolhe{to{width:clamp(120px,12.4vw,152px)}}
  }
}

/* ---- 3. a imagem chega, não aparece ----
   Um véu que se abre de baixo para cima e um respiro de escala. Começa em 88%
   de opacidade, nunca em zero: se a técnica faltar, a foto já está lá inteira. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .etapa figure img,.etapa .quadro,.respiro .quadro-largo{
      animation:chega .9s var(--curva) both;
      animation-timeline:view();animation-range:entry 2% cover 26%}
    @keyframes chega{
      from{opacity:.88;transform:scale(1.05);clip-path:inset(14% 0 0 0)}
      to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
    }
  }
}

/* ---- 4. a faixa de vídeo respira com a rolagem ----
   Deslocamento pequeno, de propósito: o suficiente para dar profundidade e
   pouco para não embrulhar o estômago de ninguém. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .faixa video,.faixa img{animation:respira linear both;
      animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes respira{from{transform:translateY(-3.5%) scale(1.07)}
                       to{transform:translateY(3.5%) scale(1.07)}}
  }
}

/* ---- 5. o passo em que se está ganha o foco, os outros recuam ---- */
.etapa{transition:opacity .5s var(--curva)}
@media (hover: hover) and (prefers-reduced-motion: no-preference){
  .percurso:has(.etapa.aqui) .etapa:not(.aqui){opacity:.62}
}

/* ---- 6. no índice dos cafés, o aberto manda ----
   Quando um café está aberto, os fechados recuam. :has() faz isso sem script. */
.indice details{transition:opacity .35s var(--curva)}
@media (hover: hover){
  .indice:has(details[open]) details:not([open]){opacity:.55}
  .indice:has(details[open]) details:not([open]):hover{opacity:1}
}

/* ---- 7. a passagem de idioma não pisca ----
   Duas páginas de mesma origem, uma trocando pela outra em transição. */
@view-transition{ navigation: auto }
@media (prefers-reduced-motion: reduce){ @view-transition{ navigation: none } }
::view-transition-old(root){animation:vt-sai .28s var(--curva) both}
::view-transition-new(root){animation:vt-entra .34s var(--curva) both}
@keyframes vt-sai{to{opacity:0}}
@keyframes vt-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- 8. o toque não fica com o efeito do cursor grudado ----
   Sem isto, no celular o cartão fica "levantado" depois do toque. */
@media (hover: none){
  .oferta:hover,.subir:hover,.zap:hover,.rodape .grade a:hover{transform:none}
  .indice summary:hover{padding-left:0;background:none}
  .sumario a:hover{padding-left:0}
}

/* ---- 9. content-visibility: TIRADO DE PROPÓSITO ----
   Ganhava desenho, mas as seções aqui têm alturas muito diferentes, e o
   tamanho declarado fazia a página inteira medir 8.029 px em vez de 9.323.
   Barra de rolagem que mente é rolagem que escorrega debaixo do dedo. Só volta
   se cada seção puder declarar a própria altura real. */

/* ---- 10. o foco do teclado fica visível também sobre o verde escuro ---- */
.chegada :focus-visible,.rodape :focus-visible{outline-color:var(--flor)}

/* ---- o formulário de contato, sobre o verde escuro ----
   Campo com 16px de fonte: abaixo disso o Safari do iPhone dá zoom sozinho ao
   toque, e o visitante acha que "a tela pulou". */
.fala{margin-top:clamp(26px,3.4vw,44px);max-width:760px}
.fala label{display:block;margin-bottom:clamp(12px,1.6vw,18px)}
.fala label span{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:rgba(234,227,210,.62);margin-bottom:.5em}
.fala label b{color:var(--planta);font-weight:600;margin-left:.25em}
.fala input,.fala textarea{width:100%;font:400 16px/1.5 var(--corpo);color:var(--flor);
  background:rgba(234,227,210,.07);border:1px solid rgba(234,227,210,.24);
  border-radius:0;padding:13px 14px;
  transition:border-color var(--tempo) var(--curva),background var(--tempo) var(--curva)}
.fala textarea{resize:vertical;min-height:120px}
.fala input::placeholder{color:rgba(234,227,210,.4)}
.fala input:hover,.fala textarea:hover{border-color:rgba(234,227,210,.42)}
.fala input:focus,.fala textarea:focus{outline:none;border-color:var(--planta);
  background:rgba(234,227,210,.11)}
.fala input:focus-visible,.fala textarea:focus-visible{outline:3px solid var(--planta);outline-offset:2px}
.fala .dupla{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(14px,2vw,22px)}
@media(max-width:640px){.fala .dupla{grid-template-columns:1fr}}
.fala .isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fala .envio{display:flex;align-items:center;gap:clamp(14px,2vw,24px);flex-wrap:wrap;margin-top:6px}
.fala .bt{margin-top:0}
.fala button[disabled]{opacity:.6;cursor:progress}
.recado{margin:0;font-size:.9rem;color:rgba(234,227,210,.75)}
.recado.bom{color:var(--flor)}
.recado.ruim{color:#ffb4a8}

/* ---- páginas de texto corrido (privacidade) ---- */
.medida h3{font-size:clamp(1.05rem,1.9vw,1.35rem);margin-top:1.9em}
.medida h3:first-child{margin-top:0}
.lista{margin:0 0 1em;padding-left:1.15em}
.lista li{margin-bottom:.45em}
.quando{font-family:var(--dado);font-size:.75rem;color:rgba(17,70,63,.55);
  margin-top:2.4em;border-top:1px solid rgba(17,70,63,.15);padding-top:14px}
.medida a{color:var(--planta);text-underline-offset:3px}

/* =======================================================================
   O BOTÃO, REDESENHADO
   O anterior era um retângulo chapado de canto vivo, com a letra em caixa
   alta muito espaçada: lia como caixa de sistema, não como marca. Agora é
   pílula, com a palavra em caixa normal e peso, e uma seta que anda para a
   frente quando o cursor chega. A seta é máscara sobre a cor do texto, então
   acompanha a cor em qualquer fundo, sem arquivo separado.
   ======================================================================= */
.bt{display:inline-flex;align-items:center;gap:.62em;
  background:var(--flor);color:var(--lavoura);
  padding:15px 26px;border:0;border-radius:999px;cursor:pointer;
  font:600 .95rem/1 var(--corpo);letter-spacing:.005em;text-transform:none;
  text-decoration:none;margin-top:1.3rem;
  box-shadow:0 3px 14px rgba(17,70,63,.16);
  transition:background var(--tempo) var(--curva), color var(--tempo) var(--curva),
             box-shadow var(--tempo) var(--curva), transform var(--tempo) var(--curva)}
.bt::after{content:"";width:1.02em;height:1.02em;flex:none;background:currentColor;
  -webkit-mask:var(--seta) center/contain no-repeat;
  mask:var(--seta) center/contain no-repeat;
  transition:transform var(--tempo) var(--curva)}
:root{--seta:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12h13M12.5 5.5 19 12l-6.5 6.5" fill="none" stroke="black" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/></svg>')}
.bt:hover{background:var(--planta);color:var(--flor);
  box-shadow:0 6px 20px rgba(17,70,63,.26);transform:translateY(-2px)}
.bt:hover::after{transform:translateX(4px)}
.bt:active{transform:translateY(0);box-shadow:0 2px 8px rgba(17,70,63,.2)}
.bt:focus-visible{outline:3px solid var(--planta);outline-offset:3px}
/* dentro do formulário, sobre o verde escuro, o foco precisa do creme */
.fala .bt:focus-visible{outline-color:var(--flor)}
@media (hover: none){ .bt:hover{transform:none} .bt:hover::after{transform:none} }

/* ---- contato em duas colunas ----
   Antes o formulário descia sozinho numa coluna e o lado direito ficava vazio
   até o rodapé. Agora o convite e os canais diretos ficam de um lado, e o
   formulário do outro: quem prefere escrever por e-mail ou WhatsApp vê a opção
   na mesma altura do olho. */
.contato-grade{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,5vw,72px);align-items:start}
@media(max-width:900px){.contato-grade{grid-template-columns:1fr;gap:clamp(24px,4vw,40px)}}
.contato-grade .contatos{grid-template-columns:1fr;gap:clamp(16px,2.2vw,26px);
  margin-top:clamp(22px,3vw,36px)}
.contato-grade .fala{margin-top:0;max-width:none}
@media(min-width:901px){
  .contato-grade .lado:last-child{background:rgba(234,227,210,.05);
    padding:clamp(22px,2.6vw,34px);border:1px solid rgba(234,227,210,.14)}
}

/* ---- o rodapé precisa caber ABAIXO dos botões flutuantes ----
   No iPhone, o botão de WhatsApp e o de voltar ao topo ficavam por cima da
   última linha do rodapé. Elemento fixo não ocupa espaço no layout: o espaço
   tem de ser reservado à mão. A conta é a altura dos dois empilhados mais
   folga, e a área segura do aparelho por baixo. */
.rodape{padding-bottom:calc(28px + env(safe-area-inset-bottom, 0px))}
@media(max-width:620px){
  .rodape{padding-bottom:calc(132px + env(safe-area-inset-bottom, 0px))}
  .rodape-fim{flex-direction:column;gap:6px}
}

/* ---- órfã: o navegador resolve melhor que espaço rígido a cada caso ----
   `text-wrap: pretty` faz o próprio motor evitar terminar um bloco com uma
   palavra sozinha, em QUALQUER largura de tela. Já estava nos parágrafos;
   faltava em todo o resto, e era ali que as órfãs apareciam: fichas, legendas,
   rótulos, itens de lista. O espaço rígido continua onde o par não pode se
   separar nunca (valor e unidade, "São Paulo, Brasil"), que é outra coisa.
   O equilíbrio de linha (text-wrap:balance) é regra da casa desde
   22/08/2026 e vale inteira para título, rótulo, número com unidade e
   texto dentro de arte. Para PARÁGRAFO CORRIDO LONGO, quando o navegador
   se recusa a equilibrar (o Chrome desiste acima de seis linhas), o Neto
   aprovou exceção em 27/08/2026: ali fica valendo o pretty, que evita a
   palavra sozinha na última linha. A exceção prende-se ao parágrafo, pela
   classe dele, nunca a uma largura de tela, senão cala o equilíbrio em
   página que estava certa. O registro está em
   _conserto-sem-js/6-pedido-de-excecao-ao-neto.txt. */
dd,dt,figcaption,li,summary,.olho,.cat,.nome,.leg,.fonte,.nota,.quando,
.oferta p,.pilar p,.sumario .q,.rodape .grade a,.contatos a,
.recado,.fala label span,.medida{text-wrap:pretty}
h1,h2,h3,h4,.frase,.rodape-fim span{text-wrap:balance}

/* ÂNCORA DE COLAGEM: este bloco vai no FIM do estilo.css, depois da última
   linha do arquivo, que é a do text-wrap:balance (ela começa com
   "h1,h2,h3,h4,.frase"; o arquivo 4 acrescenta um seletor a ela, e tanto faz
   colar antes ou depois disso). Não substitui nada: só acrescenta. A ordem
   importa, porque .bt.bt-lavoura:hover precisa vir depois de .bt:hover, que
   mora mais acima, e porque as regras daqui contam com estar depois das da
   casa. Nenhuma regra existente é alterada por este bloco: as três trocas que
   mexem no que já existe estão no arquivo 4, no lugar delas.

   =======================================================================
   AS PÁGINAS DE AVISO (o envio sem JavaScript e a 404)
   São as duas páginas que a pessoa vê quando algo deu errado. Cada uma tem
   UMA ação principal, escura e cheia, e nada disputando com ela. A do envio
   sem JavaScript ainda guarda o texto de quem escreveu, com nome, alvo de
   toque de gente e cópia que sai no papel: é a última chance de não perder
   a mensagem de um comprador.
   O gancho é a classe "aviso" no <body>. Fora a variante do botão, que é uma
   classe nova e não muda nada de quem não a usa, nenhuma regra daqui alcança
   outra página do site: tudo mais está preso ao .aviso.
   TODA taxa escrita aqui vem com o par (frente sobre fundo), medida no
   navegador, nunca estimada.
   ======================================================================= */

/* ---- 1. O BOTÃO PARA FUNDO CLARO ----
   O .bt nasceu para viver sobre o verde escuro da seção de contato: ele é
   creme CHEIO, e creme é o fundo de todo o resto do site. Em fundo claro o
   fundo do botão mede a mesma cor do fundo da página (1,00:1) e ele vira uma
   pílula fantasma, visível só pela sombra. Esta é a variante para fundo
   claro; o .bt original, que está no ar e funciona onde está, não muda um
   byte. Medido: Flor #eae3d2 sobre Lavoura #11463f = 8,33:1. */
.bt.bt-lavoura{background:var(--lavoura);color:var(--flor);
  box-shadow:0 3px 14px rgba(17,70,63,.22)}
/* na passagem do cursor ele INVERTE, em vez de virar Planta como o .bt faz:
   Flor #eae3d2 sobre Planta #4f8a45 mede 3,25:1 e reprovaria o piso de
   4,5:1. Invertido, os dois estados medem 8,33:1 (Lavoura #11463f sobre
   Flor #eae3d2), e o anel de 2 px continua marcando o limite do alvo. */
.bt.bt-lavoura:hover{background:transparent;color:var(--lavoura);
  box-shadow:inset 0 0 0 2px var(--lavoura),0 6px 20px rgba(17,70,63,.18)}
/* no celular o :hover fica grudado depois do toque: ali o botão fica cheio */
@media (hover:none){
  .bt.bt-lavoura:hover{background:var(--lavoura);color:var(--flor);
    box-shadow:0 3px 14px rgba(17,70,63,.22)}
}
/* O APERTO, que faltava. Em aparelho de toque não há cursor, o :hover está
   neutralizado logo acima, e o :active da casa só troca a sombra: dentro de
   um botão Lavoura, sombra Lavoura não aparece. Resultado: o botão não
   devolvia sinal nenhum no dedo, num momento em que abrir o programa de
   e-mail pode demorar. Agora ele inverte e afunda 1 px. Medido: Lavoura
   #11463f sobre Flor #eae3d2 = 8,33:1, o mesmo do estado de repouso. */
.bt.bt-lavoura:active{background:var(--flor);color:var(--lavoura);
  box-shadow:inset 0 0 0 2px var(--lavoura),0 1px 4px rgba(17,70,63,.2);
  transform:translateY(1px)}

/* ---- 2. a casca das páginas de aviso ---- */
/* o olho em Planta #4f8a45 sobre Flor #eae3d2 mede 3,25:1 e reprova o piso
   de 4,5:1 de texto pequeno. Em Lavoura #11463f sobre Flor #eae3d2 mede
   8,33:1. Numa página de aviso, a sobriedade ainda cai bem. */
.aviso .olho{color:var(--lavoura)}
.aviso h1{font-size:clamp(1.7rem,3.6vw,2.8rem);max-width:18ch;margin-bottom:.42em}
/* O PARÁGRAFO QUEBRA EQUILIBRADO, E A EXCEÇÃO É DO PARÁGRAFO, NÃO DA TELA.
   O texto enchia a linha até onde coubesse e despejava o resto na última, que
   saía curtíssima. Medido nas linhas RENDERIZADAS (não no código), antes:
       português, 390 px .... 44 contra 14 caracteres
       inglês, 768 e 1440 px  73 contra 24 caracteres
   O quebra_linha.py reprova os três ("linhas muito desiguais"). Com o
   equilíbrio, o navegador reparte as linhas e as quebras passam a cair em fim
   de frase, que é onde a frase respira.

   O QUE ESTAVA ERRADO NA PRIMEIRA VERSÃO DESTE BLOCO, e é lição: o problema
   tem escopo de PARÁGRAFO (um parágrafo longo que o navegador se recusa a
   equilibrar) e eu tinha escrito o remédio com escopo de LARGURA
   (@media min-width:340px). Remédio de escopo errado cala o conserto onde ele
   funcionava: em 320 px ficavam sem equilíbrio a 404 em português (27/34/28/18
   caracteres), a 404 em inglês (29/33/29/17) e o aviso em inglês (última linha
   com 21), todas com quatro a seis linhas, ou seja, dentro do que o navegador
   equilibra. Agora o equilíbrio vale para todo .medida da página, e a exceção
   está presa NO parágrafo que a justifica, pela classe "explica".

   A EXCEÇÃO, APROVADA PELO NETO EM 27/08/2026: parágrafo corrido longo, onde o
   navegador se recusa a equilibrar, fica dispensado da linha equilibrada. Aqui
   isso acontece num lugar só: o parágrafo que explica o que houve, em 320 px,
   onde ele ocupa sete linhas (medido: vira de seis para sete entre 324 e
   322 px) e o Chrome desiste de equilibrar acima de seis. Sem o pretty naquela
   largura a última linha ficaria só com "rodou.", uma palavra: por isso a
   exceção devolve o pretty ali, e só ali. O piso de 339 px não é medida de
   aparelho, é o degrau logo abaixo da virada medida.
   A exceção NÃO alcança título, rótulo, número com unidade nem texto dentro de
   arte: esses seguem sob a regra inteira de 22/08/2026. O registro da decisão
   está em _conserto-sem-js/6-pedido-de-excecao-ao-neto.txt. */
.aviso .medida{text-wrap:balance}
@media(max-width:339px){
  /* PRESA AO IDIOMA, e não só ao parágrafo. Medido em 320 px em 27/08/2026:
     o parágrafo em português ocupa SETE linhas (32/26/23/27/33/29/10) e o
     Chrome desiste de equilibrar acima de seis, então a exceção se justifica e
     evita a última linha com "não rodou." sozinha; o mesmo parágrafo em inglês
     ocupa SEIS (30/31/27/21/29/24), dentro do que o navegador equilibra. Sem a
     trava do idioma, a exceção calava o equilíbrio numa língua onde a condição
     que a justifica não acontece. */
  html[lang="pt-BR"] .aviso .explica{text-wrap:pretty}
}
/* o rodapé destas páginas não reserva os 132 px que a casa guarda embaixo
   para os dois botões flutuantes: aqui não existe nenhum dos dois, e o
   espaço saía como um bloco de verde vazio no fim da tela. */
.aviso .rodape{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}

/* O RODAPÉ DESCE ATÉ O FIM DA TELA, MESMO EM PÁGINA CURTA.
   Página de aviso é curta por natureza, e o rodapé parava onde o texto
   acabava: embaixo dele sobrava um bloco de fundo creme vazio, e a tela dava
   a impressão de estar cortada no meio. Medido aqui, antes do conserto:
       404, 390x844 ....... 221 px de sobra, 26,2% da tela
       404, 1440x1200 ..... 473 px de sobra, 39,4% da tela
       404, 1440x1400 ..... 673 px de sobra, 48,1% da tela
       aviso curto, 390x1400  303 px de sobra, 21,6% da tela
   Na página longa a sobra sempre foi 0, e foi por isso que ninguém viu.
   O conserto é a coluna de altura mínima: o corpo ocupa a janela inteira, o
   miolo estica e o rodapé fica na altura natural dele, colado embaixo. Em
   página longa nada muda, porque ali o miolo já passa da janela.
   O svh (small viewport height) é a janela COM as barras do navegador de
   celular à mostra, que é o pior caso: com vh, a barra do Safari empurraria
   o rodapé para fora e criaria rolagem numa página que cabe na tela.
   Medido depois: sobra 0 nas 96 combinações (as 8 páginas com esta casca, em
   320, 390, 768 e 1440 px de largura por 844, 1200 e 1400 px de altura, nas
   duas línguas e nos três tamanhos de mensagem). Isto vale para as duas páginas de aviso de hoje e para a
   terceira, que vai nascer desta mesma classe: por isso mora aqui, e não
   dentro da faz_404 nem dentro do contato.php. */
.aviso{min-height:100svh;display:flex;flex-direction:column}
.aviso main{flex:1 0 auto}
.aviso .rodape{flex:none}
/* no papel a coluna não serve para nada e ainda força uma folha inteira:
   ali o corpo volta a ser bloco comum */
@media print{.aviso{display:block;min-height:0}}

/* ---- 3. A SEGUNDA SAÍDA ----
   O contato.php tem a constante WHATS_NA_PAGINA, LIGADA desde 27/08/2026 por
   decisão do Neto, que põe um botão de WhatsApp abaixo do de e-mail. Ele NÃO pode ser outro bt-lavoura:
   duas pílulas cheias iguais lado a lado dividem a atenção e a tela perde a
   ação principal, que é justamente o que esta página não pode perder. Ele é o
   secundário, de contorno, com a mesma altura e o mesmo alvo.
   Medido: letra Lavoura #11463f sobre Flor #eae3d2 = 8,33:1, e o anel de 2 px
   contra a página, também 8,33:1, é o que desenha o botão. */
.bt.bt-contorno{background:transparent;color:var(--lavoura);
  box-shadow:inset 0 0 0 2px var(--lavoura)}
.bt.bt-contorno:hover{background:var(--lavoura);color:var(--flor);
  box-shadow:inset 0 0 0 2px var(--lavoura),0 6px 20px rgba(17,70,63,.18)}
@media (hover:none){
  .bt.bt-contorno:hover{background:transparent;color:var(--lavoura);
    box-shadow:inset 0 0 0 2px var(--lavoura)}
}
.bt.bt-contorno:active{background:var(--lavoura);color:var(--flor);
  box-shadow:inset 0 0 0 2px var(--lavoura);transform:translateY(1px)}

/* ---- 4. a caixa da ação ----
   24 px acima e 40 px abaixo, contra 16 px de respiro interno: o botão fica
   mais perto do que explica ele do que do que veio antes.
   A caixa é BLOCO, não flex, e isso é conserto de um defeito que eu mesmo
   criei: com flex e a linha de ajuda em flex-basis 100%, o max-width de 52ch
   dela entra no cálculo da quebra de linha do flex, e em 1440 px os três
   couberam na MESMA fila, com a explicação espremida entre os dois botões.
   Em bloco, cada um fica na sua linha em qualquer largura, que é a ordem que
   se quer ler: a ação, o que ela faz, e só então a outra saída. */
.aviso .acao{margin:24px 0 40px}
.aviso .acao .bt{margin-top:0}
.aviso .acao .ajuda{margin:16px 0 0}
/* A AJUDA PERTENCE AO BOTÃO DE CIMA, E A DISTÂNCIA TEM DE DIZER ISSO.
   Ela ficava a 16 px do botão de e-mail e a 16 px do WhatsApp: pela lei da
   proximidade, quem olha não sabe de qual dos dois ela fala, e ela fala só do
   de cima ("abre o seu programa de e-mail com o texto dentro"). Com 16 px
   acima e 32 px abaixo, a dúvida acaba sem mudar uma palavra. */
.aviso .acao .ajuda + .bt{margin-top:32px}   /* a segunda saída, o WhatsApp */
/* no celular cada botão ocupa a largura toda: é o que a pessoa precisa fazer,
   e pílula de 205 px no meio de 350 px não parece a ação da tela */
@media(max-width:520px){
  .aviso .bt{width:100%;max-width:360px;justify-content:center}
}
/* Texto de apoio a 16 px, que é o piso de corpo desta casa: ele carrega a
   única instrução que decide se a mensagem chega, e estava com 14,7 px.
   Medido: rgba(17,70,63,.78), que a tela compõe em #41695f, sobre Flor
   #eae3d2 = 4,81:1. */
.aviso .ajuda{max-width:52ch;font-size:1rem;line-height:1.5;
  color:rgba(17,70,63,.78);margin:16px 0 0}

/* ---- 5. o texto de quem escreveu ----
   Campo com 16 px de fonte: abaixo disso o Safari do iPhone dá zoom sozinho
   ao toque, e o visitante acha que "a tela pulou".
   Medido: letra Lavoura #11463f sobre o fundo do campo rgb(223,219,203) =
   7,67:1; a borda, composta em #638277, contra Flor #eae3d2 = 3,29:1, acima
   do piso de 3:1 de limite de componente. */
.aviso .texto{max-width:56ch;margin:0 0 40px}
.aviso .rotulo{display:block;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;color:var(--lavoura);margin:0 0 8px}
.aviso .seu-texto{display:block;width:100%;
  font:400 16px/1.55 var(--corpo);color:var(--lavoura);
  background:rgba(17,70,63,.05);border:1.5px solid rgba(17,70,63,.62);
  border-radius:0;padding:13px 14px;resize:vertical}
/* onde o navegador souber, a caixa mede o texto sozinha e não sobra linha
   vazia nenhuma; onde não souber, valem as linhas contadas no PHP. O teto de
   60vh existe para a mensagem de 4.000 caracteres não empurrar o resto. */
@supports (field-sizing:content){
  .aviso .seu-texto{field-sizing:content;max-height:60vh}
}
/* a cópia que existe só para o papel: na tela ela não ocupa nada */
.aviso .impresso{display:none}

/* ---- 6. as saídas, com alvo de toque ----
   Eram dois links de 22 px de altura. O alvo cresce por dentro (inline-flex
   + min-height), sem mudar o tamanho da letra. O link do rodapé NÃO entra
   nesta regra: ele mora dentro de uma linha de texto, é isento pela norma, e
   esticá-lo desalinhava as três colunas do rodapé em tela larga. */
.aviso .endereco{margin:8px 0 0}
.aviso .endereco a{display:inline-flex;align-items:center;min-height:44px;
  font-size:1.02rem;font-weight:600;color:var(--lavoura);
  text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}
.aviso .volta{margin:0}
.aviso .volta a{display:inline-flex;align-items:center;min-height:44px;
  color:var(--lavoura);text-decoration:underline;text-underline-offset:4px}
.aviso .ajuda,.aviso .rotulo{text-wrap:pretty}

/* ---- 7. O PAPEL ----
   Esta página existe para a pessoa não perder o que escreveu, e imprimir ou
   salvar em PDF é exatamente o que se faz nessa hora. Campo de formulário
   NÃO imprime o que está dentro dele: numa mensagem de 4.000 caracteres a
   folha saía com a caixa vazia embaixo do rótulo, e o endereço e a volta
   caíam fora da página. No papel some a caixa e entra o <pre>, que flui e
   quebra de página como texto normal.
   Medido no papel: Lavoura #11463f sobre branco #ffffff = 10,65:1; a linha de
   apoio, composta em #456f69, sobre branco = 5,63:1; a borda da cópia,
   composta em #6b8c88, sobre branco = 3,66:1. Fica legível também em preto e
   branco.
   TODA taxa deste arquivo é a do PAR de hex escrito ao lado dela, calculada
   sobre a cor de 8 bits que a tela realmente compõe. As três acima estavam
   com dois centésimos a mais, por terem sido calculadas antes do
   arredondamento: nenhuma decisão muda, mas número medido é número medido. */
@media print{
  .aviso,.aviso .topo{background:none}   /* menos tinta: o creme não é informação */
  .aviso .topo::after{display:none}      /* a régua verde de rolagem não é papel */
  .aviso .acao{display:none}             /* mailto não se clica numa folha */
  .aviso .seu-texto{display:none}
  .aviso .impresso{display:block;margin:0;
    white-space:pre-wrap;overflow-wrap:anywhere;
    font:400 10.5pt/1.5 var(--corpo);color:var(--lavoura);
    border:1px solid rgba(17,70,63,.62);padding:10px 12px}
  .aviso .rotulo{break-after:avoid}
  .aviso .sec{padding:18px 0 24px}
  .aviso .rodape{background:none;color:var(--lavoura);padding-bottom:0;
    border-top:1px solid rgba(17,70,63,.4)}
  .aviso .rodape-fim{border-top:0;margin-top:10px;padding-top:10px}
  .aviso .endereco a,.aviso .volta a{min-height:0}
}