*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif;
}

body{
background:#f2f4f8;
color:#222;
}

.topbar{
background:#c62828;
color:#fff;
text-align:center;
padding:15px;
font-size:22px;
font-weight:bold;
letter-spacing:.5px;
}

.container{
max-width:460px;
margin:auto;
padding:18px;
}

.card{
background:#fff;
border-radius:16px;
padding:26px;
box-shadow:0 8px 24px rgba(0,0,0,.08);
margin-top:20px;
animation:fade .35s ease;
}

.hidden{
display:none;
}

@keyframes fade{
from{
opacity:0;
transform:translateY(10px);
}
to{
opacity:1;
transform:translateY(0);
}
}

.badge{
display:inline-block;
background:#ffe9e9;
color:#c62828;
padding:8px 12px;
border-radius:50px;
font-size:13px;
font-weight:bold;
margin-bottom:16px;
}

h1{
font-size:30px;
line-height:1.2;
margin-bottom:14px;
color:#c62828;
text-align:center;
}

h2{
font-size:26px;
line-height:1.3;
margin-bottom:22px;
text-align:center;
color:#222;
}

.desc{
font-size:17px;
line-height:1.5;
text-align:center;
margin-bottom:18px;
color:#444;
}

.main-btn,
.option-btn,
.whatsapp-btn{
width:100%;
border:none;
padding:16px;
border-radius:12px;
font-size:18px;
font-weight:bold;
cursor:pointer;
margin-top:12px;
transition:.2s;
}

.main-btn{
background:#c62828;
color:#fff;
}

.main-btn:hover{
transform:scale(1.02);
}

.option-btn{
background:#eef1f5;
color:#222;
}

.option-btn:hover{
background:#dde4eb;
}

.whatsapp-btn{
background:#25D366;
color:#fff;
}

.whatsapp-btn:hover{
transform:scale(1.02);
}

.small-text{
margin-top:16px;
font-size:14px;
text-align:center;
color:#777;
line-height:1.4;
}

.progress{
width:100%;
height:24px;
background:#ddd;
border-radius:50px;
overflow:hidden;
margin-top:18px;
}

.bar{
height:100%;
width:0%;
background:#43a047;
transition:.3s;
}

.loading-text{
text-align:center;
font-size:22px;
font-weight:bold;
margin-top:14px;
color:#43a047;
}

.success{
font-size:24px;
font-weight:bold;
text-align:center;
color:#2e7d32;
margin-bottom:14px;
line-height:1.3;
}

.footer{
text-align:center;
padding:26px;
font-size:13px;
color:#777;
}

@media(max-width:480px){

.container{
padding:12px;
}

.card{
padding:22px;
}

h1{
font-size:26px;
}

h2{
font-size:23px;
}

}

.hero-img{
width:100%;
border-radius:14px;
margin-bottom:16px;
display:block;
}

.live-box{
background:#fff4f4;
color:#c62828;
font-weight:bold;
padding:10px;
border-radius:10px;
text-align:center;
margin-bottom:16px;
font-size:15px;
}

.comment-box{
margin-top:18px;
background:#f7f8fa;
border-radius:12px;
padding:14px;
}

.comment-box div{
padding:10px 0;
border-bottom:1px solid #e6e6e6;
font-size:14px;
line-height:1.4;
color:#333;
}

.comment-box div:last-child{
border-bottom:none;
}

body{
background:#eef2f7;
}

.main-btn{
font-size:20px;
padding:18px;
box-shadow:0 8px 18px rgba(198,40,40,.25);
animation:pulse 1.4s infinite;
}

@keyframes pulse{
0%{transform:scale(1);}
50%{transform:scale(1.03);}
100%{transform:scale(1);}
}

.card{
border:1px solid #ececec;
box-shadow:0 12px 28px rgba(0,0,0,.08);
}

.live-box{
font-size:16px;
animation:blink 1.2s infinite;
}

@keyframes blink{
0%{opacity:1;}
50%{opacity:.6;}
100%{opacity:1;}
}

