/* =====================================================================
   ACIPOÁ — Design system
   Tokens extraídos do kit global do site atual.
   ===================================================================== */

:root {
  /* Cores da marca */
  --azul: #09a1ea;
  --azul-escuro: #077cb5;
  --azul-claro: #e8f6fe;
  --verde: #00a857;
  --verde-fundo: #017c41;
  --verde-claro: #e6f7ee;
  --amarelo: #fdf109;
  --escuro: #010b19;
  --escuro-2: #051b3a;
  --branco: #ffffff;

  /* Neutros */
  --cinza-900: #1f2933;
  --cinza-700: #3e4c59;
  --cinza-500: #7b8794;
  --cinza-300: #cbd2d9;
  --cinza-200: #e4e7eb;
  --cinza-100: #f2f5f8;
  --cinza-50: #f9fafb;

  /* Estados */
  --erro: #d64545;
  --erro-fundo: #fdecec;
  --sucesso: #00a857;
  --sucesso-fundo: #e6f7ee;
  --aviso: #b7791f;
  --aviso-fundo: #fdf6e3;

  /* Texto */
  --texto: var(--escuro);
  --texto-suave: #55606d;
  --texto-claro: rgba(255, 255, 255, 0.85);

  /* Tipografia */
  --fonte: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --fs-h1: 40px;
  --fs-h2: 36px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-corpo: 16px;
  --fs-pequeno: 14px;
  --fs-botao: 18px;

  /* Layout */
  --container: 1180px;
  --gutter: 20px;
  --secao-y: 104px;
  --secao-y-mobile: 56px;

  /* Formas */
  --raio: 10px;
  --raio-card: 24px;
  --raio-pill: 999px;

  --sombra-card: 0 20px 20px rgba(0, 0, 0, 0.49);
  --sombra-suave: 0 4px 16px rgba(1, 11, 25, 0.08);
  --sombra-media: 0 8px 28px rgba(1, 11, 25, 0.12);

  --transicao: 200ms ease;

  --cabecalho-altura: 176px;
}

/* ---------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--fs-corpo);
  line-height: 1.44;
  color: var(--texto);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Os títulos do site seguem a hierarquia H1 → H2 → H3 sem saltos. Onde o
   nível da tag precisou mudar por causa disso, o elemento carrega a classe
   `nivel-N` com o nível antigo — e os seletores abaixo usam a forma
   `:is(hN:where(:not([class*="nivel-"])), :where(.nivel-N))`, que casa com
   «o que visualmente é um HN» mantendo a especificidade de um seletor de
   tag. Assim a aparência não depende do nível semântico. */

h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; line-height: 1.15; font-weight: 700; }
h1 { font-size: var(--fs-h1); font-weight: 600; }
:is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)) { font-size: var(--fs-h2); font-weight: 600; }
:is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)) { font-size: var(--fs-h3); }
:is(h4:where(:not([class*="nivel-"])), :where(.nivel-4)) { font-size: var(--fs-h4); font-weight: 500; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--azul); text-decoration: none; transition: color var(--transicao); }
a:hover { color: var(--azul-escuro); }

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

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: 0.35em; }

button { font: inherit; cursor: pointer; }

hr { border: 0; border-top: 1px solid var(--cinza-200); margin: 32px 0; }

table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--azul); color: #fff; }

