/* OSS YOGA · Aula aberta
   Uma aula completa do Dojo, liberada depois que a pessoa deixa o contato.
   Mesmo componente na /dojo e na /convite: a marcacao e sempre a mesma,
   so mudam os data-* do bloco. Estilo em assets/js/aula-aberta.js.

   A cor do bloco segue o --page-accent da pagina onde ele estiver. */

.aa{
  max-width:900px;margin:0 auto;
  border:1px solid color-mix(in srgb, var(--page-accent-claro,#c9a94f) 30%, transparent);
  background:rgba(245,241,232,.03);
}

/* ---------- Capa com o botao de destravar ---------- */
.aa-capa{
  position:relative;display:block;width:100%;border:0;padding:0;margin:0;
  background:var(--floresta,#0D1A10);cursor:pointer;overflow:hidden;
  aspect-ratio:16/9;color:inherit;font:inherit;text-align:left;
}
.aa-capa img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.22,1,.36,1),filter .4s;
  filter:brightness(.62) saturate(.9);
}
.aa-capa:hover img{transform:scale(1.03);filter:brightness(.7) saturate(1)}
.aa-capa::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,26,16,.15) 0%,rgba(13,26,16,.55) 100%);
}
.aa-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:84px;height:84px;border-radius:50%;z-index:2;
  display:flex;align-items:center;justify-content:center;
  background:rgba(13,26,16,.55);backdrop-filter:blur(6px);
  border:1px solid rgba(245,241,232,.55);
  transition:background .3s,border-color .3s,transform .3s;
}
.aa-capa:hover .aa-play{background:var(--ouro,#C9A94F);border-color:var(--ouro,#C9A94F);transform:translate(-50%,-50%) scale(1.06)}
.aa-play svg{width:26px;height:26px;fill:var(--pergaminho,#F5F1E8);margin-left:5px;transition:fill .3s}
.aa-capa:hover .aa-play svg{fill:var(--floresta,#0D1A10)}
.aa-selo{
  position:absolute;top:18px;left:18px;z-index:2;
  font-size:.6rem;letter-spacing:2.5px;text-transform:uppercase;font-weight:700;
  color:var(--floresta,#0D1A10);background:var(--ouro,#C9A94F);padding:6px 14px;
}
.aa-legenda{
  position:absolute;left:24px;right:24px;bottom:22px;z-index:2;
}
.aa-legenda h3{
  font-family:Georgia,serif;font-weight:400;line-height:1.15;
  font-size:clamp(1.2rem,2.4vw,1.7rem);color:var(--pergaminho,#F5F1E8);margin-bottom:6px;
}
.aa-legenda p{font-size:.8rem;letter-spacing:1.5px;text-transform:uppercase;color:rgba(245,241,232,.62)}

/* ---------- Pe do bloco ---------- */
.aa-pe{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:18px 24px;border-top:1px solid rgba(245,241,232,.08);
}
.aa-pe-tx{font-size:.82rem;line-height:1.6;color:rgba(245,241,232,.5)}
.aa-pe-tx b{color:rgba(245,241,232,.8);font-weight:400}

/* ---------- Player depois de liberado ---------- */
.aa-player{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.aa-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Janela do formulario ---------- */
.aa-modal{
  position:fixed;inset:0;z-index:99995;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(6,12,8,.82);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s;
}
.aa-modal.is-aberta{opacity:1;visibility:visible}
.aa-caixa{
  width:100%;max-width:470px;max-height:calc(100vh - 40px);overflow-y:auto;
  background:var(--floresta-2,#152218);
  border:1px solid color-mix(in srgb, var(--page-accent-claro,#c9a94f) 35%, transparent);
  padding:38px 34px 32px;position:relative;
  transform:translateY(14px);transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.aa-modal.is-aberta .aa-caixa{transform:translateY(0)}
.aa-fechar{
  position:absolute;top:12px;right:14px;width:34px;height:34px;
  background:none;border:0;cursor:pointer;color:rgba(245,241,232,.45);
  font-size:1.5rem;line-height:1;transition:color .25s;
}
.aa-fechar:hover{color:var(--ouro,#C9A94F)}
.aa-caixa-eyebrow{
  font-size:.6rem;letter-spacing:3px;text-transform:uppercase;font-weight:700;
  color:var(--ouro,#C9A94F);margin-bottom:14px;
}
.aa-caixa h4{
  font-family:Georgia,serif;font-weight:400;line-height:1.2;
  font-size:1.5rem;color:var(--pergaminho,#F5F1E8);margin-bottom:10px;
}
.aa-caixa-sub{font-size:.88rem;line-height:1.65;color:rgba(245,241,232,.55);margin-bottom:26px}

.aa-campo{margin-bottom:16px}
.aa-campo label{
  display:block;font-size:.62rem;letter-spacing:2px;text-transform:uppercase;
  font-weight:600;color:rgba(245,241,232,.5);margin-bottom:7px;
}
.aa-campo label span{color:rgba(245,241,232,.3);letter-spacing:1px;text-transform:none;font-weight:400}
.aa-campo input{
  width:100%;padding:13px 15px;font-family:inherit;font-size:.95rem;
  color:var(--pergaminho,#F5F1E8);background:rgba(13,26,16,.55);
  border:1px solid rgba(245,241,232,.14);transition:border-color .25s;
}
.aa-campo input:focus{outline:none;border-color:var(--ouro,#C9A94F)}
.aa-campo input::placeholder{color:rgba(245,241,232,.25)}

.aa-consent{display:flex;align-items:flex-start;gap:10px;margin:20px 0 24px}
.aa-consent input{margin-top:3px;accent-color:var(--ouro,#C9A94F);width:16px;height:16px;flex:0 0 auto}
.aa-consent label{font-size:.78rem;line-height:1.6;color:rgba(245,241,232,.5)}
.aa-consent a{color:var(--ouro,#C9A94F);border-bottom:1px solid rgba(201,169,79,.4)}

.aa-enviar{
  width:100%;padding:16px 24px;cursor:pointer;
  font-family:inherit;font-size:.72rem;letter-spacing:3px;text-transform:uppercase;font-weight:600;
  color:var(--floresta,#0D1A10);background:var(--ouro,#C9A94F);
  border:1px solid var(--ouro,#C9A94F);transition:background .3s,color .3s;
}
.aa-enviar:hover:not(:disabled){background:transparent;color:var(--ouro,#C9A94F)}
.aa-enviar:disabled{opacity:.6;cursor:wait}
.aa-erro{margin-top:14px;font-size:.82rem;line-height:1.6;color:#e2a08a}
.aa-nota{margin-top:16px;text-align:center;font-size:.72rem;color:rgba(245,241,232,.32)}

/* o campo de mel: invisivel pra gente, visivel pra robo */
.aa-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media(max-width:640px){
  .aa-play{width:64px;height:64px}
  .aa-play svg{width:20px;height:20px}
  .aa-legenda{left:16px;right:16px;bottom:16px}
  .aa-selo{top:12px;left:12px}
  .aa-pe{padding:16px 18px;justify-content:center;text-align:center}
  .aa-caixa{padding:32px 22px 26px}
}
@media (prefers-reduced-motion: reduce){
  .aa-capa img,.aa-play,.aa-modal,.aa-caixa{transition:none!important}
  .aa-capa:hover img{transform:none}
}