/* Página Recursos, seções "Tudo no mesmo lugar" e "Integrações" refeitas em 09/10/2026. Só transform e opacity animam. */

/* ---------- carrossel de largura total, ferramenta solta vira recurso ---------- */
.cmp-sec{background:#F3F6F3;padding-block:clamp(72px,9vw,120px);overflow:hidden}
.cmp-sec .caixa{position:relative;z-index:1}
.cmp-pista{position:relative;margin-top:clamp(36px,5vw,64px);overflow:hidden;padding:30px 0 44px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.cmp-trilha{display:flex;gap:22px;width:max-content;padding-left:22px;animation:cmp-corre 70s linear infinite;will-change:transform}
.cmp-pista:hover .cmp-trilha,.cmp-pista:focus-within .cmp-trilha{animation-play-state:paused}
@keyframes cmp-corre{to{transform:translateX(-50%)}}
.cmp-card{position:relative;display:grid;grid-template-rows:auto 54px 1fr;justify-items:center;gap:0;flex:none;width:326px;min-height:282px;padding:22px 22px 24px;border-radius:28px;background:#fff;box-shadow:inset 0 0 0 1px rgba(10,30,14,.08),0 30px 60px -36px rgba(10,50,25,.45);color:var(--tinta);text-decoration:none;transition:transform .55s cubic-bezier(.3,1.25,.4,1),box-shadow .4s ease}
.cmp-card:nth-child(even){transform:translateY(22px)}
.cmp-card:hover{transform:translateY(-8px);box-shadow:inset 0 0 0 1.5px rgba(31,168,85,.55),0 40px 70px -30px rgba(31,168,85,.5)}
.cmp-card:nth-child(even):hover{transform:translateY(14px)}
.cmp-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(70% 60% at 50% 100%,rgba(83,255,93,.16),transparent 70%);opacity:0;transition:opacity .4s ease}
.cmp-card:hover::before{opacity:1}
.cmp-antes{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:10px 16px;border-radius:14px;background:#EEF1EE;box-shadow:inset 0 0 0 1px #DDE3DD;color:#7A837B;font-size:14.5px;font-weight:500;line-height:1.25;text-align:left;animation:cmp-treme 6s ease-in-out infinite;animation-delay:calc(var(--k) * -.9s)}
.cmp-antes svg{flex:none;width:16px;height:16px;transform:rotate(90deg);opacity:.5}
.cmp-antes s{text-decoration-color:#D8453A;text-decoration-thickness:2px}
@keyframes cmp-treme{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
.cmp-fio{position:relative;width:2px;height:100%;margin-block:4px;background:repeating-linear-gradient(180deg,#B8C4BA 0 5px,transparent 5px 10px)}
.cmp-fio i{position:absolute;left:50%;top:0;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#2BE08A;box-shadow:0 0 0 4px rgba(43,224,138,.22),0 0 14px #53FF5D;animation:cmp-desce 2.4s ease-in-out infinite;animation-delay:calc(var(--k) * -.35s)}
@keyframes cmp-desce{0%{transform:translateY(-4px);opacity:0}15%,85%{opacity:1}100%{transform:translateY(40px);opacity:0}}
.cmp-depois{display:grid;justify-items:center;align-content:start;gap:10px;text-align:center}
.cmp-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:17px;background:linear-gradient(160deg,#53FF5D,#1FA855);color:#06240D;box-shadow:0 16px 30px -12px rgba(31,168,85,.7),inset 0 1px 0 rgba(255,255,255,.55);transition:transform .5s cubic-bezier(.3,1.25,.4,1)}
.cmp-ic svg{width:25px;height:25px}
.cmp-card:hover .cmp-ic{transform:scale(1.1) rotate(-6deg)}
.cmp-depois b{font-size:19px;font-weight:700;letter-spacing:-.025em;line-height:1.15;max-width:11em}
.cmp-depois em{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:13.5px;font-weight:600;color:var(--verde-texto)}
.cmp-depois em svg{width:15px;height:15px;transition:transform .4s ease}
.cmp-card:hover .cmp-depois em svg{transform:translateX(5px)}
.cmp-card:focus-visible{outline:2px solid #1FA855;outline-offset:3px}

/* ---------- integrações, fundo branco, três faixas em sentidos opostos ---------- */
.ig-sec{background:#fff;padding-block:clamp(72px,9vw,120px);overflow:hidden}
.ig-faixas{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin-top:clamp(36px,5vw,60px)}
.ig-faixa{position:relative}
.ig-rot{display:block;margin:0 auto 10px;max-width:var(--caixa,1200px);padding-inline:clamp(16px,4vw,40px);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7A837B;text-align:center}
.ig-pista{overflow:hidden;padding:12px 0 16px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ig-trilha{display:flex;gap:16px;width:max-content;padding-left:16px;animation:ig-corre var(--d,70s) linear infinite;will-change:transform}
.ig-faixa.inv .ig-trilha{animation-direction:reverse}
.ig-faixa:hover .ig-trilha{animation-play-state:paused}
@keyframes ig-corre{to{transform:translateX(-50%)}}
.ig-t{display:grid;place-items:center;flex:none;width:190px;height:84px;padding:0 22px;border-radius:22px;background:#fff;box-shadow:inset 0 0 0 1px #E4E9E4,0 18px 34px -24px rgba(10,50,25,.45);font-size:15px;font-weight:600;color:#2A322B;transition:transform .45s cubic-bezier(.3,1.25,.4,1),box-shadow .35s ease}
.ig-t:hover{transform:translateY(-6px) scale(1.04);box-shadow:inset 0 0 0 1.5px rgba(31,168,85,.5),0 30px 44px -22px rgba(31,168,85,.5)}
.ig-t img{display:block;max-width:132px;max-height:30px;width:auto;height:auto;object-fit:contain}
.ig-fim{display:grid;justify-items:center;margin-top:clamp(28px,4vw,44px)}
.ig-btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;background:#0A0B0A;color:#fff;font-size:15.5px;font-weight:600;text-decoration:none;box-shadow:0 18px 40px -18px rgba(0,0,0,.7);transition:transform .4s cubic-bezier(.3,1.25,.4,1),background-color .3s ease}
.ig-btn:hover{transform:translateY(-3px);background:#14301A}
.ig-btn svg{width:18px;height:18px;color:#53FF5D;transition:transform .4s ease}
.ig-btn:hover svg{transform:translateX(5px)}
@media (max-width:700px){
  .cmp-card{width:272px;min-height:262px}
  .cmp-trilha{gap:16px;animation-duration:56s}
  .ig-t{width:156px;height:72px;padding:0 16px}
  .ig-t img{max-width:108px;max-height:26px}
  .ig-trilha{gap:12px}
  /* no celular a máscara das pontas apagava a faixa inteira, os logos ficavam quase invisíveis (14/10/2026) */
  .ig-pista,.cmp-pista{-webkit-mask-image:none;mask-image:none}
}
@media (prefers-reduced-motion:reduce){
  .cmp-trilha,.ig-trilha{animation:none}
  .cmp-pista,.ig-pista{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .cmp-antes,.cmp-fio i{animation:none}
}

/* arrastar com o dedo ou o mouse, e o botão de pausar */
.cmp-pista.js-arrasta .cmp-trilha,.ig-pista.js-arrasta .ig-trilha{animation:none}
.js-arrasta{touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.js-arrasta.arrastando{cursor:grabbing}
.js-arrasta.arrastando a{pointer-events:none}
.js-arrasta img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
.cmp-ctl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:clamp(8px,2vw,20px)}
.cmp-ctl small{font-size:13px;color:#7A837B}
.cmp-pausa{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 20px 0 16px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px rgba(10,30,14,.12),0 14px 28px -18px rgba(10,50,25,.5);font-size:14px;font-weight:600;color:#2A322B;transition:transform .4s cubic-bezier(.3,1.25,.4,1),background-color .3s ease,color .3s ease}
.cmp-pausa svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cmp-pausa .i-pl{display:none;fill:currentColor}
.cmp-pausa.on .i-p{display:none}
.cmp-pausa.on .i-pl{display:block}
.cmp-pausa.on{background:#53FF5D;color:#06240D;box-shadow:0 10px 24px -10px rgba(40,200,60,.8)}
.cmp-pausa:hover{transform:translateY(-2px)}
.cmp-pausa:active{transform:scale(.96)}
.cmp-pausa:focus-visible,.cmp-pista:focus-visible{outline:2px solid #1FA855;outline-offset:3px}
/* sombra dos cartões não pode ser cortada pela faixa */
.cmp-pista{padding:34px 0 96px;margin-bottom:-52px}
.ig-pista{padding:14px 0 44px;margin-bottom:-22px}
.cmp-ctl{position:relative;z-index:3}

/* ClinicWeb vem em PNG com texto branco, sobre branco ele sumia */
img[src*="clinicweb"]{filter:brightness(0) opacity(.85)}