@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

*{margin:0;padding:0;box-sizing:border-box;}

:root{
  --green:#22c55e;--green-dark:#16a34a;
  --red:#fb2c36;--red-dark:#dc2626;
  --dark:#020617;--gray:#64748b;--white:#fff;
}

html,body{
  height:100%;
  font-family:'Inter',system-ui,sans-serif;
  background:var(--white);color:var(--dark);
  font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.quiz-container{
  max-width:448px;
  margin:0 auto;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:20px 20px 0;
}

.etapa{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:16px;
  animation:fadeIn .6s ease-out;
  min-height:calc(100vh - 40px);
  min-height:calc(100dvh - 40px);
  padding-bottom:100px;
}
.etapa.active{display:flex;}
.etapa.scroll-top{justify-content:flex-start;}

@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}
@keyframes pulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.04);}
}

/* TEXT BADGES */
.bg-red{background:var(--red);color:#fff;padding:2px 8px;border-radius:4px;display:inline;font-weight:900;}
.bg-green{background:var(--green);color:#fff;padding:2px 8px;border-radius:4px;display:inline;font-weight:900;}
.bg-yellow{background:#eab308;color:#000;padding:4px 10px;border-radius:4px;display:inline-block;font-weight:800;font-size:14px;}
.bg-dark{background:#000;color:#fff;padding:2px 8px;border-radius:4px;display:inline;font-weight:900;}
.txt-red{color:var(--red);font-weight:900;}
.txt-green{color:var(--green-dark);font-weight:900;}
.txt-blue{color:#1d4ed8;font-weight:900;}
.txt-red-underline{color:var(--red);text-decoration:none;font-weight:900;}
.txt-green-underline{color:var(--green-dark);text-decoration:none;font-weight:900;}

h2{font-size:24px;font-weight:900;line-height:1.2;text-align:center;}
p{text-align:center;}
.text-sm{font-size:14px;}.text-xs{font-size:12px;}
.text-left{text-align:left;}.text-center{text-align:center;}
.font-bold{font-weight:700;}.font-black{font-weight:900;}
.step-label{text-align:center;font-size:14px;font-weight:800;color:var(--green-dark);}
.gift-label{text-align:center;font-size:16px;font-weight:800;color:var(--red);}

/* QUIZ OPTIONS */
.quiz-options{display:flex;flex-direction:column;gap:12px;}
.quiz-option{
  display:flex;align-items:center;gap:12px;
  padding:16px;border:1.5px solid #e2e8f0;border-radius:16px;
  background:#fff;cursor:pointer;transition:all .2s;
  font-size:15px;font-weight:500;text-align:left;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.quiz-option:hover{border-color:var(--green);background:#f0fdf4;}
.quiz-option:active{transform:scale(.98);}
.quiz-option .emoji{font-size:28px;flex-shrink:0;}
.quiz-option .arrow{margin-left:auto;color:#cbd5e1;font-size:20px;}
.quiz-option strong{font-weight:800;}

/* BUTTONS */
.btn-fixed{
  position:fixed;bottom:0;left:0;right:0;z-index:99;
  padding:8px 16px 20px;
  background:linear-gradient(to top,white 60%,transparent);
}
.btn-fixed .btn-inner{max-width:448px;margin:0 auto;}

.btn{
  width:100%;min-height:56px;padding:14px 24px;border:none;border-radius:16px;
  font-family:'Inter',sans-serif;font-size:16px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  transition:all .15s;
}
.btn-red{background:var(--red);color:#fff;box-shadow:0 5px 0 0 #c41e2a;}
.btn-red:active{box-shadow:0 2px 0 0 #c41e2a;transform:translateY(3px);}
.btn-green{background:var(--green);color:#fff;box-shadow:0 5px 0 0 #15803d;animation:pulse 2s infinite;}
.btn-green:active{box-shadow:0 2px 0 0 #15803d;transform:translateY(3px);}
.btn-white{background:#fff;color:var(--dark);border:2px solid #e2e8f0;box-shadow:0 2px 4px rgba(0,0,0,.06);}

/* IMAGES */
.img-full{width:100%;border-radius:16px;display:block;}

/* INFO CARDS */
.info-card{background:#f0fdf4;border:1.5px solid #bbf7d0;border-radius:14px;padding:14px 16px;text-align:left;font-size:14px;}
.info-card strong{color:var(--green-dark);}

/* CHECK LIST */
.check-list{display:flex;flex-direction:column;gap:8px;text-align:left;}
.check-list .item{display:flex;align-items:flex-start;gap:8px;font-size:15px;}
.check-list .icon{flex-shrink:0;font-size:18px;}

/* OFFER BOX */
.offer-box{background:#000;color:#fff;padding:24px 20px;border-radius:16px;text-align:center;}
.offer-box .price-from{font-size:18px;color:#999;}
.offer-box .price-from span{text-decoration:line-through;}
.offer-box .price-now{font-size:36px;font-weight:900;color:var(--green);margin:8px 0;}
.offer-box .installments{font-size:14px;color:#ccc;}

.price-big{font-size:32px;font-weight:900;text-decoration:line-through;color:#94a3b8;text-align:center;}

/* GUARANTEE */
.guarantee-box{display:flex;align-items:center;gap:12px;padding:16px;border:2px solid #bbf7d0;border-radius:16px;background:#f0fdf4;}
.guarantee-box .shield{font-size:40px;flex-shrink:0;}
.guarantee-box p{text-align:left;font-size:14px;}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:8px;}
.faq-item{border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;}
.faq-q{padding:14px 16px;font-weight:700;font-size:15px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;}
.faq-q::after{content:'+';font-size:22px;font-weight:300;transition:transform .3s;}
.faq-item.open .faq-q::after{transform:rotate(45deg);}
.faq-a{padding:0 16px;max-height:0;overflow:hidden;transition:all .3s;font-size:14px;color:var(--gray);}
.faq-item.open .faq-a{padding:0 16px 14px;max-height:500px;}

/* AUDIO */
.audio-box{background:#f1f5f9;border-radius:12px;padding:12px;}
.audio-box audio{width:100%;height:36px;}

/* PROGRESS BAR */
.progress-bar{position:fixed;top:0;left:0;right:0;height:5px;background:#e2e8f0;z-index:100;}
.progress-bar .fill{height:100%;background:var(--green);transition:width .5s;border-radius:0 3px 3px 0;}

.divider{width:60px;height:3px;background:var(--green);border-radius:2px;margin:0 auto;}

.mt-1{margin-top:8px;}.mt-2{margin-top:16px;}.mt-3{margin-top:24px;}
.mb-1{margin-bottom:8px;}.mb-2{margin-bottom:16px;}

@media(max-width:480px){
  .quiz-container{padding:16px 16px 0;}
  h2{font-size:22px;}
  .etapa{gap: 12px;}
  .etapa img.img-full { max-height: 45vh; object-fit: contain; }
  #etapa-14 img.img-full { max-height: 35vh; }
  #etapa-15 img.img-full { max-height: none; }
}