/* ==========================================================================
   Reset básico
   ========================================================================== */

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

/* ==========================================================================
   Variáveis do projeto — tokens do design (Tokens e Button.dc.html)
   ========================================================================== */

:root {
  /* Marca */
  --vn-primary:         #0045F3;
  --vn-primary-dark:    #0039C8;
  --vn-accent:          #74E229;
  --vn-accent-dark:     #66C922;

  /* Texto */
  --vn-text-1:          #29375C;
  --vn-text-2:          #68769A;
  --vn-text-on-primary: #FFFFFF;

  /* Superfícies */
  --vn-bg:              #FFFFFF;
  --vn-bg-cream:        #FAF8F5;
  --vn-bg-blue-tint:    #EEF3FF;
  --vn-border:          #E5E1DA;
  --vn-border-muted:    #C7C7CC;

  /* Formato e sombra */
  --vn-radius-pill:     999px;
  --vn-shadow-card:     0 8px 24px rgba(13, 20, 51, 0.15);
  --vn-shadow-small:    0 4px 14px rgba(13, 20, 51, 0.10);
}

/* ==========================================================================
   Base
   ========================================================================== */

html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; }
body { background: var(--vn-bg); color: var(--vn-text-1); font-family: Afacad, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--vn-primary); text-decoration: none; }
a:hover { color: var(--vn-primary-dark); }

/* Seções: <section> full-bleed, container interno com max-width próprio */
.vn-container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 24px; }
@media (min-width: 768px)  { .vn-container { padding-inline: 40px; } }
@media (min-width: 1024px) { .vn-container { padding-inline: 80px; } }

.vn-w-960  { width: 100%; max-width: 960px;  margin-inline: auto; }
.vn-w-1160 { width: 100%; max-width: 1160px; margin-inline: auto; }
.vn-w-1200 { width: 100%; max-width: 1200px; margin-inline: auto; }

.vn-section-full { width: 100%; margin: 0; }
/* seções coladas: todo o respiro vem do padding interno de cada uma */
main > section, main > section + section, footer.vn-section-full { margin: 0; }

.vn-only-desktop { display: none; }
@media (min-width: 900px) {
  .vn-only-desktop { display: block; }
  .vn-only-mobile  { display: none; }
}

/* ==========================================================================
   Tipografia usada em Header + Hero
   ========================================================================== */

.t-hero-h1 { font: 700 32px/1.08 Afacad, sans-serif; }
@media (min-width: 900px)  { .t-hero-h1 { font-size: 4.44vw; line-height: 1.08; } }
@media (min-width: 1440px) { .t-hero-h1 { font-size: 64px; line-height: 54px; } }
.t-section-title    { font: 700 48px/48px Afacad, sans-serif; }
@media (max-width: 767px) { .t-section-title { font-size: 32px; line-height: 1.12; } }
.t-section-subtitle { font: 400 24px/32px Afacad, sans-serif; }
.t-dest-name { font: 700 24px/28px Afacad, sans-serif; }
.t-body-lg { font: 400 20px/28px Afacad, sans-serif; }
.t-body    { font: 400 16px/24px Afacad, sans-serif; }
.t-body-sm { font: 400 12px/16px Afacad, sans-serif; }
.t-eyebrow { font: 700 16px/16px Afacad, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.t-btn     { font: 700 16px/20px Afacad, sans-serif; text-transform: uppercase; }
.t-feature-title { font: 700 28px/32px Afacad, sans-serif; }
@media (min-width: 1024px) { .t-feature-title { font-size: 36px; line-height: 40px; } }

/* ==========================================================================
   Botão (Button.dc.html) — estados via CSS em vez do state do componente
   ========================================================================== */

.btn {
  height: 44px;
  min-height: 44px;
  padding: 12px 24px;
  border-radius: var(--vn-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: none;
  transition: background 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out, transform 200ms ease-out;
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--vn-primary); outline-offset: 2px; }
.btn--full { width: 100%; }

.btn--primary-green { background: var(--vn-accent); color: var(--vn-primary-dark); }
.btn--primary-green:hover { background: var(--vn-accent-dark); color: var(--vn-text-1); }

.btn--secondary-blue { background: transparent; color: var(--vn-primary); border-color: var(--vn-primary); }
.btn--secondary-blue:hover { color: var(--vn-primary-dark); border-color: var(--vn-primary-dark); }

/* ==========================================================================
   Hero zone
   ========================================================================== */

.vn-hero-zone { padding-top: 128px; padding-bottom: 40px; background: var(--vn-primary); }
@media (min-width: 768px) { .vn-hero-zone { padding-bottom: 48px; } }
@media (min-width: 900px) { .vn-hero-zone { padding-top: 40px; } }

.vn-hero-card { position: relative; z-index: 1; width: 100%; padding: 40px 24px; background: var(--vn-bg); border-radius: 16px; box-shadow: var(--vn-shadow-card); }
.vn-hero-h1 { position: relative; margin: 0; color: var(--vn-primary); }
.vn-hero-pin { position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%); width: 32px; height: 40px; display: none; align-items: center; justify-content: center; color: var(--vn-accent-dark); }
@media (min-width: 900px) { .vn-hero-pin { display: inline-flex; } }
.vn-hero-anchor { position: relative; }
.vn-hero-gap { display: inline-block; width: 8px; }
@media (min-width: 900px) { .vn-hero-gap { width: 44px; } }
.vn-hero-text { display: flex; flex-direction: column; gap: 16px; }
.vn-hero-lead { margin: 0; color: var(--vn-text-1); max-width: 512px; }
.vn-hero-support { margin: 0; max-width: 529px; color: var(--vn-hero-support, var(--vn-text-2)); }
.vn-hero-photo { position: relative; width: 100%; aspect-ratio: 520 / 366; border-radius: 16px; overflow: hidden; margin-top: 20px; background: var(--vn-bg); box-shadow: var(--vn-shadow-card); }
.vn-hero-photo img { position: static; display: block; width: 100%; height: 100%; background: var(--vn-bg); }
@media (min-width: 900px) {
  .vn-hero-wrap  { position: relative; width: 100%; }
  .vn-hero-card  { width: 69.375%; min-height: 430px; padding: 40px 128px 40px 48px; }
  .vn-hero-text  { width: 100%; }
  /* foto: x=760 e largura 520 dentro do container de 1280; termina na borda direita */
  /* foto acompanha a altura do card branco: bordas de cima e de baixo coincidem (430px em 1440) */
  .vn-hero-photo { position: absolute; left: 59.375%; right: 0; top: 0; bottom: 0; width: auto; height: auto; aspect-ratio: auto; margin-top: 0; z-index: 3; border-radius: 16px; }
  .vn-hero-photo img { object-fit: cover; }
}

/* Camadas do carrossel do hero: troca instantânea (sem crossfade), fiel ao
   comportamento real do componente original — a classe fornecia uma
   transição de 400ms, mas o componente sempre forçava "instant" e nunca
   usava o mecanismo de fade, então a troca sempre foi um corte seco. */
.vn-layer { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
.vn-layer.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .vn-layer { transition: none; } }

