/** 
 * 🚀 BUNDLE CSS AUTO-GERADO 
 * Tema: landing-consult 
 * Gerado em: 2026-03-28 22:02:12 
 */

/* 🛠️ Estilo: landing-consult-css */
/* ==========================================================================
   1. FONTES E TIPOGRAFIA (ROBOTO ABSOLUTO) +
   ========================================================================== */
@font-face{font-family:'Playfair Display';src:url('../assets/webfonts/playfair-display-v40-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('../assets/webfonts/playfair-display-v40-latin-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ==========================================================================
   2. VARIÁVEIS E ESCALA DE TAMANHOS (SINTONIA 1, 3, 5, 7)
   ========================================================================== */
:root {
    --brand-title: #f67760;
    --btn-bg: #0d6efd;
    --btn-whatsapp: #15bb29;
    
   --font-base: "Playfair Display", Georgia, serif;

    /* MAPEAMENTO DA ESCALA DO EDITOR (Desktop) */
    --fs-7: 3rem;   /* Tamanho 7 / h1 */
    --fs-6: 2.8rem;   /* Tamanho 6 / h2 */
    --fs-5: 2.0rem;   /* Tamanho 5 / h3 */
    --fs-3: 1.1rem;  /* Tamanho 3 / p (padrão) */
    --fs-1: 1rem;  /* Tamanho 1 / pequeno */
}

* { 
    box-sizing: border-box;
    font-family: var(--font-base); /* Permite que o editor defina font-family */
}

html, body {
    height: 100%;
    margin: 0;
    color: #333;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Sintoniza Tags Padrão com a Escala do Editor */
h1, .font-title { font-size: var(--fs-7); font-weight: 800; color: var(--brand-title); line-height: 1.1; }
h2 { font-size: var(--fs-6); font-weight: 700; line-height: 1.2; }
h3 { font-size: var(--fs-5); font-weight: 700; line-height: 1.3; }
p  { font-size: var(--fs-3); margin-bottom: 1.2rem; color: #444;  line-height: 1.8;}

/* CAPTURA DO EDITOR: Garante que o que você vê no editor é o que sai no site */
font[size="7"] { font-size: var(--fs-7); display: block; }
font[size="6"] { font-size: var(--fs-6); }
font[size="5"] { font-size: var(--fs-5); display: block; }
font[size="3"] { font-size: var(--fs-3); }
font[size="1"] { font-size: var(--fs-1); color: #666; }

/* Limpa resquícios de fontes inline do editor visual */
span[style*="font-family"], font[face] { font-family: var(--font-base); }

/* ==========================================================================
   CAMADA DE INTELIGÊNCIA RESPONSIVA (Sincronizada com Editor)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. AJUSTE DE COLUNAS E PROTEÇÃO DE LAYOUT */
    .row, .landing-page-container .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
    }

    [class*="col-"], .landing-page-container [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 3. CARDS E ELEMENTOS CENTRALIZADOS */
    .testimonial-card, 
    .landing-page-container div:has(> font > span > img), 
    .landing-page-container div:has(> img[style*="float: left"]) {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;    /* Centraliza os blocos horizontalmente */
        text-align: center !important;     /* Centraliza todos os textos internos */
        padding: 25px 15px !important;
        width: 100% !important;
        gap: 10px !important;
    }

    /* Centraliza as Imagens (Mata o float e ajusta margens) */
    .testimonial-img-wrap, 
    .testimonial-img,
    .landing-page-container img[style*="float: left"],
    .landing-page-container img[src*="jose-salibi"] {
        float: none !important;
        display: block !important;
        margin: 0 auto 15px auto !important; /* Força margens laterais automáticas */
        width: 110px !important;            /* Tamanho fixo para destaque centralizado */
        height: 110px !important;
        min-width: 110px !important;
        object-fit: cover;
        border-radius: 15px !important;     /* Mantém o padrão arredondado elegante */
    }

    /* Garante que os containers de texto ocupem a largura total */
    .testimonial-body {
        width: 100% !important;
        text-align: center !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .landing-page-container p {
        width: 100% !important;
        display: block !important;
    }

    /* Ajuste de espaçamento dos Títulos internos */
    .testimonial-name {
        display: block !important;
        margin-bottom: 5px !important;
        width: 100% !important;
    }

    .landing-page-container img[src*="Mockup_Capa"] {
        max-width: 250px !important;
        height: auto !important;
        margin: 20px auto !important;
        display: block;
    }

    .btn-custom {
        display: block !important;
        width: 100% !important;
        max-width: 300px;
        margin: 15px auto !important;
        padding: 12px !important;
        text-align: center;
    }

    /* PROTEÇÃO DE ALINHAMENTO MANUAL DO EDITOR */
    [style*="text-align: left"], [align="left"] { text-align: left !important; }
    [style*="text-align: right"], [align="right"] { text-align: right !important; }
    [style*="text-align: center"], [align="center"] { text-align: center !important; }
    [style*="text-align: justify"], [align="justify"] { text-align: justify !important; }

    /* 4. TIPOGRAFIA DINÂMICA INTELIGENTE 
       (Usa o tamanho padrão no mobile, SALVO se você tiver configurado um tamanho customizado na coluna) */
    h1:not([style*="font-size"]), font[size="7"] { font-size: 1.8rem !important; line-height: 1.2 !important; display: block; }
    h2:not([style*="font-size"]), font[size="6"] { font-size: 1.5rem !important; line-height: 1.2 !important; }
    h3:not([style*="font-size"]), font[size="5"] { font-size: 1.3rem !important; line-height: 1.3 !important; }
    p:not([style*="font-size"]), font[size="3"] { font-size: 1rem !important; line-height: 1.6 !important; }

    /* Limpeza de espaços fantasmas do editor */
    .editor-spacer, p:empty { display: none !important; }
}
/* =============================================================================
   3. SISTEMA DE LAYOUT E GRID
   ========================================================================== */
.row { 
    display: flex; 
    flex-wrap: wrap; 
    margin-inline: -15px; 
}

.col-12, .col-md-6, .col-md-4 { 
    width: 100%; 
    padding: 15px; 
    position: relative; 
}

@media (min-width: 768px) {
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }
}

/* Utilitários de Espaçamento */
.spacing-compact { margin-bottom: 0 !important; padding-bottom: 2px !important; line-height: 1.2 !important; }
.spacing-normal { margin-bottom: 1rem; line-height: 1.5; }

/* Utilitários de Imagem */
.img-fluid { max-width: 100%; height: auto; }
.img-sombra { box-shadow: 0 10px 30px rgba(0,0,0,0.3); }

/* ==========================================================================
   4. COMPONENTES GLOBAIS (BOTÕES E LISTAS)
   ========================================================================== */

/* Listas Personalizadas */
ul.list-check, ul.list-arrow, ul.list-star { list-style: none; padding-left: 0; }
ul.list-check li, ul.list-arrow li, ul.list-star li { position: relative; margin-bottom: 4px; }

ul.list-check li { padding-left: 28px; }
ul.list-check li::before { content: "\F26A"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: 2px; color: #198754; font-weight: bold; font-size: 1.1em; }

ul.list-arrow li { padding-left: 25px; }
ul.list-arrow li::before { content: "\F285"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: 2px; color: #0d6efd; font-weight: bold; }

ul.list-star li { padding-left: 25px; }
ul.list-star li::before { content: "\F586"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: 2px; color: #ffc107; }

/* Botões */
.btn-custom {
    display: inline-block; padding: 10px 24px; font-size: 16px; font-weight: bold; text-decoration: none; border: none;
    transition: all 0.3s ease; text-align: center; line-height: 1.5; cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); background-color: var(--btn-bg); color: #fff !important;
}
.btn-custom:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.15); filter: brightness(0.85); color: #fff !important; }
.btn-rounded { border-radius: 50px; }
.btn-square  { border-radius: 0px; } 
.btn-soft    { border-radius: 6px; }

/* Botões UI Editor */
.ui-bg-primary { background-color: #0d6efd !important; color: #fff !important; border: none; }
.ui-bg-primary:hover { background-color: #0b5ed7 !important; color: #fff !important; }

/* ==========================================================================
   5. MÓDULO: HERO (mdl-hero4)
   ========================================================================== */
.mdl-hero4 {
    background-color: var(--hero4-bg, #666);
    background-image: linear-gradient(color-mix(in oklab, var(--hero4-bg) var(--hero4-bg-alpha, 50%), transparent)), var(--hero4-bg-img, none);
    background-size: cover; background-position: center; color: var(--hero4-text-color, #fff);
}
.mdl-hero4__grid { display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; }
.hero-name, .hero-name font { font-weight: 800 !important; color: #fff; }
.hero-section-title, .hero-section-title font { color: var(--brand-title) !important; font-weight: 700 !important; }
.hero-media__video { max-width: 320px; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; margin: 0 auto; }
.video-lcp { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 991px) { .mdl-hero4__grid { grid-template-columns: 1fr; text-align: center; } }
@media (max-width: 768px) {
    /* 1. Explode as linhas e remove margens negativas que "enforcam" o texto */
    #livros-publicados .row, .row.k-element { display: block !important; margin: 0 !important; padding: 0 !important; }
}

   /* ==========================================================================
   6. MÓDULO: CARROSSEL DE IMAGENS
   ========================================================================== */
.carousel-wrapper { position: relative; overflow: hidden; width: 100%; margin: 25px 0; background: #fff; border-radius: 15px; }
.slide-track { display: flex; transition: transform 0.4s ease; width: 100%; }
.slide { flex: 0 0 25%; min-width: 200px; padding: 10px; }
.slide img { width: 100%; border-radius: 12px; object-fit: cover; height: 200px; }
.carousel-wrapper .nav {
    position: absolute; top: 50%; transform: translateY(-50%); background: #fff; border: none; border-radius: 50%;
    width: 40px; height: 40px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex; align-items: center; justify-content: center; z-index: 10;
}
.carousel-wrapper .prev { left: 10px; }
.carousel-wrapper .next { right: 10px; }

@media (max-width: 991px) { .slide { flex: 0 0 85%; } }
/* 7. CONTRATAR CARDS */
.tema-contratar-card { background:#4a4848; padding:25px 20px; border-radius:25px; border:1px solid #3c3c3c; display:flex; flex-direction:column; min-height:420px; transition:transform .3s; box-sizing:border-box; }
.tema-contratar-card:hover { transform:translateY(-5px); }
.tema-contratar-card-header { flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; }
.tema-contratar-img { width:120px; height:120px; border-radius:50%; border:3px solid var(--brand-title); object-fit:cover; margin-bottom:20px; flex-shrink:0; }
.tema-contratar-card h3 { color:var(--brand-title); font:700 1.35rem/1.2 var(--font-base); margin-bottom:12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tema-contratar-card p { color:#ccc; font-size:0.95rem; line-height:1.5; margin-bottom:25px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.tema-contratar-cta { background:var(--brand-title); color:#1a1a1a!important; font:800 1rem var(--font-base); text-align:center; padding:16px; border-radius:12px; text-decoration:none; text-transform:uppercase; margin-top:auto; }

/* 8. TESTEMUNHOS */
.testimonial-card { background:#4a4848; padding:30px; border-radius:20px; border:1px solid #3c3c3c; display:flex; align-items:center; gap:20px; margin-bottom:15px; }
.testimonial-img { width:130px; height:130px; border-radius:20px; object-fit:cover; flex-shrink:0; }
.testimonial-body { flex:1; text-align:left; }
.testimonial-name { color:var(--brand-title); font:800 1.2rem var(--font-base); margin-bottom:4px; }
.testimonial-role { color:#eee; font:0.85rem var(--font-base); text-transform:uppercase; letter-spacing:1px; margin-bottom:12px; opacity:0.8; }
.testimonial-text { color:#ddd; font:italic 1rem/1.6 var(--font-base); }
/* 2. Classe refatorada com altura total */
.card-color-item { 
    display: flex;  flex-direction: column;  padding: 25px 20px;     width: 100%;     height: 100%;    margin: 0;     transition: all .2s; 
    cursor: pointer;     box-sizing: border-box;
}

/* 3. Ajuste para o conteúdo interno (opcional) */
.card-color-item p {     flex-grow: 1;     margin-bottom: 0; }


/* 9. POST GRID (VXRP) */
.vxrp-master-wrapper { position:relative; margin:40px 0; width:100%; }
.vxrp__grid { display:grid; gap:30px 20px; grid-template-columns:repeat(3,1fr); width:100%; }
.vxrp-card { background:0 0; border:none; display:flex; flex-direction:column; height:100%; transition:transform .3s; }
.vxrp-card:hover { transform:translateY(-5px); }
.vxrp-card__img-wrap { aspect-ratio:1/1; overflow:hidden; margin-bottom:15px; }
.vxrp-card__img-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.vxrp-card__body { padding:0; flex:1; display:flex; flex-direction:column; text-align:center; }
.vxrp-card__title { font:700 1.1rem/1.2 sans-serif; margin:0 0 5px; }
.vxrp-card__title a { color:#333; text-decoration:none; }
.vxrp-card__subtitle { font:400 0.9rem/1.2 sans-serif; color:#888; margin:0 0 10px; }
.vxrp-card__desc { font-size:.9rem; color:#666; margin-bottom:15px; line-height:1.4; flex-grow:1; }
.vxrp-card__actions { display:flex; gap:8px; margin-top:auto; }
.vxrp-card__actions a { flex:1; padding:10px 5px; border-radius:8px; text-decoration:none; font-size:11px; font-weight:700; text-transform:uppercase; text-align:center; color:#fff; }
.vxrp-card__actions .btn-agendar { background:#6b5a4b; }
.vxrp-card__actions .btn-info { background:#4e4e4e; }
.btn-remover-grid { position:absolute; top:-12px; right:-12px; background:#dc3545; color:#fff; border:none; width:28px; height:28px; border-radius:50%; font-size:14px; cursor:pointer; z-index:10; display:flex; align-items:center; justify-content:center; }
@media (max-width:768px) { .vxrp__grid { grid-template-columns:1fr!important; } }


/* 10. RESPONSIVIDADE E CARD COLOR (e regras de visibilidade do editor) */
@media (max-width: 768px) {
    :root { --fs-7: 1.4rem; --fs-5: 1.2rem; }
    [style*="padding: 40px"], [style*="padding: 30px"], [style*="padding: 50px"] { padding:20px 15px!important; }
    font[size="7"], .font-title, h1 { font-size:var(--fs-7); line-height:1.2; word-break: break-word; }
    .tema-contratar-card, .testimonial-card { width:100%!important; min-height:auto!important; padding:20px 15px!important; }
    .testimonial-card { flex-direction:column; text-align:center; gap:15px; }
}