/* ---------------------------------------------------------------------
   Utilitários de layout
   --------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--estreito { max-width: 860px; }
.container--largo { max-width: 1320px; }

.secao { padding-block: var(--secao-y); position: relative; }
.secao--compacta { padding-block: 64px; }

.secao--escura {
  background: var(--escuro-2);
  color: var(--branco);
}

.secao--escura h1,
.secao--escura :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)),
.secao--escura :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)),
.secao--escura :is(h4:where(:not([class*="nivel-"])), :where(.nivel-4)) { color: var(--branco); }

.secao--preta {
  background: var(--escuro);
  color: var(--branco);
}

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

.secao__titulo {
  text-align: center;
  margin-bottom: 48px;
}

.secao__titulo :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)) { margin-bottom: 12px; }

.secao__titulo p {
  max-width: 720px;
  margin-inline: auto;
  color: var(--texto-suave);
}

.secao--escura .secao__titulo p { color: var(--texto-claro); }

.grade { display: grid; gap: 24px; }
.grade--2 { grid-template-columns: repeat(2, 1fr); }
.grade--3 { grid-template-columns: repeat(3, 1fr); }
.grade--4 { grid-template-columns: repeat(4, 1fr); }
.grade--auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.flex { display: flex; gap: 16px; }
.flex--centro { align-items: center; }
.flex--entre { justify-content: space-between; }
.flex--meio { justify-content: center; }
.flex--quebra { flex-wrap: wrap; }
.flex--coluna { flex-direction: column; }

.texto-centro { text-align: center; }
.texto-direita { text-align: right; }

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }

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

.pular-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--azul);
  color: #fff;
  border-radius: 0 0 var(--raio) 0;
}

.pular-conteudo:focus { left: 0; color: #fff; }

/* ---------------------------------------------------------------------
   Separadores curvos entre seções
   --------------------------------------------------------------------- */

.curva {
  position: absolute;
  left: 0;
  width: 100%;
  line-height: 0;
  pointer-events: none;
  overflow: hidden;
}

.curva--baixo { bottom: -1px; }
.curva--cima { top: -1px; transform: rotate(180deg); }
.curva svg { width: calc(100% + 2px); height: 60px; display: block; }

/* ---------------------------------------------------------------------
   Botões
   --------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 28px;
  border: 2px solid transparent;
  border-radius: var(--raio);
  font-size: var(--fs-botao);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao),
              border-color var(--transicao), transform var(--transicao),
              box-shadow var(--transicao);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--azul { background: var(--azul); color: #fff; }
.btn--azul:hover { background: var(--azul-escuro); color: #fff; }

.btn--verde { background: var(--verde); color: #fff; }
.btn--verde:hover { background: var(--verde-fundo); color: #fff; }

.btn--amarelo { background: var(--amarelo); color: var(--escuro); }
.btn--amarelo:hover { background: #e8dd08; color: var(--escuro); }

.btn--branco { background: #fff; color: var(--azul); }
.btn--branco:hover { background: var(--cinza-100); color: var(--azul-escuro); }

.btn--contorno {
  background: transparent;
  color: var(--azul);
  border-color: var(--azul);
}

.btn--contorno:hover { background: var(--azul); color: #fff; }

.btn--contorno-branco {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}

.btn--contorno-branco:hover { background: #fff; color: var(--escuro-2); }

.btn--fantasma {
  background: transparent;
  color: var(--texto-suave);
  border-color: var(--cinza-300);
}

.btn--fantasma:hover { background: var(--cinza-100); color: var(--texto); }

.btn--perigo { background: var(--erro); color: #fff; }
.btn--perigo:hover { background: #b93636; color: #fff; }

.btn--pequeno { padding: 10px 18px; font-size: 15px; border-radius: 8px; }
.btn--grande { padding: 22px 36px; font-size: 20px; }
.btn--bloco { display: flex; width: 100%; }

.btn[disabled],
.btn.esta-carregando {
  opacity: 0.6;
  pointer-events: none;
  transform: none;
}

.btn svg { width: 1.1em; height: 1.1em; flex-shrink: 0; }

/* ---------------------------------------------------------------------
   Cartões
   --------------------------------------------------------------------- */

.card {
  background: #fff;
  border: 1px solid var(--cinza-200);
  border-radius: var(--raio-card);
  padding: 28px;
  transition: box-shadow var(--transicao), transform var(--transicao);
}

.card--interativo:hover {
  box-shadow: var(--sombra-media);
  transform: translateY(-4px);
}

.card--verde {
  background: linear-gradient(var(--verde) 0%, var(--verde-fundo) 100%);
  border: 0;
  color: #fff;
  box-shadow: var(--sombra-card);
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card--verde :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)),
.card--verde :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)) { color: #fff; }

.card--verde p { color: rgba(255, 255, 255, 0.92); }

/* ---------------------------------------------------------------------
   Etiquetas
   --------------------------------------------------------------------- */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--raio-pill);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  background: var(--cinza-100);
  color: var(--texto-suave);
  white-space: nowrap;
}

