/* Área de Membros (membros.html) e páginas de material (eBooks) no visual novo.
   Depende de /tokens.css, /site.css e /listas.css (topo escuro, filtros, busca, cartões). Não carrega styles.css. */

/* ---------- login ---------- */
.ml { position: relative; overflow: hidden; padding-block: clamp(40px, 6vw, 88px) }
.ml::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--az-abyss) 30%, rgba(0, 41, 59, .8) 65%, rgba(0, 41, 59, .92)),
    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%) }
.ml .az-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(32px, 6vw, 96px); align-items: center }
.ml-intro { display: grid; gap: 18px; color: var(--az-mist) }
.ml-intro .az-kicker { color: var(--az-aqua) }
.ml-intro h1.az-display { color: #fff; font-size: clamp(34px, 4.2vw, 56px); max-width: 16ch }
.ml-intro h1 em { font-style: normal; color: var(--az-aqua) }
.ml-intro .lead { color: var(--az-mist) }
.ml-intro .checks li { color: #fff }
.ml-card { background: #fff; color: var(--az-ink); border-radius: 18px; padding: clamp(24px, 3vw, 36px); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(117, 230, 218, .2); display: grid; gap: 18px }
.ml-card h2 { margin: 0; font: 800 26px/1.15 var(--az-display); font-stretch: 110%; color: var(--az-navy) }
.ml-card > p { margin: 0; color: var(--az-muted); font-size: 15px }
@media (max-width: 860px) {
  .ml .az-wrap { grid-template-columns: minmax(0, 1fr) }
  .ml-card { order: -1 } /* no celular o formulário vem primeiro */
}

/* campos */
.f-field { display: grid; gap: 6px }
.f-field label { font: 600 14px/1.2 var(--az-body); color: var(--az-navy) }
.f-field input { width: 100%; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--az-line); border-radius: 10px; background: #fff; font: 400 16px/1.2 var(--az-body); color: var(--az-ink) }
.f-field input:focus { outline: none; border-color: var(--az-teal); box-shadow: 0 0 0 3px rgba(24, 154, 180, .18) }
.f-pass { position: relative }
.f-pass input { padding-right: 52px }
.f-pass button { position: absolute; right: 4px; top: 4px; width: 40px; height: 40px; border: 0; border-radius: 8px; background: none; color: var(--az-muted); cursor: pointer; display: grid; place-items: center }
.f-pass button:hover { color: var(--az-navy); background: var(--az-mist-2) }
.f-pass button:focus-visible { outline: 2px solid var(--az-teal-l) }
.f-pass .az-ico { width: 20px; height: 20px }
.f-pass button .i-hide, .f-pass button[aria-pressed="true"] .i-show { display: none }
.f-pass button[aria-pressed="true"] .i-hide { display: block }
.f-err { min-height: 1.3em; margin: 0; color: #b42318; font-size: 14.5px; font-weight: 600 }
.f-err:empty { display: none }
.f-help { margin: 0; padding-top: 16px; border-top: 1px solid var(--az-line); color: var(--az-muted); font-size: 14px; line-height: 1.55 }
.ml-card .az-btn, .md-modal .az-btn { width: 100% }
.az-btn[disabled] { opacity: .65; cursor: progress }

/* carregando / bloqueado */
.m-state { padding-block: clamp(56px, 9vw, 120px) }
.m-state .az-wrap { display: grid; justify-items: center; text-align: center; gap: 14px }
.m-state h1 { font-size: clamp(28px, 3vw, 40px); color: var(--az-navy) }
.m-state p { margin: 0; color: var(--az-muted); max-width: 52ch }
.m-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #fff1cc; color: #8a5a00 }
.m-icon .az-ico { width: 30px; height: 30px }
.spinner { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--az-line); border-top-color: var(--az-teal); animation: spin 1s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }

/* ---------- biblioteca ---------- */
.lib-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 32px; width: 100% }
.lib-head > div:first-child { display: grid; gap: 14px; justify-items: start }
.lib-actions { display: flex; flex-wrap: wrap; gap: 10px }
.az-tag.ty { display: inline-flex; align-items: center; gap: 6px }
.az-tag.ty .az-ico { width: 14px; height: 14px }
.card-media .play { pointer-events: none }
.card--top .card-media img { object-position: 50% 0 } /* capas de eBook (em pé): mostra o título, que fica no alto */

/* ---------- detalhe ---------- */
.md, .m-state { min-height: calc(100dvh - 72px) } /* telas curtas: o rodapé não sobe e deixa faixa branca */
.md { padding-block: clamp(24px, 3vw, 40px) clamp(56px, 8vw, 96px) }
.md-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 24px; font-size: 14.5px; color: var(--az-muted) }
.md-crumbs a { color: var(--az-link); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px }
.md-crumbs a:hover { text-decoration: underline }
.md-crumbs .az-ico { width: 16px; height: 16px; transform: scaleX(-1) }
.md-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 56px); align-items: start }
@media (max-width: 1023px) { .md-layout { grid-template-columns: minmax(0, 1fr) } }
.md-player { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--az-abyss); box-shadow: var(--az-shadow) }
.md-player iframe, .md-player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.md-player video { background: #000; object-fit: contain }
.md-info { display: grid; gap: 14px; margin-top: 26px; justify-items: start }
.md-info h1 { font-size: clamp(26px, 3vw, 40px); color: var(--az-navy); max-width: 26ch }
.md-info .lead { max-width: 64ch }
.md-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px }
.md-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; width: 100%; margin-top: 18px; padding-top: 22px; border-top: 1px solid var(--az-line) }
.md-pager .az-btn .az-ico.back { transform: scaleX(-1) }
.md-body { margin-top: 28px; max-width: 720px; font-size: 17px; line-height: 1.75; color: var(--az-ink) }
.md-body h2, .md-body h3 { font-family: var(--az-display); color: var(--az-navy); line-height: 1.2; margin: 1.6em 0 .4em }
.md-body img { max-width: 100%; height: auto; border-radius: 12px }
.md-body a { color: var(--az-link) }
/* lista da trilha (mesma categoria) */
.md-side { position: sticky; top: 96px; background: var(--az-mist-2); border: 1px solid var(--az-line); border-radius: var(--az-r-card); padding: 18px; display: grid; gap: 12px }
.md-side h2 { margin: 0; font: 700 12.5px/1 var(--az-display); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; color: var(--az-muted) }
.md-side ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.md-side a { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border-radius: 10px; text-decoration: none; color: var(--az-navy); background: #fff; border: 1px solid transparent }
.md-side a:hover { border-color: var(--az-teal) }
.md-side a[aria-current="page"] { border-color: var(--az-navy); box-shadow: inset 3px 0 0 var(--az-sun) }
.md-side .th { aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: linear-gradient(160deg, var(--az-navy), var(--az-abyss)) }
.md-side .th img { width: 100%; height: 100%; object-fit: cover }
.md-side b { display: block; font: 700 14.5px/1.3 var(--az-display); font-stretch: 106% }
.md-side small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--az-muted) }
@media (max-width: 1023px) { .md-side { position: static } }
/* material em PDF: capa + informações */
.md-doc { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center }
.md-doc .cover { border-radius: 14px; overflow: hidden; box-shadow: var(--az-shadow); background: var(--az-mist) }
.md-doc .cover img { width: 100%; height: auto }
.md-doc .md-info { margin-top: 0 }
@media (max-width: 760px) { .md-doc { grid-template-columns: minmax(0, 1fr) } .md-doc .cover { max-width: 280px } }

