/* =====================================================================
   PROGRAMA DE PARCEIROS CCM PEDIDOS — Landing Page
   Baseado no Manual de Identidade Visual CCM Pedidos v1.0 (ago/2026)
   Paleta: Vermelho #F40209 | Amarelo #FFB31B | Preto #000000 | Branco #FFFFFF
   Proporção alvo: 55% base neutra · 25% respiro · 15% vermelho · até 5% amarelo
   ===================================================================== */

/* ------------------------------- TOKENS ------------------------------ */
:root {
  /* Marca */
  --ccm-vermelho: #F40209;        /* Vermelho CCM oficial: grafismos, ícones, bordas, fills */
  --ccm-vermelho-claro: #FF3B41;  /* Destaque sobre fundo preto (títulos grandes) */
  --ccm-amarelo: #FFB31B;
  --ccm-amarelo-escuro: #E09A00;
  --ccm-preto: #000000;
  --ccm-branco: #FFFFFF;

  /* Ajuste de acessibilidade (manual, item "Hierarquia das regras":
     exceções permitidas por necessidade de acessibilidade).
     O vermelho oficial #F40209 rende 4.32:1 com texto branco e não atinge
     o mínimo AA de 4.5:1. Estes dois tons ficam na mesma família e passam. */
  --ccm-vermelho-acao: #D40208;    /* Fundo de botão com texto branco — 5.51:1 */
  --ccm-vermelho-acao-hover: #B80207;
  --ccm-vermelho-texto: #C40208;   /* Texto vermelho pequeno sobre fundo claro — 6.25:1 */
  --ccm-vermelho-escuro: #C40208;

  /* Neutros de apoio */
  --n-950: #080808;
  --n-900: #121212;
  --n-850: #1A1A1A;
  --n-800: #242424;
  --n-700: #3A3A3A;
  --n-500: #6E6E6E;
  --n-400: #8C8C8C;
  --n-300: #C9C9C9;
  --n-200: #E4E4E4;
  --n-150: #EDEDED;
  --n-100: #F5F5F5;

  /* Funcionais (uso restrito, conforme manual) */
  --ok: #157A41;
  --ok-bg: #E9F6EF;
  --erro: #C40208;
  --erro-bg: #FDECEC;

  /* Texto */
  --txt: #141414;
  --txt-sec: #4F4F4F;
  --txt-fraco: #6E6E6E;
  --txt-inv: #FFFFFF;
  --txt-inv-sec: #B8B8B8;
  /* Terceiro nivel de texto sobre fundo escuro. #8C8C8C era usado aqui, mas
     texto claro sofre irradiacao e parece mais fino do que e: em 12-13px
     com peso 400 o traco quebrava e lia como serrilhado. Este tom rende
     6,9:1 sobre preto e sempre anda junto de font-weight: 500. */
  --txt-inv-fraco: #A3A3A3;

  /* Tipografia */
  --f-display: "League Spartan", "Montserrat", "Segoe UI", Arial, sans-serif;
  --f-texto: "Montserrat", "Segoe UI", Roboto, Arial, Helvetica, sans-serif;

  /* Ritmo de espaçamento (6 / 12 / 18 / 24 — manual) */
  --s-1: 6px;
  --s-2: 12px;
  --s-3: 18px;
  --s-4: 24px;
  --s-5: 36px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 88px;
  --s-9: 120px;

  /* Layout */
  --max: 1180px;
  --max-estreito: 880px;
  --gutter: 20px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --borda: 1px solid var(--n-200);
  --borda-inv: 1px solid rgba(255, 255, 255, .14);
  --sombra-sutil: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 20px rgba(0, 0, 0, .05);
  --sombra-media: 0 2px 6px rgba(0, 0, 0, .07), 0 14px 40px rgba(0, 0, 0, .09);

  --header-h: 68px;
  --transicao: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* ------------------------------- RESET ------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.65; /* ~115–135% do manual, ajustado para tela */
  color: var(--txt);
  background: var(--ccm-branco);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}

/* Tracking negativo e entrelinha 1.12 servem para display grande (h1/h2, 2rem+).
   Todo h3/h4 desta pagina fica entre 1rem e 1.5rem: nesse tamanho o mesmo
   ajuste cola as letras e aperta as linhas. Regra optica: aperta o grande,
   solta o pequeno. */
h3, h4 {
  letter-spacing: 0;
  line-height: 1.28;
}

p { margin: 0 0 var(--s-3); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--s-3); padding-left: 1.15em; }
li { margin-bottom: 6px; }
li:last-child { margin-bottom: 0; }

a { color: var(--ccm-vermelho-texto); text-decoration: none; }
/* Sem sublinhado em hover: o feedback é por cor/opacidade. */
a:hover { text-decoration: none; }

strong, b { font-weight: 700; }

button { font: inherit; cursor: pointer; }

hr { border: 0; border-top: var(--borda); margin: var(--s-5) 0; }

::selection { background: var(--ccm-amarelo); color: var(--ccm-preto); }

/* Acessibilidade: foco sempre visível */
:focus-visible {
  outline: 3px solid var(--ccm-amarelo);
  outline-offset: 3px;
  border-radius: 4px;
}
.secao--escura :focus-visible { outline-color: var(--ccm-amarelo); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pular-para-conteudo {
  position: absolute; left: 12px; top: -100px; z-index: 200;
  background: var(--ccm-branco); color: var(--txt);
  padding: 12px 18px; border-radius: var(--radius);
  font-weight: 700; box-shadow: var(--sombra-media);
  transition: top var(--transicao);
}
.pular-para-conteudo:focus { top: 12px; }

/* --------------------------- ESTRUTURA BASE -------------------------- */
.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--estreito { max-width: var(--max-estreito); }

.secao { padding-block: var(--s-8); position: relative; }
.secao--compacta { padding-block: var(--s-7); }

.secao--clara { background: var(--ccm-branco); }
.secao--cinza { background: var(--n-100); }

.secao--escura {
  background: var(--ccm-preto);
  color: var(--txt-inv);
}
.secao--escura h2, .secao--escura h3, .secao--escura h4 { color: var(--ccm-branco); }
.secao--escura p { color: var(--txt-inv-sec); }
/* Links de texto ficam amarelos no fundo escuro, mas .btn tem cor propria:
   sem o :not(.btn) esta regra vence .btn--primario e pinta o CTA de amarelo. */
.secao--escura a:not(.btn) { color: var(--ccm-amarelo); }

/* Cabeçalho de seção */
.secao-cabecalho { max-width: 760px; margin-bottom: var(--s-6); }
.secao-cabecalho--centro { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-texto);
  font-size: .75rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ccm-vermelho-texto);
  margin-bottom: var(--s-2);
}
.eyebrow::before {
  content: ""; width: 22px; height: 3px;
  background: var(--ccm-vermelho); border-radius: 2px;
}
.secao--escura .eyebrow,
.cta-final .eyebrow,
.hero .eyebrow { color: var(--ccm-amarelo); }
.secao--escura .eyebrow::before,
.cta-final .eyebrow::before,
.hero .eyebrow::before { background: var(--ccm-amarelo); }
.secao-cabecalho--centro .eyebrow { justify-content: center; }

