/* ==========================================================
   ELUNEXYA
   CENTRAL DE DÚVIDAS
========================================================== */

:root {

  --fundo:
    #030711;

  --painel:
    #080e1b;

  --painel-2:
    #0c1424;

  --borda:
    rgba(
      148,
      163,
      184,
      0.16
    );

  --texto:
    #ffffff;

  --suave:
    #8ea0c0;

  --roxo:
    #7228dc;

  --ciano:
    #00b9cb;

  --verde:
    #28d69a;

}


* {
  box-sizing:
    border-box;
}


html {
  scroll-behavior:
    smooth;
}


body {

  margin:
    0;

  min-height:
    100vh;

  color:
    var(--texto);

  background:

    radial-gradient(
      circle at 15% 0%,
      rgba(
        114,
        40,
        220,
        0.17
      ),
      transparent 30%
    ),

    radial-gradient(
      circle at 100% 70%,
      rgba(
        0,
        185,
        203,
        0.10
      ),
      transparent 30%
    ),

    var(--fundo);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

}


button,
input {
  font:
    inherit;
}


button {
  cursor:
    pointer;
}


/* ==========================================================
   TOPO
========================================================== */

.ajuda-topo {

  min-height:
    76px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    14px 32px;

  position:
    sticky;

  top:
    0;

  z-index:
    50;

  background:
    rgba(
      3,
      7,
      17,
      0.92
    );

  backdrop-filter:
    blur(
      16px
    );

  border-bottom:
    1px solid
    var(--borda);

}


.ajuda-topo-marca {

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

}


.ajuda-logo {

  width:
    40px;

  height:
    40px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    12px;

  color:
    #ffffff;

  font-size:
    21px;

  background:

    linear-gradient(
      135deg,
      var(--roxo),
      var(--ciano)
    );

}


.ajuda-topo-marca > div {

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

}


.ajuda-topo-marca strong {

  font-size:
    17px;

}


.ajuda-etiqueta {

  color:
    var(--ciano);

  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    2.4px;

}


.ajuda-topo-acoes {

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

}


.ajuda-conta {

  color:
    var(--suave);

  font-size:
    11px;

}


.ajuda-voltar {

  padding:
    10px
    16px;

  border:
    1px solid
    var(--borda);

  border-radius:
    11px;

  color:
    #ffffff;

  background:
    rgba(
      255,
      255,
      255,
      0.035
    );

}


/* ==========================================================
   HERO
========================================================== */

.ajuda-hero {

  max-width:
    1180px;

  margin:
    0 auto;

  padding:
    66px
    28px
    42px;

  text-align:
    center;

}


.ajuda-hero h1 {

  margin:
    12px 0 10px;

  font-size:
    clamp(
      30px,
      5vw,
      48px
    );

}


.ajuda-hero > p {

  margin:
    0 auto;

  max-width:
    620px;

  color:
    var(--suave);

  font-size:
    14px;

  line-height:
    1.7;

}


.ajuda-busca {

  max-width:
    680px;

  margin:
    30px auto 0;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  padding:
    0 18px;

  border:
    1px solid
    rgba(
      0,
      185,
      203,
      0.25
    );

  border-radius:
    16px;

  background:
    var(--painel-2);

  box-shadow:
    0 18px 50px
    rgba(
      0,
      0,
      0,
      0.22
    );

}


.ajuda-busca span {

  color:
    var(--ciano);

  font-size:
    23px;

}


.ajuda-busca input {

  width:
    100%;

  height:
    58px;

  border:
    0;

  outline:
    0;

  color:
    #ffffff;

  background:
    transparent;

}


.ajuda-busca input::placeholder {

  color:
    #61708d;

}


/* ==========================================================
   LAYOUT
========================================================== */

.ajuda-layout {

  width:
    min(
      1180px,
      calc(
        100% - 40px
      )
    );

  margin:
    0 auto;

  padding-bottom:
    80px;

  display:
    grid;

  grid-template-columns:
    230px
    minmax(
      0,
      1fr
    );

  gap:
    26px;

}


/* ==========================================================
   MENU
========================================================== */

.ajuda-menu {

  height:
    fit-content;

  position:
    sticky;

  top:
    100px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;

  padding:
    17px;

  border:
    1px solid
    var(--borda);

  border-radius:
    17px;

  background:
    rgba(
      8,
      14,
      27,
      0.86
    );

}


