/*
Theme Name:   Jesús Nos Hizo Libres
Theme URI:    https://elprofetafrances.com
Description:  Tema hijo de Twenty Twenty-Five con la identidad del Ministerio Internacional Jesús Nos Hizo Libres: negro dominante, azul real y dorado. Las tipografías se sirven desde este mismo servidor (sin Google), por cumplimiento del RGPD.
Author:       Ministerio Internacional Jesús Nos Hizo Libres
Template:     twentytwentyfive
Version:      6.10.3
Text Domain:  jnhl
*/

/* ============================================================
   ATAJOS
   theme.json define la paleta; aquí solo se le ponen nombres
   cortos, los mismos que usaba la maqueta, para que esta hoja
   sea una copia fiel de aquella.
   ============================================================ */
:root{
  --black:       var(--wp--preset--color--negro);
  --surface:     var(--wp--preset--color--superficie);
  --surface-2:   var(--wp--preset--color--superficie-2);
  --surface-3:   var(--wp--preset--color--superficie-3);
  --border:      var(--wp--preset--color--borde);
  --border-soft: var(--wp--preset--color--borde-suave);
  --royal:       var(--wp--preset--color--azul-real);
  --royal-deep:  var(--wp--preset--color--azul-profundo);
  --royal-glow:  var(--wp--preset--color--azul-brillo);
  --gold:        var(--wp--preset--color--dorado);
  --gold-light:  var(--wp--preset--color--dorado-claro);
  --gold-dim:    var(--wp--preset--color--dorado-oscuro);
  --text:        var(--wp--preset--color--texto);
  --text-soft:   var(--wp--preset--color--texto-suave);
  --text-mute:   var(--wp--preset--color--texto-tenue);
  --warn:        #E3C46A;

  --font-display: var(--wp--preset--font-family--playfair);
  --font-body:    var(--wp--preset--font-family--inter);

  --radius:    4px;
  --radius-lg: 8px;
  --dur:  .28s;
  --ease: cubic-bezier(.22,.61,.36,1);
}

body{ -webkit-font-smoothing: antialiased; }

::selection{ background: var(--gold); color: var(--black); }

:focus-visible{ outline: 3px solid var(--gold-light); outline-offset: 3px; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.01em;
  text-wrap: balance;
}

/* ============================================================
   ICONOS
   Se dibujan con máscaras CSS: la forma la pone la hoja de
   estilos y el color, background-color. Así el texto que los
   acompaña sigue siendo un bloque editable desde el panel.
   ============================================================ */
.jnhl-ico::before,
[class*="jnhl-ico-"]::before{
  content: '';
  display: block;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ============================================================
   BOTONES
   ============================================================ */
.wp-block-button__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 30px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: all var(--dur) var(--ease);
}

.is-style-jnhl-oro .wp-block-button__link{
  background: var(--gold);
  color: var(--black);
}
.is-style-jnhl-oro .wp-block-button__link:hover{
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -10px rgba(201,162,39,.5);
}

.is-style-jnhl-contorno .wp-block-button__link{
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.is-style-jnhl-contorno .wp-block-button__link:hover{
  border-color: var(--gold);
  color: var(--gold-light);
  transform: translateY(-2px);
}

/* Iconos dentro de botones concretos */
.jnhl-btn-play .wp-block-button__link::before,
.jnhl-btn-instagram .wp-block-button__link::before,
.jnhl-btn-facebook .wp-block-button__link::before,
.jnhl-btn-tiktok .wp-block-button__link::before,
.jnhl-btn-youtube .wp-block-button__link::before,
.jnhl-btn-paypal .wp-block-button__link::before,
.jnhl-btn-gps .wp-block-button__link::before{
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.jnhl-btn-play .wp-block-button__link::before{ -webkit-mask-image: var(--ico-play); mask-image: var(--ico-play); }
.jnhl-btn-youtube .wp-block-button__link::before{ -webkit-mask-image: var(--ico-youtube); mask-image: var(--ico-youtube); }
.jnhl-btn-paypal .wp-block-button__link::before{ -webkit-mask-image: var(--ico-paypal); mask-image: var(--ico-paypal); width:17px; height:17px; }
.jnhl-btn-gps .wp-block-button__link::before{ -webkit-mask-image: var(--ico-navigate); mask-image: var(--ico-navigate); }
.jnhl-btn-instagram .wp-block-button__link::before{ -webkit-mask-image: var(--ico-instagram); mask-image: var(--ico-instagram); }
.jnhl-btn-facebook .wp-block-button__link::before{ -webkit-mask-image: var(--ico-facebook); mask-image: var(--ico-facebook); }
.jnhl-btn-tiktok .wp-block-button__link::before{ -webkit-mask-image: var(--ico-tiktok); mask-image: var(--ico-tiktok); }

/* ============================================================
   BARRA DE AVISO SUPERIOR
   ============================================================ */
.jnhl-barra-prueba{
  background: var(--royal-deep);
  border-bottom: 1px solid var(--border-soft);
  padding: 9px 20px;
  text-align: center;
  font-size: 12px;
  color: var(--text-soft);
  letter-spacing: .02em;
}
.jnhl-barra-prueba p{ margin: 0; font-size: 12px; }
.jnhl-barra-prueba strong{ color: var(--warn); font-weight: 600; }

/* ============================================================
   CABECERA
   ============================================================ */
.jnhl-cabecera{
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(7,7,8,.9);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--border-soft);
}

.jnhl-cabecera .wp-block-site-logo img{
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* Arriba el tipo de casa, abajo el nombre: leido de corrido da
   "Ministerio Internacional Jesus Nos Hizo Libres". */
.jnhl-marca-tipo{
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 0 0 2px;
}
.jnhl-marca-nombre{
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.25;
  margin: 0;
}

/* Menú principal */
.jnhl-cabecera .wp-block-navigation{
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
}
.jnhl-cabecera .wp-block-navigation a{
  color: var(--text-soft);
  text-decoration: none;
  position: relative;
  padding-block: 6px;
}
.jnhl-cabecera .wp-block-navigation a::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width var(--dur) var(--ease);
}
.jnhl-cabecera .wp-block-navigation a:hover{ color: var(--text); }
.jnhl-cabecera .wp-block-navigation a:hover::after{ width: 100%; }
.jnhl-cabecera .wp-block-navigation .current-menu-item a{ color: var(--gold-light); }
.jnhl-cabecera .wp-block-navigation .current-menu-item a::after{
  width: 100%;
  background: var(--gold-light);
}

/* Selector de idioma */
.jnhl-idiomas ul{
  display: flex;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.jnhl-idiomas li{ margin: 0; }
.jnhl-idiomas a{
  display: block;
  padding: 8px 11px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
  text-decoration: none;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.jnhl-idiomas a:hover{ color: var(--text); background: var(--surface-2); }
.jnhl-idiomas .current-lang a{ background: var(--gold); color: var(--black); }

/* ============================================================
   PORTADA — BLOQUE DE ENTRADA
   ============================================================ */
.jnhl-hero{
  position: relative;
  overflow: hidden;
  min-height: min(88vh, 780px);
  display: grid;
  align-content: center;
  text-align: center;
  border-bottom: 1px solid var(--border-soft);
  padding-block: clamp(56px,7vh,100px) clamp(52px,6.5vh,90px);
}
.jnhl-hero::before{
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--royal-glow) 0%, transparent 55%),
    radial-gradient(90% 70% at 50% 110%, var(--royal-deep) 0%, transparent 60%),
    var(--black);
  opacity: .75;
}
.jnhl-hero::after{
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 78px 78px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 100%);
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 100%);
}
.jnhl-hero > *{ position: relative; z-index: 2; }

/* El monograma AP va detrás del logo del hero. Se pinta como
   máscara para poder darle el dorado de la marca en lugar del negro
   del archivo, y va a baja opacidad: tiene que acompañar al logo, no
   competir con él. */
.jnhl-hero-mark{ position: relative; }
.jnhl-hero-mark::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(230px, 24vw, 330px);
  aspect-ratio: 900 / 576;
  background-color: var(--gold);
  -webkit-mask-image: url('assets/img/monograma-ap.png');
  mask-image: url('assets/img/monograma-ap.png');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: .26;
  pointer-events: none;
}

.jnhl-hero-mark img{
  position: relative;
  z-index: 1;
  width: clamp(120px,12vw,164px);
  height: auto;
  opacity: .92;
  margin-inline: auto;
}

.jnhl-hero h1{
  font-size: clamp(27px,6.4vw,68px);
  font-weight: 400;
  letter-spacing: -.02em;
  margin-bottom: 8px;
  overflow-wrap: break-word;
}
.jnhl-hero h1 em,
h1 em, h2 em{ font-style: italic; color: var(--gold-light); }

