/* ===========================

    RESET E BASE (MANTIDO)

    =========================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

html,body { height: 100%; }

body{

    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;

    background: #f3f6f9;

    color: #0f172a;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

    line-height: 1.6;

    overflow-x: hidden;

}



/* Segurança: evita que elementos extrapolem a largura */

img, iframe, .slide img {

    max-width: 100%;

    height: auto;

    display: block;

}





/* ================================

    HEADER (MANTIDO)

================================ */

header {

    background: black;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 6px 18px;

    height: auto;

    min-height: 50px;

    margin: 0;

    flex-wrap: nowrap;

}



.navbar a {

    position: relative;

    padding: 12px 20px;

    margin-left: 20px;

    color: #fff;

    text-decoration: none;

    border-radius: 6px;

    display: inline-block;

    overflow: visible;

}



/* ====== 4 lados da borda ====== */

.navbar a::before,

.navbar a::after,

.navbar a span::before,

.navbar a span::after {

    content: "";

    position: absolute;

    background: #fff;

    transition: 0.3s linear;

}



.navbar a > span {

    position: relative;

    z-index: 2;

}



/* Lado superior */

.navbar a::before {

    height: 2px;

    width: 0%;

    top: 0;

    left: 0;

}



/* Lado direito */

.navbar a::after {

    width: 2px;

    height: 0%;

    top: 0;

    right: 0;

}



/* Lado inferior */

.navbar a span::before {

    height: 2px;

    width: 0%;

    bottom: 0;

    right: 0;

}



/* Lado esquerdo */

.navbar a span::after {

    width: 2px;

    height: 0%;

    bottom: 0;

    left: 0;

}



/* ====== Animação ====== */

.navbar a:hover::before,

.ativo::before {

    width: 100%;

}



.navbar a:hover::after,

.ativo::after {

    height: 100%;

    transition-delay: 0.1s;

}



.navbar a:hover span::before,

.ativo span::before {

    width: 100%;

    transition-delay: 0.2s;

}



.navbar a:hover span::after,

.ativo span::after {

    height: 100%;

    transition-delay: 0.3s;

}





/* ================================

    MOBILE MENU (MANTIDO)

================================ */



/* Botão Mobile (invisível no desktop) */

.mobile-btn {

    display: none;

    cursor: pointer;

    z-index: 1103;

    background: none;

    border: none;

    color: white;

    font-size: 28px;

    padding: 5px;

}



/* Trava o scroll do body quando o menu está aberto */

body.menu-open {

    overflow: hidden;

}



/* ===========================

    CONTAINER PRINCIPAL (MANTIDO)

    =========================== */

.container-timeline{

    max-width: 1100px;

    margin: 48px auto;

    padding: 28px;

    background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.95));

    border-radius: 14px;

    box-shadow: 0 10px 30px rgba(16,24,40,0.06);

}





/* ============================

    SEÇÃO SOBRE NÓS – DESIGN PROFISSIONAL (AJUSTADO PARA CENTRALIZAÇÃO)

================================ */



.sobre-nos-container {

    max-width: 1100px;

    margin: 60px auto;

    padding: 40px;

    background: #ffffff;

    border-radius: 18px;

    border: 1px solid #e2e8f0;

    box-shadow: 0 10px 40px rgba(0,0,0,0.08);

    /* Animação */

    opacity: 0;

    transform: translateY(40px);

    animation: fadeInSobre 0.9s forwards ease-out;

}



