/* ============================================================
   Dental Safe — Home: hero dramático "Cuidado real, sonrisa segura"
   Fondo negro→ámbar, pieza conceptual con glow propio (autónomo,
   no atado al scroll), franja de datos y tarjetas de reseñas.
   ============================================================ */

.hero__glow-core {
  animation: coreGlow 3.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes coreGlow {
  0%, 100% { opacity: 0.55; filter: drop-shadow(0 0 6px rgba(232,154,104,0.5)); }
  50% { opacity: 1; filter: drop-shadow(0 0 22px rgba(232,154,104,0.9)); }
}
.hero__drift {
  animation: drift 7s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(1.2deg); }
}

/* ---------- Cuatro caminos: bloques traslúcidos con botón real (nunca columnas iguales) ---------- */
.quick-grid {
  display: flex;
  gap: 1.25rem;
  align-items: stretch;
}
.quick-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-dark-soft);
  border: 1px solid var(--color-line-dark);
  color: var(--color-cloud);
  min-height: 190px;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.quick-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(130% 110% at 12% -10%, rgba(201,119,74,0.45), transparent 60%),
              linear-gradient(195deg, transparent 20%, rgba(20,13,9,0.92));
  z-index: -1;
}
.quick-card:hover,
.quick-card:focus-visible {
  transform: translateY(-7px);
  box-shadow: var(--shadow-dark-lg);
  border-color: var(--color-line-dark-strong);
}
@media (prefers-reduced-motion: reduce) { .quick-card:hover { transform: none; } }
/* Barrido de brillo diagonal al pasar el mouse (mismo recurso que las tarjetas de especialidad) */
.quick-card > * { position: relative; z-index: 1; }
.quick-card::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(243,232,218,0.2) 50%, transparent 60%);
  background-size: 250% 250%;
  background-position: 120% 0;
  pointer-events: none;
  transition: background-position 0.7s var(--ease-out);
}
.quick-card:hover::after { background-position: -20% 100%; }
@media (prefers-reduced-motion: reduce) { .quick-card::after { transition: none; } }

.quick-card--feature { flex: 1.3; min-height: 360px; }
.quick-list { flex: 1; display: flex; flex-direction: column; gap: 1.25rem; }
.quick-list .quick-card { flex: 1; min-height: 0; }

.quick-card__icon {
  width: 50px; height: 50px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: rgba(243,232,218,0.08);
  color: var(--color-coral-soft);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: auto;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.quick-card__icon svg { width: 25px; height: 25px; }
.quick-card:hover .quick-card__icon { transform: scale(1.1) rotate(-4deg); background: rgba(243,232,218,0.18); }
@media (prefers-reduced-motion: reduce) { .quick-card:hover .quick-card__icon { transform: none; } }
.quick-card__tag { display: block; font-weight: 700; letter-spacing: 0.06em; font-size: 0.8rem; color: var(--color-coral-soft); margin-top: 1rem; }
.quick-card h3 { color: var(--color-cloud); font-size: 1.35rem; margin-top: 0.55rem; }
.quick-card--feature h3 { font-size: var(--fs-display-sm); }
.quick-card p { color: var(--color-cloud-soft); font-size: 0.96rem; margin-top: 0.5rem; max-width: 34ch; }
.quick-card .btn { align-self: flex-start; margin-top: 1.2rem; }

@media (max-width: 820px) {
  .quick-grid { flex-direction: column; }
  .quick-card--feature { min-height: 280px; }
}

/* ---------- Grid de contacto: WhatsApp un poco más ancho que el resto
   (destaca sin dominar), las 4 tarjetas con el mismo alto. ---------- */
.contact-grid { display: grid; grid-template-columns: 1.25fr repeat(3, 1fr); gap: 1.25rem; align-items: stretch; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .contact-grid { grid-template-columns: 1fr; } }