/* Lá Vou Eu Business Travel · site público. Identidade do site original, refeita sem WordPress/Elementor.
   Mobile primeiro. Sem estilos inline (CSP). Contraste AA conferido em cada combinação de cor. */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/dm-sans-400.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: block; src: url("../fonts/dm-sans-700.woff2") format("woff2"); }

/* ===== MARCA ===== */
:root {
  --marinho: #212A59;      /* cor principal: títulos, faixas escuras, rodapé */
  --marinho-2: #1a2147;
  --azul: #05699E;         /* barra do topo, links, botões secundários */
  --azul-escuro: #045683;
  --azul-claro: #e3eff6;
  --ouro: #DD931B;         /* destaque sobre fundo escuro e botão Compre Online (texto marinho) */
  --ouro-texto: #A8660A;   /* destaque dourado sobre fundo claro (contraste AA) */
  --verde: #0F7A40;        /* botões de ação (texto branco, contraste 5,4:1) */
  --verde-escuro: #0b6233;
  --verde-brilho: rgba(37, 211, 102, .35);
  --cinza: #ECF0F3;        /* fundo das faixas claras */
  --texto: #5B6068;
  --texto-claro: #C9D2E3;  /* texto sobre marinho */
  --borda: #dde3ea;
  --branco: #fff;
  --erro: #b42318;
  --ok: #067647;
  --fonte: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --raio: 20px;
  --raio-g: 28px;
  --raio-p: 12px;
  --sombra: 0 18px 40px -24px rgba(33, 42, 89, .45);
  --topo: 72px;
  /* Bússola do logo (mesma ordem do símbolo): rosa, laranja, verde, azul. Versões escuras para ícones sobre fundo claro. */
  --rosa: #F01554; --laranja: #FF9000; --verde-b: #83AA03; --azul-b: #0068A0;
  --rosa-e: #C8124A; --laranja-e: #A05800; --verde-be: #5A7502; --azul-be: #00598A;
  --bussola: linear-gradient(90deg, var(--rosa) 0 25%, var(--laranja) 25% 50%, var(--verde-b) 50% 75%, var(--azul-b) 75% 100%);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topo) + 16px); }
