/* Respuesta revelada: la correcta en verde, la marcada mal en rojo, y cada
   una con su sello en palabras. Las clases se repiten a propósito para ganarle
   a la regla de «opción elegida», que antes tapaba el rojo. */
#opciones label.opcion-correcta.opcion-correcta,
#itin-opciones label.opcion-correcta.opcion-correcta,
#orient-opciones label.opcion-correcta.opcion-correcta,
.lista-opciones label.correcta.correcta{
  border:2px solid #3f7d2c;background:#e1f0d6;box-shadow:none;opacity:1}
#opciones label.opcion-fallada.opcion-fallada,
#itin-opciones label.opcion-fallada.opcion-fallada,
#orient-opciones label.opcion-fallada.opcion-fallada,
.lista-opciones label.fallada.fallada{
  border:2px solid #b4391a;background:#fbdcd0;box-shadow:none;opacity:1}
#opciones label,#itin-opciones label,#orient-opciones label,.lista-opciones label{flex-wrap:wrap}
/* El texto se queda al lado del círculo; si el sello no cabe, baja él solo. */
#opciones label>span:not(.sello-opcion),#itin-opciones label>span:not(.sello-opcion),
#orient-opciones label>span:not(.sello-opcion),.lista-opciones label>span:not(.sello-opcion){flex:1 1 0;min-width:0}
.sello-opcion{display:inline-block;margin-left:auto;padding:4px 11px;border-radius:999px;
  font:600 12px Outfit,sans-serif;white-space:nowrap;align-self:center}
.opcion-correcta .sello-opcion,.correcta .sello-opcion{background:#3f7d2c;color:#fff}
.opcion-fallada .sello-opcion,.fallada .sello-opcion{background:#b4391a;color:#fff}
@media(max-width:760px){.sello-opcion{margin-left:0;font-size:11px}}

/* En el teléfono la cabecera no cabía en un renglón: «Volver al taller» y los
   dos logos empujaban la página hacia el lado. Pasa a dos renglones. */
@media (max-width:480px){
  .masthead{height:auto;flex-wrap:wrap;justify-content:flex-start;gap:8px 14px;padding-top:10px;padding-bottom:10px}
  .masthead .volver-taller{margin:0}
  .masthead .marcas{flex-basis:100%;min-width:0}
  .marcas .logo-maryam{max-width:62%;height:auto;max-height:34px}
}