/* ==========================================================================
   Bora! IA · /diagnostico · estilos só desta página · v4 · 23/10/2026
   O que se repete entre páginas (tokens, seção, tipografia, botões, vidro, formulário,
   rota, FAQ, rodapé, movimento) mora em bora.css. Aqui ficam só os layouts desta página.
   Regra de cache: a página importa com ?v=N. Mudou este arquivo, sobe o N.
   v4 (revisão do Bruno, 23/10: "não tá com cara de coisa gratuita, está com cara de site institucional"):
   - hero vira oferta: selo redondo "Gratuito" em verde colado ao título, foto dos três sócios em cartão
     (destaque-socios-v2.webp, retocada: sem o letreiro do evento acima das cabeças), fundo com o Bruno no palco
     (evento-palco.webp) sob o véu próprio .veu--diag; formulário segue no hero;
   - saem logos, método com bios, trajetória/KPIs, provas de campo e depoimentos (CSS removido);
   - rota com três passos (.rota--3), rodapé mínimo (.rodape--min).
   ========================================================================== */

/* ------------------------------------------------------------------ Hero: oferta + quem conduz + formulário */
.hero{padding-top:calc(clamp(28px,4vw,56px) + var(--nav-h));padding-bottom:clamp(56px,8vw,110px)}
.hero .tt--capa{font-size:clamp(36px,4.4vw,58px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);grid-template-areas:"texto form" "foto form";column-gap:clamp(32px,5vw,72px);row-gap:clamp(28px,3.2vw,44px);align-items:start}
.hero__texto{grid-area:texto;display:flex;flex-direction:column;align-items:flex-start}
.hero__quem{grid-area:foto}
.aplicar{grid-area:form;align-self:start}

/* véu desta página: o palco some atrás do texto (esquerda) e fica como atmosfera atrás do formulário; no pé funde com a seção seguinte */
.veu--diag{background:linear-gradient(90deg,#0B0D10 0%,rgba(11,13,16,.95) 36%,rgba(11,13,16,.6) 100%),linear-gradient(180deg,rgba(11,13,16,.3) 0%,rgba(11,13,16,0) 26%,rgba(11,13,16,0) 70%,rgba(11,13,16,.92) 100%)}

/* faixa para quem chega pelos links antigos do "mapa do seu time de IA" (ver diagnostico.js) */
.aviso-mapa{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;width:100%;max-width:640px;margin-bottom:28px;padding:16px 18px;border-radius:16px;border:1px solid rgba(220,198,162,.42);background:rgba(220,198,162,.08);box-shadow:0 0 40px -16px rgba(220,198,162,.45)}
.aviso-mapa[hidden]{display:none}
.aviso-mapa p{flex:1 1 320px;margin:0;font:400 15px/1.5 var(--texto);color:var(--apoio-esc)}
.aviso-mapa p b{color:var(--off);font-weight:600}
.aviso-mapa .btn{flex:none}

/* selo "Gratuito": adesivo redondo verde, levemente torto, colado ao título. Único verde fora dos botões, de propósito: o olho liga os dois */
.hero__selo{display:flex;align-items:center;gap:22px;margin-bottom:20px}
.hero__eb .rot{margin-top:7px;letter-spacing:.14em}
.gratis{position:relative;flex:none;width:108px;height:108px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--grad-verde);color:var(--verde-texto);font:600 14px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;text-align:center;box-shadow:0 24px 48px -18px rgba(47,210,122,.95),inset 0 1px 0 rgba(255,255,255,.38),inset 0 -10px 24px -14px rgba(4,20,10,.55);transform:rotate(-7deg)}
.gratis::before{content:"";position:absolute;inset:6px;border-radius:50%;border:1px dashed rgba(4,20,10,.4);pointer-events:none}
.gratis::after{content:"";position:absolute;inset:-11px;border-radius:50%;border:1px solid rgba(47,210,122,.6);opacity:0;pointer-events:none}
.gratis__txt{position:relative;padding:0 10px}
.cur .gratis{animation:selo-entra .9s var(--mola) .25s both}
.cur .gratis::after{animation:of-halo 3s ease-out 1.3s infinite}
@keyframes selo-entra{from{opacity:0;transform:rotate(-24deg) scale(.55)}to{opacity:1;transform:rotate(-7deg) scale(1)}}

.hero__sub{max-width:560px;margin-top:22px}
.hero__cta{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:28px}
.hero__nota{max-width:520px}

/* cartão da foto dos sócios: moldura escura, nome embaixo (regra de foto de pessoa do guia) */
.hero__quem{border-radius:var(--r-vidro);overflow:hidden;background:#0F1215;border:1px solid rgba(220,198,162,.22);box-shadow:var(--sombra-print)}
.hero__quem-foto{position:relative;aspect-ratio:4/3;overflow:hidden;background:#12161B}
.hero__quem-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 23%}
/* véu de baixo: a foto funde com a legenda */
.hero__quem-foto::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(15,18,21,.8),rgba(15,18,21,0) 34%)}
.hero__quem figcaption{display:grid;gap:8px;padding:14px 22px 20px}
.hero__quem figcaption p{font:400 15px/1.5 var(--texto);color:var(--apoio-esc);text-wrap:pretty}
.hero__quem figcaption p b{color:var(--off);font-weight:600}

