/* === CSS TOKENS E AJUSTES RESPONSIVOS MOBILE PRIMEIRO === */
:root {
  --touch-target: 48px;
  --spacing-mobile: clamp(1rem, 5vw, 2rem);
  --font-base-mobile: clamp(1rem, 4vw, 1.15rem);
  --hero-title: clamp(2rem, 8vw, 3.5rem);
}

@media (max-width: 767px) {

  /* Tipografia e Layout Geral */
  .container,
  .mx-auto {
    padding-left: var(--spacing-mobile) !important;
    padding-right: var(--spacing-mobile) !important;
  }

  p,
  li,
  .text-lg,
  .text-base,
  .text-xl {
    font-size: var(--font-base-mobile) !important;
    line-height: 1.6 !important;
  }

  .gradient-hero h1 {
    font-size: var(--hero-title) !important;
    line-height: 1.1 !important;
  }

  /* ÁUDIO PLAYER - Ajuste de largura e respiro */
  .audio-player-container {
    max-width: 95% !important;
    /* Estava 90%, agora 95% para mais respiro horizontal */
    width: 100% !important;
  }

  .audio-player {
    padding: 1.8rem 1.25rem !important;
    /* Menos padding lateral, mais no topo/base */
    gap: 1.2rem !important;
  }

  /* Touch Targets e Botoes */
  button,
  a.btn,
  .play-btn {
    min-height: var(--touch-target) !important;
  }

  /* Correcao do Glossary Trigger para SPAN (Fluxo de texto) */
  span.glossary-trigger {
    display: inline !important;
    /* Retorna ao fluxo normal */
    min-height: auto !important;
    padding: 0 2px !important;
    border-bottom: 2px solid rgba(168, 85, 247, 0.4) !important;
    line-height: inherit !important;
    color: #a855f7 !important;
  }

  /* Correcao do Glossary Trigger para BUTTON (Botoes independentes) */
  button.glossary-trigger,
  button.popup-trigger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-target) !important;
    padding: 10px 20px !important;
    border-bottom: 1.5px dotted rgba(168, 85, 247, 0.75) !important;
    border-radius: 8px !important;
    background: rgba(168, 85, 247, 0.05);
    color: #a855f7 !important;
  }

  button.glossary-trigger:hover,
  button.glossary-trigger:active {
    background: rgba(168, 85, 247, 0.16) !important;
  }

  /* Cards e secoes - respiracao boa */
  .card,
  .bg-white\/5,
  .rounded-2xl,
  .p-6,
  .p-8,
  .accordion-item {
    padding: 1.35rem !important;
  }

  /* Banner - "Ver como funciona" na linha de baixo */
  #desabafo-bridge p {
    line-height: 1.5 !important;
  }

  #desabafo-bridge a {
    display: block;
    margin-top: 4px;
  }
}

/* Focus visível */
.glossary-trigger:focus-visible,
.btn-primary:focus-visible {
  outline: 3px solid #c084fc !important;
  outline-offset: 4px !important;
}