/* ============================
   Variáveis de Cores (facilidade)
   ============================ */


/* ============================
   Reset / Base / Tipografia
   - Fonte padrão, cor de fundo e smoothing
   ============================ */
html{box-sizing:border-box;}
*,*::before,*::after{box-sizing:inherit;}

body{
  font-family: 'Inter', sans-serif; /* movido do HTML */
  background-color: #ffffff;         /* movido do HTML */
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ============================
   Header / Logo
   - Aumentei os tamanhos da logo (h-10 e sm:h-12)
   ============================ */
.header-logo{ height: 2.5rem; /* h-10 */ }
@media (min-width: 640px){ .header-logo{ height: 3rem; /* sm:h-12 */ } }

.footer-logo{ height: 2.5rem; /* h-10 */ }

/* ============================
   Hero / Placeholders
   - Estilos auxiliares para placeholders e imagens do herói
   ============================ */
.hero-placeholder{ background-color:#f9fafb; } /* semelhante a bg-gray-50 */

/* ============================
   Hero desktop — largura reduzida da imagem
   - aplica quando a imagem do hero está posicionada absoluta em lg+
   - largura definida em 40% para dar mais espaço ao texto
   ============================ */
.hero-desktop {
  width: 40%;
  right: 0;
  top: 0;
  bottom: 0;
  /* evita que a imagem fique excessivamente larga em telas muito grandes */
  max-width: 720px;
}

/* garantia responsiva: em telas abaixo de 1024px a classe .hero-desktop não é usada (arquivo usa hidden lg:block no HTML) */

/* ============================
   Hero desktop — mostrar lado direito da imagem
   - Faz o crop priorizar a borda direita da imagem
   - Opcional: ajusta deslocamento para mostrar ainda mais da direita
   ============================ */
.hero-desktop-img {
  object-position: right center; /* exibe a parte direita da imagem */
  /* opcional: descomente para deslocar ligeiramente a imagem para a esquerda,
     fazendo parecer que ela "vem da direita" (-10% ajusta o recorte) */
  /* transform: translateX(-10%); */
}

/* ============================
   Botões (utilitários simples)
   - classes auxiliares para complementar Tailwind
   ============================ */
.btn-accent{ background-color:var(--accent); color:var(--primary); }
.btn-accent:hover{ opacity:.92; transform:translateZ(0) scale(1.02); transition:all .15s ease; }

/* ============================
   Seções
   - helpers para seções com fundo claro/acentuado
   ============================ */
.section--muted{ background-color:#f9fafb; } /* bg-gray-50 */

/* ============================
   Rodapé
   - pequenos ajustes para melhor responsividade do logo no footer
   ============================ */
.footer { /* caso queira usar uma classe específica no futuro */
  /* regras extras podem vir aqui */
}

/* ============================
   Header — sombra separadora
   ============================ */
.header { /* caso queira usar uma classe específica no futuro */
  /* regras extras podem vir aqui */
}

/* ============================
   Acessibilidade / Foco
   - outline visível com cor primária suave
   ============================ */
a:focus, button:focus, input:focus, textarea:focus {
  outline: 3px solid rgba(20,60,109,0.25);
  outline-offset: 2px;
}

/* ============================
   Notas
   - A maior parte do layout continua sendo controlada pelo Tailwind classes
   - Estas regras movem o CSS inline do HTML e fornecem utilitárias comentadas
   ============================ */

   /* Ajustes exclusivos para mobile */
@media (max-width: 640px) {

  /* Diminui o padding vertical da seção hero */
  header .py-16 {
    padding-top: 2.5rem !important;  /* antes: 4rem */
    padding-bottom: 2.5rem !important;
  }

  /* Faz o título subir um pouco */
  header h1 {
    margin-top: 0 !important;
  }

  /* Aproxima o botão da imagem */
  header .lg\:col-span-5 {
    margin-top: 0rem !important; /* antes: 1.5rem (mt-6) */
  }

  /* Reduz altura da imagem no mobile */
  header .w-full.h-80 {
    height: 14rem !important; /* antes: 20rem */
  }

}