/* Website Custom Styles - Complementa o Tailwind CSS */

/* ============================================================================ */
/* CORES DO TEMA CUSTOMIZADO */
/* ============================================================================ */

:root {
    /* Cores Primárias */
    --color-primary-50: #cee1fe;
    --color-primary-100: #a2b6d4;
    --color-primary-200: #8494ae;
    --color-primary-300: #505f75;
    --color-primary-400: #39485e;
    --color-primary-500: #314055;
    --color-primary-600: #29374c;
    --color-primary-700: #263448;
    --color-primary-800: #242e3b;
    --color-primary-900: #1d2734;
    --color-primary-950: #17212c;

    /* Cores Secundárias */
    --color-secondary-50: #d0f6d8;
    --color-secondary-100: #b6f6c4;
    --color-secondary-200: #a4f7b6;
    --color-secondary-300: #8ef5a5;
    --color-secondary-400: #6ff88d;
    --color-secondary-500: #38ff63;
    --color-secondary-600: #31e859;
    --color-secondary-700: #29df50;
    --color-secondary-800: #10d73b;
    --color-secondary-900: #0fce39;
    --color-secondary-950: #0cc734;
    /* Cores de Sucesso */
    --color-success-50: #f0fdf4;
    --color-success-100: #dcfce7;
    --color-success-200: #bbf7d0;
    --color-success-300: #86efac;
    --color-success-400: #4ade80;
    --color-success-500: #22c55e;
    --color-success-600: #16a34a;
    --color-success-700: #15803d;
    --color-success-800: #166534;
    --color-success-900: #14532d;

    /* Cores de Perigo/Erro */
    --color-danger-50: #fef2f2;
    --color-danger-100: #fee2e2;
    --color-danger-200: #fecaca;
    --color-danger-300: #fca5a5;
    --color-danger-400: #f87171;
    --color-danger-500: #ef4444;
    --color-danger-600: #dc2626;
    --color-danger-700: #b91c1c;
    --color-danger-800: #991b1b;
    --color-danger-900: #7f1d1d;

    /* Cores de Aviso */
    --color-warning-50: #fffbeb;
    --color-warning-100: #fef3c7;
    --color-warning-200: #fde68a;
    --color-warning-300: #fcd34d;
    --color-warning-400: #fbbf24;
    --color-warning-500: #f59e0b;
    --color-warning-600: #d97706;
    --color-warning-700: #b45309;
    --color-warning-800: #92400e;
    --color-warning-900: #78350f;

    /* Cores de Info */
    --color-info-50: #f0f9ff;
    --color-info-100: #e0f2fe;
    --color-info-200: #bae6fd;
    --color-info-300: #7dd3fc;
    --color-info-400: #38bdf8;
    --color-info-500: #0ea5e9;
    --color-info-600: #0284c7;
    --color-info-700: #0369a1;
    --color-info-800: #075985;
    --color-info-900: #0c4a6e;

    /* Cores Neutras */
    --color-neutral-50: #f9fafb;
    --color-neutral-100: #f3f4f6;
    --color-neutral-200: #e5e7eb;
    --color-neutral-300: #d1d5db;
    --color-neutral-400: #9ca3af;
    --color-neutral-500: #6b7280;
    --color-neutral-600: #4b5563;
    --color-neutral-700: #374151;
    --color-neutral-800: #1f2937;
    --color-neutral-900: #111827;
    --color-neutral-950: #030712;

    /* Aplicação das cores principais */
    --color-primary: var(--color-primary-500);
    --color-secondary: var(--color-secondary-500);
    --color-success: var(--color-success-500);
    --color-danger: var(--color-danger-600);
    --color-warning: var(--color-warning-600);
    --color-info: var(--color-info-600);
    --color-neutral: var(--color-neutral-600);
}

/* Dark Mode Colors */
.dark {
    --color-primary: var(--color-primary-400);
    --color-secondary: var(--color-secondary-400);
    --color-success: var(--color-success-400);
    --color-danger: var(--color-danger-400);
    --color-warning: var(--color-warning-400);
    --color-info: var(--color-info-400);
    --color-neutral: var(--color-neutral-400);
}

/* ============================================================================ */
/* CLASSES UTILITÁRIAS DE CORES */
/* ============================================================================ */

