/* Design system Jú Blogger
   Base do site atual (preto, branco, rosa choque, roxo, logo em Bebas Neue) levada a um sistema:
   - Bebas Neue só em display (nome, títulos); Lato no resto.
   - O anel de story (rosa→roxo) é a assinatura: avatar, marcas do portfólio, vídeos.
   - Rosa = ação principal; roxo = caminho de marcas; verde só no WhatsApp; laranja/amarelo só nas lojas.
   - Movimento só em momentos: abertura do nome, título palavra por palavra, faixa de marcas, serviços um por vez, nome do rodapé. */
:root {
  --preto: #000;
  --superficie: #141414;
  --superficie-2: #1d1d1d;
  --linha: #2c2c2c;
  --branco: #fff;
  --prata: #b8b8c3;
  --rosa: #ff00a5;
  --roxo: #5f00cc;
  --roxo-claro: #a463ff;
  --zap: #25d366;
  --shopee: #ee4d2d;
  --ml: #ffe600;
  --ml-texto: #2d3277;
  --anel: conic-gradient(from 200deg, var(--rosa), var(--roxo), #ff5fcf, var(--rosa));
  --r-pilula: 999px;
  --r-cartao: 22px;
  --r-foto: 28px;
  --display: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
  --texto: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --largura: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --suave: cubic-bezier(.2, .7, .1, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--preto); color: var(--branco); font: 400 17px/1.55 var(--texto); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: -999px; top: 8px; background: var(--rosa); color: #000; padding: 8px 14px; border-radius: 8px; z-index: 99; }
.pular:focus { left: 8px; }
svg { width: 1.15em; height: 1.15em; flex: none; }
main { display: block; }
[id] { scroll-margin-top: 80px; }
main > section { padding-inline: var(--gutter); }
main > section > *, .rodape > * { max-width: var(--largura); margin-inline: auto; }
.nota { color: var(--prata); font-size: 14px; }
.nota a { color: var(--branco); }

/* ---------- topo */
.topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px; padding: 12px var(--gutter);
  background: rgb(0 0 0 / .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid #ffffff10; }
.logo { font: 30px/1 var(--display); letter-spacing: .02em; text-decoration: none; margin-right: auto; padding-top: 3px; }
.topo-nav { display: none; gap: 26px; }
.topo-nav a { text-decoration: none; font-weight: 700; font-size: 15px; color: var(--prata); padding: 6px 0; border-bottom: 2px solid transparent; }
.topo-nav a:hover, .topo-nav a[aria-current] { color: var(--branco); border-color: var(--rosa); }
.topo-menu { background: var(--superficie-2); border: 1px solid var(--linha); border-radius: var(--r-pilula); padding: 8px 16px; font-weight: 700; font-size: 14px; }
.gaveta { position: fixed; inset: 61px 0 auto; z-index: 19; background: #000; border-bottom: 1px solid var(--linha); padding: 8px var(--gutter) 20px; animation: descer .25s var(--suave); }
.gaveta nav { display: grid; }
.gaveta a { font: 34px/1.3 var(--display); text-decoration: none; padding: 6px 0; border-bottom: 1px solid #ffffff12; }
@keyframes descer { from { opacity: 0; transform: translateY(-10px); } }
@media (min-width: 860px) { .topo-nav { display: flex; } .topo-menu { display: none; } }

/* ---------- botões */
.btn, .btn-linha, .btn-copiar { display: inline-flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; font-weight: 900; border: 0; transition: transform .15s var(--suave), background .2s, box-shadow .2s; }
.btn { min-height: 52px; padding: 0 24px; border-radius: var(--r-pilula); background: var(--branco); color: #000; font-size: 16px; }
.btn:active, .btn-copiar:active, .bio-btn:active { transform: scale(.97); }
.btn.rosa { background: var(--rosa); color: #fff; }
.btn.zap { background: var(--zap); color: #062b14; }
.btn.linha { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px #ffffff40; }
.btn.linha:hover { box-shadow: inset 0 0 0 2px #fff; }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn-linha { color: var(--branco); background: none; padding: 4px 0; border-bottom: 2px solid var(--rosa); font-size: 15px; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.acoes.centro { justify-content: center; }

/* ---------- espaço de foto (definir depois) */
.foto { position: relative; display: grid; place-items: center; border-radius: var(--r-foto); overflow: hidden; color: var(--prata);
  background: repeating-linear-gradient(135deg, #161616 0 14px, #1b1b1b 14px 28px); border: 1.5px dashed #ffffff2e; aspect-ratio: 4 / 5; }
.foto span { font-size: 13px; font-weight: 700; text-align: center; padding: 10px 14px; max-width: 90%; background: #000a; border-radius: var(--r-pilula); }
.foto.vertical { aspect-ratio: 9 / 16; }
.foto.quadrada { aspect-ratio: 1; border-radius: 18px; }
.foto.redonda { aspect-ratio: 1; border-radius: 50%; }
.foto.redonda span { font-size: 11px; padding: 6px 8px; }
.foto.retrato { aspect-ratio: 3 / 4; }
.foto.print { aspect-ratio: 9 / 16; border-radius: 18px; }
.foto.logo { aspect-ratio: 1; width: 72px; border-radius: 18px; }
.foto.logo span { font-size: 10px; padding: 4px 6px; }
.foto.logo.grande { width: 110px; }
.foto.kit { aspect-ratio: 16 / 9; border-radius: 18px; }

/* ---------- anel de story (assinatura) */
.anel { position: relative; padding: 4px; border-radius: 50%; background: var(--anel); }
.anel > * { border: 4px solid #000; }
.anel.story { border-radius: calc(var(--r-foto) + 6px); padding: 5px; }
.anel.story > .foto { border: 5px solid #000; border-style: solid; }
.anel.grande { width: 148px; }
.anel.medio { width: 92px; flex: none; }
.bolha-logo { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--superficie-2); font: 30px/1 var(--display); letter-spacing: .03em; color: #fff; }

/* ---------- início: link na bio */
.bio { max-width: 560px; margin-inline: auto; padding-top: 34px; padding-bottom: 40px; text-align: center; }
.bio-cabeca { display: grid; justify-items: center; }
.bio-cabeca .anel.grande { animation: girar 1.4s var(--suave) both; }
@keyframes girar { from { transform: rotate(-120deg) scale(.7); opacity: 0; } }
.bio-nome { font: clamp(72px, 24vw, 132px)/.86 var(--display); margin: 20px 0 10px; letter-spacing: .01em; white-space: nowrap; }
.bio-nome .l { display: inline-block; animation: subir .7s var(--suave) both; animation-delay: calc(var(--i) * 45ms + .25s); }
@keyframes subir { from { transform: translateY(.6em); opacity: 0; } }
.bio-arroba { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-weight: 700; }
.bio-arroba a { text-decoration: none; }
.bio-arroba span { color: var(--prata); font-weight: 400; margin-left: 6px; }
.bio-texto { color: var(--prata); margin: 8px 0 18px; }
.email { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-pilula); padding: 6px 6px 6px 18px; }
.email-txt { font-weight: 700; margin-right: auto; word-break: break-all; }
.btn-copiar { min-height: 40px; padding: 0 16px; border-radius: var(--r-pilula); background: var(--branco); color: #000; font-size: 14px; }
.email .btn-linha { margin-right: 10px; font-size: 14px; }
.email.compacto { padding: 4px 4px 4px 14px; background: none; display: inline-flex; }
@media (max-width: 480px) {
  .email:not(.compacto) { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-cartao); padding: 14px; gap: 10px; }
  .email:not(.compacto) .email-txt { grid-column: 1 / -1; text-align: center; margin: 0; }
  .email:not(.compacto) .btn-linha { margin: 0; justify-content: center; border: 1px solid var(--linha); border-radius: var(--r-pilula); min-height: 40px; }
}
.bio-lista { display: grid; gap: 12px; margin-top: 28px; }
.bio-btn { display: grid; gap: 2px; text-align: left; text-decoration: none; padding: 18px 22px; border-radius: var(--r-cartao); background: var(--superficie); border: 1px solid var(--linha);
  animation: subir .6s var(--suave) both; transition: transform .15s var(--suave), border-color .2s; }
.bio-lista > :nth-child(1) { animation-delay: .7s; } .bio-lista > :nth-child(2) { animation-delay: .78s; } .bio-lista > :nth-child(3) { animation-delay: .86s; }
.bio-lista > :nth-child(4) { animation-delay: .94s; } .bio-lista > :nth-child(5) { animation-delay: 1.02s; }
.bio-btn strong { font-size: 19px; }
.bio-btn small { color: var(--prata); font-size: 14px; }
.bio-btn:hover { border-color: #ffffff55; }
.bio-btn.rosa { background: var(--rosa); border-color: var(--rosa); }
.bio-btn.rosa small, .bio-btn.roxo small { color: #ffffffd0; }
.bio-btn.roxo { background: var(--roxo); border-color: var(--roxo); }
.bio-btn.desligado { opacity: .55; border-style: dashed; }
.bio-semana { margin-top: 34px; text-align: left; }
.bio-semana h2 { font: 32px/1 var(--display); margin: 0 0 10px; }
.mini-ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mini-ranking a { display: flex; gap: 14px; align-items: center; text-decoration: none; padding: 12px 16px; background: var(--superficie); border-radius: 16px; font-weight: 700; }
.mini-ranking b { font: 28px/1 var(--display); color: var(--rosa); width: 18px; }
.bio-extra { display: flex; justify-content: center; gap: 22px; margin-top: 30px; font-weight: 700; font-size: 15px; }
.bio-extra a { display: inline-flex; gap: 6px; align-items: center; color: var(--prata); text-decoration: none; }
.bio-extra a:hover { color: #fff; }

/* ---------- títulos */
.titulo-pagina { font: clamp(56px, 13vw, 112px)/.88 var(--display); margin: 0 0 14px; letter-spacing: .005em; }
.titulo-secao { font: clamp(38px, 7vw, 60px)/.95 var(--display); margin: 0 0 18px; letter-spacing: .01em; }
.pagina-topo { padding-top: clamp(36px, 7vw, 80px); padding-bottom: 20px; }
.pagina-topo p { color: var(--prata); max-width: 56ch; margin: 0; }
.pagina-topo .chips { margin-top: 22px; }
.secao-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.voltar { display: inline-block; color: var(--prata); text-decoration: none; font-weight: 700; font-size: 15px; margin-bottom: 18px; }
.voltar::before { content: '‹ '; }

/* ---------- para marcas */
.heroi { display: grid; gap: 34px; align-items: center; padding-top: clamp(30px, 6vw, 70px); padding-bottom: 50px; max-width: calc(var(--largura) + 2 * var(--gutter)); margin-inline: auto; }
.titulo-cinetico { font: clamp(64px, 15vw, 150px)/.86 var(--display); margin: 0; }
.titulo-cinetico .p { display: inline-block; animation: subir .8s var(--suave) both; animation-delay: calc(var(--i) * 90ms + .1s); }
.heroi-sub { color: var(--prata); font-size: 19px; max-width: 40ch; margin: 18px 0 0; }
.heroi-foto { width: min(340px, 78vw); justify-self: center; }
@media (min-width: 900px) { .heroi { grid-template-columns: 1.4fr 1fr; } .heroi-foto { justify-self: end; } }

.faixa { overflow: hidden; padding: 22px 0; border-block: 1px solid var(--linha); background: var(--superficie); }
.faixa-trilho { display: flex; gap: 34px; width: max-content; align-items: center; animation: correr 38s linear infinite; animation-play-state: var(--estado, running); }
.faixa a { font: clamp(34px, 6vw, 54px)/1 var(--display); text-decoration: none; color: var(--branco); white-space: nowrap; transition: color .2s; }
.faixa a:hover { color: var(--rosa); }
.faixa span { color: var(--rosa); font-size: 22px; }
@keyframes correr { to { transform: translateX(-50%); } }

.numeros { padding-block: 70px 30px; }
.numeros-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.numeros-grade div { background: var(--superficie); border-radius: var(--r-cartao); padding: 22px 24px; border: 1px solid var(--linha); }
.numeros-grade strong { display: block; font: clamp(52px, 9vw, 76px)/.9 var(--display); }
.numeros-grade div:first-child strong { color: var(--rosa); }
.numeros-grade span { color: var(--prata); }
.prints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.numeros.compacto { padding-block: 10px 30px; }

.servicos { padding-block: 70px; }
.cena { display: grid; gap: 18px; }
.servico { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-cartao); padding: 26px; }
.servico h3 { font: clamp(36px, 6vw, 52px)/.95 var(--display); margin: 0 0 10px; }
.servico p { color: var(--prata); margin: 0 0 22px; max-width: 52ch; }
.cena-visual { display: none; }
@media (min-width: 900px) {
  .cena { grid-template-columns: 1fr 380px; gap: 60px; }
  .servico { background: none; border: 0; border-left: 3px solid var(--linha); border-radius: 0; padding: 0 0 0 30px; min-height: 62vh; display: flex; flex-direction: column; justify-content: center; opacity: .32; transition: opacity .45s, border-color .45s; }
  .servico.ativo { opacity: 1; border-color: var(--rosa); }
  .cena-visual { display: grid; position: sticky; top: 15vh; height: 70vh; }
  .cena-visual .foto { grid-area: 1 / 1; height: 100%; aspect-ratio: auto; opacity: 0; transform: scale(.96) rotate(-1.5deg); transition: opacity .5s, transform .6s var(--suave); }
  .cena-visual .foto.ativa { opacity: 1; transform: none; }
}

.modelo { display: grid; gap: 30px; align-items: center; padding-block: 40px 70px; max-width: calc(var(--largura) + 2 * var(--gutter)); margin-inline: auto; }
.modelo p { color: var(--prata); font-size: 19px; max-width: 46ch; }
.modelo-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.modelo-fotos .foto:nth-child(2) { transform: translateY(26px); }
@media (min-width: 900px) { .modelo { grid-template-columns: 1.2fr 1fr; } }

.vitrine-portfolio { padding-block: 60px; }
.vitrine-portfolio > p { color: var(--prata); margin-top: 0; }
.bolhas { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 14px; scrollbar-width: none; }
.bolhas::-webkit-scrollbar { display: none; }
.bolha { flex: none; width: 104px; display: grid; justify-items: center; gap: 6px; text-decoration: none; text-align: center; scroll-snap-align: start; }
.bolha .anel { width: 96px; transition: transform .25s var(--suave); }
.bolha:hover .anel { transform: scale(1.06) rotate(-4deg); }
.bolha strong { font-size: 14px; line-height: 1.2; }
.bolha small { color: var(--prata); font-size: 12px; margin-top: -4px; }
.bolhas.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); overflow: visible; gap: 26px 12px; padding-bottom: 60px; }
.bolhas.grade .bolha { width: auto; }
.bolha[hidden] { display: none; }

.sobre { display: grid; gap: 30px; padding-block: 60px; max-width: calc(var(--largura) + 2 * var(--gutter)); margin-inline: auto; align-items: start; }
.sobre .foto { max-width: 420px; }
.sobre p { color: #e6e6ec; max-width: 60ch; }
.sobre summary { cursor: pointer; font-weight: 900; color: var(--rosa); padding: 6px 0; }
.sobre details[open] summary { margin-bottom: 4px; }
@media (min-width: 900px) { .sobre { grid-template-columns: 380px 1fr; gap: 60px; } }

.contato { margin: 40px auto 70px; text-align: center; background: var(--roxo); border-radius: 34px; padding: 50px var(--gutter); max-width: calc(var(--largura) - 0px); width: calc(100% - 2 * var(--gutter)); position: relative; overflow: hidden; }
.contato::after { content: ''; position: absolute; inset: auto -20% -60% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #ff00a588, transparent 65%); pointer-events: none; }
.contato > * { position: relative; z-index: 1; }
.contato h2 { font: clamp(46px, 9vw, 84px)/.9 var(--display); margin: 0 0 10px; }
.contato > p { color: #ffffffd8; }
.contato .email { max-width: 460px; margin: 26px auto 14px; background: #00000040; border-color: #ffffff30; }
.contato .nota { color: #ffffffd0; }

/* ---------- achadinhos */
.abas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.abas button { flex: none; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-pilula); padding: 12px 18px; font-weight: 900; font-size: 15px; }
.abas button[aria-selected="true"] { background: var(--rosa); border-color: var(--rosa); }
.filtros { display: grid; gap: 12px; margin: 16px auto 8px; }
.busca input { width: 100%; min-height: 50px; border-radius: var(--r-pilula); border: 1px solid var(--linha); background: var(--superficie); color: #fff; padding: 0 20px; font: inherit; }
.busca input::placeholder { color: #8d8d96; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { background: none; border: 1px solid var(--linha); border-radius: var(--r-pilula); padding: 8px 15px; font-weight: 700; font-size: 14px; color: var(--prata); text-decoration: none; }
.chip[aria-pressed="true"] { background: var(--branco); color: #000; border-color: var(--branco); }
.chip.shopee[aria-pressed="true"] { background: var(--shopee); border-color: var(--shopee); color: #fff; }
.chip.mercadolivre[aria-pressed="true"] { background: var(--ml); border-color: var(--ml); color: var(--ml-texto); }
.contagem { color: var(--prata); font-size: 14px; }
.produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 10px; padding-bottom: 30px; }
@media (min-width: 700px) { .produtos { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } }
@media (max-width: 699px) { .produto { padding: 8px; gap: 8px; border-radius: 18px; } .produto h3 { font-size: 15px; } .loja { min-height: 40px; font-size: 13px; border-radius: 11px; } .selo-exemplo { top: 12px; left: 12px; } }
.produtos.lista { grid-template-columns: 1fr; }
.produto { position: relative; display: grid; gap: 12px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-cartao); padding: 12px; align-content: start; }
.produto[hidden] { display: none; }
.produto-info small { color: var(--prata); font-size: 13px; }
.produto h3 { font-size: 18px; margin: 2px 0 4px; line-height: 1.25; }
.do-reel { font-size: 13px; color: var(--roxo-claro); text-decoration: none; font-weight: 700; }
.ofertas { display: grid; gap: 8px; align-self: end; }
.loja { display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 14px; font-weight: 900; text-decoration: none; font-size: 15px; }
.loja.shopee { background: var(--shopee); color: #fff; }
.loja.mercadolivre { background: var(--ml); color: var(--ml-texto); }
.selo-exemplo { position: absolute; top: 18px; left: 18px; z-index: 2; background: #ffe600; color: #000; font-size: 11px; font-weight: 900; padding: 3px 9px; border-radius: var(--r-pilula); }
.vazio, .vazio-filtro { color: var(--prata); background: var(--superficie); border: 1px dashed var(--linha); border-radius: var(--r-cartao); padding: 26px; text-align: center; }
.vazio a { color: #fff; }
.reels { padding-block: 40px; }
.reels-lista { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 8px; }
.reel-cartao { position: relative; flex: none; width: 170px; text-decoration: none; display: grid; gap: 6px; scroll-snap-align: start; }
.reel-cartao strong { font-size: 15px; line-height: 1.25; }
.reel-cartao small { color: var(--prata); }
.reel-cartao .selo-exemplo { top: 10px; left: 10px; }
.aviso-afiliado { color: #8d8d96; font-size: 13px; text-align: center; padding: 0 var(--gutter) 30px; max-width: 70ch; margin-inline: auto; }
.reel-pagina { display: grid; gap: 34px; padding-top: 40px; padding-bottom: 20px; max-width: calc(var(--largura) + 2 * var(--gutter)); margin-inline: auto; }
.reel-video { display: grid; gap: 14px; justify-items: center; width: min(320px, 80vw); justify-self: center; }
.reel-video .anel { width: 100%; }
@media (min-width: 900px) { .reel-pagina { grid-template-columns: 340px 1fr; align-items: start; } .reel-video { position: sticky; top: 90px; } }

/* ---------- cupons e parceiras */
.parceiras { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); padding-bottom: 30px; }
.parceira { display: grid; gap: 18px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-cartao); padding: 24px; }
.parceira-info small { color: var(--rosa); font-weight: 900; }
.parceira h2 { font: 44px/.95 var(--display); margin: 2px 0 0; }
.parceira .acoes { margin-top: 0; align-items: center; }
.cupom { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cupom-codigo { font: 40px/1 var(--display); letter-spacing: .06em; padding: 10px 20px 6px; border: 2px dashed var(--rosa); border-radius: 16px; }
.cupom-breve { color: var(--prata); margin: 0; }
.cupom-desconto { margin: 0; color: var(--prata); }
.parceira-heroi { display: grid; justify-items: start; gap: 16px; padding-top: 50px; padding-bottom: 30px; }
.parceira-heroi > p { color: var(--prata); margin: 0; }
.parceira-secao { padding-block: 30px; }
.grade-espacos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }

/* ---------- portfólio e caso */
.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.video-leve { position: relative; padding: 0; border: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 9 / 16; background: #111; }
.video-leve img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--suave); }
.video-leve:hover img { transform: scale(1.04); }
.video-leve .play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: #000a; box-shadow: inset 0 0 0 3px #fff; }
.video-leve .play::after { content: ''; position: absolute; left: 26px; top: 20px; border-left: 18px solid #fff; border-block: 12px solid transparent; }
.video-leve iframe { width: 100%; height: 100%; border: 0; }
.caso { padding-top: 34px; padding-bottom: 50px; }
.caso-topo { display: flex; align-items: center; gap: 18px; margin-bottom: 30px; }
.caso-topo .titulo-pagina { margin: 0; }
.caso-meta { color: var(--rosa); font-weight: 900; margin: 6px 0 0; }
.caso-corpo { display: grid; gap: 36px; }
.caso-midia { display: grid; gap: 14px; justify-items: start; }
.caso-midia > .anel { width: min(320px, 80vw); }
.caso-numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 30px; }
.caso-numeros div { background: var(--superficie); border-radius: 18px; padding: 16px 18px; }
.caso-numeros strong { display: block; font: 44px/1 var(--display); }
.caso-numeros span { color: var(--prata); font-size: 14px; }
.caso-numeros .a-preencher { border: 1px dashed var(--linha); background: none; }
.caso-numeros .a-preencher strong { color: #5d5d66; font-size: 26px; }
.entregas { padding-left: 20px; margin: 0 0 30px; color: #e6e6ec; }
.caso-nav { display: flex; justify-content: space-between; margin-top: 60px; padding-top: 20px; border-top: 1px solid var(--linha); font-weight: 900; }
.caso-nav a { text-decoration: none; }
.caso-nav a:first-child::before { content: '‹ '; color: var(--rosa); }
.caso-nav a:last-child::after { content: ' ›'; color: var(--rosa); }
@media (min-width: 900px) { .caso-corpo { grid-template-columns: minmax(300px, 420px) 1fr; } .caso-midia .videos { grid-template-columns: 1fr 1fr; width: 100%; } }

/* ---------- mídia kit, textos simples, painel */
.kit-paginas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; padding-bottom: 30px; }
.texto-simples { max-width: 680px; margin: 0 auto; padding-block: 60px; }
.texto-simples p { color: #e2e2e8; }
.texto-simples.centro { text-align: center; }
.painel { padding-block: 40px 70px; }
.painel-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 20px auto 40px; }
.painel-cartoes div, .painel-lojas div { background: var(--superficie); border-radius: 18px; padding: 18px; }
.painel-cartoes strong, .painel-lojas strong { display: block; font: 48px/1 var(--display); }
.painel-cartoes span, .painel-lojas span { color: var(--prata); font-size: 14px; }
.painel-lojas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.painel-lojas .shopee strong { color: var(--shopee); } .painel-lojas .mercadolivre strong { color: var(--ml); }
.barras { display: flex; align-items: end; gap: 3px; height: 140px; background: var(--superficie); border-radius: 18px; padding: 14px; margin-bottom: 40px; }
.barras div { flex: 1; height: 100%; display: flex; align-items: end; }
.barras i { display: block; width: 100%; min-height: 2px; background: var(--rosa); border-radius: 4px 4px 0 0; }
.painel-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 30px 24px; }
.painel table { width: 100%; border-collapse: collapse; font-size: 15px; }
.painel td { padding: 9px 0; border-bottom: 1px solid var(--linha); }
.painel td:last-child { text-align: right; font-weight: 900; }

/* ---------- rodapé */
.rodape { padding: 60px var(--gutter) 30px; border-top: 1px solid var(--linha); overflow: hidden; }
.rodape-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 26px; }
.rodape-links div { display: grid; gap: 8px; align-content: start; justify-items: start; }
.rodape-links strong { color: var(--prata); font-size: 14px; }
.rodape-links a { text-decoration: none; font-weight: 700; }
.rodape-links a:hover { color: var(--rosa); }
.rodape .email.compacto { padding-left: 0; border: 0; justify-content: flex-start; }
.rodape-nome { font: 25vw/.8 var(--display); text-align: center; margin: 50px 0 10px; white-space: nowrap; max-width: none;
  background: linear-gradient(180deg, #fff 30%, #ffffff10); -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: translateY(30%); opacity: .2; transition: transform 1.2s var(--suave), opacity 1.2s; }
.rodape-nome.visivel { transform: none; opacity: 1; }
.rodape-pe { color: var(--prata); font-size: 13px; text-align: center; }

/* ---------- WhatsApp flutuante e aviso */
.zap-flutuante { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 30; width: 58px; height: 58px; display: grid; place-items: center;
  border-radius: 50%; background: var(--zap); color: #062b14; box-shadow: 0 10px 30px #25d36655; transition: transform .2s var(--suave); }
.zap-flutuante svg { width: 30px; height: 30px; }
.zap-flutuante:hover { transform: scale(1.08); }
.aviso { position: fixed; left: 50%; bottom: 90px; z-index: 40; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #fff; color: #000; font-weight: 900; padding: 12px 20px; border-radius: var(--r-pilula); transition: .3s var(--suave); }
.aviso.on { opacity: 1; transform: translate(-50%, 0); }
.verif { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .rodape-nome { transform: none; opacity: 1; }
}

/* ---------- fotos reais */
.foto.tem { border: 0; background: #14001f; }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto.redonda.tem img { object-position: 50% 30%; }
.foto.logo.tem { background: #fff; }
.foto.logo.tem img { object-fit: contain; padding: 10%; }
.foto.kit.tem { background: #000; }
.foto.kit.tem img { object-fit: contain; }
.bolha-logo.logo { background: #fff; overflow: hidden; }
.bolha-logo.logo img { width: 74%; height: 74%; object-fit: contain; }
.prints.todos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.resultados { padding-block: 30px 10px; }
.cena-visual .foto.tem img { border-radius: var(--r-foto); }
@media (min-width: 700px) { .prints { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.cena-visual .foto img, .modelo-fotos .foto img { object-position: 50% 18%; }
.bolha .anel, .caso-topo .anel, .story-topo .anel { aspect-ratio: 1; display: grid; }
.anel > .bolha-logo { width: 100%; height: 100%; }
.bolha { align-content: start; }
.bolha-logo.logo img { width: 80%; height: 80%; }

.redes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.rede { display: grid; gap: 2px; text-decoration: none; padding: 14px 18px; border-radius: 18px; border: 1px solid var(--linha); background: var(--superficie); transition: border-color .2s; }
.rede:hover { border-color: var(--rosa); }
.rede strong { font: 34px/1 var(--display); }
.rede span { color: var(--prata); font-size: 13px; }
.cidades { color: var(--prata); margin: 14px 0 18px; }

/* ---------- foto principal sem moldura: recorte direto no preto, com brilho rosa atrás */
.heroi-foto { position: relative; display: grid; place-items: end center; width: min(400px, 86vw); }
.heroi-foto::before { content: ''; position: absolute; inset: 18% -18% 0; border-radius: 50%; background: radial-gradient(closest-side, #ff00a566, #5f00cc44 60%, transparent 100%); filter: blur(30px); }
.heroi-recorte { position: relative; width: 100%; height: auto; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); animation: subir .9s var(--suave) .2s both; }

/* ---------- Insights e posts que performaram */
.insights { padding-block: 30px 60px; }
.insights-topo { display: grid; gap: 26px; align-items: start; margin-bottom: 40px; }
.insights-lista { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.insights-lista li { background: var(--superficie); border: 1px solid var(--linha); border-radius: 18px; padding: 14px 16px; display: grid; gap: 2px; }
.insights-lista strong { font: clamp(30px, 6vw, 42px)/1 var(--display); }
.insights-lista li:first-child strong { color: var(--rosa); }
.insights-lista span { color: var(--prata); font-size: 13px; line-height: 1.35; }
.insights-prints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .insights-topo { grid-template-columns: 1.1fr 1fr; gap: 40px; } .insights-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.subtitulo { font: 32px/1 var(--display); margin: 0; }
.trilho-prints { display: grid; grid-auto-flow: column; grid-auto-columns: min(42vw, 190px); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px 0 10px; scrollbar-width: thin; }
.trilho-prints .foto { scroll-snap-align: start; }
/* herói: título e foto sempre cabem (a palavra INFLUENCIADORA não quebra) */
@media (min-width: 900px) {
  .heroi { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; }
  .titulo-cinetico { font-size: clamp(64px, 7.4vw, 108px); }
  .heroi-foto { width: 100%; max-width: 420px; }
}
.heroi { overflow-x: clip; }