/* Infográfico animado "Como funciona o Chá Pronto" (etapa 15). Só CSS/SVG, loop de 6 s. */
.ccp{margin:0 auto 16px;max-width:360px;text-align:center}
.ccp-t{margin:0 0 4px;font:800 21px/1.2 Poppins,sans-serif;color:#ea2b2a;letter-spacing:-.2px}
.ccp-r{position:relative;aspect-ratio:100/112}
.ccp-r>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ccp .ln{fill:none;stroke:#ea2b2a;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.ccp .hd{fill:#ea2b2a}
.ccp-s{position:absolute;width:28%;margin:0;transform:translate(-50%,-50%)}
.ccp-s img{display:block;width:100%;height:auto;aspect-ratio:1}
.ccp-l{display:block;margin:0 -60%;white-space:nowrap;font:700 13px/1.25 Poppins,sans-serif;color:var(--txt,#020617)}
.ccp-s1{left:50%;top:18%;width:32%}
.ccp-s1 .ccp-l{position:absolute;right:92%;top:72%;margin:0}
.ccp-s2{left:79%;top:50%}
.ccp-s2 .ccp-l{margin-bottom:2px}
.ccp-s3{left:50%;top:84%}
.ccp-s4{left:21%;top:53%}
.ccp-i{position:relative}
.ccp-f{position:absolute;left:31%;top:31%;width:39%;height:44%;overflow:visible;mix-blend-mode:screen;opacity:.8}
.ccp-f path{transform-box:fill-box;transform-origin:50% 100%}

@media (prefers-reduced-motion:no-preference){
  .ccp .ln,.ccp .hd,.ccp-s2,.ccp-s3,.ccp-s4{animation:6s infinite both}
  .ccp-s1{animation:ccp-s1 6s infinite both}
  .ccp .a1 .ln{animation-name:ccp-l1}.ccp .a1 .hd{animation-name:ccp-h1}
  .ccp .a2 .ln{animation-name:ccp-l2}.ccp .a2 .hd{animation-name:ccp-h2}
  .ccp .a3 .ln{animation-name:ccp-l3}.ccp .a3 .hd{animation-name:ccp-h3}
  .ccp .a4 .ln{animation-name:ccp-l4}.ccp .a4 .hd{animation-name:ccp-h4}
  .ccp-s2{animation-name:ccp-s2}.ccp-s3{animation-name:ccp-s3}.ccp-s4{animation-name:ccp-s4}
  .ccp-f path{animation:ccp-fl .5s ease-in-out infinite alternate}
  .ccp-f path:nth-child(2){animation-duration:.37s;animation-delay:-.2s}
  .ccp-f path:nth-child(3){animation-duration:.43s;animation-delay:-.1s}
  .ccp-s4 .ccp-i{animation:ccp-pulse 1.5s ease-in-out infinite}
}
/* Setas: desenham em sequência (1% = 60 ms), seguram, somem e recomeçam */
@keyframes ccp-l1{0%,5%{stroke-dashoffset:1;opacity:0}17%,88%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes ccp-l2{0%,25%{stroke-dashoffset:1;opacity:0}37%,88%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes ccp-l3{0%,45%{stroke-dashoffset:1;opacity:0}57%,88%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes ccp-l4{0%,65%{stroke-dashoffset:1;opacity:0}77%,88%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes ccp-h1{0%,16%{opacity:0}18%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes ccp-h2{0%,36%{opacity:0}38%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes ccp-h3{0%,56%{opacity:0}58%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes ccp-h4{0%,76%{opacity:0}78%,88%{opacity:1}96%,100%{opacity:0}}
/* Estações: entram quando a seta chega (pop com leve "passou do ponto") */
@keyframes ccp-s1{0%{transform:translate(-50%,-50%) scale(.6);opacity:0}5%{transform:translate(-50%,-50%) scale(1.06);opacity:1}8%,77%{transform:translate(-50%,-50%) scale(1);opacity:1}81%{transform:translate(-50%,-50%) scale(1.08);opacity:1}85%,88%{transform:translate(-50%,-50%) scale(1);opacity:1}96%,100%{transform:translate(-50%,-50%) scale(.9);opacity:0}}
@keyframes ccp-s2{0%,16%{transform:translate(-50%,-50%) scale(.6);opacity:0}21%{transform:translate(-50%,-50%) scale(1.08);opacity:1}25%,88%{transform:translate(-50%,-50%) scale(1);opacity:1}96%,100%{transform:translate(-50%,-50%) scale(.9);opacity:0}}
@keyframes ccp-s3{0%,36%{transform:translate(-50%,-50%) scale(.6);opacity:0}41%{transform:translate(-50%,-50%) scale(1.08);opacity:1}45%,88%{transform:translate(-50%,-50%) scale(1);opacity:1}96%,100%{transform:translate(-50%,-50%) scale(.9);opacity:0}}
@keyframes ccp-s4{0%,56%{transform:translate(-50%,-50%) scale(.6);opacity:0}61%{transform:translate(-50%,-50%) scale(1.08);opacity:1}65%,88%{transform:translate(-50%,-50%) scale(1);opacity:1}96%,100%{transform:translate(-50%,-50%) scale(.9);opacity:0}}
@keyframes ccp-fl{0%{transform:scale(1,.9);opacity:.35}100%{transform:scale(.9,1.15);opacity:1}}
@keyframes ccp-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}