/* ===================================================================
   PRINCIPAL (hub da agenda) — folha ESPECÍFICA desta página
   Fazenda dos Cordeiros - 03/08/2026

   Carregada DEPOIS de base.css: o que estiver aqui vence o compartilhado.
   Esta página não é uma LP de evento — é o HUB da agenda. Por isso ela tem
   seções que as outras duas não têm (Temas, Experiências, Eventos 2026,
   Escolas e Grupos, o carrossel das fases do café), e é esse conjunto que
   justifica a folha ser maior que a da Café com Orquídeas.

   PODA DE 03/08/2026 — saíram daqui 31 seletores que só repetiam o base e,
   por carregarem depois, o VENCIAM: qualquer ajuste no compartilhado parava
   na porta desta página. Saíram:

     · h1–h4, .brand-mark, .hero-title, .faq-item summary — pediam peso 700
       numa fonte (Bree Serif) que só tem 400: negrito sintetizado;
     · .ph, .btn--terra:hover, .site-header.scrolled .nav-bar, .nav a,
       body.menu-open (todas as variantes), .hero-bg .ph-label, .hero-selo,
       .hero-actions, .hero-content .eyebrow, .day-media, .walk-content p,
       .walk-caption, .walk-frame, .walk-video, .walk-ph, .testimonials,
       .footer-social .social-mail:hover, .footer-bottom-inner, e os blocos
       de posicionamento de mídia (.day-media > picture, .hero-bg picture…)
       — idênticos ao base a menos de deriva de cor nascida de as três
       páginas terem crescido em paralelo. O base é a fonte da verdade;
     · TODA a galeria e TODO o lightbox (.gallery, .gallery-grid,
       .gallery-item, .lightbox*) — ver o bloco logo abaixo.

   O QUE FICOU: as seções que só existem no hub, mais os poucos ajustes de
   foto/enquadramento que são desta página.
   =================================================================== */


/* ============ GALERIA E LIGHTBOX: NADA AQUI, DE PROPÓSITO ============
   Esta página tinha galeria e lightbox PRÓPRIOS: grade de linhas
   justificadas (flex + `style="flex:..."` inline em cada <figure>) e um
   lightbox .lightbox/.lightbox-img/.lightbox-nav, servido por um módulo
   Lightbox que morava no script.js daqui.

   Em 03/08/2026 o Lightbox foi para o main.js compartilhado — mas a
   MARCAÇÃO desta página não foi junto. O módulo compartilhado procura
   #galleryGrid e .gallery-btn; aqui havia <figure> sem botão nenhum. Efeito
   prático: a galeria virou um mural estático, sem clique, e ninguém viu,
   porque nada dá erro no console — o módulo simplesmente não encontra a
   grade e desiste em silêncio.

   O conserto foi migrar a marcação (index.html) para a das outras duas
   páginas. Com isso, .gallery, .gallery-grid, .gallery-item, .gallery-btn,
   .gallery-lupa e todo o .lb vêm do base.css e as três galerias passam a
   ser literalmente o mesmo componente.

   ⚠ MUDANÇA VISÍVEL: a grade daqui deixou de ser linhas justificadas e
   passou a ser o mosaico em CSS columns do compartilhado (2 colunas no
   mobile, 3 no desktop) — o mesmo das outras duas. As proporções inline
   (`flex:150 1 405px`) sumiram com os <figure>; quem controla a altura de
   cada foto agora é a proporção real da imagem.

   NÃO reabra .gallery-grid aqui para "voltar ao layout antigo": isso
   quebraria de novo o alinhamento entre as três páginas, que é o ponto. */


