/* =========================================================
   VARIÁVEIS
   ========================================================= */
:root {
  --azul-profundo : #162136;
  --azul-livro    : #3B5BA5;   /* azul da capa do livro */
  --azul-livro-dk : #2a4282;   /* versão escura para hover */
  --terracota     : #BE7C62;
  --terracota-soft: #D4927C;
  --ouro          : #CFB069;
  --ouro-soft     : #E0C882;
  --creme         : #F8F2E3;
  --verde-organic : #7CB342;
  --flor-rosa     : #E05C8A;
  --flor-amarela  : #F5C842;

  --glass-bg      : rgba(18, 30, 50, 0.58);
  --glass-border  : rgba(255, 255, 255, 0.12);
  --glass-blur    : 22px;
  --sombra        : 0 20px 50px rgba(0, 0, 0, 0.5);

  --font-title    : 'Cormorant Garamond', serif;
  --font-body     : 'Jost', sans-serif;

  --sat : env(safe-area-inset-top,    0px);
  --sab : env(safe-area-inset-bottom, 0px);
}

/* =========================================================
   RESET
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; outline: none; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family  : var(--font-body);
  font-weight  : 300;
  color        : var(--creme);
  line-height  : 1.6;
  overflow-x   : hidden;
  min-height   : 100dvh;
  background   : #0d1a0f;
  position     : relative;
  -webkit-font-smoothing: antialiased;
}
button { font-family: var(--font-body); cursor: pointer; }
input  { font-family: var(--font-body); }

/* =========================================================
   FUNDO: FLORESTA DESFOCADA
   ========================================================= */
body::before {
  content   : '';
  position  : fixed;
  inset     : 0;
  background: url('https://images.unsplash.com/photo-1448375240586-882707db888b?w=1920&q=80') center/cover no-repeat;
  filter    : blur(4px) brightness(0.45);
  transform : scale(1.06); /* evita borda branca do blur */
  z-index   : -1;
}

/* =========================================================
   DECORAÇÃO: ESTRELA (sparkle)
   ========================================================= */
.sparkle-deco {
  position  : fixed;
  bottom    : calc(28px + var(--sab));
  right     : 24px;
  font-size : 32px;
  color     : var(--ouro);
  opacity   : 0.5;
  pointer-events: none;
  z-index   : 10;
  animation : pulsarEstrela 3s ease-in-out infinite;
  text-shadow: 0 0 16px rgba(207,176,105,0.6);
}
@keyframes pulsarEstrela {
  0%,100% { transform: scale(1) rotate(0deg); opacity: 0.4; }
  50%      { transform: scale(1.2) rotate(15deg); opacity: 0.8; }
}

/* =========================================================
   CONTAINER PRINCIPAL
   ========================================================= */
.app-container {
  max-width : 620px;
  margin    : 0 auto;
  padding   : calc(20px + var(--sat)) 20px calc(28px + var(--sab));
  min-height: 100dvh;
}

/* =========================================================
   HEADER
   ========================================================= */
