/* =============================================================================
   base.css — Grupo Sabores da Estrada
   ÚNICA folha de estilo do site inteiro. Seis páginas compartilham este arquivo.
   Ordem de spec.md §2.5 — ela importa porque não há build para reordenar cascata.

   DS Resolver: nível 1, material real do cliente
   (EMPRESA\CLIENTES\sabores-na-estrada\design-system\design-system.md).
   Zero cor inventada. As sete exceções de contraste (E1..E7) estão aplicadas e
   marcadas onde mordem — elas vencem a intuição, sempre.

   REGRA DE OURO: dourado é cor de FORMA, não de PALAVRA. Toda vez que o dourado
   precisar ser lido, ou ele está sobre vinho (5,75:1) ou ele vira #915F1C.
   ========================================================================== */

/* 1. @font-face -----------------------------------------------------------
   Divergência declarada (C-09): o DS manda embutir a fonte em `data:` URI.
   Aquela regra nasceu para peça standalone (criativo HTML→PNG), onde o arquivo
   viaja sozinho. Num site hospedado o requisito é atendido servindo o .woff2, e
   o data: URI infla o CSS crítico e atrasa o LCP.

   Divergência nova (C-10): a spec §2.4 desenhava UM bloco por família com o
   unicode-range de latin+latin-ext somados. O Google Fonts serve os dois subsets
   como ARQUIVOS SEPARADOS, e fundir exigiria ferramenta de subsetting — ou seja,
   dependência, que a ADR 0001 proíbe. São 8 blocos para 4 famílias. A substância
   do AC-15 continua de pé: .woff2 servido, swap, latin + latin-ext cobertos.
   Efeito colateral bom: latin-ext (que o português comum não usa — ç ã õ é ê
   moram no latin básico) só é baixado se a página precisar dele. */

