@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  --branco: #FFFFFF;
  --texto: #373737;
  --card: #F5F5F5;
  --vermelho: #EE273F;
  --preto: #000000;
  --borda: #E0E0E0;

  /* derivados (contraste e estados) */
  --texto-2: #5F5F5F;
  --vermelho-escuro: #C41C31;
  --vermelho-suave: rgba(238, 39, 63, .14);
  --rodape-texto: #C9C9C9;

  /* superfícies escuras (seções ink) */
  --ink: #0E0F12;
  --ink-2: #16181D;
  --ink-borda: #262931;
  --ink-texto: #E8E9EC;
  --ink-texto-2: #9BA0AB;
  /* vermelho legível como TEXTO sobre o ink (o #EE273F fica pra botão/acento/glow) */
  --vermelho-ink: #FF5A6E;

  /* forma */
  --raio: 8px;
  --raio-md: 12px;
  --raio-lg: 16px;
  --sombra: 0 2px 8px rgba(0, 0, 0, .06);
  --sombra-md: 0 10px 30px rgba(0, 0, 0, .08);
  --sombra-lg: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .08), 0 24px 48px rgba(0, 0, 0, .06);
  --container: 1120px;
  --gutter: 20px;
}

@media (min-width: 760px) {
  :root { --gutter: 32px; }
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', sans-serif;
  color: var(--texto);
  background: var(--branco);
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  color: var(--preto);
  font-weight: 800;
  line-height: 1.18;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(1.85rem, 1.15rem + 3.1vw, 3.15rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.25rem); }
h3 { font-size: 1.125rem; line-height: 1.3; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--vermelho-escuro); }

[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--vermelho-escuro);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* seções: ritmo vertical + faixas alternadas */
section { padding: clamp(48px, 7vw, 88px) 0; }
.faixa { background: var(--card); border-block: 1px solid var(--borda); }

.sec-head { max-width: 62ch; margin: 0 auto clamp(28px, 4vw, 44px); text-align: center; }
.sec-head .apoio { color: var(--texto-2); font-size: 1.0625rem; margin: 0; }

/* rótulo acima do H2 de cada seção */
.eyebrow {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vermelho-escuro);
  margin: 0 0 14px;
}

.microcopy {
  color: var(--texto-2);
  font-size: .9375rem;
  margin: 12px 0 0;
}

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--preto);
  color: #fff;
  padding: 12px 18px;
  z-index: 20;
  text-decoration: none;
}
.pular:focus { left: 0; }

/* ==========================================================================
   Superfície escura (hero + oferta)
   ========================================================================== */
.secao-ink {
  background-color: var(--ink);
  background-image: radial-gradient(80% 60% at 70% 20%, rgba(238, 39, 63, .08), transparent 60%);
  color: var(--ink-texto);
}
.secao-ink h1,
.secao-ink h2,
.secao-ink h3 { color: var(--ink-texto); }
.secao-ink .eyebrow { color: var(--vermelho-ink); }
.secao-ink .sec-head .apoio { color: var(--ink-texto-2); }
.secao-ink .microcopy { color: var(--ink-texto-2); }
.secao-ink :focus-visible { outline-color: var(--vermelho-ink); }

/* ==========================================================================
   Motion — reveal on scroll (controlado por ui.js)
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease-out, transform .5s ease-out;
}
[data-reveal].revelado { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Botões
   ========================================================================== */