/* Antetítulo con filetes a los lados */
.jnhl-antetitulo{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 26px;
}
.jnhl-antetitulo::before,
.jnhl-antetitulo::after{
  content: '';
  width: 30px;
  height: 1px;
  background: var(--gold-dim);
}

.jnhl-lead{
  max-width: 600px;
  margin-inline: auto;
  color: var(--text-soft);
  font-size: clamp(15px,1.6vw,18px);
  font-weight: 300;
}

/* Cabecera de las páginas interiores */
.jnhl-portadilla{
  position: relative;
  overflow: hidden;
  text-align: center;
  border-bottom: 1px solid var(--border-soft);
  padding-block: 96px 76px;
}
.jnhl-portadilla::before{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(100% 130% at 50% 0%, var(--royal) 0%, transparent 62%), var(--black);
  opacity: .6;
}
.jnhl-portadilla > *{ position: relative; z-index: 2; }
.jnhl-portadilla h1{ font-size: clamp(30px,4.6vw,52px); font-weight: 400; }
.jnhl-portadilla .jnhl-lead{ max-width: 620px; margin-top: 20px; }

/* ============================================================
   SECCIONES
   ============================================================ */
.jnhl-seccion{ padding-block: 96px; }
.jnhl-seccion-corta{ padding-block: 68px; }
.jnhl-superficie{
  background: var(--surface);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.jnhl-encabezado{
  max-width: 660px;
  margin: 0 auto 60px;
  text-align: center;
}
.jnhl-encabezado-izq{
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto 60px;
  text-align: left;
}
.jnhl-encabezado-izq > *{
  max-width: 660px;
  margin-left: 0;
  margin-right: auto;
}
.jnhl-encabezado h2,
.jnhl-encabezado-izq h2{ font-size: clamp(26px,3.4vw,40px); font-weight: 400; }
.jnhl-encabezado p:not([class*="jnhl-"]),
.jnhl-encabezado-izq p:not([class*="jnhl-"]){
  color: var(--text-soft);
  margin-top: 18px;
  font-weight: 300;
  font-size: 16px;
}
.jnhl-encabezado-izq .jnhl-antetitulo{ justify-content: flex-start; }

/* Filete corto. Tiene que ganar a la anchura por defecto que
   WordPress impone a los separadores, de ahí la doble clase. */
.wp-block-separator.jnhl-filete{
  width: 44px;
  max-width: 44px;
  height: 1px;
  background: var(--gold);
  border: 0;
  opacity: 1;
  margin: 0 auto 24px;
}
.jnhl-encabezado-izq .wp-block-separator.jnhl-filete{
  margin-left: 0;
  margin-right: 0;
}

/* ============================================================
   TIRA DE INFORMACIÓN PRÁCTICA
   ============================================================ */
.jnhl-datos{
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
}
.jnhl-datos .wp-block-columns{ gap: 0; margin: 0; }
.jnhl-dato{
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 36px 28px;
  border-right: 1px solid var(--border-soft);
}
.jnhl-dato:last-child{ border-right: none; }
.jnhl-dato::before{
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--gold);
}
.jnhl-dato h3{
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 0 0 6px;
}
.jnhl-dato p:not([class*="jnhl-"]){ margin: 0; font-size: 14.5px; color: var(--text); }
@media (max-width: 860px){
  .jnhl-dato{
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
    padding: 26px 20px;
  }
}

/* El icono va sobre el contenedor, y el texto de dentro queda
   como bloques normales que se pueden editar. */
.jnhl-ico-clock::before{ -webkit-mask-image: var(--ico-clock); mask-image: var(--ico-clock); }
.jnhl-ico-pin::before{ -webkit-mask-image: var(--ico-pin); mask-image: var(--ico-pin); }
.jnhl-ico-chat::before{ -webkit-mask-image: var(--ico-chat); mask-image: var(--ico-chat); }
.jnhl-ico-mail::before{ -webkit-mask-image: var(--ico-mail); mask-image: var(--ico-mail); }
.jnhl-ico-music::before{ -webkit-mask-image: var(--ico-music); mask-image: var(--ico-music); }
.jnhl-ico-kids::before{ -webkit-mask-image: var(--ico-kids); mask-image: var(--ico-kids); }
.jnhl-ico-youth::before{ -webkit-mask-image: var(--ico-youth); mask-image: var(--ico-youth); }
.jnhl-ico-rings::before{ -webkit-mask-image: var(--ico-rings); mask-image: var(--ico-rings); }
.jnhl-ico-globe::before{ -webkit-mask-image: var(--ico-globe); mask-image: var(--ico-globe); }
.jnhl-ico-book::before{ -webkit-mask-image: var(--ico-book); mask-image: var(--ico-book); }
.jnhl-ico-shield::before{ -webkit-mask-image: var(--ico-shield); mask-image: var(--ico-shield); }
.jnhl-ico-person::before{ -webkit-mask-image: var(--ico-person); mask-image: var(--ico-person); }
.jnhl-ico-play::before{ -webkit-mask-image: var(--ico-play); mask-image: var(--ico-play); }
.jnhl-ico-paypal::before{ -webkit-mask-image: var(--ico-paypal); mask-image: var(--ico-paypal); }
.jnhl-ico-navigate::before{ -webkit-mask-image: var(--ico-navigate); mask-image: var(--ico-navigate); }
.jnhl-ico-facebook::before{ -webkit-mask-image: var(--ico-facebook); mask-image: var(--ico-facebook); }
.jnhl-ico-instagram::before{ -webkit-mask-image: var(--ico-instagram); mask-image: var(--ico-instagram); }
.jnhl-ico-tiktok::before{ -webkit-mask-image: var(--ico-tiktok); mask-image: var(--ico-tiktok); }
.jnhl-ico-youtube::before{ -webkit-mask-image: var(--ico-youtube); mask-image: var(--ico-youtube); }

/* ============================================================
   CONTENIDO PENDIENTE
   ============================================================ */
.jnhl-pendiente{
  border: 1px dashed var(--gold-dim);
  border-radius: var(--radius);
  background: linear-gradient(var(--surface-2), var(--surface));
  padding: 26px 28px;
  color: var(--text-soft);
  font-size: 14.5px;
}
.jnhl-pendiente p:not([class*="jnhl-"]){ font-size: 14.5px; }
.jnhl-pendiente strong{ color: var(--text); font-weight: 600; }
.jnhl-etiqueta{
  display: inline-block;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--warn);
  border: 1px solid var(--gold-dim);
  padding: 3px 9px;
  border-radius: 3px;
  margin: 0 0 12px;
}

/* ============================================================
   TARJETAS DE SIERVOS
   ============================================================ */
.jnhl-servants .wp-block-column{ min-width: 0; }

.jnhl-servant{
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.jnhl-servant:hover,
.jnhl-servant:focus-within{ border-color: var(--gold-dim); transform: translateY(-4px); }
.jnhl-servant.is-open{ border-color: var(--gold-dim); transform: none; }

.jnhl-frame{
  position: relative;
  aspect-ratio: 4/5;
  background: #0A0A0A;
  overflow: hidden;
}
.jnhl-frame-ancho{ aspect-ratio: 5/4; }

.jnhl-photo{ margin: 0; height: 100%; }
.jnhl-photo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  transition: transform .6s var(--ease), filter var(--dur) var(--ease);
}

/* Botón transparente que cubre el retrato: es el disparador */
.jnhl-toggle{
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.jnhl-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.jnhl-frame:hover .jnhl-overlay,
.jnhl-toggle:focus-visible ~ .jnhl-overlay{ opacity: 1; }
.jnhl-frame:hover .jnhl-photo img,
.jnhl-toggle:focus-visible ~ .jnhl-photo img{
  transform: scale(1.03);
  filter: brightness(.34) saturate(.7);
}

.jnhl-initials{
  font-family: var(--font-display);
  font-size: clamp(58px,9vw,88px);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--gold-light);
  line-height: 1;
  margin: 0;
  transform: translateY(10px);
  transition: transform .45s var(--ease);
}
.jnhl-nombre{
  font-family: var(--font-display);
  font-size: clamp(24px,3.2vw,32px);
  font-weight: 500;
  color: var(--gold-light);
  line-height: 1.2;
  text-wrap: balance;
  margin: 0;
  transform: translateY(10px);
  transition: transform .45s var(--ease);
}
.jnhl-frame:hover .jnhl-initials,
.jnhl-frame:hover .jnhl-nombre{ transform: translateY(0); }

