/* Reset & base */
* { margin:0; padding:0; box-sizing:border-box; }

body{
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background:linear-gradient(135deg,#8B0000 0%,#4A0000 100%);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  color:#333;
}

.container{
  width:100%;
  max-width:980px;              /* mais folga em telas grandes */
  background:#fff;
  border-radius:20px;
  box-shadow:0 20px 40px rgba(0,0,0,.3);
  overflow:hidden;
  position:relative;
}

/* ==== Formulário de Leads ==== */
.lead-form{
  margin-top:clamp(16px,3.5vw,30px);
  padding:clamp(14px,3.8vw,25px);
  background:#f8f9fa;
  border-radius:15px;
  border-left:4px solid #8B0000;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  text-align:left;
}

.lead-form h3{
  color:#333;
  font-size:clamp(1.05rem,2.8vw,1.3rem);
  margin-bottom:20px;
  text-align:center;
  font-weight:700;
}

.lead-form label{
  display:block;
  font-size:.95rem;
  margin:10px 0 6px;
  font-weight:600;
  color:#333;
}

.lead-form input{
  width:100%;
  padding:12px 14px;
  border:2px solid #e9ecef;
  border-radius:10px;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
  font-size:1rem;
  background:#fff;
  color:#333;
}

.lead-form input:focus{
  border-color:#8B0000;
  box-shadow:0 0 0 3px rgba(139,0,0,.15);
}

.lead-form .btn-primary{
  margin-top:18px;
  width:100%;
}

.lead-feedback{
  margin-top:12px;
  font-size:.95rem;
  text-align:center;
  font-weight:500;
}

/* Grid do form (desktop) */
.form-grid{ display:grid; gap:15px; }
@media (min-width:768px){
  .form-grid{ grid-template-columns:repeat(3,1fr); }
}

/* ==== Cabeçalho com imagem (banner responsivo) ==== */
.brand-header{ position:relative; }
.brand-header--image{
  background:none;
  padding:0;
  position:relative;
  overflow:hidden;
  border-top-left-radius:inherit;
  border-top-right-radius:inherit;
  height:clamp(180px,34vw,460px); /* altura fluida */
}
.brand-header--image::before{ content:none; }
.brand-hero-img{
  display:block;
  width:100%;
  height:100%;              /* ocupa todo o header */
  object-fit:cover;         /* corta com elegância sem distorcer */
  object-position:center;   /* ajuste para 'center top' se preferir */
}

/* Títulos do header (se usar versão com texto) */
.brand-title{
  position:relative; z-index:1;
  font-size:1.2rem; font-weight:300; letter-spacing:3px;
  margin-bottom:10px; text-transform:uppercase;
}
.brand-main{
  position:relative; z-index:1;
  font-size:2.5rem; font-weight:700; letter-spacing:2px;
  margin-bottom:5px; text-transform:uppercase;
}
.brand-subtitle{
  position:relative; z-index:1;
  font-size:1rem; font-weight:300; letter-spacing:2px;
  text-transform:uppercase;
}

/* Screens */
.screen{
  display:none;
  padding:clamp(16px,4vw,40px); /* respiro fluido */
  min-height:auto;              /* libera altura para mobile */
}
.screen.active{ display:block; }

/* ==== Tela de Introdução ==== */
.intro-content{ text-align:center; }

.intro-content h1{
  color:#333;
  font-size:clamp(1.4rem,3.5vw,2.5rem);
  margin-bottom:30px;
  font-weight:700;
}

.intro-text{ text-align:left; margin-bottom:40px; }
.intro-text p{
  color:#666;
  font-size:clamp(1rem,2.8vw,1.1rem);
  line-height:1.6;
  margin-bottom:20px;
}

.blocks-info{
  background:#f8f9fa;
  padding:clamp(14px,3.8vw,30px);
  border-radius:15px;
  margin:30px 0;
}
.blocks-info h3{
  color:#333;
  font-size:clamp(1.05rem,2.8vw,1.3rem);
  margin-bottom:20px;
  text-align:center;
}
.block-item{
  margin-bottom:20px;
  padding:clamp(12px,3.4vw,15px);
  background:#fff;
  border-radius:10px;
}
.block-item strong{
  color:#333; display:block; margin-bottom:5px; font-size:1rem;
}
.block-item p{ color:#666; font-size:.8rem; margin:0; }

/* ==== Botões ==== */
.btn-primary,.btn-secondary{
  padding:15px 30px;
  border:none; border-radius:10px;
  font-size:1.1rem; font-weight:600;
  cursor:pointer;
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease, border-color .3s ease;
  text-transform:uppercase; letter-spacing:1px;
}
.btn-primary{
  background:linear-gradient(135deg,#8B0000 0%,#4A0000 100%);
  color:#D4AF37; border:2px solid #D4AF37;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(139,0,0,.3);
  background:linear-gradient(135deg,#A00000 0%,#600000 100%);
}
.btn-secondary{ background:#f8f9fa; color:#333; border:2px solid #e9ecef; }
.btn-secondary:hover{ background:#e9ecef; transform:translateY(-2px); }
.btn-primary:disabled,.btn-secondary:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* ==== Tela do Quiz ==== */
.quiz-header{ margin-bottom:40px; }

.progress-bar{
  width:100%; height:8px; background:#e9ecef;
  border-radius:4px; overflow:hidden; margin-bottom:20px;
}
.progress-fill{
  height:100%;
  background:linear-gradient(135deg,#8B0000 0%,#4A0000 100%);
  width:0%; transition:width .3s ease;
}

.question-counter{ text-align:center; color:#666; font-size:1rem; margin-bottom:10px; }
.block-indicator{ text-align:center; color:#8B0000; font-weight:600; font-size:1.1rem; }

.question-container h2{
  color:#333;
  font-size:clamp(1.05rem,2.8vw,1.4rem);
  line-height:1.5;
  margin-bottom:30px;
  text-align:center;
}

.options-container{
  display:grid;
  gap:clamp(10px,2.8vw,15px);
  margin-bottom:40px;
}

.option-btn{
  display:flex; align-items:flex-start;
  padding:clamp(14px,3.2vw,20px);
  background:#f8f9fa;
  border:2px solid #e9ecef;
  border-radius:15px;
  cursor:pointer;
  transition:transform .3s ease, border-color .3s ease, background .3s ease;
  text-align:left;
  font-size:1rem; line-height:1.5;
}
.option-btn:hover{ background:#e9ecef; border-color:#8B0000; transform:translateY(-2px); }
.option-btn.selected{
  background:linear-gradient(135deg,#8B0000 0%,#4A0000 100%);
  color:#D4AF37; border-color:#8B0000;
}
.option-letter{ font-weight:700; margin-right:15px; min-width:25px; }
.option-text{ flex:1; }

/* Navegação do quiz (empilha no mobile) */
.quiz-navigation{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.quiz-navigation button{ width:100%; }

/* ==== Tela de Resultado ==== */
.result-content{ text-align:center; }

.result-content h1{
  color:#333;
  font-size:clamp(1.4rem,3.5vw,2.5rem);
  margin-bottom:30px;
  font-weight:700;
}

.result-type{ margin-bottom:40px; }

.type-code{
  font-size:clamp(2rem,7vw,4rem);
  font-weight:900;
  color:#8B0000;
  margin-bottom:10px;
  letter-spacing:clamp(2px,.6vw,5px);
}

.type-name{ font-size:clamp(1rem,2.8vw,1.5rem); color:#333; font-weight:600; }

.result-details{ text-align:left; margin-bottom:40px; }

.dimension-result h3{
  color:#333; font-size:clamp(1.05rem,2.8vw,1.3rem);
  margin-bottom:20px; text-align:center;
}

.dimensions-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:15px; margin-bottom:30px;
}

.dimension-item{
  background:#f8f9fa;
  padding:20px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.dimension-value{ font-weight:700; color:#8B0000; font-size:1.1rem; }

.personality-description{
  background:#f8f9fa;
  padding:30px;
  border-radius:15px;
  border-left:4px solid #8B0000;
}
.personality-description h4{
  color:#333;
  font-size:1.2rem;
  margin-bottom:15px;
}
.personality-description p{ color:#666; line-height:1.6; margin-bottom:15px; }
.personality-description ul{ color:#666; padding-left:20px; }
.personality-description li{ margin-bottom:8px; line-height:1.5; }

/* Ações do resultado */
.result-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  justify-content:center;
}
.result-actions button{
  width:100%;
  max-width:none;
}

/* ===== Breakpoints ===== */

/* ≥480px: botões lado a lado quando couber */
@media (min-width:480px){
  .quiz-navigation{ grid-template-columns:repeat(2,1fr); }
  .result-actions{ grid-template-columns:repeat(2,1fr); }
}

/* ≥768px: respiros e grids maiores */
@media (min-width:768px){
  .container{ border-radius:20px; }
  .quiz-navigation{ gap:20px; }
  .result-actions{ gap:20px; }
}

/* Preferência do usuário por menos animação */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* Acessibilidade utilitária */
.visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* Link-CTA como botão de largura total */
.result-actions a.btn-primary{
  display: inline-block;
  width: 100%;
  max-width: none;
  text-align: center;
  text-decoration: none;
}

/* === Deixar "Anterior" menor e menos chamativo que "Próxima" === */

/* Layout: prev compacto + next ocupando o resto */
.quiz-navigation{
  display: grid;                    /* sobrepõe o flex antigo */
  grid-template-columns: auto 1fr;  /* Anterior pequeno | Próxima larga */
  align-items: stretch;
  gap: 12px;
}

/* Botão Anterior: menor, neutro e sem destaque */
#prev-btn.btn-secondary{
  padding: 10px 16px;
  font-size: 0.95rem;
  background: #fafafa;
  color: #666;
  border: 1.5px solid #e5e7eb;
  box-shadow: none;
  transform: none;                  /* não “sobe” no hover */
}

/* Hover/focus suaves para o Anterior */
#prev-btn.btn-secondary:hover,
#prev-btn.btn-secondary:focus{
  background: #f0f2f5;
  border-color: #e5e7eb;
  transform: none;
}

/* Botão Próxima: ligeiramente maior (mantém seu estilo .btn-primary) */
#next-btn.btn-primary{
  padding: 14px 24px;
  font-size: 1.05rem;
}

/* Mobile: empilha os dois (full width) */
@media (max-width: 480px){
  .quiz-navigation{ grid-template-columns: 1fr; }
  #prev-btn, #next-btn{ width: 100%; }
}