/* Emergência: cada item "desdobra" ao chegar na tela (efeito exclusivo desta seção).
   A caixa cresce macio, uma linha vermelha corre por cima, o número gira e as palavras sobem por trás de uma máscara. */
.sanfona details{position:relative;overflow:hidden;transition:box-shadow .7s ease,transform .7s cubic-bezier(.2,.9,.2,1)}
.sanfona li:not(.fechado) details{box-shadow:0 18px 40px rgba(224,49,63,.14)}
.sanfona details::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--vermelho);transform:scaleX(1);transform-origin:left center;transition:transform 1s cubic-bezier(.65,0,.15,1)}
.sanfona li.fechado details::before{transform:scaleX(0);transition-duration:.3s}

/* a resposta cresce de 0 até a altura dela, sem "pulo" */
.sanfona .resp{display:grid;grid-template-rows:1fr;transition:grid-template-rows .9s cubic-bezier(.65,0,.15,1)}
.sanfona li.fechado .resp{grid-template-rows:0fr;transition-duration:.45s}
.sanfona .resp-in{overflow:hidden;min-height:0}

/* número gira e solta um anel */
.sanfona summary b{position:relative;transition:transform .9s cubic-bezier(.2,.9,.2,1)}
.sanfona li:not(.fechado) summary b{transform:rotate(360deg)}
.sanfona summary b::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--vermelho);opacity:0}
.sanfona li:not(.fechado) summary b::after{animation:anelEmerg .9s ease-out .15s 1}
@keyframes anelEmerg{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}

/* palavras subindo por trás da máscara, em cascata */
.sanfona .pal{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.sanfona .pal>i{display:inline-block;font-style:normal;transform:none;opacity:1;transition:transform .75s cubic-bezier(.2,.9,.2,1) calc(.3s + var(--d,0s)),opacity .5s ease calc(.3s + var(--d,0s))}
.sanfona li.fechado .pal>i{transform:translateY(110%);opacity:0;transition:transform .25s ease,opacity .2s ease}

/* item 5 em destaque: todo vermelho */
.sanfona .item-destaque details{background:var(--vermelho);box-shadow:0 18px 40px rgba(224,49,63,.35)}
.sanfona .item-destaque details::before{background:#fff}
.sanfona .item-destaque summary{color:#fff}
.sanfona .item-destaque summary b{background:#fff;color:var(--vermelho)}
.sanfona .item-destaque summary b::after{border-color:#fff}
.sanfona .item-destaque p{color:#ffe7ea}
.sanfona .item-destaque blockquote{margin:0 0 20px 50px;padding:12px 14px;background:#fff;color:#a3121f;border-radius:14px;font:800 15px/1.4 var(--corpo);box-shadow:0 8px 20px rgba(0,0,0,.12)}
@media (max-width:980px){.sanfona .item-destaque blockquote{margin-left:0}}

@media (prefers-reduced-motion:reduce){
  .sanfona .resp,.sanfona .pal>i,.sanfona details::before{transition-duration:.25s!important}
}