/* ===========================================================
   Primeira dobra com vídeo vertical (páginas de curso)
   -----------------------------------------------------------
   Headline, descrição, botão e vídeo 9:16 SEMPRE dentro da tela,
   sem rolar, em qualquer aparelho:
     · desktop / tablet deitado: texto à esquerda, vídeo à direita
     · celular / tablet em pé: headline → vídeo → descrição → botão
   O vídeo mede a altura que sobra na tela; a largura vem do 9:16.
   Modo cinema: o mesmo <video> vai para uma camada escura em tela
   cheia (não reinicia, não perde o som).
   =========================================================== */
.page-hero.dobra.hv-dobra{ padding:0; }
.page-hero.dobra.hv-dobra > .wrap{ align-items:stretch; min-height:0; }

.hv{
  --hv-tick: 54px;                         /* faixa no rodapé da dobra */
  --hv-h: clamp(340px, calc(100svh - var(--hv-tick) - 64px), 860px);
  width:100%; display:grid; align-items:center; justify-content:center;
  grid-template-columns:minmax(0, 560px) auto;
  grid-template-areas:
    ".     video"
    "crumb video"
    "logo  video"
    "h1    video"
    "sub   video"
    "cta   video"
    ".     video";
  grid-template-rows:minmax(0,1fr) auto auto auto auto auto minmax(0,1fr);
  column-gap:clamp(40px, 6vw, 96px);
  padding:clamp(18px,3.5vh,32px) 0; text-align:left;
}
.hv .hv-crumb{ grid-area:crumb; justify-self:start; margin:0 0 clamp(14px,2.2vh,22px); }
.hv .hv-logo{ grid-area:logo; height:clamp(30px,4.2vh,42px); width:auto; margin:0 0 clamp(14px,2.4vh,22px); display:block; justify-self:start; }
.hv h1{ grid-area:h1; margin:0; font-size:clamp(28px, 3.1vw, 46px); line-height:1.07; max-width:none; text-align:left; }
.hv .hero-sub{ grid-area:sub; margin:clamp(14px,2.4vh,22px) 0 0; max-width:520px; font-size:clamp(15px,1.15vw,17.5px); line-height:1.55; text-align:left; }
.hv .hero-cta{ grid-area:cta; justify-content:flex-start; margin-top:clamp(18px,3vh,30px); }
/* minimalismo: uma ação só na primeira dobra (o "ver as aulas" continua no resto da página) */
.hv .hero-cta .btn-ghost{ display:none; }
.hv .curto{ display:none; }