h2, .h2 { font-size: clamp(1.75rem, 1.1rem + 2.5vw, 2.65rem); }
h3, .h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); }

.secao-sub {
  font-size: 1.06rem;
  color: var(--txt-sec);
  max-width: 68ch;
}
.secao--escura .secao-sub { color: var(--txt-inv-sec); }
.secao-cabecalho--centro .secao-sub { margin-inline: auto; }

/* ------------------------------- BOTÕES ------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--f-texto);
  font-weight: 700; font-size: .97rem;
  line-height: 1;
  padding: 16px 28px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao),
              border-color var(--transicao), transform var(--transicao),
              box-shadow var(--transicao);
}
.btn:active { transform: translateY(1px); }

.btn--primario {
  background: var(--ccm-vermelho-acao);
  color: var(--ccm-branco);
  box-shadow: 0 6px 18px rgba(212, 2, 8, .28);
}
.btn--primario:hover { background: var(--ccm-vermelho-acao-hover); box-shadow: 0 8px 24px rgba(212, 2, 8, .36); }

.btn--secundario {
  background: transparent; color: var(--txt);
  border-color: var(--n-300);
}
.btn--secundario:hover { border-color: var(--ccm-preto); background: var(--n-100); }

/* Fundos escuros que não usam a classe .secao--escura (hero, CTA final, cabeçalho) */
.secao--escura .btn--secundario,
.cabecalho .btn--secundario,
.hero .btn--secundario,
.cta-final .btn--secundario { color: var(--ccm-branco); border-color: rgba(255, 255, 255, .3); }
.secao--escura .btn--secundario:hover,
.cabecalho .btn--secundario:hover,
.hero .btn--secundario:hover,
.cta-final .btn--secundario:hover { border-color: var(--ccm-branco); background: rgba(255, 255, 255, .08); }

.btn--bloco { width: 100%; }
.btn--grande { padding: 19px 38px; font-size: 1.05rem; }

.btn .seta { transition: transform var(--transicao); }
.btn:hover .seta { transform: translateX(3px); }

.btn[disabled] { opacity: .6; cursor: not-allowed; }

/* Estado inativo do botão de envio.
   Usa aria-disabled em vez de disabled: o botão continua focável e clicável,
   e ao ser acionado leva o candidato até o aceite em vez de simplesmente
   não reagir — um botão com `disabled` é invisível para leitores de tela
   e não explica o motivo de estar bloqueado. */
.btn[aria-disabled="true"] {
  background: var(--n-500);
  color: var(--ccm-branco);
  box-shadow: none;
  cursor: not-allowed;
}
.btn[aria-disabled="true"]:hover {
  background: var(--n-500);
  box-shadow: none;
}
.btn[aria-disabled="true"] .seta { opacity: .55; }

.micro-cta {
  font-size: .84rem;
  color: var(--txt-fraco);
  margin-top: var(--s-2);
}
.secao--escura .micro-cta { color: var(--txt-inv-fraco); font-weight: 500; }

/* ------------------------------ CABEÇALHO ---------------------------- */
.cabecalho {
  position: sticky; top: 0; z-index: 100;
  background: rgba(0, 0, 0, .92);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.cabecalho::after {
  content: ""; position: absolute; inset: auto 0 -3px 0; height: 3px;
  background: linear-gradient(90deg, var(--ccm-vermelho) 0 60%, var(--ccm-amarelo) 60% 100%);
  opacity: 0; transition: opacity var(--transicao);
}
.cabecalho.is-fixo::after { opacity: 1; }

.cabecalho__inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--s-4);
}

.cabecalho__marca { display: flex; align-items: center; gap: 14px; flex-shrink: 0; text-decoration: none; }
.cabecalho__marca:hover, .cabecalho__marca:hover .cabecalho__programa { text-decoration: none; color: var(--ccm-amarelo); }
.cabecalho__marca img { height: 34px; width: auto; }
.cabecalho__divisor { width: 1px; height: 26px; background: rgba(255, 255, 255, .22); }
.cabecalho__programa {
  font-family: var(--f-texto);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ccm-amarelo);
  line-height: 1.25;
  display: block;
  padding-top: 1px;
}

.cabecalho__nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-4); }
.cabecalho__links { display: flex; align-items: center; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
.cabecalho__links li { margin: 0; display: flex; align-items: center; }
.cabecalho__links a {
  color: rgba(255, 255, 255, .82);
  font-size: .88rem; font-weight: 600; text-decoration: none;
}
.cabecalho__links a:hover { color: var(--ccm-branco); text-decoration: none; }
.cabecalho .btn { padding: 12px 22px; font-size: .87rem; }

.cabecalho__toggle {
  display: none;
  background: transparent; border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 8px; width: 42px; height: 42px;
  align-items: center; justify-content: center;
  margin-left: auto;
}
.cabecalho__toggle span {
  display: block; width: 18px; height: 2px; background: var(--ccm-branco);
  position: relative; transition: var(--transicao);
}
.cabecalho__toggle span::before,
.cabecalho__toggle span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px;
  background: var(--ccm-branco); transition: var(--transicao);
}
.cabecalho__toggle span::before { top: -6px; }
.cabecalho__toggle span::after { top: 6px; }
.cabecalho__toggle[aria-expanded="true"] span { background: transparent; }
.cabecalho__toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.cabecalho__toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* --------------------------------- HERO ------------------------------ */
.hero {
  position: relative;
  background: var(--ccm-preto);
  color: var(--txt-inv);
  padding-block: var(--s-8) var(--s-7);
  overflow: hidden;
}
.hero__grafismo {
  position: absolute; top: 50%; right: -190px; transform: translateY(-50%);
  width: 760px; height: 760px;
  pointer-events: none; opacity: .55;
}
.hero__brilho {
  position: absolute; top: -20%; right: 4%;
  width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 2, 9, .17) 0%, rgba(244, 2, 9, 0) 68%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 2; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: var(--s-7);
  align-items: center;
}

