/* ==========================================================================
   julia.css — só o que é exclusivo da página da Julia.
   O alicerce está em produto.css.
   ========================================================================== */
.zap-num{ display:flex; align-items:center; gap:12px; background:var(--white);
  border:1px solid var(--line-soft); border-radius:13px; padding:13px 15px }
.zap-num + .zap-num{ margin-top:9px }
.zap-num__ico{ flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center }
.zap-num__n{ font-size:14px; font-weight:700; letter-spacing:-.015em }
.zap-num__s{ display:block; font-size:12.5px; font-weight:500; color:var(--muted) }
.zap-num--bom .zap-num__ico{ background:#25d366; color:#fff }
.zap-num--ruim{ opacity:.62 }
.zap-num--ruim .zap-num__ico{ background:var(--stone-deep); color:var(--muted) }
.apr{ display:flex; flex-direction:column; gap:9px }
.apr__l{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:1.5 }
.apr__q{ flex:none; width:22px; height:22px; border-radius:7px; display:grid; place-items:center;
  font-size:10px; font-weight:800 }
.apr__q--v{ background:var(--stone); color:var(--muted) }
.apr__q--n{ background:var(--lime); color:var(--ink) }
.apr__seta{ display:block; text-align:center; color:var(--muted-soft); font-size:13px; margin:2px 0 }
.cat{ display:flex; flex-direction:column; gap:8px }
.cat__l{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--white); border:1px solid var(--line-soft); border-radius:11px; padding:11px 14px }
.cat__n{ font-size:13.5px; font-weight:700; letter-spacing:-.015em }
.cat__m{ display:block; font-size:12px; font-weight:500; color:var(--muted) }
.cat__t{ flex:none; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; background:var(--lime) }
.cat__t--off{ background:var(--stone); color:var(--muted) }
/* --- correção: as etiquetas eram caixas fixas de 22px e o texto de cinco
       letras transbordava. Agora a pílula acompanha o conteúdo. ----------- */
.apr__q{
  flex:none; width:auto; height:auto; padding:3px 8px; border-radius:999px;
  font-size:9.5px; font-weight:800; letter-spacing:.09em; line-height:1;
  display:inline-flex; align-items:center;
}
.apr__l{ align-items:center }
/* a correção acontecendo: a linha antiga apaga, a nova entra */
.apr__l--antes{ animation:apagaAntes 8s var(--ease) infinite }
.apr__l--agora{ animation:entraAgora 8s var(--ease) infinite }
.apr__seta{ animation:piscaSeta 8s var(--ease) infinite }
@keyframes apagaAntes{
  0%,34%{ opacity:1; filter:none }
  46%,92%{ opacity:.34; filter:grayscale(1) }
  100%{ opacity:1; filter:none }
}
@keyframes entraAgora{
  0%,38%{ opacity:0; transform:translateY(6px) }
  52%,92%{ opacity:1; transform:none }
  100%{ opacity:0; transform:translateY(6px) }
}
@keyframes piscaSeta{ 0%,28%{ opacity:.35 } 36%,48%{ opacity:1 } 60%,100%{ opacity:.35 } }
/* --- catálogo passeando pelos segmentos ---------------------------------- */
.cat{ position:relative; overflow:hidden }
/* a etiqueta vive no cabeçalho da maquete: dentro do card ela ficava em fluxo
   (empurrando a lista 23px) e ainda seria cortada pelo overflow:hidden */
.mk__cab--seg{ display:flex; align-items:baseline; justify-content:space-between; gap:14px }
.cat__seg{ flex:none; overflow:hidden; line-height:1.35; color:var(--muted-soft) }
.cat__grupo{
  display:flex; flex-direction:column; gap:8px;
  grid-area:1/1;                       /* os três grupos ocupam a mesma célula */
  /* `both` é obrigatório: sem ele, o grupo que ainda não começou fica no
     estado base (visível) e os três aparecem sobrepostos */
  animation:trocaSeg 15s var(--ease) infinite both;
}
.cat__pilha{ display:grid }
.cat__grupo:nth-child(1){ animation-delay:0s }
.cat__grupo:nth-child(2){ animation-delay:5s }
.cat__grupo:nth-child(3){ animation-delay:10s }
/* entra pela direita, segura, sai pela esquerda */
@keyframes trocaSeg{
  0%{ opacity:0; transform:translateX(34px) }
  4%{ opacity:1; transform:translateX(0) }
  30%{ opacity:1; transform:translateX(0) }
  34%,100%{ opacity:0; transform:translateX(-34px) }
}
.cat__eti span{ animation:trocaSeg 15s var(--ease) infinite both; grid-area:1/1 }
.cat__eti span:nth-child(1){ animation-delay:0s }
.cat__eti span:nth-child(2){ animation-delay:5s }
.cat__eti span:nth-child(3){ animation-delay:10s }
@media (prefers-reduced-motion: reduce){
  .apr__l--antes, .apr__l--agora, .apr__seta,
  .cat__grupo, .cat__eti span{ animation:none }
  .apr__l--agora{ opacity:1; transform:none }
  .cat__grupo:nth-child(n+2), .cat__eti span:nth-child(n+2){ display:none }
}
/* silhueta recortada do logo oficial: o traçado escrito à mão deixava o
   telefone deslocado dentro do balão */
.zap-mini{ flex:none; width:14px; height:14px; display:block }
.zap-mini--g{ width:19px; height:19px }