/* ╔══════════════════════════════════════════════════════╗
   ║           VARIABLES — editar desde aquí             ║
   ╚══════════════════════════════════════════════════════╝ */
#jgp-curadoras {

  /* — Tipografía — */
  --font-family:          var(--font-heading);
  --font-size:            12px;
  --line-height:          20px;

  /* — Colores — */
  --color-text:           #000000;   /* texto principal */
  --color-muted:          #999999;   /* labels, metadatos, números */
  --color-border:         #000000;   /* todas las líneas */
  --color-bg-hover:       #f2f2f2;   /* hover items del índice */
  --color-bg-frame:       #ebebeb;   /* placeholder de imagen */

  /* — Imágenes — */
  --frame-height:         600px;     /* alto de los contenedores */
  /* anchos calculados automáticamente:
       .vertical  (3:4)  = --frame-height × 0.75
       .landscape (16:9) = --frame-height × 1.778        */

  /* — Líneas — */
  --border-width:         var(--jgp-border-width);

  /* — Espaciado — */
  --pad-x:                20px;    /* mismo margen lateral que el navbar (12px en móvil) */
  --padding-topbar:       8px var(--pad-x);
  --padding-panel-header: 8px 12px;
  --padding-panel-body:   12px;
  --gap-index-items:      8px;
  --gap-content-blocks:   14px;
  --col-left-width:       25vw;    /* 3/12 columnas */

}
/* ══════════════════════════════════════════════════════ */




/* ── RESET INTERNO ── */

#jgp-curadoras *, #jgp-curadoras *::before, #jgp-curadoras *::after {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

#jgp-curadoras * {
  font-family: var(--font-family) !important;
  font-size: var(--font-size) !important;
  font-weight: 400 !important;
  line-height: var(--line-height) !important;
}


/* ── ESTRUCTURA GENERAL ── */

#jgp-curadoras {
  color: var(--color-text) !important;
  -webkit-font-smoothing: antialiased;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  border-top: var(--border-width) solid var(--color-border) !important;
	font-family: var(--font-heading);
	font-weight: 400;
	font-style: normal;
}

#jgp-curadoras .top-bar {
  flex-shrink: 0 !important;
  border-bottom: var(--border-width) solid var(--color-border) !important;
  padding: var(--padding-topbar) !important;
  display: flex !important;
  align-items: baseline !important;
  font-weight: 700 !important;
}

#jgp-curadoras .columns {
  display: flex !important;
  width: 100% !important;
  border-bottom: var(--border-width) solid var(--color-border) !important;
}


/* ── COLUMNA IZQUIERDA — ÍNDICE ── */

#jgp-curadoras .col-left {
  width: var(--col-left-width) !important;
  flex-shrink: 0 !important;
  border-right: var(--border-width) solid var(--color-border) !important;
  pointer-events: auto !important;
}

#jgp-curadoras .project-index {
  pointer-events: auto !important;
}

#jgp-curadoras .project-index {
  list-style: none !important;
  padding-top: var(--gap-index-items) !important;
  padding-left: var(--pad-x) !important;
}

#jgp-curadoras .index-item {
  display: grid !important;
  grid-template-columns: 24px 1fr !important;
  padding: 0 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: background-color 0.15s ease !important;
  margin-bottom: var(--gap-index-items) !important;
}

#jgp-curadoras .index-item:hover {
  background-color: var(--color-bg-hover) !important;
}

#jgp-curadoras .index-item.active {
  background-color: transparent !important;
}

#jgp-curadoras .index-num {
  color: var(--color-muted) !important;
  font-size: 11px !important;
}

#jgp-curadoras .index-title {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  font-size: var(--font-size) !important;
}

#jgp-curadoras .index-meta {
  color: var(--color-muted) !important;
  font-weight: 400 !important;
  font-size: 11px !important;
}


/* ── COLUMNA DERECHA — PANELES ── */

#jgp-curadoras .col-right {
  flex: 1 !important;
  min-width: 0 !important;
}

#jgp-curadoras .project-panel {
  display: none !important;
}

#jgp-curadoras .project-panel.active {
  display: block !important;
}


/* ── CABECERA DEL PANEL ── */

#jgp-curadoras .panel-header {
  padding: var(--padding-panel-header) !important;
  border-bottom: 0px solid var(--color-border) !important;
}

