/* ═══════════════════════════════════════════════════════════
   MAGIA PIURA — Página "Nuestros Locales"
   Estilos específicos. Primitivos compartidos en styles.css
   (.section-title, .body-text, .page-hero, .btn-link).
   Frame de Figma "Nuestros Locales" (node 1287:1398) · Mobile-first · BEM
═══════════════════════════════════════════════════════════ */

/* El hero de esta página usa fondo claro (ilustración del mapa),
   no una foto a sangre oscura: ajustamos el color del texto. */
.page-hero--light {
   background: linear-gradient(to bottom, #f1e1de, #e9d6cf);
}

.page-hero--light .page-hero__media {
  background: transparent;
}
/*
.page-hero--light .page-hero__media img {
  object-fit: contain;
} */

/* ═══════════════════════════════════════════════════════════
   SECCIÓN DE MAPA
═══════════════════════════════════════════════════════════ */
.locmap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.locmap__frame {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1268 / 640;
}

.locmap__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.locmap__btn {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 10px 24px;
  background: var(--color-cream);
  border: 1px solid var(--color-brown);
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-brown);
  box-shadow: 0 2px 8px rgba(60, 43, 42, 0.2);
  transition: background 0.2s ease, color 0.2s ease;
}

.locmap__btn:hover,
.locmap__btn:focus-visible {
  background: var(--color-brown);
  color: var(--color-cream);
}

/* ═══════════════════════════════════════════════════════════
   TARJETAS DE LOCAL
═══════════════════════════════════════════════════════════ */
.locales {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px var(--gutter) 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.loc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 24px 0;
}

.loc-card__info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.loc-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 40px);
  color: var(--color-brown);
  line-height: 1.15;
}

.loc-card__details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.loc-card__details li {
  font-family: var(--font-body);
  font-size: clamp(15px, 2vw, 18px);
  color: var(--color-brown);
  line-height: 1.5;
}

.loc-card__link {
  color: var(--color-gold);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.loc-card__link:hover {
  color: var(--color-brown);
}

.loc-card__media {
  width: 100%;
  max-width: 428px;
  aspect-ratio: 428 / 267;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  flex-shrink: 0;
}

.loc-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.loc-card:hover .loc-card__media img {
  transform: scale(1.03);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .locmap__frame {
    aspect-ratio: 1268 / 560;
  }

  /* Tarjetas: info izquierda + imagen derecha */
  .loc-card {
    flex-direction: row;
    align-items: center;
    gap: 64px;
  }
  .loc-card__media {
    width: 428px;
  }
}