.vn-hero-cta { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 4px; }
/* MOBILE: card de 343 (margens de 16), H1 em 36 e botoes de 56 */
.vn-h1-desktop { display: none; }
.vn-h1-mobile { display: inline; }
.vn-h1-l1 { white-space: nowrap; }
.vn-h1-l2 { white-space: nowrap; }
.vn-h1-pin { display: inline-block; width: 25.2px; height: 31.5px; vertical-align: -5px; }
@media (min-width: 900px) {
  .vn-h1-desktop { display: inline; }
  .vn-h1-mobile { display: none; }
}
@media (max-width: 899.98px) {
  .vn-hero-card { width: auto; margin-inline: -8px; padding: 24px 32px; --vn-hero-support: #5A6788; }
  .vn-hero-card .t-hero-h1 { font-size: 37px; line-height: 1.15; font-weight: 700; }
  .vn-hero-cta { gap: 16px; }
  /* alvo de toque de 56 em todos os botoes do mobile; o desktop segue em 44 */
  .t-btn { height: 56px !important; min-height: 56px !important; font-size: 17px !important; font-weight: 700 !important; }
}
@media (min-width: 900px) { .vn-hero-cta { flex-direction: row; align-items: center; gap: 16px; } }

/* ==========================================================================
   Nav flutuante desktop
   ========================================================================== */

.vn-nav { width: 100%; padding: 32px 24px 0; background: var(--vn-primary); }
@media (min-width: 768px)  { .vn-nav { padding-inline: 40px; } }
@media (min-width: 1024px) { .vn-nav { padding-inline: 80px; } }
.vn-logo-link { display: flex; align-items: center; }
/* 36 de altura e 6px abaixo do centro: compensa o pin do "O", que desce abaixo
   das letras e joga o centro da caixa para cima */
.vn-logo { display: block; width: 169px; height: 36px; flex: 0 0 auto; overflow: visible; transform: translateY(var(--vn-logo-shift, 6px)); }
.vn-logo > img { display: block; width: 100%; height: 100%; }
.vn-nav-card {
  /* decisão do cliente (diverge do Figma, onde o header era mais largo que
     o bloco do Hero): mesma largura e mesmas bordas do conjunto card+foto do
     Hero (.vn-hero-wrap, que é toda a caixa de conteúdo do .vn-container).
     .vn-nav-card fica dentro do .vn-nav, cujo padding-inline já é idêntico
     ao do .vn-container em cada breakpoint (40 até 1023px, 80 a partir de
     1024px) — por isso a mesma fórmula de largura funciona, só ajustando
     esse valor de padding. */
  width: calc(100vw - 80px); margin-left: 0; height: 68px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  /* padding assimétrico do Figma: pl-32 (logo) / pr-16 (botão) / py-12 */
  padding: 12px 16px 12px 32px; border-radius: var(--vn-radius-pill);
  background: var(--vn-bg); box-shadow: var(--vn-shadow-small);
}
@media (min-width: 1024px) {
  /* .vn-nav já tem padding-inline:80 aqui (igual ao .vn-container), então só
     falta compensar a margem externa de centralização que o max-width:1280
     do .vn-container cria e o .vn-nav não tem — daí o margin-left abaixo. */
  .vn-nav-card { width: calc(min(100vw, 1280px) - 160px); margin-left: max(0px, (100vw - 1280px) / 2); }
}
.vn-nav-links { display: flex; align-items: center; gap: 16px; margin: 0; padding: 0; list-style: none; }
.vn-nav-links > li { white-space: nowrap; }
.vn-nav-link { color: var(--vn-text-1); }
@media (min-width: 1200px) { .vn-nav-links { gap: 32px; } }

/* ==========================================================================
   Header mobile
   ========================================================================== */

.vn-header-mobile { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: 128px; align-items: center; background: var(--vn-primary); }
.vn-only-mobile.vn-header-mobile { display: flex; }
@media (min-width: 900px) { .vn-only-mobile.vn-header-mobile { display: none; } }
.vn-header-mobile-card {
  height: 68px; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; border-radius: var(--vn-radius-pill);
  background: var(--vn-bg); box-shadow: var(--vn-shadow-small);
}

/* Botão hamburger — as 3 barras giram via o próprio aria-expanded */
.vn-burger {
  width: 44px; height: 44px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px; padding: 0; border: none; background: transparent; cursor: pointer;
}
.vn-burger span {
  display: block; width: 22px; height: 2px; background: var(--vn-primary); border-radius: var(--vn-radius-pill);
  transition: transform 200ms ease-out, opacity 200ms ease-out;
}
.vn-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vn-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.vn-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .vn-burger span { transition: none; } }

/* Overlay do menu mobile */
.vn-menu-overlay { position: fixed; inset: 0; z-index: 50; background: var(--vn-primary); padding: 32px 24px; animation: vn-menu-in 300ms ease-out; }
.vn-menu-top { display: flex; align-items: center; justify-content: flex-end; height: 44px; }
.vn-menu-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: transparent; cursor: pointer; }
.vn-menu-close span { position: relative; display: block; width: 20px; height: 2px; background: var(--vn-text-on-primary); }
.vn-menu-close span:first-child { transform: rotate(45deg); }
.vn-menu-close span:last-child { margin-left: -20px; transform: rotate(-45deg); }
.vn-menu-nav { margin-top: 32px; }
.vn-menu-nav ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vn-menu-link { display: flex; align-items: center; min-height: 44px; color: var(--vn-text-on-primary); font-size: 24px; }
.vn-menu-cta { margin-top: 32px; }
@media (prefers-reduced-motion: reduce) { .vn-menu-overlay { animation: none; } }

@keyframes vn-menu-in { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Faixa de checks — destaque rotativo sincronizado com a foto do hero
   ========================================================================== */

/* a faixa saiu de dentro do .vn-container (que no Figma não a envolve) e
   ganhou padding próprio, replicando o padding que o .vn-container dava
   até 1023px (24/40) — abaixo disso nada muda visualmente. A partir de
   1024px ela usa uma regra própria (ver abaixo), batendo com o Figma. */
.vn-trust { display: flex; flex-direction: column; gap: 12px; margin: 0 0 32px; padding: 0 24px; list-style: none; box-sizing: border-box; width: 100%; }
@media (min-width: 768px) { .vn-trust { padding-inline: 40px; } }
.vn-trust > li { display: flex; align-items: center; flex: 0 0 auto; width: auto; }
.vn-trust > li[data-ativo="true"] { gap: 8px; height: 24px; opacity: 1; }
.vn-trust > li[data-ativo="false"] { gap: 4px; height: 16px; opacity: 0.6; }
.vn-trust > li .vn-trust-label { color: var(--vn-text-on-primary); font-family: Afacad, sans-serif; line-height: 16px; }
.vn-trust > li[data-ativo="true"] .vn-trust-label { font-size: 24px; font-weight: 500; }
.vn-trust > li[data-ativo="false"] .vn-trust-label { font-size: 12px; font-weight: 600; }
.vn-trust > li .vn-trust-icon { flex: 0 0 auto; }
.vn-trust > li[data-ativo="true"] .vn-trust-icon { width: 24px; height: 24px; }
.vn-trust > li[data-ativo="false"] .vn-trust-icon { width: 16px; height: 16px; }
/* MOBILE: um beneficio por vez, caixa de 335x56 travada — so a opacidade transiciona */
@media (max-width: 899.98px) {
  /* largura acompanha o container (mesmas extremidades do card da nav); altura travada em 48 */
  .vn-trust { position: relative; display: block; width: auto; height: 48px; margin: 0 0 32px; }
  /* posicionamento absoluto ignora o padding do .vn-trust (referência é a
     padding-box do próprio elemento) — por isso o inset vem via left/right
     explícitos aqui, repetindo os mesmos 24/40px do padding do .vn-trust */
  .vn-trust > li[data-ativo] { position: absolute; left: 24px; right: 24px; top: 0; display: flex; align-items: center; justify-content: flex-start; gap: calc(var(--vn-trust-fs, 20px) * 0.5); width: auto; height: 48px; opacity: 0; pointer-events: none; transition: opacity 260ms ease-out; }
  .vn-trust > li[data-ativo="true"] { opacity: 1; pointer-events: auto; }
  .vn-trust > li[data-ativo] .vn-trust-icon { flex: 0 0 auto; width: calc(var(--vn-trust-fs, 20px) * 1.2); height: calc(var(--vn-trust-fs, 20px) * 1.2); }
  .vn-trust > li[data-ativo] .vn-trust-label { flex: 0 1 auto; font-size: var(--vn-trust-fs, 20px); line-height: 1.2; font-weight: 500; text-align: left; white-space: nowrap; }
}
/* inset dos 40px (≥768px) repetido aqui pelo mesmo motivo do bloco acima —
   a regra de position:absolute só vale até 899.98px, então esta não conflita
   com o layout em linha que passa a valer a partir de 900px */
@media (min-width: 768px) { .vn-trust > li[data-ativo] { left: 40px; right: 40px; } }
/* decisão do cliente (diverge do Figma, onde a faixa era mais larga que o
   bloco do Hero): a partir de 900px a faixa passa a ter exatamente a mesma
   largura e as mesmas bordas do conjunto card+foto do Hero (.vn-hero-wrap,
   que é toda a caixa de conteúdo do .vn-container). Como a faixa agora vive
   fora do .vn-container (largura total, sem padding próprio pra isso),
   width/margin-left replicam a mesma fórmula em vez de padding-inline. */
@media (min-width: 900px) {
  .vn-trust {
    flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center;
    margin-bottom: 40px; gap: 12px 24px; padding: 0;
    width: calc(100vw - 80px); margin-left: 40px;
  }
  .vn-trust > li { white-space: nowrap; }
}
@media (min-width: 1120px) { .vn-trust { flex-wrap: nowrap; height: 24px; } }
/* ≥1024px: .vn-container passa a ter padding-inline:80 (em vez de 40) e
   max-width:1280 já entra em jogo — mesma fórmula do .vn-hero-wrap. */
@media (min-width: 1024px) {
  .vn-trust {
    width: calc(min(100vw, 1280px) - 160px);
    margin-left: calc(max(0px, (100vw - 1280px) / 2) + 80px);
  }
}
@media (prefers-reduced-motion: reduce) { .vn-trust > li, .vn-trust-label { transition: none; } }

/* ==========================================================================
   Destinos
   ========================================================================== */

.vn-dest-section { padding-block: 80px; }

.vn-dest-head { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; margin-bottom: 40px; }
.vn-dest-eyebrow { margin: 0; color: var(--vn-text-2); }
.vn-dest-title { margin: 0; color: var(--vn-primary); text-wrap: pretty; }
.vn-dest-subtitle { margin: 0; max-width: 628px; color: var(--vn-text-2); }

/* Destinos: carrossel no mobile, grid a partir de 768 */
.vn-dest-wrap { width: 100%; max-width: 1280px; margin-inline: auto; }
.vn-dest-list > li { min-width: 0; }
@media (min-width: 768px)  { .vn-dest-wrap { padding-inline: 40px; } }
@media (min-width: 1024px) { .vn-dest-wrap { padding-inline: 80px; } }

.vn-dest-list {
  display: flex; gap: 12px; margin: 0; padding: 4px 24px 20px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 24px; scrollbar-width: none;
}
.vn-dest-list::-webkit-scrollbar { display: none; }
.vn-dest-list > li { flex: 0 0 308px; scroll-snap-align: start; }
@media (min-width: 768px) {
  .vn-dest-list { display: grid; grid-template-columns: repeat(2, minmax(0, 308px)); justify-content: center; gap: 16px; overflow: visible; padding: 0; }
  .vn-dest-list > li { flex: initial; }
}
@media (min-width: 1024px) { .vn-dest-list { grid-template-columns: repeat(4, minmax(0, 308px)); gap: 16px; } }

.vn-dest-card {
  position: relative; width: 100%; height: 200px; flex: 0 0 auto;
  border-radius: 16px; overflow: hidden; background: var(--vn-bg);
  box-shadow: var(--vn-shadow-small); cursor: pointer;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.vn-dest-card:hover { box-shadow: var(--vn-shadow-card); transform: translateY(-4px); }
.vn-dest-media { position: absolute; inset: 0; transition: transform 200ms ease-out; }
.vn-dest-card:hover .vn-dest-media { transform: scale(1.04); }
.vn-dest-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vn-dest-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 20, 51, 0) 25%, rgba(13, 20, 51, 0.72) 100%); pointer-events: none; }
.vn-dest-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; pointer-events: none; }
.vn-dest-caption .t-dest-name { margin: 0; color: var(--vn-text-on-primary); text-align: left; }

