/* site.css · Top Menu Adega · 07a (desktop): esqueleto, cabeçalho, hero, loja e rodapé.
   Só tokens semânticos de tokens.css. Composição vinda de variantes/home-recomendada, com as correções do design-system.md §Para o 07
   (Rubik + Nunito Sans locais, margem --container-pad, --dur-1 e --dur-enter, botões e raios pelos tokens do CP1.5).
   Cada literal fora de token leva `token-allow: motivo` na linha de cima (o validador lê o comentário e libera a declaração seguinte). */
@layer components {

  /* O contêiner de consulta é o corpo: as medidas em cqw dos tokens (--fs-hero, --container-pad…) leem a largura da página, como na home aprovada. */
  body { container-type: inline-size; }

  /* Contêiner de conteúdo (pre-top-menu-41). --gutter é a margem lateral de TODO conteúdo: a margem de sempre (--container-pad) até a tela ter
     --container-max de conteúdo mais as duas margens, e daí em diante metade do que sobra. Fundos e foto continuam de borda a borda; só texto,
     botões, caixas e blocos ficam dentro do limite, na mesma borda esquerda da logo. 100cqw é a largura do corpo, o contêiner de consulta. */
  :root { --gutter: max(var(--container-pad), calc((100cqw - var(--container-max)) / 2)); }

  .icon-sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
  .icone {
    /* token-allow: tamanho do ícone de menu aprovado na R3 (o projeto não declara --icon-size) */
    inline-size: 26px;
    /* token-allow: tamanho do ícone de menu aprovado na R3 */
    block-size: 26px;
    fill: none; stroke: currentColor;
    /* token-allow: traço do ícone de menu aprovado na R3 (o projeto não declara --icon-stroke) */
    stroke-width: 2.2; stroke-linecap: round;
  }
  .logo {
    display: block; block-size: 100%; inline-size: auto;
    /* token-allow: proporção do desenho da logo (viewBox 308,1 por 80,2) */
    aspect-ratio: 308.1 / 80.2;
  }
  .logo__a { fill: var(--text-on-brand); }
  .logo__b { fill: var(--accent); }
  .nao-quebra { white-space: nowrap; }

  /* ---------- botão: dois papéis. Este é o de foto, vinho e escuro (--action-on-dark), tamanho compacto. ---------- */
  .botao {
    display: inline-flex; align-items: center; min-block-size: var(--btn-h-compact); padding-inline: var(--btn-px-compact);
    border-radius: var(--radius-btn); background: var(--action-on-dark); color: var(--text-on-action-dark);
    font: 700 var(--btn-fs-compact)/1 var(--font-body); text-decoration: none; white-space: nowrap;
    transition: background-color var(--dur-1) var(--ease-out);
  }
  .botao:hover { background: var(--action-on-dark-hover); }
  .botao:active { transform: translateY(1px); }
  .botao:focus-visible { outline: 2px solid var(--focus-inverse); outline-offset: 3px; }

  /* ---------- cabeçalho: transparente sobre a foto, sem borda e sem estado fixo; sai com a página ao rolar ---------- */
  .topo {
    position: absolute; inset: 0 0 auto;
    /* token-allow: camada do cabeçalho sobre a foto e o véu (receita 016) */
    z-index: 2;
    display: flex; align-items: center;
    gap: clamp(14px, 3cqw, 36px); padding: var(--space-4) var(--gutter); font-family: var(--font-body);
  }
  /* telas sem foto (política e 404): o cabeçalho ganha o vinho da marca e entra no fluxo (pre-top-menu-33) */
  .topo--interna { position: relative; background: var(--surface-brand); }
  .topo__logo {
    display: block; flex: none;
    /* token-allow: altura da logo no cabeçalho, medida na home aprovada */
    block-size: 52px;
  }
  .topo__logo:focus-visible { outline: 2px solid var(--focus-inverse); outline-offset: 4px; }
  .topo__nav { flex: 1; display: flex; justify-content: flex-end; gap: clamp(12px, 2.2cqw, 26px); font-size: var(--fs-nav); }
  .topo__nav a { color: var(--text-on-brand); text-decoration: none; }
  .topo__nav a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .topo__nav a:focus-visible { outline: 2px solid var(--focus-inverse); outline-offset: 4px; border-radius: var(--radius-btn); }

  /* menu do celular: o botão e o painel ficam prontos aqui e só aparecem abaixo de 760 px (a passada 07b refina) */
  .topo__menu {
    display: none; place-items: center end;
    /* token-allow: alvo de toque de 44 px (a11y.md) */
    inline-size: 44px;
    /* token-allow: alvo de toque de 44 px (a11y.md) */
    block-size: 44px;
    padding: 0; background: transparent; border: 0;
    border-radius: var(--radius-btn); color: var(--text-on-brand); cursor: pointer;
  }
  .topo__menu:focus-visible { outline: 2px solid var(--focus-inverse); outline-offset: 2px; }
  .menu-cel {
    inset: 0 0 auto; inline-size: 100%; max-inline-size: none; margin: 0; border: 0; padding: var(--space-4) var(--container-pad) var(--space-8);
    background: var(--surface-brand); color: var(--text-on-brand); font-family: var(--font-body);
  }
  .menu-cel__topo {
    display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--space-4);
    /* token-allow: mesma altura da logo do cabeçalho */
    block-size: 52px;
  }
  .menu-cel__topo .logo {
    /* token-allow: logo do celular, medida na home aprovada */
    block-size: 40px;
  }
  .menu-cel ul { list-style: none; margin: 0; padding: 0; display: grid; }
  .menu-cel a { display: block; padding-block: var(--space-3); font-size: var(--fs-lead); font-weight: 600; color: var(--text-on-brand); text-decoration: none; }
  .menu-cel a:focus-visible { outline: 2px solid var(--focus-inverse); outline-offset: 2px; }

  /* ---------- hero · 090 + 018 + 016 + 024, com a tira de provas da 206 ---------- */
  .hero {
    position: relative; isolation: isolate; overflow: hidden; background: var(--surface-inverse);
    color: var(--text-on-brand); font-family: var(--font-body); line-height: 1.5;
  }
  /* 018 full-bleed: a foto cobre o hero de borda a borda. Sem lazy, sem animação: é o LCP. */
  .hero__foto {
    position: absolute; inset: 0;
    /* token-allow: camada da foto, abaixo do véu (receita 016) */
    z-index: -2;
    inline-size: 100%; block-size: 100%; max-inline-size: none;
    object-fit: cover; object-position: 100% 62%;
  }
  /* 016 z-layering: foto no fundo, véu à esquerda (só onde há texto), conteúdo por cima */
  .hero::before {
    content: ""; position: absolute; inset: 0;
    /* token-allow: camada do véu, entre a foto e o texto (receita 016) */
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg,
      color-mix(in oklch, var(--surface-inverse) 88%, transparent) 0%,
      color-mix(in oklch, var(--surface-inverse) 76%, transparent) 40%,
      transparent 58%);
  }
  /* a coluna de texto começa na borda do contêiner (a mesma da logo e das caixas do pé). Largura: 52% da tela até 1408 px, como aprovado; daí em diante
     fica em 604 px (a conta de 1408 px), sem esticar. A altura do hero não muda com a tela. */
  .hero__corpo {
    margin-inline: var(--gutter);
    max-inline-size: min(calc(52cqw - 2 * var(--container-pad)), calc(0.52 * var(--container-max) - 0.96 * var(--container-pad)));
    padding: clamp(116px, 12cqw, 150px) 0 clamp(36px, 4.6cqw, 60px);
  }

  /* 024 par tipográfico: a parte forte no peso da logo (TOP), a fina no peso leve (MENU) */
  .hero h1 {
    margin: 0; font-family: var(--font-display); font-size: var(--fs-hero); line-height: 1.02;
    letter-spacing: var(--ls-display); color: var(--text-on-brand); text-wrap: balance;
  }
  .h-peso, .h-fino { display: block; }
  .h-peso { font-weight: var(--peso-display); }
  .h-fino { font-weight: var(--peso-fino); }

  .hero__apoio { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2cqw, 24px); margin-block-start: clamp(18px, 2.6cqw, 32px); }
  .hero__sub {
    margin: 0;
    /* token-allow: medida do texto de apoio aprovada na home (48ch); o sistema só tem --measure de 62ch, para texto corrido */
    max-inline-size: 48ch;
    font-size: var(--fs-lead); line-height: 1.5; color: var(--text-on-brand);
  }
  .hero__acao { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .hero__micro { margin: 0; max-inline-size: none; font-size: var(--fs-micro); line-height: 1.55; color: var(--text-on-brand); }

  /* 206 tira de provas: endereço, horário e telefone, três caixas no pé da primeira tela */
  .tira {
    list-style: none; margin: 0; display: grid; grid-template-columns: 1.05fr 1.2fr 1fr; gap: var(--gap-tira);
    padding: 0 var(--gutter) clamp(12px, 2cqw, 24px);
  }
  .tira li { min-inline-size: 0; background: var(--surface-2); border-radius: var(--radius-caixa); padding: var(--space-4) var(--space-5); box-shadow: var(--sombra-card); }
  .tira li:last-child { display: flex; align-items: center; }
  .tira__rotulo {
    display: block;
    /* token-allow: respiro entre o rótulo e o valor, medido na home aprovada */
    margin-block-end: 6px;
    color: var(--text-3); font: 700 var(--fs-label)/1.2 var(--font-body); letter-spacing: 0.11em; text-transform: uppercase;
  }
  .tira__valor { display: block; color: var(--text-1); font-size: var(--fs-value); line-height: 1.4; }
  .tira__tel {
    color: var(--text-brand); font: var(--peso-display) var(--fs-phone)/1.15 var(--font-display); letter-spacing: var(--ls-display);
    white-space: nowrap; text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px;
    transition: color var(--dur-1) var(--ease-out);
  }
  .tira__tel:hover { color: var(--action-hover); }
  .tira__tel:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

  /* ---------- loja · 021 display oversized + 025 kicker + 018 campos de cor: três palavras, três campos, o mesmo tamanho e o mesmo peso ---------- */
  .loja { background: var(--surface-0); color: var(--text-1); font-family: var(--font-body); line-height: 1.5; padding-block: var(--section-dense); }
  .loja h2, .loja h3 { margin: 0; font-family: var(--font-display); letter-spacing: var(--ls-display); text-wrap: balance; }
  :where(.loja) :is(p, ul) { margin: 0; max-inline-size: none; }
  .loja__cab, .loja__fecho { padding-inline: var(--gutter); }
  /* 025 kicker: caixa alta pequena em vinho, antes do título. Só dois no site (teto da trava). */
  .kicker { margin: 0 0 var(--space-3); color: var(--text-brand); font: 700 var(--fs-kicker)/1.2 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; }
  .loja h2 {
    /* token-allow: medida do título aprovada na home (28ch); o sistema só tem --measure de 62ch, para texto corrido */
    max-inline-size: 28ch;
    font-size: var(--fs-h2-store); font-weight: var(--peso-display); line-height: 1.1;
  }
  /* 021 + 018: a palavra é o conteúdo. Três campos iguais em largura, margem lateral única, cores só por token. */
  .loja__campos {
    list-style: none; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-campos);
    /* token-allow: respiro acima e abaixo dos campos, medido na home aprovada */
    margin-block: clamp(20px, 2.8cqw, 36px);
  }
  .campo {
    display: flex; align-items: flex-end; min-inline-size: 0;
    /* token-allow: altura do campo, medida na home aprovada (de 170 a 320 px) */
    min-block-size: clamp(170px, 23cqw, 320px);
    /* token-allow: respiro interno do campo, medido na home aprovada */
    padding: clamp(18px, 2.6cqw, 36px) clamp(16px, 2.4cqw, 32px);
  }
  .campo h3 { font-size: var(--fs-block); font-weight: var(--peso-display); line-height: 1; overflow-wrap: normal; hyphens: manual; }
  /* canto alternado 28/18; o campo do meio inverte os outros dois (assimetria declarada do arquétipo) */
  .campo--vinhos { background: var(--surface-salmao); color: var(--text-on-salmao); border-radius: var(--radius-card) var(--radius-faixa) var(--radius-card) var(--radius-faixa); }
  .campo--cervejas { background: var(--surface-brand); color: var(--accent); border-radius: var(--radius-faixa) var(--radius-card) var(--radius-faixa) var(--radius-card); }
  .campo--destilados { background: var(--surface-inverse-2); color: var(--accent); border-radius: var(--radius-card) var(--radius-faixa) var(--radius-card) var(--radius-faixa); }
  .loja__corpo { max-inline-size: var(--measure); color: var(--text-2); font-size: var(--fs-body); text-wrap: pretty; }
  .loja__acao { margin-block-start: var(--gap-campos); }
  /* botão, papel claro: vinho sobre o papel (--action). O de foto e fundo escuro é o .botao de cima; nunca os dois na mesma superfície. */
  .botao--claro { min-block-size: var(--btn-h); padding-inline: var(--btn-px); background: var(--action); color: var(--text-on-action); font-size: var(--btn-fs); }
  .botao--claro:hover { background: var(--action-hover); }
  .botao--claro:focus-visible { outline-color: var(--focus); }
  /* colapso: até 640 px os três campos viram uma coluna, um embaixo do outro, com a palavra no tamanho de celular */
  @container (max-width: 640px) {
    .loja__campos { grid-template-columns: 1fr; }
    .campo {
      /* token-allow: altura do campo no celular, medida na home aprovada */
      min-block-size: 130px;
    }
    .campo h3 { font-size: var(--fs-block-narrow); }
  }

  /* Entrada M5: só o título e o texto de apoio, em --dur-enter (até 320 ms). Foto, caixas e botão ficam parados. */
  @media (prefers-reduced-motion: no-preference) {
    .hero h1, .hero__sub { animation: entra var(--dur-enter) var(--ease-out) both; }
  }
  @keyframes entra { from { opacity: 0; transform: translateY(var(--enter-y)); } }

  /* Revelação das seções abaixo da primeira tela (M5): ao entrar na tela, uma vez só, em --dur-enter (até 320 ms).
     A classe .revela só é posta pelo site.js, e só com movimento permitido: sem JS ou com reduced-motion tudo aparece direto. */
  @media (prefers-reduced-motion: no-preference) {
    .revela { opacity: 0; transform: translateY(var(--enter-y)); }
    .revela.revela--entrou {
      opacity: 1; transform: none;
      transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out);
    }
  }
  @media print { .revela { opacity: 1; transform: none; } }

  /* ---------- perguntas · 083 + 013 + 028: título na margem (sticky), respostas abertas, medida de --measure ---------- */
  .perguntas {
    background: var(--surface-0); color: var(--text-1); font-family: var(--font-body); line-height: 1.5;
    padding: var(--section-standard) var(--gutter);
    display: grid; grid-template-columns: 1fr 1.9fr; gap: clamp(24px, 5cqw, 80px); align-items: start;
  }
  .perguntas h2, .perguntas h3 { margin: 0; font-family: var(--font-display); letter-spacing: var(--ls-display); text-wrap: balance; }
  :where(.perguntas) :is(p, ul) { margin: 0; max-inline-size: none; }
  .perguntas h2 { position: sticky; inset-block-start: var(--space-4); font-size: var(--fs-h2); font-weight: var(--peso-display); line-height: 1.08; }
  /* 083: details nativo. Abre aberto, como a variante aprovada mostra as respostas; o clique ou o teclado ainda recolhe. Sem seta: a seta não foi aprovada. */
  .pergunta {
    border-block-start: 1px solid var(--border-strong);
    /* token-allow: respiro da pergunta, medido na home aprovada */
    padding-block: 18px 22px;
  }
  .pergunta:last-child { border-block-end: 1px solid var(--border-strong); }
  .pergunta summary { list-style: none; cursor: pointer; }
  .pergunta summary::-webkit-details-marker { display: none; }
  .pergunta summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-btn); }
  .pergunta h3 {
    font-size: var(--fs-question); font-weight: var(--peso-display); line-height: 1.22;
    /* token-allow: tracking da pergunta, medido na home aprovada (o do título é -0.02em) */
    letter-spacing: -0.01em;
  }
  .pergunta[open] h3 {
    /* token-allow: respiro entre a pergunta e a resposta, medido na home aprovada */
    margin-block-end: 6px;
  }
  .pergunta__resposta { max-inline-size: var(--measure); font-size: var(--fs-answer); line-height: 1.55; color: var(--text-2); }
  /* colapso: até 760 px uma coluna, o título deixa de grudar e cada pergunta vira um cartão de papel mais escuro */
  @container (max-width: 760px) {
    .perguntas { grid-template-columns: 1fr; }
    .perguntas h2 { position: static; }
    .perguntas__lista { display: grid; gap: var(--gap-tira); }
    .pergunta, .pergunta:last-child {
      border: 0; background: var(--surface-1); border-radius: var(--radius-caixa);
      /* token-allow: respiro do cartão no celular, medido na home aprovada */
      padding: 18px 22px;
    }
    .pergunta__resposta { color: var(--text-1); }
  }

  /* ---------- onde fica · 084 + 040: cartão vinho com grão, em tira de papel (R1); botão do mapa maior e contatos na linha dele (R2) ---------- */
  /* A seção é o próprio cartão vinho; a tira de papel (R1) é o papel do corpo em volta dele: --faixa-respiro dos lados e embaixo, e nada em cima. */
  .onde {
    position: relative; isolation: isolate; display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 5cqw, 88px);
    margin: 0 var(--faixa-respiro) var(--faixa-respiro);
    /* a margem interna é a lateral menos a tira de papel (R1), para o título cair na mesma linha das outras seções (pre-top-menu-31) */
    padding: var(--section-breathing) calc(var(--gutter) - var(--faixa-respiro));
    background: var(--surface-brand); color: var(--text-on-brand); font-family: var(--font-body); line-height: 1.5;
    border-radius: var(--radius-card);
  }
  /* 040 grão: ruído em SVG por cima da cor, atrás do texto. Medido na home aprovada: opacidade .14, soft-light. */
  .onde::before {
    content: ""; position: absolute; inset: 0;
    /* token-allow: camada do grão, atrás do texto (receita 040) */
    z-index: -1;
    border-radius: inherit; pointer-events: none;
    /* token-allow: grão aprovado na home, opacidade .14 */
    opacity: 0.14; mix-blend-mode: soft-light;
    /* token-allow: ruído fractal em SVG embutido (receita 040), sem arquivo extra */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  }
  .onde h2, .onde p, .onde dl, .onde dd { margin: 0; max-inline-size: none; }
  .onde .kicker { color: var(--accent); margin-block-end: var(--space-3); }
  .onde h2 {
    font-family: var(--font-display); letter-spacing: var(--ls-display); text-wrap: balance;
    font-size: var(--fs-closing); font-weight: var(--peso-display); line-height: 1.02;
  }
  .onde .onde__ender {
    margin-block: clamp(14px, 2cqw, 24px);
    /* token-allow: medida do endereço aprovada na home (46ch) */
    max-inline-size: 46ch;
    font-size: var(--fs-address); line-height: 1.45;
  }
  .onde__acao { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .onde__micro { font-size: var(--fs-micro); line-height: 1.55; color: var(--text-on-brand); }
  /* R2: o botão do mapa é a variante de fechamento (169 por 56, letra de 18) e a coluna dos contatos desce para a linha dele */
  .onde__acao .botao {
    justify-content: center; min-block-size: var(--btn-closing-h); min-inline-size: var(--btn-closing-min-w);
    padding-inline: var(--btn-closing-px); font-size: var(--btn-closing-fs);
  }
  .onde__b { align-self: end; }
  .onde__horas > div {
    display: flex; flex-wrap: wrap;
    /* token-allow: espaço entre "Aberta" e "todos os dias", um terço de espaço da própria linha */
    gap: 0 0.3em;
    /* token-allow: respiro da régua do horário, medido na home aprovada */
    padding-block: 15px;
    border-block: 1px solid color-mix(in oklch, var(--text-on-brand) 34%, transparent);
    font: var(--peso-display) var(--fs-hours)/1.15 var(--font-display); letter-spacing: var(--ls-display);
  }
  .onde__horas dd { font-weight: inherit; }
  .onde .onde__cont { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: var(--fs-answer);
    /* token-allow: respiro acima dos contatos, medido na home aprovada */
    margin-block-start: 18px;
  }
  .onde__cont a {
    display: inline-block; color: var(--link-inverse); font-weight: 600; text-underline-offset: 0.2em;
    /* token-allow: alvo de toque mínimo de 24 px (a11y.md) */
    min-block-size: 24px;
  }
  .onde__cont a:hover { text-decoration-thickness: 2px; }
  .onde a:focus-visible { outline: 2px solid var(--focus-inverse); outline-offset: 3px; }
  /* colapso: até 760 px uma coluna, o endereço e o botão em cima, horário e contatos embaixo */
  @container (max-width: 760px) {
    .onde { grid-template-columns: 1fr; }
    .onde__b { align-self: start; }
    .onde__acao .botao { inline-size: 100%; }
  }

  /* ---------- páginas de texto (política e 404) · 012: uma coluna de leitura na borda do contêiner ---------- */
  .texto {
    background: var(--surface-0); color: var(--text-1); font-family: var(--font-body); line-height: 1.5;
    padding: var(--section-breathing) var(--gutter);
    /* token-allow: a página curta não deixa o rodapé subir no meio da tela */
    min-block-size: 60dvh;
  }
  .texto h1, .texto h2 { margin: 0; font-family: var(--font-display); letter-spacing: var(--ls-display); text-wrap: balance; }
  .texto p { margin: 0; max-inline-size: var(--measure); }
  .texto h1 { font-size: var(--fs-h2); font-weight: var(--peso-display); line-height: 1.08; max-inline-size: var(--measure); }
  .texto .texto__sub { margin-block-start: var(--space-4); font-size: var(--fs-lead); color: var(--text-2); }
  .texto__bloco { margin-block-start: var(--space-8); padding-block-start: var(--space-5); border-block-start: 1px solid var(--border-strong); max-inline-size: var(--measure); }
  .texto__bloco h2 { font-size: var(--fs-question); font-weight: var(--peso-display); line-height: 1.22; margin-block-end: var(--space-2); }
  .texto__bloco p { font-size: var(--fs-answer); line-height: 1.55; color: var(--text-2); }
  .texto a { color: var(--link); font-weight: 600; text-underline-offset: 0.2em; }
  .texto a:hover { text-decoration-thickness: 2px; }
  .texto a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-btn); }
  .texto .texto__data { margin-block-start: var(--space-8); font-size: var(--fs-micro); color: var(--text-3); }
  .texto .texto__volta { margin-block-start: var(--space-4); font-size: var(--fs-body); }

  /* ---------- WhatsApp flutuante (pedido do dono, 2026-11-09): quadrado de 56 px no canto de baixo, na forma dos botões (raio 20), na cor da marca WhatsApp (tokens --whatsapp-*).
     Anel de papel em volta para separar do vinho e da foto; foco com contorno vinho por fora do anel. Sem pulsar e sem animação: só a cor muda no hover. ---------- */
  .wa {
    position: fixed;
    inset-inline-end: max(var(--space-5), env(safe-area-inset-right));
    inset-block-end: max(var(--space-5), env(safe-area-inset-bottom));
    /* token-allow: camada do botão flutuante, acima do conteúdo e abaixo do menu do celular (que abre na camada de topo) */
    z-index: 5;
    display: grid; place-items: center;
    /* token-allow: alvo do botão flutuante, 56 px (mínimo de 48 px) */
    inline-size: 56px;
    /* token-allow: alvo do botão flutuante, 56 px (mínimo de 48 px) */
    block-size: 56px;
    border-radius: var(--radius-caixa); background: var(--whatsapp-bg); color: var(--whatsapp-fg);
    box-shadow: 0 0 0 3px var(--surface-0), var(--sombra-card);
    transition: background-color var(--dur-1) var(--ease-out);
  }
  .wa:hover { background: var(--whatsapp-bg-hover); }
  .wa:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }
  @media (prefers-reduced-motion: no-preference) { .wa:active { transform: translateY(1px); } }
  .icone--wa {
    fill: currentColor; stroke: none;
    /* token-allow: ícone do WhatsApp dentro do botão de 56 px */
    inline-size: 30px;
    /* token-allow: ícone do WhatsApp dentro do botão de 56 px */
    block-size: 30px;
  }
  @media print { .wa { display: none; } }

  /* ---------- rodapé · 085: três colunas, aviso em uma linha, assinatura da agência ---------- */
  .rodape {
    background: var(--surface-inverse); color: var(--text-inverse); font-family: var(--font-body);
    padding: var(--section-dense) var(--gutter) 0; font-size: var(--fs-foot); line-height: 1.5;
  }
  .rodape a { color: var(--link-inverse); font-weight: 600; text-underline-offset: 0.2em; }
  .rodape a:hover { text-decoration-thickness: 2px; }
  .rodape a:focus-visible { outline: 2px solid var(--focus-inverse); outline-offset: 3px; }
  .rodape p, .rodape address, .rodape ul { margin: 0; max-inline-size: none; padding: 0; font-style: normal; }
  .rodape__cols { display: grid; grid-template-columns: 1.45fr 1.2fr 0.9fr; gap: clamp(18px, 4cqw, 64px); }
  .rodape__cols p, .rodape__end { text-wrap: balance; }
  .logo--rodape {
    /* token-allow: logo do rodapé, medida na home aprovada */
    block-size: 64px;
    margin-block-end: var(--space-4);
  }
  .rodape__cont {
    list-style: none; display: flex; flex-direction: column;
    /* token-allow: respiro entre links do rodapé, medido na home aprovada */
    gap: 6px;
  }
  .rodape .rodape__aviso { margin-block-start: clamp(16px, 2.2cqw, 26px); font-size: var(--fs-micro); color: var(--text-inverse); }
  .rodape__assinatura {
    display: grid; place-items: center; padding-block: var(--space-5);
    margin-block-start: clamp(18px, 2.4cqw, 28px); border-block-start: 1px solid color-mix(in oklch, var(--text-inverse) 26%, transparent);
    color: var(--link-inverse);
  }
  .rodape__assinatura a { display: block; line-height: 0; }
  .assinatura {
    display: block;
    /* token-allow: altura da assinatura da agência, 30 px no CP1.5 (padrao-ui-ux §6.1, mínimo 25 px) */
    block-size: 30px;
    inline-size: auto;
    /* token-allow: proporção do desenho da logo da agência (viewBox 805,83 por 131,02) */
    aspect-ratio: 805.83 / 131.02;
    fill: currentColor;
  }

  /* ---------- colapso mobile, escrito ao lado do desktop (reg-colapso-mobile-explicito); a 07b só refina ---------- */
  @container (max-width: 900px) {
    /* de 761 a 900 px, duas colunas; o telefone ocupa a linha de baixo, nas duas (pre-top-menu-32) */
    .tira { grid-template-columns: 1fr 1fr; }
    .tira li:last-child { grid-column: 1 / -1; }
  }
  @container (min-width: 1000px) {
    .hero__sub {
      /* token-allow: a linha não pode alcançar a primeira garrafa entre 1200 e 1400 px (medido a 1280: 3,63:1 sem o limite, 15,7:1 com ele) */
      max-inline-size: min(48ch, 40cqw);
    }
  }
  @container (min-width: 1561px) {
    /* telas largas: a foto cobre pela largura e sobe; sem isto a ponta do gargalo da garrafa de destilado cai atrás do menu (1,03:1 a 1920 px, medido). Corte aprovado só vale até 1560. pre-top-menu-35 */
    .hero__foto {
      /* token-allow: ponto de corte da foto em tela larga, medido a 1680, 1920 e 2560 px */
      object-position: 100% 0%;
    }
  }
  @container (max-width: 760px) {
    .topo { justify-content: space-between; }
    .topo__nav, .topo > .botao { display: none; }
    .topo__logo {
      /* token-allow: logo do celular, medida na home aprovada */
      block-size: 40px;
    }
    .topo__menu { display: grid; }
    .hero__foto {
      position: static; block-size: auto; object-position: 100% 60%;
      /* token-allow: proporção do corte da foto no celular */
      aspect-ratio: 16 / 9;
    }
    .hero::before { display: none; }
    .hero__corpo {
      max-inline-size: none;
      /* token-allow: ritmo do hero no celular, medido na home aprovada */
      padding-block: var(--space-5) 18px;
    }
    .hero h1 { font-size: var(--fs-hero-narrow); }
    .hero__apoio {
      /* token-allow: ritmo do hero no celular, medido na home aprovada */
      gap: 14px;
      /* token-allow: ritmo do hero no celular, medido na home aprovada */
      margin-block-start: 14px;
    }
    .tira { grid-template-columns: 1fr; gap: var(--space-2); }
    .tira li {
      /* token-allow: altura da caixa no celular, medida na home aprovada */
      padding: 10px var(--space-4);
    }
    .tira li:last-child { grid-column: auto; }
    .rodape__cols { grid-template-columns: 1fr; }
    /* respiro para o botão flutuante do WhatsApp não cobrir a assinatura da agência quando a tela é estreita */
    .rodape { padding-block-end: var(--space-20); }
  }
}