/*
  ExtraordinariaMente, versão 3: o meio-termo (70% a estética da versão 1, 30% o clima da versão 2).
  O pó de ouro e toda a mecânica da versão 1, flutuando dentro da luz de um abajur.
  Cor tem dono:
    ouro          = o que passou na mente (o que a conversa extrai)
    luz do abajur = a conversa (o facho onde o ouro flutua)
    marfim        = a palavra e o livro
    couro         = quem pergunta (a dupla, sempre em pé de igualdade)
    brasa         = o agora (o presente, a página ainda sem final)
    vinho         = o convite (o lacre)
    preto quente  = a noite
*/
:root {
  --noite: #14100C;
  --noite-2: #1B150F;
  --noite-3: #0E0B08;
  --ouro: #C89B3C;
  --ouro-claro: #EAD397;
  --marfim: #F0E6D2;
  --marfim-2: rgba(240, 230, 210, .80);
  --marfim-3: rgba(240, 230, 210, .58);
  --areia: #A6947A;
  --couro: #B97A45;
  --couro-escuro: #4A2E19;
  --brasa: #E8783E;
  --brasa-clara: #F4A274;
  --vinho: #5B1F2A;
  --abajur: #FFD08A;
  --fio: rgba(200, 155, 60, .24);
  --fio-claro: rgba(240, 230, 210, .14);
  --margem: clamp(20px, 5vw, 72px);
  --titulo: "Playfair Display", Georgia, "Times New Roman", serif;
  --corpo: "Source Serif 4", Georgia, "Times New Roman", serif;
  --curva: cubic-bezier(.2, .7, .3, 1);
  --sombra-texto: 0 0 30px rgba(14, 11, 8, .96), 0 0 8px rgba(14, 11, 8, .8);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--noite); }
