/* ============================================================
   Jantar de Negócios MAM · Rio de Janeiro · 14/11/2026
   Sistema visual "convite impresso" (ver DIRECAO-DE-ARTE.md)
   Ordem do arquivo: fontes, tokens, base, tipografia, layout,
   componentes, botão fixo. Depois: um trecho comentado "BLOCO NN" por bloco.
   ============================================================ */

/* ---------- fontes locais (as mesmas de Fortaleza, servidas em /fonts/ no domínio) ----------
   Newsreader romana: eixo wght 400 a 500 (sem opsz). Itálica: só 400. Montserrat: 400 a 600.
   Nada acima desses pesos: o navegador inventaria negrito falso. */
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/fonts/montserrat.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader Reserva"; src: local("Georgia"); size-adjust: 118.99%; ascent-override: 61.77%; descent-override: 22.27%; line-gap-override: 0%; }
@font-face { font-family: "Montserrat Reserva"; src: local("Arial"); size-adjust: 127.77%; ascent-override: 75.76%; descent-override: 19.64%; line-gap-override: 0%; }

/* ---------- tokens ---------- */
:root {
  /* cores da IDV (02-identidade-visual/tokens.css). Nenhuma cor fora desta lista. */
  --papel: #FAFAF7;          /* fundo padrão, "papel do convite" */
  --branco: #FFFFFF;         /* folha branca: blocos de leitura alternados */
  --teal: #214F59;           /* títulos sobre claro; fundo do bloco de vozes e do fechamento */
  --noite: #214F59;          /* teal MAM (o verde #12372A é proibido no MAM desde 18/10): capa (01), a noite no Rio (06), texto do botão */
  --dourado: #C2A261;        /* filetes, numerais, botão. NUNCA texto pequeno sobre claro (contraste 2,3) */
  --tinta: #3C3C3C;          /* texto corrido sobre claro */
  --tinta-suave: rgb(60 60 60 / 0.74);   /* legendas e notas sobre claro (5:1 no papel) */
  --regua: rgb(33 79 89 / 0.22);         /* filete fino sobre claro */
  --regua-escura: rgb(194 162 97 / 0.45);/* filete fino sobre teal/noite */
  --sobre-escuro: rgb(255 255 255 / 0.90);
  --sobre-escuro-suave: rgb(255 255 255 / 0.72);

  --serif: "Newsreader", "Newsreader Reserva", Georgia, serif;
  --sans: "Montserrat", "Montserrat Reserva", Arial, sans-serif;

  /* escala tipográfica: valor do celular (390) → valor do desktop (1366), interpolado */
  --t-capa:      clamp(2.5rem, 1.601rem + 3.689vw, 4.75rem);      /* 40 → 76  H1 */
  --t-titulo:    clamp(2rem, 1.451rem + 2.254vw, 3.375rem);       /* 32 → 54  H2 */
  --t-subtitulo: clamp(1.375rem, 1.225rem + 0.615vw, 1.75rem);    /* 22 → 28  H3 */
  --t-lead:      clamp(1.25rem, 1.15rem + 0.41vw, 1.5rem);        /* 20 → 24  abertura serifada */
  --t-corpo:     clamp(1.0625rem, 1.038rem + 0.102vw, 1.125rem);  /* 17 → 18 */
  --t-citacao:   clamp(1.625rem, 1.275rem + 1.434vw, 2.5rem);     /* 26 → 40  frase de participante em destaque */
  --t-numeral:   clamp(3.5rem, 2.101rem + 5.738vw, 7rem);         /* 56 → 112 numerais decorativos */
  --t-legenda:   clamp(0.875rem, 0.85rem + 0.102vw, 0.9375rem);   /* 14 → 15 */
  --t-sobrelinha: 0.78125rem;                                     /* 12,5 fixo, caixa-alta espaçada */
  --t-botao: 0.9375rem;                                           /* 15 fixo, caixa-alta */

  --lh-capa: 1.04;
  --lh-titulo: 1.08;
  --lh-subtitulo: 1.2;
  --lh-lead: 1.4;
  --lh-corpo: 1.62;
  --lh-citacao: 1.22;

  /* medidas de linha */
  --medida: 60ch;         /* texto corrido */
  --medida-lead: 34ch;    /* abertura serifada */
  --medida-titulo: 18ch;  /* H2 */
  --medida-capa: 15ch;    /* H1 */

  /* espaçamento (base 8, com 4 e 12 para ajuste fino) */
  --e-1: 0.25rem;  /* 4 */
  --e-2: 0.5rem;   /* 8 */
  --e-3: 0.75rem;  /* 12 */
  --e-4: 1rem;     /* 16 */
  --e-5: 1.5rem;   /* 24 */
  --e-6: 2rem;     /* 32 */
  --e-7: 3rem;     /* 48 */
  --e-8: 4rem;     /* 64 */
  --e-9: 6rem;     /* 96 */
  --e-10: 8rem;    /* 128 */
  --secao: clamp(4.5rem, 2.902rem + 6.557vw, 8.5rem);   /* 72 → 136 respiro vertical de bloco */
  --gutter: clamp(1.25rem, 0.551rem + 2.869vw, 3rem);   /* 20 → 48 margem lateral */
  --coluna-gap: clamp(1rem, 0.5rem + 1.6vw, 2rem);       /* 16 → 32 entre colunas */
  --container: 1200px;

  --raio: 2px;            /* cantos de papel cortado. Foto: 0 */
  --borda-filete: 1px;
  --borda-forte: 2px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-corpo);
  line-height: var(--lh-corpo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
main { display: block; }
p { margin: 0 0 1.05em; max-width: var(--medida); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
figure, blockquote { margin: 0; }
li, figcaption, dd { text-wrap: pretty; }
strong { font-weight: 600; }

/* ---------- tipografia ---------- */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--teal);
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
h1, .capa { font-size: var(--t-capa); line-height: var(--lh-capa); max-width: var(--medida-capa); letter-spacing: -0.02em; }
h2, .titulo { font-size: var(--t-titulo); line-height: var(--lh-titulo); max-width: var(--medida-titulo); margin-bottom: var(--e-5); }
h3, .subtitulo { font-size: var(--t-subtitulo); line-height: var(--lh-subtitulo); font-weight: 500; letter-spacing: -0.005em; }
/* itálico dentro de título: a palavra que carrega a emoção. Uma por título, no máximo */
h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; }

/* sobrelinha: rótulo de seção em caixa-alta espaçada, com fólio do bloco */
.sobrelinha {
  display: flex; align-items: baseline; gap: var(--e-3);
  font-family: var(--sans); font-size: var(--t-sobrelinha); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.4;
  color: var(--teal); margin: 0 0 var(--e-5); max-width: none;
}
.sobrelinha .folio { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.15rem; letter-spacing: 0; text-transform: none; color: var(--dourado); }
.sobrelinha::after { content: ""; flex: 0 0 2.5rem; height: var(--borda-filete); background: var(--dourado); align-self: center; }

/* abertura serifada (primeiro parágrafo de bloco, subtítulo da capa) */
.lead { font-family: var(--serif); font-size: var(--t-lead); line-height: var(--lh-lead); max-width: var(--medida-lead); color: var(--tinta); }

/* capitular: só no bloco 02, no primeiro parágrafo */
.capitular::first-letter { float: left; font-family: var(--serif); font-weight: 400; font-size: 4.1em; line-height: 0.82; padding: 0.06em 0.09em 0 0; color: var(--teal); }

.legenda, figcaption { font-family: var(--serif); font-style: italic; font-size: var(--t-legenda); line-height: 1.4; color: var(--tinta-suave); margin-top: var(--e-3); max-width: 46ch; }

/* numeral decorativo (perguntas, roteiro). Sempre aria-hidden: o número real vem do <ol> */
.numeral { font-family: var(--serif); font-weight: 400; font-size: var(--t-numeral); line-height: 0.9; color: var(--dourado); font-variant-numeric: lining-nums; letter-spacing: -0.03em; }

/* hora / preço: algarismos alinhados */
.algarismo { font-family: var(--serif); font-variant-numeric: lining-nums tabular-nums; }

/* ficha: pares rótulo/valor (data, horário, local, vagas; credenciais da anfitriã) */
.ficha { display: grid; gap: 0; margin: 0; }
.ficha > div { display: grid; grid-template-columns: 6.5rem 1fr; align-items: baseline; gap: var(--e-4); padding: var(--e-3) 0; border-top: var(--borda-filete) solid var(--regua); }
.ficha > div:last-child { border-bottom: var(--borda-filete) solid var(--regua); }
.ficha dt { font-size: var(--t-sobrelinha); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); }
.ficha dd { margin: 0; font-family: var(--serif); font-size: 1.125rem; line-height: 1.35; color: var(--tinta); }

/* ---------- layout ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.secao { padding-block: var(--secao); position: relative; }

/* grade de 12 colunas no desktop; no celular tudo ocupa a largura.
   Cada filho escolhe a faixa com --de / --ate (linhas da grade, 1 a 13). Ex.: style="--de:3; --ate:10" */