@font-face{
  font-family:'Oswald'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/oswald-700.latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Oswald'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/oswald-700.latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/montserrat-700.latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/montserrat-700.latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Roboto'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/roboto-400.latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Roboto'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/roboto-400.latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Roboto'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/assets/fonts/roboto-500.latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Roboto'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/assets/fonts/roboto-500.latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* 2. :root — copiado de spec.md §2.1, token a token ---------------------- */

:root{
  /* Cores — medidas pixel a pixel no layout aprovado (fonte A) */
  --brand-primary:      #420804; /* vinho profundo: barra do topo, rodapé, botão primário, headline */
  --brand-support:      #4D0803; /* vinho-cartão: card do hero, blocos elevados. NUNCA cor de texto */
  --brand-accent:       #D08928; /* dourado: FORMA (preenchimento, ícone, régua, aro). NUNCA palavra sobre creme */
  --brand-accent-dark:  #A26A1F; /* dourado com texto BRANCO PURO em cima (4,55:1) */
  --brand-accent-ink:   #915F1C; /* dourado que carrega palavra sobre creme (4,55:1) */
  --brand-light:        #F5E9DB; /* creme base: fundo de página e de card; também é texto sobre vinho */
  --brand-surface:      #F9EEE1; /* creme claro (variante institucional) */
  --brand-line:         #E5CDAA; /* borda decorativa de card */
  --brand-line-strong:  #B97923; /* borda quando ela É o limite funcional (input, card clicável) */
  --brand-ink:          #363129; /* corpo sobre creme (10,79:1) */
  --brand-ornament:     #E8CEB4; /* line-art de legumes. Nunca carrega informação */
  --brand-on-dark:      #F5E9DB; /* texto sobre vinho */

  /* Tipografia */
  --font-display: 'Oswald', 'Archivo Narrow', 'Arial Narrow', Impact, sans-serif;
  --font-kicker:  'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Roboto', system-ui, -apple-system, sans-serif;

  /* Forma */
  --radius-card: 12px;
  --radius-btn:   6px;
  --radius-pill: 999px;

  /* Layout */
  --maxw: 1200px;
  --gutter: 20px;
  --tap: 44px;

  /* Escala tipográfica de §2.3 — interpolada entre 360px e 1536px de viewport.
     O termo fluido não tem platô: a curva atravessa a faixa 32–48px em vez de
     estacionar nela (AC-14). Os extremos são os valores medidos no layout. */
  --fs-h1:      clamp(34px, 23.6px + 2.89vw, 68px);
  --fs-h2:      clamp(26px, 24.8px + 0.34vw, 30px);
  --fs-h3:      clamp(21px, 20.1px + 0.26vw, 24px);
  --fs-body:    clamp(16px, 15.7px + 0.09vw, 17px);
  --fs-card:    15px;
  --fs-nav:     15px;
  --fs-eyebrow: clamp(12px, 11.5px + 0.13vw, 14px);
  --fs-micro:   clamp(12px, 11.7px + 0.09vw, 13px);
}

/* 3. Reset leve + prefers-reduced-motion --------------------------------- */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body,h1,h2,h3,p,ul,figure,blockquote{ margin:0; }
ul{ padding:0; list-style:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
}

/* 4. Base ---------------------------------------------------------------- */
/* Fundo de página é SEMPRE creme, nunca branco puro (DS §1.2). */

body{
  margin:0;
  background:var(--brand-light);
  color:var(--brand-ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.60;
  overflow-x:hidden; /* guarda de AC-12; a causa se corrige no componente, não aqui */
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase; /* todo título é caixa alta — não existe headline em caixa mista */
  letter-spacing:0;         /* tracking do display é 0; tracking largo é só de caixa-alta pequena */
  color:var(--brand-primary);
  text-wrap:balance;
}
h1{ font-size:var(--fs-h1); line-height:1.10; }
h2{ font-size:var(--fs-h2); line-height:1.15; }
h3{ font-size:var(--fs-h3); line-height:1.15; }

p{ max-width:68ch; width:100%; } /* width de guarda: max-width sozinho estoura em 320px */
p + p{ margin-top:0.9em; }

a{ color:var(--brand-accent-ink); text-decoration:underline; text-underline-offset:2px; }

img{ max-width:100%; height:auto; display:block; }

address{ font-style:normal; }

/* Headline de duas cores é padrão da marca. Sobre creme a palavra dourada NUNCA
   é #D08928 (2,41:1) — vira #915F1C. É a exceção E1, e é a violação mais provável. */
.headline-accent{ color:var(--brand-accent-ink); }
/* Sobre vinho o dourado pode ser o dourado cheio (5,75:1). */
.on-dark .headline-accent{ color:var(--brand-accent); }

.eyebrow{
  font-family:var(--font-kicker);
  font-size:var(--fs-eyebrow);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--brand-accent-ink); /* E1 */
}
.on-dark .eyebrow{ color:var(--brand-accent); }

.micro{
  font-size:var(--fs-micro);
  text-transform:uppercase;
  letter-spacing:.10em;
}

/* 5. Foco visível --------------------------------------------------------- */
/* NÃO usa --brand-accent: #B97923 sobre creme dá 3,02:1, o mínimo de SC 1.4.11. */

:focus-visible{
  outline:3px solid var(--brand-line-strong);
  outline-offset:3px;
}

/* 6. Skip link (WCAG 2.4.1) ---------------------------------------------- */

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--brand-primary); color:var(--brand-on-dark);
  padding:12px 16px; border-radius:0 0 var(--radius-btn) 0;
  text-decoration:none; font-family:var(--font-kicker); font-weight:700;
}
.skip-link:focus{ left:0; }

/* 7. Utilitários de layout ------------------------------------------------ */

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:clamp(40px, 5vw, 72px); }
.section--surface{ background:var(--brand-surface); }

.grid{ display:grid; gap:20px; grid-template-columns:1fr; }
.stack > * + *{ margin-top:16px; }

/* Bloco largo rola dentro do próprio container, nunca empurra a página (AC-12). */
.scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* 8. Componentes, na ordem em que aparecem na página ---------------------- */

/* .topbar — barra superior vinho. NÃO leva logo: a logo é vermelha, não existe
   versão negativa, e vermelha sobre vinho dá 1,95:1 (E7). Wordmark tipografado. */
.topbar{
  background:var(--brand-primary);
  color:var(--brand-on-dark);
  font-size:var(--fs-micro);
}
.topbar .wrap{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  min-height:var(--tap);
  justify-content:space-between;
}
.topbar a{ color:var(--brand-on-dark); text-decoration:none; }
.topbar a:hover{ text-decoration:underline; }
.topbar__item{
  display:inline-flex; align-items:center; gap:8px;
  min-height:var(--tap);
}

/* .header / .nav */
.header{ background:var(--brand-light); border-bottom:1px solid var(--brand-line); }
.header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; }
.header__wordmark{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:var(--fs-h3); color:var(--brand-primary); text-decoration:none; line-height:1;
}
.nav{ display:none; }
.nav ul{ display:flex; gap:24px; align-items:center; }
.nav a{
  font-family:var(--font-kicker); font-weight:700; font-size:var(--fs-nav);
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--brand-primary); text-decoration:none;
  display:inline-flex; align-items:center; min-height:var(--tap);
}
.nav a:hover{ color:var(--brand-accent-ink); }
.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:var(--tap); min-height:var(--tap);
  background:none; border:1px solid var(--brand-line-strong); border-radius:var(--radius-btn);
  color:var(--brand-primary); cursor:pointer;
}
.nav-toggle[aria-expanded="true"] + .nav{ display:block; }

