/* =========================================
   ESTILO FINAL: Botão Telefone Independente + Layout Centralizado
   ========================================= */

.com-content-article {
    --cor-fundo: #000000; 
    --cor-texto: #ffffff;
    --cor-btn-telefone: #1BFD69;
    font-family: 'Roboto', sans-serif;
}

.section-container {
    max-width: 1200px; margin: 0 auto; padding: 0 20px;
    display: flex; align-items: center; gap: 3rem;
}

/* =========================================
   1. SESSÃO HERO
   ========================================= */
.section-hero-dark {
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    padding: 100px 0 30px;
    position: relative;
}

.hero-content {
    flex: 1; display: flex; flex-direction: column;
    justify-content: center; align-items: center; text-align: center;
}
.hero-image {
    flex: 1; display: flex; justify-content: center;
}
.hero-image img {
    max-width: 100%; height: auto; max-height: 450px; object-fit: contain;
}

/* --- LOGO DO CLIENTE --- */
.client-logo-wrapper { margin-bottom: 25px; margin-top: 20px; }

.client-logo-circle {
    width: 170px; height: 170px;
    background: #fff; border-radius: 50%;
    border: 5px solid var(--cor-destaque, #1BFD69); 
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; 
    box-shadow: 0 5px 20px rgba(255,255,255,0.1);
}

.client-logo-circle img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    border-radius: 50%; 
}

/* TEXTOS */
.hero-title {
    font-size: 2.5rem; font-weight: 800; line-height: 1.2;
    margin-bottom: 1rem; color: #fff;
}
.hero-custom-fields, .article-custom-fields {
    display: flex !important; flex-direction: column; gap: 0.75rem; margin-bottom: 0.5rem;
}
.custom-field-item { display: flex; align-items: baseline; gap: 0.5rem; justify-content: center; }
.field-label { font-weight: 600; min-width: fit-content; }
.com-content-article .fields-container { display: none !important; }

