/* Home do Azume News no visual novo. Usa os tokens de /tokens.css; a home NÃO carrega styles.css.
   Layout: faixas escuras (hero, CTA) + faixas claras em zigue-zague ligadas por uma linha teal com nós. */


/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 96px) clamp(56px, 8vw, 112px) }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--az-abyss) 30%, rgba(0, 41, 59, .78) 60%, rgba(0, 41, 59, .9)),
    repeating-linear-gradient(0deg, rgba(117, 230, 218, .07) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(117, 230, 218, .07) 0 1px, transparent 1px 30px),
    linear-gradient(160deg, var(--az-navy), var(--az-abyss) 70%) }
.hero .az-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center }
.hero h1 { color: #fff; margin-top: 18px }
.hero h1 em { font-style: normal; color: var(--az-aqua) }
.hero .lead { color: var(--az-mist); margin-top: 20px; font-size: clamp(1.05rem, 1.3vw, 1.2rem) }
.hero .az-kicker { color: var(--az-aqua) }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px }
.proof { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 36px }
.dots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--az-mist); font-size: 15px }
.dots[hidden] { display: none }
.dots li { display: flex; align-items: center; gap: 9px }
.dots li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--az-sun); flex: none }
.dots b { color: #fff; font-family: var(--az-display); font-stretch: 110%; font-variant-numeric: tabular-nums }

/* painel com o conteúdo do dia */
.panel { background: rgba(4, 58, 80, .55); border-radius: 18px; box-shadow: 0 0 0 1px rgba(117, 230, 218, .28), 0 40px 80px -40px rgba(0, 0, 0, .7); overflow: hidden; min-width: 0 }
.panel-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid rgba(117, 230, 218, .14); font: 700 13px/1 var(--az-display); font-stretch: 110%; letter-spacing: .06em; text-transform: uppercase; color: var(--az-mist) }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--az-green); box-shadow: 0 0 0 4px rgba(85, 197, 122, .2) }
.panel-top time { margin-left: auto; font: 600 13px/1 var(--az-body); color: rgba(212, 241, 244, .75) }
.panel-body { padding: 18px; display: grid; gap: 14px }
.feat { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 14px; align-items: center; background: #fff; border-radius: 12px; padding: 10px; text-decoration: none; color: var(--az-ink); min-height: 112px }
.feat img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 8px; background: var(--az-mist) }
.feat .h3 { font-size: 17px }
.feat-text { display: grid; gap: 8px; min-width: 0 }
.radar-mini { display: grid; gap: 8px }
.radar-mini a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: rgba(0, 41, 59, .55); box-shadow: inset 0 0 0 1px rgba(117, 230, 218, .14); color: #fff; text-decoration: none; font: 600 14.5px/1.35 var(--az-body) }
.radar-mini a:hover { box-shadow: inset 0 0 0 1px var(--az-aqua) }
.radar-mini .az-tag { flex: none }
.flowline { display: flex; align-items: center; padding: 4px 4px 2px; font: 700 12px/1 var(--az-display); font-stretch: 110%; letter-spacing: .06em; text-transform: uppercase; color: var(--az-mist) }
.flowline span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap }
.flowline span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--az-aqua); background: var(--az-abyss) }
.flowline span.on::before { background: var(--az-sun); border-color: var(--az-sun) }
.flowline i { flex: 1; height: 2px; min-width: 14px; margin: 0 8px; background: linear-gradient(90deg, var(--az-aqua), rgba(117, 230, 218, .25)) }

/* destaque do admin (aba Banner Home) */
.highlight { background: var(--az-mist); border-bottom: 1px solid var(--az-line) }
.highlight .az-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-block: 18px }
.highlight .txt { flex: 1 1 320px; min-width: 0 }
.highlight b { display: block; font: 800 19px/1.2 var(--az-display); font-stretch: 110%; color: var(--az-navy) }
.highlight p { margin: 4px 0 0; color: var(--az-muted); font-size: 15px }

