/* passada de design da home, 07/10/2026 · secoes #cockpit e #prova. Dono: agente COCKPIT-PROVA.
   Regras: seletores presos a section#cockpit / section#prova (especificidade acima do <style> embutido da secao),
   !important so onde ha estilo embutido ou refino.css a vencer. Nenhum texto muda; nenhuma animacao nova (so transicoes de toque). */

/* =====================================================================
   COCKPIT · computador (>= 1100 px) e base
   ===================================================================== */
section#cockpit{
  padding-top:var(--ds-secao-y)!important;padding-bottom:var(--ds-secao-y)!important;
  background:radial-gradient(60% 38% at 80% 4%,rgba(201,165,94,.075),transparent 70%),linear-gradient(180deg,#0E0D0C 0%,#120E10 55%,#0E0D0C 100%)!important;
}
section#cockpit .cb-wrap{max-width:var(--ds-max)}

/* cabecalho: titulo grande a esquerda; texto e botao na coluna da direita, alinhados ao pe do titulo */
section#cockpit .cb-head{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:32px clamp(48px,6.5vw,110px);align-items:end}
section#cockpit .cb-eyebrow{font-size:max(12.5px,var(--ds-rotulo))!important;letter-spacing:var(--ds-rotulo-esp);gap:14px;margin-bottom:clamp(20px,2vw,30px);color:var(--ds-ouro-claro)}
section#cockpit .cb-eyebrow i{width:28px}
section#cockpit h2.cb-h2{font-size:var(--ds-h2)!important;line-height:1!important;letter-spacing:-.015em}
section#cockpit .cb-side{padding:0 0 .2em clamp(28px,3.2vw,52px);border-left:1px solid rgba(201,165,94,.32)}
section#cockpit .cb-lede{font-size:var(--ds-lead);line-height:1.62;max-width:none;margin:0 0 30px;color:var(--ds-sub-escuro)}
section#cockpit .cb-open{min-height:54px;padding:0 30px;font-size:1rem;gap:14px;border-color:rgba(228,192,120,.7)}
section#cockpit .cb-open span{display:inline-block;transition:transform .3s var(--ds-ease)}
section#cockpit .cb-open:hover span{transform:translateX(4px)}

/* barra: abas como controle segmentado; selo de verdade em pilula discreta */
section#cockpit .cb-bar{margin-top:var(--ds-bloco);gap:16px 28px}
section#cockpit .cb-tabs{gap:4px;padding:5px;border:1px solid rgba(244,236,222,.15);border-radius:99px;background:rgba(244,236,222,.04)}
section#cockpit .cb-tab{min-height:46px;padding:0 24px 0 18px;font-size:.98rem;border-color:transparent;background:transparent}
section#cockpit .cb-tab:hover{background:rgba(244,236,222,.07);border-color:transparent;color:var(--ds-creme)}
section#cockpit .cb-tab[aria-pressed="true"]{border-color:transparent;box-shadow:0 10px 26px -10px rgba(201,165,94,.75)}
section#cockpit .cb-tab i,section#cockpit .cb-tab i *{font-size:12px!important;letter-spacing:.08em}
section#cockpit .cb-chip{font-size:12.5px!important;letter-spacing:.1em;padding:9px 16px;border:1px solid rgba(148,173,143,.38);border-radius:99px;color:#B7C4B2;background:rgba(148,173,143,.06)}
section#cockpit .cb-chip u{width:7px;height:7px;box-shadow:0 0 0 3px rgba(148,173,143,.2)}
section#cockpit .cb-desc{margin:clamp(26px,2.6vw,38px) 0 0;font-size:clamp(1.55rem,2.1vw,2.05rem);line-height:1.22;color:var(--ds-creme)}

