/* ------------------------------------------------- */
/* IMPORTAÇÕES DE FONTE */
/* ------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Momo+Trust+Sans:wght@200..800&family=Zalando+Sans+Expanded:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');


/* ------------------------------------------------- */
/* ESTILOS GERAIS */
/* ------------------------------------------------- */

body {
    background-color: #23238E;
    font-weight: 600;
}

.logo {
    width: 30;
}

main {
    font-weight: 600;
}


/* ------------------------------------------------- */
/* HEADER */
/* ------------------------------------------------- */
header {
    background-color: #23238E;
    font-weight: 700;
    padding: 10px;
}

.nav-link {
    color: white !important;
    transition-duration: 1s;
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active {
    color: black !important;
    transition-duration: 0.5s;
}

.faleconosco {
    border: 3px solid #FF8C00 !important;
    background-color: #FF8C00 !important;
    padding: 4px 12px !important;
    border-radius: 10px;
    display: inline-block;
    color: #23238E !important;
}

.ticker-container {
    overflow: hidden;
    white-space: nowrap;
}


/* ------------------------------------------------- */
/* FRASE DIGITADA */
/* ------------------------------------------------- */

.frase-efeito {
    color: white;
}

.typing {
    width: 33ch;
    overflow: hidden;
    border-right: 3px solid white;
    white-space: nowrap;
    color: white;
    font-weight: 700;
    font-size: 30px;
    animation: typing 5s steps(33), blink .6s infinite step-end alternate;
}

@keyframes typing {
    from { width: 0; }
}

@keyframes blink {
    50% { border-color: transparent; }
}

.frase {
    text-align: center;
}


/* ------------------------------------------------- */
/* BLOCOS E TEXTOS */
/* ------------------------------------------------- */

.textobloco {
    font-size: 25px;
}

.bloco {
    font-weight: 700;
    font-size: 40px;
}

.bloco1 {
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

.imgposto {
    width: 50;
}

.posto {
    background-color: #23238E;
    padding: 25px;
}

.perguntas h3{
    color: #23238E !important;
    font-size: 24px;
}
.perguntas p {
    font-size: 14px;
}
/* ------------------------------------------------- */
/* Anuncie Aqui */
/* ------------------------------------------------- */

.anuncio {
    color: #23238E;
}

.postoShellImg {
    border-radius: 20px;
}

/* ------------------------------------------------- */
/* FAQ SLIDER */
/* ------------------------------------------------- */

.faq-slider-section {
    padding: 70px 0;
    background:white;
}

.faq-title {
    font-size: 48px;
    font-weight: 700;
    color: #23238E;
    margin-bottom: 40px;
}

.faq-slider {
    width: 100%;
    max-width: 650px;
    margin: auto;
    position: relative;
    overflow: hidden;
    height: 230px; /* Altura fixa para não pular ao trocar */
}

.faq-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 25px;
    background: rgb(243, 243, 243);
    border-radius: 16px;
    opacity: 0;
    transform: translateX(40px);
    animation: faqFade 25s infinite;
}

/* Animação de slide + fade */
@keyframes faqFade {
    0%   { opacity: 0; transform: translateX(40px); }
    4%   { opacity: 1; transform: translateX(0); }
    16%  { opacity: 1; transform: translateX(0); }
    20%  { opacity: 0; transform: translateX(-40px); }
    100% { opacity: 0; }
}

/* Cada slide começa em um momento diferente */
.faq-slide:nth-child(1) { animation-delay: 0s; }
.faq-slide:nth-child(2) { animation-delay: 5s; }
.faq-slide:nth-child(3) { animation-delay: 10s; }
.faq-slide:nth-child(4) { animation-delay: 15s; }
.faq-slide:nth-child(5) { animation-delay: 20s; }

.faq-slide {
    visibility: hidden;  
}


@keyframes faqFade {
    0%   { opacity: 0; transform: translateX(40px); visibility: hidden; }
    4%   { opacity: 1; transform: translateX(0); visibility: visible; }
    16%  { opacity: 1; transform: translateX(0); visibility: visible; }
    20%  { opacity: 0; transform: translateX(-40px); visibility: hidden; }
    100% { opacity: 0; visibility: hidden; }
}

/* Estilo interno */
.faq-slide h3 {
    color: #23238E;
    font-size: 22px;
    margin-bottom: 10px;
    font-weight: 700;
}

.faq-slide p {
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

/* ------------------------------------------------- */
/* RESPONSIVO */
/* ------------------------------------------------- */

@media (max-width: 768px) {

    .faq-title {
        font-size: 32px;
    }

    .faq-slider {
        height: 260px;
    }

    .faq-slide {
        padding: 18px;
    }

    .faq-slide h3 {
        font-size: 20px;
    }

    .faq-slide p {
        font-size: 15px;
    }
}



/* ------------------------------------------------- */
/* RESPONSIVIDADE */
/* ------------------------------------------------- */
@media (max-width: 768px) {

    /* Header */
    header .col-3 img {
        width: 140px;
    }

    header .col-5 {
        display: none;
    }

    header .col-4 {
        text-align: center;
    }

    header ul.nav {
        flex-wrap: wrap;
        gap: 10px !important;
    }

    /* Typing */
    .typing {
        font-size: 18px;
        width: 22ch;
    }

    /* Blocos */
    .bloco1 .col-3 {
        width: 50%;
        margin-bottom: 20px;
    }

    .h1bloco {
        font-size: 40px;
    }

    .textobloco {
        font-size: 18px;
    }

    /* Imagem */
    .posto img {
        width: 100%;
    }
}
    


/* ------------------------------------------------- */
/* ANIMAÇÕES (ORGANIZADAS) */
/* ------------------------------------------------- */

/* swing-in-top-fwd */
.swing-in-top-fwd {
    animation: swing-in-top-fwd 3s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}

@keyframes swing-in-top-fwd {
    0% {
        transform: rotateX(-100deg);
        transform-origin: top;
        opacity: 0;
    }
    100% {
        transform: rotateX(0deg);
        transform-origin: top;
        opacity: 1;
    }
}

/* slide-in-elliptic-top-fwd */
.slide-in-elliptic-top-fwd {
    animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-elliptic-top-fwd {
    0% {
        transform: translateY(-600px) rotateX(-30deg) scale(0);
        transform-origin: 50% 100%;
        opacity: 0;
    }
    100% {
        transform: translateY(0) rotateX(0) scale(1);
        transform-origin: 50% 1400px;
        opacity: 1;
    }
}

/* Scroll reveal básico */
.anim-hidden-by-scroll {
    opacity: 0;
    pointer-events: none;
}

.anim-hidden-by-scroll.show {
    opacity: 1;
    pointer-events: auto;
    transition: opacity .45s ease-out;
}
/* ------------------------------------------------- */
/* FOOTER */
/* ------------------------------------------------- */
/* --- FOOTER BASE --- */
.footer {
    background: #23238E;
    color: #fff;
    padding: 50px 0;
}

/* Títulos */
.footer-title {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: 600;
}

/* Links */
.footer-link {
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    transition: 0.3s;
}

.footer-link:hover {
    opacity: 0.8;
}

/* Lista de contatos */
.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-list li {
    margin-bottom: 18px;
}

/* Ícones redondos */
.icon-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #fff;
}

/* Cores específicas */
.instagram-bg {
    background: #E1306C;
}

.whatsapp-bg {
    background: #25D366;
}

.email-bg {
    background: #007bff;
}

/* Mapa */
.footer-map iframe {
    border-radius: 8px;
}

/* ------------------------------------------------- */
/* direitos */
/* ------------------------------------------------- */


.footer-copy {
    font-size: 14px;
    color: #ddd;
    opacity: 0.8;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* ------------------------------------------------- */
/* portfolio */
/* ------------------------------------------------- */
.portfolio-item {
    overflow: hidden;
    border-radius: 15px;
}

.portfolio-item img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    transition: 0.4s;
}

.portfolio-item:hover img {
    transform: scale(1.08);
}
.portfolioEscrita {
    font-weight: 700;
    color: #FF8C00;
}

/* ------------------------------------------------- */
/* portfolio */
/* ------------------------------------------------- */

.h1SobreNos {
    font-weight: 700;
    color:#FF8C00;
}
.pSobreNos {
    font-weight: 400;
    color:white;
    font-size: 20px;
}
.sobreNos-item1 {
    overflow: hidden;
    border-radius: 15px;
}

.sobreNos-item1 img {
    width: 75% ;
    height: 600px;
    object-fit: cover;
    transition: 0.4s;
}

.sobreNos-item1:hover img {
    transform: scale(1.08);}

.sobreNos-item2 {
    overflow: hidden;
    border-radius: 15px;
}

.sobreNos-item2 img {
    width: 100%;
    height: 50%;
    object-fit: cover;
    transition: 0.4s;
}

.sobreNos-item2:hover img {
    transform: scale(1.08);}
/* ------------------------------------------------- */
/* BOTÕES WHATSAPP FIXOS */
/* ------------------------------------------------- */
.whats-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-end;
}

.whats-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    min-width: 160px;
}

