/* ===== Encabezado con foto de fondo ===== */
.taller-hero {
  position: relative; overflow: hidden;
  background-image: url('../Imagenes/Fondo taller.png');
  background-size: cover;
  background-position: center 40%;
}
.taller-hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(3,7,18,.94) 0%, rgba(3,7,18,.8) 45%, rgba(3,7,18,.55) 100%),
              linear-gradient(0deg, rgba(3,7,18,.75) 0%, rgba(3,7,18,.15) 45%);
}

/* ===== Tarjeta de negocio ===== */
.taller-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; overflow: hidden;
  padding: 20px; cursor: pointer; display: flex; flex-direction: column; gap: 14px;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.taller-card:hover { transform: translateY(-6px); box-shadow: 0 20px 36px rgba(15,23,42,.12); border-color: rgba(220,38,38,.25); }

.taller-card-top { display: flex; align-items: center; gap: 14px; }
.taller-card-logo {
  width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0; overflow: hidden;
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  display: flex; align-items: center; justify-content: center; color: #9ca3af;
}
.taller-card-logo img { width: 100%; height: 100%; object-fit: cover; }

.taller-tipo-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .66rem; font-weight: 800; padding: 4px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .03em;
}
.taller-tipo-taller { background: #fee2e2; color: #dc2626; }
.taller-tipo-repuestos { background: #dbeafe; color: #1d4ed8; }

.taller-card-nombre { font-weight: 800; font-size: .95rem; color: #0f172a; margin-top: 6px; }
.taller-card-ciudad { font-size: .78rem; color: #6b7280; margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.taller-card-direccion { font-size: .76rem; color: #9ca3af; margin-top: 2px; }

.taller-card-acciones { display: flex; gap: 8px; margin-top: auto; }

.taller-card-whatsapp, .taller-card-maps {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: .78rem; font-weight: 700; padding: 9px; border-radius: 10px;
  text-decoration: none; white-space: nowrap;
  transition: background .2s ease, border-color .2s ease;
}
.taller-card-whatsapp {
  background: #f0fdf4; color: #15803d; border: 1px solid #dcfce7;
}
.taller-card-whatsapp:hover { background: #dcfce7; border-color: #bbf7d0; }

.taller-card-maps {
  background: #eff6ff; color: #1d4ed8; border: 1px solid #dbeafe;
}
.taller-card-maps:hover { background: #dbeafe; border-color: #bfdbfe; }

/* ===== Modal de negocio ===== */
.taller-modal-box { display: block; }
.taller-modal-logo-wrap {
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  display: flex; align-items: center; justify-content: center; padding: 32px 20px;
  min-height: 220px;
}
.taller-modal-logo {
  width: 150px; height: 150px; border-radius: 24px; overflow: hidden; flex-shrink: 0;
  background: #fff; box-shadow: 0 10px 24px rgba(15,23,42,.12);
  display: flex; align-items: center; justify-content: center; color: #9ca3af;
}
.taller-modal-logo img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.taller-modal-logo svg { width: 60px; height: 60px; }

@media (min-width: 800px) {
  .taller-modal-box { display: grid; grid-template-columns: 1fr 1.3fr; align-items: stretch; }
  .taller-modal-logo-wrap { min-height: 100%; }
  .taller-modal-logo { width: 180px; height: 180px; }
}