/* ===========================================================================
   Ajuste combinado (Home + Batismo): header transparente sobre o hero,
   ganhando fundo branco translúcido só ao rolar além da dobra.
   Aplicado de forma central — não altera os estilos inline das páginas.
   =========================================================================== */

/* ===========================================================================
   Header transparency — opt-in por página.
   Padrão: header SÓLIDO (fundo branco definido no inline CSS de cada página).
   Páginas com hero escuro optam explicitamente pelo estado transparente.
   Novas páginas sem hero escuro recebem automaticamente o header sólido
   sem precisar de nenhuma regra extra.
   =========================================================================== */

/* Transição suave para todas as páginas */
header {
  transition: background .25s ease, border-color .25s ease,
              backdrop-filter .25s ease !important;
}

/* Páginas com hero escuro: header transparente antes de rolar */
.atl-home header:not(.is-scrolled),
.atl-batismo header:not(.is-scrolled),
.atl-victory header:not(.is-scrolled),
.atl-pontos header:not(.is-scrolled),
.atl-cursos header:not(.is-scrolled),
.atl-curso header:not(.is-scrolled),
.atl-midia header:not(.is-scrolled) {
  background: transparent !important;
  border-bottom-color: transparent !important;
}

/* Ao rolar (todas as páginas): header branco translúcido */
header.is-scrolled {
  background: rgba(255, 255, 255, .82) !important;
  border-bottom-color: rgba(220, 236, 248, .7) !important;
}

/* Links e hambúrguer BRANCOS — só nas páginas com hero escuro, antes de rolar */
.atl-home header:not(.is-scrolled) .conversion-menu .nav-item > a,
.atl-home header:not(.is-scrolled) .menu a:not(.menu-cta),
.atl-home header:not(.is-scrolled) .mobile-toggle,
.atl-batismo header:not(.is-scrolled) .menu a:not(.menu-cta),
.atl-batismo header:not(.is-scrolled) .mobile-toggle,
.atl-victory header:not(.is-scrolled) .menu a:not(.menu-cta),
.atl-victory header:not(.is-scrolled) .mobile-toggle,
.atl-pontos header:not(.is-scrolled) .menu a:not(.menu-cta),
.atl-pontos header:not(.is-scrolled) .mobile-toggle,
.atl-cursos header:not(.is-scrolled) .menu a:not(.menu-cta),
.atl-cursos header:not(.is-scrolled) .mobile-toggle,
.atl-curso header:not(.is-scrolled) .menu a:not(.menu-cta),
.atl-curso header:not(.is-scrolled) .mobile-toggle,
.atl-midia header:not(.is-scrolled) .menu a:not(.menu-cta),
.atl-midia header:not(.is-scrolled) .mobile-toggle {
  color: #fff;
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
}

/* Ao rolar: links voltam ao cinza escuro */
header.is-scrolled .menu a:not(.menu-cta) {
  color: #1f3a52;
}

/* Hover preservado em qualquer estado */
header .conversion-menu .nav-item > a:hover,
header .menu a:not(.menu-cta):hover {
  color: var(--blue);
}

/* CTA verde "Reservar agora" intacto em qualquer estado:
   não tocamos em .menu-cta nem em .btn-primary. */

/* ===========================================================================
   Botão hambúrguer (.mobile-toggle): aparece quando a nav desktop recolhe.
   Breakpoint unificado em 1100px para todas as páginas.
   =========================================================================== */
.mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(11,37,69,.22);
  background: rgba(11,37,69,.06);
  padding: 8px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--blue-dark);
}

@media (max-width: 1400px) {
  .atl-home .mobile-toggle,
  .atl-batismo .mobile-toggle,
  .atl-victory .mobile-toggle,
  .atl-pontos .mobile-toggle,
  .atl-cursos .mobile-toggle,
  .atl-blog .mobile-toggle,
  .atl-post .mobile-toggle,
  .atl-curso .mobile-toggle,
  .atl-midia .mobile-toggle { display: inline-flex; }
}

/* Esconde conversion-menu e CTA no mesmo breakpoint */
@media (max-width: 1400px) {
  .conversion-menu { display: none !important; }
  header .nav > a.btn { display: none !important; }
}

/* Impede scroll horizontal — só no header externo */
header { overflow: hidden; }