.grade { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--coluna-gap); row-gap: var(--e-6); }
@media (min-width: 900px) {
  .grade { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .grade > * { grid-column: var(--de, 1) / var(--ate, 13); }
}


/* fundos: um por bloco, na ordem definida em DIRECAO-DE-ARTE.md */
.fundo-papel  { background: var(--papel); }
.fundo-branco { background: var(--branco); }
.fundo-teal   { background: var(--teal); color: var(--sobre-escuro); }
.fundo-noite  { background: var(--noite); color: var(--sobre-escuro); }
:is(.fundo-teal, .fundo-noite) :is(h1, h2, h3) { color: var(--branco); }
:is(.fundo-teal, .fundo-noite) :is(p, li, dd, .lead) { color: var(--sobre-escuro); }
:is(.fundo-teal, .fundo-noite) :is(figcaption, .legenda, .botao-nota) { color: var(--sobre-escuro-suave); }
:is(.fundo-teal, .fundo-noite) .sobrelinha { color: var(--dourado); }
:is(.fundo-teal, .fundo-noite) .ficha > div { border-color: var(--regua-escura); }
:is(.fundo-teal, .fundo-noite) .ficha dt { color: var(--dourado); }
:is(.fundo-teal, .fundo-noite) .capitular::first-letter { color: var(--dourado); }

/* ---------- filetes ---------- */
.regua { border: 0; height: var(--borda-filete); background: var(--regua); margin: var(--e-7) 0; }
:is(.fundo-teal, .fundo-noite) .regua { background: var(--regua-escura); }
/* moldura de convite: filete duplo dourado (bloco 06 cardápio e bloco 09 RSVP; em nenhum outro lugar) */
.moldura { position: relative; padding: clamp(1.75rem, 1rem + 3vw, 3.5rem) clamp(1.25rem, 0.5rem + 3vw, 3.5rem); border: var(--borda-filete) solid var(--dourado); outline: var(--borda-filete) solid var(--dourado); outline-offset: -7px; }

/* ---------- foto ---------- */
.foto { margin: 0; }
.foto picture, .foto img { width: 100%; }
.foto img { aspect-ratio: var(--ar, auto); object-fit: cover; object-position: var(--foco, center); border-radius: 0; background: rgb(33 79 89 / 0.08); }
/* fio de 1px por dentro só sobre fundo claro, para foto clara não "vazar" no papel */
.fundo-papel .foto img, .fundo-branco .foto img { outline: 1px solid rgb(33 79 89 / 0.06); outline-offset: -1px; }
/* sangria: a foto sai da margem no celular e encosta nas bordas da tela (a legenda volta para a margem) */
@media (max-width: 899px) {
  .foto.sangria-celular, .sangria-celular { margin-inline: calc(-1 * var(--gutter)); }
  .sangria-celular figcaption { margin-inline: var(--gutter); }
  .sangria-celular img { outline: 0; }
}

/* ---------- citação (frase literal de participante) ---------- */
.citacao { position: relative; margin: 0; max-width: 30ch; }
.citacao blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: var(--t-citacao); line-height: var(--lh-citacao); text-wrap: pretty; }
.citacao blockquote::before { content: "\201C"; display: block; font-family: var(--serif); font-style: normal; font-size: 2.6em; line-height: 1; height: 0.5em; color: var(--dourado); margin-bottom: var(--e-1); }
.citacao figcaption { font-family: var(--sans); font-style: normal; font-size: var(--t-sobrelinha); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-top: var(--e-4); color: var(--tinta-suave); }
.citacao figcaption::before { content: ""; display: inline-block; width: 1.5rem; height: 1px; background: var(--dourado); vertical-align: middle; margin-right: var(--e-3); }
/* variante menor para as citações secundárias */
.citacao--menor { max-width: 34ch; }
.citacao--menor blockquote { font-size: var(--t-lead); line-height: var(--lh-lead); }
.citacao--menor blockquote::before { font-size: 2em; }

/* ---------- lista com filetes (para quem, incluso, perguntas) ---------- */
.lista-regua { list-style: none; border-top: var(--borda-filete) solid var(--regua); }
.lista-regua > li { padding: var(--e-4) 0; border-bottom: var(--borda-filete) solid var(--regua); }
:is(.fundo-teal, .fundo-noite) .lista-regua, :is(.fundo-teal, .fundo-noite) .lista-regua > li { border-color: var(--regua-escura); }

/* ---------- link de texto ---------- */
.link { color: var(--teal); font-weight: 600; text-decoration: underline; text-decoration-color: var(--dourado); text-decoration-thickness: 1px; text-underline-offset: 0.22em; display: inline-block; padding-block: 0.7rem; margin-block: -0.7rem; }
.link:hover { text-decoration-thickness: 2px; }
:is(.fundo-teal, .fundo-noite) .link { color: var(--branco); }

/* ---------- botão (o único estilo de botão da página) ---------- */
.cta { margin-top: var(--e-6); }
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-3);
  min-height: 3.5rem; padding: 1rem 2rem;
  background: var(--dourado); color: var(--noite);
  font-family: var(--sans); font-weight: 600; font-size: var(--t-botao); line-height: 1.2;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; text-align: center;
  border: 0; border-radius: var(--raio); cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
/* seta desenhada (linha + ponta), nunca um traço solto: traço sozinho lê como travessão */
.botao::after { content: ""; flex: none; width: 1.25em; height: 0.75em; background: currentColor; transition: transform 0.18s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M0 6h18M13 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M0 6h18M13 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.botao:hover { background: var(--noite); color: var(--dourado); }
.botao:hover::after { transform: translateX(3px); }
:is(.fundo-teal, .fundo-noite) .botao:hover { background: var(--branco); color: var(--noite); }
.botao:active { transform: translateY(1px); }
.botao:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
:is(.fundo-teal, .fundo-noite) .botao:focus-visible { outline-color: var(--branco); }
@media (max-width: 559px) { .botao { width: 100%; } }
.botao-nota { font-size: var(--t-legenda); line-height: 1.45; color: var(--tinta-suave); margin-top: var(--e-3); max-width: 44ch; text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .botao, .botao::after { transition: none; } }

/* ---------- botão fixo no celular (aparece depois da capa, some no fechamento) ---------- */
.cta-fixo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; padding: var(--e-3) var(--gutter) calc(var(--e-3) + env(safe-area-inset-bottom)); background: var(--papel); border-top: var(--borda-filete) solid var(--regua); transform: translateY(110%); transition: transform 0.25s ease; }
.cta-fixo .botao { width: 100%; }
.cta-fixo.visivel { transform: none; }
@media (min-width: 900px) { .cta-fixo { display: none; } }
@media (prefers-reduced-motion: reduce) { .cta-fixo { transition: none; } }
body.com-cta-fixo { padding-bottom: 5.25rem; }
@media (min-width: 900px) { body.com-cta-fixo { padding-bottom: 0; } }

/* ---------- acessibilidade ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--dourado); outline-offset: 3px; }

/* ============================================================
   BLOCOS: cada bloco acrescenta o seu trecho abaixo, na ordem,
   com o comentário "BLOCO NN" (barra-asterisco BLOCO NN asterisco-barra)
   e só seletores começando por #bNN.
   ============================================================ */

/* BLOCO 01 */
/* Dobra: capa de revista sobre verde escuro.
   Celular: logo e nome do encontro, foto larga sangrando (176 a 200px de altura, para o botão terminar
   antes de 750px, a área útil do Safari em 390x844), legenda, H1, abertura, ficha, botão e preço.
   A prova da lista de espera desce para depois do preço.
   Desktop: texto 1→7; à direita, a foto larga sangrando, com a legenda e a prova logo abaixo, as duas
   colunas centradas na altura da capa. A mesma foto (recorte 1535x745, sem garrafa nem TV) nos dois tamanhos. */
#b01 { padding-block: var(--e-4) var(--e-7); }
#b01 .b01-grade { row-gap: 0; }
/* celular: o grupo foto + prova se desfaz na grade para a prova ir para o fim */
#b01 .b01-lado { display: contents; }
#b01 .b01-topo { order: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); margin-bottom: var(--e-3); }
#b01 .b01-foto { order: 2; }
#b01 .b01-texto { order: 3; margin-top: 1.25rem; }
#b01 .b01-prova { order: 4; }
#b01 .b01-logo { height: 1.375rem; width: auto; flex: none; }
#b01 .b01-foto img { aspect-ratio: auto; height: clamp(11rem, calc(100svh - 41.25rem), 12.5rem); object-position: 50% 35%; }
#b01 .b01-foto figcaption { margin-top: var(--e-2); }
#b01 .sobrelinha { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.125rem; letter-spacing: 0; text-transform: none; margin: 0; }
#b01 .sobrelinha::after, #b01 .sobrelinha::before { display: none; }
#b01 h1 { margin-bottom: var(--e-3); }
#b01 .lead { max-width: none; font-size: 1.125rem; line-height: 1.4; margin-bottom: var(--e-3); text-wrap: wrap; }
/* 19/10: texto da Eli, a dinâmica da noite, abaixo do lead e em corpo menor */
#b01 .b01-dinamica { max-width: 46ch; margin: 0 0 var(--e-4); font-size: 0.9375rem; line-height: 1.5; opacity: 0.88; text-wrap: pretty; }
#b01 .ficha > div { padding: 0.4375rem 0; grid-template-columns: 4.25rem 1fr; gap: var(--e-3); }
#b01 .ficha dt { font-size: 0.8125rem; letter-spacing: 0.02em; text-transform: none; }
#b01 .ficha dd { font-size: 1.0625rem; line-height: 1.3; }
#b01 .b01-salao { display: block; }
#b01 .b01-longo { display: none; }
/* prova: a lista de espera do Rio e o que a curadoria quer dizer, em serifa, com filete em cima */
#b01 .b01-prova { font-family: var(--serif); font-size: 1rem; line-height: 1.45; color: var(--sobre-escuro); margin: var(--e-6) 0 0; padding-top: var(--e-4); border-top: var(--borda-filete) solid var(--regua-escura); max-width: 40ch; }
#b01 .cta { margin-top: var(--e-3); }
/* botão da capa em caixa normal, como num convite impresso */
#b01 .botao { text-transform: none; letter-spacing: 0.01em; font-size: 1.0625rem; }
#b01 .botao-nota { margin-top: var(--e-2); max-width: 46ch; color: var(--sobre-escuro-suave); }
#b01 .botao-nota strong { color: var(--sobre-escuro); }