/* Backgrounds */
.bg-primary {
    background-color: var(--color-primary);
}
.bg-primary-50 {
    background-color: var(--color-primary-50);
}
.bg-primary-100 {
    background-color: var(--color-primary-100);
}
.bg-primary-500 {
    background-color: var(--color-primary-500);
}
.bg-primary-600 {
    background-color: var(--color-primary-600);
}
.bg-primary-700 {
    background-color: var(--color-primary-700);
}

.bg-secondary {
    background-color: var(--color-secondary);
}
.bg-secondary-50 {
    background-color: var(--color-secondary-50);
}
.bg-secondary-100 {
    background-color: var(--color-secondary-100);
}
.bg-secondary-500 {
    background-color: var(--color-secondary-500);
}
.bg-secondary-600 {
    background-color: var(--color-secondary-600);
}

.bg-success {
    background-color: var(--color-success);
}
.bg-danger {
    background-color: var(--color-danger);
}
.bg-warning {
    background-color: var(--color-warning);
}
.bg-info {
    background-color: var(--color-info);
}
.bg-neutral {
    background-color: var(--color-neutral);
}

/* Text Colors */
.text-primary {
    color: var(--color-primary);
}
.text-primary-600 {
    color: var(--color-primary-600);
}
.text-primary-700 {
    color: var(--color-primary-700);
}

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

.text-success {
    color: var(--color-success);
}
.text-danger {
    color: var(--color-danger);
}
.text-warning {
    color: var(--color-warning);
}
.text-info {
    color: var(--color-info);
}
.text-neutral {
    color: var(--color-neutral);
}

/* Border Colors */
.border-primary {
    border-color: var(--color-primary);
}
.border-secondary {
    border-color: var(--color-secondary);
}
.border-success {
    border-color: var(--color-success);
}
.border-danger {
    border-color: var(--color-danger);
}
.border-warning {
    border-color: var(--color-warning);
}
.border-info {
    border-color: var(--color-info);
}
.border-neutral {
    border-color: var(--color-neutral);
}

/* Ring Colors */
.ring-primary {
    --tw-ring-color: var(--color-primary);
}
.ring-secondary {
    --tw-ring-color: var(--color-secondary);
}

/* ============================================================================ */
/* IMAGE CARD COMPONENT STYLES */
/* ============================================================================ */

/* Line clamp para truncar texto */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Aspect ratios customizados */
.aspect-square {
    aspect-ratio: 1 / 1;
}

.aspect-video {
    aspect-ratio: 16 / 9;
}

.aspect-4\/3 {
    aspect-ratio: 4 / 3;
}

.aspect-3\/2 {
    aspect-ratio: 3 / 2;
}

.aspect-2\/1 {
    aspect-ratio: 2 / 1;
}

/* Estilos para cards com background image */
.card {
    position: relative;
    min-height: 280px;
}

.card[style*="background-image"] {
    min-height: 320px;
}

/* Para cards horizontais */
.card.flex[style*="background-image"] {
    min-height: 200px;
}

/* Para cards overlay */
.card.relative.group[style*="background-image"] {
    min-height: 300px;
}

/* Gradientes para melhor legibilidade do texto */
.card-text-overlay {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.5);
}

.card-content-backdrop {
    backdrop-filter: blur(4px);
    background: rgba(0, 0, 0, 0.1);
}

/* Z-index específico para overlays */
.z-5 {
    z-index: 5;
}

/* ============================================================================ */
/* ACCORDION COMPONENT STYLES */
/* ============================================================================ */

/* Wrapper do conteúdo do accordion */
.accordion-content-wrapper {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Estado fechado */
.accordion-closed {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
}

/* Estado aberto */
.accordion-open {
    max-height: 500px; /* Altura suficiente para a maioria dos conteúdos */
    opacity: 1;
    transform: translateY(0);
}

/* Para conteúdos muito longos em telas maiores */
@media (min-width: 768px) {
    .accordion-open {
        max-height: 800px;
    }
}

/* Animação adicional para o padding */
.accordion-closed .accordion-content {
    padding-top: 0;
    padding-bottom: 0;
}

.accordion-open .accordion-content {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Estilo específico para itens do accordion abertos */
.accordion-item-open {
    background-color: rgb(249 250 251); /* bg-neutral-50 */
    border-color: rgb(212 212 216); /* border-neutral-300 */
}

/* Dark mode para itens abertos */
.dark .accordion-item-open {
    background-color: rgb(39 39 42); /* bg-neutral-750 aproximado */
    border-color: rgb(82 82 91); /* border-neutral-600 */
}

/* Transição suave para mudança de cor */
.accordion-item {
    transition: background-color 0.2s ease, border-color 0.2s ease,
        box-shadow 0.2s ease;
}

/* ============================================================================ */

/* Efeitos especiais para image cards */
.image-card-hover-zoom img {
    transition: transform 0.3s ease;
}

.image-card-hover-zoom:hover img {
    transform: scale(1.1);
}

.image-card-hover-blur {
    transition: all 0.3s ease;
}

.image-card-hover-blur:hover {
    backdrop-filter: blur(4px);
}

/* Gradient overlays personalizados */
.gradient-overlay-light {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.1) 100%
    );
}