.ajuda-menu-titulo {

  padding:
    4px
    8px
    12px;

  color:
    #71809d;

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    2px;

}


.ajuda-menu-item {

  width:
    100%;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    12px
    13px;

  border:
    1px solid
    transparent;

  border-radius:
    12px;

  color:
    #9caac3;

  text-align:
    left;

  background:
    transparent;

}


.ajuda-menu-item:hover {

  color:
    #ffffff;

  background:
    rgba(
      255,
      255,
      255,
      0.04
    );

}


.ajuda-menu-item.ativo {

  color:
    #ffffff;

  border-color:
    rgba(
      0,
      185,
      203,
      0.24
    );

  background:

    linear-gradient(
      135deg,
      rgba(
        114,
        40,
        220,
        0.18
      ),
      rgba(
        0,
        185,
        203,
        0.12
      )
    );

}


/* ==========================================================
   SEÇÕES
========================================================== */

.ajuda-conteudo {

  min-width:
    0;

}


.ajuda-secao {

  scroll-margin-top:
    105px;

  margin-bottom:
    28px;

  padding:
    26px;

  border:
    1px solid
    var(--borda);

  border-radius:
    19px;

  background:
    rgba(
      8,
      14,
      27,
      0.88
    );

}


.ajuda-secao-cabecalho {

  display:
    flex;

  align-items:
    center;

  gap:
    17px;

  padding-bottom:
    22px;

  margin-bottom:
    5px;

  border-bottom:
    1px solid
    var(--borda);

}


.ajuda-secao-icone {

  width:
    50px;

  height:
    50px;

  flex-shrink:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(
      0,
      185,
      203,
      0.2
    );

  border-radius:
    15px;

  font-size:
    22px;

  background:
    rgba(
      0,
      185,
      203,
      0.07
    );

}


.ajuda-secao-cabecalho h2 {

  margin:
    6px 0;

  font-size:
    23px;

}


.ajuda-secao-cabecalho p {

  margin:
    0;

  color:
    var(--suave);

  font-size:
    12px;

  line-height:
    1.6;

}


/* ==========================================================
   PERGUNTAS
========================================================== */

.ajuda-pergunta {

  margin-top:
    12px;

  border:
    1px solid
    var(--borda);

  border-radius:
    14px;

  overflow:
    hidden;

  background:
    rgba(
      255,
      255,
      255,
      0.018
    );

}


.ajuda-pergunta summary {

  min-height:
    62px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    16px
    18px;

  cursor:
    pointer;

  list-style:
    none;

  color:
    #ffffff;

  font-size:
    13px;

  font-weight:
    800;

}


.ajuda-pergunta summary::-webkit-details-marker {
  display:
    none;
}


.ajuda-pergunta summary b {

  width:
    29px;

  height:
    29px;

  flex-shrink:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    var(--borda);

  border-radius:
    50%;

  color:
    var(--ciano);

  transition:
    transform
    0.2s;

}


.ajuda-pergunta[open]
summary b {

  transform:
    rotate(
      45deg
    );

}


.ajuda-pergunta[open]
summary {

  background:
    rgba(
      0,
      185,
      203,
      0.04
    );

}


.ajuda-resposta {

  padding:
    4px
    18px
    20px;

  color:
    #a3b0c9;

  font-size:
    12px;

  line-height:
    1.75;

}


.ajuda-resposta p {

  margin:
    11px 0;

}


.ajuda-resposta b {

  color:
    #ffffff;

}


/* ==========================================================
   PASSOS
========================================================== */

.ajuda-passo {

  display:
    flex;

  gap:
    13px;

  margin:
    11px 0;

  padding:
    13px;

  border:
    1px solid
    var(--borda);

  border-radius:
    12px;

  background:
    rgba(
      255,
      255,
      255,
      0.02
    );

}


.ajuda-passo > span {

  width:
    27px;

  height:
    27px;

  flex-shrink:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    9px;

  color:
    #ffffff;

  font-weight:
    900;

  background:

    linear-gradient(
      135deg,
      var(--roxo),
      var(--ciano)
    );

}


.ajuda-passo strong {

  display:
    block;

  color:
    #ffffff;

}


