/*
 Theme Name:   LPX Starter Kit 2026
 Theme URI:    https://lpx.com.br/
 Description:  Base de infraestrutura: Tradução, Performance e Acessibilidade Global.
 Author:       LPX Development / Kairos Flow
 Author URI:   https://lpx.com.br/
 Template:     hello-elementor
 Version:      4.2.0
 Text Domain:  lpx
*/

/*
   ÍNDICE
   ------
    1. PERFORMANCE & RENDERIZAÇÃO
    2. BLINDAGEM GOOGLE TRANSLATE
    3. ACESSIBILIDADE GLOBAL
    4. TRADUTOR UI (CONTAINER)
    5. TRADUTOR CUSTOMIZADO (DROPDOWN) — UI COMPLETA
    6. EFEITOS VISUAIS LPX
    7. SCROLL REVEAL
    8. SKELETON LOADING
    9. BARRA DE AVISO (TOP ALERT)
   10. BOTÃO WHATSAPP FLUTUANTE
   11. ACESSIBILIDADE: TAMANHO DE FONTE
   12. COOKIE BANNER LGPD
   13. BREADCRUMB
   14. BOTÃO WHATSAPP INLINE [lpx_btn_wa]
   15. HORÁRIO DE FUNCIONAMENTO [lpx_horario]
   16. REDUCED MOTION (PREFERÊNCIA DO SISTEMA)
   17. DARK MODE (COMENTADO — ATIVAR POR PROJETO)
   18. SCREEN READER / ACESSIBILIDADE UTILITÁRIOS
*/


/* ========================================================
   1. PERFORMANCE & RENDERIZAÇÃO
   ======================================================== */

html {
    scroll-behavior: smooth;
    /* Offset para sticky header — JS atualiza --lpx-scroll-offset dinamicamente
       (seção 30 do functions.php). Default 80px se JS não rodar. */
    scroll-padding-top: var(--lpx-scroll-offset, 80px);
    margin-top: 0 !important;
    padding-top: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    top: 0 !important;
    position: static !important;
}


::selection {
    background: var( --e-global-color-primary );
    color: #fff;
}
/* Font Awesome removido em v3.7 — todos os ícones agora são SVG inline. */

/* ========================================================
   2. BLINDAGEM GOOGLE TRANSLATE
   FIX v3.2: .skiptranslate usa height:0 em vez de display:none
   para não esconder o .goog-te-combo necessário para a tradução.
   ======================================================== */

iframe.goog-te-banner-frame,
.goog-te-banner-frame,
.skiptranslate > iframe,
.goog-te-balloon-frame,
#goog-gt-tt {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
}

/* NÃO usar display:none em .skiptranslate — contém o combo interno */
.skiptranslate {
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
}

.goog-text-highlight {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* ========================================================
   3. ACESSIBILIDADE GLOBAL
   ======================================================== */

:focus-visible {
    outline: 3px solid var( --e-global-color-primary ) !important;
    outline-offset: 3px !important;
}

body.lpx-high-contrast:not(.elementor-editor-active) {
    filter: invert(1) hue-rotate(180deg) !important;
    background-color: #000 !important;
}

body.lpx-high-contrast:not(.elementor-editor-active) img,
body.lpx-high-contrast:not(.elementor-editor-active) video,
body.lpx-high-contrast:not(.elementor-editor-active) svg,
body.lpx-high-contrast:not(.elementor-editor-active) iframe,
body.lpx-high-contrast:not(.elementor-editor-active) .elementor-background-overlay,
body.lpx-high-contrast:not(.elementor-editor-active) [style*="background-image"] {
    filter: invert(1) hue-rotate(180deg) !important;
}

.lpx-contrast-toggle {
    background-color: var( --e-global-color-primary );
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    transition: opacity 0.2s;
}

.lpx-contrast-toggle:hover {
    opacity: 0.85;
}


/* ========================================================
   4. TRADUTOR UI (CONTAINER)
   ======================================================== */

.lpx-translate-container {
    z-index: 99999 !important;
    position: relative;
}

/* Inline — siglas separadas por · */
.lpx-lang-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lpx-lang-sigla {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.05em;
    color: currentColor;
    text-decoration: none;
    opacity: 0.75;
    transition: opacity 0.2s;
    cursor: pointer;
}

.lpx-lang-sigla:hover {
    opacity: 1;
}

.lpx-lang-sep {
    font-size: 30px;
    color: currentColor;
    opacity: 0.4;
    user-select: none;
}


/* ========================================================
   5. TRADUTOR CUSTOMIZADO (DROPDOWN) — UI COMPLETA
   ======================================================== */

.lpx-custom-dropdown {
    position: relative;
    cursor: pointer;
    display: inline-flex;
}

.lpx-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    transition: color 0.2s;
}

