/* ==========================================================================
   MARCA CONSULTOR 360 — Camada de tokens (identidade "claro + azul ciano")
   art-direction · @dev-designer · 2026-08-12
   --------------------------------------------------------------------------
   Formaliza a direção JÁ APROVADA pelo Jean (claro + azul da marca, Poppins,
   layout centralizado, divisor ciano). Fonte visual: 4 rascunhos do scratchpad
   + paleta do PDF da formação Consultor 360.

   COMO USAR (frontend): este é o TOPO do arquivo de runtime
   `app/app/static/marca-360.css`. Abaixo dele vêm as regras de componente
   (que consomem SÓ estas variáveis — nunca hex cru). Ver design-spec § "Mapa /static".

   REGRAS DA CASA embutidas aqui:
   • OKLCH é a autoria (padrão Ever, gotcha D1). O hex ao lado é a ÂNCORA do PDF
     da marca — validar cada OKLCH no OKLCH Picker contra o hex antes do ship;
     onde divergir, o HEX manda (é a cor aprovada). Bloco @supports dá o hex
     exato pra webview antigo (Instagram in-app iOS < 15.4).
   • CSP `default-src 'self'` + `style-src 'self'`: fontes SÓ locais (@font-face
     com url /static). Nada de Google Fonts. Nada de <style>/style= inline.
   • prefers-reduced-motion respeitado no fim do arquivo (gotcha D6).
   ========================================================================== */

:root {
  color-scheme: light;

  /* ----------------------------------------------------------------------
     1) PRIMITIVOS  — OKLCH autoral · hex = âncora do PDF (validar no picker)
     ---------------------------------------------------------------------- */
  --c-white:       oklch(1 0 0);             /* #FFFFFF */
  --c-bg:          oklch(0.981 0.006 244);   /* #F4F8FC  fundo claro */
  --c-ink:         oklch(0.245 0.032 250);   /* #0B2033  tinta / texto forte */
  --c-muted:       oklch(0.525 0.032 250);   /* #5B7085  texto secundário */
  --c-line:        oklch(0.928 0.010 244);   /* #E1E9F1  linhas / bordas */
  --c-line-input:  oklch(0.905 0.010 258);   /* #DFE3EE  borda de input */

  --c-blue:        oklch(0.605 0.132 243);   /* #0E80C7  azul primário (FILLS/ícones/grande) */
  --c-blue-d:      oklch(0.525 0.118 245);   /* #0A6AA8  azul forte (texto pequeno + botão c/ texto branco) */
  --c-cyan:        oklch(0.782 0.118 218);   /* #22C3F0  ciano ACENTO (decoração — nunca atrás de texto) */
  --c-cyan-lt:     oklch(0.845 0.115 218);   /* #3DD6FF  ciano claro (topo de gradiente decorativo) */
  --c-royal:       oklch(0.497 0.137 262);   /* #1E5BB0  royal (profundidade / cobertura "geral") */

  --c-blue-soft:   oklch(0.952 0.021 233);   /* #E2F2FB  azul lavado (chips/badges/pills selecionadas) */
  --c-royal-soft:  oklch(0.940 0.018 262);   /* #E7EDFA  royal lavado (badge "todo o Brasil") */
  --c-chip-bg:     oklch(0.962 0.008 235);   /* #EEF4F9  fundo de tag/qualificação */

  /* ----------------------------------------------------------------------
     2) SEMÂNTICOS — papéis. O componente consome DAQUI, nunca do primitivo.
     ---------------------------------------------------------------------- */
  --surface-page:   var(--c-bg);
  --surface-card:   var(--c-white);
  --surface-sunken: var(--c-chip-bg);

  --text-strong:  var(--c-ink);
  --text-muted:   var(--c-muted);
  --text-on-fill: var(--c-white);         /* texto branco sobre fill escuro */
  --text-accent:  var(--c-blue-d);        /* ⚠️ texto colorido pequeno usa blue-d (5:1), NUNCA blue #0E80C7 (3.9:1 = reprova AA) */

  --border:        var(--c-line);
  --border-field:  var(--c-line-input);

  --brand:         var(--c-blue);         /* fills grandes, ícones, barras, hover */
  --brand-strong:  var(--c-blue-d);       /* fill de botão que carrega texto branco (5.8:1) */
  --brand-royal:   var(--c-royal);
  --accent:        var(--c-cyan);         /* SÓ decoração: divisor, brilho, borda, hover — nunca sob texto */

  --tint-brand:    var(--c-blue-soft);
  --tint-royal:    var(--c-royal-soft);

  /* Foco (WCAG 2.2 — 2.4.11/2.4.13). Anel visível de 3px, ≥3:1 contra o campo. */
  --focus-ring:    0 0 0 3px oklch(0.605 0.132 243 / 0.45);
  --focus-border:  var(--c-blue);

  /* Raios */
  --r-xs: 8px;  --r-sm: 11px; --r-md: 14px; --r-lg: 20px; --r-xl: 24px; --r-2xl: 32px;
  --r-pill: 999px;

  /* Sombras (tint azul, sutil — coerente com o rascunho) */
  --shadow-sm:  0 2px 6px  oklch(0.40 0.10 244 / 0.05);
  --shadow-md:  0 10px 30px oklch(0.40 0.10 244 / 0.07);   /* card padrão (--shadow do rascunho) */
  --shadow-lg:  0 22px 55px oklch(0.28 0.06 258 / 0.10);   /* formCard / cardPrev elevados */
  --shadow-hover: 0 24px 48px oklch(0.40 0.10 244 / 0.13); /* card hover na vitrine */

  /* Motion (curvas premium; duração curta — é UI, não spot) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.2s;

  /* ----------------------------------------------------------------------
     3) GRADIENTES DE MARCA (decorativos e "seguros" p/ texto)
     Regra: gradiente que carrega TEXTO branco não pode terminar no ciano
     (branco sobre #22C3F0 = ~1.8:1). Os *-safe mantêm ≥4.5:1 com branco.
     ---------------------------------------------------------------------- */
  --grad-mark:  linear-gradient(150deg, var(--c-cyan-lt), var(--c-blue));   /* brandMark C3 — texto "C3" é branco 800/grande → ok */
  --grad-cta:   linear-gradient(135deg, var(--c-royal), var(--c-blue-d)); /* faixa CTA: NÃO termina em ciano (A4) — ambas as pontas ≥5,3 com branco. Ciano volta como glow decorativo em .cta::after, longe do texto */
  --grad-photo: linear-gradient(150deg, var(--c-royal), var(--c-blue));     /* placeholder de foto: iniciais brancas grandes ≥4.3:1 (NÃO terminar em ciano) */
  --grad-act:   linear-gradient(135deg, var(--brand-strong), var(--brand-royal));    /* botão/seleção com texto branco — A1: ambas as pontas ≥4,5 (blue-d 5,32 · royal ~6,3). Antes começava em --c-blue (#0E80C7 = 3,86, reprova AA) */

  --divisor: var(--c-cyan);               /* traço curto acima dos títulos */
  --divisor-glow: 0 0 12px oklch(0.782 0.118 218 / 0.5);
}

