/* ============================================================
   Frontend Styles - Site Personalizável
   ============================================================ */

/* General */
html {
    scroll-behavior: smooth;
    /* Os links de âncora param abaixo do menu fixo: a altura acompanha a
       configuração (Temas & Aparência → Barra de Navegação) */
    scroll-padding-top: var(--header-height, 80px);
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ============================================================
   Header / Menu
   ------------------------------------------------------------
   Cores e MEDIDAS são variáveis escritas pelo layout a partir de
   Temas & Aparência → Barra de Navegação (--header-*). Cada var tem
   um fallback aqui, então o site continua correto mesmo sem config.
   ============================================================ */
.site-header {
    position: relative;
    z-index: 1030;
    /* Sombra do scroll: parte de uma sombra "vazia" para a transição
       interpolar (o Bootstrap troca .shadow com !important ao rolar). */
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    transition: box-shadow var(--header-transition, 400ms) var(--header-ease, ease);
}

/* Fixo ao rolar (liga/desliga no painel) */
.site-header-sticky {
    position: sticky;
    top: 0;
    z-index: 1030;
}

.site-header .navbar {
    padding: var(--header-padding, 12.8px) 0;
    background-color: var(--navbar-bg, #ffffff);
    transition: padding var(--header-transition, 400ms) var(--header-ease, ease),
                box-shadow var(--header-transition, 400ms) var(--header-ease, ease);
}

.site-header .navbar-brand {
    color: var(--navbar-text, #1b3a5c);
    transition: font-size var(--header-transition, 400ms) var(--header-ease, ease);
}

/* Logo: altura configurável (normal e encolhida) */
.site-header .navbar-brand img {
    height: var(--header-logo-h, 80px);
    width: auto;
    transition: height var(--header-transition, 400ms) var(--header-ease, ease);
}

.site-header .nav-link {
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    transition: color var(--header-hover-speed, 0.3s) var(--header-ease, ease);
    color: var(--navbar-text, #1b3a5c);
    position: relative;
    /* O desenho do hover é um ::after atrás do texto: o contexto de
       empilhamento mantém o fundo (pílula/realce) atrás das letras */
    z-index: 0;
}

.site-header .nav-link:hover,
.site-header .nav-link.active {
    color: var(--navbar-hover, #0e8c6a) !important;
}

/* ---------- Efeito de hover dos itens do menu ----------
   A escolha do cliente (Temas & Aparência) vira a classe nav-hover-* no
   <header>; o mesmo desenho marca o item da página atual ("clicado").
     nav-hover-underline-left    linha que cresce da esquerda
     nav-hover-underline-center  linha que cresce do centro
     nav-hover-underline-top     linha no topo do item
     nav-hover-bg-pill           fundo em pílula
     nav-hover-bg-rise           realce que sobe
     nav-hover-text-only         somente a cor do texto
   Sem classe (HTML antigo em cache) vale o desenho padrão: a linha. */
.site-header .nav-link::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: -1;
    left: 1rem;
    right: 1rem;
    bottom: 0.15rem;
    height: var(--header-hover-thickness, 2px);
    border-radius: 99px;
    background: linear-gradient(90deg, var(--navbar-hover, #0e8c6a), color-mix(in srgb, var(--navbar-hover, #0e8c6a) 40%, transparent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--header-hover-speed, 0.3s) var(--header-ease, ease),
                opacity var(--header-hover-speed, 0.3s) var(--header-ease, ease);
}

.site-header .nav-link:hover::after,
.site-header .nav-link.active::after {
    transform: scaleX(1);
}

/* Linha crescendo do centro */
.site-header.nav-hover-underline-center .nav-link::after {
    transform-origin: center;
}

/* Linha no topo do item */
.site-header.nav-hover-underline-top .nav-link::after {
    bottom: auto;
    top: 0.1rem;
}

/* Fundo em pílula (destaque suave, aparece por opacidade) */
.site-header.nav-hover-bg-pill .nav-link::after {
    top: 0.25rem;
    bottom: 0.25rem;
    left: 0.5rem;
    right: 0.5rem;
    height: auto;
    border-radius: 999px;
    background: color-mix(in srgb, var(--navbar-hover, #0e8c6a) 14%, transparent);
    opacity: 0;
    transform: none;
}

.site-header.nav-hover-bg-pill .nav-link:hover::after,
.site-header.nav-hover-bg-pill .nav-link.active::after {
    opacity: 1;
    transform: none;
}

/* Realce que sobe (fundo cresce de baixo para cima) */
.site-header.nav-hover-bg-rise .nav-link::after {
    top: 0;
    bottom: 0;
    left: 0.35rem;
    right: 0.35rem;
    height: auto;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--navbar-hover, #0e8c6a) 13%, transparent);
    opacity: 1;
    transform: scaleY(0);
    transform-origin: bottom;
}

.site-header.nav-hover-bg-rise .nav-link:hover::after,
.site-header.nav-hover-bg-rise .nav-link.active::after {
    transform: scaleY(1);
}

/* Somente a cor do texto */
.site-header.nav-hover-text-only .nav-link::after {
    display: none;
}

/* ---------- Menu transparente sobre a imagem principal ----------
   Modelo escolhido em Temas & Aparência → Barra de Navegação. Vale apenas
   nas páginas que começam com um bloco de mídia (herói/imagem) — o layout só
   marca <html class="header-over-media"> nesse caso, então uma página branca
   nunca recebe texto branco.
   No topo da página: o menu fica POR CIMA da imagem, sem fundo, com o texto
   claro. Ao rolar (--header-solid-at / data-solid-at) o JS marca .is-solid e
   a barra volta a ser sólida, com as cores configuradas — na mesma duração e
   curva das outras medidas (--header-transition / --header-ease). */
.header-over-media .site-header-transparent {
    /* Sobe o primeiro bloco para trás do menu: o herói começa no topo da página.
       O recuo usa --header-live-h (altura REAL da barra, medida pelo JS) e cai
       para --header-height quando o JS não roda — a estimativa da Library só
       conta padding + logo e erra por alguns pixels (faixa branca no topo). */
    margin-bottom: calc(-1 * var(--header-live-h, var(--header-height, 80px)));
}

.site-header-transparent .navbar {
    background-color: transparent;
    box-shadow: none !important;
    transition: background-color var(--header-transition, 400ms) var(--header-ease, ease),
                padding var(--header-transition, 400ms) var(--header-ease, ease);
}

/* Texto e logo enquanto a barra está sobre a imagem: cor escolhida no painel
   (--header-transparent-text), com o branco como padrão. */
.site-header-transparent .navbar .navbar-brand,
.site-header-transparent .navbar .nav-link {
    color: var(--header-transparent-text, #ffffff);
    transition: color var(--header-transition, 400ms) var(--header-ease, ease);
}

.site-header-transparent .navbar .nav-link:hover,
.site-header-transparent .navbar .nav-link.active {
    color: var(--header-transparent-text, #ffffff);
}

.site-header-transparent .navbar-light .navbar-toggler {
    border-color: color-mix(in srgb, var(--header-transparent-text, #ffffff) 35%, transparent);
}

/* Ícone do botão do celular desenhado por MÁSCARA: um SVG em data URI não lê
   variável CSS, então a cor escolhida no painel não chegaria ao desenho. Com a
   máscara, o desenho é preenchido por background-color (a cor configurada) e
   acompanha tanto o modo transparente quanto o sólido. */
.site-header-transparent .navbar-light .navbar-toggler-icon {
    background-image: none;
    background-color: var(--header-transparent-text, #ffffff);
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center / 100% 100% no-repeat;
}

/* Garante o respiro do conteúdo do herói abaixo do menu (o herói pode ter
   sido configurado com um padding menor que a altura da barra). */
.header-over-media .pb-section-hero:first-of-type {
    padding-top: calc(var(--header-live-h, var(--header-height, 80px)) + 1.5rem) !important;
}

/* Ao rolar: barra sólida (cores do painel) e texto escuro de novo */
.site-header-transparent.is-solid .navbar {
    background-color: var(--navbar-bg, #ffffff);
    box-shadow: none !important;
}

.site-header-transparent.is-solid .navbar .navbar-brand,
.site-header-transparent.is-solid .navbar .nav-link {
    color: var(--navbar-text, #1b3a5c);
}

.site-header-transparent.is-solid .navbar .nav-link:hover,
.site-header-transparent.is-solid .navbar .nav-link.active {
    color: var(--navbar-hover, #0e8c6a) !important;
}

.site-header-transparent.is-solid .navbar-light .navbar-toggler {
    border-color: rgba(0, 0, 0, 0.1);
}

/* Sólida: o mesmo desenho (máscara) passa a usar a cor do texto da Navbar */
.site-header-transparent.is-solid .navbar-light .navbar-toggler-icon {
    background-color: var(--navbar-text, #1b3a5c);
}

/* Dropdown (submenu) no navbar */
.site-header .dropdown-menu {
    background-color: var(--navbar-bg, #ffffff);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.6rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    padding: 0.4rem;
}

.site-header .dropdown-item {
    color: var(--navbar-text, #1b3a5c);
    border-radius: 0.4rem;
    font-weight: 500;
    padding: 0.45rem 0.9rem;
}

.site-header .dropdown-item:hover,
.site-header .dropdown-item:focus,
.site-header .dropdown-item.active {
    color: var(--navbar-hover, #0e8c6a);
    background-color: color-mix(in srgb, var(--navbar-hover, #0e8c6a) 12%, transparent);
}

/* Menu que encolhe ao rolar (opcional — Temas & Aparência → Barra de Navegação)
   ------------------------------------------------------------
   Com a opção ligada, o JS marca o header com .is-scrolled (a partir do
   ponto configurado em --header-scroll-at / data-shrink-at): a barra fica
   mais compacta, a logo reduz e, nas telas largas, o conteúdo se estreita
   (.nav-shrink-narrow + --header-shrink-width).
   Todas as medidas usam a MESMA duração/curva (--header-transition /
   --header-ease), para a transição ser homogênea em vez de um pulo. O fundo
   continua ocupando a largura toda de propósito: como o menu fica fixo, uma
   barra mais estreita que a página deixaria o conteúdo passar pelas
   laterais. Sem a opção, nada muda. */
.site-header-shrink.is-scrolled .navbar {
    padding: var(--header-shrink-padding, 4.8px) 0;
}

.site-header-shrink.is-scrolled .navbar .navbar-brand {
    font-size: 1.15rem;
}

.site-header-shrink.is-scrolled .navbar .navbar-brand img {
    height: var(--header-shrink-logo-h, 52px);
}

@media (min-width: 1200px) {
    .site-header-shrink .navbar > .container {
        transition: max-width var(--header-transition, 400ms) var(--header-ease, ease);
    }

    .site-header-shrink.nav-shrink-narrow.is-scrolled .navbar > .container {
        max-width: var(--header-shrink-width, 1000px);
    }
}

/* Acessibilidade: com "reduzir animações" ligado no sistema/navegador, o
   ENFEITE do menu fica instantâneo (cor e desenho do hover).
   As MEDIDAS da barra (altura, logo, largura) continuam animando com a
   duração escolhida em Temas & Aparência → Barra de Navegação: aqui um
   `transition: none` fazia o menu PULAR de um tamanho para o outro em quem
   usa essa preferência, e o encolhimento parecia não ter transição. */
@media (prefers-reduced-motion: reduce) {
    .site-header .nav-link,
    .site-header .nav-link::after {
        transition: none;
    }
}

/* Page Builder Sections */
.pb-section {
    padding: 4rem 0;
}

.pb-section:nth-child(even) {
    background-color: #f8f9fa;
}

/* Hero Section */
.pb-hero {
    padding: 6rem 0;
}

.pb-hero .pb-main-title {
    font-size: 3.5rem;
    font-weight: 700;
}

.pb-hero .lead {
    font-size: 1.3rem;
    max-width: 700px;
    margin: 0 auto;
}

/* CTA Section */
.pb-cta {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
}

.pb-cta .pb-main-title,
.pb-cta p {
    color: white;
}

.pb-cta .btn-primary {
    background-color: white;
    color: var(--primary-color);
    border: none;
}

.pb-cta .btn-primary:hover {
    background-color: rgba(255,255,255,0.9);
}

/* Contact Form */
.pb-contact-form .form-control {
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}

.pb-contact-form .form-control:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-color), 0.25);
}

/* FAQ */
.pb-faq .accordion-button:not(.collapsed) {
    background-color: rgba(var(--primary-color), 0.1);
    color: var(--primary-color);
}

.pb-faq .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-color), 0.25);
}

/* Testimonials */
.pb-section-testimonial .card {
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border-radius: 1rem;
}

.pb-section-testimonial .card-text {
    font-style: italic;
    color: #555;
}

/* Gallery */
.pb-section-gallery img {
    transition: transform 0.3s;
    cursor: pointer;
}

.pb-section-gallery img:hover {
    transform: scale(1.05);
}

/* Spacer */
.pb-spacer {
    width: 100%;
}

/* Blog */
.blog-card {
    border: none;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
    border-radius: 1rem;
    transition: transform 0.3s;
    overflow: hidden;
}

.blog-card:hover {
    transform: translateY(-5px);
}

.blog-card .card-img-top {
    height: 200px;
    object-fit: cover;
}

.blog-card .card-body {
    padding: 1.5rem;
}

/* Footer — cores gerenciadas via vars (Temas & Aparência) */
.site-footer {
    margin-top: auto;
    background-color: var(--footer-bg, #1b3a5c);
    color: var(--footer-text, #ffffff);
}

.site-footer a {
    color: var(--footer-link, #e8eef5);
    text-decoration: none;
    transition: color 0.3s, opacity 0.3s;
}

.site-footer a:hover {
    color: var(--footer-link-hover, #7fe0bf);
    opacity: 1;
}

.site-footer .footer-heading {
    color: var(--footer-heading, #ffffff);
    font-weight: 700;
    margin-bottom: 1rem;
}

.site-footer .footer-muted {
    opacity: 0.75;
}

.site-footer .footer-contact li,
.site-footer .footer-links li {
    font-size: 0.95rem;
}

.site-footer hr {
    border-color: rgba(255, 255, 255, 0.16);
    opacity: 0.6;
    margin: 1.75rem 0;
}

/* Fase 51 — faixa de itens do rodapé (Sistema → Cabeçalho & Rodapé).
   Os botões precisam de cor de texto própria, senão a regra `.site-footer a`
   (mais específica que `.btn-*`) pinta o rótulo com a cor de link. */
.site-footer .footer-actions {
    border-top: 1px dashed rgba(255, 255, 255, 0.16);
    padding-top: 1.25rem;
}
.site-footer .footer-actions .btn {
    color: #fff;
}
.site-footer .footer-actions .social-links a {
    line-height: 1;
}

/* Scroll Animations */
[data-aos] {
    opacity: 0;
    transition-property: opacity, transform;
}

/* Custom Animation Classes */
.animate-fade-in {
    animation: fadeIn 1s ease forwards;
}

.animate-slide-up {
    animation: slideUp 0.8s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Animated Backgrounds */
.bg-animated-gradient {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.bg-animated-particles {
    position: relative;
    overflow: hidden;
}

.bg-animated-particles::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: particles 20s linear infinite;
}

@keyframes particles {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

/* ============================================================
   Section Background Layers + Animated Effects (Elementor style)
   ============================================================ */

/* When a section renders overlay/effect layers it needs positioning,
   clipping and content stacking above the layers. */
.pb-section-layered {
    position: relative;
    overflow: hidden;
}

.pb-section-layered > .container,
.pb-section-layered > .container-fluid {
    position: relative;
    z-index: 2;
}

/* Shared layer base */
.pb-bg-overlay,
.pb-bg-fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.pb-bg-fx {
    overflow: hidden;
}

.pb-bg-overlay + .pb-bg-fx {
    z-index: 2;
}

/* -------------------------------------------- */
/* Effect: Animated Gradient                    */
/* -------------------------------------------- */
.pb-bg-fx-gradient-animated {
    --fo: 0.9;
    background: linear-gradient(135deg, var(--c1, #7c3aed), var(--c2, #06b6d4), var(--c3, #f43f5e), var(--c4, #f59e0b));
    background-size: 300% 300%;
    opacity: var(--fo);
    animation: pbGradShift var(--dur, 14s) ease infinite;
}

@keyframes pbGradShift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* -------------------------------------------- */
/* Effect: Aurora / blurred light blobs         */
/* -------------------------------------------- */
.pb-bg-fx-aurora {
    --fo: 0.6;
}

.pb-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: var(--fo, 0.6);
    will-change: transform;
    animation: pbBlobDrift var(--dur, 26s) ease-in-out infinite alternate;
}

.pb-blob:nth-of-type(1) {
    width: 50%;
    height: 50%;
    left: -12%;
    top: -18%;
    animation-delay: 0s;
}

.pb-blob:nth-of-type(2) {
    width: 38%;
    height: 38%;
    right: -10%;
    top: 15%;
    animation-delay: -9s;
}

.pb-blob:nth-of-type(3) {
    width: 45%;
    height: 45%;
    left: 22%;
    bottom: -22%;
    animation-delay: -17s;
}

@keyframes pbBlobDrift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(9vw, -7vh, 0) scale(1.15); }
    100% { transform: translate3d(-6vw, 6vh, 0) scale(0.9); }
}

/* -------------------------------------------- */
/* Effect: Floating particles                   */
/* -------------------------------------------- */
.pb-bg-fx-particles {
    --fo: 0.75;
}

.pb-particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    will-change: transform, opacity;
    animation: pbParticleRise var(--pd, 12s) linear infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes pbParticleRise {
    0%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }
    15%, 85% { opacity: var(--fo, 0.75); }
    50%      { transform: translate3d(var(--px, 0px), var(--py, -60px), 0); }
}

/* -------------------------------------------- */
/* Effect: Floating geometric shapes            */
/* -------------------------------------------- */
.pb-bg-fx-shapes {
    --fo: 0.55;
}

.pb-shape {
    position: absolute;
    opacity: var(--fo, 0.55);
    will-change: transform;
    animation: pbShapeFloat var(--dur, 20s) ease-in-out infinite alternate;
}

.pb-shape-circle {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    left: 6%;
    top: 22%;
    filter: blur(2px);
}

.pb-shape-ring {
    width: 96px;
    height: 96px;
    border: 16px solid;
    border-radius: 50%;
    right: 10%;
    top: 12%;
}

.pb-shape-square {
    --br: 12deg;
    width: 76px;
    height: 76px;
    border-radius: 18px;
    left: 14%;
    bottom: 16%;
}

.pb-shape-diamond {
    --br: 45deg;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    right: 18%;
    bottom: 24%;
}

.pb-shape-triangle {
    width: 0;
    height: 0;
    border-left: 36px solid transparent;
    border-right: 36px solid transparent;
    border-bottom: 64px solid;
    right: 26%;
    top: 38%;
}

.pb-shape-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    left: 46%;
    top: 10%;
}

@keyframes pbShapeFloat {
    from { transform: translate3d(0, 0, 0) rotate(var(--br, 0deg)); }
    to   { transform: translate3d(22px, -34px, 0) rotate(calc(var(--br, 0deg) + 36deg)); }
}

/* -------------------------------------------- */
/* Effect: Decorative waves                     */
/* -------------------------------------------- */
.pb-bg-fx-waves {
    --fo: 0.6;
}

.pb-wave {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 80px;
    will-change: transform;
}

.pb-wave-back {
    bottom: -6px;
    opacity: calc(var(--fo, 0.6) * 0.7);
    animation: pbWaveBob var(--dur, 7s) ease-in-out infinite alternate;
}

.pb-wave-front {
    bottom: -30px;
    opacity: var(--fo, 0.6);
    animation: pbWaveBob calc(var(--dur, 7s) * 1.2) ease-in-out infinite alternate;
    animation-delay: calc(var(--dur, 7s) * -0.6);
}

@keyframes pbWaveBob {
    from { transform: translateY(0); }
    to   { transform: translateY(14px); }
}

/* -------------------------------------------- */
/* Effect: Moving tech grid                     */
/* -------------------------------------------- */
.pb-bg-fx-grid {
    --fo: 0.4;
}

.pb-grid-lines {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--gc, #06b6d4) 1px, transparent 1px),
        linear-gradient(90deg, var(--gc, #06b6d4) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: var(--fo, 0.4);
    -webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 78%);
            mask-image: radial-gradient(ellipse at center, black 25%, transparent 78%);
    animation: pbGridShift var(--dur, 5s) linear infinite;
}

@keyframes pbGridShift {
    to { background-position: 56px 56px; }
}

/* -------------------------------------------- */
/* Effect: Twinkling stars                      */
/* -------------------------------------------- */
.pb-bg-fx-stars {
    --fo: 0.9;
}

.pb-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    animation: pbStarTwinkle var(--dur, 6s) ease-in-out infinite;
}

.pb-stars-a {
    box-shadow:
        60px 40px 0 currentColor, 140px 120px 0 currentColor, 240px 30px 0 currentColor,
        320px 160px 0 currentColor, 420px 80px 0 currentColor, 540px 20px 0 currentColor,
        640px 140px 0 currentColor, 760px 50px 0 currentColor, 860px 170px 0 currentColor,
        980px 90px 0 currentColor, 1100px 30px 0 currentColor, 1200px 150px 0 currentColor;
}

.pb-stars-b {
    animation-delay: -2s;
    box-shadow:
        100px 220px 0 currentColor, 200px 320px 0 currentColor, 380px 240px 0 currentColor,
        500px 330px 0 currentColor, 700px 260px 0 currentColor, 900px 350px 0 currentColor,
        1040px 240px 0 currentColor, 1240px 320px 0 currentColor;
}

.pb-stars-c {
    animation-delay: -4s;
    box-shadow:
        40px 400px 0 currentColor, 260px 460px 0 currentColor, 460px 420px 0 currentColor,
        620px 480px 0 currentColor, 820px 410px 0 currentColor, 1020px 470px 0 currentColor;
}

@keyframes pbStarTwinkle {
    0%, 100% { opacity: 0; }
    50%      { opacity: var(--fo, 0.9); }
}

/* -------------------------------------------- */
/* Effect: Spotlight following the mouse        */
/* -------------------------------------------- */
.pb-bg-fx-spotlight {
    --fo: 0.5;
    opacity: var(--fo, 0.5);
    transition: opacity 0.3s;
}

.pb-bg-fx-spotlight:hover {
    opacity: calc(var(--fo, 0.5) + 0.2);
}

.pb-spotlight-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.12), transparent 55%),
        radial-gradient(circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--c1, #22d3ee) 45%, transparent), transparent 60%);
}

/* Respect users that prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pb-bg-fx,
    .pb-bg-fx * {
        animation: none !important;
    }

    .pb-bg-fx-gradient-animated {
        background-position: 0% 50%;
    }

    .pb-bg-fx-particles .pb-particle,
    .pb-bg-fx-stars .pb-stars {
        opacity: 0 !important;
    }
}

/* ============================================================
   Section Motion Effects (Elementor Pro style)
   Parallax: background travels in a taller stage layer; JS moves
   it with translate3d so it lags behind the content on scroll.
   ============================================================ */
.pb-section-parallax {
    position: relative;
    overflow: hidden;
}

.pb-section-parallax > .container,
.pb-section-parallax > .container-fluid {
    position: relative;
    z-index: 2;
}

.pb-parallax-stage {
    position: absolute;
    left: 0;
    right: 0;
    top: -50vh;
    height: calc(100% + 50vh);
    z-index: 1;
    will-change: transform;
}

.pb-bg-base {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Video background layer (MP4, YouTube, Vimeo) */
.pb-bg-video-base {
    background: #000;
    overflow: hidden;
    position: absolute;
    inset: 0;
    z-index: 0;
}

.pb-section-video-bg {
    position: relative;
    overflow: hidden;
}

.pb-section-video-bg > .pb-bg-video-base {
    z-index: 0;
}

.pb-section-video-bg > .pb-bg-overlay {
    z-index: 1;
}

.pb-section-video-bg > .container {
    position: relative;
    z-index: 5;
}

.pb-bg-video-base video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pb-bg-video-base iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Global effect hosts for non-PageBuilder blocks (blog, contact, custom content) */
.pb-content-fx-zone {
    position: relative;
}

.pb-content-fx-zone > .pb-bg-fx {
    z-index: 1;
}

.pb-content-fx-foreground {
    position: relative;
    z-index: 2;
}

/* Fixed host used by the maintenance page */
.pb-fixed-fx-zone {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Header/Footer effect hosts (site-wide effect behind chrome areas).
   .site-header keeps its own position:sticky (a positioned element anchors
   the absolute fx zone), so only the footer needs position:relative here.
   The fx zone spans the whole header/footer box, so it also covers the
   mobile menu when the collapse is open (the header grows with it). */
.site-footer-fx {
    position: relative;
}

.site-header-fx .pb-site-fx-zone,
.site-footer-fx .pb-site-fx-zone {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Glass canvas behind the chrome effect: transparent/sparse effects
   (particles, stars, grid, aurora...) need a non-white backdrop to read
   when the zone grows (e.g. the open mobile menu panel), and it keeps the
   navbar/footer readable over the page. Fully opaque effects (animated
   gradient) paint over it. Override via --fx-canvas in custom CSS. */
.site-header-fx .pb-bg-fx,
.site-footer-fx .pb-bg-fx {
    background-color: var(--fx-canvas, rgba(13, 17, 35, 0.72));
}

.site-header-fx .navbar {
    position: relative;
    z-index: 1;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* White menu text + toggler over the dark glass canvas */
.site-header-fx .navbar .navbar-brand,
.site-header-fx .navbar .nav-link {
    color: rgba(255, 255, 255, 0.92);
}

.site-header-fx .navbar .nav-link:hover {
    color: #ffffff;
}

.site-header-fx .navbar-light .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.35);
}

.site-header-fx .navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.site-footer-fx {
    background-color: transparent !important;
}

.site-footer-fx > .container {
    position: relative;
    z-index: 2;
}

/* 3D tilt following the mouse (transform applied by JS with perspective) */
.pb-section-tilt {
    will-change: transform;
}

/* Sticky section (sticks to the viewport top/bottom while scrolling) */
.pb-section-sticky {
    position: sticky;
    z-index: 500;
}

.pb-section-sticky-top {
    top: 0;
}

.pb-section-sticky-bottom {
    bottom: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .pb-hero .pb-main-title {
        font-size: 2.2rem;
    }

    .pb-section {
        padding: 3rem 0;
    }

    .hero-default h1 {
        font-size: 2rem !important;
    }
}

/* ============================================================
   Effect: Sliding diagonal stripes
   ============================================================ */
.pb-bg-fx-stripes {
    --fo: 0.28;
}

.pb-stripes {
    position: absolute;
    inset: 0;
    animation: pbStripesShift var(--dur, 12s) linear infinite;
}

.pb-stripes-a {
    background: repeating-linear-gradient(45deg,
        color-mix(in srgb, var(--c1, #7c3aed) 60%, transparent) 0 22px,
        transparent 22px 44px);
    opacity: var(--fo, 0.28);
}

.pb-stripes-b {
    background: repeating-linear-gradient(-45deg,
        color-mix(in srgb, var(--c2, #06b6d4) 45%, transparent) 0 34px,
        transparent 34px 68px);
    opacity: calc(var(--fo, 0.28) * 0.8);
    animation-duration: calc(var(--dur, 12s) * 1.4);
    animation-direction: reverse;
}

@keyframes pbStripesShift {
    to { background-position: 88px 88px; }
}

/* ============================================================
   Effect: Fluffy clouds drifting across
   ============================================================ */
.pb-bg-fx-clouds {
    --fo: 0.75;
}

.pb-cloud {
    position: absolute;
    left: -340px;
    width: 260px;
    height: auto;
    opacity: 0;
    animation: pbCloudDrift var(--cd, 70s) linear infinite;
    animation-delay: var(--ct, 0s);
    will-change: transform, opacity;
}

.pb-cloud > * {
    fill: currentColor;
}

@keyframes pbCloudDrift {
    0%   { opacity: 0;    transform: translateX(0) scale(var(--cs, 1)); }
    6%   { opacity: calc(var(--fo, 0.75) * 0.9); }
    90%  { opacity: calc(var(--fo, 0.75) * 0.9); }
    100% { opacity: 0;    transform: translateX(calc(100vw + 700px)) scale(var(--cs, 1)); }
}

/* ============================================================
   Effect: Rising translucent bubbles
   ============================================================ */
.pb-bg-fx-bubbles {
    --fo: 0.55;
}

.pb-bubble {
    position: absolute;
    top: 100%;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bc, #22d3ee) 16%, transparent);
    border: 2px solid color-mix(in srgb, var(--bc, #22d3ee) 55%, transparent);
    opacity: 0;
    will-change: transform, opacity;
    animation: pbBubbleRise var(--bd, 12s) linear infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes pbBubbleRise {
    0%, 4%  { opacity: 0; }
    10%, 82% { opacity: var(--fo, 0.55); }
    100% { opacity: 0; transform: translateY(-260vh); }
}

/* ============================================================
   Effect: Falling confetti
   ============================================================ */
.pb-bg-fx-confetti {
    --fo: 0.85;
}

.pb-confetti {
    position: absolute;
    top: 100%;
    width: 9px;
    height: 16px;
    border-radius: 2px;
    opacity: 0;
    will-change: transform, opacity;
    animation: pbConfettiFall var(--cd, 7s) linear infinite;
    animation-delay: var(--delay, 0s);
}

.pb-confetti-round {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

@keyframes pbConfettiFall {
    0%, 4%  { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
    10%, 88% { opacity: var(--fo, 0.85); }
    100% { opacity: 0; transform: translate3d(var(--sw, 0px), -240vh, 0) rotate(calc(var(--rot, 0deg) + 720deg)); }
}

/* ============================================================
   Effect: Expanding radar rings
   ============================================================ */
.pb-bg-fx-rings {
    --fo: 0.55;
}

.pb-ring {
    position: absolute;
    width: var(--rs, 60px);
    height: var(--rs, 60px);
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, currentColor 55%, transparent);
    opacity: 0;
    will-change: transform, opacity;
    animation: pbRingPulse var(--dur, 4.5s) ease-out infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes pbRingPulse {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.18); }
    12%  { opacity: var(--fo, 0.55); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(3.1); }
}

/* ============================================================
   Effect: Topographic contour lines
   ============================================================ */
.pb-bg-fx-topography {
    --fo: 0.5;
}

.pb-topo {
    position: absolute;
    inset: -8%;
    opacity: var(--fo, 0.5);
    background-size: 640px 640px;
    animation: pbTopoShift var(--dur, 60s) linear infinite alternate;
    will-change: background-position;
}

.pb-topo-a {
    background-image: repeating-radial-gradient(ellipse at 30% 35%, var(--ring, #06b6d4) 0 2px, transparent 2px 34px);
}

.pb-topo-b {
    background-image: repeating-radial-gradient(ellipse at 70% 60%, var(--ring, #06b6d4) 0 2px, transparent 2px 26px);
    animation-duration: calc(var(--dur, 60s) * 0.7);
    animation-direction: alternate-reverse;
}

@keyframes pbTopoShift {
    from { background-position: 0 0; }
    to   { background-position: 204px 102px; }
}

/* ============================================================
   Effect: Undulating fog layers
   ============================================================ */
.pb-bg-fx-fog {
    --fo: 0.5;
}

.pb-fog {
    position: absolute;
    inset: -15%;
    filter: blur(34px);
    opacity: var(--fo, 0.5);
    will-change: transform;
    animation: pbFogDrift var(--dur, 46s) ease-in-out infinite alternate;
}

.pb-fog-a {
    background:
        radial-gradient(ellipse 55% 48% at 24% 62%, color-mix(in srgb, var(--f1, #ffffff) 42%, transparent), transparent 70%),
        radial-gradient(ellipse 45% 40% at 78% 38%, color-mix(in srgb, var(--f2, #a5f3fc) 34%, transparent), transparent 70%);
}

.pb-fog-b {
    background:
        radial-gradient(ellipse 60% 50% at 72% 70%, color-mix(in srgb, var(--f1, #ffffff) 30%, transparent), transparent 70%),
        radial-gradient(ellipse 40% 40% at 20% 30%, color-mix(in srgb, var(--f2, #a5f3fc) 38%, transparent), transparent 70%);
    animation-duration: calc(var(--dur, 46s) * 1.3);
    animation-direction: alternate-reverse;
}

@keyframes pbFogDrift {
    from { transform: translate3d(-4%, 0, 0) scale(1); }
    to   { transform: translate3d(4%, -3%, 0) scale(1.12); }
}

/* ============================================================
   Effect: Rotating light beams
   ============================================================ */
.pb-bg-fx-rays {
    --fo: 0.45;
}

.pb-rays-cone {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200%;
    height: 200%;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, transparent 0deg 9deg, var(--rc, #22d3ee) 9deg 13deg, transparent 13deg 38deg);
    opacity: var(--fo, 0.45);
    -webkit-mask-image: radial-gradient(circle, black 0%, black 24%, transparent 72%);
            mask-image: radial-gradient(circle, black 0%, black 24%, transparent 72%);
    will-change: transform;
    animation: pbRaysSpin var(--dur, 42s) linear infinite;
}

@keyframes pbRaysSpin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ============================================================
   Effect: Falling rain streaks
   ============================================================ */
.pb-bg-fx-rain {
    --fo: 0.5;
}

.pb-rain {
    position: absolute;
    top: -140px;
    width: 2px;
    height: var(--rl, 60px);
    border-radius: 2px;
    background: linear-gradient(to bottom,
        transparent 0%,
        color-mix(in srgb, var(--rc, var(--c1, #22d3ee)) 75%, transparent) 55%,
        var(--rc, var(--c1, #22d3ee)) 100%);
    opacity: 0;
    will-change: transform, opacity;
    animation: pbRainFall var(--rd, 0.9s) linear infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes pbRainFall {
    0%, 7%  { opacity: 0;    transform: translateY(0); }
    14%, 86% { opacity: var(--fo, 0.5); }
    100%    { opacity: 0;    transform: translateY(150vh); }
}

/* ============================================================
   Effect: Rising sparks / glints
   ============================================================ */
.pb-bg-fx-sparks {
    --fo: 0.85;
}

.pb-spark {
    position: absolute;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px 2px currentColor;
    opacity: 0;
    will-change: transform, opacity;
    animation: pbSparkRise var(--sd, 5s) linear infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes pbSparkRise {
    0%, 6%  { opacity: 0; transform: translate3d(0, 0, 0) scale(0.3); }
    18%, 78% { opacity: var(--fo, 0.85); }
    50%     { transform: translate3d(var(--sx, 0px), -42vh, 0) scale(1); }
    92%, 100% { opacity: 0; transform: translate3d(calc(var(--sx, 0px) * 0.5), -95vh, 0) scale(0.5); }
}

/* ============================================================
   Effect: Liquid waves (gooey morphing blobs)
   ============================================================ */
.pb-bg-fx-liquid-waves {
    --fo: 0.6;
}

.pb-liquid {
    position: absolute;
    border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%;
    opacity: var(--fo, 0.6);
    filter: blur(26px) saturate(1.3);
    will-change: transform, border-radius;
    animation: pbLiquidMorph var(--dur, 26s) ease-in-out infinite alternate;
}

.pb-liquid-a {
    left: -8%;
    top: -14%;
    width: 48%;
    height: 62%;
    background: color-mix(in srgb, var(--c1, #7c3aed) 82%, transparent);
}

.pb-liquid-b {
    right: -7%;
    bottom: -20%;
    width: 40%;
    height: 55%;
    background: color-mix(in srgb, var(--c2, #06b6d4) 72%, transparent);
    animation-duration: calc(var(--dur, 26s) * 1.35);
    animation-delay: -9s;
}

@keyframes pbLiquidMorph {
    0%   { border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    50%  { border-radius: 40% 60% 44% 56% / 56% 44% 58% 42%; transform: translate3d(5vw, -3vh, 0) rotate(7deg) scale(1.14); }
    100% { border-radius: 52% 48% 62% 38% / 40% 54% 46% 60%; transform: translate3d(-4vw, 5vh, 0) rotate(-5deg) scale(0.92); }
}

/* ============================================================
   Effect: Matrix falling glyphs
   ============================================================ */
.pb-bg-fx-matrix {
    --fo: 0.55;
}

.pb-matrix-col {
    position: absolute;
    top: 0;
    height: 55%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 86%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 86%, transparent 100%);
}

.pb-matrix-run {
    position: absolute;
    top: 0;
    left: 0;
    animation: pbMatrixFall var(--md, 6s) linear infinite;
    animation-delay: var(--delay, 0s);
    will-change: transform;
}

.pb-matrix-char {
    display: block;
    width: 1ch;
    white-space: nowrap;
    line-height: 1.35;
    font-family: Consolas, 'Courier New', monospace;
    font-weight: 600;
    color: var(--c1, #22c55e);
    text-shadow: 0 0 7px color-mix(in srgb, var(--c1, #22c55e) 75%, transparent);
}

@keyframes pbMatrixFall {
    0%   { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}

/* ============================================================
   Effect: Cursor glow (trailing light follows the mouse)
   ============================================================ */
.pb-bg-fx-cursor-glow {
    --fo: 0.8;
}

.pb-cursor-core,
.pb-cursor-halo {
    position: absolute;
    left: var(--mx, 50%);
    top: var(--my, 50%);
    border-radius: 50%;
    will-change: left, top;
}

.pb-cursor-core {
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, #fff 0 32%, var(--c1, #a5f3fc) 68%, transparent 78%);
    box-shadow: 0 0 14px 3px color-mix(in srgb, var(--c1, #22d3ee) 80%, transparent);
    filter: blur(0.5px);
    transition: left 0.07s linear, top 0.07s linear;
}

.pb-cursor-halo {
    width: 46px;
    height: 46px;
    border: 1.5px solid color-mix(in srgb, var(--c2, #22d3ee) 50%, transparent);
    box-shadow: inset 0 0 14px color-mix(in srgb, var(--c2, #22d3ee) 40%, transparent),
        0 0 20px color-mix(in srgb, var(--c2, #22d3ee) 55%, transparent);
    opacity: calc(var(--fo, 0.8) * 0.75);
    transition: left 0.22s ease-out, top 0.22s ease-out;
}

.pb-cursor-halo-2 {
    width: 92px;
    height: 92px;
    border-color: color-mix(in srgb, var(--c1, #7c3aed) 28%, transparent);
    box-shadow: inset 0 0 18px color-mix(in srgb, var(--c1, #7c3aed) 26%, transparent),
        0 0 26px color-mix(in srgb, var(--c1, #7c3aed) 34%, transparent);
    opacity: calc(var(--fo, 0.8) * 0.4);
    transition: left 0.5s ease-out, top 0.5s ease-out;
}

/* Static fallbacks when the visitor prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pb-bg-fx-rain .pb-rain {
        animation: none;
        top: var(--rt, 12%);
        opacity: 0.32;
        transform: none;
    }

    .pb-bg-fx-sparks .pb-spark {
        animation: none;
        top: var(--st, 18%);
        opacity: 0.55;
        transform: none;
    }

    .pb-bg-fx-matrix .pb-matrix-run {
        animation: none;
    }

    .pb-cursor-core,
    .pb-cursor-halo {
        transition: none;
    }
}

/* ============================================================
   Shape dividers between sections (Elementor Pro style)
   ============================================================ */
.pb-section-divider {
    position: relative;
}

.pb-section-divider > .container,
.pb-section-divider > .container-fluid {
    position: relative;
    z-index: 2;
}

.pb-shape-divider {
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--dv-h, 70px);
    overflow: hidden;
    line-height: 0;
    pointer-events: none;
    z-index: 1;
}

.pb-shape-divider-bottom {
    bottom: -1px;
}

.pb-shape-divider-top {
    top: -1px;
}

.pb-shape-divider svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.pb-shape-divider-bottom svg {
    transform: scaleX(var(--dv-flip, 1));
    transform-origin: left center;
}

.pb-shape-divider-top svg {
    transform: scaleX(var(--dv-flip, 1)) scaleY(-1);
    transform-origin: left center;
}

/* ============================================================
   Widgets estilo Elementor
   ============================================================ */
.pb-counter-value {
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--primary-color, #0d6efd);
}

.pb-counter-label {
    font-size: 1.05rem;
    color: inherit;
    opacity: 0.78;
    margin-top: 0.35rem;
}

/* Faixa de números: o contador aceita VÁRIOS números na mesma seção (cada um
   com o seu tempo). A grade acompanha a quantidade — 2 por linha no celular e,
   no desktop, o que couber (auto-fit, como a faixa da Home). As regras por
   classe (.pb-counter-cols-N) são mais específicas de propósito: elas vencem o
   CSS personalizado do site, que fixa 2/4 colunas para a faixa dele. */
.pb-counter-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1rem;
    text-align: center;
    margin-top: 0.5rem;
}

.pb-counter-row .pb-counter-value { font-size: clamp(2rem, 4.2vw, 3.1rem); }
.pb-counter-row .pb-counter-suffix { font-size: 0.55em; }

@media (min-width: 992px) {
    .pb-counter-row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .pb-counter-row.pb-counter-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pb-counter-row.pb-counter-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pb-counter-row.pb-counter-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pb-progress {
    max-width: 780px;
    margin: 0 auto;
}

.pb-progress-track {
    height: 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.09);
    overflow: hidden;
}

.pb-progress-fill {
    height: 100%;
    border-radius: 999px;
    width: 0;
    background: linear-gradient(90deg, var(--primary-color, #0d6efd), color-mix(in srgb, var(--primary-color, #0d6efd) 55%, white));
    transition: width 1.4s cubic-bezier(0.25, 0.7, 0.3, 1);
}

/* O número (%) conta junto com a barra (pbAnimateProgress, frontend.js); o
   tabular-nums impede o rótulo de "tremer" enquanto o valor muda. */
.pb-progress-percent {
    font-variant-numeric: tabular-nums;
    min-width: 3.5ch;
    text-align: right;
}

.pb-progress-fill.pb-progress-in {
    width: var(--p, 0%);
}

/* ============================================================
   Lista de Conteúdos (Fase 65) — seção configurável
   Itens de um Tipo de Conteúdo ou posts do Blog, com quantidade, ordem
   (inclusive aleatória) e filtros escolhidos no painel. A leitura é do
   ContentFeed, o mesmo motor do bloco "Outros itens" da Página do Item.
   ============================================================ */

.pb-content-list .pbcl-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 1rem;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pb-content-list .pbcl-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.pb-content-list .pbcl-thumb {
    display: block;
    background: color-mix(in srgb, var(--pbcl-accent) 10%, #ffffff);
}

.pb-content-list .pbcl-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Item sem capa mas com ícone: mostra o ícone no mesmo lugar da imagem. */
.pb-content-list .pbcl-thumb-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    font-size: 2.6rem;
    color: var(--pbcl-accent);
}

.pb-content-list .pbcl-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 1.1rem 1.2rem;
}

.pb-content-list .pbcl-badge {
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--pbcl-accent);
}

.pb-content-list .pbcl-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}

.pb-content-list .pbcl-text {
    color: #6c757d;
    font-size: 0.93rem;
    line-height: 1.55;
}

.pb-content-list .pbcl-date {
    margin-top: auto;
    color: #8b93a1;
    font-size: 0.8rem;
}

.pb-content-list .pbcl-more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    font-weight: 600;
    color: var(--pbcl-accent);
    border: 1.5px solid var(--pbcl-accent);
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease;
}

.pb-content-list .pbcl-more:hover {
    background: var(--pbcl-accent);
    color: #ffffff;
}

/* Lista compacta: capa ao lado do texto. */
.pb-content-list.pbcl-layout-list .pbcl-card {
    flex-direction: row;
    align-items: stretch;
}

.pb-content-list.pbcl-layout-list .pbcl-thumb {
    flex: 0 0 34%;
}

.pb-content-list.pbcl-layout-list .pbcl-thumb img {
    height: 100%;
    aspect-ratio: auto;
}

.pb-content-list.pbcl-layout-list .pbcl-body {
    justify-content: center;
}

/* Grade de miniaturas: capa e título, sem o resumo. */
.pb-content-list.pbcl-layout-grid .pbcl-body {
    padding: 0.7rem 0.8rem 0.9rem;
}

.pb-content-list.pbcl-layout-grid .pbcl-title {
    font-size: 0.95rem;
}

@media (max-width: 575.98px) {
    .pb-content-list.pbcl-layout-list .pbcl-card {
        flex-direction: column;
    }

    .pb-content-list.pbcl-layout-list .pbcl-thumb {
        flex: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pb-content-list .pbcl-card,
    .pb-content-list .pbcl-more {
        transition: none;
    }

    .pb-content-list .pbcl-card:hover {
        transform: none;
    }
}

.pb-icon-box {
    position: relative;
    padding: 2.2rem 1.6rem;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 1rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pb-icon-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.13);
}

.pb-icon-box-icon {
    width: 78px;
    height: 78px;
    margin: 0 auto 1.1rem;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-color, #0d6efd), var(--secondary-color, #6c757d));
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

.pb-icon-box-title {
    font-weight: 700;
    color: #212529;
}

.pb-icon-box-text {
    color: #6c757d;
}

.pb-icon-box-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .9rem;
    padding: .35rem .9rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.2;
    color: var(--pb-accent, var(--primary-color, #0d6efd));
    border: 1.5px solid var(--pb-accent, var(--primary-color, #0d6efd));
    background: transparent;
    text-decoration: none;
    transition: all .25s ease;
}

.pb-icon-box-link .bi {
    transition: transform .25s ease;
}

.pb-icon-box:hover .pb-icon-box-link {
    color: #ffffff;
    background: var(--pb-accent, var(--primary-color, #0d6efd));
    border-color: var(--pb-accent, var(--primary-color, #0d6efd));
    box-shadow: 0 .25rem .75rem color-mix(in srgb, var(--pb-accent, var(--primary-color, #0d6efd)) 35%, transparent);
}

.pb-icon-box:hover .pb-icon-box-link .bi {
    transform: translateX(3px);
}

/* ============================================================
   Modelos do widget "Ícone + Texto" (Fase 49)
   ------------------------------------------------------------
   O modelo é escolhido em Layout → Editar conteúdo → Ícone + Texto
   (content.style) e vira a classe .pb-icon-box-style-*. O modelo
   padrão (cartões) continua exatamente como era.
   ============================================================ */

/* --- Ícones em círculo --- */
.pb-icon-box-style-circle .pb-icon-box-icon {
    border-radius: 50%;
}

/* --- Ícone ao lado do texto --- */
.pb-icon-box-style-left .pb-icon-box {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    text-align: left;
}

.pb-icon-box-style-left .pb-icon-box-icon {
    margin: 0;
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    font-size: 1.6rem;
    border-radius: 16px;
}

.pb-icon-box-style-left .pb-icon-box-body {
    flex: 1 1 auto;
    min-width: 0;
}

.pb-icon-box-style-left .pb-icon-box-title {
    margin-bottom: .35rem;
}

/* --- Cartões coloridos (preenchidos com a cor de destaque) --- */
.pb-icon-box-style-solid .pb-icon-box {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg,
        var(--pb-accent, var(--primary-color, #0d6efd)),
        color-mix(in srgb, var(--pb-accent, var(--primary-color, #0d6efd)) 62%, #000));
    box-shadow: 0 10px 28px color-mix(in srgb, var(--pb-accent, var(--primary-color, #0d6efd)) 32%, transparent);
}

.pb-icon-box-style-solid .pb-icon-box-icon {
    background: rgba(255, 255, 255, .18);
    box-shadow: none;
}

.pb-icon-box-style-solid .pb-icon-box-title {
    color: #fff;
}

.pb-icon-box-style-solid .pb-icon-box-text {
    color: rgba(255, 255, 255, .92);
}

.pb-icon-box-style-solid .pb-icon-box-link {
    color: #fff;
    border-color: rgba(255, 255, 255, .75);
}

.pb-icon-box-style-solid .pb-icon-box:hover .pb-icon-box-link {
    color: var(--pb-accent, var(--primary-color, #0d6efd));
    background: #fff;
    border-color: #fff;
}

/* --- Minimalista (sem caixa) --- */
.pb-icon-box-style-minimal .pb-icon-box {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 1.1rem .75rem;
}

.pb-icon-box-style-minimal .pb-icon-box:hover {
    transform: none;
    box-shadow: none;
}

.pb-icon-box-style-minimal .pb-icon-box::after {
    display: none; /* sem o brilho que atravessa o cartão */
}

/* --- Flutuação contínua da imagem --- */
@keyframes pbTiFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

.pb-section-text_image .pb-ti-media.pb-ti-fx-float img {
    animation: pbTiFloat 6s ease-in-out infinite;
}

/* --- Faixa colorida com o ícone no topo do cartão --- */
.pb-icon-box-style-panel .pb-icon-box {
    padding: 0 1.4rem 1.6rem;
}

.pb-icon-box-style-panel .pb-icon-box-icon {
    width: calc(100% + 2.8rem);
    height: 104px;
    margin: 0 -1.4rem 1.1rem;
    border-radius: 0;
    font-size: 2.3rem;
    box-shadow: none;
}

/* --- Selo circular sobreposto à borda superior --- */
.pb-icon-box-style-badge {
    padding-top: 40px; /* espaço para o selo não encostar no que está acima */
}

.pb-icon-box-style-badge .pb-icon-box {
    padding-top: 2.7rem;
    overflow: visible;
}

.pb-icon-box-style-badge .pb-icon-box::after {
    display: none; /* o brilho atravessa o cartão e vazaria com overflow visible */
}

.pb-icon-box-style-badge .pb-icon-box-icon {
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    border-radius: 50%;
    border: 6px solid #fff;
}

/* --- Contorno (sem preenchimento) --- */
.pb-icon-box-style-outline .pb-icon-box {
    background: transparent;
    border: 2px solid color-mix(in srgb, var(--pb-accent, var(--primary-color, #0d6efd)) 55%, transparent);
    box-shadow: none;
}

/* Os modelos abaixo REpintam o ícone de propósito. O CSS personalizado do
   site (Sistema → CSS) pinta cada cartão com
   ".pb-icon-box:nth-child(n) .pb-icon-box-icon", um seletor com mais
   especificidade que ".pb-icon-box-style-x .pb-icon-box-icon"; sem o
   !important (só no preenchimento) a cor do tema venceria e o modelo
   escolhido no editor não apareceria. */
.pb-icon-box-style-outline .pb-icon-box-icon {
    background: transparent !important;
    color: var(--pb-accent, var(--primary-color, #0d6efd));
    border: 2px solid color-mix(in srgb, var(--pb-accent, var(--primary-color, #0d6efd)) 45%, transparent);
    box-shadow: none;
}

/* --- Cartão que gira (3D flip) --- */
/* O cartão externo fica "neutro" (sem fundo/borda): o visual é do
   .pb-flip-inner, que é quem roda. overflow visible é obrigatório —
   overflow diferente de visible anula o transform-style: preserve-3d. */
.pb-icon-box-style-flip .pb-icon-box {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    overflow: visible;
    perspective: 1200px;
}

.pb-icon-box-style-flip .pb-icon-box:hover {
    transform: none;
    box-shadow: none;
}

.pb-icon-box-style-flip .pb-icon-box::after {
    display: none;
}

.pb-icon-box-style-flip .pb-flip-inner {
    position: relative;
    width: 100%;
    min-height: 250px;
    transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.4, .2, .2, 1);
}

.pb-icon-box-style-flip .pb-icon-box:hover .pb-flip-inner,
.pb-icon-box-style-flip .pb-icon-box:focus-within .pb-flip-inner {
    transform: rotateY(180deg);
}

.pb-flip-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: 1.6rem 1.3rem;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .10);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.pb-flip-face .pb-icon-box-icon {
    margin: 0 0 .2rem;
}

.pb-flip-face .pb-icon-box-text {
    font-size: .925rem;
    line-height: 1.45;
    margin-bottom: 0;
}

.pb-flip-back {
    transform: rotateY(180deg);
    justify-content: center;
}

/* --- Barra lateral colorida --- */
.pb-icon-box-style-split .pb-icon-box {
    border-left: 4px solid var(--pb-accent, var(--primary-color, #0d6efd));
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
}

.pb-icon-box-style-split .pb-icon-box-icon {
    margin: 0 0 .9rem;
    width: 46px;
    height: 46px;
    font-size: 1.25rem;
    background: color-mix(in srgb, var(--pb-accent, var(--primary-color, #0d6efd)) 14%, #fff) !important;
    color: var(--pb-accent, var(--primary-color, #0d6efd));
    box-shadow: none;
}

/* --- Passos numerados --- */
.pb-icon-box-style-numbered .pb-icon-box {
    border-top: 3px solid color-mix(in srgb, var(--pb-accent, var(--primary-color, #0d6efd)) 45%, transparent);
    border-radius: 10px;
}

.pb-icon-box-style-numbered .pb-icon-box-icon.pb-icon-box-step {
    width: auto;
    height: auto;
    margin: 0 0 .35rem;
    background: transparent !important;
    box-shadow: none;
    font-size: clamp(2rem, 3.4vw, 2.6rem);
    font-weight: 800;
    line-height: 1;
    color: color-mix(in srgb, var(--pb-accent, var(--primary-color, #0d6efd)) 72%, #000 10%);
}

/* Na faixa e nos passos numerados o ícone não é um selo solto: girar/escalar
   no hover deforma o modelo, então o efeito do tema é neutralizado aqui. */
.pb-icon-box-style-panel .pb-icon-box:hover .pb-icon-box-icon,
.pb-icon-box-style-numbered .pb-icon-box:hover .pb-icon-box-icon {
    transform: none;
    box-shadow: none;
}

@media (max-width: 575.98px) {
    /* No celular o ícone ao lado do texto fica menor para não espremer o texto */
    .pb-icon-box-style-left .pb-icon-box {
        gap: .85rem;
    }

    .pb-icon-box-style-left .pb-icon-box-icon {
        width: 52px;
        height: 52px;
        font-size: 1.35rem;
    }
}

/* ============================================================
   Widget "Texto + Imagem": forma, enquadramento e efeitos (Fase 49)
   ------------------------------------------------------------
   As regras levam TRÊS classes (.pb-section-text_image .pb-ti-media.pb-ti-*)
   de propósito: o CSS personalizado do site (Sistema → CSS & Código) foi
   escrito antes de o widget ter estes seletores e usa, por exemplo,
   `.pb-section-text_image.pb-quem-somos img { object-fit: contain;
   max-height: 360px; border-radius: 0 }` — duas classes, que ganhavam
   destas regras (mesma especificidade, mas o CSS do site carrega depois) e
   faziam a escolha do editor não aparecer na página.
   Com o prefixo da seção a especificidade é maior que qualquer regra do tipo
   `.pb-section-text_image.<classe-do-cliente> img`, então o que o cliente
   escolhe no painel SEMPRE vale. O CSS do site continua mandando no que o
   widget não define (ex.: o limite de altura daquela seção).
   ============================================================ */

.pb-section-text_image .pb-ti-col .pb-ti-media {
    position: relative;
    display: block;
}

/* Enquadramento ------------------------------------------------- */
.pb-section-text_image .pb-ti-media.pb-ti-fit-cover img {
    width: 100%;
    object-fit: cover;
}

.pb-section-text_image .pb-ti-media.pb-ti-fit-contain img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Tamanho natural: mostra a foto inteira, sem altura máxima e sem
   esticar a largura (ideal para retratos/portrait, ex.: foto do pastor) */
.pb-section-text_image .pb-ti-media.pb-ti-fit-natural img,
.pb-section-text_image .pb-ti-media.pb-ti-fit-contain img.pb-ti-natural {
    width: auto;
    max-width: 100%;
    max-height: none;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}

/* Forma --------------------------------------------------------- */
.pb-section-text_image .pb-ti-media.pb-ti-shape-soft img {
    border-radius: 12px;
}

.pb-section-text_image .pb-ti-media.pb-ti-shape-square img {
    border-radius: 0;
}

.pb-section-text_image .pb-ti-media.pb-ti-shape-circle img {
    border-radius: 50%;
}

.pb-section-text_image .pb-ti-media.pb-ti-shape-arch img {
    border-radius: 50% 50% 14px 14px / 38% 38% 14px 14px;
}

.pb-section-text_image .pb-ti-media.pb-ti-shape-blob img {
    border-radius: 62% 38% 46% 54% / 48% 42% 58% 52%;
}

/* Polaroid: moldura branca, sombra e um leve giro */
.pb-section-text_image .pb-ti-media.pb-ti-shape-polaroid {
    background: #fff;
    padding: .75rem .75rem 2.6rem;
    border-radius: 6px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
    transform: rotate(-1.4deg);
    display: inline-block;
    max-width: 100%;
}

.pb-section-text_image .pb-ti-media.pb-ti-shape-polaroid img {
    border-radius: 3px;
    box-shadow: none;
}

/* Efeitos ------------------------------------------------------- */
.pb-section-text_image .pb-ti-media img {
    transition: transform .45s ease, filter .45s ease, box-shadow .45s ease;
}

.pb-section-text_image .pb-ti-fx-zoom:hover img {
    transform: scale(1.045);
}

.pb-section-text_image .pb-ti-fx-tilt {
    transform: rotate(-2deg);
}

.pb-section-text_image .pb-ti-fx-tilt:hover {
    transform: rotate(0deg);
}

.pb-section-text_image .pb-ti-fx-tilt,
.pb-section-text_image .pb-ti-fx-float {
    transition: transform .45s ease;
}

/* Moldura com anel na cor de destaque */
.pb-section-text_image .pb-ti-fx-frame {
    padding: 10px;
    border-radius: 28px;
    border: 2px solid color-mix(in srgb, var(--primary-color, #0d6efd) 45%, transparent);
    background: color-mix(in srgb, var(--primary-color, #0d6efd) 6%, #fff);
}

/* Halo de luz atrás da imagem */
.pb-section-text_image .pb-ti-fx-glow::before {
    content: '';
    position: absolute;
    inset: -6% -4%;
    border-radius: 40px;
    background: radial-gradient(60% 60% at 50% 45%,
        color-mix(in srgb, var(--primary-color, #0d6efd) 42%, transparent),
        transparent 72%);
    filter: blur(22px);
    z-index: -1;
}

/* Preto e branco que ganha cor no mouse */
.pb-section-text_image .pb-ti-fx-bw img {
    filter: grayscale(1) contrast(1.02);
}

.pb-section-text_image .pb-ti-fx-bw:hover img {
    filter: grayscale(0);
}

/* Tópicos ao lado da imagem (ícone + título + texto) --------------- */
.pb-ti-topics {
    list-style: none;
    margin: 1.4rem 0 0;
    padding: 0;
    display: grid;
    gap: .95rem;
}

.pb-ti-topic {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    line-height: 1.5;
}

.pb-ti-topic-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.05rem;
    color: #fff;
    background: linear-gradient(135deg, var(--primary-color, #0d6efd), var(--secondary-color, #6c757d));
    box-shadow: 0 8px 18px rgba(0, 0, 0, .14);
}

.pb-ti-topic-text strong {
    display: block;
}

/* Muitos tópicos ao lado da imagem: 2 colunas no desktop */
.pb-ti-topics.pb-ti-topics-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem 1.5rem;
}

/* Nas formas recortadas (círculo/orgânica) o canto do retângulo fica fora
   da foto: o selo vai para o rodapé central, dentro da forma. */
.pb-section-text_image .pb-ti-media.pb-ti-shape-circle .pb-ti-badge,
.pb-section-text_image .pb-ti-media.pb-ti-shape-blob .pb-ti-badge {
    left: 50%;
    bottom: 9%;
    transform: translateX(-50%);
}

/* Selo/marca sobre a imagem (ex.: "Desde 2006") */
.pb-ti-badge {
    position: absolute;
    bottom: 14px;
    left: 14px;
    z-index: 2;
    padding: .45rem .95rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: #fff;
    background: linear-gradient(135deg, var(--primary-color, #0d6efd), var(--secondary-color, #6c757d));
    box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}

@media (max-width: 767.98px) {
    .pb-ti-topics.pb-ti-topics-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .pb-ti-col {
        margin-bottom: 1.75rem;
    }

    .pb-section-text_image .pb-ti-media.pb-ti-shape-polaroid {
        transform: rotate(0deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Sem 3D: frente e verso aparecem empilhados e legíveis */
    .pb-icon-box-style-flip .pb-flip-inner {
        transform: none !important;
        min-height: 0;
        display: grid;
        gap: 1rem;
    }

    .pb-icon-box-style-flip .pb-flip-face {
        position: static;
        transform: none !important;
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
    }

    .pb-section-text_image .pb-ti-fx-zoom:hover img,
    .pb-section-text_image .pb-ti-fx-tilt,
    .pb-section-text_image .pb-ti-fx-tilt:hover,
    .pb-section-text_image .pb-ti-media.pb-ti-shape-polaroid {
        transform: none;
    }

    .pb-section-text_image .pb-ti-media.pb-ti-fx-float img {
        animation: none;
    }
}

.pb-pricing-card {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1.25rem;
    padding: 2.1rem 1.6rem;
    text-align: center;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pb-pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
}

.pb-pricing-featured {
    border: 2px solid var(--primary-color, #0d6efd);
    background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--primary-color, #0d6efd) 6%, #ffffff) 100%);
}

.pb-pricing-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color, #0d6efd);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.28rem 0.9rem;
    border-radius: 999px;
    white-space: nowrap;
}

.pb-pricing-name {
    font-weight: 800;
    color: #212529;
}

.pb-pricing-desc {
    color: #6c757d;
    font-size: 0.95rem;
    min-height: 2.6em;
}

.pb-pricing-price-row {
    margin: 0.6rem 0 1.1rem;
}

.pb-pricing-price {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--primary-color, #0d6efd);
}

.pb-pricing-period {
    color: #6c757d;
    font-weight: 500;
}

.pb-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.6rem;
    text-align: left;
}

.pb-pricing-features li {
    position: relative;
    padding: 0.45rem 0 0.45rem 1.7rem;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.07);
    color: #495057;
}

.pb-pricing-features li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0.45rem;
    color: var(--primary-color, #0d6efd);
    font-weight: 700;
}

.pb-pricing-btn {
    width: 100%;
    border-radius: 999px;
    padding: 0.65rem 1.2rem;
    font-weight: 600;
    background: var(--primary-color, #0d6efd);
    color: #ffffff;
}

.pb-pricing-btn:hover {
    color: #ffffff;
    filter: brightness(1.08);
}

.pb-team-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 1.25rem;
    padding: 2.1rem 1.5rem;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pb-team-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}

.pb-team-photo {
    display: block;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 1rem;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.pb-team-photo-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-color, #0d6efd), var(--secondary-color, #6c757d));
}

.pb-team-name {
    font-weight: 800;
    color: #212529;
    margin-bottom: 0.15rem;
}

.pb-team-role {
    color: var(--primary-color, #0d6efd);
    font-weight: 600;
    margin-bottom: 0.6rem;
}

.pb-team-bio {
    color: #6c757d;
    font-size: 0.95rem;
    margin: 0;
}

/* Static fallbacks for the new effects when the visitor prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pb-bg-fx-stripes .pb-stripes {
        animation: none;
        background-position: 0 0;
    }

    .pb-bg-fx-clouds .pb-cloud {
        animation: none;
        left: auto;
        opacity: calc(var(--fo, 0.75) * 0.5);
    }

    .pb-bg-fx-clouds .pb-cloud:nth-child(1) { right: -140px; bottom: -50px; }
    .pb-bg-fx-clouds .pb-cloud:nth-child(2) { right: 16%; top: 8%; width: 170px; }
    .pb-bg-fx-clouds .pb-cloud:nth-child(3) { right: 50%; bottom: -30px; width: 220px; }
    .pb-bg-fx-clouds .pb-cloud:nth-child(4) { right: 76%; top: 26%; width: 130px; }

    .pb-bg-fx-bubbles .pb-bubble {
        animation: none;
        top: auto;
        bottom: 12%;
        opacity: calc(var(--fo, 0.55) * 0.6);
    }

    .pb-bg-fx-confetti .pb-confetti {
        animation: none;
        top: auto;
        bottom: 16%;
        opacity: calc(var(--fo, 0.85) * 0.45);
        transform: rotate(var(--rot, 0deg));
    }

    .pb-bg-fx-rings .pb-ring {
        animation: none;
        opacity: calc(var(--fo, 0.55) * 0.5);
        transform: translate(-50%, -50%) scale(1.4);
    }

    .pb-bg-fx-topography .pb-topo,
    .pb-bg-fx-fog .pb-fog,
    .pb-bg-fx-rays .pb-rays-cone {
        animation: none;
    }

    /* As barras de progresso NÃO entram aqui de propósito: crescer até o valor
       lido (e o número contar junto) não é o movimento que a preferência pede
       para desligar — a mesma decisão do contador (Fase 62). O que segue
       desligado são os efeitos que deslocam (AOS, tilt, parallax). */
}

@media (max-width: 768px) {
    .pb-counter-value {
        font-size: 2.6rem;
    }

    .pb-icon-box-icon {
        width: 64px;
        height: 64px;
        font-size: 1.6rem;
    }

    .pb-pricing-price {
        font-size: 2.2rem;
    }
}

/* ============================================================
   Full Life Benefícios - Custom Styles
   ============================================================ */

/* Hero with video background */
#hero-fulllife {
    position: relative !important;
}

#hero-fulllife > .pb-bg-video-base {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
}

#hero-fulllife > .pb-bg-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
}

#hero-fulllife > .container {
    position: relative !important;
    z-index: 5 !important;
}

.hero-fulllife .pb-main-title {
    font-size: 3.5rem;
    font-weight: 800;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.hero-fulllife .lead {
    font-size: 1.25rem;
    max-width: 700px;
    margin: 0 auto;
    text-shadow: 0 1px 10px rgba(0,0,0,0.2);
}

.hero-fulllife .btn-primary {
    background: linear-gradient(135deg, #0E8C6A, #4CAF50);
    border: none;
    padding: 14px 36px;
    font-weight: 600;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(14,140,106,0.4);
    transition: all 0.3s ease;
}

.hero-fulllife .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(14,140,106,0.5);
}

/* Sobre section */
.sobre-fulllife .col-md-6 img {
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

/* Serviços section */
.servicos-fulllife .pb-icon-box {
    border-radius: 16px;
    border: 1px solid rgba(14,140,106,0.1);
    transition: all 0.3s ease;
}

.servicos-fulllife .pb-icon-box:hover {
    border-color: rgba(14,140,106,0.3);
    box-shadow: 0 12px 40px rgba(14,140,106,0.15);
}

.servicos-fulllife .pb-icon-box-icon {
    background: linear-gradient(135deg, #0E8C6A, #1B3A5C);
}

.servicos-fulllife .pb-icon-box-link {
    color: var(--pb-accent, #0E8C6A);
    border-color: var(--pb-accent, #0E8C6A);
}

.servicos-fulllife .pb-icon-box:hover .pb-icon-box-link {
    color: #ffffff;
    background: var(--pb-accent, #0E8C6A);
    border-color: var(--pb-accent, #0E8C6A);
    box-shadow: 0 .25rem .75rem color-mix(in srgb, var(--pb-accent, #0E8C6A) 35%, transparent);
}

/* Números section */
.numeros-fulllife {
    background: linear-gradient(135deg, #1B3A5C 0%, #0E8C6A 100%) !important;
}

.numeros-fulllife .pb-counter-value {
    color: #ffffff;
    font-size: 4rem;
}

.numeros-fulllife .pb-counter-label {
    color: rgba(255,255,255,0.85);
}

/* Funeral section */
.funeral-fulllife ul li {
    color: rgba(255,255,255,0.95);
    font-size: 1.05rem;
}

.funeral-fulllife strong {
    color: #4CAF50;
}

/* Benefícios section */
.beneficios-fulllife .pb-icon-box-icon {
    background: linear-gradient(135deg, #4CAF50, #0E8C6A);
}

.beneficios-fulllife .pb-icon-box-link {
    color: var(--pb-accent, #4CAF50);
    border-color: var(--pb-accent, #4CAF50);
}

.beneficios-fulllife .pb-icon-box:hover .pb-icon-box-link {
    color: #ffffff;
    background: var(--pb-accent, #4CAF50);
    border-color: var(--pb-accent, #4CAF50);
    box-shadow: 0 .25rem .75rem color-mix(in srgb, var(--pb-accent, #4CAF50) 35%, transparent);
}

/* FAQ section */
.faq-fulllife .accordion-button {
    font-weight: 600;
    color: #1B3A5C;
}

.faq-fulllife .accordion-button:not(.collapsed) {
    background-color: rgba(14,140,106,0.08);
    color: #0E8C6A;
}

.faq-fulllife .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(14,140,106,0.25);
}

/* CTA section */
.cta-fulllife {
    background: linear-gradient(135deg, #0E8C6A 0%, #4CAF50 100%) !important;
}

.cta-fulllife .pb-main-title,
.cta-fulllife p {
    color: #ffffff;
}

.cta-fulllife .btn-primary {
    background: #ffffff;
    color: #0E8C6A;
    border: none;
    padding: 14px 36px;
    font-weight: 700;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.cta-fulllife .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(0,0,0,0.3);
    background: #f0f0f0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-fulllife .pb-main-title {
        font-size: 2.2rem;
    }
    
    .hero-fulllife .lead {
        font-size: 1rem;
    }
    
    .numeros-fulllife .pb-counter-value {
        font-size: 2.8rem;
    }
}

/* ============================================================
   O nível do título (H1/H2/H3...) é SEMÂNTICO (SEO): o tamanho
   visual continua sendo o definido pelo layout/seção, mesmo que
   o administrador troque a tag no editor de conteúdo.
   ============================================================ */
.pb-main-title:not(.display-1):not(.display-2):not(.display-3):not(.display-4):not(.display-5):not(.display-6) {
    font-size: calc(1.325rem + 0.9vw); /* mesmo tamanho do h2 padrão (Bootstrap) */
}

/* ============================================================
   Títulos internos de itens (cards de serviços, planos, equipe,
   FAQ): o nível H1-H6 escolhido no admin é SEMÂNTICO (SEO) e
   nunca altera o tamanho visual — replicamos aqui o tamanho do
   h3/h4 padrão do Bootstrap para as classes.
   ============================================================ */
.pb-icon-box-title { font-size: calc(1.275rem + 0.3vw); } /* = h4 padrão */
.pb-pricing-name   { font-size: calc(1.3rem + 0.6vw); }   /* = h3 padrão */
.pb-team-name      { font-size: calc(1.275rem + 0.3vw); } /* = h4 padrão */

/* ============================================================
   Full Life Premium — efeitos modernos e lúdicos
   (preloader, progresso de leitura, voltar ao topo, hero
   animado, cards com brilho, seções com movimento)
   ============================================================ */

/* ---------- Preloader ---------- */
.fl-preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, #1B3A5C 0%, #12304d 100%);
    transition: opacity 0.55s ease, visibility 0.55s ease;
}
.fl-preloader.fl-preloader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.fl-preloader-inner {
    text-align: center;
}
.fl-preloader-logo {
    height: 64px;
    max-width: 80vw;
    animation: flPulse 1.15s ease-in-out infinite;
}
.fl-preloader-name {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    animation: flPulse 1.15s ease-in-out infinite;
}
.fl-preloader-bar {
    width: 200px;
    height: 3px;
    margin: 24px auto 0;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    overflow: hidden;
}
.fl-preloader-bar span {
    display: block;
    height: 100%;
    width: 40%;
    border-radius: 999px;
    background: linear-gradient(90deg, #0E8C6A, #4CAF50);
    animation: flLoadBar 1.1s ease-in-out infinite;
}
@keyframes flPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.06); opacity: 0.85; }
}
@keyframes flLoadBar {
    0%   { transform: translateX(-130%); }
    100% { transform: translateX(330%); }
}

/* ---------- Barra de progresso de leitura ---------- */
.fl-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 9998;
    background: linear-gradient(90deg, #0E8C6A, #4CAF50, #1B3A5C);
    border-radius: 0 3px 3px 0;
    box-shadow: 0 1px 6px rgba(14, 140, 106, 0.5);
}

/* ---------- Botão voltar ao topo ---------- */
.fl-back-top {
    position: fixed;
    bottom: 24px;
    left: 24px;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #ffffff;
    background: linear-gradient(135deg, #0E8C6A, #1B3A5C);
    box-shadow: 0 6px 18px rgba(27, 58, 92, 0.35);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
    z-index: 9997;
}
.fl-back-top.fl-back-top-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.fl-back-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(14, 140, 106, 0.45);
}
@media (max-width: 768px) {
    .fl-back-top {
        bottom: 16px;
        left: 16px;
        width: 42px;
        height: 42px;
    }
}

/* ---------- Hero animado (Full Life) ---------- */
.hero-fulllife .pb-hero {
    position: relative;
}

/* Blobs de luz flutuantes atrás do conteúdo */
#hero-fulllife::before,
#hero-fulllife::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: 2;
}
#hero-fulllife::before {
    width: 430px;
    height: 430px;
    top: -130px;
    right: -90px;
    background: radial-gradient(circle, rgba(14, 140, 106, 0.55), transparent 66%);
    animation: flDrift1 14s ease-in-out infinite alternate;
}
#hero-fulllife::after {
    width: 380px;
    height: 380px;
    bottom: -110px;
    left: -70px;
    background: radial-gradient(circle, rgba(76, 175, 80, 0.45), transparent 66%);
    animation: flDrift2 18s ease-in-out infinite alternate;
}
@keyframes flDrift1 {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(-55px, 45px) scale(1.15); }
}
@keyframes flDrift2 {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(60px, -50px) scale(1.1); }
}

/* Ken Burns sutil no vídeo de fundo */
#hero-fulllife > .pb-bg-video-base video {
    animation: flKenBurns 26s ease-in-out infinite alternate;
}
@keyframes flKenBurns {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}

/* Indicador de rolagem (mouse) */
.hero-fulllife .pb-hero::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0.7rem;
    transform: translateX(-50%);
    width: 24px;
    height: 38px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 14px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 2px, transparent 2.6px);
    background-size: 5px 5px;
    background-repeat: no-repeat;
    background-position: 50% 7px;
    animation: flScrollHint 2s ease-in-out infinite;
}
@keyframes flScrollHint {
    0%          { background-position: 50% 7px; opacity: 1; }
    65%, 100%   { background-position: 50% 24px; opacity: 0; }
}

/* Entrada em cascata do hero */
.hero-fulllife .pb-main-title {
    animation: flFadeUp 0.8s ease-out both;
}
.hero-fulllife .lead {
    animation: flFadeUp 0.8s ease-out 0.2s both;
}
.hero-fulllife .pb-hero .btn-primary {
    animation: flFadeUp 0.8s ease-out 0.4s both;
}
@keyframes flFadeUp {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Cards de serviços/benefícios: brilho + ícone animado ---------- */
.pb-icon-box {
    overflow: hidden;
}
.pb-icon-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: -110%;
    width: 60%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
    transition: left 0.65s ease;
}
.pb-icon-box:hover::after {
    left: 140%;
}
.pb-icon-box-icon {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.pb-icon-box:hover .pb-icon-box-icon {
    transform: scale(1.12) rotate(-5deg);
    box-shadow: 0 14px 30px rgba(14, 140, 106, 0.35);
}
.pb-icon-box:hover {
    transform: translateY(-8px);
}

/* Revelação em cascata (delay aplicado via JS nas colunas) */
.fl-card-stagger {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.fl-card-stagger-in {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Seção Números: formas flutuantes ---------- */
.numeros-fulllife {
    position: relative;
    overflow: hidden;
}
.numeros-fulllife::before {
    content: '';
    position: absolute;
    width: 250px;
    height: 250px;
    top: -70px;
    right: -50px;
    border: 3px dashed rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    animation: flSpin 45s linear infinite;
    pointer-events: none;
}
.numeros-fulllife::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    bottom: -50px;
    left: -35px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.12);
    transform: rotate(18deg);
    animation: flFloat 8s ease-in-out infinite;
    pointer-events: none;
}
.numeros-fulllife .container {
    position: relative;
    z-index: 1;
}
@keyframes flSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes flFloat {
    0%, 100% { transform: rotate(18deg) translateY(0); }
    50%      { transform: rotate(18deg) translateY(-16px); }
}

/* ---------- FAQ: hover com destaque ---------- */
.faq-fulllife .accordion-item {
    border-radius: 0.9rem !important;
    overflow: hidden;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.faq-fulllife .accordion-item:hover {
    box-shadow: 0 10px 26px rgba(14, 140, 106, 0.12);
}

/* ---------- CTA: gradiente animado + anel pulsante ---------- */
.cta-fulllife {
    background: linear-gradient(120deg, #0E8C6A 0%, #4CAF50 30%, #0E8C6A 65%, #1B3A5C 100%) !important;
    background-size: 300% 300% !important;
    animation: flGradShift 16s ease infinite;
}
@keyframes flGradShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.cta-fulllife .btn-primary {
    position: relative;
    z-index: 1;
}
.cta-fulllife .btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);
    animation: flPulseRing 2.4s ease-out infinite;
}
@keyframes flPulseRing {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); }
    70%  { box-shadow: 0 0 0 18px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* ---------- Zoom suave nas imagens (Sobre / Funeral) ---------- */
.sobre-fulllife .col-md-6 img,
.funeral-fulllife .col-md-6 img {
    transition: transform 0.6s ease;
}
.sobre-fulllife .col-md-6:hover img,
.funeral-fulllife .col-md-6:hover img {
    transform: scale(1.04);
}

/* ============================================================
   Página de Contato — design moderno
   ============================================================ */

.contact-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #1B3A5C 0%, #0E8C6A 100%);
    color: #ffffff;
    padding: 4.5rem 0 4rem;
}
.contact-hero::before {
    content: '';
    position: absolute;
    width: 380px;
    height: 380px;
    top: -130px;
    right: -70px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 66%);
    animation: flDrift1 14s ease-in-out infinite alternate;
    pointer-events: none;
}
.contact-hero::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    bottom: -130px;
    left: -50px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(76, 175, 80, 0.4), transparent 66%);
    animation: flDrift2 18s ease-in-out infinite alternate;
    pointer-events: none;
}
.contact-hero .container {
    position: relative;
    z-index: 1;
}
.contact-hero .fl-breadcrumb {
    margin-bottom: 1.1rem;
}
.contact-hero-title {
    font-size: 2.6rem;
    font-weight: 800;
    margin-bottom: 0.6rem;
}
.contact-hero-sub {
    max-width: 580px;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 0;
}
@media (max-width: 768px) {
    .contact-hero-title { font-size: 2rem; }
    .contact-hero { padding: 3.2rem 0 2.8rem; }
}

.contact-body {
    background: #f4f8f6;
}

/* Card do formulário (efeito vidro) */
.contact-card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 1.25rem;
    box-shadow: 0 14px 44px rgba(27, 58, 92, 0.1);
    padding: 2.2rem;
    height: 100%;
}
.contact-card h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1B3A5C;
}
.contact-card .contact-card-sub {
    color: #6c757d;
    margin-bottom: 1.6rem;
}

.contact-form .form-label {
    font-weight: 600;
    color: #1B3A5C;
}
.contact-form .form-control {
    border-radius: 0.8rem;
    border: 1px solid rgba(27, 58, 92, 0.16);
    padding: 0.72rem 1rem 0.72rem 2.9rem;
    background-color: #ffffff;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.contact-form .form-control:focus {
    border-color: #0E8C6A;
    box-shadow: 0 0 0 0.25rem rgba(14, 140, 106, 0.15);
}
.contact-form .input-wrap {
    position: relative;
}
.contact-form .input-wrap .bi {
    position: absolute;
    left: 1.05rem;
    top: 50%;
    transform: translateY(-50%);
    color: #0E8C6A;
    font-size: 1.15rem;
    z-index: 2;
}
.contact-form .input-wrap--textarea .bi {
    top: 1.15rem;
    transform: none;
}
.contact-form .input-wrap--textarea .form-control {
    padding-left: 1rem;
}
.contact-form .btn-submit {
    background: linear-gradient(135deg, #0E8C6A, #1B3A5C);
    border: none;
    color: #ffffff;
    font-weight: 700;
    border-radius: 50px;
    padding: 0.85rem 2.4rem;
    box-shadow: 0 8px 24px rgba(14, 140, 106, 0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contact-form .btn-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(14, 140, 106, 0.45);
}

/* Cards de contato com bloco de ícone em gradiente */
.contact-tile {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #ffffff;
    border: 1px solid rgba(27, 58, 92, 0.08);
    border-radius: 1rem;
    padding: 1.05rem 1.2rem;
    box-shadow: 0 6px 20px rgba(27, 58, 92, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 1rem;
}
.contact-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(27, 58, 92, 0.1);
}
.contact-tile-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.35rem;
    background: linear-gradient(135deg, #0E8C6A, #4CAF50);
}
.contact-tile:nth-child(even) .contact-tile-icon {
    background: linear-gradient(135deg, #1B3A5C, #0E8C6A);
}
.contact-tile a {
    color: #1B3A5C;
    text-decoration: none;
}
.contact-tile a:hover {
    color: #0E8C6A;
}
.contact-tile-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6c757d;
    font-weight: 700;
    margin-bottom: 0.1rem;
}
.contact-tile-value {
    font-weight: 600;
    color: #1B3A5C;
    word-break: break-word;
}

/* Card CTA do WhatsApp */
.contact-wa-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    padding: 1.8rem;
    color: #ffffff;
    background: linear-gradient(135deg, #25D366, #128C7E);
    box-shadow: 0 14px 36px rgba(37, 211, 102, 0.35);
}
.contact-wa-card::after {
    content: '';
    position: absolute;
    width: 170px;
    height: 170px;
    top: -60px;
    right: -45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    pointer-events: none;
}
.contact-wa-card h5 {
    font-weight: 800;
}
.contact-wa-card p {
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 1.1rem;
}
.contact-wa-card .btn {
    position: relative;
    z-index: 1;
    background: #ffffff;
    color: #128C7E;
    font-weight: 700;
    border-radius: 50px;
    padding: 0.7rem 1.8rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contact-wa-card .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

/* Horário de atendimento */
.contact-hours {
    background: #ffffff;
    border: 1px solid rgba(27, 58, 92, 0.08);
    border-radius: 1rem;
    padding: 1.4rem 1.5rem;
    box-shadow: 0 6px 20px rgba(27, 58, 92, 0.06);
}
.contact-hours h6 {
    color: #1B3A5C;
    font-weight: 700;
}
.contact-hours .row > div {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}
.contact-hours .fl-day {
    color: #6c757d;
}
.contact-hours .fl-time {
    font-weight: 600;
    color: #1B3A5C;
}

/* Redes sociais */
.contact-social a {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, #0E8C6A, #1B3A5C);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contact-social a:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 20px rgba(14, 140, 106, 0.4);
}

/* ---------- Breadcrumb moderno (componente compartilhado) ---------- */
.fl-breadcrumb {
    margin-bottom: 0;
}
.fl-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.fl-breadcrumb-item {
    display: inline-flex;
}
.fl-breadcrumb-link {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
}
.fl-breadcrumb-current {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    background: linear-gradient(135deg, #0E8C6A, #1B3A5C);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(14, 140, 106, 0.3);
}
.fl-breadcrumb-sep {
    display: inline-flex;
    align-items: center;
    opacity: 0.55;
}

/* Variante light: fundo colorido/escuro */
.fl-breadcrumb--light .fl-breadcrumb-link {
    background: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.fl-breadcrumb--light .fl-breadcrumb-link:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    transform: translateY(-1px);
}
.fl-breadcrumb--light .fl-breadcrumb-sep {
    color: rgba(255, 255, 255, 0.65);
}

/* Variante default: fundo claro */
.fl-breadcrumb--default .fl-breadcrumb-link {
    background: rgba(27, 58, 92, 0.06);
    color: #1B3A5C;
    border: 1px solid rgba(27, 58, 92, 0.08);
}
.fl-breadcrumb--default .fl-breadcrumb-link:hover {
    background: rgba(14, 140, 106, 0.12);
    color: #0E8C6A;
    transform: translateY(-1px);
}
.fl-breadcrumb--default .fl-breadcrumb-sep {
    color: #1B3A5C;
}

@media (max-width: 575.98px) {
    .fl-breadcrumb-link,
    .fl-breadcrumb-current {
        padding: 0.26rem 0.7rem;
        font-size: 0.8rem;
    }
}

/* ---------- Acessibilidade: reduz movimento ---------- */
@media (prefers-reduced-motion: reduce) {
    .fl-preloader { display: none; }
    .fl-scroll-progress { display: none; }
    .fl-back-top { display: none; }
    #hero-fulllife::before,
    #hero-fulllife::after,
    #hero-fulllife > .pb-bg-video-base video,
    .hero-fulllife .pb-hero .pb-main-title,
    .hero-fulllife .pb-hero .lead,
    .hero-fulllife .pb-hero .btn-primary,
    .numeros-fulllife::before,
    .numeros-fulllife::after,
    .cta-fulllife,
    .cta-fulllife .btn-primary::before {
        animation: none !important;
    }
    .pb-icon-box::after,
    .pb-icon-box-icon,
    .site-header .nav-link::after,
    .fl-card-stagger,
    .fl-card-stagger-in,
    .fl-breadcrumb-link {
        transition: none !important;
    }
    .fl-card-stagger,
    .fl-card-stagger-in {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================================
   Ícone personalizado: bi-paw (patinha)
   O Bootstrap Icons (v1.11.3, carregado via CDN) não possui o
   glifo "paw". Este bloco implementa o ícone com mask-image +
   background-color: currentColor, então a patinha herda a cor
   do contexto (ex.: branco dentro do card de ícone) — igual
   aos demais ícones da biblioteca.
   Funciona no site servido pelo CMS e no export estático
   (frontend.css é copiado no export).
   ============================================================ */
.bi.bi-paw {
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cellipse cx='3.9' cy='6.2' rx='1.6' ry='2.2'/%3E%3Cellipse cx='6.6' cy='3.8' rx='1.6' ry='2.2'/%3E%3Cellipse cx='9.4' cy='3.8' rx='1.6' ry='2.2'/%3E%3Cellipse cx='12.1' cy='6.2' rx='1.6' ry='2.2'/%3E%3Cpath d='M8 9.2c2.9 0 4.9 1.8 4.9 3.4 0 1.7-2.2 2.8-4.9 2.8s-4.9-1.1-4.9-2.8c0-1.6 2-3.4 4.9-3.4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cellipse cx='3.9' cy='6.2' rx='1.6' ry='2.2'/%3E%3Cellipse cx='6.6' cy='3.8' rx='1.6' ry='2.2'/%3E%3Cellipse cx='9.4' cy='3.8' rx='1.6' ry='2.2'/%3E%3Cellipse cx='12.1' cy='6.2' rx='1.6' ry='2.2'/%3E%3Cpath d='M8 9.2c2.9 0 4.9 1.8 4.9 3.4 0 1.7-2.2 2.8-4.9 2.8s-4.9-1.1-4.9-2.8c0-1.6 2-3.4 4.9-3.4z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* ==========================================================================
   Layout da "Página do Item" (Fase 60) — Tipos de Conteúdo
   Usado apenas quando o tipo (ou o item) tem layout salvo. Sem layout salvo a
   página continua no desenho de sempre, sem nenhuma destas classes.
   ========================================================================== */

.cl-section {
    padding: 3rem 0;
}

.cl-section-title {
    font-weight: 700;
    margin-bottom: 1.5rem;
}


.cl-section-card > .container > .row > .cl-column {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .06);
    padding: 1.5rem;
}

.cl-section-accent {
    background: color-mix(in srgb, var(--primary-color, #0d6efd) 6%, #fff);
    border-top: 4px solid var(--primary-color, #0d6efd);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.cl-section-dark {
    background: var(--secondary-color, #1b3a5c);
    color: #fff;
}

.cl-section-dark .cl-section-title,
.cl-section-dark h1,
.cl-section-dark h2,
.cl-section-dark h3,
.cl-section-dark h4 {
    color: #fff;
}

.cl-block + .cl-block {
    margin-top: 1.25rem;
}

/* Campo dentro de uma caixa */
.cl-field-box {
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: .75rem;
    background: #fff;
    padding: 1rem;
}

.cl-field-box-title {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: .5rem;
}

/* Dados rápidos (vários campos em linhas rótulo: valor) */
.cl-info-box {
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: .9rem;
    background: #fff;
    padding: 1.1rem;
    box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .05);
}

.cl-info-box-sticky {
    position: sticky;
    top: 1.5rem;
}

.cl-info-box-title {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: .75rem;
}

.cl-info-list {
    margin: 0;
}

.cl-info-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .45rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.cl-info-row:last-child {
    border-bottom: 0;
}

.cl-info-row dt {
    font-weight: 600;
    color: #495057;
}

.cl-info-row dd {
    margin: 0;
    text-align: right;
}

/* Chamada (CTA) */
.cl-cta {
    --cl-cta-accent: var(--secondary-color, #1b3a5c);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
}

.cl-cta-solid {
    color: #fff;
    background: linear-gradient(135deg, var(--cl-cta-accent),
        color-mix(in srgb, var(--cl-cta-accent) 68%, #000));
}

.cl-cta-solid .cl-cta-text {
    color: rgba(255, 255, 255, .78);
}

.cl-cta-soft {
    background: color-mix(in srgb, var(--cl-cta-accent) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--cl-cta-accent) 25%, #fff);
}

.cl-cta-outline {
    border: 2px solid var(--cl-cta-accent);
}

.cl-cta-icon {
    font-size: 2.4rem;
    color: var(--cl-cta-accent);
}

.cl-cta-solid .cl-cta-icon {
    color: #fff;
}

.cl-cta-heading {
    font-weight: 700;
    margin: .6rem 0 .5rem;
}

.cl-cta-text {
    color: #6c757d;
    max-width: 34rem;
    margin: 0 auto 1.25rem;
}

.cl-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
}

.cl-cta-soft .btn-outline-light,
.cl-cta-outline .btn-outline-light {
    color: var(--cl-cta-accent);
    border-color: var(--cl-cta-accent);
}

/* Texto livre, imagem e galeria */
.cl-text > *:last-child {
    margin-bottom: 0;
}

.cl-image,
.cl-gallery-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.cl-gallery-image {
    border-radius: .5rem;
}

/* Divisores */
.cl-divider {
    border: 0;
    margin: 0;
    height: 1px;
}

.cl-divider-line {
    border-top: 1px solid currentColor;
}

.cl-divider-dotted {
    border-top: 2px dotted currentColor;
}

.cl-divider-wave {
    height: 8px;
    background: radial-gradient(circle at 8px 8px, currentColor 2px, transparent 0) repeat-x;
    background-size: 16px 8px;
    opacity: .5;
}

/* Outros itens do tipo */
.cl-other-items-title {
    font-weight: 700;
    margin-bottom: 1rem;
}

.cl-other-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 100%;
    padding: .75rem 1rem;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: .75rem;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease;
}

.cl-other-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .08);
    color: inherit;
}

.cl-other-item-image {
    width: 56px;
    height: 56px;
    border-radius: .5rem;
    object-fit: cover;
}

.cl-other-item-title {
    flex: 1 1 auto;
    font-weight: 600;
}

/* ============================================================
   Lista de conteúdos do bloco "Outros itens" (Fase 65)
   Corpo do item, selo, resumo, data, o botão "Ver mais" e o modelo em
   grade. O modelo "lista" usa o mesmo desenho de linha dos cartões.
   ============================================================ */

.cl-other-item-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1 1 auto;
    min-width: 0;
}

/* Dentro do corpo (que já cresce) o título não estica sozinho. */
.cl-other-item-body .cl-other-item-title {
    flex: 0 0 auto;
}

.cl-other-item-badge {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--cl-accent, var(--primary-color, #0d6efd));
}

.cl-other-item-text {
    color: #6c757d;
    font-size: 0.88rem;
    line-height: 1.5;
}

.cl-other-item-date {
    color: #8b93a1;
    font-size: 0.78rem;
}

.cl-other-more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1rem;
    font-weight: 600;
    color: var(--cl-accent, var(--primary-color, #0d6efd));
    text-decoration: none;
}

.cl-other-more:hover {
    text-decoration: underline;
}

/* Modelo "grade": capa em cima e o texto embaixo, sem a seta lateral. */
.cl-other-layout-grid .cl-other-item {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
}

.cl-other-layout-grid .cl-other-item-image {
    width: 100%;
    height: 120px;
}

.cl-other-layout-grid .cl-other-item > .bi {
    display: none;
}

/* Campo repetidor (Fase 60B): a lista de uma coluna e a tabela de várias. */
.cl-repeater-list {
    margin: 0;
    padding-left: 1.25rem;
    line-height: 1.8;
}

.cl-repeater-table {
    margin-bottom: 0;
    --bs-table-striped-bg: rgba(0, 0, 0, .025);
}

.cl-repeater-table th {
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #6c757d;
    border-bottom-width: 2px;
}

.cl-repeater-table td {
    vertical-align: top;
}

@media (max-width: 767.98px) {
    .cl-section {
        padding: 2rem 0;
    }

    .cl-info-box-sticky {
        position: static;
    }

    .cl-cta {
        padding: 1.5rem 1.1rem;
    }
}