/* palco e moldura de aparelho: aro escuro de 10 px, fio dourado fino, sombra funda, brilho no canto, pe de apoio */
section#cockpit .cb-stage{margin-top:clamp(26px,2.6vw,38px)}
section#cockpit .cb-shot-d{
  margin:0 12px;
  box-shadow:0 0 0 10px #160F12,0 0 0 11px rgba(228,192,120,.42),0 0 0 12px rgba(0,0,0,.55),0 110px 150px -56px rgba(0,0,0,.98),0 50px 90px -40px rgba(166,58,80,.34);
}
section#cockpit .cb-shot-d::before{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,0) 24%)}
section#cockpit .cb-shot-d::after{content:"";position:absolute;left:21%;right:21%;top:calc(100% + 11px);height:15px;border-radius:0 0 22px 22px;background:linear-gradient(180deg,#2B2126,#120C0F);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 26px 40px -14px rgba(0,0,0,.85);pointer-events:none}

/* chamadas 1-2-3: mesmo selo (circulo dourado) no aparelho e na legenda */
section#cockpit .cb-pin b{font-size:12.5px;letter-spacing:.05em;padding:6px 15px 6px 6px;gap:9px;border-color:rgba(228,192,120,.8)}
section#cockpit .cb-pin em{width:24px;height:24px;font-size:12px}
section#cockpit .cb-legend{margin-top:clamp(64px,6vw,92px);gap:0 clamp(32px,4vw,64px)}
section#cockpit .cb-note{border-top:1px solid rgba(228,192,120,.4);padding-top:24px;column-gap:18px;row-gap:8px}
section#cockpit .cb-note .cb-n{width:32px;height:32px;margin-top:5px;font-size:13px;box-shadow:0 0 0 5px rgba(201,165,94,.14)}
section#cockpit .cb-note h3{font-size:var(--ds-h3);line-height:1.04;letter-spacing:-.005em}
section#cockpit .cb-note p{font-size:var(--ds-corpo);line-height:1.62;color:var(--ds-sub-escuro)}

/* =====================================================================
   COCKPIT · 760 a 1099 px
   ===================================================================== */
@media (min-width:760px) and (max-width:1099px){
  section#cockpit .cb-note h3{font-size:1.75rem}
  section#cockpit .cb-legend{gap:0 28px}
}
@media (max-width:1000px){
  section#cockpit .cb-head{grid-template-columns:1fr;gap:28px}
  section#cockpit .cb-side{padding:0;border-left:0}
  section#cockpit .cb-lede{max-width:600px}
}
@media (max-width:900px){
  section#cockpit .cb-legend{grid-template-columns:1fr;gap:0}
  section#cockpit .cb-note{padding:20px 0}
}

/* =====================================================================
   COCKPIT · celular (<= 759 px): a tela do aparelho mostra uma janela com esmaecimento
   (a janela e proporcional a largura; os numeros 1-2-3 continuam no lugar certo)
   ===================================================================== */
@media (max-width:759px){
  section#cockpit{padding-top:var(--ds-secao-y)!important;padding-bottom:var(--ds-secao-y)!important}
  section#cockpit .cb-eyebrow{margin-bottom:16px}
  section#cockpit .cb-head{gap:18px}
  section#cockpit h2.cb-h2{font-size:var(--ds-h2)!important}
  section#cockpit .cb-lede{font-size:var(--ds-corpo);line-height:1.55;margin:0 0 18px}
  section#cockpit .cb-open{width:100%;min-height:50px;padding:0 20px}
  section#cockpit .cb-bar{margin-top:26px;gap:12px}
  section#cockpit .cb-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:0;border:0;background:transparent;border-radius:0;width:100%}
  section#cockpit .cb-tab{min-height:46px;border-color:rgba(244,236,222,.18);background:rgba(244,236,222,.04);padding:0 14px}
  section#cockpit .cb-tab[aria-pressed="true"]{border-color:transparent}
  section#cockpit .cb-chip{font-size:12px!important;letter-spacing:.04em;padding:0;border:0;background:transparent;line-height:1.35}
  section#cockpit .cb-desc{margin-top:14px;font-size:1.3rem}
  section#cockpit .cb-stage{margin-top:16px}

  section#cockpit .cb-legend{margin-top:20px}
  section#cockpit .cb-note{padding:12px 0 12px;column-gap:12px;row-gap:3px}
  section#cockpit .cb-note .cb-n{width:28px;height:28px;margin-top:2px;box-shadow:none;font-size:12.5px}
  section#cockpit .cb-note h3{font-size:1.45rem;line-height:1.05}
  section#cockpit .cb-note p{font-size:.95rem;line-height:1.45}
}