/* Filete entre el nombre y el cargo */
.jnhl-overlay .jnhl-divisor{
  width: 36px;
  height: 1px;
  max-width: 36px;
  background: var(--gold-dim);
  border: 0;
  opacity: 1;
  margin: 0 auto;
}

.jnhl-role{
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0;
}

.jnhl-hint{
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 14px;
}

/* Panel de biografía: ocupa exactamente el hueco del retrato,
   de modo que la fila de redes queda siempre visible debajo */
/* Fondo atenuado mientras la biografia esta abierta. */
.jnhl-servant.is-open::before{
  content: '';
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(4,4,5,.8);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: jnhlBioIn .25s var(--ease) both;
}

.jnhl-bio{
  position: fixed;
  z-index: 81;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(680px, calc(100vw - 36px));
  max-height: min(84vh, 820px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(165deg, var(--royal-deep) 0%, var(--surface) 65%);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 48px 46px 40px;
  text-align: center;
  animation: jnhlBioIn .3s var(--ease) both;

  /* Cerrada de partida: solo se abre al pulsar el retrato. */
  display: none;
}
.jnhl-servant.is-open .jnhl-bio{ display: flex; }

/* Mientras hay una biografia abierta, la pagina de detras no se mueve. */
body.jnhl-bio-abierta{ overflow: hidden; }

/* El texto largo se lee alineado a la izquierda; el nombre y el cargo
   siguen centrados, como el encabezado de una ficha. */
.jnhl-bio p:not([class*="jnhl-"]){
  align-self: stretch;
  text-align: left;
  margin: 0;
  color: var(--text-soft);
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.7;
}
.jnhl-bio .jnhl-remate{
  align-self: stretch;
  text-align: left;
  margin-top: 6px;
  font-size: 17px;
}
.jnhl-bio .jnhl-divisor{ margin: 4px auto 6px; }

@media (max-width: 600px){
  .jnhl-bio{ padding: 36px 24px 30px; }
}
@keyframes jnhlBioIn{ from{ opacity: 0; } to{ opacity: 1; } }

.jnhl-bio-initials{
  font-family: var(--font-display);
  font-size: clamp(46px,7vw,64px);
  color: var(--gold-light);
  line-height: 1;
  letter-spacing: .06em;
  margin: 0;
}
.jnhl-bio-nombre{
  font-family: var(--font-display);
  font-size: clamp(22px,2.8vw,30px);
  color: var(--gold-light);
  line-height: 1.25;
  text-wrap: balance;
  margin: 0;
}
.jnhl-bio .jnhl-role{ color: var(--text-mute); }
.jnhl-bio-text{
  margin: 6px 0 0;
  color: var(--text-soft);
  font-size: 16px;
}

.jnhl-cerrar{
  margin-top: auto;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-soft);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 11px 22px;
  min-height: 44px;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.jnhl-cerrar:hover{ border-color: var(--gold-dim); color: var(--gold-light); }

/* Redes personales, bajo el retrato */
.jnhl-servant .wp-block-social-links{
  justify-content: center;
  gap: 6px;
  padding: 14px 16px;
  margin: 0;
  border-top: 1px solid var(--border-soft);
}
.jnhl-servant .wp-block-social-link{ margin: 0; }
.jnhl-servant .wp-social-link a{
  color: var(--text-mute);
  padding: 12px;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.jnhl-servant .wp-social-link:hover a{ color: var(--gold-light); background: var(--surface-2); }

.jnhl-pista{
  text-align: center;
  color: var(--text-mute);
  font-size: 12.5px;
  letter-spacing: .04em;
  margin-top: 26px;
}

/* ============================================================
   PIRÁMIDE DE LIDERAZGO
   Fila 1 (vértice): anciano y anciana, tarjetas estrechas.
   Fila 2 (base):    parejas pastorales, más anchas.
   La base admite 2, 3 o más: se reparten y recentran solas.
   ============================================================ */
.jnhl-tier{
  display: flex;
  justify-content: center;
  gap: 34px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}
.jnhl-tier:last-of-type{ margin-bottom: 0; }
.jnhl-estrecha{ flex: 0 0 auto; width: 100%; max-width: 300px; }
.jnhl-ancha{ flex: 1 1 300px; max-width: 420px; min-width: 260px; }

@media (max-width: 820px){
  .jnhl-tier{ gap: 26px; }
  .jnhl-estrecha{ max-width: 250px; }
}
@media (max-width: 600px){
  .jnhl-estrecha, .jnhl-ancha{ flex: 1 1 100%; max-width: 400px; }
  .jnhl-ancha .jnhl-frame{ aspect-ratio: 4/5; }
}

/* ============================================================
   REJILLA DE MINISTERIOS
   ============================================================ */
.jnhl-rejilla{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
}
.jnhl-celda{
  background: var(--surface);
  padding: 38px 30px;
  transition: background var(--dur) var(--ease);
}
.jnhl-celda:hover{ background: var(--surface-2); }
.jnhl-celda::before{
  width: 26px;
  height: 26px;
  margin-bottom: 18px;
  color: var(--gold);
}
.jnhl-celda h3{ font-size: 20px; margin: 0 0 10px; }
.jnhl-celda p:not([class*="jnhl-"]){ margin: 0; color: var(--text-mute); font-size: 14.5px; }

/* ============================================================
   PRIMEROS PASOS
   ============================================================ */
.jnhl-pasos{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
}
@media (max-width: 820px){ .jnhl-pasos{ grid-template-columns: 1fr; } }
.jnhl-paso{ background: var(--surface); padding: 42px 34px; }
.jnhl-num{
  font-family: var(--font-display);
  font-size: 44px;
  color: var(--surface-3);
  line-height: 1;
  margin: 0 0 14px;
  transition: color var(--dur) var(--ease);
}
.jnhl-paso:hover .jnhl-num{ color: var(--gold-dim); }
.jnhl-paso h3{ font-size: 21px; margin: 0 0 10px; }
.jnhl-paso p:not([class*="jnhl-"]){ margin: 0; color: var(--text-mute); font-size: 14.5px; }

/* ============================================================
   TABLAS
   ============================================================ */
.wp-block-table{ margin-block: 0; }
.wp-block-table table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.wp-block-table thead th{
  background: var(--surface-2);
  color: var(--text-mute);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: left;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
}
.wp-block-table tbody td{
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-soft);
}
.wp-block-table tbody tr:last-child td{ border-bottom: none; }
.wp-block-table tbody tr:hover td{ background: var(--surface-2); color: var(--text); }
.wp-block-table em{ color: var(--text-mute); font-style: italic; }

/* ============================================================
   EVENTOS
   ============================================================ */
.jnhl-evento{
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  margin-bottom: 18px;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* El cartel del evento. Se recorta a 16:9 pase lo que pase, de modo que
   una imagen mal medida no descoloque la tarjeta. */
.jnhl-evento-portada{
  margin: 0;
  border-bottom: 1px solid var(--border-soft);
}
.jnhl-evento-portada img{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* La fila de siempre: banda de fecha a la izquierda y datos a la derecha. */
.jnhl-evento-fila{
  display: flex;
  gap: 0;
}

/* Alojamiento cercano, al pie de cada evento. */
.jnhl-evento-alojamiento{
  padding: 26px 28px 30px;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-2);
}
.jnhl-evento-subtitulo{
  margin: 0 0 18px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-mute);
}
/* Tres en fila exactas: con la rejilla automática caben cuatro y el
   tercer hotel dejaba un hueco vacío a la derecha. */
.jnhl-evento-alojamiento .jnhl-hoteles{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 760px){
  .jnhl-evento-alojamiento .jnhl-hoteles{ grid-template-columns: 1fr; }
}
.jnhl-evento-alojamiento .jnhl-hotel{
  padding: 20px 18px;
  border-radius: var(--radius);
  background: var(--surface);
}
.jnhl-evento-alojamiento .jnhl-hotel h3{ font-size: 16px; }

@media (max-width: 700px){
  .jnhl-evento-alojamiento{ padding: 22px 18px 26px; }
}
.jnhl-evento:hover{ border-color: var(--gold-dim); transform: translateX(4px); }
.jnhl-evento-fecha{
  flex-shrink: 0;
  width: 110px;
  background: var(--surface-2);
  border-right: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 12px;
  text-align: center;
}
.jnhl-evento-fecha .d{
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--gold-light);
  line-height: 1;
  margin: 0;
}
.jnhl-evento-fecha .m{
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 6px 0 0;
}
.jnhl-evento-cuerpo{ padding: 24px 28px; flex: 1; }
.jnhl-evento-cuerpo h3{ font-size: 20px; margin: 0 0 8px; }
.jnhl-evento-meta{
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  color: var(--text-mute);
  font-size: 13px;
  margin: 0 0 10px;
}
.jnhl-evento-meta span{ display: inline-flex; align-items: center; gap: 7px; }
.jnhl-evento-meta span::before{
  content: '';
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: var(--gold-dim);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.jnhl-evento-meta .hora::before{ -webkit-mask-image: var(--ico-clock); mask-image: var(--ico-clock); }
.jnhl-evento-meta .lugar::before{ -webkit-mask-image: var(--ico-pin); mask-image: var(--ico-pin); }
.jnhl-evento-cuerpo p:not([class*="jnhl-"]){ margin: 0; color: var(--text-soft); font-size: 14.5px; }
.jnhl-chip{
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--warn);
  border: 1px solid var(--gold-dim);
  padding: 3px 8px;
  border-radius: 3px;
  margin-left: 12px;
  vertical-align: middle;
}
@media (max-width: 600px){
  .jnhl-evento{ flex-direction: column; }
  .jnhl-evento-fecha{
    width: 100%;
    flex-direction: row;
    gap: 10px;
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
    padding: 14px;
  }
  .jnhl-evento-fecha .m{ margin-top: 0; }
}

