/* =========================================================
   Engenho Viamonense — folha de estilo única
   Paleta: papel quente (creme) + verde de lavoura + vermelho da marca
   ========================================================= */

:root{
  /* superfícies */
  --paper:      #FAF6EE;
  --paper-2:    #F3ECDF;
  --paper-3:    #ECE2D0;
  --field:      #1E3A2B;   /* verde profundo de lavoura */
  --field-2:    #162C21;

  /* tinta */
  --ink:        #241E18;
  --ink-2:      #6E6156;
  --ink-on-dark:#EFE9DC;
  --ink-2-on-dark: rgba(239,233,220,.66);

  /* acento (vermelho da marca) */
  --accent:     #D1121A;
  --accent-dark:#A50E15;
  --brand-red:  #ED1C24;

  /* linhas */
  --line:       rgba(36,30,24,.14);
  --line-soft:  rgba(36,30,24,.08);
  --line-dark:  rgba(239,233,220,.16);

  /* tipografia */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --t-0:  clamp(1.05rem, 1rem + .2vw, 1.15rem);
  --t--1: clamp(.9rem, .87rem + .1vw, .95rem);
  --t-1:  clamp(1.2rem, 1.1rem + .4vw, 1.4rem);
  --t-2:  clamp(1.5rem, 1.3rem + .9vw, 2rem);
  --t-3:  clamp(2rem, 1.5rem + 2vw, 3.2rem);
  --disp: clamp(2.7rem, 1.6rem + 5.2vw, 5.4rem);

  /* medidas */
  --wrap: 1220px;
  --gut:  clamp(1.25rem, 4vw, 4rem);
  --header-h: 76px;
  --radius: 4px;
}

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
/* enquanto o lightbox está aberto, nada de rolagem animada atrás dele
   (o JS também garante isso; esta regra é a rede de segurança em CSS) */
html:has(dialog[open]){ scroll-behavior:auto; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-0);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
/* Sem overflow-x:hidden de propósito: ele mascarava vazamentos horizontais
   cortando o conteúdo. A largura é contida na raiz (min-width:0 nos grids
   e overflow-wrap nos textos longos). Verificado sem vazamento de 320px a 1440px. */

/* Grão sutil sobre a cor chapada — tira o ar "sintético".
   Fica atrás do conteúdo por z-index negativo. NÃO usar
   `body > * { position:relative; z-index:1 }` para levantar o conteúdo:
   essa regra também atinge o <dialog> e anula o `position:fixed` que o
   navegador dá a um modal, jogando o lightbox para o topo do documento. */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* height:auto anula o atributo height do HTML e deixa o aspect-ratio do CSS mandar */
img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; }

h1,h2,h3,h4{ margin:0; font-weight:500; }

p{ margin:0 0 1rem; }
p:last-child{ margin-bottom:0; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:1rem; top:-4rem; z-index:100;
  background:var(--field); color:var(--ink-on-dark);
  padding:.7rem 1.1rem; border-radius:var(--radius);
  transition:top .2s ease;
}
.skip-link:focus{ top:1rem; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- tipografia utilitária ---------- */
.display{
  font-family:var(--serif);
  font-size:var(--disp);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.028em;
  font-variation-settings:"opsz" 120, "SOFT" 0;
}
.display-2{
  font-family:var(--serif);
  font-size:var(--t-3);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.022em;
  font-variation-settings:"opsz" 90;
}
.display-3{
  font-family:var(--serif);
  font-size:var(--t-2);
  font-weight:500;
  line-height:1.15;
  letter-spacing:-.015em;
}

.eyebrow{
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-dark);
  margin:0 0 1rem;
}

.lead{
  font-size:clamp(1.1rem, 1rem + .45vw, 1.32rem);
  line-height:1.55;
  color:var(--ink-2);
  max-width:44ch;
}

