/* PSR User Meeting 2027 — site layer on top of organic.css.
   Layout is carried inline in the HTML (mirroring the design source);
   this file holds the brand overrides plus every hover / open / scrolled
   state that inline styles cannot express. */

:root {
  /* A Plus Jakarta Sans e a fonte de titulo do site inteiro; a Bricolage saiu.
     As duas variaveis continuam separadas para os pesos poderem andar sozinhos. */
  /* titulos principais (h1 e h2) */
  --font-display: "Plus Jakarta Sans", "Figtree", system-ui, sans-serif;
  --font-display-weight: 600;
  /* demais titulos, botoes, rotulos */
  --font-heading: "Plus Jakarta Sans", "Figtree", system-ui, sans-serif;
  --font-heading-weight: 600;
}
/* o peso dos titulos principais vem da variavel propria */
h1, h2 { font-weight: var(--font-display-weight); }
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.025em; }
body { margin: 0; background: #09231b; }
a { color: #8c491a; }
a:hover { color: #a9552a; }
.on-blue a { color: #e6dcc0; }
.on-blue a:hover { color: #ffffff; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-60px); } }

/* — header: fixed on the home (.overlay), scrolls with the page everywhere else. It used to say sticky,
     but the page wrapper's overflow-x:hidden made it a scroll container and the sticky never held; with
     overflow-x:clip (see .vr-papel) it would start holding, and on a phone the two-row header would
     cover 135px of the screen. Relative keeps what the pages always did. — */
.site-header {
  position: relative; left: 0; right: 0; top: 0; z-index: 40; color: #e6dcc0;
  transition: background 240ms ease, border-color 240ms ease;
  background: rgba(9, 35, 27, 0.94);
  border-bottom: 1px solid rgba(230, 220, 192, 0.14);
  backdrop-filter: blur(10px);
}
.site-header.overlay {
  position: fixed;
  background: transparent; border-bottom-color: transparent; backdrop-filter: none;
}
.site-header.overlay.scrolled {
  background: rgba(9, 35, 27, 0.94);
  border-bottom-color: rgba(230, 220, 192, 0.14);
  backdrop-filter: blur(10px);
}
/* — paginas internas (hero .vr-bloco): o menu sobrepoe o hero com FUNDO transparente
     (so a logo e os links aparecem, sem a barra), e revela o fundo solido ao rolar.
     Mesmo comportamento do .overlay da home. Fixed, nao sticky, pelo mesmo motivo do
     .overlay (o overflow-x:clip da .vr-papel quebraria o sticky). O site.js poe .scrolled.
     O hero ganha padding-top = altura do header (--header-h, medido no site.js) para o
     titulo nao ficar atras do menu. — */
.site-header.reveal {
  position: fixed;
  background: transparent; border-bottom-color: transparent; backdrop-filter: none;
}
.site-header.reveal.scrolled {
  background: rgba(9, 35, 27, 0.94);
  border-bottom-color: rgba(230, 220, 192, 0.14);
  backdrop-filter: blur(10px);
}
.site-header.reveal ~ main > .vr-bloco:first-child {
  padding-top: calc(var(--header-h, 64px) + clamp(22px, 3vw, 40px)) !important;
}
.nav-link {
  text-decoration: none; color: #e6dcc0; opacity: 0.82; padding: 4px 0;
  border-bottom: 2px solid transparent; white-space: nowrap;
  transition: opacity 160ms ease, border-color 160ms ease;
}
.nav-link:hover { opacity: 1; border-bottom-color: #c46a3a; color: #e6dcc0; }
.nav-link.active { opacity: 1; border-bottom-color: #c46a3a; }
.prev-toggle {
  cursor: pointer; font: inherit; font-size: 13px; background: transparent; border: 0;
  color: #e6dcc0; opacity: 0.82; padding: 4px 0; display: flex; align-items: center;
  gap: 6px; white-space: nowrap; border-bottom: 2px solid transparent;
}
.prev-toggle:hover { opacity: 1; border-bottom-color: #c46a3a; }
.prev-dropdown {
  position: absolute; top: calc(100% + 12px); right: 0; min-width: 240px;
  background: #071b14; border: 1px solid rgba(230, 220, 192, 0.16);
  border-radius: var(--radius-lg); padding: 8px; box-shadow: var(--shadow-lg);
  z-index: 60; display: flex; flex-direction: column;
}
.prev-dropdown[hidden] { display: none; }
.prev-dropdown a {
  text-decoration: none; color: #e6dcc0; padding: 10px 12px;
  border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 2px;
}
.prev-dropdown a:hover { background: rgba(196, 106, 58, 0.18); color: #e6dcc0; }
.prev-dropdown .pe-name { font-family: var(--font-heading); font-size: 14px; }
.prev-dropdown .pe-place { font-size: 11px; color: #aebf92; }

/* — image placeholders (photos still to be dropped in) — */
.ph-slot {
  width: 100%; height: 100%; min-height: 100%; display: flex; align-items: center;
  justify-content: center; text-align: center; padding: 14px;
  background:
    repeating-linear-gradient(45deg, rgba(32, 30, 29, 0.045) 0 10px, transparent 10px 20px),
    #dcd3c4;
  color: #82796a; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
}
.on-blue .ph-slot, .ph-slot.ph-dark {
  background:
    repeating-linear-gradient(45deg, rgba(230, 220, 192, 0.05) 0 10px, transparent 10px 20px),
    #0d3628;
  color: rgba(230, 220, 192, 0.55);
}

/* — people medallions — */
.person-overlay {
  position: absolute; inset: 6.25%; border-radius: 50%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 4%;
  background-image: radial-gradient(circle at 32% 26%, #8fa073, #56633f 60%, #3d472b);
  opacity: 0; transition: opacity 200ms ease; cursor: default;
}
.person:hover .person-overlay, .person:focus-within .person-overlay { opacity: 1; }
/* Tudo no medalhao e proporcional ao circulo: aro e respiro em %, e o texto
   encolhe com a tela na mesma conta dos circulos (cheio a partir de 1300px,
   0,556 disso no minimo). Se o nome cabe no tamanho cheio, cabe em qualquer
   largura. Circulo novo: o minimo para o nome e o cargo e medido, nao chutado. */
.person-name { font-size: clamp(5.56px, 0.769vw, 10px); }
.person-role { font-size: clamp(4.45px, 0.615vw, 8px); margin-top: 0.45em; }
/* Em tela de computador (900px ou mais) os circulos nao descem de 90% do
   tamanho cheio, e o texto para em 9px / 7,2px: o mesmo fator 0,9, entao
   continua cabendo. Sem o piso, em 1024 o nome ficava com 7,9px.
   Por que 900: com o piso valendo mais abaixo, entre 710 e 870px as fileiras
   quebram de outro jeito e os circulos se sobrepoem (ate -16px, medido); de
   880 para cima sobram 13px ou mais. Abaixo de 900 os tamanhos seguem como
   eram (o --p-min fica 0 e vale o minimo do inline): tablet e celular, onde
   nao ha hover para mostrar o nome. */
@media (min-width: 900px) {
  .person { --p-min: 0.9; }
  .person-name { font-size: clamp(9px, 0.769vw, 10px); }
  .person-role { font-size: clamp(7.2px, 0.615vw, 8px); }
}
/* O sobe-e-desce dos circulos e fixo em px (ate 30px) e nao encolhe com eles.
   Abaixo de 700px as fileiras quebram e um circulo invadia o da fileira de
   baixo (ate -26px em 320, ja antes desta rodada); ali eles ficam alinhados. */
@media (max-width: 700px) { .person { transform: none !important; } }

/* — program grid — */
.grid-session {
  position: relative; z-index: 2; cursor: pointer; font: inherit; text-align: left;
  border: 0; border-radius: 14px; padding: 7px 9px; color: #f5ead8;
}
.grid-session:hover { z-index: 30; }
.sess-pop {
  position: absolute; top: 0; width: 100%; height: 100%; overflow: hidden; padding: 0;
  border-radius: 16px; background: #071b14; color: #e6dcc0; opacity: 0;
  transition: opacity 150ms ease; box-shadow: var(--shadow-lg); pointer-events: none;
}
.grid-session:hover .sess-pop {
  opacity: 1; width: 264px; height: auto; min-height: 100%;
  padding: 14px 16px; overflow: visible; z-index: 9;
}
.day-tab {
  cursor: pointer; font: inherit; font-size: 13px; border-radius: 999px; padding: 9px 18px;
  border: 1px solid rgba(32, 30, 29, 0.22); background: transparent; color: #201e1d;
  display: flex; flex-direction: column; line-height: 1.25; align-items: flex-start;
}
.day-tab:hover { border-color: #c46a3a; }
.day-tab.active { background: #09231b; color: #e6dcc0; border-color: #09231b; }
.day-tab .dt-date { font-weight: 600; }
.day-tab .dt-label { font-size: 11px; opacity: 0.7; }
.session-row {
  cursor: pointer; font: inherit; text-align: left; background: #ebddc5;
  border: 1px solid transparent; border-radius: calc(var(--radius-lg) * 1.15);
  padding: clamp(16px, 2vw, 24px); display: flex; flex-wrap: wrap; gap: 14px 24px;
  align-items: start; color: #201e1d; width: 100%;
}
.session-row:hover { border-color: #c46a3a; background: #f3e7cf; }

/* — pill filter tabs (gallery) — */
.filter-tab {
  cursor: pointer; font: inherit; font-size: 13px; border-radius: 999px; padding: 8px 18px;
  border: 1px solid rgba(32, 30, 29, 0.22); background: transparent; color: #201e1d;
}
.filter-tab:hover { border-color: #c46a3a; }
.filter-tab.active { background: #09231b; color: #e6dcc0; border-color: #09231b; }
/* — foto da galeria: a imagem inteira abre o lightbox — */
.gallery-shot { cursor: zoom-in; display: block; transition: transform 260ms ease; }
.gallery-shot:hover { transform: scale(1.03); }
.gallery-shot:focus-visible { outline: 2px solid #c46a3a; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .gallery-shot { transition: none; } .gallery-shot:hover { transform: none; } }

/* — FAQ accordion — */
.faq-item {
  background: #ebddc5; border-radius: calc(var(--radius-lg) * 1.15);
  overflow: hidden; transition: background 180ms ease;
}
.faq-item.open { background: #f3e7cf; }
.faq-q {
  cursor: pointer; font: inherit; width: 100%; text-align: left; background: transparent;
  border: 0; padding: clamp(16px, 2vw, 22px); display: flex; gap: 16px;
  align-items: center; color: #09231b;
}
.faq-q:hover { background: rgba(196, 106, 58, 0.07); }
.faq-item.open .faq-q { color: #8c491a; }
.faq-q .faq-title { font-family: var(--font-heading); font-size: 17px; line-height: 1.3; flex: 1; }
.faq-chevron {
  flex: none; width: 30px; height: 30px; border-radius: 999px; display: flex;
  align-items: center; justify-content: center; background: rgba(32, 30, 29, 0.08);
  color: #09231b; transform: rotate(0deg);
  transition: transform 200ms ease, background 180ms ease;
}
.faq-item.open .faq-chevron { background: #c46a3a; color: #f5ead8; transform: rotate(180deg); }
.faq-a {
  font-size: 15px; line-height: 1.65; margin: 0;
  padding: 0 clamp(16px, 2vw, 22px) clamp(18px, 2vw, 24px); color: #474238; max-width: 54em;
  display: none;
}
.faq-item.open .faq-a { display: block; }

/* — sticky register bar — */
.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #0f3d2e;
  color: #e6dcc0; padding: 12px clamp(16px, 4vw, 40px);
  box-shadow: 0 -6px 24px rgba(7, 27, 20, 0.35);
}
.sticky-bar[hidden] { display: none; }

/* — modal + lightbox — */
.session-dialog[hidden], .lightbox[hidden], .join-dialog[hidden] { display: none; }
.lightbox {
  position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; padding: clamp(20px, 4vw, 48px);
  background: rgba(7, 27, 20, 0.94); cursor: zoom-out;
}
.lightbox img {
  max-width: 100%; max-height: 78vh; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* — monday.com forms (Join the list, contact). The embed opens with 112px of nothing above the first
     question (64px of margin and an empty logo bar), so the frame is pulled up by that much and the box
     clips it. --mf-h is the visible height: the measured form plus room for the "Required" messages.
     The text behind the frame shows only while monday loads. monday's card won't shrink below 400px
     plus 8px of margin each side; in a narrower column the frame grows a sideways scrollbar, so
     --mf-sangria makes the frame that much wider on each side and the box clips the extra, which is
     only monday's margin and the card's edge. — */
.mf { position: relative; flex: none; height: var(--mf-h, 780px); overflow: hidden; border-radius: var(--radius-md); }
.mf::before {
  content: "Loading the form…"; position: absolute; top: 28px; left: 0; right: 0;
  text-align: center; font-size: 14px; color: #645c50;
}
.mf iframe {
  position: relative; display: block; border: 0;
  width: calc(100% + 2 * var(--mf-sangria, 0px)); height: calc(100% + 112px);
  margin: -112px 0 0 calc(-1 * var(--mf-sangria, 0px));
}
.join-dialog .dialog { position: relative; max-height: calc(100vh - 2 * var(--space-4)); overflow-y: auto; }
.dialog-x {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: #474238; cursor: pointer;
}
.dialog-x:hover { background: rgba(46, 107, 58, 0.12); color: #09231b; }

/* — forms on dark (login) — */
.input-dark {
  background: rgba(230, 220, 192, 0.08); border-color: rgba(230, 220, 192, 0.28);
  color: #e6dcc0;
}

/* — food cards keep their design hover accent — */
/* — food cards: faixa com o nome; abre empurrando, sem cobrir os vizinhos — */
/* align-items:start mantem as faixas fechadas no topo quando uma abre */
.food-grid { align-items: start; }
/* — Things to do: titulo que leva ao site do lugar (cartao navy) — */
.todo-link {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid rgba(174,191,146,0.45);
  transition: color 180ms ease, border-color 180ms ease;
}
.todo-link::after { content: " ↗"; font-size: 0.78em; color: #aebf92; }
.todo-link:hover, .todo-link:focus-visible { color: #aebf92; border-color: #aebf92; }
.todo-link:focus-visible { outline: 2px solid #aebf92; outline-offset: 3px; border-radius: 2px; }

.food-card {
  --fc-alt: 72px;
  --fc-alt-aberta: 240px;
  position: relative; height: var(--fc-alt);
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; border-radius: calc(var(--radius-lg) * 1.15); background: var(--fc-bg, #ebddc5);
  transition: height 320ms ease, box-shadow 220ms ease;
}
.food-card:hover, .food-card:focus-within {
  height: var(--fc-alt-aberta); box-shadow: var(--shadow-md);
}
.food-card:focus-visible { outline: 2px solid #8c491a; outline-offset: 3px; }
/* sinal de abrir / fechar */
.food-card .fc-sinal {
  position: absolute; top: 0; right: 0; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--fc-fg, #0f3d2e); opacity: 0.5; pointer-events: none; z-index: 2;
  transition: opacity 180ms ease, transform 220ms ease, color 180ms ease;
}
.food-card:hover .fc-sinal, .food-card:focus-within .fc-sinal { opacity: 1; color: #e6dcc0; }
.food-card.is-open .fc-sinal { opacity: 1; color: var(--fc-fg, #0f3d2e); transform: rotate(45deg); }
.food-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 320ms ease;
}
.food-card .fc-scrim {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(9,35,27,0.28) 0%, rgba(9,35,27,0.74) 60%, rgba(9,35,27,0.88) 100%);
  transition: opacity 320ms ease;
}
.food-card .fc-text { position: relative; padding: 18px clamp(18px, 2.2vw, 24px) 24px; }
.food-card h3 {
  font-family: var(--font-heading); font-size: 19px; margin: 0; color: var(--fc-fg, #0f3d2e);
  transition: color 320ms ease;
}
.food-card p {
  font-size: 14px; line-height: 1.55; margin: 0; color: #474238;
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity 320ms ease, max-height 320ms ease, margin 320ms ease, color 320ms ease;
}
.food-card:hover img, .food-card:focus-within img,
.food-card:hover .fc-scrim, .food-card:focus-within .fc-scrim { opacity: 1; }
.food-card:hover h3, .food-card:focus-within h3 { color: #e6dcc0; }
.food-card:hover p, .food-card:focus-within p {
  opacity: 1; max-height: 10em; margin-top: 8px; color: rgba(230, 220, 192, 0.92);
}
/* — ABERTO por clique: a foto aparece inteira e o texto desce para baixo dela.
     Fica DEPOIS das regras de hover/foco de proposito: o peso e o mesmo, entao
     vence quem vem por ultimo. Antes, com o mouse em cima ou logo apos o clique
     (o card fica com foco), a camada escura voltava sobre a foto e o texto ia
     para o creme da espiada, ilegivel nos cards claros (cupuacu, farinha). — */
.food-card.is-open { height: auto; justify-content: flex-start; box-shadow: var(--shadow-md); }
.food-card.is-open img {
  position: relative; inset: auto;
  width: 100%; height: auto; aspect-ratio: 4/3; opacity: 1;
}
.food-card.is-open .fc-scrim { opacity: 0; }
.food-card.is-open h3 { color: var(--fc-fg, #0f3d2e); }
.food-card.is-open p { opacity: 1; max-height: 20em; margin-top: 8px; color: var(--fc-fg, #474238); }
/* sem mouse: um toque foca o card (tabindex=0) e :focus-within abre */
@media (prefers-reduced-motion: reduce) {
  .food-card, .food-card img, .food-card .fc-scrim, .food-card h3, .food-card p { transition: none; }
}

/* ===== Carrossel da secao do ultimo encontro (index, so ali) =====
   A moldura (3:2, o formato das fotos, e os cantos) fica no style inline
   da .foz-slides; nada passa por cima da foto: as bolinhas vem embaixo. */
.foz-slides { position: relative; background: #0c3225; touch-action: pan-y; }
.foz-slides img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 800ms ease;
  -webkit-user-drag: none; user-select: none;
}
.foz-slides img.is-active { opacity: 1; }
.foz-nav { position: relative; display: flex; justify-content: center; margin-top: 12px; }
.foz-nav[hidden] { display: none; }
.foz-dots { display: flex; }
/* o botao tem 22x24 para o dedo; a bolinha de 8px e o ::before */
.foz-dots button {
  width: 22px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; border-radius: 6px;
}
/* 0,6: acima de 3:1 sobre o fundo mais claro que o video chega a ter ali */
.foz-dots button::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px;
  background: rgba(230, 220, 192, 0.6); transition: width 300ms ease, background-color 300ms ease;
}
.foz-dots button:hover::before { background: rgba(230, 220, 192, 0.85); }
.foz-dots button[aria-current="true"]::before { width: 18px; background: #e6dcc0; }
.foz-dots button:focus-visible, .foz-toggle:focus-visible { outline: 2px solid #aebf92; outline-offset: -2px; }
/* pausa discreta no canto, alinhada a borda direita da foto */
.foz-toggle {
  position: absolute; right: 0; top: 0; width: 24px; height: 24px; padding: 0; border: 0;
  border-radius: 6px; display: grid; place-items: center; background: none; cursor: pointer;
  color: rgba(230, 220, 192, 0.75);
}
.foz-toggle:hover { color: #e6dcc0; }
.foz-toggle .foz-ico-play { display: none; }
.foz-toggle.is-paused .foz-ico-play { display: block; }
.foz-toggle.is-paused .foz-ico-pause { display: none; }
@media (max-width: 480px) {
  .foz-dots button { width: 18px; }
  .foz-dots button[aria-current="true"]::before { width: 14px; }
}
/* Com foto e texto lado a lado, o botao "See our journey" desce ate a linha da
   base da foto. As bolinhas saem da conta da altura (ficam penduradas abaixo da
   foto), senao o texto esticaria ate o fim delas e nao ate o fim da foto.
   As duas colunas cabem a partir de 628px de grade: 2 x 300 do minmax mais o
   gap (28 ali, mas ele cresce com a tela). 632 da folga para a regra nunca
   ligar com a grade ainda em uma coluna; entre 628 e 632 o botao so nao desce,
   o que nem se ve, porque ali o texto e bem mais alto que a foto. Mexeu no
   minmax ou no gap da .foz-grid, refaca a conta. Numa coluna nada disso vale. */
.foz-grid { container-type: inline-size; }
@container (min-width: 632px) {
  .foz-carousel { position: relative; }
  .foz-nav { position: absolute; left: 0; right: 0; top: 100%; }
  .foz-text { align-self: stretch; display: flex; flex-direction: column; }
  .foz-text > .btn { margin-top: auto; align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .foz-slides img, .foz-dots button::before { transition: none; }
}

/* ===== Video do YouTube na home (secao "About the meeting") =====
   A capa e um link para o video; o site.js troca pelo player no clique, ou
   ja na abertura da pagina se a caixa tiver data-yt-autoplay (mudo e em
   loop: os navegadores so deixam tocar sozinho sem som). Aberto direto do
   arquivo (file://), o YouTube recusa o player (erro 153, falta o Referer):
   ai fica a capa, e o clique so segue o link. */
.yt-facade { position: relative; }
.yt-facade a, .yt-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.yt-facade img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms ease; }
.yt-btn {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px;
  border-radius: 999px; display: grid; place-items: center;
  background: rgba(9,35,27,0.84); color: #f3ecd8;
  box-shadow: 0 10px 28px rgba(7, 27, 20, 0.35);
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.yt-btn svg { width: 30px; height: 30px; margin-left: 4px; fill: currentColor; }
.yt-facade a:hover .yt-btn, .yt-facade a:focus-visible .yt-btn { background: #c46a3a; color: #09231b; transform: scale(1.06); }
.yt-facade a:hover img { transform: scale(1.02); }
.yt-facade a:focus-visible { outline: 3px solid #aebf92; outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .yt-facade img, .yt-btn { transition: none; } }

/* — padrao de vitoria-regia (padrao principal da marca, da Bancada PSR User Meeting 2027) — */
/* Arquivos: vitoria-regia-faixa.svg (1440 x 600) e vitoria-regia-faixa-larga.svg (2400 x 400), os dois
   do "Padrao de folhas geral", sem fundo, para assentar no verde de cada bloco.
   .vr-bloco: bloco escuro com o padrao a direita e o texto (.vr-texto) a esquerda. O veu e um
   pseudo-elemento da coluna de texto: verde liso do canto esquerdo ate --vr-ini depois da borda da
   coluna, e some em --vr-fade. O sumico e em curva (smoothstep, em oito paradas), nao em reta: a
   rampa reta de 180px deixava um degrau, uma linha vertical onde o padrao comecava.
   No desktop o --vr-fade de um .vr-bloco e o espaco livre de verdade: comeca 40px antes da borda da
   coluna (ali o veu ainda cobre 98%, nenhuma linha dourada aparece atras das letras) e termina na
   borda do conteudo, com o padrao inteiro so no respiro da direita. Antes era 55vw, que passava da
   borda do bloco abaixo de ~1900px: numa tela de 1240px o padrao nunca chegava inteiro e o veu ainda
   cobria 22% dele no canto direito. A conta repete o layout do markup (padding lateral, conteiner de
   min(1240px, 100%) centralizado, coluna de --vr-texto), via unidades cqw do .vr-bloco.
   --vr-fundo = cor do bloco; --vr-texto = largura da coluna. No celular o padrao desce para uma faixa
   embaixo do texto (--vr-faixa-cel de altura), somada ao respiro de baixo do bloco (--vr-pad-base), e
   o veu some na vertical em 110px. */
.vr-bloco { position: relative; overflow: hidden; }
.vr-padrao {
  position: absolute; top: 0; right: 0; width: 72%; height: 100%; max-width: none;
  object-fit: cover; object-position: right center; pointer-events: none;
}
.vr-texto { position: relative; z-index: 0; max-width: var(--vr-texto, 34rem); }
.vr-texto::before {
  --vr-fade: clamp(380px, 55vw, 1040px);
  --vr-ini: 20px;
  --vr-c: var(--vr-fundo, #09231b);
  content: ""; position: absolute; z-index: -1; top: -100vh; bottom: -100vh; left: -100vw;
  right: calc(-1 * var(--vr-ini) - var(--vr-fade));
  background: linear-gradient(90deg, var(--vr-c) calc(100% - var(--vr-fade)), transparent);
  background: linear-gradient(90deg, var(--vr-c) calc(100% - var(--vr-fade)),
    color-mix(in srgb, var(--vr-c) 96%, transparent) calc(100% - var(--vr-fade) * 0.875),
    color-mix(in srgb, var(--vr-c) 84%, transparent) calc(100% - var(--vr-fade) * 0.75),
    color-mix(in srgb, var(--vr-c) 68%, transparent) calc(100% - var(--vr-fade) * 0.625),
    color-mix(in srgb, var(--vr-c) 50%, transparent) calc(100% - var(--vr-fade) * 0.5),
    color-mix(in srgb, var(--vr-c) 32%, transparent) calc(100% - var(--vr-fade) * 0.375),
    color-mix(in srgb, var(--vr-c) 16%, transparent) calc(100% - var(--vr-fade) * 0.25),
    color-mix(in srgb, var(--vr-c) 4%, transparent) calc(100% - var(--vr-fade) * 0.125),
    transparent);
  pointer-events: none;
}
@media (min-width: 900px) {
  @supports (width: 1cqw) {
    .vr-bloco { container-type: inline-size; }
    .vr-bloco .vr-texto::before {
      --vr-ini: -40px;
      --vr-fade: max(240px, calc((100cqw + min(1240px, 100cqw)) / 2 - min(var(--vr-texto, 34rem), 1240px, 100cqw) - var(--vr-ini)));
    }
  }
}
/* seção da equipe: o padrao cobre o fundo inteiro, um pouco apagado, atras dos rostos */
.vr-padrao-fundo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0.6; pointer-events: none; }
/* papel do site: em todo fundo creme, o mesmo padrao so em contorno fino verde-mata, quase sumindo.
   vitoria-regia-papel.svg e um ladrilho sem emenda de 1600 x 1000 (camada original no meio, camada
   deslocada em meio ladrilho nas bordas) com a opacidade de 12% ja no arquivo. Fica na camada creme de
   fora de cada pagina; as secoes escuras ficam por cima. 12% deixa os rotulos verdes pequenos acima de
   4,5:1 mesmo onde uma linha cruza a letra.
   Essa camada corta o que vaza para os lados com overflow-x:clip (no style de cada pagina), nunca
   hidden: hidden a transforma num conteiner de rolagem do tamanho do site, e dentro dele o Edge nao
   pinta os formularios do monday (iframe de outro dominio) - eles carregam mas ficam invisiveis. */
.vr-papel { background-image: url(../img/vitoria-regia-papel.svg); background-size: 1600px 1000px; background-repeat: repeat; background-position: center top; }
/* paginas com header colorido (hero .vr-bloco, marcadas pelo .site-header.reveal):
   o padrao ja aparece no hero, entao o fundo creme da pagina fica liso, sem o
   ladrilho de vitoria-regia. Preso ao .reveal, e nao ao .vr-bloco, para nao pegar
   a home — que tem um .vr-bloco no meio da pagina mas mantem o ladrilho de fundo. */
.vr-papel:has(.site-header.reveal) { background-image: none; }
@media (max-width: 899px) {
  .vr-bloco { padding-bottom: calc(var(--vr-pad-base, 52px) + var(--vr-faixa-cel, 58vw)) !important; }
  .vr-bloco > .vr-padrao { top: auto; bottom: 0; width: 100%; height: calc(var(--vr-faixa-cel, 58vw) + 6vw); object-position: center; }
  .vr-texto { max-width: none; }
  .vr-texto::before {
    --vr-fade: 110px;
    left: -50vw; right: -50vw; bottom: calc(-1 * var(--vr-fade));
    background: linear-gradient(180deg, var(--vr-c) calc(100% - var(--vr-fade)), transparent);
    background: linear-gradient(180deg, var(--vr-c) calc(100% - var(--vr-fade)),
      color-mix(in srgb, var(--vr-c) 96%, transparent) calc(100% - var(--vr-fade) * 0.875),
      color-mix(in srgb, var(--vr-c) 84%, transparent) calc(100% - var(--vr-fade) * 0.75),
      color-mix(in srgb, var(--vr-c) 68%, transparent) calc(100% - var(--vr-fade) * 0.625),
      color-mix(in srgb, var(--vr-c) 50%, transparent) calc(100% - var(--vr-fade) * 0.5),
      color-mix(in srgb, var(--vr-c) 32%, transparent) calc(100% - var(--vr-fade) * 0.375),
      color-mix(in srgb, var(--vr-c) 16%, transparent) calc(100% - var(--vr-fade) * 0.25),
      color-mix(in srgb, var(--vr-c) 4%, transparent) calc(100% - var(--vr-fade) * 0.125),
      transparent);
  }
}