/* --- BASE & RESET --- */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}

html, body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: #333; 
    background-color: #fff; 
    overflow-x: hidden; 
}

.desktop-nav.active {
    display: block;
    position: absolute;
    top: 90px; /* <-- Altere este valor em pixels (ex: 95px, 100px) para subir ou descer o menu mobile */
    left: 0;
    width: 100%;
    background-color: #000000;
    padding: 20px 0;
    z-index: 1000;
    opacity: 0.9;
}

.desktop-nav.active ul {
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; width: 100%; }

/* --- HEADER & HERO --- */
.hero-bg {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    padding-bottom: 0px;
    min-height: 600px;
    animation-duration: 30s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: hero-bg;
}

@keyframes hero-bg {
    0%   { background-image: url(slidefundoveiculos.png); }
    10%  { background-image: url(slidefundoveiculos.png); }
    20%  { background-image: url(slidefundoveiculos.png); }
    30%  { background-image: url(slidefundoveiculos.png); }
    35%  { background-image: url(slidefundopedestres.png); }
    40%  { background-image: url(slidefundopedestres.png); }
    50%  { background-image: url(slidefundopedestres.png); }
    60%  { background-image: url(slidefundopedestres.png); }
    70%  { background-image: url(slidefundopedestres.png); }
    75%  { background-image: url(slidefundoleitoras.png); }
    80%  { background-image: url(slidefundoleitoras.png); }
    90%  { background-image: url(slidefundoleitoras.png); }
    95%  { background-image: url(slidefundoleitoras.png); }
    100% { background-image: url(slidefundoveiculos.png); }
}

.hero-img {
	width: 100%;
	height: 283px;
	display: block;
	background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    padding-bottom: 0px;
    min-height: 283px;
    animation-duration: 30s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: hero-img;
}

@keyframes hero-img {
    0%   { background-image: url(imgindexveiculos.png); }
    10%  { background-image: url(imgindexveiculos.png); }
    20%  { background-image: url(imgindexveiculos.png); }
    30%  { background-image: url(imgindexveiculos.png); }
    35%  { background-image: url(imgindexpedestres.png); }
    40%  { background-image: url(imgindexpedestres.png); }
    50%  { background-image: url(imgindexpedestres.png); }
    60%  { background-image: url(imgindexpedestres.png); }
    70%  { background-image: url(imgindexpedestres.png); }
    75%  { background-image: url(imgindexleitoras.png); }
    80%  { background-image: url(imgindexleitoras.png); }
    90%  { background-image: url(imgindexleitoras.png); }
    95%  { background-image: url(imgindexleitoras.png); }
    100% { background-image: url(imgindexveiculos.png); }
}

/* Estado normal do cabeçalho */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    color: #fff;
    position: relative; 
}

.logo-container {
    margin-left: 15px;
}

.desktop-nav { display: none; }

.desktop-nav ul {
    display: flex;
    gap: 20px;
    font-size: 0.9rem;
    color: #fff;
    text-shadow: 0px 0px 4px rgba(0,0,0,1.00);
}

.mobile-menu-icon { 
    font-size: 1.8rem; 
    cursor: pointer; 
    color: #fff; 
    margin-right: 15px; 
    position: relative;
    top: -5px;
}

.mobile-menu-icon i {
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8);
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 0px;
    color: #fff;
}

.hero-gate { max-width: 150px; display: block; margin: 0 auto 20px; }

.header-socials {
    display: flex;
    align-items: center;
    gap: 10px;
    visibility: visible;
    opacity: 1;
}

.social-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none; /* Remove qualquer sublinhado */
}

/* Força os ícones do Font Awesome a aparecerem com cor branca e sem sublinhado */
.social-icon-btn i,
.social-icon-btn span {
    color: #ffffff;
    font-size: 14px;
    text-decoration: none;
}

.whatsapp-box {
    background: #111;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 0.8rem;
    margin-bottom: 20px;
    border: 1px solid #333;
    opacity: 0.75;
}

