/* ==========================================================================
   Connecta Chefs — Landing Page
   Design tokens extraídos da identidade visual do @connectachefsoficial
   Ver /_docs/CLAUDE.md para o mapa completo de seções e imagens.
   ========================================================================== */

/* Fontes auto-hospedadas (out/2026) — antes vinham do CDN do Google Fonts.
   Outfit e Inter são fontes variáveis: o Google serve só 2 arquivos por
   família (latin + latin-ext, cobre acentuação do português) e repete a
   mesma URL para os pesos 400/500/600/700 — o navegador interpola o peso
   certo a partir da fonte variável. Isso é comportamento normal do Google
   Fonts pra fontes variáveis, não duplicação por engano — mantido igual
   aqui para não mudar nada visualmente. Ver /_docs/CLAUDE.md. */
@font-face{
  font-family:"Outfit";font-style:normal;font-weight:500 700;font-display:swap;
  src:url("../fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Outfit";font-style:normal;font-weight:500 700;font-display:swap;
  src:url("../fonts/outfit-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --cc-green-950:#1c1e10;
  --cc-green-900:#262914;
  --cc-green-800:#343819;
  --cc-green-700:#3f4423;
  --cc-green-600:#565c30;
  --cc-gold-600:#a97a3f;
  --cc-gold-500:#c2914f;
  --cc-gold-300:#dcb37c;
  --cc-gold-100:#f0dfc2;
  --cc-cream-100:#faf3e6;
  --cc-cream-50:#fdf9f1;
  --cc-white:#ffffff;
  --cc-ink:#221f18;
  --cc-ink-soft:#5a5748;

  --cc-radius-sm:.5rem;
  --cc-radius-md:1rem;
  --cc-radius-lg:1.75rem;
  --cc-shadow-soft:0 10px 30px -12px rgba(34,31,24,.25);
  --cc-shadow-card:0 20px 45px -18px rgba(34,31,24,.35);

  --cc-ease:cubic-bezier(.22,1,.36,1);
  --cc-font-display:"Outfit", "Poppins", sans-serif;
  --cc-font-body:"Inter", sans-serif;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

html{scroll-behavior:smooth;}
body{
  font-family:var(--cc-font-body);
  color:var(--cc-ink);
  background:var(--cc-cream-50);
}
h1,h2,h3,h4,.font-display{
  font-family:var(--cc-font-display);
  font-weight:600;
  letter-spacing:-.01em;
}
.text-gold{color:var(--cc-gold-500)!important;}
.bg-green-900{background:var(--cc-green-900)!important;}
.bg-cream{background:var(--cc-cream-100)!important;}
.text-green-800{color:var(--cc-green-800)!important;}

a{color:var(--cc-green-700);}
a:hover{color:var(--cc-gold-600);}

/* Skip link */
.skip-link{
  position:absolute;left:-999px;top:0;z-index:2000;
  background:var(--cc-green-900);color:#fff;padding:.75rem 1.25rem;
  border-radius:0 0 .5rem 0;
}
.skip-link:focus{left:0;}

/* Focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,
.nav-link:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--cc-gold-500);
  outline-offset:2px;
  border-radius:4px;
}

/* ---------------- Buttons ---------------- */
.btn{
  font-family:var(--cc-font-display);
  font-weight:600;
  border-radius:50px;
  padding:.75rem 1.6rem;
  transition:transform .25s var(--cc-ease), box-shadow .25s var(--cc-ease), background-color .2s ease, color .2s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-gold{
  background:var(--cc-gold-500);
  border-color:var(--cc-gold-500);
  color:var(--cc-green-950);
  box-shadow:0 10px 25px -10px rgba(194,145,79,.7);
}
.btn-gold:hover{background:var(--cc-gold-600);border-color:var(--cc-gold-600);color:#fff;}
.btn-outline-cream{
  border:1.5px solid rgba(255,255,255,.55);
  color:#fff;
}
.btn-outline-cream:hover{background:rgba(255,255,255,.12);color:#fff;}
.btn-green{
  background:var(--cc-green-800);border-color:var(--cc-green-800);color:#fff;
}
.btn-green:hover{background:var(--cc-green-900);border-color:var(--cc-green-900);color:#fff;}
.btn-outline-green{
  border:1.5px solid var(--cc-green-700);color:var(--cc-green-800);
}
.btn-outline-green:hover{background:var(--cc-green-800);border-color:var(--cc-green-800);color:#fff;}
.btn-whatsapp{
  background:#25D366;border-color:#25D366;color:#0b3d1e;
}
.btn-whatsapp:hover{background:#1fb958;color:#fff;}

/* ---------------- Logo (arquivo oficial, logo_oficial-branca.png) ---------------- */
.cc-logo-link{display:inline-flex;text-decoration:none;}
.cc-logo-img{height:64px;width:auto;display:block;} /* 34px base -> 43px (+25%) -> 64px (+50% sobre o valor anterior, out/2026) */
.text-cream{color:var(--cc-cream-100)!important;}

/* ---------------- Topbar embutido no hero (só a logo, centralizada) ----------------
   Out/2026: primeiro a barra de navegação virou parte do hero (sem header
   fixo, flutuando sobre o gradiente). Depois o cliente decidiu ir mais longe:
   nem links, nem Instagram, nem CTA, nem menu mobile no topo — só a logo,
   centralizada. Off-canvas, nav e botão de menu foram removidos do código
   (não só escondidos). Navegação por seção agora é 100% via rodapé.
   Ver /_docs/CLAUDE.md. */
.hero-topbar{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:clamp(1rem,4vh,3.75rem);
}
.hero-logo{
  height:79px;width:auto;display:block;
  /* 72px -> +10% (out/2026, 3ª revisão da logo) = 79,2px, arredondado para 79px. */
  /* "Vibrante e bem visível": glow dourado em duas camadas para a logo branca
     se destacar do gradiente escuro do hero, sem precisar de um arquivo de
     logo novo — um halo mais largo e suave por baixo de um halo mais curto
     e intenso, para ler como "brilho" e não como sombra. */
  filter:
    drop-shadow(0 0 8px rgba(255,224,168,.85))
    drop-shadow(0 0 26px rgba(220,179,124,.65))
    drop-shadow(0 2px 10px rgba(0,0,0,.45));
}

/* ---------------- Hero ---------------- */
.cc-hero{
  position:relative;
  /* Recuo superior/inferior limitado também por vh (out/2026): em telas de
     desktop baixas (ex.: 1366x768, notebooks), o cronômetro precisa caber
     inteiro sem rolar — clamp com vh reage à ALTURA da tela, não só à
     largura. Ver /_docs/CLAUDE.md. */
  padding:clamp(.75rem,4vh,3.25rem) 0 clamp(1.25rem,4vh,4rem);
  /* Gradiente duplicado de propósito (out/2026): a 2ª declaração usa
     interpolação de cor em OKLab, que mistura o verde-oliva e o dourado da
     marca de forma mais suave/perceptualmente uniforme que o RGB padrão.
     Navegador sem suporte a "in oklab" descarta a declaração inválida e
     fica com a 1ª (RGB) — é o mesmo padrão de fallback usado nos outros
     gradientes desta folha de estilo. Ver /_docs/CLAUDE.md. */
  background:linear-gradient(160deg,var(--cc-green-950) 0%,var(--cc-green-800) 60%,var(--cc-green-700) 100%);
  background:linear-gradient(160deg in oklab,var(--cc-green-950) 0%,var(--cc-green-800) 60%,var(--cc-green-700) 100%);
  overflow:hidden;
  color:#fff;
  text-align:center;
}
.cc-hero::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 60% at 50% 0%, rgba(194,145,79,.22), transparent 60%);
  background:radial-gradient(60% 60% at 50% 0% in oklab, rgba(194,145,79,.22), transparent 60%);
  pointer-events:none;
}
/* Grain/textura de filme (out/2026) — CSS puro, sem imagem de ruído.
   Um único uso deliberado, só no hero (mesmo critério de contenção do
   parallax, seção 11): pontinhos via radial-gradient repetido + uma
   diagonal bem sutil, com mix-blend-mode:soft-light pra se misturar ao
   gradiente de fundo em vez de aparecer como uma camada por cima. Fica
   atrás do conteúdo (::before, não ::after) — é textura de fundo, não um
   elemento decorativo sobre o texto. Ver /_docs/CLAUDE.md. */
.cc-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.5;mix-blend-mode:soft-light;
  background-image:
    radial-gradient(rgba(255,255,255,.9) 1px, transparent 1.6px),
    repeating-linear-gradient(103deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
  background-size:3px 3px, auto;
}
.cc-hero .container{position:relative;}
.cc-hero-meta{color:var(--cc-gold-300);font-weight:600;font-size:.95rem;letter-spacing:.02em;}
.cc-hero-meta a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(220,179,124,.55);}
.cc-hero-meta a:hover{color:#fff;}
/* Título -20% (out/2026): bootstrap .display-4 é 3.5rem fixo; 3.5rem*0.8=2.8rem.
   Reduz a altura do bloco de headline, empurrando o cronômetro para cima. */
.cc-hero .display-4{font-size:2.8rem;}

/* Contador regressivo embutido no hero — visível sem precisar rolar a tela.
   Tem sua própria camada de fundo (arte_003.jpg) com efeito parallax, ver JS "parallax". */
.hero-countdown{
  position:relative;overflow:hidden;
  max-width:900px;margin:clamp(1rem,3.5vh,2.75rem) auto 0;
  border-radius:var(--cc-radius-lg);
  border:1px solid rgba(255,255,255,.14);
  padding:clamp(1.1rem,3.5vh,2.75rem) clamp(1.25rem,4vw,2.5rem);
  box-shadow:var(--cc-shadow-card);
}
.hero-countdown-bg{
  position:absolute;inset:-15% -8%;z-index:0;will-change:transform;
  background:linear-gradient(150deg,rgba(28,30,16,.92) 0%,rgba(52,56,25,.88) 65%,rgba(63,68,35,.82) 100%),
             url("../img/arte_003.jpg") center 20% / cover no-repeat;
}
.hero-countdown-content{position:relative;z-index:1;}
.countdown-kicker{color:var(--cc-gold-300);font-weight:600;font-size:.85rem;}
.countdown-heading{font-size:clamp(1.3rem,2.6vw,1.7rem);margin-top:.35rem;}
.countdown-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(.6rem,2vw,1.25rem);margin-top:clamp(.75rem,2.5vh,1.5rem);
}
.countdown-unit{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--cc-radius-md);
  padding:clamp(.85rem,2.5vw,1.4rem) .5rem;
  text-align:center;
  backdrop-filter:blur(4px);
}
.countdown-unit .val{
  font-family:var(--cc-font-display);
  font-size:clamp(2rem,5vw,3.4rem);
  font-weight:700;line-height:1;
  color:var(--cc-gold-300);
  font-variant-numeric:tabular-nums;
  display:inline-block;
}
.countdown-unit.is-ticking .val{animation:cc-tick .5s var(--cc-ease);}
@keyframes cc-tick{
  0%{transform:translateY(-6px);opacity:.4;}
  100%{transform:translateY(0);opacity:1;}
}
.countdown-unit .unit-lbl{display:block;margin-top:.35rem;font-size:.74rem;color:rgba(255,255,255,.7);}
.countdown-elapsed{
  margin-top:clamp(.6rem,2vh,1.25rem);height:6px;border-radius:50px;background:rgba(255,255,255,.14);overflow:hidden;max-width:26rem;margin-inline:auto;
}
.countdown-elapsed > span{
  display:block;height:100%;border-radius:50px;
  background:linear-gradient(90deg,var(--cc-gold-600),var(--cc-gold-300));
  width:0;transition:width 1.4s var(--cc-ease);
}
.countdown-note{margin:1.1rem 0 0;font-size:.85rem;color:rgba(255,255,255,.68);}

/* CTAs do hero — movidos para abaixo do cronômetro (out/2026), ver /_docs/CLAUDE.md */
.hero-ctas{margin-top:clamp(1.25rem,4vh,2.25rem);}

/* Borda giratória em gradiente (out/2026) — só no CTA principal do hero
   ("Garantir ingresso"), não em todo `.btn-gold` da página: é o "um momento
   orquestrado" da seção, não um efeito espalhado. Técnica: ::before maior
   que o botão (inset negativo) com um conic-gradient girando atrás; como o
   botão tem fundo opaco por cima, só o anel de ~3px ao redor fica visível.
   Só ativa no hover/foco — parado (opacity:0) em repouso. Respeita
   prefers-reduced-motion via a regra global no topo deste arquivo. Ver
   /_docs/CLAUDE.md. */
.btn-cta-ring{position:relative;isolation:isolate;}
.btn-cta-ring::before{
  content:"";position:absolute;inset:-3px;z-index:-1;border-radius:inherit;
  background:conic-gradient(from 0deg,var(--cc-gold-300),var(--cc-green-600),var(--cc-gold-600),var(--cc-gold-300));
  opacity:0;transition:opacity .3s ease;
}
.btn-cta-ring:hover::before,.btn-cta-ring:focus-visible::before{
  opacity:1;animation:cc-ring-spin 2.6s linear infinite;
}
@keyframes cc-ring-spin{to{transform:rotate(360deg);}}

/* Banner de imagem (arte_001 — melhor resolução do acervo) */
.hero-banner{
  position:relative;margin-top:-1.5rem;
  border-radius:var(--cc-radius-lg);overflow:hidden;box-shadow:var(--cc-shadow-card);
  aspect-ratio:1600/838;
}
.hero-banner img{
  position:absolute;inset:-8% 0;width:100%;height:116%;
  object-fit:cover;display:block;will-change:transform;
}
.hero-banner .cap{
  position:absolute;left:1.25rem;bottom:1.25rem;z-index:1;
  background:rgba(28,30,16,.55);backdrop-filter:blur(6px);
  color:#fff;font-family:var(--cc-font-display);font-size:.8rem;font-weight:600;
  padding:.4rem .9rem;border-radius:50px;
}

/* Local do evento (ALEGO) — card compacto logo após o hero (out/2026,
   revisão 13). Padding menor que `.section` de propósito: é um complemento
   de destaque, não mais um pilar de conteúdo do porte de Sobre/Ingressos.
   Ver /_docs/CLAUDE.md. */
.section-venue{padding:clamp(1.5rem,4vw,2.75rem) 0 0;}
.venue-card{
  display:flex;flex-wrap:wrap;align-items:stretch;gap:0;
  background:#fff;border-radius:var(--cc-radius-lg);overflow:hidden;
  box-shadow:var(--cc-shadow-card);border:1px solid rgba(63,68,35,.08);
}
.venue-info{
  flex:1 1 320px;padding:2rem 2rem;display:flex;flex-direction:column;justify-content:center;
}
.venue-map{flex:1 1 320px;min-height:260px;position:relative;}
.venue-map iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  filter:grayscale(.15) contrast(1.02);
}

/* ---------------- Sections ---------------- */
.section{padding:clamp(3.5rem,7vw,6.5rem) 0;}
.eyebrow-label{
  font-family:var(--cc-font-display);
  letter-spacing:.18em;text-transform:uppercase;font-size:.78rem;
  color:var(--cc-gold-600);font-weight:600;
}
.section-title{font-size:clamp(1.9rem,3.2vw,2.75rem);color:var(--cc-green-900);}
.section-sub{color:var(--cc-ink-soft);max-width:640px;}

/* Zig-zag value prop (seção "Sobre") */
.zigzag-row{align-items:center;}
.zigzag-media{position:relative;border-radius:var(--cc-radius-lg);overflow:hidden;box-shadow:var(--cc-shadow-card);}
.zigzag-media img{
  width:100%;height:auto;display:block;object-fit:cover;aspect-ratio:4/5;
}
.check-list{list-style:none;padding:0;margin:0;}
.check-list li{display:flex;gap:.7rem;padding:.5rem 0;align-items:flex-start;}
.check-list i{color:var(--cc-gold-600);margin-top:.2rem;}

/* Pricing */
.pricing-card{
  background:#fff;border-radius:var(--cc-radius-lg);padding:2rem 1.75rem;
  box-shadow:var(--cc-shadow-soft);height:100%;border:1px solid rgba(63,68,35,.08);
  transition:transform .3s var(--cc-ease), box-shadow .3s var(--cc-ease);
}
.pricing-card:hover{transform:translateY(-8px);box-shadow:var(--cc-shadow-card);}
.pricing-card.is-highlight{
  /* Glassmorphism (out/2026) — reaproveita o mesmo padrão do rail de
     âncoras (seção 6: fundo translúcido + blur + borda rgba(255,255,255,.14)),
     em vez de inventar um novo valor. Reforça visualmente que esta é a
     categoria de destaque (Black). Ver /_docs/CLAUDE.md. */
  background:rgba(38,41,20,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:#fff;transform:scale(1.03);
  border:1px solid rgba(255,255,255,.14);
}
.pricing-card.is-highlight .pricing-feat{color:rgba(255,255,255,.85);}
.pricing-card .badge-top{
  font-family:var(--cc-font-display);font-size:.7rem;letter-spacing:.1em;
  background:var(--cc-gold-500);color:var(--cc-green-950);padding:.3rem .75rem;border-radius:50px;
}
.pricing-feat{list-style:none;padding:0;margin:1.25rem 0;color:var(--cc-ink-soft);font-size:.92rem;}
.pricing-feat li{display:flex;gap:.5rem;padding:.35rem 0;}
.pricing-feat i{color:var(--cc-gold-600);}
.pricing-card.is-highlight .pricing-feat i{color:var(--cc-gold-300);}

/* Idealizadora */
.founder-photo{border-radius:var(--cc-radius-lg);overflow:hidden;box-shadow:var(--cc-shadow-card);}
.founder-photo img{
  width:100%;height:auto;display:block;
  aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;
  /* idealizadora_solange_hd.jpg veio com forte dominante amarela (luz incandescente);
     leve correção para aproximar do branco sem perder o clima quente da foto. */
  filter:saturate(.88) contrast(1.04) brightness(.99);
}
.quote-card{
  background:var(--cc-cream-100);border-left:4px solid var(--cc-gold-500);
  border-radius:0 var(--cc-radius-md) var(--cc-radius-md) 0;
  padding:1.25rem 1.5rem;font-style:italic;color:var(--cc-green-900);
}

/* Palestrantes (Fase 5 do plano v2 — /_docs/CLAUDE.md seção 20). */
.speaker-card{text-align:center;}
.speaker-photo{
  position:relative;border-radius:var(--cc-radius-lg);overflow:hidden;
  box-shadow:var(--cc-shadow-card);aspect-ratio:1/1;margin-bottom:1rem;
}
.speaker-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.speaker-name{font-size:1rem;font-weight:600;color:var(--cc-green-900);margin-bottom:.15rem;}
.speaker-bio{font-size:.82rem;color:var(--cc-ink-soft);margin-bottom:0;}
/* cargo_bio agora pode vir com HTML básico do CKEditor (out/2026, revisão 21) —
   reseta a margem das tags que o editor gera pra não quebrar o espaçamento do card. */
.speaker-bio p{margin:0 0 .35rem;}
.speaker-bio p:last-child{margin-bottom:0;}
.speaker-bio ul,.speaker-bio ol{margin:.25rem 0;padding-left:1.1rem;text-align:left;}
.speaker-bio a{color:var(--cc-gold-600);text-decoration:underline;}
.speaker-card.is-compact .speaker-name{font-size:.9rem;font-weight:500;}

/* Patrocinadores / apoiadores — galeria de logos em tons neutros, cor só no
   hover (comum em "logo wall" de eventos; ganha cor sem virar prova social
   de marca que não existe — ver seção 19 sobre não inventar patrocinador). */
.sponsor-grid{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.75rem 2.5rem;
}
.sponsor-logo{
  display:flex;align-items:center;justify-content:center;
  width:140px;height:70px;filter:grayscale(1);opacity:.75;
  transition:filter .25s var(--cc-ease), opacity .25s var(--cc-ease);
}
.sponsor-logo:hover{filter:grayscale(0);opacity:1;}
.sponsor-logo img{max-width:100%;max-height:100%;object-fit:contain;}

/* Accordion (FAQ) */
.cc-accordion .accordion-button{font-family:var(--cc-font-display);font-weight:600;color:var(--cc-green-900);background:#fff;}
.cc-accordion .accordion-button:not(.collapsed){color:var(--cc-gold-600);background:var(--cc-cream-100);box-shadow:none;}
.cc-accordion .accordion-button:focus{box-shadow:none;}
.cc-accordion .accordion-item{border:none;border-bottom:1px solid rgba(63,68,35,.12);}

/* Closing CTA (fundo: arte_004, com parallax — ver JS "parallax") */
.closing-cta{
  position:relative;overflow:hidden;color:#fff;
  border-radius:var(--cc-radius-lg);
  padding:clamp(2.5rem,6vw,4.5rem);
}
.closing-cta-bg{
  position:absolute;inset:-15% -8%;z-index:0;will-change:transform;
  background:linear-gradient(160deg,rgba(28,30,16,.88) 10%,rgba(63,68,35,.78) 100%),
             url("../img/arte_004.jpg") center 25% / cover no-repeat;
}
.closing-cta-content{position:relative;z-index:1;}

/* Footer */
.cc-footer{background:var(--cc-green-950);color:rgba(255,255,255,.75);}
.cc-footer a{color:rgba(255,255,255,.75);text-decoration:none;}
.cc-footer a:hover{color:var(--cc-gold-300);}
.cc-footer h6{font-family:var(--cc-font-display);color:#fff;letter-spacing:.05em;text-transform:uppercase;font-size:.78rem;}

/* Rail de âncoras — navegação por seção sem navbar.
   Cápsula translúcida própria (não depende do fundo por trás) para os ícones
   terem contraste tanto sobre o hero escuro quanto sobre seções claras.
   Fixa no canto superior direito (fora do caminho da logo centralizada no
   hero), horizontal, com um ícone coerente por seção em vez de bolinhas.
   Só aparece em telas >=992px — ver /_docs/CLAUDE.md. */
.section-rail{
  position:fixed;right:1.25rem;top:1.25rem;z-index:1030;
  flex-direction:row;align-items:center;gap:.35rem;
  padding:.5rem;border-radius:50px;
  background:rgba(28,30,16,.4);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);
}
.rail-dot{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  color:rgba(255,255,255,.65);font-size:1rem;line-height:1;
  transition:background-color .2s ease, color .2s ease, transform .2s ease;
}
.rail-dot:hover,.rail-dot:focus-visible,.rail-dot.is-active{
  background:rgba(255,255,255,.12);color:var(--cc-gold-300);transform:scale(1.08);
}
.rail-tip{
  position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);
  background:rgba(28,30,16,.94);color:#fff;
  font-family:var(--cc-font-display);font-size:.75rem;font-weight:500;
  padding:.3rem .7rem;border-radius:50px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.rail-dot:hover .rail-tip,.rail-dot:focus-visible .rail-tip{opacity:1;}

/* Cookie banner */
.cc-cookie{
  position:fixed;inset:auto 0 0 0;z-index:1050;
  background:var(--cc-green-950);color:#fff;
  padding:1.1rem 1.25rem;
  transform:translateY(100%);transition:transform .5s var(--cc-ease);
  box-shadow:0 -10px 30px rgba(0,0,0,.25);
}
.cc-cookie.show{transform:translateY(0);}
.cc-cookie a{color:var(--cc-gold-300);}

/* Scroll reveal */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s var(--cc-ease), transform .7s var(--cc-ease);}
[data-reveal].is-visible{opacity:1;transform:translateY(0);}

/* ==========================================================================
   Responsivo — revisão mobile completa
   ========================================================================== */
@media (max-width:767.98px){
  .section{padding:clamp(2.75rem,10vw,4rem) 0;}
  .pricing-card.is-highlight{transform:none;}
  .venue-info{padding:1.5rem;text-align:center;align-items:center;}
  .venue-info .d-flex{justify-content:center;}
  .venue-map{min-height:220px;}
}

@media (max-width:575.98px){
  .cc-hero .display-4{font-size:1.68rem;} /* 2.1rem*0.8, mesmo corte de -20% aplicado no mobile */
  .btn-lg{padding:.7rem 1.3rem;font-size:1rem;}
  .countdown-grid{grid-template-columns:repeat(2,1fr);gap:.75rem;}
  .countdown-unit .val{font-size:2.4rem;}
  .founder-photo{margin-bottom:1rem;}
  .hero-banner .cap{left:.75rem;bottom:.75rem;font-size:.72rem;}
}

@media (max-width:420px){
  .cc-cookie .d-flex.gap-2{width:100%;}
  .cc-cookie button{flex:1;}
}