.urgent-bar{
background:#fff3cd;
color:#7a5200;
padding:10px;
border-radius:10px;
font-weight:bold;
text-align:center;
margin-bottom:14px;
font-size:14px;
}

.comment-box div strong{
color:#1877f2;
}

.container{
max-width:420px;
padding:10px;
}

.topbar{
font-size:20px;
padding:13px;
position:sticky;
top:0;
z-index:99;
}

.card{
margin-top:12px;
padding:18px;
border-radius:14px;
}

h1{
font-size:24px;
margin-bottom:12px;
}

h2{
font-size:22px;
margin-bottom:16px;
}

.desc{
font-size:16px;
margin-bottom:14px;
}

.main-btn,
.option-btn,
.whatsapp-btn{
padding:17px;
font-size:19px;
border-radius:14px;
}

.hero-img{
border-radius:12px;
max-height:260px;
object-fit:cover;
}

.badge{
width:100%;
text-align:center;
font-size:14px;
}

.small-text{
font-size:13px;
}

.footer{
padding:18px;
font-size:12px;
}

@media(min-width:768px){
body{
background:#dfe6ef;
}
}

.big-btn{
font-size:22px;
padding:20px;
letter-spacing:.4px;
border-radius:16px;
box-shadow:0 12px 24px rgba(198,40,40,.30);
}

.big-btn:hover{
transform:scale(1.02);
}

.card{
overflow:hidden;
}

body{
padding-bottom:8px;
}

.fb-comments{
margin-top:18px;
background:#f0f2f5;
border-radius:12px;
padding:12px;
}

.fb-item{
background:#fff;
border-radius:12px;
padding:10px 12px;
margin-bottom:10px;
font-size:14px;
line-height:1.4;
color:#222;
box-shadow:0 2px 6px rgba(0,0,0,.05);
}

.fb-item:last-child{
margin-bottom:0;
}

.fb-item strong{
color:#1877f2;
display:block;
margin-bottom:4px;
font-size:14px;
}

.notice-box{
background:#fff;
padding:18px;
text-align:center;
border-radius:4px;
box-shadow:0 2px 8px rgba(0,0,0,.08);
font-size:18px;
line-height:1.5;
margin-bottom:14px;
}

.red-title{
color:#e10000;
font-weight:800;
font-size:24px;
}

.question-panel{
background:#fff;
padding:22px;
border-radius:4px;
box-shadow:0 2px 8px rgba(0,0,0,.08);
margin-bottom:18px;
}

.question-count{
text-align:center;
font-size:26px;
font-weight:bold;
margin-bottom:18px;
}

.question-panel h2{
font-size:24px;
text-align:center;
margin-bottom:18px;
line-height:1.4;
}

.question-panel .option-btn{
background:#ff1010;
color:#fff;
border-radius:2px;
font-size:20px;
padding:16px;
margin-top:12px;
box-shadow:0 2px 6px rgba(0,0,0,.15);
}

.fb-title{
text-align:center;
font-weight:bold;
color:#c62828;
margin-bottom:14px;
font-size:20px;
}

.fb-toolbar{
display:flex;
justify-content:space-around;
font-size:14px;
color:#666;
padding-bottom:12px;
border-bottom:1px solid #ddd;
margin-bottom:12px;
}

.fb-item{
background:#fff;
padding:12px;
border-radius:0;
box-shadow:none;
border-bottom:1px solid #eee;
font-size:15px;
line-height:1.45;
}

.fb-item strong{
color:#3b5998;
font-size:15px;
display:block;
margin-bottom:4px;
}

.meta{
font-size:13px;
color:#777;
margin-top:6px;
}