/* ============ HERO — enquadramento da foto do vale ============
   VOLTOU para hero-vale-aereo em 03/08/2026, depois de uma passagem pela
   galeria-casa-fachada. Fica o registro do porquê, que é a parte útil:

   A casa-fachada é uma foto de fachada BRANCA, e o texto do hero cai em cima
   dela. Foram seis rodadas de ajuste — brightness de 1,00 a 0,51, escurecimento
   gravado no próprio arquivo, scrim reforçado três vezes — e o título continuava
   difícil de ler. O diagnóstico só apareceu quando medimos POSIÇÃO em vez de
   brilho: o título ocupa de 11% a 61% da largura, e o scrim já tinha caído para
   0,63 no fim dele, bem sobre a parede branca. Dava para consertar alargando o
   scrim, mas o custo era velar justamente a fachada que se queria mostrar.

   A medição que já existia no projeto tinha dito isso desde o começo (overlay
   mínimo para o texto branco atingir AA):
     casa-sede-mata …… 79% desktop / 82% mobile  (o pior do acervo)
     vale-aereo ……….  0% desktop / 25% mobile  (o melhor do acervo)

   LIÇÃO, para a próxima vez que alguém quiser trocar o hero: o que decide não é
   se a foto é bonita, é o que está ATRÁS DO TEXTO. Mata escura e uniforme aceita
   texto branco sem véu nenhum; parede branca não aceita com véu nenhum.

   ── 04/08/2026: A CASA-FACHADA VOLTOU, a pedido, com escurecimento ──────────
   O pedido veio junto com a solução ("escureça um pouco para ler as letras"),
   então desta vez o caminho foi outro: em vez de reforçar o scrim — que foi o
   que falhou nas seis rodadas acima, porque o véu morria antes do fim do
   título — o escurecimento é `brightness` na PRÓPRIA imagem. Ele age no quadro
   inteiro, então não existe "ponto onde o véu acabou".

   O valor saiu de medição, não de tentativa. Com a foto sem escurecer, o ponto
   mais claro atrás do texto dava 2,33:1 contra o branco (o mínimo legível é
   4,5:1). Como a luminância escala com a gamma do sRGB (≈ brightness^2,4):
     0,75 → 4,2:1   ainda reprova
     0,70 → 4,8:1   passa no mínimo
     0,65 → 5,5:1   folga
     0,60 → 6,3:1   quase AAA   ← escolhido
     0,55 → 7,2:1   AAA, mas a foto começa a virar silhueta
   Ficou 0,60: é o ponto em que o texto fica confortável e a casa ainda se lê
   como casa. Ao mexer, refaça a conta — 0,75 para cima REPROVA nesta foto.

   ⚠ O escurecimento NÃO pode ser feito pelo .hero-overlay nesta página: ele é
   pintado ATRÁS da foto, porque `.hero-bg > picture` tem z-index:1 e o overlay
   não tem z-index nenhum. Corrigir isso foi tentado e revertido a pedido em
   04/08 — enquanto continuar assim, quem escurece o hero é este filtro.

   A foto é 1400x933 (a anterior, vale-aereo, era 1600x900): em telas largas
   ela amplia um pouco. Ao trocar o hero: medir antes, e trocar nos TRÊS pontos
   do HTML (background-image inline, <source> webp e <img>). */
.hero-bg img { object-position: center; filter: brightness(.60) saturate(1.05); }

/* Overlay MUITO mais leve que o do base. O scrim de lá é um scrim lateral
   denso, calibrado para hero com área clara; aqui basta um véu, com reforço
   suave à esquerda, onde fica o texto.
   ⚠ Se o hero desta página voltar a ter área clara atrás do texto, é ESTE
   bloco que precisa subir de novo — não text-shadow: o WCAG 1.4.3 mede cor
   do texto contra o fundo e ignora sombra. */
.hero-overlay {
  background:
    linear-gradient(180deg, rgba(12,17,9,.10) 0%, rgba(12,17,9,.14) 45%, rgba(12,17,9,.38) 100%),
    linear-gradient(90deg, rgba(12,17,9,.34) 0%, rgba(12,17,9,.16) 55%, rgba(12,17,9,0) 78%);
}

@media (max-width: 640px) {
  /* Mesmo raciocínio no mobile: o scrim denso (0.62→0.90) do base vinha da
     época do hero com a casa-sede e a parede branca. */
  .hero-overlay {
    background:
      linear-gradient(180deg, rgba(1,16,7,.30) 0%, rgba(1,16,7,.26) 34%, rgba(1,16,7,.40) 62%, rgba(1,16,7,.54) 100%);
  }
}

/* Mídia da seção "Um dia na fazenda": retrato (4/5) em vez do 4/3 do base.
   Só a proporção muda; raio e sombra vêm do compartilhado. */
.day-media { aspect-ratio: 4/5; }

/* Contêineres de mídia que só existem nesta página (o base cobre .hero-bg e
   .day-media; estes quatro são das seções do hub). */
.groups-media, .event-img { position: relative; }
.groups-media > picture { position: absolute; inset: 0; }
.groups-media picture, .event-img picture { display: block; width: 100%; height: 100%; }
.groups-media img, .event-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-img { overflow: hidden; }


