/* Tudo Entre Amigos — cores medidas no logo (Opção 2) e no mídia kit da 21ª Feijoada.
   Contraste medido com lib-cor (04/11/2026): amarelo/noite 8,81 · laranja/noite 6,31 · teal/noite 4,76 ·
   azul/creme 5,41 · noite/amarelo 8,81. Branco sobre laranja (2,98) e laranja sobre creme (2,66) reprovam: não usar. */
:root {
  --noite: #121110;
  --noite-2: #1B1917;
  --noite-3: #26221F;
  --creme: #FBF1E1;
  --creme-2: #F3E2CA;
  --amarelo: #F2A00E;
  --laranja: #EE712A;
  --teal: #358D85;
  --teal-texto: #1E7B74;   /* teal para texto sobre creme (4,5) */
  --vermelho: #D83337;     /* só título grande sobre creme (4,21) */
  --vermelho-texto: #C0282D;
  --azul: #0066A8;
  --texto-suave: rgba(251, 241, 225, .72);

  --f-display: 'Anton', 'Impact', sans-serif;
  --f-script: 'Kaushan Script', cursive;
  --f-texto: 'Barlow', system-ui, sans-serif;

  --borda: clamp(20px, 5vw, 72px);
  --raio: 18px;
  --sombra: 0 30px 60px -20px rgba(0, 0, 0, .55);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--noite);
  color: var(--creme);
  font: 400 1.0625rem/1.6 var(--f-texto);
  overflow-x: hidden;
}
/* grão de filme por cima de tudo, discreto */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: .95; letter-spacing: .01em; margin: 0; text-transform: uppercase; }
.script { font-family: var(--f-script); text-transform: none; letter-spacing: 0; color: var(--laranja); display: inline-block; }
.sobretitulo { font: 500 .8rem/1.2 var(--f-texto); letter-spacing: .22em; text-transform: uppercase; color: var(--amarelo); margin: 0 0 1rem; }
.intro { color: var(--texto-suave); max-width: 46ch; margin: 1.1rem 0 0; font-size: 1.125rem; }
.pular { position: absolute; left: -999px; }
.pular:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--amarelo); color: var(--noite); padding: .6rem 1rem; }
:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; }