body {
  margin: 0;
  background: var(--noite);
  color: var(--marfim);
  font-family: var(--corpo);
  font-size: clamp(1.06rem, .4vw + .98rem, 1.24rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
img { max-width: 100%; display: block; }
strong { font-weight: 600; color: var(--marfim); }
button { font: inherit; color: inherit; }
::selection { background: var(--ouro); color: var(--noite); }

/* ---------- A cena (o pó de ouro dentro do facho do abajur) ---------- */
#cena {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  display: block;
  pointer-events: none;
  /* Fundo de reserva, caso o 3D não carregue: a luz baixa de um abajur e duas luzes de bar ao longe */
  background:
    radial-gradient(18% 12% at 70% 4%, rgba(255, 208, 138, .2), transparent 70%),
    radial-gradient(40% 46% at 70% 56%, rgba(200, 155, 60, .12), transparent 72%),
    radial-gradient(2.4% 3.4% at 14% 58%, rgba(255, 180, 100, .1), transparent 70%),
    radial-gradient(2% 3% at 88% 62%, rgba(232, 120, 62, .1), transparent 70%),
    var(--noite);
}
/* Sem 3D (ou quando a placa de vídeo desliga a cena no meio): o quadro do 3D some e fica o fundo de reserva */
.sem-3d #cena { visibility: hidden; }
html.sem-3d body {
  background:
    radial-gradient(18% 12% at 70% 4%, rgba(255, 208, 138, .2), transparent 70%),
    radial-gradient(40% 46% at 70% 56%, rgba(200, 155, 60, .12), transparent 72%),
    var(--noite);
}
/* Sem 3D: um facho de luz feito em CSS desce do abajur até o emblema de verdade (lição 22: a reserva também é design) */
.sem-3d .abertura {
  background: conic-gradient(from 163deg at 71% 9%, transparent 0deg, rgba(255, 205, 130, .085) 9deg, rgba(255, 205, 130, .085) 25deg, transparent 34deg);
}
.sem-3d .abertura::after {
  content: "";
  position: absolute;
  z-index: -2;
  right: 1vw;
  bottom: 9vh;
  width: min(56vw, 860px);
  aspect-ratio: 879 / 499;
  background: url(../assets/emblema-cerebro-sobre-livro.webp) center / cover no-repeat;
  -webkit-mask: radial-gradient(closest-side, #000 52%, transparent 100%);
  mask: radial-gradient(closest-side, #000 52%, transparent 100%);
  opacity: .9;
  pointer-events: none;
}
/* o abajur da reserva: a mesma silhueta, desenhada em CSS */
.abajur-reserva { display: none; }
.sem-3d .abajur-reserva {
  display: block;
  position: absolute;
  z-index: -1;
  left: 71%;
  top: 0;
  width: 190px;
  height: 9vh;
  transform: translateX(-50%);
  pointer-events: none;
}
.sem-3d .abajur-reserva::before {
  content: "";
  position: absolute;
  left: 50%; top: -20px; bottom: 54px;
  width: 1.5px;
  background: linear-gradient(180deg, transparent, #3a2c1d);
}
.sem-3d .abajur-reserva i {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 58px;
  border-radius: 50% 50% 6px 6px / 100% 100% 6px 6px;
  background: linear-gradient(180deg, #2a2016, #17110b);
  box-shadow: inset 0 -2px 0 rgba(234, 211, 151, .55), 0 -1px 0 rgba(234, 211, 151, .08);
}
.sem-3d .abajur-reserva::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -26px;
  width: 120px; height: 60px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 226, 170, .75), rgba(255, 190, 110, .18) 45%, transparent 100%);
}
.grao {
  position: fixed;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  opacity: .085;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .75 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.veu {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14, 11, 8, .5) 0, transparent 12%, transparent 84%, rgba(14, 11, 8, .7) 100%),
    radial-gradient(130% 90% at 50% 50%, transparent 55%, rgba(8, 6, 4, .55) 100%);
}
.topo, main, .rodape { position: relative; z-index: 2; }

/* Rótulos que a cena posiciona sobre o livro e a rede */
.rotulo-cena {
  position: fixed;
  z-index: 2;
  left: 0; top: 0;
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid var(--fio);
  background: rgba(14, 11, 8, .72);
  font-family: var(--titulo);
  font-style: italic;
  font-size: .9rem;
  color: var(--ouro-claro);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.rotulo-agora { color: var(--brasa-clara); border-color: rgba(232, 120, 62, .45); }
.rotulo-voce { color: var(--brasa-clara); border-color: rgba(232, 120, 62, .5); font-style: normal; letter-spacing: .04em; }

/* ---------- Topo ---------- */
.topo {
  position: absolute;
  z-index: 3;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: clamp(18px, 3vw, 32px) var(--margem);
}
.marca, .rodape-marca, .toca-nome, .convite-nome, .convite-fora-nome {
  font-family: var(--titulo);
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
}
.marca { font-size: 1.28rem; }
.marca span, .rodape-marca span, .toca-nome b, .convite-nome span, .convite-fora-nome span { color: var(--ouro); font-weight: 600; }
.topo-dupla { font-size: .9rem; letter-spacing: .04em; color: var(--marfim-3); }
.topo-dupla i, .rodape i, .convite-assinatura i { font-family: var(--titulo); font-style: italic; color: var(--ouro); padding: 0 .15em; }

/* ---------- O toca-discos pequeno no canto (o marcador de onde a pessoa está; vem da versão 2) ---------- */
.toca {
  --giro: 0deg;
  --braco: 0deg;
  position: fixed;
  z-index: 6;
  left: max(20px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 22px 6px 6px;
  border: 1px solid var(--fio);
  border-radius: 999px;
  background: rgba(20, 16, 12, .86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9);
  transform: translateY(160%);
  opacity: 0;
  transition: transform .8s var(--curva), opacity .5s;
}
.abertura-pronta .toca { transform: none; opacity: 1; }
.toca.escondido { transform: translateY(160%); opacity: 0; pointer-events: none; }
.toca-botao {
  position: relative;
  flex: none;
  width: 66px; height: 66px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.toca-botao:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 3px; }
.toca-prato {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #2b2520 0 62%, #57493a 64%, #2a231d 67%, #6f5c45 70%, #1e1914 73%);
  box-shadow: inset 0 0 0 1px rgba(234, 211, 151, .25), 0 4px 12px -4px #000;
}
.toca-disco {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 33%, rgba(234, 211, 151, .1) 34.5%, transparent 36%, transparent 55%, rgba(234, 211, 151, .08) 56%, transparent 57.5%, transparent 75%, rgba(234, 211, 151, .08) 76%, transparent 77.5%),
    repeating-radial-gradient(circle, #0c0a08 0 .8px, #1c1814 .8px 1.7px);
  transform: rotate(var(--giro));
  will-change: transform;
}
.toca-selo {
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1.5px #0b0907, 0 0 0 2.5px rgba(200, 155, 60, .5);
}
.toca-selo img { width: 100%; height: 100%; object-fit: cover; }
.toca-selo::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #d8c9a8; }
.toca-brilho {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0 6%, rgba(255, 228, 180, .2) 11%, transparent 17%, transparent 56%, rgba(255, 228, 180, .15) 61%, transparent 67%);
  -webkit-mask: radial-gradient(circle, transparent 0 34%, #000 36%);
  mask: radial-gradient(circle, transparent 0 34%, #000 36%);
  pointer-events: none;
}
.toca-braco {
  position: absolute;
  width: 58px; height: 58px;
  right: -14px; top: -11px;
  transform-origin: 83.33% 16.67%;
  transform: rotate(var(--braco));
  transition: filter .5s;
  filter: drop-shadow(3px 5px 2px rgba(0, 0, 0, .7));
  overflow: visible;
}
.som-ligado .toca-braco { filter: drop-shadow(1px 1.5px 1px rgba(0, 0, 0, .75)); }
.braco-base { fill: #3a2f24; stroke: var(--ouro); stroke-width: 1.2; }
.braco-haste { fill: none; stroke: #d9c08a; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.braco-capsula { fill: #2a221a; stroke: var(--ouro-claro); stroke-width: .8; }
.braco-pino { fill: var(--ouro-claro); }
.toca-texto { min-width: 0; display: grid; gap: 0; line-height: 1.25; }
.toca-nome { font-size: .98rem; white-space: nowrap; }
.toca-faixa { font-size: .9rem; font-style: italic; color: var(--marfim-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34ch; }
.toca-estado { flex: none; margin-left: 8px; padding-left: 16px; border-left: 1px solid var(--fio); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--areia); }
.som-ligado .toca-estado { color: var(--ouro-claro); }

/* ---------- Estrutura ---------- */
.secao { padding: clamp(110px, 19vh, 230px) var(--margem); }
.miolo { max-width: 1240px; margin: 0 auto; position: relative; }
.coluna { max-width: 680px; }

/* ---------- Tipografia ---------- */
.titulo-gigante, .titulo, .frase-batida, .momento-titulo {
  font-family: var(--titulo);
  font-weight: 600;
  letter-spacing: -.012em;
  text-wrap: balance;
  text-shadow: var(--sombra-texto);
}
.titulo-gigante { font-size: clamp(2.5rem, 5.7vw, 6rem); line-height: 1.03; }
.titulo-gigante .linha { display: block; }
.titulo-gigante .realce, .titulo em, .frase-batida em, .titulo-gigante em {
  font-style: italic;
  font-weight: 500;
  color: var(--ouro-claro);
}
.titulo-gigante .realce { margin-top: .06em; }
.titulo { font-size: clamp(2rem, 4vw, 3.7rem); line-height: 1.08; }
.titulo em { display: inline; }
.titulo-sombra { display: block; margin-top: .18em; font-style: italic; font-weight: 400; color: var(--areia); }
.subtitulo {
  max-width: 34em;
  margin-top: clamp(22px, 3.2vh, 38px);
  font-size: clamp(1.12rem, .7vw + 1rem, 1.4rem);
  line-height: 1.52;
  color: var(--marfim-2);
  text-shadow: var(--sombra-texto);
}
.texto { margin-top: clamp(20px, 3vh, 32px); color: var(--marfim-2); max-width: 36em; text-shadow: var(--sombra-texto); }
.rotulo-secao {
  font-size: .82rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ouro);
  margin-bottom: 22px;
}
.fecho {
  margin-top: clamp(50px, 8vh, 90px);
  padding-top: 24px;
  position: relative;
  font-family: var(--titulo);
  font-style: italic;
  font-size: clamp(1.6rem, 2.7vw, 2.5rem);
  line-height: 1.2;
  color: var(--ouro-claro);
  text-shadow: var(--sombra-texto);
}
.fecho::before { content: ""; position: absolute; top: 0; left: 0; width: 72px; height: 1.5px; background: var(--ouro); }

/* A frase-batida: uma frase gigante sozinha na tela */
.frase-batida {
  margin-top: clamp(110px, 18vh, 210px);
  font-size: clamp(2.9rem, 8.4vw, 8.2rem);
  line-height: .98;
  letter-spacing: -.025em;
  text-align: center;
  text-shadow: 0 0 50px rgba(14, 11, 8, .95);
}
.frase-batida em { display: block; }

/* ---------- Botões ---------- */
.acoes { margin-top: clamp(28px, 4.4vh, 50px); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 15px 32px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #E1BC69, var(--ouro));
  color: #1A120A;
  font-family: var(--corpo);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(234, 211, 151, .4), 0 18px 44px -18px rgba(200, 155, 60, .8);
  transition: transform .35s var(--curva), box-shadow .35s var(--curva), filter .25s;
}
.botao:hover { transform: translateY(-2px); filter: brightness(1.08); }
/* o botão da agulha (vem da versão 2): um disquinho que gira quando o jazz toca */
.botao-agulha {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--marfim-2);
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  text-shadow: var(--sombra-texto);
  transition: color .25s;
}
.botao-agulha:hover { color: var(--marfim); }
.botao-agulha .som-rotulo { text-decoration: underline; text-decoration-color: var(--fio); text-underline-offset: 7px; }
.mini-disco {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--ouro) 0 18%, #0c0a08 19% 23%, transparent 24%),
    repeating-radial-gradient(circle, #0d0b09 0 1px, #2a241e 1px 2px);
  box-shadow: 0 0 0 1px rgba(200, 155, 60, .5);
}
.som-ligado .mini-disco { animation: girar 1.8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.botao:focus-visible, .botao-agulha:focus-visible, .conquista:focus-visible, .marca:focus-visible, input:focus-visible {
  outline: 2px solid var(--ouro-claro);
  outline-offset: 4px;
}
.selo-estreia {
  margin-top: clamp(26px, 4vh, 44px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--areia);
}
.selo-estreia i { width: 7px; height: 7px; border-radius: 50%; background: var(--brasa); box-shadow: 0 0 12px var(--brasa); animation: pulsa 2.2s ease-in-out infinite; }
@keyframes pulsa { 0%, 100% { opacity: .45; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }

/* ---------- 1. Abertura ---------- */
.abertura {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: clamp(110px, 15vh, 160px);
  padding-bottom: clamp(80px, 11vh, 130px);
}
.abertura .miolo { width: 100%; }
.abertura .miolo > * { max-width: 760px; }
/* o título da abertura quebra em duas linhas por frase também em telas largas */
@media (min-width: 1101px) { .abertura .miolo > .titulo-gigante { max-width: 10em; } }
.abertura-kicker { font-size: .98rem; letter-spacing: .03em; color: var(--marfim-2); margin-bottom: clamp(18px, 3vh, 30px); text-shadow: var(--sombra-texto); }
.abertura-kicker strong { color: var(--ouro-claro); font-weight: 600; }
.abertura::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 64% at 22% 52%, rgba(14, 11, 8, .82) 0, rgba(14, 11, 8, .48) 52%, transparent 100%);
  opacity: 0;
  transition: opacity 1.6s var(--curva);
}
.abertura-pronta .abertura::before { opacity: 1; }
/* A entrada do texto: cada linha sai do desfoque, se aperta e assenta (só depois do acontecimento) */
html.com-js .abertura [data-rev] { opacity: 0; transform: translateY(24px); filter: blur(10px); transition: none; }
html.com-js .abertura .titulo-gigante .linha { transform: translateY(.3em) scale(1.03); filter: blur(12px); letter-spacing: .04em; }
html.abertura-pronta .abertura [data-rev] {
  animation: abertura-entra 1.15s var(--curva) forwards;
  animation-delay: calc(var(--i, 0) * 150ms + 60ms);
}
@keyframes abertura-entra { to { opacity: 1; transform: none; filter: blur(0); letter-spacing: var(--espaco-final, normal); } }
.abertura .titulo-gigante .linha { --espaco-final: -.012em; }
.abertura-pronta .abertura .realce { text-shadow: var(--sombra-texto), 0 0 60px rgba(234, 211, 151, .3); }

/* ---------- 2. A mesa (a foto dos dois, logo no começo; vem da versão 2) ---------- */
.mesa { padding-left: 0; padding-right: 0; padding-top: clamp(40px, 8vh, 110px); }
.mesa-palco {
  --lx: 70%; --ly: 32%;
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  max-height: 96vh;
  overflow: hidden;
  background: var(--noite-3);
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%), linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%), linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect;
}
.mesa-palco img { width: 100%; height: 100%; object-fit: cover; }
/* a luz do abajur: segue o cursor (no celular, passeia sozinha); fora dela, a penumbra */
.mesa-luz {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--lx) var(--ly), rgba(255, 196, 110, .14) 0, transparent 24%),
    radial-gradient(circle at var(--lx) var(--ly), transparent 0, rgba(12, 9, 6, .16) 22%, rgba(12, 9, 6, .55) 46%, rgba(12, 9, 6, .78) 80%),
    linear-gradient(90deg, rgba(14, 11, 8, .55) 0, transparent 40%),
    linear-gradient(0deg, rgba(14, 11, 8, .96) 0, rgba(14, 11, 8, .55) 28%, transparent 50%);
}
.mesa-texto { position: absolute; left: var(--margem); bottom: clamp(40px, 9vh, 96px); max-width: 600px; }
.mesa-texto .titulo { font-size: clamp(2.1rem, 3.8vw, 3.5rem); }
.mesa-texto .titulo em { display: block; }
.mesa-texto .texto { max-width: 31em; }

