/* Hipnose em Casa: interface do participante. Telemóvel primeiro, computador a partir de 1024 px. */
:root{
  --azul:#214289;--azul-esc:#1A3672;--azul-video:#10224A;--azul-claro:#E9EEF8;
  --dourado:#E3C476;--dourado-fundo:#FBF6E6;--dourado-texto:#6E5A1E;
  --fundo:#F4F6FB;--texto:#1B2440;--texto2:#4A5470;--texto3:#6B7591;
  --linha:#E6EAF3;--borda:#C7CEDF;--verde:#2E7D4F;--erro:#A3261B;
  --sombra:0 6px 24px rgba(33,66,137,.12);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--fundo);color:var(--texto);font-family:Arimo,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.45;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
a{color:var(--azul)}
button{font-family:inherit;cursor:pointer}
.ahp{min-height:100%;display:flex;flex-direction:column}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* cabeçalho azul */
.cab{background:var(--azul);color:#fff;padding:20px 20px 24px;padding-top:calc(20px + env(safe-area-inset-top));display:flex;flex-direction:column;gap:18px}
.cab-topo{display:flex;align-items:center;justify-content:space-between;gap:12px}
.marca{display:flex;flex-direction:column;gap:2px}
.marca small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dourado);font-weight:700}
.marca b{font-size:15px}
.btn-icone{width:44px;height:44px;border:0;border-radius:12px;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;text-decoration:none}
.cab h1{margin:0;font-size:24px;line-height:1.2}
.cab p{margin:0;font-size:15px;color:rgba(255,255,255,.85)}
.prog-linha{display:flex;justify-content:space-between;font-size:13px;color:rgba(255,255,255,.8)}
.barra{height:8px;border-radius:4px;background:rgba(255,255,255,.18);overflow:hidden}
.barra i{display:block;height:8px;background:var(--dourado)}

.corpo{flex:1;padding:20px;display:flex;flex-direction:column;gap:22px;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.corpo.sem-nav{padding-bottom:calc(28px + env(safe-area-inset-bottom))}

/* cartão de continuar */
.cartao{text-decoration:none;color:inherit;background:#fff;border-radius:18px;box-shadow:var(--sombra);overflow:hidden;display:flex;flex-direction:column}
.cartao-video{height:150px;background:var(--azul-esc);position:relative;display:flex;align-items:center;justify-content:center}
.play{width:60px;height:60px;border-radius:30px;background:var(--dourado);display:flex;align-items:center;justify-content:center}
.cartao-video .fio{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.2)}
.cartao-video .fio i{display:block;height:4px;background:var(--dourado)}
.cartao-txt{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px}
.etq{font-size:12px;font-weight:700;color:var(--texto3);text-transform:uppercase;letter-spacing:.06em}
.cartao-txt b{font-size:18px;line-height:1.3}
.cartao-txt span{font-size:14px;color:var(--texto2)}

/* lista do percurso */
.sec{display:flex;flex-direction:column;gap:10px}
.sec h2{margin:0;font-size:15px}
.lista{display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden}
.mod{border-top:1px solid var(--linha)}
.mod:first-child{border-top:0}
.mod-btn{width:100%;border:0;background:none;text-align:left;display:flex;align-items:center;gap:14px;padding:14px 16px;min-height:60px;color:inherit;font-size:inherit}
.mod.aberto>.mod-btn{background:var(--dourado-fundo)}
.mod.fechado>.mod-btn{color:var(--texto3);cursor:default}
.mod-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.mod-txt b{font-size:15px}
.mod-txt span{font-size:13px;color:var(--texto2)}
.mod.aberto .mod-txt span{color:var(--dourado-texto)}
.mod.fechado .mod-txt span{color:var(--texto3)}
.bola{width:32px;height:32px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;font-weight:700}
.bola.feito{background:var(--azul)}
.bola.agora{border:3px solid var(--azul);color:var(--azul)}
.bola.fecho{background:var(--linha)}
.seta{flex-shrink:0;color:var(--texto3);transition:transform .2s}
.mod.expandido .seta{transform:rotate(180deg)}
.aulas{display:none;padding:4px 0 10px}
.mod.expandido .aulas{display:block}
.aula-ln{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 16px 8px 62px;text-decoration:none;color:var(--texto2);font-size:14px}
.aula-ln.actual{color:var(--azul);font-weight:700}
.aula-ln.fechada{color:var(--texto3);pointer-events:none}
.aula-ln .ic{width:18px;flex-shrink:0;display:flex}

/* navegação de baixo */
.nav{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--linha);display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);padding:6px 8px calc(10px + env(safe-area-inset-bottom));z-index:20}
.nav a{min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-decoration:none;color:var(--texto3);font-size:12px;font-weight:600}
.nav a[aria-current="page"]{color:var(--azul);font-weight:700}

