/* Literal-layout adjustments measured from the source screenshots. */
.quiz-container { padding-top:10px; }
#page-wrapper { background:transparent; font-family:Sora; }
.form-modal-og { min-height:350px; padding:15px 25px 20px; border:0; background:transparent; box-shadow:none; backdrop-filter:none; }
.form-container { width:100%; }
.form-content { padding:0; }
.privacy-section { color:#e0e0e0; }
@media (max-width:760px) { .quiz-container { width:100%; padding-top:10px; } .form-modal-og { padding:12px 25px 20px; } }

/* The first viewport follows the measured source geometry, not a generic card layout. */
@media (max-width:480px) {
  .quiz-container { padding-top:10px; }
  .alerta-vibracional { width:350px; max-width:calc(100% - 40px); min-height:40px; margin:16px auto 18px; padding:6px 10px; }
  .alerta-vibracional .alerta-text { font-size:.75rem; }
  .titulo-principal { max-width:350px; margin:0 auto 20px; font-family:Sora,sans-serif; font-size:28px; line-height:1.3; font-weight:700; color:#87ceeb; }
  .subtitulo-principal { max-width:350px; margin:0 auto 5px; font-family:Sora,sans-serif; font-size:17px; line-height:1.4; color:#b0e0e6; }
  .form-modal-og { width:350px; padding:0; }
  .progress-container { width:300px; margin:15px auto 25px; }
  .form-content { padding-top:20px; }
  .sbc1945 { width:300px; margin:0 auto; grid-template-columns:repeat(3,88px); gap:10px; justify-content:center; padding:10px; }
  .bs5829 { width:88px; height:90px; min-height:90px; padding:5px 2px; }
  .bs5829 img { width:45px; height:45px; }
  .bs5829 p { margin:2px 0 0; font-size:13px; }
}

@media (min-width:769px) {
  .quiz-container { width:1062.4375px; }
  .titulo-principal { max-width:none; }
}

/* No desktop o .form-modal-og e flex column com align-items:center, entao no ORIGINAL
   o .form-container encolhe ao conteudo (599px) e o grid de signos fica em 599px.
   A regra `.form-container{width:100%}` acima forcava 1012px aqui, esticando o grid
   ate o teto de 800px e deixando os cards 39% maiores que os do original. */
@media (min-width:769px) { .form-container { width:auto; } }

/* Passo 7 (sexo): o original usa dois .btn-send lado a lado com imagem de 80px.
   Estilos vindos dos inline styles da fonte. */
.sex-row { display:flex; place-content:center; flex-flow:wrap; align-items:center; flex-direction:row; }
.sex-row .btn-send img { height:80px; width:auto; }

/* Telas 5 e 6: a fonte usa .birth-date-month e, no desafio, o grid .row/.col-6 do
   Bootstrap (que este clone nao carrega). Replicado aqui o minimo equivalente. */
.birth-date-month { width:100%; }
.birth-date-list .row { display:flex; flex-wrap:wrap; row-gap:20px; width:100%; margin:0; }
.birth-date-list .col-6 { flex:0 0 50%; max-width:50%; padding:0 5px; box-sizing:border-box; }
.challenge-list { max-width:100%; padding:0; list-style:none; }
.botao-civil img, .botao-desafio img { height:60px; width:auto; }