/* =====================================================================
   16 · VISÍTANOS (id="visitanos")
   Forma de la versión 3 en colores oscuros: datos a la izquierda con
   botones redondeados, mapa con esquinas redondeadas a la derecha.
   Para poner el mapa real: reemplaza el <div class="visitanos__mapa">
   por el <iframe> que entrega Google Maps (Compartir → Insertar un mapa).
   ===================================================================== */

.visitanos { border-top: 1px solid var(--carbon); }

.visitanos__grilla {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 96px);
}

.visitanos__datos { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }

.visitanos__titulo { font-size: clamp(36px, 4vw, 56px); font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; }

.visitanos__horarios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; font-size: 17px; line-height: 1.6; }
.visitanos__horarios strong { display: block; font-weight: 700; }
.visitanos__horarios span { color: var(--texto-suave); }

.visitanos__correo { font-size: 17px; color: var(--cobre); }

.visitanos__botones { display: flex; gap: 12px; flex-wrap: wrap; }

.visitanos__mapa {
  min-height: 440px;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-apagado);
  font-size: 15px;
}
.visitanos__mapa iframe { width: 100%; height: 100%; min-height: 440px; border: 0; }

/* Capa oscura sobre el mapa para bajar lo blanco.
   El mapa se sigue pudiendo mover porque la capa deja pasar los clics (pointer-events: none).
   Para más oscuro sube el último número (.35 → .5); para menos, bájalo (.35 → .2) */
.visitanos__mapa { position: relative; }
.visitanos__mapa::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 9, 8, .35);
  pointer-events: none;
}


/* ---------- Tablet y celular ---------- */
@media (max-width: 1024px) {
  .visitanos__grilla { grid-template-columns: 1fr; }
  .visitanos__mapa, .visitanos__mapa iframe { min-height: 320px; }
}

@media (max-width: 700px) {
  .visitanos__botones { flex-direction: column; align-self: stretch; }
  .visitanos__mapa { border-radius: 20px; }
}