.ajuda-passo p {

  margin:
    4px 0 0;

}


/* ==========================================================
   EXPLICAÇÕES
========================================================== */

.ajuda-explicacao-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    12px;

  margin-top:
    15px;

}


.ajuda-explicacao-grid article {

  padding:
    16px;

  border:
    1px solid
    var(--borda);

  border-radius:
    13px;

  background:
    rgba(
      255,
      255,
      255,
      0.02
    );

}


.ajuda-explicacao-grid article > span {

  display:
    block;

  margin-bottom:
    7px;

  color:
    var(--ciano);

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    1.5px;

}


.ajuda-explicacao-grid strong {

  color:
    #ffffff;

}


.ajuda-caminho {

  width:
    fit-content;

  margin:
    14px 0;

  padding:
    10px
    14px;

  border:
    1px solid
    rgba(
      0,
      185,
      203,
      0.22
    );

  border-radius:
    10px;

  color:
    #ffffff;

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    1px;

  background:
    rgba(
      0,
      185,
      203,
      0.06
    );

}


.ajuda-caminho span {

  margin:
    0 8px;

  color:
    var(--ciano);

}


.ajuda-aviso {

  margin-top:
    16px;

  padding:
    14px
    16px;

  border:
    1px solid
    rgba(
      40,
      214,
      154,
      0.18
    );

  border-radius:
    12px;

  background:
    rgba(
      40,
      214,
      154,
      0.05
    );

}


.ajuda-aviso strong {

  color:
    var(--verde);

}


/* ==========================================================
   SUPORTE
========================================================== */

.ajuda-suporte {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;

  margin-top:
    26px;

  padding:
    25px;

  border:
    1px solid
    rgba(
      114,
      40,
      220,
      0.22
    );

  border-radius:
    18px;

  background:

    linear-gradient(
      135deg,
      rgba(
        114,
        40,
        220,
        0.09
      ),
      rgba(
        0,
        185,
        203,
        0.05
      )
    );

}


.ajuda-suporte h2 {

  margin:
    7px 0;

}


.ajuda-suporte p {

  max-width:
    600px;

  margin:
    0;

  color:
    var(--suave);

  font-size:
    12px;

  line-height:
    1.6;

}


.ajuda-suporte button {

  flex-shrink:
    0;

  padding:
    12px
    17px;

  border:
    0;

  border-radius:
    11px;

  color:
    #ffffff;

  font-weight:
    800;

  background:

    linear-gradient(
      135deg,
      var(--roxo),
      var(--ciano)
    );

}


/* ==========================================================
   SEM RESULTADO
========================================================== */

.oculto {
  display:
    none !important;
}


.ajuda-sem-resultado {

  padding:
    60px 20px;

  text-align:
    center;

  border:
    1px solid
    var(--borda);

  border-radius:
    18px;

  background:
    var(--painel);

}


.ajuda-sem-resultado > span {

  width:
    50px;

  height:
    50px;

  margin:
    0 auto 12px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  color:
    var(--ciano);

  font-size:
    26px;

  background:
    rgba(
      0,
      185,
      203,
      0.08
    );

}


.ajuda-sem-resultado p {

  color:
    var(--suave);

}


/* ==========================================================
   MOBILE
========================================================== */

@media (
  max-width: 800px
) {

  .ajuda-topo {

    padding:
      12px 16px;

  }


  .ajuda-conta {

    display:
      none;

  }


  .ajuda-topo-marca strong {

    font-size:
      14px;

  }


  .ajuda-layout {

    width:
      calc(
        100% - 24px
      );

    grid-template-columns:
      1fr;

  }


  .ajuda-menu {

    position:
      static;

    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

  }


  .ajuda-menu-titulo {

    grid-column:
      1 / -1;

  }


  .ajuda-secao {

    padding:
      18px;

  }


  .ajuda-explicacao-grid {

    grid-template-columns:
      1fr;

  }


  .ajuda-suporte {

    align-items:
      stretch;

    flex-direction:
      column;

  }


  .ajuda-suporte button {

    width:
      100%;

  }

}


