/* Design oficial Painel da Tata — creme + navy + púrpura; Montserrat + Cormorant */
:root {
  --creme: #FAF7F1;
  --creme-2: #F3EDE2;
  --navy: #16213E;
  --navy-2: #1B2A4A;
  --purpura: #6B4FA8;
  --purpura-2: #8B6FC7;
  --ouro: #C9A84C;
  --texto: #2A2A35;
  --branco: #FFFFFF;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Montserrat', sans-serif;
  background: var(--creme);
  color: var(--texto);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .display { font-family: 'Cormorant Garamond', serif; color: var(--navy); }
a { color: var(--purpura); text-decoration: none; }

.wrap { max-width: 880px; margin: 0 auto; padding: 0 24px; }

/* Header */
.topbar {
  background: var(--navy);
  padding: 14px 0;
  position: sticky; top: 0; z-index: 50;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; }
.brand { font-family: 'Cormorant Garamond', serif; color: var(--creme); font-size: 1.35rem; letter-spacing: 0.5px; }
.brand b { color: var(--ouro); }
.topbar nav a { color: var(--creme-2); font-size: 0.82rem; margin-left: 22px; text-transform: uppercase; letter-spacing: 1px; }
.topbar nav a:hover { color: var(--ouro); }

/* Hero */
.hero { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 60%, var(--purpura) 160%); color: var(--creme); padding: 90px 0 80px; text-align: center; }
.hero h1 { color: var(--branco); font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.12; font-weight: 600; }
.hero h1 em { color: var(--ouro); font-style: italic; }
.hero .sub { max-width: 620px; margin: 22px auto 0; font-size: 1.05rem; color: #E8E2D5; font-weight: 300; }
.hero .manifesto { margin-top: 14px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.2rem; color: var(--purpura-2); color: #CBB8F0; }

.btn {
  display: inline-block; margin-top: 34px;
  background: var(--purpura); color: var(--branco);
  padding: 17px 42px; border-radius: 999px; border: none; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1rem; letter-spacing: 0.5px;
  transition: transform .15s ease, background .15s ease;
}
.btn:hover { background: var(--purpura-2); transform: translateY(-2px); }
.btn.secundario { background: transparent; border: 1.5px solid var(--creme-2); color: var(--creme); }
.btn.navy { background: var(--navy); }
.hint { display: block; margin-top: 12px; font-size: 0.8rem; color: #CFC8B8; }

/* Sections */
section.bloco { padding: 72px 0; }
section.bloco.alt { background: var(--creme-2); }
.bloco h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 18px; }
.bloco p.lead { max-width: 640px; font-size: 1.02rem; }

/* Régua */
.regua { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 36px; }
.estagio-card {
  background: var(--branco); border-radius: 14px; padding: 22px 20px;
  border: 1px solid #E5DCC9; border-top: 4px solid var(--purpura);
  transition: transform .15s ease, box-shadow .15s ease; cursor: pointer;
}
.estagio-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(22,33,62,0.12); }
.estagio-card .num { font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--purpura); font-weight: 700; }
.estagio-card h3 { font-size: 1.5rem; margin: 4px 0 6px; }
.estagio-card .faixa { font-size: 0.8rem; color: #6b6b76; }

/* Quiz */
.quiz-shell { max-width: 560px; margin: 60px auto; background: var(--branco); border-radius: 18px; padding: 44px 40px; border: 1px solid #E5DCC9; box-shadow: 0 14px 44px rgba(22,33,62,0.08); }
.quiz-shell h2 { font-size: 1.7rem; margin-bottom: 8px; }
.quiz-shell .passo { font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase; color: var(--purpura); font-weight: 700; margin-bottom: 10px; }
.quiz-shell .promessa { font-size: 0.9rem; color: #6b6b76; margin-bottom: 22px; }
.opcao {
  display: block; width: 100%; text-align: left;
  background: var(--creme); border: 1.5px solid #E5DCC9; border-radius: 12px;
  padding: 15px 18px; margin-bottom: 10px; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-size: 0.92rem; color: var(--texto);
  transition: border-color .12s ease, background .12s ease;
}
.opcao:hover { border-color: var(--purpura); }
.opcao.marcada { border-color: var(--purpura); background: #F1EBFB; font-weight: 600; }
.quiz-shell input[type=text], .quiz-shell input[type=email], .quiz-shell select {
  width: 100%; padding: 15px 18px; border: 1.5px solid #E5DCC9; border-radius: 12px;
  font-family: 'Montserrat', sans-serif; font-size: 1rem; background: var(--creme); margin-bottom: 14px;
}
.barra { height: 5px; background: var(--creme-2); border-radius: 99px; margin-bottom: 30px; overflow: hidden; }
.barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--purpura), var(--ouro)); border-radius: 99px; transition: width .3s ease; }

/* Dossiê / aula */
.dossie { max-width: 760px; margin: 48px auto 80px; }
.selo { display: inline-block; background: var(--purpura); color: var(--branco); border-radius: 999px; padding: 6px 18px; font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; }
.dossie h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 14px 0 6px; }
.cartao { background: var(--branco); border: 1px solid #E5DCC9; border-radius: 16px; padding: 30px 32px; margin: 22px 0; }
.cartao h3 { font-size: 1.35rem; margin-bottom: 12px; }
.cartao.destaque { border-left: 5px solid var(--ouro); background: #FDF9EF; }
.cartao.gargalo { border-left: 5px solid var(--purpura); }
.bottomline {
  background: var(--navy); color: var(--creme); border-radius: 16px; padding: 34px 36px; margin: 26px 0;
  font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-style: italic; text-align: center; line-height: 1.4;
}
.bottomline small { display: block; margin-top: 10px; font-family: 'Montserrat', sans-serif; font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; font-style: normal; color: var(--ouro); }
table.matriz { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
table.matriz th { text-align: left; padding: 10px 12px; background: var(--creme-2); color: var(--navy); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; }
table.matriz td { padding: 12px; border-top: 1px solid #EFE8D8; vertical-align: top; }
table.matriz td:first-child { font-weight: 600; color: var(--purpura); white-space: nowrap; }
.tabela-scroll { overflow-x: auto; }
ul.checklist { list-style: none; }
ul.checklist li { padding: 9px 0 9px 34px; position: relative; border-bottom: 1px dashed #E5DCC9; }
ul.checklist li:last-child { border-bottom: none; }
ul.checklist li::before { content: '✓'; position: absolute; left: 4px; color: var(--ouro); font-weight: 700; }
.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.ficha div { background: var(--creme); border-radius: 12px; padding: 14px 16px; }
.ficha .rotulo { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--purpura); font-weight: 700; }
.ficha .valor { font-size: 0.9rem; margin-top: 3px; }
.oferta { background: linear-gradient(150deg, var(--navy), var(--navy-2)); color: var(--creme); border-radius: 16px; padding: 36px; margin: 30px 0; }
.oferta h3 { color: var(--ouro); font-size: 1.5rem; }
.oferta p { font-size: 0.95rem; margin-top: 12px; color: #E4DECF; }
.oferta .nao { border-left: 3px solid var(--ouro); padding-left: 16px; font-style: italic; }
.nav-aulas { display: flex; justify-content: space-between; gap: 12px; margin: 40px 0 80px; }
.nav-aulas a { background: var(--branco); border: 1.5px solid #E5DCC9; border-radius: 12px; padding: 14px 20px; font-size: 0.85rem; flex: 1; }
.nav-aulas a:hover { border-color: var(--purpura); }
.aviso-regra { background: #F1EBFB; border: 1px solid #D9CCF2; border-radius: 12px; padding: 18px 22px; font-size: 0.88rem; margin: 22px 0; }

footer { background: var(--navy); color: #B9B3A4; text-align: center; padding: 36px 20px; font-size: 0.8rem; }
footer .assinatura { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--ouro); font-size: 1.05rem; margin-bottom: 6px; }

@media (max-width: 640px) {
  .quiz-shell { margin: 30px 16px; padding: 32px 24px; }
  .nav-aulas { flex-direction: column; }
}