/* Render Classes */
.texto-titulo-h1 .field-value { font-size: 2.5rem; color: #FFFFFF; font-weight: bold; line-height: 1.1; }
.texto-titulo-h2 .field-value { font-size: 1.4rem; color: #ffffff; font-weight: bold; }
.field-value .verde { color: #1BFD69; }
.field-value .branco { color: #fff; }
.field-value .amarelo { color: #fff107; }
.destaque { color: var(--cor-destaque, #1BFD69); }


/* =========================================
   3. BOTÕES (WHATSAPP E TELEFONE)
   ========================================= */

.hero-buttons-wrapper {
    display: flex; gap: 15px; margin-top: 1.0rem; margin-bottom: 1.0rem; flex-wrap: wrap; justify-content: center;
}

.article-action-button .btn { width: auto; }

/* Botão WhatsApp */
.btn-whatsapp-custom {
    background-color: #25D366 !important; 
    border-color: #25D366 !important;
    color: #ffffff !important; 
    border-radius: 50px !important; 
    font-weight: 600 !important; 
    padding: 10px 25px;
    font-size: 1rem !important; 
    transition: all 0.3s ease;
    display: inline-flex; width: auto !important; 
    align-items: center; justify-content: center;
    gap: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    text-decoration: none; text-transform: uppercase;
}
.btn-whatsapp-custom:hover {
    background-color: #128C7E !important; 
    border-color: #128C7E !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);
    color: #fff !important;
}
.btn-whatsapp-custom .fab { font-size: 1.2em; }

/* Botão Telefone */
.btn-phone-custom {
    background-color: var(--cor-btn-telefone, #FF0000) !important;
    border: 2px solid var(--cor-btn-telefone, #FF0000) !important;
    letter-spacing: 1px;
    color: #ffffff !important; 
    border-radius: 50px !important; 
    font-weight: 700 !important; 
    padding: 10px 25px;
    font-size: 1rem !important; 
    transition: all 0.3s ease;
    display: inline-flex; width: auto !important; 
    align-items: center; justify-content: center;
    gap: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    text-decoration: none; text-transform: uppercase;
}
.btn-phone-custom:hover {
    filter: brightness(1.1); transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255,255,255,0.2);
}

/* Botão Flutuante Scroll */
.article-floating-button {
    position: fixed; bottom: 25px; right: 25px; z-index: 9999;
    opacity: 0; visibility: hidden; transform: translateY(20px);
    transition: all 0.4s ease;
}
.article-floating-button.visible {
    opacity: 1; visibility: visible; transform: translateY(0);
}


/* =========================================
   4. SEÇÕES E CONTEÚDO
   ========================================= */
.section-divider-line {
    width: 100%; height: 20px; 
    background-color: var(--cor-destaque, #1BFD69);
    box-shadow: 0 0 15px var(--cor-destaque);
    z-index: 5; position: relative;
}

.section-sobre-dark { background-color: var(--cor-fundo); color: #ccc; padding: 60px 0; }
.sobre-content { flex: 1; }
.sobre-image { flex: 1; }
.sobre-image img { width: 100%; height: auto; border-radius: 8px; border: 2px solid #333; }

.sobre-title { font-size: 2rem; font-weight: 800; color: #fff; margin-bottom: 1.5rem; }
.sobre-title .destaque { color: var(--cor-destaque, #1BFD69); }
.sobre-description { font-size: 1.1rem; line-height: 1.6; margin-bottom: 2rem; color: #ddd; }

.sobre-features-list { list-style: none; padding: 0; margin: 0; }
.sobre-features-list li {
    font-size: 1.2rem; font-weight: 700; color: #fff;
    margin-bottom: 12px; display: flex; align-items: center; gap: 10px;
}
.sobre-features-list li i { color: var(--cor-destaque, #1BFD69); font-size: 1.4rem; }

.section-white-content { background-color: #ffffff; color: #333; padding: 60px 0; width: 100%; }
.section-container-white { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.com-content-article__body { width: 100%; line-height: 1.6; }

/* Diferenciais */
.bloco-diferenciais { background: #f9f9f9; padding: 40px 20px; border-radius: 20px; }
.bloco-diferenciais h1, .bloco-diferenciais h2, .bloco-diferenciais h3 {
    text-align: center; margin-bottom: 2rem; font-weight: 700;
}
.lista-diferenciais { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.diferencial-item { background: #ffffff; border-radius: 10px; padding: 1.5rem; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.diferencial-item i { font-size: 2.5rem; color: var(--cor-destaque, #1BFD69); display: block; margin-bottom: 15px; }


/* =========================================
   RESPONSIVIDADE GERAL (MOBILE)
   ========================================= */
@media (max-width: 992px) {
    .section-container { flex-direction: column; gap: 0.5rem; text-align: left; }
    .hero-image, .sobre-image { width: 100%; order: 2; }
    .hero-content, .sobre-content { width: 100%; order: 1; }
    .hero-title { font-size: 2rem; }
}

@media (max-width: 768px) {
    .hero-content { text-align: center; align-items: center; }
    .texto-titulo-h1 .field-value { font-size: 1.5rem; }
    .texto-titulo-h2 .field-value { font-size: 1.0rem; }
    
    .client-logo-wrapper { margin-top: 0px; display: flex; justify-content: center; width: 100%; }
    .client-logo-circle { width: 150px; height: 150px; border-width: 5px; }

    .hero-title { text-align: center; }
    .hero-custom-fields, .custom-field-item { align-items: center; justify-content: center; text-align: center; }
    .texto-titulo-h1 .field-value, .texto-titulo-h2 .field-value { text-align: center; }

    /* BOTÕES NO MOBILE (Empilhados) */
    .hero-buttons-wrapper {
        flex-direction: column; 
        width: 100%;
        align-items: center;
    }
    
    .btn-whatsapp-custom, .btn-phone-custom {
        width: auto !important; 
        min-width: 200px; 
        display: inline-flex !important;
        padding: 10px 30px; 
    }

    .hero-image img { max-height: 300px; }
}