@media (min-width: 900px) {
  #b01 { padding-block: var(--e-6) var(--e-8); }
  #b01 .b01-grade { grid-template-rows: auto 1fr; min-height: min(calc(100svh - 5rem), 50rem); }
  #b01 .b01-topo { grid-column: 1 / 13; grid-row: 1; margin: 0; justify-content: flex-start; gap: var(--e-6); }
  #b01 .b01-logo { height: 2rem; }
  #b01 .b01-texto { grid-column: 1 / 7; grid-row: 2; align-self: center; margin-top: 0; padding-block: 3.5rem 0; padding-right: var(--e-4); }
  /* coluna da direita: foto sangrando, legenda e prova coladas, centradas na altura do texto */
  #b01 .b01-lado {
    display: block; grid-column: 7 / 13; grid-row: 2; align-self: center; padding-top: 3.5rem;
  }
  #b01 .b01-foto { margin-right: calc((min(100vw - 2 * var(--gutter), var(--container)) - 100vw) / 2); }
  #b01 .b01-foto img { height: auto; aspect-ratio: 1535 / 745; object-position: 50% 50%; }
  #b01 .b01-foto figcaption { margin-top: var(--e-3); }
  #b01 .sobrelinha { font-size: 1.375rem; }
  #b01 h1 { margin-bottom: var(--e-5); max-width: none; font-size: clamp(3rem, 4.6vw, 4.25rem); }
  #b01 .lead { max-width: 38ch; font-size: var(--t-lead); line-height: var(--lh-lead); margin-bottom: var(--e-5); }
  #b01 .ficha { max-width: 34rem; }
  #b01 .ficha > div { padding: var(--e-3) 0; grid-template-columns: 5rem 1fr; gap: var(--e-4); }
  #b01 .ficha dt { font-size: 0.875rem; }
  #b01 .ficha dd { font-size: 1.125rem; line-height: 1.35; }
  #b01 .b01-longo { display: inline; }
  #b01 .b01-curto { display: none; }
  #b01 .b01-prova { font-size: 1.125rem; margin: var(--e-5) 0 0; max-width: none; text-wrap: balance; }
  #b01 .cta { margin-top: var(--e-5); }
  #b01 .botao { min-width: 20rem; min-height: 4rem; padding-inline: 2.5rem; font-size: 1.125rem; }
}

/* BLOCO 02 */
/* Por que existe: página de ensaio sobre papel. Ordem da emoção: dor (abertura com capitular),
   frase de virada em itálico serifado, o porquê, a foto de duas que riem uma para a outra, e a chegada.
   Celular: uma coluna, ritmo de 32px entre os grupos; foto quadrada em sangria (largura total da tela);
   fecho aberto por régua fina, com a primeira oração em serifada teal.
   Desktop: título 2→12; abertura e corpo 2→8; na margem 8→13 o destaque e, colada embaixo dele,
   a foto (~420px), que acompanha o corpo; fecho 2→8 com régua. */
#b02 .b02-grade { row-gap: 0; }
#b02 .sobrelinha::after { flex: 1 1 0; min-width: 1.5rem; max-width: 6rem; }
/* fólio em teal: dourado pequeno sobre papel não passa em contraste */
#b02 .sobrelinha .folio { color: var(--teal); }
#b02 h2 { margin-bottom: var(--e-6); }
#b02 .b02-abre { max-width: 36ch; margin-bottom: 0; }
#b02 .capitular::first-letter { font-size: 3.6em; line-height: 0.8; padding: 0.08em 0.1em 0 0; }
/* frase de virada: itálico serifado teal, com filete dourado curto em cima */
#b02 .b02-destaque {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: var(--t-citacao); line-height: var(--lh-citacao);
  color: var(--teal); max-width: 22ch; margin: var(--e-6) 0;
  padding-top: var(--e-5); position: relative; text-wrap: balance;
}
#b02 .b02-destaque::before { content: ""; position: absolute; top: 0; left: 0; width: 2.5rem; height: var(--borda-filete); background: var(--dourado); }
#b02 .b02-texto p { max-width: 56ch; text-wrap: pretty; }
/* 19/10: texto da Eli (rodada 1, parte 2): abertura em 2 parágrafos, pergunta e frase-ponte em destaque leve */
#b02 .b02-abre p { margin: 0; }
#b02 .b02-abre p + p { margin-top: var(--e-4); }
#b02 .b02-pergunta, #b02 .b02-sem-editar { font-family: var(--serif); font-style: italic; font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--teal); }
#b02 .b02-fecho p { margin: 0; text-wrap: pretty; }
#b02 .b02-fecho p + p { margin-top: var(--e-4); }
#b02 .b02-foto { margin-top: var(--e-6); margin-bottom: 0; }
#b02 .b02-foto img { aspect-ratio: 1 / 1; object-position: 50% 40%; }
#b02 .b02-foto figcaption { margin-top: var(--e-2); }
/* fecho: ponto de chegada, aberto por régua fina; a primeira oração vira uma pequena abertura serifada */
#b02 .b02-fecho { max-width: 56ch; margin-top: var(--e-6); padding-top: var(--e-6); border-top: var(--borda-filete) solid var(--regua); }
#b02 .b02-chegada { display: block; margin-bottom: var(--e-3); font-family: var(--serif); font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--teal); text-wrap: balance; }

@media (max-width: 899px) {
  #b02 .b02-foto { margin-inline: calc(-1 * var(--gutter)); }
}

@media (min-width: 900px) {
  #b02 .b02-cabeca { grid-column: 2 / 12; grid-row: 1; }
  #b02 h2 { max-width: 24ch; margin-bottom: var(--e-7); }
  #b02 .b02-abre { grid-column: 2 / 8; grid-row: 2; align-self: start; max-width: none; margin-bottom: var(--e-6); }
  #b02 .b02-destaque { grid-column: 8 / 13; grid-row: 2; align-self: start; margin: var(--e-2) 0 0 var(--e-6); font-size: 1.75rem; max-width: 17ch; }
  #b02 .b02-texto { grid-column: 2 / 8; grid-row: 3; }
  #b02 .b02-texto p { max-width: none; }
  #b02 .b02-fecho { grid-column: 2 / 8; grid-row: 4; max-width: none; }
  #b02 .b02-foto { grid-column: 8 / 13; grid-row: 3 / 5; align-self: start; margin: 0 0 0 var(--e-6); }
}

/* BLOCO 03 */
/* Como funciona: programa da noite sobre folha branca, aberto por um filete dourado (virada de página
   depois do papel do 02).
   Ordem: cabeça (sobrelinha, H2, abertura), as 3 perguntas como lista editorial com o numeral dourado
   na margem e filetes, a prova visual (a Eli conduzindo + vídeo mudo em loop com a pergunta 1 no telão)
   e o programa 19h a 22h como linha do tempo (fio vertical com pontos dourados, sem filetes horizontais,
   para não repetir a fórmula das perguntas): só 19h e 22h têm hora; as etapas do meio têm só o ponto.
   Celular: uma coluna. Ordem: perguntas, vídeo 4:3, título "Das 19h às 22h" e linha do jantar,
   foto da Eli 4:3 em sangria, roteiro e botão (vídeo e foto separados por texto).
   Desktop: cabeça em duas colunas (H2 1→8, abertura 9→13 na base do H2); perguntas em linhas;
   foto 1→8 sangrando à esquerda e vídeo 8→13 com a mesma altura; programa com título fixo 1→5
   e roteiro 6→13. */
#b03::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(100% - 2 * var(--gutter), var(--container)); height: var(--borda-filete); background: var(--dourado); }
#b03 .b03-grade { row-gap: 0; }
#b03 .sobrelinha::after { flex: 1 1 0; min-width: 1.5rem; max-width: 6rem; }
#b03 .sobrelinha .folio { color: var(--teal); }
#b03 h2 { max-width: 17ch; }
#b03 .b03-abre { max-width: 36ch; margin-bottom: 0; }
/* legendas um tom acima do padrão (itálico sobre branco: ~7:1) e 15px no celular */
#b03 figcaption { color: rgb(60 60 60 / 0.9); font-size: 0.9375rem; max-width: 40ch; }

