/* ======================================================
   1. RESET E CONFIGURAÇÕES GERAIS
   ====================================================== */
html { scroll-behavior: smooth; }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Helvetica', Arial, sans-serif; }
body { background-color: #f5f5f5; color: #333; line-height: 1.6; }

/* ======================================================
   2. CABEÇALHO (HEADER)
   ====================================================== */
header {
    background-color: #162e48;
    height: 110px; width: 100%;
    display: flex; justify-content: center; align-items: center;
    position: sticky; top: 0; z-index: 1000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); padding: 0 20px;
}

.header-container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Estilo do Botão de Orçamento (WhatsApp) */
.botao-header-whats {
    background-color: #f39c12;
    color: #162e48 !important;
    text-shadow: 2px 2px 4px #25D366 (0, 0, 0);
    padding: 14px 10px;
    border-radius: 15px;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.rem;
    text-transform: uppercase;
    transition: all 0.3s ease;
    
}

.botao-header-whats:hover {
    background-color: #128c7e;
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

/* Ajuste da Logo para não esticar */
.logo-img {
    max-height: 100px;
    width: auto;
}
.header-container { width: 100%; max-width: 1100px; display: flex; justify-content: space-between; align-items: center; }
.logo-img { height: 95px; width: auto; display: block; image-rendering: -webkit-optimize-contrast; }
nav a { text-decoration: none; color: #ffffff; margin-left: 25px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; transition: 0.3s; }
nav a:hover { color: #f39c12; }

/* ======================================================
   3. BANNER PRINCIPAL (HERO)
   ====================================================== */
.hero-container { max-width: 1100px; margin: 50px auto; display: flex; height: 480px; border-radius: 10px; overflow: hidden; box-shadow: 0 25px 50px rgba(0,0,0,0.1); background: white; }

.hero-text { 
    width: 40%; 
    background-color: #f39c12; 
    color: white; 
    padding: 30px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}

/* 1. TEXTO GRANDE */
.hero-text h1 { 
    font-size: 2.9rem; 
    line-height: 1.5; 
    margin-bottom: 3px; 
    font-weight: 750; 
    /* AJUSTE: Sombra preta com 50% de transparência. Fica elegante e dá contraste sem pesar. */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    margin-top: 20px; 
}

/* 2. TEXTO DO MEIO */
.hero-text p { 
    font-size: 1.3rem; 
    margin-bottom: 25px; 
    /* AJUSTE: Um chumbo bem escuro (#1a1a1a) descansa mais a vista que o preto puro */
    color: #1a1a1a;
    line-height: 1.5; /* Adicionado para dar um respiro entre as linhas */
    /* AJUSTE PRINCIPAL: Sombra branca removida. É isso que estava borrando o texto! */
    text-shadow: none; 
    margin-top: 20px; 
}

/* 3. TEXTO PEQUENININHO */
.hero-badge { 
    padding: 0; 
    background: none; 
    font-weight: bold; 
    font-size: 0.9rem; 
    text-align: center; 
    display: block; 
    width: 100%; 
    margin-top: +50px; 
    letter-spacing: 1.5px; 
    text-transform: uppercase; 
    color: #1a1a1a;
    /* AJUSTE: Sombra removida para garantir foco e nitidez total */
    text-shadow: none; 
}

.hero-carrossel { width: 60%; position: relative; overflow: hidden; background: #222; }


/* ANIMAÇÃO DO CARROSSEL */
.slides-container { display: flex; width: 600%; height: 100%; animation: carrossel-animado 24s infinite; }
.slide { width: 100%; height: 100%; position: relative;}
.slide img { width: 100%; height: 100%; object-fit: cover; }
.legenda { position: absolute; bottom: 20px; left: 20px; background: rgba(0,0,0,0.6); color: white; padding: 5px 15px; border-radius: 5px; font-size: 0.8rem; }
@keyframes carrossel-animado {
    0%, 15% { transform: translateX(0); }
    16.6%, 31.6% { transform: translateX(-16.66%); }
    33.3%, 48.3% { transform: translateX(-33.33%); }
    50%, 65% { transform: translateX(-50%); }
    66.6%, 81.6% { transform: translateX(-66.66%); }
    83.3%, 98.3% { transform: translateX(-83.33%); }
}

/* ======================================================
   4. SESSÃO DE CHAMADA URGENTE
   ====================================================== */
.chamada-urgente { background: radial-gradient(circle, rgba(243, 156, 18, 0.08) 0%, #ffffff 80%); padding: 40px 20px; text-align: center; width: 100%; }
.container-impacto { max-width: 1100px; margin: 0 auto; }
.bloco-problemas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px 20px; margin-bottom: 20px; }
.item-problema { font-family: 'Verdana', Geneva, sans-serif; font-size: 1.25rem; color: #162e48; font-weight: 600; font-style: italic; opacity: 0; transform: translateY(10px); animation: entradaLista 0.8s ease-out forwards; }
.p1 { animation-delay: 0.5s; } .p2 { animation-delay: 1.0s; } .p3 { animation-delay: 1.5s; } .p4 { animation-delay: 2.0s; } .p5 { animation-delay: 2.5s; } .p6 { animation-delay: 3.0s; }
.solucao { grid-column: 1 / -1; font-family: 'Arial Black', sans-serif; font-size: 3rem; color: #333; text-transform: uppercase; opacity: 0; animation: entradaMestre 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 4s forwards, respiroVida 4s ease-in-out 6s infinite; }
.solucao span { color: #f39c12; }
@keyframes entradaLista { to { opacity: 0.8; transform: translateY(0); } }
@keyframes entradaMestre { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes respiroVida { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); text-shadow: 0 0 15px rgba(243, 156, 18, 0.2); } }

/* FAIXA DOURADA SEPARADORA - VOLTANDO AO NORMAL NO PC */
.faixa-dourada-separadora { 
    display: block !important; 
    width: 100%; 
    height: 4px; 
    background: linear-gradient(to right, #f39c12, #e67e22, #f39c12); 
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); 
    position: relative; 
    z-index: 10 !important; 
    margin-top: 0px; 
    margin-bottom: 0px; 
}

/* ======================================================
   5. SEÇÃO DE SERVIÇOS - MASTER (PC + MOBILE)
   ====================================================== */

/* --- ESTILO GERAL (Título e Barrinha) --- */
.secao-servicos-limpa {
    padding: 40px 20px 80px;
    background-color: #f5f5f5; 
    width: 100%;
}

.divisor-sessao {
    text-align: center;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.divisor-sessao h2 {
    color: #162e48 !important;
    font-size: 1.8rem !important;
    font-weight: 700 !important; /* Peso ajustado: nem gordo, nem magro */
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
}

/* Ajuste da Linha Laranja (Conforme seu HTML) */
.linha-tema {
    width: 60px !important;
    height: 4px !important;
    background-color: #f39c12 !important;
    border-radius: 50px !important;
    margin: 0 auto !important;
}

/* --- REGRAS PARA COMPUTADOR E TABLET (Desktop First) --- */
.grade-servicos-limpa { 
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 40px 30px !important; 
    max-width: 1200px; 
    margin: 50px auto 0; 
}

.item-servico { 
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 20px; 
    text-align: left;
    /* Aqui está o segredo: ele tenta 3 colunas, mas aceita diminuir */
    flex: 1 1 calc(33.333% - 40px) !important;
    min-width: 300px !important; /* Evita que o texto fique esmagado no PC */
}

.icone-solto { 
    width: 60px !important; 
    height: 60px !important;
    object-fit: contain;
    flex-shrink: 0;
}

.texto-servico h3 { 
    color: #162e48; 
    margin: 0 0 6px 0; 
    font-weight: bold; 
    font-size: 1.15rem;
}

.texto-servico p { 
    color: #555; 
    font-size: 0.95rem;
    line-height: 1.4; 
    margin: 0;
}

/* --- AJUSTE FINAL: CELULAR EM PÉ (ABAIXO DE 480PX) --- */
@media (max-width: 480px) {
    .divisor-sessao h2 {
        font-size: 1.5rem !important;
    }

    .grade-servicos-limpa {
        flex-direction: column !important;
        gap: 30px !important;
    }

    .item-servico {
        flex: 1 1 100% !important;
        min-width: 100% !important;
        padding-right: 15px !important; /* Evita vazar na direita */
    }

    .icone-solto {
        width: 45px !important;
        height: 45px !important;
        margin-right: 15px !important;
    }

    .texto-servico {
        max-width: 85% !important; /* Garante o respiro que você gostou */
    }
}

/* ======================================================
   TÍTULO DA SEÇÃO E LINHA LARANJA (DIVISOR)
   ====================================================== */
.divisor-sessao {
    text-align: center;
    margin-bottom: 50px !important; /* Espaço entre o título e a grade de serviços */
    display: flex;
    flex-direction: column;
    align-items: center; /* Garante centralização em qualquer navegador */
}

.divisor-sessao h2 {
    font-size: 2.2rem; /* No PC será esse tamanho */
    color: #162e48;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 12px !important;
    letter-spacing: 1px;
}

/* A BARRINHA LARANJA */
.linha-tema {
    width: 70px !important;    /* Largura da barrinha */
    height: 4px !important;    /* Espessura */
    background-color: #f39c12 !important; /* Laranja do tema */
    border-radius: 50px !important; /* Deixa as pontas arredondadas/suaves */
    margin: 0 auto !important;
}

/* AJUSTE PARA CELULAR (SÓ PARA O TÍTULO NÃO FICAR GIGANTE) */
@media (max-width: 480px) {
    .divisor-sessao h2 {
        font-size: 1.6rem !important;
        margin-bottom: 8px !important;
    }
    
    .divisor-sessao {
        margin-bottom: 30px !important;
    }
}

/* ======================================================
   6. PAINEL DE ATENDIMENTO (CHASSI INDUSTRIAL)
   ====================================================== */
.painel-atendimento-unico { width: 100%; padding: 30px 0; background-color: #b0b0b0; background-image: radial-gradient(circle at 50% 10%, rgba(255,255,255,0.8) 0%, transparent 70%), linear-gradient(to right, rgba(0,0,0,0.1) 0%, transparent 15%, transparent 85%, rgba(0,0,0,0.1) 100%), background-attachment: fixed !important; background-repeat: no-repeat, no-repeat, repeat; background-size: 100% 100%, 100% 100%, 400px; background-position: center top; }
.container-atendimento-unico { max-width: 1200px; margin: 0 auto; display: flex; min-height: 380px; border-radius: 15px; overflow: hidden; box-shadow: 0 15px 50px rgba(0,0,0,0.4); }

.imagem-ferramentas { width: 35%; position: relative; display: flex; align-items: flex-end; padding: 30px; overflow: hidden; }
.imagem-ferramentas img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

.overlay-texto-imagem { color: white; text-shadow: 2px 2px 10px rgba(0,0,0,0.8); position: relative; z-index: 2; }
.overlay-texto-imagem h3 { font-size: 1.2rem; border-left: 3px solid #fdfdfd; padding-left: 10px; }

/* -- AJUSTES DE CONTRASTE E SINTAXE ABAIXO -- */
.lista-condominios-laranja { width: 65%; background-color: #f39c12; padding: 40px; } /* Cor base limpa */
.lista-condominios-laranja h2 { font-size: 1.8rem; color: #162e48; font-weight: 800; text-transform: uppercase; margin-bottom: 10px; } /* Cor alterada para contraste */
.linha-detalhe { width: 50px; height: 3px; background: #162e48; margin-bottom: 25px; }
.colunas-condominios { display: block; }
.grupo-local { margin-bottom: 20px; }

/* Alterado de h4 para h3 (acompanhando o HTML) e cor alterada para contraste */
.grupo-local h3 { font-size: 0.9rem; color: #162e48; margin-bottom: 5px; letter-spacing: 1px; font-weight: bold; } 
.grupo-local p { font-size: 0.78rem; line-height: 1.4; font-weight: 400; color: rgba(0, 0, 0, 0.9); text-transform: uppercase; }
.nota-tecnica { margin-top: 15px; font-size: 0.80rem; color: rgba(0, 0, 0, 0.9); font-style: italic; opacity: 0.7; }

/* ======================================================
   7. SEÇÃO VÍDEO + FAQ (SIMETRIA E AJUSTES)
   ====================================================== */

.faq-video-section { 
    background-color: #f8fafd; 
    padding: 40px 20px; 
    width: 100%; 
}

.faq-video-container { 
    max-width: 1100px; 
    margin: 0 auto; 
    display: flex; 
    gap: 50px; 
    align-items: center; /* CIRÚRGICO: Mudado de stretch para center para não esticar o vídeo */
}

/* Lado das Perguntas */
.faq-box { 
    flex: 1.2; 
}

.faq-box h2, .video-box-clean h2 { 
    color: #162e48; 
    font-size: 1.8rem; 
    margin-bottom: 10px; 
    text-transform: uppercase; 
    font-weight: 800; 
}

.faq-box .divisor-dourado-video, .video-box-clean .divisor-dourado-video { 
    width: 50px; 
    height: 3px; 
    background: #f39c12; 
    margin: 0 0 25px 0; 
    border-radius: 2px; 
}

/* Botões das Perguntas */
.faq-pergunta { 
    width: 100%; 
    background-color: transparent; 
    color: #162e48; 
    padding: 19px 20px; 
    font-size: 1rem; 
    font-weight: bold; 
    text-align: left; 
    border: none; 
    cursor: pointer; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.faq-item { 
    margin-bottom: 10px; 
    background: white; 
    border: 1px solid #e1e8ed; 
    border-radius: 8px; 
    overflow: hidden; 
}

/* Lado do Vídeo */
.video-box-clean { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
}

/* Container do Vídeo Ajustado */
.iframe-container-clean { 
    position: relative; 
    width: 100%; 
    /* CIRÚRGICO: Tiramos o flex:1 e min-height e travamos na proporção de vídeo real */
    aspect-ratio: 16 / 9; 
    border-radius: 15px; 
    overflow: hidden; 
    box-shadow: 0 15px 35px rgba(22, 46, 72, 0.15); 
    background-color: #000; 
}

/* Ajuste da tag de Vídeo ou Iframe */
.iframe-container-clean video, 
.iframe-container-clean iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover; /* Garante que a imagem preencha até a borda sem faixas */
}

/* Ícone e Resposta */
.faq-pergunta::after { content: '\002B'; color: #f39c12; }
.faq-pergunta.ativa { color: #f39c12; }
.faq-resposta { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-resposta p { padding: 0 20px 15px 20px; color: #555; font-size: 0.9rem; }

/* ======================================================
   8. PORTFÓLIO E GALERIA MESTRE
   ====================================================== */
.btn-mestre-galeria { background-color: #162e48; color: #e0813b; border: none; padding: 16px 35px; font-weight: bold; border-radius: 5px; cursor: pointer; text-transform: uppercase; transition: 0.3s; }
.overlay-mestre { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; display: none; overflow-y: auto; padding: 100px 20px 50px; text-align: center; background-color: #fafcff00; }
.overlay-mestre.ativa { display: block; animation: escurecerPalco 1.5s ease forwards; }
.grade-fotos-overlay { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 1100px; margin: 20px auto; position: relative; transform: translateX(8px); }
.grade-fotos-overlay img { width: 100%; height: 280px; object-fit: cover; border-radius: 12px; border: 1px solid #ffffff; opacity: 0; image-rendering: -webkit-optimize-contrast; }

.grade-fotos-overlay img:nth-child(1), .grade-fotos-overlay img:nth-child(2), .grade-fotos-overlay img:nth-child(3), .grade-fotos-overlay img:nth-child(7), .grade-fotos-overlay img:nth-child(8), .grade-fotos-overlay img:nth-child(9) { transform: translateX(-100px); }
.grade-fotos-overlay img:nth-child(4), .grade-fotos-overlay img:nth-child(5), .grade-fotos-overlay img:nth-child(6), .grade-fotos-overlay img:nth-child(10), .grade-fotos-overlay img:nth-child(11), .grade-fotos-overlay img:nth-child(12) { transform: translateX(100px); }
.overlay-mestre.ativa .grade-fotos-overlay img { animation: entrarCruzado 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.grade-fotos-overlay img:nth-child(1) { animation-delay: 0.10s; } .grade-fotos-overlay img:nth-child(2) { animation-delay: 0.20s; } .grade-fotos-overlay img:nth-child(3) { animation-delay: 0.30s; } /* e assim por diante */

.botao-fechar-overlay { position: fixed; top: 120px; right: 220px; color: #fff; font-size: 13px; letter-spacing: 2px; cursor: pointer; z-index: 1000000; background-color: rgba(243, 156, 18, 0.7); padding: 10px 22px; border-radius: 30px; border: 1px solid #f39c12; text-transform: uppercase; opacity: 0; transition: 0.3s; }
.botao-fechar-overlay:hover { background-color: rgba(243, 156, 18, 1); }
.overlay-mestre.ativa .botao-fechar-overlay { animation: fadeInSuave 1s ease 2.8s forwards; }

@keyframes escurecerPalco { to { background-color: rgba(10, 25, 41, 0.55); } }
@keyframes entrarCruzado { to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInSuave { to { opacity: 1; } }

/* ======================================================
   BLOQUEIO DO BOTÃO (PC E PORTRAIT)
   ====================================================== */
.btn-whats-video-land {
    display: none !important; /* Esconde no PC por padrão */
}

/* Garante que o bloco do vídeo não mude de comportamento no PC */
.video-box-clean {
    display: block !important; 
}

   /* ======================================================
   9. RODAPÉ - COM PROTEÇÃO PARA PC
   ====================================================== */

/* Configurações que valem para todos */
.fat-footer {
    background-color: #162e48;
    color: #ffffff;
    padding: 50px 20px 30px;
    border-top: 4px solid #f39c12;
}

/* --- ENVELOPE DE PROTEÇÃO PARA O PC --- */
@media (min-width: 1025px) {
    .footer-container-principal {
        display: flex;
        max-width: 1200px;
        margin: 0 auto;
        gap: 50px;
    }

    .bloco-identidade {
        flex: 1;
        min-width: 250px;
    }

    .bloco-servicos-seo {
        flex: 3;
    }

    .grade-interna-servicos {
        display: grid;
        grid-template-columns: repeat(3, 1fr); 
        gap: 25px;
    }
}
/* --- FIM DO ENVELOPE DO PC --- */

/* Regras de aparência (Não mexi em nada aqui) */
.logo-footer { height: 75px; width: auto; margin-bottom: 20px; }
.logo-footer-texto { display: inline-block; font-weight: bold; font-size: 1.1rem; margin-bottom: 5px; color: #ffffff; }
.cnpj-destaque { font-size: 13px; font-weight: bold; color: #f39c12; margin-bottom: 25px; }

.contato-horario h3, .pagamento-footer h3 {
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); 
    padding-bottom: 5px;
    margin: 20px 0 10px;
    color: #ffffff;
    text-transform: uppercase;
}

.contato-horario p, .pagamento-footer p { font-size: 13px; margin-bottom: 8px; color: #ffffff; }
.contato-horario i, .pagamento-footer i { color: #FFA500; margin-right: 10px; }

.col-servico h3 { font-size: 13px; color: #FFA500; margin-bottom: 12px; text-transform: uppercase; }
.col-servico p { font-size: 11.5px; line-height: 1.6; color: #bdc3c7; text-align: justify; }

.footer-final { text-align: center; margin-top: 50px; }
.linha-decorativa { height: 1px; background: rgba(243, 156, 18, 0.3); margin-bottom: 20px; }
.footer-final p { font-size: 12px; color: #aeb6b8; }

.whatsapp-fixo { position: fixed; bottom: 30px; right: 30px; background: #136b33; color: white; padding: 15px 30px; border-radius: 50px; text-decoration: none; font-weight: bold; display: flex; align-items: center; box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3); z-index: 9999; }


/* ======================================================
   REGRA PARA TABLETS (APENAS EM PÉ - PORTRAIT)
   Quando deitar, o site vira o "PC" automaticamente
   ====================================================== */
@media (min-width: 481px) and (max-width: 1024px) and (orientation: portrait) {

    /* 1. HERO (BANNER PRINCIPAL) */
    .hero-container {
        height: 375px !important; 
        margin: 30px auto !important; 
    }

    .hero-text {
        width: 43% !important; 
        padding: 25px !important;
        justify-content: center !important;
    }

    .hero-text h1 {
        font-size: 2.1rem !important; 
        line-height: 1 !important;
        margin-top: 0 !important; 
    }

    .hero-text p {
        font-size: 1.1rem !important; 
        margin-top: 10px !important;
        margin-bottom: 15px !important;
    }

    .hero-badge {
        margin-top: 15px !important; 
        font-size: 0.8rem !important;
    }

    /* 2. GRADE DE SERVIÇOS */
    .grade-servicos-limpa {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px !important;
        padding: 0 20px !important;
    }

    /* 3. PAINEL DE ATENDIMENTO (SUPER SLIM / ACHATADO) */
    .container-atendimento-unico {
        flex-direction: row !important;
        min-height: auto !important; 
        height: auto !important;
        margin: 20px auto !important;
    }

    .imagem-ferramentas {
        width: 35% !important; 
        min-height: 100% !important; 
    }

    .lista-condominios-laranja {
        width: 65% !important;
        padding: 8px 25px !important; 
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .lista-condominios-laranja h2 {
        font-size: 1.6rem !important;
        margin-bottom: 8px !important;
        text-align: left !important;
    }

    .colunas-condominios {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    .linha-detalhe { margin-bottom: 12px !important; }
    .grupo-local { margin-bottom: 8px !important; }
    .grupo-local p { font-size: 0.75rem !important; line-height: 1.3 !important; }

    /* 4. VÍDEO + FAQ */
    .faq-video-container {
        flex-direction: column !important; 
        gap: 40px !important;
    }

    .faq-box, .video-box-clean {
        width: 100% !important;
    }

    /* 5. RODAPÉ */
    .footer-container-principal {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 40px !important;
    }

    .bloco-servicos-seo { grid-column: span 2 !important; }
    .grade-interna-servicos { grid-template-columns: repeat(2, 1fr) !important; }

    /* 6. PORTFÓLIO E GALERIA */
    .overlay-mestre {
        padding: 60px 15px 30px !important;
    }

    .grade-fotos-overlay {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        max-width: 95% !important;
        transform: none !important;
        margin: 20px auto !important;
    }

    .grade-fotos-overlay img {
        height: 240px !important;
        opacity: 1 !important;
        transform: none !important;
        animation: entrarCruzado 0.8s ease forwards !important; 
    }

    /* BOTÃO FECHAR - TRAVADO NO CANTO */
    .botao-fechar-overlay {
        position: fixed !important;
        top: 20px !important; 
        right: 20px !important; 
        font-size: 14px !important;
        padding: 12px 25px !important;
        opacity: 1 !important;
        z-index: 1000001 !important;
    }

} /* <--- FIM DA REGRA SÓ PARA MODO EM PÉ */




/* ======================================================
    10. AJUSTES PARA CELULAR DEITADO (LANDSCAPE)
   ====================================================== */
@media (max-width: 932px) and (orientation: landscape) {
    header {
        position: relative !important; /* Faz o cabeçalho subir e sumir ao rolar */
        top: auto !important;
        height: 100px; 
        padding: 0 20px;
        box-shadow: none; /* Opcional: remove a sombra para ficar mais limpo */
    }

    .header-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .logo-img {
        width: 85px !important;
        height: auto !important;
    }

    .botao-header-whats {
        font-size: 15px;
        padding: 13px 12px;
        white-space: nowrap;
    }
}

    /* ======================================================
   11. AJUSTE FINO DO HERO 
   ====================================================== */
@media (max-width: 932px) and (orientation: landscape) {

    .hero-container {
        display: flex !important;
        flex-direction: row !important; /* Texto na esquerda, Imagem na direita */
        height: 85vh !important; /* Ocupa 85% da altura da tela */
        min-height: 320px;
        margin: 10px auto !important;
        overflow: hidden;
        border-radius: 20px;
    }

    .hero-text {
        width: 40% !important; /* Proporção 40% */
        background-color: #f39c12; /* O amarelo do fundo */
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centraliza o texto verticalmente */
        padding: 20px 25px !important;
        text-align: left;
    }

    /* O Crachá (Brasília e Entorno) */
    .hero-badge {
        font-size: 10px !important;
        font-weight: 700;
        margin-bottom: 5px !important;
        color: #e5eaf0;
        display: inline-block;
    }

    /* O Título - AQUI AGENTE "ENGORDA" A LETRA */
    .hero-text h1 {
        font-size: 1.7rem !important; /* Tamanho da letra */
        font-weight: 900!important; /* Deixa a letra bem "gorda" (Black) */
        line-height: 1.5 !important; /* Aproxima uma linha da outra */
        color: #f8fbff;
        margin-bottom: 10px !important;
        text-transform: uppercase; /* Tudo em maiúsculo para dar impacto */
        margin-top: px !important;
    }
    

    /* O Parágrafo */
    .hero-text p {
        font-size: 0.93rem !important;
        line-height: 1.7 !important;
        font-weight: 500; /* Letra média */
        color: #000000;
        margin-bottom: 15px !important;
    }

.hero-text .hero-badge:last-of-type {
        display: block !important;
        margin-top: 10px !important; /* Espaço entre o botão e ele */
        font-size: 11px !important;
        font-weight: 800 !important;
        color: #162e48 !important;
        text-transform: uppercase;
        letter-spacing: 1px;
        border: none !important; /* Remove bordas se houver */
        background: none !important; /* Remove fundos se houver */
    }


    /* O Botão dentro do Hero */
    .botao-hero {
        font-size: 11px !important;
        padding: 10px 15px !important;
        width: fit-content; /* Botão só do tamanho do texto */
        font-weight: 800;
    }

    /* Área da Imagem / Carrossel */
    .hero-carrossel {
        width: 60% !important; /* Proporção 60% */
        height: 100% !important;
    }

    .slide img {
        width: 100%;
        height: 100%;
        object-fit: cover !important;
    }
  
    /* ======================================================
  12. ADAPTAÇÃO: SESSÃO URGENTE (MODO DEITADO)
   ====================================================== */
@media (max-width: 932px) and (orientation: landscape) {

    .chamada-urgente {
        padding: 20px 15px !important; /* Reduz o respiro vertical para caber na tela */
    }

    .container-impacto {
        max-width: 95% !important;
    }

    .bloco-problemas {
        /* Mantemos as 3 colunas, mas ajustamos o espaçamento */
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5px 15px !important;
        margin-bottom: 15px !important;
    }

    .item-problema {
        /* Reduzimos de 1.25rem para 0.9rem para não empurrar o layout */
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
    }

    /* Ajuste da Solução "CHAMA O MESTRE" */
    .solucao {
        /* Reduzimos de 3rem para 1.6rem para manter o impacto sem ocupar a tela toda */
        font-size: 1.6rem !important;
        line-height: 1.1 !important;
        margin-top: 10px !important;
    }

    /* Faixa Dourada */
    .faixa-dourada-separadora {
        height: 3px !important; /* Um pouco mais fina para o modo deitado */
    }
}

    /* ======================================================
   13. ADAPTAÇÃO: SEÇÃO DE SERVIÇOS (MODO DEITADO)
   ====================================================== */
@media (min-width: 481px) and (max-width: 932px) and (orientation: landscape)

    .secao-servicos-limpa {
        padding-top: 20px !important;
        padding-bottom: 40px !important;
    }

    /* Ajuste do Título da Seção */
    .divisor-sessao {
        margin: 20px 0 15px 0 !important;
    }

    .divisor-sessao h2 {
        font-size: 1.5rem !important; /* Diminuído para não dominar a tela curta */
        margin-bottom: 8px !important;
    }

    .linha-tema {
        width: 60px !important; /* Linha mais discreta */
    }

    /* A GRADE: Mudamos para 2 colunas para o texto respirar melhor */
    .grade-servicos-limpa {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 20px 30px !important;
        margin-top: 25px !important;
        max-width: 95% !important;
    }

    /* Ajuste do Item e Ícone */
    .item-servico {
        gap: 12px !important; /* Aproxima um pouco o ícone do texto */
        align-items: flex-start !important;
    }

    .icone-solto {
        width: 45px !important; /* Ícones menores para ganhar espaço vertical */
        height: 45px !important;
    }

    /* Ajuste dos Textos dos Serviços */
    .texto-servico h3 {
        font-size: 1rem !important; /* Título do serviço mais compacto */
        margin-bottom: 4px !important;
    }

    .texto-servico p {
        font-size: 0.8rem !important; /* Descrição menor e mais direta */
        line-height: 1.3 !important;
    }
}
   /* ======================================================
   14. ATENDIMENTO (MODO DEITADO)
   ====================================================== */
@media (min-width: 481px) and (max-width: 932px) and (orientation: landscape) {

    .container-atendimento-unico {
        display: flex !important;
        height: auto !important;
        min-height: 320px !important; /* Aumentamos um pouco a altura para a imagem respirar */
        width: 100% !important;
        border-radius: 0 !important;
    }

    /* 1. AJUSTE DA IMAGEM: Aumentamos a largura para não ficar "fina" demais */
    .imagem-ferramentas {
        width: 35% !important; /* De 12% para 25% para dar corpo à imagem */
        padding: 0 !important;
        position: relative;
    }

    .imagem-ferramentas img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Mantém a proporção da foto sem achatar */
        display: block;
    }

    /* 2. ÁREA LARANJA */
    .lista-condominios-laranja {
        width: 65% !important; /* Ajustado para compensar o ganho da imagem */
        padding: 15px 20px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .lista-condominios-laranja h2 {
        font-size: 1.1rem !important;
        margin-bottom: 8px !important;
    }

    /* 3. GRADE DE TEXTO */
    .colunas-condominios {
        display: grid !important;
        grid-template-columns: 1.2fr 1.2fr !important;
        gap: 10px 20px !important;
    }

    /* Jardim Botânico ocupa a esquerda */
    .grupo-local:first-child {
        grid-row: span 2 !important; 
        border-right: 1px solid rgba(22, 46, 72, 0.15);
        padding-right: 15px;
    }

    .grupo-local h3 {
        font-size: 0.9rem !important;
        font-weight: 900 !important;
        margin-bottom: 2px !important;
    }

    .grupo-local p {
        font-size: 0.72rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    /* 4. O "NOMEZINHO" DE VOLTA (Nota Técnica) */
    .nota-tecnica {
        display: block !important; /* Trazemos de volta */
        font-size: 0.6rem !important;
        margin-top: 10px !important;
        line-height: 1.1 !important;
        opacity: 0.8;
        color: #162e48 !important;
    }

    /* Mantemos escondido apenas o que realmente polui o visual */
    .linha-detalhe, .overlay-texto-imagem {
        display: none !important;
    }
}
/* ======================================================
  15.  SEÇÃO VÍDEO + FAQ (MODO DEITADO)
   ====================================================== */
@media (max-width: 932px) and (orientation: landscape) {

    /* 1. MATA O BOTÃO FLUTUANTE (Para ele não ficar na frente de tudo) */
    .whatsapp-flutuante, .btn-whatsapp-fixo { 
        display: none !important; 
    }

    .faq-video-section {
        padding: 20px 15px !important;
    }

    .faq-video-container {
        gap: 20px !important;
        align-items: flex-start !important;
    }

    .faq-box h2, .video-box-clean h2 {
        font-size: 1.3rem !important;
        margin-bottom: 5px !important;
    }

    .faq-box .divisor-dourado-video, 
    .video-box-clean .divisor-dourado-video {
        margin-bottom: 15px !important;
    }

    .faq-pergunta {
        padding: 12px 15px !important;
        font-size: 0.85rem !important;
    }

    .faq-item {
        margin-bottom: 6px !important;
    }

    .faq-resposta p {
        font-size: 0.8rem !important;
        padding: 0 15px 10px 15px !important;
    }

    .video-box-clean {
        flex: 1 !important;
        /* Garante que o botão fique embaixo sem mexer no tamanho do vídeo */
        display: flex !important;
        flex-direction: column !important;
    }

    .iframe-container-clean {
        min-height: 200px !important; /* Mantém sua altura original */
        box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important;
        position: relative !important;
    }

    /* 2. O BOTÃO DO WHATSAPP (Agora ele vai aparecer!) */
    .btn-whats-video-land {
        display: flex !important; /* Força ele a sair do "invisível" */
        background-color: #0e662e !important; /* Verde WhatsApp */
        color: #fff !important;
        padding: 12px !important;
        margin-top: 15px !important; /* Só empurra ele para baixo do vídeo */
        border-radius: 50px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
        font-size: 18px !important;
        justify-content: center;
        align-items: center;
        gap: 8px;
        text-transform: uppercase;
    }
}

/* Garante que o botão não apareça quando o celular estiver em pé */
@media (orientation: portrait) {
    .btn-whats-video-land {
        display: none !important;
    }
}



/* ======================================================
   16.GALERIA DE FOTOS: AJUSTE PARA 2 COLUNAS (MODO DEITADO)
   ====================================================== */
@media (max-width: 932px) and (orientation: landscape) {

    /* 1. OVERLAY (Fundo) */
    .overlay-mestre {
        background-color: rgba(10, 25, 41, 0.98) !important;
        padding: 10px !important;
    }

    /* 2. GRADE DE FOTOS: Agora com 2 colunas */
    .grade-fotos-overlay {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* APENAS 2 COLUNAS */
        gap: 15px !important; /* Aumentei um pouco o espaço entre as fotos maiores */
        padding: 70px 20px 30px 20px !important; /* Respiro para o botão e laterais */
        max-width: 800px;
        margin: 0 auto;
    }

    /* 3. AS IMAGENS: Ajustadas para o novo tamanho */
    .grade-fotos-overlay img {
        width: 100% !important;
        height: 220px !important; /* Altura maior para acompanhar a largura das 2 colunas */
        object-fit: cover !important; /* Mantém a proporção sem achatar */
        border-radius: 10px !important;
        border: 2px solid rgba(255, 255, 255, 0.1);
    }

    /* 4. BOTÃO FECHAR: Fixo e destacado no topo */
    .botao-fechar-overlay {
        position: fixed !important;
        top: 15px !important;
        right: 20px !important;
        background: #f39c12 !important;
        color: #162e48 !important;
        padding: 10px 20px !important;
        font-size: 0.9rem !important;
        font-weight: 900 !important;
        border-radius: 5px !important;
        z-index: 10001 !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    }
}
/* ======================================================
   17. RODAPÉ E AJUSTE FINAL (MODO DEITADO)
   ====================================================== */
@media (max-width: 1024px) and (orientation: landscape) {

    /* 1. ELIMINAR O BOTÃO FLUTUANTE (O VILÃO) */
    .whatsapp-fixo { 
        display: none !important; 
    }

    /* 2. REESTRUTURAÇÃO DO RODAPÉ */
    .fat-footer {
        padding: 25px 15px !important;
    }

    .footer-container-principal {
        display: flex !important;
        flex-direction: row !important; 
        flex-wrap: wrap !important; 
        gap: 20px !important;
    }

    /* BLOCO DE CONTATO - CORREÇÃO DO AZUL E ALINHAMENTO */
    .contato-horario p, 
    .contato-horario p a {
        color: #ffffff !important;
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
        white-space: nowrap !important; /* Proíbe o número de pular pra baixo */
        gap: 8px !important;
        font-size: 13px !important; /* Um pouco menor para caber na altura da tela deitada */
    }

    .contato-horario p svg {
        flex-shrink: 0 !important;
        width: 16px !important;
        height: 16px !important;
    }

    /* Bloco da esquerda (Identidade, Contato, Pagamento) */
    .bloco-identidade {
        flex: 1 !important;
        min-width: 200px !important;
    }

    .logo-footer-texto {
        font-size: 1.1rem !important;
    }

    .contato-horario h3, .pagamento-footer h3 {
        margin: 15px 0 5px !important;
        font-size: 12px !important;
    }

    /* 3. PAREDE DE SERVIÇOS SEO (Otimização de Espaço) */
    .bloco-servicos-seo {
        flex: 2 !important;
        min-width: 300px !important;
    }

    .grade-interna-servicos {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 15px !important;
    }

    .col-servico h3 {
        font-size: 11px !important;
        margin-bottom: 5px !important;
    }

    .col-servico p {
        font-size: 10px !important;
        line-height: 1.4 !important;
    }

    /* 4. FINAL DO SITE */
    .footer-final {
        margin-top: 20px !important;
        padding-top: 15px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
}
/* /* ======================================================
   18. CABEÇALHO - CELULAR EM PÉ (INTELIGENTE: SOBE E DESCE)
   ====================================================== */

@media (max-width: 480px) {
    header {
        height: 80px !important; 
        padding: 0 10px !important;
        position: fixed !important; /* Fixa ele para o JS poder controlar */
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        /* A MÁGICA: Transição suave para não aparecer de soco */
        transition: transform 0.3s ease-in-out !important; 
    }

    /* Classe que o JavaScript vai aplicar para esconder o cabeçalho */
    .header-escondido {
        transform: translateY(-100%) !important;
    }

    .header-container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .logo-img {
        height: 75px !important;
        width: auto !important;
    }

    .botao-header-whats {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: #f39c12 !important;
        font-size: 0px !important; 
        padding: 0px !important;
        width: 140px !important;
        border-radius: 12px !important;
        text-decoration: none !important;
        font-weight: 900 !important;
    }

    .botao-header-whats::after {
        content: "(61) 98214-8809"; 
        font-size: 1.1rem !important; 
        letter-spacing: -0.5px !important;
        display: block !important;
        color: #162e48 !important;
    }
}

/* ======================================================
   19. BANNER PRINCIPAL (HERO) - AJUSTE CELULAR EM PÉ (FINAL)
   ====================================================== */
@media (max-width: 480px) {
    .hero-container {
        flex-direction: column !important;
        height: auto !important;
        
        
        /* AJUSTE AQUI: */
        margin: 90px auto !important; /* "auto" centraliza o bloco perfeitamente */
        width: 99% !important;        /* 96% deixa 2% de folga em cada lado (quase encostando) */
        
        border-radius: 10px !important;

        /* PARTE DO CARROSSEL (Aumentando a altura) */
    .hero-carrossel {
        width: 100% !important;
        /* Aumentamos de 230px para 320px ou 350px para as fotos ficarem altas e bonitas */
        height: 290px !important; 
        border-top: 2px solid #f39c12; /* Opcional: uma linha fina para separar do amarelo */
    }

    /* Garantir que a imagem preencha o novo tamanho sem esticar */
    .slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; 
    }
    }


    /* PARTE AMARELA (TOPO - MAIS COMPACTA) */
    .hero-text {
        width: 100% !important;
        /* Padding reduzido: 15px em cima/baixo e 10px nas laterais */
        padding: 15px 10px !important; 
        text-align: center !important;
        align-items: center !important;
    }

    .hero-text h1 {
        font-size: 1.7rem !important; /* Ajuste leve para não bater nas bordas */
        line-height: 1.1 !important;
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }

    .hero-text p {
        font-size: 1rem !important; /* Um pouquinho menor para a caixa encolher */
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        line-height: 1.3 !important;
    }

    .hero-badge {
        margin-top: 5px !important; /* Grudado no texto para economizar altura */
        font-size: 0.7rem !important;
    }

    /* PARTE DO CARROSSEL (BAIXO) */
    .hero-carrossel {
        width: 100% !important;
        height: 230px !important; /* Diminuído para equilibrar com o topo menor */
    }

    .legenda {
        font-size: 0.65rem !important;
        bottom: 8px !important;
        left: 8px !important;
    }
}

/* ======================================================
   20. SESSÃO DE CHAMADA URGENTE - AJUSTE VERTICAL
   ====================================================== */
@media (max-width: 480px) {
    .chamada-urgente {
        /* AJUSTE DE POSIÇÃO: O valor negativo puxa para cima */
        margin-top: -65px !important; 
        padding: 20px 10px !important; /* Diminuí o padding para compactar mais */
        position: relative;
        z-index: 5;
    }

    .bloco-problemas {
        grid-template-columns: 1fr !important; 
        gap: 15px !important; 
        /* Se houver um margin-bottom alto aqui, ele empurra o que vem depois */
        margin-bottom: 20px !important; 
    }
}

    /* Resetamos a animação original para ela esperar o gatilho */
    .item-problema {
        font-size: 1.5rem !important;
        text-align: center !important;
        opacity: 0;
        transform: translateY(10px);
        animation: none !important; /* Trava a animação automática */
    }

    /* Dispara a animação apenas quando a classe .animar for adicionada */
    .chamada-urgente.animar .item-problema {
        animation: entradaLista 0.8s ease-out forwards !important;
    }

    /* Ajuste dos Delays para o celular ficar dinâmico */
    .chamada-urgente.animar .p1 { animation-delay: 0.2s !important; }
    .chamada-urgente.animar .p2 { animation-delay: 0.5s !important; }
    .chamada-urgente.animar .p3 { animation-delay: 0.8s !important; }
    .chamada-urgente.animar .p4 { animation-delay: 1.1s !important; }
    .chamada-urgente.animar .p5 { animation-delay: 1.4s !important; }
    .chamada-urgente.animar .p6 { animation-delay: 1.7s !important; }

    .solucao {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
        padding: 0 10px !important;
        display: block !important;
        width: 100% !important;
        opacity: 0;
        animation: none !important;
    }

    /* Dispara a frase final do Mestre */
    .chamada-urgente.animar .solucao {
        animation: entradaMestre 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2.2s forwards, 
                   respiroVida 4s ease-in-out 3.5s infinite !important;
    }

    @media (max-width: 480px) {
    /* ... outros códigos do celular que já estão lá ... */

    .faixa-dourada-separadora { 
        display: block !important; 
        width: 100% !important; 
        height: 6px !important; 
        background: linear-gradient(to right, #f39c12, #e67e22, #f39c12); 
        
        /* AQUI ENTRA O SEU AJUSTE QUE TAVA BOM NO CELULAR */
        position: absolute !important;   
        left: 50% !important;            
        transform: translateX(-50%) !important; 
        z-index: 99 !important; 
        margin: 0 !important;            
        bottom: -360px !important; /* Esse valor só vai valer no celular */
    }

    .chamada-urgente {
        position: relative !important;
    }
}


/* ======================================================
   21.SEÇÃO DE SERVIÇO  - CELULAR EM PÉ (REFINADO)
   ====================================================== */
@media (max-width: 480px) and (orientation: portrait) {

    /* 1. RESET DE LARGURA */
    .secao-servicos-limpa {
        padding: 65px 15px !important;
        margin-top: -30px !important;
        width: 100% !important;
        display: block !important;
    }

    /* 2. AJUSTE DA GRADE */
    .grade-servicos-limpa {
        display: flex !important; 
        flex-direction: column !important; 
        gap: 35px !important; /* Aumentado levemente para dar mais respiro entre serviços */
    }

    /* 3. ÍCONE NA ESQUERDA E TEXTO NA DIREITA */
    .item-servico {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important; 
        justify-content: flex-start !important;
        width: 100% !important;
    }

    /* 4. AJUSTE DO ÍCONE */
    .icone-solto {
        width: 90px !important; /* Leve redução para equilibrar com o texto contido */
        height: 80px !important;
        margin-right: 0px !important; 
        margin-left: 0 !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important; 
    }

    /* 5. AJUSTANDO O TEXTO (ESTRATÉGIA DE BARREIRA DIREITA) */
    .texto-servico {
        flex: 1 !important; 
        display: block !important; /* Mudado de flex para block para evitar estiramento */
        /* Criamos um respiro real na direita para o texto não encostar na borda */
        padding-right: 10px !important; 
        box-sizing: border-box !important;
    }

    .texto-servico h3 {
        font-size: 1.2rem !important;
        color: #162e48 !important;
        margin: 0 0 5px 0 !important;
        line-height: 1.2 !important;
        font-weight: 800 !important;
        text-align: left !important;
    }

    .texto-servico p {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        color: #555 !important;
        margin: 0 !important;
        text-align: left !important;
        /* Garante que o parágrafo não tente ser maior que o container */
        width: 100% !important;
        display: block !important;
    }
}

/* ======================================================
   22 PAINEL DE ATENDIMENTO - AJUSTE VERTICAL
   ====================================================== */
@media (max-width: 480px) {
    .container-atendimento-unico {
        flex-direction: column !important; /* Empilha Imagem em cima e Lista embaixo */
        margin: 0px 2px !important;
        min-height: auto !important;
        border-radius: 12px !important;
    }

    /* TOPO COM A IMAGEM */
    .imagem-ferramentas {
        width: 100% !important;
        height: 180px !important; /* Altura fixa para não ocupar a tela toda */
        padding: 10px !important;
        align-items: center !important; /* Centraliza o texto na imagem */
    }

    /* ======================================================
   CONTROLE DOS TEXTOS SOBRE A IMAGEM (MOBILE)
   ====================================================== */
@media (max-width: 480px) {
    /* 1. O CONTAINER PAI (Move a posição dos textos na tela) */
    .overlay-texto-imagem {
        display: flex !important;
        flex-direction: column !important;
        
        /* AJUSTE DE POSIÇÃO: */
        /* justify-content: flex-end (baixo), center (meio), flex-start (topo) */
        justify-content: center !important; 
        align-items: center !important; /* center, flex-start (esquerda), flex-end (direita) */
        
        width: 100% !important;
        height: 100% !important;
        padding: 10px !important;
        
        /* Move o bloco inteiro: Valores positivos descem, negativos sobem */
        transform: translateY(0px) !important; 
    }

    /* 2. O TEXTO PRINCIPAL (H3) */
    .overlay-texto-imagem h3 {
        font-size: 1.2rem !important; /* Ajuste o tamanho aqui */
        color: #ffffff !important;
        text-shadow: 2px 2px 5px rgba(0,0,0,0.9) !important; /* Sombra forte para ler bem */
        background: rgba(0,0,0,0.3) !important; /* Fundo sutil */
        padding: 10px 5px !important;
        border-radius: 8px;
        margin-bottom: 5px !important; /* Espaço para o texto debaixo */
        border-left: 3px solid #f39c12 !important; /* Detalhe laranja lateral */
        width: fit-content !important; /* O fundo preto só ocupa o tamanho do texto */
        margin-top:80px !important;
    }

    /* 3. O SEGUNDO TEXTO (Caso tenha um P ou Span lá) */
    .overlay-texto-imagem p, 
    .overlay-texto-imagem span {
        font-size: 0.9rem !important; /* Tamanho do texto menor */
        color: #ffffff !important;
        text-transform: uppercase;
        font-weight: bold;
        text-shadow: 1px 1px 4px rgba(0,0,0,0.8) !important;
        margin-top: 10px !important;
    }
}

    /* LISTA LARANJA (BAIRROS) */
    .lista-condominios-laranja {
        width: 100% !important;
        padding: 25px 20px !important;
    }

    .lista-condominios-laranja h2 {
        font-size: 1.5rem !important;
        text-align: center !important;
    }

    .linha-detalhe {
        margin: 0 auto 20px auto !important; /* Centraliza a linha embaixo do título */
    }

    .grupo-local {
        text-align: center !important; /* Centraliza os bairros para melhor leitura no celular */
        margin-bottom: 15px !important;
    }

    .grupo-local h3 {
        font-size: 1rem !important; /* Aumenta um pouco o nome da região */
        color: #162e48 !important;
    }

    .grupo-local p {
        font-size: 0.85rem !important; /* Melhora a leitura dos bairros */
        letter-spacing: 0.5px !important;
    }

    .nota-tecnica {
        text-align: center !important;
        font-size: 0.75rem !important;
        margin-top: 20px !important;
    }
}

/* ======================================================
   23. SEÇÃO VÍDEO + FAQ - AJUSTE VERTICAL (SEM TARJA PRETA)
   ====================================================== */
@media (max-width: 480px) {
    .faq-video-section {
        padding: 30px 15px !important;
    }

    .faq-video-container {
        flex-direction: column !important; 
        gap: 30px !important; 
    }

    /* FAQ (PERGUNTAS) */
    .faq-box {
        width: 100% !important;
    }

    .faq-box h2, .video-box-clean h2 {
        font-size: 1.5rem !important; 
        text-align: center !important;
    }

    .divisor-dourado-video {
        margin: 0 auto 20px auto !important; 
    }

    .faq-pergunta {
        font-size: 0.95rem !important; 
        padding: 15px !important;
    }

    /* VÍDEO - MATANDO A TARJA PRETA */
    .video-box-clean {
        width: 100% !important;
        order: 2; 
    }

    .iframe-container-clean {
        width: 100% !important;
        /* O SEGREDO: Altura zero + padding proporcional elimina as faixas */
        height: 0 !important; 
        min-height: 0 !important;
        padding-top: 56.25% !important; /* Proporção 16:9 exata */
        position: relative !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        background-color: transparent !important; 
    }

    .iframe-container-clean video, 
    .iframe-container-clean iframe {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Dá o zoom necessário para limpar as bordas */
    }

    .faq-resposta p {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }
}
/* ======================================================
   24. GALERIA NO CELULAR - UMA POR VEZ
   ====================================================== */
@media (max-width: 480px) {
    .overlay-mestre {
        padding: 80px 15px 30px !important; /* Espaço para o botão fechar */
        background-color: rgba(10, 25, 41, 0.95) !important; /* Fundo mais escuro no celular para destacar as fotos */
    }

    .grade-fotos-overlay {
        display: flex !important; /* Muda de Grid para Flex para empilhar */
        flex-direction: column !important;
        gap: 20px !important;
        transform: none !important; /* Remove o desvio de 8px do PC */
        width: 100% !important;
    }

    .grade-fotos-overlay img {
        width: 100% !important;
        height: auto !important; /* Altura livre para não achatar a foto */
        min-height: 250px;
        border-radius: 10px !important;
        /* Reseta o transform para a animação vir de um lugar só ou ser mais suave */
        transform: translateY(30px) !important; 
        opacity: 0;
    }

    /* Ajuste do Botão Fechar no Celular */
    .botao-fechar-overlay {
        position: fixed !important;
        top: 20px !important; /* Botão no topo da tela */
        right: 50% !important;
        transform: translateX(50%) !important; /* Centraliza o botão */
        width: 80% !important;
        text-align: center !important;
        font-size: 14px !important;
        padding: 15px !important;
        background-color: #f39c12 !important; /* Laranja sólido para fácil leitura */
        opacity: 0;
        z-index: 1000001 !important;
    }

    /* Faz as fotos virem de baixo para cima no celular (mais bonito que cruzado no mobile) */
    @keyframes entrarMobile {
        to { opacity: 1; transform: translateY(0) !important; }
    }

    .overlay-mestre.ativa .grade-fotos-overlay img {
        animation: entrarMobile 0.6s ease-out forwards !important;
    }
}

/* ======================================================
   25. RODAPÉ
   ====================================================== */
/* --- AJUSTE RODAPÉ PARA CELULAR (HÍBRIDO: CENTRO + ESQUERDA) --- */
@media (max-width: 480px) {
    .fat-footer {
        padding: 30px 20px !important;
    }

    .footer-container-principal {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
    }

    /* 1. APENAS ESTES FICAM CENTRALIZADOS */
    .logo-footer-texto, 
    .cnpj-destaque {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
    }

    .cnpj-destaque {
        margin-bottom: 20px !important;
    }

    /* 2. TODO O RESTO ALINHADO À ESQUERDA */
    .contato-horario, 
    .pagamento-footer, 
    .bloco-servicos-seo, 
    .footer-final {
        text-align: left !important;
    }

    /* AJUSTE DEFINITIVO: Trava ícone e número na mesma linha */

    
    .contato-horario p { 
        color: #ffffff !important; 
        display: flex !important;
        flex-direction: row !important; /* Força um ao lado do outro */
        flex-wrap: nowrap !important;   /* PROÍBE PULAR PARA BAIXO */
        align-items: center !important; 
        justify-content: flex-start !important; 
        gap: 5px !important;            /* Espaço entre ícone e texto */
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }

    /* Força o link do telefone a ser branco e não pular */
    .contato-horario p a {
        color: #ffffff !important;
        text-decoration: none !important;
        white-space: nowrap !important; /* Faz o número grudar no texto */
    }

    /* Alinhamento do ícone */
    .contato-horario p svg {
        flex-shrink: 0 !important; /* Não deixa o ícone esmagar */
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
    }
    /* Mantém os títulos à esquerda */
    .contato-horario h3, 
    .pagamento-footer h3 {
        text-align: left !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding-bottom: 5px !important;
        margin-top: 20px !important;
    }

    /* Resto do SEO e Serviços (Tudo à esquerda) */
    .grade-interna-servicos {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .col-servico {
        text-align: left !important;
        border-left: 2px solid #f39c12; 
        padding-left: 12px !important;
    }

    .col-servico h3 {
        font-size: 13px !important;
        color: #f39c12 !important;
        margin-bottom: 5px !important;
    }

    .col-servico p {
        text-align: left !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    .footer-final p {
        text-align: left !important;
    }

    /* BOTÃO WHATSAPP FIXO - CENTRALIZADO NO CELULAR */
    .whatsapp-fixo {
        right: 50% !important;
        transform: translateX(50%) !important;
        bottom: 0px !important;
        width: 90% !important;
        max-width: 320px !important;
        justify-content: center !important;
        display: flex !important; /* Garante que ele apareça */
        position: fixed !important;
    }

} /* <--- ESTA É A CHAVE MESTRA QUE FECHA O BLOCO DO CELULAR */