/* ============ BOTÃO DOURADO ============
   CTA da faixa "Agenda 2026 completa", sobre fundo verde. Só existe aqui —
   nas LPs de evento o CTA é o verde institucional do base. */
.btn--gold { background: #e6bb4f; color: #2b2410; box-shadow: 0 8px 22px -8px rgba(0,0,0,.4); }
.btn--gold:hover {
  background: #f0cd6a; transform: translateY(-3px);
  box-shadow: 0 16px 34px -10px rgba(0,0,0,.45);
}

/* ============ .so-mobile — trecho que SÓ aparece no celular ============
   Par inverso do .so-desktop (que vive no base.css e some abaixo de 640px).
   Existe por causa do parágrafo do hero desta página, que tem versão longa no
   desktop e curta no mobile: o .so-mobile carrega o "A" maiúsculo que abre a
   versão curta. Ver o comentário no index.html, no próprio <p class="hero-text">.
   Fica escondido por padrão e só liga no @media abaixo — assim um trecho novo
   marcado com esta classe nunca vaza para o desktop por esquecimento. */
.so-mobile { display: none; }

/* Header enxuto no mobile: o .brand-sub daqui é curto ("MATA ATLÂNTICA ·
   SILVA JARDIM, RJ") e aguenta o tracking cheio, ao contrário do das LPs de
   evento, que carregam nome + data. */
@media (max-width: 640px) {
  .brand-sub { font-size: .46rem; letter-spacing: .08em; }
  .so-mobile { display: inline; }

  /* Empilhados, os dois botões da #a-fazenda ficavam com larguras diferentes
     (o rótulo de um é mais longo) e centrados isso lia como desalinho. */
  .intro-actions .btn { width: 100%; }

  /* HERO MOBILE — parágrafo encurtado e bloco descido.

     1. O PARÁGRAFO VOLTOU AO MOBILE em 04/08/2026, mas ENCURTADO.
        Entre 03 e 04/08 ele saía inteiro da tela (`display:none` nesta linha),
        e o custo estava anotado aqui: o celular ficava sem nenhuma frase
        explicando o que a fazenda é — do título ia direto para os botões.
        Agora aparece só o miolo, a pedido: "A vida rural simples e tranquila,
        o café colhido na terra, a floresta preservada." O corte é feito no
        HTML, com <span class="so-desktop"> / <span class="so-mobile"> no
        próprio parágrafo (ver o comentário lá, no index.html).
        Em linhas: eram 4 (~140px) com a frase inteira, agora são ~3. O bloco
        ancora no pé (item 2), então ele cresce PARA CIMA e não empurra o CTA
        nem o selo para fora da tela — o que varia é quanta foto sobra acima.

     2. O BLOCO ANCORA NO PÉ DO HERO, em vez de ficar centrado.
        O .hero é flex com align-items:center: o espaço livre é dividido meio a
        meio, em cima e embaixo. Isso desperdiça foto — metade da folga fica num
        rodapé vazio, embaixo do selo, onde não serve para nada.
        Com flex-end toda a folga sobe e vira FOTO visível acima do texto, que é
        o que se quer num hero de mobile: a imagem estabelece o lugar, o texto
        entra por baixo.

        Isto também elimina o risco de transbordar, que as tentativas anteriores
        tinham. Empurrar de baixo para cima (padding-top de 190px, depois 17svh)
        fazia o bloco crescer, e num iPhone SE (667px) o selo saía da tela.
        Ancorado no pé, o bloco NUNCA passa do hero: ele termina sempre a 2,5rem
        da borda, e quem varia é só quanta foto sobra em cima — mais em tela
        alta, menos em tela baixa, que é o comportamento certo. */
  .hero { align-items: flex-end; }
  .hero-content { padding-top: var(--header-h); padding-bottom: 2.5rem; }
}


/* ============ A FAZENDA — APRESENTAÇÃO (seção #a-fazenda) ============
   Entra logo abaixo do hero, no lugar da antiga .themes. A seção .day que vem
   depois é creme; esta segue em bege (--c-sand) para as duas não encostarem
   com o mesmo fundo — é a única coisa que sobreviveu da seção anterior.

   TEXTO, NÃO CARTÃO. Os três blocos são colunas de leitura: sem foto, sem
   borda, sem sombra e sem hover. É proposital — logo abaixo vêm a §3 (foto
   grande + narrativa) e a §4 (nove cartões com foto). Se esta seção também
   fosse de cartões, o topo da página viraria três faixas de cartão seguidas,
   e a apresentação perderia justamente o ar de quem está contando algo.

   SAIU DAQUI em 04/08/2026 o bloco .themes/.theme-* (~80 linhas: cartão,
   foto 16/9, .theme-for, lista com bolinha, preço, hover do <span class="btn">
   e o .themes-foot). Foi removido junto com a seção, e não desativado: regra
   de componente que não existe mais só engorda a folha e confunde quem lê.
   Está no histórico do git se um dia voltar — commit da sessão de 04/08. */

.intro { padding: var(--section-gap) 0; background: var(--c-sand); }

/* Uma coluna no mobile; as três só entram lado a lado no desktop, lá embaixo.
   O filete de cima separa as frentes sem fechar cada uma numa caixa. */
.intro-grid { display: grid; grid-template-columns: 1fr; gap: 2.2rem; }

.intro-col { border-top: 2px solid var(--c-terra); padding-top: 1.1rem; }

.intro-col h3 { font-size: 1.3rem; margin-bottom: .6rem; }

.intro-col p { color: var(--c-muted); line-height: 1.7; font-size: .98rem; }

.intro-foot {
  margin-top: 2.4rem; text-align: center;
  font-size: 1.02rem; color: var(--c-text); line-height: 1.6;
}

/* Centralizados sob o .section-head, que também é centrado. O wrap é o que
   segura os dois botões no mobile, onde não cabem lado a lado. */
.intro-actions {
  display: flex; flex-wrap: wrap; gap: .9rem;
  justify-content: center; align-items: center;
  margin-top: 1.4rem;
}


/* ============ EXPERIÊNCIAS ============ */

.experiences { padding: var(--section-gap) 0; }

/* Cards com FOTO (feedback do cliente: "mergulho visual" — cada serviço com foto
   de alguém participando). Foto 3:2 (cover) + título + descrição. */

.exp-grid { display: grid; grid-template-columns: 1fr; gap: 1.4rem; }

.exp-card {
  background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s, border-color .4s;
}

.exp-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(1,58,23,.1); border-color: var(--c-forest-soft); }