.app-header {
  text-align   : center;
  margin-bottom: 24px;
  padding      : 10px 0;
}
.book-title {
  font-family : var(--font-title);
  font-size   : clamp(28px, 7vw, 40px);
  color       : var(--ouro);
  font-weight : 700;
  letter-spacing: 2.5px;
  line-height : 1.1;
  margin-bottom: 6px;
}
.book-subtitle {
  font-size : 13px;
  opacity   : 0.75;
  max-width : 85%;
  margin    : 0 auto;
}
.header-divider {
  width : 50px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ouro), transparent);
  margin: 14px auto;
}
.app-author {
  font-size     : 10px;
  opacity       : 0.55;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

/* =========================================================
   CONTROLE DE TELAS
   ========================================================= */
.tela { display: none; }
.tela.ativo { display: block; }
.fade-in { animation: fadeIn 0.55s ease both; }
@keyframes fadeIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

/* =========================================================
   GLASS PANEL BASE
   ========================================================= */
.glass-panel {
  background    : var(--glass-bg);
  border        : 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius : 20px;
  padding       : 28px;
  box-shadow    : var(--sombra);
  margin-bottom : 20px;
}
.panel-title {
  font-family  : var(--font-title);
  font-size    : 26px;
  color        : var(--creme);
  margin-bottom: 5px;
  font-weight  : 600;
}
.panel-subtitle {
  font-size    : 14px;
  opacity      : 0.7;
  margin-bottom: 22px;
  line-height  : 1.55;
}

/* =========================================================
   TELA 0: CAPA
   ========================================================= */
.capa-panel { padding: 0; overflow: hidden; }
.capa-img-container {
  width    : 100%;
  /* Aspect ratio próximo ao retrato da Jacqueline (≈2:3) */
  aspect-ratio: 4 / 3;
  max-height: 380px;
  overflow : hidden;
  position : relative;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(160deg, #1a2a1a 0%, #2a1a10 100%);
  display  : flex;
  align-items: center;
  justify-content: center;
}
.capa-img {
  width : 100%;
  height: 100%;
  object-fit    : contain;      /* ← mostra a foto inteira sem corte */
  object-position: center bottom;
  opacity: 0.95;
  filter : brightness(0.95) contrast(1.05);
}
.capa-img-overlay {
  position  : absolute;
  inset     : 0;
  background:
    linear-gradient(to bottom, transparent 55%, rgba(18,30,50,0.92) 100%),
    linear-gradient(to right,  rgba(18,30,50,0.25) 0%, transparent 40%, transparent 60%, rgba(18,30,50,0.25) 100%);
  pointer-events: none;
}
.capa-body {
  padding: 22px 26px 28px;
}
.capa-desc { margin-bottom: 14px; }
.capa-lista {
  list-style  : none;
  margin-bottom: 16px;
  display     : flex;
  flex-direction: column;
  gap         : 8px;
}
.capa-lista li {
  font-size  : 14px;
  opacity    : 0.85;
  padding-left: 20px;
  position   : relative;
}
.capa-lista li::before {
  content  : '—';
  position : absolute;
  left     : 0;
  color    : var(--ouro);
  font-size: 12px;
}
.capa-igv-info {
  font-size    : 14px;
  text-align   : center;
  margin-bottom: 18px;
  opacity      : 0.8;
  line-height  : 1.6;
}
.capa-igv-info strong { color: var(--ouro); }

/* =========================================================
   TELA 1: IDENTIFICAÇÃO — Foto banner + form 2 colunas
   ========================================================= */
.ident-panel { padding: 0; overflow: hidden; }

.ident-photo-banner {
  width    : 100%;
  aspect-ratio: 16 / 9;
  max-height: 280px;
  overflow : hidden;
  position : relative;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(160deg, #1a2a1a 0%, #2a1a10 100%);
  display  : flex;
  align-items: center;
  justify-content: center;
}
.ident-photo {
  width : 100%;
  height: 100%;
  object-fit    : contain;
  object-position: center bottom;
  filter: brightness(0.92) contrast(1.05);
}
.ident-photo-overlay {
  position  : absolute;
  inset     : 0;
  background:
    linear-gradient(to bottom, rgba(18,30,50,0.05) 0%, rgba(18,30,50,0.7) 100%),
    linear-gradient(to right,  rgba(18,30,50,0.3) 0%, transparent 35%, transparent 65%, rgba(18,30,50,0.3) 100%);
  pointer-events: none;
}

.ident-content { padding: 24px 28px 30px; }

/* Grid 2 colunas para o formulário */
.form-grid {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 12px;
  margin-bottom        : 6px;
}
@media (max-width: 480px) {
  .form-grid { grid-template-columns: 1fr; }
  .ident-photo-banner { max-height: 200px; }
}

.campo-grupo { margin-bottom: 0; }
.campo-label {
  font-size     : 10px;
  color         : var(--ouro);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom : 5px;
  display       : block;
  opacity       : 0.85;
}
.campo-input {
  width     : 100%;
  background: rgba(255,255,255,0.05);
  border    : 1px solid rgba(255,255,255,0.1);
  color     : var(--creme);
  padding   : 13px 14px;
  border-radius: 10px;
  font-size : 14px;
  transition: all 0.3s;
  -webkit-appearance: none;
}
.campo-input::placeholder { color: rgba(248,242,227,0.35); }
.campo-input:focus { border-color: var(--ouro); background: rgba(255,255,255,0.08); }
.campo-input[type="date"]::-webkit-datetime-edit { color: var(--creme); }
.campo-input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.3); cursor: pointer;
}

/* LGPD */
.lgpd-container {
  display    : flex;
  align-items: flex-start;
  gap        : 10px;
  margin     : 18px 0 6px;
}
.lgpd-check {
  margin-top  : 3px;
  accent-color: var(--terracota);
  width : 17px;
  height: 17px;
  flex-shrink : 0;
}
.lgpd-label { font-size: 11px; opacity: 0.65; line-height: 1.5; }

/* Erro inline (substitui alert) */
.campo-erro-inline {
  font-size    : 12px;
  color        : var(--terracota);
  min-height   : 18px;
  margin-bottom: 10px;
  padding      : 0 2px;
  animation    : shake 0.3s ease;
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX( 4px); }
}