.fb-comments{
background:#fff;
padding:18px;
border-radius:4px;
box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.fb-user{
display:flex;
gap:10px;
padding:12px 0;
border-bottom:1px solid #eee;
align-items:flex-start;
}

.fb-user img{
width:46px;
height:46px;
border-radius:50%;
object-fit:cover;
flex-shrink:0;
}

.fb-text{
flex:1;
font-size:10px;
line-height:1.45;
color:#222;
}

.fb-text strong{
color:#3b5998;
display:block;
margin-bottom:4px;
font-size:10px;
}

.fb-toolbar{
display:flex;
justify-content:space-around;
font-size:14px;
color:#666;
padding:10px 0;
border-bottom:1px solid #ddd;
margin-bottom:8px;
}

.comment-form{
margin-top:18px;
}

.form-title{
font-weight:bold;
margin-bottom:10px;
text-align:center;
}

.comment-form textarea{
width:100%;
height:110px;
border:1px solid #cfd4dc;
padding:10px;
resize:none;
font-size:14px;
margin-bottom:10px;
}

.comment-form button{
background:#4267B2;
color:#fff;
border:none;
padding:10px 20px;
font-size:15px;
cursor:pointer;
border-radius:2px;
display:block;
margin:auto;
}

.fb-comments{
background:#ffffff;
border:1px solid #d8dfea;
border-radius:2px;
padding:14px;
}

.fb-title{
font-size:18px;
font-weight:bold;
color:#3b5998;
margin-bottom:10px;
text-align:left;
}

.fb-toolbar{
display:flex;
justify-content:space-around;
background:#f5f6f7;
padding:10px;
border:1px solid #ddd;
font-size:14px;
margin-bottom:10px;
color:#555;
}

.fb-user{
display:flex;
gap:10px;
padding:12px 0;
border-bottom:1px solid #eee;
}

.fb-user img{
width:42px;
height:42px;
border-radius:50%;
object-fit:cover;
}

.fb-text strong{
color:#3b5998;
font-size:14px;
}

.meta{
font-size:12px;
color:#777;
margin-top:5px;
}

.comment-form{
margin-top:15px;
padding-top:12px;
border-top:1px solid #eee;
}

.comment-form textarea{
width:100%;
height:90px;
border:1px solid #ccd0d5;
padding:10px;
font-size:14px;
margin-bottom:10px;
resize:none;
}

.comment-form button{
background:#4267B2;
color:#fff;
border:none;
padding:9px 18px;
font-size:14px;
cursor:pointer;
border-radius:2px;
}

#thanksMsg{
margin-top:10px;
font-size:14px;
color:#2e7d32;
font-weight:bold;
}

.loading-panel{
text-align:center;
padding:40px 20px;
}

.spinner{
width:70px;
height:70px;
border:7px solid #e5e5e5;
border-top:7px solid #e10000;
border-radius:50%;
margin:0 auto 20px auto;
animation:spin 1s linear infinite;
}

@keyframes spin{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}

.loading-circle-text{
font-size:20px;
font-weight:bold;
color:#444;
line-height:1.4;
}

.topbar{
padding:0;
background:#ffffff;
text-align:center;
}

.top-banner{
width:100%;
max-width:100%;
display:block;
height:auto;
}

body{
font-family:Arial,Helvetica,sans-serif;
background:#f2f2f2;
color:#222;
}

.container{
max-width:520px;
margin:auto;
padding:12px;
}

.card{
background:#fff;
border-radius:18px;
padding:18px;
box-shadow:0 8px 24px rgba(0,0,0,.08);
margin-bottom:16px;
}

h1{
font-size:42px;
line-height:1.1;
font-weight:900;
text-align:center;
color:#c40000;
margin:15px 0;
}

h2{
font-size:34px;
line-height:1.2;
font-weight:800;
text-align:center;
margin:15px 0;
color:#111;
}

.desc{
font-size:22px;
line-height:1.5;
text-align:center;
color:#444;
margin:14px 0;
}

.main-btn,
.option-btn,
.whatsapp-btn{
width:100%;
border:none;
border-radius:14px;
padding:18px;
font-size:28px;
font-weight:800;
cursor:pointer;
margin-top:12px;
transition:.2s;
}

.main-btn,
.option-btn{
background:#d60000;
color:#fff;
box-shadow:0 8px 20px rgba(214,0,0,.25);
}

.whatsapp-btn{
background:#0aa545;
color:#fff;
box-shadow:0 8px 20px rgba(10,165,69,.25);
}

.main-btn:hover,
.option-btn:hover,
.whatsapp-btn:hover{
transform:scale(1.02);
}

