/* Tema vidro: cidade fixa ao fundo e superfícies de vidro fosco por cima.
   Para desfazer: tirar o <link> deste arquivo e a classe do <body> da página. */
:root {
  --vidro: rgba(20, 22, 27, .52);
  --vidro-forte: rgba(14, 15, 19, .78);
  --vidro-borda: rgba(255, 255, 255, .13);
  --vidro-brilho: inset 0 1px 0 rgba(255, 255, 255, .14);
  --vidro-sombra: 0 24px 70px rgba(0, 0, 0, .42);
  --vidro-blur: blur(24px) saturate(150%);
}
body.vidro-noite::before, body.vidro-web::before, body.vidro-reels::before { content: ''; position: fixed; inset: -24px; z-index: -1; background-size: cover; background-position: center; filter: blur(7px); }
body.vidro-noite::before { background-image: linear-gradient(180deg, rgba(6,7,10,.60), rgba(6,7,10,.72)), url(images/fundo/shibuya-noite.jpg); }
body.vidro-web::before { background-image: linear-gradient(180deg, rgba(6,7,10,.58), rgba(6,7,10,.74)), url(images/fundo/estudio-web.jpg); }
body.vidro-reels::before { background-image: linear-gradient(180deg, rgba(6,7,10,.56), rgba(6,7,10,.72)), url(images/fundo/estudio-reels.jpg); }

/* a cidade já é o fundo: tira os fundos e as linhas de seção */
body[class*=vidro-] .hero::before, body[class*=vidro-] .hero::after { display: none; }
body[class*=vidro-] .prompts, body[class*=vidro-] .contrate, body[class*=vidro-] .tem, body[class*=vidro-] .como, body[class*=vidro-] .fim, body[class*=vidro-] .espera { background: none; border-top: 0; }
body[class*=vidro-] footer { border-top: 1px solid var(--vidro-borda); }