.prose{ max-width:62ch; color:var(--ink-2); }
.prose strong{ color:var(--ink); font-weight:600; }
.prose a{ color:var(--accent-dark); text-decoration:underline; text-underline-offset:3px; }

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:48px;
  padding:.85rem 1.6rem;
  border:1px solid transparent;
  border-radius:999px;
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-sm{ min-height:40px; padding:.55rem 1.1rem; font-size:.88rem; }

.btn-accent{
  background:var(--accent);
  color:#fff;
}
.btn-accent:hover{ background:var(--accent-dark); transform:translateY(-1px); }

.btn-ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--line);
}
.btn-ghost:hover{ border-color:var(--ink); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--field);
  color:var(--ink-on-dark);
  border-bottom:1px solid rgba(0,0,0,.2);
}
.header-inner{
  display:flex; align-items:center; gap:2rem;
  min-height:var(--header-h);
}
.brand{ display:block; flex:0 0 auto; line-height:0; }
.brand img{ width:172px; height:auto; }

.nav-desktop{
  display:none;
  margin-left:auto;
  gap:1.9rem;
}
.nav-desktop a{
  position:relative;
  font-size:.93rem;
  font-weight:500;
  color:var(--ink-2-on-dark);
  text-decoration:none;
  padding-block:.35rem;
  transition:color .2s ease;
}
.nav-desktop a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--brand-red);
  transform:scaleX(0); transform-origin:left;
  transition:transform .28s ease;
}
.nav-desktop a:hover,
.nav-desktop a[aria-current="true"]{ color:var(--ink-on-dark); }
.nav-desktop a:hover::after,
.nav-desktop a[aria-current="true"]::after{ transform:scaleX(1); }

.header-cta{ display:none; }

.hamburger{
  margin-left:auto;
  width:48px; height:48px;
  display:grid; place-content:center; gap:5px;
  background:none; border:0; cursor:pointer; padding:0;
}
.hamburger span{
  display:block; width:24px; height:2px;
  background:var(--ink-on-dark);
  transition:transform .25s ease, opacity .2s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-mobile[hidden]{ display:none; }
.nav-mobile{
  display:flex; flex-direction:column; gap:.25rem;
  padding:.5rem var(--gut) 1.5rem;
  background:var(--field-2);
  border-top:1px solid var(--line-dark);
}
.nav-mobile a{
  padding:.85rem 0;
  color:var(--ink-on-dark);
  text-decoration:none;
  font-size:1.05rem;
  border-bottom:1px solid var(--line-dark);
}
.nav-mobile a:last-child{
  border-bottom:0;
  justify-content:center;
  margin-top:1rem;
  color:#fff;
}

@media (min-width:1000px){
  :root{ --header-h:92px; }        /* mantém o scroll-margin das âncoras em dia */
  .nav-desktop{ display:flex; gap:1.6rem; }
  .header-cta{ display:inline-flex; }
  .hamburger{ display:none; }
  .nav-mobile{ display:none !important; }
  .header-inner{ gap:1.75rem; }
  .brand img{ width:250px; }       /* no desktop o logo pedia mais presença */
}
@media (min-width:1200px){
  .nav-desktop{ gap:1.9rem; }
  .header-inner{ gap:2.25rem; }
  .brand img{ width:280px; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{ padding-block:clamp(3rem, 6vw, 6rem) 0; }

.hero-grid{
  display:grid;
  gap:clamp(2.5rem, 5vw, 4.5rem);
  align-items:center;
}

.hero-copy .eyebrow{ margin-bottom:1.4rem; }
.hero-copy .display{ margin-bottom:1.5rem; max-width:12ch; }
.hero-actions{
  display:flex; flex-wrap:wrap; gap:.9rem;
  margin-top:2.4rem;
}

.hero-figure{ margin:0; }
/* A foto do hero é quadrada e com o assunto centrado. No celular a caixa é
   deitada, então o corte é em cima/embaixo — puxado um pouco para baixo para
   preservar as mãos. (A foto antiga era 1920x600 com as mãos à esquerda, daí
   o antigo object-position de 22%, que aqui cortaria errado.) */
.hero-figure img{
  width:100%;
  aspect-ratio:5/4;
  object-fit:cover;
  object-position:center 58%;
  border-radius:2px;
}
.hero-figure figcaption{
  margin-top:.9rem;
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-2);
}

@media (min-width:900px){
  .hero{ padding-bottom:clamp(3rem,5vw,5rem); }
  .hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
    gap:clamp(3rem, 5vw, 5.5rem);
  }
  .hero-figure{
    margin-right:calc(-1 * var(--gut));
  }
  .hero-figure img{
    aspect-ratio:4/4.6;   /* caixa em pé: o corte agora é nas laterais */
    object-position:center;
  }
}

/* =========================================================
   FAIXA DE PROVAS
   ========================================================= */
.proof{
  background:var(--paper-2);
  border-block:1px solid var(--line-soft);
  padding-block:clamp(2.5rem, 4vw, 3.5rem);
}
.proof-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(1.75rem, 3vw, 2.5rem);
}
.proof-item{ border-left:2px solid var(--brand-red); padding-left:1.1rem; }
.proof-num{
  font-family:var(--serif);
  font-size:clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem);
  font-weight:500;
  line-height:1;
  letter-spacing:-.02em;
  margin:0 0 .45rem;
}
.proof-label{
  margin:0;
  font-size:.88rem;
  line-height:1.4;
  color:var(--ink-2);
}
@media (min-width:820px){
  .proof-grid{ grid-template-columns:repeat(4,1fr); }
}

