/** 
 * 🚀 BUNDLE CSS AUTO-GERADO 
 * Tema: landing-consult 
 * Gerado em: 2026-04-21 22:51:45 
 */

/* 🛠️ Estilo: landing-consult-css */
/* ️ 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}*/
   
   @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: "Playfair Display", Georgia, serif;*/
      --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.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 {
       min-height: 100vh;
       margin: 0;
       color: #333;
       line-height: 1.6;
       text-rendering: optimizeLegibility;
       -webkit-font-smoothing: antialiased;
       font-family: var(--font-base);
       overflow-x: hidden;
   }
   
   /* Sintoniza Tags Padrão com a Escala do Editor */
   h1, h2, h3, h4, h5, h6, p, a, li, span, div, button, input, textarea, select, .font-title { font-family: var(--font-base); }
   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. COLUNAS — empilhar, margens fluidas e gap vertical (espelho do style-dinamico) */
      .landing-page-container .row,
      .row.k-element {
           margin-left: 0 !important;
           margin-right: 0 !important;
           display: flex !important;
           flex-wrap: wrap !important;
          row-gap: 0 !important;
           column-gap: 0 !important;
           width: 100% !important;
           max-width: 100% !important;
       }
   
       .landing-page-container [class*="col-"],
       .row.k-element > [class*="col-"],
       .row.k-element > .k-col-selector,
       .k-col-selector {
           flex: 0 0 100% !important;
           max-width: 100% !important;
           width: 100% !important;
           padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
           padding-right: max(12px, env(safe-area-inset-right, 0px)) !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, br + br { display: none !important; }
   }
   /* =============================================================================
      3. UTILITÁRIOS DE ESPAÇAMENTO E IMAGEM
      ========================================================================== */
   .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) {
       /* Só #livros-publicados — não use .row.k-element aqui (quebra empilhamento Bootstrap no mobile) */
       #livros-publicados .row { 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: transparent; border-radius: 15px; }
   .slide-track { display: flex; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; width: 100%; scrollbar-width: none; -ms-overflow-style: none; }
   .slide-track::-webkit-scrollbar { display: none; }
   .slide { flex: 0 0 25%; min-width: 250px; padding: 10px; scroll-snap-align: start; }
   .slide img { width: 100%; border-radius: 12px; object-fit: cover; height: 200px; background: transparent; }
   .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;
   }
   
   /* Setas do lado de fora em Desktop e Notebooks */
   @media (min-width: 769px) {
       .carousel-wrapper { padding: 0 60px !important; }
       .carousel-wrapper .nav.prev { left: 5px !important; }
       .carousel-wrapper .nav.next { right: 5px !important; }
   }
   
   /* 1 Coluna exata em Celulares */
   @media (max-width: 768px) { 
       .slide { flex: 0 0 100% !important; min-width: 100% !important; padding: 10px 0 !important; } 
       .carousel-wrapper { padding: 0 !important; }
       .carousel-wrapper .nav.prev { left: 10px !important; }
       .carousel-wrapper .nav.next { right: 10px !important; }
   }

   /* Carrossel de posts (editor-destaque): desktop = viewport inteiro; mobile = 100% largura, altura ao conteúdo; setas sobre o slide */
   /* Sobrepõe .carousel-wrapper { margin: 25px 0 } e evita faixa em branco acima do banner */
   .editor-destaque-carousel.carousel-wrapper {
       position: relative;
       margin: 0 !important;
   }
   /* Conteúdo (título, texto, botão) centrado no meio do banner */
   .editor-destaque-carousel .editor-destaque-slide-inner,
   .editor-destaque-carousel .slide > div:first-child {
       display: flex;
       align-items: center;
       justify-content: center;
   }
   .editor-destaque-carousel .editor-destaque-slide-shade {
       pointer-events: none;
   }
   .editor-destaque-carousel .editor-destaque-slide-content,
   .editor-destaque-carousel .slide > div:first-child > div:last-child {
       position: relative;
       z-index: 1;
       width: 100%;
       max-width: min(100%, 560px);
       padding: 1.75rem;
       box-sizing: border-box;
       text-align: center;
   }
   .editor-destaque-carousel .editor-destaque-slide-title,
   .editor-destaque-carousel .editor-destaque-slide-desc {
       text-align: center;
   }
   @media (min-width: 769px) {
       .editor-destaque-carousel.carousel-wrapper {
           width: 100vw;
           max-width: none;
           margin-left: calc(50% - 50vw);
           margin-right: calc(50% - 50vw);
           margin-top: 0;
           margin-bottom: 0;
           min-height: 100vh;
           padding: 0 !important;
           border-radius: 0 !important;
       }
       /* Cola o hero ao header fixo: remove o “respiro” do padding-top do body (60px) sem deixar texto sob a navbar */
       body.has-fixed-nav main.landing-page-container > .row:first-child .editor-destaque-carousel.carousel-wrapper,
       body.has-fixed-nav main.landing-page-container > .editor-destaque-carousel.carousel-wrapper:first-child {
           margin-top: -60px !important;
       }
       body.has-fixed-nav main.landing-page-container > .row:first-child .editor-destaque-carousel.carousel-wrapper .editor-destaque-slide-inner,
       body.has-fixed-nav main.landing-page-container > .editor-destaque-carousel.carousel-wrapper:first-child .editor-destaque-slide-inner,
       body.has-fixed-nav main.landing-page-container > .row:first-child .editor-destaque-carousel.carousel-wrapper .slide > div:first-child,
       body.has-fixed-nav main.landing-page-container > .editor-destaque-carousel.carousel-wrapper:first-child .slide > div:first-child {
           padding-top: 60px;
           box-sizing: border-box;
       }
       .editor-destaque-carousel .slide-track,
       .editor-destaque-carousel .editor-destaque-track {
           min-height: 100vh;
           height: 100vh;
       }
       .editor-destaque-carousel .slide.editor-destaque-slide,
       .editor-destaque-carousel .slide {
           flex: 0 0 100% !important;
           min-width: 100% !important;
           min-height: 100vh !important;
           height: 100vh;
           padding: 0 !important;
       }
       .editor-destaque-carousel .editor-destaque-slide-inner,
       .editor-destaque-carousel .slide > div:first-child {
           min-height: 100vh !important;
           height: 100%;
           box-sizing: border-box;
           display: flex;
           align-items: center;
           justify-content: center;
       }
       .editor-destaque-carousel .nav,
       .editor-destaque-carousel .editor-destaque-nav {
           top: 50%;
           transform: translateY(-50%);
           z-index: 20 !important;
           box-shadow: 0 4px 16px rgba(0,0,0,0.35);
       }
       .editor-destaque-carousel .nav.prev { left: 12px !important; right: auto !important; }
       .editor-destaque-carousel .nav.next { right: 12px !important; left: auto !important; }
   }
   @media (max-width: 768px) {
       .editor-destaque-carousel.carousel-wrapper {
           width: 100% !important;
           margin-left: 0 !important;
           margin-right: 0 !important;
           margin-top: 0 !important;
           margin-bottom: 0 !important;
           min-height: auto !important;
           border-radius: 12px;
       }
       .editor-destaque-carousel .slide-track,
       .editor-destaque-carousel .editor-destaque-track {
           height: auto !important;
           min-height: 0 !important;
       }
       .editor-destaque-carousel .slide.editor-destaque-slide,
       .editor-destaque-carousel .slide {
           height: auto !important;
           min-height: auto !important;
       }
       .editor-destaque-carousel .editor-destaque-slide-inner,
       .editor-destaque-carousel .slide > div:first-child {
           min-height: 280px !important;
           height: auto !important;
       }
       .editor-destaque-carousel .nav,
       .editor-destaque-carousel .editor-destaque-nav {
           z-index: 20 !important;
           top: 50%;
           transform: translateY(-50%);
       }
       .editor-destaque-carousel .nav.prev { left: 8px !important; }
       .editor-destaque-carousel .nav.next { right: 8px !important; }
   }
   /* 7. CONTRATAR CARDS — cores via variáveis no <article> (editor: Card contratar / seção 3. Cores) */
   .tema-contratar-card {
       background: var(--contratar-bg, #4a4848);
       padding: 25px 20px;
       border-radius: 25px;
       border: 1px solid #3c3c3c;
       display: flex;
       flex-direction: column;
       min-height: 420px;
       transition: transform 0.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(--contratar-img-border, var(--brand-title));
       object-fit: cover;
       margin-bottom: 20px;
       flex-shrink: 0;
   }
   .tema-contratar-card h3 {
       color: var(--contratar-title, var(--brand-title));
       font: 700 1.55rem/1.25 var(--font-base);
       margin-bottom: 12px;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
   }
   .tema-contratar-card p {
       color: var(--contratar-desc, #ccc);
       font-size: 1.08rem;
       line-height: 1.55;
       margin-bottom: 25px;
       display: -webkit-box;
       -webkit-line-clamp: 3;
       -webkit-box-orient: vertical;
       overflow: hidden;
   }
   .tema-contratar-cta {
       background: var(--contratar-cta-bg, var(--brand-title));
       color: var(--contratar-cta-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); }
   /* Card colorido (ícone + título + texto) — título e corpo um pouco maiores (o editor ainda injeta font-size inline; !important garante no site) */
   .card-color-item {
       display: flex;
       flex-direction: column;
       padding: 15px !important;
       width: 100%;
       height: auto !important;
       margin: 0;
       transition: all 0.2s;
       cursor: pointer;
       box-sizing: border-box;
   }
   .card-color-item h4 {
       font-size: 1.3rem !important;
       line-height: 1.3 !important;
       font-weight: 700 !important;
   }
   .card-color-item p {
       flex-grow: 1;
       margin-bottom: 0;
       font-size: 1.08rem !important;
       line-height: 1.55 !important;
   }
   
   
   /* 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 var(--font-base); margin:0 0 5px; }
   .vxrp-card__title a { color:#333; text-decoration:none; }
   .vxrp-card__subtitle { font:400 0.9rem/1.2 var(--font-base); 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; }
   }
   
   /* ==========================================================================
      11. AJUSTES DO GRID DE CATEGORIAS (cat-card-modern)
      ========================================================================== */
   /* Força a altura maior e remove as bordas arredondadas dos grids já inseridos */
   .cat-card-modern {
       min-height: 450px !important;
       border-radius: 0 !important;
   }
   .cat-card-modern img,
   .cat-card-modern div[style*="background:linear-gradient"] {
       border-radius: 0 !important;
   }
   
   /* ==========================================================================
      EFEITO HOVER (ZOOM) NO GRID DE CATEGORIAS
      ========================================================================== */
   .cat-card-modern img {
       transition: transform 0.4s ease !important;
   }
   .cat-card-modern:hover img {
       transform: scale(1.1) !important;
   }
   
   /* ==========================================================================
      GRIDS DO EDITOR: full-bleed só ≥769px; mobile fluido sem 100vw
      ========================================================================== */
   @media (min-width: 769px) {
       .row.k-element {
           margin-bottom: 0 !important;
           width: 100vw !important;
           max-width: 100vw !important;
           margin-left: calc(-50vw + 50%) !important;
           margin-right: calc(-50vw + 50%) !important;
           display: flex !important;
           flex-wrap: wrap !important;
       }
       .row.k-element > .col-12, .row.k-element > .col-md-12 {
           flex: 0 0 100% !important;
           max-width: 100% !important;
       }
   }
   
   @media (max-width: 768px) {
      .row.k-element {
           width: 100% !important;
           max-width: 100% !important;
           margin-left: 0 !important;
           margin-right: 0 !important;
           margin-bottom: 0 !important;
           display: flex !important;
           flex-wrap: wrap !important;
          row-gap: 0 !important;
       }
   }
   
   [class*="col-"] .row.k-element {
       width: 100% !important;
       max-width: 100% !important;
       margin-left: 0 !important;
       margin-right: 0 !important;
       margin-bottom: 1.25rem !important;
       display: flex !important;
       flex-wrap: wrap !important;
       row-gap: 1rem !important;
   }
  @media (max-width: 768px) {
      [class*="col-"] .row.k-element {
          margin-bottom: 0 !important;
          /* Colunas internas: antes row-gap 0 colava blocos (Serviços / listas / etc.) */
          row-gap: 1rem !important;
          column-gap: 0.75rem !important;
      }
      /* Respiro horizontal extra só em colunas dentro de outra coluna (grid aninhado) */
      .landing-page-container [class*="col-"] [class*="col-"],
      .landing-page-container [class*="col-"] > .k-col-selector,
      .landing-page-container [class*="col-"] .row.k-element > .k-col-selector {
          padding-left: max(18px, env(safe-area-inset-left, 0px)) !important;
          padding-right: max(18px, env(safe-area-inset-right, 0px)) !important;
      }
  }
   @media (min-width: 769px) {
       [class*="col-"] .row.k-element {
           margin-bottom: 25px !important;
       }
   }
   
   /* ==========================================================================
      MODAL E GRID DA GALERIA DE IMAGENS
      ========================================================================== */
   /* Estilos do Modal Lightbox */
   #galeria {
       background-color: rgba(0, 0, 0, 0.85) !important;
       backdrop-filter: blur(4px);
   }
   .btn-nav-galeria {
       position: absolute; top: 50%; transform: translateY(-50%);
       background: rgba(0, 0, 0, 0.5); color: #fff; border: none; border-radius: 50%;
       width: 50px; height: 50px; font-size: 24px; z-index: 1055; transition: 0.3s;
       display: flex; align-items: center; justify-content: center;
   }
   .btn-nav-galeria:hover { background: rgba(0, 0, 0, 0.9); color: #fff; }
   
   /* Força 3 colunas no celular (sobresscrevendo a regra global de 100%) */
   @media (max-width: 768px) {
       .landing-page-container .galeria-container [class*="col-"],
       .galeria-container [class*="col-"] {
           flex: 0 0 33.3333% !important;
           max-width: 33.3333% !important;
           padding: 4px !important; /* Espaçamento menor entre as fotos */
       }
       /* Botões de passar foto ligeiramente menores no mobile */
       .btn-nav-galeria {
           width: 40px; height: 40px; font-size: 20px;
       }
   }
   
   /* ==========================================================================
      12. PAINEL — EDITOR VISUAL (espelho da página pública)
      Ordem: style-dinamico.css → este ficheiro (correcões / UX do canvas).
      painel-mestre.css trata layout/navegação do ADM e exclui .visual-editor da
      fonte Roboto do painel; não deve impor tipografia ao canvas — isso fica aqui.
      ========================================================================== */
   
   /* Barra do editor: acima do canvas e da coluna lateral (nomear seção); tooltips sem clip */
   #editor-col .card {
       overflow: visible !important;
       position: relative;
       z-index: 40 !important;
   }
   #editor-col .card-header {
       position: relative;
       z-index: 50;
       overflow: visible !important;
       background: #f8f9fa !important;
       border-bottom: 1px solid #dee2e6;
   }
   #editor-col .card-body {
       position: relative;
       z-index: 1;
       overflow: visible !important;
   }
   #sidebar-col {
       position: relative;
       z-index: 10;
   }
   @media (max-width: 991.98px) {
       /* Sobrepor painel-mestre (#editor-col { z-index: 1 }) — área de edição + barra acima da coluna de identificação */
       #editor-col {
           z-index: 50 !important;
           position: relative;
       }
       #sidebar-col {
           z-index: 10 !important;
       }
   }
   
   /* Barra de ferramentas: scroll horizontal; altura ampla para ícones + balões (ui-links).
      Tooltips em CSS ficam cortados se o balão for para cima — aqui repetimos o padrão
      preto de ui-links.php com o balão ABAIXO do botão. */
   .editor-toolbar-master {
       position: sticky;
       top: 0;
       z-index: 1070;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
       overflow: visible;
       background: #f8f9fa !important;
   }
   .editor-toolbar-inner {
       min-height: 56px;
       align-items: stretch;
   }
   .editor-toolbar-scroll {
       overflow-x: auto;
       overflow-y: hidden;
       -webkit-overflow-scrolling: touch;
       scrollbar-width: thin;
       padding: 12px 12px 14px;
       min-height: 56px;
       box-sizing: border-box;
       align-items: center;
   }
   .editor-toolbar-scroll::-webkit-scrollbar {
       height: 8px;
   }
   .editor-toolbar-scroll::-webkit-scrollbar-thumb {
       background: rgba(0, 0, 0, 0.15);
       border-radius: 4px;
   }
   .editor-toolbar-mode {
       min-width: fit-content;
       padding: 12px 12px 14px;
       align-self: stretch;
       align-items: center;
   }
   .editor-tb-group .btn-ui,
   .editor-tb-group .form-select {
       flex-shrink: 0;
   }
   /* Sem "levantar" o botão no hover — o translateY do painel-mestre cortava ícones */
   .editor-toolbar-master .btn-ui:hover,
   .editor-toolbar-master .btn-ui:focus-visible {
       transform: none !important;
   }
   .editor-toolbar-master .btn-ui {
       min-height: 40px;
       min-width: 40px;
   }
   .editor-toolbar-master .vr {
       min-height: 2rem;
       align-self: center;
   }
   /* Dropdowns dentro da zona com overflow: menu acima do canvas (Popper fixed + z-index) */
   .editor-toolbar-master .dropdown-menu {
       z-index: 1070;
   }
   
   /* Tooltips da barra: Bootstrap (container body) — inicializar em editor-helper.js inline.
      Desliga o ::after global do painel para não duplicar nem cortar no overflow-x. */
   .editor-toolbar-master [data-k-tooltip]::after,
   .editor-toolbar-master [data-k-tooltip]::before,
   .editor-page-actions-bar [data-k-tooltip]::after,
   .editor-page-actions-bar [data-k-tooltip]::before {
       display: none !important;
       content: none !important;
   }
   .tooltip.editor-toolbar-tooltip-bs {
       z-index: 10900 !important;
   }
   .tooltip.editor-toolbar-tooltip-bs .tooltip-inner {
       background-color: #000000;
       color: #ffffff;
       font-size: 11px;
       line-height: 1.35;
       max-width: min(280px, 92vw);
       text-align: center;
       padding: 6px 10px;
       border-radius: 8px;
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
   }
   .tooltip.editor-toolbar-tooltip-bs .tooltip-arrow::before {
       border-bottom-color: #000000 !important;
   }
   .tooltip.editor-toolbar-tooltip-bs.bs-tooltip-top .tooltip-arrow::before,
   .tooltip.editor-toolbar-tooltip-bs[data-popper-placement^="top"] .tooltip-arrow::before {
       border-top-color: #000000 !important;
   }
   
   @media (max-width: 991.98px) {
       .editor-toolbar-master {
           position: relative;
       }
       .editor-toolbar-mode {
           border-left: 1px solid #dee2e6 !important;
       }
   }
   
   /* Área editável: herda variáveis do :root (style-dinamico + este ficheiro) */
   .visual-editor,
   .visual-editor * {
       font-family: var(--font-base, "Roboto", sans-serif);
   }
   .visual-editor {
       min-height: min(450px, 70vh);
       max-height: 75vh;
       overflow-y: auto;
       width: 100%;
       box-sizing: border-box;
       outline: none;
       color: #333;
       line-height: 1.6;
       padding: clamp(12px, 2vw, 20px);
   }
   .visual-editor h1,
   .visual-editor .font-title {
       font-size: var(--fs-7);
       color: var(--brand-title);
       font-weight: 800;
       line-height: 1.1;
   }
   .visual-editor h2 {
       font-size: var(--fs-6);
       font-weight: 700;
   }
   .visual-editor h3 {
       font-size: var(--fs-5);
       font-weight: 700;
   }
   .visual-editor p {
       font-size: var(--fs-3);
       margin-bottom: 1.2rem;
   }
   
   .code-editor {
       background: #1e1e1e !important;
       color: #9cdcfe !important;
       font-family: Consolas, Monaco, "Courier New", monospace !important;
       font-size: 14px !important;
       padding: clamp(12px, 2vw, 20px) !important;
       width: 100%;
       min-height: min(450px, 70vh);
       max-height: 75vh;
       overflow-y: auto;
   }
   
   .visual-editor section.section {
       border: 1px dashed rgba(128, 128, 128, 0.3);
       position: relative;
       margin-bottom: 5px;
   }
   /* Espaçador: no site público não mostrar linha tracejada (só guia no editor) */
   .editor-spacer {
       border: none;
       display: block;
       width: 100%;
       height: 20px;
       clear: both;
   }
   .visual-editor .editor-spacer {
       border-top: 1px dashed #ccc;
   }
   
   .k-block-selected {
       outline: 3px solid #0d6efd !important;
       outline-offset: 2px;
       box-shadow: 0 0 10px rgba(13, 110, 253, 0.3);
   }
   
   /* Permite limitar o <video> com 100cqi (largura da coluna) sem esticar o wrapper ao max-content da coluna inteira */
   .visual-editor .k-col-selector {
       border: 1px dashed #666 !important;
       position: relative;
       container-type: inline-size;
       container-name: editor-col;
   }
   .visual-editor .k-col-selector::after {
       content: "col";
       position: absolute;
       top: 0;
       left: 2px;
       font-size: 9px;
       color: #666;
       text-transform: uppercase;
       pointer-events: none;
   }
   
   .visual-editor .btn-grid-actions-ui {
       position: absolute !important;
       top: 0 !important;
       right: 0 !important;
       z-index: 90 !important;
       display: flex !important;
       gap: 3px !important;
       background: rgba(255, 255, 255, 0.95) !important;
       padding: 3px !important;
       border-bottom-left-radius: 8px !important;
       border-left: 1px solid #ced4da !important;
       border-bottom: 1px solid #ced4da !important;
       box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.08) !important;
   }
   .visual-editor .k-col-selector .k-col-selector > .btn-grid-actions-ui {
       top: 28px !important;
       right: 15px !important;
       z-index: 91 !important;
       border-top: 1px solid #ced4da !important;
   }
   .visual-editor .k-col-selector .k-col-selector .k-col-selector > .btn-grid-actions-ui {
       top: 56px !important;
       right: 30px !important;
       z-index: 92 !important;
   }
   .visual-editor .btn-grid-actions-ui button {
       background: #f8f9fa !important;
       border: 1px solid #ced4da !important;
       color: #495057 !important;
       border-radius: 4px !important;
       width: 24px !important;
       height: 24px !important;
       display: flex !important;
       align-items: center !important;
       justify-content: center !important;
       cursor: pointer !important;
       padding: 0 !important;
       font-size: 13px !important;
   }
   .visual-editor .btn-grid-actions-ui button:hover {
       background: #e2e6ea !important;
   }
   .visual-editor .btn-grid-actions-ui .btn-remover-grid-ui:hover {
       background: #dc3545 !important;
       color: #fff !important;
       border-color: #dc3545 !important;
   }
   .visual-editor .btn-grid-actions-ui .btn-selecionar-grid-ui:hover {
       background: #0d6efd !important;
       color: #fff !important;
       border-color: #0d6efd !important;
   }
   
   /* Overlay de grid (substitui regra removida do painel-mestre sobre estes botões) */
   .visual-editor .btn-remover-grid-ui,
   .visual-editor .btn-selecionar-grid-ui {
       display: inline-flex !important;
       align-items: center;
       justify-content: center;
       z-index: 100;
   }
   
   /*
    * Vídeo: borda de seleção = exact fit na mídia (vence width:100% inline de HTML antigo).
    * Só estica à coluna com data-v-fullwidth="1" (Largura 100% no modal).
    */
   .visual-editor .video-card-container:not([data-v-fullwidth="1"]) {
       position: relative;
       display: flex;
       flex-direction: column;
       align-items: center;
       width: max-content !important;
       max-width: 100% !important;
       margin-left: auto;
       margin-right: auto;
       box-sizing: border-box;
       padding: 0;
       line-height: 0;
       min-width: 0;
   }
   .visual-editor .video-card-container[data-v-fullwidth="1"] {
       display: flex;
       flex-direction: column;
       align-items: stretch;
       width: 100% !important;
       max-width: 100% !important;
       margin-left: auto;
       margin-right: auto;
       box-sizing: border-box;
       padding: 0;
       line-height: 0;
   }
   .visual-editor .video-card-container video {
       pointer-events: none;
       display: block;
       box-sizing: border-box;
       margin: 0;
       flex-shrink: 0;
       /* Nunca ultrapassar o bloco (evita vídeo “gigante” se o insert falhar fora da coluna). */
       max-width: 100%;
   }
   /*
    * Modo Largura auto: não usar max-width:% no inline — a % resolve pela COLUNA e o wrapper
    * passava a ter largura = coluna inteira (sobra branca à direita do vídeo vertical).
    * Aqui o teto é a coluna via 100cqi, sem forçar o bloco a largura total.
    */
   .visual-editor .video-card-container.video-card--auto video {
       width: auto !important;
       height: auto !important;
       min-width: 0;
   }
   /* Fallback sem container queries: vertical com teto fixo; horizontal limitado à largura útil */
   .visual-editor .video-card-container.video-card--auto[data-v-orient="vertical"] video {
       max-width: 350px !important;
   }
   .visual-editor .video-card-container.video-card--auto[data-v-orient="horizontal"] video {
       max-width: 100% !important;
   }
   @supports (width: 1cqi) {
       .visual-editor .video-card-container.video-card--auto[data-v-orient="vertical"] video {
           max-width: min(350px, 100cqi) !important;
       }
       .visual-editor .video-card-container.video-card--auto[data-v-orient="horizontal"] video {
           max-width: 100cqi !important;
       }
   }
   /* Contorno de seleção colado ao bloco (menos “ar” entre o vídeo e o azul) */
   .visual-editor .video-card-container.k-block-selected {
       outline-offset: 0 !important;
   }
   /* Imagens da galeria na coluna: centralizadas quando não usam float de alinhamento */
   .visual-editor img.img-fluid {
       display: block;
       max-width: 100%;
       height: auto;
   }
   .visual-editor img.img-fluid:not([style*="float"]) {
       margin-left: auto;
       margin-right: auto;
   }
   
   body .visual-editor [data-k-tooltip]::after,
   .painel [data-k-tooltip]::after {
       background: #212529 !important;
       color: #ffffff !important;
   }
   
   /* Mesma especificidade que painel-mestre (.visual-editor .btn-remover-grid); este ficheiro carrega depois */
   .visual-editor .btn-remover-grid {
       display: none !important;
   }
   .visual-editor .k-element:hover > .btn-remover-grid,
   .visual-editor .cat-grid-master:hover .btn-remover-grid {
       display: flex !important;
   }
   
   /* Dropdown "Inserir colunas (grid)": popper fixed + z-index acima da toolbar/sticky */
   .ui-page-container .editor-toolbar-master .editor-toolbar-dropdown-grid .dropdown-menu {
       min-width: 11rem;
       z-index: 1085 !important;
   }
   
   @media (max-width: 768px) {
       .visual-editor {
           max-height: 65vh;
       }
       .code-editor {
           max-height: 65vh;
       }
   }