:root{
    --bg:#041436;
    --card:#071a35;
    --accent:#34CC67;
    --text:#e6eef6;
    --muted:#b7c3d6;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  }

  html,body{height:100%;margin:0;background:var(--bg);color:var(--text)}
  .wrap{max-width:420px;margin:0 auto;padding:18px}
  header{background:linear-gradient(180deg,#083052 0%, #041436 100%);padding:20px;border-radius:10px 10px 0 0;text-align:center}
  header h1{margin:0;font-size:20px;line-height:1.2}
  header p{margin:6px 0 0;color:var(--muted);font-size:13px}
  .list{background:linear-gradient(180deg,#061733 0%, rgba(6,23,51,0.6) 100%);padding:14px;border-radius:0 0 10px 10px}
  .course{
    display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;margin-bottom:12px;background:rgba(255,255,255,0.02);
    box-shadow:0 6px 16px rgba(2,6,20,0.2);
  }

  .header-spacer{
  height: 1.2cm;      /* altura do espaçamento */
  width: 100%;
  background: transparent; /* mantém transparente; se quiser uma linha fina usar: background:#021526; height:0.12cm; */
}

/* layout do curso (ajuste se já tiver variáveis) */
.course{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:12px;
  margin-bottom:12px;
  background: rgba(255,255,255,0.02);
}

/* miniatura */
.thumb{flex:0 0 120px;height:120px;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* meta centralizada */
.meta{
  flex:1;
  min-width:0;
  text-align:left;            /* TITULOS AO CENTRO */
  display:flex;
  flex-direction:column;
  justify-content:center;
 
}

/* título sem quebra e com truncamento se necessário */
.title{
  font-weight:700;
  font-size:18px;
  line-height:1.1;
  white-space:nowrap;           /* evita quebra de linha */
  overflow: visible;
  text-overflow:ellipsis;       /* ... se ultrapassar */
  color:var(--text);

}

/* subtítulo logo abaixo, também centralizado */
.subtitle{
  font-size:12px;
  color:var(--muted);
  margin-top:12px;
  white-space:nowrap;
  overflow:visible;
  text-overflow:ellipsis; 
}

/* área dos botões */
.cta{
  flex:0 0 auto;
  display:flex;
  gap:8px;
  height:12vh; 
  align-items:flex-end;   /* ↓ empurra os botões para baixo */
  padding-bottom:6px;     /* ajuste fino para zona verde */

}

/* botões: tamanho idêntico, apenas ícones */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:2px;                 /* espaço entre ícone e texto */
  height:38px;             /* mais baixo, como você pediu */
  padding:0 14px;          /* cria espaço para o texto */
  border-radius:999px;
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  white-space:nowrap;      /* impede quebra de linha */
  box-shadow:0 6px 12px rgba(2,6,20,0.12);
}

/* WhatsApp: verde definido */
.btn-whatsapp{
  background:#34CC67;
  color:#062024;             /* caso o svg use currentColor */
  border: none;
}

/* Info: azul */
.btn-info{
  background:#1FA5FF;
  color:white;
  border: none;
}

/* ícone dentro do botão (arquivo SVG) */
.btn-icon{
  width:16px;
  height:16px;
  display:block;
  flex-shrink:0;
  pointer-events:none;/* evita que clique no ícone atrapalhe o link */
}

.btn-text{
  line-height:1;
  font-size:12px;
  color:white;
}

/* pequena responsividade: em telas muito estreitas enfileirar meta acima dos botões */
@media(max-width:360px){
  .course{gap:10px;padding:10px}
  .thumb{flex:0 0 60px;height:60px}
  .btn{width:40px;height:40px}
}

.course{
  display:flex;
  align-items:flex-start; /* ✅ chave para alinhar com o topo da imagem */
  gap:14px;
}