/* Estilos CSS Customizados para o Site Ferro Force */
html {
    scroll-behavior: smooth; /* Para rolagem suave em links de âncora */
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #0a0a0a; 
    color: #f0f0f0; 
}

/* Menu Opacity Adjustments */
header {
    background-color: rgba(0, 0, 0, 0.70) !important; 
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
#mobile-menu { 
    background-color: rgba(0, 0, 0, 0.70) !important; /* Ajustado para consistência com o header */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
#mobile-menu a:hover {
    background-color: rgba(212, 175, 55, 0.1) !important; 
}


/* Hero Section Slideshow */
#inicio {
    position: relative; 
    overflow: hidden; 
}
.hero-slideshow { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; 
}
.hero-slide { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; 
    background-position: center; 
    opacity: 0; 
    transition: opacity 1.5s ease-in-out; 
}
.hero-slide.active { 
    opacity: 1;
}
#inicio .container { 
    position: relative; 
    z-index: 1;
}

/* Placeholders */
.profile-image-placeholder {
    background-color: #1e1e1e; 
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cccccc;
    font-size: 0.8rem;
}
.logo-placeholder {
    background-color: #1e1e1e;
    color: #D4AF37; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* Service Icons & Card Icons */
.service-icon, .card-icon-top { /* Combined similar styling */
    width: 48px; /* Tailwind w-12 */
    height: 48px; /* Tailwind h-12 */
    margin-bottom: 1rem; /* Tailwind mb-4 */
    color: #D4AF37; /* text-gold-500 */
    display: block; /* Ensures centering with mx-auto works */
    margin-left: auto;
    margin-right: auto;
}
.card-icon-top { /* Specific for FontAwesome if needed, or can be merged if styles are identical */
    font-size: 2.5rem; /* Adjust size for FontAwesome if different from SVG viewport */
    line-height: 48px; /* To vertically center FontAwesome icon if needed */
    text-align: center;
}


/* Gold Palette */
.text-gold-500 { color: #D4AF37; } 
.bg-gold-500 { background-color: #D4AF37; }
.border-gold-500 { border-color: #D4AF37; }
.hover\:bg-gold-600:hover { background-color: #c09b2e; } 
.hover\:text-gold-500:hover { color: #D4AF37; }

/* Focus Styles */
.focus\:ring-gold-500:focus {
    --tw-ring-color: #D4AF37 !important; 
}
 .focus\:ring-yellow-300:focus { 
    --tw-ring-color: #fde047 !important; 
}
*:focus { 
    outline: none; 
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    box-shadow: 0 0 0 2px #0a0a0a, 0 0 0 4px #D4AF37; 
}
.hero-cta-button:focus-visible { 
    box-shadow: 0 0 0 2px #D4AF37, 0 0 0 4px #c09b2e;
}

/* Alternating Section Backgrounds */
#servicos, #alex-ferro, #clientes {
    background-color: #18181b; 
}
#sobre, #porque-escolher, #contato {
    background-color: #0a0a0a; 
}

/* Card Backgrounds in Dark Sections */
.bg-gray-700 { 
    background-color: #1e1e1e !important; 
}
#contato .bg-gray-700 { 
    background-color: #1e1e1e !important;
}

/* Text Colors on Dark Backgrounds */
.text-gray-300, .text-gray-400 {
    color: #cccccc; 
}
.text-gray-500, .text-gray-600 { 
    color: #999999; 
}

/* Form Inputs */
input[type="text"], input[type="email"], input[type="tel"], textarea {
    background-color: #2d2d2d !important; 
    border-color: #444444 !important; 
    color: #f0f0f0 !important; 
}
input[type="text"]::placeholder, 
input[type="email"]::placeholder, 
input[type="tel"]::placeholder, 
textarea::placeholder { 
    color: #777777 !important; 
}

/* Fade-in Animation */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- NEW CLIENT CAROUSEL STYLES --- */
.carousel-wrapper { /* Container para o carrossel e seus controles externos */
    position: relative;
}
.carousel-container {
    position: relative; /* Necessário para o overflow e dimensões */
    overflow: hidden; /* Essencial para o efeito de carrossel */
    background-color: white; /* Mantém o fundo branco do card */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Sombra do Tailwind shadow-xl */
    border-radius: 0.5rem; /* Cantos arredondados do Tailwind rounded-lg */
    width: 100%;
    cursor: grab; /* Indica que o elemento pode ser arrastado */
}
.carousel-container.grabbing {
    cursor: grabbing; /* Muda o cursor durante o arrasto */
}
.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Animação da transição */
}
.carousel-slide {
    min-width: 100%;
    box-sizing: border-box;
}
.carousel-dots-container { /* Container para as bolinhas abaixo do card */
    text-align: center;
    padding-top: 1.5rem; /* Increased padding top for dots */
    padding-bottom: 1rem; /* Added padding bottom for dots */
}
.carousel-dot {
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 5px;
    background-color: #bbb; /* Original color for dots */
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease;
}
.carousel-dot.active {
    background-color: #717171; /* Original active color for dots */
}
.map-container iframe {
    width: 100%;
    height: 100%;
    min-height: 300px; /* Altura mínima para o mapa */
    pointer-events: none; /* Impede que o iframe capture eventos do mouse durante o arrasto do carrossel */
}
.carousel-slide.active-slide .map-container iframe {
    pointer-events: auto; /* Permite interação com o mapa do slide ativo */
}
/* --- END OF NEW CLIENT CAROUSEL STYLES --- */

/* Social Icons */
.social-icon {
    font-size: 1.75rem; 
    color: #cccccc; 
    transition: color 0.3s ease;
}
.social-icon:hover {
    color: #D4AF37; 
}

/* Alex Ferro Section Accordion Styles */
.accordion-item {
    margin-bottom: 1rem;
    border: 1px solid #374151; 
    border-radius: 0.375rem; 
    overflow: hidden; 
}
.accordion-header {
    background-color: #1e1e1e; 
    padding: 1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s;
}
.accordion-header:hover {
    background-color: #2d2d2d; 
}
.accordion-header h4 {
    margin-bottom: 0; 
}
.accordion-icon {
    transition: transform 0.3s ease-in-out;
    font-size: 1.25rem; 
}
/* MODIFIED CSS FOR ACCORDION CONTENT */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out; /* Apenas max-height é transicionado */
    background-color: #121212; 
    padding: 0 1.5rem; 
}

.accordion-content.active {
    padding: 1.5rem; 
}
.accordion-header.active .accordion-icon {
    transform: rotate(180deg);
}
/* Ajuste de alinhamento para desktop na seção Alex Ferro */
 @media (min-width: 768px) { 
    #alex-ferro .biography-text {
        text-align: left; 
    }
    .accordion-item { 
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
     .accordion-content ul, .accordion-content p {
        text-align: left;
    }
     .accordion-content ul {
        list-style-position: outside;
        padding-left: 1.25rem; /* Ajustado para pl-5 Tailwind like */
    }
}

/* Scroll to Top Button Styling */
#scrollToTopBtn {
    opacity: 0;
    visibility: hidden; /* Controla se o elemento ocupa espaço e pode ser interagido */
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s; /* Transição para opacidade e visibilidade */
    /* As classes Tailwind no HTML cuidam do posicionamento, cor, etc. */
}

