/* ==========================================================================
   VOA+SC — Landing Page
   Layout de referência: B5 0008-26 PROJETO VOA SC LANDING PAGE (1920 × 10101 px)

   Escala: no desktop/tablet (≥ 768px) todas as medidas são derivadas do
   arquivo original em px e multiplicadas por --u (= largura útil / 1920),
   preservando proporções, espaçamentos e alinhamentos do layout.
   No smartphone (< 768px) o layout é empilhado com medidas próprias.
   ========================================================================== */

/* ---------- Fontes (arquivos fornecidos, subconjunto latino) ---------- */
@font-face {
  font-family: "Benton Sans Comp";
  src: url("../fonts/benton-sans-comp-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  ascent-override: 75%;
  descent-override: 17%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Benton Sans Comp";
  src: url("../fonts/benton-sans-comp-black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  ascent-override: 75%;
  descent-override: 17%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Acumin Concept";
  src: url("../fonts/acumin-concept-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  ascent-override: 73.5%;
  descent-override: 26.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Avenir Next";
  src: url("../fonts/avenir-next-medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  ascent-override: 100%;
  descent-override: 36.6%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  --azul: #0f03f3;
  --azul-marinho: #262261;
  --azul-claro: #009ee2;
  --azul-btn: #2064a8;
  --verde: #006633;
  --amarelo: #ffdd00;
  --amarelo-2: #ffdd15;
  --cinza-claro: #f2f2f2;
  --celula: #96d1ef; /* rgb(53,168,224) a 52% sobre branco, como no layout */
  --branco: #fff;
  --preto: #000;

  --f-benton: "Benton Sans Comp", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, sans-serif;
  --f-acumin: "Acumin Concept", "Helvetica Neue", Arial, sans-serif;
  --f-avenir: "Avenir Next", "Avenir", "Montserrat", "Segoe UI", sans-serif;

  --inclinacao: -6.76deg; /* inclinação (falso itálico) aplicada aos títulos no layout */
}

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

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

body {
  margin: 0;
  background: var(--azul-marinho);
  color: var(--preto);
  font-family: var(--f-benton);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, p, dl, dd, figure { margin: 0; }

a { color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

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

/* Contêiner da página: define a unidade de escala --u */
.pagina {
  position: relative;
  max-width: 1920px;
  margin-inline: auto;
  overflow: clip;
  background: var(--branco);
  container-type: inline-size;
  --u: calc(min(100cqw, 1920px) / 1920);
}

/* Fundos fotográficos posicionados atrás do conteúdo */
.bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Escala horizontal dos caracteres (layout usa 91,4% na Benton) */
.sx {
  display: inline-block;
  transform: scaleX(.914);
  transform-origin: 0 50%;
}
.sx--c { transform-origin: 50% 50%; }

/* Títulos inclinados com escala horizontal — origem na linha de base */
.t-inc {
  display: block;
  white-space: nowrap;
  transform-origin: 0 79%;
  transform: skewX(var(--inclinacao)) scaleX(var(--hs, .914));
}

/* ==========================================================================
   1. HERO
   ========================================================================== */
.hero {
  position: relative;
  height: calc(881 * var(--u));
  color: var(--branco);
}
.hero__titulo {
  position: relative;
  z-index: 3;
  padding-top: calc(197 * var(--u));
  font-weight: 700;
}
.hero__logo {
  width: calc(1039 * var(--u));
  height: auto;
  margin-left: calc(104 * var(--u));
}
.hero__slogan {
  --hs: .9346;
  margin: calc(35.5 * var(--u)) 0 0 calc(114.5 * var(--u));
  font-size: calc(112.4 * var(--u));
  line-height: 1;
  letter-spacing: -.022em;
  color: var(--amarelo-2);
}
.hero__aviao {
  position: absolute;
  z-index: 5; /* avião por cima do logotipo VOA+SC */
  left: calc(956 * var(--u));
  top: calc(105 * var(--u));
  width: calc(878 * var(--u));
  height: auto;
}

/* Botão de reserva */
.btn-reserva {
  position: absolute;
  z-index: 4;
  left: calc(657 * var(--u));
  top: calc(704 * var(--u));
  width: calc(603 * var(--u));
  height: calc(137 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
  padding-left: calc(31 * var(--u));
  border: solid #5b5b5b;
  border-width: calc(3 * var(--u)) calc(2 * var(--u));
  background:
    linear-gradient(to bottom,
      rgba(255, 255, 255, .30) 0,
      rgba(255, 255, 255, .30) calc(7 * var(--u)),
      rgba(255, 255, 255, .10) calc(7 * var(--u)),
      rgba(255, 255, 255, .10) calc(13 * var(--u)),
      rgba(255, 255, 255, 0) calc(13 * var(--u)),
      rgba(0, 0, 0, 0) calc(100% - calc(14 * var(--u))),
      rgba(0, 0, 0, .05) calc(100% - calc(14 * var(--u)))),
    #bed5e4;
  box-shadow: 0 calc(5 * var(--u)) calc(3 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, .10);
  color: var(--azul-btn);
  text-decoration: none;
  transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-reserva:hover {
  filter: brightness(1.05);
  transform: translateY(calc(-2 * var(--u)));
  box-shadow: 0 calc(8 * var(--u)) calc(8 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, .16);
}
.btn-reserva:active { transform: translateY(0); filter: brightness(.97); }
.btn-reserva:focus-visible {
  outline: 3px solid var(--amarelo-2);
  outline-offset: 4px;
}
.btn-reserva__ico {
  flex: none;
  width: calc(86 * var(--u));
  height: calc(88 * var(--u));
}
.btn-reserva__txt {
  display: inline-block;
  margin-top: calc(9.6 * var(--u));
  font-weight: 700;
  font-size: calc(45.3 * var(--u));
  line-height: 1;
  letter-spacing: -.022em;
  white-space: nowrap;
  transform: scaleX(.914);
  transform-origin: 0 50%;
}

/* ==========================================================================
   2. BOAS-VINDAS
   ========================================================================== */
.intro {
  display: grid;
  grid-template-columns: calc(869 * var(--u)) 1fr;
  height: calc(762 * var(--u));
}
.intro__texto {
  background: var(--amarelo);
  padding: calc(88.9 * var(--u)) 0 0 calc(229.9 * var(--u));
}
.intro__texto p {
  font-weight: 900;
  font-size: calc(50.7 * var(--u));
  line-height: calc(67 * var(--u));
  letter-spacing: -.02em;
  color: var(--preto);
}
.azul { color: var(--azul); }
.intro__foto,
.intro__foto img {
  width: 100%;
  height: 100%;
}
.intro__foto img { object-fit: cover; }

/* ==========================================================================
   3. O QUE É?
   ========================================================================== */
.oquee {
  position: relative;
  height: calc(888 * var(--u));
  color: var(--branco);
}
.oquee__texto {
  position: relative;
  z-index: 2;
  padding-top: calc(193.8 * var(--u));
}
.oquee__titulo {
  --hs: .9246;
  margin-left: calc(114 * var(--u));
  font-weight: 700;
  font-size: calc(113.6 * var(--u));
  line-height: 1;
  letter-spacing: -.022em;
  color: var(--amarelo-2);
}
.oquee__texto p {
  margin: calc(19.5 * var(--u)) 0 0 calc(119.1 * var(--u));
  font-weight: 900;
  font-size: calc(36 * var(--u));
  line-height: calc(81 * var(--u));
}
.oquee__aviao {
  position: absolute;
  z-index: 1;
  left: calc(823.8 * var(--u));
  top: calc(99.3 * var(--u));
  width: calc(1046.7 * var(--u));
  height: auto;
}

/* ==========================================================================
   4. COMO FUNCIONA / FORTALECIMENTO DA INFRAESTRUTURA
   ========================================================================== */
.como {
  display: grid;
  grid-template-columns: calc(963 * var(--u)) 1fr;
  height: calc(823 * var(--u));
}
.como__foto,
.como__foto img {
  width: 100%;
  height: 100%;
}
.como__foto img { object-fit: cover; object-position: 50% 0; }
.como__texto {
  background: var(--amarelo-2);
  padding-top: calc(41.6 * var(--u));
  color: var(--preto);
}
.como__titulo {
  margin-left: calc(92 * var(--u));
  font-weight: 700;
  font-size: calc(114.9 * var(--u));
  line-height: 1;
  letter-spacing: -.022em;
  color: var(--azul);
}
.como__titulo--2 {
  margin: calc(58.2 * var(--u)) 0 0 calc(87.5 * var(--u));
  line-height: calc(100.6 * var(--u));
  transform-origin: 0 calc(83.6 * var(--u));
}
.como__texto p {
  font-weight: 900;
  font-size: calc(36 * var(--u));
  line-height: calc(55 * var(--u));
}
.como__p1 { margin: calc(-6.7 * var(--u)) 0 0 calc(103.8 * var(--u)); }
.como__p2 { margin: calc(1.2 * var(--u)) 0 0 calc(84 * var(--u)); }

/* ==========================================================================
   5. PRIMEIRA ETAPA
   ========================================================================== */
.etapa {
  position: relative;
  height: calc(364 * var(--u));
  background: var(--azul);
  color: var(--branco);
}
.etapa__titulo {
  font-weight: 700;
  font-size: calc(114.9 * var(--u));
  line-height: 1;
  letter-spacing: -.022em;
  color: var(--amarelo-2);
}
.etapa__a,
.etapa__b { position: absolute; }
.etapa__a { left: calc(84.1 * var(--u)); top: calc(54.8 * var(--u)); }
.etapa__b { left: calc(1026.3 * var(--u)); top: calc(57 * var(--u)); }
.etapa__conector {
  position: absolute;
  left: calc(690 * var(--u));
  top: calc(72 * var(--u));
  width: calc(324 * var(--u));
  height: calc(78 * var(--u));
}
.etapa__linha {
  position: absolute;
  left: 0;
  top: calc(40 * var(--u));
  width: calc(277 * var(--u));
  height: max(1px, calc(1.6 * var(--u)));
  background: var(--branco);
}
.etapa__aviao {
  position: absolute;
  left: calc(246 * var(--u));
  top: 0;
  width: calc(78 * var(--u));
  height: calc(78 * var(--u));
  color: var(--branco);
  fill: currentColor;
}
.etapa__cidades {
  position: absolute;
  left: 0;
  top: calc(185.6 * var(--u));
  width: calc(1897.8 * var(--u));
  text-align: center;
  font-weight: 700;
  font-size: calc(51.5 * var(--u));
  line-height: calc(64 * var(--u));
  letter-spacing: -.022em;
}

/* ==========================================================================
   6. MAPA
   ========================================================================== */
.mapa__fig { position: relative; }
.mapa__img {
  width: 100%;
  height: auto;
}
.mapa__tampa {
  position: absolute;
  left: 4.427%;
  top: .074%;
  width: 45.677%;
  height: 23.626%;
  background: var(--cinza-claro);
}
.mapa__logo {
  position: absolute;
  left: 5.573%;
  top: 4.829%;
  width: 39.115%;
  height: auto;
}

/* ==========================================================================
   7. GRADE OPERACIONAL
   ========================================================================== */
.grade-sec__topo {
  position: relative;
  height: calc(273 * var(--u));
  background: var(--azul-marinho);
}
.grade-sec__titulo {
  position: relative;
  z-index: 1;
  padding: calc(93.8 * var(--u)) 0 0 calc(125.9 * var(--u));
  font-weight: 700;
  font-size: calc(102.6 * var(--u));
  line-height: 1;
  letter-spacing: -.022em;
  white-space: nowrap;
  color: var(--cinza-claro);
}
.amarelo { color: var(--amarelo-2); }
.grade-sec__aviao {
  position: absolute;
  z-index: 2;
  left: calc(1279 * var(--u));
  top: calc(1 * var(--u));
  width: calc(530.8 * var(--u));
  height: auto;
}

.grade-sec__dias {
  display: grid;
  row-gap: calc(9 * var(--u));
  padding: calc(52 * var(--u)) calc(79 * var(--u)) calc(47 * var(--u)) calc(64 * var(--u));
  background: var(--branco);
}

.dia {
  --lado: var(--azul);
  --cab: var(--azul);
  --pt: 0px;
  --g1: 0px;
  --g2: 0px;
  display: grid;
  grid-template-columns: calc(277 * var(--u)) calc(1495 * var(--u));
  column-gap: calc(5 * var(--u));
}
.dia--segunda      { --pt: calc(56 * var(--u)); --g1: calc(23.3 * var(--u)); --g2: calc(26.6 * var(--u)); }
.dia--terca-quinta { --lado: var(--verde); --cab: var(--verde); --pt: calc(14 * var(--u)); --g1: calc(16.8 * var(--u)); --g2: calc(13.4 * var(--u)); }
.dia--quarta-sabado{ --lado: var(--azul-marinho); --cab: var(--azul-marinho); --pt: calc(32 * var(--u)); --g1: calc(17.2 * var(--u)); }
.dia--quarta       { --lado: var(--azul-claro); --cab: var(--azul-marinho); --pt: calc(72.3 * var(--u)); }
.dia--sexta        { --pt: calc(55 * var(--u)); --g1: calc(23.7 * var(--u)); --g2: calc(27.9 * var(--u)); }

.dia__lado {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--pt);
  background: var(--lado);
  color: var(--branco);
}
.dia__cal {
  flex: none;
  width: calc(132 * var(--u));
  height: calc(126.2 * var(--u));
  color: var(--cinza-claro);
  fill: currentColor;
}
.dia__nome {
  margin-top: var(--g1);
  font-weight: 700;
  font-size: calc(51 * var(--u));
  line-height: calc(50.1 * var(--u));
  letter-spacing: -.022em;
  text-align: center;
  transform: scaleX(.914);
}
.dia__aviao {
  align-self: flex-start;
  width: calc(268.3 * var(--u));
  height: auto;
  margin: var(--g2) 0 0 calc(2.8 * var(--u));
}

/* Tabela */
.grade {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-weight: 700;
  font-size: calc(35 * var(--u));
  line-height: 1;
  letter-spacing: -.022em;
  white-space: nowrap;
}
.grade .c-orig  { width: calc(254 * var(--u)); }
.grade .c-seta  { width: calc(52 * var(--u)); }
.grade .c-dest  { width: calc(284 * var(--u)); }
.grade .c-hora  { width: calc(402 * var(--u)); }
.grade .c-preco { width: calc(503 * var(--u)); }

.grade th,
.grade td {
  padding: 0;
  vertical-align: middle;
  text-align: left;
  font-weight: 700;
}
.grade thead th {
  position: relative;
  height: calc(57 * var(--u));
  background: var(--cab);
  color: var(--branco);
}
.grade th.c-orig { padding-left: calc(45 * var(--u)); }
.grade th.c-seta { text-align: center; }
.grade th.c-dest { padding-left: calc(44 * var(--u)); text-align: center; }
.grade th.c-hora { padding-left: calc(8 * var(--u)); text-align: center; }
.grade th.c-preco { padding-left: calc(24 * var(--u)); }
.grade th.c-hora::before,
.grade th.c-preco::before {
  content: "";
  position: absolute;
  top: calc(7 * var(--u));
  bottom: calc(7 * var(--u));
  width: calc(4.5 * var(--u));
  background: var(--cinza-claro);
}
.grade th.c-hora::before  { left: calc(1 * var(--u)); }
.grade th.c-preco::before { left: 0; }

.th-in {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.c-hora .th-in { gap: calc(17 * var(--u)); }
.c-preco .th-in { gap: calc(52.3 * var(--u)); }
.c-hora .th-in .sx { margin-right: calc(-17 * var(--u)); }

.ico {
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
}
.ico--aviao   { width: calc(43 * var(--u)); height: calc(44 * var(--u)); color: var(--cinza-claro); }
.ico--relogio { width: calc(45 * var(--u)); height: calc(45 * var(--u)); color: #ebebeb; }

.rs {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(43.7 * var(--u));
  height: calc(43.7 * var(--u));
  border-radius: 50%;
  background: var(--branco);
  color: var(--cab);
  font-size: calc(30.8 * var(--u));
  line-height: 1;
}

.grade tbody td {
  height: calc(63.4 * var(--u)); /* inclui a borda superior (espaço entre linhas) */
  border-top: calc(6.1 * var(--u)) solid var(--branco);
  background: var(--celula);
  background-clip: padding-box;
  color: var(--azul-marinho);
}
.grade tbody tr:first-child td { height: calc(61.3 * var(--u)); border-top-width: calc(4 * var(--u)); }
.grade td.c-orig { padding-left: calc(44 * var(--u)); }
.grade td.c-seta,
.grade td.c-dest { text-align: center; }
.grade td.c-dest { padding-left: calc(20 * var(--u)); }
.grade td.c-hora {
  border-left: calc(8 * var(--u)) solid var(--branco);
  text-align: center;
}
.grade td.c-preco {
  border-left: calc(7 * var(--u)) solid var(--branco);
  padding-left: calc(179 * var(--u));
}

/* ==========================================================================
   8. PERGUNTAS FREQUENTES
   ========================================================================== */
.faq {
  position: relative;
  height: calc(2144 * var(--u));
  padding-top: calc(81.6 * var(--u));
  background: var(--amarelo);
}
.faq__titulo {
  --hs: .894;
  margin-left: calc(92.4 * var(--u));
  font-weight: 700;
  font-size: calc(134.6 * var(--u));
  line-height: 1;
  letter-spacing: -.022em;
  color: var(--azul);
}
.faq__lista {
  position: relative;
  z-index: 2;
  width: calc(1738 * var(--u));
  margin: calc(22.1 * var(--u)) 0 0 calc(111.5 * var(--u));
  transform: scaleX(.914);
  transform-origin: 0 0;
}
.faq__lista dt {
  font-weight: 700;
  font-size: calc(48 * var(--u));
  line-height: calc(69 * var(--u));
  letter-spacing: -.022em;
  color: var(--azul);
}
.faq__lista dd {
  font-family: var(--f-acumin);
  font-weight: 400;
  font-size: calc(40.4 * var(--u));
  line-height: calc(69 * var(--u));
  letter-spacing: -.022em;
  color: var(--preto);
  -webkit-hyphens: auto;
  hyphens: auto;
}
.faq__lista dd strong {
  font-family: var(--f-benton);
  font-weight: 700;
  line-height: 1;
  color: var(--azul);
}
.faq__aviao {
  position: absolute;
  z-index: 1;
  left: calc(884.6 * var(--u));
  top: calc(1295.1 * var(--u));
  width: calc(862.6 * var(--u));
  height: auto;
}

/* ==========================================================================
   9. RODAPÉ
   ========================================================================== */
.rodape {
  position: relative;
  height: calc(436.4 * var(--u));
}
.rodape__marca {
  position: absolute;
  z-index: 1;
  left: calc(525 * var(--u));
  top: calc(90 * var(--u));
  width: calc(730 * var(--u));
  container-type: inline-size;
}
.rodape__logo {
  width: 100%;
  height: auto;
}
.rodape__secretaria {
  margin: 1.45cqw 0 0 37.67%;
  font-family: var(--f-avenir);
  font-weight: 500;
  font-size: 4.663cqw;
  line-height: 5.273cqw;
  white-space: nowrap;
  color: #ebebeb;
}

/* ==========================================================================
   SMARTPHONE (< 768px) — layout empilhado
   ========================================================================== */
@media (max-width: 767.98px) {
  .br-d { display: none; }

  .t-inc { white-space: normal; }

  /* Hero */
  .hero {
    height: auto;
    padding: 0 16px 40px;
  }
  .hero__titulo { padding-top: 34vw; }
  .hero__logo {
    width: 76%;
    margin-left: 0;
  }
  .hero__slogan {
    margin: 18px 0 0 2px;
    font-size: min(10.8vw, 56px);
    line-height: 1;
    transform: none;
  }
  .hero__slogan .ln {
    display: block;
    white-space: nowrap;
    transform-origin: 0 79%;
    transform: skewX(var(--inclinacao)) scaleX(var(--hs));
  }
  .hero__aviao {
    left: auto;
    right: -4%;
    top: 4vw;
    width: 66%;
  }
  .btn-reserva {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 420px;
    height: 68px;
    margin: 28px auto 0;
    padding-left: 16px;
    gap: 12px;
    border-width: 2px;
    box-shadow: 0 4px 3px 1px rgba(0, 0, 0, .12);
    background:
      linear-gradient(to bottom, rgba(255, 255, 255, .3) 0 4px, rgba(255, 255, 255, .1) 4px 7px, transparent 7px calc(100% - 7px), rgba(0, 0, 0, .05) calc(100% - 7px)),
      #bed5e4;
  }
  .btn-reserva:hover { transform: translateY(-2px); }
  .btn-reserva__ico { width: 44px; height: 45px; }
  .btn-reserva__txt { margin-top: 4px; font-size: clamp(21px, 6.4vw, 27px); }

  /* Boas-vindas */
  .intro {
    grid-template-columns: 1fr;
    height: auto;
  }
  .intro__texto { padding: 44px 24px 48px; }
  .intro__texto p {
    font-size: clamp(26px, 8vw, 34px);
    line-height: 1.32;
  }
  .intro__foto { aspect-ratio: 1051 / 763; }

  /* O que é */
  .oquee {
    height: auto;
    padding: 56px 16px 8px;
  }
  .oquee__texto { padding-top: 0; }
  .oquee__titulo {
    --hs: .9246;
    margin-left: 4px;
    font-size: clamp(56px, 18vw, 80px);
  }
  .oquee__texto p {
    margin: 16px 0 0 0;
    font-size: clamp(17px, 5vw, 21px);
    line-height: 1.7;
  }
  .oquee__aviao {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin: 16px 0 0 4%;
  }

  /* Como funciona */
  .como {
    grid-template-columns: 1fr;
    height: auto;
  }
  .como__foto { aspect-ratio: 963 / 827; }
  .como__texto { padding: 36px 20px 44px; }
  .como__titulo {
    margin-left: 4px;
    font-size: clamp(34px, 11vw, 66px);
    line-height: .95;
  }
  .como__titulo--2 {
    margin: 36px 0 0 4px;
    line-height: .95;
    transform-origin: 0 75%;
  }
  .como__texto p {
    font-size: clamp(17px, 5vw, 21px);
    line-height: 1.5;
  }
  .como__p1,
  .como__p2 { margin: 12px 0 0 0; }

  /* Primeira etapa */
  .etapa {
    height: auto;
    padding: 36px 16px 40px;
    text-align: center;
  }
  .etapa__titulo {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: clamp(36px, 11vw, 66px);
  }
  .etapa__a,
  .etapa__b,
  .etapa__conector,
  .etapa__cidades {
    position: relative;
    left: auto;
    top: auto;
  }
  .etapa__a,
  .etapa__b { transform-origin: 50% 79%; }
  .etapa__conector {
    width: 170px;
    height: 44px;
    margin: 10px 0 8px;
  }
  .etapa__linha { top: 22px; width: 146px; height: 1.5px; }
  .etapa__aviao { left: 126px; width: 44px; height: 44px; }
  .etapa__cidades {
    width: auto;
    margin-top: 18px;
    font-size: clamp(20px, 6vw, 26px);
    line-height: 1.35;
  }
  .etapa__cidades br { display: none; }
  .etapa__cidades .sx { transform: none; }

  /* Grade operacional */
  .grade-sec__topo {
    height: auto;
    min-height: 132px;
    padding: 30px 16px 28px;
  }
  .grade-sec__titulo {
    padding: 0;
    max-width: 60%;
    font-size: clamp(32px, 10vw, 44px);
    line-height: 1;
    white-space: normal;
  }
  .grade-sec__titulo .sx { display: inline; transform: none; }
  .grade-sec__aviao {
    left: auto;
    right: 6px;
    top: 50%;
    width: 42%;
    transform: translateY(-50%);
  }
  .grade-sec__dias {
    row-gap: 20px;
    padding: 24px 12px 32px;
  }
  .dia {
    grid-template-columns: 1fr;
  }
  .dia__lado {
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    min-height: 60px;
    padding: 10px 14px;
  }
  .dia__cal { width: 38px; height: 37px; }
  .dia__nome {
    margin: 0;
    font-size: 26px;
    line-height: 1;
    text-align: left;
    transform: none;
  }
  .dia__nome br { display: none; }
  .dia__aviao {
    align-self: center;
    width: 96px;
    margin: 0 0 0 auto;
  }
  .grade {
    font-size: clamp(13px, 3.9vw, 17px);
    letter-spacing: -.01em;
    white-space: normal;
  }
  .grade .c-orig  { width: 31%; }
  .grade .c-seta  { width: 6%; }
  .grade .c-dest  { width: 31%; }
  .grade .c-hora  { width: 14%; }
  .grade .c-preco { width: 18%; }
  .grade thead th {
    height: 44px;
    font-size: clamp(12px, 3.4vw, 15px);
    line-height: 1.05;
  }
  .grade th.c-orig,
  .grade td.c-orig { padding-left: 8px; }
  .grade th.c-dest,
  .grade td.c-dest { padding-left: 4px; }
  .grade th.c-hora,
  .grade td.c-hora { padding: 0 2px 0 5px; }
  .grade th.c-preco,
  .grade td.c-preco { padding: 0 4px 0 7px; }
  .grade th.c-hora::before { left: 1px; width: 3px; top: 8px; bottom: 8px; }
  .grade th.c-preco::before { width: 3px; top: 8px; bottom: 8px; }
  .grade .sx { transform: none; }
  .ico--aviao { width: 18px; height: 18px; }
  .c-hora .th-in .ico,
  .c-preco .th-in .rs { display: none; }
  .th-in { display: inline; }
  .grade tbody td {
    height: 50px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-top-width: 4px;
  }
  .grade tbody tr:first-child td { height: 49px; border-top-width: 3px; }
  .grade td.c-hora { border-left-width: 5px; }
  .grade td.c-preco { border-left-width: 5px; white-space: nowrap; }

  /* FAQ */
  .faq {
    height: auto;
    padding: 48px 16px 24px;
  }
  .faq__titulo {
    margin-left: 4px;
    font-size: clamp(40px, 12.4vw, 58px);
    white-space: normal;
    line-height: .95;
  }
  .faq__lista {
    width: auto;
    margin: 20px 0 0;
    transform: none;
  }
  .faq__lista dt {
    margin-top: 18px;
    font-size: clamp(21px, 6.2vw, 26px);
    line-height: 1.2;
  }
  .faq__lista dd {
    margin-top: 6px;
    font-size: clamp(16px, 4.6vw, 19px);
    line-height: 1.5;
    letter-spacing: 0;
    -webkit-hyphens: manual;
    hyphens: manual;
  }
  .faq__aviao {
    position: relative;
    left: auto;
    top: auto;
    width: 92%;
    margin: 24px 0 0 auto;
  }

  /* Rodapé */
  .rodape {
    height: auto;
    padding: 44px 16px 52px;
  }
  .rodape__marca {
    position: relative;
    left: auto;
    top: auto;
    width: min(88%, 420px);
    margin-inline: auto;
  }
}

/* Movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .btn-reserva { transition: none; }
}

.nw { white-space: nowrap; }

/* ==========================================================================
   ANIMAÇÃO DE FORMAÇÃO DOS CONTEÚDOS
   Ativada pelo main.js (classe .anim no <html>). Usa as propriedades
   independentes "translate" e "scale" para não interferir nas
   transformações (inclinação/escala) já aplicadas aos textos.
   Sem JavaScript ou com "reduzir movimento", tudo aparece normalmente.
   ========================================================================== */
.anim [data-r] {
  opacity: 0;
  transition:
    opacity .9s ease,
    translate 1.1s cubic-bezier(.2, .7, .2, 1),
    scale 1.2s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--d, 0s);
}
.anim [data-r="up"]   { translate: 0 28px; }
.anim [data-r="esq"]  { translate: -40px 0; }
.anim [data-r="voo"]  { translate: -7% 5%; }
.anim [data-r="zoom"] { scale: .97; }
.anim [data-r="fade"] { scale: 1.02; }

.anim [data-r].is-in {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/* Botão: após a entrada, a transição volta a ser a do hover */
.anim .btn-reserva.is-in {
  transition:
    opacity .9s ease var(--d, 0s),
    translate 1.1s cubic-bezier(.2, .7, .2, 1) var(--d, 0s),
    filter .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* Fotos dentro de áreas recortadas não vazam ao ampliar */
.intro__foto,
.como__foto { overflow: hidden; }

/* Flutuação muito leve do avião do topo, depois da entrada */
@keyframes voasc-flutuar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(-8 * var(--u))); }
}
.anim .hero__aviao.is-in {
  animation: voasc-flutuar 7s ease-in-out 1.6s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .anim [data-r] { opacity: 1; translate: none; scale: none; transition: none; }
  .anim .hero__aviao.is-in { animation: none; }
}

/* ==========================================================================
   BARRA DO GOVERNO (padrão sc.gov.br — reproduz a barra verde de
   conferenciacti.sc.gov.br: logotipo sc.gov.br, identidade e atalhos)
   ========================================================================== */
.gov-barra {
  position: relative;
  z-index: 1000;
  padding: 15px;
  background: #0d441b;
}
.gov-barra__inner {
  width: min(100%, 1464px);
  margin-inline: auto;
}
@media (max-width: 1366px) { .gov-barra__inner { width: min(100%, 1200px); } }
@media (max-width: 767px)  { .gov-barra { padding: 10px; } }

.scti-hp,
.scti-hp *,
.scti-hp ::before,
.scti-hp ::after { box-sizing: border-box; }
.scti-hp {
  --scti-hp-verde: #176929;
  position: relative;
  font-family: Inter, Arial, sans-serif;
  font-size: 16px;
}
.scti-hp-barra {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  width: 100%;
  min-height: 42px;
}
.scti-hp-logo {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin-right: auto;
  line-height: 0;
  color: #fff;
  text-decoration: none;
  transition: color .2s, opacity .2s;
}
.scti-hp-logo-svg {
  display: block;
  width: auto;
  height: 28px;
  aspect-ratio: 499.28 / 122.57;
  max-width: none;
  fill: currentColor;
}
.scti-hp-identidade {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  color: #fff;
  text-decoration: none;
  transition: color .2s, opacity .2s;
}
.scti-hp-logo:focus-visible,
.scti-hp-identidade:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 4px;
}
.scti-hp-bandeira {
  flex: 0 0 auto;
  width: 27px;
  height: auto;
  max-width: none;
}
.scti-hp-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.scti-hp-texto--curto { display: none; }

.scti-hp-controle { position: relative; flex: 0 0 auto; }
.scti-hp-botao {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  min-width: 33px;
  height: 33px;
  margin: 0;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .07);
  color: var(--scti-hp-verde);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s, border-color .2s, color .2s;
}
.scti-hp-botao:focus { outline: none; }
.scti-hp-botao:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--scti-hp-verde);
}
.scti-hp-pontos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.scti-hp-pontos span {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.scti-hp-caixa {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  width: 290px;
  max-width: calc(100vw - 20px);
  margin: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid #e4e8e5;
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(25, 45, 32, .15);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-5px);
  transition: opacity .18s ease-out, transform .18s ease-out, visibility .18s ease-out;
}
.scti-hp--aberto .scti-hp-caixa {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.scti-hp-caixa-titulo {
  margin: 0;
  padding: 11px 12px 10px;
  color: #747d76;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.scti-hp-link {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 45px;
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: #263238;
  text-decoration: none;
  transition: background-color .18s, color .18s;
}
.scti-hp-link:hover,
.scti-hp-link:focus-visible {
  background: #edf7ef;
  color: var(--scti-hp-verde);
}
.scti-hp-link:focus-visible {
  outline: 2px solid var(--scti-hp-verde);
  outline-offset: -2px;
}
.scti-hp-link-icone {
  display: inline-flex;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--scti-hp-verde);
}
.scti-hp-link-icone svg { width: 100%; height: 100%; }

@media (max-width: 767px) {
  .scti-hp-logo-svg { height: 22px; }
  .scti-hp-texto--completo { display: none; }
  .scti-hp-texto--curto { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .scti-hp-caixa, .scti-hp-link, .scti-hp-botao { transition: none; }
}

/* Rodapé do Governo (padrão sc.gov.br) */
.gov-rodape{background:#0d441b;color:#fff;font-family:Inter,"Helvetica Neue",Arial,sans-serif}
.gov-rodape__inner{width:min(100%,1464px);margin-inline:auto;padding:15px;display:flex;align-items:center;gap:20px;box-sizing:border-box}
.gov-rodape__texto{margin:0;font-size:12px;font-weight:500;line-height:22.5px;color:#fff}
.gov-rodape__marca{margin-left:auto;display:block;line-height:0}
.gov-rodape__marca img{display:block;width:169px;height:auto}
@media (max-width:767px){
  .gov-rodape__inner{flex-direction:column;justify-content:center;text-align:center;padding:20px 15px;gap:12px}
  .gov-rodape__marca{margin:0}
  .gov-rodape__marca img{width:169px}
}

/* Origem/destino longo em uma linha, condensado (Criciúma/Forquilhinha) */
.grade .sx--duas{display:inline-block;white-space:nowrap;transform:scaleX(.76);transform-origin:left center}
.grade .sx--duas br{display:none}
.grade td.c-dest .sx--duas{transform-origin:center center}
@media (max-width:767px){.grade .sx--duas{transform:scaleX(.8)}}