/* =========================================================
   PÁGINA: CONTACTO — estilos exclusivos de contacto.html
   ========================================================= */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

.contact-info__block { margin-bottom: 2.4rem; }
.contact-info__block:last-child { margin-bottom: 0; }

.contact-info__title { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 0 0 1.1rem; }

.contact-list { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 1.6rem; }
.contact-list li { display: flex; align-items: flex-start; gap: .9em; }
.contact-list svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: .1em; }
.contact-list span { font-size: .95rem; color: var(--ink-soft); }
.contact-list a { color: var(--ink); font-weight: 500; }
.contact-list a:hover { color: var(--accent-dark); }

.contact-map__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3.4;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(12,31,65,.08);
  margin-bottom: 1rem;
}
.contact-map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.contact-form { max-width: 760px; margin: 0 auto; }

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