/* =========================================================
   CMJ · Design System 2026
   Conforme Diretrizes Oficiais CMJ 2026 (revisão julho/2026)
   PROIBIDO: navy, dourado, cantos retos, gradiente sobre texto
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

:root{
  /* Paleta CMJ (marca principal) */
  --laranja:#f07e26;
  --rosa:#e6007e;
  --roxo:#7a59fe;

  /* Paleta CDF (submarca, só no Conselho do Futuro) */
  --ciano:#09e1cd;

  /* Neutros */
  --claro:#f6f2ee;
  --escuro:#0d0d12;
  --texto:#0d0d12;
  --texto2:#3d4250;
  --branco:#ffffff;
  --linha:rgba(13,13,18,.10);

  /* Gradiente da marca: laranja -> rosa -> roxo. Nunca sobre texto. */
  --grad:linear-gradient(100deg,var(--laranja),var(--rosa) 52%,var(--roxo));
  --grad-cdf:linear-gradient(100deg,var(--ciano),var(--roxo));

  --raio:34px;
  --raio-g:44px;
  --pill:999px;
  --sombra:0 18px 48px -28px rgba(13,13,18,.38);
  --max:1240px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  overflow-x:clip;   /* clip não cria contexto de rolagem e não quebra position:sticky */
}
body{
  background:var(--claro);
  color:var(--texto);
  font-family:'Montserrat',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.5;
  -webkit-text-size-adjust:100%;   /* impede o iOS de reescalar o texto na horizontal */
  text-size-adjust:100%;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit}