/* as 3 perguntas */
#b03 .b03-perguntas { list-style: none; margin-top: var(--e-7); border-top: var(--borda-filete) solid var(--regua); }
#b03 .b03-perguntas > li { display: grid; grid-template-columns: 3.25rem 1fr; column-gap: var(--e-4); padding: var(--e-5) 0; border-bottom: var(--borda-filete) solid var(--regua); }
#b03 .b03-perguntas .numeral { grid-row: 1 / 3; font-size: 3.5rem; line-height: 0.82; padding-top: 0.125rem; }
#b03 .b03-perguntas h3 { color: var(--teal); margin-bottom: var(--e-3); text-wrap: balance; }
#b03 .b03-perguntas p { grid-column: 2; margin: 0; }

/* prova visual */
#b03 .b03-video { margin: 0; }
#b03 .b03-foto figcaption, #b03 .b03-video figcaption { margin-top: var(--e-2); }
#b03 .b03-foto img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 28% 50%; }
#b03 .b03-video-quadro { position: relative; aspect-ratio: 4 / 3; background: rgb(33 79 89 / 0.08); }
#b03 .b03-video video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; outline: 1px solid rgb(33 79 89 / 0.06); outline-offset: -1px; }
/* pausar/tocar: quadrado pequeno no canto de cima, sobre a parede, verde escuro translúcido */
#b03 .b03-video-botao { position: absolute; right: var(--e-2); top: var(--e-2); width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: var(--raio); background: rgb(33 79 89 / 0.5); color: var(--branco); cursor: pointer; display: grid; place-items: center; }
#b03 .b03-video-botao[hidden] { display: none; }
#b03 .b03-video-botao::before { content: ""; width: 0.8125rem; height: 0.8125rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 1h3v12H3zM8 1h3v12H8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 1h3v12H3zM8 1h3v12H8z'/%3E%3C/svg%3E") center / contain no-repeat; }
#b03 .b03-video-botao.parado::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 1l10 6-10 6z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 1l10 6-10 6z'/%3E%3C/svg%3E"); }
#b03 .b03-video-botao:hover { background: var(--noite); }
#b03 .b03-video-botao:focus-visible { outline: 2px solid var(--dourado); outline-offset: 2px; }

/* programa da noite */
#b03 .b03-programa-titulo { font-size: var(--t-titulo); line-height: var(--lh-titulo); font-weight: 400; margin-bottom: var(--e-4); }
#b03 .b03-jantar { font-family: var(--serif); font-size: var(--t-lead); line-height: 1.4; color: var(--tinta); max-width: 34ch; margin: 0; }

/* roteiro: linha do tempo. Coluna da hora (só 19h e 22h) + fio vertical com um ponto dourado por etapa */
#b03 .b03-roteiro { list-style: none; }
#b03 .b03-roteiro > li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); align-items: baseline; }
#b03 .b03-marco { padding-right: var(--e-4); text-align: right; }
#b03 .b03-hora { font-family: var(--serif); font-size: var(--t-subtitulo); line-height: 1; color: var(--teal); }
#b03 .b03-passo { position: relative; border-left: var(--borda-filete) solid rgb(33 79 89 / 0.32); padding: 0 0 var(--e-6) var(--e-5); }
#b03 .b03-passo::before { content: ""; position: absolute; left: -5px; top: 0.3rem; width: 9px; height: 9px; border-radius: 50%; background: var(--dourado); }
/* a última etapa fecha o fio no ponto das 22h */
#b03 .b03-roteiro > li:last-child .b03-passo { border-left-color: transparent; padding-bottom: 0; }
#b03 .b03-roteiro > li:last-child .b03-passo::after { content: ""; position: absolute; left: -1px; top: 0; width: var(--borda-filete); height: 0.5rem; background: rgb(33 79 89 / 0.32); }
#b03 .b03-etapa { font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); margin: 0 0 var(--e-2); }
#b03 .b03-passo p:not(.b03-etapa) { margin: 0; }
#b03 .cta { margin-top: var(--e-7); }
/* botão igual ao da capa (01): caixa normal, mesmo peso e tamanho */
#b03 .botao { text-transform: none; letter-spacing: 0.01em; font-size: 1.0625rem; }

@media (max-width: 899px) {
  /* celular: prova e programa se desfazem na grade para intercalar vídeo, texto e foto */
  #b03 .b03-prova, #b03 .b03-programa { display: contents; }
  #b03 .b03-cabeca { order: 1; }
  #b03 .b03-perguntas { order: 2; }
  #b03 .b03-video { order: 3; margin-top: var(--e-7); }
  #b03 .b03-programa-lado { order: 4; margin-top: var(--e-8); }
  #b03 .b03-foto { order: 5; margin-top: var(--e-6); }
  #b03 .b03-programa-corpo { order: 6; margin-top: var(--e-7); }
}

@media (min-width: 900px) {
  /* cabeça em revista: H2 à esquerda, abertura à direita apoiada na base do H2 */
  #b03 .b03-cabeca { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--coluna-gap); align-items: end; }
  #b03 .b03-cabeca .sobrelinha { grid-column: 1 / 13; }
  #b03 h2 { grid-column: 1 / 8; max-width: 16ch; margin-bottom: 0; }
  #b03 .b03-abre { grid-column: 9 / 13; max-width: none; padding-bottom: 0.375rem; }
  /* perguntas: lista editorial em linhas, numeral na margem, pergunta e resposta perto uma da outra */
  #b03 .b03-perguntas { grid-column: 1 / 13; margin-top: var(--e-8); }
  #b03 .b03-perguntas > li { grid-template-columns: 5rem minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--e-6); align-items: start; padding: var(--e-6) 0; }
  #b03 .b03-perguntas .numeral { grid-row: 1; font-size: 5.5rem; line-height: 0.8; padding-top: 0; }
  #b03 .b03-perguntas h3 { grid-column: 2; margin: 0; padding-top: var(--e-2); max-width: none; }
  #b03 .b03-perguntas p { grid-column: 3; padding-top: var(--e-2); max-width: 54ch; }
  /* prova: foto sangrando à esquerda e vídeo largo ao lado, mesmo topo e mesma altura de imagem */
  #b03 .b03-prova { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--coluna-gap); align-items: stretch; margin-top: var(--e-9); }
  #b03 .b03-foto { grid-column: 1 / 8; margin: 0 0 0 calc((min(100vw - 2 * var(--gutter), var(--container)) - 100vw) / 2); }
  #b03 .b03-foto img { aspect-ratio: 3 / 2; object-position: 50% 50%; }
  #b03 .b03-foto figcaption { margin-left: calc((100vw - min(100vw - 2 * var(--gutter), var(--container))) / 2); }
  #b03 .b03-video { grid-column: 8 / 13; display: flex; flex-direction: column; }
  #b03 .b03-video-quadro { flex: 1 1 auto; aspect-ratio: auto; }
  #b03 .b03-video video { object-position: 50% 55%; }
  #b03 .b03-foto figcaption, #b03 .b03-video figcaption { min-height: 2.8em; margin-top: var(--e-3); }
  #b03 .b03-video-botao { right: var(--e-3); top: var(--e-3); }
  /* programa: título e linha do jantar fixos à esquerda enquanto o roteiro passa à direita */
  #b03 .b03-programa { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--coluna-gap); margin-top: var(--e-9); }
  #b03 .b03-programa-lado { grid-column: 1 / 5; align-self: start; position: sticky; top: var(--e-7); }
  #b03 .b03-programa-titulo { max-width: 8ch; margin-bottom: var(--e-5); }
  #b03 .b03-jantar { font-size: 1.25rem; }
  #b03 .b03-programa-corpo { grid-column: 6 / 13; padding-top: var(--e-2); }
  #b03 .b03-roteiro > li { grid-template-columns: 6rem minmax(0, 1fr); }
  #b03 .b03-marco { padding-right: var(--e-5); }
  #b03 .b03-hora { font-size: 2.5rem; }
  #b03 .b03-passo { padding: 0 0 var(--e-7) var(--e-6); }
  #b03 .b03-passo::before { top: 0.3125rem; }
  #b03 .b03-passo p:not(.b03-etapa) { max-width: 52ch; }
  #b03 .b03-roteiro > li:last-child .b03-passo { padding-bottom: 0; }
  #b03 .botao { min-width: 20rem; min-height: 4rem; padding-inline: 2.5rem; font-size: 1.125rem; }
}

