/* ============================================================
   Clipzy — área logada (dashboard + assistente de nova série)
   Layout copiado da tela original: sidebar de 190px, coluna
   central de 540px, cards de raio 12 e passo a passo de 6 etapas.
   ============================================================ */

:root{
  --bg:#0B0A0E;
  --side:#0E0D12;
  --card:#141416;
  --card-hover:#1A1A1E;
  --txt:rgba(255,255,255,.92);
  --txt-2:rgba(255,255,255,.55);
  --txt-3:rgba(255,255,255,.35);
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.05);
  --grad:linear-gradient(135deg,#6D28D9 0%,#C026D3 100%);
  --accent:#A855F7;
  --ok:#4ADE80;
  --side-w:190px;
  --col:540px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);color:var(--txt-2);
  font-family:"Inter Tight",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
/* precisa vencer o display:flex de .presets, senão o hidden não esconde */
[hidden]{display:none!important}

/* esconde até confirmar sessão, evita piscar tela logada */
body{visibility:hidden}
body.liberado{visibility:visible}

.layout{display:flex;min-height:100vh}

/* ---------- SIDEBAR ---------- */
.side{
  width:var(--side-w);flex:none;background:var(--side);
  border-right:1px solid var(--line-2);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.side-logo{display:flex;align-items:center;gap:8px;padding:16px 16px 20px;
  font-weight:700;font-size:16px;color:var(--txt);letter-spacing:-.03em}
.side-logo svg{width:22px;height:22px;flex:none}
.side-nav{display:flex;flex-direction:column;gap:2px;padding:0 10px}
.side-item{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;
  font-size:13.5px;color:var(--txt-2);cursor:pointer;transition:background .15s,color .15s;
}
.side-item:hover{background:rgba(255,255,255,.04);color:var(--txt)}
.side-item.on{background:rgba(255,255,255,.07);color:var(--txt);font-weight:500}
.side-item svg{width:15px;height:15px;flex:none;opacity:.8}

.side-fim{margin-top:auto;padding:12px 10px 14px}
.btn-upgrade{
  width:100%;display:flex;align-items:center;justify-content:center;gap:7px;
  height:38px;border-radius:10px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--txt);font-size:13px;font-weight:500;cursor:pointer;
  transition:border-color .15s,background .15s;
}
.btn-upgrade:hover{border-color:rgba(168,85,247,.45);background:rgba(160,60,246,.1)}
.btn-upgrade svg{width:13px;height:13px}