/* janela do aparelho (celular): so quando o navegador entende :has() e aspect-ratio; sem isso a tela aparece inteira, como antes */
@media (max-width:759px){
@supports selector(:has(*)){
  /* altura = 1,42 x largura; a imagem inteira fica por dentro, deslocada conforme a aba */
  section#cockpit .cb-shot-m{aspect-ratio:1/1.42;overflow:hidden;border-radius:26px;box-shadow:0 0 0 1px rgba(228,192,120,.34),0 50px 90px -40px rgba(0,0,0,.95)}
  section#cockpit .cb-shot-m .cb-img{position:absolute;left:0;top:0;width:100%;border-radius:0;transform:translateY(var(--cb-sh,0%))}
  section#cockpit .cb-shot-m .cb-pins{position:absolute;inset:auto;left:0;top:0;width:100%;aspect-ratio:780/1688;transform:translateY(var(--cb-sh,0%))}
  section#cockpit .cb-shot-m:has(img[alt*="tela Conversas"]){--cb-sh:-12%;--cb-topo:1}
  section#cockpit .cb-shot-m:has(img[alt*="tela Agenda"]){--cb-sh:-34.3%;--cb-topo:1;--cb-base:0}
  /* 07/10 (demo refeita): pinos novos do Celular em Inicio e Triagem ficam dentro da janela (Triagem 556-680 de 844 ficava abaixo do corte) */
  section#cockpit .cb-shot-m:has(img[alt*="tela In\ED cio"]){--cb-sh:-8%;--cb-topo:1;--cb-base:0}
  section#cockpit .cb-shot-m:has(img[alt*="tela Triagem"]){--cb-sh:-20%;--cb-topo:1;--cb-base:0}
  section#cockpit .cb-shot-m::before{content:"";position:absolute;left:0;right:0;top:0;height:11%;z-index:2;pointer-events:none;opacity:var(--cb-topo,0);background:linear-gradient(to bottom,rgba(16,13,14,.96),rgba(16,13,14,0))}
  section#cockpit .cb-shot-m::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14%;z-index:2;pointer-events:none;opacity:var(--cb-base,1);background:linear-gradient(to bottom,rgba(16,13,14,0),rgba(16,13,14,.97))}
  section#cockpit .cb-shot-m .cb-pins{z-index:3}

}
}

/* =====================================================================
   PROVA · computador e base: duas colunas iguais; o registro vira documento em papel
   ===================================================================== */
section#prova{
  padding-top:var(--ds-secao-y)!important;padding-bottom:var(--ds-secao-y)!important;
  background:radial-gradient(52% 62% at 80% 50%,rgba(201,165,94,.24),transparent 72%),radial-gradient(38% 46% at 4% 96%,rgba(123,36,55,.08),transparent 70%),#F4ECDE!important;
}
section#prova .rg-wrap{max-width:var(--ds-max);grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px clamp(56px,7.5vw,120px);align-items:center}
section#prova .rg-eyebrow{font-size:max(12.5px,var(--ds-rotulo))!important;letter-spacing:var(--ds-rotulo-esp);gap:14px;margin-bottom:clamp(20px,2vw,30px);color:var(--ds-vinho)}
section#prova .rg-eyebrow i{width:28px}
section#prova h2.rg-h2{font-size:var(--ds-h2)!important;line-height:1!important;letter-spacing:-.015em}
section#prova .rg-lede{font-size:var(--ds-lead);line-height:1.62;max-width:500px;margin:clamp(22px,2.4vw,34px) 0 0;color:var(--ds-sub-claro)}
section#prova a.rg-cta{min-height:54px;padding:0 30px;margin-top:clamp(28px,3vw,40px);font-size:1rem;color:#F4ECDE!important;box-shadow:0 18px 34px -18px rgba(14,13,12,.65)}
section#prova a.rg-cta span{display:inline-block;transition:transform .3s var(--ds-ease)}
section#prova a.rg-cta:hover span{transform:translateX(4px)}

