*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;background:#eef2f8;color:#0b1b2b}
.wrap{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:18px}
.card{background:#fff;border-radius:24px;box-shadow:0 14px 40px rgba(14,30,62,.10);padding:28px;max-width:560px;width:100%}
.card.center{text-align:center}
.brand{margin:0;font-size:34px;letter-spacing:.3px}
.subtitle{margin:0 0 18px 0;color:#334;opacity:.9}
h1,h2{margin:.2rem 0 1rem 0}
h3{margin:1.2rem 0 .6rem 0}
.form{display:grid;gap:14px}
.field{display:grid;gap:6px}
.field input{width:100%;font-size:16px;padding:12px 14px;border:2px solid #c7d0e7;border-radius:24px;outline:none}
.field input:focus{border-color:#4a67ff;box-shadow:0 0 0 4px rgba(74,103,255,.12)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.btn{border:none;border-radius:24px;padding:12px 18px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block}
.btn.primary{background:#4a67ff;color:#fff}
.btn.secondary{background:#e7ecfb;color:#223}
.btn.icon{background:#e7ecfb;width:48px;height:44px;border-radius:12px;font-size:22px}
.btn:disabled{opacity:.6;cursor:not-allowed}
.msg{min-height:1.2rem;margin-top:6px}
.msg.ok{color:#0a8456}
.msg.err{color:#d62828}
#map{height:320px;border-radius:16px;overflow:hidden;margin:10px 0 14px 0;border:1px solid #dfe6f5}
.panel{display:grid;gap:12px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pill{background:#f0f4ff;border-radius:999px;padding:6px 10px;border:1px solid #dfe6f5}
.counter{display:flex;align-items:center;gap:16px;justify-content:center}
.counter output{min-width:52px;text-align:center;font-size:28px;border:2px solid #222;padding:6px 12px;border-radius:12px}
.resume{background:#f7f9ff;border:1px solid #e1e7fb;border-radius:16px;padding:14px;margin:12px 0;text-align:left}
.link{color:#4a67ff;text-decoration:underline;margin-left:6px}

/* --- NUEVOS ESTILOS AGREGADOS --- */
.logo-container{
  display:flex;
  justify-content:center;
  margin-bottom:12px;
}
.logo-container img{
  width:100px;
  height:100px;
  border-radius:20px;
  /* Agregamos un borde sutil por si el logo no tiene fondo */
  border: 1px solid rgba(0,0,0,0.05); 
}
.logo-container.small img{
  width:50px;
  height:50px;
  border-radius:12px;
}

.route-list{
  display:grid;
  gap:12px;
  margin:24px 0;
}
.route-list .btn{
  display:flex;
  flex-direction:column;
  padding:16px 20px;
  text-align:left;
  line-height:1.4;
  border-radius: 16px; /* Más acorde al resto del diseño */
  background: #f7f9ff;
  border: 1px solid #e1e7fb;
  color: #223;
  transition: all 0.2s ease;
}
.route-list .btn:hover{
  background: #e7ecfb;
  border-color: #c7d0e7;
  transform: translateY(-2px);
}
.route-list .btn strong{
  font-size:1.05rem; /* Un poco más sutil */
}
.route-list .btn span{
  font-size:0.9rem;
  opacity:0.8;
  font-weight:500;
}