/* =========================================================
   SEÇÕES
   ========================================================= */
.section{ padding-block:clamp(4rem, 9vw, 8.5rem); }
.section[id]{ scroll-margin-top:calc(var(--header-h) + 8px); }

.section-head{ margin-bottom:clamp(2.5rem, 5vw, 4rem); max-width:64ch; }
.section-head .display-2{ margin-bottom:1.1rem; }

/* ---------- MARCAS (âncora) ---------- */
.produtos{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
/* No celular a embalagem fica em cima e ocupa a largura toda — é o produto,
   precisa de tamanho. A partir de 560px volta a ficar ao lado da ficha. */
.produto{
  background:var(--paper);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1.25rem;
  padding:1.25rem;
  min-width:0;
  transition:background-color .25s ease;
}
@media (min-width:560px){
  .produto{ grid-template-columns:minmax(0,150px) minmax(0,1fr); gap:1.5rem; padding:1.5rem; }
}
.produto > *{ min-width:0; }
.produto:hover{ background:var(--paper-2); }

/* As fotos das embalagens são opacas, em 4:5, e já trazem fundo creme,
   luz e sombra de contato próprios. Por isso: sem padding, sem gradiente
   por baixo e sem drop-shadow do CSS (que desenharia um retângulo, já que
   a imagem não tem mais canal alpha). A caixa acompanha o 4:5 da foto. */
.produto-media{
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--paper-2);
  border-radius:2px;
  aspect-ratio:4/5;
  min-width:0;
  cursor:zoom-in;
}
.produto-media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.produto:hover .produto-media img{ transform:translateY(-4px) scale(1.03); }

/* pista visual de que dá para ampliar */
.zoom-dica{
  position:absolute;
  right:.5rem; bottom:.5rem;
  width:32px; height:32px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.86);
  color:var(--ink);
  box-shadow:0 2px 8px rgba(36,30,24,.14);
  transition:background-color .2s ease, color .2s ease;
}
.produto-media:hover .zoom-dica{ background:var(--accent); color:#fff; }

.produto-kicker{
  margin:0 0 .2rem;
  font-size:.7rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2);
}
.produto-body h3{
  font-family:var(--serif);
  font-size:var(--t-1);
  font-weight:500;
  letter-spacing:-.015em;
  margin-bottom:1rem;
}

