.card{position:relative;display:block;overflow:hidden;container-type:inline-size;text-decoration:none;color:#fff;background:var(--superficie)}
.card .img{display:block;aspect-ratio:var(--ratio)}
.card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:focus-visible{outline-offset:2px}

.ov{position:absolute;inset:0;pointer-events:none}
.sombra{position:absolute;left:0;right:0;bottom:0;height:60%;opacity:0;transition:opacity .2s var(--ease);
  background:linear-gradient(to top,rgb(0 0 0/var(--sombra)) 0%,rgb(0 0 0/calc(var(--sombra)*.8)) 20%,rgb(0 0 0/calc(var(--sombra)*.52)) 40%,rgb(0 0 0/calc(var(--sombra)*.24)) 62%,rgb(0 0 0/calc(var(--sombra)*.07)) 82%,rgb(0 0 0/0) 100%)}
.logo{position:absolute;top:6cqw;right:6cqw;width:max(26cqw,4.5rem);height:auto;fill:var(--ciano);clip-path:inset(0 100% 0 0);transition:clip-path .2s var(--ease)}
[data-logo="esquerda"] .logo{right:auto;left:6cqw}
.texto{position:absolute;left:6cqw;right:6cqw;bottom:calc(max(4.2cqw,.75rem) + 9cqw)}
.texto .t{display:block;font:500 max(8.4cqw,1.05rem)/1 var(--f-texto);letter-spacing:-.03em}
.texto .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.texto .w>span{display:inline-block;transform:translateY(110%);transition:transform .18s var(--ease)}
.texto .s{display:block;margin-top:max(1.6cqw,.3rem);font:400 max(4cqw,.75rem)/1.2 var(--f-texto);letter-spacing:-.01em;opacity:0;transform:translateY(.5em);transition:opacity .15s,transform .2s var(--ease)}
.tag{position:absolute;right:0;bottom:0;padding:max(2.1cqw,.4rem) max(3.8cqw,.65rem) max(2.3cqw,.45rem);background:var(--vivo);color:var(--tinta);font:500 max(4cqw,.75rem)/1 var(--f-texto);border-top-left-radius:max(2.2cqw,.4rem);transform:translateX(101%);transition:transform .2s var(--ease)}

.moldura,.tri{display:none}
[data-versao="referencia"] .moldura{display:block;position:absolute;top:2cqw;left:2.6cqw;right:2.8cqw;bottom:1.6cqw;border:1.5px solid rgb(0 255 255/.75);border-radius:2.2cqw;opacity:0;transform:scale(1.025);transition:opacity .2s var(--ease),transform .2s var(--ease)}
[data-versao="referencia"] .logo{left:12.7cqw;right:auto;top:6.3cqw;width:19.5cqw}
[data-versao="referencia"] .texto{left:12.7cqw;right:12cqw;bottom:13.8cqw}
[data-versao="referencia"] .texto .t{font:400 max(8.3cqw,1.05rem)/.98 var(--f-texto);letter-spacing:-.025em}
[data-versao="referencia"] .texto .s{margin-top:max(1.4cqw,.25rem);font:500 max(3.1cqw,.7rem)/1.15 var(--f-micro);letter-spacing:-.02em}
[data-versao="referencia"] .tri{display:block;position:absolute;left:12.7cqw;bottom:6.6cqw;width:3.7cqw;aspect-ratio:1;background:var(--ciano);clip-path:polygon(0 100%,0 100%,0 100%);transition:clip-path .2s var(--ease)}
[data-versao="referencia"] .tag{right:2.8cqw;bottom:1.6cqw;display:flex;align-items:center;height:max(7.3cqw,1.5rem);padding:0 max(3.2cqw,.55rem);font:400 max(3.1cqw,.7rem)/1 var(--f-texto);border-radius:1.4cqw 0 2.1cqw 0;background:var(--ciano);transform:none;clip-path:inset(0 0 0 100%);transition:clip-path .2s var(--ease)}
[data-versao="referencia"][data-tag="especialidade"] .tag{background:var(--vivo)}
[data-versao="referencia"] .card:is(:hover,:focus-visible,.ativo) .moldura{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .7s var(--ease)}
[data-versao="referencia"] .card:is(:hover,:focus-visible,.ativo) .tag{transform:none;clip-path:inset(0 0 0 0);transition:clip-path .5s var(--ease) .14s}
[data-versao="referencia"] .card:is(:hover,:focus-visible,.ativo) .tri{clip-path:polygon(0 0,0 100%,100% 100%);transition:clip-path .45s var(--ease) .52s}

.card:is(:hover,:focus-visible,.ativo) img{transform:scale(1.03);transition-duration:1.2s}
.card:is(:hover,:focus-visible,.ativo) .sombra{opacity:1;transition-duration:.35s}
.card:is(:hover,:focus-visible,.ativo) .logo{clip-path:inset(0 0 0 0);transition:clip-path .55s var(--ease) .08s}
.card:is(:hover,:focus-visible,.ativo) .tag{transform:none;transition:transform .5s var(--ease) .14s}
.card:is(:hover,:focus-visible,.ativo) .texto .w>span{transform:none;transition:transform .6s var(--ease) calc(.24s + var(--i) * .05s)}
.card:is(:hover,:focus-visible,.ativo) .texto .s{opacity:1;transform:none;transition:opacity .45s var(--ease) .42s,transform .55s var(--ease) .42s}


@media (prefers-reduced-motion:reduce){
.card img,.card .logo,.card .tag,.card .moldura,.texto .w>span,.texto .s{transform:none!important;clip-path:none!important;opacity:1!important}
  .card .tri{clip-path:polygon(0 0,0 100%,100% 100%)!important}
  .card .ov{opacity:0}
  .card:is(:hover,:focus-visible,.ativo) .ov{opacity:1}
}