/* ═══ ENCONTRANOS: bloque naranja pleno ═══ */
.donde { background: var(--naranja); }

.donde__titulo { color: var(--marino); }

.donde__tarjetas {
  display: grid; gap: var(--esp-2);
  grid-template-columns: 1.25fr 1fr 1fr;
  margin-top: var(--esp-4);
  align-items: stretch;
}

.donde__tarjeta {
  background: var(--crema);
  color: var(--tinta);
  border-radius: var(--radio);
  padding: var(--esp-3);
  display: flex; flex-direction: column; gap: .7rem;
  box-shadow: 0 12px 34px rgba(18, 61, 85, .16);
  text-decoration: none;
  transition: transform var(--dur-media) var(--curva-salida), box-shadow var(--dur-media) var(--curva-salida);
}
.donde__tarjeta:hover { transform: translateY(-6px); box-shadow: var(--sombra-alta); }

.donde__tarjeta--wa { background: var(--marino); color: var(--crema); }

.donde__icono { width: 2.4rem; height: 2.4rem; color: var(--coral); }
.donde__tarjeta--wa .donde__icono { color: var(--amarillo); }

.donde__tarjeta h3 { font-size: var(--paso-2); color: var(--marino); }
.donde__tarjeta--wa h3 { color: var(--amarillo); } /* después de la genérica: misma especificidad, gana el orden */
.donde__tarjeta p { font-size: var(--paso-0); font-weight: 400; }
.donde__tarjeta strong { font-weight: 600; }
.donde__tarjeta a { color: var(--azul-vivo); font-weight: 500; text-underline-offset: .18em; }
.donde__tarjeta a:hover { color: var(--marino); }

.donde__accion {
  margin-top: auto; padding-top: var(--esp-2);
  font-weight: 600; color: var(--amarillo);
}

/* ── Enlaces al punto de venta ──
   Mismo empuje al pie de la tarjeta que .donde__accion; el color y el
   subrayado los hereda de .donde__tarjeta a (azul vivo sobre crema). */
.donde__enlaces {
  margin-top: auto; padding-top: var(--esp-2);
  display: flex; flex-wrap: wrap;
  gap: .4rem var(--esp-2);
}
.donde__enlaces a { font-weight: 600; }

/* Waze solo en teléfonos: en escritorio el deep link no lleva a ningún lado.
   La detección es CSS a propósito. El JS de la página puede no correr (ver
   README) y este atajo tiene que llegarle justo a quien va manejando. */
.donde__waze { display: none; }
@media (max-width: 860px) and (hover: none) and (pointer: coarse) {
  .donde__waze { display: block; }
}

@media (max-width: 860px) {
  .donde__tarjetas { grid-template-columns: 1fr; }
}