/* ── 1. Override Cargo ── */
.page,
.page-layout,
.page-content {
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: visible !important;
  height: auto !important;
  contain: none !important;
  transform: none !important;
  will-change: auto !important;
  filter: none !important;
}

bodycopy {
  contain: none !important;
  overflow: visible !important;
  height: auto !important;
}

/* ── 2. Variables ── */
#jgp-contacto {
  --color-text:  #000;
  --color-muted: #888;
  --pad:         20px;
  font-family: var(--font-heading);
  color: var(--color-text);
  background: #fff;
}

/* ── 3. Grilla — misma de 12 columnas y mismo padding lateral que el
   nav (--pad = 20px en ambos). El texto ocupa las columnas 1-4 y la
   foto arranca en la columna 5, la misma donde está "About" en el nav.
   La foto ocupa 3 columnas: chica a propósito. ── */
#jgp-contacto .jgp-contact {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
  padding: 48px var(--pad) 64px;
}
#jgp-contacto .jgp-contact-info   { grid-column: 1 / 5; }
#jgp-contacto .jgp-contact-figure { grid-column: 5 / 8; }

/* ── 4. Texto — todo en el mismo tamaño del navbar (12px), Neue
   Haas Grotesk medium (500), alineado a la izquierda. El nombre y el
   rol van en líneas seguidas; una línea en blanco los separa del
   mail/Instagram.
   Cargo aplica a TODO el contenido de la página
   `bodycopy * { font-size: calc(var(--font-scale) * var(--font-size)) }`
   (13px, y x1.3 en móvil). Un <a> no hereda el tamaño de su párrafo:
   recibe el de esa regla, y por eso los links salían más grandes que
   el resto. Se fija con !important en el bloque y en todo lo que
   contiene, igual que el navbar. ── */
#jgp-contacto .jgp-contact-info,
#jgp-contacto .jgp-contact-info *,
#jgp-contacto .jgp-contact-caption {
  font-family: var(--font-heading) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.07 !important;
  letter-spacing: 0 !important;
}
#jgp-contacto .jgp-contact-name,
#jgp-contacto .jgp-contact-role,
#jgp-contacto .jgp-contact-lines {
  margin: 0;
  padding: 0;
  text-align: left;
  color: var(--color-text);
}
#jgp-contacto .jgp-contact-lines { margin-top: 1.07em; }
#jgp-contacto .jgp-contact-lines a {
  color: inherit;
  text-decoration: none;
}
#jgp-contacto .jgp-contact-lines a:hover { opacity: 0.6; }

/* ── 5. Foto — marco 3:4 (vertical) con object-fit:contain: si la foto
   real tiene otra proporción, se ve completa con bordes blancos en vez
   de recortarse. Para otra proporción, cambiar el aspect-ratio. ── */
#jgp-contacto .jgp-contact-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
#jgp-contacto .jgp-contact-caption {
  margin-top: 8px;
  color: var(--color-muted);
}

/* ── 6. Mobile ── */
@media (max-width: 768px) {
  #jgp-contacto .jgp-contact { padding: 24px var(--pad) 48px; row-gap: 32px; }
  #jgp-contacto .jgp-contact-info   { grid-column: 1 / 13; }
  #jgp-contacto .jgp-contact-figure { grid-column: 1 / 13; width: min(60%, 260px); }
}

#jgp-contacto .jgp-contact-photo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center center; pointer-events: none; }