.etiqueta--azul { background: var(--azul-claro); color: var(--azul-escuro); }
.etiqueta--verde { background: var(--verde-claro); color: var(--verde-fundo); }
.etiqueta--amarela { background: #fdfbcd; color: #7a6f00; }
.etiqueta--cinza { background: var(--cinza-200); color: var(--cinza-700); }
.etiqueta--erro { background: var(--erro-fundo); color: var(--erro); }

/* ---------------------------------------------------------------------
   Mensagens
   --------------------------------------------------------------------- */

.aviso {
  padding: 16px 20px;
  border-radius: var(--raio);
  border-left: 4px solid;
  margin-bottom: 20px;
  font-size: 15px;
}

.aviso p:last-child { margin-bottom: 0; }
.aviso ul { margin: 0; padding-left: 18px; }

.aviso--sucesso { background: var(--sucesso-fundo); border-color: var(--sucesso); color: #036c39; }
.aviso--erro { background: var(--erro-fundo); border-color: var(--erro); color: #9e2c2c; }
.aviso--info { background: var(--azul-claro); border-color: var(--azul); color: #05668f; }
.aviso--atencao { background: var(--aviso-fundo); border-color: var(--aviso); color: #8a5a06; }

/* ---------------------------------------------------------------------
   Formulários
   --------------------------------------------------------------------- */

.campo { margin-bottom: 20px; }

.campo__rotulo {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--texto);
}

.campo__obrigatorio { color: var(--erro); }

.campo__ajuda {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--texto-suave);
}

.campo__erro {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--erro);
}

.entrada,
.selecao,
.area-texto {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--cinza-300);
  border-radius: var(--raio);
  background: #fff;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  color: var(--texto);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

.entrada::placeholder,
.area-texto::placeholder { color: var(--cinza-500); }

.entrada:focus,
.selecao:focus,
.area-texto:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(9, 161, 234, 0.18);
}

.entrada--erro,
.selecao--erro,
.area-texto--erro { border-color: var(--erro); }

.entrada--erro:focus,
.area-texto--erro:focus { box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.18); }

.area-texto { min-height: 130px; resize: vertical; }

.selecao {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%237b8794' d='M1.4 0 7 5.6 12.6 0 14 1.4 7 8.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}

.entrada[disabled],
.selecao[disabled],
.area-texto[disabled] {
  background: var(--cinza-100);
  color: var(--cinza-500);
  cursor: not-allowed;
}

.campo-senha { position: relative; }
.campo-senha .entrada { padding-right: 48px; }

.campo-senha__olho {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--cinza-500);
  border-radius: 6px;
}

.campo-senha__olho:hover { color: var(--texto); background: var(--cinza-100); }

.opcao {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 15px;
  cursor: pointer;
}

.opcao input { margin-top: 3px; accent-color: var(--azul); width: 18px; height: 18px; flex-shrink: 0; }

.linha-campos {
  display: grid;
  gap: 0 20px;
  grid-template-columns: repeat(2, 1fr);
}

.linha-campos--3 { grid-template-columns: repeat(3, 1fr); }
.linha-campos--4 { grid-template-columns: repeat(4, 1fr); }

.form-acoes {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}

fieldset {
  border: 1px solid var(--cinza-200);
  border-radius: var(--raio-card);
  padding: 24px;
  margin: 0 0 24px;
}

legend {
  padding: 0 10px;
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--escuro-2);
}

/* ---------------------------------------------------------------------
   Repetidores (formação, cursos, experiências, idiomas, requisitos)
   --------------------------------------------------------------------- */

.repetidor__item {
  position: relative;
  border: 1px solid var(--cinza-200);
  border-radius: var(--raio);
  padding: 20px 20px 4px;
  margin-bottom: 16px;
  background: var(--cinza-50);
}

.repetidor__remover {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--cinza-500);
  font-size: 20px;
  line-height: 1;
}

.repetidor__remover:hover { background: var(--erro-fundo); color: var(--erro); }

.repetidor__vazio {
  padding: 20px;
  border: 1px dashed var(--cinza-300);
  border-radius: var(--raio);
  text-align: center;
  color: var(--texto-suave);
  font-size: 15px;
  margin-bottom: 16px;
}