.hero__selo {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255, 179, 27, .12);
  border: 1px solid rgba(255, 179, 27, .38);
  color: var(--ccm-amarelo);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 16px; border-radius: var(--radius-pill);
  margin-bottom: var(--s-4);
}
.hero__selo .ponto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ccm-amarelo);
}

.hero h1 {
  font-size: clamp(2.15rem, 1.2rem + 4.1vw, 3.75rem);
  color: var(--ccm-branco);
  margin-bottom: var(--s-4);
}
.hero h1 .destaque { color: var(--ccm-vermelho-claro); }

.hero__sub {
  font-size: clamp(1.02rem, .96rem + .4vw, 1.16rem);
  color: var(--txt-inv-sec);
  max-width: 56ch;
  margin-bottom: var(--s-5);
}

.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; }

.hero__indicadores {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, .13);
}
.indicador { display: flex; gap: 12px; align-items: flex-start; }
.indicador__icone {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px;
  background: rgba(244, 2, 9, .14);
  border: 1px solid rgba(244, 2, 9, .34);
  display: grid; place-items: center;
}
.indicador__icone svg { width: 18px; height: 18px; color: var(--ccm-vermelho-claro); stroke: var(--ccm-vermelho-claro); }
.indicador__texto { font-size: .89rem; font-weight: 600; color: var(--ccm-branco); line-height: 1.4; }

/* Mockup / composição visual do hero */
.hero__visual { position: relative; }

.mockup-pilha { position: relative; padding: 10px 0 20px; }

.mock {
  background: linear-gradient(180deg, #1C1C1C 0%, #101010 100%);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  overflow: hidden;
}
.mock__barra {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .045);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.mock__ponto { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.mock__ponto--vermelho { background: var(--ccm-vermelho); }
.mock__ponto--amarelo { background: var(--ccm-amarelo); }
.mock__titulo {
  margin-left: auto; font-size: .66rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--n-500);
}
.mock__corpo { padding: 16px; }

.mock-linha { height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .1); margin-bottom: 9px; }
.mock-linha--curta { width: 45%; }
.mock-linha--media { width: 68%; }
.mock-linha--amarela { background: rgba(255, 179, 27, .5); width: 32%; }
.mock-linha--vermelha { background: rgba(244, 2, 9, .55); width: 38%; }

.mock-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 14px; }
.mock-card {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px; padding: 10px;
}
.mock-card__num { font-family: var(--f-display); font-size: 1.05rem; font-weight: 800; color: var(--ccm-branco); }
.mock-card__lbl { font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; color: var(--n-500); }

.mock-linhas-lista { display: grid; gap: 8px; }
.mock-item {
  display: flex; align-items: center; gap: 9px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 7px; padding: 9px 10px;
}
.mock-item__tag {
  font-size: .55rem; font-weight: 700; letter-spacing: .06em;
  padding: 3px 7px; border-radius: 4px; text-transform: uppercase; flex-shrink: 0;
}
.tag--delivery { background: rgba(244, 2, 9, .2); color: #FF6B6F; }
.tag--salao { background: rgba(255, 179, 27, .2); color: var(--ccm-amarelo); }
.tag--balcao { background: rgba(255, 255, 255, .1); color: var(--n-300); }

.mock-celular {
  position: absolute; right: -6px; bottom: -14px;
  width: 148px;
  background: linear-gradient(180deg, #1E1E1E 0%, #0C0C0C 100%);
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 20px; padding: 9px;
  box-shadow: 0 26px 54px rgba(0, 0, 0, .72);
}
.mock-celular__tela {
  background: #0A0A0A; border-radius: 13px; padding: 11px 10px;
  border: 1px solid rgba(255, 255, 255, .07);
}
.mock-celular__topo {
  width: 34px; height: 4px; border-radius: 3px;
  background: rgba(255, 255, 255, .22); margin: 0 auto 10px;
}
.mock-prod {
  display: flex; gap: 7px; align-items: center;
  padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.mock-prod:last-child { border-bottom: 0; }
.mock-prod__img {
  width: 24px; height: 24px; border-radius: 5px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(255, 179, 27, .45), rgba(244, 2, 9, .35));
}
.mock-prod__linhas { flex: 1; display: grid; gap: 4px; }
.mock-prod__l1 { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .18); width: 82%; }
.mock-prod__l2 { height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .1); width: 52%; }
.mock-celular__btn {
  margin-top: 9px; background: var(--ccm-vermelho-acao); border-radius: 6px;
  height: 20px; display: grid; place-items: center;
  font-size: .5rem; font-weight: 700; color: #fff; letter-spacing: .06em;
}

/* Faixa de credibilidade sob o hero */
.faixa-credibilidade {
  background: var(--n-950);
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-block: var(--s-3);
}
.faixa-credibilidade__inner {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s-2) var(--s-5);
  font-size: .82rem; color: var(--txt-inv-fraco); font-weight: 500;
}
.faixa-credibilidade b { color: var(--ccm-branco); font-weight: 700; }

/* ------------------------------- CARDS ------------------------------- */
.grid { display: grid; gap: var(--s-3); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--ccm-branco);
  border: var(--borda);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
  transition: border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}
.card:hover { border-color: var(--n-300); box-shadow: var(--sombra-sutil); }

.card--destaque { border-color: rgba(244, 2, 9, .3); }

.card__icone {
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(244, 2, 9, .08);
  border: 1px solid rgba(244, 2, 9, .2);
  display: grid; place-items: center;
  margin-bottom: var(--s-3);
}
.card__icone svg { width: 22px; height: 22px; color: var(--ccm-vermelho-texto); stroke: var(--ccm-vermelho-texto); }
.card__icone--amarelo { background: rgba(255, 179, 27, .12); border-color: rgba(255, 179, 27, .38); }
.card__icone--amarelo svg { color: var(--ccm-amarelo-escuro); stroke: var(--ccm-amarelo-escuro); }

.card h3 { margin-bottom: 10px; font-size: 1.16rem; }
.card p { color: var(--txt-sec); font-size: .95rem; margin-bottom: 0; }

/* Card escuro */
.secao--escura .card {
  background: var(--n-900);
  border-color: rgba(255, 255, 255, .12);
}
.secao--escura .card:hover { border-color: rgba(255, 255, 255, .26); box-shadow: none; }
.secao--escura .card p { color: var(--txt-inv-sec); }
.secao--escura .card__icone { background: rgba(244, 2, 9, .16); border-color: rgba(244, 2, 9, .36); }
.secao--escura .card__icone svg { color: var(--ccm-vermelho-claro); stroke: var(--ccm-vermelho-claro); }
.secao--escura .card__icone--amarelo { background: rgba(255, 179, 27, .14); border-color: rgba(255, 179, 27, .38); }
.secao--escura .card__icone--amarelo svg { color: var(--ccm-amarelo); stroke: var(--ccm-amarelo); }

