/* ============================================================
   fixes-mobile.css  —  v2
   Inclua no <head> APÓS o style.css principal
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   0. RESET GLOBAL PREVENTIVO
   Evita scroll horizontal em qualquer navegador/tela
───────────────────────────────────────────────────────────── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
*, *::before, *::after {
  box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────────
   1. NAV — estrutura do lado direito
───────────────────────────────────────────────────────────── */
.ep-nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
   2. BOTÃO ADMIN — visível em TODOS os navegadores e tamanhos
───────────────────────────────────────────────────────────── */
.ep-btn-admin {
  display:         inline-flex !important;
  align-items:     center;
  gap:             5px;
  background:      var(--ora);
  color:           #fff !important;
  text-decoration: none;
  border-radius:   6px;
  font-family:     'Barlow Condensed', sans-serif;
  font-size:       12px;
  font-weight:     700;
  letter-spacing:  .8px;
  text-transform:  uppercase;
  padding:         7px 14px;
  white-space:     nowrap;
  transition:      opacity .15s;
  -webkit-tap-highlight-color: transparent;
}
.ep-btn-admin:hover { opacity: .85; }

@media (max-width: 600px) {
  .ep-btn-admin {
    padding: 7px 10px;
    font-size: 16px;
  }

  .ep-btn-admin span {
    display: inline;
  }
}

/* ─────────────────────────────────────────────────────────────
   3. BOTÃO HAMBÚRGUER — sem emoji, sem fundo vermelho
      Causa raiz: ☰/✕ como texto são renderizados como emoji
      colorido no Safari/iOS. Substituímos por SVG inline.
───────────────────────────────────────────────────────────── */
.ep-nav-toggle {
  /* Reset total */
  display:                    none;   /* mostrado só no mobile abaixo */
  -webkit-appearance:         none;
  appearance:                 none;
  background:                 none;
  border:                     none;
  outline:                    none;
  -webkit-tap-highlight-color: transparent;
  box-shadow:                 none;

  /* Tamanho e cor */
  width:  40px;
  height: 40px;
  padding: 6px;
  cursor: pointer;
  color: var(--blu-d);          /* azul escuro em todos os browsers */

  /* Centraliza o SVG */
  align-items:     center;
  justify-content: center;
  border-radius:   6px;
  flex-shrink:     0;
}

.ep-nav-toggle:active,
.ep-nav-toggle:focus {
  background: rgba(26,47,102,.08);
  outline: none;
}

/* O SVG herda a cor do botão */
.ep-nav-toggle svg {
  display: block;
  color: inherit;
  pointer-events: none;
}