.exp-img { aspect-ratio: 3/2; position: relative; overflow: hidden; }

.exp-img picture, .exp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.exp-img img { transition: transform .5s var(--ease); }

.exp-card:hover .exp-img img { transform: scale(1.05); }

.exp-body { padding: 1.3rem 1.5rem 1.6rem; }

/* Card SEM FOTO — SEM USO hoje: os 9 cards estão com foto (seis provisórias, do
   acervo da fazenda). Fica aqui como a alternativa para quando um card novo
   entrar sem nenhuma foto que sirva: em vez do retângulo vazio, abre pelo
   TÍTULO. Basta pôr `exp-card--sem-foto` no <li> e tirar a div .exp-img. */

.exp-card--sem-foto { background: var(--c-sand); }

.exp-card--sem-foto .exp-body {
  height: 100%; padding: 1.9rem 1.5rem;
  display: flex; flex-direction: column; justify-content: center;
  border-left: 3px solid var(--c-terra);
}

.exp-card--sem-foto h3 { font-size: 1.5rem; }

.exp-card h3 { font-size: 1.35rem; margin-bottom: .5rem; }

.exp-card p { color: var(--c-muted); font-size: .98rem; }


/* ============ FAIXA ESCURA — variante CAFÉ (carrossel das fases) ============
   O .walk e a .walk-frame 9:16 vêm do base. Aqui entra só a variante paisagem
   e o carrossel, que são desta página. */

/* Variante paisagem (16:9) — peças com narração, ex.: vídeo das fases do café */

.walk--cafe .walk-frame { max-width: 100%; aspect-ratio: 16/9; }

/* Carrossel de fotos (As fases do café) — scroll-snap nativo + setas via JS */

.cafe-carousel {
  position: relative; width: 100%; border-radius: 10px; overflow: hidden;
  box-shadow: 0 18px 44px -20px rgba(0,0,0,.6);
}

.carousel-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar { display: none; }

.carousel-slide {
  flex: 0 0 100%; scroll-snap-align: center;
  aspect-ratio: 4/3; position: relative; overflow: hidden;
}

.carousel-slide picture, .carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.carousel-slide.ph-slide {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 1.2rem; background: var(--c-ink-soft);
  border: 1px dashed rgba(250,247,243,.22);
}

.carousel-slide.ph-slide .ph-label { color: rgba(250,247,243,.66); font-size: .74rem; letter-spacing: normal; }