/* Fallback exato do PDF pra webview sem OKLCH (Instagram in-app iOS antigo). */
@supports not (color: oklch(0 0 0)) {
  :root {
    --c-white:#FFFFFF; --c-bg:#F4F8FC; --c-ink:#0B2033; --c-muted:#5B7085;
    --c-line:#E1E9F1; --c-line-input:#DFE3EE;
    --c-blue:#0E80C7; --c-blue-d:#0A6AA8; --c-cyan:#22C3F0; --c-cyan-lt:#3DD6FF; --c-royal:#1E5BB0;
    --c-blue-soft:#E2F2FB; --c-royal-soft:#E7EDFA; --c-chip-bg:#EEF4F9;
    --focus-ring:0 0 0 3px rgba(14,128,199,.45);
    --shadow-sm:0 2px 6px rgba(14,64,120,.05); --shadow-md:0 10px 30px rgba(14,64,120,.07);
    --shadow-lg:0 22px 55px rgba(17,20,45,.10); --shadow-hover:0 24px 48px rgba(14,64,120,.13);
    --divisor-glow:0 0 12px rgba(34,195,240,.5);
  }
}

/* ==========================================================================
   TIPOGRAFIA — vendorizada local (CSP). Poppins DISPLAY (títulos/botões) +
   Inter TEXTO (corpo/UI, já vendorizada no projeto como variável 100–900).
   Decisão e trade-off no design-spec § "Tipografia".
   Arquivos esperados em /static/fontes/ :
     poppins-700.woff2  (Bold)   · poppins-800.woff2 (ExtraBold) · subset latin
     inter-latin.woff2  (já existe — variável)
   ========================================================================== */
