/* =====================================================================
   Public Seven — site institucional
   Claro por padrão: marinho #002556 e verde-água #029094 da marca, âmbar nas chamadas
   e faixas em areia para separar os assuntos. Fonte Geist (a mesma do painel).
   ===================================================================== */
:root {
  --marinho: #002556;
  --marinho-fundo: #001a3d;
  --agua: #029094;
  --agua-escura: #016c6f;
  --ambar: #f5b301;
  --ambar-escuro: #d99c00;
  --areia: #f4f1ea;
  --papel: #f5f7fb;
  --tinta: #14213a;
  --suave: #55617a;
  --linha: #dfe4ec;
  --raio: 10px;
  --largura: 1200px;
  --fonte: "Geist", "Segoe UI", Roboto, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--fonte); color: var(--tinta); background: #fff; line-height: 1.6; font-size: 1.0625rem; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--agua-escura); text-underline-offset: 3px; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .6em; color: var(--marinho); }
h2 { font-size: clamp(1.7rem, 3vw, 2.35rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; border-radius: 4px; }
.largura { max-width: var(--largura); margin: 0 auto; padding: 0 24px; }
.centro { text-align: center; margin-top: 34px; }
.icone { width: 22px; height: 22px; flex-shrink: 0; }
.pular { position: absolute; left: -999px; top: 8px; z-index: 100; background: #000; color: #fff; padding: 8px 14px; border-radius: 6px; }
.pular:focus { left: 8px; }

/* ---------- Botões ---------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 8px; border: 2px solid transparent; font: inherit; font-weight: 700; font-size: .9375rem; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; white-space: nowrap; }
.botao .icone { width: 18px; height: 18px; }
.botao-grande { min-height: 54px; padding: 0 28px; font-size: 1.0625rem; }
.botao-ambar { background: var(--ambar); color: #1c1600; }
.botao-ambar:hover { background: var(--ambar-escuro); }
.botao-marinho { background: var(--marinho); color: #fff; }
.botao-marinho:hover { background: var(--marinho-fundo); }
.botao-contorno { border-color: var(--marinho); color: var(--marinho); background: transparent; }
.botao-contorno:hover { background: var(--marinho); color: #fff; }
.botao-claro { background: #fff; color: var(--marinho); }
.botao-claro:hover { background: #dff3f3; }
.botao-vidro { border-color: rgba(255, 255, 255, .65); color: #fff; background: rgba(255, 255, 255, .08); }
.botao-vidro:hover { background: #fff; color: var(--marinho); border-color: #fff; }

/* ---------- Topo ---------- */
.topo { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--linha); backdrop-filter: saturate(1.4) blur(8px); }
.topo-linha { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.marca img { height: 44px; width: auto; }
.menu { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.menu ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.menu ul a { display: block; padding: 9px 13px; border-radius: 8px; color: var(--tinta); text-decoration: none; font-weight: 600; font-size: .9375rem; }
.menu ul a:hover, .menu ul a.ativa { color: var(--marinho); background: #eaf0f8; }
.abrir-menu { display: none; margin-left: auto; width: 46px; height: 46px; border: 1px solid var(--linha); border-radius: 8px; background: #fff; color: var(--marinho); cursor: pointer; align-items: center; justify-content: center; }

/* ---------- Capa ---------- */
.capa { position: relative; color: #fff; background: linear-gradient(100deg, rgba(0, 26, 61, .94) 0%, rgba(0, 37, 86, .82) 46%, rgba(0, 37, 86, .38) 100%), var(--foto) center / cover no-repeat, var(--marinho-fundo); }
.capa-conteudo { padding-top: 110px; padding-bottom: 120px; max-width: var(--largura); }
.selo { display: inline-block; margin: 0 0 22px; padding: 6px 12px; border-radius: 6px; background: var(--ambar); color: #1c1600; font-size: .875rem; font-weight: 700; }
.capa h1 { color: #fff; font-size: clamp(2.3rem, 5.2vw, 4.1rem); font-weight: 700; max-width: 15ch; margin-bottom: 22px; }
.capa-texto { font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 58ch; color: #dbe6f7; margin-bottom: 34px; }
.capa-acoes { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Faixas ---------- */
.faixa { padding: 92px 0; }
.faixa-areia { background: var(--areia); }
.faixa-papel { background: var(--papel); }
.faixa-marinho { background: var(--marinho); color: #dbe6f7; }
.faixa-marinho h2, .faixa-marinho h3 { color: #fff; }
.faixa-marinho a:not(.botao) { color: #8fe3e4; }
.cabecalho-secao { max-width: 760px; margin-bottom: 44px; }
.cabecalho-secao p { color: var(--suave); font-size: 1.15rem; margin: 0; }
.faixa-marinho .cabecalho-secao p { color: #b9c8e4; }
.texto-grande { font-size: 1.2rem; line-height: 1.55; color: inherit; }
.titulo-largo { max-width: 22ch; font-size: clamp(1.6rem, 3vw, 2.3rem); }

/* ---------- Números ---------- */
.faixa-numeros { padding: 76px 0 70px; border-bottom: 1px solid var(--linha); }
.numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; margin: 44px 0 0; }
.numeros div { border-top: 3px solid var(--marinho); padding-top: 16px; }
.numeros dt { font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--marinho); }
.numeros dd { margin: 10px 0 0; color: var(--suave); font-size: .9375rem; }
.numeros-claros { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 30px; gap: 20px; }
.numeros-claros dt { font-size: 2rem; }
.numeros-claros div { border-top-color: var(--agua); }

/* ---------- Comparação ---------- */
.comparacao { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.comparacao-lado { border-radius: 14px; padding: 30px 30px 26px; }
.comparacao-lado h3 { font-size: 1.3rem; margin-bottom: 18px; }
.comparacao-lado ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.comparacao-lado li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.comparacao-lado .icone { width: 26px; height: 26px; padding: 5px; border-radius: 50%; margin-top: 1px; }
.antes { background: #fff; border: 1px solid #e3ddd0; }
.antes .icone { background: #f6dedb; color: #a8261d; }
.depois { background: var(--marinho); color: #dbe6f7; }
.depois h3, .depois strong { color: #fff; }
.depois .icone { background: var(--agua); color: #fff; }

/* ---------- Cartões ---------- */
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cartao-foto { border: 1px solid var(--linha); border-radius: 14px; overflow: hidden; background: #fff; }
.cartao-foto img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.cartao-foto > div { padding: 26px 28px 28px; }
.cartao-foto h3, .cartao h3 { display: flex; align-items: center; gap: 10px; font-size: 1.4rem; }
.cartao-foto h3 .icone, .cartao > .icone { color: var(--agua); width: 28px; height: 28px; }
.cartao { border: 1px solid var(--linha); border-radius: 14px; padding: 30px; background: #fff; }
.cartao > .icone { margin-bottom: 14px; }
.lista-curta { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--linha); display: grid; gap: 6px; font-weight: 600; font-size: .9375rem; color: var(--marinho); }
.lista-curta li::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--agua); border-radius: 2px; }
.grade-modulos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grade-modulos article { background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 24px 24px 20px; }
.grade-modulos .icone { width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: #e3f4f4; color: var(--agua-escura); margin-bottom: 14px; }
.grade-modulos p { margin: 0; color: var(--suave); font-size: .9688rem; }
.grade-modulos.escura article { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
.grade-modulos.escura .icone { background: rgba(2, 144, 148, .32); color: #9ff0f1; }
.grade-modulos.escura p { color: #b9c8e4; }

/* ---------- Passos ---------- */
.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; counter-reset: passo; }
.passos li { position: relative; padding-top: 22px; border-top: 3px solid var(--linha); }
.passos li > span { position: absolute; top: -20px; left: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--marinho); color: #fff; font-weight: 800; display: grid; place-items: center; }
.passos li:last-child { border-top-color: var(--ambar); }
.passos li:last-child > span { background: var(--ambar); color: #1c1600; }
.passos h3 { margin: 12px 0 6px; }
.passos p { margin: 0; color: var(--suave); font-size: .9688rem; }

/* ---------- Texto + foto ---------- */
.duas-colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.foto-moldura { margin: 0; position: relative; }
.foto-moldura img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; }
.foto-moldura::after { content: ""; position: absolute; right: -14px; bottom: -14px; width: 46%; height: 46%; border-radius: 14px; background: var(--agua); z-index: -1; }
.faixa-marinho .foto-moldura::after { background: var(--ambar); z-index: 0; }
.faixa-marinho .foto-moldura img { position: relative; z-index: 1; }
.lista-marcas { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 12px; }
.lista-marcas li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.lista-marcas .icone { color: var(--agua); margin-top: 2px; }
.faixa-marinho .lista-marcas .icone { color: #7fe0e1; }

/* ---------- Chamada final ---------- */
.faixa-chamada { background: var(--marinho-fundo); color: #dbe6f7; padding: 70px 0; position: relative; overflow: hidden; }
.faixa-chamada::before { content: ""; position: absolute; inset: 0; background: url("/assets/img/padrao-colunas.svg") right -40px center / auto 150% no-repeat; opacity: .5; }
.chamada { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.chamada h2 { color: #fff; margin-bottom: 8px; max-width: 24ch; }
.chamada p { margin: 0; max-width: 56ch; }

/* ---------- Cabeçalho das páginas internas ---------- */
.cabecalho-pagina { color: #fff; padding: 74px 0 78px; background: linear-gradient(100deg, rgba(0, 26, 61, .95) 0%, rgba(0, 37, 86, .84) 55%, rgba(0, 37, 86, .5) 100%), var(--foto) center / cover no-repeat, var(--marinho-fundo); }
.cabecalho-pagina h1 { color: #fff; font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 700; max-width: 20ch; margin-bottom: 14px; }
.cabecalho-pagina p { font-size: 1.2rem; max-width: 62ch; margin: 0; color: #dbe6f7; }
.trilha { list-style: none; margin: 0 0 20px; padding: 0; display: flex; gap: 8px; font-size: .875rem; color: #b9c8e4; }
.trilha a { color: #fff; }
.trilha li + li::before { content: "›"; margin-right: 8px; }

/* ---------- Módulos (página) ---------- */
.grupos-modulos { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.grupo-modulo { border: 1px solid var(--linha); border-radius: 14px; padding: 26px 28px; }
.grupo-modulo header { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; margin-bottom: 16px; }
.grupo-modulo header .icone { width: 46px; height: 46px; padding: 11px; border-radius: 12px; background: var(--marinho); color: #fff; }
.grupo-modulo h3 { margin: 0 0 2px; font-size: 1.3rem; }
.grupo-modulo header p { margin: 0; color: var(--suave); font-size: .9375rem; }
.grupo-modulo ul { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--linha); display: grid; gap: 8px; }
.grupo-modulo li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: .9688rem; }
.grupo-modulo li .icone { width: 20px; height: 20px; color: var(--agua); margin-top: 3px; }

/* ---------- Contato ---------- */
.contato-grade { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 50px; align-items: start; }
.grade-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.campo { margin-bottom: 18px; display: grid; gap: 6px; }
.campo label { font-weight: 700; font-size: .9375rem; color: var(--marinho); }
.opcional { font-weight: 400; color: var(--suave); }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 50px; padding: 11px 14px; border: 1px solid #c4ccd8; border-radius: 9px; font: inherit; color: var(--tinta); background: #fff; }
.campo select { appearance: none; -webkit-appearance: none; padding-right: 38px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2355617a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") right 14px center / 12px 8px no-repeat; }
.campo textarea { resize: vertical; min-height: 130px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--agua); box-shadow: 0 0 0 4px rgba(2, 144, 148, .18); }
.campo [aria-invalid="true"] { border-color: #b3261e; }
.erro { color: #a8261d; font-size: .875rem; }
.campo-oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; color: var(--suave); font-size: .9375rem; }
.cf-turnstile { margin-bottom: 16px; }
.aviso { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 16px 18px; border-radius: 10px; margin-bottom: 22px; }
.aviso .icone { width: 28px; height: 28px; padding: 5px; border-radius: 50%; color: #fff; }
.aviso-sucesso { background: #e3f4f4; border: 1px solid #9fd6d7; }
.aviso-sucesso .icone { background: var(--agua); }
.aviso-erro { background: #fbeceb; border: 1px solid #ecb8b4; }
.aviso-erro .icone { background: #b3261e; }
.contato-lateral { background: var(--areia); border-radius: 14px; padding: 30px; }
.contato-lateral h2 { font-size: 1.35rem; }
.contato-lateral ol { margin: 0 0 24px; padding-left: 20px; display: grid; gap: 8px; }
.contato-lista { list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid #ddd6c6; display: grid; gap: 16px; }
.contato-lista li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; }
.contato-lista .icone { color: var(--agua-escura); margin-top: 2px; }
.contato-lista strong { display: block; color: var(--marinho); }
.contato-lista span { color: var(--suave); font-size: .9375rem; }

/* ---------- Texto corrido, erro ---------- */
.texto-corrido { max-width: 780px; }
.texto-corrido h2 { font-size: 1.4rem; margin-top: 1.6em; }
.pagina-erro { text-align: center; padding: 110px 0 120px; }
.erro-numero { font-size: clamp(5rem, 14vw, 9rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--agua); margin: 0 0 8px; }
.pagina-erro h1 { font-size: 2rem; }
.pagina-erro .botao { margin: 14px 6px 0; }

/* ---------- Rodapé ---------- */
.rodape { background: #00122b; color: #b9c8e4; font-size: .9375rem; }
.rodape-colunas { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-top: 60px; padding-bottom: 46px; }
.rodape h2 { font-size: .9375rem; color: #fff; letter-spacing: 0; margin-bottom: 14px; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.rodape a { color: #dbe6f7; text-decoration: none; }
.rodape a:hover { color: #fff; text-decoration: underline; }
.rodape-marca img { height: 42px; width: auto; margin-bottom: 16px; }
.rodape-marca p { max-width: 38ch; }
.rodape-brasil { display: flex; align-items: center; gap: 8px; color: #7fe0e1; font-weight: 600; }
.rodape-brasil .icone { width: 18px; height: 18px; }
.rodape-fim { border-top: 1px solid rgba(255, 255, 255, .12); padding: 18px 0; font-size: .8438rem; color: #8ea0c2; }
.rodape-fim .largura { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- Telas menores ---------- */
@media (max-width: 1020px) {
  .abrir-menu { display: inline-flex; }
  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 24px 22px; background: #fff; border-bottom: 1px solid var(--linha); box-shadow: 0 18px 30px -20px rgba(0, 26, 61, .5); }
  .menu.aberto { display: flex; }
  .menu ul { flex-direction: column; }
  .grade-modulos, .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
  .duas-colunas, .contato-grade, .grupos-modulos { grid-template-columns: 1fr; gap: 36px; }
  .duas-colunas.invertida .foto-moldura { order: 2; }
  .rodape-colunas { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  body { font-size: 1rem; }
  .faixa { padding: 60px 0; }
  .capa-conteudo { padding-top: 70px; padding-bottom: 76px; }
  .comparacao, .dupla, .grade-modulos, .grade-campos, .numeros-claros { grid-template-columns: 1fr; }
  .numeros { gap: 22px; }
  .passos { grid-template-columns: 1fr; }
  .comparacao-lado, .cartao, .grupo-modulo, .contato-lateral { padding: 22px; }
  .foto-moldura::after { right: -8px; bottom: -8px; }
  .rodape-colunas { grid-template-columns: 1fr; gap: 28px; }
  .botao-grande { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .botao { transition: none; } }
@media print { .topo, .rodape, .faixa-chamada { display: none; } }

/* ---------- Sombra embaixo do menu, da capa e do cabeçalho das páginas ---------- */
.topo { box-shadow: 0 6px 18px -10px rgba(0, 26, 61, .38); }
.capa, .cabecalho-pagina { position: relative; z-index: 2; box-shadow: 0 16px 30px -16px rgba(0, 26, 61, .55); }

/* ---------- Textura de ondas nas faixas em marinho ---------- */
.faixa-marinho { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(120% 90% at 85% 0%, #0a3a7a 0%, rgba(10, 58, 122, 0) 60%), var(--marinho); }
.faixa-marinho::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/assets/img/ondas.svg") center / cover no-repeat; pointer-events: none; }

/* ---------- Ondas em camadas na faixa de areia (diferente das linhas da faixa marinho) ---------- */
.faixa-ondas-areia { position: relative; isolation: isolate; overflow: hidden; }
.faixa-ondas-areia::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/assets/img/ondas-areia.svg") center / 100% 100% no-repeat; pointer-events: none; }

/* ---------- Quadros dos grupos de módulos: cada um com o seu tom, anéis no canto e um véu de cor ---------- */
.grupo-modulo { --tom: var(--marinho); position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(155deg, color-mix(in srgb, var(--tom) 9%, #fff) 0%, #fff 46%); border-color: color-mix(in srgb, var(--tom) 22%, var(--linha)); border-top: 4px solid var(--tom); box-shadow: 0 1px 2px rgba(0, 26, 61, .05), 0 18px 34px -26px color-mix(in srgb, var(--tom) 70%, transparent); }
.grupo-modulo::before { content: ""; position: absolute; top: -70px; right: -70px; width: 300px; height: 300px; z-index: -1; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 17px, color-mix(in srgb, var(--tom) 20%, transparent) 17px 18.5px);
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 70%); mask: radial-gradient(circle, #000 0%, transparent 70%); }
.grupo-modulo::after { content: ""; position: absolute; left: 28px; bottom: 0; width: 64px; height: 4px; border-radius: 4px 4px 0 0; background: var(--tom); opacity: .85; }
.grupo-modulo header .icone { background: var(--tom); box-shadow: 0 8px 16px -8px var(--tom); }
.grupo-modulo h3 { color: color-mix(in srgb, var(--tom) 82%, #000); }
.grupo-modulo ul { border-top-color: color-mix(in srgb, var(--tom) 18%, var(--linha)); }
.grupo-modulo li .icone { color: var(--tom); }
.grupo-modulo:nth-child(6n + 2) { --tom: #029094; }
.grupo-modulo:nth-child(6n + 3) { --tom: #c58a00; }
.grupo-modulo:nth-child(6n + 4) { --tom: #1c4fa0; }
.grupo-modulo:nth-child(6n + 5) { --tom: #0d7a60; }
.grupo-modulo:nth-child(6n + 6) { --tom: #54408f; }