/* ============================================================
   EN VIVO
   ============================================================ */
.jnhl-directo{
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(160deg, var(--royal-deep) 0%, var(--surface) 60%);
}
.jnhl-pantalla{
  aspect-ratio: 16/9;
  background: #050505;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 32px;
  text-align: center;
}
.jnhl-pantalla::before{
  content: '';
  width: 74px;
  height: 74px;
  border: 1px solid var(--gold-dim);
  border-radius: 50%;
  background-color: var(--gold);
  -webkit-mask-image: var(--ico-play);
  mask-image: var(--ico-play);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 26px 26px;
  mask-size: 26px 26px;
}
.jnhl-pantalla p:not([class*="jnhl-"]){ color: var(--text-mute); font-size: 13.5px; max-width: 440px; margin: 0; }

.jnhl-directo-pie{
  padding: 30px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
}
.jnhl-directo-pie h3{ font-size: 22px; margin: 0 0 6px; }
.jnhl-directo-pie p:not([class*="jnhl-"]){ margin: 0; color: var(--text-mute); font-size: 14px; }
.jnhl-punto{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.jnhl-punto::before{
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-mute);
}

/* Cuando hay retransmisión, la pantalla la ocupa el reproductor: se
   quita el botón de play dibujado, que ahí sobra. */
.jnhl-pantalla-viva{
  padding: 0;
  gap: 0;
  background: #000;
}
.jnhl-pantalla-viva::before{ content: none; }
.jnhl-pantalla-viva iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* El punto rojo del directo. Late despacio: llama la atención sin
   convertirse en una molestia si alguien deja la página abierta. */
.jnhl-punto-vivo{ color: var(--text); }
.jnhl-punto-vivo::before{
  background: #E5484D;
  box-shadow: 0 0 0 0 rgba(229, 72, 77, .65);
  animation: jnhl-latido 2.4s ease-out infinite;
}

@keyframes jnhl-latido{
  70%  { box-shadow: 0 0 0 9px rgba(229, 72, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); }
}

/* Quien pide menos animación, no la tiene. */
@media (prefers-reduced-motion: reduce){
  .jnhl-punto-vivo::before{ animation: none; }
}

/* ============================================================
   DONACIONES
   ============================================================ */
.jnhl-donacion{
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 44px 38px;
  text-align: center;
  max-width: 520px;
  margin-inline: auto;
  transition: border-color var(--dur) var(--ease);
}
.jnhl-donacion:hover{ border-color: var(--gold-dim); }
.jnhl-donacion::before{
  width: 38px;
  height: 38px;
  margin: 0 auto 20px;
  color: var(--gold);
}
.jnhl-donacion h3{ font-size: 26px; margin: 0 0 12px; }
.jnhl-donacion p:not([class*="jnhl-"]){ color: var(--text-soft); font-size: 15px; }
.jnhl-donacion .wp-block-buttons{ margin-top: 26px; }
.jnhl-donacion .wp-block-button{ width: 100%; }
.jnhl-donacion .wp-block-button__link{ width: 100%; }

.jnhl-seguro{
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border-left: 2px solid var(--gold);
  background: var(--surface-2);
  padding: 24px 28px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-top: 38px;
}
.jnhl-seguro::before{
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--gold);
}
.jnhl-seguro p:not([class*="jnhl-"]){ margin: 0; color: var(--text-soft); font-size: 14px; }
.jnhl-seguro strong{ color: var(--text); }

/* ============================================================
   MAPA
   Carga diferida: no se contacta con Google hasta que el
   visitante lo pide. Requisito razonable bajo el RGPD.
   ============================================================ */
.jnhl-mapa{
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}
.jnhl-mapa-lienzo{ position: relative; aspect-ratio: 16/9; background: var(--surface-2); }
@media (max-width: 700px){ .jnhl-mapa-lienzo{ aspect-ratio: 4/3; } }
.jnhl-mapa-lienzo iframe{ width: 100%; height: 100%; border: 0; display: block; }

