/* =====================================================================
   Rey de Reyes 2026 + Inauguración (Brayan, 2/11/2026 · opción A). Lo arma _fuente-v2/rdr26.py.
   Usa únicamente los colores y letras de identidad.css (sin curvas). Pósteres siempre completos.
   ===================================================================== */

/* Pósteres: siempre completos (nunca se recortan) */
.px-poster { margin: 0; }
.px-poster img { display: block; width: 100%; height: auto; box-shadow: 0 18px 40px rgb(var(--rgb-sombra) / .28); }

.px-tit { margin: 0; font: var(--peso-titulo) clamp(40px, 5.2vw, 80px)/.95 var(--f-titulo); letter-spacing: var(--espacio-titulo); }
.px-sub { margin: .45em 0 0; font: var(--peso-ligero) var(--t-chico)/1.3 var(--f-titulo); }
.px-datos { list-style: none; margin: 1.6em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 34px; }
.px-datos li { font: var(--peso-etiqueta) 11px/1.4 var(--f-etiqueta); letter-spacing: .2em; text-transform: uppercase; }
.px-datos b { display: block; margin-top: 6px; font: var(--peso-titulo) clamp(22px, 2vw, 30px)/1.1 var(--f-titulo); letter-spacing: 0; text-transform: none; }

/* Predicadores en miniatura (póster completo, proporción 4:5) */
.px-preds { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 1.8em 0 0; padding: 0; list-style: none; }
.px-pred { display: flex; align-items: center; gap: 14px; margin: 0; }
.px-pred img { width: 72px; height: 90px; object-fit: contain; display: block; background: var(--zc-tinta); }
.px-pred b { display: block; font: var(--peso-titulo) 22px/1.1 var(--f-titulo); }
.px-pred small { display: block; margin-top: 4px; font: var(--peso-etiqueta) 10.5px/1.3 var(--f-etiqueta); letter-spacing: .18em; text-transform: uppercase; opacity: .75; }

/* ---------- OPCIÓN A · franja justo debajo de la portada (fondo rojo arcilla, Brayan 2/11) ---------- */
.px-franja { background: var(--zc-chili-oil); color: var(--c-claro-sobre-noche); padding-block: clamp(48px, 6vw, 88px); }
.px-franja .envoltura { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 4.4vw, 72px); align-items: center; }
.px-franja .etiqueta { color: var(--zc-sand); margin-bottom: 1.1em; }
.px-franja .px-sub { color: var(--zc-sand); }
.px-franja .botones { margin-top: 2em; }
.px-franja-posters { display: grid; gap: clamp(14px, 1.6vw, 22px); }
@media (min-width: 861px) { .px-franja .envoltura { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); justify-content: center; } }
@media (max-width: 860px) { .px-franja .envoltura { grid-template-columns: 1fr; } }

/* ---------- EVENTOS · Rey de Reyes 2026 · Inauguración ---------- */
.px-ev { padding-bottom: clamp(72px, 9vw, 128px); }
.px-ev .etiqueta { color: var(--zc-sand); }
.px-ev-tit { margin: 0; font: var(--peso-gigante) clamp(56px, 9.5vw, 156px)/.88 var(--f-titulo); letter-spacing: var(--espacio-gigante); }
.px-ev-sub { margin: .5em 0 0; font: var(--peso-ligero) var(--t-medio)/1.2 var(--f-titulo); color: var(--zc-sand); }
.px-ev-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; margin-top: clamp(32px, 4vw, 56px); }
.px-ev-texto .medio { margin: 0; }
.px-ficha { margin: 1.8em 0 0; border-top: 1px solid var(--c-linea-noche); }
.px-ficha div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 6px 18px; padding: 14px 0; border-bottom: 1px solid var(--c-linea-noche); }
.px-ficha dt { font: var(--peso-etiqueta) 11px/1.6 var(--f-etiqueta); letter-spacing: .2em; text-transform: uppercase; color: var(--zc-sand); }
.px-ficha dd { margin: 0; font-size: 16px; line-height: 1.5; }
.px-ev-preds { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: clamp(16px, 2.4vw, 32px); }
.px-ev-preds figure { margin: 0; }
.px-ev-preds img { display: block; width: 100%; height: auto; }
.px-ev-preds figcaption { margin-top: 12px; font: var(--peso-titulo) 24px/1.1 var(--f-titulo); }
.px-ev-preds figcaption small { display: block; margin-top: 6px; font: var(--peso-etiqueta) 10.5px/1.3 var(--f-etiqueta); letter-spacing: .18em; text-transform: uppercase; color: var(--c-suave-sobre-noche); }
@media (max-width: 860px) {
  .px-ev-grid { grid-template-columns: 1fr; }
  .px-ficha div { grid-template-columns: 1fr; gap: 4px; }
}

/* Fotos de los pastores Hayes en el arco: un poco más grandes y con borde arena, para destacarlas */
.arco.vivo.listo .arco-foto.px-arco-dest { transform: translate(var(--x), var(--y)) rotate(var(--rot)) scale(1.32); z-index: 3; }
.arco-foto.px-arco-dest img { outline: 3px solid var(--zc-sand); outline-offset: -3px; }

/* Ajustes tras revisar las capturas (29/10) */
.px-ev-posters { display: grid; gap: clamp(14px, 2vw, 24px); }

/* ---------- EVENTOS · galería general «Momentos de Casa Zoe» (mosaico; las primeras, más grandes) ---------- */
.px-momentos { background: var(--c-fondo); padding-block: clamp(64px, 8vw, 120px); }
.px-mosaico { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15vw, 230px); gap: clamp(8px, 1vw, 14px); }
.px-mosaico figure { margin: 0; overflow: hidden; }
.px-mosaico img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.px-mosaico .px-m-xl { grid-column: span 2; grid-row: span 2; }
.px-mosaico .px-m-alta { grid-row: span 2; }
@media (max-width: 760px) {
  .px-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; }
  .px-mosaico .px-m-xl { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 767px) { .arco.vivo.listo .arco-foto.px-arco-dest { transform: translate(var(--x), var(--y)) rotate(var(--rot)) scale(1.2); } }