.btn-primario {
  background: var(--vermelho);
  color: #fff;
  border: 2px solid var(--vermelho);
  border-radius: 8px;
  font-weight: 700;
  padding: 14px 28px;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.1875rem;
  line-height: 1.25;
  text-align: center;
  transition: background-color .15s ease, color .15s ease;
}
.btn-primario:hover { background: #fff; color: var(--vermelho); }
.btn-primario:active { transform: translateY(1px); }
.btn-bloco { display: block; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .btn-primario { transition: none; }
  .btn-primario:active { transform: none; }
}

/* ==========================================================================
   1. Header
   ========================================================================== */
.topo {
  background: var(--branco);
  border-top: 4px solid var(--vermelho);
  border-bottom: 1px solid var(--borda);
}

.topo-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.topo-marcas { display: flex; align-items: center; gap: 12px; }

/* o header traz só o logo da RNL — o parceiro é nomeado por texto, no selo */
.logo-rnl { width: 104px; height: auto; }

.selo-parceria {
  display: inline-block;
  background: var(--vermelho-suave);
  color: var(--vermelho-escuro);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .01em;
}

@media (min-width: 760px) {
  .logo-rnl { width: 132px; }
  .selo-parceria { font-size: .875rem; }
}

/* ==========================================================================
   2. Hero centrado (VSL como elemento visual principal)
   ========================================================================== */
/* Uma coluna centrada, em qualquer viewport:
   badge > H1 > sub > PLAYER > assinatura > CTA > microcopy > strip.
   O vídeo é o elemento dominante da dobra — nada disputa espaço com ele. */
.hero { padding: clamp(28px, 4.5vw, 68px) 0 clamp(48px, 7vw, 88px); }

/* glow recentralizado: com o hero em coluna única o brilho nasce atrás do player */
.hero.secao-ink {
  background-image: radial-gradient(70% 50% at 50% 34%, rgba(238, 39, 63, .10), transparent 62%);
}

.hero-inner {
  max-width: calc(880px + var(--gutter) * 2);
  text-align: center;
}

.hero h1 {
  font-size: clamp(2.1rem, 1.2rem + 4vw, 4rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.08;
  margin: 0 auto 18px;
  text-wrap: balance;
}

/* a subheadline entra depois do player: o vídeo é o primeiro elemento após o H1 */
.hero .sub {
  font-size: clamp(1rem, .95rem + .4vw, 1.1875rem);
  color: var(--ink-texto-2);
  max-width: 62ch;
  margin: 0 auto clamp(26px, 3.4vw, 34px);
}

.hero h1 em {
  font-style: normal;
  color: var(--vermelho-ink);
}

.hero-media { margin: clamp(22px, 3.4vw, 40px) 0 clamp(22px, 3vw, 30px); }

.hero-cta { display: block; width: 100%; }

@media (min-width: 700px) {
  .hero-cta { display: inline-block; width: auto; }
}

/* Dobra estreita: o vídeo é o elemento principal da página e precisa aparecer
   quase inteiro sem rolar. Abaixo de 480px o topo do hero é comprimido (o H1
   desce um degrau abaixo do piso do token) pra manter ~88% do player na dobra. */
@media (max-width: 480px) {
  .hero { padding-top: 22px; }
  .hero h1 { font-size: clamp(1.85rem, 1.1rem + 3.3vw, 2.1rem); margin-bottom: 12px; }
  .hero .sub { font-size: .9375rem; line-height: 1.5; }
  .hero-media { margin-top: 18px; }
}

/* Dobra do vídeo em laptop: o H1 em escala cheia empurra o player pra fora
   da dobra em telas ~1366×768. Reduz a escala do H1 a partir do desktop
   pra manter o topo do player visível sem rolar. */
@media (min-width: 1000px) {
  .hero h1 { font-size: clamp(2.4rem, 1.5rem + 1.7vw, 3.2rem); }
}

/* --- player --------------------------------------------------------------- */
.player-holder { position: relative; }

.video-wrap {
  position: relative;
  padding-top: 56.25%;
  border-radius: var(--raio-lg);
  overflow: hidden;
  background: var(--preto);
  max-width: 920px;
  margin: 0 auto;
  box-shadow:
    0 0 0 1px var(--ink-borda),
    0 24px 64px rgba(0, 0, 0, .5),
    0 0 80px rgba(238, 39, 63, .15);
}
.video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 700px) {
  .player-holder { margin: 22px 0 34px; }
}

/* ==========================================================================
   Ícone em chip quadrado (recursos + destaque do estúdio)
   ========================================================================== */
.ico-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--vermelho-suave);
  color: var(--vermelho-escuro);
  margin-bottom: 16px;
}
.ico-chip svg { width: 24px; height: 24px; display: block; }

/* ==========================================================================
   4. Recursos da plataforma
   ========================================================================== */
.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 600px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (min-width: 1000px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

.card-recurso {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-lg);
  padding: 26px 24px 28px;
  /* as duas primeiras durações são do hover; as duas últimas mantêm o reveal do ui.js */
  transition: border-color .15s ease, box-shadow .15s ease,
              opacity .5s ease-out, transform .5s ease-out;
}
.card-recurso:hover {
  border-color: rgba(238, 39, 63, .34);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 28px rgba(0, 0, 0, .10), 0 28px 56px rgba(0, 0, 0, .07);
}
.card-recurso h3 { margin: 0 0 8px; }
.card-recurso p { color: var(--texto-2); font-size: .9375rem; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .card-recurso { transition: border-color .15s ease, box-shadow .15s ease; }
}

