/*
  Folha de Estilo - Psicóloga Jéssica Alves
  UI/UX Melhorada e Cores Personalizadas
*/

/* 1. Variáveis de Cor e Tipografia
--------------------------------------------- */
:root {
    /* Cores de Fundo */
    --color-bg-body: #c9bcaa;
    --color-bg-light: #E2DED2;
    --color-bg-dark-accent: #C9BCA9;
    --color-bg-overlay: #75604b;
    --color-bg-footer: #473426;

    /* Cores de Texto */
    --color-text-body: #473426;
    --color-text-light: #E2DED2;
    --color-text-dark-base: #2F2E2C;
    --color-text-secondary: #5B5545;
    --color-text-bio: #35261b;

    /* Cores de Ação (CTAs) */
    --color-cta-hero: #7b99b5;
    --color-cta-main: #875F45;

    /* Fonte Principal */
    --font-primary: 'playfair Display', sans-serif;

    /* Fonte secundária */
    --font-secondary: 'quicksand', sans-serif;

}

/* 2. Estilos Base
--------------------------------------------- */
body {
    font-family: var(--font-primary);
    background-color: var(--color-bg-body);
    color: var(--color-text-body);
}

/* 3. Componentes de UI Melhorados
--------------------------------------------- */

/* Header e Navegação */
#main-header {
    /* Navbar com fundo desde o início */
    background-color: rgba(226, 222, 210, 0.9);
    /* --color-bg-light com transparência */
    color: var(--color-text-body);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
}

.nav-link {
    position: relative;
    padding: 4px 0;
    transition: color 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-cta-main);
    transition: width 0.3s ease;
}

.nav-link:hover {
    color: var(--color-text-dark-base);
}

.nav-link:hover::after {
    width: 100%;
}


/* Títulos de Seção */
.section-title {
    @apply text-3xl md:text-4xl font-bold mb-6;
}
.section-title-sm {
    @apply text-2xl md:text-3xl font-bold;
}

/* Cards */
.benefit-card,
.testimonial-card {
    background-color: var(--color-bg-light);
    @apply p-6 rounded-lg shadow-md transition-transform duration-300;
}

.benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.testimonial-card {
    @apply text-center;
}

/* Footer */
.social-icon {
    @apply text-light transition-transform duration-300 hover:opacity-80;
}

.social-icon:hover {
    transform: scale(1.1);
}



/* 4. Classes de Utilitário de Cor
--------------------------------------------- */
.bg-body {
    background-color: var(--color-bg-body);
}

.bg-light {
    background-color: var(--color-bg-light);
}

.bg-dark-accent {
    background-color: var(--color-bg-dark-accent);
}

.bg-overlay {
    background-color: var(--color-bg-overlay);
}

.bg-footer {
    background-color: var(--color-bg-footer);
}

.bg-cta-hero {
    background-color: var(--color-cta-hero);
}

.bg-cta-main {
    background-color: var(--color-cta-main);
}

.text-body {
    color: var(--color-text-body);
}

.text-light {
    color: var(--color-text-light);
}

.text-dark-base {
    color: var(--color-text-dark-base);
}

.text-secondary {
    color: var(--color-text-secondary);
}

.text-bio {
    color: var(--color-text-bio);
}

.text-cta-main {
    color: var(--color-text-cta-main);
}

.text-dark-accent-color {
    color: var(--color-bg-dark-accent);
}

.border-light {
    border-color: var(--color-bg-light);
}

.font-secondary {
    font-family: var(--font-secondary);
}

#main-header.scrolled {
    background-color: rgba(201, 188, 170, 0.85);
    /* Cor de fundo com transparência */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Suporte para Safari */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    
}

.nav-link.active {
    color: var(--color-cta-main);
    font-weight: 700;
}