/* Nota / observação */
.nota {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--n-100);
  border-left: 3px solid var(--ccm-amarelo);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--s-3) var(--s-4);
  font-size: .9rem;
  color: var(--txt-sec);
  margin-top: var(--s-4);
}
.nota svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--ccm-amarelo-escuro); stroke: var(--ccm-amarelo-escuro); }
.nota p { margin: 0; font-size: .9rem; }
.secao--escura .nota {
  background: rgba(255, 179, 27, .07);
  color: var(--txt-inv-sec);
}
.secao--escura .nota svg { color: var(--ccm-amarelo); stroke: var(--ccm-amarelo); }

/* Frase de fechamento em destaque */
.destaque-faixa {
  margin-top: var(--s-5);
  background: var(--ccm-preto);
  color: var(--ccm-branco);
  border-radius: var(--radius-lg);
  padding: var(--s-5) var(--s-5);
  display: flex; gap: var(--s-4); align-items: center;
  position: relative; overflow: hidden;
}
.destaque-faixa::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, var(--ccm-vermelho), var(--ccm-amarelo));
}
.destaque-faixa p {
  margin: 0;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.1rem, .95rem + .7vw, 1.45rem);
  line-height: 1.35; color: var(--ccm-branco);
}
.destaque-faixa .destaque { color: var(--ccm-amarelo); }

.destaque-inline {
  display: inline-block;
  background: var(--ccm-amarelo);
  color: var(--ccm-preto);
  font-weight: 700;
  padding: 2px 8px; border-radius: 5px;
}

/* --------------------- SEÇÃO: OPORTUNIDADE (grafismos) --------------- */
.oportunidade__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--s-7); align-items: center;
}
.chips-operacao {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2);
}
.chip-op {
  background: var(--ccm-branco);
  border: var(--borda);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-2);
  text-align: center;
  transition: var(--transicao);
}
.chip-op:hover { border-color: var(--ccm-vermelho); transform: translateY(-2px); }
.chip-op svg { width: 26px; height: 26px; color: var(--ccm-vermelho-texto); stroke: var(--ccm-vermelho-texto); margin: 0 auto 9px; }
.chip-op span {
  display: block; font-size: .82rem; font-weight: 600; color: var(--txt);
  line-height: 1.3;
}

/* -------------------- SEÇÃO: O QUE VOCÊ PODE OFERECER ---------------- */
.frentes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.frente {
  background: var(--ccm-branco);
  border: var(--borda);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
}
.frente__cabecalho { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s-3); padding-bottom: var(--s-3); border-bottom: var(--borda); }
.frente__cabecalho h3 { margin: 0; font-size: 1.1rem; }
.frente__icone {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: var(--ccm-preto); display: grid; place-items: center;
}
.frente__icone svg { width: 19px; height: 19px; color: var(--ccm-amarelo); stroke: var(--ccm-amarelo); }
.frente ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.frente li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 11px; row-gap: 3px;
  font-size: .93rem; color: var(--txt-sec); margin: 0;
}
.frente li::before {
  content: ""; grid-row: 1; grid-column: 1;
  flex-shrink: 0; width: 6px; height: 6px; margin-top: 8px;
  border-radius: 50%; background: var(--ccm-vermelho);
}
.frente li strong {
  grid-row: 1; grid-column: 2;
  font-size: .95rem; font-weight: 700; color: var(--txt);
  line-height: 1.45;
}
.frente li span {
  grid-row: 2; grid-column: 2;
  font-size: .875rem; color: var(--txt-sec); line-height: 1.5;
}

/* -------------------------- SEÇÃO: COMO FUNCIONA --------------------- */
.etapas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); counter-reset: etapa; }
.etapa {
  position: relative;
  background: var(--n-900);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-lg);
  padding: var(--s-5) var(--s-4) var(--s-4);
}
.etapa__numero {
  position: absolute; top: -20px; left: var(--s-4);
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--ccm-vermelho-acao); color: var(--ccm-branco);
  display: grid; place-items: center;
  font-family: var(--f-display); font-size: 1.15rem; font-weight: 800;
  box-shadow: 0 6px 18px rgba(244, 2, 9, .35);
  /* place-items centra a caixa de linha, nao a tinta do glifo. Digitos da
     League Spartan nao tem descendente, entao o numero subia ~2,7px.
     O padding reduz a caixa de conteudo pelo topo e desce a tinta metade dele. */
  padding-top: 5px;
}
.etapa h3 { margin-top: 10px; font-size: 1.1rem; }
.etapa p { font-size: .93rem; margin: 0; }

.fluxo-cadeia {
  margin-top: var(--s-6);
  display: flex; align-items: stretch; justify-content: center;
  gap: var(--s-2); flex-wrap: wrap;
}
.fluxo-no {
  flex: 1 1 210px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  text-align: center;
}
.fluxo-no strong { display: block; color: var(--ccm-branco); font-size: 1rem; }
.fluxo-no span { font-size: .8rem; font-weight: 500; color: var(--txt-inv-fraco); line-height: 1.45; }
.fluxo-no--ccm { border-color: rgba(244, 2, 9, .5); background: rgba(244, 2, 9, .09); }
.fluxo-no--parceiro { border-color: rgba(255, 179, 27, .5); background: rgba(255, 179, 27, .08); }
.fluxo-seta { display: grid; place-items: center; color: var(--n-500); flex: 0 0 34px; }
.fluxo-seta svg { width: 22px; height: 22px; color: var(--n-500); stroke: var(--n-500); }

.fluxo-legenda {
  margin-top: var(--s-4);
  text-align: center;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.02rem, .95rem + .5vw, 1.3rem);
  color: var(--ccm-branco);
}
.fluxo-legenda .destaque { color: var(--ccm-amarelo); }

/* ------------------------ SEÇÃO: RESPONSABILIDADES ------------------- */
.colunas-resp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.coluna-resp {
  border-radius: var(--radius-lg);
  border: var(--borda);
  overflow: hidden;
  background: var(--ccm-branco);
}
.coluna-resp__topo {
  padding: var(--s-3) var(--s-4);
  display: flex; align-items: center; gap: 11px;
  border-bottom: var(--borda);
}
.coluna-resp__topo h3 { margin: 0; font-size: 1.08rem; }
.coluna-resp--parceiro .coluna-resp__topo { background: var(--ccm-preto); }
.coluna-resp--parceiro .coluna-resp__topo h3 { color: var(--ccm-branco); }
.coluna-resp--ccm .coluna-resp__topo { background: var(--ccm-vermelho-acao); }
.coluna-resp--ccm .coluna-resp__topo h3 { color: var(--ccm-branco); }
.coluna-resp__topo svg { width: 20px; height: 20px; color: var(--ccm-amarelo); stroke: var(--ccm-amarelo); flex-shrink: 0; }
.coluna-resp--ccm .coluna-resp__topo svg { color: var(--ccm-branco); stroke: var(--ccm-branco); }
.coluna-resp ul { list-style: none; margin: 0; padding: var(--s-4); display: grid; gap: 11px; }
.coluna-resp li { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; color: var(--txt-sec); margin: 0; }
.coluna-resp li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--ok); stroke: var(--ok); }