#jgp-curadoras .panel-num {
  color: var(--color-muted) !important;
  font-size: 12px !important;
}

#jgp-curadoras .panel-title {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  font-size: var(--font-size) !important;
}

#jgp-curadoras .panel-subtitle {
  color: var(--color-muted) !important;
  font-weight: 400 !important;
  font-size: 12px !important;
}

/* Categorías (Fotografía, Instalación…) bajo el título: ocultas. Se
   dejan en el HTML por si se quieren volver a mostrar (basta con
   cambiar display:none por display:flex). */
#jgp-curadoras .panel-tags {
  display: none !important;
}

#jgp-curadoras .tag {
  color: var(--color-muted) !important;
}

#jgp-curadoras .tag::before {
  content: '— ' !important;
}


/* ── CUERPO DEL PANEL ── */

#jgp-curadoras .panel-body {
  padding: var(--padding-panel-body) !important;
}

#jgp-curadoras .content-block {
  margin-bottom: var(--gap-content-blocks) !important;
}

#jgp-curadoras .block-label {
  color: var(--color-muted) !important;
  margin-bottom: 4px !important;
  display: block !important;
}

#jgp-curadoras .block-text {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  line-height: 1.07 !important;
}
/* El reset de arriba (#jgp-curadoras *) fuerza Neue Haas en TODOS los
   descendientes, así que el font-family de .block-text no llegaba a los
   párrafos: hay que fijarlo sobre los <p> mismos. Solo el cuerpo de la
   descripción va en EB Garamond; títulos, labels (ES/EN), ficha y
   "Leer más" siguen en Neue Haas. */
#jgp-curadoras .block-text .block-text-content,
#jgp-curadoras .block-text .block-text-content * {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  line-height: 1.07 !important;
}
/* El texto en español puede venir SIN <p> (texto suelto con <br> dentro
   de .block-text-content, como quedó en Cargo), por eso la regla va
   sobre el contenedor y todo lo que tenga dentro, no solo sobre <p>.
   Mismo peso que ya tenían los <p>: ES 500, EN 300. */
#jgp-curadoras .lang-es .block-text-content,
#jgp-curadoras .lang-es .block-text-content * { font-weight: 500 !important; }
#jgp-curadoras .lang-en .block-text-content,
#jgp-curadoras .lang-en .block-text-content * { font-weight: 300 !important; }

/* ── Descripción a dos columnas — Español / English ── */
#jgp-curadoras .block-text-bilingual {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
}

#jgp-curadoras .lang-label {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  color: var(--color-muted) !important;
  display: block !important;
  margin-bottom: 4px !important;
}

#jgp-curadoras .lang-es .lang-label {
  color: var(--color-text) !important;
}

#jgp-curadoras .lang-es p {
  font-weight: 500 !important;
}

#jgp-curadoras .lang-en p {
  font-weight: 300 !important;
}

#jgp-curadoras .block-text p + p {
  margin-top: var(--gap-content-blocks) !important;
}

/* Colapsado a 4 líneas por default (el texto curatorial real puede
   ser un ensayo largo) — el botón "Leer más" lo expande. El botón
   solo se muestra si el texto real mide más de 4 líneas (ver JS); con
   el placeholder corto actual queda oculto. */
#jgp-curadoras .block-text-content {
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
#jgp-curadoras .block-text-bilingual.expanded .block-text-content {
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}
#jgp-curadoras .block-readmore {
  display: block !important;
  margin-top: 8px !important;
  background: none !important;
  border: none !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  color: var(--color-muted) !important;
  cursor: pointer !important;
  text-decoration: underline !important;
}
#jgp-curadoras .block-readmore:hover {
  color: var(--color-text) !important;
}
#jgp-curadoras .block-readmore[hidden] {
  display: none !important;
}


/* ── FICHA TÉCNICA ── */

/* Ficha técnica: oculta en todos los paneles (bloque completo, con su
   rótulo). Se deja en el HTML; para volver a mostrarla, borrar estas
   dos reglas. */
#jgp-curadoras .content-block:has(> .ficha-table),
#jgp-curadoras .ficha-table {
  display: none !important;
}

#jgp-curadoras .ficha-table {
  width: 100% !important;
  border-collapse: collapse !important;
}

