/* Fontes self-hosted (SEO-04: nenhuma requisição a CDN externo).
   Baixadas do Google Fonts em 11/09/2026; Crimson Text e Open Sans são OFL-1.1.
   Só os subconjuntos latin e latin-ext — o resto do mundo não é nosso público. */

@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fontes/crimson-text-400-italico-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fontes/crimson-text-400-italico-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fontes/crimson-text-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fontes/crimson-text-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fontes/crimson-text-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fontes/crimson-text-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fontes/crimson-text-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fontes/crimson-text-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fontes/open-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fontes/open-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fontes/open-sans-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fontes/open-sans-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fontes/open-sans-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fontes/open-sans-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fontes/open-sans-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fontes/open-sans-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === Camada de apresentação da LP de Direito do Passageiro Aéreo ===========
   Identidade do Leite & Fontes: coral, ardósia e dourado; Crimson Text nos
   títulos, Open Sans no corpo. As três cores da marca foram abertas em escala
   completa (900→50) porque três tons chapados não dão conta de texto, borda,
   hover, fundo escuro e estado — é a mesma estrutura que funcionou no padrão
   visual do Patrimônio Preservado, sem herdar nenhuma cor de lá: são marcas
   diferentes e não se misturam.

   🔴 Dois valores MEDIDOS (WCAG 2.1, relação de contraste), não estimados:
   - branco sobre o coral da marca #ea4a3b = 3,79:1 → REPROVA em texto normal.
     Por isso o preenchimento de botão é #c93a2c (5,09:1) e o coral original
     fica para hover e para detalhe de traço.
   - dourado #d4a971 sobre branco = 2,16:1 → REPROVA. Ouro aqui é ornamento,
     ícone e texto SOBRE FUNDO ESCURO (6,94:1). Onde precisa ser texto sobre
     claro, usa-se #7d5c26 (6,12:1).

   Este arquivo não altera uma palavra do HTML: o texto da página foi auditado
   juridicamente e medido em 761 palavras de superfície. Todo o desenho entra
   por seletor de elemento e de id. Imagens entram por background-image porque
   a régua estrutural barra <img> — ver tools/estrutura.py. */

:root {
  /* Ardósia — texto, fundos escuros, estrutura. */
  --ardosia-900: #171c2b;
  --ardosia-800: #20263a;
  --ardosia-700: #2a3145;
  --ardosia-600: #353c4d;
  --ardosia-500: #4a5366;
  --ardosia-400: #69738a;
  --ardosia-300: #98a1b3;
  --ardosia-200: #c6ccd7;
  --ardosia-100: #e4e8ee;
  --ardosia-50:  #f3f5f8;

  /* Dourado — ornamento, ícone, rótulo no escuro. Nunca texto sobre claro. */
  --dourado-800: #7d5c26;
  --dourado-700: #9a7333;
  --dourado-600: #b98f4c;
  --dourado-500: #d4a971;
  --dourado-400: #e2c095;
  --dourado-300: #eed8bb;
  --dourado-200: #f7ecdc;

  /* Coral — ação, e só ação. */
  --coral-700: #a8271b;
  --coral-600: #c93a2c;
  --coral-500: #ea4a3b;
  --coral-100: #fdeeec;

  --branco: #ffffff;
  --creme: #faf7f2;

  --fonte-titulo: "Crimson Text", Georgia, "Times New Roman", serif;
  --fonte-corpo: "Open Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Escala de oito degraus: os dois extremos (micro e numeral) existem só
     para rótulo e para número-como-elemento-gráfico. */
  --fs-micro: clamp(12px, 0.4vw + 11px, 14px);
  --fs-sm:    clamp(15px, 0.5vw + 13px, 17px);
  --fs-base:  clamp(17px, 0.4vw + 15px, 19px);
  --fs-lead:  clamp(19px, 0.9vw + 16px, 23px);
  --fs-h3:    clamp(20px, 0.9vw + 17px, 27px);
  --fs-h2:    clamp(26px, 2.2vw + 18px, 42px);
  --fs-h1:    clamp(31px, 3.2vw + 20px, 56px);
  --fs-num:   clamp(40px, 4vw + 22px, 78px);

  --sec-y: clamp(56px, 8vw, 104px);
  --gap: 22px;
  --container: 1120px;
  --leitura: 720px;

  --r-card: 14px;
  --r-pill: 100px;
  --r-icone: 11px;

  --sombra-card: 0 18px 38px rgba(23, 28, 43, 0.09);
  --sombra-botao: 0 10px 26px rgba(168, 39, 27, 0.26);
  --transicao: 180ms ease;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--branco);
  color: var(--ardosia-600);
  font-family: var(--fonte-corpo);
  font-size: var(--fs-base);
  line-height: 1.65;
  text-wrap: pretty;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