/* =========================================================
   BOTÕES
   ========================================================= */
.btn-premium {
  width         : 100%;
  background    : var(--terracota);
  color         : #fff;
  border        : none;
  padding       : 16px;
  border-radius : 10px;
  font-size     : 14px;
  font-weight   : 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  transition    : all 0.3s;
  min-height    : 52px;
  -webkit-tap-highlight-color: transparent;
}
.btn-premium:hover { background: #a36952; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(190,124,98,0.3); }
.btn-premium:active { transform: scale(0.98); }

.btn-outline {
  background: transparent;
  border    : 1px solid var(--ouro);
  color     : var(--ouro);
  margin-top: 10px;
}
.btn-outline:hover { background: var(--ouro); color: var(--azul-profundo); }

.btn-outline-sutil {
  background: transparent;
  border    : 1px solid rgba(255,255,255,0.15);
  color     : rgba(248,242,227,0.4);
  margin-top: 10px;
}
.btn-outline-sutil:hover { color: rgba(248,242,227,0.75); border-color: rgba(255,255,255,0.3); }

/* =========================================================
   TELA 2: PERGUNTAS
   ========================================================= */
.progresso-header {
  position     : sticky;
  top          : 0;
  background   : rgba(13,26,16,0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding      : calc(16px + var(--sat)) 0 14px;
  z-index      : 100;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--glass-border);
}
.progresso-bar-bg {
  background   : rgba(255,255,255,0.08);
  border-radius: 10px;
  height       : 6px;
  width        : 100%;
  margin-bottom: 10px;
  position     : relative;
}
.progresso-bar-fill {
  background   : linear-gradient(90deg, var(--terracota), var(--ouro));
  height       : 100%;
  width        : 0%;
  border-radius: 10px;
  transition   : width 0.5s cubic-bezier(0.22,1,0.36,1);
  position     : relative;
}
.icone-folha {
  position : absolute;
  right    : -11px;
  top      : 50%;
  transform: translateY(-50%);
  width    : 22px;
  height   : 22px;
  color    : var(--verde-organic);
  filter   : drop-shadow(0 2px 5px rgba(124,179,66,0.6));
}
.progresso-texto {
  font-size     : 10px;
  color         : var(--ouro);
  text-transform: uppercase;
  letter-spacing: 2px;
  display       : block;
  text-align    : center;
  font-weight   : 600;
}

/* Badge do bloco */
.bloco-badge-container { text-align: center; margin-bottom: 14px; }
.bloco-badge {
  display       : inline-block;
  background    : rgba(207,176,105,0.12);
  color         : var(--ouro);
  border        : 1px solid rgba(207,176,105,0.4);
  padding       : 5px 14px;
  border-radius : 20px;
  font-size     : 10px;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Card da pergunta */
.card-pergunta {
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity   : 1;
  transform : translateX(0);
}
.card-pergunta.saindo { opacity: 0; transform: translateX(-20px); }
.card-pergunta.entrando { opacity: 0; transform: translateX(20px); animation: deslizar 0.4s forwards; }
@keyframes deslizar { to { opacity: 1; transform: translateX(0); } }

.imagem-tema-container {
  width        : 100%;
  height       : 130px;
  border-radius: 12px;
  overflow     : hidden;
  margin-bottom: 22px;
  border       : 1px solid rgba(255,255,255,0.05);
}
.imagem-tema {
  width : 100%;
  height: 100%;
  object-fit: cover;
  opacity   : 0.8;
  transition: opacity 0.3s;
}

.pergunta-texto {
  font-size    : clamp(17px, 4vw, 20px);
  color        : var(--creme);
  margin-bottom: 22px;
  text-align   : center;
  font-family  : var(--font-title);
  line-height  : 1.4;
}

.btn-resposta {
  background   : rgba(255,255,255,0.04);
  border       : 1px solid var(--glass-border);
  color        : var(--creme);
  padding      : 13px 18px;
  border-radius: 10px;
  font-size    : 14px;
  text-align   : left;
  display      : flex;
  align-items  : center;
  width        : 100%;
  transition   : all 0.2s;
  min-height   : 50px;
  -webkit-tap-highlight-color: transparent;
}
.btn-resposta:hover, .btn-resposta:focus-visible {
  background  : rgba(207,176,105,0.14);
  border-color: var(--ouro);
}
.btn-resposta:active { transform: scale(0.98); }
.btn-resposta-num { color: var(--ouro); font-weight: 700; margin-right: 14px; font-size: 15px; }

/* =========================================================
   TELA 3: INSTRUÇÕES
   ========================================================= */
.instrucoes-box {
  background   : rgba(207,176,105,0.05);
  border-left  : 3px solid var(--ouro);
  border-radius: 10px;
  padding      : 18px 20px;
  margin-bottom: 22px;
}
.instrucoes-titulo {
  font-family  : var(--font-title);
  color        : var(--ouro);
  font-size    : 19px;
  margin-bottom: 12px;
}
.instrucoes-lista {
  list-style-position: inside;
  font-size: 13px;
  opacity  : 0.9;
  line-height: 1.65;
}
.instrucoes-lista li { margin-bottom: 8px; }
.instrucoes-lista li:last-child { margin-bottom: 0; }

/* =========================================================
   TELA 4: RESULTADO
   ========================================================= */
.result-header { text-align: center; margin-bottom: 20px; }
.igv-display {
  background   : rgba(207,176,105,0.06);
  border       : 1px solid var(--ouro);
  border-radius: 50%;
  width : 170px;
  height: 170px;
  margin: 10px auto 18px;
  display     : flex;
  flex-direction: column;
  align-items : center;
  justify-content: center;
  box-shadow  : 0 0 30px rgba(207,176,105,0.15);
}
.igv-numero { font-family: var(--font-title); font-size: 52px; color: var(--ouro); font-weight: 700; line-height: 1; }
.igv-texto  { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; margin-top: 5px; }
.igv-descricao { font-size: 14px; max-width: 88%; margin: 0 auto; line-height: 1.55; opacity: 0.9; }

.panel-chart { margin-bottom: 20px; padding: 20px; }
.chart-container { position: relative; width: 100%; }
.panel-blocos { margin-bottom: 20px; padding: 22px; }
.blocos-titulo { font-family: var(--font-title); color: var(--ouro); font-size: 22px; margin-bottom: 6px; text-align: center; }
.blocos-subtitulo { font-size: 12px; text-align: center; margin-bottom: 20px; opacity: 0.7; }

.detalhe-bloco-item {
  margin-bottom : 18px;
  padding-bottom: 14px;
  border-bottom : 1px solid rgba(255,255,255,0.05);
}
.detalhe-bloco-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.bloco-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.bloco-nome   { font-size: 13px; font-weight: 600; }
.bloco-perc   { font-size: 14px; font-weight: 700; color: var(--ouro); }
.mini-bar-bg  { width: 100%; height: 4px; background: rgba(255,255,255,0.08); border-radius: 5px; margin-bottom: 8px; overflow: hidden; }
.mini-bar-fill { height: 100%; border-radius: 5px; transition: width 0.8s ease-out; }
.bloco-livro  { font-size: 11px; color: var(--ouro); text-transform: uppercase; letter-spacing: 1px; opacity: 0.85; }

/* Ações do resultado */
.acoes-resultado {
  display       : flex;
  flex-direction: column;
  gap           : 0;
  margin-top    : 20px;
  padding-bottom: calc(20px + var(--sab));
}

/* Loading + spinner */
.loading-db {
  display    : none;
  align-items: center;
  gap        : 10px;
  background : rgba(207,176,105,0.07);
  border     : 1px solid rgba(207,176,105,0.2);
  border-radius: 10px;
  padding    : 12px 16px;
  margin-bottom: 14px;
}
.loading-db.visivel { display: flex; }
.spinner {
  width : 16px;
  height: 16px;
  border: 2px solid rgba(207,176,105,0.2);
  border-top-color: var(--ouro);
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes girar { to { transform: rotate(360deg); } }
.loading-db span { font-size: 12px; color: rgba(248,242,227,0.55); }

/* =========================================================
   IDENTIDADE DO LIVRO — "A Coragem de Ser Gente de Verdade"
   ========================================================= */

/* Faixa decorativa do livro (flores + azul) no topo da capa */
.livro-faixa {
  background    : linear-gradient(135deg, var(--azul-livro) 0%, var(--azul-livro-dk) 100%);
  border-radius : 10px;
  padding       : 14px 18px;
  margin-bottom : 18px;
  display       : flex;
  align-items   : center;
  gap           : 12px;
  border        : 1px solid rgba(255,255,255,0.15);
  box-shadow    : 0 4px 16px rgba(59,91,165,0.35);
}
.livro-faixa-flores { font-size: 22px; line-height: 1; flex-shrink: 0; }
.livro-faixa-texto  { flex: 1; }
.livro-faixa-titulo {
  font-family   : var(--font-title);
  font-size     : 14px;
  font-weight   : 600;
  color         : #fff;
  line-height   : 1.25;
  margin-bottom : 2px;
}
.livro-faixa-sub {
  font-size : 10px;
  color     : rgba(255,255,255,0.65);
  letter-spacing: 0.5px;
  line-height: 1.3;
}
.livro-faixa-editora {
  font-size    : 9px;
  color        : rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  flex-shrink  : 0;
  text-align   : right;
}

/* Card "O que você encontrará" inspirado no verso do livro */
.livro-encontre {
  background   : rgba(59,91,165,0.08);
  border       : 1px solid rgba(59,91,165,0.3);
  border-radius: 12px;
  padding      : 16px 18px;
  margin-bottom: 18px;
}
.livro-encontre-titulo {
  font-size     : 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color         : var(--azul-livro);
  font-weight   : 600;
  margin-bottom : 10px;
  display       : flex;
  align-items   : center;
  gap           : 6px;
}
.livro-encontre-lista {
  list-style: none;
  display   : flex;
  flex-direction: column;
  gap       : 7px;
}
.livro-encontre-lista li {
  font-size   : 12px;
  opacity     : 0.8;
  padding-left: 18px;
  position    : relative;
  line-height : 1.45;
}
.livro-encontre-lista li::before {
  content  : '✦';
  position : absolute;
  left     : 0;
  color    : var(--ouro);
  font-size: 8px;
  top      : 3px;
}

/* Tag de capítulo do livro — enriquecida */
.bloco-livro {
  font-size    : 11px;
  color        : var(--ouro);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity      : 0.85;
  display      : flex;
  align-items  : center;
  gap          : 6px;
  flex-wrap    : wrap;
}
.bloco-livro-badge {
  display       : inline-flex;
  align-items   : center;
  gap           : 4px;
  background    : rgba(59,91,165,0.2);
  border        : 1px solid rgba(59,91,165,0.45);
  border-radius : 20px;
  padding       : 2px 9px;
  font-size     : 9px;
  font-weight   : 600;
  color         : #8EB4FF;
  letter-spacing: 0.5px;
}

/* Seção "Sobre o Livro" na tela de instruções */
.sobre-livro-card {
  background    : rgba(59,91,165,0.07);
  border        : 1px solid rgba(59,91,165,0.25);
  border-radius : 14px;
  padding       : 18px;
  margin-bottom : 20px;
  display       : flex;
  gap           : 16px;
  align-items   : flex-start;
}
.livro-capa-mini {
  width        : 66px;
  flex-shrink  : 0;
  border-radius: 6px;
  overflow     : hidden;
  box-shadow   : 0 4px 14px rgba(0,0,0,0.4);
}
.livro-capa-mini-inner {
  background    : linear-gradient(160deg, #3B5BA5 0%, #2a4282 100%);
  width         : 100%;
  padding       : 8px 6px;
  border-radius : 6px;
  text-align    : center;
  position      : relative;
  overflow      : hidden;
}
.livro-capa-mini-flores {
  font-size   : 18px;
  line-height : 1;
  display     : block;
  margin-bottom: 4px;
}
.livro-capa-mini-titulo {
  font-family : var(--font-title);
  font-size   : 8px;
  font-weight : 700;
  color       : #fff;
  line-height : 1.2;
  text-align  : center;
}
.sobre-livro-texto { flex: 1; }
.sobre-livro-texto h4 {
  font-family  : var(--font-title);
  font-size    : 15px;
  color        : var(--ouro);
  margin-bottom: 6px;
  font-weight  : 600;
}
.sobre-livro-texto p {
  font-size : 12px;
  opacity   : 0.75;
  line-height: 1.6;
}

/* Decoração flores CSS (exibida na tela de resultado) */
.flores-resultado {
  text-align  : center;
  font-size   : 22px;
  letter-spacing: 6px;
  margin-bottom: 10px;
  opacity     : 0.75;
  animation   : florescerFlores 1s ease both;
}
@keyframes florescerFlores {
  from { opacity: 0; transform: translateY(-6px) scale(0.9); }
  to   { opacity: 0.75; transform: translateY(0) scale(1); }
}

/* Faixa azul do livro na tela de resultado */
.resultado-livro-faixa {
  background    : linear-gradient(135deg, var(--azul-livro) 0%, var(--azul-livro-dk) 100%);
  border-radius : 12px;
  padding       : 16px 20px;
  text-align    : center;
  margin-bottom : 0;
}
.resultado-livro-faixa p {
  font-size   : 13px;
  color       : rgba(255,255,255,0.85);
  line-height : 1.6;
  margin-bottom: 8px;
}
.resultado-livro-faixa strong { color: #fff; }
.resultado-livro-link {
  display       : inline-block;
  font-size     : 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color         : rgba(255,255,255,0.6);
  border-bottom : 1px solid rgba(255,255,255,0.3);
  padding-bottom: 1px;
}

/* =========================================================
   TELA 5: EVOLUÇÃO
   ========================================================= */
.evolucao-header-panel { margin-bottom: 20px; }
.ev-header-content { margin-bottom: 20px; }
.ev-selo {
  display       : inline-block;
  font-size     : 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color         : var(--ouro);
  border        : 1px solid rgba(207,176,105,0.35);
  border-radius : 20px;
  padding       : 4px 12px;
  margin-bottom : 12px;
  opacity       : 0.9;
}
.stats-bar {
  display : flex;
  gap     : 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 18px;
}
.stat-item { flex: 1; text-align: center; position: relative; padding: 8px 10px; }
.stat-item + .stat-item::before {
  content   : '';
  position  : absolute;
  left      : 0;
  top: 15%; bottom: 15%;
  width     : 1px;
  background: rgba(255,255,255,0.07);
}
.stat-numero { font-family: var(--font-title); font-size: 28px; font-weight: 300; color: var(--ouro); line-height: 1; margin-bottom: 4px; }
.stat-label  { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: rgba(248,242,227,0.4); }

.ev-chart-titulo { font-family: var(--font-title); font-size: 19px; color: var(--ouro); margin-bottom: 4px; }
.ev-chart-sub { font-size: 11px; color: rgba(248,242,227,0.4); margin-bottom: 16px; }
.dimensoes-legenda {
  display  : flex;
  flex-wrap: wrap;
  gap      : 10px;
  margin-top: 14px;
}
.legenda-item { display: flex; align-items: center; gap: 6px; font-size: 11px; opacity: 0.7; }
.legenda-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.evolucao-vazia { text-align: center; padding: 36px 24px; }

.ev-timeline-titulo {
  font-family  : var(--font-title);
  font-size    : 18px;
  color        : var(--ouro);
  margin-bottom: 14px;
  padding-left : 4px;
}

/* Card da timeline */
.timeline-card {
  background  : var(--glass-bg);
  border      : 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: 14px;
  padding     : 16px 18px;
  display     : grid;
  grid-template-columns: auto 1fr;
  gap         : 14px;
  align-items : center;
  transition  : border-color 0.2s;
}
.timeline-card.atual { border-color: rgba(207,176,105,0.45); }
.timeline-card:hover  { border-color: rgba(207,176,105,0.3); }

.timeline-data { display: flex; flex-direction: column; align-items: center; min-width: 42px; }
.timeline-dia  { font-family: var(--font-title); font-size: 24px; font-weight: 300; color: var(--ouro); line-height: 1; }
.timeline-mes  { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: rgba(207,176,105,0.6); }
.timeline-ano  { font-size: 9px; color: rgba(248,242,227,0.25); margin-top: 2px; }

.mini-barra-wrap { display: flex; flex-direction: column; gap: 5px; }
.mini-barra-row  { display: flex; align-items: center; gap: 7px; }
.mini-barra-nome { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: rgba(248,242,227,0.35); width: 68px; flex-shrink: 0; }
.mini-barra-track { flex: 1; height: 4px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
.mini-barra-fill-ev { height: 100%; border-radius: 4px; transition: width 0.6s cubic-bezier(0.22,1,0.36,1); }
.mini-barra-val  { font-size: 9px; color: rgba(248,242,227,0.4); width: 26px; text-align: right; flex-shrink: 0; }

.tag-atual {
  font-size     : 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background    : rgba(207,176,105,0.12);
  color         : var(--ouro);
  border        : 1px solid rgba(207,176,105,0.3);
  border-radius : 20px;
  padding       : 2px 7px;
  margin-left   : 7px;
}
.timeline-barras-titulo { font-size: 10px; color: rgba(248,242,227,0.4); margin-bottom: 8px; }

/* =========================================================
   PWA: INSTALL BANNER
   ========================================================= */
#install-banner {
  display  : none;
  position : fixed;
  bottom   : calc(24px + var(--sab));
  left     : 50%;
  transform: translateX(-50%);
  background: rgba(22,33,54,0.96);
  border   : 1px solid var(--ouro);
  border-radius: 14px;
  padding  : 14px 18px;
  width    : min(340px, calc(100vw - 36px));
  z-index  : 9999;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  align-items: center;
  gap      : 14px;
  animation: slideUp 0.4s cubic-bezier(0.22,1,0.36,1) both;
}
#install-banner.visivel { display: flex; }
@keyframes slideUp {
  from { opacity:0; transform: translateX(-50%) translateY(20px); }
  to   { opacity:1; transform: translateX(-50%) translateY(0); }
}
.install-texto { flex: 1; }
.install-texto strong { display: block; font-size: 13px; color: var(--creme); margin-bottom: 2px; }
.install-texto span   { font-size: 11px; color: rgba(207,176,105,0.8); }
.install-btns { display: flex; gap: 8px; flex-shrink: 0; }
.btn-install {
  background: var(--ouro); color: var(--azul-profundo);
  border: none; padding: 8px 14px; font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; border-radius: 8px;
  cursor: pointer; min-height: 36px; transition: opacity 0.2s;
}
.btn-install:active { opacity: 0.8; }
.btn-dismiss {
  background: transparent; border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.4); padding: 8px 10px; font-size: 12px;
  border-radius: 8px; cursor: pointer; min-height: 36px;
}

/* =========================================================
   TOAST
   ========================================================= */
#toast {
  position : fixed;
  bottom   : calc(80px + var(--sab));
  left     : 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(22,33,54,0.95);
  color    : rgba(207,176,105,0.9);
  border   : 1px solid var(--ouro);
  border-radius: 10px;
  padding  : 11px 20px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  opacity  : 0;
  transition: opacity 0.3s, transform 0.3s;
  z-index  : 8000;
  backdrop-filter: blur(10px);
}
#toast.visivel { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (min-width: 500px) {
  .capa-img-container  { height: 340px; }
  .ident-photo-banner  { height: 320px; }
}
@media (max-width: 360px) {
  .book-title     { font-size: 24px; }
  .glass-panel    { padding: 20px; }
  .ident-content  { padding: 18px 18px 22px; }
  .capa-body      { padding: 18px 18px 22px; }
}

/* =========================================================
   TELA TERMOS DE CIÊNCIA
   ========================================================= */
.termos-panel { padding: 0; overflow: hidden; }

.termos-header {
  text-align   : center;
  padding      : 28px 28px 20px;
  border-bottom: 1px solid var(--glass-border);
}
.termos-icone   { font-size: 30px; margin-bottom: 12px; display: block; }
.termos-titulo  { font-size: 24px; margin-bottom: 6px; }
.termos-sub     { margin-bottom: 0; font-size: 13px; }

/* Caixa de scroll */
.termos-scroll-box {
  max-height    : 42vh;
  overflow-y    : auto;
  padding       : 20px 24px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(207,176,105,0.3) transparent;
}
.termos-scroll-box::-webkit-scrollbar       { width: 4px; }
.termos-scroll-box::-webkit-scrollbar-track { background: transparent; }
.termos-scroll-box::-webkit-scrollbar-thumb { background: rgba(207,176,105,0.3); border-radius: 4px; }

.termos-secao-titulo {
  font-size     : 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color         : var(--ouro);
  font-weight   : 600;
  margin-bottom : 12px;
}

.termos-intro {
  font-size    : 13px;
  color        : rgba(248,242,227,0.7);
  margin-bottom: 16px;
  line-height  : 1.6;
}

.termos-item {
  display       : flex;
  gap           : 14px;
  align-items   : flex-start;
  margin-bottom : 16px;
  padding-bottom: 16px;
  border-bottom : 1px solid rgba(255,255,255,0.05);
}
.termos-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.termos-item-destaque {
  background   : rgba(207,176,105,0.05);
  border       : 1px solid rgba(207,176,105,0.2) !important;
  border-radius: 10px;
  padding      : 14px !important;
}
.termos-item-destaque .termos-item-num {
  background: rgba(207,176,105,0.2);
  color     : var(--ouro);
}

.termos-item-num {
  flex-shrink    : 0;
  width          : 26px;
  height         : 26px;
  background     : rgba(255,255,255,0.07);
  border-radius  : 50%;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 11px;
  font-weight    : 600;
  color          : rgba(248,242,227,0.6);
  margin-top     : 1px;
}

.termos-item-corpo {
  flex      : 1;
  font-size : 13px;
  line-height: 1.65;
  color     : rgba(248,242,227,0.8);
}
.termos-item-titulo {
  display      : block;
  color        : var(--creme);
  font-weight  : 600;
  margin-bottom: 4px;
  font-size    : 13px;
}

/* Aceite */
.termos-aceite-wrap {
  padding   : 18px 24px 8px;
  border-top: 1px solid var(--glass-border);
}
.termos-aceite-label {
  display    : flex;
  align-items: flex-start;
  gap        : 12px;
  cursor     : pointer;
  user-select: none;
}
.termos-check { position: absolute; opacity: 0; width: 0; height: 0; }

.termos-aceite-custom {
  flex-shrink    : 0;
  width          : 20px;
  height         : 20px;
  border         : 2px solid rgba(207,176,105,0.4);
  border-radius  : 5px;
  margin-top     : 1px;
  transition     : all 0.2s;
  display        : flex;
  align-items    : center;
  justify-content: center;
  background     : transparent;
}
.termos-aceite-custom::after {
  content   : '✓';
  font-size : 13px;
  color     : var(--ouro);
  transform : scale(0);
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.termos-check:checked ~ .termos-aceite-custom {
  background  : rgba(207,176,105,0.15);
  border-color: var(--ouro);
}
.termos-check:checked ~ .termos-aceite-custom::after { transform: scale(1); }

.termos-aceite-texto {
  font-size  : 13px;
  line-height: 1.55;
  color      : rgba(248,242,227,0.75);
}

/* Botão aceitar — desabilitado até marcar checkbox */
#btn-aceitar-termos {
  margin: 6px 24px 24px;
  width : calc(100% - 48px);
}
#btn-aceitar-termos:disabled {
  opacity       : 0.35;
  cursor        : not-allowed;
  pointer-events: none;
  transform     : none !important;
}