/* ==========================================================================
   AREA UNITED · Parte 2 · 4.12 Contacto (resumen: dirección, horario y foto de la fachada)
   ========================================================================== */

.p2-contact-grid { display: grid; gap: 40px; }
.p2-contact .section-head { margin-bottom: 32px; }

/* --- Datos --- */
.p2-contact-list { margin: 0; border-top: 1px solid var(--surface-2); }
.p2-contact-row {
  display: grid;
  gap: 8px;
  padding: 18px 0;
  border-bottom: 1px solid var(--surface-2);
}
.p2-contact-row dt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gray-text);
}
.p2-contact-row dt .p2-icon-24 { width: 20px; height: 20px; color: var(--yellow); }
.p2-contact-row dd { margin: 0; font-size: 16px; line-height: 1.55; }
.p2-contact-hours { display: grid; gap: 4px; max-width: 320px; }
.p2-contact-hours span { display: flex; justify-content: space-between; gap: 16px; }
.p2-contact-hours b { font-weight: 400; }
.p2-contact-hours i { font-style: normal; font-family: var(--font-display); font-size: 18px; letter-spacing: .02em; color: var(--yellow); }

/* --- Acciones: «Cómo llegar» + enlace a la página de contacto --- */
.p2-contact .p2-actions { margin-top: 32px; gap: 20px 32px; }

/* --- Foto de la fachada con etiqueta de dirección --- */
.p2-contact-photo {
  aspect-ratio: 4 / 3;
  margin: 0;
  border: 1px solid var(--surface-2);
  border-radius: var(--radius-card);
}
.p2-contact-photo > img { object-position: 50% 45%; }
.p2-contact-label {
  position: absolute;
  left: 16px; top: 16px;
  z-index: 2;                 /* por encima del grano de .p2-photo */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--black);
  border: 1px solid var(--surface-2);
}
.p2-contact-label img { width: 18px; height: auto; }
.p2-contact-label > span { display: grid; gap: 1px; font-size: 13px; }
.p2-contact-label b { font-weight: 600; }
.p2-contact-label span span { color: var(--gray-text); font-size: 12px; }

/* --- Escritorio --- */
@media (min-width: 1024px) {
  .p2-contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
}
@media (min-width: 1280px) {
  .p2-contact-grid { gap: 96px; }
}