main, article { margin: 0; max-width: none; }

/* A coluna de leitura é mais estreita que a faixa: a seção ocupa a largura
   toda para pintar o fundo, e o texto fica no meio, limitado. É o que separa
   uma landing page de um documento esticado de ponta a ponta. */
section,
article > h1 {
  padding-inline: max(20px, calc((100% - var(--leitura)) / 2));
  margin: 0;
}

section { padding-block: var(--sec-y); scroll-margin-top: 84px; }

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ardosia-800);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); margin-top: 1.6em; }

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

a { color: var(--coral-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--coral-600); }

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

/* Marcador de lista próprio — o bullet do navegador é a assinatura de uma
   página sem desenho. */
ul:not(.triagem) { list-style: none; padding-left: 0; }
ul:not(.triagem) > li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.6em;
}
ul:not(.triagem) > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--dourado-600);
  transform: rotate(45deg);
}

/* === Faixas: o fundo alterna a cada seção ================================ */
#triagem, #documentos, #atraso, #overbooking, #caminhos,
#perguntas-frequentes { background: var(--creme); }

#primeiras-horas, #cancelamento, #bagagem, #voos-internacionais,
#orientacao-juridica { background: var(--branco); }

/* Os blocos de virada ganham cor cheia: o prazo que corre contra o passageiro
   e o convite ao contato não são "mais uma seção". */
article > h1, #abertura, #prazos, #contato { background: var(--ardosia-800); }
#rodape { background: var(--ardosia-900); }

article > h1, #abertura, #prazos, #contato, #rodape { color: var(--ardosia-200); }

#abertura h2, #prazos h2, #contato h2, #rodape h2,
#abertura h3, #prazos h3, #contato h3 { color: var(--branco); }

#prazos a, #contato a, #abertura a, #rodape a { color: var(--dourado-400); }
#prazos a:hover, #contato a:hover, #abertura a:hover { color: var(--dourado-300); }

#prazos ul > li::before, #contato ul > li::before,
#abertura ul > li::before { border-color: var(--dourado-500); }

/* === Cabeçalho =========================================================== */
header {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--branco);
  border-bottom: 1px solid var(--ardosia-100);
  padding: 14px max(20px, calc((100% - var(--container)) / 2));
}

/* A razão social vira o logo: o texto continua no HTML para leitor de tela e
   para o buscador, e sai da tela por recuo. A imagem diz exatamente a mesma
   coisa — não é substituição de conteúdo, é substituição de forma. */
header p:first-of-type {
  width: 152px;
  height: 46px;
  margin: 0;
  flex: none;
  background: url("img/logo-lf.png") left center / contain no-repeat;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}

header p:last-of-type {
  margin: 0;
  padding-left: 16px;
  border-left: 1px solid var(--ardosia-100);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dourado-800);
}

/* === Hero: o h1 e a abertura formam UMA faixa escura ===================== */
/* Cor de fundo chapada nos dois elementos e o brilho por cima em cada um —
   se cada um tivesse o próprio gradiente, apareceria a emenda entre eles. */
article > h1 {
  padding-top: clamp(48px, 7vw, 88px);
  padding-bottom: 0;
  color: var(--branco);
  font-size: var(--fs-h1);
  max-width: none;
  background-image: radial-gradient(680px 340px at 88% 0%, rgba(212, 169, 113, 0.17), transparent 68%);
}