.ficha{ margin:0 0 1rem; display:grid; gap:.05rem; }
.ficha > div{
  display:flex; align-items:baseline; gap:.2rem .6rem;
  flex-wrap:wrap;              /* em tela estreita o valor cai para a linha de baixo */
  min-width:0;
  padding:.42rem 0;
  border-bottom:1px solid var(--line-soft);
}
.ficha dt{
  flex:0 1 auto;
  min-width:0;
  font-size:.7rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-2);
}
.ficha dd{
  margin:0 0 0 auto;
  font-size:.95rem; font-weight:500;
  text-align:right;
  white-space:nowrap;
}

.selos{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0; }
.selos span{
  font-size:.72rem; font-weight:600;
  letter-spacing:.04em;
  padding:.3rem .6rem;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink-2);
}

@media (min-width:760px){
  .produtos{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .produto{ grid-template-columns:minmax(0,130px) minmax(0,1fr); padding:1.75rem; }
}
@media (min-width:1080px){
  .produtos{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .produto{ grid-template-columns:minmax(0,1fr); gap:1.5rem; padding:2rem 1.75rem; align-content:start; }
}

/* ---------- tabela nutricional ---------- */
.nutri{
  margin-top:clamp(3rem, 6vw, 5rem);
  display:grid;
  gap:clamp(2rem, 4vw, 3.5rem);
  align-items:start;
  padding-top:clamp(2.5rem,4vw,3.5rem);
  border-top:1px solid var(--line);
}
.nutri-intro .display-3{ margin-bottom:1rem; }
.nutri-fonte{
  margin-top:1.25rem;
  font-size:.8rem;
  color:var(--ink-2);
  max-width:46ch;
}
.nutri > *{ min-width:0; }   /* sem isso o item do grid herda min-width:auto e estoura a página */
.tabela-wrap{ overflow-x:auto; min-width:0; }
.tabela-nutri{
  width:100%;
  border-collapse:collapse;
  font-size:clamp(.86rem, .8rem + .3vw, .94rem);
  min-width:275px;
}
.tabela-nutri thead th{
  text-align:left;
  font-size:.7rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-2);
  padding:0 0 .7rem;
  border-bottom:1px solid var(--ink);
}
.tabela-nutri thead th:not(:first-child){ text-align:right; padding-left:.7rem; }
.tabela-nutri tbody th{
  text-align:left; font-weight:500;
  padding:.62rem 1rem .62rem 0;
  border-bottom:1px solid var(--line-soft);
}
.tabela-nutri tbody td{
  text-align:right;
  padding:.62rem 0 .62rem 1rem;
  border-bottom:1px solid var(--line-soft);
  color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.tabela-nutri tbody tr:last-child th,
.tabela-nutri tbody tr:last-child td{ border-bottom:0; }
/* sub-itens do rótulo (açúcares dentro de carboidratos, saturadas dentro
   de gorduras): recuo reproduz a hierarquia impressa na embalagem */
.tabela-nutri tbody th.sub{ padding-left:1rem; font-weight:400; color:var(--ink-2); }
.tabela-nutri tbody th.sub-2{ padding-left:2rem; }
.nutri-notas{
  margin:1rem 0 0;
  font-size:.76rem;
  line-height:1.6;
  color:var(--ink-2);
}

@media (min-width:900px){
  .nutri{ grid-template-columns:minmax(0,.85fr) minmax(0,1fr); }
}

/* ---------- PROCESSO ---------- */
.processo{ background:var(--paper-2); }

.etapas{
  display:grid;
  gap:1px;
  background:var(--line);
  border-block:1px solid var(--line);
}
.etapa{
  background:var(--paper-2);
  padding:clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2vw, 1.75rem);
}
.etapa-num{
  display:block;
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:500;
  color:var(--brand-red);
  margin-bottom:1rem;
}
.etapa h3{
  font-family:var(--serif);
  font-size:var(--t-1);
  font-weight:500;
  letter-spacing:-.015em;
  margin-bottom:.7rem;
}
.etapa p{ color:var(--ink-2); font-size:.98rem; margin:0; }
.etapa em{ font-style:italic; color:var(--ink); }

@media (min-width:640px){ .etapas{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .etapas{ grid-template-columns:repeat(4,1fr); } }

.banda-foto{
  margin:clamp(3rem, 6vw, 5rem) 0 0;
  overflow:hidden;
}
.banda-foto img{
  width:100%;
  aspect-ratio:16/6;
  object-fit:cover;
}
@media (max-width:640px){
  /* No 3/2 só cabe ~47% da largura da foto; 47% centraliza a janela nas
     colheitadeiras (a foto antiga tinha outro enquadramento e usava 60%). */
  .banda-foto img{ aspect-ratio:3/2; object-position:47% center; }
}

.destaque{
  margin-top:clamp(3rem, 5vw, 4.5rem);
  max-width:56ch;
  border-left:2px solid var(--brand-red);
  padding-left:clamp(1.25rem, 3vw, 2rem);
}
.destaque-txt{
  font-family:var(--serif);
  font-size:clamp(1.25rem, 1.05rem + .9vw, 1.75rem);
  font-weight:400;
  line-height:1.35;
  letter-spacing:-.015em;
  margin:0;
}
.destaque-txt strong{ font-weight:600; color:var(--accent-dark); }

/* ---------- EMPRESA ---------- */
.empresa-grid{
  display:grid;
  gap:clamp(2.5rem, 5vw, 4.5rem);
  align-items:center;
}
.empresa-figura{ margin:0; }
.empresa-figura{ position:relative; }
.empresa-figura img{
  width:100%;
  aspect-ratio:16/8.4;
  object-fit:cover;
  object-position:center top;
  border-radius:2px;
  /* foto de arquivo: grade quente e uniforme com o resto do site */
  filter:grayscale(1) sepia(.42) saturate(1.15) contrast(1.06) brightness(1.04);
}
.empresa-figura figcaption{
  margin-top:.9rem;
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.empresa-texto .display-2{ margin-bottom:1.4rem; }
.empresa-texto .prose p + p{ margin-top:1rem; }

@media (min-width:900px){
  .empresa-grid{ grid-template-columns:minmax(0,.82fr) minmax(0,1fr); }
}

/* ---------- CONTATO ---------- */
.contato{ background:var(--paper-2); }

.contato-grid{
  display:grid;
  gap:clamp(2.5rem, 5vw, 4rem);
  align-items:start;
}
@media (min-width:920px){
  .contato-grid{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
}

/* min-width:0 em toda a cadeia: campos de formulário têm largura intrínseca
   própria e, sem isso, o grid (min-width:auto) estoura a largura da página */
.contato-grid > *{ min-width:0; }
.form{ display:grid; gap:1.15rem; min-width:0; }
.campo-linha{ display:grid; gap:1.15rem; min-width:0; }
@media (min-width:560px){ .campo-linha{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }

.campo{ display:grid; gap:.4rem; margin:0; min-width:0; }
.campo label{
  font-size:.78rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2);
}
.req{ color:var(--accent); }

.campo input,
.campo select,
.campo textarea{
  width:100%;
  min-width:0;
  font-family:var(--sans);
  font-size:1rem;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:2px;
  padding:.8rem .9rem;
  min-height:48px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.campo textarea{ resize:vertical; line-height:1.5; }
.campo input::placeholder,
.campo textarea::placeholder{ color:rgba(110,97,86,.6); }
.campo input:focus,
.campo select:focus,
.campo textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(209,18,26,.12);
}
.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"]{ border-color:var(--accent); }

.erro{
  font-size:.82rem;
  color:var(--accent-dark);
  font-weight:500;
}

.form-acoes{ display:flex; flex-wrap:wrap; gap:.9rem; margin:.5rem 0 0; }
.form-nota{ font-size:.82rem; color:var(--ink-2); margin:0; }

.info-lista{ list-style:none; margin:0 0 2rem; padding:0; display:grid; gap:1.35rem; }
.info-lista li{ border-top:1px solid var(--line); padding-top:1rem; min-width:0; }
.info-rot{
  display:block;
  font-size:.7rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-2);
  margin-bottom:.35rem;
}
.info-lista p{ margin:0; font-size:.98rem; line-height:1.55; overflow-wrap:anywhere; }
.info-lista a{ text-decoration:none; border-bottom:1px solid var(--line); }
.info-lista a:hover{ color:var(--accent-dark); border-bottom-color:var(--accent); }

.map-wrap{
  aspect-ratio:4/3;
  background:var(--paper-3);
  border:1px solid var(--line);
  border-radius:2px;
  overflow:hidden;
}
.map-wrap iframe{ width:100%; height:100%; border:0; display:block; }

/* =========================================================
   RODAPÉ
   ========================================================= */
.site-footer{
  background:var(--field);
  color:var(--ink-on-dark);
  padding-top:clamp(3rem, 6vw, 5rem);
}
.footer-grid{
  display:grid;
  gap:clamp(2.25rem, 4vw, 3.5rem);
  padding-bottom:clamp(2.5rem, 4vw, 3.5rem);
}
@media (min-width:800px){
  .footer-grid{ grid-template-columns:1.2fr .8fr 1.2fr; }
}

.footer-brand img{ width:220px; height:auto; }
@media (min-width:1000px){ .footer-brand img{ width:260px; } }
.footer-slogan{
  margin:1.2rem 0 1.5rem;
  font-family:var(--serif);
  font-size:1.1rem;
  color:var(--ink-2-on-dark);
  max-width:26ch;
}

.social{ list-style:none; display:flex; gap:.6rem; margin:0; padding:0; }
.social a{
  width:42px; height:42px;
  display:grid; place-items:center;
  border:1px solid var(--line-dark);
  border-radius:50%;
  color:var(--ink-2-on-dark);
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.social a:hover{ background:var(--brand-red); border-color:var(--brand-red); color:#fff; }

.footer-nav,
.footer-dados{ display:grid; align-content:start; gap:.55rem; }
.footer-nav h2,
.footer-dados h2{
  font-family:var(--sans);
  font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(239,233,220,.55);
  margin-bottom:.5rem;
}
.footer-nav a{
  color:var(--ink-2-on-dark);
  text-decoration:none;
  font-size:.95rem;
  width:fit-content;
  transition:color .2s ease;
}
.footer-nav a:hover{ color:var(--ink-on-dark); }
.footer-dados p{
  margin:0 0 .9rem;
  font-size:.92rem;
  line-height:1.6;
  color:var(--ink-2-on-dark);
  overflow-wrap:anywhere;   /* o e-mail longo precisa poder quebrar */
}
.footer-nav, .footer-dados, .footer-brand{ min-width:0; }
.footer-dados a{ color:var(--ink-on-dark); text-decoration:none; border-bottom:1px solid var(--line-dark); }
.footer-dados a:hover{ border-bottom-color:var(--brand-red); }

.footer-base{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
  justify-content:space-between;
  padding-block:1.5rem;
  border-top:1px solid var(--line-dark);
}
.footer-base p{
  margin:0;
  font-size:.82rem;
  color:rgba(239,233,220,.5);
}

/* =========================================================
   LIGHTBOX DA EMBALAGEM
   ========================================================= */
.lightbox{
  border:0;
  padding:0;
  background:transparent;
  width:min(90vw, 460px);
  max-height:90vh;
  color:var(--ink);
  overflow:visible;
}
.lightbox::backdrop{ background:rgba(22,44,33,.86); }
.lightbox-inner{
  position:relative;
  background:linear-gradient(160deg, var(--paper-2), var(--paper-3));
  border-radius:4px;
  padding:3.5rem clamp(1.5rem, 5vw, 2.5rem) clamp(1.5rem, 5vw, 2.5rem);
}
.lightbox-inner img{
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  max-height:70vh;
  object-fit:contain;
  margin-inline:auto;
  filter:drop-shadow(0 14px 30px rgba(36,30,24,.24));
}
.lightbox-legenda{
  margin:1.25rem 0 0;
  text-align:center;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.lightbox-fechar{
  position:absolute;
  top:.5rem; right:.5rem;   /* dentro da caixa: em tela estreita não encosta na borda */
  width:44px; height:44px;
  display:grid; place-items:center;
  border:0;
  border-radius:50%;
  background:var(--field);
  color:var(--ink-on-dark);
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  transition:background-color .2s ease;
}
.lightbox-fechar:hover{ background:var(--accent); }

/* =========================================================
   WHATSAPP FLUTUANTE + COOKIES
   ========================================================= */
.wa-float{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:60;
  width:56px; height:56px;
  border-radius:50%;
  background:#25D366; color:#fff;
  display:grid; place-items:center;
  box-shadow:0 10px 26px rgba(20,60,35,.28);
  transition:transform .2s ease;
}
.wa-float:hover{ transform:scale(1.06); }
@media (prefers-reduced-motion: no-preference){
  .wa-float{ animation:wa-pulse 2.6s ease-out infinite; }
}
@keyframes wa-pulse{
  0%{ box-shadow:0 10px 26px rgba(20,60,35,.28), 0 0 0 0 rgba(37,211,102,.45); }
  100%{ box-shadow:0 10px 26px rgba(20,60,35,.28), 0 0 0 20px rgba(37,211,102,0); }
}

.cookie-bar[hidden]{ display:none; }
.cookie-bar{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:70;
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem;
  justify-content:space-between;
  background:var(--field-2);
  color:var(--ink-on-dark);
  border:1px solid var(--line-dark);
  border-radius:4px;
  padding:1rem 1.15rem;
  box-shadow:0 14px 40px rgba(0,0,0,.25);
}
.cookie-bar p{ margin:0; font-size:.9rem; max-width:62ch; color:var(--ink-2-on-dark); }
.cookie-bar a{ color:#fff; }
.cookie-acoes{ display:flex; gap:.6rem; }
.cookie-bar .btn-ghost{ color:var(--ink-on-dark); border-color:var(--line-dark); }
.cookie-bar .btn-ghost:hover{ border-color:var(--ink-on-dark); }
@media (min-width:640px){
  .cookie-bar{ left:auto; right:1.25rem; bottom:5.5rem; max-width:520px; }
}
@media (max-width:639px){
  .cookie-bar{ bottom:5.5rem; }
}

/* =========================================================
   REVEAL / MOVIMENTO
   ========================================================= */
.reveal{ opacity:1; transform:none; }
.js .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .75s cubic-bezier(.2,.7,.3,1), transform .75s cubic-bezier(.2,.7,.3,1);
}
.js .reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js .reveal{ opacity:1; transform:none; }
}

/* =========================================================
   PÁGINAS INTERNAS (404 / política)
   ========================================================= */
.pagina-simples{ padding-block:clamp(3.5rem, 8vw, 7rem); }
.pagina-simples .display-2{ margin-bottom:1.5rem; }
.pagina-simples h2{
  font-family:var(--serif);
  font-size:var(--t-2);
  font-weight:500;
  letter-spacing:-.015em;
  margin:2.5rem 0 .9rem;
}
.pagina-simples .prose ul{ padding-left:1.2rem; margin:0 0 1rem; }
.pagina-simples .prose li{ margin-bottom:.5rem; }
.pagina-simples .prose p{ margin-bottom:1rem; }