@font-face {
  font-family: "Poppins";
  src: url("/static/fontes/poppins-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/static/fontes/poppins-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/* A vitrine /consultores NÃO carrega home.css (aquele desenha a home), então o
   corpo (Inter) precisa vir daqui — senão a página cairia em system-ui. É o mesmo
   arquivo variável já vendorizado (~48KB, 100–900), servido local pela CSP. */
@font-face { font-family:"Inter var"; src:url("/static/fontes/inter-latin.woff2") format("woff2");
             font-weight:100 900; font-style:normal; font-display:swap; }

:root {
  --font-display: "Poppins", "Inter var", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-text:    "Inter var", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Escala fluida (clamp) — extraída dos rascunhos, arredondada p/ sistema */
  --fs-hero:   clamp(36px, 5vw, 60px);   /* h1 hero        display 800 */
  --fs-h2:     clamp(28px, 3.8vw, 44px); /* seção/CTA      display 800 */
  --fs-h3:     20px;                      /* card/título     display 700 */
  --fs-lead:   17.5px;                    /* subtítulo       text 400 */
  --fs-body:   15px;                      /* corpo/input     text 400 */
  --fs-sm:     13.5px;                    /* bio, chips      text 400/600 */
  --fs-xs:     12px;                      /* eyebrow, labels text 700 */
  --fs-2xs:    11px;                      /* tags, fotoTag   text 600 */

  --lh-tight:  1.05;
  --lh-snug:   1.4;
  --lh-body:   1.6;
  --tracking-tight: -0.02em;
  --tracking-eyebrow: 0.16em;
}

/* ==========================================================================
   REDUCED MOTION (D6) — obrigatório. Mata transform/animação, mantém
   troca de cor (feedback essencial de estado).
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* elementos que sobem no hover não devem se mover */
  .cardC:hover, .btn:hover, .btnConf:hover, .sit:hover, .btnWhite:hover, .btnSalvar:hover,
  .passo:hover, .navCta:hover { transform: none !important; }
}

/* ==========================================================================
   BASE + COMPONENTES COMPARTILHADOS  (marca Consultor 360 — claro + azul)
   @dev-frontend · 2026-08-12 · consome SÓ os tokens acima (nenhum hex cru).
   Correções WCAG W1–W4 da design-spec §3.3 aplicadas aqui:
     W1 botão primário = --brand-strong (não --brand)
     W2 seleção/gradiente = --grad-act (nunca ciano atrás de texto)
     W3 texto colorido pequeno = --text-accent
     W4 placeholder de foto = --grad-photo (não termina em ciano)
   ========================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--surface-page);color:var(--text-strong);
  font-family:var(--font-text);
  font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{text-decoration:none;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);margin:0}

.container{max-width:1180px;margin:auto;padding-inline:max(6vw,24px)}

/* --- Divisor ciano (assinatura) — decorativo, sem texto --------------- */
.divisor{width:54px;height:3px;border-radius:3px;background:var(--divisor);
  box-shadow:var(--divisor-glow);margin:0 auto 20px}

/* --- Topbar / Brand --------------------------------------------------- */
.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;
  background:oklch(0.981 0.006 244 / 0.85);backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:20;border-bottom:1px solid var(--border);
  padding-inline:max(6vw,24px)}
.brand{display:flex;gap:11px;align-items:center;min-height:44px}
.brandMark{width:40px;height:40px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:15px;line-height:1;letter-spacing:0;
  white-space:nowrap;color:var(--text-on-fill);
  background:var(--grad-mark);box-shadow:0 6px 16px oklch(0.605 0.132 243 / 0.32)}
