body {font:16px -apple-system, BlinkMacSystemFont, system-ui, "colossus", "Segoe UI", "Roboto", "Helvetica Neue", "Helvetica", "Arial", verdana, Inter, sans-serif;; margin:0; padding:0; min-height:100vh; display:flex; justify-content: center;  align-items: center; background: #00CFFF; background: radial-gradient(at center, #00CFFF, #0657F3); background-position: center; background-size: cover;flex-direction: column;}
a.link {text-decoration:none; position:absolute; top:12px; color:#007AFF; font-weight: bold;}
a.link:hover {color:#183153;}
a.link::after {content: ""; position:absolute; bottom:-2px; left:0; width:0; height:2px; background:#1B66C9; transition:width 0.2s;}
a.link:hover::after {width:100%;}
.mg-logo {cursor:pointer; width:40px; margin:8px 0 0 0; transition:0.3s;}
.mg-logo:hover {transform: scale(0.90);}
.op2-pantalla {display:flex; flex-wrap:wrap; padding:0px; margin:0px;}
.colossus-from-marco-central {1height:calc(90vh - 40px);}
.div-publi {width:360px; flex:0 0 360px; min-height:100vh; background:#0657F3; background-image: url('https://mercadogratis.com/inicio/img/tarjeta-nuevos-amigos-1.jpg'); background-size:cover; background-repeat:no-repeat; background-position:center center; transition:background-image 0.6s ease-in-out;}
.div-form {height:100vh; padding:0 10px; flex:1; min-width:0; background:#00CFFF; background:radial-gradient(at center, #00CFFF, #0657F3); background-position:center; background-size:cover;}
.fa-star {color:#FFD700;}
.cabeza_titulo {width:auto; margin:2px 6px 7px 5px; display:flex; align-items: center; justify-content:space-between;}
.mg-logo {width:40px;}
.mg-logo-marca {height:26px;}
.barra_contra{height:8px;text-align:left;background:#eceff3;border-radius:6px;overflow:hidden;margin-top:4px}
.barra_contra>i{display:block;height:100%;width:0;background:#ef4444;transition:width .2s,background .2s}
.fila_nivel{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;margin-top:6px;opacity:0;transform:translateY(-4px);max-height:0;overflow:hidden;pointer-events:none;transition:opacity .18s ease, transform .18s ease, max-height .18s ease;}
.fila_nivel.activa{opacity:1;transform:translateY(0);max-height:60px;pointer-events:auto;}
.reglas{display:flex;gap:10px;font-size:.8rem}
.si{color:#16a34a}.no{color:#ef4444}.medio{background:#f59e0b!important}.ok{background:#16a34a!important}

@media screen and (max-width: 768px) {

.div-form {order: -1;}
.colossus-from-marco-central {1height:auto;}
.colossus-form {width:96%; margin: 10px ;}
.div-form, .div-publi {flex: 1 100%; min-width: 0; }
.111div-form {background:#fff;}
.op2-msjs {font-size:14px; letter-spacing:-0.15px;} }
@media screen and (max-width: 425px) and (prefers-color-scheme: dark) {
.mg-logo-marca {display:none;}
        .div-form {background:#242526;}
         body {background:#242526; height:auto;}
}
@media screen and (max-width: 425px)  and (prefers-color-scheme: light) {
    .mg-logo-marca {display:none;}
        .div-form {background:#242526;}
        body {background:#FFF;}
}
@media screen and (max-width: 358px) {
.div-form {padding:0 10px;}
.colossus-form {width:100%; margin: 10px 5px 2px 5px;}
.colossus-form {padding: 7px 4px 6px 4px; border-radius:17px; }    
.op2-msjs {font-size:13.5px; letter-spacing:-0.20px;} }