/* ----------------------------- SEÇÃO: SUPORTE ------------------------ */
.suporte-niveis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.nivel {
  background: var(--ccm-branco);
  border: var(--borda);
  border-top: 4px solid var(--n-300);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
}
.nivel--n1 { border-top-color: var(--ccm-amarelo); }
.nivel--n2 { border-top-color: var(--ccm-vermelho); }
.nivel__selo {
  display: inline-block;
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--radius-pill);
  margin-bottom: var(--s-2);
}
.nivel--n1 .nivel__selo { background: rgba(255, 179, 27, .18); color: #8A5D00; }
.nivel--n2 .nivel__selo { background: rgba(244, 2, 9, .1); color: var(--ccm-vermelho-escuro); }
.nivel h3 { font-size: 1.08rem; margin-bottom: var(--s-2); }
.nivel__resp { font-size: .85rem; color: var(--txt-fraco); margin-bottom: var(--s-3); }
.nivel ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.nivel li { font-size: .92rem; color: var(--txt-sec); padding-left: 17px; position: relative; margin: 0; }
.nivel li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--n-300);
}
.nivel--n1 li::before { background: var(--ccm-amarelo); }
.nivel--n2 li::before { background: var(--ccm-vermelho); }

.horarios {
  margin-top: var(--s-4);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2);
}
.horario {
  background: var(--ccm-preto); color: var(--ccm-branco);
  border-radius: var(--radius); padding: var(--s-3) var(--s-4);
  display: flex; gap: 12px; align-items: center;
}
.horario svg { width: 22px; height: 22px; color: var(--ccm-amarelo); stroke: var(--ccm-amarelo); flex-shrink: 0; }
.horario strong { display: block; font-size: .93rem; }
/* Sobre preto puro o texto claro parece mais fino do que e (irradiacao):
   #8C8C8C em 400 e 12px serrilhava. Tom mais claro + peso 500 resolve
   e ainda sobe o contraste de 4.6:1 para 8.2:1. */
.horario span { font-size: .8rem; font-weight: 500; color: var(--txt-inv-sec); line-height: 1.45; }






/* ---------------------- SEÇÃO: CONDIÇÕES COMERCIAIS ------------------ */
/* Apresenta a mecânica do modelo. Os valores ficam no Anexo de Condições
   Comerciais, entregue na call de alinhamento — nada de número na página. */
.modelo-comercial {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  align-items: stretch;
}

.modelo-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--n-900);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--radius-lg);
  padding: var(--s-5) var(--s-4) var(--s-4);
  transition: border-color var(--transicao), transform var(--transicao);
  overflow: hidden;
}
.modelo-card:hover { border-color: rgba(255, 255, 255, .26); }

.modelo-card--destaque {
  border-color: rgba(255, 179, 27, .42);
  background: linear-gradient(180deg, rgba(255, 179, 27, .07) 0%, var(--n-900) 55%);
}
.modelo-card--destaque:hover { border-color: rgba(255, 179, 27, .6); }

.modelo-card__passo {
  position: absolute; top: var(--s-3); right: var(--s-4);
  font-family: var(--f-display); font-weight: 800;
  font-size: 2.4rem; line-height: 1;
  color: rgba(255, 59, 65, .34);
  pointer-events: none;
}
.modelo-card--destaque .modelo-card__passo { color: rgba(255, 179, 27, .5); }

.modelo-card__icone {
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(244, 2, 9, .16);
  border: 1px solid rgba(244, 2, 9, .36);
  display: grid; place-items: center;
  margin-bottom: var(--s-3);
  flex-shrink: 0;
}
.modelo-card__icone svg {
  width: 22px; height: 22px;
  color: var(--ccm-vermelho-claro); stroke: var(--ccm-vermelho-claro);
}
.modelo-card--destaque .modelo-card__icone {
  background: rgba(255, 179, 27, .14);
  border-color: rgba(255, 179, 27, .42);
}
.modelo-card--destaque .modelo-card__icone svg {
  color: var(--ccm-amarelo); stroke: var(--ccm-amarelo);
}

.modelo-card h3 { font-size: 1.14rem; margin-bottom: 10px; }
.modelo-card p { font-size: .93rem; margin: 0; color: var(--txt-inv-sec); }

/* Faixa de compromisso: sem taxa de credenciamento */
.faixa-compromisso {
  margin-top: var(--s-5);
  display: flex; align-items: center; gap: var(--s-4);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .13);
  border-left: 4px solid var(--ccm-amarelo);
  border-radius: var(--radius-lg);
  padding: var(--s-4) var(--s-5);
}
.faixa-compromisso__marca {
  flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 179, 27, .13);
  border: 1px solid rgba(255, 179, 27, .38);
  display: grid; place-items: center;
}
.faixa-compromisso__marca svg {
  width: 22px; height: 22px;
  color: var(--ccm-amarelo); stroke: var(--ccm-amarelo);
}
.faixa-compromisso__texto { flex: 1; display: block; }
.faixa-compromisso__texto strong {
  display: block;
  font-family: var(--f-display); font-weight: 800;
  font-size: 1.22rem; color: var(--ccm-branco);
  line-height: 1.25; margin-bottom: 4px;
}
.faixa-compromisso__texto span {
  display: block;
  font-size: .92rem; color: var(--txt-inv-sec); line-height: 1.5;
}
.faixa-compromisso .btn { flex-shrink: 0; }

/* ----------------------------- SEÇÃO: APP ---------------------------- */
.app-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.app-opcao {
  border: var(--borda); border-radius: var(--radius-lg);
  padding: var(--s-4); background: var(--ccm-branco);
}
.app-opcao__topo { display: flex; align-items: center; gap: 11px; margin-bottom: var(--s-3); }
.app-opcao__topo svg { width: 22px; height: 22px; color: var(--ccm-vermelho-texto); stroke: var(--ccm-vermelho-texto); }
.app-opcao__topo h3 { margin: 0; font-size: 1.06rem; }