/* barras do topo */
body[class*=vidro-] nav, body[class*=vidro-] .passos { background: rgba(10, 11, 14, .45); backdrop-filter: var(--vidro-blur); -webkit-backdrop-filter: var(--vidro-blur); border-bottom-color: var(--vidro-borda); }
body[class*=vidro-] .tabs, body[class*=vidro-] .lang-switch { border-radius: 999px; overflow: hidden; border-color: var(--vidro-borda); background: rgba(255, 255, 255, .05); }
body[class*=vidro-] .tabs a.on, body[class*=vidro-] .lang-btn.active { border-radius: 999px; }
body[class*=vidro-] .tabs > * + *, body[class*=vidro-] .lang-btn + .lang-btn { border-left: 0; }
body[class*=vidro-] .tabs a:not(.on), body[class*=vidro-] .lang-btn:not(.active) { color: #c6c8cd; }
body[class*=vidro-] .tabs .trava, body[class*=vidro-] .tabs .trava sup { color: #7d8087; }

/* as superfícies de vidro */
body[class*=vidro-] :is(.vcard, .oferta, .rapido div, .skill, .abre, .contrata, .curso, .stats, .item, .p3, .caixa, .faz) {
  background: var(--vidro);
  backdrop-filter: var(--vidro-blur); -webkit-backdrop-filter: var(--vidro-blur);
  border: 1px solid var(--vidro-borda);
  box-shadow: var(--vidro-sombra), var(--vidro-brilho);
}
body[class*=vidro-] :is(.vcard, .oferta, .skill, .abre, .contrata, .curso, .caixa, .faz) { border-radius: 22px; }
body[class*=vidro-] .rapido div, body[class*=vidro-] .p3, body[class*=vidro-] .item { border-radius: 16px; }
body[class*=vidro-] .oferta { background: linear-gradient(110deg, rgba(0,229,160,.16), rgba(20,22,27,.52) 55%); border-color: rgba(0,229,160,.45); }
body[class*=vidro-] .abre { border-color: rgba(0,229,160,.45); }

/* números em bloco de vidro */
body[class*=vidro-] .stats { border-radius: 18px; padding: 0 18px; }
body[class*=vidro-] .stat + .stat { border-left-color: var(--vidro-borda); }

/* entrada e hover */
body[class*=vidro-] .vcard { filter: blur(10px); transition: opacity .7s, transform .7s cubic-bezier(.2,.8,.2,1), filter .7s, border-color .3s, box-shadow .3s; }
body[class*=vidro-] .vcard.on { filter: none; }
body[class*=vidro-] .vcard.on:hover { transform: translateY(-5px); border-color: rgba(255, 255, 255, .28); }

/* onde o texto precisa de leitura firme, o vidro fica quase opaco */
body[class*=vidro-] .passo { background: var(--vidro-forte); border-color: var(--vidro-borda); }
body[class*=vidro-] .passo .topo { background: rgba(255, 255, 255, .04); border-bottom-color: var(--vidro-borda); }
body[class*=vidro-] .precisa { background: rgba(0, 229, 160, .08); }
body[class*=vidro-] :is(.vinfo p, .oferta p, .skill p, .curso p, .contrata p, .item p, .p3 p, .caixa p, .f p, .hero-sub, .prompts .cab p, .tem .cab p, .fim p, .sub) { color: #d3d5da; }
body[class*=vidro-] .mais { color: #a9acb3; }
body[class*=vidro-] .skill .como, body[class*=vidro-] .mono { color: #a9acb3; }
body[class*=vidro-] .lab, body[class*=vidro-] .vinfo .lab, body.vidro-home .fim .mono { color: var(--accent); }
body[class*=vidro-] :is(h1, h2) { text-shadow: 0 2px 30px rgba(0, 0, 0, .55); }
body[class*=vidro-] :is(.hero-sub, .legenda, .prompts .cab p, .tem .cab p, .fim p, .sub, .seguir a) { color: #e4e6ea; text-shadow: 0 1px 14px rgba(0, 0, 0, .8); }
body[class*=vidro-] .lista input[type=email] { background: rgba(8, 9, 12, .6); border-color: var(--vidro-borda); }
body[class*=vidro-] .acoes2 > *, body[class*=vidro-] .btn { border-radius: 12px; }

/* janelas */
body[class*=vidro-] .gaveta .caixa, body[class*=vidro-] .sk-modal .mcaixa { background: rgba(14, 15, 19, .82); backdrop-filter: var(--vidro-blur); -webkit-backdrop-filter: var(--vidro-blur); border-color: var(--vidro-borda); border-radius: 22px; box-shadow: var(--vidro-sombra), var(--vidro-brilho); }

/* Website: botões da vitrine e passos */
body[class*=vidro-] .pontos button { background: rgba(20, 22, 27, .55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: var(--vidro-borda); color: #d3d5da; }
body[class*=vidro-] .pontos button.on { border-color: var(--accent); color: var(--accent); }
body[class*=vidro-] .itens { border: 0; gap: 14px; }
body[class*=vidro-] .p3 .n { color: rgba(255, 255, 255, .22); }
body[class*=vidro-] .p3.on { background: linear-gradient(160deg, rgba(0,229,160,.16), rgba(20,22,27,.52) 60%); border-color: rgba(0,229,160,.5); }
body[class*=vidro-] .p3.on .n { color: var(--accent); }

/* Vídeo curto (home): a parede de reels e o vídeo do processo seguem sólidos; o resto vira vidro */
body[class*=vidro-] { --muted: #a9acb3; --line: rgba(255, 255, 255, .13); }
body.vidro-home .wall-section { background: #0a0a0a; }
body.vidro-home :is(.pyramid, .info, .qd, .fim) {
  background: var(--vidro);
  backdrop-filter: var(--vidro-blur); -webkit-backdrop-filter: var(--vidro-blur);
  border: 1px solid var(--vidro-borda);
  box-shadow: var(--vidro-sombra), var(--vidro-brilho);
  border-radius: 22px;
}
body.vidro-home .pyramid { padding: 22px; top: 96px; }
body.vidro-home .info { padding: clamp(18px, 2.4vw, 28px); }
body.vidro-home .qd { padding: 12px 12px 18px; }
body.vidro-home .qd h4, body.vidro-home .qd p { padding-left: 6px; padding-right: 6px; }
body.vidro-home .fim { max-width: 1208px; margin: clamp(30px, 5vw, 60px) auto clamp(40px, 6vw, 80px); width: calc(100% - 2 * var(--pad)); border: 1px solid var(--vidro-borda); }
body.vidro-home .cl-mundo { background: linear-gradient(180deg, rgba(4,14,10,.72), rgba(4,10,8,.82) 55%, rgba(4,14,10,.72)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body.vidro-home :is(.pick, .player video) { border-radius: 18px; overflow: hidden; border-color: var(--vidro-borda); box-shadow: var(--vidro-sombra); }
body.vidro-home :is(.cta, .cta-fim, .cta-2) { border-radius: 12px; }
body.vidro-home .cta-2 { background: rgba(255, 255, 255, .06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
body.vidro-home :is(.section-head p.sub, .fim p, .clone > p.sub-cl, .qd p, .facts li) { color: #d3d5da; }
body.vidro-home .section-head p.sub, body.vidro-home .clone > p.sub-cl { text-shadow: 0 1px 14px rgba(0, 0, 0, .8); }

/* ═══ INTERFACE FLUTUANTE: dock, pílulas soltas, troca de tela em desfoque ═══ */
@media (min-width: 701px) and (max-width: 1380px) { :root { --pad: 124px; } }
@media (min-width: 701px) and (max-width: 1500px) { body.vidro-home { --pad: 124px; } }

/* o topo deixa de ser barra: cada coisa flutua sozinha */
body[class*=vidro-] nav { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; pointer-events: none; display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; }
body[class*=vidro-] nav > * { pointer-events: auto; }
body[class*=vidro-] nav .tabs, body[class*=vidro-] .passos, body.vidro-home .wall-center .tabs { display: none; }
body[class*=vidro-] nav .logo { padding: 11px 18px; border-radius: 999px; background: rgba(20,22,27,.5); border: 1px solid var(--vidro-borda); box-shadow: var(--vidro-brilho); backdrop-filter: var(--vidro-blur); -webkit-backdrop-filter: var(--vidro-blur); }
body[class*=vidro-] .draft-tag { display: none; }
body[class*=vidro-] nav .lang-switch { margin-left: auto; background: rgba(20,22,27,.5); backdrop-filter: var(--vidro-blur); -webkit-backdrop-filter: var(--vidro-blur); box-shadow: var(--vidro-brilho); padding: 3px; justify-self: auto; }
body[class*=vidro-] nav .lang-btn { padding: 7px 12px; border-radius: 999px; }
body[class*=vidro-] nav .lang-btn.active { background: #f4f5f7; color: #000; }
.redondo { width: 42px; height: 42px; flex: none; margin-left: auto; margin-right: 8px; border-radius: 50%; display: grid; place-items: center; color: #e4e6ea; background: rgba(20,22,27,.5); border: 1px solid var(--vidro-borda); box-shadow: var(--vidro-brilho); backdrop-filter: var(--vidro-blur); -webkit-backdrop-filter: var(--vidro-blur); transition: background .2s, transform .2s; }
.redondo svg { width: 18px; height: 18px; }
.redondo:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
body[class*=vidro-] nav .redondo + .lang-switch { margin-left: 0; }

/* pílulas das seções, no centro */
.pilulas { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 51; display: flex; gap: 6px; }
.pilulas button { padding: 11px 18px; border-radius: 999px; font-family: var(--font-body); font-size: 13.5px; font-weight: 500; white-space: nowrap; color: #e4e6ea; background: rgba(20,22,27,.5); border: 1px solid var(--vidro-borda); box-shadow: var(--vidro-brilho), 0 8px 24px rgba(0,0,0,.25); backdrop-filter: var(--vidro-blur); -webkit-backdrop-filter: var(--vidro-blur); transition: background .25s, color .25s, transform .2s; }
.pilulas button:hover { background: rgba(255,255,255,.14); transform: translateY(-1px); }
.pilulas button.on { background: rgba(6,7,10,.82); color: #fff; }

/* menu das 4 áreas, abaixo da logo: ícone + nome, a atual marcada */
.dock { position: fixed; left: 22px; top: 76px; z-index: 52; width: 92px; display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 22px; background: rgba(12,13,17,.62); border: 1px solid var(--vidro-borda); box-shadow: var(--vidro-sombra), var(--vidro-brilho); backdrop-filter: var(--vidro-blur); -webkit-backdrop-filter: var(--vidro-blur); }
.dk { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 4px 9px; border-radius: 17px; color: #d3d5da; text-decoration: none; text-align: center; transition: background .22s, color .22s; }
.dk svg { width: 20px; height: 20px; flex: none; }
.dk b { font-family: var(--font-body); font-size: 11.5px; font-weight: 500; line-height: 1.15; }
a.dk:hover { background: rgba(255,255,255,.14); color: #fff; }
.dk.on, a.dk.on:hover { background: #f4f5f7; color: #000; box-shadow: 0 6px 20px rgba(255,255,255,.18); }
.dk.on b { font-weight: 700; }
.dk.trava { color: #7d8087; cursor: not-allowed; }

/* números soltos, cada um no seu cartão */
body[class*=vidro-] .stats { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; gap: 12px; }
body[class*=vidro-] .stat, body[class*=vidro-] .stat + .stat { padding: 16px 18px; border-radius: 18px; background: var(--vidro); border: 1px solid var(--vidro-borda); box-shadow: var(--vidro-brilho); backdrop-filter: var(--vidro-blur); -webkit-backdrop-filter: var(--vidro-blur); }

/* botões em pílula; a etiqueta sobre a mídia também */
body[class*=vidro-] :is(.btn, .acoes2 > *, .cta, .cta-fim, .cta-2, .copia) { border-radius: 999px; }
body[class*=vidro-] :is(.vplay .dur, .vplay .som, .ad .rot) { border-radius: 999px; background: rgba(12,13,17,.6); border: 1px solid var(--vidro-borda); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body[class*=vidro-] .vinfo .lab { display: inline-block; align-self: flex-start; }
body[class*=vidro-] .vcard .precisa { border-left: 0; border-radius: 12px; }

/* seletor Tudo / Imagem / Vídeo */
.filtro { display: inline-flex; gap: 2px; padding: 4px; margin-bottom: 18px; border-radius: 999px; background: rgba(20,22,27,.5); border: 1px solid var(--vidro-borda); box-shadow: var(--vidro-brilho); backdrop-filter: var(--vidro-blur); -webkit-backdrop-filter: var(--vidro-blur); }
.filtro button { padding: 9px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: #c6c8cd; transition: background .25s, color .25s; }
.filtro button:hover { color: #fff; }
.filtro button.on { background: #f4f5f7; color: #000; }

/* entrada: o painel se monta a partir do desfoque; saída: se desfaz */
.ent { opacity: 0; filter: blur(16px); transform: translateY(14px) scale(.985); }
.ent.vv { opacity: 1; filter: none; transform: none; transition: opacity .75s var(--d, 0ms), filter .75s var(--d, 0ms), transform .75s cubic-bezier(.2,.8,.2,1) var(--d, 0ms); }
body[class*=vidro-]::before { animation: foca 1.3s ease-out both; transition: filter .45s, opacity .45s; }
@keyframes foca { from { filter: blur(22px); } to { filter: blur(7px); } }
body.saindo::before { animation: none; filter: blur(0); }
body.saindo :is(.vv, .vcard, .abre, .filtro, .player, .vitrine, .faixa, .seguir, .pontos, .legenda, .pilulas button, .wall-center, .section-head, .hero-top, .cab, .info, .qd, .clone h2, .sub-cl, .cl-mundo, .como h2, .como .lab, .proc-video, .wall) { opacity: 0 !important; filter: blur(16px) !important; transform: translateY(-8px) scale(.985) !important; transition: opacity .42s var(--d, 0ms), filter .42s var(--d, 0ms), transform .42s var(--d, 0ms) !important; }
@media (prefers-reduced-motion: reduce) { .ent { opacity: 1; filter: none; transform: none; } body[class*=vidro-]::before { animation: none; filter: blur(7px); } }

/* telas médias: as pílulas não cabem com logo e idioma */
@media (max-width: 1040px) { .pilulas { display: none; } }
/* celular: dock vira barra embaixo */
@media (max-width: 700px) {
  .dock { top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; flex-direction: row; gap: 2px; padding: 5px; }
  .dk { flex: 1 1 0; min-width: 0; padding: 8px 2px 7px; gap: 3px; }
  .dk svg { width: 18px; height: 18px; }
  .dk b { font-size: 10.5px; }
  body[class*=vidro-] { padding-bottom: 92px; }
  body[class*=vidro-] .hero { padding-top: 96px; }
  body[class*=vidro-] nav { padding: 12px 16px; }
  body[class*=vidro-] .stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  body[class*=vidro-] .stat, body[class*=vidro-] .stat + .stat, body[class*=vidro-] .stat:nth-child(3) { padding: 12px; border-left: 1px solid var(--vidro-borda); border-top: 1px solid var(--vidro-borda); }
}

/* celular: menos desfoque (pesa) e vidro mais fechado */
@media (max-width: 700px) {
  :root { --vidro: rgba(16, 18, 22, .70); --vidro-blur: blur(12px) saturate(130%); }
  body[class*=vidro-] .vcard { filter: none; }
}
/* navegador sem desfoque: vidro vira cartão escuro */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --vidro: rgba(16, 18, 22, .90); }
}