/* ---------- janela de senha ---------- */
.md-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(0, 30, 44, .62) }
.md-modal.hidden { display: none }
.md-modal-box { width: 100%; max-width: 440px; max-height: calc(100dvh - 32px); overflow: auto; background: #fff; border-radius: 18px; padding: clamp(22px, 3vw, 32px); box-shadow: var(--az-shadow); display: grid; gap: 16px }
.md-modal-box h2 { margin: 0; font: 800 24px/1.2 var(--az-display); font-stretch: 110%; color: var(--az-navy) }
.md-modal-box > p { margin: 0; color: var(--az-muted); font-size: 15px; line-height: 1.55 }
.md-modal-actions { display: flex; gap: 10px }
.md-modal-actions .az-btn { flex: 1 }

/* ---------- página de eBook (vitrine para membros) ---------- */
.eb-hero .az-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); display: grid; gap: clamp(32px, 6vw, 88px); align-items: center; justify-items: stretch }
.eb-hero .eb-text { display: grid; gap: 18px; justify-items: start }
.eb-cover { justify-self: center; width: min(100%, 340px); border-radius: 14px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(117, 230, 218, .2); transform: perspective(1200px) rotateY(-8deg) rotateX(2deg) }
.eb-cover img { width: 100%; height: auto }
.eb-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--az-mist); font-size: 15px; margin: 0; padding: 0; list-style: none }
.eb-meta li { display: inline-flex; align-items: center; gap: 8px }
.eb-meta .az-ico { color: var(--az-aqua); width: 18px; height: 18px }
.eb-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px }
@media (max-width: 860px) {
  .eb-hero .az-wrap { grid-template-columns: minmax(0, 1fr) }
  .eb-cover { order: -1; width: min(70%, 260px); transform: none }
}
.mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; counter-reset: mod }
.mod { background: #fff; border: 1px solid var(--az-line); border-top: 4px solid var(--az-teal); border-radius: var(--az-r-card); padding: 22px 24px; display: grid; gap: 8px; align-content: start; box-shadow: var(--az-shadow-sm) }
.mod--bonus { border-top-color: var(--az-sun); background: linear-gradient(180deg, #fffaf0, #fff) }
.mod .n { font: 800 13px/1 var(--az-display); font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase; color: var(--az-link) }
.mod--bonus .n { color: #8a5a00 }
.mod p { margin: 0; color: var(--az-muted); font-size: 15px; line-height: 1.55 }

/* guia (leitura longa) */
.callout { border-left: 4px solid var(--az-sun); background: #fffaf0; padding: 18px 22px; border-radius: 0 12px 12px 0; color: var(--az-navy) }
.dl-card { margin-top: 2.4em; padding: clamp(24px, 3vw, 36px); border-radius: 18px; background: var(--az-abyss); color: var(--az-mist); display: grid; gap: 14px; justify-items: start; scroll-margin-top: 96px }
.dl-card h2 { margin: 0 !important; color: #fff !important }
.dl-card p { margin: 0; color: var(--az-mist) }
.prose figure { margin: 2em 0 }
.prose figure img { width: 100% }

/* capa ausente: ícone do tipo no lugar */
.card-media > .ph { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; color: var(--az-aqua); stroke-width: 1.6 }

/* páginas de eBook: voltar à área (sobre fundo escuro) e capa em pé no topo do guia */
.eb-back { display: inline-flex; align-items: center; gap: 8px; color: var(--az-aqua); font: 600 14.5px/1 var(--az-body); text-decoration: none }
.eb-back:hover { text-decoration: underline }
.eb-back .az-ico { width: 16px; height: 16px; transform: scaleX(-1) }
.eb-hero h1.az-display { font-size: clamp(32px, 3.9vw, 54px); max-width: 22ch }
.gd-head .az-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: clamp(28px, 5vw, 72px); align-items: center }
.gd-head .gd-cover { border-radius: 12px; overflow: hidden; box-shadow: var(--az-shadow); transform: rotate(2deg) }
.gd-head .gd-cover img { width: 100%; height: auto }
@media (max-width: 760px) { .gd-head .az-wrap { grid-template-columns: minmax(0, 1fr) } .gd-head .gd-cover { width: 180px; order: -1; transform: none } }
.gd .prose figure img { max-width: 460px; margin-inline: auto; border: 1px solid var(--az-line); box-shadow: var(--az-shadow-sm) }
.gd .prose figcaption { text-align: center }