.vn-dest-cta { display: flex; justify-content: center; margin-top: 40px; }

/* ==========================================================================
   Produtos e Serviços
   ========================================================================== */

.vn-serv-section { padding-block: 56px; background: var(--vn-bg-blue-tint); }
/* o h2 desta secao carrega font-size fixo (32px, do mobile): no desktop volta ao padrao das outras */
@media (min-width: 900px) { .vn-serv-section h2 { font-size: 48px !important; line-height: 48px; white-space: nowrap; } .vn-serv-br { display: none; } }
@media (max-width: 899.98px) {
  .vn-serv-section { padding-top: 48px; }
  .vn-serv-section .vn-reveal { margin-bottom: 24px !important; }
  .vn-serv-section .vn-reveal > div { align-items: center !important; text-align: center !important; gap: 12px !important; }
}
@media (min-width: 900px) { .vn-serv-section { padding-top: 96px; padding-bottom: 112px; } }

.vn-serv-head { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; margin-bottom: 40px; }
.vn-serv-title-heading { margin: 0; color: var(--vn-primary); text-wrap: pretty; font-size: 32px; }

/* Produtos e Serviços — 6 estados, o produto em destaque sai do grid */
.vn-serv-block { display: grid; grid-template-columns: 1fr; gap: 16px; }
/* 520 + 16 + 744 = 1280 · 3x160 + 2x16 = 512 */
@media (min-width: 900px) { .vn-serv-block { grid-template-columns: minmax(0, 520fr) minmax(0, 744fr); align-items: stretch; height: 512px; } }
.vn-serv-feature { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; height: 512px; box-sizing: border-box; overflow: hidden; padding: 32px 24px; border-radius: 16px; background: var(--vn-primary); text-align: center; }
@media (min-width: 900px) { .vn-serv-feature { padding: 32px 56px; } }
.vn-serv-feature-icon { flex: 0 0 auto; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: var(--vn-bg-blue-tint); color: var(--vn-primary); }
.vn-serv-feature-icon img { width: 72px; height: 72px; }
.vn-serv-feature-body { display: flex; flex-direction: column; gap: 16px; align-items: center; width: 100%; }
/* caixas fixas: ícone, título, descrição e botão sempre no mesmo lugar */
.vn-serv-title { display: flex; align-items: center; justify-content: center; height: 88px; margin: 0; color: var(--vn-text-on-primary); }
/* caixa da descrição igual nos seis produtos: ícone, título e botão não se movem */
.vn-serv-desc { display: flex; align-items: center; justify-content: center; height: 116px; margin: 0; color: var(--vn-text-on-primary); text-wrap: pretty; width: 299px; font-size: clamp(16px, 1.39vw, 20px); line-height: clamp(20px, 1.94vw, 28px); }
.vn-serv-cards { display: grid; grid-template-columns: 1fr; grid-auto-rows: 160px; gap: 16px; }
.vn-serv-cell { min-width: 0; height: 160px; }
.vn-serv-cell .vn-serv-photo { display: none; }
.vn-serv-cell[data-active="true"] .vn-serv-photo { display: block; }
.vn-serv-cell[data-active="true"] .vn-serv-card { display: none; }
@media (min-width: 768px) { .vn-serv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, 160px); } }
@media (min-width: 900px) { .vn-serv-cards { height: 512px; } }
.vn-serv-card { display: flex; align-items: center; justify-content: flex-start; height: 160px; width: 100%; box-sizing: border-box; padding: clamp(16px, 2.22vw, 32px); border: none; border-radius: 16px; cursor: pointer; text-align: left; font: inherit; background: var(--vn-bg); box-shadow: var(--vn-shadow-small); }
.vn-serv-card:hover { transform: translateY(-4px); box-shadow: var(--vn-shadow-card); background: var(--vn-bg-blue-tint); }
.vn-serv-card:focus-visible { outline: 2px solid var(--vn-primary); outline-offset: 2px; }
.vn-serv-row { display: flex; align-items: center; gap: clamp(8px, 1.11vw, 16px); width: 100%; min-width: 0; margin-block: auto; }
.vn-serv-text { display: flex; flex-direction: column; justify-content: center; gap: 4px; flex: 1 1 auto; min-width: 0; }
.vn-serv-card-title { margin: 0; color: var(--vn-text-1); }
.vn-serv-cta { display: flex; align-items: center; gap: 4px; font: 700 14px/20px Afacad, sans-serif; text-transform: uppercase; white-space: nowrap; color: var(--vn-primary); }
.vn-serv-cta svg { flex: 0 0 auto; width: 16px; height: 16px; vertical-align: middle; }
.vn-serv-icon { flex: 0 0 auto; width: clamp(40px, 3.89vw, 56px); height: clamp(40px, 3.89vw, 56px); display: flex; align-items: center; justify-content: center; padding: clamp(8px, 0.83vw, 12px); box-sizing: border-box; border-radius: 12px; background: var(--vn-bg-blue-tint); color: var(--vn-primary); }
.vn-serv-icon img { width: 100%; height: 100%; }

/* MOBILE: acordeao de 6 itens, um aberto por vez; desktop mantem o bloco com loop */
.vn-serv-acc { display: flex; flex-direction: column; gap: 16px; }
.vn-serv-acc-item { width: 100%; border-radius: 16px; background: var(--vn-bg); box-shadow: var(--vn-shadow-small); overflow: hidden; }
.vn-serv-acc-item[data-open="true"] { background: var(--vn-primary); }
.vn-serv-acc-head { display: flex; align-items: center; gap: 8px; width: 100%; height: 60px; box-sizing: border-box; padding: 0 24px; border: none; background: none; cursor: pointer; text-align: left; color: var(--vn-primary); font: 700 20px/28px Afacad, sans-serif; }
.vn-serv-acc-item[data-open="true"] .vn-serv-acc-head { height: 44px; padding: 16px 24px 0; color: var(--vn-text-on-primary); }
.vn-serv-acc-chevbtn { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -10px -10px -10px 0; padding: 0; border: none; background: none; color: inherit; cursor: pointer; border-radius: 8px; }
.vn-serv-acc-chevbtn:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.vn-serv-acc-icon { flex: 0 0 auto; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.vn-serv-acc-icon img { width: 24px; height: 24px; }
.vn-serv-acc-icon--aberto { display: none; }
.vn-serv-acc-item[data-open="true"] .vn-serv-acc-icon--fechado { display: none; }
.vn-serv-acc-item[data-open="true"] .vn-serv-acc-icon--aberto { display: flex; }
.vn-serv-acc-name { flex: 1 1 auto; min-width: 0; }
.vn-serv-acc-chev { flex: 0 0 auto; transition: transform 250ms ease-out; }
.vn-serv-acc-item[data-open="true"] .vn-serv-acc-chev { transform: rotate(180deg); }
.vn-serv-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 250ms ease-out; }
.vn-serv-acc-item[data-open="true"] .vn-serv-acc-panel { grid-template-rows: 1fr; }
.vn-serv-acc-clip { min-height: 0; overflow: hidden; }
.vn-serv-acc-inner { display: flex; flex-direction: column; gap: 16px; padding: 16px 24px 24px; }
.vn-serv-acc-foto { position: relative; width: 100%; height: 160px; border-radius: 16px; overflow: hidden; }
.vn-serv-acc-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vn-serv-acc-desc { margin: 0; color: var(--vn-text-on-primary); font: 400 20px/28px Afacad, sans-serif; text-wrap: pretty; }
.vn-serv-acc-cta { display: flex; align-items: center; justify-content: center; height: 56px; width: 100%; box-sizing: border-box; border-radius: var(--vn-radius-pill); background: var(--vn-accent); color: var(--vn-primary-dark); font: 700 17px/20px Afacad, sans-serif; text-transform: uppercase; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .vn-serv-acc-panel, .vn-serv-acc-chev { transition: none; } }
@media (min-width: 900px) { .vn-serv-acc { display: none; } }
@media (max-width: 899.98px) { .vn-serv-block { display: none; } }