.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; z-index: 2; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(18,22,14,.55); border: 1px solid rgba(250,247,243,.28); color: #fff;
  transition: background .25s var(--ease), transform .25s var(--ease);
}

.carousel-arrow:hover { background: rgba(18,22,14,.85); }

.carousel-arrow:active { transform: translateY(-50%) scale(.94); }

.carousel-prev { left: 12px; }

.carousel-next { right: 12px; }

.carousel-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


/* ============ EVENTOS 2026 ============ */

.events { padding: var(--section-gap) 0; background: var(--c-sand); }

/* Flex com wrap + centro: a última linha (2 cards) fica centralizada,
   sem deixar célula vazia à direita como no grid 3+2. */

.events-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.8rem; margin-bottom: 3rem; }

.event-card {
  background: var(--c-white); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 10px 40px rgba(1,58,23,.06);
  transition: transform .4s var(--ease), box-shadow .4s;
  display: flex; flex-direction: column;
  flex: 0 1 100%;
}

.event-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(1,58,23,.13); }

.event-img { aspect-ratio: 16/9; }

.event-body { padding: 1.8rem; display: flex; flex-direction: column; flex: 1; }

.event-body--center { justify-content: center; text-align: center; }

.event-date {
  font-size: .74rem; letter-spacing: normal;
  color: var(--c-forest); font-weight: 700; margin-bottom: .5rem;
}

.event-body h3 { font-size: 1.6rem; margin-bottom: .6rem; }

.event-desc { color: var(--c-muted); font-size: .95rem; margin-bottom: 1.2rem; }

.event-prices { border-top: 1px solid var(--c-line); margin-bottom: 1.4rem; }

.event-prices li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .55rem 0; border-bottom: 1px solid var(--c-line);
  font-size: .92rem; color: var(--c-muted);
}

/* O <strong> é serifado (Bree Serif, peso único 400): o destaque do preço vem
   do TAMANHO e da cor, não do peso — pedir 700 aqui sintetizaria o negrito. */
.event-prices strong { font-family: var(--font-serif); font-size: 1.15rem; color: var(--c-text); }

.event-body .btn { margin-top: auto; }

/* Badge terracota (ex.: "Trilha de 2h · dificuldade média") */

.event-badge {
  display: inline-block; align-self: flex-start;
  margin-bottom: .9rem; padding: .3rem .7rem;
  background: rgba(162,86,65,.1); color: var(--c-terra-dk);
  border: 1px solid rgba(162,86,65,.3); border-radius: 50px;
  font-size: .72rem; letter-spacing: normal; font-weight: 700;
}

/* Aviso "consulte pelo WhatsApp" (cards sem tarifa)
   SEM USO desde 03/08/2026: o Dia das Crianças era o único card sem tarifa e
   saiu da agenda. Mantido, como o .exp-card--sem-foto, para o próximo evento
   que entrar antes de ter valores fechados. */

.event-consult {
  margin: 0 0 1.4rem; padding-top: 1rem;
  border-top: 1px solid var(--c-line);
  color: var(--c-muted); font-size: .95rem;
}

.event-consult strong { color: var(--c-terra-dk); font-weight: 700; }

/* Lista de destaques (cards sem tarifa) — preenche o card com a mesma estrutura
   de linhas das tarifas, evitando espaço em branco.
   SEM USO desde 03/08/2026, pelo mesmo motivo do .event-consult acima. */

.event-highlights { border-top: 1px solid var(--c-line); margin-bottom: 1.4rem; }

.event-highlights li {
  position: relative; padding: .6rem 0 .6rem 1.4rem;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-muted); font-size: .95rem;
}

.event-highlights li::before {
  content: ''; position: absolute; left: 0; top: .95rem;
  width: 6px; height: 6px; border-radius: 50%; background: var(--c-terra);
}

/* Botão secundário para a página própria do evento, logo abaixo do de reserva.
   Só aparece nos dois eventos que têm página (agosto e setembro).
   Vem em .btn--outline-green: pesa menos que o verde sólido do "Reservar",
   mas continua sendo botão — o link de texto que estava aqui antes passava
   despercebido embaixo de um botão de largura cheia. */

.event-page-btn {
  margin-top: .7rem;
  font-size: .76rem; padding: .82rem 1.4rem;
}

.event-page-btn::after { content: " →"; }

/* Título do card vira link nos eventos que têm página — o card inteiro fica
   clicável no ponto onde a pessoa naturalmente mira. Herda a cor do h3, então
   não muda nada visualmente até o hover. */

