@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Roboto:wght@300;400;500&display=swap');

/* Estilos base */
:root {
    --primary: #2BB8B0;
    --accent: #1a8f89;
    --bg-dark: #0a0f1a;
    --dark-blue: #141b2d;
    --neutral: #a0aec0;
}

.sticky-header {
    transition: all 0.3s ease;
}

.sticky-header.scrolled {
    background-color: #333F4D;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
}

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

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(43, 184, 176, 0.2);
}

/* Efeito hover para cards de serviços e benefícios */
.bg-\[\#23262e\]:hover, .service-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 16px 32px 0 rgba(43, 184, 176, 0.18), 0 2px 4px 0 rgba(0,0,0,0.10);
    transition: all 0.3s cubic-bezier(.4,2,.3,1);
    border-color: #2BB8B0;
}
.bg-\[\#23262e\], .service-card {
    transition: all 0.3s cubic-bezier(.4,2,.3,1);
}

input:focus, textarea:focus {
    border-color: #78C8C2 !important;
    box-shadow: 0 0 0 3px rgba(120, 200, 194, 0.3) !important;
}

.scroll-down {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-15px); }
    60% { transform: translateY(-10px); }
}

/* Animações */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Classes de animação */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animações para seções */
section {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animações para cards */
.service-card,
.bg-\[\#23262e\] {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease-out;
}

.service-card.visible,
.bg-\[\#23262e\].visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animações para FAQ */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.faq-content:not(.hidden) {
    max-height: 500px;
}

/* Efeitos hover para cards */
.service-card:hover,
.bg-\[\#23262e\]:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Animações para botões */
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(43, 184, 176, 0.3);
}

/* Animações para links */
a {
    transition: all 0.3s ease;
}

a:hover {
    transform: translateY(-1px);
}

/* Animações para imagens */
img {
    transition: all 0.3s ease;
}

img:hover {
    transform: scale(1.02);
}

/* Responsividade para animações */
@media (max-width: 768px) {
    .animate-on-scroll,
    section,
    .service-card,
    .bg-\[\#23262e\] {
        transform: translateY(15px);
    }
    
    .service-card:hover,
    .bg-\[\#23262e\]:hover {
        transform: translateY(-3px);
    }
}

/* Efeito de brilho no hero */
#hero-glow {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.18) 0%, rgba(43,184,176,0.10) 40%, transparent 80%);
    z-index: 10;
}

/* Estilos para o header */
.sticky-header {
    transition: all 0.3s ease;
}

.sticky-header.scrolled {
    background: rgba(10, 15, 26, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Animações para o menu mobile */
#mobile-menu {
    transition: all 0.3s ease;
}

#mobile-menu:not(.hidden) {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animações para o formulário */
.form-error {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.form-success {
    animation: success 0.5s ease-in-out;
}

@keyframes success {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* Animações para o botão de WhatsApp flutuante */
.fixed.bottom-6.right-6 {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Estilos do formulário */
input:disabled, textarea:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.form-error {
    border-color: #ff4444 !important;
    box-shadow: 0 0 0 3px rgba(255, 68, 68, 0.3) !important;
}

.form-success {
    border-color: #2BB8B0 !important;
    box-shadow: 0 0 0 3px rgba(43, 184, 176, 0.3) !important;
}

.loading {
    display: inline-block;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Transições suaves para feedback visual */
input, textarea {
    transition: all 0.3s ease;
}

/* Estilo para campos com foco */
input:focus:not(.form-error):not(.form-success),
textarea:focus:not(.form-error):not(.form-success) {
    border-color: #78C8C2 !important;
    box-shadow: 0 0 0 3px rgba(120, 200, 194, 0.3) !important;
}

.hero-bg {
    background: url("../assets/img/hero.jpg") center center/cover no-repeat;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 1;
    transition: opacity 0.5s;
}

/* Responsividade para a imagem de destaque */
@media (max-width: 768px) {
    #portfolio img {
        width: 70% !important; /* 30% menor que o tamanho original */
        margin: 0 auto;
        display: block;
    }
}