/* ============ QUIZ — Código de Reconexión ============ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
html,body{width:100%;min-height:100vh;min-height:100svh;background:#fff;color:#09090b;overflow-x:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,sans-serif;display:flex;flex-direction:column;align-items:center}

/* ---- progress bar ---- */
.progress-bar-wrap{position:sticky;top:0;z-index:50;width:100%;max-width:28rem;margin:0 auto;padding:12px 16px 0}
.progress-bar{position:relative;height:8px;border-radius:9999px;overflow:hidden;width:100%}
.progress-bar-bg{position:absolute;inset:0;background:#ef4444;opacity:.1}
.progress-bar-fill{position:absolute;top:0;left:0;height:100%;background:#ef4444;border-radius:9999px;transition:width .7s ease}

/* ---- screen wrapper ---- */
.quiz-screen{display:none;flex-direction:column;gap:16px;justify-content:flex-start;padding:12px 12px 40px;min-height:95svh;width:100%;max-width:28rem;margin:0 auto}
.quiz-screen.active{display:flex}

/* ---- text ---- */
.quiz-title{font-size:1.375rem;font-weight:700;text-align:center;line-height:1.35;color:#000;padding:12px 0}
.quiz-text{font-size:1rem;line-height:1.6;color:#000}
.quiz-text strong{font-weight:700}
.quiz-text .red{color:#dc2626}
.quiz-text .green{color:#16a34a}
.quiz-text-lg{font-size:1.125rem}
.quiz-text-center{text-align:center}
.quiz-subtitle{font-size:1rem;text-align:center;color:#000;line-height:1.5}

/* ---- image ---- */
.quiz-img{width:100%;border-radius:8px;overflow:hidden}
.quiz-img img{width:100%;height:auto;display:block;object-fit:cover}
.quiz-img.w65{width:65%;margin:0 auto}
.quiz-img.w80{width:80%;margin:0 auto}
.quiz-img.w60{width:60%;margin:0 auto}
.quiz-img.w30{width:30%;margin:0 auto}

/* ---- spacer ---- */
.spacer-sm{height:1rem}
.spacer-md{height:2rem}
.spacer-lg{height:3rem}

/* ---- alert box (green) ---- */
.alert-green{display:flex;align-items:flex-start;gap:8px;padding:16px;border-radius:8px;border:1px solid #9af3a8;background:#cafcd0;color:#0b6e2d;font-size:.95rem;line-height:1.5}
.alert-green p{color:#000}

/* ---- alert box (warning) ---- */
.alert-warning{display:flex;align-items:flex-start;gap:8px;padding:16px;border-radius:8px;border:1px solid #ffeac7;background:#fff6e6;color:#cf9600;font-size:.95rem;line-height:1.5;text-align:center;font-weight:700}
.alert-warning span{color:#000}

/* ---- option buttons ---- */
.options-wrap{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:2px}
.option-btn{display:flex;align-items:center;gap:12px;padding:12px;min-height:56px;width:100%;text-align:left;cursor:pointer;border:2px solid rgba(239,68,68,.5);border-radius:8px;background:rgba(239,68,68,.1);color:#030712;font-size:1rem;line-height:1.3;font-family:inherit;box-shadow:0 4px 6px -1px rgba(0,0,0,.08),0 2px 4px -2px rgba(0,0,0,.05);transition:border-color .2s,transform .15s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.option-btn:hover{border-color:#ef4444;box-shadow:0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -4px rgba(0,0,0,.05);transform:scale(1.01)}
.option-btn:active{transform:scale(1.02)}
.option-btn.selected{border-color:#ef4444}

/* radio circle */
.option-radio{flex-shrink:0;width:2.5rem;height:2.5rem;border:1px solid #ef4444;border-radius:9999px;background:#fff;display:flex;align-items:center;justify-content:center;position:relative}
.option-radio svg{opacity:0;width:1em;height:1em;color:#ef4444;transition:opacity .2s}
.option-btn.selected .option-radio svg{opacity:1}

/* ---- green CTA button (3D) ---- */
.cta-green-wrap{position:relative;width:100%;max-width:28rem;margin:0 auto;cursor:pointer}
.cta-green{display:block;width:100%;padding:16px 24px;background:#17a34a;color:#fff;font-size:1.05rem;font-weight:700;text-align:center;text-decoration:none;border:none;border-radius:8px;cursor:pointer;font-family:inherit;line-height:1.4;position:relative;z-index:1;box-shadow:0 .5rem 0 0 #0e9542;transition:background .2s,box-shadow .15s,transform .1s}
.cta-green:hover{background:#2eac5c;box-shadow:0 .75rem 0 0 #0e9542;margin-top:-4px}
.cta-green:active{transform:scale(.99);box-shadow:0 .25rem 0 0 #0e9542;margin-top:0}

/* pulse */
@keyframes cta-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
.cta-green.pulse{animation:cta-pulse .8s infinite}

/* ---- loading bars (VSL page) ---- */
.loading-item{padding:4px 0}
.loading-label{display:flex;justify-content:space-between;padding-bottom:4px;font-weight:600;font-size:.875rem}
.loading-track{position:relative;overflow:hidden;background:#ededed;border-radius:12px;height:12px}
.loading-fill{height:100%;border-radius:12px;background:#ef4444;transition:width .05s linear;min-width:1px}

/* ---- footer disclaimer ---- */
.quiz-footer{width:100%;max-width:28rem;margin:0 auto;padding:32px 16px 28px;border-top:1px solid rgba(0,0,0,.06);text-align:center}
.quiz-footer p{font-size:12px;color:#999;line-height:1.6}
.quiz-footer a{color:#999;text-decoration:none}
.quiz-footer a:hover{color:#666}

/* ---- fade transition ---- */
.quiz-screen{opacity:0;transition:opacity .3s ease}
.quiz-screen.active{opacity:1}

/* ---- bullet list inside text ---- */
.quiz-text ul{list-style:none;padding:0;margin:8px 0}
.quiz-text ul li{padding:4px 0 4px 8px}
.quiz-text ul li::before{content:"• ";color:#09090b}
.quiz-text ul li em{font-style:italic}

/* ---- responsive ---- */
@media(max-width:480px){
  .quiz-title{font-size:1.2rem}
  .cta-green{font-size:.95rem;padding:14px 20px}
}


/* ---- Ajustes de layout: preguntas centralizadas ---- */
.quiz-screen.question-screen{
  justify-content:center;
  min-height:calc(100svh - 32px);
  padding-top:20px;
  padding-bottom:48px;
}
.question-block{width:100%;margin:auto 0}
.quiz-title .red,.quiz-text .red,.red{color:#dc2626}
.quiz-title .green,.quiz-text .green,.green{color:#16a34a}
.intro-top{padding-bottom:0}
.intro-promise{font-size:1rem;line-height:1.45}

/* ---- Resultado / autoridade ---- */
.authority-screen{justify-content:flex-start;padding-top:18px;padding-bottom:48px;gap:14px}
.authority-result{font-size:1.2rem;line-height:1.38}
.authority-copy{line-height:1.55}
.authority-copy p{margin:0 0 10px}
.authority-copy h3{font-size:1.05rem;line-height:1.45;margin:8px 0 16px}
.authority-img{width:100%;margin:0 auto;border-radius:14px;overflow:hidden}
.authority-img img{width:100%;height:auto;display:block;object-fit:contain;background:#fff}
.authority-img.testimonial-img{max-width:100%}
.authority-question{margin:6px 0 0}
.authority-question .quiz-title{padding-bottom:8px}
@media(max-width:480px){
  .quiz-screen.question-screen{min-height:calc(100svh - 26px);padding-left:24px;padding-right:24px}
  .authority-result{font-size:1.08rem}
  .authority-screen{padding-left:16px;padding-right:16px}
}