.badge,
.urgent-bar,
.notice-box{
font-size:22px;
font-weight:800;
text-align:center;
padding:14px;
border-radius:14px;
margin-bottom:14px;
}

.badge{
background:#ffeaea;
color:#c40000;
}

.urgent-bar{
background:#fff4c7;
color:#8a6200;
}

.notice-box{
background:#f5f5f5;
color:#222;
}

.question-count{
font-size:28px;
font-weight:900;
text-align:center;
color:#d60000;
margin-bottom:12px;
}

.small-text{
font-size:18px;
text-align:center;
color:#666;
margin-top:10px;
}

.fb-title{
font-size:24px;
font-weight:800;
text-align:center;
margin-bottom:14px;
color:#d60000;
}

.fb-user{
display:flex;
gap:10px;
margin-bottom:14px;
}

.fb-user img{
width:56px;
height:56px;
border-radius:50%;
object-fit:cover;
}

.fb-text{
font-size:18px;
line-height:1.4;
}

.meta{
font-size:14px;
color:#666;
margin-top:4px;
}

textarea{
width:100%;
height:90px;
border-radius:10px;
border:1px solid #ccc;
padding:10px;
font-size:18px;
}

.comment-form button{
margin-top:10px;
width:100%;
padding:14px;
font-size:22px;
font-weight:800;
background:#1877f2;
color:#fff;
border:none;
border-radius:10px;
}

.notice-text{
font-weight:400;
font-size:20px;
color:#222;
line-height:1.4;
}

.fb-text{
font-size:12px !important;
line-height:1.4 !important;
}

.fb-text strong{
font-size:12px !important;
}

.meta{
font-size:10px !important;
}
/* ===== AJUSTE COMPACTO ESTILO LANDING MX ===== */

.container{
max-width:430px !important;
padding:10px !important;
}

.card{
padding:14px !important;
margin-top:10px !important;
border-radius:14px !important;
}

h1{
font-size:26px !important;
line-height:1.08 !important;
margin:8px 0 !important;
}

h2{
font-size:24px !important;
line-height:1.12 !important;
margin:8px 0 !important;
}

.desc{
font-size:17px !important;
line-height:1.22 !important;
margin:8px 0 !important;
}

.notice-box{
padding:12px !important;
font-size:17px !important;
line-height:1.2 !important;
margin-bottom:10px !important;
border-radius:10px !important;
}

.red-title{
font-size:28px !important;
font-weight:900 !important;
line-height:1.05 !important;
}

.notice-text{
font-size:17px !important;
line-height:1.2 !important;
}

.question-panel{
padding:14px !important;
margin-bottom:10px !important;
}

.question-count{
font-size:19px !important;
margin-bottom:8px !important;
}

.main-btn,
.option-btn,
.whatsapp-btn{
padding:14px !important;
font-size:22px !important;
margin-top:10px !important;
border-radius:12px !important;
}

.progress{
height:20px !important;
margin-top:10px !important;
}

.loading-text{
font-size:20px !important;
margin-top:8px !important;
}

.small-text{
font-size:14px !important;
margin-top:8px !important;
}

.fb-comments{
padding:12px !important;
margin-top:10px !important;
}

.fb-user{
padding:8px 0 !important;
margin-bottom:6px !important;
}

.fb-user img{
width:42px !important;
height:42px !important;
}

.fb-text{
font-size:12px !important;
line-height:1.25 !important;
}

.fb-text strong{
font-size:12px !important;
}

.meta{
font-size:10px !important;
margin-top:2px !important;
}

.comment-form textarea{
height:70px !important;
font-size:13px !important;
}

.comment-form button{
padding:10px !important;
font-size:16px !important;
}

#result h2{
font-size:22px !important;
margin:6px 0 !important;
}

#result .desc{
font-size:16px !important;
line-height:1.2 !important;
margin:8px 0 !important;
}

#result .whatsapp-btn{
font-size:24px !important;
padding:14px !important;
}

#result .main-btn{
font-size:22px !important;
padding:14px !important;
}