article > h1::after {
  content: "";
  display: block;
  width: 68px;
  height: 3px;
  margin-top: 28px;
  background: var(--dourado-500);
}

#abertura {
  padding-top: 26px;
  background-image: radial-gradient(520px 280px at 6% 100%, rgba(234, 74, 59, 0.14), transparent 70%);
}

#abertura > p {
  font-size: var(--fs-lead);
  line-height: 1.55;
  max-width: 46ch;
  color: var(--ardosia-200);
}

/* === Triagem: quatro cartões com ícone ================================== */
#triagem { --leitura: var(--container); text-align: center; }
#triagem h2 { margin-bottom: 1.1em; }

ul.triagem {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

a.cartao {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px 24px 24px;
  background: var(--branco);
  border: 1px solid var(--ardosia-100);
  border-radius: var(--r-card);
  color: inherit;
  text-decoration: none;
  transition: transform var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
}

/* O ícone mora numa caixa própria, com fundo tonal e raio — ícone solto no
   meio do texto é o que faz um cartão parecer rascunho. */
a.cartao::before {
  content: "";
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border: 1px solid var(--dourado-300);
  border-radius: var(--r-icone);
  background-color: var(--dourado-200);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 26px;
}

.triagem li:nth-child(1) a.cartao::before { background-image: url("img/icone-cancelado.svg"); }
.triagem li:nth-child(2) a.cartao::before { background-image: url("img/icone-atraso.svg"); }
.triagem li:nth-child(3) a.cartao::before { background-image: url("img/icone-bagagem.svg"); }
.triagem li:nth-child(4) a.cartao::before { background-image: url("img/icone-preterido.svg"); }

a.cartao strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ardosia-800);
  margin-bottom: 8px;
}

a.cartao span {
  display: block;
  font-size: var(--fs-sm);
  color: var(--ardosia-500);
  margin-top: auto;
}

a.cartao::after {
  content: "";
  width: 20px;
  height: 2px;
  margin-top: 18px;
  background: var(--coral-600);
  transition: width var(--transicao);
}

a.cartao:hover {
  transform: translateY(-3px);
  border-color: var(--dourado-500);
  box-shadow: var(--sombra-card);
}

a.cartao:hover::after { width: 40px; }

/* === Numeral como elemento gráfico ====================================== */
/* As quatro situações da página ganham 01–04 em serifada de display. É o
   recurso que troca "mais um subtítulo" por peça visual, sem acrescentar
   uma única palavra ao texto auditado. */
article { counter-reset: caso; }

#cancelamento, #atraso, #bagagem, #overbooking { counter-increment: caso; }

#cancelamento h2, #atraso h2, #bagagem h2, #overbooking h2 { position: relative; }

#cancelamento h2::before, #atraso h2::before,
#bagagem h2::before, #overbooking h2::before {
  content: counter(caso, decimal-leading-zero);
  display: block;
  font-size: var(--fs-num);
  font-weight: 700;
  line-height: 1;
  color: var(--dourado-500);
  opacity: 0.42;
  margin-bottom: 2px;
  letter-spacing: -0.03em;
}

/* === details/summary: o "ver mais" ====================================== */
details {
  margin-top: 22px;
  border-top: 1px solid var(--ardosia-100);
}

summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--fonte-titulo);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ardosia-800);
  transition: color var(--transicao);
}

summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }

/* O "+" que gira 45° e vira "×" ao abrir: o estado fica evidente sem uma
   palavra a mais e sem uma linha de JavaScript. */
summary::after {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  margin-left: auto;
  margin-top: 4px;
  background-image: linear-gradient(var(--dourado-700), var(--dourado-700)),
                    linear-gradient(var(--dourado-700), var(--dourado-700));
  background-size: 100% 1.5px, 1.5px 100%;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: transform 200ms ease;
}

details[open] > summary::after { transform: rotate(45deg); }
summary:hover { color: var(--coral-700); }

