:root {
            /* PALETA DE ALTA CONVERSÃO */
            --trust-blue: #004aad;     /* Azul Forte - Confiança */
            --action-orange: #ff9900;  /* Laranja - Ação/Dinheiro */
            --clean-white: #ffffff;
            --eco-green: #2ecc71;      /* Verde - Segurança */
            --dark-text: #2d3436;
            --light-bg: #f8f9fa;
        }

        body { font-family: 'Open Sans', sans-serif; color: var(--dark-text); background-color: #f4f7f6; }
        h1, h2, h3, h4, h5, .btn { font-family: 'Montserrat', sans-serif; }

        /* --- Navbar --- */
        .navbar { background: var(--clean-white); box-shadow: 0 2px 10px rgba(0,0,0,0.05); padding: 15px 0; }
        .navbar-brand { color: var(--trust-blue) !important; font-weight: 800; text-transform: uppercase; font-size: 1.5rem; letter-spacing: -0.5px; }
        
        .header-btn {
            font-weight: 700; font-size: 0.9rem; text-decoration: none; padding: 10px 20px; border-radius: 50px; transition: 0.3s; margin-left: 10px;
        }
        .btn-header-call { border: 2px solid var(--trust-blue); color: var(--trust-blue); }
        .btn-header-call:hover { background: var(--trust-blue); color: white; }
        
        .btn-header-sms {background: #1b9505;color: white;border: 2px solid #1b9505;}
        .btn-header-sms:hover {background: #1b9505;border-color: #048125;transform: translateY(-2px);}

        /* --- Hero Section --- */
        .hero-section {
            background: linear-gradient(135deg, rgba(0, 74, 173, 0.9), rgba(0, 30, 80, 0.95)), url('sofa-bg.jpg');
            background-size: cover; background-position: center;
            padding: 80px 0 100px; color: white;
        }

        /* Formulário Magneto */
        .lead-magnet {
            background: var(--clean-white);
            border-radius: 8px;
            padding: 25px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
            border-top: 6px solid #1b9505;
        }
        .lead-magnet h3 { color: var(--trust-blue); font-weight: 800; text-align: center; margin-bottom: 5px; }
        
        .form-control, .form-select { background: #f8f9fa; border: 1px solid #ced4da; padding: 12px; margin-bottom: 12px; }
        .form-control:focus { border-color: var(--trust-blue); box-shadow: 0 0 0 0.2rem rgba(0,74,173,0.25); }

        .btn-cta {
            background: #1b9505;
            color: white;
            width: 100%;
            padding: 16px;
            font-size: 1.2rem;
            font-weight: 800;
            text-transform: uppercase;
            border: none;
            border-radius: 5px;
            box-shadow: 0 4px 0 #048125;
            transition: all 0.2s;
            margin-top: 10px;
        }
        .btn-cta:hover {background: #1b9505;transform: translateY(2px);box-shadow: 0 2px 0 #048125;color: white;}

        /* --- Services Section --- */
        .service-card { border: none; height: 100%; transition: 0.3s; background: white; padding: 30px 20px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
        .service-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
        .service-icon { color: var(--trust-blue); font-size: 3rem; margin-bottom: 20px; }

        /* --- Before & After --- */
        .ba-container { position: relative; margin-bottom: 30px; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
        .ba-badge { position: absolute; top: 15px; left: 15px; background: rgba(0,0,0,0.7); color: white; padding: 5px 15px; font-weight: bold; border-radius: 4px; font-size: 0.8rem; }
        .ba-badge.after { left: auto; right: 15px; background: var(--eco-green); }

        /* --- Reviews (Screenshots) --- */
        .review-img {
            border-radius: 5px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: 0.3s;
            border: 1px solid #eee;
            width: 100%;       /* Ocupa a largura da coluna */
            height: auto;      /* Altura automática */
            /* min-height: 300px; */ /* Reserva um espaço mínimo para não pular layout */
            object-fit: contain; /* Garante que o print não fique cortado */
            background-color: #f0f0f0; /* Um fundo cinza claro enquanto carrega */
        }
        .review-img:hover { transform: scale(1.02); }

        /* --- Footer --- */
        footer {background: #103a77;color: #f6f6f6;padding: 60px 0 20px;}
        footer h5 { color: white; margin-bottom: 20px; font-weight: 700; }
        footer a {color: #fdfdfd;text-decoration: none;transition: 0.3s;}
        footer a:hover { color: var(--action-orange); }
        footer ul li { margin-bottom: 10px; }

        /* --- Mobile Sticky Footer --- */
        .mobile-sticky-footer {
            position: fixed; bottom: 0; left: 0; width: 100%;
            background: white; padding: 10px; box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            z-index: 9999; display: flex; gap: 10px;
        }
        .btn-mobile {
            flex: 1; padding: 12px; text-align: center; font-weight: 700; border-radius: 5px; text-decoration: none; color: white; display: flex; align-items: center; justify-content: center;
        }
        .btn-call-mobile { background: var(--trust-blue); }
        .btn-sms-mobile {background: #1b9505;}
        
        @media (min-width: 768px) { .mobile-sticky-footer { display: none; } }
        @media (max-width: 767px) { .hero-section { padding: 40px 0 100px; text-align: center; } .header-btn1 { display: none; } .logo { align-items: center; max-width: 150px !important} .logo-center { display: flex; align-items: center; justify-content: center !important;}
    
    }
        .logo {
            width: 100%;
            max-width: 200px;
        }
        
        /* Botão WhatsApp Flutuante Discreto */
.whatsapp-float {
    position: fixed;
    width: 55px;
    height: 55px;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.whatsapp-float:hover {
    background-color: #128C7E;
    color: #FFF;
    transform: scale(1.1); /* Efeito de zoom leve ao passar o mouse */
}

.whatsapp-icon {
    margin-top: 2px; /* Ajuste fino para centralizar o ícone */
}

/* AJUSTE PARA MOBILE (Para não cobrir a barra de Call/SMS) */
@media (max-width: 767px) {
    .whatsapp-float {
        width: 45px;
        height: 45px;
        font-size: 24px;
        bottom: 90px; /* Sobe o botão para não ficar em cima da barra fixa */
        right: 15px;
    }
}
        
/* --- CSS THUMBTACK REVIEWS --- */

/* Grid Estilo Masonry */
.reviews-masonry {
    column-count: 4; /* 4 colunas em telas grandes como na foto */
    column-gap: 1.25rem;
}

@media (max-width: 1200px) { .reviews-masonry { column-count: 3; } }
@media (max-width: 992px) { .reviews-masonry { column-count: 2; } }
@media (max-width: 768px) { 
    .reviews-masonry { column-count: 1; }
    .hero-section {
        background: linear-gradient(135deg, rgba(0, 74, 173, 0.9), rgba(0, 30, 80, 0.95)) !important;
    }
 }

/* O Cartão (Cinza claro, bordas bem arredondadas, sem sombra) */
.tt-card {
    background-color: #f6f7f8; /* Cinza claro idêntico ao app */
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    break-inside: avoid;
    border: none;
}

/* Avatar do Usuário (Nesta imagem eles usam um ícone de bonequinho opaco) */
.tt-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
    overflow: hidden;
}

/* Nome e Data */
.tt-name {
    font-weight: 700;
    font-size: 1rem;
    color: #000;
    line-height: 1.2;
}
.tt-date {
    font-size: 0.85rem;
    color: #717171;
    margin-top: 2px;
}

/* O Texto da Avaliação */
.tt-text {
    font-size: 0.95rem;
    color: #222;
    line-height: 1.5;
    margin-bottom: 0;
    font-weight: 400;
}

/* Botão Load More (Pílula Cinza) */
.tt-btn-load {
    background-color: #f3f4f6;
    color: #000;
    border: none;
    border-radius: 50px;
    padding: 10px 24px;
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s;
}
.tt-btn-load:hover {
    background-color: #e5e7eb;
}

.infos-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.vid {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}