/* BLOCO 04 */
/* O que elas dizem: página de vozes sobre teal. Uma citação grande abrindo (troca profissional, SP 25/09)
   e as outras quatro falas da mesma família: aspa dourada do ::before, crédito em caixa-alta espaçada
   num dourado claro (5:1 sobre o teal), sem fio antes do crédito. Nenhuma fala fica colada a uma foto
   de outra pessoa ou de outro encontro: ao lado da foto da mesa só a fala do mesmo jantar.
   Celular (ordem do HTML): cabeça, foto da mesa 1:1 em sangria, citação grande, vídeo em sangria +
   transcrição, fala de comunidade, apresentação ao microfone, foto larga em sangria, registro (histórico,
   fala de Feira e, por último, a lista "Vagas esgotadas").
   Desktop: cabeça (H2 1→8, abertura 8→13); foto 1:1 1→6 sangrando à esquerda com a citação grande
   centrada em 7→13; vídeo 1→6 com a transcrição centrada 6→13; as duas falas curtas lado a lado;
   foto larga em faixa sangrando dos dois lados; registro (histórico + fala à esquerda, lista à direita). */
#b04 { --b04-ouro: #D9C08A; }
#b04 .b04-grade { row-gap: 0; }
#b04 .sobrelinha::after { flex: 1 1 0; min-width: 1.5rem; max-width: 6rem; }
#b04 h2 { max-width: 17ch; }
#b04 .b04-abre { max-width: 34ch; margin-bottom: 0; }

/* falas: uma família só */
#b04 .citacao { max-width: none; }
#b04 .citacao blockquote p { margin: 0; max-width: none; color: var(--branco); font-family: inherit; font-size: inherit; line-height: inherit; }
#b04 .citacao figcaption, #b04 .b04-credito { font-family: var(--sans); font-style: normal; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.45; color: var(--b04-ouro); margin: var(--e-4) 0 0; max-width: 40ch; }
#b04 .citacao figcaption::before { display: none; }
#b04 .citacao--menor blockquote { font-style: normal; }
#b04 .citacao--menor blockquote p { color: var(--sobre-escuro); }
#b04 .citacao--menor blockquote::before { font-size: 1.7em; height: 0.48em; }

/* legendas de foto: serifada itálica, 15px no celular e 16px no desktop */
#b04 figure.foto figcaption { margin-top: var(--e-2); font-size: 0.9375rem; max-width: 40ch; color: rgb(255 255 255 / 0.82); }

#b04 .b04-foto-alta { margin-top: var(--e-7); }
#b04 .b04-foto-alta img { aspect-ratio: 1 / 1; object-position: 50% 30%; }
#b04 .b04-principal { margin-top: var(--e-7); }
#b04 .b04-principal blockquote { max-width: 22ch; }

/* depoimento em vídeo: no celular em sangria, como as fotos */
#b04 .b04-depo { margin: var(--e-8) 0 0; }
#b04 .b04-video-quadro { position: relative; margin-inline: calc(-1 * var(--gutter)); aspect-ratio: 4 / 5; background: rgb(33 79 89 / 0.55); }
#b04 .b04-video-quadro video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#b04 .b04-poster, #b04 .b04-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#b04 .b04-play {
  position: absolute; left: var(--gutter); bottom: var(--e-4);
  display: inline-flex; align-items: center; gap: var(--e-3);
  min-height: 2.75rem; padding: 0 var(--e-4) 0 var(--e-3);
  background: var(--dourado); color: var(--noite); border: 0; border-radius: var(--raio); cursor: pointer;
  font-family: var(--sans); font-size: 0.875rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em;
}
#b04 .b04-play[hidden] { display: none; }
#b04 .b04-play-icone { width: 0.6875rem; height: 0.8125rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M1 1l10 6-10 6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M1 1l10 6-10 6z'/%3E%3C/svg%3E") center / contain no-repeat; }
#b04 .b04-play-dur { font-weight: 400; opacity: 0.8; }
#b04 .b04-play:hover { background: var(--branco); }
#b04 .b04-play:focus-visible { outline: 2px solid var(--branco); outline-offset: 3px; }
#b04 .b04-depo-texto { margin: var(--e-5) 0 0; max-width: none; font-style: normal; color: inherit; }
#b04 .b04-depo-texto blockquote { max-width: 34ch; }

#b04 .b04-c2 { margin: var(--e-8) 0 0; }
#b04 .b04-c3 { margin: var(--e-7) 0 0; padding-top: var(--e-6); border-top: var(--borda-filete) solid var(--regua-escura); }

#b04 .b04-foto-larga { margin-top: var(--e-8); }
#b04 .b04-foto-larga img { aspect-ratio: 3 / 2; object-position: 52% 30%; }

/* registro: histórico e fala de Feira; a lista dos esgotados fecha o bloco */
#b04 .b04-registro { margin-top: var(--e-8); padding-top: var(--e-6); border-top: var(--borda-filete) solid var(--dourado); }
#b04 .b04-registro-abre { font-family: var(--serif); font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--branco); max-width: 30ch; margin: 0; }
#b04 .b04-c4 { margin: var(--e-6) 0 0; }
#b04 .b04-registro-lista { margin-top: var(--e-7); }
#b04 .b04-registro-titulo { font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.4; color: var(--b04-ouro); margin: 0 0 var(--e-3); }
#b04 .b04-esgotados { list-style: none; border-top: var(--borda-filete) solid var(--regua-escura); }
#b04 .b04-esgotados > li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--e-3); row-gap: 0; padding: var(--e-3) 0; border-bottom: var(--borda-filete) solid var(--regua-escura); }
#b04 .b04-lugar { font-family: var(--serif); font-size: var(--t-subtitulo); line-height: 1.25; font-weight: 500; color: var(--branco); }
#b04 .b04-data { font-family: var(--serif); font-style: italic; font-size: 1.125rem; line-height: 1.25; color: var(--sobre-escuro); }
#b04 .b04-nota { flex-basis: 100%; font-family: var(--serif); font-style: italic; font-size: 1.0625rem; line-height: 1.4; color: var(--b04-ouro); }

@media (min-width: 900px) {
  #b04 .b04-cabeca { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--coluna-gap); align-items: end; }
  #b04 .b04-cabeca .sobrelinha { grid-column: 1 / 13; }
  #b04 h2 { grid-column: 1 / 8; max-width: 16ch; margin-bottom: 0; }
  #b04 .b04-abre { grid-column: 8 / 13; max-width: none; padding-bottom: 0.375rem; }
  #b04 figure.foto figcaption { font-size: 1rem; }
  #b04 .citacao figcaption, #b04 .b04-credito { font-size: 0.875rem; }

  /* foto da mesa à esquerda, citação grande centrada na altura dela */
  #b04 .b04-foto-alta { grid-column: 1 / 6; grid-row: 2; margin: var(--e-8) 0 0 calc((min(100vw - 2 * var(--gutter), var(--container)) - 100vw) / 2); }
  #b04 .b04-foto-alta figcaption { margin-left: calc((100vw - min(100vw - 2 * var(--gutter), var(--container))) / 2); }
  #b04 .b04-principal { grid-column: 7 / 13; grid-row: 2; align-self: center; margin: var(--e-8) 0 0; }
  #b04 .b04-principal blockquote { font-size: 2.5rem; line-height: 1.22; max-width: 20ch; }

  /* vídeo à esquerda, transcrição centrada na altura do vídeo */
  #b04 .b04-depo { grid-column: 1 / 13; grid-row: 3; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--coluna-gap); align-items: center; margin-top: var(--e-9); }
  #b04 .b04-video-quadro { grid-column: 1 / 6; margin-inline: 0; }
  #b04 .b04-play { left: var(--e-4); bottom: var(--e-4); }
  #b04 .b04-depo-texto { grid-column: 7 / 13; margin: 0; }
  #b04 .b04-depo-texto blockquote { font-size: 1.75rem; line-height: 1.38; max-width: 26ch; }

  /* as duas falas curtas lado a lado, sem foto ao lado */
  #b04 .b04-c2 { grid-column: 1 / 13; grid-row: 4; align-self: start; margin: var(--e-9) 0 0; padding-top: var(--e-6); border-top: var(--borda-filete) solid var(--regua-escura); }
  #b04 .b04-c3 { grid-column: 8 / 13; grid-row: 4; align-self: start; margin: var(--e-9) 0 0; padding-top: var(--e-6); }
  #b04 .b04-c2 blockquote { max-width: 28ch; }

  /* foto larga em faixa, sangrando dos dois lados */
  #b04 .b04-foto-larga { grid-column: 1 / 13; grid-row: 5; margin: var(--e-9) calc((min(100vw - 2 * var(--gutter), var(--container)) - 100vw) / 2) 0; }
  #b04 .b04-foto-larga img { aspect-ratio: 21 / 8; object-position: 50% 38%; }
  #b04 .b04-foto-larga figcaption { margin-left: calc((100vw - min(100vw - 2 * var(--gutter), var(--container))) / 2); }

  /* registro: histórico e fala à esquerda, lista à direita */
  #b04 .b04-registro { grid-column: 1 / 13; grid-row: 6; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--coluna-gap); margin-top: var(--e-9); padding-top: var(--e-7); }
  #b04 .b04-registro-lado { grid-column: 1 / 7; }
  #b04 .b04-registro-abre { max-width: 26ch; }
  #b04 .b04-c4 { margin-top: var(--e-7); }
  #b04 .b04-c4 blockquote { max-width: 26ch; }
  #b04 .b04-registro-lista { grid-column: 8 / 13; margin-top: 0; }
  #b04 .b04-esgotados > li { display: grid; grid-template-columns: 9.5rem 1fr; }
  #b04 .b04-nota { grid-column: 2; }
  #b04 .b04-lugar { font-size: 1.5rem; }
}