.lpx-dropdown-trigger:hover { color: #ED3566; }

.lpx-dropdown-menu {
    position: absolute;
    top: 130%;
    right: 0;
    background: #fff;
    color: #333;
    border-radius: 4px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    display: none;
    min-width: 160px;
    z-index: 9999;
    overflow: hidden;
}

.lpx-dropdown-menu.active {
    display: block;
    animation: lpxFadeInUp 0.3s ease;
}

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

.lpx-lang-option {
    display: flex;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s;
    cursor: pointer;
}

.lpx-lang-option:last-child { border-bottom: none; }

.lpx-lang-code {
    font-weight: 800;
    padding: 12px;
    border-right: 1px solid #f1f5f9;
    min-width: 50px;
    text-align: center;
    color: #64748b;
    transition: color 0.2s;
}

.lpx-lang-name {
    padding: 12px;
    flex: 1;
    font-size: 14px;
    font-weight: 500;
}

.lpx-lang-option:hover { background: #f8fafc; }
.lpx-lang-option:hover .lpx-lang-code { color: var( --e-global-color-primary ); }


/* ========================================================
   6. EFEITOS VISUAIS LPX
   ======================================================== */

/* Grain noise — adicione a classe "lpx-noise" no body via Elementor:
   Elementor → Site Settings → Custom CSS → body { ... }
   OU em Elementor → Body class no campo de classe da página */
body.lpx-noise::before {
    content: '';
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    opacity: var(--lpx-noise-opacity, 0.04);
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 200px;
}

/* --------------------------------------------------------
   Light Sweep — classe: lpx-light-sweep
   Adicione no campo "Classe CSS" da seção no Elementor.
   Defina o background da seção como #04071a no Elementor.
   --------------------------------------------------------
   Técnica: blobs encadeados ao longo de um caminho sinusoidal.
   Elemento 200% largo → translateX(-50% a +50%) = passa de
   lado a lado sem reflow de layout.
   -------------------------------------------------------- */

.lpx-light-sweep {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
}

/* Núcleo brilhante — blobs no caminho da onda */
.lpx-light-sweep::before {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 0;
    width: 200%;
    height: 100%;
    top: 0;
    left: 0;
    transform: translateX(-50%);
    opacity: 0;
    will-change: transform, opacity;

    /* 10 blobs posicionados ao longo de uma curva sinusoidal
       x: 5% → 95% (distribuídos), y: sobe e desce criando a onda */
    background:
        radial-gradient(ellipse 130px 110px at  5% 58%, rgba(23,124,141,1)    0%, transparent 100%),
        radial-gradient(ellipse 120px 100px at 13% 44%, rgba(23,124,141,0.95) 0%, transparent 100%),
        radial-gradient(ellipse 130px 110px at 22% 33%, rgba(23,124,141,1)    0%, transparent 100%),
        radial-gradient(ellipse 120px 100px at 31% 40%, rgba(23,124,141,0.95) 0%, transparent 100%),
        radial-gradient(ellipse 130px 110px at 40% 54%, rgba(23,124,141,1)    0%, transparent 100%),
        radial-gradient(ellipse 120px 100px at 51% 52%, rgba(23,124,141,0.95) 0%, transparent 100%),
        radial-gradient(ellipse 130px 110px at 62% 38%, rgba(23,124,141,1)    0%, transparent 100%),
        radial-gradient(ellipse 120px 100px at 73% 34%, rgba(23,124,141,0.95) 0%, transparent 100%),
        radial-gradient(ellipse 130px 110px at 84% 44%, rgba(23,124,141,1)    0%, transparent 100%),
        radial-gradient(ellipse 120px 100px at 95% 52%, rgba(23,124,141,0.95) 0%, transparent 100%);

    filter: blur(20px);
    animation: lpxWavePass 12s ease-in-out infinite;
}

/* Halo externo — mesmos pontos mas muito mais difusos */
.lpx-light-sweep::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 0;
    width: 200%;
    height: 100%;
    top: 0;
    left: 0;
    transform: translateX(-50%);
    opacity: 0;
    will-change: transform, opacity;

    background:
        radial-gradient(ellipse 220px 200px at  5% 58%, rgba(19,106,120,0.65) 0%, transparent 100%),
        radial-gradient(ellipse 220px 200px at 22% 33%, rgba(19,106,120,0.65) 0%, transparent 100%),
        radial-gradient(ellipse 220px 200px at 40% 54%, rgba(19,106,120,0.65) 0%, transparent 100%),
        radial-gradient(ellipse 220px 200px at 62% 38%, rgba(19,106,120,0.65) 0%, transparent 100%),
        radial-gradient(ellipse 220px 200px at 84% 44%, rgba(19,106,120,0.65) 0%, transparent 100%);

    filter: blur(55px);
    animation: lpxWavePass 12s ease-in-out infinite 0.3s;
}

@keyframes lpxWavePass {
    0%   { transform: translateX(-50%); opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { transform: translateX(50%);  opacity: 0; }
}

/* Conteúdo da seção acima do efeito */
.lpx-light-sweep > .elementor-container,
.lpx-light-sweep > .e-con-inner,
.lpx-light-sweep > .e-con {
    position: relative;
    z-index: 1;
}

/* Preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    .lpx-light-sweep::before {
        animation: none;
        opacity: 0.7;
        transform: translateX(-25%);
    }
    .lpx-light-sweep::after {
        animation: none;
        opacity: 0.4;
        transform: translateX(-25%);
    }
}

/* No editor Elementor: estático para não distrair durante a edição */
.elementor-editor-active .lpx-light-sweep::before,
.elementor-editor-active .lpx-light-sweep::after {
    animation: none !important;
    opacity: 0.5 !important;
    transform: translateX(-25%) !important;
}

/* Contador animado — no editor do Elementor mostra o valor final sem animação */
.elementor-editor-active .lpx-counter {
    display: inline-block;
    color: var( --e-global-color-primary );
}

.card-premium {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.card-premium:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 15px 35px rgba(51, 105, 158, 0.15) !important;
}


/* ========================================================
   7. LPX FX — SCROLL REVEAL / STAGGER / SPLIT / PARALLAX
   ======================================================== */

/*
  .revelar-suave é mantido como alias legado.
  O novo sistema usa .lpx-fx-* + GSAP (funcs.php seção 18-19).
  GSAP anima diretamente via gsap.from() — nenhum estado CSS
  inicial necessário nas novas classes. A única exceção é o editor
  do Elementor: dentro dele desativamos qualquer animação.
*/

/* Editor Elementor: nada se move */
.elementor-editor-active .lpx-fx-reveal,
.elementor-editor-active .lpx-fx-reveal-left,
.elementor-editor-active .lpx-fx-reveal-right,
.elementor-editor-active .lpx-fx-reveal-scale,
.elementor-editor-active .lpx-fx-stagger > *,
.elementor-editor-active .lpx-fx-split-word,
.elementor-editor-active .lpx-fx-split-char,
.elementor-editor-active .lpx-counter {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* Alias legado .revelar-suave → mesma lógica do GSAP (sem CSS transition) */
body:not(.elementor-editor-active) .revelar-suave {
    will-change: opacity, transform;
}

/* Performance hint nos elementos animáveis */
.lpx-fx-reveal,
.lpx-fx-reveal-left,
.lpx-fx-reveal-right,
.lpx-fx-reveal-scale {
    will-change: opacity, transform;
}

/* Parallax: o container precisa de overflow hidden para não vazar */
.lpx-fx-parallax {
    overflow: hidden;
}

.lpx-fx-parallax-inner {
    will-change: transform;
}

/* Split text: linha deve ter overflow hidden para clip limpo */
.lpx-fx-split-word .word,
.lpx-fx-split-char .char {
    display: inline-block;
    will-change: transform, opacity;
}


/* ========================================================
   8. SKELETON LOADING — classe: lpx-loading
   ======================================================== */

.lpx-loading {
    background: #f6f7f8;
    background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
    background-size: 936px 104px;
    background-repeat: no-repeat;
    animation: lpxSkeletonShimmer 1.5s linear infinite forwards;
}

@keyframes lpxSkeletonShimmer {
    0%   { background-position: -468px 0; }
    100% { background-position:  468px 0; }
}


/* ========================================================
   9. BARRA DE AVISO (TOP ALERT)
   ======================================================== */

.lpx-top-alert {
    background: #ED3566;
    color: #fff;
    text-align: center;
    padding: 10px 20px;
    font-weight: bold;
    position: relative;
    z-index: 9999;
    font-size: 14px;
    line-height: 1.5;
}


/* ========================================================
   10. BOTÃO WHATSAPP FLUTUANTE
   ======================================================== */

.lpx-wa-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}

.lpx-wa-float:hover {
    transform: scale(1.1) translateY(-5px);
    background-color: #128c7e;
}

.lpx-wa-float svg {
    width: 32px;
    height: 32px;
    color: #fff;
}

@media (max-width: 768px) {
    .lpx-wa-float     { width: 50px; height: 50px; bottom: 20px; right: 20px; }
    .lpx-wa-float svg { width: 26px; height: 26px; }
}


/* ========================================================
   11. ACESSIBILIDADE: TAMANHO DE FONTE
   FIX v3.1: 4 níveis em cada direção, steps ~12% por clique.
   Shortcode: [lpx_info id="fonte"]

   O dimensionamento é aplicado via JS (functions.php seção 17)
   diretamente em h1-h6/p para preservar a tipografia do Elementor.
   Aqui ficam apenas os controles visuais (A- / A / A+).
   ======================================================== */

.lpx-font-controls {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.lpx-font-btn {
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 4px;
    cursor: pointer;
    padding: 5px 11px;
    font-weight: 700;
    line-height: 1;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.lpx-font-btn:hover {
    background: #ED3566;
    color: #fff;
    border-color: #ED3566;
}

.lpx-font-reset {
    font-size: 1em;
    padding: 5px 14px;
}


/* ========================================================
   12. COOKIE BANNER LGPD
   ======================================================== */

.lpx-lgpd-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1a1a2e;
    color: #fff;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    z-index: 999999;
    flex-wrap: wrap;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
}

/* Garante que [hidden] funcione mesmo se algum tema/plugin sobrescrever display */
.lpx-lgpd-banner[hidden] {
    display: none !important;
}

.lpx-lgpd-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    flex: 1;
    min-width: 200px;
}

.lpx-lgpd-text a { color: #ED3566; text-decoration: underline; }

.lpx-lgpd-actions { display: flex; gap: 10px; flex-shrink: 0; }

.lpx-lgpd-btn {
    padding: 10px 24px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.2s;
    white-space: nowrap;
}

.lpx-lgpd-accept            { background: #ED3566; color: #fff; }
.lpx-lgpd-accept:hover      { background: #c81e52; }
.lpx-lgpd-decline           { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.35); }
.lpx-lgpd-decline:hover     { background: rgba(255,255,255,0.1); }

@media (max-width: 600px) {
    .lpx-lgpd-banner         { flex-direction: column; text-align: center; }
    .lpx-lgpd-actions        { width: 100%; justify-content: center; }
    .lpx-lgpd-btn            { flex: 1; }
}


/* ========================================================
   13. BREADCRUMB
   ======================================================== */

.lpx-breadcrumb             { font-size: 14px; }
.lpx-breadcrumb ol          { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lpx-breadcrumb .lpx-crumb a { color: inherit; text-decoration: none; opacity: 0.65; transition: opacity 0.2s; }
.lpx-breadcrumb .lpx-crumb a:hover { opacity: 1; text-decoration: underline; }
.lpx-breadcrumb .lpx-crumb-sep { opacity: 0.35; font-size: 12px; user-select: none; }


/* ========================================================
   14. BOTÃO WHATSAPP INLINE [lpx_btn_wa]
   Personalize cores e tamanho por projeto.
   ======================================================== */

.lpx-btn-wa {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #25d366;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 16px;
    padding: 14px 28px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.35);
    line-height: 1.2;
}

.lpx-btn-wa:hover {
    background-color: #128c7e;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.45);
    color: #fff !important;
}

.lpx-btn-wa:active {
    transform: translateY(0);
}

.lpx-btn-wa .lpx-icon-wa,
.lpx-btn-wa svg {
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
}

/* Variante full-width (adicione classe "lpx-btn-wa-full" no shortcode) */
.lpx-btn-wa-full {
    display: flex;
    width: 100%;
    justify-content: center;
}

@media (max-width: 480px) {
    .lpx-btn-wa {
        width: 100%;
        justify-content: center;
        font-size: 15px;
        padding: 13px 20px;
    }
}


/* ========================================================
   15. HORÁRIO DE FUNCIONAMENTO [lpx_horario]
   ======================================================== */

.lpx-horario {
    display: inline;
    font-size: inherit;
    color: inherit;
}

.lpx-horario-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lpx-horario-lista li {
    font-size: 14px;
    color: inherit;
    line-height: 1.6;
}

.lpx-horario-lista strong {
    font-weight: 700;
    margin-right: 4px;
}


/* ========================================================
   16. REDUCED MOTION (PREFERÊNCIA DO SISTEMA)
   ======================================================== */

@media (prefers-reduced-motion: reduce) {

    *[class*="lpx-"] {
        transition: none !important;
        animation: none !important;
    }

    .card-premium:hover { transform: none !important; }

    body:not(.elementor-editor-active) .revelar-suave {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
        transition: none !important;
    }

    body:not(.elementor-editor-active) .revelar-suave.revelar-ativo {
        transition: none !important;
    }

    .lpx-wa-float:hover { transform: none !important; }

    .lpx-btn-wa:hover   { transform: none !important; }

    .lpx-loading {
        animation: none !important;
        background-image: none !important;
        background-color: #edeef1 !important;
    }
}


/* ========================================================
   17. DARK MODE (COMENTADO — ATIVAR POR PROJETO)
   ======================================================== */

/*
@media (prefers-color-scheme: dark) {
    :root {
        --lpx-bg:      #121212;
        --lpx-surface: #1e1e1e;
        --lpx-text:    #e0e0e0;
        --lpx-muted:   #a0a0a0;
        --lpx-accent:  #ED3566;
        --lpx-border:  rgba(255,255,255,0.1);
    }

    body {
        background-color: var(--lpx-bg);
        color: var(--lpx-text);
    }

    a { color: var(--lpx-accent); }

    .lpx-lgpd-banner { background: #0d0d1a; }
}
*/


/* ========================================================
   18. SCREEN READER / ACESSIBILIDADE UTILITÁRIOS
   ======================================================== */

.lpx-sr-only {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
    white-space: nowrap;
}


/* ========================================================
   19. VIDEO FACADE (YouTube / Vimeo)
   ======================================================== */

.lpx-video-ratio {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    background: #111 center / cover no-repeat;
}

.lpx-video-ratio iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.lpx-video-facade {
    display: block;
    cursor: pointer;
    outline-offset: 3px;
}

.lpx-video-facade:focus-visible {
    outline: 3px solid var(--e-global-color-primary, #33699E);
}

.lpx-play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.lpx-video-facade:hover .lpx-play-btn,
.lpx-video-facade:focus-visible .lpx-play-btn {
    transform: scale(1.1);
}

.lpx-facade-gate {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    text-align: center;
    padding: 24px;
}

.lpx-facade-gate p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    max-width: 280px;
}


/* ========================================================
   20. IFRAME GATE (mapas e outros embeds — LGPD)
   ======================================================== */

.lpx-iframe-gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 48px 24px;
    background: #f4f6f9;
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-radius: 8px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
}

.lpx-iframe-gate p {
    margin: 0;
}

.lpx-iframe-gate svg {
    opacity: 0.45;
}


/* ========================================================
   21. BOTÃO VOLTAR AO TOPO
   ======================================================== */

.lpx-back-top {
    position: fixed;
    bottom: 100px; /* acima do botão WhatsApp (60px + 30px + 10px gap) */
    right: 30px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--e-global-color-primary, #33699E);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    transition: opacity 0.25s, transform 0.25s;
    z-index: 9998;
    text-decoration: none;
}

.lpx-back-top[hidden] {
    display: none;
}

.lpx-back-top:hover {
    opacity: 0.85;
    transform: translateY(-3px);
}

.lpx-back-top:focus-visible {
    outline: 3px solid var(--e-global-color-primary, #33699E);
    outline-offset: 3px;
}

@media (max-width: 768px) {
    .lpx-back-top {
        bottom: 82px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
}


/* ========================================================
   22. STICKY HEADER
   Estilize .lpx-sticky conforme o projeto.
   O slide-down é desativado em prefers-reduced-motion.
   ======================================================== */

.lpx-sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
    animation: lpxSlideDown 0.3s ease both;
}

@keyframes lpxSlideDown {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}


/* ========================================================
   REDUCED MOTION — novos componentes
   ======================================================== */

@media (prefers-reduced-motion: reduce) {
    .lpx-back-top            { transition: none !important; }
    .lpx-back-top:hover      { transform: none !important; }
    .lpx-play-btn            { transition: none !important; }
    .lpx-video-facade:hover .lpx-play-btn,
    .lpx-video-facade:focus-visible .lpx-play-btn { transform: none !important; }
    .lpx-sticky              { animation: none !important; }
}


/* ========================================================
   23. CUSTOM CURSOR (lpx_enable_cursor)
   ======================================================== */

/* Esconde cursor nativo quando o personalizado está ativo */
body.lpx-has-cursor,
body.lpx-has-cursor * {
    cursor: none !important;
}

.lpx-cursor-dot,
.lpx-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 999999;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    will-change: transform;
    /* GSAP controla x/y via translate — translate(-50%,-50%) é o ponto de ancoragem */
}

.lpx-cursor-dot {
    width: 8px;
    height: 8px;
    background: var(--lpx-cursor-color, var(--e-global-color-primary, #33699E));
}

.lpx-cursor-ring {
    width: 36px;
    height: 36px;
    border: 2px solid var(--lpx-cursor-color, var(--e-global-color-primary, #33699E));
    background: transparent;
    opacity: 0.7;
}

/* Só exibe em dispositivos com mouse real */
@media (hover: none) {
    .lpx-cursor-dot,
    .lpx-cursor-ring { display: none !important; }
    body.lpx-has-cursor,
    body.lpx-has-cursor * { cursor: auto !important; }
}


/* ========================================================
   24. LPX FX — EFEITOS PREMIUM EXTRAS
   ======================================================== */

/*
   .lpx-fx-magnetic — botão magnético
   Sem CSS especial além do will-change; o GSAP cuida do transform.
*/
.lpx-fx-magnetic {
    display: inline-block;
    will-change: transform;
}

/*
   .lpx-fx-text-gradient — gradient animado no texto
   Uso: aplique no heading, configure --lpx-grad-from/to no CSS custom
*/
.lpx-fx-text-gradient {
    background: linear-gradient(
        135deg,
        var(--lpx-grad-from, var(--e-global-color-primary, #33699E)) 0%,
        var(--lpx-grad-to,   var(--e-global-color-accent,  #ed3566)) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/*
   .lpx-fx-glow — brilho sutil no hover (cards premium)
*/
.lpx-fx-glow {
    transition: box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.lpx-fx-glow:hover {
    box-shadow:
        0 0 0 1px rgba(var(--e-global-color-primary-rgb, 51, 105, 158), 0.15),
        0 8px 40px rgba(var(--e-global-color-primary-rgb, 51, 105, 158), 0.18) !important;
}

/*
   .lpx-fx-border-anim — borda animada no hover (estilo neon/premium)
*/
.lpx-fx-border-anim {
    position: relative;
    overflow: hidden;
}
.lpx-fx-border-anim::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        var(--lpx-border-angle, 0deg),
        var(--e-global-color-primary, #33699E),
        var(--e-global-color-accent,  #ed3566),
        var(--e-global-color-primary, #33699E)
    );
    opacity: 0;
    transition: opacity 0.4s;
    z-index: 0;
    padding: 1px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
.lpx-fx-border-anim:hover::before {
    opacity: 1;
}
.lpx-fx-border-anim > * {
    position: relative;
    z-index: 1;
}

/*
   Reduced motion — desativa tudo que é novo
*/
@media (prefers-reduced-motion: reduce) {
    .lpx-fx-magnetic        { will-change: auto !important; }
    .lpx-fx-glow,
    .lpx-fx-glow:hover      { box-shadow: none !important; transition: none !important; }
    .lpx-fx-border-anim::before { transition: none !important; }
    .lpx-cursor-dot,
    .lpx-cursor-ring        { display: none !important; }
}


/* ========================================================
   26. LAZY BACKGROUND IMAGES (data-lpx-bg)
   ======================================================== */

[data-lpx-bg] {
    background-color: #e8eaed; /* placeholder neutro enquanto carrega */
}

.lpx-bg-loaded {
    transition: background-image 0s;
}


/* ========================================================
   LOGO WALL — grayscale por padrão, cor no hover
   ======================================================== */

.lpx-logo-grayscale img {
    filter: grayscale(100%) opacity(0.6);
    transition: filter 0.3s ease;
}

.lpx-logo-grayscale:hover img,
.lpx-logo-grayscale:focus-visible img {
    filter: grayscale(0%) opacity(1);
}

@media (prefers-reduced-motion: reduce) {
    .lpx-logo-grayscale img { transition: none !important; }
}


/* ========================================================
   24. FLOATING CONTACT MULTI-CANAL (lpx_float_style="multi")
   ======================================================== */

.lpx-float-contact {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.lpx-float-options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.lpx-float-options[hidden] {
    display: none !important;
}

.lpx-float-options li {
    margin: 0;
    opacity: 0;
    transform: translateY(10px);
    animation: lpxFloatIn 0.25s ease forwards;
}

.lpx-float-options li:nth-child(1) { animation-delay: 0s; }
.lpx-float-options li:nth-child(2) { animation-delay: 0.05s; }
.lpx-float-options li:nth-child(3) { animation-delay: 0.10s; }

@keyframes lpxFloatIn {
    to { opacity: 1; transform: translateY(0); }
}

.lpx-float-opt,
.lpx-float-trigger {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lpx-float-opt:hover,
.lpx-float-trigger:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
    color: #fff;
}

.lpx-float-wa      { background-color: #25d366; }
.lpx-float-wa:hover{ background-color: #128c7e; }
.lpx-float-tel     { background-color: var(--e-global-color-primary, #33699E); }
.lpx-float-tel:hover { opacity: 0.9; }
.lpx-float-email   { background-color: #4b5563; }
.lpx-float-email:hover { background-color: #1f2937; }

/* Botão principal: WA verde, gira 45° quando aberto (X-like) */
.lpx-float-trigger {
    width: 60px;
    height: 60px;
    background-color: #25d366;
    transition: transform 0.3s ease, background-color 0.2s ease;
}
.lpx-float-trigger:hover {
    background-color: #128c7e;
}
.lpx-float-contact[data-open="true"] .lpx-float-trigger {
    transform: rotate(45deg);
    background-color: #555;
}

.lpx-float-trigger svg,
.lpx-float-opt svg {
    pointer-events: none;
}

.lpx-float-trigger svg { width: 28px; height: 28px; }
.lpx-float-opt svg     { width: 22px; height: 22px; }

@media (max-width: 768px) {
    .lpx-float-contact   { bottom: 20px; right: 20px; gap: 10px; }
    .lpx-float-trigger   { width: 50px; height: 50px; }
    .lpx-float-trigger svg { width: 24px; height: 24px; }
    .lpx-float-opt       { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .lpx-float-options li,
    .lpx-float-trigger { transition: none !important; animation: none !important; }
    .lpx-float-contact[data-open="true"] .lpx-float-trigger { transform: none !important; }
}


/* ==========================================================================
   27. LPX MARQUEE — esteira de logos infinita (CSS puro, sem JS)
   Estrutura: .lpx-marquee > .lpx-marquee-track (com os itens DUPLICADOS 2x)
   Controle: --lpx-marquee-dur (duração), data-direction via .is-reverse
   ========================================================================== */

.lpx-marquee {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.lpx-marquee .lpx-marquee-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    align-items: center;
    gap: var(--lpx-marquee-gap, 64px);
    animation: lpx-marquee var(--lpx-marquee-dur, 32s) linear infinite;
    will-change: transform;
}

.lpx-marquee.is-reverse .lpx-marquee-track { animation-direction: reverse; }
.lpx-marquee:hover .lpx-marquee-track       { animation-play-state: paused; }

/* itens: dessaturados por padrão, ganham cor no hover */
.lpx-marquee .lpx-marquee-track > * {
    flex: 0 0 auto;
    opacity: 0.6;
    filter: grayscale(100%);
    transition: opacity 0.3s ease, filter 0.3s ease;
}
.lpx-marquee .lpx-marquee-track > *:hover {
    opacity: 1;
    filter: grayscale(0%);
}

@keyframes lpx-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .lpx-marquee .lpx-marquee-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
}


/* ==========================================================================
   28. LPX TIMELINE — passos do processo (1 → 2 → 3) com conector
   Estrutura: .lpx-timeline (row) > .lpx-timeline-step (cada passo)
   O número fica em .lpx-timeline-num; a linha é desenhada via ::before.
   ========================================================================== */

.lpx-timeline { position: relative; }

/* círculo do número de cada passo */
.lpx-timeline-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1.25rem;
    background: var(--e-global-color-primary, #33699E);
    color: #fff;
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
}

/* Desktop: passos em linha, conector horizontal entre os círculos */
@media (min-width: 768px) {
    .lpx-timeline-step { position: relative; }
    .lpx-timeline-step:not(:last-child) .lpx-timeline-num::after {
        content: "";
        position: absolute;
        top: 50%;
        left: calc(100% + 8px);
        width: calc(100% + var(--lpx-timeline-gap, 32px));
        height: 2px;
        background: linear-gradient(90deg,
            var(--e-global-color-primary, #33699E),
            color-mix(in srgb, var(--e-global-color-primary, #33699E) 20%, transparent));
        transform: translateY(-50%);
        z-index: 1;
    }
}

/* Mobile: empilha e conector vertical */
@media (max-width: 767px) {
    .lpx-timeline-step:not(:last-child) .lpx-timeline-num::after {
        content: "";
        position: absolute;
        left: 28px;
        top: 56px;
        width: 2px;
        height: calc(100% - 56px);
        background: linear-gradient(180deg,
            var(--e-global-color-primary, #33699E),
            color-mix(in srgb, var(--e-global-color-primary, #33699E) 20%, transparent));
        z-index: 1;
    }
}


/* ==========================================================================
   29. LPX BENTO — grid assimétrico
   Aplique uma das classes de span no .lpx-bento-item:
   .b-2x1 (largura 2 colunas) | .b-2x2 (2 colunas + 2 linhas) | .b-1x2 (1 col, 2 linhas)
   ========================================================================== */

.lpx-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 180px;
    gap: 18px;
}
.lpx-bento-item    { grid-column: span 1; grid-row: span 1; min-width: 0; }
.lpx-bento-item.b-2x1 { grid-column: span 2; }
.lpx-bento-item.b-1x2 { grid-row: span 2; }
.lpx-bento-item.b-2x2 { grid-column: span 2; grid-row: span 2; }

@media (max-width: 900px) {
    .lpx-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
    .lpx-bento-item.b-2x1,
    .lpx-bento-item.b-2x2 { grid-column: span 2; }
    .lpx-bento-item.b-1x2 { grid-row: span 1; }
}
@media (max-width: 540px) {
    .lpx-bento { grid-template-columns: 1fr; }
    .lpx-bento-item,
    .lpx-bento-item.b-2x1,
    .lpx-bento-item.b-1x2,
    .lpx-bento-item.b-2x2 { grid-column: span 1; grid-row: span 1; }
}


/* ==========================================================================
   30. LPX COMPARE — tabela comparativa de planos / concorrentes
   ========================================================================== */

.lpx-compare {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 15px;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.lpx-compare th,
.lpx-compare td {
    padding: 16px 18px;
    text-align: center;
    border-bottom: 1px solid #eef0f3;
}
.lpx-compare th { font-weight: 700; background: #fafbfc; color: var(--e-global-color-text, #1d2327); }
.lpx-compare td:first-child,
.lpx-compare th:first-child { text-align: left; font-weight: 500; }
.lpx-compare tr:last-child td { border-bottom: 0; }

/* coluna em destaque */
.lpx-compare .is-featured {
    background: color-mix(in srgb, var(--e-global-color-primary, #33699E) 8%, transparent);
    position: relative;
}
.lpx-compare th.is-featured {
    background: var(--e-global-color-primary, #33699E);
    color: #fff;
}
.lpx-compare th.is-featured small {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.75;
    margin-top: 2px;
}

/* ícones check / x */
.lpx-compare .yes,
.lpx-compare .no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
}
.lpx-compare .yes { background: color-mix(in srgb, var(--e-global-color-primary, #33699E) 15%, transparent); color: var(--e-global-color-primary, #33699E); }
.lpx-compare .no  { background: #f4f6f9; color: #94a3b8; }

@media (max-width: 720px) {
    .lpx-compare { font-size: 13px; }
    .lpx-compare th,
    .lpx-compare td { padding: 12px 10px; }
}


/* ==========================================================================
   31. LPX MASONRY — galeria com colunas (CSS columns)
   O lightbox é do próprio Elementor (open_lightbox no link da imagem).
   ========================================================================== */

.lpx-masonry {
    column-count: 3;
    column-gap: 16px;
}
.lpx-masonry > * {
    break-inside: avoid;
    margin-bottom: 16px;
    display: block;
}
.lpx-masonry img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}
.lpx-masonry a:hover img {
    transform: scale(1.02);
    filter: brightness(1.05);
}

@media (max-width: 900px) { .lpx-masonry { column-count: 2; } }
@media (max-width: 540px) { .lpx-masonry { column-count: 1; } }


/* ==========================================================================
   32. LPX STACK — cards empilhados com scroll sticky (stacking effect)
   Estrutura:
       .lpx-stack
         .lpx-stack-card  (cada card)
         .lpx-stack-card
         ...
   Cada card "gruda" no topo enquanto o próximo sobe por cima.
   Variável --lpx-stack-top controla o offset do header fixo (default 24px).
   ========================================================================== */

/* IMPORTANTE: o Elementor força display:flex nos containers; aqui forçamos
   display:block pra que position:sticky dos filhos funcione corretamente. */
.lpx-stack,
.elementor-element.lpx-stack {
    --lpx-stack-top: 24px;
    --lpx-stack-gap: 24px;
    display: block !important;
}

.lpx-stack-card,
.elementor-element.lpx-stack-card {
    position: sticky !important;
    top: var(--lpx-stack-top, 24px);
    margin-bottom: var(--lpx-stack-gap, 24px);
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    will-change: transform;
}

/* Empilhamento progressivo: cada card gruda em offset crescente,
   o próximo sobe por cima e cria a sensação de profundidade. */
.lpx-stack > .elementor-element:nth-child(1) .lpx-stack-card,
.lpx-stack > .lpx-stack-card:nth-child(1),
.lpx-stack > .e-con:nth-child(1).lpx-stack-card { top: calc(var(--lpx-stack-top) + 0px); }
.lpx-stack > .elementor-element:nth-child(2) .lpx-stack-card,
.lpx-stack > .lpx-stack-card:nth-child(2),
.lpx-stack > .e-con:nth-child(2).lpx-stack-card { top: calc(var(--lpx-stack-top) + 12px); }
.lpx-stack > .elementor-element:nth-child(3) .lpx-stack-card,
.lpx-stack > .lpx-stack-card:nth-child(3),
.lpx-stack > .e-con:nth-child(3).lpx-stack-card { top: calc(var(--lpx-stack-top) + 24px); }
.lpx-stack > .elementor-element:nth-child(4) .lpx-stack-card,
.lpx-stack > .lpx-stack-card:nth-child(4),
.lpx-stack > .e-con:nth-child(4).lpx-stack-card { top: calc(var(--lpx-stack-top) + 36px); }
.lpx-stack > .elementor-element:nth-child(5) .lpx-stack-card,
.lpx-stack > .lpx-stack-card:nth-child(5),
.lpx-stack > .e-con:nth-child(5).lpx-stack-card { top: calc(var(--lpx-stack-top) + 48px); }
.lpx-stack > .elementor-element:nth-child(6) .lpx-stack-card,
.lpx-stack > .lpx-stack-card:nth-child(6),
.lpx-stack > .e-con:nth-child(6).lpx-stack-card { top: calc(var(--lpx-stack-top) + 60px); }
.lpx-stack > .elementor-element:nth-child(7) .lpx-stack-card,
.lpx-stack > .lpx-stack-card:nth-child(7),
.lpx-stack > .e-con:nth-child(7).lpx-stack-card { top: calc(var(--lpx-stack-top) + 72px); }

/* Reforço pro badge numerado (.lpx-stack-num) — Elementor pode aplicar
   estilos de heading que apagam o background */
.lpx-stack-num,
.elementor-element .lpx-stack-num,
.lpx-stack-num.elementor-heading-title {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px !important;
    height: 32px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    background: var(--e-global-color-primary, #33699E) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
    width: fit-content !important;
}

/* badge numerada (01, 02, ...) */
.lpx-stack-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 10px;
    background: var(--e-global-color-primary, #33699E);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 1;
}

/* mobile: sticky atrapalha a leitura, desliga */
@media (max-width: 767px) {
    .lpx-stack-card { position: static; }
}

@media (prefers-reduced-motion: reduce) {
    .lpx-stack-card { position: static; }
}


/* ==========================================================================
   33. LPX FX TILT 3D — card inclina seguindo o cursor
   Aplique a classe .lpx-fx-tilt em qualquer container/widget.
   Opcionalmente data-fx-tilt-max="12" (graus, default 10).
   O JS no FX engine seta as CSS vars --tx e --ty.
   ========================================================================== */

.lpx-fx-tilt {
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg));
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.lpx-fx-tilt.is-tilting {
    transition: transform 0.08s linear; /* mais responsivo durante o movimento */
}
/* highlight de vidro que segue o cursor (pseudo-elemento) */
.lpx-fx-tilt > * { transform: translateZ(0); }
.lpx-fx-tilt::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        circle at var(--hx, 50%) var(--hy, 50%),
        rgba(255, 255, 255, 0.18),
        transparent 40%
    );
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 2;
}
.lpx-fx-tilt.is-tilting::after { opacity: 1; }

@media (hover: none), (max-width: 767px), (prefers-reduced-motion: reduce) {
    .lpx-fx-tilt {
        transform: none !important;
        transition: none !important;
    }
    .lpx-fx-tilt::after { display: none; }
}


/* ==========================================================================
   34. LPX MARQUEE DE TEXTO — variante grande/kinética do marquee
   Estrutura idêntica ao logo marquee:
       .lpx-marquee.lpx-marquee-text > .lpx-marquee-track > spans/divs
   .is-outline → texto vazado (só contorno)
   .is-reverse no container externo já inverte a direção (CSS seção 27).
   ========================================================================== */

.lpx-marquee.lpx-marquee-text { -webkit-mask-image: none; mask-image: none; }

.lpx-marquee-text .lpx-marquee-track {
    gap: 48px;
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(48px, 9vw, 120px);
    line-height: 1;
    letter-spacing: -2px;
    color: var(--e-global-color-text, #1d2327);
    white-space: nowrap;
}
.lpx-marquee-text .lpx-marquee-track > * {
    flex: 0 0 auto;
    opacity: 1;
    filter: none;
    display: inline-flex;
    align-items: center;
    gap: 48px;
}
.lpx-marquee-text .lpx-marquee-track > *::after {
    content: "•";
    font-size: 0.5em;
    opacity: 0.4;
    margin-left: 48px;
}

/* texto vazado / outline */
.lpx-marquee-text.is-outline .lpx-marquee-track {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--e-global-color-text, #1d2327);
}

/* destaque no hover do termo */
.lpx-marquee-text .lpx-marquee-track > *:hover {
    color: var(--e-global-color-primary, #33699E);
    -webkit-text-stroke-color: var(--e-global-color-primary, #33699E);
    transition: color 0.2s ease, -webkit-text-stroke-color 0.2s ease;
}


/* ==========================================================================
   35. LPX HERO SPOTLIGHT REVEAL — "buraco" transparente animado sobre imagem
   Estrutura:
       .lpx-hero-reveal  (container com background-image)
         > conteúdo
   O ::before cria um radial-gradient escuro com centro transparente que se
   move suavemente em loop — dá a impressão de uma luz/spotlight passando.
   Variáveis:
     --lpx-reveal-color : cor do escurecimento (default #0B161E)
     --lpx-reveal-soft  : opacidade do centro (default 0.25)
     --lpx-reveal-hard  : opacidade das bordas (default 0.95)
   ========================================================================== */

.lpx-hero-reveal {
    position: relative;
    overflow: hidden;
}

/* Overlay como DIV (mais confiável que ::before em containers do Elementor).
   A DIV cobre 100% e NÃO se move. O que se move é o CENTRO do gradient
   dentro dela — via background-position. Bordas continuam sempre escuras. */
.lpx-hero-reveal-overlay {
    /* soft = transparente total no centro do spot (revela a imagem 100%).
       hard = quase preto nas bordas (esconde o resto).               */
    --lpx-reveal-soft: rgba(11, 22, 30, 0.00);
    --lpx-reveal-hard: rgba(11, 22, 30, 0.95);
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
    /* Spot BEM definido — transição rápida (-3% → 26%) cria um foco
       de luz nítido como uma lanterna. background-size 200% garante
       que sempre tenha cor escura sobrando nas bordas. */
    background:
        radial-gradient(
            circle,
            var(--lpx-reveal-soft) -3%,
            var(--lpx-reveal-hard) 26%
        );
    background-size: 200% 200%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    animation: lpx-spotlight-move 14s ease-in-out infinite;
    will-change: background-position;
}

/* Conteúdo fica acima do overlay (z-index 2) */
.lpx-hero-reveal-content {
    position: relative;
    z-index: 2;
}

/* Range amplificado (25% a 75%) → o spot atravessa boa parte da hero.
   E faz uma trajetória em órbita, não só ida-e-volta vertical/horizontal. */
@keyframes lpx-spotlight-move {
    0%   { background-position: 30% 40%; }
    20%  { background-position: 55% 30%; }
    40%  { background-position: 70% 55%; }
    60%  { background-position: 55% 75%; }
    80%  { background-position: 30% 65%; }
    100% { background-position: 30% 40%; }
}

@media (prefers-reduced-motion: reduce) {
    .lpx-hero-reveal-overlay { animation: none; }
}


/* ==========================================================================
   36. LPX SCROLL INDICATOR — linha + círculo com seta pulsante + label "SCROLL"
   Estrutura HTML usada no template:
       <div class="lpx-scroll-indicator">
         <span class="lpx-scroll-line"></span>
         <span class="lpx-scroll-circle"> <svg/> </span>
         <span class="lpx-scroll-label">SCROLL</span>
       </div>
   ========================================================================== */

.lpx-scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 11px;
    letter-spacing: 3px;
    font-weight: 500;
    text-transform: uppercase;
}
.lpx-scroll-line {
    width: 1px;
    height: 48px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.55));
}
.lpx-scroll-circle {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: lpx-scroll-pulse 2.2s ease-in-out infinite;
}
.lpx-scroll-circle svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 1.6;
    fill: none;
}
.lpx-scroll-label {
    opacity: 0.7;
    margin-top: 2px;
}

@keyframes lpx-scroll-pulse {
    0%, 100% { transform: translateY(0);    opacity: 1;   }
    50%      { transform: translateY(6px);  opacity: 0.55;}
}

@media (prefers-reduced-motion: reduce) {
    .lpx-scroll-circle { animation: none; }
}


/* ==========================================================================
   37. LPX SCROLL PROGRESS — barra no topo da página indicando progresso
   Injetada pelo PHP quando o Customizer "lpx_scroll_progress" está ligado.
   Cor: var(--lpx-progress-color) — default: primary do Elementor.
   ========================================================================== */

.lpx-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: var(--lpx-progress-color, var(--e-global-color-primary, #33699E));
    z-index: 9999;
    pointer-events: none;
    will-change: transform;
    transition: opacity 0.2s ease;
}
.lpx-scroll-progress.is-hidden { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    /* mantém visível mas sem efeito de barra crescendo */
    .lpx-scroll-progress { transform: scaleX(1); opacity: 0.5; }
}


/* ==========================================================================
   38. LPX CARD GLASS — cards com glassmorphism suave no hover
   Estrutura: <container class="lpx-card-glass"> conteúdo </container>
   Variações:
     .is-dark   → cards em fundo escuro (default)
     .is-light  → cards em fundo claro
   Cor do glow: usa var(--e-global-color-accent) ou --e-global-color-primary.
   ========================================================================== */

.lpx-card-glass {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition:
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.45s ease,
        border-color 0.45s ease,
        backdrop-filter 0.45s ease,
        box-shadow 0.45s ease;
    overflow: hidden;
    isolation: isolate;
}
/* highlight sutil no topo (linha de luz) */
.lpx-card-glass::before {
    content: "";
    position: absolute;
    top: 0; left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent);
    opacity: 0;
    transition: opacity 0.45s ease;
    z-index: 1;
}
/* halo radial que segue um ponto fixo (centro-topo) — aparece no hover */
.lpx-card-glass::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 50% 0%,
        color-mix(in srgb, var(--e-global-color-accent, #d4af37) 22%, transparent),
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 0;
}
.lpx-card-glass > * { position: relative; z-index: 2; }

.lpx-card-glass:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.06);
    border-color: color-mix(in srgb, var(--e-global-color-accent, #d4af37) 45%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
        0 22px 60px -20px color-mix(in srgb, var(--e-global-color-accent, #d4af37) 25%, transparent),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.lpx-card-glass:hover::before,
.lpx-card-glass:hover::after { opacity: 1; }

/* variante para fundo claro */
.lpx-card-glass.is-light {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}
.lpx-card-glass.is-light::before {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.18), transparent);
}
.lpx-card-glass.is-light:hover {
    background: rgba(255, 255, 255, 0.75);
    border-color: color-mix(in srgb, var(--e-global-color-primary, #33699E) 30%, transparent);
    box-shadow: 0 22px 60px -20px rgba(0, 0, 0, 0.18);
}

@media (prefers-reduced-motion: reduce) {
    .lpx-card-glass,
    .lpx-card-glass:hover {
        transform: none;
        transition: background 0.2s ease, border-color 0.2s ease;
    }
}


/* ==========================================================================
   39. LPX CTA SLIDER BANNER — slider de banners com autoplay
   Estrutura HTML (gerada pelo template):
     <div class="lpx-cta-slider" data-autoplay="6000">
       <div class="lpx-cta-slider-track">
         <article class="lpx-cta-slide" data-active="true">
           <img class="lpx-cta-slide-img lpx-hero" ...> ← primeiro slide é LCP
           <div class="lpx-cta-slide-overlay"></div>
           <div class="lpx-cta-slide-content">
             <span class="lpx-cta-tag">TAG</span>
             <h2 class="lpx-cta-title">Título</h2>
             <p class="lpx-cta-desc">Descrição</p>
             <a class="lpx-cta-btn" href="...">Botão →</a>
           </div>
         </article>
         ...mais slides
       </div>
       <div class="lpx-cta-dots"></div>
       <div class="lpx-cta-arrows">
         <button class="lpx-cta-arrow" data-dir="-1" aria-label="Anterior">‹</button>
         <button class="lpx-cta-arrow" data-dir="1"  aria-label="Próximo">›</button>
       </div>
     </div>
   ========================================================================== */

.lpx-cta-slider {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    isolation: isolate;
}
.lpx-cta-slider-track {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.lpx-cta-slider-track::-webkit-scrollbar { display: none; }

.lpx-cta-slide {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    aspect-ratio: 16 / 7;
    min-height: 380px;
    overflow: hidden;
}
@media (max-width: 768px) {
    .lpx-cta-slide { aspect-ratio: 4 / 5; min-height: 480px; }
}

.lpx-cta-slide-img,
.lpx-cta-slide-picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
}
.lpx-cta-slide-img,
.lpx-cta-slide-picture > img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}
.lpx-cta-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.45) 40%,
        rgba(0, 0, 0, 0.20) 100%);
    z-index: 1;
}
/* Tema light: overlay branco em vez de preto */
.lpx-cta-slide[data-theme="light"] .lpx-cta-slide-overlay {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.75) 0%,
        rgba(255, 255, 255, 0.45) 40%,
        rgba(255, 255, 255, 0.20) 100%);
}
@media (max-width: 768px) {
    .lpx-cta-slide-overlay {
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.30) 0%,
            rgba(0, 0, 0, 0.65) 60%,
            rgba(0, 0, 0, 0.85) 100%);
    }
    .lpx-cta-slide[data-theme="light"] .lpx-cta-slide-overlay {
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.30) 0%,
            rgba(255, 255, 255, 0.65) 60%,
            rgba(255, 255, 255, 0.85) 100%);
    }
}

.lpx-cta-slide-content {
    position: relative;
    z-index: 2;
    max-width: 560px;
    padding: 56px 64px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    color: #fff;
}
@media (max-width: 768px) {
    .lpx-cta-slide-content {
        padding: 32px 24px;
        max-width: 100%;
        justify-content: flex-end;
    }
}

/* Reveal: entra em cascata só no slide ativo */
.lpx-cta-slide-content > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.lpx-cta-slide[data-active="true"] .lpx-cta-slide-content > * {
    opacity: 1;
    transform: translateY(0);
}
.lpx-cta-slide[data-active="true"] .lpx-cta-slide-content > *:nth-child(1) { transition-delay: 0.10s; }
.lpx-cta-slide[data-active="true"] .lpx-cta-slide-content > *:nth-child(2) { transition-delay: 0.22s; }
.lpx-cta-slide[data-active="true"] .lpx-cta-slide-content > *:nth-child(3) { transition-delay: 0.34s; }
.lpx-cta-slide[data-active="true"] .lpx-cta-slide-content > *:nth-child(4) { transition-delay: 0.46s; }

.lpx-cta-tag {
    display: inline-block;
    background: var(--e-global-color-primary, #a3c52d);
    color: var(--e-global-color-text, #0b0d08);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 18px;
}
.lpx-cta-title {
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -1px;
    margin: 0 0 14px;
}
.lpx-cta-desc {
    font-size: 15px;
    line-height: 1.55;
    opacity: 0.82;
    margin: 0 0 28px;
    max-width: 460px;
}
.lpx-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--e-global-color-primary, #a3c52d);
    color: var(--e-global-color-text, #0b0d08);
    font-size: 14px;
    font-weight: 600;
    padding: 12px 22px;
    border-radius: 999px;
    text-decoration: none;
    transition: transform 0.25s ease, background 0.25s ease;
}
.lpx-cta-btn:hover {
    transform: translateY(-2px);
    background: var(--e-global-color-accent, #65a30d);
}
.lpx-cta-btn::after {
    content: "→";
    font-size: 16px;
    transition: transform 0.25s ease;
}
.lpx-cta-btn:hover::after { transform: translateX(4px); }

/* Dots */
.lpx-cta-dots {
    position: absolute;
    bottom: 28px;
    left: 64px;
    display: flex;
    gap: 8px;
    z-index: 3;
}
@media (max-width: 768px) { .lpx-cta-dots { left: 24px; bottom: 20px; } }

.lpx-cta-dot {
    width: 28px;
    height: 3px;
    border-radius: 2px;
    border: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: background 0.25s ease, width 0.25s ease;
}
.lpx-cta-dot[aria-current="true"] {
    background: var(--e-global-color-primary, #a3c52d);
    width: 42px;
}

/* Arrows */
.lpx-cta-arrows {
    position: absolute;
    bottom: 24px;
    right: 28px;
    display: flex;
    gap: 6px;
    z-index: 3;
}
@media (max-width: 768px) {
    .lpx-cta-arrows { right: 16px; bottom: 16px; }
}
.lpx-cta-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, border-color 0.25s ease;
}
.lpx-cta-arrow:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.55);
}

@media (prefers-reduced-motion: reduce) {
    .lpx-cta-slider-track { scroll-behavior: auto; }
    .lpx-cta-slide-content > * { transition: none; opacity: 1; transform: none; }
}


/* ==========================================================================
   40. LPX CONTACT LIST — lista vertical de contatos com ícone redondo
   HTML esperado (no widget html do Elementor):
     <ul class="lpx-contact-list">
       <li><span class="ico"><svg|i.../></span>
           <a href="...">texto</a></li>
       ...
     </ul>
   ========================================================================== */

.lpx-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.lpx-contact-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    font-size: 15px;
    line-height: 1.4;
}
.lpx-contact-list .ico {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--e-global-color-primary, #a3c52d) 18%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--e-global-color-primary, #a3c52d);
}
.lpx-contact-list .ico svg,
.lpx-contact-list .ico i { width: 16px; height: 16px; font-size: 15px; }
.lpx-contact-list a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}
.lpx-contact-list a:hover {
    color: var(--e-global-color-primary, #a3c52d);
}

/* Nota auxiliar com ícone (i) no rodapé do card */
.lpx-contact-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.55);
}
.lpx-contact-hint::before {
    content: "i";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 2px;
}


/* ==========================================================================
   41. LPX FAN — leque radial de cards (Hero Sky Fan)
   Estrutura:
     <div class="lpx-fan">
       <div class="lpx-fan-card lpx-fan-card-1">card 1</div>
       <div class="lpx-fan-card lpx-fan-card-2">card 2</div>
       ...
       <div class="lpx-fan-card lpx-fan-card-7">card 7</div>
     </div>
   Os 7 cards ficam empilhados no MESMO ponto base (transform-origin
   no centro-base) e cada um rotaciona um ângulo diferente, criando o leque.
   ========================================================================== */

.lpx-fan,
.elementor-element.lpx-fan {
    position: relative !important;
    width: 100% !important;
    /* altura definida garante espaço pra rotação */
    min-height: 380px;
    display: block !important;
    pointer-events: none; /* cards individuais reativam quando precisam */
}

.lpx-fan-card,
.elementor-element.lpx-fan-card {
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;
    width: 140px !important;
    height: 200px !important;
    margin-left: -70px !important; /* centraliza horizontalmente (metade da largura) */
    transform-origin: 50% 100% !important; /* pivot no centro-base */
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: auto;
}

/* 7 cards, rotação simétrica -45° → +45°, com translateY pra "elevar" os do meio */
.lpx-fan-card-1 { transform: rotate(-45deg) translateY(-10px); z-index: 1; }
.lpx-fan-card-2 { transform: rotate(-30deg) translateY(-20px); z-index: 2; }
.lpx-fan-card-3 { transform: rotate(-15deg) translateY(-28px); z-index: 3; }
.lpx-fan-card-4 { transform: rotate(0deg)   translateY(-32px); z-index: 4; }
.lpx-fan-card-5 { transform: rotate(15deg)  translateY(-28px); z-index: 3; }
.lpx-fan-card-6 { transform: rotate(30deg)  translateY(-20px); z-index: 2; }
.lpx-fan-card-7 { transform: rotate(45deg)  translateY(-10px); z-index: 1; }

/* hover: card vem pra frente e endireita um pouco */
.lpx-fan-card:hover,
.elementor-element.lpx-fan-card:hover {
    z-index: 10 !important;
    transform: rotate(0deg) translateY(-50px) scale(1.06);
}

/* imagem ocupa o card todo */
.lpx-fan-card img,
.lpx-fan-card .elementor-image img,
.lpx-fan-card .elementor-widget-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    border-radius: 14px;
}

/* Tablet/mobile: simplifica — vira leque mais fechado */
@media (max-width: 900px) {
    .lpx-fan { min-height: 280px; }
    .lpx-fan-card { width: 100px !important; height: 140px !important; margin-left: -50px !important; }
    .lpx-fan-card-1 { transform: rotate(-30deg) translateY(-6px); }
    .lpx-fan-card-2 { transform: rotate(-20deg) translateY(-14px); }
    .lpx-fan-card-3 { transform: rotate(-10deg) translateY(-20px); }
    .lpx-fan-card-4 { transform: rotate(0deg)   translateY(-22px); }
    .lpx-fan-card-5 { transform: rotate(10deg)  translateY(-20px); }
    .lpx-fan-card-6 { transform: rotate(20deg)  translateY(-14px); }
    .lpx-fan-card-7 { transform: rotate(30deg)  translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
    .lpx-fan-card { transition: none; }
}


/* ==========================================================================
   42. LPX VÍDEOS — slider de cards + popup (CPT lpx_video)
   Estrutura: .lpx-video-slider > .lpx-video-track > .lpx-video-card
   Popup: .lpx-video-modal (injetado no footer)
   ========================================================================== */

.lpx-video-slider { position: relative; }
.lpx-video-track {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 6px 2px 18px;
    scrollbar-width: thin;
}
.lpx-video-track::-webkit-scrollbar { height: 6px; }
.lpx-video-track::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 6px; }

.lpx-video-card {
    flex: 0 0 300px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}
@media (max-width: 600px) { .lpx-video-card { flex-basis: 78vw; } }

.lpx-video-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #d9d9de center/cover no-repeat;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
    transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
}
.lpx-video-card:hover .lpx-video-thumb {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -16px rgba(0,0,0,.4);
}
.lpx-video-thumb::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.25));
}
.lpx-video-play {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 60px; height: 60px; border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: var(--e-global-color-primary, #1d2327);
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
    transition: transform .25s cubic-bezier(.16,1,.3,1), background .25s;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.lpx-video-play svg { width: 26px; height: 26px; margin-left: 2px; }
.lpx-video-card:hover .lpx-video-play {
    transform: translate(-50%, -50%) scale(1.08);
    background: #fff;
}
.lpx-video-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--e-global-color-text, #1d2327);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Setas */
.lpx-video-arrow {
    position: absolute; top: calc(50% - 30px);
    transform: translateY(-50%);
    width: 42px; height: 42px; border-radius: 50%;
    border: 0; background: #fff; color: #1d2327;
    font-size: 22px; line-height: 1; cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    display: flex; align-items: center; justify-content: center;
    z-index: 3; transition: transform .15s, background .15s;
}
.lpx-video-arrow:hover { transform: translateY(-50%) scale(1.06); }
.lpx-video-arrow.prev { left: -10px; }
.lpx-video-arrow.next { right: -10px; }
@media (max-width: 768px) { .lpx-video-arrow { display: none; } }

/* Popup / modal */
.lpx-video-modal {
    position: fixed; inset: 0; z-index: 99999;
    display: none; align-items: center; justify-content: center;
    padding: 24px;
}
.lpx-video-modal[aria-hidden="false"] { display: flex; }
.lpx-video-modal-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.82);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    animation: lpx-video-fade .25s ease;
}
.lpx-video-modal-box {
    position: relative; z-index: 1;
    width: min(960px, 100%);
    aspect-ratio: 16 / 9;
    animation: lpx-video-zoom .3s cubic-bezier(.16,1,.3,1);
}
.lpx-video-modal-frame { width: 100%; height: 100%; }
.lpx-video-modal-frame iframe,
.lpx-video-modal-frame video { width: 100%; height: 100%; }
.lpx-video-modal-close {
    position: absolute; top: -44px; right: 0;
    width: 36px; height: 36px; border-radius: 50%;
    border: 0; background: rgba(255,255,255,.15); color: #fff;
    font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.lpx-video-modal-close:hover { background: rgba(255,255,255,.3); }

@keyframes lpx-video-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lpx-video-zoom { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
    .lpx-video-thumb, .lpx-video-play, .lpx-video-arrow,
    .lpx-video-modal-overlay, .lpx-video-modal-box { transition: none; animation: none; }
}