/*
  ==========================================================================
  PROJETO: Site Institucional Psicóloga Tanise Cervo
  DESENVOLVIDO POR: Elizandro Tavares de Oliveira
  CONTATO: aweinformatica@hotmail.com
  ==========================================================================
*/

/* CSS Personalizado para Tanise Cervo */
body {
    box-sizing: border-box;
}

.font-heading {
    font-family: 'Cormorant Garamond', Georgia, serif;
}

.font-body {
    font-family: 'Mulish', sans-serif;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 40px;
}

body {
    scroll-behavior: smooth;
}

.hero-gradient {
    background: linear-gradient(135deg, var(--bg-color) 0%, var(--surface-color) 100%);
}

.fade-in {
    animation: fadeIn 1s ease-out forwards;
}

.slide-up {
    animation: slideUp 0.8s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stagger-1 {
    animation-delay: 0.1s;
}

.stagger-2 {
    animation-delay: 0.2s;
}

.stagger-3 {
    animation-delay: 0.3s;
}

.stagger-4 {
    animation-delay: 0.4s;
}

.service-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover {
    transform: translateY(-8px);
}

.btn-primary {
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.2);
}

.divider-line {
    width: 60px;
    height: 1px;
}

.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.3s ease;
}

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

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Garante o offset correto para as âncoras individualmente */
section[id],
div[id] {
    scroll-margin-top: 90px;
}

:root {
    --bg-color: #F8F4EF;
    --surface-color: #FFFFFF;
    --text-color: #5D4D3D;
    --primary-color: #8B7355;
    --secondary-color: #C4B5A0;
    --accent-color: #E8E2D9;
}

.font-heading {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
}

.font-body {
    font-family: 'Mulish', sans-serif;
    font-weight: 400;
}

.card-shadow {
    box-shadow: 0 4px 20px rgba(93, 77, 61, 0.08);
}

.rounded-photo {
    border-radius: 40px;
    object-fit: cover;
}

.section-spacing {
    padding: 80px 24px;
}

@media (min-width: 768px) {
    .section-spacing {
        padding: 120px 24px;
    }
}


@view-transition {
    navigation: auto;
}

.py-24 {
    padding-top: 4rem !important;
    padding-bottom: 4em !important;
}

.py-32 {
    padding-top: 4rem !important;
    padding-bottom: 4em !important;
}