/* ===========================
   MOBILE.CSS — Correções mobile
   =========================== */

/* Base responsiva */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
img, svg, video { max-width: 100%; height: auto; display: block; }

/* Tipografia fluida para títulos e parágrafos */
h1 { font-size: clamp(32px, 9vw, 44px); line-height: 1.15; }
h2 { font-size: clamp(22px, 5.5vw, 32px); line-height: 1.2; }
p  { font-size: clamp(14px, 3.4vw, 16px); line-height: 1.6; }

/* Respiro lateral padrão */
.container, .container-xl { padding-left: 16px; padding-right: 16px; }

/* ===========================
   HEADER / NAV MOBILE
   =========================== */
@media (max-width: 991px) {
  /* garante altura consistente do header */
  .header, .header.sticked { height: 72px; }

  /* overlay de navegação — ocupa a tela toda quando ativo */
  .navbar {
    position: fixed;
    inset: 0;                 /* top/right/bottom/left: 0 */
    width: 100%;
    height: 100vh;
    background: #0A4AAD;
    z-index: 9999;
    transform: translateX(100%);
    transition: transform .3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* quando o body ganha a classe que você já usa para abrir o menu */
  .mobile-nav-active .navbar { transform: translateX(0); }

  /* lista vertical, centralizada */
  .navbar ul {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0;
    margin: 0;
    text-align: center;
  }
  .navbar a { color: #fff; font-size: 18px; font-weight: 600; }

  /* ícone de fechar/abrir no topo direito visível sobre o overlay */
  .mobile-nav-hide, .mobile-nav-show {
    position: fixed;
    top: 20px; right: 20px;
    z-index: 10000;
  }

  /* dropdown “Guias” embutido no fluxo no mobile */
  .navbar .dropdown .dropdown-panel{
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 8px;
    box-shadow: none;
    border: 0;
    background: transparent;
    opacity: 1; transform: none; pointer-events: auto;
  }
}

/* Evita rolagem por trás do menu aberto */
.mobile-nav-active { overflow: hidden; }

/* ===========================
   HERO
   =========================== */
@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: 72px 0 180px;
    background-attachment: scroll; /* evita “salto” no parallax */
  }
  .caption { padding: 0 4px; }
  .hero p {
    margin-top: 18px;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
  }

  /* botões empilhados e proporcionais */
  .caption .d-flex { 
    flex-direction: column;
    align-items: center;
    gap: 14px !important;
  }
  .btn-get-started-2,
  .btn-get-started-3 {
    width: 100%;
    max-width: 320px;
    font-size: 15px;
    padding: 12px 20px;
    border-radius: 10px;
  }
  .btn-get-started-4 {
    font-size: 13px;
    padding: 5px 12px;
  }

  /* evita margem direita herdada empurrando layout */
  .mr-20 { margin-right: 0 !important; }
}

/* ===========================
   LISTAS COM ÍCONE (check)
   =========================== */