.event-body h3 a { transition: color .3s var(--ease); }

.event-body h3 a:hover { color: var(--c-terra); }

/* Faixa (banner) da agenda completa — horizontal, abaixo do grid de eventos */

.events-banner {
  display: flex; flex-direction: column; gap: 1.1rem;
  align-items: center; text-align: center;
  background: var(--c-forest); color: #fff;
  border-radius: var(--radius);
  padding: 2rem 1.8rem; margin-top: 2.4rem;
}

.events-banner .eyebrow { color: #ecd0a2; margin-bottom: .35rem; }

.events-banner-text { max-width: 720px; }

.events-banner-text p { color: rgba(255,255,255,.85); font-size: 1.02rem; }

.events-banner .btn { flex-shrink: 0; }

.events-info {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
  background: var(--c-white); border-radius: var(--radius); padding: 2.2rem;
}


/* ============ ESCOLAS E GRUPOS ============ */

.groups { display: grid; grid-template-columns: 1fr; background: var(--c-ink); color: #fff; }

.groups-content { padding: var(--section-gap) 22px; max-width: 640px; }

.groups-content h2 { font-size: clamp(1.9rem, 5.5vw, 2.7rem); margin-bottom: 1.3rem; }

.groups-content > p { color: rgba(255,255,255,.78); margin-bottom: 1.1rem; }

.groups-content .check-list { margin: 1.4rem 0 2rem; }

.groups-media { min-height: 46vh; }


/* ============ PRÊMIOS (aguardando material) ============
   Estilos mantidos para a seção comentada no HTML — descomentar quando o
   cliente enviar prêmios e selos. (.testimonials saiu daqui: é idêntica à do
   base, que já serve as três páginas.) */

.awards { padding: 5rem 0; }

.awards-grid { display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: center; }

.award-item { padding: 1.4rem 2rem; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); color: var(--c-muted); }


/* ============ MEDIA QUERIES ============ */

/* --- Tablet --- */

@media (min-width: 600px) {
  .exp-grid { grid-template-columns: repeat(2, 1fr); }
  .event-card { flex-basis: calc((100% - 1.8rem) / 2); }
  .events-banner { flex-direction: row; justify-content: space-between; text-align: left; padding: 2.2rem 2.6rem; gap: 2.2rem; }
  .events-banner-text { align-items: flex-start; }
}

@media (min-width: 900px) {
  /* As três frentes da apresentação lado a lado. Abaixo disto elas empilham:
     em duas colunas os textos ficariam com medida curta demais para ler. */
  .intro-grid { grid-template-columns: repeat(3, 1fr); gap: 2.6rem; }
}

/* --- Desktop --- */

@media (min-width: 960px) {
  .exp-grid { grid-template-columns: repeat(3, 1fr); }
  /* EVENTOS: 2 POR LINHA no desktop, não 3.
     A agenda tem QUATRO eventos. Com 3 por linha sobrava um sozinho na segunda
     fila — centralizado pelo justify-content, mas ainda assim um órfão largo no
     meio da página, que fazia a seção parecer inacabada.
     Em 2 por linha os quatro fecham um bloco 2x2 exato, sem sobra. E os cards
     ganham largura, o que importa aqui: cada um carrega tabela de preços com
     três linhas e até dois botões — a 1/3 da largura os rótulos começavam a
     quebrar.
     ⚠ Isto depende da CONTAGEM de eventos. Com 3 ou 6 na agenda, `/3` volta a
     ser a divisão certa; com 5, nenhuma fecha — nesse caso o menos ruim é /3 e
     deixar dois na última linha, não um. Conferir ao mexer na agenda. */
  .event-card { flex-basis: calc((100% - 1.8rem) / 2); }
  .groups { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .groups-media { min-height: 100%; }
  .groups-content { padding: var(--section-gap) 5rem; margin: auto 0; }
  /* Variante paisagem ocupa a coluna inteira (não usa o teto de 460px do retrato) */
  .walk--cafe .walk-frame { max-width: 620px; }
  /* Carrossel do café: imagem um pouco menor; texto com folga p/ o título caber inteiro */
  .walk--cafe .walk-inner { grid-template-columns: .98fr 1.02fr; gap: 2.6rem; }
  /* estende o lado esquerdo da moldura p/ a esquerda, sem reduzir a coluna do texto */
  .walk--cafe .cafe-carousel { margin-right: 0; margin-left: -30px; }
}