/* ---------- 3. A superfície ---------- */
.superficie-texto .titulo { font-size: clamp(2rem, 3.3vw, 3.2rem); }
.superficie-grade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 90px); align-items: center; }
.conquistas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  perspective: 1000px;
}
.conquista {
  position: relative;
  min-height: 112px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .9s var(--curva);
  text-align: left;
}
.conquista.virada { transform: rotateX(180deg); }
.conquista-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-radius: 10px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.conquista-frente {
  justify-content: center;
  text-align: center;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  letter-spacing: .02em;
  color: var(--ouro-claro);
  background:
    linear-gradient(160deg, rgba(234, 211, 151, .10), transparent 45%),
    linear-gradient(180deg, #2A1C11, #1A110A);
  border: 1px solid rgba(200, 155, 60, .38);
  box-shadow: inset 0 1px 0 rgba(234, 211, 151, .14), 0 18px 34px -20px #000;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}
.conquista-frente::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 6px;
  border: 1px solid rgba(200, 155, 60, .16);
  pointer-events: none;
}
.conquista-verso {
  transform: rotateX(180deg);
  font-family: var(--titulo);
  font-style: italic;
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  line-height: 1.32;
  color: #2B1E12;
  background: linear-gradient(180deg, #F3E9D5, #E6D6B6);
  border: 1px solid rgba(200, 155, 60, .6);
  box-shadow: 0 0 40px -6px rgba(234, 211, 151, .35);
}
.conquistas-dica { grid-column: 1 / -1; margin-top: 6px; font-size: .86rem; color: var(--areia); font-style: italic; }
.dica-toque { display: none; }
@media (hover: none) { .dica-cursor { display: none; } .dica-toque { display: inline; } }

/* ---------- 4. As perguntas ---------- */
.lista-perguntas { margin-top: clamp(50px, 8vh, 90px); display: grid; gap: clamp(26px, 4.4vh, 44px); max-width: 900px; }
.pergunta {
  position: relative;
  padding-left: clamp(46px, 6vw, 92px);
  font-family: var(--titulo);
  font-style: italic;
  font-size: clamp(1.5rem, 2.9vw, 2.7rem);
  line-height: 1.18;
  color: var(--marfim);
  text-shadow: var(--sombra-texto);
}
/* o fio de ouro que puxa cada pergunta */
.pergunta::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: clamp(30px, 4.6vw, 72px);
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--ouro));
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.1s var(--curva) .2s;
  box-shadow: 0 0 10px rgba(234, 211, 151, .6);
}
.pergunta.visto::before { transform: scaleX(1); }
.pergunta-texto.escrevendo::after {
  content: "";
  display: inline-block;
  width: 2px; height: .9em;
  margin-left: 4px;
  vertical-align: -.08em;
  background: var(--ouro-claro);
  animation: piscar 1s steps(1) infinite;
}
@keyframes piscar { 50% { opacity: 0; } }