img{max-width:100%;display:block}
::selection{background:var(--rosa);color:#fff}

/* ---------- Grão sutil (evita o aspecto chapado) ---------- */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Tipografia ---------- */
h1,h2,h3{letter-spacing:-.035em;line-height:.98;font-weight:900}
h1{font-size:clamp(38px,5.4vw,74px)}
h2{font-size:clamp(30px,3.7vw,50px)}
h3{font-size:clamp(19px,1.5vw,24px);letter-spacing:-.02em;line-height:1.15;font-weight:800}
p{color:var(--texto2);font-size:17px;line-height:1.62}
.lead{font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:var(--texto2)}

.rotulo{
  font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rosa);display:inline-block;
}
.rotulo.roxo{color:var(--roxo)}
.rotulo.ciano{color:#07a596}   /* ciano escurecido: contraste em fundo claro */
.rotulo.clara{color:rgba(255,255,255,.62)}

/* Barra separadora curta sob o título */
.barra{width:66px;height:5px;border-radius:var(--pill);background:var(--grad);margin:22px 0 0}
.barra.cdf{background:var(--grad-cdf)}

/* Destaque em palavra: SEMPRE cor sólida, nunca gradiente (diretriz 1.6) */
.dst{color:var(--rosa)}
.dst-roxo{color:var(--roxo)}
.dst-laranja{color:var(--laranja)}      /* usar apenas em fundo escuro */
.dst-ciano{color:var(--ciano)}          /* usar apenas em fundo escuro */

/* ---------- Layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 40px}
/* overflow:clip contém os blobs dentro da própria seção, sem criar rolagem */
section{position:relative;overflow:hidden;overflow:clip}
.sec{padding:96px 0}
.sec-sm{padding:66px 0}
.grid{display:grid;gap:22px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.centro{text-align:center;max-width:760px;margin:0 auto}

/* ---------- Fundo escuro (ritmo alternado) ---------- */
.escuro{background:var(--escuro);color:#fff}
.escuro p{color:rgba(255,255,255,.70)}
.escuro h1,.escuro h2,.escuro h3{color:#fff}
.escuro .barra{background:var(--grad)}
.escuro .cartao{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.11)}
.escuro .cartao p{color:rgba(255,255,255,.66)}

/* ---------- Blobs orgânicos ---------- */
.blob{position:absolute;pointer-events:none;z-index:0;filter:blur(46px);opacity:.5}
.blob.a{width:640px;height:600px;border-radius:46% 54% 58% 42%/52% 44% 56% 48%;
  background:radial-gradient(circle,rgba(240,126,38,.42),transparent 68%)}
.blob.b{width:580px;height:620px;border-radius:58% 42% 44% 56%/48% 56% 44% 52%;
  background:radial-gradient(circle,rgba(230,0,126,.34),transparent 68%)}
.blob.c{width:560px;height:540px;border-radius:52% 48% 56% 44%/44% 52% 48% 56%;
  background:radial-gradient(circle,rgba(122,89,254,.34),transparent 68%)}
.blob.d{width:560px;height:540px;border-radius:48% 52% 42% 58%/56% 46% 54% 44%;
  background:radial-gradient(circle,rgba(9,225,205,.34),transparent 68%)}
.sobre{position:relative;z-index:1}

/* ---------- Cartões: zero cantos retos ---------- */
.cartao{
  background:rgba(255,255,255,.78);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:34px 32px;
  box-shadow:var(--sombra);
  backdrop-filter:blur(8px);
}
.cartao.suave{box-shadow:0 10px 30px rgba(13,13,18,.03)}
.cartao h3{margin-bottom:10px}
.cartao p{font-size:15px;line-height:1.6}

.pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 20px;border-radius:var(--pill);
  border:1px solid var(--linha);background:rgba(255,255,255,.72);
  font-size:14px;font-weight:600;color:var(--texto);
}
.escuro .pill{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#fff}

.ponto{width:9px;height:9px;border-radius:50%;background:var(--grad);flex:none}
.ponto.cdf{background:var(--grad-cdf)}

/* Ícone circular com fundo pastel */
.ico{
  width:46px;height:46px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;
}
.ico.r{background:rgba(230,0,126,.12);color:var(--rosa)}
.ico.x{background:rgba(122,89,254,.12);color:var(--roxo)}
.ico.l{background:rgba(240,126,38,.16);color:#b95a10}
.ico.c{background:rgba(9,225,205,.16);color:#07a596}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:17px 32px;border-radius:var(--pill);border:none;cursor:pointer;
  font-size:15.5px;font-weight:700;line-height:1;
  background:var(--grad);color:#fff;
  box-shadow:0 16px 38px -16px rgba(230,0,126,.62);
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 22px 46px -16px rgba(230,0,126,.7)}
.btn.cdf{background:var(--grad-cdf);color:#06121a;box-shadow:0 16px 38px -16px rgba(122,89,254,.6)}
.btn.linha{background:none;color:var(--texto);border:1px solid rgba(13,13,18,.18);box-shadow:none}
.btn.linha:hover{background:rgba(13,13,18,.05)}
.escuro .btn.linha{color:#fff;border-color:rgba(255,255,255,.26)}
.escuro .btn.linha:hover{background:rgba(255,255,255,.08)}
.btn.claro{background:#fff;color:var(--escuro);box-shadow:0 16px 38px -18px rgba(0,0,0,.5)}

/* ---------- Números / métricas ---------- */
.num{font-size:clamp(44px,4.6vw,68px);font-weight:800;line-height:.94;letter-spacing:-.04em}
.num.r{color:var(--rosa)} .num.x{color:var(--roxo)} .num.l{color:var(--laranja)} .num.c{color:var(--ciano)}
.num-rot{margin-top:10px;font-size:13.5px;line-height:1.45;color:var(--texto2);font-weight:600}
.escuro .num-rot{color:rgba(255,255,255,.62)}
.fonte{font-size:12px;color:rgba(61,66,80,.72);line-height:1.5;margin-top:18px}
.escuro .fonte{color:rgba(255,255,255,.45)}

/* ---------- Cabeçalho ---------- */
header.topo{
  position:sticky;top:0;z-index:90;
  background:rgba(246,242,238,.88);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--linha);
}
.faixa{border-bottom:1px solid var(--linha)}
.faixa .wrap{display:flex;justify-content:space-between;align-items:center;
  padding:8px 40px;font-size:11px;letter-spacing:.16em;font-weight:600;color:#6a707d;text-transform:uppercase}
.faixa a{color:#6a707d;transition:color .2s}
.faixa a:hover{color:var(--rosa)}
.social{display:flex;gap:16px;align-items:center}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:15px 40px}
.nav nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav nav a{
  display:flex;align-items:center;gap:8px;
  padding:10px 15px;border-radius:var(--pill);
  font-size:13.5px;font-weight:600;color:#41464f;transition:background .18s,color .18s;
}
.nav nav a:hover{background:rgba(13,13,18,.05)}
.nav nav a.on{color:var(--rosa);background:rgba(230,0,126,.08)}
.nav nav a.on.cdf{color:var(--roxo);background:rgba(122,89,254,.08)}
.dotn{width:7px;height:7px;border-radius:50%;flex:none}

/* ---------- Rodapé ---------- */
footer.rodape{border-top:1px solid var(--linha);padding:70px 0 34px;position:relative;z-index:1}
footer.rodape .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:34px}
footer.rodape h4{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#8b909b;margin-bottom:16px;font-weight:700}
footer.rodape .lista{display:grid;gap:11px;font-size:14px;color:var(--texto2)}
footer.rodape .lista a:hover{color:var(--rosa)}
.fim{margin-top:44px;padding-top:24px;border-top:1px solid var(--linha);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:#8b909b}
.fim a:hover{color:var(--rosa)}

/* ---------- Retrato em máscara orgânica (nunca retângulo) ---------- */
.retrato{
  border-radius:46% 54% 58% 42%/52% 44% 56% 48%;
  overflow:hidden;position:relative;aspect-ratio:1/1;
  border:1px solid var(--linha);box-shadow:var(--sombra);
}
.retrato img{width:100%;height:100%;object-fit:cover}
.foto{border-radius:var(--raio-g);overflow:hidden;border:1px solid var(--linha);box-shadow:var(--sombra)}
.foto img{width:100%;height:100%;object-fit:cover}

/* ---------- Citação ---------- */
.cit{border-radius:var(--raio);border:1px solid var(--linha);background:rgba(255,255,255,.78);padding:32px 30px;box-shadow:0 10px 30px rgba(13,13,18,.03)}
.cit .txt{font-size:16.5px;line-height:1.58;color:var(--texto);font-weight:500}
.cit .quem{margin-top:20px;font-size:14px;font-weight:800}
.cit .quem span{display:block;font-weight:500;font-size:12.8px;color:var(--texto2);margin-top:3px}
.cit .aspas{font-size:38px;line-height:.6;color:var(--rosa);font-weight:900}
.escuro .cit{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.11)}
.escuro .cit .txt{color:rgba(255,255,255,.9)}
.escuro .cit .quem{color:#fff}
.escuro .cit .quem span{color:rgba(255,255,255,.55)}

/* ---------- Faixa de CTA ---------- */
.cta-caixa{
  border-radius:var(--raio-g);padding:64px 56px;position:relative;overflow:hidden;
  background:var(--escuro);color:#fff;
}
.cta-caixa.cdf-bg{background:#0a0f1e}

/* ---------- Diagnóstico ---------- */
.diag{max-width:820px;margin:0 auto}
.opcao{
  width:100%;text-align:left;display:flex;align-items:center;gap:16px;
  padding:17px 22px;border-radius:var(--pill);
  border:1px solid var(--linha);background:rgba(255,255,255,.8);
  font-size:15.5px;font-weight:600;color:var(--texto);cursor:pointer;
  transition:all .16s ease;
}
.opcao:hover{border-color:var(--rosa);background:rgba(230,0,126,.06);transform:translateX(4px)}
.opcao .n{width:32px;height:32px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:14px;background:rgba(230,0,126,.1);color:var(--rosa)}
.opcao.cdf:hover{border-color:var(--roxo);background:rgba(122,89,254,.07)}
.opcao.cdf .n{background:rgba(122,89,254,.1);color:var(--roxo)}
.prog{height:6px;border-radius:var(--pill);background:rgba(13,13,18,.08);overflow:hidden}
.prog i{display:block;height:100%;border-radius:var(--pill);background:var(--grad);transition:width .45s cubic-bezier(.4,0,.2,1)}
.prog.cdf i{background:var(--grad-cdf)}
.campo{display:grid;gap:7px}
.campo label{font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--texto2)}
.campo input,.campo select{
  padding:15px 18px;border-radius:18px;border:1px solid var(--linha);
  background:#fff;color:var(--texto);font-size:15px;outline:none;transition:border-color .18s;
}
.campo input:focus,.campo select:focus{border-color:var(--rosa)}

/* ---------- Utilidades ---------- */
.mt10{margin-top:10px}.mt16{margin-top:16px}.mt22{margin-top:22px}
.mt30{margin-top:30px}.mt44{margin-top:44px}.mt64{margin-top:64px}
.flex{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.sep{height:1px;background:var(--linha);border:0}

/* =========================================================
   RESPONSIVO
   Três faixas: tablet largo (1180px), tablet (960px), celular (620px).
   O !important nos grids é necessário para vencer os
   grid-template-columns declarados inline no HTML.
   ========================================================= */

/* ---------- Tablet largo ---------- */
@media (max-width:1180px){
  .grid[style*="repeat(5"]{grid-template-columns:repeat(3,1fr) !important}
  .grid[style*="repeat(6"]{grid-template-columns:repeat(3,1fr) !important}
  .g4{grid-template-columns:repeat(2,1fr)}
  h1{font-size:clamp(36px,6vw,58px)}
}

/* ---------- Tablet e celular ---------- */
@media (max-width:960px){
  .wrap{padding:0 22px}
  .faixa{display:none}

  /* Cabeçalho em duas linhas: logo + CTA em cima, menu rolável embaixo.
     Sem flex-wrap os três filhos disputam a mesma linha e o menu colapsa. */
  .nav{
    padding:12px 18px 10px;gap:10px;
    flex-wrap:wrap;align-items:center;justify-content:space-between;
  }
  .nav > a:first-child{order:1;flex:0 0 auto}
  .nav > .btn{
    order:2;flex:0 0 auto;width:auto !important;
    padding:11px 18px !important;font-size:13px !important;min-height:42px;
  }
  .nav nav.movel{order:3;flex-wrap:nowrap !important}   /* rola na horizontal, não empilha */

  /* Vence qualquer coluna declarada inline */
  .grid{grid-template-columns:1fr !important}
  .g4.metade{grid-template-columns:1fr 1fr !important}
  .grid[style*="repeat(5"],
  .grid[style*="repeat(6"]{grid-template-columns:1fr 1fr !important}

  .sec{padding:58px 0}
  .sec-sm{padding:44px 0}
  .cta-caixa{padding:40px 24px;border-radius:32px}
  .cartao{padding:26px 24px}
  .cartao[style*="padding:5"],
  .cartao[style*="padding:4"]{padding:30px 24px !important}

  footer.rodape .cols{grid-template-columns:1fr 1fr}

  /* Menu vira faixa rolável */
  .nav nav{display:none}
  .nav nav.movel{
    display:flex;order:3;width:100%;overflow-x:auto;gap:4px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;
  }
  .nav nav.movel::-webkit-scrollbar{display:none}
  .nav nav.movel a{white-space:nowrap;font-size:13px;padding:9px 13px}
  .nav > a:first-child img{height:38px !important}

  /* Blobs menores, senão dominam a tela */
  .blob{transform:scale(.6);opacity:.42}

  /* Retratos e fotos não ficam altos demais */
  .foto[style*="aspect-ratio:4/5"]{aspect-ratio:4/3 !important}
  .retrato{max-width:280px;margin:0 auto}
}

/* ---------- Celular ---------- */
@media (max-width:620px){
  .wrap{padding:0 18px}
  .sec{padding:46px 0}
  .sec-sm{padding:34px 0}
  .g4.metade,
  .grid[style*="repeat(5"],
  .grid[style*="repeat(6"]{grid-template-columns:1fr !important}
  footer.rodape .cols{grid-template-columns:1fr;gap:26px}

  /* As quebras de linha foram desenhadas para desktop.
     No celular elas cortam a frase em lugares errados. */
  h1 br,h2 br{display:none}
  h1{font-size:clamp(30px,8.4vw,40px);letter-spacing:-.03em;line-height:1.04}
  h2{font-size:clamp(24px,6.6vw,32px);line-height:1.08}
  h3{font-size:18px}
  p,.lead{font-size:16px}
  .num{font-size:clamp(38px,11vw,50px)}
  .cit .txt{font-size:15.5px}

  .cartao{padding:22px 20px;border-radius:26px}
  .cta-caixa{padding:32px 20px;border-radius:26px}
  .btn{width:100%;justify-content:center;padding:16px 22px}
  .flex .btn{width:auto;flex:1 1 auto;min-width:190px}
  .nav .btn{width:auto !important;flex:0 0 auto !important;padding:10px 16px !important;font-size:12.5px !important}

  /* Pares ícone + texto: encolhe o ícone em vez de quebrar a linha */
  .ico{width:38px;height:38px;font-size:13px}
  .flex[style*="nowrap"]{gap:13px !important}
  .flex[style*="nowrap"] p{font-size:15.5px !important}

  /* Botão flutuante compacto, para não cobrir conteúdo nem CTA */
  a.btn[style*="position:fixed"]{
    right:14px !important;bottom:14px !important;
    width:56px;height:56px;padding:0 !important;border-radius:50% !important;
    font-size:0 !important;gap:0 !important;
  }
  a.btn[style*="position:fixed"] svg{width:24px;height:24px}

  /* Diagnóstico */
  .opcao{padding:15px 17px;font-size:15px;gap:13px}
  .diag h2{min-height:0 !important}
  .prog{height:7px}
}

/* ---------- Toque e formulários ----------
   Aplicado por LARGURA, não só por (hover:none), porque hover:none
   não é confiável em todos os dispositivos e emuladores. */
@media (max-width:960px){
  /* 16px evita o zoom automático do iOS ao focar um campo */
  .campo input,.campo select{font-size:16px;padding:16px 18px}
  .btn,.opcao{min-height:48px}
  .nav nav a{min-height:44px}
  /* Links de lista viram alvos de toque de 44px */
  footer.rodape .lista a,
  .fim a,
  .faixa a{display:inline-flex;align-items:center;min-height:44px}
  /* Rótulos pequenos ficam legíveis */
  .rotulo{font-size:12.5px;letter-spacing:.16em}
  .fonte{font-size:13px}
}
@media (hover:none){
  .btn:hover,.opcao:hover,.cartao:hover,.nav nav a:hover{transform:none}
}

/* ---------- Tabelas (página de privacidade) ---------- */
@media (max-width:820px){
  .doc table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .doc td,.doc th{white-space:normal;min-width:190px}
}

/* ---------- Preferência de movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}