.whats-btn img {
    width: 24px;
    height: 24px;
}

.whats-vendas {
    background-color: #25D366;
    color: white;
}

.whats-anuncio {
    background-color: #FF8C00;
    color: white;
}

.whats-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.whats-btn:active {
    transform: translateY(-1px);
}

/* Para dispositivos móveis */
@media (max-width: 768px) {
    .whats-container {
        bottom: 20px;
        right: 20px;
    }
    
    .whats-btn {
        padding: 10px 20px;
        font-size: 14px;
        min-width: 140px;
    }
    
    .whats-btn img {
        width: 20px;
        height: 20px;
    }
}

/* Esconde o texto em telas muito pequenas */
@media (max-width: 480px) {
    .whats-btn span {
        display: none;
    }
    
    .whats-btn {
        min-width: auto;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        justify-content: center;
    }
    
    .whats-btn img {
        width: 24px;
        height: 24px;
        margin: 0;
    }
    
    
}
/* ===== TECH FUTURISTA ===== */
.section-triled {
    background: linear-gradient(135deg, #0B1C2D, #1A0F3C);
}

/* Título */
.section-triled h2 {
    color: #F5F7FA;
}

/* Subtítulo */
.section-triled p.text-muted {
    color: #B8C1CC !important;
}

/* Cards */
.section-triled .card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    transition: all 0.35s ease;
}

/* Texto */
.section-triled .card h5 {
    color: #00E5FF;
}

.section-triled .card p {
    color: #E0E6ED;
}

/* Hover futurista */
.section-triled .card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 229, 255, 0.25);
    border-color: #00E5FF;
}