.jnhl-mapa-boton{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.012) 14px 28px),
    var(--surface-2);
  border: none;
  cursor: pointer;
  color: var(--text-soft);
  font-family: var(--font-body);
  padding: 24px;
  text-align: center;
  transition: background var(--dur) var(--ease);
}
.jnhl-mapa-boton:hover{ background: var(--surface-3); }
.jnhl-mapa-boton::before{
  content: '';
  width: 30px;
  height: 30px;
  background-color: var(--gold);
  -webkit-mask-image: var(--ico-pin);
  mask-image: var(--ico-pin);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.jnhl-mapa-boton .t{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
}
.jnhl-mapa-boton .s{ font-size: 12.5px; color: var(--text-mute); max-width: 36ch; }

.jnhl-mapa-pie{
  padding: 26px 30px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
}
.jnhl-mapa-pie h3{ font-size: 19px; margin: 0 0 5px; }
.jnhl-mapa-pie p:not([class*="jnhl-"]){ margin: 0; color: var(--text-mute); font-size: 14px; }
.jnhl-mapa-pie a{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 30px;
  border-radius: var(--radius);
  background: var(--gold);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all var(--dur) var(--ease);
}
.jnhl-mapa-pie a::before{
  content: '';
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-image: var(--ico-navigate);
  mask-image: var(--ico-navigate);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.jnhl-mapa-pie a:hover{ background: var(--gold-light); transform: translateY(-2px); }

/* ============================================================
   HOTELES CERCANOS
   ============================================================ */
.jnhl-hoteles{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.jnhl-hotel{
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.jnhl-hotel:hover{ border-color: var(--gold-dim); transform: translateY(-3px); }
.jnhl-hotel h3{ font-size: 18px; line-height: 1.3; margin: 0; }
.jnhl-hotel-dir{ margin: 0; color: var(--text-mute); font-size: 14px; flex: 1; }
.jnhl-hotel-enlace{ margin: 6px 0 0; }
.jnhl-hotel-enlace a{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--gold);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  min-height: 44px;
}
.jnhl-hotel-enlace a::before{
  content: '';
  width: 15px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask-image: var(--ico-navigate);
  mask-image: var(--ico-navigate);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.jnhl-hotel-enlace a:hover{ color: var(--gold-light); }
.jnhl-hotel-nota{
  margin-top: 28px;
  text-align: center;
  color: var(--text-mute);
  font-size: 12.5px;
  font-style: italic;
}

/* ============================================================
   FORMULARIOS
   ============================================================ */
.jnhl-formulario{ display: grid; gap: 22px; }
.jnhl-campo{ display: grid; gap: 8px; }
.jnhl-campo label{
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.jnhl-campo input,
.jnhl-campo textarea{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 14px 16px;
  min-height: 50px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.jnhl-campo textarea{ resize: vertical; min-height: 130px; }
.jnhl-campo input:focus,
.jnhl-campo textarea:focus{ border-color: var(--gold-dim); background: var(--surface-3); }
.jnhl-campo input::placeholder,
.jnhl-campo textarea::placeholder{ color: #55555C; }
.jnhl-form-nota{ color: var(--text-mute); font-size: 12.5px; margin: 0; }

/* ============================================================
   CONTACTO
   ============================================================ */
.jnhl-contacto-lista{ display: grid; gap: 26px; margin-bottom: 40px; }
.jnhl-contacto-item{ display: flex; gap: 16px; align-items: flex-start; }
.jnhl-contacto-item::before{
  width: 19px;
  height: 19px;
  margin-top: 2px;
  color: var(--gold);
}
.jnhl-contacto-item h3{
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 0 0 5px;
}
.jnhl-contacto-item p:not([class*="jnhl-"]){ margin: 0; font-size: 15px; color: var(--text); }

.jnhl-redes{ display: grid; gap: 10px; }
.jnhl-red{
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 14px 18px;
  background: var(--surface);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  min-height: 52px;
  color: var(--text-soft);
}
.jnhl-red:hover{ border-color: var(--gold-dim); background: var(--surface-2); }
.jnhl-red::before{
  width: 19px;
  height: 19px;
  color: var(--text-soft);
}
.jnhl-red:hover::before{ color: var(--gold); }
.jnhl-red .nombre{ font-size: 14.5px; color: var(--text); flex-shrink: 0; }
.jnhl-red .estado{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--gold);
}
.jnhl-red .estado::before{
  content: '';
  width: 14px;
  height: 14px;
  background-color: var(--gold);
  -webkit-mask-image: var(--ico-check);
  mask-image: var(--ico-check);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ============================================================
   LLAMADA FINAL
   ============================================================ */
.jnhl-llamada{
  position: relative;
  overflow: hidden;
  text-align: center;
  border-top: 1px solid var(--border-soft);
  padding-block: 100px;
}
.jnhl-llamada::before{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 120% at 50% 100%, var(--royal) 0%, transparent 60%), var(--black);
  opacity: .7;
}
.jnhl-llamada > *{ position: relative; z-index: 2; }
.jnhl-llamada h2{ font-size: clamp(26px,3.6vw,42px); font-weight: 400; margin-bottom: 18px; }
.jnhl-llamada .jnhl-lead{ max-width: 520px; margin: 0 auto 36px; }

/* ============================================================
   PIE
   ============================================================ */
.jnhl-pie{
  background: #040405;
  border-top: 1px solid var(--border-soft);
  padding: 76px 0 32px;
}
.jnhl-pie .wp-block-site-logo img{ width: 52px; height: auto; opacity: .85; margin-bottom: 20px; }
.jnhl-pie-marca{ font-family: var(--font-display); font-size: 17px; color: var(--text); margin: 0 0 10px; max-width: 260px; }
.jnhl-pie-lugar{ color: var(--text-mute); font-size: 13.5px; max-width: 290px; margin: 0; }
.jnhl-lema{
  color: var(--gold);
  font-style: italic;
  font-family: var(--font-display);
  font-size: 15px;
  margin-top: 16px;
}
.jnhl-pie h4{
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 20px;
}
.jnhl-pie p:not([class*="jnhl-"]){ font-size: 14px; margin: 0; }
.jnhl-pie a{
  display: block;
  text-decoration: none;
  color: var(--text-mute);
  font-size: 14px;
  padding: 7px 0;
  transition: color var(--dur) var(--ease);
}
.jnhl-pie a:hover{ color: var(--gold-light); }
.jnhl-pie-texto{ color: var(--text-mute); font-size: 14px; padding: 7px 0; }

.jnhl-pie .wp-block-social-links{ gap: 6px; margin-top: 20px; }
.jnhl-pie .wp-social-link a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  color: var(--text-mute);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.jnhl-pie .wp-social-link:hover a{ color: var(--gold-light); border-color: var(--gold-dim); }

.jnhl-pie-cierre{
  border-top: 1px solid var(--border-soft);
  margin-top: 56px;
  padding-top: 26px;
  color: #5A5A5F;
  font-size: 12.5px;
}
.jnhl-pie-cierre p:not([class*="jnhl-"]){ margin: 0; font-size: 12.5px; color: #5A5A5F; }

/* ============================================================
   IMÁGENES
   ============================================================ */
.wp-block-image img{ border-radius: var(--radius); }

/* ============================================================
   RESPETO POR QUIEN REDUCE LAS ANIMACIONES
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   ICONOS
   Los mismos dibujos de la maqueta, servidos como mascaras CSS.
   El color lo da background-color, no el propio SVG.
   Generado a partir de site.js; no editar a mano.
   ============================================================ */
:root{
  --ico-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --ico-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 12-8 12s-8-7-8-12a8 8 0 0116 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --ico-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 01-9 8.4 8.5 8.5 0 01-3.8-.9L3 21l1.9-5.1A8.4 8.4 0 0121 11.5z'/%3E%3C/svg%3E");
  --ico-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
  --ico-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E");
  --ico-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8.4-8 9.5C7.5 20.4 4 17 4 12V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
  --ico-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
  --ico-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  --ico-music: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E");
  --ico-kids: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M5 21c0-4 3.1-6.5 7-6.5s7 2.5 7 6.5'/%3E%3C/svg%3E");
  --ico-youth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Ccircle cx='17' cy='9' r='2.6'/%3E%3Cpath d='M3 20c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5'/%3E%3Cpath d='M16 14.6c2.9.2 5 2.3 5 5.4'/%3E%3C/svg%3E");
  --ico-rings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='14' r='5.5'/%3E%3Ccircle cx='15' cy='14' r='5.5'/%3E%3C/svg%3E");
  --ico-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 3.8 5.8 3.8 9S14.5 18.3 12 21c-2.5-2.7-3.8-5.8-3.8-9S9.5 5.7 12 3z'/%3E%3C/svg%3E");
  --ico-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A2.5 2.5 0 016.5 3H20v15H6.5A2.5 2.5 0 004 20.5z'/%3E%3Cpath d='M4 20.5A2.5 2.5 0 016.5 18H20v3H6.5'/%3E%3C/svg%3E");
  --ico-navigate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l18-8-8 18-2.2-7.8z'/%3E%3C/svg%3E");
  --ico-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.8'/%3E%3Cpath d='M4.5 21c0-4.1 3.4-6.8 7.5-6.8s7.5 2.7 7.5 6.8'/%3E%3C/svg%3E");
  --ico-couple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='3.2'/%3E%3Ccircle cx='16' cy='8' r='3.2'/%3E%3Cpath d='M2 20.5c0-3.4 2.7-5.6 6-5.6s6 2.2 6 5.6'/%3E%3Cpath d='M14.4 15.2c.5-.2 1-.3 1.6-.3 3.3 0 6 2.2 6 5.6'/%3E%3C/svg%3E");
  --ico-facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M22 12a10 10 0 10-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0022 12z'/%3E%3C/svg%3E");
  --ico-instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='3.8'/%3E%3Ccircle cx='17.2' cy='6.8' r='1.1' fill='currentColor' stroke='none'/%3E%3C/svg%3E");
  --ico-tiktok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M16.5 3c.4 2.2 1.7 3.7 3.9 3.9v2.7c-1.4.1-2.7-.3-3.9-1.1v5.9c0 3.6-2.6 6.1-6 5.9-2.9-.2-5.1-2.6-5.1-5.5 0-3.3 2.9-5.9 6.2-5.4v2.8c-.4-.1-.8-.2-1.2-.2-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7V3z'/%3E%3C/svg%3E");
  --ico-youtube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M21.6 7.2s-.2-1.4-.8-2c-.8-.8-1.6-.8-2-.9C16 4 12 4 12 4s-4 0-6.8.3c-.4.1-1.3.1-2 .9-.6.6-.8 2-.8 2S2.2 8.8 2.2 10.5v1.6c0 1.6.2 3.3.2 3.3s.2 1.4.8 2c.8.8 1.8.8 2.2.9C7 18.4 12 18.5 12 18.5s4 0 6.8-.3c.4-.1 1.2-.1 2-.9.6-.6.8-2 .8-2s.2-1.6.2-3.3v-1.6c0-1.6-.2-3.2-.2-3.2zM10 14.5v-6l5.2 3z'/%3E%3C/svg%3E");
  --ico-paypal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M7.4 21.2H4.6c-.4 0-.7-.4-.6-.8L6.9 3.5c.1-.4.4-.6.8-.6h5.6c3 0 5.1 1.6 4.7 4.6-.4 3.2-2.8 4.9-6 4.9H9.6l-.9 5.6-.5 2.7c-.1.3-.4.5-.8.5zm3.2-11.1h1.6c1.6 0 2.9-.7 3.1-2.3.2-1.3-.6-1.9-2-1.9h-1.5l-1.2 4.2z'/%3E%3Cpath d='M18.9 8.9c.6.7.8 1.7.6 2.9-.5 3.4-3 5.1-6.3 5.1h-1.1l-.7 4.1c-.1.3-.3.5-.6.5H8.4c-.3 0-.5-.3-.5-.6l.4-2.2h2.2c.7 0 1.3-.5 1.4-1.2l.6-3.4h1.3c3.2 0 5.6-1.7 6-4.9.1-.1.1-.2.1-.3z' opacity='.55'/%3E%3C/svg%3E");
}


/* ============================================================
   REJILLAS QUE FALTABAN POR DECLARAR
   ============================================================ */
.jnhl-servants{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px;
}
@media (max-width: 820px){
  .jnhl-servants{ grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
}

.jnhl-datos-fila{ display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px){ .jnhl-datos-fila{ grid-template-columns: 1fr; } }

.jnhl-bloques{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

.jnhl-contacto-rejilla{
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 900px){
  .jnhl-contacto-rejilla{ grid-template-columns: 1fr; gap: 48px; }
}

/* ============================================================
   FORMULARIO: PERMISO Y AVISOS
   ============================================================ */

/* Casilla de consentimiento. La ley europea exige que quien escribe
   sepa que sus datos se guardan y lo autorice de forma expresa. */
.jnhl-permiso{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--text-mute);
  font-size: 13px;
  line-height: 1.55;
  cursor: pointer;
}
.jnhl-permiso input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.jnhl-permiso input[type="checkbox"]:hover{ border-color: var(--gold-dim); }
.jnhl-permiso input[type="checkbox"]:checked{
  background-color: var(--gold);
  border-color: var(--gold);
  -webkit-mask-image: none;
  mask-image: none;
}
.jnhl-permiso input[type="checkbox"]:checked::after{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--black);
  -webkit-mask-image: var(--ico-check);
  mask-image: var(--ico-check);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 12px 12px;
  mask-size: 12px 12px;
}
.jnhl-permiso a{ color: var(--gold); text-decoration: underline; }
.jnhl-permiso a:hover{ color: var(--gold-light); }

/* Campo trampa para robots: invisible, pero no con display:none,
   porque algunos robots detectan ese truco. */
.jnhl-trampa{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Aviso de resultado tras enviar */
.jnhl-aviso{
  border-left: 2px solid var(--gold);
  background: var(--surface-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px;
  margin: 0 0 26px;
  font-size: 14px;
  color: var(--text-soft);
}
.jnhl-aviso-bien{ border-left-color: var(--gold); color: var(--gold-light); }
.jnhl-aviso-mal{ border-left-color: #B4483F; color: var(--text-soft); }

/* El botón de enviar del formulario, con el aspecto de botón dorado */
.jnhl-formulario button[type="submit"]{
  background: var(--gold);
  color: var(--black);
  border: 1px solid transparent;
  cursor: pointer;
  justify-self: start;
}
.jnhl-formulario button[type="submit"]:hover{
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -10px rgba(201,162,39,.5);
}

/* ============================================================
   AJUSTE DE MÁRGENES DENTRO DE LAS REJILLAS
   WordPress separa los bloques hermanos con un margen superior.
   En una rejilla o una fila eso desplaza cada elemento hacia abajo
   y descuadra la retícula, así que aquí se anula: la separación la
   dan el gap y el padding, como en la maqueta.
   ============================================================ */
.jnhl-rejilla > *,
.jnhl-pasos > *,
.jnhl-tier > *,
.jnhl-hoteles > *,
.jnhl-servants > *,
.jnhl-bloques > *,
.jnhl-datos-fila > *,
.jnhl-contacto-lista > *,
.jnhl-redes > *,
.jnhl-evento > *,
.jnhl-dato > *,
.jnhl-contacto-item > *,
.jnhl-seguro > *,
.jnhl-frame > *,
.jnhl-directo > *,
.jnhl-directo-pie > *,
.jnhl-mapa > *{
  margin-block-start: 0;
  margin-block-end: 0;
}

/* El filete de los encabezados alineados a la izquierda. WordPress
   centra todos los separadores desde su propia hoja, que se carga
   después de esta, así que aquí hace falta imponerse. */
.jnhl-encabezado-izq .wp-block-separator.jnhl-filete{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Las tablas de la maqueta no llevan líneas verticales. */
.wp-block-table td,
.wp-block-table th{
  border-left: 0;
  border-right: 0;
}

/* ============================================================
   TEXTO LARGO
   Historia, misión, visión y biografías. Ancho de lectura y
   remate en cursiva dorada, como los cierres que escribió el
   ministerio ("Una casa apostólica. Una voz profética…").
   ============================================================ */
.jnhl-seccion > p:not([class*="jnhl-"]),
.jnhl-seccion-corta > p:not([class*="jnhl-"]){
  color: var(--text-soft);
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.75;
}

.jnhl-remate{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--gold-light);
  margin-top: 8px;
}

/* Declaración breve que abre o cierra una idea. Ni tan sobria como el
   cuerpo ni tan solemne como el remate: pesa por lo que dice, no por
   el adorno. */
.jnhl-seccion .jnhl-guia,
.jnhl-seccion-corta .jnhl-guia{
  color: var(--text);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.6;
  margin-top: 30px;
  margin-bottom: 30px;
}

/* Cita bíblica. El filete dorado a la izquierda la separa del cuerpo
   sin necesidad de recuadro; la referencia va debajo, en pequeño. */
.jnhl-seccion .jnhl-versiculo,
.jnhl-seccion-corta .jnhl-versiculo{
  border-left: 2px solid var(--gold);
  padding: 4px 0 4px 24px;
  margin: 26px 0;
  font-family: var(--font-display);
  font-size: 21px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
}
.jnhl-versiculo cite{
  display: block;
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-light);
}

/* Varias líneas cortas seguidas ("Al Cristo que salva. / Al Espíritu
   que transforma…"). Se leen como una sola declaración, así que van
   juntas y con más aire alrededor que entre ellas. */
.jnhl-seccion .jnhl-letania,
.jnhl-seccion-corta .jnhl-letania{
  margin: 28px 0;
  padding-left: 24px;
  border-left: 1px solid var(--border);
  color: var(--text);
  font-size: 17.5px;
  font-weight: 300;
  line-height: 2;
}

@media (max-width: 640px){
  .jnhl-seccion .jnhl-guia,
  .jnhl-seccion-corta .jnhl-guia{ font-size: 18px; }
  .jnhl-seccion .jnhl-versiculo,
  .jnhl-seccion-corta .jnhl-versiculo{ font-size: 19px; padding-left: 18px; }
  .jnhl-seccion .jnhl-letania,
  .jnhl-seccion-corta .jnhl-letania{ padding-left: 18px; font-size: 16.5px; }
}

.jnhl-biografia{
  border-left: 1px solid var(--border);
  padding-left: 28px;
}
.jnhl-biografia h3{
  font-size: 24px;
  font-weight: 400;
  color: var(--text);
}
.jnhl-biografia p:not([class*="jnhl-"]){
  color: var(--text-soft);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
}
.jnhl-biografia .jnhl-remate{ font-size: 17.5px; }

@media (max-width: 640px){
  .jnhl-biografia{ padding-left: 18px; }
}

/* ============================================================
   MENÚ DESPLEGABLE EN MÓVIL
   En pantallas estrechas el menú se pliega tras un icono. Al
   abrirse ocupa la pantalla entera, así que los enlaces tienen
   que ser cómodos de pulsar con el dedo.
   ============================================================ */
.jnhl-cabecera .wp-block-navigation__responsive-container-open,
.jnhl-cabecera .wp-block-navigation__responsive-container-close{
  color: var(--text);
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
}

.jnhl-cabecera .wp-block-navigation__responsive-container.is-menu-open{
  background: var(--black);
  padding: 84px 28px 48px;
}
/* ============================================================
   El menu desplegable a pantalla completa

   La cabecera lleva cristal esmerilado (backdrop-filter). Ese efecto
   la convierte en el marco de referencia de todo lo que lleve dentro
   position:fixed, así que el panel del menu, que pide ocupar la
   pantalla entera, se quedaba en los 133 px de alto de la cabecera y
   tapaba casi todas las secciones.

   La solución es quitarle el cristal mientras el menu está abierto:
   entonces el panel vuelve a medirse contra la ventana. Y no se echa
   de menos, porque el propio panel cubre la página por completo.
   ============================================================ */
.jnhl-cabecera:has(.wp-block-navigation__responsive-container.is-menu-open){
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Y, sobre todo, se le dan las medidas de la ventana a mano.
   Probado sobre el sitio en marcha: quitar el cristal por sí solo no
   basta, porque el panel sigue midiéndose contra la cabecera. Con esto
   ocupa la pantalla entera y los nueve enlaces caben. */
.jnhl-cabecera .wp-block-navigation__responsive-container.is-menu-open{
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
}

.jnhl-cabecera .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
  width: 100%;
  border-bottom: 1px solid var(--border-soft);
}
.jnhl-cabecera .wp-block-navigation__responsive-container.is-menu-open a{
  display: block;
  width: 100%;
  padding-block: 16px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text);
}
/* En el panel abierto el subrayado deslizante sobra. */
.jnhl-cabecera .wp-block-navigation__responsive-container.is-menu-open a::after{ display: none; }
.jnhl-cabecera .wp-block-navigation__responsive-container.is-menu-open .current-menu-item a{
  color: var(--gold-light);
}

/* La casilla de consentimiento, más cómoda de pulsar en el móvil.
   La etiqueta entera es el objetivo, no solo el cuadradito. */
.jnhl-permiso{
  padding-block: 6px;
  min-height: 44px;
  align-items: center;
}


/* ============================================================
   Consentimiento de cookies (Complianz)

   Complianz tapa el mapa con un cartel propio hasta que el visitante
   da permiso, y ese cartel viene con estilo de fábrica que desentona.
   Aquí se le da el aspecto del resto del sitio.

   Importante: el marco del mapa NO se oculta. Complianz reutiliza ese
   mismo marco para cargar el mapa de verdad al aceptar, así que
   esconderlo lo deja en negro para siempre. Lo que se hace es poner el
   cartel encima ocupando todo; cuando el plugin lo retira, debajo
   aparece el mapa.

   El texto de fábrica se silencia con font-size:0 y se repone con un
   pseudoelemento, porque el original habla de «cookies de marketing» y
   aquí la categoría se llama «contenido externo».
   ============================================================ */
.jnhl-mapa-lienzo .cmplz-blocked-content-container{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-image: none !important;
  background-color: transparent;
}

/* Al desbloquear, Complianz le deja al marco su propia altura (unos
   150 px) en vez de la del lienzo, y el mapa sale como una franja con
   todo lo demás en negro. Aqui se le impone que ocupe el hueco entero,
   esté dentro del envoltorio del plugin o suelto. */
.jnhl-mapa-lienzo iframe,
.jnhl-mapa-lienzo .cmplz-blocked-content-container iframe{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  border: 0;
  display: block;
}

.jnhl-mapa-lienzo .cmplz-blocked-content-notice{
  /* La hoja de Complianz se carga después de la nuestra, de modo que
     estas medidas hay que imponerlas. */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  transform: none !important;
  margin: 0 !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.012) 14px 28px),
    var(--surface-2) !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: center;
  white-space: normal !important;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
  /* Silencia el texto de fábrica sin quitar la zona pulsable. */
  font-size: 0 !important;
  line-height: 0;
  color: transparent;
}
.jnhl-mapa-lienzo .cmplz-blocked-content-notice a{
  font-size: 0;
  color: transparent;
}
/* La chincheta va como fondo del propio título, no como ::before
   aparte, porque hacen falta los dos pseudoelementos: uno para el
   título y otro para la letra pequeña. */
.jnhl-mapa-lienzo .cmplz-blocked-content-notice::before{
  content: 'Cargar el mapa de Google';
  display: block;
  padding-top: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A227' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 12-8 12s-8-7-8-12a8 8 0 0116 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 30px 30px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--text);
}

/* Sin esta segunda línea el visitante aceptaría cookies sin saberlo:
   pulsar el cartel equivale a dar el consentimiento. El texto de
   fábrica lo decía; al sustituirlo hay que seguir diciéndolo. */
.jnhl-mapa-lienzo .cmplz-blocked-content-notice::after{
  content: 'Al pulsar aceptas las cookies de contenido externo. El mapa lo sirve Google, que recibirá tu dirección IP.';
  display: block;
  max-width: 46ch;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.6;
  text-transform: none;
  color: var(--text-mute);
}
.jnhl-mapa-lienzo .cmplz-blocked-content-notice:hover::before{
  color: var(--gold-light);
}

/* Enlace del pie que vuelve a abrir el aviso de cookies. Tiene que
   parecerse a los demás enlaces de la columna Legal, no a un boton. */
.jnhl-pie-cookies{ display: block; }

/* Este es un botón, no un enlace, porque lo que hace es abrir el aviso
   y no llevar a ninguna parte. Pero en el pie tiene que comportarse
   como sus vecinos: misma letra, mismo color y, sobre todo, la misma
   zona pulsable. Con la altura de solo el texto era muy fácil fallar
   el dedo en el móvil. */
.jnhl-pie-cookies a,
.jnhl-pie-cookies button.cmplz-manage-consent{
  display: block;
  width: 100%;
  padding: 7px 0;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -.1px;
  line-height: 23.1px;
  text-align: left;
  color: var(--text-mute);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.jnhl-pie-cookies a:hover,
.jnhl-pie-cookies button.cmplz-manage-consent:hover{
  color: var(--gold-light);
}


/* ============================================================
   Portadilla con imagen: Donaciones

   El render del templo va de fondo, detrás del título. Encima
   lleva un velo oscuro en degradado: arriba deja ver el edificio
   y hacia abajo se cierra, para que el texto se lea sin depender
   de que la foto tenga una zona oscura donde toca.

   La dirección de la imagen es relativa a esta hoja, asi que
   funciona igual aunque el sitio cambie de dominio.
   ============================================================ */
.jnhl-portadilla-templo{
  padding-block: clamp(110px, 14vh, 156px) clamp(92px, 11vh, 124px);
  background-image: url('assets/img/protemplo.jpg');
  background-size: cover;
  background-position: center 56%;
  background-repeat: no-repeat;
}
.jnhl-portadilla-templo::before{
  opacity: 1;
  background:
    linear-gradient(180deg,
      rgba(7,7,8,.58) 0%,
      rgba(7,7,8,.74) 48%,
      rgba(7,7,8,.95) 100%),
    radial-gradient(85% 105% at 50% 42%, rgba(8,20,54,.5) 0%, transparent 72%);
}

/* En pantallas estrechas la imagen es demasiado apaisada y el
   edificio se pierde: se encuadra más cerca y se oscurece algo
   más, porque ahi el texto ocupa más alto. */
@media (max-width: 700px){
  .jnhl-portadilla-templo{
    background-position: 32% 54%;
  }
  .jnhl-portadilla-templo::before{
    background:
      linear-gradient(180deg,
        rgba(7,7,8,.68) 0%,
        rgba(7,7,8,.82) 46%,
        rgba(7,7,8,.96) 100%),
      radial-gradient(90% 110% at 50% 42%, rgba(8,20,54,.5) 0%, transparent 72%);
  }
}


/* ============================================================
   Páginas legales

   Texto largo en una sola columna. Se acotan las reglas con
   :not([class*="jnhl-"]) para que una regla de contenedor no le pise
   el tamaño a los párrafos que sí llevan clase propia.
   ============================================================ */
.jnhl-legal h2{
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--text);
  margin: 46px 0 14px;
}
.jnhl-legal > h2:first-child{ margin-top: 0; }
.jnhl-legal h3{
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--text);
  margin: 28px 0 10px;
}
.jnhl-legal p:not([class*="jnhl-"]){
  margin: 0 0 16px;
  color: var(--text-soft);
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.75;
}
.jnhl-legal ul{
  margin: 0 0 18px;
  padding-left: 20px;
  color: var(--text-soft);
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.75;
}
.jnhl-legal li{ margin-bottom: 6px; }
.jnhl-legal li::marker{ color: var(--gold-dim); }
.jnhl-legal strong{ color: var(--text); font-weight: 500; }
.jnhl-legal em{ color: var(--text-soft); }

/* El documento de cookies lo escribe Complianz, no nosotros, y viene
   con su propia tipografía: 14px en los párrafos y 22 en los títulos,
   frente a los 15,5 y 24 de las otras dos páginas legales. Puestas una
   al lado de otra se nota.

   Las reglas de arriba ya apuntan a este texto —está dentro de
   .jnhl-legal— pero pierden: Complianz usa un selector con #id, y en
   CSS un identificador pesa más que cualquier cantidad de clases. Hay
   que nombrar ese mismo id para ganarle, y por eso estas reglas
   repiten lo de arriba en vez de heredarlo. */
.jnhl-legal #cmplz-document p,
.jnhl-legal #cmplz-document ul,
.jnhl-legal #cmplz-document ol{
  color: var(--text-soft);
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.75;
}
.jnhl-legal #cmplz-document h2{
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--text);
  margin: 46px 0 14px;
}
.jnhl-legal #cmplz-document h3{
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--text);
  margin: 28px 0 10px;
}
.jnhl-legal #cmplz-document li::marker{ color: var(--gold-dim); }
.jnhl-legal #cmplz-document a{ color: var(--gold-light); }