/* ===========================================================================
   Header nav: container mais largo que 1180px do .container padrão.
   Logo (260px) + itens (~770px) + CTA (~215px) = ~1245px → não cabe nos
   1180px do .container. Subimos o teto pra 1480px e mantemos o nav
   centralizado (margin: 0 auto), evitando que logo/botão fiquem grudados
   nas bordas em monitores wide. Em viewports <1400px o hamburger entra
   no lugar, então este teto só importa entre 1400px e infinito.
   =========================================================================== */
header .nav {
  max-width: min(1480px, calc(100% - 48px)) !important;
  width: min(1480px, calc(100% - 48px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ===========================================================================
   Home — seção "Batismo de mergulho em Guarapari" (.batismo-landing-final).
   O .batismo-final-hero usava align-items: center !important: com o título
   grande (clamp até 96px) quebrando em muitas linhas, a coluna de texto fica
   altíssima e o card de vídeo à direita era centralizado verticalmente —
   parecendo "solto"/desalinhado. Alinhamos as duas colunas pelo TOPO para o
   card acompanhar o título. Só desktop (>1120px), onde o grid é 2 colunas;
   abaixo disso o layout já empilha em 1 coluna (regra original preservada).
   =========================================================================== */
@media (min-width: 1121px) {
  .batismo-final-hero {
    align-items: start !important;
  }
}

/* O h2 dessa seção usava clamp(52px, 6.2vw, 96px) com line-height .84:
   em telas largas estourava nos 96px, quebrava em 8-9 linhas e empurrava
   parágrafo/botões pra fora — bloco de texto desequilibrado com o card.
   Teto reduzido e line-height suavizado para o bloco (h2 + p + CTAs) caber
   ao lado do card e alinhar pelo topo. Escala mobile preservada. */
.batismo-final-copy h2 {
  font-size: clamp(34px, 3.4vw, 56px) !important;
  line-height: 1.05 !important;
}

@media (max-width: 720px) {
  .batismo-final-copy h2 {
    font-size: clamp(30px, 7vw, 42px) !important;
  }
}

/* ===========================================================================
   Home — rodapé: o logo usa atlantes-logo-footer.png (subtítulo BRANCO, fundo
   transparente), próprio para fundo escuro. Uma regra antiga punha uma
   "camada branca" atrás (.footer-logo-real { background: rgba(255,255,255,.92)
   ...}) para legibilidade de um subtítulo PRETO que não é mais o caso —
   resultando num box branco no rodapé escuro. Removido para o logo ficar
   transparente. Só afeta a Home (.footer-logo-real não existe na Batismo,
   que já usa .footer-card img { background: transparent }).
   =========================================================================== */
.footer-logo-real {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* ===========================================================================
   Home — hero: o badge .tag ("Desde 1993 em Guarapari") não tinha
   margin-bottom e o .hero h1 não tinha margin-top, então o título grande
   (line-height .92) ficava colado no badge — texto "embolado". Adicionamos
   respiro entre o badge e o título. Escopo restrito ao hero da Home para não
   afetar outros .tag (produtos, batismo, hero-card etc.).
   =========================================================================== */
.atl-home .hero .hero-grid > div > .tag {
  margin-bottom: 20px !important;
}

.atl-home .hero h1 {
  margin-top: 4px !important;
}

/* ===========================================================================
   Home — submenu "Pontos de Mergulho": os badges viraram links clicáveis
   (Ilha Escalvada, Ilhas Rasas, Victory 8B, Bellucia, Oceano I). Espelha o
   visual dos <em> originais (.submenu-badges em) para <a>, com hover sutil.
   =========================================================================== */
.submenu-badges a {
  font-style: normal;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.submenu-badges a:hover {
  background: var(--blue);
  color: #fff;
}

/* ===========================================================================
   Batismo — refinamento MOBILE (≤720px). Desktop estava OK; o mobile tinha
   títulos com mínimo alto (clamp 48px / h3 fixo 40px), paddings de card
   pesados (34/42/28px) em tela ~390px, section-head alinhado à esquerda
   ("largado"/descentralizado), vídeo sem tamanho/centro adequados e footer
   sem botões sociais. Tudo escopado em .atl-batismo e só ≤720px — não afeta
   desktop nem Home/Victory-8B.
   =========================================================================== */
@media (max-width: 720px) {
  /* Gutters consistentes em todas as seções */
  .atl-batismo .container {
    width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Espaçamento entre seções mais enxuto e uniforme */
  .atl-batismo section {
    padding: 50px 0 !important;
  }

  /* Hero precisa de padding-top maior para o conteúdo não ficar atrás do header fixo */
  .atl-batismo section.hero {
    padding-top: 100px !important;
  }

  /* Cabeçalho de seção centralizado e proporcional (tira o "largado") */
  .atl-batismo .section-head {
    margin-bottom: 26px !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .atl-batismo .section-head h2 {
    font-size: clamp(26px, 7vw, 34px) !important;
    line-height: 1.16 !important;
    margin-top: 12px !important;
  }
  .atl-batismo .section-head p {
    font-size: 15px !important;
    line-height: 1.62 !important;
    margin-top: 12px !important;
  }

  /* Cards: padding/raio menores e títulos proporcionais */
  .atl-batismo .editorial-card {
    padding: 22px !important;
    border-radius: 22px !important;
  }
  .atl-batismo .editorial-card h3 {
    font-size: clamp(23px, 6.2vw, 29px) !important;
    line-height: 1.18 !important;
  }
  .atl-batismo .included-grid,
  .atl-batismo .review-grid,
  .atl-batismo .depo-grid,
  .atl-batismo .proof-grid {
    gap: 14px !important;
  }
  .atl-batismo .included-card {
    padding: 20px !important;
    border-radius: 20px !important;
  }
  .atl-batismo .included-card h3 {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }
  .atl-batismo .split {
    gap: 22px !important;
  }
  .atl-batismo .check-grid {
    gap: 12px !important;
  }

  /* Oferta: caixa e título proporcionais */
  .atl-batismo .offer-box {
    border-radius: 22px !important;
  }
  .atl-batismo .offer-copy {
    padding: 22px !important;
  }
  .atl-batismo .offer-copy h2 {
    font-size: clamp(26px, 7vw, 34px) !important;
    line-height: 1.16 !important;
    margin: 12px 0 16px !important;
  }

  /* Vídeos: centralizados e com tamanho coerente no 1 coluna */
  .atl-batismo .phone-video {
    text-align: center !important;
  }
  .atl-batismo .depo-vid {
    height: 320px !important;
    max-width: 280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

}

/* Footer mobile (Batismo + Victory-8B): 1 coluna, conteúdo centralizado */
@media (max-width: 720px) {
  .atl-batismo .footer-card,
  .atl-victory .footer-card,
  .atl-fp .footer-card {
    padding: 20px !important;
    text-align: center !important;
  }
  .atl-batismo .footer-card img,
  .atl-victory .footer-card img,
  .atl-fp .footer-card img {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .atl-batismo .bottom,
  .atl-victory .bottom,
  .atl-fp .bottom {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
  }
}

/* Botões sociais do footer (WhatsApp + Instagram) — visíveis em qualquer
   tamanho; no mobile ficam centralizados pela regra acima. */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.atl-batismo .footer-card .footer-social a,
.atl-victory .footer-card .footer-social a,
.atl-pontos .footer-card .footer-social a,
.atl-cursos .footer-card .footer-social a,
.atl-blog .footer-card .footer-social a,
.atl-post .footer-card .footer-social a,
.atl-curso .footer-card .footer-social a,
.atl-midia .footer-card .footer-social a,
.atl-fp .footer-card .footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .18);
}

.atl-batismo .footer-card .footer-social a.fs-wa,
.atl-victory .footer-card .footer-social a.fs-wa,
.atl-pontos .footer-card .footer-social a.fs-wa,
.atl-cursos .footer-card .footer-social a.fs-wa,
.atl-blog .footer-card .footer-social a.fs-wa,
.atl-post .footer-card .footer-social a.fs-wa,
.atl-curso .footer-card .footer-social a.fs-wa,
.atl-midia .footer-card .footer-social a.fs-wa,
.atl-fp .footer-card .footer-social a.fs-wa {
  background: #20c86b;
  color: #fff;
  border-color: transparent;
}

.atl-batismo .footer-card .footer-social a.fs-ig,
.atl-victory .footer-card .footer-social a.fs-ig,
.atl-pontos .footer-card .footer-social a.fs-ig,
.atl-cursos .footer-card .footer-social a.fs-ig,
.atl-blog .footer-card .footer-social a.fs-ig,
.atl-post .footer-card .footer-social a.fs-ig,
.atl-curso .footer-card .footer-social a.fs-ig,
.atl-midia .footer-card .footer-social a.fs-ig,
.atl-fp .footer-card .footer-social a.fs-ig {
  background: linear-gradient(135deg, #833ab4 0%, #e1306c 50%, #f77737 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 12px 32px rgba(225,48,108,.35);
}

@media (max-width: 720px) {
  .atl-batismo .footer-social,
  .atl-victory .footer-social,
  .atl-blog .footer-social,
  .atl-post .footer-social,
  .atl-midia .footer-social,
  .atl-fp .footer-social {
    justify-content: center;
  }
}

/* ── Footer CTA buttons — azul (reservar) + verde (whatsapp) ── */
.footer-main-action {
  background: #0066ff !important;
  color: #ffffff !important;
  box-shadow: 0 14px 34px rgba(0,102,255,.25) !important;
}
.footer-secondary-action {
  background: #20c86b !important;
  color: #ffffff !important;
  box-shadow: 0 14px 34px rgba(32,200,107,.25) !important;
}
/* Texto com respiro: fonte um pouco menor + folga lateral (não encostar nas bordas). */
.footer-main-action,
.footer-secondary-action {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  padding: 0 18px !important;
  letter-spacing: .005em !important;
}

/* ===========================================================================
   Felipetto — dark page: header permanentemente escuro em qualquer scroll.
   Sobrescreve o header.is-scrolled branco que se aplica globalmente.
   =========================================================================== */
.atl-fp header,
.atl-fp header.is-scrolled {
  background: rgba(2,8,15,.92) !important;
  border-bottom-color: rgba(255,255,255,.07) !important;
  backdrop-filter: blur(12px) !important;
}
.atl-fp header .menu a:not(.menu-cta),
.atl-fp header.is-scrolled .menu a:not(.menu-cta),
.atl-fp header .mobile-toggle {
  color: #ddeaf7 !important;
}
@media (max-width: 1040px) {
  .atl-fp .mobile-toggle { display: inline-flex; }
}

/* ===========================================================================
   Modal de captura de lead (.atl-lm)
   Intercepta cliques em a[href*="wa.me"] antes de abrir o chat.
   =========================================================================== */

.atl-lm {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.atl-lm[hidden] { display: none; }

.atl-lm__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 24, 40, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .22s ease;
}
.atl-lm.is-open .atl-lm__backdrop { opacity: 1; }

.atl-lm__box {
  position: relative;
  background: #fff;
  border-radius: 24px;
  padding: 36px 32px 28px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 24px 60px rgba(10, 24, 40, .18);
  transform: translateY(16px) scale(.97);
  opacity: 0;
  transition: transform .26s cubic-bezier(.34, 1.56, .64, 1), opacity .22s ease;
}
.atl-lm.is-open .atl-lm__box {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.atl-lm__close {
  position: absolute;
  top: 14px;
  right: 14px;
  border: none;
  background: #f0f5fa;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #5a7a96;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.atl-lm__close:hover { background: #e2ecf7; color: #1f3a52; }

.atl-lm__tag {
  display: inline-block;
  background: #e8f9f0;
  color: #0b7a45;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.atl-lm__title {
  font-size: 22px;
  font-weight: 700;
  color: #1f3a52;
  line-height: 1.25;
  margin: 0 0 8px;
}

.atl-lm__sub {
  font-size: 14px;
  color: #5a7a96;
  margin: 0 0 22px;
  line-height: 1.5;
}

.atl-lm__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.atl-lm__field label {
  font-size: 13px;
  font-weight: 700;
  color: #1f3a52;
}
.atl-lm__field input {
  border: 1.5px solid #d6e5f3;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  color: #1f3a52;
  background: #f8fbff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.atl-lm__field input::placeholder { color: #aec3d5; }
.atl-lm__field input:focus {
  border-color: #20c86b;
  box-shadow: 0 0 0 3px rgba(32, 200, 107, .14);
  background: #fff;
}

.atl-lm__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 6px;
  padding: 15px 20px;
  background: #20c86b;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: background .18s, transform .12s;
  font-family: inherit;
  box-sizing: border-box;
}
.atl-lm__submit:hover:not(:disabled) { background: #18b05f; }
.atl-lm__submit:active:not(:disabled) { transform: scale(.98); }
.atl-lm__submit:disabled { opacity: .7; cursor: wait; }

.atl-lm__privacy {
  font-size: 11px;
  color: #9ab5cc;
  text-align: center;
  margin: 12px 0 0;
}

/* Mobile: bottom sheet */
@media (max-width: 520px) {
  .atl-lm {
    align-items: flex-end;
    padding: 0;
  }
  .atl-lm__box {
    border-radius: 20px 20px 0 0;
    max-width: 100%;
    padding: 28px 20px 36px;
    transform: translateY(100%);
    opacity: 1;
  }
  .atl-lm.is-open .atl-lm__box {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ── Midia strip redesign ───────────────────────────────────── */
.midia-strip { background: #001932; padding: 72px 0; border: none; }
.midia-strip-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; gap: 20px; flex-wrap: wrap; }
.midia-strip-label { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(38px, 5vw, 60px); font-weight: 500; letter-spacing: -0.045em; text-transform: none; color: #ffffff; line-height: 1; }
.midia-strip-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.midia-card { display: flex; flex-direction: column; border: none; border-top: 4px solid transparent; border-radius: 20px; padding: 28px; text-decoration: none; transition: transform .22s, box-shadow .22s, background .22s; background: rgba(255,255,255,.06); }
.midia-card:hover { background: rgba(255,255,255,.11); transform: translateY(-4px); box-shadow: 0 20px 48px rgba(0,0,0,.35); }
.midia-card--globo   { border-top-color: #ff5252; }
.midia-card--tribuna { border-top-color: #4d94ff; }
.midia-card--portal27{ border-top-color: #3ddc7c; }
.press-logo-box { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.10); }
.press-outlet-name { display: block; font-size: 21px; font-weight: 800; line-height: 1; margin-bottom: 5px; letter-spacing: -.02em; }
.midia-card--globo   .press-outlet-name { color: #ff8a8a; }
.midia-card--tribuna .press-outlet-name { color: #7fb4ff; }
.midia-card--portal27 .press-outlet-name { color: #6ee7a0; }
.press-outlet-sub { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.30); }
.press-headline { font-size: 16px; line-height: 1.5; color: #ffffff; flex: 1; margin-bottom: 22px; font-weight: 500; }
.press-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.press-type { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.30); }
.press-cta-link { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.55); white-space: nowrap; transition: color .18s; }
.midia-card:hover .press-cta-link { color: #ffffff; }
.midia-strip-cta { font-size: .82rem; font-weight: 700; color: #ffffff; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: background .18s, transform .18s; flex-shrink: 0; border: 1.5px solid rgba(255,255,255,.35); border-radius: 999px; padding: 10px 20px; }
.midia-strip-cta:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.7); transform: translateY(-1px); }

/* ── Vibe cards clicáveis ───────────────────────────────────── */
a.vibe-frame { display: block; text-decoration: none; cursor: pointer; transition: transform .28s ease, box-shadow .28s ease; }
a.vibe-frame:hover { transform: scale(1.025); box-shadow: 0 36px 96px rgba(0,50,100,.26); }
a.vibe-frame strong::after { content: " →"; opacity: .7; font-size: .6em; letter-spacing: 0; }

/* ── Vibe video loop — z-index stack ───────────────────────── */
.vibe-frame .bg-img { z-index: 0; }
.vibe-frame::before { z-index: 1; }
.vibe-frame span,
.vibe-frame strong { z-index: 2; }

/* ── Batismo final benefits 5 colunas ──────────────────────── */
.batismo-final-benefits { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) {
  .batismo-final-benefits { grid-template-columns: repeat(2, 1fr); }
  .batismo-final-benefits div:nth-child(even) { border-right: 0; }
  .batismo-final-benefits div:not(:nth-last-child(-n+1)) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .midia-strip-logos { grid-template-columns: 1fr; }
  .midia-strip-head { flex-direction: column; align-items: flex-start; }
}

/* Pílulas/tags: nunca quebrar em duas linhas */
.tag { white-space: nowrap; }

/* Offset global: anchor links param 84px abaixo do header fixo (76px) */
html { scroll-padding-top: 84px; }

/* Nav desktop: largura mínima para itens curtos (ex.: "Blog") não ficarem desproporcionais */
.conversion-menu .nav-item > a { min-width: 86px; justify-content: center; }