#scrollToTopBtn.show {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s; /* Garante que a transição de opacidade e visibilidade seja imediata ao mostrar */
}


/* Contact Form Success Message Style */
#form-feedback {
    padding: 1rem;
    margin-top: 1.5rem; /* Tailwind mb-6 */
    border-radius: 0.375rem; /* Tailwind rounded-md */
    text-align: center;
}
#form-feedback.success {
    background-color: #22c55e; /* Tailwind bg-green-500 */
    color: #ffffff; /* Tailwind text-white */
}
#form-feedback.error { /* For potential future error handling */
    background-color: #ef4444; /* Tailwind bg-red-500 */
    color: #ffffff; /* Tailwind text-white */
}

/* Neon Glow Effect for Cards */
.neon-glow-on-hover {
    position: relative; /* Necessário para alguns efeitos de posicionamento se precisar no futuro */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.neon-glow-on-hover:hover,
.neon-glow-on-hover:focus-within { /* focus-within para acessibilidade com teclado */
    transform: translateY(-5px); /* Efeito opcional de levantar o card */
    box-shadow: 0 0 7px #D4AF37, /* Sombra dourada para o efeito neon */
                0 0 15px #D4AF37,
                0 0 25px #c09b2e; /* Uma cor dourada um pouco mais escura para profundidade */
}