.gradient-overlay-dark {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.6) 50%,
        rgba(0, 0, 0, 0.2) 100%
    );
}

.gradient-overlay-primary {
    background: linear-gradient(
        to top,
        rgba(37, 99, 235, 0.8) 0%,
        rgba(37, 99, 235, 0.4) 50%,
        rgba(37, 99, 235, 0.1) 100%
    );
}

.gradient-overlay-secondary {
    background: linear-gradient(
        to top,
        rgba(192, 38, 211, 0.8) 0%,
        rgba(192, 38, 211, 0.4) 50%,
        rgba(192, 38, 211, 0.1) 100%
    );
}

.gradient-background-shadow-up {
    background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.1) 90%,
        transparent 100%
    );
    pointer-events: none;
}

/* Animações específicas para cards */
@keyframes cardSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-card-slide-up {
    animation: cardSlideUp 0.6s ease-out forwards;
}

/* Estados de loading para cards */
.card-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

.dark .card-skeleton {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 200% 100%;
}

/* Grid responsivo para cards */
.cards-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    .cards-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Grid 2 colunas */
.cards-grid-2 {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .cards-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Grid 3 colunas */
.cards-grid-3 {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .cards-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .cards-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================================================ */
/* TIPOGRAFIA - TITLES (H1, H2, H3, H4, H5, H6) */
/* ============================================================================ */

/* Base para todos os títulos */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: inherit;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-primary-500);
    margin-bottom: 0.75rem;
    margin-top: 0;
    letter-spacing: -0.025em;
}

.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark .h1,
.dark .h2,
.dark .h3,
.dark .h4,
.dark .h5,
.dark .h6 {
    color: var(--color-neutral-100);
}

/* H1 - Títulos principais de páginas e hero sections */
h1,
.h1 {
    font-size: 2.5rem; /* 40px */
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.05em;
    margin-bottom: 1rem;
}

@media (min-width: 640px) {
    h1,
    .h1 {
        font-size: 3rem; /* 48px */
    }
}

@media (min-width: 1024px) {
    h1,
    .h1 {
        font-size: 3.75rem; /* 60px */
    }
}

/* H2 - Títulos de seções principais */
h2,
.h2 {
    font-size: 2rem; /* 32px */
    font-weight: 600;
    line-height: 1.15;
    margin-bottom: 1rem;
}

@media (min-width: 640px) {
    h2,
    .h2 {
        font-size: 2.25rem; /* 36px */
    }
}

@media (min-width: 1024px) {
    h2,
    .h2 {
        font-size: 2.5rem; /* 40px */
    }
}

/* H3 - Títulos de subsecções */
h3,
.h3 {
    font-size: 1.5rem; /* 24px */
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 0.75rem;
}

@media (min-width: 640px) {
    h3,
    .h3 {
        font-size: 1.75rem; /* 28px */
    }
}

@media (min-width: 1024px) {
    h3,
    .h3 {
        font-size: 1.875rem; /* 30px */
    }
}

