.integration-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.integration-catalog-card{min-height:235px;border:1px solid var(--al);border-radius:12px;background:var(--as);color:var(--at);padding:20px;text-align:left;display:flex;align-items:flex-start;gap:15px;font-family:'DM Sans';transition:.2s}.integration-catalog button.integration-catalog-card{cursor:pointer}.integration-catalog button.integration-catalog-card:hover{transform:translateY(-2px);border-color:var(--ag);box-shadow:0 12px 28px #10211912}.integration-catalog-card>div:last-child{flex:1;min-width:0}.integration-catalog-card .integration-status{float:right}.integration-catalog-card h3{font:700 15px 'Bricolage Grotesque';margin:4px 0 9px}.integration-catalog-card p{color:var(--am);font-size:10px;line-height:1.55;min-height:64px;margin:0}.integration-catalog-card footer{border-top:1px solid var(--al);margin-top:18px;padding-top:13px;display:flex;flex-direction:column;gap:7px}.integration-catalog-card footer span{color:var(--am);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.integration-catalog-card footer b{color:var(--ag);font-size:10px}.integration-catalog-card.disabled{opacity:.66}@media(max-width:1050px){.integration-catalog{grid-template-columns:1fr 1fr}}@media(max-width:680px){.integration-catalog{grid-template-columns:1fr}}

/* ---------- Catálogo de integrações (cartões novos) ---------- */
.integration-summary{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:-8px 0 20px;font-size:12.5px;color:var(--muted)}
.integration-summary-pill{display:inline-flex;align-items:center;gap:8px;font:600 12px var(--font-body);color:var(--green-dark);background:var(--green-soft);border:1px solid rgba(39,112,101,.25);padding:6px 12px;border-radius:999px}
.integration-summary-pill i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(39,112,101,.5);animation:integration-ping 1.8s ease-out infinite}
@keyframes integration-ping{0%{box-shadow:0 0 0 0 rgba(39,112,101,.5)}100%{box-shadow:0 0 0 9px rgba(39,112,101,0)}}
.integration-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.integration-card{--accent:#277065;--accent-soft:#e7f0ec;--accent-ink:#1d564e;position:relative;display:flex;flex-direction:column;gap:10px;text-align:left;padding:22px 22px 20px;border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--white);color:var(--ink);font-family:inherit;cursor:pointer;overflow:hidden;box-shadow:var(--shadow-card);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
.integration-card.purple{--accent:#7c6cf0;--accent-soft:#eeebff;--accent-ink:#5a4bd1}
.integration-card.blue{--accent:#1f8fd6;--accent-soft:#e7f2ff;--accent-ink:#1466b8}
.integration-card::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--accent),transparent 80%);opacity:.9}
.integration-card::after{content:'';position:absolute;width:260px;height:260px;right:-120px;top:-120px;border-radius:50%;background:radial-gradient(circle,var(--accent-soft),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.integration-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 20px 44px rgba(13,31,28,.14),0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent)}
.integration-card:hover::after{opacity:1}
.integration-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.integration-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px}
.integration-logo{width:52px;height:52px;border-radius:16px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;flex:none;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.integration-logo svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.integration-card:hover .integration-logo{transform:scale(1.08) rotate(-6deg);box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 30%,transparent)}
.integration-status{display:inline-flex;align-items:center;gap:6px;font:600 10.5px var(--font-body);letter-spacing:.02em;padding:5px 10px;border-radius:999px;background:var(--line-soft);color:var(--muted);border:1px solid transparent;white-space:nowrap}
.integration-status i{width:6px;height:6px;border-radius:50%;background:currentColor}
.integration-status.on{background:var(--green-soft);color:var(--green-dark);border-color:rgba(39,112,101,.25)}
.integration-status.warn{background:var(--warn-soft);color:var(--warn);border-color:rgba(200,133,15,.25)}
.integration-card h3{font:700 17px var(--font-display);margin:0;letter-spacing:-.01em}
.integration-tagline{margin:-6px 0 0;font:600 11px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)}
.integration-card>p:not(.integration-tagline){margin:0;font-size:12.5px;line-height:1.55;color:var(--muted)}
.integration-features{list-style:none;margin:4px 0 0;padding:12px 0 0;border-top:1px solid var(--line-soft);display:grid;gap:7px;flex:1}
.integration-features li{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink)}
.integration-features svg{width:14px;height:14px;flex:none;stroke:var(--accent);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;background:var(--accent-soft);border-radius:50%;padding:2px}
.integration-card b{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font:700 12.5px var(--font-body);color:var(--accent-ink);transition:gap .2s}
.integration-card b svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.integration-card:hover b{gap:10px}
.integration-card:hover b svg{transform:translateX(2px)}
[data-theme="dark"] .integration-card{--accent-soft:rgba(200,246,83,.14);--accent-ink:#c8f653}
[data-theme="dark"] .integration-card.purple{--accent-soft:rgba(124,108,240,.18);--accent-ink:#b3a8ff}
[data-theme="dark"] .integration-card.blue{--accent-soft:rgba(31,143,214,.18);--accent-ink:#7cc0f5}
[data-theme="dark"] .integration-card:hover{box-shadow:0 20px 44px rgba(0,0,0,.45),0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
[data-theme="dark"] .integration-summary-pill{color:var(--green-bright)}
[data-theme="dark"] .integration-status.on{color:var(--green-bright)}
[data-theme="dark"] .integration-status.warn{color:#ffd27a}
@media(max-width:1100px){.integration-cards{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.integration-cards{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.integration-summary-pill i{animation:none}.integration-card,.integration-logo,.integration-card b,.integration-card b svg{transition:none}}

/* ---------- Efeitos dos cartões ---------- */
.integration-cards{perspective:1400px}
.integration-card{--mx:50%;--my:40%;--rx:0deg;--ry:0deg;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;animation:integration-in .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 110ms);transition:transform .2s ease,box-shadow .25s,border-color .25s}
.integration-card:hover{transform:rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px)}
.integration-card::after{background:radial-gradient(240px circle at var(--mx) var(--my),color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%);inset:0;width:auto;height:auto;right:auto;top:auto;border-radius:0}
.integration-card::before{background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 30%,transparent) 60%,transparent);background-size:200% 100%;transition:background-position .6s ease}
.integration-card:hover::before{background-position:100% 0}
.integration-logo{position:relative}
.integration-logo::after{content:'';position:absolute;inset:-6px;border-radius:20px;border:1.5px solid var(--accent);opacity:0;transform:scale(.8);transition:opacity .3s,transform .3s}
.integration-card:hover .integration-logo::after{opacity:.5;transform:scale(1);animation:integration-ring 1.6s ease-out infinite}
.integration-status.on i{animation:integration-ping 1.8s ease-out infinite}
.integration-features li{animation:integration-item .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 110ms + 260ms)}
.integration-features li:nth-child(2){animation-delay:calc(var(--i,0) * 110ms + 340ms)}
.integration-features li:nth-child(3){animation-delay:calc(var(--i,0) * 110ms + 420ms)}
.integration-features svg{transition:transform .2s,background .2s}
.integration-card:hover .integration-features svg{transform:scale(1.15)}
.integration-card b{position:relative}
.integration-card b::after{content:'';position:absolute;left:0;bottom:-3px;height:2px;width:0;background:var(--accent);border-radius:2px;transition:width .25s ease}
.integration-card:hover b::after{width:100%}
.integration-card:active{transform:rotateX(var(--rx)) rotateY(var(--ry)) translateY(-1px) scale(.99)}
@keyframes integration-in{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
@keyframes integration-item{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes integration-float{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes integration-ring{0%{transform:scale(.9);opacity:.6}100%{transform:scale(1.25);opacity:0}}
@media(prefers-reduced-motion:reduce){.integration-card,.integration-logo,.integration-features li,.integration-status.on i,.integration-card:hover .integration-logo::after{animation:none}.integration-card,.integration-card::before,.integration-card b::after,.integration-features svg{transition:none}}

/* ---------- Logos reais no marketplace de conectores ---------- */
.provider-logo.brand,.channel-logo.brand{background:#fff;border:1px solid var(--line);box-shadow:0 4px 12px rgba(13,31,28,.08);padding:0;overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.provider-logo.brand img,.channel-logo.brand img{width:22px;height:22px;display:block;object-fit:contain}
.provider-grid>button:hover .provider-logo.brand{transform:scale(1.1) rotate(-6deg);box-shadow:0 10px 22px rgba(13,31,28,.16)}
[data-theme="dark"] .provider-logo.brand,[data-theme="dark"] .channel-logo.brand{background:#fff;border-color:rgba(255,255,255,.12)}
.provider-grid>button{position:relative;overflow:hidden}
.provider-grid>button::after{content:'';position:absolute;inset:0;background:radial-gradient(220px circle at var(--mx,50%) var(--my,30%),rgba(200,246,83,.14),transparent 70%);opacity:0;transition:opacity .25s;pointer-events:none}
.provider-grid>button:hover::after{opacity:1}
.provider-grid>button{animation:integration-in .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 70ms)}
@media(prefers-reduced-motion:reduce){.provider-grid>button{animation:none}.provider-logo.brand{transition:none}}

/* logos reais nos cartões de integração */
.integration-card.claude{--accent:#d97757;--accent-soft:#fdeee7;--accent-ink:#b85c3c}
[data-theme="dark"] .integration-card.claude{--accent-soft:rgba(217,119,87,.18);--accent-ink:#f0a284}
.integration-logo.brand{background:#fff;border:1px solid var(--line);box-shadow:0 6px 16px rgba(13,31,28,.10)}
.integration-logo.brand img{width:30px;height:30px;object-fit:contain;display:block}
[data-theme="dark"] .integration-logo.brand{border-color:rgba(255,255,255,.14)}

/* OpenAI: verde-petróleo da marca, no mesmo esquema de tokens dos outros cartões */
.integration-card.openai{--accent:#10a37f;--accent-soft:#f2f7f4;--accent-ink:#1f695e}
[data-theme="dark"] .integration-card.openai{--accent-soft:rgba(16,163,127,.18);--accent-ink:#d6f97f}

/* ---------- faixa do topo do cartão: o logo passa a nascer da cor da marca ---------- */
/* O quadradinho era branco chapado com borda e sombra neutras — ele ignorava o
   --accent do cartão, que já pinta a barra do topo, o título e o CTA. Agora a base
   sai do branco para a cor da integração, e o logo em si continua nas cores originais
   da marca: quem muda é a bandeja, não a marca em cima dela. */
.integration-card-top{align-items:center}.integration-card-top>*{align-self:center}
.integration-logo.brand{background:linear-gradient(160deg,#fff 45%,color-mix(in srgb,var(--accent) 14%,#fff));border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 20%,transparent),inset 0 1px 0 #fff}
.integration-card:hover .integration-logo.brand{box-shadow:0 12px 26px color-mix(in srgb,var(--accent) 34%,transparent),inset 0 1px 0 #fff}
[data-theme="dark"] .integration-logo.brand{background:linear-gradient(160deg,#fff 52%,color-mix(in srgb,var(--accent) 18%,#fff));border-color:color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.14))}

/* DeepSeek e Gemini: mesmas quatro cores por marca que Claude e OpenAI */
.integration-card.deepseek{--accent:#4d6bfe;--accent-soft:#e9edff;--accent-ink:#3550d6}
[data-theme="dark"] .integration-card.deepseek{--accent-soft:rgba(77,107,254,.18);--accent-ink:#93a6ff}
.integration-card.gemini{--accent:#8e75b2;--accent-soft:#f1ecfa;--accent-ink:#6b4fa0}
[data-theme="dark"] .integration-card.gemini{--accent-soft:rgba(142,117,178,.2);--accent-ink:#c3ade0}
.integration-card.elevenlabs{--accent:#1a1a1a;--accent-soft:#f0f0f0;--accent-ink:#000}
[data-theme="dark"] .integration-card.elevenlabs{--accent:#e6e6e6;--accent-soft:rgba(255,255,255,.12);--accent-ink:#fff}