/* BLOCO 05 */
/* Quem senta à mesa: índice tipográfico sobre papel. Três perfis curtos com filetes (começo de cada
   item em teal para escanear, resto em tinta), uma linha de pertencimento que liga ao bloco 02 e a
   prova com ofícios reais. O retrato de UMA participante de Feira e o depoimento dela ficam juntos.
   Celular (flex, por order): cabeça, retrato 4:5 em sangria, lista, pertencimento, prova, citação.
   Desktop: H2 largo e lead abaixo dele começando na coluna 6 (mesma linha vertical da lista);
   embaixo, retrato 4:5 sangrando à esquerda (1→6) com a citação logo abaixo, e a lista 6→13.
   Só um ornamento dourado antes da fala: as aspas do componente. */
#b05 .b05-grade { display: flex; flex-direction: column; row-gap: 0; }
#b05 .b05-cabeca { order: 1; }
#b05 .b05-lado { display: contents; }
#b05 .b05-foto { order: 2; }
#b05 .b05-corpo { order: 3; }
#b05 .b05-fecho { order: 4; }

#b05 .sobrelinha::after { flex: 1 1 0; min-width: 1.5rem; max-width: 6rem; }
#b05 .sobrelinha .folio { color: var(--teal); }
#b05 h2 { max-width: 17ch; }
#b05 .b05-abre { max-width: 34ch; margin-bottom: 0; }

#b05 .b05-foto { margin-top: var(--e-7); }
#b05 .b05-foto img { aspect-ratio: 4 / 5; object-position: 50% 40%; }
#b05 .b05-foto figcaption { margin-top: var(--e-3); color: #5E5E5E; font-size: max(var(--t-legenda), 0.875rem); }

#b05 .b05-corpo { margin-top: var(--e-6); }
#b05 .b05-lista > li {
  font-family: var(--serif); font-size: 1.125rem; line-height: 1.35; color: var(--tinta);
  padding: var(--e-4) 0; text-wrap: pretty;
}
#b05 .b05-chave { color: var(--teal); font-weight: 500; }
#b05 .b05-junto {
  margin: var(--e-6) 0 0; max-width: 30ch;
  font-family: var(--serif); font-style: italic; font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--teal); text-wrap: pretty;
}
#b05 .b05-prova { margin-top: var(--e-5); max-width: 34rem; color: var(--tinta); }

#b05 .b05-fecho { margin-top: var(--e-7); max-width: 34rem; }
#b05 .b05-fecho blockquote { color: var(--teal); }
#b05 .b05-fecho blockquote p { margin: 0; max-width: none; font: inherit; color: inherit; }
#b05 .b05-fecho figcaption { display: flex; align-items: baseline; gap: var(--e-3); color: #5E5E5E; line-height: 1.45; }
#b05 .b05-fecho figcaption::before { flex: none; margin: 0; transform: translateY(-0.25em); }

@media (min-width: 900px) {
  #b05.secao { padding-bottom: var(--e-9); }
  /* cabeça "aberta" na grade: H2 largo; o lead desce para a coluna 6 e abre a coluna da lista,
     na mesma altura do topo do retrato, para as duas colunas terminarem juntas */
  #b05 .b05-grade { display: grid; row-gap: 0; }
  #b05 .b05-cabeca { display: contents; }
  #b05 .sobrelinha { grid-column: 1 / 13; grid-row: 1; }
  #b05 h2 { grid-column: 1 / 11; grid-row: 2; max-width: 22ch; margin-bottom: var(--e-8); }
  #b05 .b05-abre { grid-column: 6 / 13; grid-row: 3; align-self: start; font-size: 1.375rem; max-width: 34ch; padding-left: var(--e-5); margin: 0; }

  #b05 .b05-lado { display: block; grid-column: 1 / 6; grid-row: 3 / span 2; align-self: start; }
  #b05 .b05-foto { margin: 0 0 0 calc((min(100vw - 2 * var(--gutter), var(--container)) - 100vw) / 2); }
  #b05 .b05-foto img { aspect-ratio: 1 / 1; object-position: 50% 30%; }
  #b05 .b05-foto figcaption { margin-left: calc((100vw - min(100vw - 2 * var(--gutter), var(--container))) / 2); font-size: 1rem; }
  #b05 .b05-fecho { margin-top: var(--e-7); }
  #b05 .b05-fecho blockquote { font-size: 1.625rem; line-height: 1.3; }

  #b05 .b05-corpo { grid-column: 6 / 13; grid-row: 4; align-self: start; padding-left: var(--e-5); margin-top: var(--e-7); }
  #b05 .b05-lista { max-width: 36rem; }
  #b05 .b05-lista > li { font-size: 1.5rem; line-height: 1.32; padding: var(--e-5) 0; }
  #b05 .b05-junto { margin-top: var(--e-7); font-size: 1.625rem; max-width: 28ch; }
}


/* BLOCO 06 */
/* A noite no Rio: lugar + cardápio sobre verde escuro (rodada 4).
   Ordem: H2 vende o lugar (salão fechado só para as 25, Botafogo); o Salão Guanabara em cor quente
   (protagonista); a abertura em serifa traz o que o H2 não diz (sábado, horário, telão e microfones);
   a casa: fachada com a entrada e a rampa, nome, endereço, dica do aplicativo e "Como chegar";
   o incluso como cardápio de convite dentro da moldura (único momento centralizado), R$ 339 em
   numeral dourado depois dos pratos, a linha do que o valor cobre (com os 13% de serviço) e o botão;
   por fim o "à parte", fora da moldura, alinhado à esquerda com filetes dourados curtos.
   Rótulos: só "O que está incluso" em caixa-alta; "Onde fica" e "por pessoa" em serifa itálica.
   Celular: uma coluna; salão 5:4 e fachada 3:2 em sangria; cardápio; à parte por último.
   Desktop: H2 1→12; salão 16:9 1→13 (no máximo 1200px); coluna 1→6 com abertura, casa e à parte;
   cardápio 7→13 começando na mesma linha da abertura. Nada sangra fora do container. */
#b06 .b06-grade { row-gap: 0; }
#b06 .sobrelinha::after { flex: 1 1 0; min-width: 1.5rem; max-width: 6rem; }
#b06 h2 { max-width: 17ch; }
#b06 h2 em { font-style: italic; }
#b06 figcaption { color: rgb(255 255 255 / 0.82); font-size: 0.9375rem; margin-top: var(--e-2); }

#b06 .b06-salao { margin-top: var(--e-6); }
#b06 .b06-salao img { aspect-ratio: 5 / 4; object-position: 50% 100%; }

#b06 .b06-abre { margin: var(--e-6) 0 0; max-width: 34ch; }

/* lugar */
#b06 .b06-lugar { margin-top: var(--e-7); }
#b06 .b06-fachada img { aspect-ratio: 3 / 2; object-position: 50% 50%; }
#b06 .b06-rotulo { font-family: var(--serif); font-style: italic; font-size: 1.125rem; line-height: 1.3; color: var(--dourado); margin: var(--e-5) 0 var(--e-1); }
#b06 .b06-casa { font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; color: var(--branco); margin: 0; }
#b06 address { font-style: normal; font-family: var(--serif); font-size: 1.0625rem; line-height: 1.45; color: var(--sobre-escuro); margin: var(--e-3) 0 0; }
#b06 address span { display: block; }
#b06 .b06-chegar { font-size: 0.9375rem; line-height: 1.55; color: var(--sobre-escuro-suave); max-width: 40ch; margin: var(--e-4) 0 0; }
#b06 .b06-mapa { display: inline-flex; align-items: center; gap: var(--e-2); font-size: 0.9375rem; margin-top: var(--e-4); }
#b06 .b06-mapa svg { flex: none; color: var(--dourado); }

/* cardápio de convite */
#b06 .b06-cardapio { margin-top: var(--e-8); text-align: center; }
#b06 .b06-cardapio-titulo { font-family: var(--sans); font-size: var(--t-sobrelinha); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.4; color: var(--dourado); margin: 0; max-width: none; }
#b06 .b06-pratos { list-style: none; margin-top: var(--e-6); }
#b06 .b06-pratos > li { display: flex; flex-direction: column; align-items: center; }
#b06 .b06-pratos > li + li { margin-top: var(--e-5); }
#b06 .b06-prato { font-family: var(--serif); font-size: 1.375rem; line-height: 1.25; font-weight: 400; color: var(--branco); }
#b06 .b06-detalhe { font-family: var(--serif); font-style: italic; font-size: 1.0625rem; line-height: 1.4; color: rgb(255 255 255 / 0.82); margin-top: var(--e-1); max-width: 30ch; text-wrap: balance; }
#b06 .b06-preco { display: flex; flex-direction: column; align-items: center; margin: var(--e-6) auto 0; padding-top: var(--e-6); border-top: var(--borda-filete) solid var(--regua-escura); max-width: none; }
#b06 .b06-valor { font-size: var(--t-numeral); line-height: 0.95; color: var(--dourado); letter-spacing: -0.02em; white-space: nowrap; }
#b06 .b06-por { font-family: var(--serif); font-style: italic; font-size: 1.125rem; line-height: 1.3; color: var(--sobre-escuro); margin-top: var(--e-2); }
#b06 .b06-cobre { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.45; color: var(--branco); max-width: 30ch; margin: var(--e-4) auto 0; text-wrap: balance; }

