button { font:inherit; }
.trilha { position:relative; max-width:1440px; min-height:100vh; margin:auto; padding:70px 10vw 45px; overflow:hidden; background:radial-gradient(circle at 10% 10%,rgba(27,91,168,.2),transparent 32%),radial-gradient(circle at 90% 85%,rgba(93,42,146,.16),transparent 30%),var(--fundo); }
.trilha-cabecalho { display:flex; align-items:flex-start; gap:18px; margin-bottom:40px; }
.marca-trilha { width:62px; height:62px; display:grid; place-items:center; border:1px solid #5365ff; border-radius:16px; background:linear-gradient(140deg,#126dcc,#7134db); color:#fff; font-size:38px; }
.rotulo-superior { display:block; margin-bottom:8px; color:#8ba2c8; font-size:11px; font-weight:bold; letter-spacing:.16em; text-transform:uppercase; }
h1,h2,h3 { margin:0; font-weight:700; letter-spacing:-.04em; }
h1 { font-size:clamp(32px,4.4vw,34px);line-height:1;color:#ff03b3;}
.trilha-cabecalho p { margin:10px 0 0; color:#aeb8cf; font-size:17px; }
.resumo-trilha { margin-left:auto; padding-top:12px; color:#aab6cf; font-size:13px; }
.resumo-trilha::before { content:""; display:inline-block; width:8px; height:8px; margin-right:10px; border-radius:50%; background:#48b9ff; box-shadow:0 0 14px #48b9ff; }
.seletor-semanas { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; padding:9px; border:1px solid var(--borda); border-radius:17px; background:rgba(16,23,36,.8); }
.aba-semana { min-height:32px; border:0; border-radius:11px; color:#aab5ce; background:transparent; cursor:pointer; transition:.2s; }
.aba-semana:hover { color:white; background:rgba(120,150,200,.1); }
.aba-semana.ativa { color:white; background:linear-gradient(100deg,#159dff,#7737ed); box-shadow:0 10px 25px rgba(66,104,255,.25); }
.intro-semana { display:flex; justify-content:space-between; align-items:end; gap:30px; padding:46px 0 26px; }
.intro-semana h2 { max-width:850px; font-size:clamp(24px,2vw,36px); line-height:1.1;color:#fff; }
.intro-semana p { max-width:430px; margin:0; color:var(--texto-suave); font-size:14px; line-height:1.6; }
.trilha-controle { position:relative; }
.trilha-scroll { overflow-x:auto; padding:55px 20px 22px; margin:0 -20px; scrollbar-width:none; scroll-behavior:smooth; }
.trilha-scroll::-webkit-scrollbar { display:none; }
.trilha-passos { position:relative; display:grid; grid-template-columns:repeat(5,minmax(190px,1fr)); gap:24px; min-width:990px; }
.linha-percurso { position:absolute; top:22px; left:45px; right:45px; height:2px; background:linear-gradient(90deg,var(--azul),#8b61ff,rgba(138,155,193,.4)); }
.passo-card { position:relative; z-index:1; min-height:245px; padding:32px 20px 19px; border:1px solid var(--borda); border-radius:16px; background:linear-gradient(155deg,rgba(20,28,43,.96),rgba(11,16,27,.98)); transition:.25s; }
.passo-card:hover { transform:translateY(-6px); border-color:rgba(75,179,255,.75); box-shadow:0 20px 40px rgba(0,0,0,.28); }
.passo-card:first-of-type { border-color:#449dff; }
.no { position:absolute; top:-48px; left:calc(50% - 17px); width:34px; height:34px; display:grid; place-items:center; border:2px solid #90a3c7; border-radius:50%; background:#0d1626; color:#b7c7e7; font-size:10px; box-shadow:0 0 0 5px #080d16; }
.passo-dia { display:flex; justify-content:space-between; width:60px; color:#fff;padding:5px 7px;border:1px solid #5365ff; border-radius:16px; background:linear-gradient(140deg,#126dcc,#7134db); font-size:11px; font-weight:bold; letter-spacing:.08em; text-transform:uppercase; }
.passo-card .text {height:130px;}
.passo-card h3 { margin:17px 0 10px; font-size:18px; line-height:1.25;color:#8c69ff; }
.passo-card p { min-height:45px; margin:0; color:var(--texto-suave); font-size:14px; line-height:1.5; }
.passo-rodape { display:flex; justify-content:space-between; align-items:end; margin-top:24px; color:#8c69ff; font-size:25px; }
.botao-prompt {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(105, 183, 255, 0.42);
  border-radius: 10px;
  color: #d9efff;
  background: linear-gradient(135deg, rgba(29, 132, 225, 0.16), rgba(116, 65, 227, 0.16));
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: 0.2s ease;
}

.botao-prompt:hover,
.botao-prompt:focus-visible {
  border-color: #6bc7ff;
  color: #fff;
  background: linear-gradient(135deg, rgba(29, 148, 255, 0.3), rgba(124, 69, 237, 0.3));
  box-shadow: 0 8px 20px rgba(45, 135, 238, 0.18);
  transform: translateY(-2px);
}
.seta-trilha { position:absolute; z-index:3; top:50%; width:38px; height:38px; border:1px solid rgba(174,196,235,.25); border-radius:50%; color:#c6d4ee; background:#0b1320; cursor:pointer; font-size:26px; line-height:20px; }
.seta-trilha.anterior { left:-7px; } .seta-trilha.proxima { right:-7px; }
.dica-deslize { display:flex; justify-content:center; gap:10px; margin:22px 0 0; color:#8b9ab6; font-size:13px; }
.modal-fundo { position:fixed; z-index:10; inset:0; display:grid; place-items:center; padding:20px; background:rgba(2,5,10,.72); backdrop-filter:blur(7px); opacity:0; visibility:hidden; transition:opacity .24s ease, visibility 0s linear .24s; } .modal-fundo.aberto { opacity:1; visibility:visible; transition-delay:0s; } .modal-fundo[hidden] { display:none !important; } .modal-detalhes { transform:translateY(12px) scale(.97); opacity:0; transition:transform .28s cubic-bezier(.23,1,.32,1), opacity .22s ease; } .modal-fundo.aberto .modal-detalhes { transform:translateY(0) scale(1); opacity:1; }
.modal-detalhes { position:relative; width:min(560px,100%); max-height:90vh; overflow-y:auto; padding:30px; border:1px solid rgba(183,204,239,.24); border-radius:24px; background:linear-gradient(145deg,rgba(23,32,49,.98),rgba(10,16,28,.99)); box-shadow:0 30px 80px rgba(0,0,0,.58), inset 0 1px rgba(255,255,255,.07); } .modal-detalhes.modal-grande { width:min(820px,100%); } .modal-detalhes.modal-medio { width:min(560px,100%); } .modal-cabecalho { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:24px; } .modal-identidade { display:flex; align-items:center; gap:13px; } .modal-icone { width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(95,179,255,.42); border-radius:12px; color:#96d8ff; background:linear-gradient(145deg,rgba(35,151,255,.22),rgba(129,62,239,.22)); box-shadow:0 8px 22px rgba(42,133,238,.15); } .modal-subtitulo { display:block; margin:3px 0 0; color:#9aacc9; font-size:12px; } .modal-detalhes h2 { max-width:650px; margin:0 0 22px; padding:0; color:#f5f7ff; font-size:clamp(25px,4vw,38px); line-height:1.08; letter-spacing:-.045em; } .prompt-bloco { position:relative; margin:0 0 24px; padding:22px 22px 20px; overflow:hidden; border:1px solid rgba(89,161,255,.28); border-radius:16px; background:linear-gradient(135deg,rgba(39,74,128,.28),rgba(52,30,111,.22)); } .prompt-bloco::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:linear-gradient(#39b4ff,#8b5bff); } .prompt-cabecalho { display:flex; align-items:center; gap:8px; margin-bottom:12px; color:#b6dfff; font-size:11px; font-weight:bold; letter-spacing:.13em; text-transform:uppercase; } .prompt-icone { color:#9d80ff; font-size:18px; } .prompt-bloco p { margin:0; color:#f5f7ff; font-family:Georgia,serif; font-size:clamp(17px,2vw,21px); line-height:1.45; } .mini-rotulo { display:block; margin-bottom:8px; color:#839bc3; font-size:10px; font-weight:bold; letter-spacing:.15em; text-transform:uppercase; } .modal-explicacao { padding:0 2px 22px; border-bottom:1px solid rgba(183,204,239,.14); } .modal-explicacao p, .modal-orientacao p { margin:0; color:#c1cde1; font-size:15px; line-height:1.65; } .modal-orientacao { display:flex; gap:13px; padding:21px 0; } .orientacao-icone { flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:#8bd3ff; background:rgba(48,157,255,.13); } .modal-app { display:flex; align-items:center; gap:10px; margin-top:2px; padding:13px 15px; border:1px solid rgba(183,204,239,.13); border-radius:12px; color:#9facbf; background:rgba(7,13,23,.42); font-size:13px; } .modal-app strong { color:#dfeaff; } .app-icone { color:#8d75ff; font-size:20px; } .mensagem-positiva { margin-top:22px; color:#70c9ff; font-size:13px; font-weight:bold; } .modal-imagem { display:block; width:100%; max-height:340px; margin:0 0 25px; border:1px solid rgba(183,204,239,.2); border-radius:14px; object-fit:cover; box-shadow:0 15px 35px rgba(0,0,0,.24); }
.fechar-modal { position:absolute; top:14px; right:16px; border:0; color:#9aaac5; background:transparent; cursor:pointer; font-size:28px; }
.barra-modal { position:absolute; top:38px; left:23px; width:4px; height:42px; border-radius:4px; background:linear-gradient(#36acff,#8950ff); }
.modal-detalhes .rotulo-superior { border:1px solid #126dcc;border-radius:60px;padding:2px 7px;background:linear-gradient(#36acff,#8950ff);color:#fff;}

@media (max-width:760px) { .modal-detalhes, .modal-detalhes.modal-grande, .modal-detalhes.modal-medio { width:100%; max-height:92vh; padding:24px 20px; overflow-y:auto; } .modal-imagem { max-height:220px; } .trilha { padding:30px 16px 42px; } .trilha-cabecalho { margin-bottom:27px; } .marca-trilha { width:48px; height:48px; font-size:29px; } h1 { font-size:30px; } .resumo-trilha { display:none; } .aba-semana { min-height:45px; padding:0 4px; font-size:12px; } .intro-semana { display:block; padding:34px 0 18px; } .intro-semana p { margin-top:12px; } .trilha-scroll { margin:0 -16px; padding-left:35px; padding-right:35px; } .trilha-passos { grid-template-columns:repeat(5,245px); gap:17px; } .seta-trilha { display:none; } .dica-deslize { font-size:12px; } }