.vn-serv-photo { position: relative; height: 160px; min-width: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--vn-shadow-small); }
.vn-serv-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Destaque Orlando — foto sangrando na borda esquerda, 5 estados
   (seção sem .vn-container de propósito: a foto vai até a borda da tela)
   ========================================================================== */

.vn-orlando { display: grid; grid-template-columns: 1fr; width: 100%; background: var(--vn-primary); padding-block: 0; }
.vn-orlando-photo { position: relative; height: 240px; min-width: 0; }
.vn-orlando-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* caixa do título igual nos cinco estados, para nada se mover na troca */
.vn-orlando-title { min-height: 52px; margin: 0; color: var(--vn-text-on-primary); }
.vn-orl-l1, .vn-orl-l2 { display: block; white-space: nowrap; }
.vn-orlando-body { margin: 0; color: var(--vn-text-on-primary); }

/* MOBILE (decisão do cliente, não é o design original): título em uma linha
   só, com fonte calculada por frase para caber sem quebrar — mesmo mecanismo
   da faixa de trust do Hero. Só abaixo de 900px; o desktop continua igual. */
@media (max-width: 899.98px) {
  .vn-orlando-title { white-space: nowrap; font-size: var(--vn-orl-title-fs, 32px); }
  .vn-orl-l1, .vn-orl-l2 { display: inline; }
}

/* a altura fixa de 2.2em + justify-content:flex-end (mantida "para nada se
   mover na troca") reservava espaço para 2 linhas mas alinhava o texto pela
   base — em título de 1 linha isso sobrava espaço vazio ACIMA do texto,
   dentro da própria caixa do título, descentralizando o bloco inteiro
   (título+descrição+botão) mesmo com .vn-orlando-text centralizando por
   justify-content. Removido: a caixa agora acompanha a altura real do
   título (1 ou 2 linhas) e quem centraliza de verdade é o .vn-orlando-text. */
@media (min-width: 900px) { .vn-orlando-title { min-height: 0; } }
.vn-orlando-text { display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 48px 24px; min-width: 0; }
@media (min-width: 768px) { .vn-orlando-text { padding-inline: 40px; } }
@media (min-width: 900px) {
  .vn-orlando { grid-template-columns: 41.667% minmax(0, 1fr); column-gap: 56px; align-items: stretch; padding-right: 80px; min-height: 416px; }
  /* a frase mais longa mede 570px; abaixo de 1400 a coluna nao comporta e o texto era cortado */
  .vn-orlando .t-section-title { white-space: normal; }
  .vn-orlando-photo { height: 100%; }
}
@media (min-width: 1400px) {
  /* a altura travada de 416 so vale onde o titulo cabe em uma linha */
  .vn-orlando { height: 416px; min-height: 0; }
  .vn-orlando .t-section-title { white-space: nowrap; }
  .vn-orlando-text { height: 100%; padding: 32px 0; }
  .vn-orlando-text > * { max-width: 680px; }
}

/* ==========================================================================
   Diferenciais — seção mais estreita que as demais, de propósito
   ========================================================================== */

.vn-diff-section { padding-block: 56px; background: var(--vn-bg-cream); }
@media (min-width: 900px) { .vn-diff-section { padding-block: 80px; } }
@media (min-width: 1440px) { .vn-diff-section .vn-container { padding-inline: 240px; } }

.vn-diff-head { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; margin-bottom: 40px; }
.vn-diff-title { margin: 0; color: var(--vn-primary); text-wrap: pretty; }

.vn-diff-grid { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 24px; align-items: start; }
.vn-diff-grid > * { min-width: 0; }
@media (min-width: 768px)  { .vn-diff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 900px) {
  .vn-diff-grid { grid-template-columns: repeat(3, minmax(0, 304px)); justify-content: center; gap: 24px; }
  .vn-diff-grid > * { height: 280px; }
}
@media (max-width: 767.98px) { .vn-diff-grid { grid-template-columns: minmax(0, 1fr); justify-content: stretch; padding-inline: 0; } }

.t-diff-title { font: 700 20px/24px Afacad, sans-serif; }
.t-diff-desc  { font: 400 16px/20px Afacad, sans-serif; }

.vn-diff {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; row-gap: 12px;
  align-items: start; text-align: left; padding: 24px 32px;
  justify-content: flex-start; box-sizing: border-box; border-radius: 16px;
  background: var(--vn-bg); cursor: pointer; box-shadow: none; transition: box-shadow 200ms ease-out;
}
.vn-diff:hover { box-shadow: var(--vn-shadow-small); }
.vn-diff > .vn-diff-text { display: contents; }
/* título e descrição deslocados 2px para cima juntos, além do deslocamento de
   4px que já existia só no título — a distância entre os dois (4px) fica igual;
   via position:relative, então o ícone não é afetado */
