/* ============================================================
   ASESOR DE AUTOS - Animaciones y efectos UX

   Este archivo SOLO contiene animaciones, transiciones y efectos
   interactivos. Toda la estructura visual (layout, colores,
   tipografía) está definida dentro del <style> en index.html.

   Si eliminas este archivo, el sitio seguirá funcionando
   correctamente pero sin animaciones.
   ============================================================ */

/* ---- Transiciones generales para enlaces y botones ---- */
a {
  transition: color 0.3s ease;
}

.btn {
  transition: all 0.3s ease;
}

.btn--primary:hover {
  background: #1d4ed8;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
  transform: translateY(-2px);
}

.btn--whatsapp:hover {
  background: #1ebe57;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
  transform: translateY(-2px);
}

/* ---- Header: efecto al hacer scroll ---- */
.header {
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.header.scrolled {
  background: #0a1628;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

/* ---- Hamburguesa: animación al abrir/cerrar ---- */
.hamburger,
.hamburger::before,
.hamburger::after {
  transition: all 0.3s ease;
}

.header__menu-toggle.active .hamburger {
  background: transparent;
}

.header__menu-toggle.active .hamburger::before {
  top: 0;
  transform: rotate(45deg);
}

.header__menu-toggle.active .hamburger::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ---- Navegación móvil: slide desde la derecha ---- */
.header__nav {
  transition: right 0.3s ease;
}

.header__nav.open {
  right: 0;
}

.nav-link {
  transition: all 0.3s ease;
}

/* ---- Tarjetas de servicio: elevación al hover ---- */
.service-card {
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  border-color: #2563eb;
}

.service-card__icon {
  transition: all 0.3s ease;
}

.service-card:hover .service-card__icon {
  background: #2563eb;
  color: #ffffff;
}

.service-card__cta {
  transition: all 0.3s ease;
}

.service-card__cta:hover {
  background: #2563eb;
  transform: translateX(4px);
}

/* ---- Tarjetas de testimonio: elevación al hover ---- */
.testimonial-card {
  transition: all 0.3s ease;
}

.testimonial-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  border-color: #2563eb;
}

/* ---- Items de contacto: borde al hover ---- */
.contact__item {
  transition: all 0.3s ease;
}

.contact__item:hover {
  border-color: #2563eb;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

a.contact__item-value {
  transition: color 0.3s ease;
}

/* ---- Footer links ---- */
.footer__link {
  transition: color 0.3s ease;
}

/* ---- Botón flotante WhatsApp: pulso y hover ---- */
.whatsapp-float {
  transition: all 0.3s ease;
  animation: pulse-whatsapp 2s infinite;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.5);
}

@keyframes pulse-whatsapp {
  0% {
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  }
  50% {
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 10px rgba(37, 211, 102, 0.15);
  }
  100% {
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  }
}

/* ---- Animación fade-in al hacer scroll ---- */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Retraso escalonado para tarjetas en grid */
.services__grid .service-card:nth-child(2) {
  transition-delay: 0.1s;
}

.services__grid .service-card:nth-child(3) {
  transition-delay: 0.2s;
}

.testimonials__grid .testimonial-card:nth-child(2) {
  transition-delay: 0.1s;
}

.testimonials__grid .testimonial-card:nth-child(3) {
  transition-delay: 0.2s;
}

/* Retraso escalonado para columnas de Nosotros */
.about__columns .fade-in:nth-child(2) {
  transition-delay: 0.15s;
}