/* ---------- linha do tempo entre seções ---------- */
.tl { position: relative }
.tl::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; left: calc(max((100% - var(--az-max)) / 2, 0px) + var(--az-pad) - 22px);
  background: linear-gradient(var(--az-teal-l), var(--az-teal)); opacity: .5 }
.node { position: relative }
.node::before { content: ""; position: absolute; left: -29px; top: .15em; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--az-teal); box-shadow: 0 0 0 5px rgba(8, 169, 201, .14) }
.band-mist .node::before { background: var(--az-mist-2) }
@media (max-width: 1023px) { .tl::before { left: 8px } .node::before { left: calc(-1 * var(--az-pad) + 1px) } }
@media (max-width: 599px) { .tl::before, .node::before { display: none } }

/* ---------- zigue-zague ---------- */
.zig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: center }
.zig--rev > :first-child { order: 2 }
.zig-text { display: grid; gap: 18px; align-content: start }
@media (max-width: 900px) { .zig, .hero .az-wrap { grid-template-columns: minmax(0, 1fr) } .zig--rev > :first-child { order: 0 } }

.dossier { display: grid; gap: 12px }
.dossier a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 20px 22px; background: #fff; border: 1px solid var(--az-line); border-radius: var(--az-r-card); box-shadow: var(--az-shadow-sm); text-decoration: none; color: var(--az-navy); transition: transform .3s var(--az-ease), border-color .3s }
.dossier a:hover { transform: translateX(4px); border-color: var(--az-teal) }
.dossier .h3 { font-size: 18px; grid-column: 1 }
.dossier .az-tag { grid-column: 1 }
.dossier .az-ico { grid-row: 1 / span 2; grid-column: 2; color: var(--az-teal); width: 22px; height: 22px }

/* aulas */
.video { position: relative; border-radius: var(--az-r-card); overflow: hidden; box-shadow: var(--az-shadow); display: block; text-decoration: none; background: linear-gradient(160deg, var(--az-navy), var(--az-abyss)); aspect-ratio: 16/9 }
.video img { width: 100%; height: 100%; object-fit: cover }
.video .play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--az-sun); display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(255, 180, 0, .25); transition: transform .3s var(--az-ease) }
.video:hover .play { transform: scale(1.06) }
.video .play svg { width: 28px; height: 28px; fill: var(--az-ink); margin-left: 4px }
.video .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 22px 18px; background: linear-gradient(transparent, rgba(0, 41, 59, .92)); color: #fff; display: grid; gap: 8px }
.video .cap .h3 { color: #fff }
.lessons { display: grid; gap: 10px }
.lessons a { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; text-decoration: none; color: var(--az-navy); padding: 8px; border-radius: 12px }
.lessons a:hover { background: var(--az-mist-2) }
.lessons img, .lessons .ph { border-radius: 8px; aspect-ratio: 16/9; object-fit: cover; width: 100%; background: linear-gradient(160deg, var(--az-navy), var(--az-abyss)) }
.lessons b { display: block; font: 700 15.5px/1.3 var(--az-display); font-stretch: 106% }
.lessons small { display: block; color: var(--az-muted); font-size: 13px; margin-top: 4px }
@media (max-width: 520px) {
  .video .play { width: 56px; height: 56px; margin: -44px 0 0 -28px; box-shadow: 0 0 0 7px rgba(255, 180, 0, .25) }
  .video .play svg { width: 22px; height: 22px }
  .video .cap { padding: 28px 16px 14px }
  .video .cap .az-tag { display: none }
  .video .cap .h3 { font-size: 17px }
}

/* trilha de tutoriais */
.trail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--steps, 6), minmax(0, 1fr)); position: relative }
.trail::before { content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 2px; background: linear-gradient(90deg, var(--az-teal), var(--az-teal-l)) }
.trail li { position: relative; display: grid; gap: 12px; padding-right: 14px; align-content: start }
.trail .num { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--az-teal); font: 800 16px/1 var(--az-display); font-stretch: 112%; color: var(--az-navy); position: relative; z-index: 1 }
.trail li:first-child .num { background: var(--az-sun); border-color: var(--az-sun) }
.trail a { text-decoration: none; color: var(--az-navy); font: 700 16px/1.3 var(--az-display); font-stretch: 106% }
.trail a:hover { color: var(--az-link); text-decoration: underline; text-underline-offset: 3px }
.trail small { display: block; color: var(--az-muted); font-size: 13px; margin-top: 2px }
@media (max-width: 900px) {
  .trail { grid-template-columns: minmax(0, 1fr); gap: 18px }
  .trail::before { right: auto; bottom: 22px; width: 2px; height: auto; background: linear-gradient(var(--az-teal), var(--az-teal-l)) }
  .trail li { grid-template-columns: 46px minmax(0, 1fr); align-items: center; padding: 0 }
}