/* ----------------------------- SEÇÃO: ATIVAÇÃO ----------------------- */
.timeline { position: relative; display: grid; gap: var(--s-3); }
.timeline::before {
  content: ""; position: absolute; left: 19px; top: 14px; bottom: 14px; width: 2px;
  background: linear-gradient(180deg, var(--ccm-vermelho), var(--ccm-amarelo));
  opacity: .45;
}
.timeline__passo {
  position: relative; display: flex; gap: var(--s-4); align-items: flex-start;
  padding-left: 0;
}
.timeline__marca {
  position: relative; z-index: 2; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--n-900);
  border: 2px solid var(--ccm-vermelho);
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 800; font-size: .95rem;
  color: var(--ccm-branco);
  padding-top: 3px;   /* mesma compensacao optica do .etapa__numero */
}
.timeline__passo:last-child .timeline__marca { border-color: var(--ccm-amarelo); background: var(--ccm-amarelo); color: var(--ccm-preto); }
.timeline__conteudo {
  flex: 1;
  background: var(--n-900);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
}
.timeline__conteudo h3 { font-size: 1rem; margin-bottom: 8px; }
.timeline__conteudo p { font-size: .9rem; margin: 0; }

/* --------------------------- SEÇÃO: REQUISITOS ----------------------- */
.requisitos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.requisito {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--ccm-branco);
  border: var(--borda); border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
}
.requisito svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--ccm-vermelho-texto); stroke: var(--ccm-vermelho-texto); }
.requisito span { font-size: .95rem; font-weight: 600; color: var(--txt); }


/* ------------------------- SEÇÃO: REGRAS ESSENCIAIS ------------------ */
/* align-items: stretch garante que os dois cards da mesma linha tenham
   a mesma altura, mesmo quando um texto quebra em duas linhas. */
.regras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  align-items: stretch;
}
.regra {
  display: flex; gap: 12px; align-items: center;
  background: var(--ccm-branco); border: var(--borda);
  border-left: 3px solid var(--n-300);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--s-3) var(--s-4);
  font-size: .93rem; color: var(--txt-sec);
}
.regra--permitido { border-left-color: var(--ok); }
.regra--vedado { border-left-color: var(--ccm-vermelho); }
.regra svg { width: 17px; height: 17px; flex-shrink: 0; }
.regra span { flex: 1; }
.regra--permitido svg { color: var(--ok); stroke: var(--ok); }
.regra--vedado svg { color: var(--ccm-vermelho-texto); stroke: var(--ccm-vermelho-texto); }

.legenda-regras {
  display: flex; gap: var(--s-4); flex-wrap: wrap;
  margin-bottom: var(--s-4); font-size: .82rem; color: var(--txt-fraco);
}
.legenda-regras span { display: inline-flex; align-items: center; gap: 7px; }
.legenda-regras i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }

/* --------------------------- SEÇÃO: PROVA ---------------------------- */
.numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.numero {
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-lg);
  padding: var(--s-5) var(--s-3);
  background: rgba(255, 255, 255, .03);
}
.numero__valor {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem);
  color: var(--ccm-amarelo); line-height: 1; margin-bottom: 9px;
}
.numero__label { font-size: .87rem; color: var(--txt-inv-sec); line-height: 1.4; }

.segmentos { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: var(--s-5); }
.segmento {
  font-size: .84rem; font-weight: 600;
  padding: 9px 17px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
  color: var(--ccm-branco);
}


/* ------------------------------- FAQ --------------------------------- */
.faq { display: grid; gap: 10px; }
.faq-item {
  border: var(--borda);
  border-radius: var(--radius);
  background: var(--ccm-branco);
  overflow: hidden;
  transition: border-color var(--transicao);
}
.faq-item.aberto { border-color: var(--ccm-vermelho); }
.faq-item__botao {
  width: 100%; text-align: left;
  background: transparent; border: 0;
  padding: var(--s-3) var(--s-4);
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--f-texto); font-size: 1rem; font-weight: 600; color: var(--txt);
  line-height: 1.4;
}
.faq-item__botao:hover { background: var(--n-100); }
.faq-item__icone {
  margin-left: auto; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--n-100);
  display: grid; place-items: center;
  transition: var(--transicao);
}
.faq-item__icone svg { width: 14px; height: 14px; color: var(--txt); stroke: var(--txt); transition: var(--transicao); }
.faq-item.aberto .faq-item__icone { background: var(--ccm-vermelho-acao); }
.faq-item.aberto .faq-item__icone svg { color: #fff; stroke: #fff; transform: rotate(180deg); }
.faq-item__painel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 240ms cubic-bezier(.4, 0, .2, 1);
}
.faq-item.aberto .faq-item__painel { grid-template-rows: 1fr; }
.faq-item__painel > div { overflow: hidden; }
.faq-item__painel p {
  padding: 0 var(--s-4) var(--s-4);
  font-size: .95rem; color: var(--txt-sec); margin: 0;
}
.faq-item__painel p + p { padding-top: var(--s-2); }

/* ---------------------------- FORMULÁRIO ----------------------------- */
.form-secao { background: var(--n-100); }
.form-wrap {
  background: var(--ccm-branco);
  border: var(--borda);
  border-radius: var(--radius-lg);
  box-shadow: var(--sombra-media);
  overflow: hidden;
}
.form-wrap__topo {
  background: var(--ccm-preto);
  color: var(--ccm-branco);
  padding: var(--s-5);
  position: relative; overflow: hidden;
}
.form-wrap__topo::after {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  border: 26px solid rgba(244, 2, 9, .16);
}
.form-wrap__topo h2 { position: relative; z-index: 2; margin-bottom: 8px; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem); }
.form-wrap__topo p { position: relative; z-index: 2; color: var(--txt-inv-sec); margin: 0; font-size: .98rem; }

.formulario { padding: var(--s-5); }

.form-grupo { margin-bottom: var(--s-5); }
.form-grupo__titulo {
  font-family: var(--f-texto);
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ccm-vermelho-texto);
  padding-bottom: 10px; margin-bottom: var(--s-3);
  border-bottom: var(--borda);
  display: flex; align-items: center; gap: 9px;
}
.form-grupo__titulo .n {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ccm-vermelho-acao); color: #fff;
  display: grid; place-items: center; font-size: .7rem;
}

.form-linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.form-linha--3 { grid-template-columns: 2fr 1fr 1fr; }
.form-linha--full { grid-template-columns: 1fr; }

.campo { display: flex; flex-direction: column; margin-bottom: var(--s-3); }
.campo:last-child { margin-bottom: 0; }
.form-linha .campo { margin-bottom: 0; }

