.contacto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

/* La frase que cierra la columna, debajo de los botones (la pidió la dueña): corta y en
   dorado, para que se lea como firma y no como un dato más de la lista. */
.contacto-firma {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-gold);
  opacity: .9;
}

.contacto-datos {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.contacto-datos li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.contacto-datos .sitio-icono { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px; }

/* El iframe de Maps solo se sirve en claro: se invierte para que entre en la paleta
   negra del sitio en vez de ser un rectángulo blanco a media página.
   El filtro va en el IFRAME, no en el contenedor: el contenedor lleva [data-reveal] y
   el reveal ya usa `filter` para su desenfoque de entrada — ahí se pisan. */
.contacto-mapa {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}
.contacto-mapa iframe {
  filter: invert(.92) hue-rotate(180deg) saturate(.8) brightness(.95) contrast(.95);
  transition: filter var(--duration-slow) var(--ease-out);
}
.contacto-mapa:hover iframe { filter: none; }

@media (max-width: 900px) {
  .contacto-grid { grid-template-columns: 1fr; gap: var(--space-7); }
}