body {
  font-family: 'Poppins', sans-serif;
}

/* Animaciones generales */
@keyframes fade-up {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fade-up 1.2s ease-out both; }

@keyframes float-slow {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.animate-float-slow { animation: float-slow 4s ease-in-out infinite; }

/* Fondo animado */
#map-overlay {
  background: url("https://www.transparenttextures.com/patterns/cubes.png");
  animation: move-map 120s linear infinite;
}
@keyframes move-map {
  from { background-position: 0 0; }
  to { background-position: 2000px 2000px; }
}

#pattern-bg {
  background: url("https://www.transparenttextures.com/patterns/graphy.png");
  animation: move-pattern 60s linear infinite;
}
@keyframes move-pattern {
  from { background-position: 0 0; }
  to { background-position: 1000px 1000px; }
}

/* Scroll reveal */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s ease-out;
}
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animaciones de entrada/salida del menú móvil */
@keyframes slide-down {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slide-up {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}

.animate-slide-down { animation: slide-down 0.4s ease-out forwards; }
.animate-slide-up { animation: slide-up 0.4s ease-in forwards; }

@keyframes fade-up {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
  animation: fade-up 1.2s ease-out both;
}

@keyframes pulse-wp {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.animate-pulse-wp {
  animation: pulse-wp 2s infinite;
}


/* Animación para aparecer el chat */
@keyframes slide-up-chat {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
#chatbot-box {
  animation: slide-up-chat 0.3s ease-out;
}

/* Estilos de mensajes */
.chat-user {
  background-color: #e5f0ff;
  align-self: flex-end;
}
.chat-bot {
  background-color: #f3f4f6;
  align-self: flex-start;
}

.chat-option:active {
  transform: scale(0.95);
}

/* Form */
/* ===== FORMULARIO DE CONTACTO - MiRuta ===== */

.form-card {
  margin-top: 40px;
  background: #ffffff;
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form__group label {
  font-weight: 600;
  color: #1e293b; /* gris oscuro elegante */
}

.form__group input,
.form__group select,
.form__group textarea {
  padding: 12px 14px;
  font-family: inherit;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-size: 15px;
  transition: all 0.2s ease;
  background-color: #f9fafb;
}

.form__group input:focus,
.form__group select:focus,
.form__group textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  background-color: #fff;
}

/* Grid adaptable */
.grid {
  display: grid;
  gap: 18px;
}

.grid--2 {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid--2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Botón principal */
.btn {
  display: inline-block;
  padding: 12px 26px;
  border: none;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.25s ease;
}

.btn--gradient {
  background: linear-gradient(90deg, #ef4444, #2563eb, #16a34a);
  color: #fff;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
}

.btn--gradient:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.35);
}

/* Mensaje de confirmación */
.success-msg {
  display: block;
  text-align: center;
  color: #16a34a;
  font-weight: 600;
  margin-bottom: 10px;
}

/* Ajustes responsive */
@media (max-width: 600px) {
  .form-card {
    padding: 22px;
  }

  .btn {
    width: 100%;
  }
}

/* Buttons */
.btn{display:inline-block;padding:10px 18px;border-radius:999px;border:0;cursor:pointer;font-weight:600}
.btn--gradient{background:linear-gradient(90deg,var(--red),var(--blue),var(--green));color:#ff0000;box-shadow:0 8px 20px rgba(17, 49, 119, 0.25)}
.btn--blue{background:var(--blue);color:#000000;border-radius:10px;padding:8px 14px}
.btn--pill{border-radius:999px}