@media (
  max-width: 500px
) {

  .ajuda-hero {

    padding:
      38px
      16px
      28px;

  }


  .ajuda-menu {

    grid-template-columns:
      1fr;

  }


  .ajuda-secao-cabecalho {

    align-items:
      flex-start;

  }


  .ajuda-pergunta summary {

    font-size:
      12px;

  }

}

/* ==========================================================
   ÍCONES EM IMAGEM - CENTRAL DE DÚVIDAS
========================================================== */

.ajuda-menu-icone-img {

  width: 20px;
  height: 20px;

  object-fit: contain;

  flex-shrink: 0;

}


.ajuda-secao-icone-img {

  width: 28px;
  height: 28px;

  object-fit: contain;

  display: block;

}

/* ==========================================================
   CORREÇÃO DO SUPORTE FINAL
========================================================== */

.ajuda-suporte {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

  position: relative;

  overflow: hidden;

}


.ajuda-suporte-texto {

  min-width: 0;

  flex: 1;

}


.ajuda-suporte-acao {

  flex: 0 0 auto;

  display: flex;

  align-items: center;

  justify-content: flex-end;

}


.ajuda-suporte-acao button {

  position: static !important;

  transform: none !important;

  margin: 0 !important;

  width: auto;

}

/* ==========================================================
   ELUNEXYA
   MENU LATERAL RECOLHÍVEL - CENTRAL DE DÚVIDAS
========================================================== */


/* ==========================================================
   MENU ABERTO
========================================================== */

.ajuda-menu {

  position:
    fixed !important;

  top:
    76px !important;

  left:
    0 !important;

  bottom:
    0 !important;

  width:
    250px !important;

  height:
    auto !important;

  max-height:
    none !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  grid-template-columns:
    none !important;

  gap:
    7px;

  padding:
    17px;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  border-radius:
    0 17px 0 0;

  border-left:
    0;

  z-index:
    45;

  transition:
    width 0.25s ease,
    padding 0.25s ease;

}


/* ==========================================================
   BOTÃO ABRIR / FECHAR
========================================================== */

.ajuda-menu-toggle {

  position:
    sticky;

  top:
    0;

  z-index:
    5;

  width:
    38px;

  min-width:
    38px;

  height:
    38px;

  min-height:
    38px;

  margin:
    0 0 10px auto;

  padding:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(
      0,
      185,
      203,
      0.35
    );

  border-radius:
    10px;

  color:
    #ffffff;

  font-size:
    21px;

  font-weight:
    900;

  line-height:
    1;

  background:

    linear-gradient(
      135deg,
      rgba(
        114,
        40,
        220,
        0.95
      ),
      rgba(
        0,
        185,
        203,
        0.88
      )
    );

  box-shadow:
    0 8px 25px
    rgba(
      0,
      0,
      0,
      0.30
    );

}


.ajuda-menu-toggle:hover {

  filter:
    brightness(1.12);

}


/* ==========================================================
   CONTEÚDO QUANDO MENU ESTÁ ABERTO
========================================================== */

.ajuda-layout {

  width:
    100% !important;

  max-width:
    none !important;

  margin:
    0 !important;

  padding:
    0 28px 80px 276px;

  display:
    block !important;

  transition:
    padding-left 0.25s ease;

}


.ajuda-conteudo {

  width:
    100%;

  max-width:
    930px;

  margin:
    0 auto;

}


/* HERO acompanha o menu */

.ajuda-hero {

  max-width:
    none !important;

  margin-left:
    250px !important;

  transition:
    margin-left 0.25s ease;

}


/* ==========================================================
   MENU RECOLHIDO
========================================================== */

.ajuda-app.menu-recolhido
.ajuda-menu {

  width:
    82px !important;

  padding-left:
    9px;

  padding-right:
    9px;

}


/* esconde os nomes */

.ajuda-app.menu-recolhido
.ajuda-menu-item > span {

  display:
    none !important;

}


/* esconde títulos: INÍCIO, FINANCEIRO ETC */

.ajuda-app.menu-recolhido
.ajuda-menu-titulo {

  display:
    none !important;

}


/* centraliza os ícones */

.ajuda-app.menu-recolhido
.ajuda-menu-item {

  min-width:
    0;

  justify-content:
    center;

  gap:
    0;

  padding:
    12px 6px;

  text-align:
    center;

  font-size:
    18px;

}


/* imagem do WhatsApp */