.whatsapp-box i { font-size: 1.5rem; color: #fff; }

.hero-container-sobreposto {
    height: 148px;
    overflow: hidden;
}

.textveiculos {
    overflow: hidden;
    animation-duration: 30s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: textveiculos;
}

@keyframes textveiculos {
    0%   { display: block; }
    10%  { display: block; }
    20%  { display: block; }
    30%  { display: none; }
    40%  { display: none; }
    50%  { display: none; }
    60%  { display: none; }
    70%  { display: none; }
    80%  { display: none; }
    90%  { display: none; }
    100% { display: none; }
}
    
.textpedestres {
    overflow: hidden;
    animation-duration: 30s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: textpedestres;
}

@keyframes textpedestres {
    0%   { display: none; }
    10%  { display: none; }
    20%  { display: none; }
    30%  { display: none; }
    40%  { display: block; }
    50%  { display: block; }
    60%  { display: block; }
    70%  { display: none; }
    80%  { display: none; }
    90%  { display: none; }
    100% { display: none; }
}
    
.textleitoras {
    overflow: hidden;
    animation-duration: 30s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: textleitoras;
}

@keyframes textleitoras {
    0%   { display: none; }
    10%  { display: none; }
    20%  { display: none; }
    30%  { display: none; }
    40%  { display: none; }
    50%  { display: none; }
    60%  { display: none; }
    70%  { display: none; }
    80%  { display: block; }
    90%  { display: block; }
    100% { display: block; }
}

.hero-right h1 { font-size: 1.8rem; margin-bottom: 10px; font-weight: bold; text-shadow: 0px 0px 4px rgba(0,0,0,1.00); }
.hero-right p { font-size: 1rem; margin-bottom: 20px; line-height: 1.4; text-shadow: 0px 0px 4px rgba(0,0,0,1.00); }

.btn-white {
    background: #fff;
    color: #000;
    padding: 8px 25px;
    border-radius: 20px;
    font-weight: bold;
    display: inline-block;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.hero-icons { 
    display: flex; 
    justify-content: center;
    text-align: center; 
    gap: 15px;  
    color: #fff; 
    margin-top: 10px;
}

.icone-preto-veiculos {
    width: 33px;
    height: 27px;
    background-size: 33px 27px;
    background-image: url(img1.png);
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    animation-duration: 30s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: iconepretoveiculos;
}

.icone-preto-veiculos:hover {
    background-image: url(img4.png);
}

@keyframes iconepretoveiculos {
    0%   { display: none; }
    10%  { display: none; }
    20%  { display: none; }
    30%  { display: none; }
    40%  { display: block; }
    50%  { display: block; }
    60%  { display: block; }
    70%  { display: block; }
    80%  { display: block; }
    90%  { display: block; }
    100% { display: block; }
}
    
.icone-preto-pedestres {
    width: 25px;
    height: 27px;
    background-size: 25px 27px;
    background-image: url(img2.png);
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    animation-duration: 30s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: iconepretopedestres;
}

.icone-preto-pedestres:hover {
    background-image: url(img5.png);
}

@keyframes iconepretopedestres {
    0%   { display: block; }
    10%  { display: block; }
    20%  { display: block; }
    30%  { display: none; }
    40%  { display: none; }
    50%  { display: none; }
    60%  { display: none; }
    70%  { display: none; }
    80%  { display: block; }
    90%  { display: block; }
    100% { display: block; }
}

.icone-preto-leitoras {
    width: 20px;
    height: 27px;
    background-size: 20px 27px;
    background-image: url(img3.png);
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    animation-duration: 30s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: iconepretoleitoras;
}

.icone-preto-leitoras:hover {
    background-image: url(img6.png);
}

@keyframes iconepretoleitoras {
    0%   { display: block; }
    10%  { display: block; }
    20%  { display: block; }
    30%  { display: block; }
    40%  { display: block; }
    50%  { display: block; }
    60%  { display: block; }
    70%  { display: none; }
    80%  { display: none; }
    90%  { display: none; }
    100% { display: none; }
}

.icone-branco-veiculos {
    width: 33px;
    height: 27px;
    background-size: 33px 27px;
    background-image: url(img4.png);
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    animation-duration: 30s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: iconebrancoveiculos;
}

@keyframes iconebrancoveiculos {
    0%   { display: block; }
    10%  { display: block; }
    20%  { display: block; }
    30%  { display: none; }
    40%  { display: none; }
    50%  { display: none; }
    60%  { display: none; }
    70%  { display: none; }
    80%  { display: none; }
    90%  { display: none; }
    100% { display: none; }
}
    
.icone-branco-pedestres {
    width: 25px;
    height: 27px;
    background-size: 25px 27px;
    background-image: url(img5.png);
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    animation-duration: 30s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: iconebrancopedestres;
}

@keyframes iconebrancopedestres {
    0%   { display: none; }
    10%  { display: none; }
    20%  { display: none; }
    30%  { display: none; }
    40%  { display: block; }
    50%  { display: block; }
    60%  { display: block; }
    70%  { display: none; }
    80%  { display: none; }
    90%  { display: none; }
    100% { display: none; }
}
    
.icone-branco-leitoras {
    width: 20px;
    height: 27px;
    background-size: 20px 27px;
    background-image: url(img6.png);
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    animation-duration: 30s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: iconebrancoleitoras;
}

@keyframes iconebrancoleitoras {
    0%   { display: none; }
    10%  { display: none; }
    20%  { display: none; }
    30%  { display: none; }
    40%  { display: none; }
    50%  { display: none; }
    60%  { display: none; }
    70%  { display: none; }
    80%  { display: block; }
    90%  { display: block; }
    100% { display: block; }
}

.notbg {
    background-color: transparent;
    cursor: pointer;
    border: none;
}

/* --- 6 SERVIÇOS (ÍCONES) --- */
.services-icons {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 50px 20px;
}

.service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.service-item img { width: 80px; margin-bottom: 15px; }
.service-text h3 { font-size: 1.2rem; color: #202536; margin-bottom: 10px; font-weight: normal; }
.service-text p { font-size: 1.0rem; text-align: justify; color: #666; margin-bottom: 10px; line-height: 1.4; }
.saiba-mais { color: #202536 ; font-weight: bold; font-size: 1rem; display: block; text-align: right; width: 100%; }

/* --- SOBRE A EMPRESA --- */
.about-space-blue { width: 100%; height: 4px; background-color: #202536; }
.about-space-with { width: 100%; height: 4px; }
.about-section { background-image: url(fundoempresa.png); min-height:180px; padding: 40px 0; color: #fff; }
.about-flex { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.about-text h2 { font-size: 1.2rem; margin-bottom: 15px; }
.about-text p { text-align: justify; font-size: 1.0rem; line-height: 1.5; color: #FFFFFF; }

/* --- PRODUTOS DESTAQUE --- */
.featured-products { padding: 40px 20px; }
.feat-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; margin: 30px 0; }
.feat-info h3 { font-size: 1.1rem; color: #202536; margin-bottom: 15px; font-weight: bold; text-transform: uppercase; }
.check-list { text-align: left; font-size: 1.0rem; color: #555; display: flex; flex-direction: column; gap: 8px; }
.check-list i { color: #202536; margin-right: 5px; }
.feat-divider { border: 0; height: 1px; background: #e0e0e0; margin: 20px 0; }

/* --- APP SECTION --- */
.app-section {
    background: repeating-linear-gradient(-45deg, #fff, #fff 20px, #e8e8e8 20px, #e8e8e8 40px);
    padding: 50px 0;
}
.app-flex { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.app-device img { max-width: 150px; }
.dark-banner {
    background: #000000;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 10px 10px;
    border-radius: 50px;
    gap: 15px;
    width: 92vw; /* Ocupa 92% da largura total da tela do celular */
    max-width: 500px; /* Mantém o limite máximo para o desktop */
    opacity: 0.8;
}
.mt-15 { margin-top: 15px; }

.yellow-circle {
    background: #FA6731;
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    color: #fff; font-size: 1.2rem;
    flex-shrink: 0;
    margin-left: -10px;
}

.banner-text h4 { font-size: 0.95rem; margin-bottom: 3px; color: #F8AD17; }
.banner-text p { font-size: 0.75rem; color: #ccc; }


/* --- CASES --- */
.cases-section {
    background-color: #fff;
    padding: 60px 0;
    text-align: center;
    overflow: hidden;
}

.section-title {
    color: #202536;
    font-size: 1.5rem;
    margin-bottom: 40px;
    text-transform: uppercase;
}

.carousel-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
}

.carousel-track {
    display: inline-flex;
    gap: 30px;
    /* 20 segundos de duração. Ajuste para mais ou menos para controlar a velocidade */
    animation: scrollCarousel 25s linear infinite;
}

.carousel-track.paused {
    animation-play-state: paused !important;
}

.carousel-item {
    color: #202536;
    padding: 20px 40px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
}

@keyframes scrollCarousel {
    0% { transform: translateX(0); }
    /* Move exatamente 50% para a esquerda (como o conteúdo é duplicado, ele fará um loop imperceptível) */
    100% { transform: translateX(calc(-50% - 15px)); } 
}

/* --- DEPOIMENTOS --- */
.testimonials-section {
	background-color: #202536;
    padding: 60px 20px;
    text-align: center;
}

.title-light {
    color: #FFFFFF; /* Título claro contrastando com o fundo escuro */
}

.testimonials-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 0 auto;
}

.testimonial-card {
    background-color: #FFFFFF; /* Cor dos cartões conforme solicitado */
    color: #202536; /* Texto escuro contrastando com o cartão claro */
    padding: 30px;
    border-radius: 10px;
    text-align: justify;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.quote-icon {
    font-size: 2rem;
    color: #202536;
    opacity: 0.2;
}

.testimonial-card p {
    font-size: 1rem;
    line-height: 1.6;
    font-style: italic;
}

.testimonial-card h4 {
    font-size: 1.05rem;
    font-weight: bold;
    text-align: right;
    margin-top: auto; /* Empurra o nome sempre para o final do card */
}

/* --- ORÇAMENTO & CHECKBOXES AJUSTADOS --- */
.budget-section { padding: 50px 20px; }
.budget-header { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; justify-content: center; }
.budget-icon { font-size: 2rem; color: #555; }
.budget-header h2 { font-size: 1.3rem; color: #333; }

.budget-form input[type="text"], 
.budget-form input[type="email"], 
.budget-form input[type="tel"], 
.budget-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.checkbox-col { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    font-size: 0.85rem; 
    color: #444; 
    margin-bottom: 20px; 
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
}

.btn-submit {
    background: #333; color: #fff; padding: 10px 30px; border: none; border-radius: 4px;
    cursor: pointer; font-weight: bold; float: right;
}

/* --- FOOTER --- */
.site-footer { 
    background: #eaeaea; 
    padding-top: 40px; 
    color: #333;
    display: flex;          
    flex-direction: column; 
    flex-grow: 1; 
}

.footer-grid { 
    display: flex; 
    flex-direction: column; 
    gap: 30px; 
    padding-bottom: 30px; 
}

.footer-col h4 { 
    display: flex; 
    align-items: flex-start; 
    gap: 10px; 
    font-size: 0.9rem; 
    margin-bottom: 15px; 
    font-weight: bold; 
}

.footer-col h4 i { font-size: 1.2rem; color: #666; margin-top: 3px; }
.footer-col ul { display: flex; flex-direction: column; gap: 8px; font-size: 0.8rem; color: #555; }

.footer-bottom { 
    background: #333; 
    color: #999; 
    text-align: center; 
    padding: 15px; 
    font-size: 0.75rem; 
    flex-grow: 1; 
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- ANIMAÇÃO DE SCROLL (REVEAL) --- */
.hidden-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

.show-scroll {
    opacity: 1;
    transform: translateY(0);
}

/* --- MEDIA QUERIES (DESKTOP) --- */
@media (min-width: 600px) {
    .mobile-menu-icon { display: none; }
	
    .desktop-nav { display: block; }
    
	.hero-img { display: none; }
	
    .hero-content { 
        flex-direction: row; 
        justify-content: flex-end; 
        align-items: flex-start; 
        margin-top: 125px; 
        gap: 50px; 
    }
    
    .hero-gate { max-width: 250px; margin: 0; }
    
    .hero-right { 
        text-align: right; 
        position: relative; 
    }
	
	.social-icon-btn {
		width: 34px;
		height: 34px;
		border-radius: 50%;
		background-color: #000000;
		display: flex;
		align-items: center;
		justify-content: center;
		text-decoration: none; /* Remove qualquer sublinhado */
		transition: background 0.3s ease;
		opacity: 0.75;
}

/* Força os ícones do Font Awesome a aparecerem com cor branca e sem sublinhado */
	.social-icon-btn i,
	.social-icon-btn span {
		color: #ffffff;
		font-size: 14px;
		text-decoration: none;
}
    
    .whatsapp-box { 
        position: absolute; 
        top: -70px; 
        right: 0; 
    }
    
    .hero-right h1 { font-size: 2.5rem; }
    .hero-right p { font-size: 1.2rem; }
    
    .hero-icons { 
        justify-content: flex-end; 
    }
    
    .services-icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px; }
    .service-item { flex-direction: row; text-align: left; gap: 20px; align-items: flex-start; }
    .saiba-mais { text-align: right; }

    .about-flex { flex-direction: row; text-align: left; align-items: center; justify-content: center; gap: 40px; }
    .about-text { max-width: 700px; }
    .about-text h2 { font-size: 1.5rem; }
    .about-text p { font-size: 0.95rem; }

    .feat-item { flex-direction: row; text-align: left; justify-content: space-between; align-items: center; padding: 0 50px; }
    .feat-item.left-img { flex-direction: row-reverse; }
    .feat-info { flex: 1; }
    .feat-img { flex: 1; text-align: center; }
    .check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; font-size: 0.95rem; }
    
    .app-flex { flex-direction: row; justify-content: center; align-items: center; gap: 80px; }
	.app-device { position: relative; }
	.app-banners { max-width: 800px; display: flex; flex-direction: column; align-items: center; }
    .app-banners a { width: 100%; display: flex; justify-content: center; }
	.dark-banner { width: 100%; max-width: 400px; }
	
	.testimonials-grid { flex-direction: row; justify-content: space-between; }
    .testimonial-card { flex: 1; }
    
    .budget-header { justify-content: flex-start; }
    .form-row-3 { display: flex; gap: 20px; }
    .form-row-3 input { flex: 1; }
    .form-row-2 { display: flex; gap: 40px; margin-top: 10px; }
    .checkbox-col { flex: 1; }
    .textarea-col { flex: 2; display: flex; flex-direction: column; }
    .textarea-col textarea { flex-grow: 1; }
    
    .footer-grid { flex-direction: row; justify-content: space-between; }
    .footer-col { flex: 1; }
	
	.hidden-scroll { opacity: 0; transform: translateY(50px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; will-change: opacity, transform; }
	.show-scroll { opacity: 1; transform: translateY(0); }
}