details > :not(summary) { margin-bottom: 1.1em; }
details > :last-child { margin-bottom: 0; }
details[open] { padding-bottom: 20px; }

details > :not(summary):first-of-type { margin-top: 2px; }

/* Nas faixas escuras o mesmo componente inverte. */
#abertura details, #prazos details, #contato details { border-top-color: rgba(255, 255, 255, 0.16); }
#abertura summary, #prazos summary, #contato summary { color: var(--branco); }
#abertura summary:hover, #prazos summary:hover, #contato summary:hover { color: var(--dourado-400); }
#abertura summary::after, #prazos summary::after, #contato summary::after {
  background-image: linear-gradient(var(--dourado-500), var(--dourado-500)),
                    linear-gradient(var(--dourado-500), var(--dourado-500));
}

/* === Perguntas frequentes ============================================== */
/* Sem cartão: só a linha divisória. A pergunta usa a serifada dos títulos,
   não a sans do corpo — é o detalhe que faz a lista parecer editorial. */
#perguntas-frequentes details {
  border-top: none;
  border-bottom: 1px solid var(--ardosia-100);
  margin-top: 0;
}

#perguntas-frequentes details:first-of-type { border-top: 1px solid var(--ardosia-100); }
#perguntas-frequentes summary { font-size: clamp(18px, 0.8vw + 16px, 23px); }

/* === Botões de WhatsApp ================================================ */
a.zap-inline, a.zap-sticky {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 34px;
  background: var(--coral-600);
  color: var(--branco);
  font-family: var(--fonte-corpo);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: var(--r-pill);
  box-shadow: var(--sombra-botao);
  transition: transform var(--transicao), background var(--transicao);
}

a.zap-inline:hover, a.zap-sticky:hover {
  background: var(--coral-500);
  color: var(--branco);
  transform: translateY(-2px);
}

a.zap-inline { margin: 8px 0 4px; }

/* Barra fixa só no celular. No desktop ela volta para o cabeçalho como
   botão normal — não há barra flutuando sobre uma tela larga. */
a.zap-sticky {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  padding: 17px 20px;
  box-shadow: 0 12px 30px rgba(23, 28, 43, 0.34);
}

body { padding-bottom: 96px; }

/* === Formulário ======================================================== */
#contato { --leitura: 760px; }

#contato form {
  margin-top: 28px;
  display: grid;
  gap: 18px;
}

.campo { display: flex; flex-direction: column; gap: 7px; }

.campo label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dourado-400);
}

.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 13px 15px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  color: var(--branco);
  font-family: var(--fonte-corpo);
  font-size: var(--fs-sm);
  line-height: 1.5;
  transition: border-color var(--transicao), background var(--transicao);
}

.campo textarea { min-height: 128px; resize: vertical; }

.campo select { appearance: none; cursor: pointer; }
.campo select option { color: var(--ardosia-800); background: var(--branco); }

.campo input::placeholder, .campo textarea::placeholder { color: var(--ardosia-300); }

.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--dourado-500);
  background: rgba(255, 255, 255, 0.11);
  box-shadow: 0 0 0 3px rgba(212, 169, 113, 0.22);
}

#contato form button, #contato form input[type="submit"] {
  justify-self: start;
  padding: 16px 38px;
  background: var(--coral-600);
  color: var(--branco);
  font-family: var(--fonte-corpo);
  font-size: var(--fs-sm);
  font-weight: 700;
  border: none;
  border-radius: var(--r-pill);
  box-shadow: var(--sombra-botao);
  cursor: pointer;
  transition: transform var(--transicao), background var(--transicao);
}

#contato form button:hover { background: var(--coral-500); transform: translateY(-2px); }

.aviso-dados {
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--ardosia-300);
}

/* A isca anti-robô continua fora da tela e fora do leitor de tela. Mexer
   aqui quebra a proteção do formulário, não o layout. */
.campo-armadilha {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* === Rodapé ============================================================ */
#rodape {
  padding-block: clamp(40px, 5vw, 64px);
  border-top: 3px solid var(--dourado-500);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ardosia-300);
}