/* botões: texto escuro sobre amarelo (8,81) */
.botao {
  display: inline-flex; align-items: center; gap: .6rem;
  font: 700 1rem/1 var(--f-texto); letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  background: var(--amarelo); color: var(--noite);
  padding: 1.05rem 1.5rem; border-radius: 999px; border: 2px solid var(--amarelo);
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.botao svg { width: 1.3em; height: 1.3em; fill: currentColor; }
.botao:hover { transform: translateY(-2px); background: var(--laranja); border-color: var(--laranja); }
.botao-contorno { background: transparent; color: var(--creme); border-color: rgba(251, 241, 225, .35); }
.botao-contorno:hover { background: var(--creme); color: var(--noite); border-color: var(--creme); }
.botao-pequeno { padding: .7rem 1.1rem; font-size: .82rem; }
.botao-azul { background: var(--azul); border-color: var(--azul); color: var(--creme); }
.botao-azul:hover { background: #00508A; border-color: #00508A; }
.botao-contorno-escuro { background: transparent; color: var(--noite); border-color: var(--noite); }
.botao-contorno-escuro:hover { background: var(--noite); color: var(--creme); border-color: var(--noite); }

/* topo */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 40;
  display: flex; align-items: center; gap: 2rem;
  padding: .9rem var(--borda);
  transition: background .3s ease, padding .3s ease;
}
.topo.rolou { background: rgba(18, 17, 16, .88); backdrop-filter: blur(10px); padding-block: .55rem; }
.topo-logo img { width: 92px; height: auto; }
.topo-nav { display: flex; gap: 1.8rem; margin-left: auto; }
.topo-nav a { text-decoration: none; font-weight: 500; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.topo-nav a:hover { opacity: 1; color: var(--amarelo); }

/* abertura */
.hero {
  position: relative; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 2rem;
  padding: 6.5rem var(--borda) 2.5rem; overflow: hidden; isolation: isolate;
}
.hero-fundo {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 70% at 78% 55%, rgba(238, 113, 42, .28), transparent 70%),
    radial-gradient(40% 50% at 10% 100%, rgba(53, 141, 133, .22), transparent 70%),
    linear-gradient(180deg, #0C0B0A 0%, var(--noite) 100%);
}
.hero-logo { width: min(330px, 60%); height: auto; margin: 0 0 1.2rem -.4rem; }
.hero h1 { font-size: clamp(2.6rem, 5.2vw, 4.8rem); }
.hero h1 .script { display: block; font-size: .62em; margin-top: .3em; color: var(--amarelo); transform: rotate(-3deg); transform-origin: left; }
.hero-sub { color: var(--texto-suave); max-width: 46ch; font-size: 1.12rem; margin: 1.1rem 0 1.6rem; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: .9rem; }

/* elemento assinatura: o aro do pandeiro do logo, girando atrás dos três */
.hero-palco { position: relative; align-self: end; display: grid; place-items: end center; min-height: 520px; }
.aro {
  position: absolute; width: min(118%, 700px); left: 50%; top: 46%;
  translate: -50% -50%; color: var(--laranja); fill: var(--amarelo);
  animation: girar 48s linear infinite;
  filter: drop-shadow(0 0 40px rgba(238, 113, 42, .35));
}
@keyframes girar { to { rotate: 360deg; } }
.trio { position: relative; width: min(100%, 640px); height: auto;
  -webkit-mask-image: linear-gradient(#000 72%, transparent 98%); mask-image: linear-gradient(#000 72%, transparent 98%); }

/* letreiro */
.letreiro-faixa { overflow: hidden; padding-block: 1.2rem; margin-block: -1.2rem; position: relative; z-index: 2; }
.letreiro { background: var(--laranja); color: var(--noite); overflow: hidden; border-block: 3px solid var(--noite); transform: rotate(-1.2deg); margin: 0 -3%; }
.letreiro-trilho { display: flex; width: max-content; padding: .9rem 0; will-change: transform; }
.letreiro span, .letreiro i { font: 400 clamp(1.6rem, 3.4vw, 2.6rem)/1 var(--f-display); text-transform: uppercase; padding: 0 1.4rem; font-style: normal; white-space: nowrap; }
.letreiro i { color: var(--creme); }

/* aviso de data (some sozinho depois do dia) */
.aviso { margin: 3rem var(--borda) 0; padding: 1.2rem 1.5rem; border-radius: var(--raio); background: var(--noite-2); border: 1px solid rgba(53, 141, 133, .6); border-left: 6px solid var(--teal); }
.aviso p { margin: 0; }
.aviso strong { color: var(--amarelo); text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; margin-right: .5rem; }

/* números */
.numeros { padding: 4.5rem var(--borda) 1rem; }
.numeros ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(251, 241, 225, .12); border-radius: var(--raio); overflow: hidden; }
.numeros li { background: var(--noite); padding: 1.8rem 1.4rem; }
.numeros .valor { font: 400 clamp(3rem, 6vw, 5rem)/1 var(--f-display); color: var(--amarelo); display: block; font-variant-numeric: tabular-nums; }
.numeros .rotulo { color: var(--texto-suave); display: block; margin-top: .5rem; font-size: .98rem; }

/* seções */
.secao { padding: 7rem var(--borda); }
.secao h2 { font-size: clamp(2.6rem, 6vw, 5rem); }
.secao h2 .script { font-size: .7em; display: inline-block; transform: rotate(-3deg); }
.secao-cabeca { margin-bottom: 3rem; }

/* formatos */
.formatos-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.formato { position: relative; border-radius: calc(var(--raio) + 6px); overflow: hidden; background: var(--noite-2); display: flex; flex-direction: column; box-shadow: var(--sombra); }
.formato-foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.formato-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.formato:hover .formato-foto img { transform: scale(1.04); }
.formato-num { position: absolute; top: 1rem; left: 1rem; font: 400 1rem/1 var(--f-display); background: var(--amarelo); color: var(--noite); padding: .5rem .7rem; border-radius: 8px; }
.formato-corpo { padding: 1.8rem 1.8rem 2rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.formato h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.05; }
.formato p { margin: 0; color: var(--texto-suave); }
.formato .botao { align-self: flex-start; margin-top: auto; }
.ocasioes { margin: 2.5rem 0 0; font-size: 1.2rem; color: var(--texto-suave); }
.ocasioes b { color: var(--creme); font-weight: 700; }
.regiao { margin: 1rem 0 0; font-size: 1.2rem; color: var(--creme); display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.regiao-rotulo { font: 400 .95rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; background: var(--teal); color: var(--creme); padding: .45rem .7rem; border-radius: 8px; }

/* Ao vivo: reel do Instagram */
.ao-vivo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(2rem, 6vw, 6rem); align-items: center; background: radial-gradient(60% 70% at 85% 50%, rgba(242, 160, 14, .16), transparent 70%); }
.ao-vivo-texto .botao { margin-top: 2rem; }
.ao-vivo-video { position: relative; padding: 10px; border-radius: calc(var(--raio) + 10px); background: linear-gradient(135deg, var(--amarelo), var(--laranja) 55%, var(--teal)); box-shadow: var(--sombra); } /* sem rotação: vídeo girado perde nitidez */
.ao-vivo-video iframe { display: block; width: 100%; height: 640px; border: 0; border-radius: var(--raio); background: var(--noite-3); }
@media (max-width: 860px) {
  .ao-vivo { grid-template-columns: minmax(0, 1fr); }
  .ao-vivo-video { transform: none; max-width: 420px; width: 100%; margin: 0 auto; }
}

/* formação */
.formacao { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; background: var(--noite-2); }
.formacao-foto { margin: 0; position: relative; }
.formacao-foto img { border-radius: var(--raio); box-shadow: var(--sombra); aspect-ratio: 1 / 1; object-fit: cover; width: 100%; height: auto; }
.moldura { position: relative; isolation: isolate; }
.moldura::before { content: ""; position: absolute; inset: -14px 14px 14px -14px; border: 3px solid var(--laranja); border-radius: var(--raio); z-index: -1; }
.formacao-foto figcaption { font-size: .9rem; color: var(--texto-suave); margin-top: 1.6rem; }
.grupos { display: grid; gap: 1.6rem; }
.grupo h3 { font-size: 1.1rem; letter-spacing: .12em; color: var(--amarelo); margin-bottom: .8rem; font-family: var(--f-texto); font-weight: 700; }
.grupo ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .55rem; }
.grupo li { border: 1px solid rgba(251, 241, 225, .25); border-radius: 999px; padding: .5rem 1rem; font-weight: 500; }
.grupo:nth-child(3) li { border-color: rgba(53, 141, 133, .8); background: rgba(53, 141, 133, .12); }

/* história */
.historia { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); }
.historia-lado { position: sticky; top: 6rem; align-self: start; }
.historia-foto { margin-top: 2rem; position: relative; max-width: 440px; }
.historia-foto::before { content: ""; position: absolute; width: 82%; aspect-ratio: 1; border-radius: 50%; background: var(--amarelo); left: 9%; top: 6%; z-index: 0; }
.historia-foto img { position: relative; border-radius: 0 0 var(--raio) var(--raio); mask-image: linear-gradient(90deg, transparent 0, #000 14%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%); }
.linha { list-style: none; margin: 0; padding: 0 0 0 2.2rem; border-left: 2px dashed rgba(251, 241, 225, .25); }
.linha li { position: relative; padding: 0 0 3rem; }
.linha li::before { content: ""; position: absolute; left: calc(-2.2rem - 9px); top: .6rem; width: 16px; height: 16px; border-radius: 50%; background: var(--noite); border: 3px solid var(--laranja); }
.linha .ano { font: 400 clamp(2.6rem, 5vw, 3.8rem)/1 var(--f-display); color: var(--laranja); display: block; }
.linha h3 { font-family: var(--f-texto); font-weight: 700; font-size: 1.3rem; text-transform: none; margin: .5rem 0 .4rem; letter-spacing: 0; }
.linha p { margin: 0; color: var(--texto-suave); max-width: 52ch; }
.linha li:last-child .ano { color: var(--amarelo); }

/* feijoada: identidade do evento (mosaico vermelho, azul e amarelo do mídia kit) */
.feijoada { position: relative; background: var(--creme); color: var(--noite); padding: 7rem var(--borda); overflow: hidden; }
.mosaico { position: absolute; inset: 0 0 auto; height: 28px; background:
  linear-gradient(90deg, var(--vermelho) 0 14%, var(--azul) 14% 22%, var(--amarelo) 22% 31%, var(--creme-2) 31% 37%, var(--vermelho) 37% 52%, var(--azul) 52% 63%, var(--amarelo) 63% 70%, var(--vermelho) 70% 84%, var(--azul) 84% 100%); }
.mosaico::after { content: ""; position: absolute; left: 0; right: 0; top: 28px; height: 14px; background:
  linear-gradient(90deg, var(--azul) 0 9%, transparent 9% 20%, var(--amarelo) 20% 27%, transparent 27% 45%, var(--vermelho) 45% 53%, transparent 53% 74%, var(--azul) 74% 80%, transparent 80%); }
.feijoada .sobretitulo { color: var(--azul); }
.feijoada h2 { font-size: clamp(3rem, 8vw, 7rem); color: var(--vermelho); }
.feijoada h2 .script { color: var(--azul); font-size: .5em; display: block; transform: rotate(-3deg); transform-origin: left; margin-top: .2em; }
.feijoada .intro { color: #3A332D; max-width: 56ch; }
.feijoada-cabeca { margin-bottom: 3rem; }
.feijoada-fotos { display: grid; grid-template-columns: 1.3fr 1fr .8fr; grid-template-rows: 260px 260px; gap: 14px; margin-bottom: 4rem; }
.feijoada-fotos img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.feijoada-fotos .f1 { grid-row: 1 / 3; }
.feijoada-fotos .f3 { grid-row: 1 / 3; grid-column: 3; }
.feijoada-info { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.feijoada h3 { font-size: 2rem; color: var(--noite); margin-bottom: 1.2rem; }
.cartoes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cartoes li { background: #fff; border: 2px solid var(--azul); border-radius: 14px; padding: 1.2rem; box-shadow: 6px 6px 0 var(--amarelo); }
.cartoes .valor { font: 400 2.6rem/1 var(--f-display); color: var(--azul); display: block; }
.cartoes .rotulo { font-weight: 500; }
.tem { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .6rem; }
.tem li { display: flex; gap: .8rem; align-items: center; font-size: 1.1rem; font-weight: 500; }
.tem li::before { content: ""; width: 14px; height: 14px; flex: none; background: var(--vermelho); border-radius: 3px; rotate: 45deg; }
.feijoada-acoes { display: flex; flex-wrap: wrap; gap: .8rem; }

/* citação */
.citacao { position: relative; min-height: 70vh; display: grid; align-items: center; padding: 6rem var(--borda); overflow: hidden; isolation: isolate; }
.citacao > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; object-position: 50% 30%; }
.citacao::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(18, 17, 16, .95) 0%, rgba(18, 17, 16, .78) 45%, rgba(18, 17, 16, .25) 100%); }
.citacao blockquote { margin: 0; max-width: min(760px, 62%); }
.citacao p { font: 400 clamp(2.8rem, 6.5vw, 5.6rem)/1.05 var(--f-script); margin: 0; color: var(--creme); }
.citacao p::before { content: "“"; color: var(--laranja); }
.citacao p::after { content: "”"; color: var(--laranja); }
.citacao footer { margin-top: 1.4rem; font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; color: var(--amarelo); }

/* contato */
.contato { text-align: left; background: radial-gradient(50% 80% at 100% 0%, rgba(238, 113, 42, .22), transparent 70%); }
.contato h2 { font-size: clamp(3rem, 8vw, 7rem); }
.contato-canais { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1rem; }
.canal { display: flex; flex-direction: column; gap: .4rem; text-decoration: none; padding: 1.6rem; border-radius: var(--raio); background: var(--noite-2); border: 1px solid rgba(251, 241, 225, .14); transition: transform .2s ease, border-color .2s ease; min-width: 0; }
.canal:hover { transform: translateY(-3px); border-color: var(--amarelo); }
.canal-rotulo { font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--amarelo); }
.canal-valor { font: 400 clamp(1.3rem, 2.2vw, 1.9rem)/1.15 var(--f-display); overflow-wrap: anywhere; }
.canal-whats { background: var(--amarelo); color: var(--noite); border-color: var(--amarelo); }
.canal-whats .canal-rotulo { color: var(--noite); }
.canal-whats .canal-valor { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }

/* rodapé + assinatura do Studio (regra 0) */
.rodape { border-top: 1px solid rgba(251, 241, 225, .12); padding: 3rem var(--borda) 0; }
.rodape-linha { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding-bottom: 2.5rem; }
.rodape-linha p { margin: 0; color: var(--texto-suave); }
.assinatura-studio { border-top: 1px solid rgba(251, 241, 225, .1); padding: 1rem 0 1.4rem; font: 400 .75rem/1 ui-monospace, 'SFMono-Regular', Consolas, monospace; letter-spacing: .06em; }
.assinatura-studio a { color: rgba(251, 241, 225, .55); text-decoration: none; }
.assinatura-studio a:hover { color: var(--amarelo); }

/* botão flutuante (celular) */
.whats-flutuante { position: fixed; right: 16px; bottom: 16px; z-index: 45; width: 58px; height: 58px; border-radius: 50%; background: var(--amarelo); color: var(--noite); display: none; place-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.whats-flutuante svg { width: 30px; height: 30px; fill: currentColor; }

/* revelação na rolagem: só esconde quando o JS está ativo e o movimento é permitido */
@media (prefers-reduced-motion: no-preference) {
  .js .revela:not(.visto) { opacity: 0; transform: translateY(28px); }
  .js .revela { transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
  .js .hero .revela { transition-duration: .9s; }
  .js .hero .revela:nth-child(2) { transition-delay: .1s; }
  .js .hero .revela:nth-child(3) { transition-delay: .2s; }
  .js .hero .revela:nth-child(4) { transition-delay: .3s; }
  .js .hero .revela:nth-child(5) { transition-delay: .4s; }
  .trio { animation: subir 1.2s cubic-bezier(.2, .7, .2, 1) both .2s; }
  @keyframes subir { from { opacity: 0; transform: translateY(60px); } }
}
@media (prefers-reduced-motion: reduce) {
  .aro { animation: none; }
  html { scroll-behavior: auto; }
}

/* no desktop a foto da citação vai para a direita, para o texto não passar sobre o rosto */
@media (min-width: 981px) {
  .citacao > img { left: auto; width: 62%; }
  .citacao::before { background: linear-gradient(90deg, var(--noite) 0%, var(--noite) 38%, rgba(18, 17, 16, .55) 52%, rgba(18, 17, 16, .1) 100%); }
}

/* celular e tablet */
@media (max-width: 980px) {
  .topo-nav { display: none; }
  .topo .botao-pequeno { margin-left: auto; }
  .hero { grid-template-columns: 1fr; padding-top: 6.5rem; gap: 0; }
  .hero-palco { min-height: 0; order: -1; margin: 0 auto 1.2rem; width: min(100%, 520px); }
  .hero-texto { position: relative; z-index: 1; }
  .aro { width: 96%; top: 52%; }
  .hero-logo { width: min(300px, 70%); }
  .numeros ul { grid-template-columns: 1fr 1fr; }
  .formatos-grade, .formacao, .historia, .feijoada-info { grid-template-columns: 1fr; }
  .historia-lado { position: static; }
  .feijoada-fotos { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 200px 200px; }
  .feijoada-fotos .f1 { grid-row: 1 / 3; grid-column: 1; }
  .feijoada-fotos .f3 { grid-row: 1 / 3; grid-column: 2; }
  .feijoada-fotos .f2 { grid-row: 3; grid-column: 1; }
  .feijoada-fotos .f4 { grid-row: 3; grid-column: 2; }
  .contato-canais { grid-template-columns: 1fr; }
  .whats-flutuante { display: grid; }
  .secao { padding-block: 5rem; }
}
@media (max-width: 520px) {
  body { font-size: 1rem; }
  .numeros li { padding: 1.3rem 1rem; }
  .cartoes { grid-template-columns: 1fr 1fr; }
  .cartoes .valor { font-size: 2rem; }
  .formato-corpo { padding: 1.4rem; }
  .hero-acoes .botao { width: 100%; justify-content: center; }
  .citacao { min-height: 60vh; }
}