/* Camada de movimento e cor, carregada depois do design.css.
   Cores extras da identidade (marca/design-guide.md):
   Sabedoria #28D17A só para resultado e sucesso; Coragem #FD7F00 só para urgência ("ao vivo").
   Para voltar à versão calma, basta remover o <link> deste arquivo. */
:root { --sabedoria: #28D17A; --coragem: #FD7F00; }

/* brilhos flutuando no fundo do hero */
.brilho { opacity: 1; }
.brilho.b2 { width: 520px; height: 520px; left: -240px; right: auto; top: auto; bottom: -300px; background: radial-gradient(circle, rgba(253,187,125,.22), transparent 65%); animation-duration: 15s; animation-direction: alternate-reverse; }
.brilho.b3 { width: 360px; height: 360px; right: 18%; top: 40%; background: radial-gradient(circle, rgba(40,209,122,.10), transparent 65%); animation-duration: 18s; }

/* partículas subindo */
.particulas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.particulas i { position: absolute; bottom: -12px; left: var(--x); width: var(--s, 6px); height: var(--s, 6px); border-radius: 50%; background: var(--c, var(--gold)); opacity: 0; animation: sobe-p var(--t, 9s) linear var(--dl, 0s) infinite; }
@keyframes sobe-p { 10% { opacity: .55; } 80% { opacity: .35; } to { transform: translate(var(--dx, 20px), -620px); opacity: 0; } }

/* "ao vivo" pulsa em laranja Coragem */
.etiqueta i, .etiqueta i::after { background: var(--coragem); }

/* destaque da headline: marca-texto dourado que se desenha */
.hero .destaque.serif { color: #8F5D33; }
.hero .destaque::after { height: .34em; bottom: .02em; opacity: .5; background: var(--gold-bright); transform: scaleX(0); animation: risca .9s var(--mola) .9s forwards; }

/* botão respira e recebe o reflexo de volta */
.btn::before { display: block; animation: reflexo 3.6s ease-in-out infinite; }
.btn { animation: respira 2.8s ease-in-out infinite; }
@keyframes respira { 0%, 100% { box-shadow: 0 6px 18px rgba(200,142,88,.22); } 50% { box-shadow: 0 10px 34px rgba(200,142,88,.48); } }
.topo .btn-mini { animation: none; }

/* card do case boia e o status pisca em verde Sabedoria */
.case { animation: boia 6s ease-in-out infinite; }
.case-status i { position: relative; background: var(--sabedoria); }
.case-status i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--sabedoria); animation: pulso 1.8s ease-out infinite; }

/* selos flutuando em volta do card */
.case-area { position: relative; }
.chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; background: var(--white); color: var(--tx); border: 1px solid var(--bd); border-radius: 100px; padding: 7px 13px 7px 8px; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 14px 30px -12px rgba(15,16,18,.28); animation: boia-chip var(--t, 5s) ease-in-out var(--dl, 0s) infinite; white-space: nowrap; }
.chip img, .chip .ic { width: 22px; height: 22px; border-radius: 50%; background: var(--light); padding: 3px; object-fit: contain; flex-shrink: 0; }
.chip .ic { display: grid; place-items: center; background: rgba(40,209,122,.14); color: #138A4E; font-size: 14px; padding: 0; }
.chip.verde { color: #138A4E; border-color: rgba(40,209,122,.35); }
.chip.c1 { top: 18px; left: -46px; }
.chip.c2 { top: 34%; right: -38px; }
.chip.c3 { bottom: 31%; left: -104px; }
.chip.c4 { bottom: -16px; right: 18px; }
@keyframes boia-chip { 50% { transform: translateY(-9px) rotate(var(--r, 0deg)); } }
.js .chip { opacity: 0; scale: .6; transition: opacity .5s var(--mola), scale .5s cubic-bezier(.3, 1.6, .5, 1); transition-delay: var(--in, 1.2s); }
.js .case-area.visto .chip { opacity: 1; scale: 1; }

@media (max-width: 1100px) { .chip.c1 { left: -20px; } .chip.c3 { left: -24px; } .chip.c2 { right: -16px; } }
@media (max-width: 860px) {
  .chip { font-size: 11px; padding: 5px 10px 5px 6px; }
  .chip img, .chip .ic { width: 18px; height: 18px; }
  .chip.c1 { top: auto; bottom: -14px; left: 12px; }
  .chip.c2, .chip.c3 { display: none; }
  .chip.c4 { bottom: -14px; right: 12px; }
  .brilho.b3 { display: none; }
}

/* bloco "Você sai da aula com" */
.leva { margin-top: 28px; background: var(--base); color: var(--light); border-radius: 10px; padding: 36px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 32px; align-items: start; position: relative; overflow: hidden; }
.leva::after { content: ""; position: absolute; right: -90px; bottom: -90px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(40,209,122,.14), transparent 65%); pointer-events: none; }
.leva .kicker { color: var(--gold-bright); }
.leva .kicker::before { background: var(--gold-bright); }
.leva h3 { font-family: Sora, sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin-top: 12px; }
.leva ol { list-style: none; display: grid; gap: 12px; position: relative; z-index: 1; }
.leva li { display: flex; gap: 16px; align-items: flex-start; background: var(--soft); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; transition: transform .25s var(--mola), border-color .25s; }
.leva li:hover { transform: translateX(6px); border-color: rgba(40,209,122,.4); }
.leva li b { font-family: Sora, sans-serif; color: var(--sabedoria); font-size: 14px; margin-top: 2px; flex-shrink: 0; }
.leva li div { flex: 1; }
.leva li strong { display: block; font-size: 16px; font-weight: 600; color: var(--white); }
.leva li span { display: block; font-size: 14px; color: var(--faint); margin-top: 2px; }
.confirmar { flex-shrink: 0; font-style: normal; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; background: #FFE66D; color: #111; border-radius: 3px; padding: 2px 6px; margin-top: 2px; }
@media (max-width: 860px) { .leva { grid-template-columns: 1fr; padding: 26px 20px; gap: 20px; } .leva h3 { font-size: 21px; } .leva li { flex-wrap: wrap; gap: 8px 14px; } .leva li div { flex: 1 1 calc(100% - 40px); } .leva .confirmar { margin-left: 30px; } }

@media (prefers-reduced-motion: reduce) {
  .particulas { display: none; }
  .js .chip { opacity: 1; scale: 1; }
  .hero .destaque::after { transform: none; }
}