body{
  margin:0;
  font-family:Arial, sans-serif;
  color:#263728;
  background:#1B5E20;
}

.contenedor{
  max-width:1100px;
  margin:auto;
  padding:30px;
}

h1{
  text-align:center;
  color:#2E7D32;
  font-size:42px;
}

h1{
  text-shadow:0 3px 8px rgba(0,0,0,.35);
}
.oculto{
  display:none;
}

/* Inicio */
.pantalla-inicio{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:
    linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),
    url("assets/fondo-inicio.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.inicio-card{
  max-width:720px;
  background:#EFE8D4;
  border-left:10px solid #2E7D32;
  border-radius:25px;
  padding:45px;
  text-align:center;
  box-shadow:0 15px 35px rgba(0,0,0,.30);
}

.inicio-card h1{
  font-size:48px;
  margin-bottom:20px;
}

.inicio-card p{
  font-size:20px;
  line-height:1.6;
}

/* Juego */
#juego{
  min-height:100vh;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  background-repeat:no-repeat;
}

/* Barra progreso */
.barra-progreso{
  background:#EFE8D4;
  border-left:8px solid #2E7D32;
  border-radius:18px;
  padding:18px;
  margin:20px 0 25px;
  box-shadow:0 10px 20px rgba(0,0,0,.25);
  text-align:center;
}

#textoProgreso{
  font-weight:bold;
  color:#2E7D32;
  margin-bottom:14px;
}

.pasos{
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:500px;
  margin:auto;
}

.paso{
  width:38px;
  height:38px;
  border-radius:50%;
  background:#CFD8DC;
  color:#455A64;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  border:3px solid #B0BEC5;
}

.paso.activo{
  background:#7CB342;
  color:white;
  border-color:#2E7D32;
}

.paso.completado{
  background:#2E7D32;
  color:white;
  border-color:#1B5E20;
}

.linea{
  width:90px;
  height:5px;
  background:#CFD8DC;
}

.linea.completada{
  background:#7CB342;
}

/* Tarjetas */
.mision,
.resultado,
.bono,
.bloque-final,
.resumen-final,
.insignia-final{
  background:#EFE8D4;
  border-left:8px solid #2E7D32;
  border-radius:18px;
  box-shadow:0 12px 25px rgba(0,0,0,.25);
  padding:25px;
}

.mision,
.resultado{
  margin-bottom:25px;
}

.resultado{
  display:none;
}

.mision h2,
.resultado h2,
.bloque-final h2{
  color:#1B5E20;
}

.etiqueta{
  font-weight:bold;
  color:#6a8f2a;
}

/* Prioridades */
.prioridades{
  background:#F5F0DF;
  border-left:6px solid #F9A825;
  border-radius:18px;
  padding:18px;
  margin-top:20px;
}

.prioridades h3{
  margin-top:0;
  color:#2E7D32;
}

.prioridad{
  margin:10px 0;
  font-weight:600;
  font-size:16px;
}

/* Espacios */
.espacios{
  display:flex;
  justify-content:center;
  gap:15px;
  margin:25px 0;
  flex-wrap:wrap;
}

.espacio{
  position:relative;
  background:#F5F0DF;
  border:3px dashed #7CB342;
  border-radius:18px;
  width:180px;
  min-height:55px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  color:#2E7D32;
  box-shadow:0 5px 12px rgba(0,0,0,.18);
}

.espacio.lleno{
  border-style:solid;
  background:#EAF5D8;
}

.quitar{
  position:absolute;
  top:-10px;
  right:-10px;
  width:28px;
  height:28px;
  border-radius:50%;
  border:none;
  background:#d32f2f;
  color:white;
  font-weight:bold;
  cursor:pointer;
  font-size:14px;
  padding:0;
  margin:0;
}

.quitar:hover{
  background:#b71c1c;
}

#contador{
  text-align:center;
  font-size:20px;
  font-weight:bold;
  color:white;
  text-shadow:0 2px 6px rgba(0,0,0,.6);
}

/* Cartas */
.cartas{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:25px;
}

.carta{
  width:220px;
  background:#F5F0DF;
  border:3px solid #B7A36B;
  border-radius:20px;
  padding:15px;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  transition:.25s;
  cursor:pointer;
}

.carta:hover{
  transform:translateY(-8px) scale(1.04);
}

.carta img{
  width:100%;
  height:190px;
  object-fit:contain;
}

.carta h2{
  text-align:center;
  color:#2E7D32;
  font-size:18px;
  margin:8px 0;
}

/* Botones */
button{
  display:block;
  margin:30px auto;
  background:#2E7D32;
  color:white;
  border:none;
  padding:16px 35px;
  border-radius:18px;
  font-size:18px;
  font-weight:bold;
  cursor:pointer;
}

