/* ══════════════════════════════════════════════════════════════
   AERONAVES PAGE — Styles

   PARÂMETRO MESTRE: --aero-scale  (definido via JS em aeronaves.js)
   • 1    = design original (1440px)
   • 0.65 = mínimo (≈ 940px viewport)
   ══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────
   SEÇÃO 1 — HERO
───────────────────────────────────── */
.aero-hero {
  --aero-scale: 1;    /* sobrescrito pelo JS */

  background: #fff;
  overflow: hidden;   /* oculta o sangramento do SVG nas bordas */

  /* Padding em vw: escala com o viewport E com o zoom do browser.
     Zoom in  → vw diminui → padding proporcional → imagem menor.
     Zoom out → vw aumenta → padding proporcional → imagem maior. */
  padding: 0;

  display: flex;
  justify-content: center;
}

/* ── Wrapper interno: centraliza e dimensiona o SVG ── */
.aero-hero__inner {
  position: relative;
  width: 100%;
  /* max-width limita em telas muito largas */
  max-width: 1440px;
}

/* ── Wrapper: centering + efeito 3D via JS ── */
.aero-hero__bg-wrap {
  display: block;
  width: 140%;
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);           /* base — sobrescrito pelo JS no hover */
  will-change: transform;
}

/* ── SVG: apenas a imagem, sem centering próprio ── */
/* <picture> e inline por padrao e criaria uma folga de linha-base sob o SVG */
.aero-hero__bg-picture {
  display: block;
  width: 100%;
}
.aero-hero__bg-img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* ── Mosaico de fundo: reconstrucao em HTML/CSS das composicoes que antes
   vinham de dois SVG de 13 MB. Cada um era 100% duas fotos em base64 e ~1,5 KB
   de vetor, entao o formato so acrescentava 33% de overhead, sem cache proprio
   nem possibilidade de servir resolucoes diferentes por dispositivo.
   Ha duas variantes porque as composicoes sao diferentes, nao so reescaladas. */
.aero-hero__mosaico {
  position: relative;
}
.aero-hero__mosaico--desktop {
  width: 100%;
  aspect-ratio: 2005 / 626;   /* proporcao do viewBox original */
}
.aero-hero__mosaico--mobile {
  display: none;
}

/* Posicoes vem de --x/--y/--w/--h no HTML, em % do viewBox de origem: a
   composicao acompanha qualquer largura sem numero fixo no CSS. */
.aero-hero__bloco,
.aero-hero__foto {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border-radius: 14px;   /* rx=16 do viewBox ≈ 14px na largura tipica */
}
.aero-hero__bloco {
  background: var(--cor);
}
.aero-hero__foto {
  display: block;
  object-fit: cover;
  background: #E0E0E0;   /* o cinza que ficava sob a foto no SVG */
}

/* ── Overlay de conteúdo: absoluto sobre o SVG ── */
/* Usa .container para alinhar o texto igual à home (padding: 0 80px, max-width: 1200px) */
.aero-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  z-index: 2;
}

/* ══════════════════════════════════════
   COLUNA ESQUERDA — conteúdo
   Ocupa ~44% do inner (espaço vazio do SVG)
══════════════════════════════════════ */
.aero-hero__content {
  flex: 0 0 44%;
  max-width: 44%;
}