#jgp-curadoras .ficha-table td {
  padding: 0 !important;
  vertical-align: top !important;
  font-family: var(--font-body) !important;
}

#jgp-curadoras .ficha-table td:first-child {
  color: var(--color-muted) !important;
  width: 120px !important;
  padding-right: 8px !important;
}

#jgp-curadoras .ficha-table tr + tr td {
  padding-top: 4px !important;
}


/* ── CURADURÍA ── */

#jgp-curadoras .curadora-block + .curadora-block {
  margin-top: var(--gap-content-blocks) !important;
}

#jgp-curadoras .curadora-block,
#jgp-curadoras .curadora-block * {
  font-family: var(--font-body) !important;
}

#jgp-curadoras .curadora-role {
  color: var(--color-muted) !important;
}


/* ── TIRA DE FOTOS ── */

#jgp-curadoras .photo-strip-wrap {
  margin-bottom: var(--gap-content-blocks) !important;
  margin-left: calc(var(--padding-panel-body) * -1) !important;
  margin-right: calc(var(--padding-panel-body) * -1) !important;
}

#jgp-curadoras .block-label-photos {
  color: var(--color-muted) !important;
  padding-left: var(--padding-panel-body) !important;
  margin-bottom: 4px !important;
  display: block !important;
}

#jgp-curadoras .photo-strip {
  display: flex !important;
  gap: 2px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  padding-bottom: 8px !important;
  cursor: grab !important;
  user-select: none !important;
  align-items: flex-start !important;
}

#jgp-curadoras .photo-strip:active {
  cursor: grabbing !important;
}

#jgp-curadoras .photo-strip::-webkit-scrollbar {
  display: none !important;
}

#jgp-curadoras .photo-item {
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

#jgp-curadoras .photo-item:first-child {
  padding-left: var(--padding-panel-body) !important;
}

#jgp-curadoras .photo-item:last-child {
  padding-right: var(--padding-panel-body) !important;
}


/* ── CONTENEDORES DE IMAGEN ──
   Editar --frame-height en las variables de arriba. El ancho de cada
   marco sale de --ratio (ancho/alto real de la foto) por la altura
   fija — así cada foto ocupa exactamente su proporción real, sin que
   object-fit:cover tenga que recortarla para llenar el marco.
   .vertical/.landscape quedan como el valor por default (3:4 y 16:9)
   para fotos placeholder sin datos reales todavía.

   Una foto real NO pisa ese default con un style inline — Cargo lo
   descarta al guardar la página (confirmado: el mismo problema que
   ya pasó con width/height en el media-item). Las clases CSS sí
   sobreviven siempre, así que cada foto real con proporción propia
   usa una clase .ratio-XX definida más abajo en vez de un estilo
   inline — DESPUÉS de .vertical/.landscape a propósito: como tienen
   la misma especificidad (una sola clase), gana la que aparece
   última en la hoja de estilos, y necesitamos que .ratio-XX le gane
   al default. */
#jgp-curadoras .photo-frame {
  background: var(--color-bg-frame) !important;
  overflow: hidden !important;
  height: var(--frame-height) !important;
  min-width: calc(var(--frame-height) * 0.75) !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

#jgp-curadoras .photo-frame.vertical {
  --ratio: 0.75;
}

#jgp-curadoras .photo-frame.landscape {
  --ratio: 1.778;
}


/* Wrappers que Cargo inserta alrededor de la imagen */
#jgp-curadoras .photo-frame > *:not(img),
#jgp-curadoras .photo-frame > * > *:not(img) {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  max-height: none !important;
}

/* La imagen */
#jgp-curadoras .photo-frame img {
  width: auto !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  max-height: none !important;
}


/* ── CAPTIONS ── */

#jgp-curadoras .photo-caption {
  color: var(--color-muted) !important;
}

#jgp-curadoras .photo-caption-title {
  color: var(--color-text) !important;
}


/* ── RESPONSIVE — mobile ── */

@media (max-width: 768px) {

  #jgp-curadoras { --pad-x: 12px; }

  #jgp-curadoras .columns {
    flex-direction: column !important;
  }

  #jgp-curadoras .col-left {
    width: 100% !important;
    border-right: none !important;
    border-bottom: var(--border-width) solid var(--color-border) !important;
  }

  #jgp-curadoras .block-text-bilingual {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

}