#rodape address { font-style: normal; }
#rodape p { margin-bottom: 0.9em; }

#rodape p:first-child {
  font-family: var(--fonte-titulo);
  font-size: clamp(19px, 1vw + 16px, 24px);
  color: var(--branco);
}

/* === Telas maiores ===================================================== */
@media (min-width: 560px) {
  ul.triagem { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  ul.triagem { grid-template-columns: repeat(4, 1fr); }

  /* A barra some: vira botão no cabeçalho, à direita. */
  a.zap-sticky {
    position: static;
    margin-left: auto;
    padding: 13px 26px;
    box-shadow: none;
  }

  body { padding-bottom: 0; }

  /* O numeral sai para a margem esquerda e o título sobe para a linha dele. */
  #cancelamento h2::before, #atraso h2::before,
  #bagagem h2::before, #overbooking h2::before {
    position: absolute;
    left: -92px;
    top: -0.12em;
    margin: 0;
  }

  /* Duas colunas: nome+e-mail, telefone+problema, e o relato ocupando a
     linha inteira. O aviso de dados e o botão também atravessam — meio aviso
     de LGPD espremido numa coluna é ilegível. */
  #contato form { grid-template-columns: 1fr 1fr; }
  .campo:nth-of-type(5) { grid-column: 1 / -1; }
  #contato form .aviso-dados, #contato form button { grid-column: 1 / -1; }

  article > h1 { padding-bottom: 4px; }
  #abertura { padding-top: 30px; }
}

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

/* === Correções da primeira renderização ================================= */
/* Os três botões de WhatsApp do meio da página são filhos diretos do
   <article>, não de uma <section> — sem esta regra eles vazam pela borda
   esquerda, fora de qualquer recuo. Ficam DISCRETOS de propósito: faixa de
   cor atrás de cada chamada aumentaria a densidade de convite que o art. 3º,
   §1º do Provimento 205/2021 olha de perto. */
article > p {
  margin: 0;
  padding-inline: max(20px, calc((100% - var(--leitura)) / 2));
  padding-block: clamp(30px, 4vw, 46px);
  border-top: 1px solid var(--ardosia-100);
  background: var(--branco);
  text-align: center;
}

/* O hero respira numa coluna mais larga que o resto da página, e o vazio à
   direita deixa de ser vazio: recebe o ornamento de rota aérea em traço fino
   dourado. Some abaixo de 900px, onde não há margem sobrando. */
article > h1, #abertura { --leitura: 880px; }

#abertura > p { max-width: 50ch; }

@media (min-width: 1040px) {
  #abertura {
    background-image:
      url("img/ornamento-hero.svg"),
      radial-gradient(520px 280px at 6% 100%, rgba(234, 74, 59, 0.14), transparent 70%);
    background-repeat: no-repeat, no-repeat;
    background-position: right max(24px, calc((100% - 1180px) / 2)) center, 0 0;
    background-size: 430px auto, auto;
  }
}

/* Cartão: altura igual entre os quatro e ícone um pouco maior. */
a.cartao::before { width: 50px; height: 50px; background-size: 30px 30px; }
a.cartao strong { font-size: 20px; }

/* O "+" acompanha o texto do "ver mais"; só nas perguntas frequentes, que são
   linhas de largura cheia, ele vai para a borda direita. */
summary::after { margin-left: 10px; }
#perguntas-frequentes summary::after { margin-left: auto; }

#abertura { background-blend-mode: normal; }

/* Sobre fundo escuro a sombra colorida do botão vira um borrão avermelhado em
   volta dele — no escuro a elevação vem do contraste, não da sombra. */
#contato form button, #contato form input[type="submit"] { box-shadow: none; }
#contato form button:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); }

#contato form .aviso-dados { margin: 2px 0 4px; }

/* O espaço reservado à barra fixa fica DEPOIS do rodapé escuro; com o fundo do
   body branco, o fim da rolagem mostrava uma faixa branca solta. Toda seção
   pinta o próprio fundo, então escurecer o body não afeta mais nada. */
body { background: var(--ardosia-900); }