/* Si algún día Complianz añade una tabla con la lista de cookies, que
   se desplace ella sola en vez de estirar la página en el móvil. */
.jnhl-legal #cmplz-document table{
  display: block;
  width: 100%;
  overflow-x: auto;
  font-size: 14px;
}

@media (max-width: 640px){
  .jnhl-legal #cmplz-document h2{ font-size: 21px; }
}

/* La fecha de la última revisión, al pie del documento. */
.jnhl-legal .jnhl-fecha{
  margin: 44px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
  color: var(--text-mute);
  font-size: 13.5px;
  font-style: italic;
}

/* ============================================================
   MURO DE REDES SOCIALES
   Las publicaciones que el equipo destaca a mano en la página En
   Vivo. Cada una es un marco de Instagram, Facebook, TikTok o
   YouTube.

   Ojo con los nombres: el tema ya tenía `.jnhl-redes` y `.jnhl-red`
   para la lista de enlaces de la página de Contacto. Reutilizarlos
   aquí hizo que las dos páginas se pisaran los estilos —el muro
   heredaba el relleno y el icono de aquellos enlaces, y la lista de
   Contacto heredaba la disposición del muro—. Todo lo de aquí lleva
   `muro` o `tarjeta` en el nombre para que no vuelva a pasar.
   ============================================================ */