/* ---------- player ---------- */
.hv-player{
  grid-area:video; position:relative; height:var(--hv-h); aspect-ratio:9/16; width:auto;
  border-radius:22px; overflow:hidden; background:#0c0717; isolation:isolate;
  border:1px solid var(--border-2);
  box-shadow:0 40px 90px -36px rgba(124,58,237,.65), var(--shadow-card);
}
.hv-player .glow{ position:absolute; inset:-30%; z-index:-1; border-radius:50%; background:radial-gradient(circle,var(--roxo-glow),transparent 62%); filter:blur(24px); pointer-events:none; }
.hv-player video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:#0c0717; cursor:pointer; }
.hv-ctl{ position:absolute; z-index:2; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.22);
  background:rgba(12,7,23,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#fff; cursor:pointer; transition:transform .15s, background .15s; padding:0; }
.hv-ctl:hover{ background:rgba(12,7,23,.8); transform:scale(1.06); }
.hv-ctl svg{ width:20px; height:20px; }
.hv-cine{ top:12px; right:12px; }
.hv-mute{ bottom:16px; right:12px; }
.hv-ctl .on, .hv-player.mudo .hv-mute .off{ display:none; }
.hv-player.mudo .hv-mute .on{ display:block; }
/* aviso de som: aparece só quando o navegador bloqueou o áudio */
.hv-som{ position:absolute; z-index:2; left:50%; bottom:18px; transform:translateX(-50%); display:none; align-items:center; gap:8px; white-space:nowrap;
  padding:10px 16px; border-radius:999px; border:0; cursor:pointer; font:700 13.5px/1 var(--font-display, inherit);
  background:var(--verde, #34e076); color:#06210f; box-shadow:0 10px 30px -8px rgba(52,224,118,.6); animation:hv-pulse 1.8s ease-in-out infinite; }
.hv-som svg{ width:17px; height:17px; }
.hv-player.mudo .hv-som{ display:inline-flex; }
.hv-player.mudo .hv-mute{ display:none; }
@keyframes hv-pulse{ 50%{ transform:translateX(-50%) scale(1.05); } }
@keyframes hv-pulse-c{ 50%{ transform:translate(-50%,-50%) scale(1.05); } }
.hv-play{ position:absolute; inset:0; z-index:1; display:none; place-items:center; pointer-events:none; }
.hv-play i{ width:68px; height:68px; border-radius:50%; background:rgba(12,7,23,.6); backdrop-filter:blur(6px); display:grid; place-items:center; }
.hv-play svg{ width:28px; height:28px; margin-left:4px; color:#fff; }
.hv-player.pausado .hv-play{ display:grid; }
.hv-player.sem-video .hv-ctl, .hv-player.sem-video .hv-som, .hv-player.sem-video .hv-play, .hv-player.sem-video .hv-barra{ display:none !important; }
.hv-player.sem-video video{ cursor:default; }
.hv-barra{ position:absolute; left:0; right:0; bottom:0; height:3px; z-index:2; background:rgba(255,255,255,.12); }
.hv-barra i{ display:block; height:100%; width:0; background:var(--verde, #34e076); }

/* ---------- modo cinema ---------- */
.hv-cinema{ position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; padding:3vh 3vw;
  background:rgba(5,3,10,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.hv-cinema.on{ display:flex; }
.hv-cinema .hv-player{ height:min(94vh, 94svh); max-width:94vw; box-shadow:0 0 120px -20px rgba(124,58,237,.55); }
.hv-cinema .hv-cine .on{ display:block; } .hv-cinema .hv-cine .off{ display:none; }
html.hv-travado{ overflow:hidden; }

/* ---------- empilhado: celular e tablet em pé ----------
   headline → vídeo → descrição → botão. O logo só aparece em telas altas;
   a faixa de autoridade sai para o vídeo ganhar altura. */
@media (max-width:760px), (max-aspect-ratio:4/5){
  .hv{
    --hv-h: clamp(250px, calc(100svh - var(--hv-txt, 300px)), 760px);
    grid-template-columns:1fr; grid-template-rows:auto auto auto auto auto auto;
    grid-template-areas: "crumb" "logo" "h1" "video" "sub" "cta";
    justify-items:center; text-align:center; padding:14px 0 16px; row-gap:0;
  }
  .hv .hv-logo{ justify-self:center; height:26px; margin-bottom:10px; }
  .hv h1{ text-align:center; font-size:clamp(20px, 5.6vw, 30px); line-height:1.1; margin-bottom:12px; }
  .hv .hero-sub{ text-align:center; margin-top:12px; font-size:13.5px; line-height:1.42; max-width:560px; }
  .hv .hero-cta{ justify-content:center; margin-top:12px; width:100%; }
  .hv .hero-cta .btn{ flex:0 1 auto; padding:14px 26px; font-size:15px; }
  .hv .longo{ display:none; } .hv .curto{ display:inline; }
  .hv-player{ max-width:100%; border-radius:18px; }
  /* no celular o aviso de som vai para o centro do vídeo, grande: é o primeiro toque que a pessoa dá */
  .hv-som{ bottom:auto; top:50%; transform:translate(-50%,-50%); padding:14px 22px; font-size:15px; animation:hv-pulse-c 1.8s ease-in-out infinite; }
  .hv-som svg{ width:20px; height:20px; }
}
/* celular baixo: o logo sai primeiro (o que importa fica) */
@media (max-width:760px) and (max-height:800px), (max-aspect-ratio:4/5) and (max-height:800px){
  .hv .hv-logo{ display:none; }
}
@media (max-width:760px){ .hv .hero-cta .btn{ width:100%; justify-content:center; } }
/* tablet em pé (tela larga): mais respiro e texto maior */
@media (min-width:761px) and (max-aspect-ratio:4/5){
  .hv h1{ font-size:clamp(30px, 4.6vw, 44px); max-width:680px; }
  .hv .hero-sub{ font-size:16.5px; max-width:600px; }
  .hv .hero-cta .btn{ width:auto; }
}
/* desktop baixo (notebook 1366×650): texto um pouco menor */
@media (min-width:761px) and (min-aspect-ratio:4/5) and (max-height:720px){
  .hv h1{ font-size:clamp(26px, 2.6vw, 36px); }
  .hv .hero-sub{ font-size:15px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
}
@media (prefers-reduced-motion:reduce){ .hv-som{ animation:none; } }

/* ---------- vídeo deitado (16:9) ----------
   o player.js marca .deitado quando o vídeo é mais largo que alto */
.hv-player.deitado{ aspect-ratio:16/9; height:auto; width:min(48vw, 760px, calc(var(--hv-h) * 16 / 9)); align-self:center; }
@media (max-width:760px), (max-aspect-ratio:4/5){ .hv-player.deitado{ width:100%; max-width:720px; } .hv.hv-deitado{ align-content:center; row-gap:6px; } .hv.hv-deitado h1{ margin-bottom:16px; } .hv.hv-deitado .hero-sub{ margin-top:16px; } }
.hv-cinema .hv-player.deitado{ height:auto; width:min(94vw, calc(94vh * 16 / 9)); }

/* ---------- mini player (rolando a página) ----------
   canto inferior esquerdo; o chat da Mari fica no direito */
.hv-vaga{ grid-area:video; justify-self:center; align-self:center; border-radius:22px; background:rgba(255,255,255,.03); border:1px dashed rgba(196,181,255,.18); }
.hv-player.hv-mini{ position:fixed; left:22px; bottom:22px; z-index:92; height:auto; width:180px; aspect-ratio:9/16; border-radius:16px;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(196,181,255,.25); }
.hv-player.hv-mini.deitado{ width:300px; aspect-ratio:16/9; }
.hv-player.hv-mini .glow, .hv-player.hv-mini .hv-cine, .hv-player.hv-mini .hv-play{ display:none !important; }
.hv-player.hv-mini .hv-ctl{ width:34px; height:34px; } .hv-player.hv-mini .hv-ctl svg{ width:16px; height:16px; }
.hv-player.hv-mini .hv-mute{ bottom:10px; right:8px; }
.hv-player.hv-mini .hv-som{ top:auto; bottom:12px; left:50%; transform:translateX(-50%); padding:7px 11px; font-size:11.5px; animation:hv-pulse 1.8s ease-in-out infinite; }
.hv-player.hv-mini .hv-som svg{ width:13px; height:13px; }
.hv-fechar{ display:none; top:8px; right:8px; }
.hv-player.hv-mini .hv-fechar{ display:grid; }
.hv-player.hv-mini.hv-fechado{ opacity:0; transform:translateY(20px) scale(.92); pointer-events:none; transition:opacity .3s, transform .3s; }
@media (max-width:760px){
  .hv-player.hv-mini{ left:14px; bottom:16px; width:118px; border-radius:14px; }
  .hv-player.hv-mini.deitado{ width:200px; }
  html.hv-tem-barra .hv-player.hv-mini{ bottom:92px; }
  .hv-player.hv-mini .hv-som{ font-size:0; padding:8px; gap:0; } /* no mini do celular, só o ícone do som */
}