/* H4 - Títulos de cards e componentes */
h4,
.h4 {
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

@media (min-width: 640px) {
    h4,
    .h4 {
        font-size: 1.375rem; /* 22px */
    }
}

/* H5 - Títulos menores */
h5,
.h5 {
    font-size: 1.125rem; /* 18px */
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

/* H6 - Títulos auxiliares */
h6,
.h6 {
    font-size: 1rem; /* 16px */
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.875rem; /* 14px */
}

/* ============================================================================ */
/* VARIAÇÕES DE TÍTULOS COM CORES */
/* ============================================================================ */

/* Títulos com cores primárias */
.title-primary {
    color: var(--color-primary-700);
}

.dark .title-primary {
    color: var(--color-primary-400);
}

.title-secondary {
    color: var(--color-secondary-700);
}

.dark .title-secondary {
    color: var(--color-secondary-400);
}

.title-success {
    color: var(--color-success-700);
}

.dark .title-success {
    color: var(--color-success-400);
}

.title-danger {
    color: var(--color-danger-700);
}

.dark .title-danger {
    color: var(--color-danger-400);
}

.title-warning {
    color: var(--color-warning-700);
}

.dark .title-warning {
    color: var(--color-warning-400);
}

.title-info {
    color: var(--color-info-700);
}

.dark .title-info {
    color: var(--color-info-400);
}

/* Cores específicas para títulos - com maior especificidade */
h1.text-white,
h2.text-white,
h3.text-white,
h4.text-white,
h5.text-white,
h6.text-white,
.h1.text-white,
.h2.text-white,
.h3.text-white,
.h4.text-white,
.h5.text-white,
.h6.text-white,
.title-white {
    color: white !important;
}

h1.text-black,
h2.text-black,
h3.text-black,
h4.text-black,
h5.text-black,
h6.text-black,
.h1.text-black,
.h2.text-black,
.h3.text-black,
.h4.text-black,
.h5.text-black,
.h6.text-black,
.title-black {
    color: black !important;
}

h1.text-primary,
h2.text-primary,
h3.text-primary,
h4.text-primary,
h5.text-primary,
h6.text-primary,
.h1.text-primary,
.h2.text-primary,
.h3.text-primary,
.h4.text-primary,
.h5.text-primary,
.h6.text-primary {
    color: var(--color-primary) !important;
}

h1.text-secondary,
h2.text-secondary,
h3.text-secondary,
h4.text-secondary,
h5.text-secondary,
h6.text-secondary,
.h1.text-secondary,
.h2.text-secondary,
.h3.text-secondary,
.h4.text-secondary,
.h5.text-secondary,
.h6.text-secondary {
    color: var(--color-secondary) !important;
}

h1.text-success,
h2.text-success,
h3.text-success,
h4.text-success,
h5.text-success,
h6.text-success,
.h1.text-success,
.h2.text-success,
.h3.text-success,
.h4.text-success,
.h5.text-success,
.h6.text-success {
    color: var(--color-success) !important;
}

h1.text-danger,
h2.text-danger,
h3.text-danger,
h4.text-danger,
h5.text-danger,
h6.text-danger,
.h1.text-danger,
.h2.text-danger,
.h3.text-danger,
.h4.text-danger,
.h5.text-danger,
.h6.text-danger {
    color: var(--color-danger) !important;
}

h1.text-warning,
h2.text-warning,
h3.text-warning,
h4.text-warning,
h5.text-warning,
h6.text-warning,
.h1.text-warning,
.h2.text-warning,
.h3.text-warning,
.h4.text-warning,
.h5.text-warning,
.h6.text-warning {
    color: var(--color-warning) !important;
}

h1.text-info,
h2.text-info,
h3.text-info,
h4.text-info,
h5.text-info,
h6.text-info,
.h1.text-info,
.h2.text-info,
.h3.text-info,
.h4.text-info,
.h5.text-info,
.h6.text-info {
    color: var(--color-info) !important;
}

/* Cores neutras para títulos */
h1.text-neutral-100,
h2.text-neutral-100,
h3.text-neutral-100,
h4.text-neutral-100,
h5.text-neutral-100,
h6.text-neutral-100,
.h1.text-neutral-100,
.h2.text-neutral-100,
.h3.text-neutral-100,
.h4.text-neutral-100,
.h5.text-neutral-100,
.h6.text-neutral-100 {
    color: var(--color-neutral-100) !important;
}

h1.text-neutral-200,
h2.text-neutral-200,
h3.text-neutral-200,
h4.text-neutral-200,
h5.text-neutral-200,
h6.text-neutral-200,
.h1.text-neutral-200,
.h2.text-neutral-200,
.h3.text-neutral-200,
.h4.text-neutral-200,
.h5.text-neutral-200,
.h6.text-neutral-200 {
    color: var(--color-neutral-200) !important;
}

h1.text-neutral-300,
h2.text-neutral-300,
h3.text-neutral-300,
h4.text-neutral-300,
h5.text-neutral-300,
h6.text-neutral-300,
.h1.text-neutral-300,
.h2.text-neutral-300,
.h3.text-neutral-300,
.h4.text-neutral-300,
.h5.text-neutral-300,
.h6.text-neutral-300 {
    color: var(--color-neutral-300) !important;
}

h1.text-neutral-400,
h2.text-neutral-400,
h3.text-neutral-400,
h4.text-neutral-400,
h5.text-neutral-400,
h6.text-neutral-400,
.h1.text-neutral-400,
.h2.text-neutral-400,
.h3.text-neutral-400,
.h4.text-neutral-400,
.h5.text-neutral-400,
.h6.text-neutral-400 {
    color: var(--color-neutral-400) !important;
}

h1.text-neutral-500,
h2.text-neutral-500,
h3.text-neutral-500,
h4.text-neutral-500,
h5.text-neutral-500,
h6.text-neutral-500,
.h1.text-neutral-500,
.h2.text-neutral-500,
.h3.text-neutral-500,
.h4.text-neutral-500,
.h5.text-neutral-500,
.h6.text-neutral-500 {
    color: var(--color-neutral-500) !important;
}

h1.text-neutral-600,
h2.text-neutral-600,
h3.text-neutral-600,
h4.text-neutral-600,
h5.text-neutral-600,
h6.text-neutral-600,
.h1.text-neutral-600,
.h2.text-neutral-600,
.h3.text-neutral-600,
.h4.text-neutral-600,
.h5.text-neutral-600,
.h6.text-neutral-600 {
    color: var(--color-neutral-600) !important;
}

h1.text-neutral-700,
h2.text-neutral-700,
h3.text-neutral-700,
h4.text-neutral-700,
h5.text-neutral-700,
h6.text-neutral-700,
.h1.text-neutral-700,
.h2.text-neutral-700,
.h3.text-neutral-700,
.h4.text-neutral-700,
.h5.text-neutral-700,
.h6.text-neutral-700 {
    color: var(--color-neutral-700) !important;
}

h1.text-neutral-800,
h2.text-neutral-800,
h3.text-neutral-800,
h4.text-neutral-800,
h5.text-neutral-800,
h6.text-neutral-800,
.h1.text-neutral-800,
.h2.text-neutral-800,
.h3.text-neutral-800,
.h4.text-neutral-800,
.h5.text-neutral-800,
.h6.text-neutral-800 {
    color: var(--color-neutral-800) !important;
}

h1.text-neutral-900,
h2.text-neutral-900,
h3.text-neutral-900,
h4.text-neutral-900,
h5.text-neutral-900,
h6.text-neutral-900,
.h1.text-neutral-900,
.h2.text-neutral-900,
.h3.text-neutral-900,
.h4.text-neutral-900,
.h5.text-neutral-900,
.h6.text-neutral-900 {
    color: var(--color-neutral-900) !important;
}

/* ============================================================================ */
/* ESTILOS ESPECIAIS DE TÍTULOS */
/* ============================================================================ */

/* Título com gradiente */
.title-gradient {
    background: linear-gradient(
        135deg,
        var(--color-primary-600) 0%,
        var(--color-secondary-600) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Título com sublinhado decorativo */
.title-underline {
    position: relative;
    padding-bottom: 0.75rem;
}

.title-underline::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--color-primary-600),
        var(--color-secondary-600)
    );
    border-radius: 2px;
}

/* Título centralizado com underline */
.title-underline-center {
    position: relative;
    padding-bottom: 0.75rem;
    text-align: center;
}

.title-underline-center::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--color-primary-600),
        var(--color-secondary-600)
    );
    border-radius: 2px;
}