/* ---------- 5. A conversa (a vitrine) ---------- */
.conversa { padding-left: 0; padding-right: 0; padding-bottom: 0; }
.conversa-abertura { padding: 0 var(--margem); max-width: calc(1240px + 2 * var(--margem)); min-height: 70vh; display: flex; flex-direction: column; justify-content: center; }
.conversa-titulo { font-size: clamp(2.5rem, 5.6vw, 5.4rem); line-height: 1.02; max-width: 12ch; }
.momento { min-height: 112vh; display: flex; align-items: center; padding: 10vh var(--margem); }
.momento-cartao { width: 100%; max-width: 1240px; margin: 0 auto; }
.momento-cartao > * { max-width: 600px; }
.com-js .momento-cartao { opacity: .14; transform: translateY(24px); transition: opacity .7s var(--curva), transform .9s var(--curva); }
.com-js .momento.ativo .momento-cartao { opacity: 1; transform: none; }
.momento-num {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--titulo);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ouro);
  margin-bottom: 10px;
}
.momento-num::after { content: ""; width: 54px; height: 1px; background: var(--fio); }
.momento-titulo { font-size: clamp(2.2rem, 4.2vw, 3.8rem); line-height: 1.02; }
.momento-pergunta {
  margin-top: clamp(16px, 2.6vh, 26px);
  font-family: var(--titulo);
  font-style: italic;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1.28;
  color: var(--ouro-claro);
  text-shadow: var(--sombra-texto);
}
.momento-texto { margin-top: 14px; color: var(--marfim-2); text-shadow: var(--sombra-texto); }
.lentes {
  margin-top: clamp(20px, 3vh, 30px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px;
  background: rgba(185, 122, 69, .3);
  border: 1px solid rgba(185, 122, 69, .3);
  border-radius: 8px;
  overflow: hidden;
}
.lente { padding: 16px 18px; background: rgba(20, 14, 9, .92); font-size: .98rem; line-height: 1.48; color: var(--marfim-2); }
.lente span { display: block; margin-bottom: 6px; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--couro); }
.momento-agora .momento-num, .momento-agora .momento-pergunta { color: var(--brasa-clara); }
.momento-agora .momento-num::after { background: rgba(232, 120, 62, .4); }
.ao-vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--brasa); box-shadow: 0 0 14px var(--brasa); animation: pulsa 1.6s ease-in-out infinite; }
.conversa-fecho { padding: 6vh var(--margem) clamp(110px, 19vh, 230px); max-width: calc(1240px + 2 * var(--margem)); }
.fecho-conversa {
  font-family: var(--titulo);
  font-style: italic;
  font-size: clamp(1.9rem, 3.8vw, 3.4rem);
  line-height: 1.12;
  max-width: 20ch;
  text-wrap: balance;
  text-shadow: var(--sombra-texto);
}
.fecho-conversa span { display: block; margin-top: .45em; color: var(--brasa-clara); }

