/* =====================================================================
   Locutor Joobyson Lima — estilo
   Direção: arena à noite. Preto quente, ouro do escudo da logo, couro e
   bege das jaquetas dele, poeira e holofote. Títulos condensados em
   itálico, no mesmo espírito do "#CêisNumSomeNão!".
   Cores medidas na LOGO JL OFICIAL (ouro #a06000 a #b07010 no escudo);
   o ouro claro é a variante para texto sobre o preto.
   ===================================================================== */

:root {
  --fundo:   #0c0a08;
  --fundo-2: #15110c;
  --painel:  #1b1610;
  --texto:   #f6efe3;
  --texto-2: rgba(246, 239, 227, .72);
  --texto-3: rgba(246, 239, 227, .46);
  --linha:   rgba(246, 239, 227, .12);

  --ouro:       #d9a441;   /* texto e detalhe sobre o preto */
  --ouro-forte: #b07010;   /* o ouro do escudo */
  --creme:      #efe4cf;
  --couro:      #8a5a2b;

  --heroi:       #d9a441;
  --sobre-heroi: #120d06;

  --f-titulo: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --f-corpo:  'Barlow', system-ui, sans-serif;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-mov: cubic-bezier(.83, 0, .17, 1);

  --larg: 1180px;
  --raio: 20px;
  --faixa-h: 44px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--faixa-h) + 128px); scroll-padding-bottom: 104px; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font-family: var(--f-corpo); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ouro); outline-offset: 3px; border-radius: 4px; }

/* grão de poeira por cima de tudo (código, não imagem) */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 90; pointer-events: none; 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");
}

/* ---------- tipografia ---------- */
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 800; font-style: italic; text-transform: uppercase; line-height: .95; letter-spacing: -.01em; margin: 0 0 18px; text-wrap: balance; }
h1 { font-size: clamp(3.1rem, 13vw, 7.2rem); }
h2 { font-size: clamp(2.3rem, 8.6vw, 4.4rem); }
h3 { font-size: clamp(1.5rem, 5vw, 1.9rem); line-height: 1; margin-bottom: 10px; }
p { margin: 0 0 16px; text-wrap: pretty; }
.ouro { color: var(--ouro); }
.chapeu { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 700 .8rem/1 var(--f-corpo); letter-spacing: .22em; text-transform: uppercase; color: var(--ouro); }
.chapeu::before { content: ''; width: 28px; height: 2px; background: currentColor; }
.lead { font-size: clamp(1.05rem, 3.6vw, 1.22rem); color: var(--texto-2); max-width: 34em; }

/* luz correndo numa palavra só — dentro de @supports */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brilho {
    background: linear-gradient(100deg, var(--ouro) 0%, var(--ouro) 38%, #fff3d6 50%, var(--ouro) 62%, var(--ouro) 100%);
    background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: brilho 5s var(--ease-mov) infinite;
  }
  @keyframes brilho { 0%, 30% { background-position: 100% 0; } 70%, 100% { background-position: 0 0; } }
}

/* ---------- estrutura ---------- */
.cx { width: min(100% - 32px, var(--larg)); margin-inline: auto; }
.secao { position: relative; padding: clamp(72px, 12vw, 128px) 0; }
.secao__topo { max-width: 760px; margin-bottom: clamp(36px, 6vw, 56px); }

/* ---------- botões ---------- */
.botao {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 58px; padding: 0 28px; border-radius: 999px; border: 0; cursor: pointer;
  background: linear-gradient(180deg, #e8b85a, var(--ouro) 55%, #c18a2a);
  color: var(--sobre-heroi); text-decoration: none;
  font: 800 1rem/1 var(--f-corpo); letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 0 0 1px rgba(255, 228, 170, .35) inset, 0 18px 40px -16px rgba(217, 164, 65, .7);
  transition: transform .2s var(--ease-out), box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
}
.botao:active { transform: scale(.97); }
.botao svg { width: 22px; height: 22px; flex: none; }
.botao--brilho::after {
  content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg) translateX(-150%); animation: passa 3.5s var(--ease-mov) infinite;
}
@keyframes passa { 0% { transform: skewX(-20deg) translateX(-150%); } 71%, 100% { transform: skewX(-20deg) translateX(420%); } }
.botao--linha { background: transparent; color: var(--texto); box-shadow: 0 0 0 1.5px var(--linha) inset; }
.botao--linha:hover { box-shadow: 0 0 0 1.5px var(--ouro) inset; }
@media (hover: hover) { .botao:not(.botao--linha):hover { box-shadow: 0 0 0 1px rgba(255,228,170,.5) inset, 0 0 0 5px rgba(217,164,65,.18), 0 18px 40px -16px rgba(217,164,65,.8); } }