/* documento: papel, folhas empilhadas por tras, selo vinho no topo, cabecalho, linha do tempo nitida */
section#prova .rg-card{
  background:#FFFEFB;border:1px solid rgba(14,13,12,.1);border-radius:var(--ds-raio);
  padding:clamp(44px,4vw,56px) clamp(28px,3.2vw,48px) clamp(30px,3vw,40px);
  box-shadow:var(--ds-sombra-cartao),0 1px 0 #fff inset;
}
section#prova .rg-card::before,section#prova .rg-card::after{content:"";position:absolute;z-index:-1;border-radius:var(--ds-raio);pointer-events:none}
section#prova .rg-card::before{inset:8px -10px -14px 18px;background:#FBF5E8;border:1px solid rgba(14,13,12,.1);transform:rotate(1.9deg);box-shadow:0 24px 40px -26px rgba(70,30,30,.4)}
section#prova .rg-card::after{inset:-2px 16px -6px -12px;background:#F7EFDF;border:1px solid rgba(14,13,12,.08);transform:rotate(-1.5deg);z-index:-2}

section#prova .rg-top{display:block;padding:0 0 clamp(18px,2vw,26px);border-bottom:1px solid rgba(14,13,12,.16);text-transform:none}
section#prova .rg-top b{display:block;font:500 1.9rem/1.05 var(--ds-serif)!important;letter-spacing:0;text-transform:none;color:var(--ds-tinta)}
section#prova .rg-top span{
  position:absolute;top:-17px;right:clamp(22px,3vw,40px);z-index:2;transform:rotate(-2.4deg);
  display:inline-block;padding:10px 18px;border-radius:9px;background:var(--ds-vinho);color:#FBF3E4;
  font:600 12.5px/1.25 var(--ds-mono)!important;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  outline:1px dashed rgba(251,243,228,.6);outline-offset:-5px;
  box-shadow:0 0 0 4px #FFFEFB,0 14px 28px -12px rgba(123,36,55,.75);
}
section#prova .rg-trail{margin:clamp(24px,2.6vw,34px) 0 0;padding:0}
section#prova .rg-s{padding:0 0 clamp(26px,2.6vw,34px) 48px;border-left:0!important}
section#prova .rg-s:last-child{padding-bottom:0}
section#prova .rg-s::before{left:0;top:0;width:20px;height:20px;border:2px solid var(--ds-vinho);background:#FFFEFB;box-shadow:0 0 0 4px #FFFEFB}
section#prova .rg-s::after{content:"";position:absolute;left:9px;top:26px;bottom:6px;width:2px;background:repeating-linear-gradient(to bottom,#7B2437 0 7px,transparent 7px 12px)}
section#prova .rg-s:nth-child(2)::after{background:repeating-linear-gradient(to bottom,#7B2437 0 2px,transparent 2px 6px)}
section#prova .rg-s:nth-child(3)::after{background:#0E0D0C}
section#prova .rg-s:nth-child(3)::before{background:#0E0D0C;border-color:#0E0D0C}
section#prova .rg-s:nth-child(4)::after{display:none}
section#prova .rg-s small{font-size:12.5px!important;letter-spacing:.14em;line-height:1.2;color:var(--ds-vinho);padding-top:3px}
section#prova .rg-s:nth-child(3) small{color:var(--ds-tinta)}
section#prova .rg-s p{margin:9px 0 0;font:500 clamp(1.4rem,1.5vw,1.62rem)/1.22 var(--ds-serif);color:var(--ds-tinta)}
/* o proximo passo ganha uma faixa de ouro */
section#prova .rg-s:nth-child(4){margin:6px -16px 0;padding:16px 18px 16px 64px;border-radius:14px;background:linear-gradient(90deg,rgba(201,165,94,.2),rgba(201,165,94,.05))}
section#prova .rg-s:nth-child(4)::before{left:16px;top:17px;background:var(--ds-ouro);border-color:var(--ds-ouro);box-shadow:0 0 0 4px #FFFEFB,0 0 0 8px rgba(201,165,94,.35)}
section#prova .rg-s:nth-child(4) small{color:#6E551B;padding-top:2px}