.jnhl-muro-redes{
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.jnhl-muro-entrada{
  color: var(--text-soft);
  margin: -10px 0 0;
}

.jnhl-muro{
  display: grid;
  /* Tres columnas en un escritorio, dos en tableta y una en el
     teléfono, sin tener que escribir ni una consulta de medios:
     las columnas caben o no caben.

     El tope de 360 px es lo que evita que una sola publicación se
     estire hasta el ancho entero de la página: el reproductor de
     TikTok tiene su propio ancho fijo y dejaba un palmo de blanco a
     cada lado sobre el fondo oscuro.

     `auto-fit` y no `auto-fill` para que las columnas que sobran se
     recojan; con `auto-fill` seguían ocupando su sitio y dos
     publicaciones quedaban pegadas a la izquierda en vez de
     centradas. */
  grid-template-columns: repeat(auto-fit, minmax(290px, 360px));
  justify-content: center;
  gap: 22px;
  align-items: start;
}

.jnhl-tarjeta{
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* El alto lo lleva la tarjeta, no el marco: así el hueco de espera y
   el marco que lo sustituye miden exactamente lo mismo y la página no
   pega un salto cuando el visitante acepta las cookies.

   Las medidas salen de lo que ocupa cada red de verdad, con holgura:
   un vídeo de TikTok es vertical y necesita bastante más que una foto
   de Instagram. Si sobra un dedo de aire al final de alguna tarjeta es
   preferible a que se corte por abajo. */
.jnhl-tarjeta-instagram{ height: 640px; }
.jnhl-tarjeta-facebook { height: 640px; }
.jnhl-tarjeta-tiktok   { height: 760px; }

/* YouTube sí tiene proporción conocida, así que no hace falta
   adivinarle el alto: se lo da el ancho. Y ocupa dos columnas cuando
   caben, porque un vídeo apaisado metido en una columna pensada para
   TikTok se queda del tamaño de un sello. Por debajo de 780 px solo
   hay una columna y no hay nada que ocupar. */
.jnhl-tarjeta-youtube{ aspect-ratio: 16 / 9; }
@media (min-width: 780px){
  .jnhl-tarjeta-youtube{ grid-column: span 2; }
}

.jnhl-tarjeta > iframe{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Ojo: aquí no se toca `display`. La regla de arriba llevaba
   `display:block` y valía para las dos cosas, y como este selector
   tiene dos clases y `.jnhl-espera` solo una, le ganaba: el aviso
   dejaba de ser flex y el texto se iba a la esquina de arriba en vez
   de quedarse centrado. */
.jnhl-tarjeta > .jnhl-espera{
  width: 100%;
  height: 100%;
}

/* El hueco mientras no hay permiso de cookies. */
.jnhl-espera{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  box-sizing: border-box;
}
.jnhl-espera-red{
  margin: 0;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.jnhl-espera-texto{
  margin: 0;
  max-width: 24em;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-soft);
}
.jnhl-espera-boton{
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  padding: 11px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  transition: all var(--dur) var(--ease);
}
.jnhl-espera-boton:hover{
  border-color: var(--gold);
  color: var(--gold-light);
}

.jnhl-muro-vacio{
  color: var(--text-soft);
  text-align: center;
  margin: 0;
}

.jnhl-muro-botones{ margin-top: 4px; }

@media (max-width: 600px){
  .jnhl-tarjeta-instagram{ height: 580px; }
  .jnhl-tarjeta-facebook { height: 580px; }
  .jnhl-tarjeta-tiktok   { height: 700px; }
}

/* ============================================================
   AJUSTES DE MÓVIL
   Cuatro correcciones salidas de medir la web en un teléfono de
   375 px. Van juntas al final porque todas dependen de imponerse
   a reglas que vienen de WordPress, y así se ve de un vistazo
   qué se le está discutiendo y por qué.
   ============================================================ */

/* 1. EL MARGEN LATERAL, que es la causa de casi todo lo demás.

   WordPress reserva 68 px a cada lado (--wp--preset--spacing--50) y
   no los reduce nunca. En un escritorio da igual, porque el texto se
   centra a 760 px de todas formas; en un móvil de 375 se come 136 px
   y deja el contenido en 239 px: el 64 % de la pantalla. De ahí
   venían la tabla recortada, el mapa diminuto y el vídeo estrecho.

   Se redefine la variable sobre .has-global-padding, no sobre :root,
   a propósito: una propiedad declarada en el propio elemento gana
   siempre a la que hereda, sin depender de en qué orden se carguen
   las hojas. Y como los márgenes negativos de los bloques a ancho
   completo salen de esta misma variable, se ajustan solos. */
@media (max-width: 640px){
  :root,
  .has-global-padding{
    --wp--style--root--padding-right: 22px;
    --wp--style--root--padding-left: 22px;
  }
}

/* 2. LA TARJETA DE EVENTO.

   La fila era «banda de fecha a la izquierda, texto a la derecha».
   Por debajo de 600 px WordPress estira la banda de fecha al ancho
   completo, el texto se va fuera y la tarjeta lo recorta: el título
   y la descripción del evento desaparecían por completo.

   En vez de pelear por los 110 px de la banda, se apila: fecha
   arriba en horizontal, texto debajo. Es lo que pide una pantalla
   estrecha de todos modos. */
@media (max-width: 600px){
  .jnhl-evento-fila{ flex-direction: column; }

  .jnhl-evento-fecha{
    width: 100%;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px;
    border-right: 0;
    border-bottom: 1px solid var(--border-soft);
  }
  .jnhl-evento-fecha .d{ font-size: 26px; }
  .jnhl-evento-fecha .m{ margin: 0; }

  .jnhl-evento-cuerpo{ padding: 22px 18px; }
  .jnhl-evento-cuerpo h3{ font-size: 18px; }
}

/* 3. LAS TABLAS.

   Con el margen ya corregido caben, pero por poco: en una pantalla
   de 360 px la de Líderes se quedaba a un pelo. Se recorta el
   relleno de las celdas para que sobre sitio en vez de faltar, que
   es lo que hacía que la última columna —los nombres de los
   responsables, las horas de los servicios— quedara fuera. */
@media (max-width: 640px){
  .wp-block-table table{ font-size: 13.5px; }
  .wp-block-table thead th{ padding: 13px 12px; letter-spacing: .12em; }
  .wp-block-table tbody td{ padding: 13px 12px; }
}

/* 4. EL MENÚ DESPLEGABLE: zona pulsable.

   Los enlaces medían 33 px de alto. El dedo pide 44, y este menú lo
   va a usar gente que no tiene veinte años.

   La regla de arriba ya pedía `padding-block: 16px` y no se
   aplicaba: WordPress trae un selector con CUATRO clases
   (…responsive-container.is-menu-open …container-content
   …item__content) y el nuestro llevaba tres clases y un elemento.
   A igual peso gana quien tenga más clases, así que perdíamos por
   una. Se nombra la misma cadena para empatar y ganar por la
   nuestra, en lugar de recurrir a !important. */
.jnhl-cabecera .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation__container{
  width: 100%;
}
.jnhl-cabecera .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation-item__content{
  display: block;
  width: 100%;
  padding-block: 14px;
}