body { margin: 0; font: 400 1rem/1.65 var(--fonte); color: var(--texto); background: var(--branco); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--azul); }
h1, h2, h3, h4 { margin: 0; font-weight: 700; color: var(--marinho); line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }
/* Parágrafos e itens sem palavra sozinha na última linha. */
p, li, dd, figcaption, blockquote { text-wrap: pretty; }
/* Cartões da mesma linha com alturas iguais: o conteúdo começa no topo em todos (sem espaço distribuído entre as linhas). */
.cartao-atend, .ferramenta-card, .passo, .avaliacao { align-content: start; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--marinho); color: #fff; padding: 10px 16px; border-radius: var(--raio-p); }
.pular:focus { top: 12px; }
/* Foco sempre visível: azul sólido no claro, branco no escuro (contraste de pelo menos 3:1 com o fundo). */
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.faixa--marinho :focus-visible, .faixa--gradiente :focus-visible, .cartao--marinho :focus-visible, .cartao--azul :focus-visible, .heroi-interno--escuro :focus-visible,
.resultado :focus-visible, .barra-topo :focus-visible, .rodape :focus-visible, .app :focus-visible, .numeros :focus-visible, .links-pagina :focus-visible { outline-color: #fff; }
.aviso-prototipo { background: #fff6e8; color: #7a3600; font-size: .8125rem; font-weight: 700; text-align: center; padding: 5px 16px; }
/* Só o recuo lateral: o vertical fica com cada bloco (.post, .heroi__texto…), que também é container. */
.container { width: 100%; max-width: 1286px; margin: 0 auto; padding-inline: 20px; }
.ico { width: 20px; height: 20px; flex: none; }
.ouro { color: var(--ouro-texto); }
.escuro .ouro, .faixa--marinho .ouro, .cartao--marinho .ouro, .cartao--azul .ouro, .heroi-interno--escuro .ouro { color: var(--ouro); }
/* Sobre o degradê azul → marinho o dourado precisa ser mais claro (4,2:1 no ponto mais claro do fundo). */
.faixa--gradiente .ouro { color: #FFD27A; }

/* ---------- Botões ---------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 13px 28px; border-radius: 999px; border: 1px solid transparent; font-weight: 700; font-size: .975rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .15s, box-shadow .2s, transform .15s, color .15s; text-align: center; }
.botao .ico { width: 18px; height: 18px; }
/* Botão com texto longo que quebra (celular): linhas equilibradas, sem uma palavra sozinha embaixo. */
.botao { text-wrap: balance; }
.botao:hover { transform: translateY(-2px); }
.botao--verde { background: var(--verde); color: #fff; box-shadow: 0 10px 26px -8px var(--verde-brilho); }
.botao--verde:hover { background: var(--verde-escuro); box-shadow: 0 14px 30px -8px var(--verde-brilho); }
.botao--azul { background: var(--azul); color: #fff; }
.botao--azul:hover { background: var(--azul-escuro); }
.botao--ouro { background: var(--ouro); color: var(--marinho); }
.botao--ouro:hover { background: #e9a43a; }
.botao--contorno { background: transparent; color: var(--azul); border-color: var(--azul); }
.botao--contorno:hover { background: var(--azul); color: #fff; }
.botao--branco { background: #fff; color: var(--marinho); }
.botao--largo { width: 100%; }
.botao[disabled] { opacity: .65; cursor: progress; transform: none; }
.link-seta { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; }
.link-seta .ico { width: 18px; height: 18px; transition: transform .15s; }
.link-seta:hover .ico { transform: translateX(3px); }

/* ---------- Barra azul do topo ---------- */
.barra-topo { background: var(--azul); color: #fff; font-size: .875rem; }
.barra-topo__linha { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 40px; padding-top: 6px; padding-bottom: 6px; }
.barra-topo a { color: #fff; font-weight: 700; }
.barra-topo__longo { display: none; }
@media (min-width: 640px) { .barra-topo__longo { display: inline; } .barra-topo__curto { display: none; } }
input[type="range"], input[type="checkbox"], input[type="radio"] { accent-color: var(--azul); }
.barra-topo__fone { display: none; align-items: center; gap: 8px; text-decoration: none; font-weight: 400 !important; }
.barra-topo__fone .ico { width: 16px; height: 16px; }

/* ---------- Cabeçalho ---------- */
.topo { position: sticky; top: 0; z-index: 50; background: rgba(247, 249, 251, .97); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid transparent; transition: box-shadow .2s, border-color .2s; }
.topo.is-rolado { border-color: var(--borda); box-shadow: 0 10px 30px -22px rgba(33, 42, 89, .5); }
.topo__linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--topo); }
.topo__marca { flex: none; }
.topo__marca img { width: 172px; height: auto; }
.topo__menu-btn { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: transparent; color: var(--azul); cursor: pointer; }
.topo__menu-btn .ico { width: 28px; height: 28px; }
.topo__nav { display: none; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - var(--topo)); overflow-y: auto; padding: 8px 20px 24px; background: #fff; border-bottom: 1px solid var(--borda); box-shadow: 0 24px 40px -24px rgba(33, 42, 89, .45); }
.topo__nav.is-aberto { display: grid; gap: 16px; box-shadow: 0 0 0 100vmax rgba(15, 20, 45, .45); clip-path: inset(0 -100vmax -100vmax -100vmax); }
/* Menu aberto no celular: ícone vira X e a página atrás não rola. */
.topo__menu-btn .ico-fechar, .topo__menu-btn[aria-expanded="true"] .ico-menu { display: none; }
.topo__menu-btn[aria-expanded="true"] .ico-fechar { display: block; }
body.menu-aberto { overflow: hidden; }
.menu { display: grid; }
.menu a { display: block; padding: 13px 4px; color: var(--marinho); font-weight: 400; font-size: 1.0625rem; text-decoration: none; border-bottom: 1px solid var(--borda); }
.menu a[aria-current] { color: var(--azul); font-weight: 700; }
/* Menus suspensos (Calcule sua economia e Compre Online): no celular abrem dentro do menu; no computador,
   painel flutuante no estilo do site da FGX (ícone, título e uma linha), aberto por clique ou ao passar o mouse. */
.suspenso > summary { list-style: none; cursor: pointer; }
.suspenso > summary::-webkit-details-marker { display: none; }
.suspenso > summary .ico { width: 16px; height: 16px; transition: transform .2s; }
.suspenso[open] > summary .ico { transform: rotate(180deg); }
.menu .suspenso > summary { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 13px 4px; color: var(--marinho); font-size: 1.0625rem; border-bottom: 1px solid var(--borda); }
.menu .suspenso > summary.is-atual { color: var(--azul); font-weight: 700; }
.suspenso__painel { padding: 6px 0 12px; }
.suspenso__titulo { margin: 6px 8px 8px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto); }
.suspenso__grade, .suspenso__lista { display: grid; gap: 2px; }
.menu .suspenso__item, .suspenso__item { display: flex; align-items: center; gap: 14px; padding: 10px 8px; border: 0; border-radius: 14px; color: var(--marinho); text-decoration: none; white-space: normal; }
.suspenso__item:hover { background: var(--cinza); color: var(--marinho); }
.suspenso__item strong { display: block; font-size: .9375rem; line-height: 1.3; }
.suspenso__item small { display: block; margin-top: 2px; font-size: .8125rem; line-height: 1.35; color: var(--texto); }
.suspenso__icone { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: color-mix(in srgb, var(--c) 13%, #fff); color: var(--ce); transition: background .2s, color .2s; }
.suspenso__icone .ico { width: 20px; height: 20px; }
.suspenso__item:hover .suspenso__icone { background: var(--ce); color: #fff; }
.suspenso__icone--1 { --c: var(--rosa); --ce: var(--rosa-e); }
.suspenso__icone--2 { --c: var(--laranja); --ce: var(--laranja-e); }
.suspenso__icone--3 { --c: var(--verde-b); --ce: var(--verde-be); }
.suspenso__icone--4 { --c: var(--azul-b); --ce: var(--azul-be); }
.menu .suspenso__rodape, .suspenso__rodape { display: flex; align-items: center; justify-content: space-between; margin: 8px 8px 0; padding: 12px 0 2px; border: 0; border-top: 1px solid var(--borda); color: var(--azul); font-weight: 700; font-size: .875rem; text-decoration: none; }
.suspenso__rodape .ico { width: 16px; height: 16px; transition: transform .2s; }
.suspenso__rodape:hover .ico { transform: translateX(3px); }
.compre > summary { width: 100%; gap: 8px; }
.compre > summary:hover { transform: none; }
.mega__grade { display: grid; gap: 2px; }
.mega__tempo { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: .75rem; font-weight: 700; color: var(--azul); }
.mega__tempo .ico { width: 13px; height: 13px; }
.menu .suspenso__item[aria-current] strong { color: var(--azul); }
/* Destaque do plano no mega menu: só no computador (no celular o menu fica leve). */
.mega__destaque { display: none; padding: 24px; border-radius: 18px; background: var(--marinho); color: var(--texto-claro); font-size: .875rem; line-height: 1.5; }
.mega__sobre { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ouro); }
.mega__titulo { color: #fff; font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.menu .mega__destaque .botao { display: inline-flex; padding: 11px 20px; min-height: 44px; border: 0; color: var(--marinho); font-size: .9375rem; font-weight: 700; white-space: nowrap; }
.menu .mega__whats { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; color: #fff; font-weight: 700; font-size: .875rem; }
.mega__whats .ico { width: 18px; height: 18px; }
@media (min-width: 1280px) { .mega__destaque { display: grid; } }

/* ---------- Faixas (seções) ---------- */
.faixa { position: relative; padding: 48px 0; }
.faixa--cinza { background: var(--cinza); }
.faixa--cinza + .faixa--cinza:not(.faixa--arredondada) { padding-top: 0; }
.faixa--marinho { background: var(--marinho); color: var(--texto-claro); overflow: hidden; }
.faixa--gradiente { background: linear-gradient(110deg, var(--azul) 0%, var(--marinho) 100%); color: var(--texto-claro); }
.faixa--arredondada { border-radius: var(--raio-g) var(--raio-g) 0 0; margin-top: calc(-1 * var(--raio-g)); }
.faixa--marinho h1, .faixa--marinho h2, .faixa--marinho h3, .faixa--gradiente h2 { color: #fff; }
.faixa--marinho .trilha { color: var(--texto-claro); }
.faixa--marinho .trilha a { color: #fff; }
.cabeca { display: grid; gap: 10px; max-width: 760px; margin: 0 auto 36px; text-align: center; justify-items: center; }
.cabeca--esq { margin-left: 0; text-align: left; justify-items: start; }
.cabeca h1, .cabeca h2 { font-size: clamp(1.75rem, 4.2vw, 2.5rem); }
.cabeca p { font-size: 1.0625rem; }
/* Rótulo com a marca da bússola: um traço com as 4 cores do logo antes do texto. */
.sobretitulo { display: inline-flex; align-items: center; gap: 10px; font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--azul); }
.sobretitulo::before { content: ""; width: 28px; height: 4px; border-radius: 2px; background: var(--bussola); flex: none; }
.faixa--marinho .sobretitulo, .faixa--gradiente .sobretitulo, .cartao--azul .sobretitulo, .heroi-interno--escuro .sobretitulo { color: #fff; }
.cartao--marinho .sobretitulo { color: var(--ouro); }
/* Sobre o azul, o segmento azul do traço some: um contorno claro mantém as quatro cores visíveis. */
.cartao--azul .sobretitulo::before { box-shadow: 0 0 0 1px rgba(255, 255, 255, .45); }
.acoes { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.acoes--centro { justify-content: center; margin-top: 36px; }

/* ---------- Herói da página inicial (banner original) ---------- */
/* Celular: a foto do banner fica no rodapé do herói e a parte vazia dela passa por trás do texto (como no site original). */
.heroi { position: relative; background: #f5f5f5; overflow: hidden; padding-bottom: calc(214vw * .88 * .5 + 32px); }
.heroi__texto { position: relative; z-index: 1; display: grid; gap: 14px; padding-top: 28px; padding-bottom: 8px; }
.heroi__texto .sobretitulo { font-size: .8125rem; }
.heroi h1 { font-size: clamp(2.05rem, 7.4vw, 3.4rem); line-height: 1.06; letter-spacing: -.03em; }
.heroi__lead { font-size: 1.0625rem; max-width: 470px; }
.heroi__acoes .botao { flex: 1 1 220px; }
.heroi .botao--contorno { background: #fff; }
.heroi__foto { position: absolute; left: 6%; right: 6%; bottom: 0; }
.heroi__foto img { width: 100%; height: auto; }
/* Linha de confiança logo abaixo dos botões (prova social no topo). */
/* Separadores: cada ponto fica no recuo à esquerda do item; o ponto que cai no início de uma linha
   fica na faixa recortada (margem negativa + clip-path), então nunca sobra um ponto solto ao quebrar. */
.confianca { display: flex; flex-wrap: wrap; gap: 8px 0; align-items: center; margin-left: -28px; clip-path: inset(-12px -12px -12px 20px); font-size: .875rem; color: var(--marinho); }
.confianca li { position: relative; display: inline-flex; align-items: center; gap: 6px; padding-left: 28px; }
.confianca strong { font-size: 1rem; }
.confianca .estrelas .ico { width: 15px; height: 15px; }
.confianca a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.confianca li + li::before { content: ""; position: absolute; left: 11px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--ouro); }

/* ---------- Números ---------- */
.numeros { background: var(--marinho); padding: 40px 0 72px; }
.numeros__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 12px; margin: 0 auto; text-align: center; }
/* Ordem visual: traço da bússola, número, rótulo. O número nunca quebra linha (nem durante a contagem). */
.numeros__lista div { display: flex; flex-direction: column; align-items: center; }
.numeros__lista div::after { order: -1; }
.numeros__lista dd { order: 0; margin: 0; color: #fff; font-size: clamp(2rem, 4.4vw, 3.25rem); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.numeros__lista dt { order: 1; }
.numeros__lista dt { color: var(--ouro); font-size: 1rem; }

/* ---------- Cartões ---------- */
.cartao { border-radius: var(--raio); padding: 28px 22px; }
.cartao--marinho { background: var(--marinho); color: var(--texto-claro); box-shadow: var(--sombra); }
.cartao--azul { background: var(--azul); color: #e6f1f7; box-shadow: var(--sombra); }
.cartao--branco { background: #fff; box-shadow: var(--sombra); color: var(--texto); }
.cartao.cartao--branco h2, .cartao.cartao--branco h3 { color: var(--marinho); }
.cartao.cartao--branco .sobretitulo { color: var(--azul); }
.cartao.cartao--branco .ouro { color: var(--ouro-texto); }
.cartao.cartao--branco .lista-check li { color: var(--texto); }
.cartao--contorno { border: 1px solid rgba(255, 255, 255, .14); }
.cartao--marinho h2, .cartao--marinho h3, .cartao--azul h2, .cartao--azul h3 { color: #fff; }
.cartao h2 { font-size: clamp(1.6rem, 3.6vw, 2.25rem); }
.cartao > * + * { margin-top: 16px; }
.cartao .acoes { margin-top: 26px; }
.foto-arredondada { border-radius: var(--raio); overflow: hidden; }
.foto-arredondada picture { display: block; height: 100%; }
.foto-arredondada img { width: 100%; height: 100%; object-fit: cover; }

/* Lista com ícone de confirmação */
.lista-check { display: grid; gap: 10px; }
.lista-check li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; line-height: 1.45; }
.lista-check .ico { width: 19px; height: 19px; margin-top: 1px; color: var(--azul); }
.cartao--marinho .lista-check .ico, .cartao--azul .lista-check .ico, .lista-check--ouro .ico { color: var(--ouro); }
.cartao--marinho .lista-check li, .cartao--azul .lista-check li { color: #fff; }
.lista-check--x .ico { color: #ff6b8a !important; }
.lista-check--linhas li { padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.lista-check--linhas li:last-child { border-bottom: 0; padding-bottom: 0; }
.lista-check strong { color: inherit; }

/* ---------- Blocos da página inicial ---------- */
/* Grades com coluna minmax(0, 1fr): conteúdo longo (e-mail, URL) nunca alarga a página no celular. */
.dupla, .contato__grade, .plano__grade, .negociacao__grade, .sobre-bi, .comparativo__grade, .ferramenta, .post { grid-template-columns: minmax(0, 1fr); }
.dupla { display: grid; gap: 24px; align-items: center; }
.colagem picture, .colagem img { width: 100%; height: auto; }
.atendimento-humano .foto-arredondada { aspect-ratio: 4 / 3; }
/* Atendimento humano: texto direto sobre o marinho (sem cartão flutuando) e foto da mesma altura do texto. */
.atendimento-humano__texto { display: grid; gap: 16px; align-content: center; }
.atendimento-humano__texto > p { color: var(--texto-claro); }
.faixa--marinho .lista-check li { color: #fff; }
.faixa--marinho .lista-check .ico { color: var(--ouro); }
/* Sobre: texto leve sobre o fundo claro; BI segue no cartão marinho. Foto e texto com a mesma altura. */
.sobre-bi__texto { display: grid; gap: 16px; align-content: center; }
.sobre-bi__texto > p { color: var(--texto); }
/* Executivo no aeroporto: a foto corta pela cabeça, nunca pelos pés. No celular, BI mostra o texto antes da foto
   (alterna foto e texto, sem duas fotos seguidas). */
.sobre-bi--leve .foto-arredondada img { object-position: 50% 12%; }
@media (max-width: 999.98px) { .sobre-bi--inverso > .foto-arredondada { order: 1; } }

.diferenciais { display: grid; gap: 18px; }
.cartao-dif { display: grid; justify-items: center; align-content: start; gap: 10px; padding: 28px 22px; text-align: center; background: linear-gradient(180deg, #fff 0%, #f7f9fb 100%); border-radius: var(--raio); box-shadow: var(--sombra); }
.cartao-dif__icone { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--azul-claro); color: var(--azul); }
.cartao-dif__icone .ico { width: 28px; height: 28px; }
.cartao-dif h3 { font-size: 1.1875rem; }
.faixa--gradiente .cartao-dif, .faixa--marinho .cartao-dif { background: linear-gradient(120deg, #f6f9fc 0%, #c9d7e6 100%); }
.faixa--gradiente .cartao-dif p, .faixa--marinho .cartao-dif p, .cartao-atend p { color: #2F3546; }

.negociacao__grade { display: grid; gap: 20px; }
.negociacao__lado { display: grid; gap: 20px; }
.negociacao .foto-arredondada { aspect-ratio: 3 / 1.1; }

.app { position: relative; overflow: hidden; color: #e8edf7; padding: 0; }
.app__foto { position: absolute; inset: 0; }
.app__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; }
.app__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(33, 42, 89, .55) 0%, rgba(33, 42, 89, .88) 55%); }
.app__texto { position: relative; display: grid; gap: 16px; padding-top: 220px; padding-bottom: 64px; }
.app h2 { color: #fff; font-size: clamp(1.9rem, 5vw, 2.85rem); }
.app .sobretitulo { color: #fff; }

.atendimento__grade { display: grid; gap: 16px; }
.cartao-atend { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: var(--raio); background: linear-gradient(120deg, #f6f9fc 0%, #bccbdd 100%); color: var(--texto); }
.cartao-atend__icone { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ouro); color: #fff; }
.cartao-atend__icone .ico { width: 26px; height: 26px; }
.cartao-atend h3 { font-size: 1.1875rem; }

.sobre-bi { display: grid; gap: 22px; }
.sobre-bi .foto-arredondada { min-height: 260px; }
.sobre-bi + .sobre-bi { margin-top: 32px; }
.cartao--marinho .link-seta, .cartao--azul .link-seta { color: #fff; }

.comparativo__grade { display: grid; gap: 20px; }
.comparativo .cartao--branco h3 { color: var(--marinho); }
.comparativo .cartao--branco .sobretitulo { color: var(--azul); }
.comparativo h3 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }

/* ---------- Avaliações do Google ---------- */
.nota-google { display: inline-flex; align-items: center; gap: 14px; padding: 10px 18px; border-radius: 999px; background: #fff; box-shadow: var(--sombra); color: var(--marinho); text-decoration: none; }
.nota-google strong { font-size: 1.5rem; line-height: 1; }
.nota-google small { display: block; color: var(--texto); font-size: .8rem; }
.estrelas { display: inline-flex; gap: 2px; color: #f4b400; }
.estrelas .ico { width: 18px; height: 18px; fill: currentColor; }
/* Depoimentos: dois carrosséis contínuos e lentos, um para cada lado. Param com o mouse em cima, com o foco
   do teclado e com "Leia mais" aberto. Com "reduzir movimento": uma faixa só, rolável, sem animação. */
.carrossel { display: grid; gap: 18px; margin-top: 30px; padding-block: 8px 28px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.carrossel__faixa { display: flex; gap: 18px; width: max-content; animation: carrossel 75s linear infinite; }
.carrossel__linha--inversa .carrossel__faixa { animation-direction: reverse; animation-duration: 90s; }
.carrossel__linha:hover .carrossel__faixa, .carrossel__linha:focus-within .carrossel__faixa, .carrossel__faixa.is-pausado { animation-play-state: paused; }
@keyframes carrossel { to { transform: translateX(calc(-50% - 9px)); } }
.avaliacao { flex: none; width: 290px; display: grid; gap: 12px; align-content: start; padding: 22px; background: #fff; border-radius: var(--raio); box-shadow: 0 14px 30px -20px rgba(33, 42, 89, .45); }
.avaliacao__autor { display: flex; align-items: center; gap: 12px; }
.avaliacao__autor img { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.avaliacao__google { margin-left: auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--borda); color: #4285F4; font-weight: 700; font-size: .85rem; }
.avaliacao__nome { color: var(--marinho); font-weight: 700; line-height: 1.3; }
.avaliacao__data { font-size: .8125rem; color: var(--texto); }
.avaliacao .estrelas { display: inline-flex; gap: 2px; color: #FFB400; }
.avaliacao .estrelas .ico { width: 15px; height: 15px; fill: currentColor; }
.avaliacao blockquote { margin: 0; color: #2c3346; font-size: .9375rem; line-height: 1.6; }
.avaliacao__texto { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.avaliacao.is-aberta .avaliacao__texto { -webkit-line-clamp: unset; }
.avaliacao__mais { justify-self: start; border: 0; background: none; padding: 0; color: var(--azul); font-weight: 700; font-size: .9rem; cursor: pointer; }
@media (min-width: 640px) { .avaliacao { width: 360px; } }
@media (prefers-reduced-motion: reduce) {
  .carrossel__faixa { animation: none; }
  .carrossel__linha { overflow-x: auto; }
  .carrossel__linha--inversa, .carrossel__faixa > [aria-hidden="true"] { display: none; }
}

/* ---------- Mapa ---------- */
.mapa { position: relative; max-width: 1286px; margin: 32px auto 0; }
.mapa picture, .mapa img { width: 100%; height: auto; }
/* Celular: só os pontos (os nomes se sobrepõem em 390 px); os nomes aparecem a partir de 640 px. */
.mapa__pais { position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 0; border-radius: 999px; color: var(--marinho); font-size: 0; font-weight: 400; line-height: 1.3; white-space: nowrap; }
.mapa__pais::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ouro); flex: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9); }
/* Posições dos países (as mesmas do site antigo; a CSP não permite style inline). */
.mapa__pais--x18-y42 { left: 18%; top: 42%; transform: translate(-18%, -42%); }
.mapa__pais--x19-y52 { left: 19%; top: 52%; transform: translate(-19%, -52%); }
.mapa__pais--x20-y60 { left: 20%; top: 60%; transform: translate(-20%, -60%); }
.mapa__pais--x28-y64 { left: 28%; top: 64%; transform: translate(-28%, -64%); }
.mapa__pais--x35-y74 { left: 35%; top: 74%; transform: translate(-35%, -74%); }
.mapa__pais--x25-y82 { left: 25%; top: 82%; transform: translate(-25%, -82%); }
.mapa__pais--x30-y89 { left: 30%; top: 89%; transform: translate(-30%, -89%); }
.mapa__pais--x42-y30 { left: 42%; top: 30%; transform: translate(-42%, -30%); }
.mapa__pais--x50-y33 { left: 50%; top: 33%; transform: translate(-50%, -33%); }
.mapa__pais--x54-y38 { left: 54%; top: 38%; transform: translate(-54%, -38%); }
.mapa__pais--esq { flex-direction: row-reverse; }

/* ---------- Blog ---------- */
.posts { display: grid; gap: 20px; }
.post-card { display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: var(--raio-p); box-shadow: var(--sombra); transition: transform .2s; }
.post-card:hover { transform: translateY(-3px); }
.post-card__foto { aspect-ratio: 5 / 3; overflow: hidden; background: var(--cinza); }
.post-card__foto img { width: 100%; height: 100%; object-fit: cover; }
.post-card__corpo { display: grid; gap: 10px; padding: 18px 20px 20px; flex: 1; align-content: start; }
.post-card h3 { font-size: 1.1875rem; line-height: 1.25; letter-spacing: -.01em; }
.post-card h3 a { color: var(--marinho); text-decoration: none; }
.post-card h3 a::after { content: ""; position: absolute; inset: 0; }
.post-card { position: relative; }
.post-card p { font-size: .92rem; }
.post-card__data { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--borda); color: var(--azul); font-size: .82rem; font-weight: 700; }
.paginacao { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 40px; }
.paginacao a, .paginacao span { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px; background: #fff; color: var(--marinho); text-decoration: none; font-weight: 700; box-shadow: 0 4px 14px -10px rgba(33, 42, 89, .6); }
.paginacao [aria-current] { background: var(--azul); color: #fff; }

/* Post */
.post { display: grid; gap: 40px; padding-block: 40px 72px; }
.post__cabeca { display: grid; gap: 16px; }
.post__cabeca h1 { font-size: clamp(1.85rem, 4.6vw, 2.75rem); }
.post__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--texto); font-size: .92rem; }
.post__meta span { display: inline-flex; align-items: center; gap: 6px; }
.post__meta .ico { width: 17px; height: 17px; color: var(--azul); }
.post__capa { border-radius: var(--raio); overflow: hidden; aspect-ratio: 16 / 9; background: var(--cinza); }
.post__capa img { width: 100%; height: 100%; object-fit: cover; }
.conteudo-post { margin-top: 32px; font-size: 1.0625rem; line-height: 1.75; color: #3d4250; max-width: 760px; }
.conteudo-post > * + * { margin-top: 1.1em; }
.conteudo-post h2 { font-size: 1.6rem; margin-top: 1.6em; }
.conteudo-post h3 { font-size: 1.3rem; margin-top: 1.4em; }
.conteudo-post h4 { font-size: 1.1rem; margin-top: 1.2em; }
.conteudo-post ul, .conteudo-post ol { padding-left: 1.3em; }
.conteudo-post ul { list-style: disc; }
.conteudo-post ol { list-style: decimal; }
.conteudo-post li + li { margin-top: .4em; }
.conteudo-post img { border-radius: var(--raio-p); height: auto; }
.conteudo-post figure { margin: 1.5em 0; }
.conteudo-post figcaption { font-size: .85rem; color: var(--texto); margin-top: 6px; }
.conteudo-post blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--ouro); color: var(--marinho); }
.conteudo-post table { width: 100%; border-collapse: collapse; font-size: .95rem; display: block; overflow-x: auto; }
.conteudo-post th, .conteudo-post td { border: 1px solid var(--borda); padding: 8px 10px; text-align: left; }
.conteudo-post a { text-decoration: underline; text-underline-offset: 2px; }
.lateral { display: grid; gap: 28px; align-content: start; }
.lateral h2 { font-size: .875rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--azul); margin-bottom: 14px; }
.ultimos { display: grid; gap: 16px; }
.ultimos a { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; color: var(--marinho); text-decoration: none; font-weight: 700; font-size: .95rem; line-height: 1.3; }
.ultimos img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; }
.compartilhar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.compartilhar a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--cinza); color: var(--marinho); text-decoration: none; font-weight: 700; font-size: .875rem; }
.cta-lateral { display: grid; gap: 14px; }

/* ---------- FAQ ---------- */
.faq__lista { display: grid; gap: 14px; max-width: 1286px; margin: 0 auto; }
.faq__item { background: #fff; border-radius: var(--raio-p); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { font-size: 1.0625rem; font-weight: 400; letter-spacing: 0; color: var(--marinho); line-height: 1.4; }
.faq__item summary .ico { width: 20px; height: 20px; color: var(--marinho); transition: transform .2s; }
.faq__item[open] summary .ico { transform: rotate(45deg); }
.faq__resposta { display: grid; gap: 10px; padding: 0 22px 22px; }

/* ---------- Páginas internas ---------- */
.heroi-interno { position: relative; overflow: hidden; background: #f5f5f5; }
.heroi-interno__grade { display: grid; gap: 24px; padding-top: 40px; padding-bottom: 8px; }
.heroi-interno__texto { position: relative; z-index: 1; display: grid; gap: 18px; align-content: center; }
.heroi-interno h1 { font-size: clamp(2rem, 6.4vw, 3.2rem); line-height: 1.06; }
.heroi-interno--escuro { background: var(--marinho); color: var(--texto-claro); border-radius: 0 0 var(--raio-g) var(--raio-g); }
.heroi-interno--escuro h1 { color: #fff; }
.heroi-interno--escuro .heroi-interno__grade { padding-bottom: 48px; }
.heroi-interno--centro .heroi-interno__texto { text-align: center; justify-items: center; max-width: 760px; margin: 0 auto; }
/* Viagem internacional: texto leve à esquerda e a foto de Londres num quadro arredondado (sem lista no herói). */
.heroi-vi .heroi-interno__grade { padding-bottom: 40px; }
.heroi-vi__foto { aspect-ratio: 3 / 2; box-shadow: var(--sombra); }
.heroi-vi__foto img { object-position: 30% center; }
/* Páginas regionais (/agencia-de-viagens-corporativas/<cidade>/): texto à esquerda e, ao lado, o cartão dos
   aeroportos (código IATA em destaque, como num cartão de embarque) com o traço da bússola no topo. */
.heroi-cidade .heroi-interno__grade { padding-bottom: 40px; }
.cidade-voos { position: relative; overflow: hidden; display: grid; gap: 14px; align-content: start; padding: 26px 22px 22px; background: #fff; border-radius: var(--raio); box-shadow: var(--sombra); }
.cidade-voos::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--bussola); }
.cidade-voos__rotulo { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--azul); }
.cidade-voos__rotulo .ico { width: 18px; height: 18px; }
.cidade-voos__lista li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding-block: 12px; }
.cidade-voos__lista li + li { border-top: 1px solid var(--borda); }
.cidade-voos__iata { display: grid; place-items: center; height: 52px; border-radius: 14px; background: var(--marinho); color: #fff; font-size: 1.125rem; font-weight: 700; letter-spacing: .08em; }
.cidade-voos__nome { display: grid; gap: 2px; }
.cidade-voos__nome strong { color: var(--marinho); line-height: 1.3; }
.cidade-voos__nome small { font-size: .8125rem; line-height: 1.45; }
.cidade-voos__nota { display: flex; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--borda); font-size: .875rem; font-weight: 700; color: var(--marinho); }
.cidade-voos__nota .ico { width: 18px; height: 18px; color: var(--verde); }
.cidade-perfil__texto { display: grid; gap: 16px; align-content: center; }
.cidade-perfil__texto h2 { font-size: clamp(1.75rem, 4.2vw, 2.5rem); }
.cidade-perfil__dado { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: .9375rem; }
.cidade-perfil__dado strong { color: var(--marinho); font-size: 1.5rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cidade-fatos { display: grid; gap: 22px; padding: 26px 22px; background: var(--cinza); border-radius: var(--raio); }
.cidade-fatos__grupo { display: grid; gap: 12px; }
.cidade-fatos__grupo + .cidade-fatos__grupo { padding-top: 22px; border-top: 1px solid #d3dbe4; }
.cidade-fatos h3 { font-size: 1rem; letter-spacing: -.01em; }
.cidade-fatos .lista-check span { display: grid; }
.cidade-fatos .lista-check small { font-size: .8125rem; color: var(--texto); }
.cidade-fatos .lista-check li { color: var(--marinho); }
.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; }
.etiquetas li { padding: 6px 14px; border-radius: 16px; background: #fff; color: var(--marinho); font-size: .875rem; font-weight: 700; line-height: 1.4; }
/* Links entre cidades: pílulas brancas que se ajustam à largura (nome da cidade nunca quebra no meio). */
.cidades-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cidades-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px 8px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--borda); color: var(--marinho); font-weight: 700; font-size: .9375rem; text-decoration: none; white-space: nowrap; transition: border-color .15s, color .15s, transform .15s; }
.cidades-links a:hover { border-color: var(--azul); color: var(--azul); transform: translateY(-1px); }
.cidades-links .ico { width: 16px; height: 16px; color: var(--azul); }
.cidades-links small { flex: none; padding: 3px 6px; border-radius: 6px; background: var(--cinza); color: var(--marinho); font-size: .75rem; font-weight: 700; line-height: 1; letter-spacing: .06em; }
.cidades-proximas .acoes--centro { margin-top: 24px; }
.cidades-regioes { display: grid; gap: 40px; }
.cidades-regiao { display: grid; gap: 16px; }
.cidades-regiao h2 { display: flex; align-items: baseline; gap: 12px; font-size: clamp(1.5rem, 3.2vw, 2rem); }
.cidades-regiao h2 small { font-size: .875rem; font-weight: 400; letter-spacing: 0; color: var(--texto); }
.cidades-regiao .cidades-links { justify-content: flex-start; }
/* Tópicos em cartão branco, fluindo em 1, 2 ou 3 colunas com espaço igual. */
.lista-check--cartao { padding: 26px 24px; background: #fff; border-radius: var(--raio); box-shadow: var(--sombra); }
.trilha { font-size: .85rem; }
.trilha ol { display: flex; flex-wrap: wrap; gap: 6px; }
.trilha li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.trilha a { color: inherit; }
.trilha [aria-current] { font-weight: 700; }
.texto-legal { max-width: 860px; display: grid; gap: 14px; }
.texto-legal h2 { font-size: 1.3rem; margin-top: 18px; }
.texto-legal a { text-decoration: underline; }

/* Plano */
.plano__grade { display: grid; gap: 24px; align-items: start; }
.plano__form { display: grid; gap: 14px; }
.grupo-beneficios { display: grid; gap: 16px; }
.grupo-beneficios h2 { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; background: var(--azul); color: #fff; font-size: 1.375rem; }
.cartao--azul.grupo-beneficios h2 { background: var(--marinho); }
.grupo-beneficios .ico { width: 22px; height: 22px; }
.grupo-beneficios .lista-check li { font-size: .92rem; }
.beneficios { display: grid; gap: 18px; }

/* Contato */
.contato__grade { display: grid; gap: 28px; align-items: start; }
.canais { display: grid; gap: 12px; }
.canais a, .canais li > div { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.canais__icone { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ouro); color: #fff; flex: none; }
.canais strong { display: block; color: #fff; overflow-wrap: anywhere; }
.canais small { display: block; color: var(--texto-claro); font-size: .85rem; }

/* ---------- Formulários ---------- */
.form-cartao { background: #fff; border-radius: var(--raio); padding: 28px 22px; box-shadow: 0 30px 60px -36px rgba(33, 42, 89, .55); color: var(--texto); }
.form-cartao h2 { font-size: 1.5rem; }
.form-cartao > p { margin: 6px 0 18px; }
.form { display: grid; gap: 14px; position: relative; }
.form__grade { display: grid; gap: 14px; }
.campo { display: grid; gap: 6px; align-content: start; }
.campo label { font-weight: 700; font-size: .9rem; color: var(--marinho); }
.opcional { font-weight: 400; color: var(--texto); font-size: .8125rem; }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid #7D8696; border-radius: 10px; background: #fff; color: var(--marinho); transition: border-color .15s, box-shadow .15s; }
.campo textarea { resize: vertical; min-height: 120px; }
.campo input::placeholder, .campo textarea::placeholder { color: #7a808a; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 4px color-mix(in srgb, var(--azul) 16%, transparent); }
.campo [aria-invalid="true"] { border-color: var(--erro); box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }
.form__aceite { display: flex; align-items: flex-start; gap: 10px; font-size: .875rem; color: var(--texto); cursor: pointer; }
.form__aceite input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--azul); }
.form__aceite a { text-decoration: underline; }
.form__armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__turnstile { min-height: 65px; overflow: hidden; border-radius: 10px; }
.form__turnstile:empty { display: flex; align-items: center; justify-content: center; border: 1px dashed #c9d1db; color: var(--texto); font-size: .85rem; }
.form__turnstile:empty::before { content: "Verificação de segurança da Cloudflare"; }
.form__status { margin: 0; font-size: .92rem; font-weight: 700; min-height: 1.2em; }
.form__status.is-erro { color: var(--erro); }
.form__status.is-ok { color: var(--ok); }
.form__status.is-info { color: var(--texto); }

/* ---------- Obrigado e erro ---------- */
.obrigado { position: relative; overflow: hidden; background: #f5f5f5; }
.obrigado h1 { font-size: clamp(2rem, 6vw, 3.1rem); font-weight: 400; line-height: 1.1; }
.obrigado h1 .destaque { color: var(--azul); font-weight: 700; }
.obrigado__proximos { display: grid; gap: 10px; margin-top: 8px; }
.obrigado__proximos a { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: var(--raio-p); background: #fff; color: var(--marinho); text-decoration: none; box-shadow: 0 6px 18px -14px rgba(33, 42, 89, .7); }
.obrigado__proximos small { display: block; color: var(--texto); }

/* ---------- Links (bio do Instagram) ---------- */
.links-pagina { min-height: 100vh; display: grid; place-items: center; padding: 48px 20px; background: radial-gradient(circle at 50% 0%, #0b5f8f 0%, var(--marinho) 55%); color: #fff; text-align: center; }
.links-pagina__caixa { width: 100%; max-width: 420px; display: grid; gap: 14px; }
.links-pagina__avatar { width: 96px; height: 96px; margin: 0 auto; border-radius: 50%; border: 3px solid #fff; }
.links-pagina h1 { color: #fff; font-size: 1.5rem; }
.links-pagina__usuario { color: #FFD27A; }
.links-pagina .botao { width: 100%; }
.links-pagina__rodape { margin-top: 18px; font-size: .8rem; color: var(--texto-claro); }
.links-pagina__rodape a { color: #fff; }

/* ---------- Ferramentas ---------- */
.ferramentas-lista { display: grid; gap: 18px; }
.ferramenta-card { position: relative; display: grid; gap: 12px; align-content: start; padding: 26px 22px; border-radius: var(--raio); background: #fff; box-shadow: var(--sombra); transition: transform .2s; }
/* O cartão inteiro é tocável (o link do título cobre o cartão), não só o título. */
.ferramenta-card :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ferramenta-card:hover { transform: translateY(-3px); }
.ferramenta-card__icone { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--azul-claro); color: var(--azul); }
.ferramenta-card__icone .ico { width: 28px; height: 28px; }
.ferramenta-card h2, .ferramenta-card h3 { font-size: 1.3rem; }
.ferramenta-card a { color: var(--marinho); text-decoration: none; }
.ferramenta-card a::after { content: ""; position: absolute; inset: 0; }
.ferramenta-card__tempo { display: inline-flex; align-items: center; gap: 6px; color: var(--azul); font-weight: 700; font-size: .875rem; }
.ferramenta-card__tempo .ico { width: 16px; height: 16px; }
.ferramenta { display: grid; gap: 24px; align-items: start; }
.ferramenta__painel { background: #fff; border-radius: var(--raio); padding: 26px 20px; box-shadow: var(--sombra); }
.ferramenta__painel h2 { font-size: 1.375rem; margin-bottom: 6px; }
.ferramenta__painel .aviso-ferramenta { margin-bottom: 20px; }
.etapas { display: flex; gap: 6px; margin: 0 0 20px; }
.etapas span { flex: 1; height: 6px; border-radius: 999px; background: var(--cinza); }
.etapas .is-feita { background: var(--azul); }
.pergunta { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; }
.pergunta legend { font-weight: 700; color: var(--marinho); font-size: 1.125rem; line-height: 1.35; margin-bottom: 4px; }
.pergunta__ajuda { font-size: .9rem; margin-top: -6px; }
.opcoes { display: grid; gap: 10px; }
.opcoes--linha { grid-template-columns: 1fr 1fr; }
.pergunta legend:focus { outline: none; }
.resultado .botao--branco { color: var(--marinho); }
.resultado .link-seta { color: #fff; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 700; }
.opcao { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid #8A93A3; border-radius: var(--raio-p); cursor: pointer; transition: border-color .15s, background .15s; }
.opcao:hover { border-color: var(--azul); }
.opcao input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--azul); flex: none; }
.opcao:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); }
.opcao small { display: block; color: var(--texto); }
.ferramenta__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
.campos-ferramenta { display: grid; gap: 14px; }
.campo__prefixo { position: relative; }
.campo__prefixo span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--texto); font-weight: 700; pointer-events: none; }
.campo__prefixo input { padding-left: 46px; }
.campo__ajuda { font-size: .82rem; color: var(--texto); }
/* Select das ferramentas com o texto escolhido sempre inteiro (montado em ferramentas.js): o <select> nativo cortava
   opções longas, como "O gestor; acima de um valor, também a diretoria". A caixa mostra o texto, que pode quebrar
   linha, e o <select> fica por cima, transparente: é ele que recebe o toque, o clique, o teclado e o leitor de tela. */
.escolha { position: relative; display: flex; align-items: center; min-height: 52px; padding: 12px 44px 12px 16px; border: 1px solid #7D8696; border-radius: 10px; background: #fff; color: var(--marinho); line-height: 1.4; transition: border-color .15s, box-shadow .15s; }
.escolha::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.escolha__texto { min-width: 0; overflow-wrap: anywhere; }
.campo .escolha select { position: absolute; top: -1px; left: -1px; z-index: 1; width: calc(100% + 2px); height: calc(100% + 2px); min-height: 0; opacity: 0; cursor: pointer; }
.escolha:has(select:focus) { border-color: var(--azul); box-shadow: 0 0 0 4px color-mix(in srgb, var(--azul) 16%, transparent); }
/* Duas colunas só quando o formulário tem largura para isso: entre 1000 e 1279 px de tela, ao lado do resultado, ele fica
   estreito e volta a uma coluna. Na mesma linha, rótulo, campo e ajuda ficam em faixas compartilhadas (subgrid): os campos
   começam na mesma altura mesmo quando um rótulo tem duas linhas e o outro uma. */
.calculadora { container-type: inline-size; }
@container (min-width: 520px) {
  .campos-ferramenta--2 { grid-template-columns: 1fr 1fr; row-gap: 0; margin-top: -14px; }
  .campos-ferramenta--2 > * { margin-top: 14px; }
  .campos-ferramenta--2 > .campo--inteiro { grid-column: 1 / -1; }
  .campos-ferramenta--2 > .campo:not(.campo--inteiro) { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  .campos-ferramenta--2 > .campo:not(.campo--inteiro) > label { align-self: end; }
  /* Os campos da mesma linha também têm a mesma altura (quando o texto de um select quebra em duas linhas). */
  .campos-ferramenta--2 > .campo:not(.campo--inteiro) > :not(label) { align-self: stretch; margin-top: 6px; }
  .campos-ferramenta--2 > .campo:not(.campo--inteiro) > .campo__prefixo { display: grid; }
}
.resultado { display: grid; gap: 18px; padding: 26px 20px; border-radius: var(--raio); background: var(--marinho); color: var(--texto-claro); box-shadow: var(--sombra); }
.resultado h2, .resultado h3 { color: #fff; }
.resultado .sobretitulo { color: #fff; }
.resultado__valor { color: #fff; font-size: clamp(2.2rem, 7vw, 3.4rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.resultado__valor small { font-size: .45em; color: var(--ouro); letter-spacing: 0; }
.resultado__faixa { color: var(--ouro); font-weight: 700; }
.medidor { position: relative; height: 14px; border-radius: 999px; background: linear-gradient(90deg, #e2445c 0%, #f0a830 45%, #2fb26a 100%); }
.medidor__ponteiro { position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--marinho); box-shadow: 0 0 0 3px #fff; transform: translate(-50%, -50%); transition: left .8s cubic-bezier(.2, .7, .2, 1); }
.tabela-resultado { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabela-resultado th, .tabela-resultado td { padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); text-align: left; vertical-align: top; }
.tabela-resultado td:last-child, .tabela-resultado th:last-child { text-align: right; white-space: nowrap; color: #fff; font-weight: 700; }
.tabela-resultado tfoot td { border-bottom: 0; font-size: 1.05rem; color: var(--ouro) !important; }
.recomendacoes { display: grid; gap: 12px; }
.recomendacoes li { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--raio-p); background: rgba(255, 255, 255, .07); }
.recomendacoes strong { color: #fff; }
.premissas { font-size: .85rem; color: var(--texto-claro); }
.premissas summary { cursor: pointer; font-weight: 700; color: #fff; }
.premissas ul { list-style: disc; padding-left: 1.2em; margin-top: 8px; display: grid; gap: 6px; }
.premissas a { color: #fff; }
.ferramenta__lead { display: grid; gap: 14px; }
.aviso-ferramenta { font-size: .85rem; color: var(--texto); }
.aviso-ferramenta--erro { margin-top: 14px; font-weight: 700; color: var(--erro); }
.aviso-ferramenta--erro:empty { display: none; }
.oculto { display: none !important; }
.documento-politica { background: #fff; color: #2c3346; border-radius: var(--raio); padding: 28px 22px; box-shadow: var(--sombra); font-size: .95rem; line-height: 1.7; }
.documento-politica h2 { font-size: 1.5rem; margin-bottom: 4px; }
.documento-politica h3 { font-size: 1.1rem; margin: 22px 0 6px; }
.documento-politica ol, .documento-politica ul { padding-left: 1.3em; list-style: decimal; display: grid; gap: 4px; }
.documento-politica ul { list-style: disc; }
.documento-politica__cabeca { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 2px solid var(--marinho); }


/* ---------- Rodapé ---------- */
/* Leve e organizado: colunas curtas, títulos pequenos em caixa alta, links sem ícone, uma linha legal no fim. */
.rodape { background: var(--marinho); color: var(--texto-claro); padding: 56px 0 28px; font-size: .9375rem; }
.rodape a { color: #fff; text-decoration: none; transition: color .15s; }
.rodape a:hover { color: var(--ouro-claro, #FFD27A); }
.rodape__grade { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 24px; }
.rodape__marca { grid-column: 1 / -1; display: grid; gap: 16px; max-width: 340px; align-content: start; justify-items: start; }
.rodape__marca img { width: 168px; height: auto; }
.rodape__marca p { line-height: 1.6; }
.rodape__selo { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; white-space: nowrap; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; font-size: .8125rem; color: var(--texto-claro); }
.rodape__selo strong { color: #fff; }
.rodape__selo .estrelas { display: inline-flex; gap: 1px; color: #FFC233; }
.rodape__selo .estrelas .ico { width: 13px; height: 13px; fill: currentColor; }
.redes { display: flex; gap: 10px; }
.redes a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); color: #fff; transition: background .15s, border-color .15s; }
.redes a:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .45); color: #fff; }
.redes .ico { width: 18px; height: 18px; }
.rodape h2 { margin-bottom: 14px; color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.rodape__lista { display: grid; gap: 10px; }
.rodape__lista a { color: var(--texto-claro); }
.rodape__grupo--contato { grid-column: 1 / -1; }
.rodape__contatos { display: grid; gap: 12px; font-size: .875rem; }
.rodape__contatos li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.rodape__contatos li > a { display: flex; gap: 10px; align-items: flex-start; }
.rodape__contatos .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--ouro); }
/* A linha de cima acompanha o conteúdo (não o recuo do container). */
.rodape__base { display: grid; gap: 10px; margin-top: 44px; font-size: .8125rem; }
.rodape__base::before { content: ""; grid-column: 1 / -1; height: 1px; margin-bottom: 12px; background: rgba(255, 255, 255, .12); }
.rodape__empresa { color: var(--texto-claro); }
.rodape__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }
.rodape__legal a { color: var(--texto-claro); }
.rodape__fgx a { display: inline-flex; align-items: center; gap: 8px; }
.rodape__lgpd { font-size: .75rem; line-height: 1.6; color: rgba(201, 210, 227, .8); max-width: 820px; }

.whatsapp-flutuante { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--verde); color: #fff; box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .45); }
.whatsapp-flutuante .ico { width: 30px; height: 30px; }

/* ---------- Efeitos (site.js liga só fora de "reduzir movimento") ---------- */
.revelar { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.revelar.is-visivel { opacity: 1; transform: none; }

/* ===== Assinatura da marca: a bússola do logo ===== */
.numeros, .rodape { position: relative; overflow: hidden; }
.topo::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--bussola); opacity: 0; transition: opacity .25s; }
.topo.is-rolado::after { opacity: 1; }
.rodape { border-top: 4px solid; border-image: var(--bussola) 1; }
/* Números: um traço de cada cor da bússola sobre cada número. */
.numeros__lista div::after { content: ""; width: 34px; height: 4px; border-radius: 2px; margin: 0 auto 14px; background: var(--c); transition: width 1.2s cubic-bezier(.2, .7, .2, 1); }
/* Efeito dos números (site.js): a barrinha da bússola cresce enquanto o número conta. Sem JS, tudo já aparece pronto. */
.pre-contagem .numeros__lista div::after { width: 0; }
.is-contando .numeros__lista div::after { width: 56px; }
/* Diferenciais: ao passar o mouse, o cartão sobe, o ícone ganha a cor da bússola e uma linha colorida surge no topo. */
.cartao-dif { position: relative; overflow: hidden; transition: opacity .6s ease, transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease; }
.cartao-dif::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c, var(--azul)); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.cartao-dif__icone { transition: background .25s, color .25s, transform .25s; }
@media (hover: hover) {
  .cartao-dif:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -26px rgba(33, 42, 89, .55); }
  .cartao-dif:hover::before { transform: scaleX(1); }
  .cartao-dif:hover .cartao-dif__icone { background: var(--ce, var(--azul)); color: #fff; transform: scale(1.06); }
}
.numeros__lista div:nth-child(4n+1), .diferenciais > li:nth-child(4n+1), .ferramentas-lista > li:nth-child(4n+1), .avaliacoes > li:nth-child(4n+1), .passos > li:nth-child(4n+1) { --c: var(--rosa); --ce: var(--rosa-e); }
.numeros__lista div:nth-child(4n+2), .diferenciais > li:nth-child(4n+2), .ferramentas-lista > li:nth-child(4n+2), .avaliacoes > li:nth-child(4n+2), .passos > li:nth-child(4n+2) { --c: var(--laranja); --ce: var(--laranja-e); }
.numeros__lista div:nth-child(4n+3), .diferenciais > li:nth-child(4n+3), .ferramentas-lista > li:nth-child(4n+3), .avaliacoes > li:nth-child(4n+3), .passos > li:nth-child(4n+3) { --c: var(--verde-b); --ce: var(--verde-be); }
.numeros__lista div:nth-child(4n+4), .diferenciais > li:nth-child(4n+4), .ferramentas-lista > li:nth-child(4n+4), .avaliacoes > li:nth-child(4n+4), .passos > li:nth-child(4n+4) { --c: var(--azul-b); --ce: var(--azul-be); }
.cartao-dif__icone, .ferramenta-card__icone { background: color-mix(in srgb, var(--c, var(--azul)) 13%, #fff); color: var(--ce, var(--azul)); }
.avaliacao__inicial { background: var(--ce, var(--azul)); }
/* Ícones cheios (traço + preenchimento suave), no lugar dos ícones finos genéricos. */
.cartao-dif__icone .ico, .ferramenta-card__icone .ico, .cartao-atend__icone .ico, .canais__icone .ico, .grupo-beneficios h2 .ico, .passo__num .ico { fill: currentColor; fill-opacity: .22; stroke-width: 2; }

/* Como funciona: 3 passos numerados */
.passos { display: grid; gap: 16px; counter-reset: passo; }
.passo { position: relative; display: grid; gap: 10px; align-content: start; padding: 26px 22px 24px; border-radius: var(--raio); background: #fff; box-shadow: var(--sombra); }
.passo__num { display: inline-flex; align-items: center; gap: 12px; color: var(--ce); font-weight: 700; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; }
.passo__num span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c); color: #fff; font-size: 1.25rem; letter-spacing: 0; }
.passo:nth-child(2) .passo__num span, .passo:nth-child(3) .passo__num span { color: var(--marinho); }
.passo h3 { font-size: 1.25rem; }

/* Cabeçalho: Compre Online é o botão dourado (como no site original) e abre seguro e passagens. */

/* Celular: barra fixa com as duas ações principais (no lugar do botão flutuante). */
.barra-acao { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--borda); box-shadow: 0 -12px 30px -22px rgba(33, 42, 89, .55); }
.barra-acao .botao { min-height: 48px; padding: 10px 12px; font-size: .9375rem; box-shadow: none; white-space: nowrap; }
/* FGX Ad (aviso de cookies) com a barra fixa: no celular, o ícone e as preferências sobem para cima da barra, para não
   cobrir o botão WhatsApp. Só posição, pelo CSS do site; a cópia do FGX Ad não muda. Some com a barra (1000 px ou mais). */
@media (max-width: 999.98px) {
  body.tem-barra-acao #fgxad-widget .fgxad-fab { bottom: calc(var(--fgxad-edge, 18px) + 72px + env(safe-area-inset-bottom)); }
}
/* As preferências sobem junto só em telas altas. Nas baixas, abrem no lugar de sempre (cobrem a barra só enquanto
   estão abertas) para o "Aceitar todos" aparecer sem rolar. Até 520 px o FGX Ad as abre a 66 px do rodapé. */
@media (max-width: 999.98px) and (min-height: 720px) {
  body.tem-barra-acao #fgxad-widget .fgxad-popup { bottom: calc(var(--fgxad-anchor, 58px) + 72px + env(safe-area-inset-bottom)); max-height: calc(100dvh - var(--fgxad-anchor, 58px) - 88px - env(safe-area-inset-bottom)); }
}
@media (max-width: 520px) and (min-height: 720px) {
  body.tem-barra-acao #fgxad-widget .fgxad-popup { bottom: calc(66px + 72px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 150px - env(safe-area-inset-bottom)); }
}
/* Celulares estreitos (360 px): "Cadastrar empresa" cabe numa linha só. */
@media (max-width: 379.98px) { .barra-acao .botao { padding-inline: 8px; font-size: .875rem; gap: 8px; } }
.whatsapp-flutuante { display: none; }
.tem-barra-acao { padding-bottom: 76px; }

/* ---------- Celular: cartões compactos (ícone ao lado do título), menos rolagem ---------- */
@media (max-width: 639.98px) {
  .cabeca { margin-bottom: 24px; }
  .diferenciais, .atendimento__grade, .passos, .ferramentas-lista { gap: 12px; }
  .cartao-dif, .cartao-atend, .ferramenta-card { grid-template-columns: 48px 1fr; column-gap: 14px; row-gap: 4px; justify-items: start; align-items: start; text-align: left; padding: 18px 18px 20px; }
  .cartao-dif__icone, .cartao-atend__icone, .ferramenta-card__icone { grid-row: span 3; width: 48px; height: 48px; border-radius: 50%; }
  .cartao-dif__icone .ico, .cartao-atend__icone .ico, .ferramenta-card__icone .ico { width: 24px; height: 24px; }
  .cartao-dif h3, .cartao-atend h3, .ferramenta-card h2, .ferramenta-card h3 { font-size: 1.0625rem; }
  .cartao-dif p, .cartao-atend p, .ferramenta-card p { font-size: .9375rem; line-height: 1.55; }
  .passo { padding: 20px 18px; gap: 6px; }
  .passo__num span { width: 38px; height: 38px; font-size: 1.0625rem; }
  .cartao { padding: 24px 20px; }
  .lista-check { gap: 8px; }
  .lista-check li { font-size: .9375rem; }
  /* Listas longas: 5 itens e "Ver mais" (site.js); o conteúdo inteiro continua na página. */
  .lista-check.is-recolhida > li:nth-child(n+6) { display: none; }
  /* Sobretítulos e botões sem quebra feia: espaçamento menor e botões de largura total. */
  .sobretitulo { letter-spacing: .1em; }
  .acoes .botao { width: 100%; padding-inline: 18px; }
  /* Botões dentro de um cabeçalho de seção (ex.: "Fale conosco") também ocupam a largura toda. */
  .cabeca > .acoes { justify-self: stretch; }
  /* Blog na home: faixa que desliza para o lado (menos rolagem). */
  .posts--faixa { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin; }
  .posts--faixa > li { scroll-snap-align: start; }
  .rodape__grupo:has(.rodape__lista a[href^="/ferramentas/"]) { grid-column: 1 / -1; }
  /* Cidades em grade de 2 colunas (alinhadas), com a UF à direita; nomes longos quebram dentro do cartão. */
  .cidades-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cidades-links a { display: flex; justify-content: space-between; gap: 6px; height: 100%; min-height: 48px; padding: 10px 12px 10px 14px; border-radius: 14px; font-size: .875rem; line-height: 1.25; white-space: normal; }
  .cidades-links .ico { display: none; }
  /* Sobretítulo centralizado que quebra em duas linhas ("Plataforma Travel & Expense"): o traço da bússola acompanha
     a primeira linha como um marcador, em vez de ficar solto na esquerda. Em uma linha, fica igual. */
  .cabeca .sobretitulo { display: block; text-wrap: balance; }
  .cabeca .sobretitulo::before { display: inline-block; vertical-align: middle; margin: -3px 10px 0 0; }
  /* Alvos de toque de 44 px no celular (dedo): logo, contatos e selo do rodapé, compartilhar do post. */
  .topo__marca { display: block; padding-block: 6px; }
  .rodape__contatos { gap: 4px; }
  .rodape__contatos li > a { min-height: 44px; align-items: center; }
  .rodape__contatos li > a .ico { margin-top: 0; }
  .rodape__selo { min-height: 44px; padding-block: 10px; }
  .compartilhar a { min-height: 44px; min-width: 44px; justify-content: center; }
}
/* "Ver mais" com área de toque de 44 px (o texto continua do mesmo tamanho). */
.ver-mais { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 0; padding: 0; border: 0; background: none; color: var(--azul); font: inherit; font-weight: 700; font-size: .9375rem; cursor: pointer; }
.cartao--marinho .ver-mais, .cartao--azul .ver-mais, .faixa--marinho .ver-mais { color: var(--ouro); }
.ver-mais .ico { width: 16px; height: 16px; }

/* ---------- Telas maiores ---------- */
@media (min-width: 640px) {
  .container { padding-inline: 32px; }
  .form__grade { grid-template-columns: 1fr 1fr; }
  .campo--inteiro { grid-column: 1 / -1; }
  .numeros__lista { grid-template-columns: repeat(4, 1fr); }
  .diferenciais, .atendimento__grade, .posts, .ferramentas-lista { grid-template-columns: 1fr 1fr; }
  .passos { grid-template-columns: repeat(3, 1fr); }
  /* Duas colunas que fluem (sem linhas de alturas diferentes: o espaço entre os itens fica sempre igual). */
  .lista-check--2col, .lista-check--3col { display: block; columns: 2; column-gap: 24px; }
  .lista-check--2col li, .lista-check--3col li { break-inside: avoid; margin-bottom: 12px; }
  .cartao, .form-cartao, .ferramenta__painel, .resultado, .documento-politica { padding: 34px 32px; }
  .mapa__pais { font-size: .8rem; padding: 4px 10px; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .45), 0 0 18px 6px rgba(255, 255, 255, .35); }
  .rodape__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Tablet em pé (705–999 px): a arte vertical do celular, centralizada e com no máximo 620 px (sem ampliar). */
@media (min-width: 705px) and (max-width: 999.98px) {
  .heroi { padding-bottom: calc(620px * 2.14 * .5 + 32px); }
  .heroi__foto { left: 50%; right: auto; width: 620px; transform: translateX(-50%); }
}
/* A partir de 1000 px: banner largo (desktop) cobrindo o herói, texto à esquerda. */
@media (min-width: 1000px) {
  /* Altura menor em telas médias: o banner (3,2:1) não é ampliado e a bússola aparece inteira. */
  .heroi { min-height: clamp(560px, 44vw, 800px); display: flex; align-items: center; padding-bottom: 0; }
  .heroi__foto { top: 0; left: 0; right: 0; }
  .heroi__foto img { height: 100%; object-fit: cover; object-position: center; }
  .heroi__texto { width: 52%; max-width: 640px; padding-top: 48px; padding-bottom: 48px; margin-left: max(32px, calc((100vw - 1286px) / 2 + 32px)); padding-left: 0; padding-right: 0; }
  .heroi--dir .heroi__texto { width: 48%; margin-left: auto; margin-right: max(32px, calc((100vw - 1286px) / 2 + 32px)); }
}
.heroi .trilha { color: var(--texto); }
/* Menu completo no topo só a partir de 1280 px (abaixo disso, botão de menu: nada quebra nem fica apertado). */
@media (min-width: 1280px) {
  :root { --topo: 96px; }
  .topo__marca img { width: 196px; }
  .topo__menu-btn { display: none; }
  /* Logo à esquerda, menu centralizado na página, botão à direita. */
  .topo__linha { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 32px; position: relative; }
  .topo__nav, .topo__nav.is-aberto { display: contents; }
  .menu { grid-column: 2; display: flex; align-items: center; gap: 26px; }
  .menu > li > a, .menu .suspenso > summary { padding: 8px 0; border: 0; font-size: 1rem; white-space: nowrap; }
  .menu > li > a:hover, .menu .suspenso > summary:hover { color: var(--azul); }
  .compre { grid-column: 3; justify-self: end; position: relative; }
  .compre > summary { width: auto; min-height: 48px; padding: 11px 22px; white-space: nowrap; }
  .suspenso__painel { position: absolute; z-index: 60; background: #fff; border: 1px solid var(--borda); border-radius: 22px; box-shadow: 0 30px 60px -30px rgba(33, 42, 89, .5); padding: 18px 16px 16px; }
  /* Ponte invisível entre o botão e o painel: o mouse atravessa sem fechar o menu. */
  .suspenso__painel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px; }
  /* Mega menu (estilo FGX): painel na largura do conteúdo, 4 ferramentas em colunas e um destaque do plano. */
  .suspenso__painel--ferramentas { top: calc(100% - 8px); left: 32px; right: 32px; padding: 22px; }
  .mega { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 22px; }
  .mega__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .menu .mega__item, .mega__item { display: grid; gap: 12px; align-content: start; height: 100%; padding: 16px 14px; }
  .mega__item .suspenso__icone { width: 48px; height: 48px; }
  .mega__item strong { font-size: 1rem; }
  .mega__destaque { display: grid; gap: 12px; align-content: start; justify-items: start; }
  .suspenso__painel--compre { top: calc(100% + 12px); right: 0; width: 330px; }
  /* Sem animação de entrada: no Chrome, a animação de opacidade neste painel deixava a camada desbotada ao terminar. */
}
@media (min-width: 1360px) { .menu { gap: 32px; } }
@media (min-width: 1000px) {
  .barra-topo__linha { justify-content: space-between; }
  .barra-topo__fone { display: inline-flex; }
  .faixa { padding: 72px 0; }
  .barra-acao { display: none; }
  .tem-barra-acao { padding-bottom: 0; }
  .whatsapp-flutuante { display: grid; }
  .heroi h1 { font-size: 3.15rem; }
  .heroi__acoes .botao { flex: 0 0 auto; }
  .numeros { padding: 48px 0 88px; }
  .dupla { grid-template-columns: 1fr 1fr; gap: 40px; }
  .dupla--texto-largo { grid-template-columns: 1.15fr .85fr; }
  .diferenciais { grid-template-columns: repeat(4, 1fr); }
  .negociacao__grade { grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; }
  .negociacao__grade > .cartao { display: flex; flex-direction: column; justify-content: center; }
  /* Coluna da direita: a foto cresce até encostar no cartão de baixo (sem vão entre os dois). */
  .negociacao__lado { grid-template-rows: minmax(220px, 1fr) auto; }
  .negociacao .foto-arredondada { aspect-ratio: auto; height: 100%; }
  .negociacao__foto { min-height: 380px; }
  .cartao--azul .lista-check { margin-block: 14px 8px; }
  .app__foto img { object-position: left center; }
  .app__foto::after { background: linear-gradient(90deg, rgba(33, 42, 89, .25) 0%, rgba(33, 42, 89, .6) 45%, rgba(33, 42, 89, .92) 70%); }
  .app__texto { padding: 150px 0; max-width: 520px; margin-left: auto; }
  .sobre-bi { grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: stretch; }
  .sobre-bi--inverso { grid-template-columns: 1fr 1.15fr; }
  .sobre-bi .foto-arredondada { min-height: 0; height: 100%; }
  .sobre-bi + .sobre-bi { margin-top: 72px; }
  .atendimento-humano__grade { align-items: stretch; gap: 56px; }
  .atendimento-humano .foto-arredondada { aspect-ratio: auto; height: 100%; min-height: 420px; }
  /* Sobretítulo, título e lista alinhados entre os dois cartões (a lista começa na mesma altura). */
  .comparativo__grade { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr; gap: 0 40px; }
  .comparativo__grade > .cartao { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 14px; align-content: start; }
  .posts { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .post { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; }
  .lateral { position: sticky; top: calc(var(--topo) + 24px); }
  .heroi-interno { min-height: 700px; display: flex; align-items: center; }
  .heroi-interno__grade { grid-template-columns: 1fr 1fr; padding-block: 0; width: 100%; }
  .heroi-interno .heroi__foto img { object-position: left center; }
  .heroi-vi { min-height: 0; padding-block: 56px 72px; }
  .heroi-vi .heroi-interno__grade { grid-template-columns: 1fr 1.05fr; gap: 56px; padding-bottom: 0; }
  .heroi-cidade { min-height: 0; padding-block: 64px 80px; }
  .heroi-cidade .heroi-interno__grade { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 64px; align-items: center; padding-bottom: 0; }
  .cidade-voos { padding: 32px 30px 26px; }
  .cidade-perfil__grade { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; }
  .cidade-fatos { padding: 32px 30px; }
  .cidades-regioes { gap: 48px; }
  .lista-check--3col { columns: 3; column-gap: 32px; }
  .lista-check--cartao { padding: 36px 40px 26px; }
  .heroi-interno--escuro { min-height: 0; }
  .heroi-interno--escuro .heroi-interno__grade { grid-template-columns: 1fr; padding-block: 72px; }
  .plano__grade { grid-template-columns: 1fr 1fr; gap: 40px; }
  .contato__grade { grid-template-columns: 1fr 1fr; gap: 56px; }
  .contato__grade > .form-cartao { order: -1; }
  .ferramentas-lista { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .ferramenta { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; }
  .ferramenta__lateral { position: sticky; top: calc(var(--topo) + 24px); }
  .rodape__base { grid-template-columns: 1fr auto; align-items: center; column-gap: 32px; }
  .rodape__lgpd { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .heroi h1 { font-size: 3.4rem; }
  /* 4 colunas só com espaço para os links não quebrarem; abaixo disso, 2 por linha */
  .rodape__grade { grid-template-columns: 1.3fr .85fr 1fr .9fr 1.65fr; column-gap: 32px; }
  .rodape__marca, .rodape__grupo--contato { grid-column: auto; }
}
/* Cadastro do plano fixo na lateral só em telas altas o bastante para mostrá-lo inteiro (o formulário tem ~1000 px).
   Num notebook de 768 px de altura, o fixo prendia o botão "Quero me cadastrar" abaixo da borda da tela. */
@media (min-width: 1000px) and (min-height: 1200px) {
  .plano__form { position: sticky; top: calc(var(--topo) + 24px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  body.imprimir-doc main > section:not(.secao-ferramenta), body.imprimir-doc .ferramenta__lateral, body.imprimir-doc [data-politica], body.imprimir-doc .heroi-interno { display: none !important; }
  body.imprimir-doc .ferramenta { display: block; }
  body.imprimir-doc .ferramenta__painel { box-shadow: none; padding: 0; }
  .barra-topo, .topo, .rodape, .whatsapp-flutuante, .barra-acao, .nao-imprimir, .aviso-prototipo, .pular { display: none !important; }
  body, .tem-barra-acao { background: #fff; padding-bottom: 0; }
  .documento-politica { box-shadow: none; padding: 0; }
  .faixa { padding: 0; background: #fff !important; }
}