<?php get_header(); ?>
php
<nav class="novo-menu">
    <a href="/">Início</a>
    <a href="/servicos">Serviços</a>
    <a href="/sobre">Sobre</a>
    <a href="/contato">Contato</a>
</nav>

<style>
    /* RESET E ESTRUTURA */
    .container-forcar { 
        position: relative !important; width: 100vw !important; left: 50% !important; right: 50% !important; 
        margin-left: -50vw !important; margin-right: -50vw !important; background: #fff !important;
        padding-top: 40px !important; padding-bottom: 40px !important;
    }

    /* GRID SERVIÇOS */
    .grid-servicos { 
        display: grid !important; grid-template-columns: repeat(3, 1fr) !important; 
        gap: 20px !important; max-width: 1200px !important; margin: 0 auto !important; padding: 0 20px !important;
    }
    @media (max-width: 900px) { .grid-servicos { grid-template-columns: 1fr !important; } }

    .card { 
        border: 1px solid #080808 !important; border-radius: 12px !important; padding: 20px !important; 
        text-align: center !important; background: #0c2650 !important; box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
    }
    .icone { font-size: 2rem !important; display: block !important; margin-bottom: 15px !important; }
    .card h3 { color: #f8fafc !important; font-size: 1.2rem !important; margin: 10px 0 !important; }
    .card p { color: #ffffff !important; font-size: 0.95rem !important; line-height: 1.5 !important; }
    .btn-saiba { 
        display: inline-block !important; margin-top: 20px !important; padding: 12px 30px !important; 
        background-color: #000000 !important; color: #fff !important; border-radius: 50px !important; 
        text-decoration: none !important; font-weight: bold !important;
    }

    /* SEGMENTOS */
    .segmentos { 
        max-width: 900px !important; margin: 40px auto !important; 
        padding: 40px 20px !important; text-align: center !important; background: #f8fafc !important; 
        border-radius: 12px !important; border: 1px solid #e2e8f0 !important; 
    }
    .segmentos h2 { color: #0c2650 !important; font-size: 1.8rem !important; margin-bottom: 15px !important; }
    .segmentos ul { list-style: none !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; margin-top: 20px !important; }
    .segmentos ul li { background: #0c2650 !important; color: #fff !important; padding: 10px !important; border-radius: 6px !important; font-weight: 500 !important; font-size: 0.9rem !important; }
    @media (max-width: 768px) { .segmentos ul { grid-template-columns: repeat(2, 1fr) !important; } }

    /* SOBRE NÓS */
    .sobre-nos { max-width: 900px !important; margin: 40px auto !important; padding: 40px 20px !important; text-align: center !important; }
    .sobre-nos h2 { color: #0c2650 !important; margin-bottom: 15px !important; }
    .destaques ul { list-style: none !important; padding: 0 !important; margin: 20px 0 !important; display: inline-block; text-align: left; }
    .destaques li { margin-bottom: 10px !important; font-weight: bold !important; color: #333 !important; }
    .destaques li::before { content: "✅ "; }
    .contato-callout { background: #000 !important; color: #fff !important; padding: 20px !important; border-radius: 12px !important; margin-top: 20px !important; }
    .btn-telefone { font-size: 1.5rem !important; font-weight: bold !important; color: #2ecc71 !important; text-decoration: none !important; }
</style>

<main>
    <!-- Imagem de Destaque -->
    <div style="width:100% !important;">
        <img src="https://desentupidoraroultertec.com.br/wp-content/uploads/2026/09/WhatsApp-Image-2026-09-04-at-10.16.16.jpeg" style="width:100% !important; height:auto; display:block;">
    </div>

    <!-- Seção de Serviços -->
    <section class="container-forcar">
        <div class="grid-servicos">
            <div class="card"><div class="icone">🚽</div><h3>DESENTUPIMENTO</h3><p>Pias, ralos e vasos com rapidez e higiene.</p><a href="https://wa.me/5511961287320" class="btn-saiba">Saiba mais</a></div>
            <div class="card"><div class="icone">🚿</div><h3>HIDROJATEAMENTO</h3><p>Limpeza de alta pressão para tubulações.</p><a href="https://wa.me/5511961287320" class="btn-saiba">Saiba mais</a></div>
            <div class="card"><div class="icone">🔧</div><h3>ESGOTO</h3><p>Eliminamos o mau cheiro e garantimos fluxo.</p><a href="https://wa.me/5511961287320" class="btn-saiba">Saiba mais</a></div>
            <div class="card"><div class="icone">💧</div><h3>LIMPA FOSSAS</h3><p>Sucção segura e normas sanitárias.</p><a href="https://wa.me/5511961287320" class="btn-saiba">Saiba mais</a></div>
            <div class="card"><div class="icone">🏠</div><h3>RESIDENCIAL</h3><p>Atendimento de confiança para sua casa.</p><a href="https://wa.me/5511961287320" class="btn-saiba">Saiba mais</a></div>
            <div class="card"><div class="icone">🏢</div><h3>EMPRESARIAL</h3><p>Manutenção preventiva para empresas.</p><a href="https://wa.me/5511961287320" class="btn-saiba">Saiba mais</a></div>
        </div>

        <!-- Nova Seção de Segmentos -->
        <section class="segmentos">
            <h2>Atendemos Todos os Segmentos em São Paulo e ABCD</h2>
            <p>Da pequena residência à grande indústria, com a mesma qualidade.</p>
            <ul>
                <li>Residências</li><li>Condomínios</li><li>Comércios</li><li>Indústrias</li>
                <li>Escolas</li><li>Hospitais</li><li>Órgãos Públicos</li><li>Restaurantes</li>
            </ul>
        </section>

        <!-- Nova Seção Sobre Nós -->
        <section class="sobre-nos">
            <h2>SOBRE A DESENTUPIDORA</h2>
            <p>Atendendo em São Paulo e região, oferecemos soluções completas em desentupimento e saneamento com atendimento 24 horas.</p>
            <div class="destaques">
                <ul>
                    <li>Atendimento Emergencial 24h</li>
                    <li>Visita e Orçamento Grátis</li>
                    <li>Equipamentos Modernos e Equipe Qualificada</li>
                    <li>Garantia em Todos os Serviços</li>
                </ul>
            </div>
            <div class="contato-callout">
                <p>Precisa de atendimento imediato?</p>
                <a href="tel:5511961287320" class="btn-telefone">11 96128-7320</a>
            </div>
        </section>
    </section>
</main>

<?php get_footer(); ?>