#atendimento{scroll-margin-top:144px;overflow:hidden;padding-top:48px;padding-bottom:76px}
.pf-grade{align-items:start;padding-bottom:0!important}
#atendimento .pf-foto{overflow:hidden}
#atendimento .pf-foto.pf-video-on{background-image:none;background-color:#f5efe6}
#atendimento .pf-video{left:auto;right:0;width:auto;max-width:min(100%,1100px);object-fit:contain;object-position:right center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 20%);mask-image:linear-gradient(90deg,transparent,#000 20%)}
#atendimento .pf-cartao{padding:24px}
#atendimento .pf-cartao h3{font-size:24px;line-height:1.2}
#atendimento .pf-legenda{font-size:28px;line-height:1.15}
#atendimento .pf-grade{margin-top:30px;gap:20px}
#atendimento .pf-info p{font-size:15px;line-height:1.6}
#atendimento .pf-info a{padding:12px 16px;font-size:13px;line-height:1.4}
@media(min-width:1024px){#atendimento{min-height:520px}#atendimento>div.max-w-site{width:100%}}
@media(min-width:640px){#atendimento .pf-grade>.pf-cartao:last-child{grid-column:1/-1;justify-self:center;width:calc((100% - 20px)/2)}}
@media(min-width:1024px){
 #atendimento .pf-grade{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;min-height:var(--pf-reserva,440px)}
 #atendimento .pf-grade>.pf-cartao{min-width:0;min-height:108px;padding:16px;box-sizing:border-box}
 #atendimento .pf-grade>.pf-cartao:last-child{grid-column:auto;justify-self:stretch;width:auto}
 #atendimento .pf-cartao h3{font-size:clamp(21px,1.75vw,28px);line-height:1.15}
 #atendimento .pf-export-route{gap:5px!important}
 #atendimento .pf-export-route svg{width:20px;height:18px}
 #atendimento .pf-cartao .pf-info a{padding:12px 10px}
}
@media(max-width:767px){#atendimento .pf-video{top:auto;bottom:0;width:100%;height:auto;aspect-ratio:16/9;object-position:right bottom;-webkit-mask-image:linear-gradient(180deg,transparent,#000 28%);mask-image:linear-gradient(180deg,transparent,#000 28%)}#atendimento .pf-legenda{font-size:24px}#atendimento .pf-cartao{padding:20px}#atendimento .pf-cartao h3{font-size:22px}}
.pf-cartao{position:relative}
.pf-acionador{display:block;width:100%;border:0;padding:0;background:none;color:inherit;font:inherit;text-align:inherit;cursor:pointer}
.pf-acionador:focus-visible{outline:2px solid #7B2A96;outline-offset:6px;border-radius:3px}
.pf-cartao .pf-info{margin-top:0;max-height:0;overflow:hidden;visibility:hidden;opacity:0;transform:translateY(-8px);transition:max-height .5s ease,margin .5s ease,opacity .4s ease,transform .5s ease,visibility .5s}
.pf-cartao.pf-aberto .pf-info{max-height:700px;margin-top:1.25rem;visibility:visible;opacity:1;transform:none}
@media(hover:hover) and (pointer:fine){
 .pf-cartao.pf-aberto{background:rgba(255,255,255,.95)}
}
@media(prefers-reduced-motion:reduce){.pf-cartao .pf-info{transition:none}}
/* A foto de espera e o poster do proprio <video>, no mesmo enquadramento do video
   (contain, colado a direita). O fundo em cover da .pf-foto mostrava o mesmo quadro
   ampliado ate o video comecar, e a cena "dava um salto" ao trocar. */
#atendimento .pf-foto{background-image:none;background-color:#f5efe6}
#atendimento .pf-video{opacity:1}
/* Enquadramento independente da altura dos painéis. */
@media(min-width:768px){#atendimento .pf-video{top:0;bottom:auto;height:640px}}
@media(max-width:767px){#atendimento .pf-video{top:0;bottom:auto}}
@media(prefers-reduced-motion:reduce){#atendimento .pf-video{display:block}}
