/* ============================================================
   CAJÚ GDA Tecnologias – Estilos Personalizados
   Complementa o Tailwind CSS com regras específicas do projeto.
   ============================================================ */

/* ----------------------------------------
   1. IMPORTAÇÃO DE FONTES E VARIÁVEIS
   ---------------------------------------- */
:root {
    --color-caju:        #00d5ff; /* Cyan elétrico do logo */
    --color-caju-dark:   #00a2ff; /* Azul vibrante do logo/hero */
    --color-caju-light:  #ccfbf1; /* Ciano claro */
    --color-dark-900:    #010d21; /* Midnight blue profundo */
    --color-dark-800:    #021636;
    --color-dark-700:    #032252;

    --font-primary:      'Inter', sans-serif;

    --transition-base:   all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-caju:       0 10px 40px rgba(0, 213, 255, 0.25);
    --shadow-caju-hover: 0 20px 60px rgba(0, 213, 255, 0.40);
}

/* ----------------------------------------
   2. RESET E BASE
   ---------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-family: var(--font-primary);
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Seleção de text com cor da marca */
::selection {
    background-color: rgba(0, 213, 255, 0.25);
    color: #010d21;
}

/* ----------------------------------------
   3. SCROLLBAR PERSONALIZADA
   ---------------------------------------- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--color-caju);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-caju-dark);
}

/* ----------------------------------------
   4. GRADIENTES E CLASSES UTILITÁRIAS
   ---------------------------------------- */

/* Gradiente de texto para o nome/marca */
.text-gradient-caju {
    background: linear-gradient(135deg, #00d5ff 0%, #00a2ff 50%, #5eead4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* Background do hero */
.hero-bg-gradient {
    background: radial-gradient(ellipse 120% 90% at 60% 0%, rgba(0, 213, 255, 0.20) 0%, transparent 60%),
                radial-gradient(ellipse 80% 60% at 10% 90%, rgba(0, 162, 255, 0.15) 0%, transparent 50%),
                linear-gradient(180deg, #010d21 0%, #021636 100%);
}

/* ----------------------------------------
   5. NAVBAR - COMPORTAMENTO DE SCROLL
   ---------------------------------------- */
#navbar.scrolled nav {
    background-color: rgba(15, 23, 42, 0.98) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    border-bottom-color: rgba(249, 115, 22, 0.15) !important;
}

/* ----------------------------------------
   6. MENU MOBILE - HAMBÚRGUER ANIMADO
   ---------------------------------------- */

/* Estado aberto do menu */
#mobile-menu.menu-open {
    max-height: 500px;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Animação das linhas do hambúrguer */
#menu-toggle.active .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

#menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

#menu-toggle.active .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.hamburger-line {
    transform-origin: center;
}

/* ----------------------------------------
   7. CARDS FLUTUANTES DO HERO
   ---------------------------------------- */
.card-float {
    animation: float 6s ease-in-out infinite;
}

.card-float:nth-child(1) { animation-delay: 0s;    animation-duration: 6.5s; }
.card-float:nth-child(2) { animation-delay: 0.5s;  animation-duration: 7.0s; }
.card-float:nth-child(3) { animation-delay: 1.0s;  animation-duration: 6.0s; }
.card-float:nth-child(4) { animation-delay: 1.5s;  animation-duration: 7.5s; }
.card-float:nth-child(5) { animation-delay: 2.0s;  animation-duration: 6.8s; }
.card-float:nth-child(6) { animation-delay: 2.5s;  animation-duration: 5.5s; }

@keyframes float {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}

/* ----------------------------------------
   8. ANIMAÇÕES DE ENTRADA
   ---------------------------------------- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

/* ----------------------------------------
   9. FORMULÁRIO DE CONTACTO - ESTADOS
   ---------------------------------------- */

/* Campo com erro */
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

/* Ícone do campo com erro */
.form-group.has-error [id^="icon-"] {
    color: #ef4444 !important;
}

/* Campo com sucesso */
.form-group.has-success input,
.form-group.has-success select,
.form-group.has-success textarea {
    border-color: #22c55e !important;
    background-color: #f0fdf4 !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15) !important;
}

/* Campo com sucesso - exibe mensagem de erro */
.form-group .field-error {
    display: none;
}

.form-group.has-error .field-error {
    display: flex !important;
}

/* Placeholder padrão para select */
select option[disabled] {
    color: #9ca3af;
}

/* ----------------------------------------
   10. CONTADOR DE CARACTERES DO TEXTAREA
   ---------------------------------------- */
#char-count {
    font-size: 0.6875rem; /* 11px */
    letter-spacing: 0.025em;
    transition: color 0.2s ease;
    background: rgba(255, 255, 255, 0.8);
    padding: 2px 6px;
    border-radius: 6px;
}