button:disabled{
  background:#b7c7b8;
  cursor:not-allowed;
}

.botones-carta{
  margin-top:10px;
}

.botones-carta button{
  width:100%;
  height:36px;
  font-size:13px;
  margin:0;
  padding:8px;
  border-radius:10px;
}

.ver{
  background:#ECEFF1;
  color:#37474F;
}

.ver:hover{
  background:#CFD8DC;
}

.seleccionar-modal{
  width:100%;
  margin-top:20px;
  background:#2E7D32;
  color:white;
  border:none;
  border-radius:14px;
  padding:14px;
  font-size:16px;
  font-weight:bold;
}

.seleccionar-modal:hover{
  background:#1B5E20;
}

/* Bono y resultado */
.bono{
  display:none;
  text-align:center;
  margin:25px 0;
  animation:aparecer .5s ease;
  border-left:8px solid #F9A825;
}

.bono h2{
  color:#2E7D32;
  margin-top:0;
}

.detalle{
  border-top:1px solid rgba(0,0,0,.15);
  padding-top:12px;
  margin-top:12px;
}

.tarjeta-insignia{
  background:linear-gradient(135deg,#fff8e1,#fff3cd);
  border:3px solid #fbc02d;
  border-radius:24px;
  padding:22px;
  margin-top:20px;
  text-align:center;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}

.tarjeta-insignia h2{
  color:#ef6c00;
  margin-top:0;
}

.tarjeta-insignia h3{
  font-size:28px;
  color:#2E7D32;
  margin:10px 0;
}

/* Modal */
.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  z-index:9999;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.modal-contenido{
  background:#EFE8D4;
  border-left:10px solid #2E7D32;
  border-radius:28px;
  width:90%;
  max-width:520px;
  max-height:88vh;
  padding:22px;
  position:relative;
  box-shadow:0 15px 40px rgba(0,0,0,.35);
  overflow-y:auto;
}

.cerrar{
  position:sticky;
  top:0;
  margin-left:auto;
  display:block;
  background:#d32f2f;
  width:34px;
  height:34px;
  border-radius:50%;
  padding:0;
  z-index:10;
}

.modal-carta img{
  width:100%;
  max-height:260px;
  object-fit:contain;
  display:block;
  margin:auto;
}

.modal-carta h2{
  text-align:center;
  color:#2E7D32;
}

.estadistica{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin:10px 0;
  font-size:16px;
}

.uso{
  background:#F5F0DF;
  border-radius:18px;
  padding:15px;
  margin-top:15px;
}

/* Pantalla final */
.pantalla-final{
  min-height:100vh;
  padding:60px 30px;
  background-image:url("assets/fondo-final.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.pantalla-final h1{
  color:#2E7D32;
  font-size:42px;
}

.mensaje-final{
  font-size:19px;
  line-height:1.6;
  max-width:850px;
  margin:0 auto 30px;
  background:#EFE8D4;
  border-left:8px solid #2E7D32;
  border-radius:18px;
  padding:25px;
  box-shadow:0 12px 25px rgba(0,0,0,.25);
}

.insignias-finales{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  justify-content:center;
  margin:30px 0;
}

.insignia-final{
  width:250px;
}

.insignia-final h3{
  color:#2E7D32;
  margin-top:0;
}

.bloque-final{
  margin:25px auto;
  max-width:850px;
  text-align:left;
}

.bloque-final li{
  margin:10px 0;
  font-size:17px;
}

.resumen-final{
  max-width:600px;
  margin:30px auto;
}

.botones-finales{
  display:flex;
  flex-wrap:wrap;
  gap:15px;
  justify-content:center;
  margin-top:30px;
}

.botones-finales a{
  background:#2E7D32;
  color:white;
  padding:16px 24px;
  border-radius:18px;
  text-decoration:none;
  font-weight:bold;
  display:inline-block;
}

.botones-finales a:hover{
  background:#1B5E20;
}

/* Animación */
@keyframes aparecer{
  from{
    opacity:0;
    transform:scale(.9);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

/* Celular */
@media(max-width:600px){
  .contenedor{
    padding:18px;
  }

  h1,
  .pantalla-final h1{
    font-size:32px;
  }

  .inicio-card{
    padding:30px;
  }

  .inicio-card h1{
    font-size:36px;
  }

  .inicio-card p{
    font-size:17px;
  }

  .carta{
    width:150px;
  }

  .carta img{
    height:150px;
  }

  .espacio{
    width:140px;
  }

  .linea{
    width:55px;
  }

  .paso{
    width:34px;
    height:34px;
  }
  #comenzarJuego{
  box-shadow:0 8px 18px rgba(0,0,0,.25);
  transition:.2s;
}

#comenzarJuego:hover{
  transform:scale(1.05);
}
}