.campo label {
  font-size: .86rem; font-weight: 600; color: var(--txt);
  margin-bottom: 7px;
}
.campo label .opcional { font-weight: 500; color: var(--txt-fraco); }
.campo label .obrig { color: var(--ccm-vermelho-texto); margin-left: 2px; }

.campo input,
.campo select,
.campo textarea {
  font-family: var(--f-texto); font-size: .96rem;
  color: var(--txt);
  background: var(--ccm-branco);
  border: 1.5px solid var(--n-200);
  border-radius: var(--radius);
  padding: 13px 15px;
  width: 100%;
  transition: border-color var(--transicao), box-shadow var(--transicao);
  appearance: none;
}
.campo select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E6E6E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}
.campo textarea { resize: vertical; min-height: 88px; }

.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--n-300); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--ccm-vermelho);
  box-shadow: 0 0 0 3px rgba(244, 2, 9, .12);
  outline: none;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--txt-fraco); }

.campo .ajuda { font-size: .78rem; color: var(--txt-fraco); margin-top: 6px; }

.campo .erro-msg {
  display: none;
  font-size: .8rem; color: var(--erro); font-weight: 600;
  margin-top: 6px;
  align-items: center; gap: 6px;
}
.campo .erro-msg svg { width: 14px; height: 14px; color: var(--erro); stroke: var(--erro); flex-shrink: 0; }
.campo.com-erro input,
.campo.com-erro select,
.campo.com-erro textarea { border-color: var(--erro); background: var(--erro-bg); }
.campo.com-erro .erro-msg { display: flex; }

/* Grupos de rádio / opções em cartão */
.opcoes { display: grid; gap: 9px; }
.opcoes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opcoes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.opcao {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  border: 1.5px solid var(--n-200);
  border-radius: var(--radius);
  padding: 13px 15px;
  cursor: pointer;
  transition: var(--transicao);
  font-size: .93rem; font-weight: 600; color: var(--txt);
}
.opcao:hover { border-color: var(--n-300); background: var(--n-100); }
.opcao input { position: absolute; opacity: 0; width: 0; height: 0; }
.opcao__marca {
  flex-shrink: 0; width: 19px; height: 19px;
  border: 2px solid var(--n-300); border-radius: 50%;
  display: grid; place-items: center;
  transition: var(--transicao);
}
.opcao__marca::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ccm-vermelho); transform: scale(0); transition: var(--transicao);
}
.opcao input:checked ~ .opcao__marca { border-color: var(--ccm-vermelho); }
.opcao input:checked ~ .opcao__marca::after { transform: scale(1); }
.opcao:has(input:checked) { border-color: var(--ccm-vermelho); background: rgba(244, 2, 9, .04); }
.opcao input:focus-visible ~ .opcao__marca { outline: 3px solid var(--ccm-amarelo); outline-offset: 3px; }

fieldset { border: 0; padding: 0; margin: 0 0 var(--s-3); }
fieldset legend {
  font-size: .86rem; font-weight: 600; color: var(--txt);
  padding: 0; margin-bottom: 9px;
}
fieldset legend .obrig { color: var(--ccm-vermelho-texto); }
fieldset.com-erro .opcao { border-color: rgba(196, 2, 8, .4); }
fieldset .erro-msg { display: none; font-size: .8rem; color: var(--erro); font-weight: 600; margin-top: 8px; align-items: center; gap: 6px; }
fieldset .erro-msg svg { width: 14px; height: 14px; color: var(--erro); stroke: var(--erro); }
fieldset.com-erro .erro-msg { display: flex; }

/* Aceite */
.aceite {
  background: var(--n-100);
  border: 1.5px solid var(--n-200);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
}
.aceite__texto {
  font-size: .88rem; color: var(--txt-sec);
  background: var(--ccm-branco);
  border: var(--borda); border-radius: var(--radius);
  padding: var(--s-3);
  max-height: 108px; overflow-y: auto;
  margin-bottom: var(--s-3);
}
.aceite__check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.aceite__check input { position: absolute; opacity: 0; width: 0; height: 0; }
.aceite__box {
  flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px;
  border: 2px solid var(--n-300); border-radius: 6px;
  background: var(--ccm-branco);
  display: grid; place-items: center;
  transition: var(--transicao);
}
.aceite__box svg { width: 13px; height: 13px; color: #fff; stroke: #fff; opacity: 0; transition: var(--transicao); }
.aceite__check input:checked ~ .aceite__box { background: var(--ccm-vermelho); border-color: var(--ccm-vermelho); }
.aceite__check input:checked ~ .aceite__box svg { opacity: 1; }
.aceite__check input:focus-visible ~ .aceite__box { outline: 3px solid var(--ccm-amarelo); outline-offset: 3px; }
.aceite__label { font-size: .9rem; color: var(--txt); line-height: 1.55; }
.aceite.com-erro { border-color: var(--erro); background: var(--erro-bg); }
.aceite .erro-msg { display: none; font-size: .8rem; color: var(--erro); font-weight: 600; margin-top: 10px; align-items: center; gap: 6px; }
.aceite .erro-msg svg { width: 14px; height: 14px; color: var(--erro); stroke: var(--erro); }
.aceite.com-erro .erro-msg { display: flex; }

.docs-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); font-size: .87rem; }
.docs-links a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.docs-links a svg { width: 14px; height: 14px; color: currentColor; stroke: currentColor; }

/* Estados do formulário */
.form-acoes { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-2); }

/* Aviso que explica por que o botão está inativo. Some quando o aceite é marcado. */
.aviso-aceite {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0;
  font-size: .84rem; font-weight: 600;
  color: var(--txt-fraco);
  text-align: center;
  transition: opacity var(--transicao);
}
.aviso-aceite svg {
  width: 15px; height: 15px; flex-shrink: 0;
  color: var(--txt-fraco); stroke: var(--txt-fraco);
}
.aviso-aceite.oculto { display: none; }
/* Destaque momentâneo quando o candidato tenta enviar sem aceitar */
.aviso-aceite.alerta { color: var(--erro); }
.aviso-aceite.alerta svg { color: var(--erro); stroke: var(--erro); }
.btn-enviar { position: relative; }
.btn-enviar .spinner {
  width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  animation: girar .7s linear infinite;
  display: none;
}
.formulario.enviando .btn-enviar .spinner { display: block; }
.formulario.enviando .btn-enviar .rotulo { opacity: .85; }
.formulario.enviando .btn-enviar .seta { display: none; }
@keyframes girar { to { transform: rotate(360deg); } }