/* formulário */
.aplicar{padding:clamp(24px,3vw,40px);scroll-margin-top:calc(var(--nav-h) + 16px)}
.aplicar__cab{margin-bottom:22px}
.aplicar__cab .tt2{font-size:clamp(22px,2.3vw,30px);margin-top:8px}
.aplicar__cab .peq{margin-top:10px}
.aplicar .form{gap:14px}
.aplicar__pre{padding:12px 14px;border-radius:12px;border:1px solid rgba(220,198,162,.4);background:rgba(220,198,162,.07);font:400 14px/1.5 var(--texto);color:var(--apoio-esc)}
.aplicar__pre::before{content:"✻ ";color:var(--ouro)}
.aplicar__pre[hidden]{display:none}
/* reforço de "gratuita" junto do botão de envio (verde, como o botão) */
.aplicar__gratis{display:flex;align-items:center;gap:10px;margin-top:2px;font:500 14px/1.4 var(--texto);color:var(--verde-claro)}
.aplicar__gratis .ico{width:20px;height:20px;stroke:var(--verde);stroke-width:2}
/* a linha dos dois selects: as faixas de faturamento são longas, então ela fica em uma coluna até o cartão ter largura de sobra */
@media (min-width:561px) and (max-width:1380px){.aplicar .form__linha--sel{grid-template-columns:1fr}}
/* entre 901 e 1180 px o cartão fica estreito (coluna de .96fr): todos os pares em uma coluna para os placeholders não cortarem */
@media (min-width:901px) and (max-width:1180px){.hero__grid .form__linha--2{grid-template-columns:1fr}}

@media (max-width:900px){
  .hero{padding-top:calc(24px + var(--nav-h))}
  .hero__grid{grid-template-columns:1fr;grid-template-areas:"texto" "foto" "form";row-gap:28px}
  .veu--diag{background:linear-gradient(180deg,rgba(11,13,16,.74) 0%,rgba(11,13,16,.92) 42%,#0B0D10 100%)}
  .hero__selo{gap:16px}
  .gratis{width:92px;height:92px;font-size:13px}
  .gratis::after{inset:-9px}
}
@media (max-width:520px){
  .hero__cta .btn{width:100%}
  .hero__quem figcaption{padding:12px 18px 18px}
}

/* ------------------------------------------------------------------ O que você leva: entregas + plano ilustrativo */
.reuniao{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,80px);align-items:center}
.entregas{display:grid;gap:4px}
.entregas li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;padding:20px 0;border-bottom:1px solid rgba(220,198,162,.12)}
.entregas li:last-child{border-bottom:0}
.entregas .idx{padding-top:6px;min-width:2.4em}
.entregas .h3{font-size:clamp(19px,1.7vw,24px)}
.entregas .peq{margin-top:8px;color:var(--apoio-esc)}
@media (max-width:900px){.reuniao{grid-template-columns:1fr}}

