:root{
  --ink:#111; --muted:#666; --border:#ddd; --accent:#1d3973;
  --bg:#fff; --btn:#1d3973; --btnText:#fff; --btnDisabled:#a7b0c3;
  --bar:#1d3973; --barBg:#eef1f6; --card:#fafafa; --radius:12px;
  --warn:#B71C1C; --timerBg:#FEECEC; --multi:#845400; --multiBg:#FFF7E6; --multiBorder:#FFE1A6;
  --overlayBg:#ffffff; /* opaco para que NO se vea nada por debajo */
}
html,body{height:100%; background:var(--bg); color:var(--ink); font-family:Arial, Helvetica, sans-serif;}
body.noscroll{overflow:hidden;}
.wrap{max-width:760px; margin:40px auto; padding:24px;}
.card{border:1px solid var(--border); border-radius:var(--radius); background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.04); overflow:hidden;}
.head{padding:16px 20px; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:12px;}
.head-top{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;}
.brand-wrap{display:flex; align-items:center; gap:10px; flex:1;}
.brand{font-weight:800; letter-spacing:.2px;}
.logo{height:28px; width:auto; display:block;}
@media (max-width:560px){ .logo{height:24px;} }
.timer{
  padding:6px 10px; border-radius:999px; font-weight:700; letter-spacing:.2px;
  background:var(--timerBg); color:var(--warn); border:1px solid #f7c9c9; min-width:96px; text-align:center;
}
.head-progress{display:flex; align-items:center; gap:10px; width:100%;}
.progress-bar{flex:1; height:10px; background:var(--barBg); border-radius:999px; overflow:hidden;}
.progress-bar>span{display:block; height:100%; width:0%; background:var(--bar); transition:width .25s ease;}
.progress-text{min-width:48px; text-align:right; font-size:12px; color:var(--muted);}
@media (max-width:560px){
  .head-progress{flex-direction:column; align-items:flex-start; gap:6px;}
  .progress-text{text-align:left;}
}
@media (min-width:768px){
  .brand{white-space:nowrap;}
}
.body{padding:20px;}
.q-index{font-size:12px; color:var(--muted); margin-bottom:6px;}
.question{font-size:20px; line-height:1.35; margin-bottom:16px; font-weight:600;}
.options{display:grid; gap:10px; margin-top:12px;}
.option{border:1px solid var(--border); background:var(--card); border-radius:10px; padding:12px 14px; display:flex; gap:10px; cursor:pointer; transition:border-color .2s, background .2s, box-shadow .2s;}
.option:hover{border-color:#cfd6e6; background:#fff; box-shadow:0 4px 10px rgba(0,0,0,.04);}
.option input{margin-top:3px; transform:scale(1.1);}
.footer{padding:16px 20px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; background:#fff;}
.btn{appearance:none; border:none; background:var(--btn); color:var(--btnText); padding:15px 20px; border-radius:10px; font-weight:600; cursor:pointer; transition:transform .02s, box-shadow .2s, background .2s, opacity .2s; box-shadow:0 6px 14px rgba(29,57,115,.18);}
.btn.secondary{background:#eef1f6; color:#203255; box-shadow:none;}
.btn:disabled{opacity:.6; cursor:not-allowed; background:var(--btnDisabled); box-shadow:none;}
.btn:active{transform:translateY(1px);}
.result{text-align:center; padding:32px 20px 40px;}
.score{font-size:48px; line-height:1; margin:6px 0 12px; color:var(--accent); font-weight:800; letter-spacing:-.5px;}
.muted{color:var(--muted);}
.summary{margin:22px auto 6px; max-width:640px; text-align:left; border-top:1px solid var(--border); padding-top:16px;}
.summary h3{margin:0 0 10px; font-size:16px;}
.summary .item{padding:10px 0; border-bottom:1px solid var(--border);}
.badge{display:inline-block; font-size:12px; padding:4px 8px; border-radius:999px; background:#eef7ee; color:#1b7a1b; margin-left:8px;}
.badge.bad{background:#fff1f1; color:#a01818;}
.multi-note{margin-top:8px; font-size:12px; color:var(--multi); background:var(--multiBg); border:1px solid var(--multiBorder); border-radius:8px; padding:8px 10px; display:inline-block;}

/* Overlay formulario — ocupa toda la pantalla, fondo blanco opaco */
.overlay{position:fixed; inset:0; background:var(--overlayBg); display:none; align-items:center; justify-content:center; z-index:9999;}
.overlay.open{display:flex;}
.lead{width:min(520px, 92vw); background:#fff; border-radius:16px; border:1px solid var(--border); box-shadow:0 18px 40px rgba(0,0,0,.18); padding:22px;}
.lead h2{margin:0 0 6px; font-size:22px}
.lead p{margin:0 0 16px; color:var(--muted); font-size:14px;}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px;}
.field label{font-size:13px; color:#223;}
.field input[type="text"], .field input[type="tel"], .field select{
  border:1px solid var(--border); border-radius:10px; padding:12px 12px; font-size:15px; outline:none;
}
.field input:focus{border-color:#cfd6e6; box-shadow:0 0 0 3px rgba(29,57,115,.08);}
.field select{background:#fff;}
.field select:focus{border-color:#cfd6e6; box-shadow:0 0 0 3px rgba(29,57,115,.08);}
.phone-group{display:flex; gap:8px;}
.phone-group select{flex:0 0 150px;}
.phone-group input{flex:1;}
.check{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:#223;}
.lead-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:14px;}
.btn.link{background:transparent; color:#203255; box-shadow:none; padding:10px 12px;}
.lead .error{color:#B71C1C; font-size:13px; display:none; margin-top:4px;}
#resultUserName{font-size:14px; font-weight:500; color:var(--muted);}
#resultUserName.has-name{color:#1f2e50;}
#resultUserName .result-lead-name{font-size:24px; font-weight:600; line-height:1.2; display:inline-block;}
#resultUserName .result-lead-label{font-size:14px; font-weight:400; color:var(--muted);}
.blocked-card{width:min(520px,92vw); background:#fff; border-radius:18px; border:1px solid var(--border); box-shadow:0 20px 48px rgba(0,0,0,.22); padding:28px 26px; text-align:center;}
.blocked-card .logo{height:36px; margin:0 auto 18px;}
.blocked-card h2{margin:0 0 14px; font-size:24px; color:#1f2e50;}
.blocked-card p{margin:0 0 10px; font-size:15px; color:#334;}
.blocked-card .blocked-until{font-weight:600; color:#1d3973;}
.blocked-card .blocked-sub{margin-top:18px; font-size:14px; color:#1f2e50; font-weight:600;}
.blocked-card .blocked-cta{display:inline-block; margin-top:16px; text-decoration:none; text-transform:uppercase; letter-spacing:.5px;}
@media (max-width:560px){ .lead-actions{flex-direction:column-reverse} .btn{width:100%;} .btn.link{width:auto; align-self:center;} }