/* .hero */
.hero{ background:var(--brand-light); padding-block:clamp(32px, 6vw, 72px); }
.hero__grid{ display:grid; gap:24px; grid-template-columns:1fr; align-items:center; }
.hero__lead{ font-size:var(--fs-body); max-width:56ch; width:100%; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* .pillar-card — card vinho elevado. --brand-support é SUPERFÍCIE, nunca texto. */
.pillar-card{
  background:var(--brand-support);
  color:var(--brand-on-dark);
  border-radius:var(--radius-card);
  padding:24px;
}
.pillar-card h3{ color:var(--brand-on-dark); }

/* .card — borda DECORATIVA (E4): o card já se distingue por foto, ícone e título.
   Card clicável tem a borda como limite funcional, e ela sobe. */
.card{
  background:var(--brand-light);
  border:1px solid var(--brand-line);
  border-radius:var(--radius-card);
  padding:20px;
  font-size:var(--fs-card);
  line-height:1.55;
}
.card h3{ margin-bottom:8px; }
.card--clickable{ border-color:var(--brand-line-strong); }

/* .btn */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--tap); padding:12px 22px;
  border-radius:var(--radius-btn); border:2px solid transparent;
  font-family:var(--font-kicker); font-weight:700; font-size:var(--fs-nav);
  text-transform:uppercase; letter-spacing:.06em;
  text-decoration:none; cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary{ background:var(--brand-primary); color:var(--brand-on-dark); }
.btn--primary:hover{ background:var(--brand-support); }

/* E1: o texto do botão secundário sobre creme é #915F1C, nunca o dourado cheio. */
.btn--secondary{
  background:transparent;
  color:var(--brand-accent-ink);
  border-color:var(--brand-line-strong);
}
.btn--secondary:hover{ background:var(--brand-surface); }

/* E2 — a correção obrigatória em relação ao layout aprovado: fundo dourado com
   texto VINHO (5,75:1). O raster traz texto claro sobre dourado, que é o pior par
   do sistema (2,88:1). Trocar isto por texto claro reprova a story. */
