/* AS27 · apresentação privada de Pedro & Rafa Marks. Mundo do site institucional ("a sala escura", DESIGN.md),
   feito para o celular e todo centralizado (pedido do Pedro, 21/10/2026).
   Sanduíche de autoridade: o ecossistema em volta da dupla e os sócios em cima; a dupla e o mídia kit no meio;
   quem agencia embaixo. Regras: rosto nunca cortado nem com texto por cima, foto nunca repetida,
   mesma proporção dentro de um grupo, WhatsApp só como botão. */
:root{
  --bg:#050403; --surface:#100c08; --surface-2:#1a140c;
  --ink:#f4f2ee; --muted:#c9c1b3; --soft:#9a9184;
  --accent:#ffc23d; --accent-claro:#ffe39a; --accent-quente:#e8951a; --accent-fundo:#3a2606;
  --fio:rgba(255,210,110,.42);
  --limite:1120px; --margem:clamp(18px,4vw,40px);
  --t-hero:clamp(36px,5.6vw,70px); --t-titulo:clamp(30px,5vw,50px); --t-lead:clamp(16px,1.5vw,19px);
  --sans:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif; --cond:"Bebas Neue",Impact,sans-serif;
  --raio:22px; --ease:cubic-bezier(.16,1,.3,1);
  --secao:clamp(88px,10vw,128px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-color:#3a2a10 var(--bg)}
body{color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;background:var(--bg);caret-color:var(--accent);text-align:center}
::selection{background:var(--accent);color:#1b1000}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
svg{display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
:focus-visible{outline:2px solid var(--accent-claro);outline-offset:3px;border-radius:6px}
.quadro{width:100%;max-width:var(--limite);margin:0 auto;padding:0 var(--margem)}
.oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* cabeça de seção */
.cabeca{max-width:680px;margin:0 auto}
.cabeca h2{font:800 var(--t-titulo)/1.05 var(--sans);letter-spacing:-.03em;text-wrap:balance}
.cabeca p{margin:14px auto 0;max-width:40ch;font-size:var(--t-lead);color:var(--muted);text-wrap:pretty}
.aviso{font-size:14px;line-height:1.45;color:var(--soft)}

/* ===== barra: transparente sobre o palco, sólida ao rolar ===== */
.barra{position:fixed;top:0;left:0;right:0;z-index:30;transition:background .3s ease}
.barra.solida{background:var(--bg)}
.barra .quadro{display:flex;align-items:center;justify-content:space-between;gap:14px;height:64px}
.barra .marca img{height:21px;width:auto}
.barra .acao{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--accent);color:#1b1000;font-weight:700;font-size:14px;white-space:nowrap;transition:transform .2s var(--ease),background .2s}
.barra .acao:hover{background:var(--accent-claro)}
.barra .acao:active{transform:scale(.96)}
.barra .acao svg{width:16px;height:16px}

/* ===== botões (CTA neon aprovado pela marca em 14/10/2026) ===== */
/* taste-skill-ignore: o aro, o degradê e o brilho do botão são da marca */
.cta{display:inline-block;padding:5px;border-radius:999px;border:1px solid rgba(255,230,170,.6);box-shadow:0 0 6px rgba(255,190,60,.22);transition:transform .2s var(--ease)} /* taste-skill-ignore */
.cta:hover{transform:translateY(-2px)}
.cta:active{transform:scale(.98)}
.cta-in{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:14px;padding:7px 7px 7px 26px;border-radius:999px; /* taste-skill-ignore */
  background:linear-gradient(90deg,var(--accent-fundo) 0%,#a8650c 22%,var(--accent-quente) 55%,var(--accent) 100%);box-shadow:inset 0 1px 0 rgba(255,240,200,.45),0 0 8px rgba(255,170,30,.22)} /* taste-skill-ignore */
.cta-in::after{content:"";position:absolute;inset:0; /* taste-skill-ignore */ background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);transform:translateX(-120%);animation:brilho 5s ease-in-out 1.5s infinite}
@keyframes brilho{0%,72%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.cta-tx{white-space:nowrap;font-weight:700;font-size:clamp(14px,3.8vw,16px);color:#fff}
.cta-seta{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;color:#2a1500;background:var(--accent-claro);transition:transform .3s var(--ease)}
.cta:hover .cta-seta{transform:rotate(45deg)}
.cta-seta svg{width:19px;height:19px}
.btn-sec{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:12px 22px;border-radius:999px;border:1px solid rgba(255,230,170,.45);color:var(--ink);font-weight:700;font-size:15px;transition:border-color .2s,background .2s,transform .2s var(--ease)} /* taste-skill-ignore: botão secundário do site institucional */
.btn-sec:hover{border-color:var(--accent-claro);background:rgba(255,194,61,.08)}
.btn-sec:active{transform:scale(.97)}
.btn-sec svg{width:17px;height:17px;color:var(--accent-claro)}

/* ===== 1 · capa: o palco da dupla de fundo, o texto abaixo dos rostos, o ecossistema em volta deles ===== */
.hero{position:relative;overflow:hidden}
/* o palco (ilustração criada com IA, a pedido do Pedro): a dupla de costas para a plateia, o chão escuro embaixo recebe o texto */
.hero-fundo{position:absolute;left:0;right:0;top:0;height:100svh;max-height:1100px;overflow:hidden;pointer-events:none}
.hero-fundo img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.hero-fundo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,4,3,.6) 0,rgba(5,4,3,0) 14%,rgba(5,4,3,0) 62%,rgba(5,4,3,.55) 82%,#050403 100%)} /* taste-skill-ignore: véu neutro sobre a foto, para ler a barra e o texto */
.hero-texto{position:relative;padding-top:61svh;max-width:640px;margin:0 auto}
/* o nome da dupla é o título: o logo deles, em branco */
.hero-logo{margin:0 auto;width:min(80vw,330px)}
.hero-logo img{width:100%;height:auto;filter:brightness(0) invert(.97)}
.hero .apoio{margin:18px auto 0;max-width:24ch;font:600 clamp(20px,2.2vw,27px)/1.3 var(--sans);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.hero .acoes{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:24px}
.hero .aviso{margin:16px auto 0;max-width:40ch}
@media (min-width:640px){.hero .acoes{flex-direction:row;justify-content:center}}
/* tela deitada: a foto larga cresce 25% e sobe, para os pés da dupla ficarem acima do texto sem cortar a cabeça */
@media (min-aspect-ratio:1/1){
  .hero-fundo img{height:125%;top:-25%;object-position:50% 50%}
  .hero-texto{padding-top:max(71svh,330px);max-width:1100px}
  .hero-logo{width:clamp(300px,26vw,400px)}
  .hero .apoio{margin-top:14px;max-width:none}
  .hero .acoes{margin-top:20px}
}

/* mapa: a dupla no centro, as frentes em volta */
.mapa{position:relative;margin:clamp(56px,9vw,96px) auto 0;max-width:440px}
.mapa-area{position:relative;aspect-ratio:350/560}
.mapa-linhas{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.mapa-linhas path{stroke-width:1;transition:stroke .3s}
.mapa-linhas circle{fill:var(--accent-claro)}
.mapa-centro{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;padding:5px;background:var(--bg);border:2px solid var(--accent);box-shadow:0 0 30px rgba(255,194,61,.45)} /* taste-skill-ignore: brilho da vaga (DESIGN.md), o ponto aceso do mapa */
.mapa-centro img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.mapa-centro figcaption{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);padding:5px 12px;border-radius:999px;background:var(--bg);font:400 17px/1 var(--cond);letter-spacing:.04em;color:var(--accent-claro);white-space:nowrap}
.no{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-22px);display:flex;flex-direction:column;align-items:center;gap:5px;width:84px;transition:transform .25s var(--ease)}
.no .ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--accent-claro);transition:background .25s,color .25s,transform .25s var(--ease)}
.no .ic svg{width:20px;height:20px}
.no .rotulo{font-weight:700;font-size:12.5px;line-height:1.2;color:var(--muted);transition:color .25s}
.no:hover .ic{transform:scale(1.08)}
.no:hover .rotulo{color:var(--ink)}
.no[aria-pressed="true"] .ic{background:var(--accent);color:#1b1000}
.no[aria-pressed="true"] .rotulo{color:var(--accent-claro)}
.ficha{min-height:158px;margin:26px auto 0;max-width:440px;padding:22px 20px;border-radius:var(--raio);background:var(--surface)}
.ficha .ficha-t{margin:0;font:800 20px/1.2 var(--sans);letter-spacing:-.015em}
.ficha p{margin-top:8px;font-size:15.5px;line-height:1.5}
.ficha .liga b{display:block;margin-bottom:2px;font-size:13px;color:var(--accent-claro)}
.ficha .dica{color:var(--soft);font-size:14px}
.ficha .aviso{margin-top:10px}
.ficha.troca>*{animation:sobe .45s var(--ease) both}
.ficha.troca>*:nth-child(2){animation-delay:.04s}.ficha.troca>*:nth-child(3){animation-delay:.08s}
@keyframes sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (min-width:900px){
  .mapa{max-width:1060px}
  .mapa-area{aspect-ratio:1060/620}
  .mapa-centro{width:27%}
  .mapa-centro figcaption{font-size:20px;bottom:-16px}
  .no{left:var(--xd);top:var(--yd);width:130px;transform:translate(-50%,-28px)}
  .no .ic{width:56px;height:56px}
  .no .ic svg{width:25px;height:25px}
  .no .rotulo{font-size:15px}
  .ficha{max-width:520px;padding:26px 28px}
  .ficha .ficha-t{font-size:22px}
  .ficha p{font-size:17px}
}

/* ===== 2 · sócios: os três cartões da bio, lado a lado ===== */
.socios-sec{padding-top:var(--secao)}
.socios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:760px;margin:30px auto 0}
.socio{display:flex;flex-direction:column;border-radius:var(--raio);overflow:hidden;border:1px solid var(--fio);background:#0b0805;box-shadow:0 0 14px rgba(255,185,50,.4);transition:transform .25s var(--ease)} /* taste-skill-ignore: cartão neon da bio (marca) */
.socio:hover{transform:translateY(-3px)}
.socio:active{transform:scale(.97)}
.socio .f{aspect-ratio:4/5;overflow:hidden}
.socio .f img{width:100%;height:100%;object-fit:cover}
.socio .t{flex:1;display:flex;flex-direction:column;align-items:center;padding:12px 6px 14px;background:var(--surface)}
.socio .p em{font-style:normal;font-weight:700;color:var(--accent-claro)}
.embaixador{max-width:34ch;margin:30px auto 0;font-size:clamp(18px,2vw,22px);font-weight:600;line-height:1.45;text-wrap:balance}
.embaixador b{color:var(--accent-claro)}
.socio .n{font-weight:700;font-size:14px;line-height:1.25}
.socio .p{flex:1;margin-top:4px;font-size:13px;line-height:1.35;color:var(--muted)}
.socio .h{display:inline-flex;align-items:center;gap:5px;margin-top:10px;padding:6px 10px;border-radius:999px;border:1px solid var(--fio);font-size:13px;white-space:nowrap;font-weight:700;color:var(--accent-claro)} /* taste-skill-ignore: cartões da bio (pedido do Pedro) */
.socio .h svg{width:13px;height:13px}
@media (max-width:479px){.socio .h svg{display:none}.socio .h{font-size:12.5px;padding:6px 9px}}
@media (min-width:900px){.socios{gap:20px}.socio .n{font-size:17px}.socio .p{font-size:14.5px}}

/* ===== 3 · a dupla ===== */
.dupla{padding-top:var(--secao)}
.fatos{display:grid;gap:18px;max-width:720px;margin:30px auto 0}
.fatos dt{font-size:14px;font-weight:700;color:var(--accent-claro)}
.fatos dd{margin-top:2px;font-size:17px;line-height:1.5}
@media (min-width:760px){.fatos{grid-template-columns:repeat(3,1fr);gap:24px}}
.galeria{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:760px;margin:40px auto 0}
.galeria figure{min-width:0}
.galeria img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px;background:var(--surface)}
.galeria figcaption{margin-top:10px;font-size:13.5px;line-height:1.4;color:var(--muted)}
@media (min-width:900px){.galeria{gap:24px}.galeria figcaption{font-size:15px}}
.ouvir{max-width:560px;margin:48px auto 0}
.ouvir h3{font:800 clamp(22px,2.6vw,28px)/1.15 var(--sans);letter-spacing:-.02em}
.ouvir p{margin-top:8px;color:var(--muted);font-size:15.5px}
.ouvir iframe{display:block;width:100%;height:352px;margin-top:20px;border:0;border-radius:14px;background:var(--surface)}

/* ===== 4 · mídia kit ===== */
.kit{padding-top:var(--secao)}
.numeros{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 14px;max-width:900px;margin:40px auto 0}
.numeros dt{font:400 clamp(50px,6vw,78px)/.9 var(--cond);color:var(--accent-claro)}
.numeros dd{margin-top:8px;font-size:15px;line-height:1.35;color:var(--ink)}
@media (min-width:760px){.numeros{grid-template-columns:repeat(3,minmax(0,1fr));gap:52px 20px}}
.fontes{max-width:60ch;margin:34px auto 0}

/* ===== 5 · quem agencia + fechamento ===== */
.agencia{padding-top:var(--secao)}
.agente-foto{width:min(58vw,240px);aspect-ratio:1;margin:0 auto 30px;padding:5px;border-radius:50%;border:2px solid var(--accent);box-shadow:0 0 30px rgba(255,194,61,.4)} /* taste-skill-ignore: o mesmo ponto aceso do mapa */
.agente-foto img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.fatos-agente{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:620px;margin:30px auto 0}
.fatos-agente dt{font:400 clamp(38px,5vw,56px)/.9 var(--cond);color:var(--accent-claro)}
.fatos-agente dd{margin-top:6px;font-size:14px;line-height:1.35}
/* régua: os artistas que passaram pelo Blener, em círculos que correm devagar. Foto do artista só com autorização:
   basta pôr <img> dentro do .av, e as iniciais somem por baixo dela */
.regua{margin-top:clamp(44px,7vw,72px)}
.regua h3{font-size:16px;font-weight:700;color:var(--muted)}
.regua-trilho{margin:20px calc(-1*var(--margem)) 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} /* taste-skill-ignore: máscara que esfuma as pontas da régua */
.regua-fila{display:flex;gap:16px;width:max-content;padding:4px 0;animation:regua 42s linear infinite}
.regua-trilho:hover .regua-fila{animation-play-state:paused}
@keyframes regua{to{transform:translateX(-50%)}}
.regua-fila li{width:96px;flex:none;display:flex;flex-direction:column;align-items:center;gap:8px}
.av{position:relative;width:76px;height:76px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--fio)} /* taste-skill-ignore: anel fino dourado do DESIGN.md */
.av b{font:400 22px/1 var(--cond);letter-spacing:.03em;color:var(--accent-claro)}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nm{font-size:13px;font-weight:600;line-height:1.3;color:var(--ink)}
.agencia .fontes{margin-top:26px}
@media (min-width:900px){.agente-foto{width:280px}.regua-fila li{width:112px}.av{width:88px;height:88px}.av b{font-size:26px}}
.fecho{padding:var(--secao) 0 calc(104px + env(safe-area-inset-bottom))}
.fecho .quadro{display:grid;justify-items:center;gap:20px}
.fecho-escudo{width:50px}
.fecho-titulo{font:800 var(--t-titulo)/1.05 var(--sans);letter-spacing:-.03em;text-wrap:balance;max-width:16ch}
.fecho-titulo span{color:var(--accent-claro)}
.fecho-apoio{max-width:40ch;font-size:var(--t-lead);color:var(--muted)}
.fecho .legal{max-width:62ch;font-size:14px;line-height:1.5;color:var(--soft)}
.fecho .cta+.legal{margin-top:16px}
@media (min-width:900px){.fecho{padding-bottom:56px}}

/* ===== a pilha: tudo o que já está em volta da dupla, somado (equação de valor) ===== */
.pilha{padding-top:var(--secao)}
.pilha-lista{max-width:560px;margin:34px auto 0;display:grid;gap:0}
.pilha-lista li{padding:22px 0}
.pilha-lista li+li{position:relative}
.pilha-lista li+li::before{content:"+";display:grid;place-items:center;width:30px;height:30px;margin:-37px auto 16px;border-radius:50%;background:var(--bg);color:var(--accent);font:400 24px/1 var(--cond)}
.pilha-lista b{display:block;font:800 clamp(19px,2vw,22px)/1.25 var(--sans);letter-spacing:-.015em}
.pilha-lista span{display:block;margin-top:6px;font-size:16.5px;line-height:1.5;color:var(--muted)}
.pilha-soma{max-width:30ch;margin:18px auto 0;font:800 clamp(22px,2.6vw,30px)/1.2 var(--sans);letter-spacing:-.02em;color:var(--accent-claro);text-wrap:balance}

/* ===== barra fixa de conversa (celular) ===== */
.barra-fixa{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px var(--margem) calc(10px + env(safe-area-inset-bottom));background:var(--bg);transform:translateY(120%);transition:transform .35s var(--ease)}
.barra-fixa.visivel{transform:none}
.barra-fixa .cta{display:block;max-width:440px;margin:0 auto}
@media (min-width:900px){.barra-fixa{display:none}}

/* ===== entradas ao rolar ===== */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.ok{opacity:1;transform:none}
.js .rv.ok+.rv{transition-delay:.08s}
.js .rv.ok+.rv+.rv{transition-delay:.16s}
.js .hero-texto.rv.ok>*{animation:sobe .8s var(--ease) both}
.js .hero-texto.rv.ok>*:nth-child(2){animation-delay:.08s}
.js .hero-texto.rv.ok>*:nth-child(3){animation-delay:.16s}
.js .hero-texto.rv.ok>*:nth-child(4){animation-delay:.24s}
.js .hero-fundo img{animation:palco 2.4s var(--ease) both}
@keyframes palco{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .js .hero-texto.rv.ok>*,.ficha.troca>*,.js .hero-fundo img{animation:none}
  .cta-in::after{animation:none}
  .regua-fila{animation:none;flex-wrap:wrap;justify-content:center;width:auto;row-gap:20px}
  .regua-trilho{-webkit-mask-image:none;mask-image:none;margin:20px 0 0}
}