/* Componente animado opcional: respiracao quadrada.
   Carregar apenas nos cursos que usam este bloco. */

.certificado-curso__mockup--respiracao{min-height:44rem}
.respiracao-quadrada{display:flex;width:min(100%,46rem);aspect-ratio:1;align-items:center;justify-content:center}
.respiracao-quadrada__trilha{position:relative;width:74%;aspect-ratio:1;border:2px solid rgba(247,205,96,.82);border-radius:1.4rem;background:rgba(255,255,255,.035)}
.respiracao-quadrada__trilha:before{content:"";position:absolute;inset:1.2rem;border:1px solid rgba(255,255,255,.12);border-radius:1rem}
.respiracao-quadrada__ponto{position:absolute;z-index:3;top:0;left:0;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--cor-amarelo);box-shadow:0 0 0 .8rem rgba(255,222,89,.16),0 0 2.2rem rgba(255,222,89,.65);transform:translate(-50%,-50%);animation:respiracao-quadrada-ponto 16s linear infinite}
.respiracao-quadrada__label{position:absolute;color:rgba(255,255,255,.78);font-size:1.2rem;font-weight:600;line-height:1;text-transform:uppercase}
.respiracao-quadrada__label--topo{top:-3.4rem;left:50%;transform:translateX(-50%)}
.respiracao-quadrada__label--direita{top:50%;right:-4.8rem;transform:translateY(-50%) rotate(90deg)}
.respiracao-quadrada__label--baixo{bottom:-3.4rem;left:50%;transform:translateX(-50%)}
.respiracao-quadrada__label--esquerda{top:50%;left:-4.8rem;transform:translateY(-50%) rotate(-90deg)}
.respiracao-quadrada__centro{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}
.respiracao-quadrada__fase{position:absolute;color:var(--cor-amarelo);font-size:clamp(2.4rem,2rem + 1vw,3.6rem);font-weight:600;line-height:1.1;text-transform:uppercase;opacity:0;animation:respiracao-quadrada-fase 16s linear infinite}
.respiracao-quadrada__fase--segure-1{animation-delay:4s}
.respiracao-quadrada__fase--expire{animation-delay:8s}
.respiracao-quadrada__fase--segure-2{animation-delay:12s}
.respiracao-quadrada__tempo{margin-top:6.4rem;color:rgba(255,255,255,.82);font-size:1.35rem;font-weight:600;line-height:1;text-transform:uppercase}

@keyframes respiracao-quadrada-ponto{
  0%{top:0;left:0}
  25%{top:0;left:100%}
  50%{top:100%;left:100%}
  75%{top:100%;left:0}
  100%{top:0;left:0}
}
@keyframes respiracao-quadrada-fase{
  0%,24.99%{opacity:1}
  25%,100%{opacity:0}
}

@media (max-width:767px){
  .certificado-curso__mockup--respiracao{order:2;width:100%;min-height:34rem}
  .certificado-curso__mockup--respiracao+.certificado-curso__conteudo{order:1}
  .respiracao-quadrada{width:min(100%,34rem)}
}

@media (max-width:478px){
  .respiracao-quadrada{width:min(100%,30rem)}
  .respiracao-quadrada__trilha{width:70%}
  .respiracao-quadrada__label{font-size:1rem}
  .respiracao-quadrada__label--direita{right:-4.2rem}
  .respiracao-quadrada__label--esquerda{left:-4.2rem}
}

@media (prefers-reduced-motion:reduce){
  .respiracao-quadrada__ponto,.respiracao-quadrada__fase{animation:none}
  .respiracao-quadrada__ponto{top:0;left:0}
  .respiracao-quadrada__fase--inspire{opacity:1}
}