.aero-hero__title {
  font-family: 'Poppins', sans-serif;
  font-size: calc(40px * var(--aero-scale));
  font-weight: 400;
  line-height: 1.22;
  color: var(--color-text-dark, #3A3A3A);
  margin-bottom: calc(20px * var(--aero-scale));
}

.aero-hero__title-highlight {
  color: var(--color-primary, #FB5000);
}

.aero-hero__text {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(11px, calc(14px * var(--aero-scale)), 15px);
  font-weight: 400;
  line-height: 1.7;
  color: #666;
  max-width: 360px;
  margin-bottom: calc(32px * var(--aero-scale));
}

/* CTA */
.aero-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.aero-hero__cta-icon {
  display: block;
  flex-shrink: 0;
  width:  calc(46px * var(--aero-scale));
  height: calc(46px * var(--aero-scale));
}

.aero-hero__cta-text {
  font-family: 'Poppins', sans-serif;
  font-size: calc(15px * var(--aero-scale));
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-text-dark, #3A3A3A);
}


/* ─────────────────────────────────────
   SEÇÃO 2 — IMAGEM FULL-WIDTH (JET)
   object-fit: cover → preenche 100% de largura,
   altura fixa (menor que a imagem natural),
   imagem cortada e centralizada.
───────────────────────────────────── */
.aero-jet {
  width: 100%;
  /* Altura controlada — ajuste aqui para mais ou menos corte */
  height: clamp(110px, 16vw, 240px);
  overflow: hidden;
  line-height: 0;   /* elimina espaço fantasma do inline */
}

.aero-jet__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}


/* ─────────────────────────────────────
   HERO — ENTRANCE ANIMATIONS
   Mesmos keyframes do heroFadeUp da home
───────────────────────────────────── */
.aero-hero__title,
.aero-hero__text,
.aero-hero__cta {
  opacity: 0;
  transform: translateY(28px);
}

body.loaded .aero-hero__title {
  animation: heroFadeUp 0.7s ease 0.2s forwards;
}
body.loaded .aero-hero__text {
  animation: heroFadeUp 0.7s ease 0.4s forwards;
}
body.loaded .aero-hero__cta {
  animation: heroFadeUp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.65s forwards;
}

/* SVG entra igual ao texto: fadeUp com leve delay */
.aero-hero__bg-img {
  opacity: 0;
  transform: translateY(28px);
}
body.loaded .aero-hero__bg-img {
  animation: heroFadeUp 0.9s ease 0.1s forwards;
}


/* ─────────────────────────────────────
   SEÇÃO 3 — INTRO
   Tokens alinhados com a home:
   --fs-xl (32px) títulos de seção
   --fs-base (16px) texto corrido
   --fs-sm (14px) legendas / botões
   --radius-xl (24px) cards
───────────────────────────────────── */
.aero-intro {
  background: var(--color-bg-white, #fff);
  padding: var(--section-py, 80px) 0;
}

/* Linha 1: duas colunas */
.aero-intro__header {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  margin-bottom: clamp(36px, 4vw, 64px);
}

/* Título — mesmo peso visual dos títulos de seção da home */
.aero-intro__title {
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size: var(--fs-xl, 32px);   /* 32px — padrão seções home */
  font-weight: var(--fw-light, 300);
  line-height: 1.2;
  color: var(--color-text-dark, #3A3A3A);
  margin-bottom: 24px;
}

.aero-intro__title-hl {
  color: var(--color-primary, #FC5000);
}

/* Botão — usa .btn global; só garante text-decoration */
.aero-intro__btn {
  text-decoration: none;
}

/* Texto corrido — fs-base da home */
.aero-intro__text {
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size: var(--fs-base, 16px);
  font-weight: var(--fw-regular, 400);
  line-height: 1.75;
  color: var(--color-text-muted, #888);
}

/* Linha 2: card de vídeo */
.aero-intro__video-wrap {
  margin-bottom: clamp(20px, 2.5vw, 36px);
}

.aero-intro__video-card {
  position: relative;
  border-radius: var(--radius-xl, 24px);
  border: 1.5px solid var(--color-primary, #FC5000);
  overflow: hidden;
  cursor: pointer;
}

/* Imagem com altura reduzida — object-fit: cover recorta sem achatar */
.aero-intro__video-img {
  display: block;
  width: 100%;
  height: clamp(200px, 20vw, 320px);  /* altura controlada, recorta verticalmente */
  object-fit: cover;
  object-position: center 40%;
}

/* Vinheta radial branca sobre a imagem */
.aero-intro__video-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(255,255,255,0.92) 85%);
  pointer-events: none;
  z-index: 1;
}

/* Botão play — acima da vinheta */
.aero-intro__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 2;
}

.aero-intro__play svg {
  width: clamp(48px, 4.5vw, 68px);
  height: clamp(48px, 4.5vw, 68px);
  background: #fff;
  border-radius: 50%;
  padding: 13px 11px 13px 15px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.aero-intro__play:hover svg {
  transform: scale(1.09);
  box-shadow: 0 6px 32px rgba(252,80,0,0.3);
}

/* Linha 3: legenda — fs-sm da home */
.aero-intro__caption {
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size: var(--fs-sm, 14px);
  font-weight: var(--fw-regular, 400);
  color: var(--color-text-muted, #888);
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.7;
}


/* ─────────────────────────────────────
   MODAL — Vídeo YouTube
───────────────────────────────────── */
.aero-video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.aero-video-modal[hidden] { display: none; }

/* Overlay escuro com fade */
.aero-video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  cursor: pointer;
  animation: modalFadeIn 0.3s ease;
}

/* Container do vídeo */
.aero-video-modal__inner {
  position: relative;
  width: 100%;
  max-width: 920px;
  z-index: 1;
  animation: modalScaleIn 0.3s ease;
}

/* Botão fechar */
.aero-video-modal__close {
  position: absolute;
  top: -48px;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 8px;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.aero-video-modal__close:hover { opacity: 1; }
.aero-video-modal__close svg { width: 28px; height: 28px; display: block; }

/* Iframe 16:9 */
.aero-video-modal__frame {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  background: #000;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}
.aero-video-modal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modalScaleIn {
  from { opacity: 0; transform: scale(0.93); }
  to   { opacity: 1; transform: scale(1); }
}


/* ─────────────────────────────────────
   SEÇÃO 4 — 6 PASSOS (CARROSSEL)
───────────────────────────────────── */

/*
  Variáveis de layout do carrossel.
  Mudar aqui propaga para posições, botões e responsivo.

  Layout: [prev] --gap-- [<btn] --gap-- [ACTIVE] --gap-- [>btn] --gap-- [next]

  Total desktop:  282 + 24 + 48 + 24 + 680 + 24 + 48 + 24 + 282 = 1436px  (cabe em 1440px)
*/
.aero-steps {
  background: #F5F5F5;
  padding: var(--section-py, 80px) 0 calc(var(--section-py, 80px) + 40px);
  overflow: hidden;
  position: relative;

  /* ── Variáveis do layout ── */
  --step-gap:       14px;   /* espaço entre card ativo ↔ botão ↔ card lateral */
  --step-btn-w:     48px;   /* largura dos botões de navegação */
  --step-act-w:    760px;   /* largura do card ativo */
  --step-act-h:    400px;   /* altura do card ativo */
  --step-act-hw:   380px;   /* metade da largura do card ativo */
  --step-act-hh:   200px;   /* metade da altura do card ativo */
  --step-side-w:   282px;   /* largura dos cards laterais */
  --step-side-h:   300px;   /* altura dos cards laterais */
  --step-side-hh:  150px;   /* metade da altura dos cards laterais */
  --step-prev-off:  22px;   /* card prev desce este valor (assimetria vertical) */
  --step-next-off:  18px;   /* card next sobe este valor */
}

.aero-steps__title {
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size: var(--fs-xl, 32px);
  font-weight: 300;
  color: var(--color-text-dark, #3A3A3A);
  text-align: center;
  margin-bottom: clamp(8px, 1vw, 14px);
}

.aero-steps__title-hl {
  color: var(--color-primary, #FC5000);
}

/* ── Stage: altura fixa, posição relativa para tudo ── */
.aero-steps__stage {
  position: relative;
  height: 500px;          /* acomoda os cards + offsets verticais + respiro */
  user-select: none;
  overflow: hidden;       /* esconde o excesso dos cards laterais */
}

/* ── Track: referência absoluta, ocupa todo o stage ── */
.aero-steps__track {
  position: absolute;
  inset: 0;
}

/* ══════════════════════════════════════
   CARD — posição absoluta, transições suaves
   left e top transitam entre os estados
══════════════════════════════════════ */
.aero-steps__card {
  position: absolute;
  border-radius: var(--radius-xl, 24px);
  overflow: hidden;
  cursor: pointer;

  will-change: left, top, width, height;
  transition:
    left       0.4s cubic-bezier(0.4, 0, 0.2, 1),
    top        0.4s cubic-bezier(0.4, 0, 0.2, 1),
    width      0.4s cubic-bezier(0.4, 0, 0.2, 1),
    height     0.4s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── ESTADO: OCULTO ── */
.aero-steps__card.is-hidden {
  display: none;
}

/* ── ESTADO: ATIVO — sempre centrado na página ── */
.aero-steps__card.is-active {
  width:  var(--step-act-w);
  height: var(--step-act-h);
  left:   calc(50% - var(--step-act-hw));   /* perfeitamente centrado */
  top:    calc(50% - var(--step-act-hh));
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.14);
  cursor: default;
  z-index: 2;
}

/* ── ESTADO: PREV — à esquerda do botão, ligeiramente abaixo ── */
.aero-steps__card.is-prev {
  width:  var(--step-side-w);
  height: var(--step-side-h);
  /*  centro do stage  −  meia largura ativa  −  gap  −  botão  −  gap  −  largura prev  */
  left:   calc(50% - var(--step-act-hw) - var(--step-gap) - var(--step-btn-w) - var(--step-gap) - var(--step-side-w));
  top:    calc(50% - var(--step-side-hh) + var(--step-prev-off));
  z-index: 1;
}

/* ── ESTADO: NEXT — à direita do botão, ligeiramente acima ── */
.aero-steps__card.is-next {
  width:  var(--step-side-w);
  height: var(--step-side-h);
  /*  centro do stage  +  meia largura ativa  +  gap  +  botão  +  gap  */
  left:   calc(50% + var(--step-act-hw) + var(--step-gap) + var(--step-btn-w) + var(--step-gap));
  top:    calc(50% - var(--step-side-hh) - var(--step-next-off));
  z-index: 1;
}

/* ══════════════════════════════════════
   IMAGEM — absolute, expande/recua pelo right
══════════════════════════════════════ */
.aero-steps__card-img {
  position: absolute;
  inset: 0;
  right: 62%;                    /* ativo: ~38% da largura (imagem mais estreita) */
  overflow: hidden;
  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Nos cards laterais a imagem preenche tudo */
.is-prev .aero-steps__card-img,
.is-next .aero-steps__card-img {
  right: 0;
}

.aero-steps__card-img img {
  width:  100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
}

/* ══════════════════════════════════════
   OVERLAY — gradiente + título (nos laterais)
══════════════════════════════════════ */
.aero-steps__card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.22) 55%,
    transparent 100%
  );
  display: flex;
  align-items: flex-end;
  padding: 20px 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.is-prev .aero-steps__card-overlay,
.is-next .aero-steps__card-overlay {
  opacity: 1;
}

.aero-steps__overlay-title {
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 500;
  color: #fff;
  line-height: 1.4;
}

/* ══════════════════════════════════════
   BODY (texto) — absolute, desliza p/ fora nos laterais
══════════════════════════════════════ */
.aero-steps__card-body {
  position: absolute;
  top:    0;
  bottom: 0;
  left:   38%;               /* ativo: 62% da largura (corpo mais largo) */
  right:  0;
  background: #fff;
  padding: 31px 109px 32px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* título + linha + parágrafo centrados verticalmente */
  overflow: hidden;

  transition:
    left    0.55s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.35s ease;
}

/* Nos laterais: empurra o body para fora */
.is-prev .aero-steps__card-body,
.is-next .aero-steps__card-body {
  left:    100%;
  opacity: 0;
}

/* Texto à frente do número (z-index) */
.aero-steps__step-title,
.aero-steps__step-line,
.aero-steps__step-text {
  position: relative;
  z-index: 2;
}

/* Título do passo — Poppins Light, um pouco maior */
.aero-steps__step-title {
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 300;
  color: var(--color-primary, #FC5000);
  line-height: 1.35;
  margin-bottom: 14px;
}

/* Linha divisória */
.aero-steps__step-line {
  width: 48px;
  height: 2px;
  background: var(--color-primary, #FC5000);
  margin-bottom: 18px;
  flex-shrink: 0;
}

/* Texto do passo — Poppins Light */
.aero-steps__step-text {
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 300;
  color: var(--color-text-muted, #888);
  line-height: 1.8;
  /* sem flex:1 — não cresce, deixa espaço para o número */
}

/*
  Número — decoração de fundo, absoluto atrás do texto.
  z-index: 1  (texto tem z-index: 2, fica à frente).
  Centrado verticalmente no body, parcialmente recortado à direita e em baixo.
*/
.aero-steps__step-num {
  position: absolute;
  z-index: 1;
  /* Centrado verticalmente — font grande ultrapassa o body, overflow:hidden cola nas bordas */
  top: 50%;
  right: 0;
  transform: translate(30%, -50%);
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size: 600px;            /* ~1.5× card height → glifo preenche 0→400px do body */
  font-weight: 400;            /* regular */
  color: #EBEBEB;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* ══════════════════════════════════════
   BOTÕES DE NAVEGAÇÃO
   Ficam ENTRE o card ativo e os cards laterais,
   centrados verticalmente no stage (50%).
══════════════════════════════════════ */
.aero-steps__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width:  var(--step-btn-w);
  height: var(--step-btn-w);
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.18);
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  color: var(--color-text-dark, #3A3A3A);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.aero-steps__nav:hover {
  border-color: var(--color-primary, #FC5000);
  color: var(--color-primary, #FC5000);
  box-shadow: 0 4px 20px rgba(252, 80, 0, 0.18);
  transform: translateY(-50%) scale(1.08);
}

.aero-steps__nav svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/*
  Prev button: à esquerda do card ativo, com gap.
  left = 50% − meia_largura_ativo − gap − largura_botão
*/
.aero-steps__nav--prev {
  left: calc(50% - var(--step-act-hw) - var(--step-gap) - var(--step-btn-w));
}

/*
  Next button: à direita do card ativo, com gap.
  left = 50% + meia_largura_ativo + gap
*/
.aero-steps__nav--next {
  left: calc(50% + var(--step-act-hw) + var(--step-gap));
}


/* ══════════════════════════════════════
   MOBILE — empilha: texto cima, SVG baixo
══════════════════════════════════════ */
/* Deco WM no rodapé da seção — fundo claro, logo escura */
.aero-steps .numeros-deco {
  filter: brightness(0);       /* logo preta (fundo claro) */
  opacity: 0.06;
  height: 120px;
  background-size: auto 100%;
}

/* ── Responsivo carrossel: tablet (≤ 1100px) ── */
@media (max-width: 1100px) {
  .aero-steps {
    --step-gap:      12px;
    --step-btn-w:    44px;
    --step-act-w:   580px;
    --step-act-h:   360px;
    --step-act-hw:  290px;
    --step-act-hh:  180px;
    --step-side-w:  210px;
    --step-side-h:  270px;
    --step-side-hh: 135px;
  }
  .aero-steps__stage { height: 440px; }
}

/* ── Responsivo carrossel: mobile (só card ativo) ── */
@media (max-width: 768px) {
  .aero-steps {
    padding-bottom: var(--section-py, 56px);
  }

  /* Stage vira height auto, sem overflow:hidden */
  .aero-steps__stage {
    height: auto;
    overflow: visible;
  }

  /* Track: volta a ser relativo e centraliza o único card */
  .aero-steps__track {
    position: relative;
    inset: auto;
    display: flex;
    justify-content: center;
    padding: 24px 20px 72px;
  }

  /* Laterais: ocultos */
  .aero-steps__card.is-prev,
  .aero-steps__card.is-next {
    display: none;
  }

  /* Card ativo: ocupa a largura disponível, layout vertical */
  .aero-steps__card.is-active {
    position: relative;
    left: auto; top: auto;
    width: 100%;
    max-width: 460px;
    height: auto;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  }

  /* Imagem topo */
  .is-active .aero-steps__card-img {
    position: relative;
    inset: auto;
    right: auto;
    width: 100%;
    height: 200px;
    flex-shrink: 0;
  }

  /* Texto baixo */
  .is-active .aero-steps__card-body {
    position: relative;
    inset: auto;
    left: auto; right: auto;
    flex: 1;
    padding: 24px 20px 56px;  /* extra no bottom para o número */
  }

  .aero-steps__step-num {
    font-size: 100px;
    transform: translate(38%, 10%);
  }

  /* Botões nav: abaixo do card, centrados */
  .aero-steps__nav {
    position: absolute;
    top: auto !important;
    transform: none !important;
  }
  .aero-steps__nav--prev {
    bottom: 12px;
    left: calc(50% - 56px);
  }
  .aero-steps__nav--next {
    bottom: 12px;
    left: calc(50% + 8px);
  }
  .aero-steps__nav:hover {
    transform: scale(1.08) !important;
  }
}


/* ─────────────────────────────────────
   SEÇÃO 5 — E-BOOK CTA
───────────────────────────────────── */
.aero-ebook {
  background: transparent;
  padding: 0;
  margin-top: -1%;        /* sobrepõe o numeros-deco da seção anterior */
  position: relative;
  z-index: 2;
}

/* Faixa laranja — ponta a ponta */
.aero-ebook__banner {
  background: var(--color-primary, #FC5000);
  overflow: visible;
}

/* Inner centralizado com espaço para a capa */
.aero-ebook__banner-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 40px 56px 40px 348px;
  min-height: 160px;
}

/* Capa: centralizada verticalmente na faixa */
.aero-ebook__cover-wrap {
  position: absolute;
  left: 48px;
  top: 50%;
  transform: translateY(-50%);
  width: 230px;
}

.aero-ebook__cover {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 16px 48px rgba(0,0,0,0.35));
}

/* Texto */
.aero-ebook__text {
  flex: 1;
  min-width: 0;
}

.aero-ebook__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.72);
  margin-bottom: 10px;
  text-transform: uppercase;
}

.aero-ebook__title {
  font-size: clamp(17px, 1.5vw, 24px);
  font-weight: 300;
  color: #fff;
  line-height: 1.5;
  margin: 0;
}

/* Botão branco */
.aero-ebook__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--color-primary, #FC5000);
  font-size: 14px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 50px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, box-shadow 0.2s;
}

.aero-ebook__btn:hover {
  background: #fff3ee;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
}


/* ─────────────────────────────────────
   SEÇÃO 6 — DIFERENCIAIS DA WM
───────────────────────────────────── */
.aero-diff {
  background-color: #F0F0F0;
  background-image: url('../images/aeronaves/nuvem-fundo.webp');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: auto 120%;
  padding: 160px 0 160px;
  overflow: hidden;
}

/* Título */
.aero-diff__title {
  text-align: center;
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 300;
  color: var(--color-text, #1a1a1a);
  margin-bottom: clamp(20px, 2.5vw, 32px);
  line-height: 1.3;
}

.aero-diff__title-hl {
  color: var(--color-primary, #FC5000);
  font-weight: 300;
}

/* Cards row — centralizado, overlap por z-index */
.aero-diff__cards {
  display: flex;
  align-items: flex-end;    /* âncora na base para as elevações subirem */
  justify-content: center;
  gap: 0;                   /* sem gap — overlap via margin negativa */
  margin-bottom: 0;
  padding-top: 50px;        /* espaço para cards elevados não cliparem o título */
}

/* Card base — dimensões iguais para todos */
.aero-diff__card {
  width: 240px;
  min-width: 240px;
  height: 218px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  cursor: default;
  /* conteúdo centralizado verticalmente, texto à esquerda */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  /* sobreposição */
  margin-left: -12px;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.aero-diff__card:first-child {
  margin-left: 0;
}

/* Cards 01 e 05 — nível base, z-index menor */
.aero-diff__card--outer {
  z-index: 1;
  transform: translateY(0);
}

.aero-diff__card--outer:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(252,80,0,0.18);
}

/* Cards 02 e 04 — nível médio, elevados 20px */
.aero-diff__card--mid {
  z-index: 2;
  transform: translateY(-20px);
}

.aero-diff__card--mid:hover {
  transform: translateY(-28px);
  box-shadow: 0 20px 60px rgba(252,80,0,0.18);
}

/* Card 03 — frente de todos, elevado 40px, mais largo */
.aero-diff__card--featured {
  width: 308px;
  min-width: 308px;
  z-index: 3;
  transform: translateY(-40px);
  box-shadow: 0 12px 48px rgba(0,0,0,0.14);
}

.aero-diff__card--featured:hover {
  transform: translateY(-48px);
  box-shadow: 0 20px 60px rgba(252,80,0,0.18);
}

/* Número */
.aero-diff__num {
  display: block;
  font-size: clamp(26px, 2.4vw, 38px);
  font-weight: 300;
  color: var(--color-primary, #FC5000);
  line-height: 1;
  margin-bottom: 16px;
}

/* Texto */
.aero-diff__text {
  font-size: clamp(12px, 0.88vw, 13px);
  font-weight: 300;
  color: #666;
  line-height: 1.75;
  margin: 0;
  text-align: left;
}

/* Swoosh */
.aero-diff__swoosh {
  margin-top: 24px;
  width: 100%;
}

.aero-diff__swoosh-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Footer: stat + divider + AERA */
.aero-diff__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  margin-top: 40px;
}

.aero-diff__stat {
  display: flex;
  align-items: center;
  gap: 16px;
}

.aero-diff__stat-num {
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 300;
  color: var(--color-primary, #FC5000);
  line-height: 1;
}

.aero-diff__stat-label {
  font-size: 13px;
  font-weight: 300;
  color: var(--color-text-muted, #555);
  line-height: 1.6;
}

.aero-diff__divider {
  width: 1px;
  height: 64px;
  background: #ccc;
}

.aero-diff__aera-logo {
  width: 120px;
  height: auto;
  display: block;
}


/* ══════════════════════════════════════
   MOBILE — empilha: texto cima, SVG baixo
══════════════════════════════════════ */
@media (max-width: 768px) {
  .aero-hero {
    flex-direction: column;
    /* Sem padding vertical: a arte encosta no cabecalho e na secao seguinte.
       O padding lateral continua, para o texto respeitar a margem da pagina. */
    padding: 0 var(--container-px, 20px);
  }

  /* O SVG e FUNDO: fica atras e o texto por cima, como no desktop. Antes este
     bloco empilhava os dois (flex column), o que jogava a arte para depois do
     texto em vez de atras dele. */
  .aero-hero__inner {
    position: relative;
    display: block;
  }

  /* A composicao do desktop nao entra no mobile — e outra arte, nao a mesma
     reescalada. As duas variantes usam os MESMOS arquivos .webp, entao esconder
     uma nao custa download nenhum. */
  .aero-hero__bg-wrap {
    display: none;
  }

  .aero-hero__mosaico--mobile {
    display: block;
    /* Mesma proporcao do viewBox que originou a composicao */
    aspect-ratio: 1254 / 1657;
    /* 20% maior que a tela, sempre centralizado. (100% + 2x o padding lateral)
       e exatamente a largura do viewport; o *1.2 cresce sobre isso, e a dupla
       margin-left:50% + translateX(-50%) centraliza — a sangria fica simetrica,
       10% para cada lado, em qualquer largura de tela. */
    width: calc((100% + var(--container-px, 20px) * 2) * 1.2);
    margin-left: 50%;
    transform: translateX(-50%);
    /* Sobe o mosaico para cortar 70% do retangulo de cima e trazer o conteudo
       junto. Em vw de proposito: margin-top em % se resolve pela LARGURA do
       contentor, nao pela altura, e daria um valor errado.
         mosaico     = 1.2 x 100vw x (1657/1254) = 158,56vw de altura
         ret. do topo = 18,648% disso            =  29,57vw
         70% dele                                =  20,70vw
       Como o .aero-hero tem overflow:hidden, o excedente e recortado. */
    margin-top: -20.7vw;
    z-index: 0;
  }

  /* O posicionamento em si vem da regra base. So o raio muda: o viewBox mobile
     e mais estreito (1254 contra 2005), entao os mesmos rx=16 dao ~5,7px aqui
     contra ~14px no desktop. */
  .aero-hero__bloco,
  .aero-hero__foto {
    border-radius: 6px;
  }

  /* Texto POR CIMA do fundo. padding:0 de proposito — o padding lateral ja vem
     do .aero-hero; repetir aqui estreitaria o texto e forcaria uma quebra a
     mais no titulo. */
  .aero-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 0;
    z-index: 2;
    display: flex;
    /* Ancorado pela BASE, nao centralizado. A altura de 55% termina logo acima
       da primeira foto (que comeca em ~57% da altura do hero), entao o texto
       para de invadir a foto — antes a sobreposicao era de 80px.
       flex-end e deliberado: se o texto crescer (titulo quebrando em mais uma
       linha numa tela estreita), ele cresce para CIMA, onde ha area vazia, em
       vez de descer sobre as fotos. */
    align-items: flex-end;
    height: 64%;
  }

  .aero-hero__content {
    flex: none;
    max-width: 100%;
    width: 100%;
  }

  .aero-hero__title {
    font-size: clamp(24px, 7vw, 32px);
  }
}


/* ─────────────────────────────────────
   SEÇÃO 7 — BENTO GRID (12 cols × 6 rows)
───────────────────────────────────── */
.aero-bento {
  background: transparent;
  padding: 0;
  margin-top: -10%;
  position: relative;
  z-index: 2;
}

.aero-bento__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  padding: 0;
  width: 100%;
}

/* Todos os blocos — proporção W201×H157, escala com o viewport */
.aero-bento__cell {
  aspect-ratio: 201 / 157;
  width: 100%;
  border-radius: 16px;
  background: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(9px, 0.8vw, 14px);
  font-weight: 600;
  color: rgba(0,0,0,0.3);
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
  box-sizing: border-box;
}

/* ─────────────────────────────────────
   BENTO — Mesclagens e posicionamento explícito
───────────────────────────────────── */

/* Grupo 2: célula 28 → 3 colunas × 3 linhas (c4-6, l3-5) */
.aero-bento__cell--28 { grid-column: 4 / 7;  grid-row: 3 / 6; aspect-ratio: auto; }

/* Grupo 3a: célula 32 → 2 colunas × 2 linhas (c8-9, l3-4) */
.aero-bento__cell--32 { grid-column: 8 / 10; grid-row: 3 / 5; aspect-ratio: auto; }

/* Grupo 3b: célula 58 → 2 colunas × 2 linhas (c10-11, l5-6) */
.aero-bento__cell--58 { grid-column: 10 / 12; grid-row: 5 / 7; aspect-ratio: auto; }

/* Posicionamento explícito — linha 3 */
.aero-bento__cell--25 { grid-column: 1;  grid-row: 3; }
.aero-bento__cell--26 { grid-column: 2;  grid-row: 3; }
.aero-bento__cell--27 { grid-column: 3;  grid-row: 3; }
.aero-bento__cell--31 { grid-column: 7;  grid-row: 3; }
.aero-bento__cell--34 { grid-column: 10; grid-row: 3; }
.aero-bento__cell--35 { grid-column: 11; grid-row: 3; }
.aero-bento__cell--36 { grid-column: 12; grid-row: 3; }

/* Posicionamento explícito — linha 4 */
.aero-bento__cell--37 { grid-column: 1;  grid-row: 4; }
.aero-bento__cell--38 { grid-column: 2;  grid-row: 4; }
.aero-bento__cell--39 { grid-column: 3;  grid-row: 4; }
.aero-bento__cell--43 { grid-column: 7;  grid-row: 4; }
.aero-bento__cell--46 { grid-column: 10; grid-row: 4; }
.aero-bento__cell--47 { grid-column: 11; grid-row: 4; }
.aero-bento__cell--48 { grid-column: 12; grid-row: 4; }

/* Posicionamento explícito — linha 5 */
.aero-bento__cell--49 { grid-column: 1;  grid-row: 5; }
.aero-bento__cell--50 { grid-column: 2;  grid-row: 5; }
.aero-bento__cell--51 { grid-column: 3;  grid-row: 5; }
.aero-bento__cell--55 { grid-column: 7 / 9; grid-row: 5; aspect-ratio: auto; align-self: stretch; }
.aero-bento__cell--56 { grid-column: 8;  grid-row: 5; }
.aero-bento__cell--57 { grid-column: 9;  grid-row: 5; }
.aero-bento__cell--60 { grid-column: 12; grid-row: 5; }

/* Posicionamento explícito — linha 6 */
.aero-bento__cell--61 { grid-column: 1;  grid-row: 6; }
.aero-bento__cell--62 { grid-column: 2;  grid-row: 6; }
.aero-bento__cell--63 { grid-column: 3;  grid-row: 6; }
.aero-bento__cell--64 { grid-column: 4;  grid-row: 6; }
.aero-bento__cell--65 { grid-column: 5;  grid-row: 6; }
.aero-bento__cell--66 { grid-column: 6;  grid-row: 6; }
.aero-bento__cell--67 { grid-column: 7;  grid-row: 6; }
.aero-bento__cell--68 { grid-column: 8;  grid-row: 6; }
.aero-bento__cell--69 { grid-column: 9;  grid-row: 6; }
.aero-bento__cell--72 { grid-column: 12; grid-row: 6; }


/* Grupo 1 — mesma cor do fundo (#F5F5F5) */
.aero-bento__cell--1,
.aero-bento__cell--2,
.aero-bento__cell--3,
.aero-bento__cell--4,
.aero-bento__cell--5,
.aero-bento__cell--6,
.aero-bento__cell--7,
.aero-bento__cell--8,
.aero-bento__cell--9,
.aero-bento__cell--10,
.aero-bento__cell--13,
.aero-bento__cell--14,
.aero-bento__cell--15,
.aero-bento__cell--16,
.aero-bento__cell--17,
.aero-bento__cell--18,
.aero-bento__cell--19,
.aero-bento__cell--20,
.aero-bento__cell--22,
.aero-bento__cell--23,
.aero-bento__cell--25,
.aero-bento__cell--27,
.aero-bento__cell--31,
.aero-bento__cell--35,
.aero-bento__cell--36,
.aero-bento__cell--38,
.aero-bento__cell--39,
.aero-bento__cell--48,
.aero-bento__cell--49,
.aero-bento__cell--50,
.aero-bento__cell--51,
.aero-bento__cell--60,
.aero-bento__cell--61,
.aero-bento__cell--62,
.aero-bento__cell--63,
.aero-bento__cell--64,
.aero-bento__cell--65,
.aero-bento__cell--66,
.aero-bento__cell--67,
.aero-bento__cell--68,
.aero-bento__cell--69,
.aero-bento__cell--72 {
  background: transparent;
}

/* Blocos #F2F2F2 */
.aero-bento__cell--11,
.aero-bento__cell--24,
.aero-bento__cell--26,
.aero-bento__cell--37,
.aero-bento__cell--47,
.aero-bento__cell--58 {
  background: #F2F2F2;
}

/* Bloco 28 — fundo transparente + alinhamento esquerdo/topo */
.aero-bento__cell--28 {
  background: transparent;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
}

/* ── Conteúdo do bloco 28 ── */
.aero-bento28__inner {
  width: 100%;
  height: 100%;
  padding: clamp(16px, 1.5vw, 24px) clamp(36px, 3.5vw, 56px) clamp(16px, 1.5vw, 24px) clamp(24px, 2.5vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: clamp(8px, 0.8vw, 14px);
  box-sizing: border-box;
}

.aero-bento28__title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 300;
  line-height: 1.2;
  color: #3A3A3A;
  margin: 0;
}

.aero-bento28__hl {
  color: #FB5000;
}

.aero-bento28__sub {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 300;
  color: #888;
  margin: 0;
}

.aero-bento28__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.aero-bento28__tag {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(10px, 0.85vw, 13px);
  font-weight: 300;
  color: #3A3A3A;
  background: #F2F2F2;
  border: 1px solid #E8E8E8;
  border-radius: 50px;
  padding: 5px 14px;
  white-space: nowrap;
}

/* ── Carrossel de giro X — blocos com imagem ── */
.aero-bento__cell--32,
.aero-bento__cell--34,
.aero-bento__cell--43,
.aero-bento__cell--57 {
  background: none !important;
  padding: 0;
  perspective: 1200px;
  overflow: visible; /* deixa o preserve-3d funcionar */
}

.bento-giro {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  border-radius: 16px;
}

.bento-giro__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;   /* borda acompanha o giro */
  overflow: hidden;
}

.bento-giro__back {
  transform: rotateX(180deg);
}

/* Durações distintas → efeito escalonado visível */
.bento-giro--32 { transition: transform 0.60s cubic-bezier(0.4, 0, 0.2, 1); }
.bento-giro--34 { transition: transform 0.82s cubic-bezier(0.4, 0, 0.2, 1); }
.bento-giro--43 { transition: transform 0.70s cubic-bezier(0.4, 0, 0.2, 1); }
.bento-giro--57 { transition: transform 0.95s cubic-bezier(0.4, 0, 0.2, 1); }

.bento-giro.is-flipped { transform: rotateX(180deg); }

/* Bloco 55 — fundo transparente + texto feira */
.aero-bento__cell--55 {
  background: transparent !important;
  aspect-ratio: auto;
  align-self: stretch;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
}

.aero-bento55__inner {
  width: 100%;
  height: 100%;
  padding: clamp(12px, 1vw, 18px);
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
}

.aero-bento55__text {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(11px, 0.9vw, 14px);
  font-weight: 300;
  color: #999;
  margin: 0;
  line-height: 1.4;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.aero-bento55__text.is-changing {
  opacity: 0;
  transform: translateY(-5px);
}

.aero-bento55__label {
  font-weight: 700;
  color: #3A3A3A;
}

/* Blocos 46 e 47 */
.aero-bento__cell--46 { background: #F2F2F2; }
.aero-bento__cell--47 { background: #E0E0E0; }

.aero-bento__cell--12 { background: transparent; }

/* ── MODO PREVIEW — oculta números dos blocos
   Para restaurar o mapa, remova ou comente esta linha:         */
.aero-bento__cell { color: transparent !important; }
/* ──────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────
   SEÇÃO 8 — BENTO GRID 2 (mapa em branco)
───────────────────────────────────── */
.aero-bento2 {
  background: transparent;
  padding: 0;
  position: relative;
  z-index: 2;
}

.aero-bento2__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  padding: 0;
  width: 100%;
}

.aero-bento2__cell {
  aspect-ratio: 201 / 157;
  width: 100%;
  border-radius: 16px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(9px, 0.8vw, 14px);
  font-weight: 600;
  color: rgba(0,0,0,0.3);
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
  box-sizing: border-box;
}

/* ── Cores Seção 8 ── */
.aero-bento2__cell--1,
.aero-bento2__cell--12,
.aero-bento2__cell--14,
.aero-bento2__cell--39 { background: #F2F2F2; }

/* ── Mesclagens Seção 8 ── */
/* Grupo A: 4,5,6,16,17,18,28,29,30,40,41,42 → 3 cols × 4 rows */
.aero-bento2__cell--4  { grid-column: 4 / 7; grid-row: 1 / 5; aspect-ratio: auto; align-self: stretch; align-items: flex-start; justify-content: flex-start; padding: 0; background: transparent !important; }

.aero-bento2-4__inner { width: 100%; height: 100%; padding: clamp(24px, 2.5vw, 44px) clamp(40px, 4vw, 64px) clamp(24px, 2.5vw, 44px) clamp(24px, 2.5vw, 44px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: clamp(10px, 1vw, 18px); box-sizing: border-box; }
.aero-bento2-4__title { font-size: clamp(22px, 2.4vw, 32px); font-weight: 300; line-height: 1.2; color: #3A3A3A; margin: 0; font-family: 'Poppins', sans-serif; }
.aero-bento2-4__hl    { color: #FB5000; }
.aero-bento2-4__sub   { font-size: clamp(13px, 1.1vw, 17px); font-weight: 300; color: #3A3A3A; margin: 0; line-height: 1.5; font-family: 'Poppins', sans-serif; }

/* Grupo B: 7,8,9,19,20,21,31,32,33,43,44,45 → 3 cols × 4 rows */
.aero-bento2__cell--7  { grid-column: 7 / 10; grid-row: 1 / 5; aspect-ratio: auto; align-self: stretch; padding: 0; background: transparent !important; }

.aero-bento2-7__inner  { width: 100%; height: 100%; padding: clamp(16px, 1.5vw, 28px); display: flex; flex-direction: column; justify-content: center; gap: 0; box-sizing: border-box; }
.aero-bento2-7__item   { display: flex; align-items: flex-start; gap: clamp(12px, 1.2vw, 20px); padding: clamp(12px, 1.2vw, 20px) 0; }
.aero-bento2-7__icon   { width: clamp(40px, 4vw, 60px); height: clamp(40px, 4vw, 60px); flex-shrink: 0; object-fit: contain; }
.aero-bento2-7__text   { display: flex; flex-direction: column; gap: 6px; }
.aero-bento2-7__title  { font-size: clamp(14px, 1.3vw, 20px); font-weight: 400; color: #3A3A3A; margin: 0; font-family: 'Poppins', sans-serif; line-height: 1.2; }
.aero-bento2-7__desc   { font-size: clamp(11px, 0.9vw, 14px); font-weight: 300; color: #666; margin: 0; font-family: 'Poppins', sans-serif; line-height: 1.5; }
.aero-bento2-7__divider { width: 100%; height: 1px; background: #FB5000; opacity: 0.3; flex-shrink: 0; }

/* Posicionamento explícito das células restantes nas linhas 2-4 */
.aero-bento2__cell--13 { grid-column: 1;  grid-row: 2; }
.aero-bento2__cell--14 { grid-column: 2;  grid-row: 2; }
.aero-bento2__cell--15 { grid-column: 3;  grid-row: 2; }
.aero-bento2__cell--22 { grid-column: 10; grid-row: 2; }
.aero-bento2__cell--23 { grid-column: 11; grid-row: 2; }
.aero-bento2__cell--24 { grid-column: 12; grid-row: 2; }
.aero-bento2__cell--25 { grid-column: 1;  grid-row: 3; }
.aero-bento2__cell--26 { grid-column: 2;  grid-row: 3; }
.aero-bento2__cell--27 { grid-column: 3;  grid-row: 3; }
.aero-bento2__cell--34 { grid-column: 10; grid-row: 3; }
.aero-bento2__cell--35 { grid-column: 11; grid-row: 3; }
.aero-bento2__cell--36 { grid-column: 12; grid-row: 3; }
.aero-bento2__cell--37 { grid-column: 1;  grid-row: 4; }
.aero-bento2__cell--38 { grid-column: 2;  grid-row: 4; }
.aero-bento2__cell--39 { grid-column: 3;  grid-row: 4; }
.aero-bento2__cell--46 { grid-column: 10; grid-row: 4; }
.aero-bento2__cell--47 { grid-column: 11; grid-row: 4; }
.aero-bento2__cell--48 { grid-column: 12; grid-row: 4; }

/* ── MODO PREVIEW — oculta números dos blocos
   Para restaurar o mapa, remova ou comente esta linha:         */
.aero-bento2__cell { color: transparent !important; }


/* ─────────────────────────────────────
   SEÇÃO 9 — CTA + FORMULÁRIO
───────────────────────────────────── */
.aero-cta {
  position: relative;
  background: var(--color-bg-dark, #1A1A1A);
  overflow: hidden;
  padding: clamp(48px, 6vw, 96px) 0;
}

.aero-cta__bg-pattern {
  position: absolute;
  inset: 0;
  background-image: url('../images/assets/padrão_wm_background_1.svg');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  opacity: 0.35;
  pointer-events: none;
}

.aero-cta__container {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 64px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

/* ── Lado esquerdo ── */
.aero-cta__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 1.8vw, 28px);
}

.aero-cta__icon {
  width: clamp(48px, 4vw, 64px);
  height: auto;
  filter: invert(1) brightness(2);
}

.aero-cta__title {
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size: var(--fs-xl, 32px);
  font-weight: 300;
  line-height: 1.2;
  color: #ffffff;
  margin: 0;
}

.aero-cta__hl { color: #FB5000; }

.aero-cta__text {
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255,255,255,0.7);
  margin: 0;
}

.aero-cta__cta-label {
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 400;
  color: rgba(255,255,255,0.9);
  margin: 0;
}

.aero-cta__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.aero-cta__btn--phone {
  background: transparent;
  color: #ffffff;
  border: 1.5px solid rgba(255,255,255,0.4);
}
.aero-cta__btn--phone:hover {
  border-color: #ffffff;
  background: rgba(255,255,255,0.08);
}

/* ── Lado direito — card formulário ── */
.aero-cta__right {
  display: flex;
  justify-content: center;
}

.aero-cta__form-card {
  background: #ffffff;
  border-radius: 16px;
  padding: clamp(24px, 2.5vw, 40px);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.25);
}

.aero-cta__form-row { display: flex; flex-direction: column; gap: 6px; }
.aero-cta__form-row--half   { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aero-cta__form-row--thirds { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

.aero-cta__label {
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size: 11px;
  font-weight: 400;
  color: #666;
}

.aero-cta__input {
  width: 100%;
  height: 36px;
  border: 1.5px solid #E0E0E0;
  border-radius: 6px;
  padding: 0 10px;
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size: 13px;
  color: #3A3A3A;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.aero-cta__input:focus { border-color: #FB5000; }

.aero-cta__checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size: 11px;
  color: #888;
  cursor: pointer;
}

.aero-cta__submit {
  width: 100%;
  justify-content: center;
  padding: 12px;
  font-size: 13px;
  letter-spacing: 0.08em;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}


/* =============================================
   MOBILE AERONAVES (≤ 768px)
   ============================================= */
@media (max-width: 768px) {

  /* ─────────────────────────────────────
     S1 — HERO (complemento)
  ───────────────────────────────────── */
  /* padding-bottom removido: o hero mobile encosta na secao seguinte. Estava
     aqui, num segundo bloco @media, e sobrescrevia o padding definido acima. */
  .aero-hero__cta { gap: 8px; }
  .aero-hero__cta-text { font-size: 11px; line-height: 1.3; }

  /* ─────────────────────────────────────
     S3 — INTRO
  ───────────────────────────────────── */
  .aero-intro__header {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .aero-intro__title {
    font-size: clamp(22px, 6vw, 28px);
    margin-bottom: 0;
  }
  .aero-intro__video-img {
    height: clamp(160px, 52vw, 220px);
  }

  /* ─────────────────────────────────────
     S5 — EBOOK CTA
  ───────────────────────────────────── */
  .aero-ebook {
    margin-top: 0;
    padding-top: 80px;
  }
  .aero-ebook__banner { overflow: visible; }
  .aero-ebook__banner-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 24px 32px;
    gap: 16px;
    min-height: auto;
  }
  .aero-ebook__cover-wrap {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -55%);
    width: 120px;
  }
  .aero-ebook__title {
    font-size: clamp(15px, 4.5vw, 18px);
  }
  .aero-ebook__btn {
    align-self: stretch;
    justify-content: center;
  }

  /* ─────────────────────────────────────
     S6 — DIFERENCIAIS
  ───────────────────────────────────── */
  .aero-diff__cards {
    overflow-x: auto;
    /* overflow-y explicito: so com o -x declarado, o navegador promove o -y
       para auto e a faixa passa a rolar na vertical junto. Seguro aqui porque
       o mobile zera os transforms dos cards (transform:none logo abaixo). */
    overflow-y: hidden;
    /* Nao encadeia a rolagem da faixa para a pagina ao chegar nas pontas */
    overscroll-behavior-x: contain;
    justify-content: flex-start;
    padding: 8px var(--container-px, 20px) 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .aero-diff__cards::-webkit-scrollbar { display: none; }
  .aero-diff__card {
    width: 190px;
    min-width: 190px;
    height: auto;
    min-height: 170px;
    transform: none !important;
    flex-shrink: 0;
  }
  .aero-diff__card--featured {
    width: 230px;
    min-width: 230px;
  }
  .aero-diff__footer {
    flex-direction: column;
    gap: 16px;
    align-items: center;
    padding: 0 var(--container-px, 20px);
    margin-top: 24px;
  }
  .aero-diff__divider {
    width: 60px;
    height: 1px;
  }

  /* ─────────────────────────────────────
     S7 — BENTO GRID
  ───────────────────────────────────── */
  .aero-bento { margin-top: 0; }

  .aero-bento__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 16px 24px;
  }

  /* Oculta todos os blocos decorativos */
  .aero-bento__cell {
    display: none !important;
  }

  /* Bloco 28 — texto — linha inteira, row 1 */
  .aero-bento__cell--28 {
    display: flex !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    aspect-ratio: auto;
    min-height: 220px;
    border-radius: 16px;
    background: #F2F2F2 !important;
  }
  .aero-bento28__inner {
    padding: 20px;
  }

  /* Imagens — grade 2 × 2, rows 2–3 */
  .aero-bento__cell--32 {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    aspect-ratio: 1 !important;
    border-radius: 16px;
  }
  .aero-bento__cell--34 {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    aspect-ratio: 1 !important;
    border-radius: 16px;
  }
  .aero-bento__cell--43 {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    aspect-ratio: 1 !important;
    border-radius: 16px;
  }
  .aero-bento__cell--57 {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 3 !important;
    aspect-ratio: 1 !important;
    border-radius: 16px;
  }

  /* Bloco 55 — label da feira — linha inteira, row 4 */
  .aero-bento__cell--55 {
    display: flex !important;
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    aspect-ratio: auto;
    min-height: 44px;
    background: transparent !important;
  }

  /* ─────────────────────────────────────
     S8 — BENTO GRID 2
  ───────────────────────────────────── */
  .aero-bento2__grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 16px;
  }

  /* Oculta tudo */
  .aero-bento2__cell { display: none !important; }

  /* Bloco 4 — texto */
  .aero-bento2__cell--4 {
    display: flex !important;
    width: 100%;
    aspect-ratio: auto;
    min-height: 220px;
    border-radius: 16px;
    background: #F2F2F2 !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  .aero-bento2-4__inner { padding: 24px 20px; }

  /* Bloco 7 — ícones */
  .aero-bento2__cell--7 {
    display: flex !important;
    width: 100%;
    aspect-ratio: auto;
    border-radius: 16px;
    background: #F2F2F2 !important;
  }
  .aero-bento2-7__inner { padding: 20px; }

  /* ─────────────────────────────────────
     S9 — CTA + FORMULÁRIO
  ───────────────────────────────────── */
  .aero-cta__container {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .aero-cta__title {
    font-size: clamp(20px, 6vw, 26px);
  }
  .aero-cta__actions {
    flex-direction: column;
  }
  .aero-cta__actions .btn {
    width: 100%;
    justify-content: center;
  }
  .aero-cta__form-row--half {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .aero-cta__form-row--thirds {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .aero-cta__bg-pattern {
    background-position: center;
    opacity: 0.12;
  }
}


/* =============================================
   SMALL MOBILE (≤ 480px)
   ============================================= */
@media (max-width: 480px) {
  .aero-bento__cell--32,
  .aero-bento__cell--34,
  .aero-bento__cell--43,
  .aero-bento__cell--57 {
    aspect-ratio: 4 / 3 !important;
  }
}