/* =====================================================================
   PROVA · 760 a 1099 px
   ===================================================================== */
@media (max-width:900px){
  section#prova .rg-wrap{grid-template-columns:1fr;gap:52px}
  section#prova .rg-lede{max-width:600px}
}

/* =====================================================================
   PROVA · celular (<= 759 px): texto curto, documento compacto, selo no topo
   ===================================================================== */
@media (max-width:759px){
  section#prova{padding-top:52px!important;padding-bottom:48px!important}
  section#prova .rg-wrap{gap:30px}
  section#prova .rg-eyebrow{margin-bottom:12px}
  section#prova h2.rg-h2{font-size:var(--ds-h2)!important}
  section#prova .rg-lede{font-size:.96rem;line-height:1.48;margin-top:14px}
  section#prova a.rg-cta{width:100%;justify-content:center;box-sizing:border-box;min-height:48px;height:48px;padding-top:0;padding-bottom:0;margin-top:18px}
  section#prova .rg-card{padding:36px 16px 20px}
  section#prova .rg-card::after{display:none}
  section#prova .rg-card::before{inset:6px -6px -9px 10px}
  section#prova .rg-top{padding-bottom:10px}
  section#prova .rg-top b{font-size:1.4rem!important}
  section#prova .rg-top span{top:-15px;left:12px;right:12px;text-align:center;transform:none;white-space:normal;padding:9px 8px;font-size:12px!important;letter-spacing:.04em}
  section#prova .rg-trail{margin-top:14px}
  section#prova .rg-s{padding:0 0 13px 34px}
  section#prova .rg-s::before{width:18px;height:18px}
  section#prova .rg-s::after{left:8px;top:24px;bottom:3px}
  section#prova .rg-s small{padding-top:2px}
  section#prova .rg-s p{margin-top:4px;font-size:1.1rem;line-height:1.18}
  section#prova .rg-s:nth-child(4){margin:0 -6px 0;padding:10px 10px 10px 46px}
  section#prova .rg-s:nth-child(4)::before{left:10px;top:11px}
}

@media (max-width:389px){
  section#prova .rg-top span{letter-spacing:.01em;padding:9px 6px}
  section#prova .rg-lede{font-size:.94rem;line-height:1.46}
  section#prova .rg-s p{font-size:1.06rem}
  section#prova .rg-card{padding-left:14px;padding-right:14px}
}

/* =====================================================================
   reduzir movimento: so ha transicoes de toque; desligar o deslocamento
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  section#cockpit .cb-open span,section#prova a.rg-cta span{transition:none}
  section#cockpit .cb-open:hover span,section#prova a.rg-cta:hover span{transform:none}
}

/* refino ad6466d7 07/10 (revisão crítica da home cffe492) */

/* ad6466d7 como-cockpit[2]: selo 1 sobe so ate a borda do quadro 1 e deixa a data do app legivel; selo 3 passa para baixo do quadro 3 (como os pinos .cb-p-b da Triagem). Computador, aba Inicio (alt "tela In\ED cio" = "tela Início"; ASCII para nao depender do charset). */
@media (min-width:760px){
  section#cockpit .cb-shot-d .cb-p-r b{bottom:calc(100% - 22px)}
  section#cockpit .cb-shot-d:has(img[alt*="tela In\ED cio"]) .cb-pin:nth-child(3) b{bottom:auto;top:calc(100% + 8px)}
}