.btn--pill{
  background:var(--brand-accent);
  color:var(--brand-primary);
  border-radius:var(--radius-pill);
  padding:10px 20px;
}
/* E6 — sobre --brand-accent-dark o texto é branco PURO, nunca creme (creme dá 3,80:1). */
.btn--pill:hover{ background:var(--brand-accent-dark); color:#FFFFFF; }

.btn--wa{ background:var(--brand-primary); color:var(--brand-on-dark); }
.btn--wa:hover{ background:var(--brand-support); }

/* .band — faixa vinho. O ornamento de line-art fica nas pontas e nunca atrás de
   bloco denso de texto (E5); ele não carrega informação nenhuma. */
.band{
  background:var(--brand-primary);
  color:var(--brand-on-dark);
  padding-block:clamp(32px, 4vw, 56px);
  position:relative;
  overflow:hidden;
}
.band h2,.band h3{ color:var(--brand-on-dark); }
.band__ornament{
  position:absolute; inset-block:0; width:22%; max-width:220px;
  color:var(--brand-ornament); opacity:.35;
  pointer-events:none;
  z-index:0;
}
.band__ornament--start{ inset-inline-start:0; }
.band__ornament--end{ inset-inline-end:0; }
/* O texto continua em cima do ornamento e continua na cor de corpo — o ornamento
   nunca muda a cor do que se lê (E5). */
.band > .wrap{ position:relative; z-index:1; }

/* .seal — selo circular. Aro decorativo pode ser o dourado médio (E3); quando o
   aro É o indicador de estado, sobe para --brand-line-strong. */
.seal{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  background:var(--brand-primary);
  border:2px solid #B87B31;
  color:var(--brand-on-dark);
  flex:none;
}
.seal[aria-current],
.seal.is-active{ border-color:var(--brand-line-strong); }

/* .rule — filete dourado. Forma pura: aqui o dourado cheio é o uso correto. */
.rule{
  border:0; height:3px; width:64px;
  background:var(--brand-accent);
  border-radius:var(--radius-pill);
  margin-block:16px;
}

/* .form / .field */
.form{ display:grid; gap:18px; max-width:640px; width:100%; }
.field{ display:grid; gap:6px; }
.field label{
  font-family:var(--font-kicker); font-weight:700; font-size:var(--fs-eyebrow);
  text-transform:uppercase; letter-spacing:.10em; color:var(--brand-primary);
}
/* E4 — input é limite FUNCIONAL: borda #B97923, nunca a decorativa #E5CDAA. */
.field input,
.field select,
.field textarea{
  width:100%;
  min-height:var(--tap);
  padding:10px 12px;
  font-family:var(--font-body); font-size:var(--fs-body); color:var(--brand-ink);
  background:var(--brand-surface);
  border:1px solid var(--brand-line-strong);
  border-radius:var(--radius-btn);
}
.field__hint{ font-size:var(--fs-micro); text-transform:none; letter-spacing:0; }
.field__error{ font-size:var(--fs-card); color:var(--brand-primary); font-weight:700; }
/* Honeypot: fora da tela, e sem display:none — some para quem vê, some do leitor
   de tela pelo aria-hidden na marcação, e continua preenchível por bot. */
.field--hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* .footer */
.footer{ background:var(--brand-primary); color:var(--brand-on-dark); padding-block:40px; }
.footer h2,.footer h3{ color:var(--brand-on-dark); }
.footer a{ color:var(--brand-on-dark); }
.footer .headline-accent{ color:var(--brand-accent); }

/* .consent — banner de consentimento */
.consent{
  position:fixed; inset-inline:0; bottom:0; z-index:90;
  background:var(--brand-primary); color:var(--brand-on-dark);
  padding:16px var(--gutter);
}
.consent__inner{
  max-width:var(--maxw); margin-inline:auto;
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
}
.consent p{ max-width:72ch; font-size:var(--fs-card); }
.consent[hidden]{ display:none; }

/* .wa-float — botão flutuante de WhatsApp */
.wa-float{
  position:fixed; inset-inline-end:16px; bottom:16px; z-index:80;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:var(--tap); min-height:var(--tap);
  width:56px; height:56px; border-radius:50%;
  background:var(--brand-primary); color:var(--brand-on-dark);
  text-decoration:none;
  box-shadow:0 2px 10px rgba(66,8,4,.28);
}

/* .slot — espaço reservado de imagem com a DIMENSÃO DEFINITIVA (F-09).
   Existe para o layout já nascer no tamanho final: trocar a foto real depois é
   substituir o arquivo no mesmo caminho e na mesma proporção, não remaquetar.
   Não é <img> de propósito — arquivo inexistente daria 404, e imagem de categoria
   legendada como a operação do cliente é proibida (AC-25). */
.slot{
  display:flex; align-items:center; justify-content:center;
  width:100%;
  background:var(--brand-surface);
  border:1px dashed var(--brand-line-strong);
  border-radius:var(--radius-card);
  color:var(--brand-accent-ink);
  text-align:center;
  font-family:var(--font-kicker); font-weight:700; font-size:var(--fs-eyebrow);
  text-transform:uppercase; letter-spacing:.10em;
  aspect-ratio:4 / 3;
}
.slot--hero{ aspect-ratio:4 / 3; }
.slot--card{ aspect-ratio:4 / 3; margin-bottom:14px; }
.slot--prova{ aspect-ratio:3 / 2; margin-bottom:14px; }
.slot__rotulo small{ display:block; margin-top:4px; letter-spacing:0; opacity:.75; }

/* .pilar — item do card de pilares, sobre vinho */
.pilar{ display:flex; flex-direction:column; gap:8px; }
.pilar .seal{ margin-bottom:4px; }

/* Rótulo que só o leitor de tela recebe. Nunca display:none — isso o removeria
   da árvore de acessibilidade junto. */
.visually-hidden{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---- Ícone de linha, herda a cor do contexto ---------------------------- */
.icone{ width:1em; height:1em; flex:none; }
.icone--g{ width:34px; height:34px; }
.icone--btn{ width:20px; height:20px; }

/* ---- Eyebrow com filete lateral (o "— TEXTO —" do layout) --------------- */
.eyebrow--filete{
  display:flex; align-items:center; gap:12px;
}
.eyebrow--filete::before,
.eyebrow--filete::after{
  content:""; height:2px; width:28px; flex:none;
  background:var(--brand-accent); border-radius:2px;
}
.eyebrow--filete::after{ display:none; }
.section--centro .eyebrow--filete{ justify-content:center; }
.section--centro .eyebrow--filete::after{ display:block; }
.section--centro{ text-align:center; }
.section--centro .form,
.section--centro p{ margin-inline:auto; }

/* ---- HERO composto: foto sangrando à direita + card sobreposto ---------- */
.hero{ position:relative; overflow:hidden; padding-block:0; }
.hero__grid{ gap:0; align-items:stretch; }
.hero__texto{ padding-block:clamp(32px,5vw,64px); }
.hero__midia{ position:relative; min-height:280px; }
.hero__midia img{
  width:100%; height:100%; object-fit:cover;
  border-radius:var(--radius-card);
}
/* O card de pilares sobrepõe a foto — é o gesto de composição do layout. */
.hero__pilares{ margin-top:-56px; position:relative; z-index:2; }

/* ---- Card de pilares: itens em linha, com filete entre eles ------------- */
.pillar-card{ padding:28px; box-shadow:0 10px 30px rgba(66,8,4,.18); }
.pilar{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  padding-block:16px;
}
.pilar + .pilar{ border-top:1px solid rgba(245,233,219,.18); }
.pilar .icone{ color:var(--brand-accent); margin-top:2px; }
.pilar h3{ font-size:var(--fs-nav); letter-spacing:.06em; margin-bottom:2px; }
.pilar p{ font-size:var(--fs-card); }

/* ---- Card de solução: foto + selo circular sobreposto ------------------- */
.card--solucao{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.card--solucao__midia{ position:relative; }
.card--solucao__midia img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.card--solucao__selo{
  position:absolute; left:20px; bottom:-26px;
  width:56px; height:56px; border-radius:50%;
  background:var(--brand-primary); color:var(--brand-accent);
  display:flex; align-items:center; justify-content:center;
  border:3px solid var(--brand-light);
}
.card--solucao__corpo{ padding:40px 20px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card--solucao__corpo h3{ margin:0; }
.card--solucao__corpo .btn{ margin-top:auto; align-self:flex-start; }

/* ---- Faixa de diferenciais: título à esquerda, 4 selos em linha --------- */
.band__grid{
  display:grid; gap:28px; grid-template-columns:1fr; align-items:start;
}
.band__titulo h2{ line-height:1.05; }
.diferencial{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; }
.diferencial .icone{ color:var(--brand-accent); }
.diferencial h3{ font-size:var(--fs-nav); letter-spacing:.06em; margin-bottom:4px; }
.diferencial p{ font-size:var(--fs-card); }

/* ---- Item de lista com ícone (gestão, como funciona, prova) ------------- */
.item-icone{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; }
.item-icone .icone{ color:var(--brand-accent-ink); }
.item-icone h3{ margin-bottom:4px; }

/* ---- Bloco de figura com legenda (prova indireta) ----------------------- */
.figura{ margin:0; }
.figura img{ width:100%; border-radius:var(--radius-card); display:block; }
.figura figcaption{ font-size:var(--fs-card); margin-top:10px; }

/* ---- Cabeçalho: logo maior e nav respirando ----------------------------- */
.header .wrap{ min-height:96px; gap:24px; }
.header__logo{ display:block; }
.header__logo img{ width:auto; height:72px; }
.nav a{ position:relative; }
.nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:6px;
  height:2px; background:var(--brand-accent); border-radius:2px;
}

/* ---- Botão com ícone ---------------------------------------------------- */
.btn .icone{ color:currentColor; }

/* ---- Ritmo vertical: seções alternadas respiram diferente --------------- */
.section{ padding-block:clamp(48px,6vw,88px); }
.section__cabeca{ max-width:60ch; margin-bottom:28px; }
.section--centro .section__cabeca{ margin-inline:auto; }

/* 9. Estados -------------------------------------------------------------- */

/* Foco em contexto escuro: sobre vinho o dourado cheio tem 5,75:1 e lê melhor que
   o #B97923. Mora aqui, na seção de Estados, e não na seção 5 — a seção 5 declara a
   regra universal de foco; override que depende de contexto de componente é estado. */
.on-dark :focus-visible,
.topbar :focus-visible,
.footer :focus-visible,
.band :focus-visible,
.consent :focus-visible{
  outline-color:var(--brand-accent);
}

a:hover{ color:var(--brand-primary); }
.on-dark a:hover,.footer a:hover,.topbar a:hover{ color:var(--brand-accent); }

[aria-invalid="true"]{
  border-color:var(--brand-primary) !important;
  border-width:2px;
}
[disabled],
.btn[aria-disabled="true"]{
  opacity:.55;
  cursor:not-allowed;
}

/* 10. Media queries, agrupadas no fim ------------------------------------- */

@media (min-width: 640px){
  .grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .hero__actions{ flex-wrap:nowrap; }
}

@media (min-width: 860px){
  .grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .nav{ display:block; }
  .nav-toggle{ display:none; }
}

@media (min-width: 1100px){
  .hero__grid{ grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); gap:40px; }
}