/* Quiz en tarjeta moderna (landing y preguntas-gratis): se carga DESPUÉS de estudio.css y estudio-v4.css */
/* Quiz en tarjeta sobre fondo azul noche (mismo estilo que las pantallas de estudio) */
body.sec-gratis{padding-bottom:0 !important}
#quiz-civismo{max-width:760px;margin:0 auto}
#quiz-civismo .cara,#quiz-civismo .cara *{--tinta:#0d1b2e}
#quiz-civismo .cara{color:#0d1b2e}
#quiz-civismo .contador{color:#c9d3e3}
#quiz-civismo .lq-resultado,#quiz-civismo .lq-res-msg{color:#fff}

/* moderna.css pone la pregunta en serif y deja los botones con la fuente del navegador: aquí van como en las pantallas de estudio */
#quiz-civismo button,#quiz-civismo input{font-family:"Instrument Sans","Public Sans",system-ui,sans-serif}
#quiz-civismo .lp-quiz-civismo .pregunta-en,#quiz-civismo .pregunta-en,.lp-quiz-civismo .cara .pregunta-en{
  font-family:"Instrument Sans","Public Sans",system-ui,sans-serif !important;font-weight:700 !important;
  font-size:clamp(1.45rem,3.2vw,2.05rem) !important;line-height:1.18 !important;letter-spacing:-.02em !important;color:#0d1b2e !important}
#quiz-civismo .elegir{font-weight:600;font-size:1.02rem;color:#0d1b2e}
#quiz-civismo .btn-espanol{font-weight:600;font-size:.88rem;text-decoration:none !important}
#quiz-civismo .elegir,#quiz-civismo .btn-espanol,#quiz-civismo .btn-siguiente,#quiz-civismo .btn-bocina,#quiz-civismo .velocidad button,#quiz-civismo #lq-prev,#quiz-civismo #lq-next{font-family:"Instrument Sans","Public Sans",system-ui,sans-serif !important}
#quiz-civismo .btn-espanol{background:#eaf0f8 !important;color:#1d3f63 !important;border:0 !important;border-radius:999px !important;padding:8px 16px !important}
#quiz-civismo .opcion{border-radius:16px !important}
#quiz-civismo .opcion::before{font-family:"Instrument Sans","Public Sans",system-ui,sans-serif !important;color:#14253d !important;font-weight:700}
#quiz-civismo .opcion .audio-resp{color:#52627c}
/* La página no carga welcome.css: se fija aquí la fuente del cuerpo (si no, cae a serif del navegador) */
body.sec-gratis,body.sec-gratis button,body.sec-gratis input{font-family:"Instrument Sans","Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
body.sec-gratis .display,body.sec-gratis h1,body.sec-gratis h2{font-family:"Fraunces",Georgia,"Times New Roman",serif}

/* Estuche azul noche cuando la sección que lo contiene es clara (portada) */
.quiz-estuche{background:#0a1b30;border-radius:36px;padding:clamp(22px,4vw,52px) clamp(14px,3vw,40px);max-width:860px !important}
.quiz-estuche .lq-res-num,.quiz-estuche .lq-res-resp{color:#fff}

/* Botones Anterior / Siguiente del quiz sobre fondo azul noche */
#quiz-civismo #lq-prev,#quiz-civismo #lq-next{border-radius:999px !important;min-height:52px;font-weight:700;letter-spacing:.01em}
#quiz-civismo #lq-prev{background:transparent !important;border:1.5px solid rgba(255,255,255,.45) !important;color:#fff !important;box-shadow:none !important}
#quiz-civismo #lq-prev:disabled{opacity:.35}
#quiz-civismo #lq-next{background:#7c1c2c !important;color:#fff !important;border:0 !important;box-shadow:0 14px 30px -12px rgba(124,28,44,.9) !important}
#quiz-civismo .lq-reintentar{color:#fff !important;border:1.5px solid rgba(255,255,255,.45) !important;background:transparent !important;border-radius:999px !important}

/* ═══ Cara de respuesta (igual que en las pantallas de estudio) ═══ */
#quiz-civismo .resultado{display:flex !important;align-items:center;gap:14px;background:none !important;border:0 !important;padding:6px 0 4px !important;margin:6px 0 14px !important;
  font:700 clamp(1.7rem,4vw,2.3rem)/1.1 "Instrument Sans","Public Sans",sans-serif !important;letter-spacing:-.02em !important;text-transform:none !important}
#quiz-civismo .resultado::before{content:"";flex:0 0 52px;width:52px;height:52px;border-radius:50%;background-size:26px 26px;background-position:center;background-repeat:no-repeat;-webkit-mask:none !important;mask:none !important}
#quiz-civismo .resultado.mal{color:#b3263a !important}
#quiz-civismo .resultado.mal::before{background-color:#b3263a;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
#quiz-civismo .resultado.ok{color:#17803f !important}
#quiz-civismo .resultado.ok::before{background-color:#17803f;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
#quiz-civismo .resultado svg{display:none}
#quiz-civismo .elegiste{font:600 .9rem "Instrument Sans","Public Sans",sans-serif !important;color:#6b7a92 !important}
#quiz-civismo .bloque-correcta{border:0 !important;border-radius:16px !important;background:#e9f7ef !important;padding:14px 18px !important;margin:0 0 16px !important}
#quiz-civismo .bloque-correcta .etq{font:600 .82rem "Instrument Sans","Public Sans",sans-serif !important;text-transform:none !important;letter-spacing:.005em !important;color:#17803f !important}
#quiz-civismo .bloque-correcta .txt{font:700 clamp(1.3rem,3vw,1.6rem)/1.2 "Instrument Sans","Public Sans",sans-serif !important;color:#0d1b2e !important;letter-spacing:-.015em}
#quiz-civismo .explicacion,#quiz-civismo .tambien{font-family:"Instrument Sans","Public Sans",sans-serif !important;font-size:.98rem;line-height:1.55;color:#33435c !important}
#quiz-civismo .btn-siguiente{display:block !important;width:100% !important;margin-top:18px !important;background:#7c1c2c !important;color:#fff !important;border:0 !important;border-radius:999px !important;min-height:54px;font-family:"Instrument Sans","Public Sans",sans-serif !important;font-weight:700;font-size:1rem;box-shadow:0 14px 28px -14px rgba(124,28,44,.9) !important;cursor:pointer}
#quiz-civismo .lq-res-num{font-family:"Instrument Sans","Public Sans",sans-serif !important;font-weight:700}
/* Celular: el estuche aprovecha el ancho */
@media(max-width:600px){.quiz-estuche{padding:20px 10px !important;border-radius:28px !important}}