/* ---------- 6. Quem pergunta ---------- */
.dupla-cabeca { max-width: 860px; }
.dupla-cabeca .titulo em { display: block; margin-top: .14em; }
.retratos {
  margin-top: clamp(44px, 7vh, 80px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, .62fr) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 28px);
  align-items: start;
}
.retrato-foto {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(185, 122, 69, .45);
  box-shadow: 0 30px 70px -30px #000;
  aspect-ratio: 640 / 901;
  background: var(--noite-2);
}
.retrato-foto img { width: 100%; height: 100%; object-fit: cover; }
/* o holofote: a foto começa no escuro e acende; a Carol primeiro */
.retrato-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 55% at 50% 30%, rgba(14, 11, 8, .35), rgba(14, 11, 8, .94));
  opacity: 1;
  transition: opacity 1.4s var(--curva);
  transition-delay: calc(var(--i, 0) * 650ms + 250ms);
}
.retrato.visto .retrato-foto::after { opacity: 0; }
.holofote {
  position: absolute;
  inset: -10% 0 auto;
  height: 70%;
  background: radial-gradient(50% 60% at 50% 0, rgba(255, 220, 150, .38), transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
.retrato.visto .holofote { animation: holofote 1.6s var(--curva) forwards; animation-delay: calc(var(--i, 0) * 650ms + 250ms); }
@keyframes holofote { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: .25; } }
.retrato figcaption { margin-top: 18px; display: grid; gap: 4px; }
.retrato strong { font-family: var(--titulo); font-weight: 600; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.1; color: var(--marfim); }
.papel { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--couro); }
.descritor { margin-top: 8px; font-family: var(--titulo); font-style: italic; font-size: clamp(1.05rem, 1.3vw, 1.22rem); line-height: 1.38; color: var(--ouro-claro); }
.retratos-meio { align-self: stretch; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 32%; }
.retratos-meio span { font-family: var(--titulo); font-style: italic; font-size: .92rem; color: var(--areia); text-align: center; max-width: 12ch; line-height: 1.35; text-shadow: var(--sombra-texto); }
.dupla-juntos {
  margin-top: clamp(50px, 8vh, 90px);
  max-width: 30ch;
  font-family: var(--titulo);
  font-size: clamp(1.5rem, 2.5vw, 2.3rem);
  line-height: 1.25;
  text-shadow: var(--sombra-texto);
}
.dupla-juntos span { display: block; margin-top: .4em; font-style: italic; color: var(--ouro-claro); }