@media (max-width: 600px) {
  .ep-nav-toggle {
    display: flex !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   4. MENU MOBILE (dropdown)
───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {

  /* Esconde nav links por padrão */
  .ep-nav-links {
    display:    none;
    position:   fixed;
    top:        70px;          /* altura do nav */
    left:       0;
    right:      0;
    background: var(--blu-d);
    flex-direction: column;
    padding:    8px 0;
    z-index:    998;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
  }

  .ep-nav-links.active {
    display: flex !important;
  }

  .ep-nav-link {
    color:   #fff;
    padding: 13px 20px;
    font-size: 14px;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .ep-nav-link:last-child { border-bottom: none; }
  .ep-nav-link.active { color: var(--ora); }

  /* Redes: visíveis mas menores */
  .ep-social {
    display:      flex !important;
    margin-left:  0;
    margin-right: 0;
    gap:          6px;
  }
  .ep-social-link {
    width:     30px;
    height:    30px;
    font-size: 14px;
  }

  /* Botão CTA padrão some (mantido do CSS original) */
  .ep-btn-cta { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   5. contato.php — grid 2 colunas empilha no mobile
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Captura o grid inline "1fr 1fr" do contato.php */
  .ep-section > div[style*="grid-template-columns:1fr 1fr"],
  .ep-section > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  .ep-section {
    padding-left:  1rem;
    padding-right: 1rem;
  }

  /* Inputs/selects/textareas não saem da tela */
  .ep-section input,
  .ep-section select,
  .ep-section textarea,
  .ep-section button {
    max-width: 100%;
  }
}

/* ─────────────────────────────────────────────────────────────
   6. para-personais.php — grid de planos responsivo
───────────────────────────────────────────────────────────── */
.grid-planos {
  display: grid;
  gap:     20px;
  width:   100%;
}

@media (min-width: 993px) {
  .grid-planos {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 992px) {
  .grid-planos {
    grid-template-columns: 1fr !important;
    max-width:    520px;
    margin-left:  auto !important;
    margin-right: auto !important;
  }
}

/* Evita que os cards ultrapassem o container */
.grid-planos > div {
  min-width: 0;
  max-width: 100%;
}

/* ─────────────────────────────────────────────────────────────
   7. Footer parceiros — imagens controladas, slider fluido
───────────────────────────────────────────────────────────── */
.ep-parc-slider {
  width:    100%;
  overflow: hidden;
  position: relative;
}

.ep-parc-card {
  width:      clamp(130px, 16vw, 220px) !important;
  height:     auto !important;
  min-height: 80px;
  padding:    14px !important;
  box-sizing: border-box;
}

.ep-parc-card img {
  max-width:    100% !important;
  max-height:   60px !important;
  width:        auto;
  height:       auto;
  object-fit:   contain;
  display:      block;
  margin:       0 auto;
}

@media (max-width: 600px) {
  .ep-parc-track { gap: 10px; }

  .ep-parc-card {
    width:      clamp(100px, 36vw, 150px) !important;
    min-height: 64px;
    padding:    10px !important;
  }

  .ep-parc-card img {
    max-height: 44px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   8. quem-somos.php — cards em coluna única abaixo de 480px
───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .ep-qs-cards {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   9. Grid de stats (barra de números) — empilha no mobile
───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  [style*="display:flex"][style*="flex-wrap:wrap"] > div[style*="border-right"] {
    border-right:  none !important;
    border-bottom: 1px solid rgba(255,255,255,.1);
    width:         100%;
  }
}

/* ─────────────────────────────────────────────────────────────
   10. Proteção geral — nenhum container ultrapassa 100vw
───────────────────────────────────────────────────────────── */
section,
.ep-section,
.ep-banner,
.ep-banner-content,
.ep-how,
.ep-footer,
.ep-footer-grid {
  max-width: 100%;
  box-sizing: border-box;
}

/* =========================================================
   FORÇA MENU MOBILE
========================================================= */

@media (max-width:600px){

  .ep-nav-toggle{
      display:flex !important;
  }

  .ep-nav-links{
      display:none !important;

      position:fixed !important;

      top:74px !important;
      left:0 !important;
      right:0 !important;

      flex-direction:column !important;

      background:var(--blu-d) !important;

      z-index:99999 !important;

      padding:8px 0 !important;

      box-shadow:0 10px 30px rgba(0,0,0,.2) !important;
  }

  .ep-nav-links.active{
      display:flex !important;
  }

  .ep-nav-link{
      width:100% !important;

      color:#fff !important;

      padding:14px 20px !important;

      border-bottom:1px solid rgba(255,255,255,.08) !important;
  }

}
/* ─────────────────────────────────────────────────────────────
   11. NOVO FOOTER COMPACTO RESPONSIVO
───────────────────────────────────────────────────────────── */
.ep-footer-grid {
  display: grid;
  /* Garante o layout correto de 4 colunas em telas grandes */
  grid-template-columns: 2fr 1fr 1fr 1.2fr !important;
  gap: 40px;
  max-width: 1200px !important;
  margin: 0 auto 30px;
}

/* Notebooks e Tablets menores (Até 992px) */
@media (max-width: 992px) {
  .ep-footer-grid {
    /* Transforma o layout em 2 colunas em cima e 2 embaixo */
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px;
  }
}

/* Celulares (Até 600px) */
@media (max-width: 600px) {
  .ep-footer-grid {
    /* Transforma tudo em uma única coluna vertical */
    grid-template-columns: 1fr !important;
    gap: 24px;
    text-align: center; /* Centraliza textos para leitura móvel */
  }

  /* Garante que a primeira coluna (minibio) centralize as redes sociais */
  .ep-footer-grid .ep-footer-col:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Faz a descrição não estourar nas bordas */
  .ep-footer-grid .ep-footer-col p {
    max-width: 100% !important;
    margin: 0 auto;
  }

  /* O RODA-PÉ FINAL (Ética e Direitos): Inverte e empilha no celular */
  .ep-footer .ep-footer-bottom,
  .ep-footer div[style*="max-width:1200px;margin:0 auto;display:flex"] {
    flex-direction: column-reverse !important; /* Coloca os direitos em cima e a ética embaixo */
    text-align: center !important;
    gap: 12px !important;
  }

  /* Alinha o bloco de ética no centro no mobile */
  .ep-footer div[style*="justify-content:flex-end"] {
    justify-content: center !important;
    text-align: center !important;
  }
}