/** 
 * 🚀 BUNDLE CSS AUTO-GERADO 
 * Tema: landing-consult 
 * Gerado em: 2026-03-15 22:20:55 
 */

/* 🛠️ Estilo: landing-consult-css */
/* ==========================================================================
   1. FONTES E TIPOGRAFIA (ROBOTO ABSOLUTO)
   ========================================================================== */
@font-face {
    font-family: 'Roboto';
    src: url('../assets/webfonts/roboto-v50-latin-regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('../assets/webfonts/roboto-v50-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: "Roboto", system-ui, sans-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.05rem;  /* Tamanho 3 / p (padrão) */
    --fs-1: 0.85rem;  /* Tamanho 1 / pequeno */
}

* { 
    box-sizing: border-box; 
    font-family: var(--font-base) !important; /* Blindagem contra fontes externas */
}

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; }

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

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

/* ==========================================================================
   CAMADA DE INTELIGÊNCIA RESPONSIVA (Sincronizada com Editor)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. NEUTRALIZAÇÃO DE ESTILOS FIXOS DO EDITOR */
    /* Remove os 50px de padding que o usuário trava no HTML do desktop */
    .landing-page-container [style*="padding: 50px"],
    .landing-page-container [style*="padding: 50px"] .col-12 {
        padding: 30px 15px !important;
    }

    /* 2. AJUSTE DE COLUNAS (GRID) */
    /* Faz as colunas do Bootstrap empilharem mas respeitarem o conteúdo */
    .landing-page-container .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
    }

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

/* ==========================================================================
   CARDS CENTRALIZADOS (Testemunhos e Prefácio)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Força o container do card a ser uma coluna centralizada */
    .testimonial-card, 
    .landing-page-container div:has(> font > span > img), 
    .landing-page-container div:has(> img[style*="float: left"]),
    .landing-page-container .col-md-6 {
        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;
    }

    /* 2. 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 */
    }

    /* 3. Garante que os containers de texto ocupem a largura total */
    .testimonial-body, 
    .landing-page-container font[color="#ffffff"],
    .landing-page-container font:last-of-type,
    .landing-page-container p {
        width: 100% !important;
        text-align: center !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

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

    /* Limpeza de resíduos do editor */
    .editor-spacer, p:empty { display: none !important; }
}
    /* 4. AJUSTE DE COMPONENTES ESPECÍFICOS */
    /* Mockup do Livro e Botões */
    .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;
    }

    /* 5. TIPOGRAFIA DINÂMICA */
    h1, font[size="7"] { font-size: 1.7rem !important; line-height: 1.2; text-align: center !important; display: block; }
    h3, font[size="5"] { font-size: 1.3rem !important; }
    p, font[size="3"] { font-size: 0.95rem !important; }

    /* Limpeza de espaços fantasmas do editor */
    p:empty, .editor-spacer, br + br { 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; } }
/* ===================================================
   AJUSTE DA COLUNA DE VÍDEO NO CELULAR - COMPACTO
   =================================================== */
@media (max-width: 768px) {
    .k-col-selector:has(.bg-video-col) { min-height: 0 !important; aspect-ratio: 16/9; padding: 15px !important; 
      display: flex !important; flex-direction: column; justify-content: center; align-items: center; 
  }
    .bg-video-col { width: 100% !important; height: 100% !important; object-fit: 
      cover !important; top: 0 !important; transform: none !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 */
@media (max-width: 768px) {
    :root { --fs-7: 1.4rem; --fs-5: 1.2rem; }
    .col-12, .col-md-6, .col-md-4, [style*="padding: 40px"], [style*="padding: 30px"] { padding:10px 5px!important; }
    font[size="7"], .font-title, h1 { font-size:var(--fs-7)!important; line-height:1.2!important; text-align:center!important; word-break:keep-all!important; }
    .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; }
    .vxrp-master { --vxrp-cols: 1!important; }
    .vxrp__grid { grid-template-columns:1fr!important; }
    .editor-spacer, p:empty, .vxrp-nav { display:none!important; }
    .row { margin-inline:0; }
}
.card-color-item { display:flex; flex-direction:column; padding:25px 20px; width:100%; margin:10px 0; transition:all .2s; cursor:pointer; }
.card-color-item:hover { transform:translateY(-5px); outline:1px dashed #0d6efd; }
/* ==========================================================================
   GALERIA GRID & LIGHTBOX (VERSÃO CONSOLIDADA)
   ========================================================================== */
/* Container do Modal Escuro */
.lightbox-modal {
    display: none; position: fixed; z-index: 99999; left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.9); align-items: center; justify-content: center;
}
.lightbox-modal.active { display: flex; }

/* Imagem Responsiva no Centro */
.lightbox-content { max-width: 90%; max-height: 85vh; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); object-fit: contain; }

/* Controles */
.lightbox-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 40px; cursor: pointer; transition: 0.2s; }
.lightbox-close:hover { color: #ccc; }

.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); color: white; font-size: 50px; cursor: pointer; user-select: none; padding: 20px; transition: 0.2s; }
.lightbox-nav:hover { color: #ccc; }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

/* Pequeno efeito hover na imagem dentro do post */
.galeria-nav-img:hover { opacity: 0.8; transform: scale(1.02); }

/* ==========================================================================
   11. CATEGORY GRID (VIVA SPACE STYLE) - COMPACTO
   ========================================================================== */
.cat-grid-master { margin: 40px 0; width: 100%; }
.cat-grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cat-card-modern { position: relative; overflow: hidden; border-radius: 0; aspect-ratio: 4/5; display: block; text-decoration: none !important; box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
.cat-card-modern .cat-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.6s ease, filter 0.4s ease; filter: brightness(0.85); }
.cat-card-modern .cat-title { position: absolute; bottom: 25px; left: 25px; margin: 0; color: #fff; font-size: 1.4rem; font-weight: 700; z-index: 2; text-shadow: 1px 1px 4px rgba(0,0,0,0.5); transition: transform 0.3s ease; }
.cat-card-modern:hover .cat-bg { transform: scale(1.05); filter: brightness(0.6); }
.cat-card-modern:hover .cat-title { transform: translateY(-5px); }

@media (max-width: 768px) {
    .cat-grid-container { grid-template-columns: 1fr; gap: 15px; }
    .cat-card-modern .cat-title { font-size: 1.2rem !important; bottom: 20px !important; left: 20px !important; }
    .cat-card-modern .cat-bg { filter: brightness(0.65); }
}

/* Classe Utilitária para Esconder Elementos */
.d-none { 
    display: none !important; 
}

/* Blindagem específica para os botões fantasma do editor */
.btn-remover-grid, 
.btn-remover-grid-ui, 
[onclick*="remove()"] { 
    display: none !important; 
}