/* ---------- 7. O mundo ---------- */
.frase-conexao { font-size: clamp(2.6rem, 7vw, 6.8rem); }
.frase-conexao em { margin-top: .12em; font-size: .62em; }
.dica-rede { margin-top: 28px; text-align: center; font-size: .9rem; font-style: italic; color: var(--areia); }

/* ---------- 8. A estreia e o convite ---------- */
.estreia { padding-bottom: 0; }
.estreia-grade { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(40px, 7vw, 110px); align-items: center; }
.estreia .texto { max-width: 26em; }
.convite-palco { perspective: 1500px; }
.convite {
  --rx: 0deg; --ry: 0deg;
  position: relative;
  width: min(430px, 86vw);
  height: 600px;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 1.3s var(--curva);
}
.convite.aberto { transform: rotateX(var(--rx)) rotateY(calc(180deg + var(--ry))); }
.convite.com-cursor { transition: transform .25s ease-out; }
.convite-face {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}
.convite-fora {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background:
    radial-gradient(90% 60% at 30% 20%, rgba(255, 220, 160, .14), transparent 60%),
    linear-gradient(160deg, #8C5A31, #5A3820 55%, #3C2414);
  border: 1px solid rgba(234, 211, 151, .35);
  box-shadow: 0 40px 80px -36px #000, inset 0 0 60px rgba(0, 0, 0, .45);
}
.convite-filete { position: absolute; inset: 14px; border: 1px solid rgba(234, 211, 151, .5); border-radius: 8px; }
.convite-filete::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(234, 211, 151, .2); border-radius: 5px; }
.convite-fora-nome { font-size: 1.9rem; color: var(--marfim); text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
.convite-fora-nome span { color: var(--ouro-claro); }
.convite-fora-linha { font-family: var(--titulo); font-style: italic; color: rgba(240, 230, 210, .78); }
.lacre {
  margin-top: 26px;
  width: 96px; height: 96px;
  display: grid; place-items: center;
  border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 38% 32%, #8A3443, var(--vinho) 55%, #3A1219);
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .8), inset 0 -6px 12px rgba(0, 0, 0, .35), inset 0 4px 8px rgba(255, 255, 255, .12);
}
.lacre b {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(234, 211, 151, .75);
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: .06em;
  color: var(--ouro-claro);
}
.convite-dentro {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 30px 24px;
  text-align: center;
  color: #2B1E12;
  background:
    radial-gradient(120% 80% at 50% 0, #F8F0E0, #EBDDC2 70%, #E2D0AE);
  border: 1px solid rgba(200, 155, 60, .7);
  box-shadow: 0 40px 80px -36px #000;
}
.convite-dentro::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(160, 118, 40, .45); border-radius: 8px; pointer-events: none; }
.convite-medalhao { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ouro); box-shadow: 0 6px 16px -6px rgba(60, 36, 10, .6); }
.convite-nome { margin-top: 14px; font-size: 1.7rem; color: #2B1E12; }
.convite-nome span { color: #9A6E1E; }
.convite-frase { margin-top: 4px; font-family: var(--titulo); font-style: italic; font-size: 1.02rem; color: #5A4530; }
.convite-form { margin-top: 22px; width: 100%; display: grid; gap: 10px; position: relative; z-index: 1; }
.convite-rotulo { text-align: left; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: #7A5A2E; }
.convite-form input {
  width: 100%;
  min-height: 50px;
  padding: 10px 14px;
  border: 1px solid rgba(122, 90, 46, .45);
  border-radius: 8px;
  background: rgba(255, 252, 245, .75);
  color: #2B1E12;
  font-family: var(--corpo);
  font-size: 1.02rem;
}
.convite-form input::placeholder { color: rgba(90, 69, 48, .5); }
.convite-form input:focus { outline: 2px solid #9A6E1E; outline-offset: 1px; }
.botao-convite { width: 100%; min-height: 52px; padding: 12px 18px; font-size: 1rem; background: linear-gradient(180deg, #2E2116, #1A120A); color: var(--ouro-claro); box-shadow: 0 12px 26px -14px rgba(26, 18, 10, .9); }
.convite-nota { min-height: 1.4em; font-size: .9rem; color: #6B5236; }
.convite-nota.ok { color: #6E4B10; font-weight: 600; }
.convite-nota.erro { color: #8A2E1E; }
.convite-assinatura { margin-top: auto; padding-top: 14px; font-family: var(--titulo); font-style: italic; font-size: 1.02rem; color: #5A4530; }

/* no fim da página, o abajur e o emblema pequeno ficam em cima e a frase final logo abaixo, dentro da mesma luz */
.fechamento { min-height: 86vh; display: flex; align-items: flex-end; padding: clamp(110px, 19vh, 220px) 0 clamp(22px, 3.4vh, 40px); text-align: center; }
.fechamento .miolo { width: 100%; }
.titulo-final { font-size: clamp(2.5rem, 5.4vw, 5.6rem); max-width: 14ch; margin: 0 auto; }
.titulo-final em { display: block; }
.fechamento .subtitulo { margin-left: auto; margin-right: auto; }

/* ---------- Rodapé ---------- */
.rodape { padding: 40px var(--margem) 104px; text-align: center; border-top: 1px solid var(--fio); color: var(--areia); font-size: .94rem; background: var(--noite); }
.rodape-marca { font-size: 1.6rem; color: var(--marfim); margin-bottom: 8px; }

/* ---------- Entrada dos blocos ---------- */
.com-js [data-rev] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--curva), transform .9s var(--curva);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.com-js [data-rev].visto { opacity: 1; transform: none; }

/* ---------- Telas médias ---------- */
@media (max-width: 1100px) {
  .superficie-grade { grid-template-columns: minmax(0, 1fr); }
  .conquistas { max-width: 620px; }
  .estreia-grade { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .toca-estado { display: none; }
}

/* ---------- Celular ---------- */
@media (max-width: 760px) {
  .topo-dupla { display: none; }
  .toca { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); gap: 12px; padding: 5px 16px 5px 5px; }
  .toca-botao { width: 56px; height: 56px; }
  .toca-braco { width: 50px; height: 50px; right: -12px; top: -9px; }
  .toca-nome { font-size: .86rem; }
  .toca-faixa { font-size: .84rem; max-width: none; }

  .abertura { align-items: flex-end; padding-top: 50svh; padding-bottom: 56px; }
  .abertura::before { background: linear-gradient(180deg, transparent 34%, rgba(14, 11, 8, .66) 52%, rgba(14, 11, 8, .9) 74%, rgba(14, 11, 8, .92) 100%); }
  .sem-3d .abertura { background: conic-gradient(from 160deg at 50% 12%, transparent 0deg, rgba(255, 205, 130, .1) 12deg, rgba(255, 205, 130, .1) 28deg, transparent 40deg); }
  .sem-3d .abertura::after { right: -6vw; left: -6vw; bottom: auto; top: 17svh; width: auto; }
  .sem-3d .abajur-reserva { left: 50%; top: 40px; width: 130px; height: 58px; }
  .sem-3d .abajur-reserva::before { top: -40px; }
  .sem-3d .abajur-reserva i { height: 38px; }
  .titulo-gigante { font-size: clamp(2.15rem, 9.6vw, 3.1rem); line-height: 1.05; }
  .abertura-kicker { font-size: .9rem; }
  .titulo { font-size: clamp(1.85rem, 8vw, 2.5rem); }
  .botao { width: 100%; }
  .acoes { gap: 6px 20px; }
  .botao-agulha { font-size: .95rem; }

  .mesa { padding-top: 40px; }
  .mesa-palco { aspect-ratio: auto; max-height: none; overflow: visible; -webkit-mask: none; mask: none; background: none; }
  .mesa-palco img { height: auto; aspect-ratio: 16 / 9; -webkit-mask: linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%); mask: linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%); }
  .mesa-luz { bottom: auto; height: calc(100vw * 9 / 16); background: radial-gradient(circle at var(--lx) var(--ly), transparent 0, rgba(12, 9, 6, .12) 26%, rgba(12, 9, 6, .5) 58%); }
  .mesa-texto { position: relative; left: auto; bottom: auto; padding: 18px var(--margem) 0; }

  .conquista { min-height: 104px; }
  .conquista-face { padding: 12px 14px; }
  .conquista-verso { font-size: .98rem; }
  .frase-batida { font-size: clamp(2.6rem, 13.5vw, 4.2rem); }

  .conversa-abertura { min-height: 60svh; }
  .momento { min-height: 104svh; align-items: flex-end; padding: 46svh 16px 6svh; }
  .momento-titulo { font-size: 1.9rem; }
  .momento-pergunta { font-size: 1.2rem; }
  .momento-texto { font-size: .98rem; }
  .lentes { grid-template-columns: minmax(0, 1fr); }
  .lente { padding: 12px 14px; font-size: .94rem; }

  .retratos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  .retratos-meio { display: none; }
  .retrato figcaption { margin-top: 12px; }
  .retrato strong { font-size: 1.35rem; }
  .papel { font-size: .66rem; letter-spacing: .14em; }
  .descritor { font-size: .98rem; }

  .convite { height: 580px; }
  .convite-dentro { padding: 26px 22px 20px; }
  .fechamento { min-height: 76svh; }
}

/* ---------- Menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .com-js [data-rev] { opacity: 1; transform: none; transition: none; }
  html.com-js .abertura [data-rev], html.com-js .abertura .titulo-gigante .linha { opacity: 1; transform: none; filter: none; letter-spacing: var(--espaco-final, normal); animation: none; }
  .abertura::before { opacity: 1; transition: none; }
  .com-js .momento-cartao { opacity: 1; transform: none; transition: none; }
  .selo-estreia i, .ao-vivo, .som-ligado .mini-disco { animation: none; }
  .conquista { transition: none; }
  .retrato-foto::after { opacity: 0; transition: none; }
  .holofote { display: none; }
  .pergunta::before { transform: scaleX(1); transition: none; }
  .convite, .convite.com-cursor { transition: none; }
  .toca { transition: none; }
}

/* ---------- 24/10/2026: o conteúdo do site original de volta (pedido do André) ---------- */
/* a luminária saiu ("a Hero pura": só o livro e o cérebro); a reserva sem 3D também não desenha mais o abajur */
.abajur-reserva { display: none !important; }
/* A experiência: o texto do site original, em itálico grande, centrado, como era */
.experiencia { text-align: center; }
.experiencia .rotulo-secao { justify-content: center; }
.experiencia-texto { font-family: var(--titulo); font-style: italic; font-weight: 400; font-size: clamp(1.35rem, 2.7vw, 2.3rem); line-height: 1.46; color: var(--ouro-claro); max-width: 24ch; margin: clamp(18px, 3vh, 30px) auto 0; text-wrap: balance; text-shadow: var(--sombra-texto); }
.experiencia-texto b { color: var(--marfim); font-weight: 400; }
.experiencia-som { display: flex; width: fit-content; max-width: 100%; margin: clamp(30px, 5vh, 48px) auto 0; text-align: left; }
/* O que você leva */
.leva { text-align: center; }
.leva-miolo { max-width: 900px; }
.leva .rotulo-secao { justify-content: center; }
.leva-antes { font-family: var(--titulo); font-style: italic; color: var(--areia); font-size: clamp(1.15rem, 2.2vw, 1.8rem); margin-top: clamp(14px, 2vh, 22px); text-shadow: var(--sombra-texto); }
.leva-titulo { font-family: var(--titulo); font-weight: 600; font-size: clamp(2.1rem, 5vw, 4rem); line-height: 1.08; margin-top: 6px; text-wrap: balance; text-shadow: var(--sombra-texto); }
.leva-titulo em { font-style: italic; color: var(--ouro-claro); }
.leva-texto { margin: clamp(20px, 3vh, 32px) auto 0; max-width: 30em; }
.leva-texto b { color: var(--marfim); font-weight: 400; }

/* ---------- 24/10/2026: o filme, no player dos vídeos institucionais do BrainPower (VideoPrograma.tsx), em dourado ---------- */
.filme { text-align: center; }
.filme .rotulo-secao { text-align: center; }
.filme-titulo { margin: 0 auto; max-width: 20ch; text-wrap: balance; }
.filme-titulo em { font-style: italic; color: var(--ouro-claro); }
.player { position: relative; margin: clamp(30px, 5vh, 52px) auto 0; max-width: 1000px; border-radius: 20px; overflow: hidden; background: #0a0908;
  border: 1px solid rgba(200, 155, 60, .42); box-shadow: 0 0 0 1px rgba(200, 155, 60, .18), 0 30px 80px rgba(0, 0, 0, .5), 0 0 44px rgba(200, 155, 60, .12); transition: box-shadow .3s ease; }
.player:hover { box-shadow: 0 0 0 1px rgba(200, 155, 60, .42), 0 34px 90px rgba(0, 0, 0, .6), 0 0 70px rgba(200, 155, 60, .2); }
.player video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0a0908; }
.player-selo { position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 100px; pointer-events: none;
  background: rgba(10, 9, 8, .72); border: 1px solid rgba(200, 155, 60, .36); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--corpo); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #F0ECE2; }
.player-selo i { width: 7px; height: 7px; border-radius: 50%; background: var(--ouro); box-shadow: 0 0 10px var(--ouro); }
.player-play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 0; padding: 0; cursor: pointer; color: inherit;
  background: linear-gradient(180deg, rgba(10, 9, 8, .05), rgba(10, 9, 8, .4)); }
.player-play:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: -6px; }
.player-disco { position: relative; width: 84px; height: 84px; border-radius: 50%; background: var(--ouro); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 40px rgba(200, 155, 60, .5), inset 0 0 0 1px rgba(255, 255, 255, .22); transition: transform .3s ease; }
.player-disco::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: rgba(200, 155, 60, .32); animation: player-pulso 1.6s cubic-bezier(0, 0, .2, 1) infinite; z-index: -1; }
@keyframes player-pulso { 75%, 100% { transform: scale(1.6); opacity: 0; } }
.player:hover .player-disco { transform: scale(1.05); }
.player-tri { margin-left: 6px; border-style: solid; border-width: 15px 0 15px 26px; border-color: transparent transparent transparent #0a0908; }
.player-rotulo { display: inline-flex; padding: 8px 16px; border-radius: 100px; background: rgba(10, 9, 8, .74); border: 1px solid rgba(200, 155, 60, .46); color: #F0ECE2;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-family: var(--corpo); font-size: .875rem; font-weight: 600; }
.player.com-som .player-selo, .player.com-som .player-play { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 600px) { .player-disco { width: 68px; height: 68px; } .player-tri { border-width: 12px 0 12px 21px; margin-left: 5px; } .player-selo { left: 10px; top: 10px; } }
@media (prefers-reduced-motion: reduce) { .player-disco::before { animation: none; } }