/* aula */
.barra-aula{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 4px;padding-top:calc(8px + env(safe-area-inset-top));background:#fff}
.barra-aula a{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--azul);flex-shrink:0}
.barra-aula div{display:flex;flex-direction:column;gap:1px;min-width:0}
.barra-aula small{font-size:12px;color:var(--texto3);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra-aula b{font-size:15px}
.video{position:relative;width:100%;aspect-ratio:16/9;background:var(--azul-video);flex-shrink:0}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-vazio{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;color:rgba(255,255,255,.8);font-size:14px}
.aula-corpo{padding:18px 20px;display:flex;flex-direction:column;gap:18px;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.aula-corpo h1{margin:0;font-size:21px;line-height:1.25}
.aula-corpo p.resumo{margin:6px 0 0;font-size:14px;color:var(--texto2)}
.partes{background:#fff;border-radius:16px;padding:6px 0;margin:0}
.parte{width:100%;border:0;background:none;text-align:left;display:flex;align-items:center;gap:14px;padding:10px 16px;min-height:52px;color:inherit;font-size:inherit}
.parte.agora{background:var(--dourado-fundo)}
.parte.depois{color:var(--texto3)}
.parte .bola{width:28px;height:28px;border-radius:14px}
.parte .bola.agora{border-width:3px}
.parte span{display:flex;flex-direction:column;gap:1px}
.parte b{font-size:15px}
.parte small{font-size:13px;color:var(--texto2)}
.parte.agora small{color:var(--dourado-texto)}
.parte.depois small{color:var(--texto3)}
.btn{min-height:52px;border:0;border-radius:14px;background:var(--azul);color:#fff;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 20px;text-decoration:none;width:100%}
.btn[disabled]{opacity:.6;cursor:default}
.btn.claro{background:#fff;color:var(--azul);border:1px solid var(--borda)}
.feito-msg{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:var(--verde)}
.aviso{background:#fff;border-radius:16px;padding:18px;font-size:15px;line-height:1.5}

/* entrar */
.entrar .cab{padding:28px 24px 34px;padding-top:calc(28px + env(safe-area-inset-top));gap:22px}
.entrar .cab h1{font-size:26px}
.form{flex:1;padding:28px 24px;display:flex;flex-direction:column;gap:22px;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
.form p{margin:0}
.campo{display:flex;flex-direction:column;gap:8px}
.campo label{font-size:14px;font-weight:700}
.campo input{height:52px;border:1px solid var(--borda);border-radius:12px;padding:0 14px;font-family:inherit;font-size:17px;color:var(--texto);background:#fff;width:100%}
.campo input:focus,.digitos:focus-within .dig.vez{outline:2px solid var(--azul);outline-offset:1px}
.nota{font-size:14px;color:var(--texto2)}
.erro{color:var(--erro);font-size:14px;font-weight:700}
.caixa-venda{margin-top:auto;background:#fff;border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:6px}
.caixa-venda b{font-size:15px}
.caixa-venda a{font-size:15px;font-weight:700;min-height:44px;display:flex;align-items:center}
.cab-codigo{padding:20px 20px 26px}
.cab-codigo .cab-topo{justify-content:flex-start}
.digitos{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.dig{height:58px;border:1px solid var(--borda);border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700}
.dig.cheio{border:2px solid var(--azul)}
.dig.vez{border:2px solid var(--dourado)}
.digitos input{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:24px;border:0;color:transparent;background:transparent;caret-color:transparent}
.ligacoes{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--texto2)}
.ligacoes button{border:0;background:none;padding:0;color:var(--azul);font-weight:700;font-size:14px;min-height:44px;text-align:left;text-decoration:underline}

/* folha de baixo (menu, apoio imediato) */
.veu{position:fixed;inset:0;background:rgba(16,34,74,.45);z-index:40;opacity:0;transition:opacity .2s}
.veu.on{opacity:1}
.folha{position:fixed;left:0;right:0;bottom:0;max-height:88vh;overflow:auto;background:#fff;border-radius:22px 22px 0 0;z-index:41;transform:translateY(100%);transition:transform .25s ease;padding:10px 20px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px}
.folha.on{transform:translateY(0)}
.folha.arrastar{transition:none}
.pega{align-self:center;width:44px;height:5px;border-radius:3px;background:var(--borda);margin:4px 0 2px;flex-shrink:0}
.folha-topo{display:flex;align-items:center;justify-content:space-between}
.folha-topo b{font-size:17px}
.folha-topo button{width:44px;height:44px;border:0;border-radius:12px;background:var(--fundo);color:var(--texto);display:flex;align-items:center;justify-content:center}
.menu-ln{display:flex;align-items:center;gap:14px;min-height:52px;padding:0 4px;text-decoration:none;color:var(--texto);font-size:16px;font-weight:700;border:0;background:none;width:100%;text-align:left;border-top:1px solid var(--linha)}
.menu-ln:first-of-type{border-top:0}
.apoio{display:flex;flex-direction:column;background:var(--fundo);border-radius:14px;overflow:hidden}
.apoio a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:0 16px;text-decoration:none;color:var(--texto);border-top:1px solid var(--linha);font-size:15px}
.apoio a:first-child{border-top:0}
.apoio a b{color:var(--azul);font-size:16px;white-space:nowrap}
.consulta{background:var(--azul);color:#fff;border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:8px;text-decoration:none}
.consulta b{font-size:17px}
.consulta span{font-size:14px;color:rgba(255,255,255,.85)}
.rodape-menu{font-size:13px;color:var(--texto3)}

.carregar{flex:1;display:flex;align-items:center;justify-content:center;padding:40px;color:var(--texto3);font-size:15px}

/* computador */
.pc-cab,.pc-lado,.pc-guia{display:none}
@media (min-width:1024px){
  body{overflow:hidden}
  .ahp.pc{height:100vh;display:flex;flex-direction:column}
  .pc .pc-cab{height:64px;flex-shrink:0;background:var(--azul);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 28px}
  .pc-cab .marca{flex-direction:row;align-items:baseline;gap:14px}
  .pc-cab .marca small{font-size:13px}
  .pc-cab .marca b{font-size:16px}
  .pc-cab-dir{display:flex;align-items:center;gap:20px}
  .pc-cab-dir .pp{display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(255,255,255,.85)}
  .pc-cab-dir .pp .barra{width:160px}
  .pc-cab-dir button{height:40px;padding:0 16px;border-radius:10px;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;font-size:14px;font-weight:600}
  .pc-grelha{flex:1;display:grid;grid-template-columns:300px minmax(0,1fr);min-height:0}
  .pc-grelha.com-guia{grid-template-columns:300px minmax(0,1fr) 400px}
  .pc .pc-lado{display:flex;flex-direction:column;gap:4px;background:#fff;border-right:1px solid var(--linha);padding:22px 16px;overflow:auto}
  .pc-lado .etq{padding:0 10px 8px}
  .pc-lado .mod{border:0}
  .pc-lado .mod-btn{min-height:44px;padding:10px;border-radius:12px;gap:12px}
  .pc-lado .mod.aberto>.mod-btn{background:none}
  .pc-lado .mod.expandido{background:var(--dourado-fundo);border-radius:12px}
  .pc-lado .mod.expandido>.mod-btn{background:none}
  .pc-lado .bola{width:26px;height:26px;font-size:12px}
  .pc-lado .mod-txt b{font-size:14px}
  .pc-lado .mod-txt span{display:none}
  .pc-lado .aula-ln{padding:6px 10px 6px 48px;min-height:32px;font-size:13px}
  .pc-lado .seta{display:none}
  .pc-main{overflow:auto;min-width:0}
  .pc .barra-aula{display:none}
  .pc .aula-pc{padding:28px 36px;display:flex;flex-direction:column;gap:20px;max-width:1100px}
  .pc .aula-pc .tit small{font-size:13px;color:var(--texto3);font-weight:600}
  .pc .aula-pc .tit h1{margin:4px 0 0;font-size:28px}
  .pc .video{border-radius:16px;overflow:hidden;max-height:60vh}
  .pc .aula-corpo{padding:0;gap:16px}
  .pc .aula-corpo h1{display:none}
  .pc .partes{display:flex;flex-wrap:wrap;gap:0 8px;background:none;padding:0}
  .pc .parte{width:auto;min-height:44px;padding:8px 12px;border-radius:10px}
  .pc .parte .bola{display:none}
  .pc .parte small{display:none}
  .pc .btn{width:auto;align-self:flex-start;min-height:48px;padding:0 24px;font-size:15px}
  .pc .nav{display:none}
  .pc .corpo{padding:28px 36px;max-width:820px}
  .pc .cab.so-tel{display:none}
  .pc .pc-guia{display:flex}
}
@media (hover:none){.so-rato{display:none}}