#char-count.near-limit {
    color: #f59e0b;
    font-weight: 600;
}

#char-count.at-limit {
    color: #ef4444;
    font-weight: 700;
}

/* ----------------------------------------
   11. BOTÃO SUBMIT - ESTADO DE LOADING
   ---------------------------------------- */
#btn-submit.loading {
    opacity: 0.8;
    cursor: not-allowed;
    pointer-events: none;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.spin-icon {
    animation: spin 0.8s linear infinite;
    display: inline-block;
}

/* ----------------------------------------
   12. SMOOTH SCROLL PARA ÂNCORAS
   ---------------------------------------- */
[href^="#"] {
    scroll-behavior: smooth;
}

section[id] {
    scroll-margin-top: 5rem;
}

/* ----------------------------------------
   13. TRANSIÇÕES GLOBAIS
   ---------------------------------------- */
a,
button,
input,
select,
textarea {
    transition: var(--transition-base);
}

/* ----------------------------------------
   14. RESPONSIVIDADE - AJUSTES EXTRAS
   ---------------------------------------- */

/* Previne overflow horizontal em mobile */
@media (max-width: 640px) {
    .hero-bg-gradient {
        background: radial-gradient(ellipse 150% 80% at 80% 0%, rgba(0, 213, 255, 0.15) 0%, transparent 60%),
                    linear-gradient(180deg, #010d21 0%, #021636 100%);
    }

    .card-float {
        animation: none;
    }
}

/* ----------------------------------------
   15. UTILITÁRIOS ADICIONAIS
   ---------------------------------------- */

/* Linha divisória com gradiente */
.divider-caju {
    height: 2px;
    background: linear-gradient(to right, transparent, var(--color-caju), transparent);
    border: none;
    margin: 2rem 0;
}

/* Badge de destaque */
.badge-caju {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: rgba(249, 115, 22, 0.15);
    border: 1px solid rgba(249, 115, 22, 0.3);
    color: #f97316;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.075em;
}

/* Shadow personalizada da marca */
.shadow-caju {
    box-shadow: var(--shadow-caju);
}

.shadow-caju-hover:hover {
    box-shadow: var(--shadow-caju-hover);
}

/* Foco acessível */
:focus-visible {
    outline: 2px solid var(--color-caju);
    outline-offset: 3px;
}

/* Previne layout shift em imagens */
img {
    max-width: 100%;
    height: auto;
}

/* ----------------------------------------
   16. WHATSAPP FLUTUANTE - ANIMAÇÕES
   ---------------------------------------- */
@keyframes whatsapp-ripple {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0.4);
    }
    40% {
        box-shadow: 0 0 0 12px rgba(37, 211, 102, 0), 0 0 0 0 rgba(37, 211, 102, 0.4);
    }
    80% {
        box-shadow: 0 0 0 12px rgba(37, 211, 102, 0), 0 0 0 16px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 0 0 16px rgba(37, 211, 102, 0);
    }
}

.animate-whatsapp-ripple {
    animation: whatsapp-ripple 2s infinite;
}