/* ===================================================================
BASE.CSS — folha COMPARTILHADA pelas landing pages da Fazenda
Fazenda dos Cordeiros - 03/08/2026
Uma alteracao aqui reflete nas TRES LPs (e nas proximas). Extraida da
folha da A Gosto de Caminhar, que era a mais completa e virou a
referencia-mae de padrao visual e de secoes.
O QUE VIVE AQUI: paleta, tipografia, botoes, cabecalho, menu mobile,
hero, secao do evento, cards de programacao, faixa tematica (.walk),
tarifas, "o que esta incluido", galeria + lightbox, depoimentos, FAQ,
CTA final, rodape, banner de cookies, reveal e as media queries.
O QUE NAO VIVE AQUI: nada que seja de UMA pagina so. Componentes
exclusivos ficam na folha da propria LP, carregada DEPOIS desta — por
isso um override de la sempre vence.
O widget "Fale com nossa equipe" tem folha propria (wa-widget.css),
porque ja era compartilhado antes desta extracao.
=================================================================== */
/* ============ 1. VARIÁVEIS & RESET ============ */
:root {
/* ARRANJO A — papéis normais, alinhados à LP principal (31/07/2026)
· ESTRUTURA (cabeçalho, rodapé, faixas, CTA) = VERDE #00491D
· AÇÃO/ACENTO (botões, filetes, detalhes) = TERRACOTA #A25641
Este bloco foi revertido do ARRANJO B (teste de 30/07/2026, que invertia
os dois papéis e usava botão dourado) ao unificar as três LPs em um site
só: as páginas dividem cabeçalho, rodapé e navegação, e duas paletas
opostas no mesmo site brigavam entre si. Os comentários de cada token
abaixo voltaram a bater com o que o token guarda.
O mapa dos dois arranjos segue em PALETA.md (projeto
fazenda-agosto-caminhar) — para retomar o arranjo B, é de lá que se parte.
Os tokens agora são idênticos aos de assets/css/style.css e
cafe-com-orquideas.css: mexer nos três juntos, senão o site diverge. */
/* ===== BRAND KIT OFICIAL (Lao Martins) — cores do site institucional ===== */
--c-forest: #00491D; /* verde principal oficial */
--c-forest-dk: #00330F; /* hover/pressed do verde */
--c-forest-soft:#1A6B39; /* verde mais claro p/ bordas/detalhes */
--c-terra: #A25641; /* primária/acento oficial (substitui o antigo terracota) */
--c-terra-dk: #7D4030; /* hover do acento */
--c-terra-lt: #E9A184; /* clareado do acento — só p/ acento SOBRE fundo escuro
(hero/selo), onde o #A25641 não atinge contraste AA */
--c-text: #0E0E0E; /* texto do corpo (quase-preto oficial) */
/* ===== BOTÕES = VERDE DA MARCA =====
No arranjo B (30/07/2026) o preenchimento era dourado #ffd766, com rótulo
em --c-text e borda própria porque dourado sobre creme quase não se
destaca. Ao unificar o site, o botão voltou ao verde institucional, que é
o mesmo das outras duas páginas — rótulo branco, 10,4:1 medido.
O #ffd766 segue na folha como ACENTO (eyebrow do hero, schedule-weekday,
CTA final, assinatura do rodapé); só deixou de preencher botão. */
--c-btn: #00491D; /* preenchimento dos botões = verde institucional */
--c-btn-dk: #00330F; /* hover dos botões */
/* Blocos escuros / rodapé — derivados do verde profundo #00491D */
--c-ink: #013A17; /* fundos escuros (walk, groups, testemunhos) */
--c-ink-soft: #075026; /* cartões/realces sobre o escuro */
--c-footer: #012A10; /* rodapé — o verde mais profundo */
/* ===== FUNDO: OFF-WHITE #FAF7F3 =====
Confirmado pelo cliente em 03/08/2026. Entra como token PROPRIO
(--c-bg) em vez de sobrescrever --c-cream: o creme #f7f4ea continua
servindo superficies de componente (botao sobre faixa escura, cartoes),
e trocar os dois de uma vez achataria essa distincao.
So o body usa --c-bg. */
--c-bg: #FAF7F3; /* fundo da pagina */
--c-cream: #f7f4ea; /* fundo claro institucional */
--c-bege: #ebe4d2; /* bege do kit — botão sobre faixa escura */
--c-sand: #ebe4d2; /* destaque suave / superfície secundária */
--c-muted: #5a5648; /* texto secundário */
--c-line: #ddd6c2; /* bordas */
--c-white: #ffffff;
--c-wa: #25d366; /* verde WhatsApp (funcional, mantido) */
/* ===== WHATSAPP — botão flutuante + widget de captação =====
Tokens portados do Solar Dona Dora. Ficam fora da paleta institucional de
propósito: verde-WhatsApp e lilás não pertencem à identidade da fazenda,
são cores FUNCIONAIS do componente de chat (o usuário reconhece o canal
por elas). Uma só fonte de verdade para a distância até a base, para que
botão e widget subam juntos se um dia precisarem. */
--wa-bottom: 22px; --wa-side: 22px; --wa-size: 56px;
--wa-green: #25D366; /* verde oficial do WhatsApp */
--wa-green-dark: #12793F; /* cabeçalho do widget */
--wa-green-rgb: 37, 211, 102;
--wa-bubble: #E8DDF0; /* lilás claro do balão de saudação */
--wa-border: rgba(26,26,26,.12);
/* ===== TIPOGRAFIA: Bree Serif (titulos) + Poppins (corpo) =====
Confirmada pelo cliente em 03/08/2026, valendo para as TRES LPs de uma
vez. Era a identidade da versao standalone desta pagina, antes da
unificacao de 31/07 ter normalizado tudo para PT Serif.
ATENCAO ao historico: os commits de 29/07 chamam a PT Serif de "fonte
oficial do brand kit (Lao Martins)". Esta troca reverte aquela decisao
de propria escolha do cliente — se o brand kit voltar a valer, e este
bloco (mais o das fontes no das LPs) que se desfaz.
A Bree Serif so tem peso 400: titulos nao levam font-weight 700, senao o
navegador sintetiza o negrito. O peso vem da Poppins, no corpo. */
--font-serif: 'Bree Serif', Georgia, serif;
--font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
--container: 1240px;
--radius: 4px;
--header-h: 78px;
--ease: cubic-bezier(.22,.61,.36,1);
/* Respiro vertical uniforme entre seções (mobile ~64px; desktop ~112px abaixo) */
--section-gap: 4rem;
}
@media (min-width: 768px) { :root { --section-gap: 7rem; } }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-sans);
font-weight: 400;
color: var(--c-text);
background: var(--c-bg);
line-height: 1.7;
overflow-x: hidden;
font-size: 17px;
}
img, iframe { display: block; max-width: 100%; }
img { height: auto; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
/* ============ 2. TIPOGRAFIA & UTILITÁRIOS ============ */
/* Títulos herdam a cor do contexto: escuro (--c-text) nas seções claras,
branco nas seções escuras (walk/cta-final/footer definem color:#fff). */
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; line-height: 1.2; }
/* O 400 acima é o peso FINAL dos títulos, não um valor de partida: a Bree
Serif só tem esse peso. h3 já teve um override em 600 e a folha já teve um
bloco no fim forçando 700 — os dois produziam negrito sintetizado e foram
removidos. Ver o bloco 21, no fim desta folha. */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 22px; }
.eyebrow {
font-family: var(--font-sans);
font-weight: 700;
/* .72rem (11,5px) era pequeno demais: a linha de contexto que abre cada
seção — "Galeria", "Programação", "Agenda 2026" — quase não se lia, e ela
é justamente o que diz ao leitor ONDE ele está na página. O contraste já
estava ótimo (9,7:1 medido); o problema era só o corpo.
Subiu em três passos, a pedido: .72rem -> .85rem -> 1rem -> 1.15rem
(11,5px -> 18,4px, +60%). A 1.15rem ele passa o .section-lead (16,8px), o
que é incomum para um sobretítulo — mas é deliberado: estes rótulos são a
única sinalização de ONDE a pessoa está numa página longa, e a queixa
recorrente era não conseguir vê-los. Continua a 38% do h2 (48px), então a
hierarquia com o título se mantém folgada.
⚠ Vale para as TRÊS páginas — é o eyebrow de todas as seções, não só o da
galeria. Foi de propósito: a queixa era de legibilidade, e ela não é de uma
seção só. */
font-size: 1.15rem;
/* Sem caixa-alta e sem tracking decorativo — igual ao .eyebrow da LP-agenda
(commit bba8de6 de lá). Era .28em + uppercase. */
letter-spacing: normal;
color: var(--c-terra);
margin-bottom: 1rem;
}
/* .eyebrow--forest REMOVIDO em 03/08/2026.
Era o modificador que pintava de VERDE (--c-forest) os rótulos de seção
sobre fundo claro, enquanto os demais ficavam no terracota (--c-terra) do
.eyebrow. Na prática isso dava DUAS cores para a mesma coisa na mesma
página: "Galeria" e "Programação" saíam verdes, "Agenda 2026" e
"Exposição · só nesta edição" saíam terracota — sem que a diferença
comunicasse nada, era só herança de duas LPs que cresceram separadas.
Agora todos os rótulos usam o terracota do .eyebrow, que é a cor de acento
da marca. A classe saiu do HTML das três páginas e do _template.
Se um dia precisar de um rótulo verde, crie um modificador com nome que
diga o PAPEL (ex.: .eyebrow--sobre-escuro), não a cor. */
/* EXCEÇÃO: o eyebrow do HERO fica no corpo antigo (.72rem).
Ele não é um rótulo curto como os das seções ("Galeria", "Agenda 2026") — é
uma linha de contexto longa: "Fazenda dos Cordeiros · Silva Jardim, RJ · a
90 km do Rio". Medido a 390px de largura, com 331px disponíveis:
.72rem …… 1 linha ← cabe
.85rem …… 2 linhas
1rem …… 2 linhas
Em duas linhas ele vira um parágrafo em miniatura no topo do hero, come
altura justo onde ela é escassa no mobile, e briga com o título logo abaixo.
Se um dia esse texto encurtar, esta exceção pode sair. */
.hero .eyebrow { font-size: .72rem; }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 3rem; }
/* text-wrap:balance (04/08/2026) — o título centrado quebrava com a última
palavra órfã na segunda linha. O caso que motivou foi "Sábado e domingo, no
ritmo da fazenda" na LP da trilha: 37 caracteres contra os 680px do
.section-head davam "…no ritmo da / fazenda". O balance distribui as
palavras entre as linhas em vez de encher a primeira até o limite:
antes → "Sábado e domingo, no ritmo da" / "fazenda"
depois → "Sábado e domingo," / "no ritmo da fazenda"
Não muda fonte, tamanho nem o texto — só onde a linha corta. Em navegador
sem suporte (Chrome <114, Safari <17.5) a declaração é ignorada e o título
volta a quebrar como antes: degrada sozinho, sem fallback.
Vale para TODOS os títulos de seção das três páginas, de propósito — é o
mesmo componente, e o problema é do formato centrado, não daquele título. */
.section-head h2 { font-size: clamp(2rem, 6vw, 3rem); text-wrap: balance; }
.section-lead { color: var(--c-muted); margin-top: 1rem; font-size: 1.05rem; }
/* Data do evento em verde, sempre que aparecer sobre fundo CLARO (creme/branco).
Pedido do Cauã em 30/07/2026. Não usar sobre os fundos verdes da página — o
cabeçalho dos cards de programação e a faixa do CTA final — onde verde sobre
verde some; nesses dois lugares a data segue branca e dourada, respectivamente. */
.data-evento { color: var(--c-forest); font-weight: 700; }
/* Acessibilidade: skip link */
.skip-link {
position: absolute; left: -999px; top: 0; z-index: 2000;
background: var(--c-forest); color: var(--c-white);
padding: .8rem 1.4rem; font-size: .85rem;
}
.skip-link:focus { left: 12px; top: 12px; }
/* Foco visível global */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
outline: 2px solid var(--c-forest);
outline-offset: 3px;
}
/* ============ 3. BOTÕES & LINKS ============
Animações: brilho que varre no hover (sheen), elevação com sombra colorida,
"tremidinha" do ícone e resposta tátil no clique. Tudo via transition/
animation — o bloco global de prefers-reduced-motion desativa sozinho. */
.btn {
position: relative; overflow: hidden;
display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
padding: 1rem 2.1rem;
font-family: var(--font-sans);
font-weight: 700; font-size: .82rem;
/* Rótulo em caixa normal, como os botões da LP-agenda. Era .16em + uppercase. */
letter-spacing: normal;
border-radius: var(--radius);
transition: transform .35s var(--ease), box-shadow .35s var(--ease),
background-color .35s var(--ease), background-size .45s var(--ease),
color .35s var(--ease), border-color .35s var(--ease), filter .35s var(--ease);
border: 1px solid transparent;
/* Mobile-first: texto pode quebrar (nowrap estourava a viewport em 375px —
o rótulo longo alargava o track do grid em "Escolas e grupos") */
white-space: normal; text-align: center;
}
/* Sheen: faixa de luz que atravessa o botão uma vez por hover */
.btn::after, .nav-cta::after {
content: ""; position: absolute; top: -4px; bottom: -4px; left: -45%; width: 38%;
background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
transform: skewX(-18deg);
opacity: 0; pointer-events: none;
}
.btn:hover::after, .nav-cta:hover::after { animation: btnSheen .85s var(--ease); }
@keyframes btnSheen {
0% { transform: translateX(0) skewX(-18deg); opacity: 0; }
15% { opacity: 1; }
100% { transform: translateX(440%) skewX(-18deg); opacity: 0; }
}
/* Ícone acena no hover */
.btn:hover .ic { animation: icWiggle .55s var(--ease); }
@keyframes icWiggle {
0%, 100% { transform: rotate(0) scale(1); }
30% { transform: rotate(-12deg) scale(1.15); }
65% { transform: rotate(8deg) scale(1.08); }
}
/* Clique: afunda de leve — resposta tátil imediata */
.btn:active, .nav-cta:active {
transform: translateY(0) scale(.97);
transition-duration: .1s;
}
/* ---- BOTÕES ----
Idênticos aos das outras duas páginas do site desde 31/07/2026: o que a
classe pinta aqui é exatamente o que ela pinta em style.css e em
cafe-com-orquideas.css. Mexer nos três juntos.
No arranjo B (30/07) todos os botões desta página eram DOURADOS, e por isso
--green e --terra guardavam outras cores e carregavam uma borda extra para
se destacarem do fundo claro. Com a volta ao arranjo A, os nomes voltaram a
bater com o que pintam e a borda saiu. */
.btn--green { background: var(--c-forest); color: var(--c-white); }
.btn--green:hover {
background: var(--c-forest-dk); transform: translateY(-3px);
box-shadow: 0 12px 26px -10px rgba(36,64,42,.6);
}
/* Outline: o verde sobe preenchendo o botão (fill deslizante) */
.btn--outline-green {
background-image: linear-gradient(var(--c-forest), var(--c-forest));
background-repeat: no-repeat; background-size: 100% 0; background-position: 0 100%;
color: var(--c-forest); border-color: var(--c-forest);
}
.btn--outline-green:hover {
background-size: 100% 100%; color: var(--c-white); transform: translateY(-3px);
box-shadow: 0 12px 26px -10px rgba(0,73,29,.45);
}
/* Botão BEGE — para uso SOBRE as faixas escuras (hoje só o "Garantir minha
vaga" da seção da trilha). Numa faixa escura, um botão de cor cheia da marca
compete com o fundo; o claro separa na hora.
Usa o BEGE institucional (--c-bege), não o off-white do fundo: sobre o
terracota, o #FAF7F3 lia como branco, e a marca tem um bege próprio.
Rótulo em --c-text: bege é claro demais para sustentar texto branco. */
/* CREME — para botão sobre faixa escura (.walk, .cta-final). O #ebe4d2 é o bege
do brand kit; sobre o verde --c-ink o rótulo em --c-text mede 13:1.
Os três CSS têm este bloco idêntico desde 31/07/2026 — antes a principal e a
do Café com Orquídeas usavam branco puro com rótulo verde, e só a de Agosto
era creme. Mexer nos três juntos. */
.btn--light {
background: var(--c-sand); color: var(--c-text);
box-shadow: 0 8px 22px -8px rgba(0,0,0,.5);
}
.btn--light:hover {
background: var(--c-cream); color: var(--c-text); transform: translateY(-3px);
box-shadow: 0 16px 34px -10px rgba(0,0,0,.55);
}
/* Ghost: vive SOBRE a foto do hero, onde o fundo é escuro — aqui o dourado
pode ser o próprio texto (9:1 contra o scrim), sem precisar de fundo. */
.btn--ghost { background: transparent; color: var(--c-white); border-color: rgba(255,255,255,.6); }
.btn--ghost:hover {
background: rgba(255,255,255,.14); border-color: #fff; transform: translateY(-3px);
box-shadow: 0 10px 24px -12px rgba(0,0,0,.5);
}
/* ⚠ VERDE, NÃO DOURADO — e é decisão, não esquecimento.
Este botão e os outros dois do canal (.wa-submit e .wa-fab, hoje em
assets/css/wa-widget.css) usam o verde OFICIAL do WhatsApp. É a cor pela qual o
usuário reconhece o canal antes de ler o rótulo; dourada, a ação vira "mais
um botão do site" e perde o atalho de reconhecimento. É também o padrão da
Solar Dona Dora, que esta LP segue. */
.btn--wa { background: var(--c-wa); color: #06351a; }
.btn--wa:hover {
filter: brightness(1.05); transform: translateY(-3px);
box-shadow: 0 14px 30px -10px rgba(37,211,102,.6);
}
/* Era .btn--wa .ic. Virou .btn .ic quando o CTA final trocou o verde pelo bege
(.btn--light): o ícone do WhatsApp continua ali e precisava seguir dimensionado
fora da classe verde. `fill: currentColor` faz o ícone herdar a cor do rótulo
— verde-escuro no botão verde, --c-text no bege. */
.btn .ic { width: 20px; height: 20px; fill: currentColor; }
/* Antes terracota; dourado desde 30/07/2026. Vive sobre a foto do hero e sobre
a faixa escura da trilha — daí manter a sombra, que separa o botão do fundo. */
/* Terracota e sem borda, igual ao .btn--terra das outras duas folhas. Estava
em var(--c-btn) (verde) com contorno: sobra do arranjo B, quando o botão era
dourado e precisava de limite visível sobre o fundo claro. */
.btn--terra {
background: var(--c-terra); color: #fff;
box-shadow: 0 8px 22px -8px rgba(0,0,0,.5);
}
.btn--terra:hover {
background: var(--c-terra-dk); color: #fff; transform: translateY(-3px);
box-shadow: 0 16px 34px -10px rgba(0,0,0,.55);
}
.btn--block { width: 100%; white-space: normal; }
.btn--lg { padding: 1.15rem 2.6rem; font-size: .9rem; }
.btn--sm { padding: .65rem 1.3rem; font-size: .74rem; }
/* ============ 4. PLACEHOLDERS DE FOTO (padrão Morada) ============ */
/* Blocos neutros até as fotos reais — nenhuma imagem de banco ou IA. */
.ph {
position: relative;
background:
repeating-linear-gradient(45deg,
rgba(162,86,65,.06) 0, rgba(162,86,65,.06) 14px,
rgba(0,73,29,.08) 14px, rgba(0,73,29,.08) 28px),
var(--c-sand);
border: 1px dashed var(--c-line);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.ph-label {
font-size: .72rem; letter-spacing: normal;
color: var(--c-muted); text-align: center; padding: 1rem;
max-width: 90%;
}
/* Imagens reais inseridas nos blocos de mídia — cobrem o contêiner sem
distorcer (object-fit: cover). Convivem com os .ph ainda pendentes. */
.day-media, .hero-bg { position: relative; }
.day-media > picture { position: absolute; inset: 0; }
.hero-bg picture, .day-media picture { display: block; width: 100%; height: 100%; }
.hero-bg img, .day-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-bg { overflow: hidden; }
/* Hero: a foto COBRE o hero inteiro em qualquer proporção (cover), sem barras
nem emendas de fundo. A panorâmica do vale é 1600x900 — 16:9 exato, a mesma
proporção do hero em desktop, então praticamente não há corte. */
.hero-bg { background-color: var(--c-ink); background-size: cover; background-position: center; }
.hero-bg > picture { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
/* brightness em .70 (era .82, baixado em 10/08/2026 a pedido do cliente): o
.82 servia a uma foto de mata fechada, escura por natureza na faixa do
texto. A foto atual é capim ao sol — verde claro e alto contraste embaixo
do bloco de texto branco — e nesse fundo o .82 deixava as letras rasas.
Na prática esta regra vale só para A Gosto de Caminhar: a home sobrescreve
com .60 (style.css) e o Café com Orquídeas com .72 (cafe-com-orquideas.css).
Y em 55% dá mais peso à vegetação e empurra o céu claro do topo para fora. */
.hero-bg img { object-fit: cover; object-position: 50% 55%; filter: brightness(.70) saturate(1.05); }
/* ============ 5. HEADER ============ */
.site-header {
position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.nav-bar {
/* gradiente sutil só no topo → contraste do texto branco sobre o céu claro do hero;
ao rolar, o fundo creme sólido (regra .scrolled) cobre isto. */
background: linear-gradient(180deg, rgba(10,14,8,.5) 0%, rgba(10,14,8,.12) 65%, rgba(10,14,8,0) 100%);
transition: background .4s var(--ease), padding .4s var(--ease);
padding: .4rem 0;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; flex-direction: row; align-items: center; gap: .65rem; line-height: 1; color: var(--c-white); transition: color .4s; }
/* Logo oficial da fazenda (selo circular, terracota #A25641). Substituiu o
símbolo verde em 31/07/2026, na unificação das três páginas: é a marca
principal e agora é a mesma nos três cabeçalhos, rodapés e favicons.
O terracota é meio-tom, então funciona nos dois estados do header — sobre o
hero escuro e sobre o creme do .scrolled — sem precisar de filtro.
O arquivo é quadrado (212x212); a altura manda e a largura acompanha. */
.brand-logo { height: 46px; width: auto; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; }
.brand-mark { font-family: var(--font-serif); font-size: .96rem; font-weight: 400; letter-spacing: .1em; white-space: nowrap; }
.brand-sub { font-size: .6rem; letter-spacing: .1em; margin-top: 3px; opacity: .95; white-space: nowrap; }
.nav { display: none; }
.nav a {
font-size: .95rem; letter-spacing: .08em; color: var(--c-white);
padding: .5rem 0; position: relative; transition: color .3s; white-space: nowrap;
}
.nav a::after {
content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
background: var(--c-terra); transition: width .3s var(--ease);
}
.nav a:hover::after { width: 100%; }
.nav-actions { display: flex; align-items: center; gap: 1rem; }
/* Botão do cabeçalho — TERRACOTA, igual ao das outras duas páginas.
Estava em var(--c-btn) (verde) e com uma borda em var(--c-btn-dk): sobra do
arranjo B, onde o botão era dourado e precisava de contorno para se destacar
do fundo claro. Com o botão de volta ao terracota sobre o hero escuro, o
contorno não tem função e só deixava este cabeçalho diferente dos outros.
Este bloco é idêntico ao de style.css e cafe-com-orquideas.css — mexer nos
três juntos. */
.nav-cta {
position: relative; overflow: hidden; flex-shrink: 0;
display: inline-flex; align-items: center; white-space: nowrap;
padding: .5rem .8rem; background: var(--c-terra); color: #fff;
font-size: .68rem; letter-spacing: normal;
border-radius: var(--radius); box-shadow: 0 6px 18px -8px rgba(0,0,0,.5);
transition: background .3s, transform .3s var(--ease), box-shadow .3s var(--ease);
}
.nav-cta:hover {
background: var(--c-terra-dk); transform: translateY(-2px);
box-shadow: 0 12px 26px -10px rgba(0,0,0,.55);
}
.nav-cta--mobile { display: none; }
/* Rótulo curto no mobile; completo no desktop (evita 3 linhas / overflow) */
.nc-full { display: none; }
.nc-short { display: inline; }
/* Header enxuto no mobile para caber logo + marca + CTA curto + hambúrguer */
@media (max-width: 640px) {
.brand-logo { height: 38px; width: auto; }
.brand { gap: .45rem; }
.brand-mark { font-size: .72rem; letter-spacing: .02em; }
/* O brand-sub desta LP carrega o nome do evento + a data
("A GOSTO DE CAMINHAR · 22 E 23 DE AGOSTO"), bem mais longo que o da
LP-agenda ("MATA ATLÂNTICA · SILVA JARDIM, RJ"); a 390px ele encostava no
CTA, e com a PT Serif, que é mais larga, chegava a invadir o botão.
Tracking menor aqui em vez de .08em — só o suficiente para folgar. Se a
data sair do rótulo, pode voltar ao valor da LP-agenda. */
.brand-sub { font-size: .46rem; letter-spacing: .02em; }
.nav-actions { gap: .5rem; }
.nav-inner { gap: .4rem; }
.nav-cta { padding: .46rem .72rem; font-size: .64rem; }
}
/* Estado: header rolado (fundo claro) */
.site-header.scrolled .nav-bar { background: var(--c-cream); box-shadow: 0 6px 30px rgba(46,18,12,.08); }
.site-header.scrolled .brand,
.site-header.scrolled .nav a { color: var(--c-text); }
/* MENU MOBILE ABERTO — dois defeitos herdados da LP-agenda, corrigidos aqui:
1. O JS pinta o painel de #1b2318, mas a regra .scrolled acima deixava os
links quase pretos sobre esse fundo escuro (contraste ~1.1:1, ilegível).
2. O CTA do menu (.nav-cta--mobile) nascia display:none e nunca era
reativado — o menu mobile abria sem nenhum botão de conversão. */
body.menu-open .nav a,
body.menu-open .site-header.scrolled .nav a { color: var(--c-white); }
/* Mesma armadilha na barra do hambúrguer: com o header rolado ela virava
--c-text (#0E0E0E) sobre o painel #1b2318 — o "X" de fechar sumia e o
usuário não enxergava como sair do menu. */
body.menu-open .site-header.scrolled .menu-toggle span { background: var(--c-white); }
body.menu-open .nav-cta--mobile {
display: inline-flex; justify-content: center;
margin-top: 1.2rem; padding: .8rem 1rem; font-size: .72rem;
}
/* Menu hambúrguer */
.menu-toggle { display: flex; flex-direction: column; gap: 5px; width: 30px; height: 22px; justify-content: center; }
.menu-toggle span { display: block; height: 2px; width: 100%; background: var(--c-white); transition: transform .35s var(--ease), opacity .3s; }
.site-header.scrolled .menu-toggle span { background: var(--c-text); }
body.menu-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ============ 6. HERO DO EVENTO ============ */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg.ph--hero { border: none; }
.hero-bg .ph-label { position: absolute; bottom: 18px; right: 18px; background: rgba(250,247,243,.85); padding: .5rem .9rem; border-radius: var(--radius); max-width: 70%; }
.hero-overlay {
position: absolute; inset: 0;
/* SCRIM LATERAL (a camada principal no desktop): funciona como "fundo" do bloco
de texto. Denso no canto esquerdo, sustenta ~.72 até 42% (todo o texto cabe
dentro dos primeiros 50% da largura) e zera em 84% — daí para a direita a
foto aparece limpa, sem véu, e é justamente onde a fila de caminhantes
segue subindo a trilha. O ângulo de 96deg tira o ar de faixa reta.
Sobre a foto (já com brightness .70), .72 de alfa põe até o pixel mais claro
em 7,4:1 contra o branco — AAA mesmo no pior ponto (era 6,1:1 com o .82).
Medido na faixa do texto da foto atual, não estimado. */
background:
linear-gradient(96deg,
rgba(38,15,10,.88) 0%,
rgba(38,15,10,.84) 24%,
rgba(38,15,10,.72) 42%,
rgba(38,15,10,.44) 57%,
rgba(38,15,10,.16) 71%,
rgba(38,15,10,0) 84%),
/* Véu vertical de apoio: só segura o header no topo e ancora a base. */
linear-gradient(180deg, rgba(38,15,10,.45) 0%, rgba(38,15,10,.10) 28%, rgba(38,15,10,.12) 60%, rgba(38,15,10,.58) 100%);
}
/* TABLET / NOTEBOOK PEQUENO — aqui o texto já ocupa quase toda a largura, então
o scrim lateral do desktop apagaria cedo demais (o título chegava a 4:1). As
paradas andam para a direita e o véu vertical sobe um pouco; o canto superior
direito continua limpo.
O `.hero-bg > picture { height: 138% }` que existia aqui foi REMOVIDO: era um
hack para empurrar a base da foto retrato de orquídea fora do bloco de texto.
Com uma foto 16:9 ele só ampliava a imagem sem motivo — e ampliar é justamente
o que esta foto de 656px não pode sofrer. */
@media (max-width: 1024px) {
.hero-overlay {
background:
linear-gradient(96deg,
rgba(38,15,10,.88) 0%,
rgba(38,15,10,.86) 30%,
rgba(38,15,10,.78) 52%,
rgba(38,15,10,.60) 70%,
rgba(38,15,10,.34) 85%,
rgba(38,15,10,.10) 100%),
linear-gradient(180deg, rgba(38,15,10,.48) 0%, rgba(38,15,10,.22) 30%, rgba(38,15,10,.26) 62%, rgba(38,15,10,.70) 100%);
}
}
.hero-content { position: relative; z-index: 2; color: #fff; max-width: 760px; padding-top: var(--header-h); padding-bottom: 3rem; }
/* RESPIRO DO TOPO — SÓ NAS LPs DE EVENTO (04/08/2026)
O padding-top era exatamente var(--header-h): a conta cobria a altura do
cabeçalho fixo e mais nada, então o eyebrow nascia encostado na barra.
Aqui ele ganha uma folga real por cima.
POR QUE O EXTRA DESCE MENOS DO QUE PARECE: o .hero é flex com
align-items:center, e o bloco é centrado JÁ COM os paddings dentro. Quem
desloca o conteúdo para baixo não é o padding-top sozinho, é a DIFERENÇA
entre ele e o padding-bottom, e ainda pela metade — (pt - pb) / 2. Por isso
o topo cresce mais que o de baixo, em vez de os dois juntos.
⚠ ESCOPADO em .hero--evento de propósito: a página principal (hub) usa as
mesmas .hero/.hero-content e ficou de fora do pedido. Sem o modificador,
isto mexeria no hero da agenda também. */
.hero--evento .hero-content { padding-top: calc(var(--header-h) + 3.5rem); }
/* DESCIDA EXTRA — SÓ NA LP DA TRILHA (.hero--caminhar, 04/08/2026)
Pedido: "descer mais" o bloco sobre a foto. Aqui está o TETO do que dava
para descer no desktop, e o motivo está medido:
· o bloco do hero desta página tem ~700px de altura (título + badge +
parágrafo de 6 linhas + CTA + selo). Numa viewport de 686px de altura
ele JÁ ocupa a tela inteira;
· como o bloco é centrado, o que desloca o conteúdo é (padding-top menos
padding-bottom) dividido por 2 — por isso o padding-bottom cai para
1.25rem: é ele que financia a descida sem inflar o bloco.
Resultado medido a 1536x686: eyebrow de 134px para 150px do topo, com o
selo terminando a 19px da dobra. Passar disto empurra o selo para fora
(a +6rem o selo já saía 5px da tela).
PARA DESCER DE VERDADE no desktop, o caminho não é padding: é encurtar o
parágrafo do hero. Escondendo a 2ª frase (a mesma que já some no mobile
via .so-desktop) o eyebrow desce para 232px e ainda sobram 29px de folga —
medido. Isso é decisão de copy, não de CSS, e não foi feito.
No MOBILE não existe esse aperto: lá o bloco ancora no pé do hero (regra
no @media abaixo), o que desce o conteúdo bem mais. */
.hero--caminhar .hero-content {
padding-top: calc(var(--header-h) + 4.5rem);
padding-bottom: 1.25rem;
}
/* Terracota clareado (--c-terra-lt) — sobre a foto do hero o #00491D puro
não atingiria AA; o clareado sim.
O text-shadow é a ÚNICA sombra do hero e segue mantido por precaução: com a
troca da foto (o close claro de orquídea saiu, entrou a trilha, de fundo verde
escuro na faixa do texto) o contraste do eyebrow tende a MELHORAR bastante em
relação aos 2,9:1 medidos na LP anterior. Mas "tende" não é medida: a sombra
fica até alguém remedir o contraste do fundo composto (foto + scrim) nesta
foto, em 390px e em desktop. Ver PENDENTES.md.
Título e parágrafo seguem sem sombra, como na LP-agenda. */
.hero-content .eyebrow { color: #ffd766; text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.6); }
/* Escala do título copiada do .hero-title da LP-agenda (era clamp(2.2rem, 7vw,
4.2rem)). O margin-bottom fica em .9rem, e não nos 1.2rem de lá, porque aqui
o título é seguido pelo badge da data — na LP-agenda ele encosta direto no
parágrafo. Diferença de estrutura, não de tipografia. */
.hero-title { font-size: clamp(1.9rem, 5.5vw, 3.4rem); font-weight: 400; margin-bottom: .9rem; color: #fff; }
/* Data do evento logo abaixo do título — a informação nº 1 de uma LP de evento.
VERDE da marca, não mais o terracota: pedido do Cauã em 30/07/2026 para que a
data apareça em verde. O #A25641 a .92 sobre a foto deixa o texto branco em
~10,7:1 — bem acima do que o terracota entregava. */
.hero-badge {
display: inline-block;
margin-bottom: 1.4rem; padding: .45rem 1.1rem;
background: rgba(162,86,65,.92);
border: 1px solid rgba(255,255,255,.28); border-radius: 50px;
font-size: clamp(.82rem, 2.2vw, .95rem); font-weight: 700;
letter-spacing: normal; color: #fff;
text-shadow: 0 1px 4px rgba(0,0,0,.4);
box-shadow: 0 8px 24px -10px rgba(0,0,0,.65);
}
/* FATOS DA TRILHA no hero — duração e dificuldade em chips.
⚠ SEM USO DESDE 30/07/2026: os chips saíram do hero a pedido do Cauã (a tela
inicial ficou só com nome, data e convite). O CSS fica aqui porque o
componente é pequeno, está pronto e pode voltar — para reativar, basta
recolocar o
no index.html; o markup está descrito no
comentário que ficou no lugar dele.
Se decidirem que os chips não voltam, este bloco e a regra de .hero-facts na
media query de 640px podem ser apagados juntos. */
.hero-facts {
display: flex; flex-wrap: wrap; gap: .6rem;
margin-bottom: 1.6rem;
}
.hero-fact {
display: inline-flex; align-items: center; gap: .5rem;
padding: .5rem .95rem;
background: rgba(38,15,10,.6);
border: 1px solid rgba(250,247,243,.28);
border-radius: 50px;
font-size: .84rem; line-height: 1.35;
color: var(--c-cream);
backdrop-filter: blur(3px);
box-shadow: 0 6px 18px -8px rgba(0,0,0,.55);
}
.hero-fact svg { width: 17px; height: 17px; fill: var(--c-cream); flex-shrink: 0; opacity: .85; }
.hero-fact strong { font-weight: 700; color: #fff; }
/* Dificuldade: borda e ícone em terracota clareado (--c-terra-lt, a variante da
marca aprovada para acento SOBRE fundo escuro). É o aviso, não um alarme —
nada de vermelho, que não existe na paleta da fazenda. */
.hero-fact--alert {
border-color: rgba(232,242,234,.62);
background: rgba(125,64,48,.52);
}
.hero-fact--alert svg { fill: var(--c-terra-lt); opacity: 1; }
.hero-fact--alert strong { color: var(--c-terra-lt); }
/* Tamanho/peso/largura já eram os da LP-agenda; saiu só o text-shadow. */
.hero-text { font-size: clamp(1rem, 2.2vw, 1.12rem); font-weight: 400; max-width: 540px; margin-bottom: 1.8rem; opacity: .96; }
/* HERO MOBILE — o texto ocupa a largura toda, então aqui o scrim volta a ser
VERTICAL (o lateral do desktop não faria sentido). As sombras do texto saíram
junto com as do desktop, para bater com a LP-agenda: quem segura o contraste
aqui é o overlay, que continua denso atrás do bloco de texto. */
@media (max-width: 640px) {
.hero-overlay {
background:
linear-gradient(180deg, rgba(38,15,10,.62) 0%, rgba(38,15,10,.5) 34%, rgba(38,15,10,.72) 62%, rgba(38,15,10,.9) 100%);
}
/* ENQUADRAMENTO (mobile): a matemática do `cover` é dura — foto 3:2 dentro
de um hero ~9:19,5. A foto escala pela ALTURA, então só ~31% da largura
entra no quadro. Com a foto atual (1000px), o X em 42% recorta a faixa
entre ~290px e ~600px do original: é exatamente onde está o grupo de
caminhantes, que é o assunto. Mais à direita entraria só capim ao sol,
claro demais para segurar o texto branco. */
.hero-bg img { object-position: 42% 50%; }
/* Fatos da trilha: em 390px os dois chips não cabem lado a lado sem aperto —
cada um ocupa a própria linha e mantém o texto em uma linha só. */
.hero-facts { flex-direction: column; align-items: flex-start; gap: .5rem; }
.hero-text { opacity: 1; }
/* SEGUNDA METADE DA FRASE DO HERO — some no mobile, onde o bloco de texto
compete com a foto e a frase longa empurra o CTA para fora da dobra.
Vale para as duas LPs de evento (Café com Orquídeas desde 03/08/2026, A
Gosto de Caminhar desde 04/08/2026), e por isso a regra mora aqui e não
mais no cafe-com-orquideas.css.
Contrato do HTML: o span envolve o trecho descartável e a pontuação é
posicionada de modo que a versão CURTA também termine em frase fechada —
ou o mobile fica com travessão solto. É display:none, não remoção: o
texto continua no documento para buscador e leitor de tela. */
.hero-text .so-desktop { display: none; }
.hero-badge { text-shadow: none; }
/* Selo: no mobile o texto quebra em 2 linhas — alinha o ícone à primeira. */
.hero-selo { align-items: flex-start; }
.hero-selo svg { margin-top: .05rem; }
/* BLOCO ANCORADO NO PÉ DO HERO — as duas LPs de evento (04/08/2026).
O .hero é flex com align-items:center: centrado, ele divide a folga meio a
meio e metade vira um rodapé vazio embaixo do selo, que não serve para
nada. Com flex-end toda a folga sobe e vira FOTO visível acima do texto —
é o que "desce o conteúdo" no mobile, muito mais do que padding-top
conseguiria (medido na LP da trilha: eyebrow de 240px para 353px).
Ancorado no pé o bloco também nunca transborda: termina sempre a 2.5rem da
borda, e o que varia é quanta foto sobra em cima.
Estava só no cafe-com-orquideas.css desde 03/08/2026; com a trilha pedindo
o mesmo comportamento, subiu para cá sob .hero--evento. A página principal
tem regra equivalente própria, no style.css — não depende desta.
⚠ Vem depois de .hero--caminhar de propósito: mesma especificidade (0,2,0),
então é a ORDEM que faz o padding-bottom de 2.5rem vencer no mobile. */
.hero--evento { align-items: flex-end; }
.hero--evento .hero-content { padding-bottom: 2.5rem; }
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: stretch; }
/* Botões do hero um pouco menores que o padrão do site */
.hero-actions .btn { padding: .72rem 1.5rem; font-size: .74rem; }
/* O ghost cai sobre a foto na faixa em que o gradiente já está fraco; um vidro
escuro garante o contraste do rótulo branco e o alinha visualmente ao selo. */
.hero-actions .btn--ghost {
background: rgba(1,16,7,.42);
border-color: rgba(247,244,234,.55);
backdrop-filter: blur(3px);
box-shadow: 0 8px 22px -10px rgba(0,0,0,.55);
}
.hero-actions .btn--ghost:hover { background: rgba(1,16,7,.62); border-color: var(--c-cream); }
/* Selo 10% OFF na reserva direta — mesma família creme/terracota do resto do
hero (o dourado de antes era a única cor fora da paleta). */
.hero-selo {
display: inline-flex; align-items: center; gap: .7rem;
margin-top: 1.8rem; padding: .72rem 1.25rem;
background: rgba(38,15,10,.62);
border: 1px solid rgba(232,242,234,.5);
border-radius: 50px;
/* Sem line-height próprio: herda o 1.7 do body, como o selo da LP-agenda
(era 1.35 aqui). */
font-size: .88rem; letter-spacing: normal;
color: var(--c-cream);
backdrop-filter: blur(3px);
box-shadow: 0 8px 24px -8px rgba(0,0,0,.6);
}
.hero-selo svg { width: 26px; height: 26px; fill: none; stroke: var(--c-terra-lt); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.hero-selo strong { color: var(--c-terra-lt); font-weight: 700; }
/* ============ 7. SOBRE O EVENTO ============
Contida sobre o creme (respiro claro após o hero); foto alinhada ao
container do texto, com cantos arredondados — sem sangrar na borda.
Reaproveita as classes .day* da LP-agenda ("Um dia na fazenda"). */
.day { background: var(--c-cream); padding: var(--section-gap) 0; }
.day-inner { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
/* TEXTO ANTES DA FOTO NO MOBILE (04/08/2026)
No HTML a .day-media vem antes da .day-content, o que é certo no desktop:
lá são duas colunas e a foto fica AO LADO do texto. Mas abaixo de 900px a
grade vira uma coluna só e a ordem do HTML passa a ser a ordem de leitura —
a foto ia inteira na frente do título.
Medido em 390px antes da correção: o título aparecia 491px depois do topo da
seção na principal e no Café com Orquídeas, 326px na A Gosto de Caminhar.
Quase uma tela de foto antes de a pessoa saber do que a seção trata.
Não era decisão de design: não havia nenhuma regra `order` no projeto, era
só o HTML aparecendo quando o grid colapsa.
Vale para as TRÊS páginas de uma vez — todas usam .day-inner (na principal é
"Um dia na fazenda"; nas LPs de evento é a seção "O evento"). O desktop não
muda: a partir de 900px o `order` volta ao natural, logo abaixo. */
.day-content { order: -1; }
/* Proporção 4:3, não o 4:5 herdado. O 4:5 (retrato) servia à foto da sala com
orquídeas do Café com Orquídeas; aqui a foto é uma aérea PAISAGEM do vale
(1600x900), e um recorte retrato jogaria fora justamente a largura do vale,
que é o assunto. 4:3 ainda dá altura suficiente para equilibrar a coluna de
texto ao lado, no desktop. */
.day-media {
aspect-ratio: 4/3; border-radius: 10px; overflow: hidden;
box-shadow: 0 18px 44px -20px rgba(46,18,12,.4);
}
.day-content { max-width: 640px; }
.day-content h2 { font-size: clamp(1.9rem, 5.5vw, 2.7rem); margin-bottom: 1.3rem; }
.day-content p { color: var(--c-muted); margin-bottom: 1.1rem; font-size: 1.02rem; }
.day-content p:last-child { margin-bottom: 0; }
/* ============ 8. PROGRAMAÇÃO DOS 2 DIAS ============
Um card por dia (sábado / domingo — o evento é 22 e 23/08). Enquanto a
grade oficial não chega, o leva o modificador .schedule--draft e cada
card exibe linhas "a definir"; ao receber, o
cresce com quantos itens a grade tiver e o modificador sai. */
.schedule { padding: var(--section-gap) 0; background: var(--c-sand); }
.schedule-grid { display: grid; grid-template-columns: 1fr; gap: 1.4rem; }
.schedule-day {
display: flex; flex-direction: column;
background: var(--c-white); border-radius: var(--radius);
box-shadow: 0 10px 40px rgba(46,18,12,.06);
overflow: hidden;
}
.schedule-head {
padding: 1.3rem 1.6rem;
background: var(--c-forest); color: #fff;
}
.schedule-weekday {
font-size: .74rem; letter-spacing: normal;
color: var(--c-terra-lt); font-weight: 700; margin-bottom: .1rem;
}
.schedule-date { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 400; line-height: 1.25; }
.schedule-body { padding: 1.6rem; flex: 1; display: flex; flex-direction: column; }
.schedule-list { display: flex; flex-direction: column; }
.schedule-list li {
display: flex; gap: .9rem; align-items: baseline;
padding: .7rem 0; border-bottom: 1px solid var(--c-line);
color: var(--c-muted); font-size: .95rem;
}
.schedule-list li:last-child { border-bottom: none; }
.schedule-time {
flex-shrink: 0; min-width: 3.9rem;
font-weight: 700; color: var(--c-terra-dk); font-size: .88rem;
letter-spacing: .04em;
}
/* ---- SINALIZAÇÃO DE RASCUNHO ----------------------------------------
O cliente é rígido com precisão: a grade provisória NÃO pode ser
confundida com programação oficial. Tudo abaixo existe só para deixar
isso explícito e sai junto com o modificador .schedule--draft. */
.schedule-draft-note {
max-width: 760px; margin: 0 auto 2rem;
padding: 1rem 1.3rem 1rem 3.1rem; position: relative;
background: rgba(0,73,29,.08);
border: 1px dashed var(--c-terra);
border-radius: var(--radius);
color: var(--c-terra-dk); font-size: .95rem; line-height: 1.55;
}
/* "!" desenhado em CSS — nada de emoji, que varia entre sistemas */
.schedule-draft-note::before {
content: '!'; position: absolute; left: 1.15rem; top: 1.05rem;
width: 20px; height: 20px; border-radius: 50%;
background: var(--c-terra); color: #fff;
font-size: .8rem; font-weight: 700; line-height: 20px; text-align: center;
}
.schedule-draft-note strong { color: var(--c-terra-dk); font-weight: 700; }
/* Cabeçalho do dia em rascunho: hachura sobre o verde, para o card não
ter o mesmo peso visual de uma programação fechada. */
.schedule--draft .schedule-head {
background:
repeating-linear-gradient(135deg,
rgba(255,255,255,.07) 0, rgba(255,255,255,.07) 8px,
transparent 8px, transparent 16px),
var(--c-forest);
}
.schedule--draft .schedule-day { border: 1px dashed var(--c-terra); box-shadow: none; }
.schedule-tag {
display: inline-block; margin-top: .6rem; padding: .18rem .6rem;
background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4);
border-radius: 50px;
font-size: .62rem; letter-spacing: normal;
font-weight: 700; color: #fff;
}
/* Horário provisório e linha ainda sem conteúdo definido */
.schedule--draft .schedule-time { color: var(--c-muted); font-weight: 400; font-style: italic; }
.schedule--draft .schedule-open { color: var(--c-muted); font-style: italic; }
/* Faixa "O que já está confirmado" — o que temos de concreto até a grade chegar */
.schedule-confirmed {
background: var(--c-white); border-radius: var(--radius);
padding: 2.2rem; margin-top: 2.4rem;
}
.schedule-confirmed h3 { font-size: 1.35rem; margin-bottom: 1rem; }
/* ============ 9. A TRILHA (faixa escura) ============
Bloco .walk herdado da LP-agenda (texto + moldura de mídia) — e aqui ele
volta à função original: falar da caminhada. A moldura 9:16 recebe o VÍDEO
real da trilha da fazenda.
A variante .walk--expo (moldura 4:3 para as obras da exposição do Allan Pin)
foi REMOVIDA junto com a seção — era exclusiva do Café com Orquídeas. */
.walk { background: var(--c-ink); color: var(--c-white); padding: var(--section-gap) 0; overflow: hidden; }
.walk-inner { display: grid; grid-template-columns: 1fr; gap: 2.6rem; align-items: center; }
/* min-width:0 deixa as colunas do grid encolherem e o texto quebrar (evita overflow no mobile) */
.walk-inner > * { min-width: 0; }
.walk-content { max-width: 560px; }
.walk-content h2 { font-size: clamp(1.9rem, 5.5vw, 2.7rem); margin-bottom: 1.2rem; }
.walk-content p { color: rgba(250,247,243,.82); margin-bottom: 1.1rem; font-size: 1.02rem; }
.walk-caption { font-size: .9rem; color: rgba(250,247,243,.6); font-style: italic; }
.walk-content .btn { margin-top: .6rem; }
.walk-media { display: flex; justify-content: center; }
/* Moldura de mídia — retrato (9:16) por padrão, como uma "janela" para a mata */
.walk-frame {
position: relative; width: 100%; max-width: 420px; aspect-ratio: 9/16;
border-radius: 10px; overflow: hidden;
box-shadow: 0 24px 60px rgba(0,0,0,.45);
border: 1px solid rgba(250,247,243,.14);
}
.walk-frame picture, .walk-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* VÍDEO da trilha na moldura — mesma regra das imagens: preenche o 9:16 sem
distorcer. O vídeo é 900x1600 (exatamente 9:16), então não há corte.
O poster é atributo nativo do