@keyframes fadeInSobre {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* ⬅️ NOVO: Centraliza o bloco de conteúdo ➡️ */

.sobre-nos-content {

    /* Limita a largura do conteúdo para evitar que o texto fique muito largo */

    max-width: 800px;

    /* Centraliza o bloco de conteúdo horizontalmente */

    margin: 0 auto;

}





.sobre-nos-content h1 {

    font-size: 2.4rem;

    color: #0ea5e9;

    font-weight: 800;

    margin-bottom: 25px;

    text-align: center;

    text-transform: uppercase;

    letter-spacing: 1px;

}



/* ⬅️ NOVO: Ajusta e Centraliza o H2 ➡️ */

.sobre-nos-content h2 {

    margin-top: 35px;

    font-size: 1.8rem;

    color: #0369a1;

    font-weight: 700;

    /* Remove a borda lateral e o padding para centralizar */

    border-left: none;

    padding-left: 0;

    /* Centraliza o título */

    text-align: center;

}



/* ⬅️ NOVO: Centraliza o texto dos parágrafos ➡️ */

.sobre-nos-content p {

    font-size: 1.15rem;

    line-height: 1.75;

    margin: 16px 0;

    color: #2d2d2d;

    text-align: center;

}



/* LISTA ESTILIZADA (UL) */

.sobre-lista {

    margin-top: 20px;

    margin-bottom: 20px;

    padding-left: 0;

    /* Faz a lista se comportar como um bloco centralizado */

    margin-left: auto;

    margin-right: auto;

    display: block;

    width: fit-content; /* Ocupa apenas o espaço necessário */

}



/* ⬅️ NOVO: Centraliza cada item da lista (LI) ➡️ */

.sobre-lista li {

    margin: 12px 0;

    font-size: 1.14rem;

    color: #0ea5e9;

    font-weight: 600;

    display: flex;

    align-items: center;

    gap: 8px;

    list-style: none;

    /* Como o UL já está centralizado, o LI herdará a centralização */

    /* Estas linhas garantem o alinhamento central em navegadores que possam precisar, mas o width: fit-content no UL já resolve a centralização do bloco */

    width: fit-content;

    margin-left: auto;

    margin-right: auto;

}



.sobre-lista li::before {

    content: "✔";

    font-size: 1.2rem;

    color: #0ea5e9;

}



/* FRASE FINAL (MANTIDO E JÁ CENTRALIZADO) */

.frase-final {

    font-size: 1.25rem;

    text-align: center;

    margin-top: 35px;

    font-weight: 600;

    color: #1e293b;

}



/* ASSINATURA (MANTIDO E JÁ CENTRALIZADO) */

.assinatura {

    text-align: center;

    margin-top: 10px;

    font-size: 1.2rem;

    color: #0284c7;

    font-weight: 700;

}





/* ===========================

    TITULOS E INTRODUÇÃO (MANTIDO)

    =========================== */

.titulo-timeline{

    font-size: 2.1rem;

    text-align: center;

    color: #0369a1;

    font-weight: 800;

    margin-bottom: 8px;

}



.introducao-timeline{

    max-width: 840px;

    margin: 8px auto 32px;

    text-align: center;

    color: #556070;

    font-size: 1.03rem;

    line-height: 1.5;

}



/* ===========================

    IMAGEM FULL WIDTH (MANTIDO)

    =========================== */

.imagem-full-width{ margin-bottom: 36px; }

.imagem-full-width img{

    width: 100%;

    height: auto;

    border-radius: 12px;

    display: block;

    box-shadow: 0 12px 30px rgba(2,6,23,0.06);

    transition: transform .35s ease;

}

.imagem-full-width img:hover{ transform: translateY(-4px) scale(1.01); }



/* ===========================

    TIMELINE (MANTIDO)

    =========================== */

.timeline-reforma{

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 32px;

    padding-left: 28px;

    border-left: 4px solid #06b6d4; /* linha vertical */

}



/* Cada passo */

.timeline-passo{

    display: flex;

    gap: 18px;

    align-items: flex-start;

    position: relative;

    padding-left: 6px;

    transition: all .6s cubic-bezier(.2,.9,.2,1);

    opacity: 0;

    transform: translateX(-18px);

}



/* marcador redondo */

.passo-numero{

    min-width: 48px;

    min-height: 48px;

    border-radius: 50%;

    background: linear-gradient(180deg,#06b6d4,#0284c7);

    color: #fff;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-weight: 800;

    font-size: 1.15rem;

    box-shadow: 0 6px 18px rgba(2,132,199,0.22);

    flex-shrink: 0;

}



/* conteúdo do passo */

.passo-conteudo{ max-width: calc(100% - 80px); }

.passo-conteudo h3{

    font-size: 1.18rem;

    color: #0f172a;

    margin-bottom: 6px;

    font-weight: 700;

}

.passo-conteudo p{

    color: #475569;

    font-size: 0.99rem;

    line-height: 1.5;

}



/* classe adicionada via JS para animar ao rolar */

.timeline-passo.show{

    opacity: 1;

    transform: translateX(0);

}



/* Container do botão de WhatsApp no meio do site */

.whatsapp-container {

    display: flex;

    justify-content: center;

    /* AJUSTE RESPONSIVO: Ponto inicial reduzido */

    margin-top: 30px;

}



/* ================================

    WHATSAPP BOTÃO (MANTIDO)

================================ */

.whatsapp-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    background: #0ea5e9;

    color: #fff !important;

    padding: 14px 28px;

    border-radius: 12px;

    text-decoration: none;

    font-size: 1.15rem;

    font-weight: 700;

    box-shadow: 0 4px 18px rgba(37, 211, 102, 0.5);

    transition: all 0.3s ease;

    cursor: pointer;

}



/* Ícone */

.whatsapp-btn .whatsapp-icon {

    width: 30px;

    height: 30px;

    fill: #fff;

    transition: transform 0.3s ease;

}



/* HOVER */

.whatsapp-btn:hover {

    background: #02c712;

    transform: translateY(-4px) scale(1.02);

    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.7);

}