.plano-ia{width:100%;max-width:520px;margin:0 auto;padding:clamp(22px,2.6vw,32px);display:grid;gap:4px}
.plano-ia__topo{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid rgba(220,198,162,.18)}
.plano-ia__bloco{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:16px 0;border-bottom:1px solid rgba(247,247,245,.07)}
.plano-ia__bloco:last-child{border-bottom:0;padding-bottom:4px}
.plano-ia__bloco .idx{font-size:clamp(18px,1.6vw,24px);padding-top:4px;min-width:2em}
.plano-ia__rot{display:block;font:600 11px/1.2 var(--texto);letter-spacing:.18em;text-transform:uppercase;color:var(--mut-esc);margin-bottom:8px}
.plano-ia__val{display:block;font:400 clamp(22px,2.2vw,30px)/1.1 var(--display);color:var(--ouro-claro);text-shadow:var(--glow-texto)}
.plano-ia__sub{display:block;margin-top:6px;font:400 14px/1.4 var(--texto);color:var(--apoio-esc)}
.plano-ia__chips{display:flex;flex-wrap:wrap;gap:8px}
.plano-ia__chips span{font:500 13px/1.2 var(--texto);color:var(--off);padding:9px 14px;border-radius:999px;border:1px solid rgba(247,247,245,.14);background:rgba(247,247,245,.04)}
.plano-ia__tempo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.plano-ia__seg{display:grid;gap:8px}
.plano-ia__seg i{position:relative;display:block;height:6px;border-radius:3px;background:rgba(247,247,245,.08);overflow:hidden}
.plano-ia__seg i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#B8976F,#E6D0AC);box-shadow:0 0 18px rgba(224,199,164,.6);transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ease-fio)}
.run .plano-ia__seg:nth-child(1) i::after{transform:scaleX(1);transition-delay:.3s}
.run .plano-ia__seg:nth-child(2) i::after{transform:scaleX(1);transition-delay:1.1s}
.run .plano-ia__seg:nth-child(3) i::after{transform:scaleX(1);transition-delay:1.9s}
.plano-ia__seg em{font:500 12px/1.3 var(--texto);font-style:normal;color:var(--mut-esc);white-space:nowrap}
html:not(.js) .plano-ia__seg i::after{transform:none}
@media (prefers-reduced-motion:reduce){.plano-ia__seg i::after{transform:none}}

/* ------------------------------------------------------------------ Como funciona: rota com três passos */
@media (min-width:761px){.rota--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ------------------------------------------------------------------ Para quem é */
.perfil{display:flex;flex-direction:column;gap:14px;padding:clamp(24px,2.8vw,36px)}
.perfil .h3{font-size:clamp(19px,1.7vw,24px)}
.lista--nao li::before{content:"○";color:var(--mut-esc);text-shadow:none;font-size:.85em;top:12px}
.para-quem__nota{margin-top:clamp(28px,3.5vw,44px);max-width:800px}
.para-quem__nota a{color:var(--verde-claro);text-decoration-color:rgba(140,242,186,.5);text-underline-offset:3px}

/* .in--media perde para .sl>.in por especificidade no bora.css; aqui garante a largura de leitura do FAQ */
.sl>.in.in--media{max-width:1080px}

/* ------------------------------------------------------------------ Fecho */
.fecho{text-align:center}
.fecho .in{padding:clamp(20px,3vw,40px) 0}

/* ------------------------------------------------------------------ Rodapé mínimo: logo pequeno, termos e privacidade */
.rodape--min{padding:clamp(28px,4vw,44px) var(--gutter) 32px}
.rodape--min .rodape__in{flex-direction:column;justify-content:center;gap:14px;text-align:center}
.rodape--min .rodape__logo{height:18px}
@media (max-width:600px){.rodape--min{padding-bottom:100px}}