#b06 .cta { margin-top: var(--e-6); padding-top: var(--e-6); border-top: var(--borda-filete) solid var(--regua-escura); }
#b06 .botao { text-transform: none; letter-spacing: 0.01em; font-size: 1.0625rem; width: 100%; }
#b06 .botao-nota { margin-inline: auto; color: rgb(255 255 255 / 0.82); max-width: 34ch; }

/* à parte: fora da moldura, à esquerda, cada item com filete dourado curto (desenhado em CSS) */
#b06 .b06-aparte { margin-top: var(--e-7); }
#b06 .b06-conta { font-family: var(--serif); font-size: 1.25rem; line-height: var(--lh-lead); color: var(--branco); max-width: 30ch; margin: 0; }
#b06 .b06-aparte-lista { list-style: none; margin-top: var(--e-4); border-top: var(--borda-filete) solid var(--regua-escura); }
#b06 .b06-aparte-lista li { position: relative; padding: var(--e-3) 0 var(--e-3) var(--e-6); border-bottom: var(--borda-filete) solid var(--regua-escura); font-family: var(--serif); font-size: 1.0625rem; line-height: 1.45; color: var(--sobre-escuro); text-wrap: pretty; }
#b06 .b06-aparte-lista li::before { content: ""; position: absolute; left: 0; top: calc(var(--e-3) + 0.72em); width: var(--e-4); height: var(--borda-filete); background: var(--dourado); }

@media (max-width: 899px) {
  #b06 .b06-salao figcaption, #b06 .b06-fachada figcaption { margin-inline: var(--gutter); }
}

@media (min-width: 900px) {
  #b06 .b06-grade { grid-template-rows: auto auto auto auto auto; align-items: start; }
  #b06 .b06-cabeca { grid-column: 1 / 12; grid-row: 1; }
  #b06 h2 { max-width: 24ch; margin-bottom: var(--e-7); }
  #b06 .b06-salao { grid-column: 1 / 13; grid-row: 2; margin: 0; }
  #b06 .b06-salao img { aspect-ratio: 16 / 9; object-position: 50% 85%; }
  #b06 figcaption { font-size: 1.0625rem; margin-top: var(--e-3); }

  #b06 .b06-abre { grid-column: 1 / 6; grid-row: 3; margin: var(--e-8) 0 0; max-width: none; }
  #b06 .b06-lugar { grid-column: 1 / 6; grid-row: 4; margin-top: var(--e-7); }
  #b06 .b06-fachada img { aspect-ratio: 3 / 2; object-position: 30% 60%; }
  #b06 .b06-rotulo { margin-top: var(--e-6); }
  #b06 .b06-casa { font-size: 1.625rem; }
  #b06 address { font-size: 1.125rem; }
  #b06 .b06-aparte { grid-column: 1 / 6; grid-row: 5; margin-top: var(--e-7); }
  #b06 .b06-conta { font-size: 1.375rem; max-width: none; }
  #b06 .b06-aparte-lista li { font-size: 1.125rem; }

  #b06 .b06-cardapio { grid-column: 7 / 13; grid-row: 3 / 6; margin-top: var(--e-8); }
  #b06 .b06-prato { font-size: 1.5rem; }
  #b06 .b06-detalhe { font-size: 1.125rem; }
  #b06 .b06-por { font-size: 1.25rem; }
  #b06 .b06-cobre { font-size: 1.125rem; max-width: 34ch; }
  #b06 .botao { width: auto; min-width: 20rem; min-height: 4rem; padding-inline: 2.5rem; font-size: 1.125rem; }
}

/* celular: bloco mais curto (respiros menores, pratos mais juntos) */
@media (max-width: 899px) {
  #b06 .b06-salao img { aspect-ratio: 4 / 3; }
  #b06 .b06-lugar { margin-top: var(--e-6); }
  #b06 .b06-cardapio { margin-top: var(--e-7); }
  #b06 .b06-pratos { margin-top: var(--e-5); }
  #b06 .b06-pratos > li + li { margin-top: var(--e-4); }
  #b06 .b06-preco { margin-top: var(--e-5); padding-top: var(--e-5); }
  #b06 .cta { margin-top: var(--e-5); padding-top: var(--e-5); }
  #b06 .b06-aparte { margin-top: var(--e-6); }
}

/* BLOCO 07 */
/* Quem recebe você: perfil de revista sobre folha branca, aberto por filete dourado (como o 03).
   Ordem: H2, retrato 4:5 da Eli, abertura serifada (formação, empresa, fundação do Clube),
   dois parágrafos (onde ela conduziu; o WhatsApp é com ela), a foto dela conversando e,
   por fim, a fala curta e uma frase literal dela.
   Celular: uma coluna. Retrato 4:5 em sangria logo abaixo do H2 (ela olha para a leitora);
   a foto da conversa (1:1, fechada no rosto dela) separa o perfil da fala curta.
   Desktop: retrato 1→6 com cabeça e perfil 7→13 (texto e filete na mesma medida, 32rem);
   embaixo o espelho, texto 1→6 e foto 7→13, alinhados pelo topo. Nada sangra no desktop. */
#b07::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(100% - 2 * var(--gutter), var(--container)); height: var(--borda-filete); background: var(--dourado); }
#b07 .b07-grade { row-gap: 0; }
#b07 .sobrelinha::after { flex: 1 1 0; min-width: 1.5rem; max-width: 6rem; }
#b07 .sobrelinha .folio { color: var(--teal); }
#b07 h2 { max-width: 16ch; margin-bottom: 0; }
#b07 h2 em { color: var(--teal); }
#b07 figcaption { color: rgb(60 60 60 / 0.9); font-size: 0.9375rem; margin-top: var(--e-2); max-width: 40ch; }

#b07 .b07-retrato { margin-top: var(--e-6); }
#b07 .b07-retrato img { aspect-ratio: 4 / 5; object-position: 50% 30%; }

#b07 .b07-perfil { margin-top: var(--e-6); }
#b07 .b07-abre { max-width: 34ch; margin: 0 0 var(--e-5); padding-bottom: var(--e-5); border-bottom: var(--borda-filete) solid var(--regua); text-wrap: pretty; }
#b07 .b07-texto { font-family: var(--serif); font-size: 1.125rem; line-height: 1.5; color: var(--tinta); max-width: 34ch; margin: 0; text-wrap: pretty; }
#b07 .b07-texto + .b07-texto { margin-top: var(--e-4); }

#b07 .b07-chegada { margin-top: var(--e-7); }
#b07 .b07-chegada img { aspect-ratio: 1 / 1; object-position: 52% 25%; }

#b07 .b07-noite { margin-top: var(--e-6); }
#b07 .b07-citacao { margin-top: var(--e-6); padding-top: var(--e-6); border-top: var(--borda-filete) solid var(--regua); }
#b07 .b07-citacao blockquote { position: relative; color: var(--teal); text-wrap: balance; }
/* aspa pendurada na margem, presa à primeira linha */
#b07 .b07-citacao blockquote::before { position: absolute; left: 0; top: 0.02em; transform: translateX(calc(-100% - 0.06em)); height: auto; margin: 0; font-size: 1.6em; line-height: 1; }
#b07 .b07-citacao blockquote p { margin: 0; max-width: none; font: inherit; color: inherit; text-wrap: balance; }
#b07 .b07-citacao figcaption { display: flex; align-items: baseline; gap: var(--e-3); font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 0.9375rem; letter-spacing: 0; text-transform: none; color: #5E5E5E; line-height: 1.4; max-width: none; text-wrap: balance; }
#b07 .b07-citacao figcaption::before { flex: none; margin: 0; transform: translateY(-0.25em); }

@media (max-width: 899px) {
  #b07 .b07-cabeca { order: 1; }
  #b07 .b07-retrato { order: 2; }
  #b07 .b07-perfil { order: 3; }
  #b07 .b07-chegada { order: 4; }
  #b07 .b07-noite { order: 5; }
}

@media (min-width: 900px) {
  #b07 .b07-grade { grid-template-rows: auto 1fr auto; align-items: start; }
  #b07 .b07-retrato { grid-column: 1 / 6; grid-row: 1 / 3; margin: 0; }
  #b07 .b07-cabeca { grid-column: 7 / 13; grid-row: 1; padding-top: var(--e-2); }
  #b07 h2 { max-width: 14ch; }
  #b07 .b07-perfil { grid-column: 7 / 13; grid-row: 2; margin-top: var(--e-6); max-width: 32rem; }
  #b07 .b07-abre, #b07 .b07-perfil .b07-texto { max-width: none; }
  #b07 .b07-texto { font-size: 1.1875rem; }
  #b07 figcaption { font-size: 1rem; margin-top: var(--e-3); }
  #b07 .b07-chegada figcaption { max-width: 50ch; }

  #b07 .b07-noite { grid-column: 1 / 6; grid-row: 3; align-self: start; margin-top: var(--e-7); max-width: 26rem; }
  #b07 .b07-fala { max-width: none; margin-top: -0.2em; }
  #b07 .b07-citacao blockquote { font-size: 1.625rem; line-height: 1.3; }
  #b07 .b07-citacao figcaption { font-size: 1rem; }
  #b07 .b07-chegada { grid-column: 7 / 13; grid-row: 3; align-self: start; margin: var(--e-7) 0 0; }
  #b07 .b07-chegada img { aspect-ratio: 3 / 2; object-position: 45% 30%; }
}