.ajuda-app.menu-recolhido
.ajuda-menu-icone-img {

  margin:
    0 auto;

}


/* botão de abrir/fechar centralizado */

.ajuda-app.menu-recolhido
.ajuda-menu-toggle {

  margin-left:
    auto;

  margin-right:
    auto;

}


/* conteúdo ganha espaço */

.ajuda-app.menu-recolhido
.ajuda-layout {

  padding-left:
    108px;

}


/* hero ganha espaço */

.ajuda-app.menu-recolhido
.ajuda-hero {

  margin-left:
    82px !important;

}


/* ==========================================================
   SCROLL DO MENU
========================================================== */

.ajuda-menu::-webkit-scrollbar {

  width:
    5px;

}


.ajuda-menu::-webkit-scrollbar-track {

  background:
    transparent;

}


.ajuda-menu::-webkit-scrollbar-thumb {

  border-radius:
    10px;

  background:
    rgba(
      148,
      163,
      184,
      0.28
    );

}


/* ==========================================================
   CELULAR
========================================================== */

@media (
  max-width: 800px
) {

  .ajuda-menu {

    top:
      65px !important;

    width:
      230px !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    grid-template-columns:
      none !important;

    border-radius:
      0 15px 0 0;

  }


  .ajuda-menu-titulo {

    grid-column:
      auto !important;

  }


  .ajuda-layout {

    width:
      100% !important;

    margin:
      0 !important;

    padding:
      18px 12px 70px 244px;

    display:
      block !important;

  }


  .ajuda-hero {

    margin-left:
      230px !important;

    padding:
      38px 16px 28px;

  }


  /* MENU RECOLHIDO NO CELULAR */

  .ajuda-app.menu-recolhido
  .ajuda-menu {

    width:
      68px !important;

    padding-left:
      6px;

    padding-right:
      6px;

  }


  .ajuda-app.menu-recolhido
  .ajuda-layout {

    padding-left:
      80px;

  }


  .ajuda-app.menu-recolhido
  .ajuda-hero {

    margin-left:
      68px !important;

  }


  .ajuda-app.menu-recolhido
  .ajuda-menu-item {

    padding:
      11px 4px;

  }


  .ajuda-app.menu-recolhido
  .ajuda-menu-toggle {

    width:
      36px;

    min-width:
      36px;

    height:
      36px;

    min-height:
      36px;

  }

}


/* ==========================================================
   CELULAR PEQUENO
========================================================== */

@media (
  max-width: 500px
) {

  .ajuda-menu {

    display:
      flex !important;

    grid-template-columns:
      none !important;

  }

}

/* ==========================================================
   ELUNEXYA
   CORREÇÃO FINAL MOBILE - CENTRAL DE DÚVIDAS
========================================================== */