/* ícone certo no botão de contato: Instagram até ter WhatsApp no dados.js */
.ic-wa { display: none; }
.contato--wa .ic-ig { display: none; }
.contato--wa .ic-wa { display: block; }

/* ---------- topo ---------- */
.topo { position: sticky; top: var(--faixa-h); z-index: 50; background: rgba(12, 10, 8, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--linha); }
.topo .cx { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.topo__marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.topo__marca img { width: 46px; height: 46px; object-fit: contain; }
.topo__nome { font: 800 italic 1.15rem/1 var(--f-titulo); text-transform: uppercase; letter-spacing: .02em; }
.topo__nome small { display: block; font: 600 .66rem/1.4 var(--f-corpo); letter-spacing: .2em; color: var(--ouro); font-style: normal; }
.topo__nav { display: flex; align-items: center; gap: 8px; }
.topo__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; text-decoration: none; font: 700 .82rem/1 var(--f-corpo); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); box-shadow: 0 0 0 1px var(--linha) inset; }
.topo__link:hover, .topo__link[aria-current] { color: var(--texto); box-shadow: 0 0 0 1px var(--ouro) inset; }
.topo__link--ig { padding: 0; width: 44px; justify-content: center; }
.topo__link--ig svg { width: 20px; height: 20px; }
@media (max-width: 400px) { .topo__nome small { display: none; } .topo__link { padding: 0 12px; } }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(28px, 6vw, 72px) 0 0; }
.hero::before { /* holofote dourado + poeira */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 55% at 72% 30%, rgba(217, 164, 65, .30), transparent 70%),
    radial-gradient(40% 40% at 15% 90%, rgba(138, 90, 43, .28), transparent 70%),
    linear-gradient(180deg, #120e09, var(--fundo));
}
.hero .cx { display: grid; gap: 8px; align-items: end; }
.hero__texto { position: relative; z-index: 2; padding-bottom: clamp(8px, 4vw, 72px); }
.hero__texto h1 { margin-bottom: 20px; }
.hero__acao { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li { padding: 8px 14px; border-radius: 999px; font: 700 .76rem/1 var(--f-corpo); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); background: rgba(246, 239, 227, .05); box-shadow: 0 0 0 1px var(--linha) inset; }
.hero__foto { position: relative; justify-self: center; width: min(100%, 520px); }
.hero__foto::before { /* cone de luz atrás dele */
  content: ''; position: absolute; left: 8%; right: 8%; top: 4%; bottom: 0; z-index: 0;
  background: radial-gradient(50% 60% at 50% 40%, rgba(255, 214, 140, .38), transparent 72%);
  filter: blur(6px);
}
.hero__foto img.pessoa { position: relative; z-index: 1; width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); }
.hero__selo { position: absolute; z-index: 2; right: 0; bottom: 14%; width: clamp(96px, 26vw, 150px); height: auto; filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .7)); }
@media (min-width: 900px) {
  .hero .cx { grid-template-columns: 1.1fr .9fr; gap: 24px; }
  .hero__foto { justify-self: end; }
}
@media (max-width: 899px) {
  .hero__foto { width: min(88%, 420px); margin-top: -8px; }
}

/* ---------- faixa #CêisNumSomeNão ---------- */
.faixa { background: var(--creme); color: #16110b; overflow: hidden; }
.faixa .cx { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 5vw, 48px); padding: 26px 0; flex-wrap: wrap; text-align: center; }
.faixa img { width: clamp(110px, 24vw, 150px); height: auto; }
.faixa p { margin: 0; max-width: 30em; font: 600 clamp(1rem, 3.4vw, 1.18rem)/1.45 var(--f-corpo); }
.faixa b { font-weight: 800; }