/* BLOCO 08 */
/* Perguntas: perguntas frequentes impressas sobre papel, abertas por filete dourado (como 03 e 07).
   Cada pergunta é um <details> separado por filete fino, sem caixa; pergunta em serifa, sinal de mais
   desenhado com dois filetes que vira menos ao abrir. As duas frases literais de participante entram
   como citação menor dentro da resposta do freio que elas respondem (tímida; foto).
   A foto (I0423, riso à mesa, SP 25/09) é a pausa visual e não fica colada a nenhuma fala.
   Celular: cabeça, foto pequena 1:1 com a legenda ao lado, lista.
   Desktop: coluna 1→5 com cabeça, link do WhatsApp e foto 1:1; lista 6→13. */
#b08::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(100% - 2 * var(--gutter), var(--container)); height: var(--borda-filete); background: var(--dourado); }
#b08 .b08-grade { row-gap: 0; }
#b08 .sobrelinha::after { flex: 1 1 0; min-width: 1.5rem; max-width: 6rem; }
#b08 .sobrelinha .folio { color: var(--teal); }
#b08 h2 { max-width: 16ch; }
#b08 .b08-abre { font-family: var(--serif); font-size: 1.125rem; line-height: 1.5; color: var(--tinta); max-width: 34ch; margin: 0; }
#b08 .b08-zap { margin-top: var(--e-4); font-size: 0.9375rem; }

/* foto: no celular, quadrado pequeno com a legenda ao lado */
#b08 .b08-foto { display: grid; grid-template-columns: 9rem minmax(0, 1fr); column-gap: var(--e-4); align-items: end; margin-top: var(--e-6); }
#b08 .b08-foto img { aspect-ratio: 1 / 1; object-position: 50% 40%; }
#b08 .b08-foto figcaption { margin: 0; font-size: 0.9375rem; color: rgb(60 60 60 / 0.9); max-width: 24ch; }

/* lista de perguntas */
#b08 .b08-lista { margin-top: var(--e-7); border-top: var(--borda-filete) solid var(--regua); }
#b08 .b08-item { border-bottom: var(--borda-filete) solid var(--regua); }
#b08 summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 1.25rem; column-gap: var(--e-4); align-items: start; padding: var(--e-5) 0; cursor: pointer; }
#b08 summary::-webkit-details-marker { display: none; }
#b08 .b08-pergunta { font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; font-weight: 400; color: var(--teal); text-wrap: pretty; }
#b08 summary:hover .b08-pergunta { text-decoration: underline; text-decoration-color: var(--dourado); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
#b08 summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
/* sinal de mais: dois filetes; o vertical gira e some ao abrir */
#b08 .b08-sinal { position: relative; width: 1.25rem; height: 1.25rem; margin-top: 0.25rem; }
#b08 .b08-sinal { transition: transform 0.2s ease; }
#b08 .b08-sinal::before, #b08 .b08-sinal::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: var(--teal); }
#b08 .b08-sinal::after { transform: rotate(90deg); }
/* ao abrir, o mais gira 45 graus e vira um x (nunca um traço sozinho, que leria como travessão) */
#b08 details[open] .b08-sinal { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { #b08 .b08-sinal { transition: none; } }

#b08 .b08-resposta { padding: 0 var(--e-6) var(--e-5) 0; }
#b08 .b08-resposta p { max-width: 54ch; }
#b08 .b08-resposta .link { margin-top: var(--e-1); }
#b08 .b08-citacao { margin: var(--e-5) 0 var(--e-2); padding-left: var(--e-5); border-left: var(--borda-filete) solid var(--dourado); max-width: 30ch; }
#b08 .b08-citacao blockquote { color: var(--teal); }
#b08 .b08-citacao blockquote::before { display: none; }
#b08 .b08-citacao blockquote p { margin: 0; max-width: none; font: inherit; color: inherit; }
#b08 .b08-citacao figcaption { margin-top: var(--e-2); color: #5E5E5E; }
#b08 .b08-citacao figcaption::before { display: none; }

@media (min-width: 900px) {
  #b08 .b08-grade { align-items: start; }
  #b08 .b08-lado { grid-column: 1 / 5; grid-row: 1; position: sticky; top: var(--e-7); }
  #b08 h2 { font-size: 2.75rem; line-height: 1.1; max-width: none; }
  #b08 .b08-foto { display: block; margin-top: var(--e-7); max-width: 21.25rem; }
  #b08 .b08-foto figcaption { margin-top: var(--e-3); font-size: 1rem; max-width: 30ch; }
  #b08 .b08-lista { grid-column: 6 / 13; grid-row: 1; margin-top: 0; }
  #b08 summary { padding: var(--e-5) 0; column-gap: var(--e-6); }
  #b08 .b08-pergunta { font-size: 1.375rem; }
  #b08 .b08-resposta { padding: 0 var(--e-8) var(--e-6) 0; }
}

/* BLOCO 09 */
#b09 { padding-top: 0; }
#b09 .b09-faixa { margin: 0 0 var(--e-8); }
#b09 .b09-faixa img { display: block; width: 100%; height: clamp(15rem, 42vw, 34rem); object-fit: cover; object-position: center 35%; }
#b09 .b09-faixa figcaption { margin-top: var(--e-3); }
#b09 .b09-cartao { max-width: 40rem; margin-inline: auto; text-align: center; }
#b09 .sobrelinha { justify-content: center; }
#b09 .sobrelinha::after { display: none; }
#b09 h2 { font-size: var(--t-titulo); line-height: var(--lh-titulo); margin: var(--e-4) auto 0; max-width: 18ch; text-wrap: balance; }
#b09 .b09-quando { font-family: var(--serif); font-style: italic; font-size: var(--t-lead); line-height: var(--lh-lead); margin: var(--e-5) auto 0; max-width: 34ch; text-wrap: balance; }
#b09 .b09-passos { margin: var(--e-4) auto 0; max-width: 42ch; }
#b09 .cta { display: flex; flex-direction: column; align-items: center; }
#b09 .botao-nota { margin-inline: auto; }
#b09 .b09-rodape { margin-top: var(--e-8); padding-top: var(--e-5); border-top: var(--borda-filete) solid var(--regua-escura); text-align: center; font-size: var(--t-legenda); }
#b09 .b09-rodape img { display: block; margin: 0 auto var(--e-3); opacity: 0.9; }
#b09 .b09-rodape p { margin: 0; color: var(--sobre-escuro-suave); }
#b09 .b09-rodape p + p { margin-top: var(--e-2); }
@media (max-width: 599px) { #b09 .botao { width: 100%; } }
#b09 .botao { text-transform: none; letter-spacing: 0.01em; font-size: 1.0625rem; width: 100%; }
#b09 .b09-faixa img { object-position: center 15%; }
#b09 .b09-faixa figcaption { text-align: left; }
#b09 .b09-rodape p { margin-inline: auto; max-width: none; }
@media (min-width: 900px) {
  #b09 .botao { width: auto; min-width: 20rem; min-height: 4rem; padding-inline: 2.5rem; font-size: 1.125rem; }
}

/* ===================== MARGENS LATERAIS (19/10, pedido do Igor) =====================
   Nada encosta nas bordas da tela: as fotos em "sangria" e a faixa da parte 9 passam a respeitar a margem
   lateral (--gutter) no celular e a largura do container no computador. Fica por último para valer sobre
   as regras de cada bloco. */
.foto.sangria-celular, .sangria-celular { margin-inline: 0; }
.sangria-celular figcaption { margin-inline: 0; }
#b02 .b02-foto { margin-inline: 0; }
#b04 .b04-video-quadro { margin-inline: 0; }
#b04 .b04-video-quadro .b04-play { left: var(--e-4); }
#b06 .b06-salao figcaption, #b06 .b06-fachada figcaption { margin-inline: 0; }
#b09 .b09-faixa { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
#b09 .b09-faixa figcaption { padding-inline: 0; width: auto; margin-inline: 0; }
@media (min-width: 900px) {
  #b01 .b01-foto { margin-right: 0; }
  #b03 .b03-foto { margin: 0; }
  #b03 .b03-foto figcaption { margin-left: 0; }
  #b04 .b04-foto-alta { margin: var(--e-8) 0 0; }
  #b04 .b04-foto-alta figcaption { margin-left: 0; }
  #b04 .b04-foto-larga { margin: var(--e-9) 0 0; }
  #b04 .b04-foto-larga figcaption { margin-left: 0; }
  #b05 .b05-foto { margin: 0; }
  #b05 .b05-foto figcaption { margin-left: 0; }
}