/* ==========================================================================
   7. Mosaico de segmentos (faixa de imagem de apoio)
   ========================================================================== */


/* ==========================================================================
   8. Oferta do convênio (sobre o ink)
   ========================================================================== */
.oferta-card {
  position: relative;
  background: var(--ink-2);
  border-radius: var(--raio-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
  padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 44px) clamp(32px, 4vw, 48px);
  max-width: 720px;
  margin: 0 auto;
}
/* borda de 1px em gradiente (máscara: só a moldura fica visível) */
.oferta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(238, 39, 63, .6), rgba(238, 39, 63, .1) 40%, rgba(38, 41, 49, .9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.oferta-card .sec-head { margin-bottom: 26px; }

/* planos que entram no convênio */
.planos-label {
  margin: 0 0 12px;
  text-align: center;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-texto-2);
}
.planos-pills {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.planos-pills li {
  background: transparent;
  border: 1px solid var(--ink-borda);
  color: var(--ink-texto);
  border-radius: 999px;
  padding: 8px 22px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.itens-oferta {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 16px;
  text-align: left;
}
.itens-oferta li {
  position: relative;
  padding: 0 0 0 32px;
  font-size: 1rem;
  color: var(--ink-texto-2);
}
.itens-oferta li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--vermelho-ink);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.6;
}
.itens-oferta strong { color: var(--ink-texto); font-weight: 800; }

.oferta-nota {
  margin: 0 0 28px;
  text-align: center;
  color: var(--ink-texto-2);
  font-size: .9375rem;
}

.oferta-acao { text-align: center; }

/* ==========================================================================
   9. Prova social (números direto no fundo, sem cards)
   ========================================================================== */
.grid-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px 18px;
}

@media (min-width: 1000px) {
  .grid-stats { grid-template-columns: repeat(4, 1fr); gap: 32px; }
}

.stat { text-align: center; }
.stat::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  background: var(--vermelho);
  border-radius: 2px;
  margin: 0 auto 16px;
}

.num {
  display: flex;
  flex-wrap: nowrap; /* "+", "até", "%" nunca se separam do número */
  align-items: baseline;
  justify-content: center;
  gap: 0 .08em;
  color: var(--preto);
  font-size: clamp(2.6rem, 2rem + 3vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  margin: 0 0 10px;
  font-variant-numeric: tabular-nums;
}
.num-sym { letter-spacing: -.04em; }
.num-word {
  font-size: .3em;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--texto-2);
}

/* telas muito estreitas: o número desce um degrau pra caber inteiro na coluna */
@media (max-width: 369px) {
  .grid-stats { gap: 30px 14px; }
  .num { font-size: 2.15rem; }
}

.leg {
  color: var(--texto-2);
  font-size: .9375rem;
  line-height: 1.45;
  margin: 0 auto;
  max-width: 24ch;
}

/* ==========================================================================
   10. Captação
   ========================================================================== */
.captacao-inner { max-width: 720px; }

.form-card {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-lg);
  padding: clamp(24px, 3.5vw, 40px);
}

.campos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 24px;
}

@media (min-width: 640px) {
  .campos { grid-template-columns: repeat(2, 1fr); }
  .campo { grid-column: 1 / -1; }
  .campo-metade { grid-column: span 1; }
}

.campo label {
  display: block;
  font-weight: 700;
  font-size: .9375rem;
  color: var(--preto);
  margin-bottom: 6px;
}
.req { color: var(--vermelho); }