@media (max-width: 800px) {

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }


  /* ========================================================
     TOPO
  ======================================================== */

  .ajuda-topo {
    min-height: 64px !important;

    padding:
      8px 10px !important;

    gap:
      8px !important;
  }


  .ajuda-topo-marca {
    min-width: 0;

    gap:
      8px !important;
  }


  .ajuda-logo {
    width:
      34px !important;

    min-width:
      34px !important;

    height:
      34px !important;

    font-size:
      18px !important;

    border-radius:
      10px !important;
  }


  .ajuda-topo-marca > div {
    min-width:
      0;
  }


  .ajuda-topo-marca strong {
    font-size:
      12px !important;

    white-space:
      nowrap;
  }


  .ajuda-topo .ajuda-etiqueta {
    font-size:
      7px !important;

    letter-spacing:
      1.3px !important;
  }


  .ajuda-topo-acoes {
    flex:
      0 0 auto;

    gap:
      0 !important;
  }


  .ajuda-conta {
    display:
      none !important;
  }


  .ajuda-voltar {
    padding:
      8px 10px !important;

    font-size:
      11px !important;

    white-space:
      nowrap;
  }



  /* ========================================================
     MENU LATERAL
  ======================================================== */

  .ajuda-menu {
    position:
      fixed !important;

    top:
      64px !important;

    left:
      0 !important;

    bottom:
      0 !important;

    width:
      220px !important;

    height:
      auto !important;

    max-height:
      none !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    grid-template-columns:
      none !important;

    gap:
      6px !important;

    padding:
      12px 10px !important;

    overflow-x:
      hidden;

    overflow-y:
      auto;

    border-radius:
      0 14px 0 0 !important;

    z-index:
      1000 !important;

    transition:
      width .25s ease,
      padding .25s ease;
  }


  .ajuda-menu-titulo {
    grid-column:
      auto !important;
  }



  /* ========================================================
     MENU RECOLHIDO
  ======================================================== */

  .ajuda-app.menu-recolhido
  .ajuda-menu {
    width:
      60px !important;

    padding:
      10px 6px !important;
  }


  .ajuda-app.menu-recolhido
  .ajuda-menu-item > span {
    display:
      none !important;
  }


  .ajuda-app.menu-recolhido
  .ajuda-menu-titulo {
    display:
      none !important;
  }


  .ajuda-app.menu-recolhido
  .ajuda-menu-item {
    width:
      46px !important;

    min-width:
      46px !important;

    height:
      46px !important;

    min-height:
      46px !important;

    margin:
      0 auto !important;

    padding:
      0 !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    gap:
      0 !important;

    font-size:
      18px !important;

    text-align:
      center !important;

    border-radius:
      12px !important;
  }


  .ajuda-app.menu-recolhido
  .ajuda-menu-icone-img {
    width:
      20px !important;

    height:
      20px !important;

    margin:
      0 auto !important;
  }



  /* ========================================================
     BOTÃO DA SETA
  ======================================================== */

  .ajuda-menu-toggle {
    width:
      36px !important;

    min-width:
      36px !important;

    height:
      36px !important;

    min-height:
      36px !important;

    padding:
      0 !important;

    margin:
      0 0 10px auto !important;

    flex:
      0 0 36px;
  }


  .ajuda-app.menu-recolhido
  .ajuda-menu-toggle {
    margin:
      0 auto 10px !important;
  }



  /* ========================================================
     HERO
     NÃO ENCOLHE QUANDO O MENU ABRE
  ======================================================== */

  .ajuda-hero,
  .ajuda-app.menu-recolhido .ajuda-hero,
  .ajuda-app:not(.menu-recolhido) .ajuda-hero {

    width:
      calc(100% - 60px) !important;

    max-width:
      none !important;

    margin:
      0 0 0 60px !important;

    padding:
      30px 14px 26px !important;
  }


  .ajuda-hero h1 {
    margin:
      10px 0 !important;

    font-size:
      clamp(
        27px,
        8vw,
        36px
      ) !important;

    line-height:
      1.08 !important;
  }


  .ajuda-hero > p {
    width:
      100%;

    max-width:
      500px;

    padding:
      0 4px;

    font-size:
      12px !important;

    line-height:
      1.6 !important;
  }



  /* ========================================================
     PESQUISA
  ======================================================== */

  .ajuda-busca {
    width:
      100% !important;

    max-width:
      100% !important;

    margin:
      24px 0 0 !important;

    padding:
      0 13px !important;

    border-radius:
      14px !important;
  }


  .ajuda-busca input {
    min-width:
      0 !important;

    height:
      52px !important;

    font-size:
      13px !important;
  }



  /* ========================================================
     ÁREA PRINCIPAL

     IMPORTANTE:
     O MENU ABERTO FICA POR CIMA.
     ELE NÃO ROUBA 220PX DO CONTEÚDO.
  ======================================================== */

  .ajuda-layout,
  .ajuda-app.menu-recolhido .ajuda-layout,
  .ajuda-app:not(.menu-recolhido) .ajuda-layout {

    width:
      calc(100% - 60px) !important;

    max-width:
      none !important;

    margin:
      0 0 0 60px !important;

    padding:
      0 12px 70px !important;

    display:
      block !important;

    grid-template-columns:
      none !important;
  }


  .ajuda-conteudo {
    width:
      100% !important;

    max-width:
      none !important;

    min-width:
      0 !important;

    margin:
      0 !important;
  }



  /* ========================================================
     CARTÕES DAS DÚVIDAS
  ======================================================== */

  .ajuda-secao {
    width:
      100% !important;

    max-width:
      100% !important;

    margin:
      0 0 20px !important;

    padding:
      15px !important;

    border-radius:
      16px !important;
  }


  .ajuda-secao-cabecalho {
    gap:
      11px !important;

    padding-bottom:
      17px !important;
  }


  .ajuda-secao-icone {
    width:
      43px !important;

    min-width:
      43px !important;

    height:
      43px !important;

    border-radius:
      12px !important;

    font-size:
      19px !important;
  }


  .ajuda-secao-cabecalho h2 {
    margin:
      4px 0 !important;

    font-size:
      20px !important;

    line-height:
      1.15 !important;
  }


  .ajuda-secao-cabecalho p {
    font-size:
      11px !important;

    line-height:
      1.55 !important;
  }



  /* ========================================================
     PERGUNTAS
  ======================================================== */

  .ajuda-pergunta {
    width:
      100% !important;

    border-radius:
      12px !important;
  }


  .ajuda-pergunta summary {
    min-height:
      56px !important;

    padding:
      13px 12px !important;

    gap:
      10px !important;

    font-size:
      12px !important;

    line-height:
      1.4 !important;
  }


  .ajuda-pergunta summary span {
    min-width:
      0 !important;

    overflow-wrap:
      anywhere;
  }


  .ajuda-pergunta summary b {
    width:
      27px !important;

    min-width:
      27px !important;

    height:
      27px !important;
  }


  .ajuda-resposta {
    padding:
      4px 13px 17px !important;

    font-size:
      11px !important;

    line-height:
      1.7 !important;
  }



  /* ========================================================
     GRIDS
  ======================================================== */

  .ajuda-explicacao-grid {
    grid-template-columns:
      1fr !important;
  }


  .ajuda-caminho {
    max-width:
      100%;

    white-space:
      normal;

    line-height:
      1.7;
  }


  .ajuda-suporte {
    flex-direction:
      column !important;

    align-items:
      stretch !important;
  }


  .ajuda-suporte button {
    width:
      100% !important;
  }

}



