/*--------------------------------------------------------------
# Pagina de modulo -- visual novo EM AVALIACAO (/plugins-glpi/<slug>?lab=1), 2026-11-11
# Tudo sob body.plugin-lab: sem o parametro ?lab=1 nada disto e carregado.
# Mesmo idioma visual da home nova (home-lab.css): topo escuro com aurora, cartoes com
# brilho que segue o mouse, faixas escuras para video/depoimentos/chamada final.
# Carregado SEM ?v= de proposito (no-store enquanto a proposta e avaliada). JS: assets/js/plugin-lab.js
# Os seletores usam :has() para achar cada secao pelo conteudo (o markup da view nao muda no preview).
--------------------------------------------------------------*/
.plugin-lab {
  --hv-0: #060b18;
  --hv-1: #0c1730;
  --hv-2: #14244a;
  --hv-cyan: #47b2e4;
  --hv-sky: #7fd4ff;
  --hv-violet: #8b6cff;
  --hv-mint: #34d399;
  --hv-amber: #fbbf24;
  --hv-rose: #fb7185;
  --hv-ink: #1b6fa3;
  --hv-line: color-mix(in srgb, var(--default-color), transparent 88%);
  --hv-ease: cubic-bezier(.2, .7, .2, 1);
}
[data-theme="dark"] .plugin-lab { --hv-ink: #7dd3fc; }
.plugin-lab main.main { padding-top: 0 !important; }
.plugin-lab main.main > section { position: relative; }
.plugin-lab main.main > section > .container { position: relative; z-index: 1; }
.plugin-lab .pl-pts { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.plugin-lab .section-title { padding-bottom: 34px; }
.plugin-lab a:focus-visible, .plugin-lab button:focus-visible { outline: 3px solid var(--hv-sky); outline-offset: 3px; }

/*============================================================== HERO (faixa escura de ponta a ponta) */
.plugin-lab main.main.main--service > section.section:first-child:has(.service-hero) { overflow: clip; padding: 124px 0 60px; color: #c3cfe2;
  background: linear-gradient(180deg, var(--hv-0) 0%, var(--hv-1) 46%, #0a1429 100%); }
/* aurora: tres manchas de cor que se movem devagar */
.plugin-lab main.main > section:has(.service-hero)::before { content: ""; position: absolute; inset: -20% -10%; pointer-events: none; opacity: .75; filter: blur(70px);
  background: radial-gradient(520px 420px at 72% 18%, rgba(42, 127, 214, .6), transparent 70%), radial-gradient(460px 380px at 8% 62%, rgba(91, 63, 214, .45), transparent 70%), radial-gradient(380px 320px at 96% 86%, rgba(25, 184, 166, .32), transparent 70%);
  animation: pl-drift 20s ease-in-out infinite alternate; }
/* malha */
.plugin-lab main.main > section:has(.service-hero)::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 25%, #000 20%, transparent 78%); mask-image: radial-gradient(ellipse 80% 75% at 50% 25%, #000 20%, transparent 78%); }
@keyframes pl-drift { to { transform: translate3d(-50px, 34px, 0) scale(1.08); } }

.plugin-lab .service-hero { padding: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.plugin-lab .service-hero::after, .plugin-lab .service-hero::before { display: none; }
.plugin-lab .service-hero .hero-content { padding: 0; }
.plugin-lab .service-hero h1 { margin: 0 0 14px !important; font: 800 clamp(36px, 4.6vw, 60px)/1.04 var(--heading-font); letter-spacing: -0.02em; color: #fff;
  background: linear-gradient(92deg, #fff 30%, #b9a4ff 70%, #7fd4ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.plugin-lab .service-hero .lead { margin-bottom: 22px; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; font-weight: 500; color: #dbe6f7; }
.plugin-lab .service-hero .hero-content > p.mb-4 { font-size: 16.5px; line-height: 1.65; color: #b9c6dc; }
.plugin-lab .hero-content .hero-badges { gap: 8px; margin-bottom: 22px; }
.plugin-lab .hero-content .hero-badges .module-badge { padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .18); backdrop-filter: blur(6px); }
.plugin-lab .hero-content .hero-badges .module-badge--free { color: #a7f3d0; border-color: rgba(52, 211, 153, .45); background: rgba(52, 211, 153, .12); }
.plugin-lab .hero-content .hero-badges .module-badge--licensed { color: #fde68a; border-color: rgba(251, 191, 36, .45); background: rgba(251, 191, 36, .12); }

/* botoes: principal em degrade, secundario em vidro (hero, cross-sell e chamada final) */
.plugin-lab .service-hero .btn, .plugin-lab .service-cta .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; overflow: hidden; border-radius: 12px; font: 700 15.5px/1.2 var(--heading-font);
  transition: transform .25s var(--hv-ease), box-shadow .25s ease, background-color .2s ease, border-color .2s ease; }
.plugin-lab .service-hero .btn-light, .plugin-lab .service-cta .btn-light { color: #06142a; border: 0; background: linear-gradient(135deg, #8bdcff, var(--hv-cyan) 60%, #6f9bff); box-shadow: 0 10px 30px rgba(71, 178, 228, .38), inset 0 1px 0 rgba(255, 255, 255, .5); }
.plugin-lab .service-hero .btn-light::after, .plugin-lab .service-cta .btn-light::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s ease; }
.plugin-lab .service-hero .btn-light:hover, .plugin-lab .service-cta .btn-light:hover { color: #06142a; transform: translateY(-2px); box-shadow: 0 18px 44px rgba(71, 178, 228, .5), inset 0 1px 0 rgba(255, 255, 255, .5); }
.plugin-lab .service-hero .btn-light:hover::after, .plugin-lab .service-cta .btn-light:hover::after { transform: translateX(120%); }
.plugin-lab .service-hero .btn-outline-light, .plugin-lab .service-cta .btn-outline-light { color: #fff; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .05); backdrop-filter: blur(6px); }
.plugin-lab .service-hero .btn-outline-light:hover, .plugin-lab .service-cta .btn-outline-light:hover { color: #fff; background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .55); transform: translateY(-2px); }

/* com print do modulo: texto a esquerda, tela a direita; os destaques descem para uma faixa de vidro */
.plugin-lab .service-hero > .row.pl-shot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; margin: 0; perspective: 1400px; }
.plugin-lab .service-hero > .row.pl-shot > * { width: auto; max-width: none; padding: 0; margin: 0; }
/* pilha de prints: as molduras ocupam a mesma celula; data-pos diz quem esta na frente (0), no meio (1) e no fundo (2) */
.plugin-lab .pl-pilha { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); width: 97%; transform: rotateY(calc(-8deg + var(--ry, 0deg))) rotateX(calc(3deg + var(--rx, 0deg))); transform-origin: left center; transition: transform .35s ease-out; }
.plugin-lab .pl-shot__wrap--pilha { padding: 40px 56px 0 0; }
.plugin-lab .pl-shot__wrap--pilha .pl-pilha { width: 100%; }
.plugin-lab .pl-frame { grid-area: 1 / 1; position: relative; display: block; width: 100%; padding: 0; border-radius: 14px; overflow: hidden; cursor: pointer; background: #fff; border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 40px 80px rgba(2, 6, 18, .55), 0 0 0 6px rgba(255, 255, 255, .05);
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), filter .6s ease, box-shadow .6s ease; }
.plugin-lab .pl-frame[data-pos="0"] { z-index: 3; }
.plugin-lab .pl-frame[data-pos="1"] { z-index: 2; transform: translate(28px, -20px) scale(.955) rotate(1.2deg); filter: brightness(.78) saturate(.9); box-shadow: 0 24px 50px rgba(2, 6, 18, .45); }
.plugin-lab .pl-frame[data-pos="2"] { z-index: 1; transform: translate(56px, -40px) scale(.91) rotate(2.4deg); filter: brightness(.6) saturate(.85); box-shadow: 0 16px 36px rgba(2, 6, 18, .4); }
/* saida: a da frente escorrega para a esquerda e gira, ainda por cima, antes de descer para o fundo */
.plugin-lab .pl-frame.is-saindo { z-index: 4; transform: translate(-34%, 5%) rotate(-7deg) scale(.97); transition-duration: .42s; box-shadow: 0 50px 90px rgba(2, 6, 18, .6); }
.plugin-lab .pl-frame:not([data-pos="0"]) .pl-frame__prog { display: none; }
.plugin-lab .pl-frame__bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: #e8edf5; }
.plugin-lab .pl-frame__bar span { width: 9px; height: 9px; border-radius: 50%; background: #f87171; }
.plugin-lab .pl-frame__bar span:nth-child(2) { background: #fbbf24; } .plugin-lab .pl-frame__bar span:nth-child(3) { background: #34d399; }
.plugin-lab .pl-frame__bar em { margin-left: 10px; flex: 1; max-width: 280px; height: 15px; border-radius: 8px; background: #fff; }
.plugin-lab .pl-frame__tela { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #fff; }
.plugin-lab .pl-frame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
/* rodizio das imagens da galeria: a proxima entra por cima, esmaecendo */
.plugin-lab .pl-frame img.pl-frame__fade { opacity: 0; transition: opacity .6s ease; }
.plugin-lab .pl-frame img.pl-frame__fade.is-in { opacity: 1; }
.plugin-lab .pl-frame__prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(12, 23, 48, .18); }
.plugin-lab .pl-frame__prog i { display: block; height: 100%; transform-origin: left; transform: scaleX(var(--pb, 0)); transition: transform 90ms linear; background: linear-gradient(90deg, var(--hv-cyan), var(--hv-violet)); }
/* botao de tela cheia: fica no suporte (fora da pilha inclinada), sobre o canto inferior direito da folha da frente */
.plugin-lab .pl-zoom { position: absolute; right: calc(3% + 14px); bottom: 14px; z-index: 6; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 12px; font-size: 16px; color: #fff; cursor: zoom-in; background: rgba(12, 23, 48, .86); border: 1px solid rgba(255, 255, 255, .3); box-shadow: 0 10px 24px rgba(2, 6, 18, .45); transition: background-color .2s ease, transform .25s var(--hv-ease); }
.plugin-lab .pl-zoom:hover { background: var(--hv-cyan); transform: scale(1.1); }
.plugin-lab .pl-shot__wrap--pilha .pl-zoom { right: 70px; }

/* destaques: painel de vidro (ao lado do texto quando nao ha print; faixa abaixo quando ha) */
.plugin-lab .service-panel { position: relative; padding: 22px 24px; overflow: hidden; border-radius: 20px; color: #dbe6f7; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .12); box-shadow: none; backdrop-filter: blur(14px); }
.plugin-lab .service-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--hv-sky), var(--hv-violet), var(--hv-mint), transparent); background-size: 200% 100%; animation: pl-sheen 6s linear infinite; }
@keyframes pl-sheen { to { background-position: -200% 0; } }
.plugin-lab .service-panel h2 { margin: 0 0 14px !important; font: 600 12.5px/1.2 var(--default-font); letter-spacing: .06em; text-transform: uppercase; color: #9fb0cc; }
.plugin-lab .service-panel h2 i { color: var(--hv-sky); font-size: 15px; }
.plugin-lab .service-panel .service-checklist { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.plugin-lab .service-panel .service-checklist li { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 14.5px; line-height: 1.5; color: #dbe6f7; }
.plugin-lab .service-panel .service-checklist li i { flex: 0 0 auto; margin-top: 2px; color: var(--hv-mint); }
/* com print no topo os destaques saem: sao as cinco primeiras funcionalidades, que aparecem logo abaixo */
.plugin-lab .service-panel.pl-strip { display: none; }

/*============================================================== FUNCIONALIDADES */
.plugin-lab main.main > section:has(.module-card-c) { padding: 76px 0; background: radial-gradient(680px 380px at 94% 4%, color-mix(in srgb, var(--hv-violet), transparent 90%), transparent 70%), radial-gradient(620px 360px at 4% 96%, color-mix(in srgb, var(--hv-cyan), transparent 88%), transparent 70%), var(--background-color); }
.plugin-lab .plugin-overview { position: relative; margin-bottom: 40px; padding: 4px 0 4px 26px; }
.plugin-lab .plugin-overview::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--hv-cyan), var(--hv-violet)); }
.plugin-lab .plugin-overview p { font-size: 17px; line-height: 1.7; }
.plugin-lab .module-card-c { --c: var(--hv-cyan); position: relative; display: flex; align-items: center; padding: 20px; overflow: hidden; border-radius: 18px; background: var(--surface-color); border: 1px solid var(--hv-line); box-shadow: none;
  transition: transform .35s var(--hv-ease), box-shadow .35s ease, border-color .35s ease; }
.plugin-lab .module-card-c::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; pointer-events: none;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c), transparent 80%), transparent 62%); }
.plugin-lab .module-card-c::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--hv-ease); background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c), #fff 45%)); }
.plugin-lab .module-card-c:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--c), transparent 50%); box-shadow: 0 22px 48px color-mix(in srgb, var(--c), transparent 80%); }
.plugin-lab .module-card-c:hover::before { opacity: 1; }
.plugin-lab .module-card-c:hover::after { transform: scaleX(1); }
.plugin-lab .module-card-c > * { position: relative; }
.plugin-lab .module-card-c .mc-top { gap: 14px; }
.plugin-lab .module-card-c .mc-icon { width: 46px; height: 46px; border-radius: 13px; font-size: 20px; color: #fff; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c), #0c1730 38%)); box-shadow: 0 10px 22px color-mix(in srgb, var(--c), transparent 62%); transition: transform .4s var(--hv-ease); }
.plugin-lab .module-card-c:hover .mc-icon { transform: rotate(-8deg) scale(1.08); }
.plugin-lab .module-card-c h3 { font: 600 15.5px/1.45 var(--default-font) !important; color: var(--heading-color); }
.plugin-lab .row > div:nth-child(5n+2) > .module-card-c { --c: var(--hv-violet); }
.plugin-lab .row > div:nth-child(5n+3) > .module-card-c { --c: #10b981; }
.plugin-lab .row > div:nth-child(5n+4) > .module-card-c { --c: #f59e0b; }
.plugin-lab .row > div:nth-child(5n) > .module-card-c { --c: #f43f5e; }

/* so as 6 primeiras funcionalidades; o resto abre no botao (classes postas pelo JS) */
.plugin-lab .pl-mais { display: flex; justify-content: center; margin-top: 40px; }
.plugin-lab .pl-mais button { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 22px; border-radius: 12px; font: 700 15px/1.2 var(--heading-font); cursor: pointer; color: var(--heading-color); background: var(--surface-color); border: 1px solid color-mix(in srgb, var(--heading-color), transparent 70%); transition: transform .25s var(--hv-ease), background-color .2s ease, color .2s ease, border-color .2s ease; }
.plugin-lab .pl-mais button:hover { color: #fff; background: var(--hv-2); border-color: var(--hv-2); transform: translateY(-2px); }
.plugin-lab .pl-mais button i { transition: transform .3s var(--hv-ease); }
.plugin-lab .pl-mais button[aria-expanded="true"] i { transform: rotate(180deg); }
/* texto corrido do modulo: vem DEPOIS dos cartoes, recolhido, e abre no botao */
.plugin-lab .plugin-overview.pl-texto { margin: 44px auto 0; max-width: 920px; padding: 24px 26px 20px 30px; border-radius: 18px; background: var(--surface-color); border: 1px solid var(--hv-line); overflow: hidden; }
.plugin-lab .plugin-overview.pl-texto::before { border-radius: 0; }
.plugin-lab .pl-texto h3 { margin: 0 0 12px; font: 700 19px/1.3 var(--heading-font); color: var(--heading-color); }
.plugin-lab .pl-texto__corpo { position: relative; max-height: 5.2em; overflow: hidden; transition: max-height .5s var(--hv-ease); }
.plugin-lab .pl-texto__corpo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3.2em; background: linear-gradient(180deg, transparent, var(--surface-color)); transition: opacity .3s ease; pointer-events: none; }
.plugin-lab .pl-texto.is-aberto .pl-texto__corpo { max-height: 2400px; }
.plugin-lab .pl-texto.is-aberto .pl-texto__corpo::after { opacity: 0; }
.plugin-lab .pl-texto p { font-size: 16px; line-height: 1.7; color: var(--default-color); }
.plugin-lab .pl-texto .pl-mais { justify-content: flex-start; margin-top: 12px; }
.plugin-lab .pl-texto .pl-mais button { min-height: 0; padding: 4px 0; border: 0; background: none; color: var(--hv-ink); }
.plugin-lab .pl-texto .pl-mais button:hover { color: var(--hv-ink); background: none; transform: none; text-decoration: underline; text-underline-offset: 4px; }

/*============================================================== COMO FUNCIONA */
.plugin-lab main.main > section:has(.service-step) { padding: 76px 0; }
.plugin-lab main.main > section:has(.service-step) .row { counter-reset: pl-step; }
.plugin-lab .service-step { --c: var(--hv-cyan); position: relative; padding: 26px 24px 24px; overflow: hidden; border-radius: 18px; background: var(--surface-color); border: 1px solid var(--hv-line); border-left: 1px solid var(--hv-line); box-shadow: 0 10px 30px rgba(12, 23, 48, .05); counter-increment: pl-step;
  transition: transform .35s var(--hv-ease), box-shadow .35s ease, border-color .35s ease; }
.plugin-lab .service-step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c), #fff 45%)); }
.plugin-lab .service-step::after { content: counter(pl-step, decimal-leading-zero); position: absolute; right: 14px; top: 2px; font: 800 76px/1 var(--heading-font); letter-spacing: -0.04em; color: var(--c); opacity: .1; transition: opacity .35s ease, transform .5s var(--hv-ease); pointer-events: none; }
.plugin-lab .service-step:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--c), transparent 50%); box-shadow: 0 26px 56px color-mix(in srgb, var(--c), transparent 80%); }
.plugin-lab .service-step:hover::after { opacity: .2; transform: scale(1.08) rotate(-4deg); }
.plugin-lab .service-step > * { position: relative; }
.plugin-lab .service-step .step-badge { display: inline-flex; align-items: center; margin-bottom: 14px; padding: 5px 12px; border-radius: 999px; font: 700 12px/1.2 var(--heading-font); letter-spacing: .05em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c), #0c1730 38%)); }
.plugin-lab .service-step h3 { font: 700 18px/1.3 var(--heading-font) !important; color: var(--heading-color); margin-bottom: 8px !important; }
.plugin-lab .service-step p { font-size: 15px !important; line-height: 1.6; }
.plugin-lab .row > div:nth-child(4n+2) > .service-step { --c: var(--hv-violet); }
.plugin-lab .row > div:nth-child(4n+3) > .service-step { --c: #10b981; }
.plugin-lab .row > div:nth-child(4n) > .service-step { --c: #f59e0b; }

/*============================================================== DEPOIMENTOS (faixa escura) */
.plugin-lab .nx-deps { padding: 76px 0; color: #c3cfe2; background: linear-gradient(180deg, var(--hv-1), var(--hv-0)); }
.plugin-lab .nx-deps .section-title h2, .plugin-lab .nx-deps .nx-deps2__lado h2 { color: #fff; }
.plugin-lab .nx-deps .nx-deps2__sub { color: #b9c6dc; }
.plugin-lab .nx-deps .nx-deps2__sub a { color: var(--hv-sky); }
.plugin-lab .nx-deps .nx-dep { position: relative; overflow: hidden; border-radius: 18px; color: #e6ecf7; background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .12); box-shadow: none; backdrop-filter: blur(10px); transition: transform .35s var(--hv-ease), border-color .35s ease, box-shadow .35s ease; }
.plugin-lab .nx-deps .nx-dep::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--hv-sky), var(--hv-violet)); }
.plugin-lab .nx-deps .nx-dep:hover { transform: translateY(-6px); border-color: rgba(127, 212, 255, .5); box-shadow: 0 26px 60px rgba(71, 178, 228, .18); }
.plugin-lab .nx-deps .nx-dep blockquote { color: #e6ecf7; }
.plugin-lab .nx-deps .nx-dep figcaption { border-color: rgba(255, 255, 255, .12); }
.plugin-lab .nx-deps .nx-dep figcaption strong, .plugin-lab .nx-deps .nx-dep figcaption a { color: #fff; }
.plugin-lab .nx-deps .nx-dep2__meta, .plugin-lab .nx-deps .nx-dep2__data, .plugin-lab .nx-deps .nx-dep__original { color: #9fb0cc; opacity: 1; }
.plugin-lab .nx-deps .nx-dep__av { color: #fff; background: linear-gradient(135deg, var(--hv-cyan), var(--hv-violet)); }

/*============================================================== PERGUNTAS FREQUENTES (duas colunas, numeradas) */
.plugin-lab .faq-2 { padding: 76px 0; }
.plugin-lab .faq-2 .row > .col-lg-10 { width: 100%; max-width: none; flex: 0 0 100%; }
.plugin-lab .faq-2 .faq-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; counter-reset: pl-faq; }
.plugin-lab .faq-2 .faq-container .faq-item { position: relative; margin: 0; padding: 12px 18px; overflow: hidden; border-radius: 14px; border: 1px solid var(--hv-line); counter-increment: pl-faq; transition: border-color .3s ease, box-shadow .3s ease, transform .3s var(--hv-ease); }
.plugin-lab .faq-2 .faq-container .faq-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; transform: scaleY(0); transform-origin: top; transition: transform .35s var(--hv-ease); background: linear-gradient(180deg, var(--hv-cyan), var(--hv-violet)); }
.plugin-lab .faq-2 .faq-container .faq-item:hover { border-color: color-mix(in srgb, var(--hv-cyan), transparent 40%); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(71, 178, 228, .14); }
.plugin-lab .faq-2 .faq-container .faq-item.faq-active { border-color: color-mix(in srgb, var(--hv-cyan), transparent 40%); box-shadow: 0 18px 40px rgba(71, 178, 228, .16); }
.plugin-lab .faq-2 .faq-container .faq-item.faq-active::before { transform: scaleY(1); }
.plugin-lab .faq-2 .faq-container .faq-item-header { position: relative; display: flex; align-items: center; min-height: 50px; cursor: pointer; }
.plugin-lab .faq-2 .faq-container .faq-item h3 { margin: 0 46px 0 50px; font-size: 16px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.plugin-lab .faq-2 .faq-container .faq-item.faq-active h3 { -webkit-line-clamp: unset; }
.plugin-lab .faq-2 .faq-container .faq-item .faq-icon { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; line-height: 1; color: var(--hv-ink); background: color-mix(in srgb, var(--hv-cyan), transparent 86%); transition: transform .3s var(--hv-ease), background-color .3s ease, color .3s ease; }
.plugin-lab .faq-2 .faq-container .faq-item .faq-icon::before { content: counter(pl-faq, decimal-leading-zero); font-family: var(--heading-font) !important; font-weight: 800 !important; font-size: 14px; line-height: 1; letter-spacing: .02em; }
.plugin-lab .faq-2 .faq-container .faq-item:hover .faq-icon { transform: translateY(-50%) scale(1.08); }
.plugin-lab .faq-2 .faq-container .faq-item.faq-active .faq-icon { color: #fff; background: linear-gradient(135deg, var(--hv-cyan), var(--hv-violet)); }
.plugin-lab .faq-2 .faq-container .faq-item .faq-toggle { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 13px; line-height: 1; border: 1px solid var(--hv-line); transition: transform .3s var(--hv-ease), background-color .3s ease, color .3s ease, border-color .3s ease; }
.plugin-lab .faq-2 .faq-container .faq-item:hover .faq-toggle { border-color: var(--hv-cyan); color: var(--hv-ink); }
.plugin-lab .faq-2 .faq-container .faq-item.faq-active .faq-toggle { transform: translateY(-50%) rotate(90deg); color: #fff; background: var(--hv-2); border-color: var(--hv-2); }
.plugin-lab .faq-2 .faq-container .faq-active .faq-content { padding: 12px 6px 6px 50px; }
/* quantidade impar: a ultima pergunta ocupa a linha inteira, para a grade nunca fechar com um buraco */
.plugin-lab .faq-2 .faq-container .faq-item:last-child:nth-child(odd) { grid-column: 1 / -1; }

/*============================================================== CROSS-SELL e CHAMADA FINAL */
.plugin-lab main.main > section:has(.service-cta) { padding: 64px 0; }
.plugin-lab .service-cta { position: relative; overflow: hidden; padding: 44px 32px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 70px rgba(12, 23, 48, .25); }
.plugin-lab .service-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45;
  background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 0%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 70% 90% at 50% 0%, #000 10%, transparent 75%); }
.plugin-lab .service-cta > * { position: relative; }
.plugin-lab .service-cta h2 { font: 800 clamp(24px, 2.6vw, 34px)/1.2 var(--heading-font); color: #fff; }
.plugin-lab .service-cta p { max-width: 720px; margin-left: auto; margin-right: auto; font-size: 16.5px; line-height: 1.6; color: #dbe6f7; }
/* chamada final: faixa escura de ponta a ponta, encostada no rodape */
.plugin-lab main.main > section:is(.pl-fim, :last-of-type:has(.service-cta):not(.pl-sug-sec)) { overflow: clip; padding: 84px 0 92px; background: linear-gradient(180deg, var(--hv-0), var(--hv-1) 70%, #0c1730); }
.plugin-lab main.main > section:is(.pl-fim, :last-of-type:has(.service-cta):not(.pl-sug-sec))::before { content: ""; position: absolute; inset: -10%; pointer-events: none; filter: blur(80px); opacity: .55;
  background: radial-gradient(520px 380px at 12% 30%, rgba(42, 127, 214, .55), transparent 70%), radial-gradient(480px 360px at 88% 20%, rgba(91, 63, 214, .45), transparent 70%), radial-gradient(380px 300px at 60% 96%, rgba(25, 184, 166, .28), transparent 70%); }
.plugin-lab main.main > section:is(.pl-fim, :last-of-type:has(.service-cta):not(.pl-sug-sec)) .service-cta { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.plugin-lab main.main > section:is(.pl-fim, :last-of-type:has(.service-cta):not(.pl-sug-sec)) .service-cta::before { display: none; }
.plugin-lab main.main > section:is(.pl-fim, :last-of-type:has(.service-cta):not(.pl-sug-sec)) .service-cta h2 { font-size: clamp(28px, 3.4vw, 44px); margin-bottom: 14px; }
.plugin-lab main.main > section:is(.pl-fim, :last-of-type:has(.service-cta):not(.pl-sug-sec)) .service-cta p { margin-bottom: 28px; color: #b9c6dc; }

/*============================================================== Responsivo */
@media (max-width: 991.98px) {
  .plugin-lab main.main.main--service > section.section:first-child:has(.service-hero) { padding: 100px 0 48px; }
  .plugin-lab .service-hero > .row.pl-shot { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .plugin-lab .pl-pilha { width: 100%; transform: none; }
  .plugin-lab .pl-shot__wrap--pilha { padding: 26px 30px 0 0; }
  .plugin-lab .pl-zoom, .plugin-lab .pl-shot__wrap--pilha .pl-zoom { right: 42px; bottom: 12px; width: 40px; height: 40px; }
  .plugin-lab .pl-frame[data-pos="1"] { transform: translate(15px, -13px) scale(.965) rotate(.8deg); }
  .plugin-lab .pl-frame[data-pos="2"] { transform: translate(30px, -26px) scale(.93) rotate(1.6deg); }
  .plugin-lab main.main > section:has(.module-card-c), .plugin-lab main.main > section:has(.service-step), .plugin-lab .nx-deps, .plugin-lab .faq-2 { padding: 56px 0; }
  .plugin-lab .faq-2 .faq-container { grid-template-columns: minmax(0, 1fr); }
  .plugin-lab .module-card-c:hover, .plugin-lab .service-step:hover { transform: none; }
  .plugin-lab main.main > section:is(.pl-fim, :last-of-type:has(.service-cta):not(.pl-sug-sec)) { padding: 60px 0 68px; }
}
@media (max-width: 575.98px) {
  .plugin-lab .service-hero .btn, .plugin-lab .service-cta .btn { flex: 1 1 100%; }
  .plugin-lab .service-panel { padding: 18px; }
  .plugin-lab .plugin-overview { padding-left: 18px; }
  .plugin-lab .plugin-overview p { font-size: 16px; }
  .plugin-lab .faq-2 .faq-container .faq-item h3 { -webkit-line-clamp: 3; }
  .plugin-lab .service-cta { padding: 32px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .plugin-lab *, .plugin-lab *::before, .plugin-lab *::after { animation: none !important; transition: none !important; }
}

/*============================================================== Selos sobre o print do hero (tipo de licenca e versoes do GLPI) */
.plugin-lab .pl-shot__wrap { position: relative; min-width: 0; }
.plugin-lab .pl-selo { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 14px; font: 700 13px/1.2 var(--default-font); white-space: nowrap; color: #0f1a30; background: rgba(255, 255, 255, .97); border: 1px solid #e2e8f0; box-shadow: 0 22px 46px rgba(2, 6, 18, .45); animation: pl-float 6s ease-in-out infinite alternate; pointer-events: none; }
.plugin-lab .pl-selo i { font-size: 16px; }
.plugin-lab .pl-selo--a { right: 7%; top: -16px; }
.plugin-lab .pl-shot__wrap--pilha .pl-selo--a { right: auto; left: 34%; top: 22px; z-index: 5; }
.plugin-lab .pl-shot__wrap--pilha .pl-selo--b { z-index: 5; }
.plugin-lab .pl-selo--a i { color: #d97706; }
.plugin-lab .pl-selo--a.pl-selo--gratis i { color: #16a34a; }
.plugin-lab .pl-selo--b { left: -18px; bottom: -16px; animation-delay: -3s; }
.plugin-lab .pl-selo--b i { color: #6d28d9; }
@keyframes pl-float { to { transform: translateY(-10px); } }
@media (max-width: 991.98px) {
  .plugin-lab .pl-selo--a { right: 10px; }
  .plugin-lab .pl-selo--b { left: 10px; }
}

/*============================================================== Sugestao de outro modulo: 3 desenhos em avaliacao (&cs=a|b|c) */
.plugin-lab .service-cta.pl-sug { --c: var(--hv-violet); text-align: left; }
.plugin-lab .service-cta.pl-sug::before { display: none; }
.plugin-lab .pl-sug__rot { display: block; margin-bottom: 6px; font: 700 12px/1.2 var(--heading-font); letter-spacing: .07em; text-transform: uppercase; }
.plugin-lab .pl-sug__ic { flex: 0 0 auto; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; font-size: 26px; color: #fff; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c), #0c1730 38%)); box-shadow: 0 12px 26px color-mix(in srgb, var(--c), transparent 60%); transition: transform .4s var(--hv-ease); }
.plugin-lab .pl-sug__link { display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1.2 var(--heading-font); text-decoration: none; white-space: nowrap; transition: transform .25s var(--hv-ease), background-color .2s ease, color .2s ease, border-color .2s ease; }
.plugin-lab .pl-sug__link i { transition: transform .25s var(--hv-ease); }
.plugin-lab .pl-sug__link:hover i { transform: translateX(5px); }

/* a) card claro "Combina com": complemento, nao segunda chamada */
.plugin-lab main.main > section.pl-sug-sec { padding: 28px 0 64px; }
.plugin-lab .service-cta.pl-sug--a { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; max-width: 1040px; margin: 0 auto; padding: 22px 28px; overflow: hidden; border-radius: 18px; background: var(--surface-color); border: 1px solid var(--hv-line); box-shadow: 0 10px 30px rgba(12, 23, 48, .06); transition: transform .35s var(--hv-ease), box-shadow .35s ease, border-color .35s ease; }
.plugin-lab .service-cta.pl-sug--a::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--hv-cyan), var(--c)); }
.plugin-lab .service-cta.pl-sug--a::before { display: block; content: ""; position: absolute; inset: 0; opacity: 0; mask-image: none; -webkit-mask-image: none; transition: opacity .35s ease; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c), transparent 82%), transparent 62%); }
.plugin-lab .service-cta.pl-sug--a:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c), transparent 50%); box-shadow: 0 24px 52px color-mix(in srgb, var(--c), transparent 82%); }
.plugin-lab .service-cta.pl-sug--a:hover::before { opacity: 1; }
.plugin-lab .service-cta.pl-sug--a:hover .pl-sug__ic { transform: rotate(-8deg) scale(1.08); }
.plugin-lab .service-cta.pl-sug--a .pl-sug__rot { color: color-mix(in srgb, var(--c), #0c1730 25%); }
[data-theme="dark"] .plugin-lab .service-cta.pl-sug--a .pl-sug__rot { color: var(--c); }
.plugin-lab .service-cta.pl-sug--a h2 { margin: 0 0 4px; font: 700 20px/1.3 var(--heading-font); color: var(--heading-color); }
.plugin-lab .service-cta.pl-sug--a p { max-width: none; margin: 0; font-size: 15px; line-height: 1.55; color: color-mix(in srgb, var(--default-color), transparent 10%); }
.plugin-lab .service-cta.pl-sug--a .pl-sug__link { min-height: 44px; padding: 10px 18px; border-radius: 12px; color: var(--heading-color); border: 1px solid color-mix(in srgb, var(--heading-color), transparent 70%); }
.plugin-lab .service-cta.pl-sug--a .pl-sug__link:hover { color: #fff; background: var(--hv-2); border-color: var(--hv-2); }

/* b) dentro da faixa final: chamada a esquerda, sugestao em cartao de vidro a direita */
.plugin-lab .pl-fim2 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; }
.plugin-lab .pl-fim2 > .service-cta:not(.pl-sug) { text-align: left; }
.plugin-lab .pl-fim2 > .service-cta:not(.pl-sug) p { margin-left: 0; }
.plugin-lab .pl-fim2 > .service-cta:not(.pl-sug) > div { justify-content: flex-start !important; }
.plugin-lab main.main > section:is(.pl-fim, :last-of-type:has(.service-cta):not(.pl-sug-sec)) .service-cta.pl-sug--b { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; padding: 24px; overflow: hidden; border-radius: 20px; background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(12px); }
.plugin-lab main.main > section:is(.pl-fim, :last-of-type:has(.service-cta):not(.pl-sug-sec)) .service-cta.pl-sug--b .pl-sug__rot { color: var(--hv-sky); }
.plugin-lab main.main > section:is(.pl-fim, :last-of-type:has(.service-cta):not(.pl-sug-sec)) .service-cta.pl-sug--b h2 { margin: 0 0 6px; font: 700 20px/1.3 var(--heading-font); color: #fff; }
.plugin-lab main.main > section:is(.pl-fim, :last-of-type:has(.service-cta):not(.pl-sug-sec)) .service-cta.pl-sug--b p { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: #b9c6dc; }
.plugin-lab .pl-sug--b .pl-sug__link { color: var(--hv-sky); }
.plugin-lab .pl-sug--b .pl-sug__link:hover { color: #fff; }

/* c) faixa nas cores da marca, com print do modulo sugerido */
.plugin-lab .service-cta.pl-sug--c { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; padding: 36px 40px; overflow: hidden; border-radius: 24px; background: linear-gradient(120deg, #0c1730 0%, #1b2466 55%, #4a3bb8 100%); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 70px rgba(12, 23, 48, .28); }
.plugin-lab .service-cta.pl-sug--c.pl-sug--com-print { grid-template-columns: auto minmax(0, 1fr) minmax(0, .8fr); }
.plugin-lab .service-cta.pl-sug--c .pl-sug__ic { align-self: start; }
.plugin-lab .service-cta.pl-sug--c .pl-sug__rot { color: var(--hv-sky); }
.plugin-lab .service-cta.pl-sug--c h2 { margin: 0 0 8px; font: 800 clamp(22px, 2.3vw, 30px)/1.2 var(--heading-font); color: #fff; }
.plugin-lab .service-cta.pl-sug--c p { max-width: none; margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: #dbe6f7; }
.plugin-lab .service-cta.pl-sug--c .pl-sug__link { min-height: 46px; padding: 10px 20px; border-radius: 12px; color: #fff; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06); }
.plugin-lab .service-cta.pl-sug--c .pl-sug__link:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .6); }
.plugin-lab .pl-sug__print { display: none; }
.plugin-lab .pl-sug--com-print .pl-sug__print { display: block; margin: -6px -70px -70px 0; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 30px 60px rgba(2, 6, 18, .55); transform: rotate(-3deg); }
.plugin-lab .pl-sug__print img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: left top; }

@media (max-width: 991.98px) {
  .plugin-lab .pl-fim2 { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .plugin-lab .service-cta.pl-sug--c.pl-sug--com-print { grid-template-columns: auto minmax(0, 1fr); }
  .plugin-lab .pl-sug--com-print .pl-sug__print { grid-column: 1 / -1; margin: 6px 0 -60px; }
}
@media (max-width: 767.98px) {
  .plugin-lab .service-cta.pl-sug--a { grid-template-columns: auto minmax(0, 1fr); padding: 20px; }
  .plugin-lab .service-cta.pl-sug--a .pl-sug__link { grid-column: 1 / -1; justify-content: center; }
  .plugin-lab .service-cta.pl-sug--c { padding: 26px 22px; }
  .plugin-lab .pl-sug__ic { width: 48px; height: 48px; font-size: 22px; border-radius: 14px; }
}

/* e) sugestao numa secao branca depois do "Comece a usar", antes do rodape (usa o card claro da opcao a) */
.plugin-lab main.main > section.pl-sug-sec--depois { padding: 44px 0 52px; background: var(--background-color); }

/* f) card pequeno abaixo dos botoes da chamada final: uma linha, vidro discreto */
.plugin-lab main.main > section:is(.pl-fim, :last-of-type:has(.service-cta):not(.pl-sug-sec)) .service-cta .pl-mini { --c: var(--hv-violet); display: inline-grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; max-width: 100%; margin-top: 30px; padding: 10px 14px 10px 10px; text-align: left; border-radius: 16px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(10px); transition: border-color .3s ease, background-color .3s ease; }
.plugin-lab main.main > section:is(.pl-fim, :last-of-type:has(.service-cta):not(.pl-sug-sec)) .service-cta .pl-mini:hover { background: rgba(255, 255, 255, .08); border-color: rgba(127, 212, 255, .4); }
.plugin-lab main.main > section:is(.pl-fim, :last-of-type:has(.service-cta):not(.pl-sug-sec)) .service-cta .pl-mini .pl-sug__ic { width: 40px; height: 40px; border-radius: 12px; font-size: 18px; box-shadow: none; }
.plugin-lab main.main > section:is(.pl-fim, :last-of-type:has(.service-cta):not(.pl-sug-sec)) .service-cta .pl-mini .pl-sug__rot { margin: 0 0 2px; font-size: 10.5px; color: #9fb0cc; }
.plugin-lab main.main > section:is(.pl-fim, :last-of-type:has(.service-cta):not(.pl-sug-sec)) .service-cta .pl-mini h2 { margin: 0; font: 600 15px/1.3 var(--default-font); color: #e6ecf7; }
.plugin-lab main.main > section:is(.pl-fim, :last-of-type:has(.service-cta):not(.pl-sug-sec)) .service-cta .pl-mini p { display: none; }
.plugin-lab main.main > section:is(.pl-fim, :last-of-type:has(.service-cta):not(.pl-sug-sec)) .service-cta .pl-mini .pl-sug__link { padding: 8px 12px; border-radius: 10px; font-size: 14px; color: var(--hv-sky); }
.plugin-lab main.main > section:is(.pl-fim, :last-of-type:has(.service-cta):not(.pl-sug-sec)) .service-cta .pl-mini .pl-sug__link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
@media (max-width: 575.98px) {
  .plugin-lab main.main > section:is(.pl-fim, :last-of-type:has(.service-cta):not(.pl-sug-sec)) .service-cta .pl-mini { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .plugin-lab main.main > section:is(.pl-fim, :last-of-type:has(.service-cta):not(.pl-sug-sec)) .service-cta .pl-mini .pl-sug__link { grid-column: 1 / -1; justify-content: center; white-space: normal; text-align: center; border: 1px solid rgba(255, 255, 255, .16); }
}

/*============================================================== Funcionalidades: fluxo desenhado + cartoes enxutos */
/* cartoes enxutos: icone + titulo curto; o texto completo abre no "+" (ou clicando no cartao) */
.plugin-lab main.main > section:has(.module-card-c) .row:has(.pl-fc) { align-items: flex-start; }
.plugin-lab .module-card-c.pl-fc { display: block; height: auto; padding: 14px 14px 14px 16px; cursor: pointer; }
.plugin-lab .module-card-c.pl-fc:not(:has(.pl-fc__abre)) { cursor: default; }
.plugin-lab .module-card-c.pl-fc .mc-top { gap: 12px; }
.plugin-lab .module-card-c.pl-fc .mc-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 18px; }
.plugin-lab .module-card-c.pl-fc h3 { font: 600 15px/1.35 var(--default-font) !important; }
.plugin-lab .pl-fc__abre { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; font-size: 13px; cursor: pointer; color: color-mix(in srgb, var(--c), #0c1730 25%); background: color-mix(in srgb, var(--c), transparent 88%); border: 1px solid color-mix(in srgb, var(--c), transparent 70%); transition: transform .35s var(--hv-ease), background-color .25s ease, color .25s ease; }
[data-theme="dark"] .plugin-lab .pl-fc__abre { color: var(--c); }
.plugin-lab .module-card-c.pl-fc:hover .pl-fc__abre { color: #fff; background: var(--c); }
.plugin-lab .module-card-c.pl-fc.is-aberto .pl-fc__abre { transform: rotate(45deg); color: #fff; background: var(--c); }
.plugin-lab .pl-fc__txt { display: grid; grid-template-rows: 0fr; margin: 0; overflow: hidden; max-height: 0; opacity: 0; font-size: 14.5px; line-height: 1.6; color: color-mix(in srgb, var(--default-color), transparent 8%); transition: max-height .4s var(--hv-ease), opacity .3s ease, margin-top .4s var(--hv-ease); }
.plugin-lab .module-card-c.pl-fc.is-aberto .pl-fc__txt { max-height: 240px; opacity: 1; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hv-line); }
.plugin-lab .module-card-c.pl-fc.is-aberto { border-color: color-mix(in srgb, var(--c), transparent 50%); box-shadow: 0 18px 40px color-mix(in srgb, var(--c), transparent 84%); }
.plugin-lab .module-card-c.pl-fc.is-aberto::after { transform: scaleX(1); }

@media (max-width: 767.98px) {

}

/* texto corrido do modulo dentro do card do fluxo: so o botao aparece; o texto abre por inteiro */
.plugin-lab .pl-fluxo .plugin-overview.pl-texto--fluxo { max-width: 1020px; margin: 14px auto 0; padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
.plugin-lab .pl-fluxo .plugin-overview.pl-texto--fluxo::before { display: none; }
.plugin-lab .pl-fluxo .pl-texto--fluxo h3 { display: none; }
.plugin-lab .pl-fluxo .pl-texto--fluxo .pl-texto__corpo { max-height: 0; }
.plugin-lab .pl-fluxo .pl-texto--fluxo .pl-texto__corpo::after { display: none; }
.plugin-lab .pl-fluxo .pl-texto--fluxo.is-aberto .pl-texto__corpo { max-height: 2400px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hv-line); }
.plugin-lab .pl-fluxo .pl-texto--fluxo .pl-mais { display: flex; justify-content: center; margin-top: 0; }
.plugin-lab .pl-fluxo .pl-texto--fluxo.is-aberto .pl-mais { margin-top: 10px; }
.plugin-lab .pl-fluxo .pl-texto--fluxo { display: flex; flex-direction: column; }
.plugin-lab .pl-fluxo .pl-texto--fluxo:not(.is-aberto) .pl-mais { order: -1; }

/* fluxo em etapas: conta da empresa -> (dentro do GLPI) tela de login -> modulo -> usuario -> regras -> resultado */
.plugin-lab .pl-fluxo { margin: 0 0 44px; padding: 30px 28px 24px; border-radius: 22px; background: var(--surface-color); border: 1px solid var(--hv-line); box-shadow: 0 16px 44px rgba(12, 23, 48, .06); }
.plugin-lab .pl-fluxo__palco { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(26px, 3.4vw, 52px); }
.plugin-lab .pl-fluxo__fios { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.plugin-lab .pl-fio { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 7; opacity: .7; animation: pl-fio 1.1s linear infinite; }
@keyframes pl-fio { to { stroke-dashoffset: -24; } }
.plugin-lab .pl-fio__pt { filter: drop-shadow(0 0 5px currentColor); }
/* trecho que acontece dentro do GLPI: moldura tracejada com rotulo */
.plugin-lab .pl-fluxo__zona { position: relative; display: flex; align-items: center; gap: clamp(26px, 3.4vw, 52px); padding: 34px 24px 22px; border-radius: 20px; border: 1.5px dashed color-mix(in srgb, var(--hv-violet), transparent 55%); background: color-mix(in srgb, var(--hv-violet), transparent 95%); }
.plugin-lab .pl-fluxo__zona-rot { position: absolute; left: 20px; top: -11px; padding: 3px 12px; border-radius: 999px; font: 700 11.5px/1.3 var(--heading-font); letter-spacing: .07em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--hv-cyan), var(--hv-violet)); }
.plugin-lab .pl-etapa { position: relative; z-index: 2; display: grid; justify-items: center; gap: 3px; text-align: center; }
.plugin-lab .pl-etapa--grupo { justify-items: stretch; gap: 10px; }
.plugin-lab .pl-etapa--passo, .plugin-lab .pl-etapa--nucleo { width: 118px; }
.plugin-lab .pl-etapa__ic { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 8px; border-radius: 16px; font-size: 23px; color: var(--hv-ink); background: var(--surface-color); border: 1px solid color-mix(in srgb, var(--hv-cyan), transparent 55%); box-shadow: 0 8px 20px rgba(12, 23, 48, .08); transition: transform .3s var(--hv-ease); }
.plugin-lab .pl-etapa:hover .pl-etapa__ic { transform: translateY(-3px) scale(1.05); }
.plugin-lab .pl-etapa--nucleo .pl-etapa__ic { position: relative; width: 78px; height: 78px; border: 0; border-radius: 22px; font-size: 33px; color: #fff; background: linear-gradient(135deg, var(--hv-cyan), var(--hv-violet)); box-shadow: 0 18px 40px rgba(71, 178, 228, .4); }
.plugin-lab .pl-etapa--nucleo .pl-etapa__ic::before { content: ""; position: absolute; inset: -8px; border-radius: 28px; border: 2px solid color-mix(in srgb, var(--hv-cyan), transparent 55%); animation: pl-pulso 2.4s ease-out infinite; }
@keyframes pl-pulso { 0% { transform: scale(.92); opacity: .9; } 100% { transform: scale(1.18); opacity: 0; } }
.plugin-lab .pl-etapa strong { font: 700 15px/1.25 var(--heading-font); color: var(--heading-color); }
.plugin-lab .pl-etapa--nucleo strong { font-size: 16.5px; }
.plugin-lab .pl-etapa small { font-size: 12px; line-height: 1.35; color: color-mix(in srgb, var(--default-color), transparent 28%); }
.plugin-lab .pl-no { --c: var(--hv-cyan); position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 13px 6px 6px; border-radius: 13px; text-align: left; background: var(--surface-color); border: 1px solid var(--hv-line); box-shadow: 0 6px 18px rgba(12, 23, 48, .06); transition: transform .3s var(--hv-ease), border-color .3s ease, box-shadow .3s ease; }
.plugin-lab .pl-no:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c), transparent 45%); box-shadow: 0 14px 30px color-mix(in srgb, var(--c), transparent 78%); }
.plugin-lab .pl-fluxo__zona .pl-no { --c: var(--hv-violet); }
.plugin-lab .pl-no__ic { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 15px; color: #fff; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c), #0c1730 38%)); }
.plugin-lab .pl-no__rot { font: 600 14px/1.3 var(--default-font); color: var(--heading-color); white-space: nowrap; }
.plugin-lab .pl-fluxo__cap { margin-top: 2px; font: 700 11px/1.2 var(--heading-font); letter-spacing: .07em; text-transform: uppercase; text-align: center; color: color-mix(in srgb, var(--default-color), transparent 35%); }

/* texto completo: corrido, em uma coluna; cada paragrafo abre com o rotulo da estrutura padrao */
.plugin-lab .pl-texto__corpo.pl-fmt { max-width: 860px; margin-left: auto; margin-right: auto; text-align: left; }
.plugin-lab .pl-texto__corpo.pl-fmt p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.75; }
.plugin-lab .pl-texto__corpo.pl-fmt p:last-child { margin-bottom: 0; }
/* secoes fixas da descricao: titulo com icone na cor da secao e um fio ate a margem; o texto continua corrido */
.plugin-lab .pl-texto__corpo .pl-fmt__sec { --c: var(--hv-cyan); margin: 0 0 24px; padding: 0; background: none; overflow: visible; scroll-margin-top: 0; }
.plugin-lab .pl-texto__corpo .pl-fmt__sec:last-child { margin-bottom: 0; }
.plugin-lab .pl-texto__corpo .pl-fmt__sec--problema { --c: #e11d48; }
.plugin-lab .pl-texto__corpo .pl-fmt__sec--controle { --c: var(--hv-violet); }
.plugin-lab .pl-texto__corpo .pl-fmt__sec--resultado { --c: #10b981; }
.plugin-lab .pl-fmt__sec h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 700 14px/1.3 var(--heading-font); letter-spacing: .08em; text-transform: uppercase; color: var(--heading-color); }
.plugin-lab .pl-fmt__sec h4::after { content: ""; flex: 1 1 auto; height: 1px; margin-left: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--c), transparent 55%), transparent); }
.plugin-lab .pl-fmt__ic { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-size: 14px; color: var(--c); background: color-mix(in srgb, var(--c), transparent 88%); border: 1px solid color-mix(in srgb, var(--c), transparent 70%); }
.plugin-lab .pl-texto__corpo.pl-fmt .pl-fmt__sec p { margin: 0 0 10px; }
.plugin-lab .pl-texto__corpo.pl-fmt .pl-fmt__sec p:last-child { margin-bottom: 0; }
.plugin-lab .pl-texto__corpo.pl-fmt strong { font-weight: 700; color: var(--heading-color); }

/* tablet e celular: o fluxo desce na vertical */
@media (max-width: 1199.98px) {
  .plugin-lab .pl-fluxo { padding: 24px 16px 20px; margin-bottom: 32px; }
  .plugin-lab .pl-fluxo__palco, .plugin-lab .pl-fluxo__zona { flex-direction: column; gap: 34px; }
  .plugin-lab .pl-fluxo__zona { width: 100%; max-width: 420px; padding: 36px 16px 22px; }
  .plugin-lab .pl-fluxo__zona-rot { left: 50%; transform: translateX(-50%); white-space: nowrap; }
  .plugin-lab .pl-etapa--grupo { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .plugin-lab .pl-etapa--grupo .pl-fluxo__cap { flex: 0 0 100%; }
  .plugin-lab .pl-etapa--passo, .plugin-lab .pl-etapa--nucleo { width: auto; }
}

/*============================================================== Encadeamento: "Como funciona" e "Funcionalidades" em duas secoes; video + galeria juntos */
.plugin-lab main.main > section.pl-como-sec { padding: 76px 0; background: radial-gradient(680px 380px at 94% 4%, color-mix(in srgb, var(--hv-violet), transparent 90%), transparent 70%), radial-gradient(620px 360px at 4% 96%, color-mix(in srgb, var(--hv-cyan), transparent 88%), transparent 70%), var(--background-color); }
.plugin-lab main.main > section.pl-como-sec .pl-fluxo { margin-bottom: 0; }
.plugin-lab main.main > section.pl-func-sec { padding: 76px 0; background: var(--background-color); }
.plugin-lab .pl-gal-junto { margin-top: 34px; }
/* so no celular: 6 funcionalidades abertas e o botao "ver todas" */
.plugin-lab .pl-mais--cel { display: none; }
@media (max-width: 767.98px) {
  .plugin-lab .pl-feat-extra { display: none; }
  .plugin-lab .pl-feat-aberto .pl-feat-extra { display: block; }
  .plugin-lab .pl-mais--cel { display: flex; margin-top: 26px; }
}
@media (max-width: 991.98px) {
  .plugin-lab main.main > section.pl-como-sec, .plugin-lab main.main > section.pl-func-sec { padding: 56px 0; }
}

/*============================================================== Fundos por secao (revisao de 11/11) */
/* Todas as secoes claras usam a mesma receita: a cor de base da secao (branco ou cinza claro, alternados) com duas
   manchas de cor muito leves nos cantos. As manchas trocam de canto a cada secao, entao a de baixo de uma "continua"
   na de cima da seguinte e a passagem nao fica chapada. A rede de pontos (canvas .pl-pts, posta pelo JS) passa por tras. */
.plugin-lab main.main > section.section:not(:has(.service-hero)):not(.pl-fim):not(.nx-deps) { overflow: clip; background:
  radial-gradient(640px 360px at 96% 0%, color-mix(in srgb, var(--hv-violet), transparent 91%), transparent 70%),
  radial-gradient(620px 360px at 3% 100%, color-mix(in srgb, var(--hv-cyan), transparent 89%), transparent 70%),
  var(--background-color); }
.plugin-lab main.main > section.section:not(:has(.service-hero)):not(.pl-fim):not(.nx-deps).light-background { background:
  radial-gradient(640px 360px at 4% 0%, color-mix(in srgb, var(--hv-cyan), transparent 89%), transparent 70%),
  radial-gradient(620px 360px at 97% 100%, color-mix(in srgb, var(--hv-violet), transparent 91%), transparent 70%),
  var(--background-color); }

/*============================================================== Espacamento padrao (11/11) */
/* Uma regua so para a pagina inteira: --pl-sec e o respiro acima e abaixo de TODA secao (claras, escuras e a chamada
   final); --pl-tit e a distancia entre o bloco do titulo e o conteudo. Antes cada secao tinha o seu numero. */
.plugin-lab { --pl-sec: 56px; --pl-tit: 26px; }
.plugin-lab main.main.main--service > section.section:not(:has(.service-hero)),
.plugin-lab main.main.main--service > section.nx-deps,
.plugin-lab main.main.main--service > section:is(.pl-fim, :last-of-type:has(.service-cta):not(.pl-sug-sec)) { padding-top: var(--pl-sec) !important; padding-bottom: var(--pl-sec) !important; }
.plugin-lab main.main.main--service > section.section:first-child:has(.service-hero) { padding-bottom: var(--pl-sec); }
.plugin-lab main.main > section .section-title { padding-bottom: var(--pl-tit); margin-bottom: 0; }
.plugin-lab main.main > section .section-title > :last-child { margin-bottom: 0; }
.plugin-lab .pl-gal-junto { margin-top: var(--pl-tit); }
.plugin-lab main.main > section:is(.pl-fim, :last-of-type:has(.service-cta):not(.pl-sug-sec)) .service-cta > :last-child { margin-bottom: 0; }
.plugin-lab main.main > section .container > :last-child { margin-bottom: 0; }
@media (max-width: 991.98px) {
  .plugin-lab { --pl-sec: 44px; --pl-tit: 22px; }
}

/*============================================================== Passos dentro da descricao ("Como colocar para funcionar") */
.plugin-lab .pl-fmt__passos { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: pl-passo; }
.plugin-lab .pl-fmt__passos li { position: relative; padding-left: 42px; font-size: 15.5px; line-height: 1.65; counter-increment: pl-passo; }
.plugin-lab .pl-fmt__passos li::before { content: counter(pl-passo); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; font: 800 13px/1 var(--heading-font); color: var(--hv-ink); background: color-mix(in srgb, var(--hv-cyan), transparent 86%); border: 1px solid color-mix(in srgb, var(--hv-cyan), transparent 65%); }
.plugin-lab .pl-fmt__passos li > strong { display: block; }
.plugin-lab .pl-texto__corpo.pl-fmt .pl-fmt__artigo { margin: 14px 0 0; }
.plugin-lab .pl-fmt__artigo a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--hv-ink); text-decoration: none; }
.plugin-lab .pl-fmt__artigo a:hover { text-decoration: underline; text-underline-offset: 4px; }

/*============================================================== Depoimentos: o mesmo card da home (11/11) */
/* Copiado de home-lab.css (.home-lab .nx-deps ...), com o escopo da pagina de modulo. Mudou la, mude aqui. */
.plugin-lab .nx-deps { --default-color: #c3cfe2; --heading-color: #fff; --background-color: #0c1730; --surface-color: rgba(255, 255, 255, .06); --accent-color: #7fd4ff; }
.plugin-lab .nx-deps .nx-dep2 { position: relative; border: 1px solid rgba(255, 255, 255, .12); border-top: 1px solid rgba(255, 255, 255, .12); border-radius: 18px; box-shadow: none; backdrop-filter: blur(10px); overflow: hidden; transition: transform .35s var(--hv-ease), border-color .35s ease, background-color .35s ease; }
.plugin-lab .nx-deps .nx-dep2::before { content: "\201C"; position: absolute; right: 16px; bottom: -52px; font: 800 120px/1 Georgia, serif; color: var(--accent-color); opacity: .14; pointer-events: none; }
.plugin-lab .nx-deps .nx-dep2::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--hv-sky), var(--hv-violet)); }
.plugin-lab .nx-deps .nx-dep2:hover { transform: translateY(-6px); border-color: rgba(127, 212, 255, .5); background-color: rgba(255, 255, 255, .09); }
.plugin-lab .nx-deps .nx-dep2 { --c: var(--hv-sky); }
.plugin-lab .nx-deps .nx-dep2:nth-child(4n+2) { --c: #b9a4ff; } .plugin-lab .nx-deps .nx-dep2:nth-child(4n+3) { --c: var(--hv-mint); } .plugin-lab .nx-deps .nx-dep2:nth-child(4n) { --c: var(--hv-amber); }
.plugin-lab .nx-deps .nx-dep2::after { background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c), #fff 40%)); }
.plugin-lab .nx-deps .nx-dep2:hover { border-color: color-mix(in srgb, var(--c), transparent 45%); box-shadow: 0 26px 60px color-mix(in srgb, var(--c), transparent 82%);
  background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c), transparent 84%), transparent 62%); }
.plugin-lab .nx-deps .nx-dep2 > * { position: relative; }
.plugin-lab .nx-deps .nx-dep2 > .nx-dep__bg { position: absolute; right: -12px; bottom: -24px; font-size: 128px; line-height: 1; color: var(--c); opacity: .08; transform: rotate(-12deg); transition: transform .6s var(--hv-ease), opacity .4s ease; pointer-events: none; }
.plugin-lab .nx-deps .nx-dep2:hover > .nx-dep__bg { transform: rotate(-4deg) scale(1.08); opacity: .16; }
.plugin-lab .nx-deps .nx-dep2::before { display: none; }
.plugin-lab .nx-deps .nx-dep2__selo { font-size: 0; gap: 0; cursor: help; }
.plugin-lab .nx-deps .nx-dep2__selo i { font-size: 15px; }
.plugin-lab .nx-deps .nx-dep2__id a { display: inline-flex; align-items: center; gap: 4px; transition: color .2s ease; }
.plugin-lab .nx-deps .nx-dep2__id a::after { content: "\f144"; font-family: "bootstrap-icons"; font-size: .72em; font-weight: 400; line-height: 1; opacity: .75; transition: transform .25s var(--hv-ease), opacity .2s ease; }
.plugin-lab .nx-deps .nx-dep2__id a:hover { color: var(--c); text-decoration: none; }
.plugin-lab .nx-deps .nx-dep2__id a:hover::after { transform: translate(2px, -2px); opacity: 1; }
.plugin-lab .nx-dep__avw { position: relative; flex: 0 0 auto; display: inline-flex; }
.plugin-lab .nx-dep__flag { position: absolute; right: -5px; bottom: -4px; width: 19px; height: 19px; border-radius: 50%; object-fit: cover; border: 2px solid #131d36; box-shadow: 0 2px 6px rgba(2, 6, 18, .5); cursor: help; }
.plugin-lab .nx-deps .nx-dep2 blockquote { color: #e6ecf7; display: flex; align-items: center; }
.plugin-lab .nx-deps .nx-dep2 figcaption { border-color: rgba(255, 255, 255, .12); }
.plugin-lab .nx-deps .nx-dep__av { background: linear-gradient(135deg, var(--hv-cyan), var(--hv-violet)); color: #fff; }
.plugin-lab .nx-deps .nx-dep2__meta, .plugin-lab .nx-deps .nx-dep2__data { color: #9fb0cc; opacity: 1; }
.plugin-lab .nx-deps .nx-dep__ctx--servico { background: rgba(255, 255, 255, .1); color: #e6ecf7; }
.plugin-lab .nx-deps .nx-dep2 { background-color: rgba(255, 255, 255, .055); }

/* rótulo "Combina com" do card de sugestão: 10,5 px era pequeno demais para ler no celular (bateria de 11/11) */
.plugin-lab main.main > section:is(.pl-fim, :last-of-type:has(.service-cta):not(.pl-sug-sec)) .service-cta .pl-mini .pl-sug__rot { font-size: 11.5px; }

/* links dentro dos depoimentos (autor, empresa, "Deixe seu depoimento"): a área de toque passa de 17-20 px para 26 px
   de altura sem mudar o desenho (bateria de responsividade de 11/11) */
.plugin-lab .nx-deps .nx-dep2__id a, .plugin-lab .nx-deps .nx-dep2__meta a, .plugin-lab .nx-deps .nx-deps2__sub a { display: inline-flex; align-items: center; min-height: 26px; }