.campo input,
.campo select {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--texto);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 12px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--texto-2) 50%),
                    linear-gradient(135deg, var(--texto-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.campo input:focus,
.campo select:focus {
  outline: none;
  border-color: var(--vermelho);
  box-shadow: 0 0 0 3px var(--vermelho-suave);
}
.campo input::placeholder { color: #9A9A9A; }

.campo-erro {
  display: none;
  margin-top: 6px;
  font-size: .875rem;
  font-weight: 700;
  color: var(--vermelho-escuro);
}
.campo.tem-erro .campo-erro { display: block; }
.campo.tem-erro input,
.campo.tem-erro select { border-color: var(--vermelho-escuro); }

/* Honeypot invisível */
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-card .microcopy { text-align: center; }

.sucesso { text-align: center; }
.sucesso-texto {
  font-size: 1.0625rem;
  color: var(--texto);
  max-width: 46ch;
  margin: 0 auto 24px;
}
.sucesso::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  background: var(--vermelho);
  border-radius: 2px;
  margin: 0 auto 20px;
}

/* ==========================================================================
   11. Footer
   ========================================================================== */
.rodape {
  background: var(--preto);
  color: var(--rodape-texto);
  padding: clamp(40px, 5vw, 64px) 0 28px;
  font-size: .9375rem;
}

.rodape-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

@media (min-width: 760px) {
  .rodape-inner { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

.rodape-marca {
  color: #fff;
  font-weight: 800;
  font-size: 1.0625rem;
  margin-bottom: 6px;
}
.rodape-titulo {
  color: #fff;
  font-weight: 700;
  margin-bottom: 10px;
}
.rodape-linha { margin: 0 0 8px; }

.rodape-links { list-style: none; margin: 0; padding: 0; }
.rodape-links li { margin-bottom: 8px; }

.rodape a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.rodape a:hover { color: var(--vermelho); }
.rodape :focus-visible { outline-color: #fff; }

.rodape-final {
  margin: 32px 0 0;
  padding-top: 20px;
  border-top: 1px solid #2A2A2A;
  color: #8F8F8F;
  font-size: .875rem;
}


/* ==========================================================================
   Perfis musicais por segmento (embeds SoundCloud)
   ========================================================================== */
.perfis { position: relative; overflow: hidden; }
.perfis > .container { position: relative; z-index: 3; }

.perfis-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 auto clamp(24px, 3.4vw, 34px);
  max-width: 62rem;
}

.chip-seg {
  appearance: none;
  border: 1px solid var(--borda);
  background: var(--branco);
  color: var(--texto);
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
  padding: 11px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.chip-seg:hover { border-color: var(--texto-2); }
.chip-seg[aria-selected="true"] {
  background: var(--vermelho);
  border-color: var(--vermelho);
  color: #fff;
}

/* variante sobre o ink: a seção de exemplos é escura */
.secao-ink .chip-seg {
  background: var(--ink-2);
  border-color: var(--ink-borda);
  color: var(--ink-texto);
}
.secao-ink .chip-seg:hover { border-color: #3A3E48; }
.secao-ink .chip-seg[aria-selected="true"] {
  background: var(--vermelho);
  border-color: var(--vermelho);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .chip-seg { transition: none; }
}

/* barra escura com o nome do segmento, no espírito do site atual */
.perfis-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 20px;
  padding: 16px 22px;
  border-radius: var(--raio-md);
  background: linear-gradient(100deg, var(--ink) 0%, var(--ink-2) 100%);
  border: 1px solid var(--ink-borda);
  box-shadow: var(--sombra-md);
}

.secao-ink .perfis-barra {
  background: linear-gradient(100deg, var(--ink-2) 0%, #1D2027 100%);
  border-color: #31353F;
}

.perfis-barra-nome {
  color: #fff;
  font-size: clamp(1.0625rem, 1rem + .55vw, 1.4375rem);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.perfis-barra-qtd {
  flex: none;
  color: var(--ink-texto-2);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-left: 16px;
  border-left: 2px solid var(--vermelho);
}

/* Fundo do segmento: foto (JPG 1920x1080) cobrindo a seção inteira, travada enquanto a
   página rola. Duas camadas empilhadas fazem o cross-fade na troca de segmento; o véu
   escuro em diagonal (88% no canto inferior esquerdo, 62% no superior direito) fica por
   cima das duas, então a leitura não oscila durante a transição.
   As transições desta seção rodam sempre — são fades curtos, sem movimento amplo, e
   fazem parte da identidade da página (decisão do dono, 2026-08-06). */
.perfis-fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
.perfis-fundo.visivel { opacity: 1; }

.perfis.com-fundo { background-color: var(--ink); background-image: none; }

.perfis.com-fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top right, rgba(9, 10, 13, .88) 0%, rgba(9, 10, 13, .62) 100%);
}

/* o conteúdo sai e volta em fade quando o segmento troca */
.perfis-painel {
  transition: opacity .26s ease, transform .26s ease;
}
.perfis-painel.trocando {
  opacity: 0;
  transform: translateY(8px);
}

/* iOS não lida bem com fundo fixo: no mobile a foto acompanha a rolagem */
@media (max-width: 859px) {
  .perfis-fundo { background-attachment: scroll; }
}

.perfis-conteudo { display: grid; gap: 20px; }

.perfis-grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 860px) {
  .perfis-grade { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  /* com foto de fundo, os players viram coluna única e deixam a esquerda respirar */
  .perfis-conteudo.tem-imagem .perfis-grade {
    grid-template-columns: 1fr;
    margin-left: 34%;
  }
}

.perfil-card {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
  min-height: 340px;
}

.secao-ink .perfil-card {
  background: var(--ink-2);
  border-color: var(--ink-borda);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.perfil-card iframe { display: block; border: 0; width: 100%; height: 340px; }

.perfis-nota {
  margin: 22px auto 0;
  text-align: center;
  color: var(--texto-2);
  font-size: .9375rem;
}

.secao-ink .perfis-nota { color: var(--ink-texto-2); }

/* ==========================================================================
   Manifesto — a assinatura da marca como declaração da página
   ==========================================================================
   Fundo branco, tipografia grande e três blocos que entram conforme a página
   rola (animação ligada ao scroll, sem biblioteca e sem JS). O equalizador é
   um "no ar" discreto: cinco barras em movimento contínuo. */
.manifesto {
  position: relative;
  overflow: hidden;
  background: var(--branco);
  text-align: center;
  padding: clamp(48px, 6vw, 84px) 0;
}

/* fios finos que abrem e fecham a seção */
.manifesto::before,
.manifesto::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(660px, 76%);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--borda) 22%, var(--borda) 78%, transparent);
}
.manifesto::before { top: 0; }
.manifesto::after { bottom: 0; }

.equalizador {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  height: 26px;
  margin: 0 0 clamp(20px, 2.6vw, 30px);
}
.equalizador i {
  display: block;
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background: var(--vermelho);
  transform-origin: bottom;
  animation: pulso-eq 1.25s ease-in-out infinite;
}
.equalizador i:nth-child(1) { animation-delay: -.9s; }
.equalizador i:nth-child(2) { animation-delay: -.5s; }
.equalizador i:nth-child(3) { animation-delay: -1.1s; }
.equalizador i:nth-child(4) { animation-delay: -.2s; }
.equalizador i:nth-child(5) { animation-delay: -.7s; }

@keyframes pulso-eq {
  0%, 100% { transform: scaleY(.28); opacity: .55; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

.manifesto-split {
  display: grid;
  gap: clamp(30px, 4vw, 52px);
  align-items: center;
}

.manifesto-arte { margin: 0; }
.manifesto-arte img { width: 100%; height: auto; }

/* a partir do desktop: frase à esquerda, mockup ocupando a metade direita */
@media (min-width: 900px) {
  .manifesto-split { grid-template-columns: 1fr 1fr; gap: clamp(32px, 3.4vw, 56px); }

  /* a frase alinha à direita: a borda do texto aponta pro produto do outro lado */
  .manifesto-frase {
    text-align: right;
    margin: 0 0 0 auto;
    max-width: 24ch;
  }
  .manifesto-frase .linha:last-child { max-width: none; margin-inline: 0; }

  /* o mockup sangra pela direita: cresce além da coluna e vaza da margem do
     container, ganhando presença sem precisar editar o PNG */
  .manifesto-arte {
    width: calc(100% + var(--gutter) + 8vw);
    max-width: none;
  }
}

.manifesto-frase {
  margin: 0 auto;
  max-width: 20ch;
  color: var(--preto);
  font-size: clamp(1.5rem, .95rem + 2.2vw, 2.65rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.12;
  text-wrap: balance;
  quotes: none;
}

.manifesto-frase .linha { display: block; }
.manifesto-frase .linha + .linha { margin-top: .12em; }

/* a terceira linha é a mais longa: respira um pouco mais que as outras */
.manifesto-frase .linha:last-child { max-width: 26ch; margin-inline: auto; }

.manifesto-frase em {
  font-style: normal;
  color: var(--vermelho);
}


/* Entrada ligada à rolagem: cada linha revela conforme a seção sobe na tela.
   Só roda onde o navegador suporta animation-timeline; nos demais, o texto
   aparece normalmente (nenhuma dependência de JS). */
@supports (animation-timeline: view()) {
  .manifesto-frase .linha {
    opacity: .08;
    transform: translateY(16px);
    animation: linha-entra linear both;
    animation-timeline: view();
  }
  .manifesto-frase .linha:nth-child(1) { animation-range: entry 12% cover 34%; }
  .manifesto-frase .linha:nth-child(2) { animation-range: entry 20% cover 42%; }
  .manifesto-frase .linha:nth-child(3) { animation-range: entry 28% cover 50%; }

}

@keyframes linha-entra {
  to { opacity: 1; transform: none; }
}