.vn-diff .t-diff-title { grid-column: 2; align-self: center; margin: 0; color: var(--vn-primary); position: relative; top: -6px; }
.vn-diff .t-diff-desc { grid-column: 1 / -1; margin: 0; color: var(--vn-text-2); text-wrap: pretty; position: relative; top: -2px; }
@media (min-width: 768px) {
  /* conteúdo (ícone+título+descrição) subido 12px: padding-top reduzido,
     padding-bottom mantido, para caber sem estourar os 280px de altura */
  .vn-diff { display: flex; flex-direction: column; text-align: center; align-items: center; gap: clamp(8px, 1.11vw, 16px); padding-top: calc(clamp(20px, 2.22vw, 32px) - 12px); padding-bottom: clamp(20px, 2.22vw, 32px); padding-inline: 24px; height: 280px; }
  .vn-diff > .vn-diff-text { display: flex; }
}
/* container 88x88 com padding 10 e ícone de 54 centralizado */
.vn-diff-icon { flex: 0 0 auto; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; padding: 0; box-sizing: border-box; border-radius: 16px; background: var(--vn-bg-blue-tint); color: var(--vn-primary); }
/* 44 -> 53 por escala (1.2): mudar width/height dispararia reflow */
.vn-diff-icon img { width: 32px; height: 32px; transform-origin: center; transition: transform 200ms ease-out; transform: scale(1); }
.vn-diff:hover .vn-diff-icon img { transform: scale(1.2); }
@media (min-width: 768px) { .vn-diff-icon { width: 88px; height: 88px; padding: 10px; } .vn-diff-icon img { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .vn-diff-icon img { transform: none !important; transition: none; } }
/* espaçamento título↔descrição reduzido em 4px (de 4px para 0px);
   não afeta o mobile, onde .vn-diff-text é display:contents e gap não se aplica */
.vn-diff-text { flex-direction: column; justify-content: flex-start; gap: 0px; width: 100%; flex: 1 1 auto; min-height: 0; }
@media (min-width: 768px) { .vn-diff-text { max-width: 256px; } }

/* ==========================================================================
   Como funciona
   ========================================================================== */

.vn-como-section { padding-block: 56px; background: var(--vn-primary); }
@media (max-width: 767.98px) { .vn-como-section { padding-top: 48px; padding-bottom: 48px; } }
@media (min-width: 900px) { .vn-como-section { padding-top: 96px; padding-bottom: 88px; } }

.vn-como-head { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; margin-bottom: 40px; }
.vn-como-eyebrow { margin: 0; color: var(--vn-text-on-primary); }
.vn-como-title { margin: 0; color: var(--vn-text-on-primary); text-wrap: pretty; }

.vn-steps { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 32px; align-items: start; }
.vn-steps > * { min-width: 0; }
@media (min-width: 768px)  { .vn-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 900px) {
  .vn-steps { grid-template-columns: repeat(4, minmax(0, 302px)); justify-content: center; align-items: start; gap: 24px; height: 320px; }
  .vn-steps > * { height: auto; }
}
@media (max-width: 767.98px) { .vn-steps { margin-top: 0; grid-template-columns: minmax(0, 1fr); justify-content: stretch; padding-inline: 0; } }

.vn-como-cta { display: flex; justify-content: center; margin-top: 16px; }
@media (max-width: 767.98px) {
  .vn-como-cta { width: 100%; margin-top: 48px !important; margin-bottom: 0 !important; }
  .vn-como-cta a { width: 100% !important; max-width: none !important; }
}

.t-step-title { font: 700 20px/24px Afacad, sans-serif; margin: 0; color: var(--vn-text-1); }
.t-step-desc  { font: 400 16px/24px Afacad, sans-serif; margin: 0; color: var(--vn-text-2); }

.vn-step {
  display: flex; flex-direction: row; text-align: left; align-items: flex-start;
  gap: clamp(6px, 0.83vw, 12px); justify-content: flex-start;
  box-sizing: border-box; overflow: hidden; height: 248px; cursor: pointer;
  transition: height 500ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
  padding: clamp(16px, 1.94vw, 28px) clamp(16px, 1.67vw, 24px);
  border-radius: 16px; background: var(--vn-bg); box-shadow: var(--vn-shadow-card);
}
.vn-step:hover { height: 280px; justify-content: center; }
@media (min-width: 768px) { .vn-step { flex-direction: column; text-align: center; align-items: center; } }

/* mão ancorada na BASE do círculo: folga de 8px só em cima */
.vn-step-circle {
  flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden; border-radius: var(--vn-radius-pill);
  background: var(--vn-primary); color: var(--vn-text-on-primary);
  width: 72px; height: 72px;
  transition: width 500ms cubic-bezier(0.18, 0.89, 0.32, 1.28), height 500ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.vn-step:hover .vn-step-circle { width: 96px; height: 96px; }
/* 64 -> 88 por altura; a largura acompanha o círculo sem animar, só a altura */
.vn-step-circle img { width: 72px; height: 64px; transition: height 500ms cubic-bezier(0.18, 0.89, 0.32, 1.28); }
.vn-step:hover .vn-step-circle img { width: 96px; height: 88px; }
@media (prefers-reduced-motion: reduce) { .vn-step-circle, .vn-step-circle img, .vn-step { transition: none !important; } }

.vn-step-desc { max-width: 254px; }
.vn-step-num { display: none; }
@media (max-width: 767.98px) { .vn-step-num { display: inline; } }
.vn-step-text { display: flex; flex-direction: column; gap: clamp(6px, 0.83vw, 12px); align-items: center; flex: 1 1 auto; min-height: 0; }

/* MOBILE: card com altura de conteudo; !important vence o height/padding inline (que seguem valendo do desktop pra cima) */
@media (max-width: 767.98px) {
  .vn-step { height: auto !important; min-height: 0; max-height: none; overflow: visible !important; padding: 0 !important; gap: 16px !important; justify-content: flex-start !important; background: none !important; border-radius: 0 !important; box-shadow: none !important; cursor: default; }
  .vn-step-circle { width: 72px !important; height: 72px !important; }
  .vn-step-circle img { width: 72px !important; height: 64px !important; }
  .vn-step-text { gap: 0; align-items: flex-start; width: auto; flex: 1 1 auto; }
  .vn-step-text .t-step-title { font: 700 24px/32px Afacad, sans-serif; color: var(--vn-text-on-primary); }
  .vn-step-desc { color: rgba(255, 255, 255, 0.8); }
  .vn-step-desc { max-width: none; width: 100%; }
}

/* ==========================================================================
   Números (#stats)
   ========================================================================== */

.vn-stats-section { padding-block: 56px; background: var(--vn-bg-cream); }
@media (min-width: 900px) { .vn-stats-section { padding-top: 96px; padding-bottom: 112px; } }
/* 1160 de conteudo + 80 de padding lateral de cada lado */
@media (min-width: 1024px) { .vn-stats-section .vn-container { max-width: 1320px; } }

.vn-stats-head { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; margin-bottom: 40px; }
.vn-stats-eyebrow { margin: 0; color: var(--vn-text-2); }
.vn-stats-title { margin: 0; color: var(--vn-primary); text-wrap: pretty; }
.vn-stats-subtitle { margin: 0; max-width: 628px; color: var(--vn-text-2); }

.vn-stats { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; margin: 0; padding: 0; list-style: none; }
.vn-stats > * { min-width: 0; }
@media (min-width: 768px)  { .vn-stats { grid-template-columns: repeat(3, minmax(0, 344px)); justify-content: space-between; gap: 24px; } }
@media (min-width: 1024px) { .vn-stats { gap: 64px; } .vn-stats > * { height: 144px; } }

.vn-stat-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; height: 144px; box-sizing: border-box; padding: 32px 40px; border-radius: 16px; background: var(--vn-bg); text-align: center; overflow: hidden; }
.vn-stat-card--wide { flex-direction: row; padding: 36px 8px 32px; }
/* um unico paragrafo: spans inline + <br>, sem flex, para nao quebrar entre trechos */
.vn-stat-lines { display: block; width: 100%; max-width: 328px; flex: 0 0 auto; margin-inline: auto; text-align: center; white-space: normal; }
.vn-stat-lines strong { display: inline; }
/* cada linha e um nowrap: o <br> segue sendo a unica quebra mesmo medida em 24/48px */
.vn-stat-lines span { display: inline; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .vn-stat-card, .vn-stat-card * { transition: none !important; } }
.t-stat-num   { font: 700 48px/48px Afacad, sans-serif; margin: 0; color: var(--vn-primary); }
.t-stat-label { font: 600 20px/24px Afacad, sans-serif; margin: 0; color: var(--vn-text-2); }
/* declarado depois de .t-stat-label para vencer o shorthand font, que reseta
   line-height; os strong herdam para a line box não virar 48px */
.vn-stat-lines { line-height: 38px; }
/* strong de 48px em linha de 44 tem half-leading negativo e esticaria a line box:
   line-height 0 deixa o strut do paragrafo mandar */
.vn-stat-lines strong { line-height: 0; }

/* no hover cresce o TEXTO, não o card: 294x144 nos dois estados */
/* font-size fica travado no valor de hover; o estado default e um scale() do
   bloco de texto — animamos transform, nao font-size (sem reflow por quadro) */
.vn-stats .vn-stat-card { --vn-bounce: 500ms cubic-bezier(0.18, 0.89, 0.32, 1.28); overflow: hidden; transition: box-shadow var(--vn-bounce); }
.vn-stats .vn-stat-card:hover { box-shadow: var(--vn-shadow-small); }
.vn-stats .vn-stat-card .t-stat-num,
.vn-stats .vn-stat-card .t-stat-label { transform-origin: center; will-change: transform; transition: transform var(--vn-bounce); }
/* cards 1 e 2: numero 48/64, rotulo 20/24 */
.vn-stats .vn-stat-card .t-stat-num { font-size: 64px; line-height: 48px; white-space: nowrap; transform: scale(0.75); }
.vn-stats .vn-stat-card .t-stat-label { font-size: 24px; transform: scale(0.8333); }
.vn-stats .vn-stat-card:hover .t-stat-num,
.vn-stats .vn-stat-card:hover .t-stat-label { transform: none; }
/* card 3: line-height travado em 38 nos dois estados; so a fonte cresce (20->24,
   40->48), entao os glifos ocupam mais da caixa fixa e as linhas convergem,
   como nos cards 1 e 2 */
.vn-stats .vn-stat-card--wide .vn-stat-lines { font-size: 20px; line-height: 38px; transform: none; transform-origin: center; transition: font-size var(--vn-bounce); }
.vn-stats .vn-stat-card--wide .vn-stat-lines .t-stat-num { font-size: 40px; line-height: 0; white-space: nowrap; transform: none; transition: font-size var(--vn-bounce); }
.vn-stats .vn-stat-card--wide:hover .vn-stat-lines { font-size: 24px; }
.vn-stats .vn-stat-card--wide:hover .vn-stat-lines .t-stat-num { font-size: 48px; }

/* ==========================================================================
   Depoimentos — três cards persistentes que rotacionam de papel
   (grande / pequeno / oculto). Nenhum nó é destruído: as mesmas caixas
   mudam de tamanho, posição e cor. Sem .vn-container de propósito — a
   seção controla sua própria largura via .vn-tst-frame.
   ========================================================================== */

.vn-tst-section { padding: 56px 24px; display: flex; flex-direction: column; align-items: center; gap: 48px; background: var(--vn-accent); }
.vn-tst-frame { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; }
.vn-tst-row { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; }
.vn-tst-text { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: 416px; text-align: center; }
.vn-tst-eyebrow { margin: 0; color: var(--vn-primary); }
.vn-tst-title-wrap { display: flex; flex-direction: column; gap: 16px; }
.t-tst-title { font: 700 32px/1.1 Afacad, sans-serif; margin: 0; color: var(--vn-primary); }
@media (min-width: 768px) { .t-tst-title { font-size: 56px; line-height: 48px; } }
.t-tst-desc { font: 400 20px/28px Afacad, sans-serif; margin: 0; color: var(--vn-text-1); }
@media (min-width: 768px) { .t-tst-desc { font-size: 24px; line-height: 32px; } }

.vn-tst-stage { position: relative; width: 100%; }
.vn-tst-card { position: relative; box-sizing: border-box; width: 100%; padding: 32px 24px; border-radius: 24px; background: var(--vn-primary); box-shadow: var(--vn-shadow-small); overflow: visible; text-align: left; border: none; color: var(--vn-text-on-primary); }
.vn-tst-card[data-state="pequeno"], .vn-tst-card[data-state="oculto"] { display: none; }
/* perfil e menu (play/som) alinhados entre si e centralizados verticalmente
   no card — antes eram alinhados pela base (flex-end) */
.vn-tst-author { display: flex; justify-content: space-between; align-items: center; height: 100%; }
.vn-tst-profile { display: flex; flex-direction: column; gap: 7px; width: 130px; color: var(--vn-text-on-primary); }
.vn-tst-profile > span { white-space: nowrap; }
.vn-tst-avatar { display: block; width: 66px; height: 66px; border-radius: var(--vn-radius-pill); overflow: hidden; border: 4px solid var(--vn-accent); }
.vn-tst-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vn-tst-name { display: block; font: 700 32px/32px Afacad, sans-serif; }
.vn-tst-role { display: block; font: 400 20px/24px Afacad, sans-serif; }
.vn-tst-meta { display: block; font: 400 16px/20px Afacad, sans-serif; }
.vn-tst-menu { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 22px; width: 55px; }
.vn-tst-menu > button { border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 55px; height: 55px; border-radius: var(--vn-radius-pill); background: var(--vn-bg); color: var(--vn-primary); box-shadow: var(--vn-shadow-small); }
.vn-tst-post { box-sizing: border-box; width: 100%; max-width: 292px; margin-top: 24px; padding: 14px; border-radius: 16px; background: var(--vn-bg); box-shadow: var(--vn-shadow-card); display: flex; flex-direction: column; gap: 8px; color: var(--vn-text-1); }
.vn-tst-post-header { display: flex; align-items: center; gap: 8px; }
.vn-tst-post-avatar { display: block; width: 32px; height: 32px; border-radius: var(--vn-radius-pill); overflow: hidden; }
.vn-tst-post-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vn-tst-post-username { color: var(--vn-text-1); font-weight: 700; }
.vn-tst-post-badge { width: 16px; height: 16px; }
.vn-tst-media { position: relative; width: 100%; border-radius: 8px; overflow: hidden; aspect-ratio: 258 / 285; }
.vn-tst-media video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.vn-tst-post-actions { display: flex; align-items: center; gap: 16px; color: var(--vn-primary); }
.vn-tst-icon-24 { width: 24px; height: 24px; }
.vn-tst-icon-dim { opacity: 0.5; }
.vn-tst-post-save { margin-left: auto; color: var(--vn-text-1); }
.vn-tst-caption { margin: 0; font: 700 16px/24px Afacad, sans-serif; color: var(--vn-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vn-tst-dots { display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; height: 24px; margin: 0; padding: 0; list-style: none; }
/* regra que faltou no port original: no desktop, o elemento que agrupa os
   3 cards (usado para o slide mobile) precisa "sumir" do layout, senão o
   transform: translateX aplicado por script.js (pensado só pro mobile)
   empurra os cards de verdade, mesmo eles sendo position:absolute. */
.vn-tst-track, .vn-tst-txt, .vn-tst-line { display: contents; }
.vn-tst-name1 { display: none; }
.vn-tst-dot { display: block; width: 12px; height: 12px; border: none; padding: 0; border-radius: var(--vn-radius-pill); background: var(--vn-primary); cursor: pointer; }
.vn-tst-dot[data-current="true"] { width: 24px; height: 24px; }

/* botões de play/pausa e som: os dois estados do ícone já estão sempre no
   SVG, o CSS só mostra um por vez conforme o data-attribute do botão */
.vn-tst-playbtn .vn-icon-pause { display: none; }
.vn-tst-playbtn[data-playing="true"] .vn-icon-play { display: none; }
.vn-tst-playbtn[data-playing="true"] .vn-icon-pause { display: block; }
.vn-tst-sombtn .vn-icon-mudo { display: none; }
.vn-tst-sombtn[data-muted="true"] .vn-icon-som { display: none; }
.vn-tst-sombtn[data-muted="true"] .vn-icon-mudo { display: block; }

@media (min-width: 1024px) {
  /* medidas absolutas de 1440: o container e ancorado a esquerda e o corte acontece so a direita.
     Altura reduzida em 24px (682px→658px): 12px do espaço acima dos pontinhos
     (ver .vn-tst-dots, top ajustado) + 12px do espaço abaixo deles (sobra ao
     final da seção, então basta encolher a altura total, sem reposicionar
     mais nada). Cards e texto não mudam de lugar.
     Depois, mais 4px (658px→654px): o espaço acima do conteúdo (48px, até o
     stage) era 4px maior que o espaço abaixo dos pontinhos (44px, até o fim
     da seção). Para igualar os dois em 44px, todo o conteúdo (texto, stage,
     pontinhos) subiu 4px junto e a altura total encolheu os mesmos 4px — o
     espaçamento interno entre eles não mudou, só o de cima e o de baixo
     ficaram iguais.
     Depois, mais 12px só no topo (654px→642px, decisão do cliente): o espaço
     de cima caiu para 32px (era 44px), o de baixo continua 44px — não é mais
     simétrico de propósito, só a seção ficou mais baixa. Texto, stage e
     pontinhos subiram 12px juntos; o espaçamento interno entre eles e a
     posição dos pontinhos em relação ao fim da seção não mudaram.
     Depois, mais 12px no topo (642px→630px, decisão do cliente): o espaço do
     início da seção até o bloco de texto caiu de 177px para 165px; o de
     baixo continua 44px. Mesmo mecanismo: texto, stage e pontinhos sobem
     12px juntos, sem mudar o espaçamento interno entre eles. */
  .vn-tst-section { display: block; padding: 0; width: 100vw; height: 630px; overflow-x: hidden; }
  .vn-tst-frame { position: relative; display: block; box-sizing: border-box; width: 1440px; min-width: 1440px; height: 630px; margin-inline: auto; padding: 0; gap: 0; }
  .vn-tst-row { display: block; width: auto; height: auto; gap: 0; }
  /* coluna de texto: largura fixa, nunca vaza nem encolhe. O left replica a
     mesma margem que .vn-container usa nas demais seções da página (padding
     de 80px, centralizado quando a tela passa de 1280px) — não um valor
     fixo, para a margem bater com as outras seções em qualquer largura.
     Resulta em 80px a 1280px e 160px a 1440px, igual ao Destinos/Como
     funciona/etc. Nota: como o card ativo tem sua própria fórmula de
     posição (ligada à largura do stage, não à do container padrão), a
     distância entre o texto e o card volta a variar conforme a tela --
     a prioridade aqui foi alinhar com as outras seções, como pedido. */
  .vn-tst-text { position: absolute; left: calc(max(0px, (100vw - 1280px) / 2) + 80px); top: 165px; flex: none; width: 416px; max-width: none; height: 368px; gap: 24px; text-align: center; }
  .vn-tst-text > .t-eyebrow { height: 16px; }
  /* decisão do cliente: gap original do design era 88px (título↔descrição);
     reduzido para aproximar a descrição do título. Eyebrow e título não se
     movem — só a descrição desce menos no fluxo do flex. */
  .vn-tst-title-wrap { gap: 24px; }
  .vn-tst-text .t-tst-title { height: 144px; }
  .vn-tst-text .t-tst-desc { height: 96px; }
  /* carrossel: encosta na borda direita do container; o track fixo de 1022 corta 126px do card seguinte */
  .vn-tst-stage { position: absolute; left: 544px; top: 20px; flex: none; width: min(896px, calc(100vw - 544px)); height: 522px; overflow: hidden; }
  .vn-tst-card { position: absolute; display: block; box-sizing: border-box; cursor: default; overflow: visible; }
  /* decisão do cliente: no design original o card ATIVO tinha 816px de largura
     (816x375 em x=0, y=114), sobrando ~235px de área azul vazia depois dos
     botões de play/som (que terminam em x=581). Reduzido para 635px = 581 +
     54px de padding direito (mesmo valor já usado no padding esquerdo).
     Card seguinte (pequeno/oculto) mantém a fórmula original do design
     (right:-126px, ver abaixo) — então, para os dois encostarem sem espaço
     vazio em QUALQUER largura, é o card ativo que se desloca para a direita,
     via calc() em % do stage (não um valor fixo em px, que só acertaria em
     uma largura): left = 100% do stage - 715px, onde 715 = 635 (largura do
     próprio card) + 80 (folga que o card seguinte já mantém da borda direita
     do stage, resultante do right:-126px dele). Isso garante que a borda
     direita do card ativo sempre coincida com a borda esquerda do card
     seguinte, não importa o quanto o stage encolha entre 1024-1440px. */
  .vn-tst-card[data-state="grande"] { left: calc(100% - 715px); top: 114px; width: 635px; height: 375px; padding: 48px 54px; z-index: 3; background: var(--vn-primary); border-radius: 24px; clip-path: none; }
  /* SEGUINTE: fórmula original do design mantida sem alteração —
     right:-126px, sempre ancorado à borda direita do stage.
     top ajustado (189px→161.5px) para centralizar verticalmente com o card
     ativo: centro do ativo = 114 + 375/2 = 301.5px; logo top = 301.5 - 280/2.
     Border-radius removido (cantos retos, por pedido do cliente). */
  .vn-tst-card[data-state="pequeno"], .vn-tst-card[data-state="oculto"] { display: block; left: auto; right: -126px; top: 161.5px !important; width: 206px; height: 280px !important; padding: 56px 0 0 32px; background: var(--vn-primary-dark); border-radius: 0; overflow: hidden; clip-path: none; }
  .vn-tst-card[data-state="pequeno"] > *, .vn-tst-card[data-state="oculto"] > * { visibility: hidden; }
  .vn-tst-card[data-state="pequeno"] { z-index: 2; cursor: pointer; }
  .vn-tst-card[data-state="oculto"] { z-index: 1; pointer-events: none; }

  /* o que nao pertence ao card seguinte simplesmente nao ocupa espaco nele */
  .vn-tst-card[data-state="pequeno"] .vn-tst-meta,
  .vn-tst-card[data-state="oculto"] .vn-tst-meta,
  .vn-tst-card[data-state="pequeno"] .vn-tst-menu,
  .vn-tst-card[data-state="oculto"] .vn-tst-menu,
  .vn-tst-card[data-state="pequeno"] .vn-tst-post,
  .vn-tst-card[data-state="oculto"] .vn-tst-post { display: none; }

  /* foto, nome e cargo sao os mesmos nos: encolhem e se movem junto com o card */
  .vn-tst-card[data-state="pequeno"] .vn-tst-author,
  .vn-tst-card[data-state="oculto"] .vn-tst-author { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; height: auto; }
  .vn-tst-card[data-state="pequeno"] .vn-tst-profile,
  .vn-tst-card[data-state="oculto"] .vn-tst-profile { width: 100%; align-items: flex-start; text-align: left; gap: 0; }
  .vn-tst-card[data-state="pequeno"] .vn-tst-avatar,
  .vn-tst-card[data-state="oculto"] .vn-tst-avatar { width: 72px; height: 72px; flex: none; border-width: 3px; margin-bottom: 8px; }
  .vn-tst-card[data-state="pequeno"] .vn-tst-name,
  .vn-tst-card[data-state="oculto"] .vn-tst-name { height: 24px; font-size: 24px; line-height: 24px; font-weight: 600; white-space: nowrap; }
  .vn-tst-card[data-state="pequeno"] .vn-tst-role,
  .vn-tst-card[data-state="oculto"] .vn-tst-role { height: 16px; margin-top: 32px; font-size: 16px; line-height: 16px; white-space: nowrap; }

  .vn-tst-menu { position: absolute; left: 526px; top: 50%; transform: translateY(-50%); }
  /* top ajustado para -58px: com a altura atual (433px), post_bottom =
     top + height = -58 + 433 = 375px, igual à altura do card ativo — as
     duas bordas inferiores encostam exatamente, sem faixa azul sobrando.
     Altura, largura e left não mudaram, só a posição vertical. */
  .vn-tst-post { position: absolute; left: 195px; top: -58px; z-index: 2; width: 292px; height: 433px; margin-top: 0; }
  .vn-tst-media { width: 258px; height: 285px; align-self: center; aspect-ratio: auto; }
  /* centralizados no mesmo eixo X do card ativo (não mais em left fixo).
     Diferente do card, .vn-tst-dots é filho direto de .vn-tst-frame (1440px
     fixo), não do stage — então não dá pra usar % aqui, tem que repetir a
     mesma fórmula de largura do stage (min(896px, 100vw-544px)) usada em
     .vn-tst-stage. Left do card em relação ao frame = 544 (left do stage) +
     (stage - 715) = stage - 171; centro do card = stage - 171 + 635/2 =
     stage - 171 + 317.5; left dos pontinhos (634px de largura) = centro -
     634/2 = stage - 171 + 317.5 - 317 = stage - 170.5px. */
  /* top subido 12px (602px→590px), depois mais 4px (590px→586px) junto com o
     resto do conteúdo — ver comentário em .vn-tst-section sobre igualar o
     espaço de cima ao de baixo. */
  .vn-tst-dots { position: absolute; left: calc(min(896px, 100vw - 544px) - 170.5px); top: 562px; width: 634px; height: 24px; padding: 0; justify-content: center; }
}
/* MOBILE (<1024): um card por vez, track deslizando em translateX; nada de previa do proximo */
@media (max-width: 1023.98px) {
  .vn-tst-section { box-sizing: border-box; display: block; height: auto; overflow: hidden; padding: 56px 0; gap: 0; }
  .vn-tst-text { box-sizing: border-box; width: 100%; max-width: none; padding-inline: 24px; }
  .vn-tst-frame { position: static; display: block; flex: none; width: 100%; height: auto; gap: 0; }
  .vn-tst-row { display: block; }
  .vn-tst-stage { position: static; box-sizing: border-box; width: 100%; max-width: none; height: auto; margin: 48px 0 0; padding-inline: 24px; overflow: hidden; }
  .vn-tst-track { display: flex; align-items: flex-start; gap: 24px; width: max-content; will-change: transform; }
  /* estrutura mobile fiel ao frame do Figma (node 200:4493): 3 blocos
     empilhados e independentes — card azul do autor, card branco do post,
     botões de play/som — não mais um único card azul envolvendo tudo. */
  .vn-tst-card,
  .vn-tst-card[data-state="pequeno"],
  .vn-tst-card[data-state="oculto"] { display: flex; flex-direction: column; gap: 0; flex: 0 0 auto; width: calc(100vw - 48px) !important; height: auto !important; top: auto !important; padding: 0 !important; background: none; box-shadow: none; overflow: visible; cursor: default; }

  /* card azul do autor: agora um card próprio (era só uma faixa dentro do
     card único), com o conteúdo centralizado horizontalmente, como no Figma.
     Encostado no card branco do post (sem espaço entre eles): cantos
     inferiores retos, só os superiores mantêm o arredondamento. */
  .vn-tst-author { box-sizing: border-box; width: 100%; height: auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 32px 40px; border-radius: 24px 24px 0 0; background: var(--vn-primary); box-shadow: var(--vn-shadow-small); }
  .vn-tst-profile { flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 12px; width: auto; }
  .vn-tst-avatar { flex: 0 0 auto; width: 96px; height: 96px; border-width: 6px; }
  .vn-tst-profile > .vn-tst-txt { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .vn-tst-name { display: none; }
  .vn-tst-name1 { display: block; height: auto; font: 600 32px/27px Afacad, sans-serif; white-space: nowrap; }
  /* cargo + seguidores juntos na mesma linha, separados por ponto médio;
     handle (@) sozinho na linha seguinte */
  .vn-tst-line { display: flex; flex-direction: row; align-items: baseline; gap: 0; }
  .vn-tst-line .vn-tst-role::after { content: " · "; }
  .vn-tst-role { height: auto; font: 400 18px/21px Afacad, sans-serif; white-space: nowrap; }
  .vn-tst-line .vn-tst-meta { font-size: 18px; line-height: 21px; }
  .vn-tst-meta { height: auto; font: 400 20px/20px Afacad, sans-serif; white-space: nowrap; }

  /* card branco do post: encostado no card azul do autor (sem espaço entre
     eles), por isso sem margin-top — cantos superiores retos, só os
     inferiores mantêm o arredondamento */
  .vn-tst-post { box-sizing: border-box; width: 100%; max-width: none; height: auto; margin-top: 0; border-radius: 0 0 16px 16px; }
  .vn-tst-media { flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 258 / 285; }

  /* botões de play/som: abaixo do post, lado a lado e centralizados —
     círculo azul com ícone branco (invertido do desktop, que é círculo
     branco com ícone azul). margin-top compensa o gap:0 do .vn-tst-card
     (que agora só existe pra grudar o card azul no branco) e preserva o
     mesmo espaçamento de antes entre o post e os botões. */
  .vn-tst-menu { position: static; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 48px; width: 100%; margin-top: 24px; transform: none; }
  .vn-tst-menu > button { width: 72px; height: 72px; background: var(--vn-primary); color: var(--vn-text-on-primary); box-shadow: none; }
  .vn-tst-menu > button:last-child { width: 71px; }
  .vn-tst-menu > button svg { width: 41px; height: 41px; }

  .vn-tst-dots { position: static; width: 100%; margin-top: 32px; }
}
/* carrossel de depoimentos: transição instantânea, como os demais do projeto
   (decisão do cliente) — nenhuma troca de estado ou de card anima */
.vn-tst-card,
.vn-tst-card *,
.vn-tst-track,
.vn-tst-dot { transition: none; animation: none; }

/* ==========================================================================
   FAQ
   ========================================================================== */

.vn-faq-section { padding: 72px 0 80px; background: var(--vn-bg-cream); }

.vn-faq-head { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; margin-bottom: 16px; }
.vn-faq-eyebrow { margin: 0; color: var(--vn-text-2); }
.vn-faq-title { margin: 0; color: var(--vn-primary); text-wrap: pretty; }
.vn-faq-subtitle { margin: 0; max-width: 628px; color: var(--vn-text-2); }

.vn-faq { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: stretch; padding-top: 32px; }
.vn-faq > * { min-width: 0; }
@media (min-width: 768px) { .vn-faq { grid-template-columns: repeat(2, minmax(0, 628px)); justify-content: center; gap: 24px; } }
/* a altura precisa descer tambem pelo mount do dc-import, senao o card fica auto e transborda */
@media (min-width: 1024px) { .vn-faq > * { height: 152px; } .vn-faq > * > * { height: 100%; } }

.t-card-title { font: 700 20px/24px Afacad, sans-serif; }

.vn-faq-item {
  display: flex; flex-direction: column; gap: 8px; justify-content: flex-start;
  height: 100%; padding: 24px 32px; border-radius: 12px; background: var(--vn-bg);
  box-sizing: border-box; box-shadow: var(--vn-shadow-small);
  transform: translateY(0); transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.vn-faq-item:hover { box-shadow: var(--vn-shadow-card); transform: translateY(-4px); }
.vn-faq-heading { margin: 0; color: var(--vn-text-1); text-wrap: pretty; }
.vn-faq-trigger { display: flex; align-items: flex-start; gap: 0; width: 100%; padding: 0; border: none; background: transparent; font: inherit; color: inherit; text-align: left; cursor: default; }
.vn-faq-answer { margin: 0; color: var(--vn-text-2); text-wrap: pretty; overflow: hidden; }
.vn-faq-chev { display: none; }
/* MOBILE: chevron alinhado a PRIMEIRA linha da pergunta, para nao descer quando o card abre */
@media (max-width: 767px) {
  .vn-faq-trigger { cursor: pointer; }
  .vn-faq-chev { display: block; flex: 0 0 auto; margin-top: 8px; color: var(--vn-primary); transition: transform 250ms ease-out; }
  .vn-faq-trigger[aria-expanded="true"] .vn-faq-chev { transform: rotate(180deg); }
  .vn-faq-q { flex: 1 1 auto; min-width: 0; padding-right: 16px; }
  /* cada FaqItem abre/fecha de forma independente (não é acordeão exclusivo,
     diferente do de Produtos e Serviços) — igual ao componente original,
     onde cada instância tem seu próprio state.open */
  .vn-faq-item[data-open="false"] .vn-faq-answer { display: none; }
}
@media (prefers-reduced-motion: reduce) { .vn-faq-chev { transition: none; } }

/* ==========================================================================
   Segurança e Canais Oficiais
   ========================================================================== */

.vn-seg-section { padding: 56px 24px; background: var(--vn-primary); }
@media (min-width: 768px)  { .vn-seg-section { padding-inline: 40px; } }

.vn-seg { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.vn-seg-title-stack { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 12px; }
.vn-seg-eyebrow { margin: 0; color: var(--vn-text-on-primary); }
.vn-seg-heading { margin: 0; color: var(--vn-text-on-primary); text-wrap: pretty; }
.vn-seg-subtitle { max-width: 628px; color: var(--vn-text-on-primary); margin: 0; }

.vn-seg-list { display: flex; flex-direction: column; gap: 32px; margin: 0; padding: 0; list-style: none; }
.vn-seg-list > li { display: flex; align-items: center; gap: 16px; min-height: 56px; }
.vn-seg-icon { flex: 0 0 auto; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--vn-bg); color: var(--vn-primary); }
.vn-seg-icon img { width: 24px; height: 24px; }
.vn-seg-text { margin: 0; color: var(--vn-text-on-primary); }
.vn-seg-label::after { content: " "; white-space: pre; }
.vn-seg-value { color: var(--vn-text-on-primary); font-weight: 700; }
.vn-seg-value:hover { color: var(--vn-text-on-primary); }
.vn-seg-value--site { text-decoration: underline; }

/* fiel ao frame do Figma (node 373:1989): fundo azul vivo (--vn-primary),
   eyebrow/título/descrição em branco, e os 4 canais soltos sobre o fundo azul
   — o quadrado branco fica só ao redor do ícone, sem o card branco de
   largura total que existia antes */
@media (max-width: 1023.98px) {
  .vn-seg-section { padding-block: 48px; }
  .vn-seg { gap: 24px; }
  .vn-seg-title-stack { gap: 24px; }
  .vn-seg-eyebrow { line-height: 24px; letter-spacing: 2px; }
  .vn-seg-heading { color: var(--vn-text-on-primary); font-size: 26px; line-height: 1.12; }
  .vn-seg-subtitle { font-size: 18px; line-height: 27px; max-width: none; }

  .vn-seg-list { gap: 12px; }
  .vn-seg-list, .vn-seg-list > li, .vn-seg-list > li > p { min-width: 0; }
  .vn-seg-list > li { align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; }
  /* decisão do cliente: texto pequeno demais no mobile — 18px nos 4 canais
     (rótulo e valor), igualando o tamanho já usado no e-mail do rodapé */
  .vn-seg-list > li > p { display: block; flex: 1 1 auto; font: 400 18px/24px Afacad, sans-serif; }
  .vn-seg-icon { width: 40px; height: 40px; border-radius: var(--vn-radius-pill); background: var(--vn-bg); }
  .vn-seg-icon img { width: 20px; height: 20px; }
  .vn-seg-value { overflow-wrap: anywhere; font-size: 18px; font-weight: 700; }
  .vn-seg-value--site { text-decoration: none; }
  /* card de e-mail: sem rótulo no mobile (fiel ao Figma), só o endereço —
     mantém a mesma altura de 1 linha dos outros 3 cards */
  .vn-seg-list > li:nth-child(3) .vn-seg-label { display: none; }
}

/* DESKTOP: caixa travada em 1440x464; as duas colunas sao posicionadas em absoluto */
@media (min-width: 1024px) {
  .vn-seg-section { box-sizing: border-box; display: flex; justify-content: center; height: 464px; padding: 0; overflow: hidden; }
  .vn-seg { position: relative; box-sizing: border-box; width: 1440px; min-width: 1440px; flex: 0 0 1440px; height: 464px; display: block; gap: 0; }
  /* mesmo gutter do hero e das outras seções do desktop */
  .vn-seg-title { position: absolute; left: 160px; top: 124px; width: 604px; }
  .vn-seg-title .t-eyebrow { white-space: nowrap; }
  .vn-seg-title-stack { gap: 24px; }
  .vn-seg-title .t-eyebrow { width: 238px; height: 16px; }
  .vn-seg-title h2 { width: 604px; height: 96px; text-wrap: balance; }
  .vn-seg-title .t-seg-body { width: 604px; height: 48px; max-width: none; margin-top: 8px; overflow: visible; font: 400 20px/24px Afacad, sans-serif; }
  .vn-seg-list { position: absolute; left: 860px; top: 72px; width: 460px; gap: 32px; align-items: flex-start; }
  .vn-seg-list > li { width: auto; height: 56px; min-height: 0; gap: 16px; }
  .vn-seg-icon { border-radius: 12px; }
  .vn-seg-list > li > p { font: 400 20px/20px Afacad, sans-serif; }
  .vn-seg-list > li:nth-child(1) .vn-seg-icon img { width: 32px; height: 32px; }
  .vn-seg-list > li:nth-child(2) .vn-seg-icon img { width: 29px; height: 29px; }
  .vn-seg-list > li:nth-child(3) .vn-seg-icon img { width: 30px; height: 30px; }
  .vn-seg-list > li:nth-child(4) .vn-seg-icon img { width: 29px; height: 29px; }
}

/* ==========================================================================
   Rodapé
   ========================================================================== */

.vn-footer { padding: 56px 24px 40px; background: var(--vn-bg); }
@media (min-width: 768px)  { .vn-footer { padding-inline: 40px; } }
@media (min-width: 1024px) { .vn-footer { padding-inline: 120px; } }

.vn-footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px)  { .vn-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* larguras automaticas: colunas fixas espremiam os titulos em duas linhas */
@media (min-width: 1024px) { .vn-footer-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; } }
@media (min-width: 1024px) { .vn-footer-col { flex: 0 0 auto; } .vn-footer-col h2, .vn-footer-col h3, .vn-footer-col li { white-space: nowrap; } }

.vn-footer-col { display: flex; flex-direction: column; gap: 8px; }
.vn-footer-col ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vn-footer-heading { margin: 0; color: var(--vn-text-1); }
.vn-footer-desc, .vn-footer-link { color: var(--vn-text-2); }
.vn-footer-desc { margin: 0; }

.vn-footer-rule { width: 100%; margin: 24px 0 0; border: none; border-top: 1px solid var(--vn-border); }
.vn-footer-copy { margin: 25px 0 0; color: var(--vn-text-2); }

@media (max-width: 767.98px) {
  .vn-footer-col { gap: 12px; }
  .vn-footer-col ul { gap: 12px; }
  .vn-footer-heading { font-size: 20px; line-height: 26px; font-weight: 700; }
  .vn-footer-col li, .vn-footer-col li a { font-size: 18px; line-height: 24px; }
  .vn-footer-col > .t-body { font-size: 18px; line-height: 24px; }
  .vn-footer-copy, .vn-footer-copy * { font-size: 16px; line-height: 22px; }
}

.vn-reveal { opacity: 0; transform: translateY(24px); transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1), transform 500ms cubic-bezier(0.16, 1, 0.3, 1); }
.vn-reveal.is-in { opacity: 1; transform: none; }
/* mobile: os cards de Destinos nao entram com translateY — o carrossel rola na horizontal e o reveal empurrava cada card verticalmente */
@media (max-width: 767.98px) {
  .vn-dest-list > li.vn-reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Redução de movimento — regra geral do projeto
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .vn-reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; transition: none !important; }
}