/* Título com background destacado */
.title-highlight {
    background: var(--color-primary-50);
    color: var(--color-primary-800);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border-left: 4px solid var(--color-primary-500);
    display: inline-block;
}

.dark .title-highlight {
    background: var(--color-primary-950);
    color: var(--color-primary-200);
}

/* Título com ícone */
.title-with-icon {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.title-with-icon .icon {
    width: 1.5em;
    height: 1.5em;
    flex-shrink: 0;
}

/* ============================================================================ */
/* TAMANHOS ALTERNATIVOS DE TÍTULOS */
/* ============================================================================ */

/* Títulos pequenos */
.title-xs {
    font-size: 0.75rem; /* 12px */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.title-sm {
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
}

/* Títulos grandes */
.title-lg {
    font-size: 1.5rem; /* 24px */
    font-weight: 600;
}

.title-xl {
    font-size: 2rem; /* 32px */
    font-weight: 600;
}

.title-2xl {
    font-size: 2.5rem; /* 40px */
    font-weight: 700;
}

.title-3xl {
    font-size: 3rem; /* 48px */
    font-weight: 700;
}

.title-4xl {
    font-size: 4rem; /* 64px */
    font-weight: 700;
    line-height: 1;
}

@media (min-width: 640px) {
    .title-4xl {
        font-size: 5rem; /* 80px */
    }
}

/* ============================================================================ */
/* ESPAÇAMENTOS E UTILITÁRIOS */
/* ============================================================================ */

/* Remover margem bottom */
.title-no-margin {
    margin-bottom: 0;
}

/* Aumentar espaçamento */
.title-spaced {
    margin-bottom: 2rem;
}

/* Alinhamentos */
.title-center {
    text-align: center;
}

.title-left {
    text-align: left;
}

.title-right {
    text-align: right;
}

/* Peso da fonte */
.title-light {
    font-weight: 300;
}

.title-normal {
    font-weight: 400;
}

.title-medium {
    font-weight: 500;
}

.title-semibold {
    font-weight: 600;
}

.title-bold {
    font-weight: 700;
}

.title-extrabold {
    font-weight: 800;
}

/* ============================================================================ */
/* ANIMAÇÕES CUSTOMIZADAS */
/* ============================================================================ */

/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pulse Animation */
@keyframes pulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Slide In From Right */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide In From Left */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================================================ */
/* CLASSES UTILITÁRIAS */
/* ============================================================================ */

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

.animate-fade-in-delay-1 {
    animation: fadeIn 0.6s ease-out forwards;
    animation-delay: 0.2s;
    opacity: 0;
}

.animate-fade-in-delay-2 {
    animation: fadeIn 0.6s ease-out forwards;
    animation-delay: 0.4s;
    opacity: 0;
}

.animate-fade-in-delay-3 {
    animation: fadeIn 0.6s ease-out forwards;
    animation-delay: 0.6s;
    opacity: 0;
}

.animate-pulse-slow {
    animation: pulse 3s infinite;
}

.animate-slide-in-right {
    animation: slideInRight 0.8s ease-out forwards;
}

.animate-slide-in-left {
    animation: slideInLeft 0.8s ease-out forwards;
}

/* ============================================================================ */
/* REVEAL ON SCROLL */
/* ============================================================================ */

.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.6s ease-out;
}

.reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

/* ============================================================================ */
/* GRADIENTES CUSTOMIZADOS */
/* ============================================================================ */

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

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

.bg-gradient-hero {
    background: linear-gradient(
        180deg,
        var(--color-secondary-500) 0%,
        var(--color-secondary-500) 50%,
        var(--color-secondary-800) 100%
    );
}

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

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

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

.text-gradient-primary {
    background: linear-gradient(
        135deg,
        var(--color-primary-500) 0%,
        var(--color-primary-700) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-secondary {
    background: linear-gradient(
        135deg,
        var(--color-secondary-500) 0%,
        var(--color-secondary-700) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================================================ */
/* HOVER EFFECTS */
/* ============================================================================ */

.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-glow {
    transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 30px rgba(79, 70, 229, 0.3);
}

/* ============================================================================ */
/* BOTÕES CUSTOMIZADOS */
/* ============================================================================ */

.btn-primary {
    background-color: var(--color-primary-600);
    color: white;
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 40px;
    transition: all 0.2s ease;
    transform: scale(1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-primary:hover {
    background-color: var(--color-primary-700);
    transform: scale(1.05);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.btn-primary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.btn-secondary {
    background-color: var(--color-secondary-600);
    color: white;
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 40px;
    transition: all 0.2s ease;
    transform: scale(1);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-secondary:hover {
    background-color: var(--color-secondary-700);
    transform: scale(1.05);
}

.btn-outline-primary {
    border: 2px solid var(--color-primary-600);
    color: var(--color-primary-600);
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 40px;
    transition: all 0.2s ease;
    background-color: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-outline-primary:hover {
    background-color: var(--color-primary-600);
    color: white;
}

.btn-outline-secondary {
    border: 2px solid var(--color-secondary-600);
    color: var(--color-secondary-600);
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 40px;
    transition: all 0.2s ease;
    background-color: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-outline-secondary:hover {
    background-color: var(--color-secondary-600);
    color: white;
}

.btn-success {
    background-color: var(--color-success-600);
    color: white;
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 40px;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-success:hover {
    background-color: var(--color-success-700);
}

.btn-danger {
    background-color: var(--color-danger-600);
    color: white;
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 40px;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-danger:hover {
    background-color: var(--color-danger-700);
}

.btn-warning {
    background-color: var(--color-warning-600);
    color: white;
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 40px;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-warning:hover {
    background-color: var(--color-warning-700);
}

.btn-info {
    background-color: var(--color-info-600);
    color: white;
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 40px;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-info:hover {
    background-color: var(--color-info-700);
}

.btn-ghost {
    color: var(--color-neutral-600);
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 40px;
    transition: all 0.2s ease;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-ghost:hover {
    color: var(--color-primary-600);
    background-color: var(--color-primary-50);
}

.dark .btn-ghost {
    color: var(--color-neutral-300);
}

.dark .btn-ghost:hover {
    color: var(--color-primary-400);
    background-color: var(--color-primary-950);
}

/* Tamanhos dos botões */
.btn-sm {
    padding: 8px 16px;
    font-size: 14px;
}

.btn-lg {
    padding: 16px 32px;
    font-size: 18px;
}

.btn-xl {
    padding: 20px 40px;
    font-size: 20px;
}

/* ============================================================================ */
/* CARDS E CONTAINERS */
/* ============================================================================ */

.card {
    background-color: var(--color-neutral-50);
    border-radius: 40px;
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.dark .card {
    background-color: rgb(31 41 55);
}

.card-hover {
    transform: scale(1);
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: scale(1.05);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.glass-effect {
    backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(209, 213, 219, 0.3);
}

.dark .glass-effect {
    background-color: rgba(17, 24, 39, 0.75);
    border: 1px solid rgba(75, 85, 99, 0.3);
}

/* ============================================================================ */
/* LOADING STATES */
/* ============================================================================ */

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

.dark .skeleton {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 200% 100%;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.spinner {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ============================================================================ */
/* SCROLL BEHAVIOR */
/* ============================================================================ */

html {
    scroll-behavior: smooth;
}

.scroll-smooth {
    scroll-behavior: smooth;
}

/* Personalizar scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.dark ::-webkit-scrollbar-track {
    background: #374151;
}

.dark ::-webkit-scrollbar-thumb {
    background: #6b7280;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ============================================================================ */
/* FORM STYLES */
/* ============================================================================ */

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-neutral-300);
    border-radius: 8px;
    transition: all 0.2s ease;
    background-color: white;
    color: var(--color-neutral-900);
    font-size: 14px;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input:invalid {
    border-color: var(--color-danger-500);
}

.form-input:invalid:focus {
    border-color: var(--color-danger-500);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.dark .form-input {
    background-color: var(--color-neutral-800);
    border-color: var(--color-neutral-600);
    color: var(--color-neutral-100);
}

.dark .form-input:focus {
    border-color: var(--color-primary-400);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

.form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-neutral-300);
    border-radius: 8px;
    transition: all 0.2s ease;
    background-color: white;
    color: var(--color-neutral-900);
    font-size: 14px;
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
}

.form-textarea:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.dark .form-textarea {
    background-color: var(--color-neutral-800);
    border-color: var(--color-neutral-600);
    color: var(--color-neutral-100);
}

.form-select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-neutral-300);
    border-radius: 8px;
    transition: all 0.2s ease;
    background-color: white;
    color: var(--color-neutral-900);
    font-size: 14px;
    cursor: pointer;
}

.form-select:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.dark .form-select {
    background-color: var(--color-neutral-800);
    border-color: var(--color-neutral-600);
    color: var(--color-neutral-100);
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-neutral-700);
    margin-bottom: 8px;
}

.dark .form-label {
    color: var(--color-neutral-300);
}

.form-error {
    color: var(--color-danger-600);
    font-size: 14px;
    margin-top: 4px;
    display: block;
}

.form-success {
    color: var(--color-success-600);
    font-size: 14px;
    margin-top: 4px;
    display: block;
}

.form-help {
    color: var(--color-neutral-500);
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

.dark .form-help {
    color: var(--color-neutral-400);
}

/* Checkbox e Radio customizados */
.form-checkbox,
.form-radio {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary-600);
    cursor: pointer;
}

/* Input Groups */
.input-group {
    position: relative;
    display: flex;
    align-items: stretch;
}

.input-group .form-input {
    border-radius: 0;
}

.input-group .form-input:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.input-group .form-input:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.input-group-text {
    padding: 12px 16px;
    background-color: var(--color-neutral-100);
    border: 1px solid var(--color-neutral-300);
    color: var(--color-neutral-600);
    font-size: 14px;
    white-space: nowrap;
}

.dark .input-group-text {
    background-color: var(--color-neutral-700);
    border-color: var(--color-neutral-600);
    color: var(--color-neutral-300);
}

/* ============================================================================ */
/* NOTIFICATIONS E ALERTS */
/* ============================================================================ */

.alert {
    padding: 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 16px;
    border-left: 4px solid;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.alert-success {
    background-color: var(--color-success-50);
    color: var(--color-success-800);
    border-left-color: var(--color-success-500);
}

.alert-danger {
    background-color: var(--color-danger-50);
    color: var(--color-danger-800);
    border-left-color: var(--color-danger-500);
}

.alert-warning {
    background-color: var(--color-warning-50);
    color: var(--color-warning-800);
    border-left-color: var(--color-warning-500);
}

.alert-info {
    background-color: var(--color-info-50);
    color: var(--color-info-800);
    border-left-color: var(--color-info-500);
}

.alert-primary {
    background-color: var(--color-primary-50);
    color: var(--color-primary-800);
    border-left-color: var(--color-primary-500);
}

.alert-secondary {
    background-color: var(--color-secondary-50);
    color: var(--color-secondary-800);
    border-left-color: var(--color-secondary-500);
}

/* Dark mode alerts */
.dark .alert-success {
    background-color: var(--color-success-950);
    color: var(--color-success-200);
}

.dark .alert-danger {
    background-color: var(--color-danger-950);
    color: var(--color-danger-200);
}

.dark .alert-warning {
    background-color: var(--color-warning-950);
    color: var(--color-warning-200);
}

.dark .alert-info {
    background-color: var(--color-info-950);
    color: var(--color-info-200);
}

.dark .alert-primary {
    background-color: var(--color-primary-950);
    color: var(--color-primary-200);
}

.dark .alert-secondary {
    background-color: var(--color-secondary-950);
    color: var(--color-secondary-200);
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 40px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-primary {
    background-color: var(--color-primary-500);
    color: var(--color-white);
}

.badge-secondary {
    background-color: var(--color-secondary-100);
    color: var(--color-secondary-800);
}

.badge-success {
    background-color: var(--color-success-100);
    color: var(--color-success-800);
}

.badge-danger {
    background-color: var(--color-danger-100);
    color: var(--color-danger-800);
}

.badge-warning {
    background-color: var(--color-warning-100);
    color: var(--color-warning-800);
}

.badge-info {
    background-color: var(--color-info-100);
    color: var(--color-info-800);
}

.badge-neutral {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-800);
}

/* Dark mode badges */
.dark .badge-primary {
    background-color: var(--color-primary-900);
    color: var(--color-primary-200);
}

.dark .badge-secondary {
    background-color: var(--color-secondary-900);
    color: var(--color-secondary-200);
}

.dark .badge-success {
    background-color: var(--color-success-900);
    color: var(--color-success-200);
}

.dark .badge-danger {
    background-color: var(--color-danger-900);
    color: var(--color-danger-200);
}

.dark .badge-warning {
    background-color: var(--color-warning-900);
    color: var(--color-warning-200);
}

.dark .badge-info {
    background-color: var(--color-info-900);
    color: var(--color-info-200);
}

.dark .badge-neutral {
    background-color: var(--color-neutral-800);
    color: var(--color-neutral-200);
}

.notification-enter {
    transform: translateX(100%);
    opacity: 0;
}

.notification-enter-active {
    transform: translateX(0);
    opacity: 1;
    transition: all 0.3s ease-out;
}

.notification-exit {
    transform: translateX(0);
    opacity: 1;
}

.notification-exit-active {
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.3s ease-in;
}

/* ============================================================================ */
/* RESPONSIVE UTILITIES */
/* ============================================================================ */

/* Hide scrollbar but keep functionality */
.hide-scrollbar {
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    scrollbar-width: none; /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}

/* ============================================================================ */
/* DARK MODE TRANSITIONS */
/* ============================================================================ */

* {
    transition-property: color, background-color, border-color, fill, stroke;
    transition-duration: 200ms;
    transition-timing-function: ease-out;
}

/* ============================================================================ */
/* ACCESSIBILITY */
/* ============================================================================ */

/* Focus styles */
.focus-visible {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================================ */
/* PRINT STYLES */
/* ============================================================================ */

@media print {
    .no-print {
        display: none !important;
    }

    body {
        color: black !important;
        background: white !important;
    }

    a {
        text-decoration: underline;
    }
}