.form-alerta {
  display: none;
  gap: 12px; align-items: flex-start;
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  font-size: .92rem;
}
.form-alerta.visivel { display: flex; }
.form-alerta--erro { background: var(--erro-bg); border: 1px solid rgba(196, 2, 8, .28); color: #8C0206; }
.form-alerta svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 2px; color: currentColor; stroke: currentColor; }

.form-sucesso {
  display: none;
  padding: var(--s-8) var(--s-5);
  text-align: center;
}
.form-sucesso.visivel { display: block; }
.form-sucesso__icone {
  width: 74px; height: 74px; margin: 0 auto var(--s-4);
  border-radius: 50%; background: var(--ok-bg);
  border: 2px solid rgba(21, 122, 65, .3);
  display: grid; place-items: center;
}
.form-sucesso__icone svg { width: 34px; height: 34px; color: var(--ok); stroke: var(--ok); }
.form-sucesso h3 { font-size: 1.5rem; margin-bottom: var(--s-2); }
.form-sucesso p { color: var(--txt-sec); max-width: 52ch; margin-inline: auto; }

.privacidade-nota {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: .8rem; color: var(--txt-fraco);
  margin-top: var(--s-3);
}
.privacidade-nota svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--txt-fraco); stroke: var(--txt-fraco); }

/* ----------------------------- CTA FINAL ----------------------------- */
.cta-final {
  background: var(--ccm-preto);
  color: var(--ccm-branco);
  padding-block: var(--s-9);
  position: relative; overflow: hidden;
  text-align: center;
}
.cta-final__grafismo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 900px; height: 900px; opacity: .3; pointer-events: none;
}
.cta-final__inner { position: relative; z-index: 2; }
.cta-final h2 { font-size: clamp(1.9rem, 1.2rem + 3vw, 3rem); max-width: 20ch; margin-inline: auto; }
.cta-final p { max-width: 58ch; margin-inline: auto; font-size: 1.06rem; margin-bottom: var(--s-5); }

/* ------------------------------- RODAPÉ ------------------------------ */
.rodape {
  background: var(--n-950);
  color: var(--txt-inv-sec);
  padding-block: var(--s-6) var(--s-4);
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: .88rem;
}
.rodape__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s-6); margin-bottom: var(--s-5);
}
.rodape img { height: 38px; width: auto; margin-bottom: var(--s-3); }
.rodape h4 {
  font-family: var(--f-texto); font-size: .76rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ccm-branco); margin-bottom: var(--s-3);
}
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.rodape a { color: var(--txt-inv-sec); text-decoration: none; }
.rodape a:hover { color: var(--ccm-branco); text-decoration: none; }
.rodape__base {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: var(--s-4);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  justify-content: space-between; align-items: center;
  font-size: .81rem; color: var(--txt-inv-fraco); font-weight: 500;
}

/* ------------------------- BARRA MOBILE FIXA ------------------------- */
.barra-mobile {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(0, 0, 0, .96);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 11px var(--gutter) calc(11px + env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform 260ms cubic-bezier(.4, 0, .2, 1);
}
.barra-mobile.visivel { transform: translateY(0); }
.barra-mobile .btn { width: 100%; }

/* ------------------------- ANIMAÇÃO DE ENTRADA ----------------------- */
.revelar { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.revelar.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .revelar { opacity: 1; transform: none; }
}

/* ============================== RESPONSIVO ========================== */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero__visual { max-width: 460px; }
  .hero__grafismo { opacity: .3; right: -320px; }
  .oportunidade__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cabecalho__links { display: none; }
  .rodape__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  :root { --s-8: 64px; --s-9: 80px; --gutter: 18px; }

  .cabecalho__nav { display: none; }
  .cabecalho__nav.aberto {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; left: 0; right: 0; top: var(--header-h);
    background: rgba(0, 0, 0, .98);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    padding: var(--s-4) var(--gutter) var(--s-5);
    gap: var(--s-3);
  }
  .cabecalho__nav.aberto .cabecalho__links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
  }
  .cabecalho__nav.aberto .cabecalho__links li { margin: 0; display: block; }
  .cabecalho__nav.aberto .cabecalho__links a {
    display: block; padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    font-size: 1rem;
  }
  .cabecalho__nav.aberto .btn { width: 100%; }
  .cabecalho__toggle { display: flex; }
  .cabecalho__programa { font-size: .66rem; }

  .barra-mobile { display: block; }
  body { padding-bottom: 0; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .etapas { grid-template-columns: 1fr; gap: var(--s-6); }
  .frentes { grid-template-columns: 1fr; }
  .modelo-comercial { grid-template-columns: 1fr; }
  .faixa-compromisso {
    flex-direction: column; align-items: flex-start;
    gap: var(--s-3); padding: var(--s-4);
  }
  .faixa-compromisso .btn { width: 100%; }
  .colunas-resp { grid-template-columns: 1fr; }
  .suporte-niveis { grid-template-columns: 1fr; }
  .horarios { grid-template-columns: 1fr; }
  .app-grid { grid-template-columns: 1fr; }
  .requisitos-grid { grid-template-columns: 1fr; }
  .regras { grid-template-columns: 1fr; }
  .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chips-operacao { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-linha, .form-linha--3 { grid-template-columns: 1fr; }
  .opcoes--2, .opcoes--3 { grid-template-columns: 1fr; }
  .rodape__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .hero__indicadores { grid-template-columns: 1fr; gap: var(--s-3); }
  .destaque-faixa { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .fluxo-seta { transform: rotate(90deg); flex-basis: auto; padding: 4px 0; }
  .fluxo-cadeia { flex-direction: column; }
  .formulario, .form-wrap__topo { padding: var(--s-4); }
  .mock-celular { display: none; }
  .btn { width: 100%; }
  .hero__acoes .btn { width: auto; }
  .hero__acoes { flex-direction: column; align-items: stretch; }
  .hero__acoes .btn { width: 100%; }
}

@media (max-width: 480px) {
  .cabecalho__marca img { height: 28px; }
  .cabecalho__programa { font-size: .6rem; letter-spacing: .07em; }
  .chips-operacao { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numeros { grid-template-columns: 1fr; }
  .timeline__passo { gap: var(--s-3); }
  .faixa-credibilidade__inner { gap: 8px var(--s-3); font-size: .76rem; }
}

/* ------------------------------ IMPRESSÃO ---------------------------- */
@media print {
  .cabecalho, .barra-mobile, .btn, .hero__grafismo, .hero__brilho { display: none !important; }
  .secao--escura, .hero, .cta-final { background: #fff !important; color: #000 !important; }
  .secao--escura h2, .secao--escura h3, .secao--escura p { color: #000 !important; }
  body { font-size: 11pt; }
}