/* ---------------------------------------------------------------------
   Paginação
   --------------------------------------------------------------------- */

.paginacao {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding: 0;
  list-style: none;
}

.paginacao li { margin: 0; }

.paginacao a,
.paginacao span {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--cinza-300);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--texto-suave);
  background: #fff;
}

.paginacao a:hover { border-color: var(--azul); color: var(--azul); }

.paginacao .esta-ativo {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
}

.paginacao .esta-desativado { opacity: 0.4; pointer-events: none; }

/* ---------------------------------------------------------------------
   Estados de lista
   --------------------------------------------------------------------- */

.vazio {
  padding: 56px 24px;
  text-align: center;
  color: var(--texto-suave);
  border: 1px dashed var(--cinza-300);
  border-radius: var(--raio-card);
}

.vazio :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)) { color: var(--texto); margin-bottom: 8px; }

.carregando {
  display: grid;
  place-items: center;
  padding: 48px;
  color: var(--texto-suave);
}

.girador {
  width: 34px;
  height: 34px;
  border: 3px solid var(--cinza-200);
  border-top-color: var(--azul);
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

.esta-oculto { display: none !important; }

/* ---------------------------------------------------------------------
   Conteúdo editorial (notícias, páginas de texto)
   --------------------------------------------------------------------- */

.conteudo { font-size: 17px; line-height: 1.7; }
.conteudo > *:first-child { margin-top: 0; }
.conteudo :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)) { font-size: 28px; margin: 40px 0 16px; }
.conteudo :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)) { font-size: 22px; margin: 32px 0 12px; }
.conteudo p { margin-bottom: 1.2em; }
.conteudo ul, .conteudo ol { margin-bottom: 1.2em; padding-left: 24px; }
.conteudo img { border-radius: var(--raio); margin: 24px 0; }
.conteudo figure { margin: 24px 0; }
.conteudo figcaption { font-size: 14px; color: var(--texto-suave); margin-top: 8px; text-align: center; }
.conteudo a { text-decoration: underline; }

.conteudo blockquote {
  margin: 28px 0;
  padding: 18px 24px;
  border-left: 4px solid var(--azul);
  background: var(--cinza-50);
  border-radius: 0 var(--raio) var(--raio) 0;
  font-style: italic;
}

.conteudo iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--raio);
  margin: 24px 0;
}

.conteudo table { margin: 24px 0; font-size: 15px; }
.conteudo th, .conteudo td { padding: 10px 14px; border: 1px solid var(--cinza-200); text-align: left; }
.conteudo th { background: var(--cinza-100); font-weight: 700; }

/* ---------------------------------------------------------------------
   Responsivo
   --------------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root {
    --fs-h1: 34px;
    --fs-h2: 30px;
    --fs-h3: 22px;
    --secao-y: 72px;
  }

  .grade--4 { grid-template-columns: repeat(2, 1fr); }
  .grade--3 { grid-template-columns: repeat(2, 1fr); }
  .linha-campos--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root {
    --fs-h1: 28px;
    --fs-h2: 26px;
    --fs-h3: 20px;
    --fs-botao: 16px;
    --secao-y: var(--secao-y-mobile);
  }

  .grade--2,
  .grade--3,
  .grade--4 { grid-template-columns: 1fr; }

  .linha-campos,
  .linha-campos--3,
  .linha-campos--4 { grid-template-columns: 1fr; }

  .btn { padding: 15px 22px; }
  .btn--grande { padding: 18px 28px; font-size: 18px; }

  .card { padding: 22px; }
  fieldset { padding: 18px; }

  .curva svg { height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .cabecalho, .rodape, .botao-flutuante, .paginacao, .btn { display: none !important; }
  body { color: #000; }
  .secao { padding-block: 12px; }
}

/* ---------------------------------------------------------------------
   Botão escuro — usado dentro dos blocos coloridos das páginas internas
   --------------------------------------------------------------------- */

.btn--escuro { background: var(--escuro-2); color: #fff; }
.btn--escuro:hover { background: var(--escuro); color: #fff; }