/* ad6466d7 como-cockpit[5]: brilho do palco sem corte reto na borda direita/topo (mesma cor e intensidade; 2o gradiente com o centro puxado para dentro do retangulo do ::before) */
section#cockpit .cb-stage::before{background:radial-gradient(55% 50% at 50% 45%,rgba(166,58,80,.34),transparent 72%),radial-gradient(30% 26% at 76% 18%,rgba(201,165,94,.14),transparent 70%)}

/* ad6466d7 como-cockpit[7] (parte cockpit-prova.css): etiqueta "tela real" no celular, bolinha alinhada a 1a linha e quebra equilibrada (sem palavra orfa) */
@media (max-width:759px){
  section#cockpit .cb-chip{align-items:flex-start;text-wrap:balance}
  section#cockpit .cb-chip u{flex:none;margin-top:.38em}
}

/* ad6466d7 prova-rafaela[3]: frases do registro com quebra equilibrada no computador (sem fim de linha de 2 palavras) */
@media (min-width:760px){
  section#prova .rg-s p{text-wrap:balance}
}

/* ad6466d7 prova-rafaela[4]: no celular o selo vinho respira abaixo do botao (gap da grade 30 -> 46 px) e o rodape da secao cede 8 px para manter a altura */
@media (max-width:759px){
  section#prova .rg-wrap{gap:46px}
  section#prova{padding-bottom:40px!important}
}

/* ad6466d7 prova-rafaela[6]: haste preta da linha do tempo termina perto do no dourado, como as outras (bottom 6 -> -11 px; a faixa dourada e translucida) */
@media (min-width:760px){
  section#prova .rg-s:nth-child(3)::after{bottom:-11px}
}

/* polimento da demo 08/10 (revisoes independentes 0af20c7b C4 e e2141c9d D7): bolinha e rotulo do pino nao cobrem numero nem texto da tela.
   As classes vem do CBN em index.html: computador cb-p-q, cb-p-br e cb-p-k (so a partir de 760 px); celular cb-m-br (bolinha abaixo da caixa). */
@media (min-width:760px){
  /* Inicio, pino 2 (painel da Rafa): rotulo acima, encostado a direita; o titulo do painel fica livre a esquerda */
  section#cockpit .cb-shot-d .cb-p-q b{left:auto;right:-2px}
  /* Triagem, pino 3 (linha "por que esta aqui"): rotulo abaixo, a direita; acima ficam o nome do lead e o selo Urgente */
  section#cockpit .cb-shot-d .cb-p-br b{bottom:auto;top:calc(100% + 8px);left:auto;right:-2px}
  /* Conversas, pino 1 (lista): rotulo ao lado da lista, perto do pe; acima ficam os filtros */
  section#cockpit .cb-shot-d .cb-p-k b{left:calc(100% + 14px);bottom:36px;top:auto}
}
/* CTA da galeria com "somente leitura": quebra equilibrada em duas linhas, sem o ponto solto no fim da primeira */
section#cockpit .cb-open{text-wrap:balance}
/* celular: a bolinha numerada fica FORA da caixa, acima do canto direito (antes ficava por dentro e cobria numero ou palavra);
   onde acima da caixa ha texto, vai para baixo do canto direito (.cb-m-br) */
@media (max-width:759px){
  section#cockpit .cb-pin b{padding:0;left:auto;right:-4px;top:-30px;bottom:auto}
  section#cockpit .cb-pin.cb-m-br b{top:auto;bottom:-30px}
  /* onde sobra margem a direita da tela do aparelho, a bolinha vai para fora da caixa, ao lado (.cb-m-r) */
  section#cockpit .cb-pin.cb-m-r b{top:0;right:-26px;bottom:auto}
}