.brand>span:last-child{display:flex;flex-direction:column}
.brand strong{font-family:var(--font-display);font-size:15px;font-weight:700}
.brand small{font-size:10.5px;color:var(--text-muted);margin-top:1px;font-family:var(--font-text)}
.topbar nav{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:600;color:#3f556b}
.topbar nav a{min-height:44px;display:inline-flex;align-items:center}
.navCta{background:var(--brand-strong);color:var(--text-on-fill)!important;border-radius:var(--r-sm);
  padding:0 18px;font-family:var(--font-display);font-weight:800;
  box-shadow:0 8px 20px oklch(0.605 0.132 243 / 0.28);transition:background var(--dur-base) var(--ease-out)}
.navCta:hover{background:var(--brand-royal)}

/* --- Botões ----------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-display);font-weight:800;font-size:14.5px;border-radius:var(--r-md);
  padding:16px 26px;cursor:pointer;border:0;transition:transform var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out)}
.btn--primary{background:var(--brand-strong);color:var(--text-on-fill);box-shadow:var(--shadow-md)}   /* W1 */
.btn--primary:hover{background:var(--brand-royal);transform:translateY(-2px)}
.btn--grad{background:var(--grad-act);color:var(--text-on-fill);box-shadow:var(--shadow-md)}          /* W2 */
.btn--grad:hover{filter:brightness(1.05);transform:translateY(-2px)}
.btn--white{background:var(--surface-card);color:var(--brand-strong);box-shadow:0 10px 30px oklch(0.28 0.06 258 / 0.16)}
.btn--white:hover{transform:translateY(-2px)}
.btn--ghost{background:var(--tint-brand);color:var(--text-accent);box-shadow:none}
.btn--ghost:hover{filter:brightness(0.97)}
.btn--block{width:100%}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
label:focus-within,summary:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* --- Eyebrow / kick --------------------------------------------------- */
.eyebrow,.kick{font-family:var(--font-display);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-accent)}  /* W3 */

/* --- Cabeçalho de seção ---------------------------------------------- */
.secHead{text-align:center;max-width:640px;margin:0 auto 44px}
.secHead h2{font-size:var(--fs-h2);font-weight:800;letter-spacing:var(--tracking-tight);margin:12px 0}
.secHead p{color:var(--text-muted);font-size:16px;margin:0}

/* --- Card de consultor (compartilhado vitrine + prévia) --------------- */
.foto{position:relative;display:grid;place-items:center;color:var(--text-on-fill);
  background:var(--grad-photo)}                                                         /* W4 */
.foto .ini{font-family:var(--font-display);font-size:52px;font-weight:800;letter-spacing:-1px;
  text-shadow:0 4px 18px oklch(0 0 0 / 0.2);z-index:1}
.foto::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 72% 22%,oklch(1 0 0 / 0.24),transparent 55%)}
.fotoTag{position:absolute;bottom:10px;right:10px;z-index:2;font-family:var(--font-text);
  font-size:10px;font-weight:600;color:var(--text-on-fill);background:oklch(0.20 0.05 250 / 0.35);
  backdrop-filter:blur(4px);padding:4px 9px;border-radius:var(--r-pill)}
.selo{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-display);
  font-size:11.5px;font-weight:700;color:var(--text-accent)}                            /* W3 */
.cob{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:4px 11px;border-radius:var(--r-pill);background:var(--tint-brand);color:var(--text-accent);
  align-self:flex-start}
.cob.geral{background:var(--tint-royal);color:var(--brand-royal)}
.tag{font-size:11px;font-weight:600;color:#3f556b;background:var(--surface-sunken);
  border-radius:var(--r-xs);padding:5px 9px}

/* --- Formulário (compartilhado) -------------------------------------- */
.campo{display:block;margin:15px 0}
.campo>span{display:block;font-size:12.5px;font-weight:700;margin-bottom:7px;color:#3c4453}
.campo input,.campo select,.campo textarea{width:100%;border:1px solid var(--border-field);
  border-radius:var(--r-md);background:var(--surface-card);padding:14px 15px;
  font:var(--fs-body)/1.4 var(--font-text);color:var(--text-strong);outline:none;
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast);resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--focus-border);box-shadow:var(--focus-ring)}
.formRow{display:grid;grid-template-columns:1.4fr .6fr;gap:14px}

/* --- Footer ----------------------------------------------------------- */
footer{border-top:1px solid var(--border)}
.footIn{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:36px 0}
.footIn p{font-size:14px;color:var(--text-muted);margin:0}
/* Alvo de toque do link de rodapé (WCAG 2.5.8) — mesmo padrão da home. */
.footIn a.pp{font-size:12.5px;color:var(--text-accent);font-weight:700;display:inline-flex;align-items:center;min-height:44px;padding:12px 0}

@media(max-width:760px){
  .topbar nav a:not(.navCta){display:none}
  .footIn{flex-direction:column;align-items:flex-start;gap:16px}
}