/* ==========================================================================
   services.css · Serviços: protocolos em acordeão e vídeo
   ========================================================================== */
/* protocolos */
.proto{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:48px;align-items:start}
.pl-list{border-top:1px solid var(--line2)}
.pr-i{border-bottom:1px solid var(--line2)}
.pr-i>button{width:100%;display:grid;grid-template-columns:72px minmax(0,1fr) 40px;gap:18px;align-items:center;padding:26px 0;background:none;border:0;cursor:pointer;text-align:left}
.pr-i .c{font:600 12px/1 var(--mono);letter-spacing:.1em;color:var(--brown)}
.pr-i h3{font-size:clamp(24px,2.5vw,34px);letter-spacing:-.04em}
.pr-i .t{display:block;margin-top:8px;font-size:15.5px;line-height:1.45;color:var(--mut);font-family:var(--disp)}
.pr-i .pm{width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;transition:transform .35s,background .3s,color .3s}
.pr-i .pm svg{width:16px;height:16px}
.pr-i.on .pm{transform:rotate(45deg);background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pr-d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.pr-i.on .pr-d{grid-template-rows:1fr}
.pr-d>div{overflow:hidden}
.pr-d .in{padding:0 0 28px 90px;display:grid;gap:18px}
.pr-d ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pr-d li{padding:12px 14px;border-radius:12px;background:var(--paper);border:1px solid var(--line);font-size:14.5px;line-height:1.35}
.pr-d li::before{content:"→ ";font-family:var(--mono);color:var(--brown)}
.pr-d .btn{justify-self:start;min-height:48px}
.reel{position:sticky;top:110px;margin:0;justify-self:center;width:min(100%,360px)}
.reel .fr2{position:relative;border-radius:22px;overflow:hidden;background:var(--ink);aspect-ratio:9/16;box-shadow:0 40px 80px -40px rgba(29,29,27,.6)}
.reel video{width:100%;height:100%;object-fit:cover}
.reel .tag{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;background:rgba(23,22,20,.7);color:var(--cream);font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.reel .tag i{width:7px;height:7px;border-radius:50%;background:#E0533D;animation:ping2 1.6s infinite}
@keyframes ping2{50%{opacity:.3}}
.reel figcaption{margin-top:14px;display:flex;justify-content:space-between;gap:12px;font:500 10.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.reel .snd{position:absolute;right:12px;bottom:12px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(23,22,20,.7);color:var(--cream);display:grid;place-items:center;cursor:pointer;padding:0}
.reel .snd svg{width:18px;height:18px}