/* HOVER NO ÍCONE */

.whatsapp-btn:hover .whatsapp-icon {

    transform: scale(1.25) rotate(3deg);

}



/* CLICK */

.whatsapp-btn:active {

    transform: scale(0.97);

}



.botao-cta-timeline:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px rgba(2,132,199,0.16); }



/* ================================

    RODAPÉ (AJUSTES DE CENTRALIZAÇÃO DO BRAND APLICADOS)

=================================*/



.site-footer {

    background: linear-gradient(180deg, #0f0f0f, #000);

    color: #fff;

    padding: 45px 39px 2px;

    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;

}



.footer-container {

    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns: 1.2fr 1fr 1fr 1fr;

    gap: 30px;

}



/* ⬅️ NOVO: Centraliza o bloco da marca (texto e imagem) ➡️ */

.footer-brand {

    text-align: center;

}

.footer-brand img {

    display: block;

    margin-left: auto;

    margin-right: auto;

}





/* TITULOS */

.footer-links h3, .footer-contact h3, .footer-news h3 {

    font-size: 16px;

    margin-bottom: 12px;

    color: #fff;

}



/* LINKS */

.footer-links ul {

    list-style: none;

    padding: 0;

}

.footer-links a {

    color: rgba(255,255,255,0.55);

    text-decoration: none;

    margin: 8px 0;

    display: block;

    transition: 0.15s;

}

.footer-links a:hover {

    color: #4da3ff;

}



/* CONTATO */

.footer-contact address {

    font-style: normal;

    color: rgba(255,255,255,0.55);

}



.footer-contact a {

    font-weight: 600;

    color: rgba(255,255,255,0.65);

    text-decoration: none;

    margin: 8px 0;

    display: inline-block;

    transition: 0.3s;

}

.footer-contact a:hover {

    color: #ffffff;

    text-shadow: 0 0 6px rgb(77, 163, 255);

}



/* NEWSLETTER */

.footer-news p {

    color: rgba(255,255,255,0.55);

    font-size: 15px;

    margin-bottom: 15px;

}



.footer-news input[type="email"] {

    width: 100%;

    padding: 10px;

    border-radius: 6px;

    border: 1px solid rgba(255,255,255,0.2);

    background: rgba(255,255,255,0.08);

    color: #fff;

    margin-bottom: 10px;

}



.footer-news input[type="email"]:focus {

    outline: none;

    border-color: #4da3ff;

    background: rgba(255,255,255,0.1);

}



.footer-news button {

    width: 100%;

    padding: 10px;

    border-radius: 6px;

    border: none;

    background: #0284c7;

    color: #fff;

    font-weight: 600;

    cursor: pointer;

    transition: 0.2s;

}

.footer-news button:hover {

    background: #0ea5e9;

}



/* BRAND */

.footer-brand p {

    color: rgba(255,255,255,0.55);

    font-size: 15px;

}



/* SOCIAL ICONS */

.socials {

    display: flex;

    gap: 10px;

    margin-top: 12px;

    flex-wrap: wrap;

    /* Alinha os ícones ao centro quando o .footer-brand estiver centralizado */

    justify-content: center;

}



.socials a {

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(255,255,255,0.04);

    color: #fff;

    border-radius: 8px;

    transition: 0.2s;

}



.socials a:hover {

    background: #4da3ff;

    color: #fff;

    transform: translateY(-2px);

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

}



/* FIXES PARA ÍCONES DE REDES SOCIAIS */

.socials a i {

    font-size: 18px;

    line-height: 0;

}



/* COPYRIGHT */

.footer-bottom {

    max-width: 1200px;

    margin: 22px auto 0;

    padding-top: 12px;

    border-top: 1px solid rgba(255,255,255,0.42);

    text-align: center;

}



.footer-bottom small {

    color: rgba(255,255,255,0.55);

    font-size: 14px;

}



/* Botão "voltar ao topo" */

.back-to-top {

    font-size: 22px;

    color: #4da3ff;

    animation: pulse 1.5s infinite;

}

.back-to-top:hover {

    color: white;

}



@keyframes pulse {

    0% { transform: translateY(0); }

    50% { transform: translateY(-5px); }

    100% { transform: translateY(0); }

}





/* ============================

    MEDIA QUERIES - TELAS GRANDES / TABLETS (Até 1024px)

================================ */

@media (max-width: 1024px) {

    .container-timeline {

        /* Reduz a margem em telas maiores */

        margin: 35px auto;

        padding: 24px;

    }

    .titulo-timeline {

        font-size: 1.9rem;

    }

    .introducao-timeline {

        font-size: 1rem;

    }



    .timeline-passo {

        gap: 14px;

    }

    .passo-numero {

        min-width: 42px;

        min-height: 42px;

        font-size: 1.1rem;

    }

    .passo-conteudo h3 {

        font-size: 1.1rem;

    }

    .passo-conteudo p {

        font-size: 0.95rem;

    }

}





/* ============================

    MEDIA QUERIES - TABLET / MOBILE GRANDE (Até 768px)

================================ */

@media (max-width: 768px) {

   

    /* HEADER E MOBILE MENU */

    header {

        min-height: 60px;

        padding: 10px 20px;

    }

    /* Mostra o botão mobile e esconde a navegação padrão */

    .navbar {

        display: none;

        position: fixed;

        top: 0;

        left: -280px;

        width: 280px;

        height: 100vh;

        background: black;

        padding: 80px 20px;

        box-shadow: 6px 0 24px rgba(0,0,0,0.5);

        flex-direction: column;

        gap: 18px;

        transition: left 0.35s cubic-bezier(.2,.9,.2,1);

        z-index: 1102;

        overflow-y: auto;

    }

    .navbar.active {

        left: 0;

        display: flex;

    }

    .mobile-btn {

        display: block;

    }

   

    /* Ajusta os links internos no menu mobile */

    .navbar a {

        margin-left: 0;

        padding: 12px 10px;

        text-align: left;

        width: 100%;

        /* Desativa as bordas animadas no mobile */

        border: none;

    }

   

    /* Remove as pseudo-bordas dos links no menu mobile */

    .navbar a::before,

    .navbar a::after,

    .navbar a span::before,

    .navbar a span::after {

        content: none;

        background: none;

    }



    .navbar a:hover {

        background-color: rgba(255, 255, 255, 0.1);

    }





    /* CONTAINER PRINCIPAL E SOBRE NÓS */

    .container-timeline {

        margin: 20px 15px;

        padding: 20px;

    }



    /* ⬅️ NOVO: Centraliza o bloco de conteúdo ➡️ */

.sobre-nos-content {

    max-width: 800px;

    margin: 0 auto;

}





.sobre-nos-content h1 {

    /* ... (mantido: já tem text-align: center) ... */

}



/* ⬅️ CORREÇÃO PRINCIPAL: Garante a centralização do H2 ➡️ */

.sobre-nos-content h2 {

    margin-top: 35px;

    font-size: 1.8rem;

    color: #0369a1;

    font-weight: 700;

    /* Remove a borda lateral e o padding */

    border-left: none;

    padding-left: 0;

    /* Garante a centralização */

    text-align: center;

}



/* ⬅️ CORREÇÃO PRINCIPAL: Garante a centralização dos parágrafos ➡️ */

.sobre-nos-content p {

    font-size: 1.15rem;

    line-height: 1.75;

    margin: 16px 0;

    color: #2d2d2d;

    /* Garante a centralização */

    text-align: center;

}

    .sobre-lista {
    list-style: none;       /* remove os marcadores padrão */
    padding: 0;
    margin: 0 auto;         /* centraliza a lista inteira */
    max-width: 500px;       /* mantém uma largura agradável */
}

.sobre-lista li {
    font-size: 1.0rem;
    margin: 10px 0;
    
    display: flex;
    align-items: flex-start; /* alinha verticalmente */
    gap: 10px;               /* espaço entre o ícone e o texto */

    color: #000000;          /* mesma cor da imagem */
}

/* Ícone ✔ estilizado e alinhado */
.sobre-lista li::before {
    content: "✔";
    font-size: 1.2rem;
    color: #00a8e8;          /* cor do check */
    margin-top: 2px;         /* ajusta a altura do ícone */
}


    .frase-final,

    .assinatura {

        font-size: 1.1rem;

    }



    /* TIMELINE */

    .timeline-reforma {

        padding-left: 20px;

        border-left: 3px solid #06b6d4;

    }



    /* ⬇️ AJUSTE RESPONSIVO DO WHATSAPP (768px) ⬇️ */

    .whatsapp-container {

        margin-top: 25px;

    }

    .whatsapp-btn {

        /* Ajuste corrigido: Padding mais razoável */

        padding: 12px 24px;

        font-size: 1.1rem;

    }

    .whatsapp-btn .whatsapp-icon {

        width: 25px;

        height: 25px;

    }



    /* CONTEÚDOS LADO A LADO: EMPILHAR */

    .caixas-lado-a-lado, .conteudo {

        flex-direction: column !important;

        margin: 12px !important;

        gap: 18px !important;

    }

    .caixa1, .caixa2 {

        max-width: 100% !important;

        padding: 18px !important;

    }



    /* Container dinâmico (imagem + texto) */

    .container-dinamico {

        flex-direction: column !important;

        align-items: center !important;

        text-align: center !important;

        padding: 16px !important;

    }

    .imagem-dinamica {

        width: 100% !important;

        max-width: 480px !important;

        height: auto !important;

        margin: 0 auto 14px !important;

    }

    .texto-dinamico {

        width: 100% !important;

        text-align: center !important;

    }

    .caixa2 .mensagem-imagem {

        flex: 0 0 280px;

        height: 200px;

        max-width: 350px;

    }

    .caixa2 .mensagem-conteudo h3 {

        font-size: 1.6rem;

    }

    .caixa2 .mensagem-conteudo p {

        font-size: 1.1rem;

    }



    /* Carrossel e Texto Fixo (Responsivo) */

    .carrossel {

        height: 250px !important;

    }

    .slide, .slide img {

        height: 250px !important;

    }

    .texto-fixo {

        font-size: 1.2rem !important;

        width: 90% !important;

        padding: 8px 12px !important;

    }



}



/* ============================

    MEDIA QUERIES - RODAPÉ TABLET (Até 680px)

================================ */

@media (max-width: 680px) {

    .footer-container {

        grid-template-columns: 1fr 1fr !important;

        gap: 18px !important;

    }

}





/* ============================

    MEDIA QUERIES - MOBILE PEQUENO (Até 480px)

================================ */

@media (max-width: 480px) {

    /* FOOTER */

    .footer-container {

        grid-template-columns: 1fr !important;

        text-align: center !important;

    }



    /* TIMELINE */

    .timeline-reforma {

        padding-left: 18px;

    }



    .timeline-passo {

        gap: 10px;

        align-items: center; /* Centraliza verticalmente o número e o conteúdo */

    }



    .passo-numero {

        min-width: 36px;

        min-height: 36px;

        font-size: 1rem;

    }

   

    .passo-conteudo{ max-width: calc(100% - 60px); }

    .passo-conteudo h3{

        font-size: 1rem;

    }

    .passo-conteudo p{

        font-size: 0.9rem;

    }



    /* ⬇️ AJUSTE RESPONSIVO DO WHATSAPP (480px) ⬇️ */

    .whatsapp-container {

        margin-top: 20px;

    }

    .whatsapp-btn {

        padding: 10px 20px;

        font-size: 1rem;

        gap: 8px;

    }

    .whatsapp-btn .whatsapp-icon {

        width: 20px;

        height: 20px;

    }

   

    /* CARROSSEL */

    .carrossel {

        height: 180px !important;

    }

    .slide, .slide img {

        height: 180px !important;

    }

    .texto-fixo {

        font-size: 0.95rem !important;

        padding: 6px !important;

        width: calc(100% - 28px) !important;

    }

}