/* ==========================================================================
   COMPORTAMENTO DE APP NATIVO (RESET & UX)
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  
  /* Desativa o destaque azul temporário ao tocar em botões/links no mobile */
  -webkit-tap-highlight-color: transparent;
  
  /* Desativa a seleção de texto ao segurar o dedo na tela (estilo app nativo) */
  -webkit-user-select: none;
  user-select: none;
}

/* Permite seleção de texto apenas em campos onde o usuário precisa digitar */
input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

html, body {
  width: 100%;
  /* Força a altura exata da tela e impede o "puxar para atualizar" do Chrome mobile */
  height: 100vh;
  height: -webkit-fill-available;
  overflow: hidden;
  background-color: var(--light);
  font-family: var(--font-family);
  color: var(--dark);
}

/* ==========================================================================
   ESTRUTURA GERAL DA TELA (LAYOUT)
   ========================================================================== */
.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  
  /* Suporte para barras de status transparentes (iOS Notch / Dynamic Island) */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Área rolável do aplicativo (Garante que o app não role a tela inteira, apenas o conteúdo) */
.content-scroll {
  flex: 1;
  overflow-y: auto;
  /* Rolagem suave nativa no iOS */
  -webkit-overflow-scrolling: touch;
  padding: 30px;
  border-radius: 30px;
    top:-30px;
  position: relative;
  background-color: white;
}

/* Exemplo de título usando a fonte da marca */
h1, h2, h3, .brand-text {
  font-family: var(--font-family);
  font-weight: 600;
  color: var(--dark);
}


/* ==========================================================================
   ESTILIZAÇÃO DA ÁREA TOP FIXA
   ========================================================================== */

.top-content {
  
  background-color: #333333;
  height: 280px;
 color: #ffffff;
 padding:16px;
 }


 .top-content-logo {
    display: flex;
   align-items: center;
   justify-content: center;
   
 }

 .top-content-logo img {
   max-width: 120px;
   
 }

 .top-content-title {
   font-size: 1.25rem;
   
   text-align: center;
   margin-top: 12px;
 }

.top-content-subtitle-highlight {
  text-align: center;
  margin-top: 4px;
  color: var(--primary);
 
}

.top-content-subtitle {
  font-size: 0.875rem;
  text-align: center;
  margin-top: 14px;
  color: var(--gray);
}