/* planos */
.plan .card-body { gap: 14px }
.price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-family: var(--az-display); color: var(--az-navy) }
.price b { font-size: 32px; font-weight: 800; font-stretch: 110%; letter-spacing: -.01em; font-variant-numeric: tabular-nums }
.price span { font: 400 14px/1.3 var(--az-body); color: var(--az-muted) }
.plan .checks { gap: 9px; font-size: 15px }
.plan .checks li::before { width: 20px; height: 20px; background-size: 12px }
.plan .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 6px }

/* carregando */
.skel { background: linear-gradient(90deg, var(--az-mist-2), #f7fcfd, var(--az-mist-2)); background-size: 200% 100%; border-radius: var(--az-r-card); min-height: 120px; border: 1px solid var(--az-line) }
.band-dark .skel, .panel .skel { background: rgba(117, 230, 218, .06); border-color: rgba(117, 230, 218, .12) }
@media (prefers-reduced-motion: no-preference) { .skel { animation: shimmer 1.4s linear infinite } }
@keyframes shimmer { to { background-position: -200% 0 } }

@media (max-width: 520px) {
  .feat { grid-template-columns: 96px minmax(0, 1fr); gap: 12px }
  .feat .h3 { font-size: 15.5px }
  .flowline { font-size: 10.5px; letter-spacing: .04em }
  .flowline i { min-width: 6px; margin: 0 5px }
  .flowline span { gap: 5px }
  .hero-ctas .az-btn { flex: 1 1 100% }
}

/* ---------- movimento ----------
   Tudo dentro de prefers-reduced-motion: no-preference. A entrada do topo é só CSS; o resto depende de .js-motion,
   que /motion.js liga (sem o script nada fica escondido). Só transform/opacity, para não pesar nem mexer no layout. */
@keyframes rise { from { opacity: 0; transform: translateY(22px) } to { opacity: 1; transform: none } }
@keyframes word { from { opacity: 0; transform: translateY(.42em); filter: blur(6px) } to { opacity: 1; transform: none; filter: none } }
@keyframes panel-in { from { opacity: 0; transform: translateX(48px) scale(.97) } to { opacity: 1; transform: none } }
@keyframes live { from { box-shadow: 0 0 0 0 rgba(85, 197, 122, .55) } to { box-shadow: 0 0 0 10px rgba(85, 197, 122, 0) } }
@keyframes flow { to { background-position: -200% 0 } }
@keyframes step-on { 0%, 20% { background: var(--az-sun); border-color: var(--az-sun); box-shadow: 0 0 0 4px rgba(255, 180, 0, .22) } 28%, 100% { background: var(--az-abyss); border-color: var(--az-aqua); box-shadow: none } }
@keyframes ring { from { transform: scale(1); opacity: .65 } to { transform: scale(1.65); opacity: 0 } }

@media (prefers-reduced-motion: no-preference) {
  /* entrada do topo: título palavra por palavra (.w com --i), depois texto, botões, prêmio e o painel com seus itens */
  .hero .az-kicker { display: inline-block; animation: rise .7s var(--az-ease) both }
  .hero h1 .w { display: inline-block; animation: word .85s calc(.12s + var(--i, 0) * 55ms) var(--az-ease) both }
  .hero .lead { animation: rise .8s .55s var(--az-ease) both }
  .hero .hero-ctas { animation: rise .8s .68s var(--az-ease) both }
  .hero .proof { animation: rise .8s .8s var(--az-ease) both }
  .hero .panel { animation: panel-in 1s .3s var(--az-ease) both }
  .panel-body > * { animation: rise .7s var(--az-ease) both }
  .panel-body > :nth-child(1) { animation-delay: .7s }
  .panel-body > :nth-child(2) { animation-delay: .82s }
  .panel-body > :nth-child(3) { animation-delay: .94s }
  /* painel "vivo": ponto verde pulsando e a trilha Ler → Vender acendendo em sequência */
  .live { animation: live 1.8s ease-out infinite }
  .flowline i { background: linear-gradient(90deg, var(--az-aqua), rgba(117, 230, 218, .2) 30%, var(--az-sun) 50%, rgba(117, 230, 218, .2) 70%, var(--az-aqua)); background-size: 200% 100%; animation: flow 3.2s linear infinite }
  .flowline span:not(.on)::before { animation: step-on 4s infinite }
  .flowline span:nth-of-type(2)::before { animation-delay: .8s }
  .flowline span:nth-of-type(3)::before { animation-delay: 1.8s }
  .flowline span:nth-of-type(4)::before { animation-delay: 2.8s }
  /* aula em destaque: anel pulsando no play; capas das notícias com zoom leve no hover */
  .video .play::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--az-sun); animation: ring 2.4s ease-out infinite }
  #news-grid .card img, .feat img { transition: transform .7s var(--az-ease) }
  #news-grid a.card:hover img, .feat:hover img { transform: scale(1.05) }

  /* saída do topo ao descer (--out 0→1, motion.js): o texto sobe e apaga, a grade de fundo anda mais devagar */
  .js-motion .hero > .az-wrap { transform: translateY(calc(var(--out, 0) * 80px)); opacity: calc(1 - var(--out, 0) * .85) }
  .js-motion .hero::before { transform: translateY(calc(var(--out, 0) * 140px)) }
  .js-motion main { overflow-x: clip } /* o que entra pelos lados não cria rolagem lateral */

  /* blocos que entram ao rolar */
  .js-motion [data-reveal] { transition: opacity .8s var(--az-ease), transform .9s var(--az-ease); transition-delay: var(--d, 0s) }
  .js-motion [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(36px) }
  .js-motion [data-reveal="left"]:not(.is-in) { transform: translateX(-56px) }
  .js-motion [data-reveal="right"]:not(.is-in) { transform: translateX(56px) }
  .js-motion [data-reveal="scale"]:not(.is-in) { transform: scale(.9) }
  /* filhos em cascata; animação sem preenchimento final para não travar o hover dos cartões */
  .js-motion [data-stagger]:not(.is-in) > * { opacity: 0 }
  .js-motion [data-stagger].is-in > * { animation: rise .75s calc(.1s + var(--i, 0) * 85ms) var(--az-ease) backwards }

  /* linha do tempo que se desenha com a rolagem (--draw) e nós que "acendem" quando o bloco entra */
  .js-motion .tl::before { transform-origin: top; transform: scaleY(var(--draw, 0)) }
  .js-motion .node::before { transition: transform .55s cubic-bezier(.34, 1.56, .64, 1) .25s }
  .js-motion :not(.is-in) > .node::before { transform: scale(0) }
  /* trilha de tutoriais: a linha corre da esquerda (ou de cima, no celular) */
  .js-motion .trail::before { transition: transform 1.3s var(--az-ease) .15s; transform-origin: left }
  .js-motion .trail:not(.is-in)::before { transform: scaleX(0) }
  @media (max-width: 900px) {
    .js-motion .trail::before { transform-origin: top }
    .js-motion .trail:not(.is-in)::before { transform: scaleY(0) }
  }
}