/* ---------- MODAL "Escolha seu plano" (botão Fazer upgrade) ---------- */
.planos-modal{
  position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.planos-caixa{
  width:100%;max-width:400px;background:#141416;border:1px solid var(--line);
  border-radius:16px;padding:20px 18px 18px;
}
.planos-topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.planos-topo h2{font-size:19px;font-weight:700;color:var(--txt);letter-spacing:-.02em}
.planos-fechar{background:none;border:0;color:var(--txt-3);cursor:pointer;padding:4px;display:flex}
.planos-fechar:hover{color:var(--txt)}
.planos-fechar svg{width:16px;height:16px}
.planos-lista{display:flex;flex-direction:column;gap:12px}
.planos-linha{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid var(--line);border-radius:12px;padding:16px;
}
.planos-nome{font-size:15px;font-weight:600;color:var(--txt);line-height:1.3}
.planos-desc{font-size:13px;color:var(--txt-3);margin-top:3px}
.planos-assinar{
  flex:none;height:38px;padding:0 16px;border:0;border-radius:10px;cursor:pointer;
  background:linear-gradient(135deg,#4C3BFF 0%,#A855F7 100%);color:#fff;font-size:14px;font-weight:500;
}
.planos-assinar:hover{filter:brightness(1.08)}
.planos-assinar:disabled{opacity:.6;cursor:default}
.side-user{display:flex;align-items:center;gap:8px;margin-top:12px;padding:0 2px}
.side-av{
  width:22px;height:22px;border-radius:999px;flex:none;object-fit:cover;background:var(--grad);
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#fff;
}
.side-nome{
  font-size:12px;color:var(--txt-2);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.side-sair{background:none;border:0;padding:0;cursor:pointer;font-size:12px;color:var(--txt-3)}
.side-sair:hover{color:var(--txt)}

/* ---------- ÁREA PRINCIPAL ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.crumb{
  display:flex;align-items:center;gap:8px;height:46px;padding:0 24px;
  border-bottom:1px solid var(--line-2);font-size:13px;color:var(--txt-3);
}
.crumb a:hover{color:var(--txt-2)}
.crumb .atual{color:var(--txt);font-weight:500}
.crumb svg{width:12px;height:12px;opacity:.5}

.palco{flex:1;display:flex;justify-content:center;padding:40px 24px 56px}
.coluna{width:100%;max-width:var(--col)}

/* ---------- PROGRESSO ---------- */
.passos{display:flex;gap:13px;margin-bottom:26px}
.passo{flex:1;height:4px;border-radius:999px;background:rgba(255,255,255,.09)}
.passo.feito{background:var(--grad)}

/* ---------- CABEÇALHO DA ETAPA ---------- */
.etapa-topo{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.etapa-topo h1{font-size:26px;font-weight:700;color:var(--txt);letter-spacing:-.03em;line-height:1.2}
.chip{
  font-size:11px;color:var(--txt-2);border:1px solid var(--line);border-radius:999px;
  padding:3px 9px;background:rgba(255,255,255,.03);white-space:nowrap;
}
.etapa-sub{font-size:14px;color:var(--txt-2);margin-bottom:20px}

/* ---------- ABAS ---------- */
.abas{display:flex;gap:22px;border-bottom:1px solid var(--line);margin-bottom:20px}
.aba{
  background:none;border:0;padding:0 0 10px;cursor:pointer;
  font-size:14px;color:var(--txt-3);position:relative;transition:color .15s;
}
.aba:hover{color:var(--txt-2)}
.aba.on{color:var(--txt);font-weight:500}
.aba.on::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--txt);border-radius:2px;
}

/* ---------- CARDS DE PRESET ---------- */
.presets{display:flex;flex-direction:column;gap:12px}
.preset{
  width:100%;text-align:left;cursor:pointer;
  display:flex;align-items:flex-start;gap:12px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:15px 17px;transition:border-color .15s,background .15s;
}
.preset:hover{background:var(--card-hover);border-color:rgba(255,255,255,.16)}
.preset.on{border-color:rgba(168,85,247,.55);background:rgba(160,60,246,.08)}
.preset-txt{flex:1;min-width:0}
/* display:block nos dois: são <span>, e sem isso nome e descrição
   saíam colados na mesma linha ("MedievalHistória medieval...") e o
   margin-top da descrição era ignorado. */
.preset-nome{display:block;font-size:15px;font-weight:600;color:var(--txt);letter-spacing:-.01em}
.preset-desc{display:block;font-size:13px;color:var(--txt-2);margin-top:6px;line-height:1.5}
.badge-alta{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  font-size:11px;font-weight:500;color:var(--ok);
  background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.22);
  border-radius:999px;padding:3px 9px;white-space:nowrap;
}
.badge-alta svg{width:11px;height:11px}

/* ---------- ABA PERSONALIZADO ---------- */
.campo-bloco{margin-bottom:22px}
.campo-rotulo{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
  font-size:13.5px;font-weight:600;color:var(--txt);
}
.chip-opcional{
  font-size:11px;font-weight:400;color:var(--txt-3);
  border:1px solid var(--line);border-radius:999px;padding:2px 8px;
  background:rgba(255,255,255,.03);
}
.custom textarea{
  width:100%;resize:vertical;display:block;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:14px;color:var(--txt);font-family:inherit;font-size:14px;line-height:1.6;
}
.custom textarea::placeholder{color:var(--txt-3)}
.custom textarea:focus{outline:none;border-color:rgba(168,85,247,.55);box-shadow:0 0 0 3px rgba(168,85,247,.14)}
#nichoCustom{min-height:110px}
#roteiroCustom{min-height:130px}
.campo-rodape{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:8px;font-size:12px;color:var(--txt-3);
}
.contador.no-limite{color:#FCA5A5}

/* ---------- SELECT ---------- */
.select-wrap{position:relative}
.select-wrap svg{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;color:var(--txt-3);pointer-events:none;
}
.select{
  width:100%;height:46px;padding:0 40px 0 14px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  color:var(--txt);font-family:inherit;font-size:14.5px;cursor:pointer;
  appearance:none;-webkit-appearance:none;
}
.select:focus{outline:none;border-color:rgba(168,85,247,.55);box-shadow:0 0 0 3px rgba(168,85,247,.14)}

/* ---------- LISTA DE VOZES ---------- */
.vozes{border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden}
.voz{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:14px 16px;background:none;border:0;cursor:pointer;transition:background .15s;
}
.voz + .voz{border-top:1px solid var(--line-2)}
.voz:hover{background:rgba(255,255,255,.03)}
.voz.on{background:rgba(160,60,246,.09)}
.radio{
  width:15px;height:15px;border-radius:999px;flex:none;
  border:1.5px solid rgba(255,255,255,.25);position:relative;transition:border-color .15s;
}
.voz.on .radio{border-color:var(--accent)}
.voz.on .radio::after{
  content:"";position:absolute;inset:3px;border-radius:999px;background:var(--accent);
}
.voz-txt{flex:1;min-width:0}
.voz-linha{display:flex;align-items:center;gap:8px}
.voz-nome{font-size:14.5px;font-weight:600;color:var(--txt)}
.chip-genero{
  font-size:10.5px;color:var(--txt-2);border:1px solid var(--line);
  border-radius:999px;padding:1px 7px;background:rgba(255,255,255,.04);white-space:nowrap;
}
.voz-desc{display:block;font-size:13px;color:var(--txt-2);margin-top:2px;line-height:1.45}
.btn-play{
  width:30px;height:30px;flex:none;border-radius:8px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:var(--txt-2);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .15s,color .15s,background .15s;
}
.btn-play:hover{border-color:rgba(168,85,247,.5);color:var(--txt);background:rgba(160,60,246,.12)}
.btn-play svg{width:12px;height:12px}
.btn-play.tocando{border-color:var(--accent);color:#fff;background:rgba(160,60,246,.22)}

/* ---------- MÚSICAS (seleção múltipla) ---------- */
.musicas{display:flex;flex-direction:column;gap:12px}
.musica-linha{display:flex;align-items:center;gap:12px}
.musica{
  flex:1;min-width:0;display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 15px;
  transition:border-color .15s,background .15s;
}
.musica:hover{background:var(--card-hover);border-color:rgba(255,255,255,.16)}
.musica.on{border-color:rgba(168,85,247,.55);background:rgba(160,60,246,.08)}
.musica-ico{
  width:30px;height:30px;flex:none;border-radius:8px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--txt-3);
}
.musica.on .musica-ico{background:rgba(160,60,246,.18);border-color:rgba(168,85,247,.4);color:var(--accent)}
.musica-ico svg{width:14px;height:14px}
.musica-txt{flex:1;min-width:0}
.musica-nome{display:block;font-size:14.5px;font-weight:600;color:var(--txt)}
.musica-desc{display:block;font-size:12.5px;color:var(--txt-2);margin-top:1px}
.musica-linha .btn-play{width:34px;height:34px;border-radius:9px}

/* ---------- RODAPÉ DE AÇÃO ---------- */
/* Logo abaixo do conteúdo da etapa, a um respiro do último campo, como
   no original. Era position:fixed no rodapé e ficava longe dos campos. */
.acoes{margin-top:36px}
.acoes-in{display:flex;justify-content:flex-end;gap:10px}
.btn-voltar{
  height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--line);
  background:transparent;color:var(--txt-2);font-size:14px;cursor:pointer;
  display:flex;align-items:center;gap:7px;margin-right:auto;
}
.btn-voltar:hover{color:var(--txt);border-color:rgba(255,255,255,.2)}
.btn-voltar svg{width:13px;height:13px}
.btn-continuar{
  height:40px;padding:0 18px;border-radius:10px;border:0;
  background:var(--grad);color:#fff;font-size:14px;font-weight:500;cursor:pointer;
  display:flex;align-items:center;gap:7px;
  box-shadow:0 8px 26px -12px rgba(160,60,246,.8);
  transition:transform .16s,opacity .16s;
}
.btn-continuar:hover:not(:disabled){transform:translateY(-1px)}
.btn-continuar:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn-continuar svg{width:13px;height:13px}

.aviso{font-size:13.5px;border-radius:10px;padding:11px 13px;margin-bottom:16px;
  background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.3);color:#FCA5A5}

/* ---------- RESPONSIVO ---------- */
@media (max-width:860px){
  .side{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .2s;z-index:70}
  .side.aberta{transform:none}
  .palco{padding:24px 16px 48px}
  .etapa-topo h1{font-size:22px}
}

/* aviso de aba ainda não construída */
.dica-vazia{
  font-size:13px;color:var(--txt-3);background:var(--card);
  border:1px dashed var(--line);border-radius:12px;padding:16px;
}

/* ---------- ESTILO VISUAL (etapa 4) ---------- */
/* Carrossel horizontal: 9 estilos, 4 inteiros visíveis e o próximo
   aparecendo na borda, como no original. Rolagem com snap e sem barra. */
.estilos{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:2px 2px 6px;margin:0 -2px;scrollbar-width:none;
}
.estilos::-webkit-scrollbar{display:none}
.estilo{
  background:none;border:0;padding:0;cursor:pointer;text-align:left;display:block;
  flex:0 0 calc((100% - 42px) / 3.75);scroll-snap-align:start;
}
.estilo-img{
  display:block;                 /* span inline ignora aspect-ratio */
  aspect-ratio:9/16;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);background:var(--card);
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.estilo-img img{width:100%;height:100%;object-fit:cover;display:block}
.estilo:hover .estilo-img{border-color:rgba(255,255,255,.2);transform:translateY(-2px)}
.estilo.on .estilo-img{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(168,85,247,.45), 0 10px 30px -14px rgba(160,60,246,.9);
}
.estilo-nome{display:block;font-size:13px;color:var(--txt-2);margin-top:9px;transition:color .15s}
.estilo:hover .estilo-nome{color:var(--txt)}
.estilo.on .estilo-nome{color:var(--txt);font-weight:500}

/* espaço de imagem que ainda não chegou */
.ph-img{
  width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center;padding:10px;
  border:1px dashed rgba(255,255,255,.2);border-radius:inherit;
  background:radial-gradient(80% 60% at 50% 0%, rgba(160,60,246,.13), transparent 70%);
}
.ph-img span{
  font-size:10px;color:rgba(255,255,255,.45);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;line-height:1.4;
}

@media (max-width:620px){
  .estilo{flex-basis:calc((100% - 14px) / 2.3)}
}

/* ---------- SALVANDO A SÉRIE (depois de "Criar série") ---------- */
.voltar-painel{
  display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--txt-3);
  transition:color .15s;
}
.voltar-painel:hover{color:var(--txt-2)}
.voltar-painel svg{width:13px;height:13px}
.salvando{max-width:360px;margin:0 auto}
.salvando .voltar-painel{margin-bottom:22px}
.salvando-titulo{font-size:20px;font-weight:700;color:var(--txt);letter-spacing:-.02em;line-height:1.3}
.salvando-sub{font-size:12.5px;color:#9FA3C7;margin-top:4px}
.salvando-lista{display:flex;flex-direction:column;gap:8px;margin-top:22px}
.salvando-item{
  display:flex;align-items:center;gap:9px;padding:10px 12px;font-size:12.5px;
  border:1px solid var(--line);border-radius:10px;background:#141416;
  animation:clipzySurge .25s ease-out;
}
.salvando-item.andamento{display:block}
.salvando-linha{display:flex;align-items:center;gap:9px}
.salvando-ok{
  width:16px;height:16px;border-radius:999px;background:#7C5CFF;color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.salvando-ok svg{width:10px;height:10px}
.salvando-rotulo{color:var(--txt-3)}
.salvando-rotulo.claro{color:var(--txt-2)}
.salvando-valor{color:var(--txt);font-weight:600}
.giro-mini{
  width:15px;height:15px;border-radius:999px;flex:none;
  border:2px solid rgba(124,92,255,.25);border-top-color:#7C5CFF;
  animation:clipzyGira .8s linear infinite;
}
.barra{height:3px;border-radius:999px;background:rgba(255,255,255,.07);margin-top:9px;overflow:hidden}
.barra span{display:block;height:100%;width:0;background:linear-gradient(90deg,#6D28D9,#A855F7);transition:width .9s ease}
@keyframes clipzyGira{to{transform:rotate(360deg)}}
@keyframes clipzySurge{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- PLANOS (paywall "Desbloqueie sua série") ---------- */
.planos-pagina{max-width:780px;margin:0 auto;padding:24px 24px 60px}
.planos-pagina > .voltar-painel{margin:0 0 20px}
.planos-card{
  display:grid;grid-template-columns:1fr 1fr;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#0F0F12;
}
.planos-esq{padding:32px 28px;background:#161618;border-right:1px solid var(--line)}
.planos-dir{padding:30px 28px}
.planos-esq h1{font-size:22px;font-weight:700;color:var(--txt);letter-spacing:-.02em;line-height:1.25}
.planos-sub{font-size:13px;color:var(--txt-2);margin-top:4px}
.ciclo{display:flex;align-items:center;gap:10px;margin:22px 0 18px}
.ciclo-toggle{display:inline-flex;padding:4px;border-radius:999px;background:#0B0B0D;border:1px solid var(--line)}
.ciclo-op{
  border:0;background:transparent;color:var(--txt-3);font-size:13px;font-weight:500;
  padding:6px 15px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s;
}
.ciclo-op.on{background:#2A2A2E;color:var(--txt)}
.chip-economia{font-size:11px;font-weight:600;color:var(--txt);background:rgba(255,255,255,.07);border-radius:999px;padding:4px 9px}
.planos-lista{display:flex;flex-direction:column;gap:14px}
.plano{
  position:relative;width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:18px 16px;border-radius:12px;border:1px solid var(--line);background:#131315;
  color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s;
}
.plano:hover{border-color:rgba(255,255,255,.18)}
.plano.on{border-color:#5B3FD6;box-shadow:0 0 0 1px rgba(91,63,214,.6)}
.plano-info{display:block;min-width:0}
.plano-nome{display:block;font-size:14px;font-weight:700;color:var(--txt)}
.plano-cad{font-size:12px;font-weight:400;color:var(--txt-3);margin-left:6px}
.plano-mes{display:block;font-size:12px;color:var(--txt-2);margin-top:3px}
.plano-preco{flex:none;text-align:right}
.plano-valor{display:block;font-size:20px;font-weight:700;color:var(--txt);letter-spacing:-.01em;line-height:1.1}
.plano-unid{display:block;font-size:9.5px;font-weight:600;letter-spacing:.08em;color:var(--txt-3);margin-top:3px}
.selo{position:absolute;top:-10px;left:12px;font-size:10.5px;font-weight:600;border-radius:999px;padding:1px 8px;background:#161618}
.selo-popular{color:#4ADE80;border:1px solid rgba(74,222,128,.45)}
.selo-crescer{color:#FACC15;border:1px solid rgba(250,204,21,.55)}
.add-series{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;
  padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:#131315;
}
.add-titulo{font-size:13.5px;font-weight:600;color:var(--txt)}
.add-sub{font-size:11.5px;color:var(--txt-3)}
.contador-series{display:flex;align-items:center;gap:12px}
.contador-series button{
  width:28px;height:28px;border-radius:999px;border:1px solid var(--line);background:transparent;
  color:var(--txt-2);font-size:15px;line-height:1;cursor:pointer;
}
.contador-series button:hover:not(:disabled){color:var(--txt);border-color:rgba(255,255,255,.2)}
.contador-series button:disabled{opacity:.4;cursor:default}
.contador-series span{min-width:14px;text-align:center;font-size:13.5px;font-weight:600;color:var(--txt)}
.aviso-planos{margin:14px 0 0}
.btn-assinar{
  width:100%;height:44px;margin-top:18px;border:0;border-radius:10px;cursor:pointer;
  background:linear-gradient(90deg,#5B3FF5 0%,#A855F7 100%);color:#fff;font-size:14.5px;font-weight:500;
}
.btn-assinar:disabled{opacity:.6;cursor:wait}
.cobranca{font-size:11.5px;color:var(--txt-3);text-align:center;margin-top:12px}
.bandeiras{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:10px}
.bandeiras span{font-size:10px;font-weight:600;color:var(--txt-2);border:1px solid var(--line);border-radius:5px;padding:3px 7px;background:#0F0F11}
.seguro{display:flex;align-items:center;justify-content:center;gap:5px;font-size:11px;color:var(--txt-3);margin-top:10px}
.seguro svg{width:11px;height:11px}
.planos-dir h2{font-size:13px;font-weight:600;color:var(--txt);margin-bottom:14px}
.beneficios{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:30px}
.beneficios li{display:flex;gap:10px;font-size:12.5px;color:var(--txt-2);line-height:1.45}
.beneficios svg{width:13px;height:13px;flex:none;color:#7C5CFF;margin-top:3px}
.depos{display:flex;flex-direction:column;gap:12px;margin-bottom:30px}
.depo{border:1px solid var(--line);border-radius:12px;background:#141416;padding:14px 14px 16px}
.depo-topo{display:flex;align-items:center;gap:10px}
.depo-topo img{width:28px;height:28px;border-radius:999px;object-fit:cover}
.depo-nome{font-size:12px;font-weight:600;color:var(--txt)}
.depo-estrelas{font-size:10px;color:#FACC15;letter-spacing:1px;line-height:1.3}
.depo p{font-size:12px;color:var(--txt-2);margin-top:12px;line-height:1.6}
.faq{display:flex;flex-direction:column;gap:8px}
.faq-item{border:1px solid var(--line);border-radius:10px;background:#0E0E10}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:13px 14px;background:none;border:0;cursor:pointer;text-align:left;
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--txt);
}
.faq-ico{flex:none;font-size:14px;line-height:1;color:var(--txt-3)}
.faq-a{padding:0 14px 14px;font-size:12px;color:var(--txt-2);line-height:1.6}
@media (max-width:760px){
  .planos-card{grid-template-columns:1fr}
  .planos-esq{border-right:0;border-bottom:1px solid var(--line)}
}

/* ---------- ESTILO DE LEGENDA (etapa 5) ---------- */
.legendas{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.legenda{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:10px;cursor:pointer;text-align:left;display:block;
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.legenda:hover{border-color:rgba(255,255,255,.2);background:var(--card-hover)}
.legenda.on{
  border-color:var(--accent);background:rgba(160,60,246,.08);
  box-shadow:0 0 0 1px rgba(168,85,247,.35);
}
.legenda-previa{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:2.55/1;border-radius:9px;overflow:hidden;
  background:linear-gradient(160deg,#33333A 0%,#1C1C21 55%,#141418 100%);
}
.legenda-nome{display:block;font-size:13px;color:var(--txt);margin-top:9px}

/* as amostras: texto puro, sem imagem */
/* Mesma fonte da legenda queimada no vídeo (Poppins Black): o card
   precisa mostrar o que o vídeo vai ter. */
.amostra{
  font-family:"Poppins","Inter Tight",system-ui,sans-serif;
  font-weight:900;font-size:25px;line-height:1;letter-spacing:.2px;
}
.amostra.maiuscula{text-transform:uppercase}
.amostra.minuscula{text-transform:lowercase;letter-spacing:0}

/* contorno preto grosso feito com sombra em 16 direções, funciona em todo navegador */
.contorno{
  color:#fff;
  text-shadow:
    -3px -3px 0 #000,  0   -3px 0 #000,  3px -3px 0 #000,
    -3px  0   0 #000,                    3px  0   0 #000,
    -3px  3px 0 #000,  0    3px 0 #000,  3px  3px 0 #000,
    -2px -3px 0 #000,  2px -3px 0 #000, -3px -2px 0 #000, 3px -2px 0 #000,
    -3px  2px 0 #000,  3px  2px 0 #000, -2px  3px 0 #000, 2px  3px 0 #000;
}
.contorno.vermelho{color:#FF3131}
/* suave: contorno fino e sombra difusa, sem o peso do traço forte */
.suave{
  color:#fff;
  text-shadow:
    -1.5px -1.5px 0 rgba(0,0,0,.9), 1.5px -1.5px 0 rgba(0,0,0,.9),
    -1.5px  1.5px 0 rgba(0,0,0,.9), 1.5px  1.5px 0 rgba(0,0,0,.9),
    0 3px 8px rgba(0,0,0,.8);
}
.sem-legenda{
  font-size:12px;font-weight:400;color:rgba(255,255,255,.3);
  letter-spacing:0;text-transform:none;
}

@media (max-width:620px){
  .legendas{grid-template-columns:repeat(2,1fr)}
}

/* ---------- DETALHES DA SÉRIE (etapa 6) ---------- */
.campo-texto{
  width:100%;height:46px;padding:0 14px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  color:var(--txt);font-family:inherit;font-size:14.5px;
}
.campo-texto::placeholder{color:var(--txt-3)}
.campo-texto:focus{outline:none;border-color:rgba(168,85,247,.55);box-shadow:0 0 0 3px rgba(168,85,247,.14)}
.info-icone{
  width:14px;height:14px;flex:none;color:var(--txt-3);cursor:help;
}
.caixa-info{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;font-size:13px;line-height:1.6;color:var(--txt-2);
}
.caixa-info b{color:var(--txt);font-weight:600}

/* ============================================================
   PÁGINAS INTERNAS SEM BREADCRUMB (Vídeos, Guias)
   Coluna mais larga que a do assistente: 720px.
   ============================================================ */
.pagina{width:100%;max-width:720px;margin:0 auto;padding:40px 24px 80px}
.pagina-topo{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.pagina-topo h1{font-size:24px;font-weight:700;color:var(--txt);letter-spacing:-.03em}
.link-topo{font-size:13px;color:var(--txt-2)}
.link-topo:hover{color:var(--txt)}
.pagina-sub{font-size:14px;color:var(--txt-2);max-width:62ch;margin-top:10px}

/* ---------- ESTADO VAZIO (Vídeos) ---------- */
.vazio{
  margin-top:26px;border:1px dashed rgba(255,255,255,.15);border-radius:14px;
  padding:56px 24px;text-align:center;
}
.vazio-ico{width:26px;height:26px;margin:0 auto 16px;color:var(--txt-3)}
.vazio h2{font-size:15px;font-weight:500;color:var(--txt-2)}
.vazio p{font-size:13px;color:var(--txt-3);max-width:46ch;margin:8px auto 22px;line-height:1.6}
.btn-cta{
  display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 22px;
  border:0;border-radius:11px;background:var(--grad);color:#fff;
  font-family:inherit;font-size:14.5px;font-weight:500;cursor:pointer;text-decoration:none;
  box-shadow:0 8px 28px -12px rgba(160,60,246,.8);transition:transform .16s;
}
.btn-cta:hover{transform:translateY(-1px)}
.btn-cta svg{width:15px;height:15px}

/* ---------- GUIAS ---------- */
.guia-hero{
  position:relative;margin-top:22px;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:var(--card);aspect-ratio:16/9;
}
.guia-hero > img{width:100%;height:100%;object-fit:cover}
.guia-hero-txt{
  position:absolute;left:0;right:0;bottom:0;padding:24px;
  background:linear-gradient(to top, rgba(8,8,10,.96) 22%, rgba(8,8,10,.72) 55%, transparent 100%);
}
.eyebrow-roxo{
  display:block;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:9px;
}
.guia-hero-txt h2{font-size:21px;font-weight:700;color:#fff;letter-spacing:-.03em;line-height:1.2}
.guia-hero-txt p{font-size:13.5px;color:rgba(255,255,255,.62);margin-top:9px;max-width:62ch;line-height:1.55}
.guia-hero-acoes{display:flex;align-items:center;gap:10px;margin-top:16px}
.btn-assistir{
  display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;
  border:0;border-radius:999px;background:#fff;color:#111;
  font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;
}
.btn-assistir:hover{background:rgba(255,255,255,.88)}
.btn-assistir svg{width:12px;height:12px}
.chip-tempo{
  font-size:12.5px;color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.45);border-radius:999px;padding:5px 12px;
}

.secao-topo{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:34px 0 16px}
.secao-topo h2{font-size:17px;font-weight:600;color:var(--txt)}
.secao-topo span{font-size:12.5px;color:var(--txt-3)}

.guias-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.guia-card{display:block;text-decoration:none}
.guia-thumb{
  display:block;                 /* span inline ignora aspect-ratio e position */
  position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);background:var(--card);
}
.guia-thumb > img{width:100%;height:100%;object-fit:cover}
.guia-card h3{font-size:14px;font-weight:600;color:var(--txt);margin-top:11px;line-height:1.35}
.guia-card p{
  font-size:12.5px;color:var(--txt-3);margin-top:6px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.chip-thumb{
  position:absolute;top:9px;right:9px;font-size:11.5px;color:#fff;
  background:rgba(0,0,0,.72);border-radius:999px;padding:3px 9px;
}
/* card bloqueado */
.trava{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:11px;
  background:rgba(10,10,12,.66);backdrop-filter:blur(7px);
}
.trava-ico{
  width:34px;height:34px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.75);
}
.trava-ico svg{width:15px;height:15px}
.trava-pill{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:5px 11px;text-align:center;
}
.trava-breve{font-size:10.5px;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.5)}

@media (max-width:760px){
  .guias-grade{grid-template-columns:1fr}
}

/* ---------- FALE CONOSCO ---------- */
.pagina.estreita{max-width:548px}
.rotulo-caps{
  display:block;font-size:11px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--txt-3);margin-bottom:8px;
}
.form-2col{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.form-bloco{margin-bottom:18px}
.campo-area{
  width:100%;min-height:130px;resize:vertical;display:block;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:13px 14px;color:var(--txt);font-family:inherit;font-size:14.5px;line-height:1.6;
}
.campo-area::placeholder{color:var(--txt-3)}
.campo-area:focus{outline:none;border-color:rgba(168,85,247,.55);box-shadow:0 0 0 3px rgba(168,85,247,.14)}
.btn-enviar{
  height:44px;padding:0 24px;border:0;border-radius:11px;
  background:var(--grad);color:#fff;font-family:inherit;font-size:14.5px;font-weight:500;
  cursor:pointer;box-shadow:0 8px 28px -12px rgba(160,60,246,.8);transition:transform .16s,opacity .16s;
}
.btn-enviar:hover:not(:disabled){transform:translateY(-1px)}
.btn-enviar:disabled{opacity:.55;cursor:not-allowed;transform:none}
.caixa-simples{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:20px;font-size:13.5px;color:var(--txt-2);
}
.pagina-sub a{color:var(--txt);text-decoration:none;font-weight:500}
.pagina-sub a:hover{text-decoration:underline}
.aviso.ok{background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.3);color:#86EFAC}

@media (max-width:560px){ .form-2col{grid-template-columns:1fr} }

/* ---------- CONFIGURAÇÕES ---------- */
.pagina.conta{max-width:494px}
.cartao{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:22px 24px;margin-top:22px;
}
.cartao h2{font-size:15.5px;font-weight:600;color:var(--txt);margin-bottom:14px}
.cartao h3{font-size:14.5px;font-weight:600;color:var(--txt);margin-bottom:8px}
.linha-dado{font-size:13.5px;color:var(--txt-3);margin-bottom:8px}
.linha-dado b{color:var(--txt-2);font-weight:400}
.linha-dado span{color:var(--txt)}
.cartao hr{border:0;border-top:1px solid var(--line);margin:20px 0}
.cartao p{font-size:13px;color:var(--txt-2);line-height:1.6}

/* ---------- VÍDEOS ----------
   Cartão 9:16 porque o produto é vídeo vertical: mostrar o
   formato final evita a surpresa de baixar e não caber no Shorts. */
.videos-grade{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px;
}
.video-card{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;display:flex;flex-direction:column;
}
.video-palco{
  position:relative;aspect-ratio:9/16;background:#0E0E11;
  display:flex;align-items:center;justify-content:center;
}
.video-palco img,.video-palco video{width:100%;height:100%;object-fit:cover;display:block}
.video-play{
  position:absolute;inset:0;border:0;background:rgba(0,0,0,.28);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s;
}
.video-play:hover{background:rgba(0,0,0,.12)}
.video-play svg{
  width:42px;height:42px;color:#fff;filter:drop-shadow(0 2px 10px rgba(0,0,0,.6));
}
.video-info{padding:11px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.video-titulo{
  font-size:13.5px;font-weight:600;color:var(--txt);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.video-meta{font-size:11.5px;color:var(--txt-3);margin-top:auto;padding-top:6px}
.video-acoes{display:flex;gap:8px;margin-top:8px}
.btn-mini{
  flex:1;height:30px;border-radius:8px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--txt-2);font-family:inherit;font-size:12px;
  display:flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;
  text-decoration:none;transition:border-color .15s,color .15s,background .15s;
}
.btn-mini:hover{border-color:rgba(168,85,247,.45);color:var(--txt);background:rgba(160,60,246,.1)}
.btn-mini svg{width:12px;height:12px}

/* estado de processamento: o usuário precisa saber que ANDOU,
   senão "gerando" por 4 minutos parece travado */
.video-status{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;padding:14px;text-align:center;
}
.video-status .giro{
  width:26px;height:26px;border-radius:999px;
  border:2px solid rgba(255,255,255,.14);border-top-color:var(--accent);
  animation:girar .8s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}
.video-status span{font-size:12px;color:var(--txt-2);line-height:1.45}
.video-status .etapa{font-size:11px;color:var(--txt-3)}
.video-card.falhou .video-palco{background:rgba(248,113,113,.06)}
.video-status .erro-ico{width:24px;height:24px;color:#FCA5A5}
.pill{
  position:absolute;left:8px;top:8px;z-index:2;
  font-size:10.5px;letter-spacing:.02em;padding:3px 8px;border-radius:999px;
  background:rgba(0,0,0,.55);color:rgba(255,255,255,.8);backdrop-filter:blur(4px);
}

@media (max-width:720px){ .videos-grade{grid-template-columns:repeat(2,1fr)} }
@media (max-width:420px){ .videos-grade{grid-template-columns:1fr} }