/* ==========================================================
   CELULAR MUITO PEQUENO
========================================================== */

@media (max-width: 380px) {

  .ajuda-app.menu-recolhido
  .ajuda-menu {
    width:
      56px !important;
  }


  .ajuda-app.menu-recolhido
  .ajuda-menu-item {
    width:
      42px !important;

    min-width:
      42px !important;

    height:
      42px !important;

    min-height:
      42px !important;
  }


  .ajuda-hero,
  .ajuda-app.menu-recolhido .ajuda-hero,
  .ajuda-app:not(.menu-recolhido) .ajuda-hero {

    width:
      calc(100% - 56px) !important;

    margin-left:
      56px !important;
  }


  .ajuda-layout,
  .ajuda-app.menu-recolhido .ajuda-layout,
  .ajuda-app:not(.menu-recolhido) .ajuda-layout {

    width:
      calc(100% - 56px) !important;

    margin-left:
      56px !important;

    padding-left:
      9px !important;

    padding-right:
      9px !important;
  }

}
/* ELUNEXYA — central de dúvidas: menu mobile sempre compacto ao iniciar.
   Expansão apenas por toque, por cima do conteúdo, sem deslocar ou cortar a página. */
@media (max-width: 800px) {
  .ajuda-app .ajuda-menu {
    width: min(212px, calc(100vw - 24px)) !important;
    box-shadow: 12px 10px 32px rgba(0, 0, 0, .35);
  }
  .ajuda-app.menu-recolhido .ajuda-menu {
    width: 60px !important;
    box-shadow: none;
  }
  .ajuda-app.menu-expandido::before {
    content: "";
    position: fixed;
    inset: 64px 0 0 0;
    background: rgba(3, 7, 17, .42);
    z-index: 999;
    pointer-events: auto;
  }
  .ajuda-app.menu-expandido .ajuda-menu {
    z-index: 1000 !important;
    background: #080e1b !important;
  }
  .ajuda-menu-item, .ajuda-menu-item > span { min-width: 0; }
  .ajuda-menu-item > span { overflow-wrap: normal; word-break: normal; }
  .ajuda-app.menu-recolhido .ajuda-menu-item > span,
  .ajuda-app.menu-recolhido .ajuda-menu-titulo { display: none !important; }
}
@media (max-width: 380px) {
  .ajuda-app.menu-recolhido .ajuda-menu { width: 56px !important; }
}