/* ---------- biblioteca ---------- */
.biblioteca { background: linear-gradient(180deg, var(--fundo), var(--fundo-2)); }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; }
.filtros[hidden] { display: none; }
.filtro { min-height: 46px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer; background: rgba(246, 239, 227, .06); color: var(--texto-2); box-shadow: 0 0 0 1px var(--linha) inset; font: 700 .82rem/1 var(--f-corpo); letter-spacing: .1em; text-transform: uppercase; }
.filtro span { color: var(--texto-3); margin-left: 6px; }
.filtro[aria-pressed="true"] { background: var(--ouro); color: var(--sobre-heroi); box-shadow: none; }
.filtro[aria-pressed="true"] span { color: rgba(18, 13, 6, .6); }
.grade-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 3vw, 28px); }
@media (min-width: 900px) { .grade-videos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grade-videos .som { width: 100%; --som-bg: var(--ouro); --som-tx: var(--sobre-heroi); }
.grade-videos .som[hidden] { display: none; }
.som__video { border-radius: 18px; }
.som__legenda { text-align: left; margin-top: 12px; font-size: .88rem; }
.som__legenda b { display: block; font: 800 italic 1.15rem/1.05 var(--f-titulo); text-transform: uppercase; color: var(--texto); margin-bottom: 2px; }
.tag { display: inline-block; font: 700 .68rem/1 var(--f-corpo); letter-spacing: .16em; text-transform: uppercase; color: var(--ouro); }

/* ---------- serviços ---------- */
.servicos__grade { display: grid; gap: 18px; align-items: center; }
@media (min-width: 900px) { .servicos__grade { grid-template-columns: .85fr 1.15fr; gap: 56px; } }
.servicos__foto { position: relative; justify-self: center; width: min(100%, 420px); }
.servicos__foto::before { content: ''; position: absolute; inset: 10% 6% 0; border-radius: 999px 999px 24px 24px; background: linear-gradient(180deg, var(--couro), #3a2614); }
.servicos__foto img { position: relative; width: 100%; height: auto; }
.lista-servicos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.lista-servicos li { display: grid; grid-template-columns: 56px 1fr; gap: 4px 18px; padding: 22px 0; border-bottom: 1px solid var(--linha); }
.lista-servicos .num { grid-row: span 2; font: 800 italic 2.2rem/1 var(--f-titulo); color: var(--ouro); }
.lista-servicos h3 { margin: 0; }
.lista-servicos p { margin: 0; color: var(--texto-2); }
.lista-servicos a { color: var(--ouro); font-weight: 700; text-underline-offset: 3px; }

/* ---------- ao vivo (foto do show) ---------- */
.aovivo { overflow: hidden; background: var(--creme); color: #16110b; }
.aovivo .cx { display: grid; gap: 12px; align-items: center; }
.aovivo h2 { color: #16110b; }
.aovivo .chapeu { color: var(--couro); }
.aovivo p { color: rgba(22, 17, 11, .78); }
.aovivo__foto { justify-self: center; width: min(80%, 360px); }
.aovivo__foto img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); }
@media (min-width: 900px) { .aovivo .cx { grid-template-columns: 1.2fr .8fr; gap: 56px; } .aovivo__foto { width: 100%; } }
.aovivo .secao { padding-bottom: 0; }

/* ---------- passos ---------- */
.passos { display: grid; gap: 14px; counter-reset: p; list-style: none; margin: 0; padding: 0; }
@media (min-width: 900px) { .passos { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.passos li { position: relative; padding: 28px 26px 26px; border-radius: var(--raio); background: linear-gradient(180deg, var(--painel), #130f0b); box-shadow: 0 0 0 1px var(--linha) inset; }
.passos li::before { counter-increment: p; content: '0' counter(p); display: block; margin-bottom: 14px; font: 800 italic 3rem/1 var(--f-titulo); color: transparent; -webkit-text-stroke: 1.5px var(--ouro); }
.passos h3 { margin-bottom: 8px; }
.passos p { margin: 0; color: var(--texto-2); }

/* ---------- chamada final ---------- */
.final { position: relative; overflow: hidden; padding: clamp(72px, 12vw, 120px) 0 0; background: radial-gradient(70% 60% at 50% 100%, rgba(217, 164, 65, .28), transparent 70%), var(--fundo); }
.final .cx { display: grid; gap: 10px; align-items: end; }
.final__texto { padding-bottom: clamp(24px, 8vw, 96px); }
.final__assinatura { width: clamp(200px, 50vw, 320px); height: auto; margin: 0 0 18px; opacity: .95; }
.final__foto { justify-self: center; width: min(78%, 400px); }
.final__foto img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent); }
@media (min-width: 900px) { .final .cx { grid-template-columns: 1.15fr .85fr; gap: 40px; } }

/* ---------- rodapé ---------- */
.rodape { border-top: 1px solid var(--linha); padding: 34px 0 calc(34px + env(safe-area-inset-bottom)); color: var(--texto-3); font-size: .9rem; }
.rodape .cx { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.rodape__marca { display: flex; align-items: center; gap: 12px; }
.rodape__marca img { width: 54px; height: auto; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 6px; }
.rodape nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; color: var(--texto-2); }
.rodape nav a:hover { color: var(--ouro); }

/* ---------- barra fixa do celular ---------- */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(12, 10, 8, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--linha); transform: translateY(110%); transition: transform .45s var(--ease-out); }
.barra.vem { transform: none; }
.barra__tx { flex: 1; min-width: 0; font: 800 italic 1.05rem/1.05 var(--f-titulo); text-transform: uppercase; }
.barra__tx small { display: block; font: 600 .72rem/1.3 var(--f-corpo); font-style: normal; letter-spacing: .08em; color: var(--texto-3); text-transform: none; }
.barra .botao { min-height: 50px; padding: 0 20px; font-size: .86rem; flex: none; }
@media (min-width: 900px) { .barra { display: none; } }

/* ---------- revelar à prova de falha (receita do kit) ---------- */
html.anima .anim { opacity: 0; transform: translateY(22px); transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); }
html.anima .anim--surge { transform: translateY(18px) scale(.95); transition-timing-function: var(--ease-out), cubic-bezier(.34, 1.56, .64, 1); }
html.anima .anim--lado { transform: translateX(-22px); }
html.anima .anim.ok { opacity: 1; transform: none; }
html.anima .d1 { transition-delay: 60ms; } html.anima .d2 { transition-delay: 120ms; } html.anima .d3 { transition-delay: 180ms; }
html.anima .d4 { transition-delay: 240ms; } html.anima .d5 { transition-delay: 300ms; } html.anima .d6 { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .brilho, .botao--brilho::after { animation: none; }
  .barra { transition: none; }
}

/* ---------- página de vinheta ---------- */
.hero--vinheta::before {
  background:
    radial-gradient(55% 55% at 74% 34%, rgba(217, 164, 65, .26), transparent 70%),
    radial-gradient(45% 45% at 10% 20%, rgba(138, 90, 43, .30), transparent 70%),
    linear-gradient(180deg, #120e09, var(--fundo));
}
.grade-videos--dois { max-width: 760px; }
@media (min-width: 900px) { .grade-videos--dois { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aovivo--cheio { grid-template-columns: 1fr !important; }
.aovivo .passos li { background: #fffaf0; box-shadow: 0 0 0 1px rgba(22, 17, 11, .1) inset, 0 18px 36px -24px rgba(60, 40, 15, .45); }
.aovivo .passos li::before { -webkit-text-stroke-color: var(--couro); }
.aovivo .passos p { color: rgba(22, 17, 11, .72); }
.aovivo--cheio .secao__topo, .aovivo--cheio > div { width: 100%; }
.aovivo .secao { padding-bottom: clamp(72px, 12vw, 128px); }
.final--centro { padding-bottom: clamp(72px, 12vw, 120px); text-align: center; }
.final--centro .cx { grid-template-columns: 1fr !important; justify-items: center; }
.final--centro .final__texto { padding-bottom: 0; display: flex; flex-direction: column; align-items: center; }
.final__escudo { width: clamp(120px, 30vw, 180px); height: auto; margin-bottom: 22px; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .6)); }
.final--centro .lead { margin-inline: auto; }

/* ---------- ajustes da medição (29/10/2026) ---------- */
/* cartão estreito (2 colunas no celular): o botão de som vira só ícone; o texto continua para leitor de tela */
@container (max-width: 210px) {
  .som__botao { width: 50px; min-height: 50px; padding: 0; gap: 0; justify-content: center; bottom: 12px; }
  .som__tx { font-size: 0; letter-spacing: 0; }
  .som__ic { width: 22px; height: 22px; }
}
/* barra do celular em tela muito estreita */
@media (max-width: 360px) {
  .barra { gap: 8px; padding-inline: 12px; }
  .barra__tx small { display: none; }
  .barra .botao { padding: 0 16px; font-size: .8rem; gap: 8px; }
}
/* desktop: a foto não empurra o texto para baixo da primeira tela */
@media (min-width: 900px) {
  .hero .cx { align-items: center; }
  .hero__texto { padding-bottom: 0; }
  .hero__foto img.pessoa { width: auto; max-width: 100%; max-height: min(78svh, 760px); margin-inline: auto; }
  .hero--vinheta h1 { font-size: clamp(3.1rem, 6.4vw, 5.6rem); }
}
/* foto do show tem fundo claro próprio: vira foto emoldurada, de propósito */
.aovivo__foto img { -webkit-mask-image: none; mask-image: none; border-radius: 22px; border: 8px solid #fffaf0; background: #fffaf0;
  box-shadow: 0 30px 60px -30px rgba(60, 40, 15, .55); transform: rotate(2deg); }
.aovivo .secao { padding-bottom: clamp(72px, 12vw, 128px); }
/* vinheta: texto e os dois vídeos lado a lado no desktop (sem vazio à direita) */
@media (min-width: 900px) {
  #ouca .cx { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
  #ouca .secao__topo { margin-bottom: 0; }
  #ouca .grade-videos--dois { max-width: none; }
}
/* celular: o rodapé não fica escondido atrás da barra fixa */
@media (max-width: 899px) { .rodape { padding-bottom: calc(112px + env(safe-area-inset-bottom)); } }

/* ---------- ícones do topo: rodeio e locução (29/10/2026) ----------
   Ficam atrás do texto e da foto. O icones.js põe na .hero só três números:
   --r (quanto já rolou do topo, em px) e --mx/--my (mouse, de -1 a 1).
   Cada ícone diz a própria velocidade: --v sobe/desce, --x vai de lado,
   --g gira, --p reage ao mouse. Sem JS ou com "menos movimento", ficam parados. */
.hero__icones { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ri {
  --v: -.3; --x: 0; --g: .04; --p: 10; --t: 56px;
  position: absolute; width: var(--t); height: var(--t); color: var(--ouro); opacity: .42;
  transform:
    translate3d(calc(var(--r, 0) * var(--x) * 1px + var(--mx, 0) * var(--p) * 1px),
                calc(var(--r, 0) * var(--v) * 1px + var(--my, 0) * var(--p) * 1px), 0)
    rotate(calc(var(--r, 0) * var(--g) * 1deg + var(--rot, 0deg)));
  filter: drop-shadow(0 0 14px rgba(217, 164, 65, .35));
  will-change: transform;
}
.ri svg { display: block; width: 100%; height: 100%; animation: boia 6s ease-in-out infinite; }
@keyframes boia { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(-6deg); } }
.ri--1 { --t: 92px; --rot: -12deg; --v: -.45; --x: -.06; --g: -.05; --p: 18; top: 7%;  left: 31%; }
.ri--2 { --t: 66px; --rot: 18deg;  --v: -.7;  --x: .05;  --g: .08;  --p: 26; top: 15%; left: 50%; opacity: .55; }
.ri--3 { --t: 62px; --rot: -20deg; --v: -.25; --x: .08;  --g: .12;  --p: 12; top: 80%; left: 45%; }
.ri--4 { --t: 42px; --rot: 8deg;   --v: -.9;  --x: -.04; --g: .3;   --p: 30; top: 6%;  left: 5%;  opacity: .6; }
.ri--5 { --t: 84px; --rot: 0deg;   --v: -.35; --x: -.07; --g: -.03; --p: 16; top: 28%; right: 3%; }
.ri--6 { --t: 56px; --rot: 0deg;   --v: -.55; --x: .1;   --g: 0;    --p: 22; top: 50%; left: 51%; opacity: .55; }
.ri--7 { --t: 58px; --rot: 14deg;  --v: .18; --x: -.05; --g: -.06; --p: 10; top: 89%; left: 33%; }
.ri--8 { --t: 84px; --rot: -8deg;  --v: -.6;  --x: .06;  --g: .05;  --p: 20; top: 74%; right: 2%; }
.ri--2 svg { animation-delay: -1.2s; } .ri--3 svg { animation-delay: -2.4s; animation-duration: 7s; }
.ri--4 svg { animation-delay: -.6s; animation-duration: 4.5s; } .ri--5 svg { animation-delay: -3s; animation-duration: 8s; }
.ri--6 svg { animation: pulsa 1.4s ease-in-out infinite; transform-origin: 50% 50%; }
.ri--7 svg { animation-delay: -4s; } .ri--8 svg { animation-delay: -2s; animation-duration: 7.5s; }
@keyframes pulsa { 0%, 100% { transform: scaleY(.7); } 50% { transform: scaleY(1.08); } }
/* celular: menores, nas bordas, longe do meio do texto */
@media (max-width: 899px) {
  .ri { --t: 40px; opacity: .3; }
  .ri--1 { --t: 54px; top: 9%;  left: auto; right: 5%; }
  .ri--2 { --t: 38px; top: 60%; left: auto; right: 4%; opacity: .36; }
  .ri--3 { top: 31%; left: auto; right: 2%; }
  .ri--4 { --t: 26px; top: 18%; left: auto; right: 20%; opacity: .4; }
  .ri--5 { --t: 42px; top: 66%; right: auto; left: 2%; }
  .ri--6 { --t: 34px; top: 44%; left: auto; right: 5%; opacity: .36; }
  .ri--7 { --t: 36px; top: 83%; left: 4%; }
  .ri--8 { --t: 44px; top: 88%; right: 4%; }
}
@media (prefers-reduced-motion: reduce) {
  .ri { transform: rotate(var(--rot, 0deg)); will-change: auto; }
  .ri svg { animation: none !important; }
}

/* =====================================================================
   v2 (30/10/2026): página principal de eventos + página do Estúdio JL
   (estrutura e textos do Joobyson). Mesmos tokens e mesma linguagem.
   ===================================================================== */
.couro { color: var(--couro); }
.hero__nome { margin: 0 0 12px; font: 800 italic clamp(1.6rem, 6vw, 2.4rem)/1 var(--f-titulo); text-transform: uppercase; letter-spacing: .04em; color: var(--ouro); }
h1.h1--longo { font-size: clamp(2.5rem, 9.4vw, 4.1rem); line-height: .98; }
@media (min-width: 900px) and (max-height: 820px) { h1.h1--longo { font-size: 3.5rem; } .hero__apoio { display: none; } }
.hero__apoio { color: var(--texto-3); max-width: 36em; font-size: .98rem; }
@media (max-width: 520px) { .topo__link--some { display: none; } }
@media (max-width: 360px) { .topo__link--orc { display: none; } }

/* loja oficial: a faixa creme vira aba de publicidade, com o selo "Em breve!" */
.faixa--loja .cx { text-align: left; justify-content: center; }
.faixa--loja img { width: clamp(90px, 20vw, 120px); }
.faixa--loja p { max-width: 34em; }
.faixa__titulo { font: 800 italic clamp(1.4rem, 5vw, 2rem)/1.05 var(--f-titulo) !important; text-transform: uppercase; margin-bottom: 6px !important; }
.selo-breve { display: inline-block; padding: 10px 18px; border-radius: 999px; background: #16110b; color: var(--ouro); font: 800 .82rem/1 var(--f-corpo); letter-spacing: .16em; text-transform: uppercase; transform: rotate(-4deg); }

/* serviços: 3 cartões com vídeo real + 5 em lista */
.servicos { display: grid; gap: clamp(14px, 3vw, 24px); }
@media (min-width: 760px) { .servicos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.servico { border-radius: var(--raio); background: linear-gradient(180deg, var(--painel), #130f0b); box-shadow: 0 0 0 1px var(--linha) inset; overflow: hidden; }
.servico .som { width: 100%; --som-bg: var(--ouro); --som-tx: var(--sobre-heroi); }
.servico .som__video { border-radius: 0; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; height: auto; }
.servico__tx { padding: 20px 22px 24px; }
.servico__tx h3, .servicos-lista h3 { margin-bottom: 6px; }
.servico__tx p, .servicos-lista p { margin: 0; color: var(--texto-2); }
.servico__num { display: block; margin-bottom: 8px; font: 800 italic 1rem/1 var(--f-titulo); letter-spacing: .1em; color: var(--ouro); }
.servicos-lista { list-style: none; margin: clamp(14px, 3vw, 24px) 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .servicos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .servicos-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.servicos-lista li { position: relative; padding: 22px 22px 22px 84px; border-radius: var(--raio); background: rgba(246, 239, 227, .03); box-shadow: 0 0 0 1px var(--linha) inset; }
.servicos-lista svg { position: absolute; left: 22px; top: 24px; width: 44px; height: 44px; color: var(--ouro); }
.servicos__acao { margin: clamp(26px, 5vw, 40px) 0 0; text-align: center; }

/* diferenciais e promoção: 4 cartões */
@media (min-width: 900px) { .passos--quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 600px) and (max-width: 899px) { .passos--quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.passos--sem-num li::before { display: none; }
.aovivo .passos--quatro h3 { color: #16110b; }

/* formulário que abre o WhatsApp */
.pedido { display: grid; gap: 14px; max-width: 560px; margin-top: 26px; padding: clamp(20px, 4vw, 30px); border-radius: var(--raio); background: rgba(21, 17, 12, .9); box-shadow: 0 0 0 1px var(--linha) inset, 0 30px 60px -30px rgba(0, 0, 0, .8); }
.pedido__titulo { margin: 0; font: 800 italic 1.5rem/1 var(--f-titulo); text-transform: uppercase; color: var(--ouro); }
.campo { display: grid; gap: 6px; }
.campo span { font: 700 .78rem/1.2 var(--f-corpo); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); }
.campo small { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--texto-3); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 0; border-radius: 12px;
  background: rgba(246, 239, 227, .06); color: var(--texto); box-shadow: 0 0 0 1px var(--linha) inset;
  font: 500 1rem/1.4 var(--f-corpo); color-scheme: dark;
}
.campo textarea { resize: vertical; }
.campo select option, .campo select optgroup { background: #1b1610; color: var(--texto); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--ouro) inset; }
.campo-duplo { display: grid; gap: 14px; }
@media (min-width: 520px) { .campo-duplo { grid-template-columns: 1fr 1fr; } }
.pedido .botao { width: 100%; }
.pedido__erro { margin: 0; color: #f1a07a; font-weight: 700; }
.pedido__nota, .pedido__dica { margin: 0; font-size: .86rem; color: var(--texto-3); }
.pedido__dica { margin-top: -6px; }
.final--centro .pedido { margin-inline: auto; text-align: left; }

/* chamada discreta do Estúdio JL, antes do rodapé */
.estudio-chamada { padding: clamp(48px, 9vw, 88px) 0; background: var(--fundo-2); }
.estudio-chamada__caixa { max-width: 760px; margin-inline: auto; text-align: center; padding: clamp(26px, 5vw, 44px); border-radius: var(--raio);
  background: radial-gradient(80% 90% at 50% 0%, rgba(138, 90, 43, .28), transparent 70%), var(--painel); box-shadow: 0 0 0 1px rgba(217, 164, 65, .3) inset; }
.estudio-chamada__caixa .chapeu { justify-content: center; }
.estudio-chamada__caixa h2 { font-size: clamp(1.9rem, 6.4vw, 3rem); }
.estudio-chamada__caixa p { color: var(--texto-2); margin-inline: auto; max-width: 36em; }
.estudio-chamada__oferta b { display: block; color: var(--ouro); font: 800 italic clamp(1.15rem, 4vw, 1.5rem)/1.1 var(--f-titulo); text-transform: uppercase; letter-spacing: .02em; }
.estudio-chamada__oferta span { font-size: .88rem; color: var(--texto-3); }

/* página do Estúdio JL */
.categorias { display: grid; gap: clamp(14px, 3vw, 24px); }
@media (min-width: 760px) { .categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.categoria { padding: clamp(22px, 4vw, 30px); border-radius: var(--raio); background: linear-gradient(180deg, var(--painel), #130f0b); box-shadow: 0 0 0 1px var(--linha) inset; }
.categoria h3 { display: flex; align-items: center; gap: 12px; color: var(--ouro); }
.categoria h3 svg { width: 36px; height: 36px; flex: none; }
.categoria ul { list-style: none; margin: 12px 0 0; padding: 0; }
.categoria li { padding: 12px 0; border-top: 1px solid var(--linha); }
.categoria li b { display: block; font-weight: 700; }
.categoria li span { color: var(--texto-2); font-size: .95rem; }
.promo__sub { font-weight: 700; }
.promo__frase { margin: 26px 0 0; font: 800 italic clamp(1.3rem, 4.6vw, 1.8rem)/1.1 var(--f-titulo); text-transform: uppercase; color: #16110b; }
.promo__selo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding: 20px 22px; border-radius: var(--raio); background: #16110b; }
.promo__selo p { margin: 0; color: var(--texto) !important; max-width: 28em; }
.promo__selo b { color: var(--ouro); }
.topo--estudio .topo__nome small { color: var(--creme); }

/* abas de seções, fixas logo abaixo do topo */
.abas { position: sticky; top: calc(var(--faixa-h) + 68px); z-index: 45; background: rgba(12, 10, 8, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--linha); }
.abas__trilho { width: min(100% - 16px, var(--larg)); margin-inline: auto; display: flex; gap: 6px; padding: 8px 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.abas__trilho::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .abas__trilho { justify-content: center; } }
.aba { flex: none; scroll-snap-align: center; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  font: 700 .8rem/1 var(--f-corpo); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); transition: background .25s, color .25s; }
.aba:hover { color: var(--texto); }
.aba.ativa { background: var(--ouro); color: var(--sobre-heroi); }
.aba--estudio { box-shadow: 0 0 0 1px rgba(217, 164, 65, .45) inset; color: var(--ouro); }

/* demonstrações de áudio do Estúdio JL (demos.js) */
.demos { display: grid; gap: clamp(22px, 4vw, 34px); }
@media (min-width: 900px) { .demos { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.demos__grupo h3 { color: var(--ouro); margin-bottom: 12px; }
.demos__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.demo { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 16px;
  background: linear-gradient(180deg, var(--painel), #130f0b); box-shadow: 0 0 0 1px var(--linha) inset; transition: box-shadow .25s; }
.demo--on { box-shadow: 0 0 0 1.5px var(--ouro) inset, 0 16px 36px -22px rgba(217, 164, 65, .6); }
.demo__play { width: 52px; height: 52px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: linear-gradient(180deg, #e8b85a, var(--ouro) 55%, #c18a2a); color: var(--sobre-heroi); box-shadow: 0 10px 22px -10px rgba(217, 164, 65, .8); }
.demo__play svg { width: 24px; height: 24px; }
.demo__info { min-width: 0; }
.demo__titulo { display: block; font-weight: 700; line-height: 1.25; }
.demo__tipo { display: block; font: 700 .66rem/1.4 var(--f-corpo); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.demo__barra { position: relative; height: 6px; margin-top: 8px; border-radius: 6px; background: rgba(246, 239, 227, .1); cursor: pointer; }
.demo__barra::before { content: ''; position: absolute; inset: -10px 0; }
.demo__barra i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; background: var(--ouro); }
.demo__tempo { font: 600 .82rem/1 var(--f-corpo); color: var(--texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* logo do Estúdio JL sempre ao lado do logo do locutor (pedido do Talles, 30/10/2026) */
.marcas { display: inline-flex; align-items: center; gap: 6px; }
.topo__marca .marcas img { width: auto; height: 46px; object-fit: contain; }
.hero__selo, .hero__selos { position: absolute; z-index: 2; right: 0; bottom: 14%; display: flex; align-items: flex-end; gap: 8px; filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .7)); }
.hero__selos img { width: auto; height: clamp(96px, 24vw, 150px); }
.rodape__marca img { width: auto; height: 54px; }
.final__escudos { display: inline-flex; align-items: flex-end; gap: 14px; margin-bottom: 22px; }
.final__escudos .final__escudo { width: auto; height: clamp(120px, 30vw, 180px); margin: 0; }
@media (max-width: 360px) { .topo__marca .marcas img { height: 38px; } .topo__nome { font-size: 1rem; } .topo__nav .topo__link:not(.topo__link--ig) { display: none; } }

/* faixa fixa da promoção (50% na primeira gravação) */
.promo-faixa { position: sticky; top: 0; z-index: 55; display: flex; align-items: center; justify-content: center; gap: 10px 16px; height: var(--faixa-h); overflow: hidden; padding: 6px 16px;
  background: linear-gradient(90deg, #c18a2a, var(--ouro) 50%, #c18a2a); color: var(--sobre-heroi); text-decoration: none; font: 600 .86rem/1.2 var(--f-corpo); text-align: center; }
.promo-faixa b { font-weight: 800; }
.promo-faixa__cta { flex: none; padding: 6px 12px; border-radius: 999px; background: var(--sobre-heroi); color: var(--ouro); font: 800 .72rem/1 var(--f-corpo); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 560px) { :root { --faixa-h: 60px; } .promo-faixa { font-size: .76rem; justify-content: space-between; text-align: left; } .promo-faixa__cta { padding: 6px 10px; font-size: .64rem; } }
@media (max-width: 560px) { .promo-faixa__mais { display: none; } }
@media (max-width: 420px) { .promo-faixa__site { display: none; } }
/* foto da capa de eventos (camisa do Brasil, braço aberto): mais larga que as outras */
@media (min-width: 900px) { .hero__foto:has(.pessoa--larga) { width: min(100%, 620px); } }
.hero__foto:has(.pessoa--larga) .hero__selos { bottom: 4%; right: 2%; }
.hero__foto:has(.pessoa--larga) .hero__selos img { height: clamp(64px, 17vw, 112px); }

/* selo "Powered by Netlify" (o Netlify põe em site novo do plano grátis, no canto de baixo): no celular ele sobe
   junto com a barra fixa (só quando ela aparece), para nunca cobrir o botão "Contrate". Desligar de vez: painel do Netlify → Project
   configuration → General → Powered by Netlify badge. */
@media (max-width: 899px) {
  #nl-badge-frame { transition: bottom .45s var(--ease-out); }
  body:has(.barra.vem) #nl-badge-frame { bottom: calc(92px + env(safe-area-inset-bottom)) !important; }
}

/* etiqueta das boas-vindas (boas-vindas.js): canto de baixo à esquerda; no celular sobe junto com a barra fixa */
.bv { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 70; display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid rgba(217, 164, 65, .55); background: rgba(12, 10, 8, .88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--ouro); font: 600 .78rem/1 var(--f-corpo); letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .7); cursor: pointer; opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), bottom .45s var(--ease-out), background .2s; }
.bv--vem { opacity: 1; transform: none; }
.bv:hover { background: rgba(32, 24, 14, .95); }
.bv:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }
.bv--on { background: var(--ouro); color: var(--sobre-heroi); border-color: var(--ouro); }
.bv__ico { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.bv__ico i { width: 3px; height: 6px; border-radius: 2px; background: currentColor; }
.bv__ico i:nth-child(2) { height: 12px; } .bv__ico i:nth-child(3) { height: 9px; } .bv__ico i:nth-child(4) { height: 14px; }
.bv--on .bv__ico i { animation: bv-onda .9s ease-in-out infinite alternate; }
.bv--on .bv__ico i:nth-child(2) { animation-delay: -.3s; } .bv--on .bv__ico i:nth-child(3) { animation-delay: -.6s; } .bv--on .bv__ico i:nth-child(4) { animation-delay: -.15s; }
@keyframes bv-onda { from { height: 4px; } to { height: 16px; } }
@media (max-width: 899px) {
  .bv__mais { display: none; }
  body:has(.barra.vem) .bv { bottom: calc(92px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .bv, .bv--on .bv__ico i { transition: none; animation: none; } }