/* Use <div class="check-line">[svg]</svg><span>texto...</span></div> */
.check-line{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.check-line svg, .check-line img{
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px;
}

/* ===========================
   IMAGENS GRANDES EM SEÇÕES
   =========================== */
@media (max-width: 768px){
  /* o passaporte estava estourando — limita e centraliza */
  .section img.passaporte,
  .about img.passaporte,
  .single-page img.passaporte {
    max-width: 160px;
    margin: 12px auto;
  }
  /* fallback geral: imagens dentro de seções */
  .section img { margin-left: auto; margin-right: auto; }
}

/* ===========================
   CARDS / ETAPAS (se estiver usando .steps-wrapper)
   =========================== */
@media (max-width: 992px) {
  .steps-wrapper { flex-direction: column; align-items: center; gap: 16px; }
  .step-card { width: 100%; max-width: 520px; padding: 28px 18px; }
}

/* ===========================
   BOTÕES EM COLUNA (seção de links grandes)
   =========================== */
@media (max-width: 768px){
  .button-stack { width: 100%; padding: 0 8px; }
  .custom-btn { width: 100%; max-width: 520px; }
  .btn-icon { width: 40px; height: 40px; border-radius: 10px; }
  .custom-btn svg { width: 22px; height: 22px; }
}

/* ===========================
   FOOTER
   =========================== */
@media (max-width: 768px){
  .footer-columns{
    flex-direction: column;
    gap: 20px;
    text-align: center;
    align-items: center;
  }
  .footer-col{ width: 100%; }
}

/* ===========================
   AJUSTES PONTUAIS DE UTILIDADE
   =========================== */
.hide-on-mobile { display: none !important; } /* quando precisar esconder algo só no mobile */
@media (min-width: 769px){ .hide-on-mobile { display: initial !important; } }

/* ========= FOOTER — MOBILE POLISH ========= */
@media (max-width: 768px){
  .footer {
    padding: 36px 16px 88px;     /* respiro extra embaixo p/ não colidir com o botão flutuante */
  }

  .footer .container{
    padding-left: 0;
    padding-right: 0;
  }

  .footer-columns{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
  }

  .footer-col{
    width: 100%;
    max-width: 420px;            /* limita a largura p/ linhas mais curtas e legíveis */
  }

  .footer-title{
    display: flex;
    align-items: center;
    justify-content: center;     /* ícone + título centralizados */
    gap: 10px;
    font-size: 15.5px;
    margin-bottom: 6px;
  }
  .footer-title i{
    font-size: 18px;
    line-height: 1;
    color: #cfe0ff;              /* ícone mais sutil no fundo azul */
  }

  .footer p{
    margin: 6px 0;
    font-size: 14px;
    opacity: .95;
  }

  .footer a{
    color: #fff;
    text-decoration: none;
    display: inline-block;
    padding: 6px 0;              /* melhora o toque no mobile */
    transition: opacity .2s ease;
  }
  .footer a:hover{ opacity: 1; text-decoration: underline; }

  .footer hr{
    border: 0;
    border-top: 1px solid rgba(255,255,255,.25);
    margin: 22px 0;
    width: 100%;
    max-width: 960px;
  }

  .footer-bottom{
    text-align: center;
    font-size: 13px;
    opacity: .85;
  }

  /* botão flutuante não sobrepor o rodapé */
  .scroll-top{ bottom: 20px; }   /* e o padding-bottom do footer acima garante espaço */
}

/* ===========================
   MENU MOBILE — OVERLAY 100%
   =========================== */
@media (max-width: 991px){

  /* evita scroll do conteúdo por trás quando o menu abre */
  body.mobile-nav-active { overflow: hidden; }

  /* header pode continuar fixo, mas o overlay vai por cima de tudo */
  #header { z-index: 1000; }

  /* OVERLAY de navegação ocupando a tela inteira */
  .navbar{
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100dvh !important;           /* 100% da viewport (corrige iOS) */
    background: #0A4AAD;
    z-index: 10000;                       /* acima do header/logo */
    transform: translateX(100%);          /* começa fora da tela */
    transition: transform .3s ease;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* quando ativo (classe adicionada no <body>) */
  .mobile-nav-active .navbar{
    transform: translateX(0);
  }

  /* lista do menu em coluna, centralizada */
  .navbar ul{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 420px;                     /* largura confortável de leitura */
    list-style: none;
  }

  .navbar li{ width: 100%; text-align: center; }
  .navbar a{
    color: #fff !important;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    padding: 8px 0;
  }

  /* fecha/abre no topo direito sempre visível */
  .mobile-nav-hide, .mobile-nav-show{
    position: fixed !important;
    top: 18px !important;
    right: 18px !important;
    z-index: 10001 !important;
    color: #fff !important;
  }

  /* se existir “sombra”/backdrop antiga, neutraliza */
  .mobile-nav-active .navbar:before{
    content: none !important;
  }

  /* dropdown “Guias” no mobile: embutido, sem painel flutuante */
  .navbar .dropdown .dropdown-panel{
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 8px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
}
/* ====== MENU MOBILE: overlay tela cheia (corrige faixa azul) ====== */
@media (max-width: 1279px) {
  /* neutraliza regras antigas do template (painel lateral 400px) */
  .navbar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;     /* <-- mata o limite de 400px */
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #0A4AAD !important;
    z-index: 10000 !important;
    transform: translateX(100%) !important;   /* inicia fora da tela */
    transition: transform .3s ease !important;
    box-shadow: none !important;
  }

  /* alguns temas usam somente "right:-100%" — garantimos que não afete */
  .navbar[style] { right: 0 !important; left: 0 !important; }

  /* estado aberto */
  .mobile-nav-active .navbar {
    transform: translateX(0) !important;
  }

  /* lista centralizada em coluna */
  .navbar ul {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    list-style: none;
    width: 100%;
    max-width: 420px;            /* só limita o conteúdo, não o overlay */
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .navbar li { width: 100%; text-align: center; }
  .navbar a {
    color: #fff !important;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    padding: 8px 0;
  }

  /* botão de fechar/abrir sempre por cima */
  .mobile-nav-hide, .mobile-nav-show {
    position: fixed !important;
    top: 18px !important;
    right: 18px !important;
    z-index: 10001 !important;
    color: #fff !important;
  }

  /* dropdown "Guias" fica embutido no fluxo no mobile */
  .navbar .dropdown .dropdown-panel {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin-top: 8px !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  /* evita scroll do conteúdo por trás quando aberto */
  body.mobile-nav-active { overflow: hidden; }
}

/* Ícone do menu no topo branco */
@media (max-width: 991px){
  .mobile-nav-show {           /* ícone de abrir (hambúrguer) */
    color: #0A4AAD !important; /* azul visível no fundo branco */
  }
  .mobile-nav-hide {           /* ícone de fechar (X) sobre o overlay azul */
    color: #ffffff !important;
  }
}

/* Compacta o topo da hero no mobile */
@media (max-width: 768px){
  .hero{
    padding-top: 10px !important;   /* era maior – reduz o espaçamento inicial */
  }
  .dark-bg{
    padding-top: 8px !important;    /* esse padding é o que mais “empurra” tudo pra baixo */
    padding-bottom: 0 !important;
  }
  /* não deixe nada adicionar margem extra no topo */
  .caption > .d-flex:first-child{
    margin-top: 0 !important;
  }
  /* evita deslocamento automático do template */
  .sticked-header-offset{
    margin-top: 0 !important;
  }
}

@media (max-width: 768px){
  .btn-get-started-4{
    margin-top: 4px !important;
  }
}

/* Ajusta o espaçamento inferior da hero no mobile */
@media (max-width: 768px){
  .hero {
    padding-bottom: 15px !important; /* era provavelmente 80px ou mais */
  }

  /* garante que os botões fiquem mais próximos da próxima seção */
  .hero .d-flex.justify-content-center.gap-3 {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 768px) {
  .center-icon img {
    display: block;
    margin: 30px auto 20px auto !important;
    max-width: 80% !important;
    height: auto;
  }
}

/* Corrige a cor do texto Fale Conosco dentro do menu Guias no mobile */
@media (max-width: 991px) {
  .dropdown-menu.show .btn-fale-conosco,
  .dropdown-menu.show a.btn-fale-conosco {
    color: #0A0A0A !important; /* preto */
    border-color: #0A0A0A !important;
    background-color: #fff !important;
  }

  .dropdown-menu.show .btn-fale-conosco:hover {
    background-color: #f2f2f2 !important;
  }
}

/* ===== Corrige a cor do "Fale Conosco" no dropdown Guias (mobile) ===== */
@media (max-width: 991px){
  /* volta a cor normal dos links só dentro do painel do Guias */
  .mobile-nav-active .navbar .dropdown-panel a{
    color: #0f1f3d !important;
  }

  /* botão Fale Conosco (classe .btn-outline do seu dropdown) */
  .mobile-nav-active .navbar .dropdown-panel .callout a.btn-outline,
  .mobile-nav-active .navbar .dropdown-panel a.btn-outline{
    color: #0A0A0A !important;          /* texto preto */
    background: #ffffff !important;      /* fundo branco */
    border-color: #0A0A0A !important;    /* borda preta fininha */
  }
  .mobile-nav-active .navbar .dropdown-panel .callout a.btn-outline:hover{
    background: #0A4AAD !important;      /* hover azul */
    color: #ffffff !important;
    border-color: #0A4AAD !important;
  }
}

/* Ajuste de fonte do botão Fale Conosco no mobile */
@media (max-width: 991px){
  .mobile-nav-active .navbar .dropdown-panel .callout a.btn-outline {
    font-size: 14px !important;  /* diminui o tamanho */
    padding: 8px 16px !important; /* opcional: ajusta o espaçamento interno */
  }
}