/* =================================================================
   STYLE.CSS - ARQUIVO DE ESTILO CENTRAL
   Contém todos os estilos compartilhados do site.
   ================================================================= */

/* Importação da Fonte */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* Estilos Globais */
body { 
    font-family: 'Poppins', sans-serif; 
}

/* -------------------------------------------------------------
   HEADER & NAVEGAÇÃO
   ------------------------------------------------------------- */
.nav-item {
    position: relative;
    padding-bottom: 4px;
    transition: color 0.3s ease;
}
.nav-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #001f3f; /* Cor primária */
    transition: width 0.3s ease;
}
.dark .nav-item::after {
    background-color: #4FC3F7; /* Cor secundária */
}
.nav-item:hover::after,
.nav-item.active::after {
    width: 100%;
}
.nav-item.active {
    color: #001f3f; /* Cor primária */
    font-weight: 600;
}
.dark .nav-item.active {
    color: #4FC3F7; /* Cor secundária */
}

/* Menu Mobile (off-canvas) */
.mobile-menu {
    transition: transform 0.3s ease-in-out;
}
.mobile-menu.hidden {
    transform: translateX(100%);
}

/* Animação do ícone do menu (hambúrguer para X) */
.hamburger-icon span {
    transition: all 0.3s ease-in-out;
}
.hamburger-icon.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.hamburger-icon.open span:nth-child(2) {
    opacity: 0;
}
.hamburger-icon.open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* -------------------------------------------------------------
   PÁGINA DE PERFIL (Estilos específicos que não são do Tailwind)
   ------------------------------------------------------------- */
.timeline { 
    position: relative; 
    padding-left: 1rem; 
    border-left: 2px solid #e5e7eb; /* gray-200 */
}
.dark .timeline { 
    border-left-color: #374151; /* slate-700 */
}
.timeline-item { 
    position: relative; 
    margin-bottom: 1.25rem; 
}
.timeline-item:last-child { 
    margin-bottom: 0; 
}
.timeline-dot { 
    position: absolute; 
    left: -11.5px; 
    top: 9px; 
    width: 12px; 
    height: 12px; 
    background-color: #0f172a; /* slate-900 */
    border-radius: 50%; 
    border: 3px solid #e0e7ff; /* indigo-100 */
}
.dark .timeline-dot { 
    background-color: #e0e7ff; 
    border-color: #1e293b; /* slate-800 */
}
.focus-tags { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 0.5rem; 
}
.focus-tag { 
    background-color: #dbeafe; /* blue-100 */
    color: #1e40af; /* blue-800 */
    padding: 0.25rem 0.75rem; 
    border-radius: 9999px; 
    font-size: 0.75rem; 
    font-weight: 600; 
}
.dark .focus-tag { 
    background-color: #1e3a8a; /* blue-900 */
    color: #dbeafe; /* blue-100 */
}
.btn-schedule {
    margin-top: 1.75rem; 
    background-color: #2563eb; /* blue-600 */
    color: #fff; 
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem; 
    border: none; 
    font-weight: 700; 
    font-size: 1rem;
    cursor: pointer; 
    transition: background-color 0.3s; 
    display: inline-block; 
    text-decoration: none;
}
.btn-schedule:hover { 
    background-color: #1e40af; /* blue-800 */
}
html { 
    scroll-behavior: smooth; 
}