/* ============================================================
   ETS JAYIM — HOJA DE ESTILO ÚNICA DEL PORTAL
   Versión 1.0 · 21 de octubre de 2026
   Proyecto Nehemías

   Esta es la única hoja de estilo del portal. Todo color,
   tipografía, borde y espaciado se define aquí y en ningún
   otro lugar. Si cambias algo aquí, cambia en todo el sitio.

   NO escribas estilos dentro de las páginas.
   ============================================================ */

/* ---------- 1. LOS COLORES Y LAS MEDIDAS ---------- */
/* Versión 4.0 · 9 de noviembre de 2026 · "Shaar HaRajamim"
   Inspiración: Jerusalén construida. Piedra blanca (meleke), sillares
   herodianos con margen cincelado, puertas en arco, la luz dorada del
   atardecer y el cielo de tejelet cuando salen las tres estrellas.
   Los nombres de las variables se conservan a propósito (--azul-profundo,
   --crema...) para que todas las páginas del portal tomen la paleta nueva
   sin tocar su HTML. --azul-profundo ahora es el TEJELET de la marca. */

:root {

  /* El color de la marca: tejelet, el cielo al anochecer */
  --azul-profundo:      #27305C;   /* TEJELET: campos de color, títulos, botón principal */
  --azul-institucional: #1D2448;   /* tejelet hondo: hover */
  --azul-linea:         rgba(201,154,69,.45);   /* líneas sobre tejelet */
  --tejelet:            #27305C;
  --tejelet-hondo:      #1D2448;
  --granate:            #27305C;   /* alias de la versión anterior: hoy es tejelet */
  --granate-hondo:      #1D2448;

  /* Dorados: la luz del atardecer sobre la piedra */
  --dorado:             #C99A45;   /* filetes y texto sobre tejelet */
  --dorado-texto:       #86621B;   /* hebreo, acentos y enlaces sobre piedra (5,1:1) */
  --dorado-texto-suave: #86621B;

  /* La piedra de Jerusalén */
  --papel:              #FBF7EF;   /* meleke: la hoja */
  --crema:              #F2EADB;   /* cara del sillar: secciones alternas */
  --margen-sillar:      #E9DDC7;   /* el margen cincelado */
  --junta:              #D9C8A8;   /* juntas entre piedras */
  --borde:              #E3D5BC;   /* toda línea sobre fondo claro */
  --olivo:              #56633A;   /* Monte de los Olivos: referencias */

  /* Textos */
  --tinta:              #251C14;   /* texto base */
  --tinta-media:        #4A3D30;   /* párrafos y listas */
  --tinta-suave:        #6A5A49;   /* fechas y etiquetas */
  --tinta-clara:        #EEF0F7;   /* texto sobre tejelet */
  --tinta-clara-suave:  #C3C8DD;   /* apoyo sobre tejelet */

  /* Tipografías */
  --titulos:  'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;
  --lectura:  'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;
  --interfaz: 'Assistant', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hebreo:   'Frank Ruhl Libre', Georgia, serif;

  /* Medidas */
  --ancho:    calc(1072px + 2 * var(--margen));   /* 1072 px de contenido + los dos márgenes (decisión del Rabino, 9-11-2026) */
  --margen:   clamp(20px, 4vw, 64px);
  --seccion:  clamp(56px, 8vw, 104px);
  --radio:    6px;
  --toque:    44px;
  --rapido:   150ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* La hoja: el portal va dentro de una hoja de piedra blanca delimitada
     sobre el color de la muralla, separada del borde de la pantalla
     (pedido del Rabino, 8-11-2026). */
  --ancho-hoja: 1212px;   /* 1072 de contenido + 70 de margen a cada lado */
  --fondo-hoja: #E8DCC6;
  --borde-hoja: #D3C1A0;
  --aire-hoja:  clamp(0px, 2.2vw, 32px);
}

/* ---------- 2. BASE ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo-hoja);
  color: var(--tinta);
  font-family: var(--interfaz);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--titulos);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--azul-profundo);
  margin: 0;
}

p { margin: 0; }

a { color: var(--dorado-texto); }
a:hover { color: var(--azul-profundo); }

/* Todo elemento que recibe foco por teclado se ve con claridad */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--dorado-texto);
  outline-offset: 3px;
}

/* Solo para lectores de pantalla */
.ej-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Texto hebreo */
.ej-hebreo {
  font-family: var(--hebreo);
  direction: rtl;
  unicode-bidi: isolate;
}

/* Frase hebrea corta dentro de una página en español.
   Sin esto la caja ocupa todo el ancho y, por ser de derecha a
   izquierda, la frase se va sola al borde derecho y queda suelta.
   Al encogerla al tamaño del texto, queda alineada con el título. */
.ej-hebreo-frase { display: inline-block; }


/* ---------- 2b. LA HOJA ---------- */
/* La caja blanca donde vive todo el portal, apoyada sobre el
   fondo. Envuelve absolutamente todo: barra superior, menú,
   contenido y pie. Se abre en inc/header.php y se cierra en
   inc/footer.php. */

.ej-hoja {
  width: min(var(--ancho-hoja), 100%);
  margin: var(--aire-hoja) auto;
  background: var(--papel);
  box-shadow:
    0 0 0 1px rgba(60,20,24, 0.07),
    0 16px 44px rgba(60,20,24, 0.09);
}

/* En pantallas grandes siempre queda fondo visible a los costados,
   para que la hoja se lea como hoja y no como pantalla completa. */
@media (min-width: 1240px) {
  .ej-hoja { width: min(var(--ancho-hoja), calc(100% - 64px)); }
}

/* En teléfonos la hoja ocupa todo: el fondo y la sombra solo
   quitarían espacio de lectura. */
@media (max-width: 760px) {
  .ej-hoja {
    width: 100%;
    margin: 0;
    box-shadow: none;
  }
}


/* ---------- 3. EL CONTENEDOR ---------- */
/* Centra el contenido y le da aire a los costados.
   Se usa en todas las secciones del portal. */

.ej-ancho {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.ej-seccion { padding-block: var(--seccion); }


/* ---------- 4. LA BARRA SUPERIOR (datos del motor) ---------- */

.ej-topbar {
  background: var(--azul-profundo);
  color: var(--papel);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

/* La barra entera es la entrada a Zmanim: el visitante ya esta
   mirando ahi cuando busca una hora, asi que no hace falta una
   franja aparte que repita lo mismo y empuje el contenido. */
.ej-topbar .ej-ancho {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: center;
  padding-block: 11px;
  text-decoration: none;
  color: inherit;
  transition: background 0.16s ease;
}

/* El color se fija en los tres estados. Sin esto, la regla
   general  a:hover { color: var(--azul-profundo) }  pinta el
   texto del mismo azul que el fondo y la barra se vacia. */
.ej-topbar .ej-ancho,
.ej-topbar .ej-ancho:hover,
.ej-topbar .ej-ancho:focus-visible {
  color: var(--papel);
  text-decoration: none;
}

a.ej-ancho:hover { background: var(--azul-institucional); }

a.ej-ancho:hover .ej-topbar-mas {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ej-topbar-mas {
  padding-inline-start: 16px;
  border-inline-start: 1px solid rgba(255,255,255,0.3);
  color: var(--dorado);
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .ej-topbar-mas { display: none; }
}

.ej-topbar b {
  color: var(--dorado);
  font-weight: 600;
  margin-inline-end: 6px;
}

/* La ciudad y el acceso a zmanim: el hueco entre ambos lo pone
   el flex, no un margen suelto, que es mas facil de perder. */
.ej-topbar-ciudad {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--tinta-clara);
}


/* ---------- 5. EL ENCABEZADO Y EL MENÚ ---------- */

.ej-header {
  background: var(--papel);
  border-bottom: 1px solid var(--borde);
  position: relative;
  z-index: 20;
}

.ej-header .ej-ancho {
  display: flex;
  gap: 32px;
  align-items: center;
  padding-block: 22px;
}

.ej-logo { text-decoration: none; display: block; flex: 0 0 auto; }

.ej-logo-nombre {
  display: block;
  font-family: var(--titulos);
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--azul-profundo);
  line-height: 1;
}

.ej-logo-hebreo {
  display: block;
  font-family: var(--lectura);
  font-size: 1.05rem;
  color: var(--dorado-texto);
  margin-top: 3px;
  direction: rtl;
}

.ej-nav {
  margin-inline-start: auto;
  display: flex;
  gap: 30px;
  align-items: center;
}

.ej-nav a {
  font-size: 13px;
  font-weight: 500;
  color: var(--tinta-media);
  text-decoration: none;
  white-space: nowrap;
}

.ej-nav a:hover { color: var(--azul-profundo); }

/* La página en la que estás, marcada en el menú */
.ej-nav a[aria-current="page"] {
  color: var(--azul-profundo);
  border-bottom: 2px solid var(--dorado);
  padding-bottom: 3px;
}

/* Botón del hamburguesa: oculto en escritorio */
.ej-menu-boton {
  display: none;
  margin-inline-start: auto;
  background: none;
  border: 1px solid var(--borde);
  border-radius: 2px;
  padding: 10px 14px;
  font-family: var(--interfaz);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--azul-profundo);
  cursor: pointer;
}


/* ---------- 6. BOTONES Y ENLACES DE ACCIÓN ---------- */

/* Botón principal: dorado con texto azul (7,6:1) */
.ej-boton {
  display: inline-block;
  padding: 15px 30px;
  background: var(--dorado);
  color: var(--azul-profundo);
  font-family: var(--interfaz);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  border: 1px solid var(--dorado);
}

.ej-boton:hover {
  background: var(--azul-profundo);
  border-color: var(--azul-profundo);
  color: var(--papel);
}

/* Botón secundario: azul con texto blanco */
.ej-boton-azul {
  display: inline-block;
  padding: 15px 30px;
  background: var(--azul-profundo);
  color: var(--papel);
  font-family: var(--interfaz);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  border: 1px solid var(--azul-profundo);
}

.ej-boton-azul:hover {
  background: var(--dorado);
  border-color: var(--dorado);
  color: var(--azul-profundo);
}

/* Botón sobre fondo azul: contorno claro */
.ej-boton-contorno {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 20px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--papel);
  text-decoration: none;
}

.ej-boton-contorno:hover {
  background: var(--dorado);
  border-color: var(--dorado);
  color: var(--azul-profundo);
}

/* Enlace de texto con filete dorado */
.ej-enlace {
  display: inline-block;
  padding-block: 12px;
  border-bottom: 1px solid var(--dorado);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dorado-texto);
  text-decoration: none;
}

.ej-enlace:hover {
  color: var(--azul-profundo);
  border-bottom-color: var(--azul-profundo);
}


/* ---------- 7. ETIQUETAS Y TÍTULOS DE SECCIÓN ---------- */

.ej-etiqueta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dorado-texto);
}

.ej-etiqueta-gris {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.ej-etiqueta-dorada {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dorado);
}

.ej-titulo-h1 {
  font-size: clamp(2.5rem, 4.8vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.ej-titulo-h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  line-height: 1.16;
}

/* Párrafo de lectura, en serif */
.ej-lectura {
  font-family: var(--lectura);
  font-size: 1.3rem;
  line-height: 1.7;
  color: var(--tinta-suave);
}

.ej-lectura-oscura { color: var(--tinta); }
.ej-lectura-clara  { color: var(--tinta-clara); }


/* ---------- 8. EL HERO DE LA PORTADA ---------- */

.ej-hero {
  padding: clamp(20px, 3vw, 36px) var(--margen) 0;
  background: var(--papel);
}

.ej-hero-marco {
  position: relative;
  max-width: var(--ancho);
  margin-inline: auto;
  overflow: hidden;
  background: var(--azul-profundo);
  border-radius: 4px;
}

.ej-hero-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
}

/* El velo que aclara la foto para que el texto se lea.
   Fuerte a la izquierda donde va el texto, suave a la
   derecha donde se ve la imagen. */
.ej-hero-velo {
  position: relative;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.88) 0%,
    rgba(255,255,255,0.68) 45%,
    rgba(60,20,24,0.20) 100%);
}

.ej-hero-cuerpo {
  padding: clamp(44px, 6vw, 70px) clamp(22px, 4vw, 56px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 4vw, 52px);
  align-items: center;
}

.ej-hero-texto { flex: 999 1 440px; min-width: 0; }

.ej-hero-titulo { color: var(--dorado-texto); font-weight: 600; }
.ej-hero-titulo em { font-style: italic; color: var(--dorado-texto-suave); }

.ej-hero-versiculo {
  font-family: var(--lectura);
  font-size: 1.5rem;
  color: var(--dorado-texto);
  direction: rtl;
}

/* La tarjeta de la parashá, a la derecha */
.ej-tarjeta-parasha {
  flex: 1 1 310px;
  min-width: 280px;
  max-width: 380px;
  background: var(--azul-profundo);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  color: var(--papel);
}

.ej-tarjeta-parasha h2 {
  font-size: 2.4rem;
  color: var(--papel);
  font-weight: 500;
}

.ej-velas {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
}

.ej-velas img { flex: 0 0 auto; height: 70px; object-fit: contain; }


/* ---------- 9. LA FRANJA DEL CALENDARIO ---------- */

.ej-franja { border-bottom: 1px solid var(--borde); }

.ej-franja-cuerpo {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 44px;
  align-items: flex-end;
}

.ej-franja-datos {
  flex: 999 1 420px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 32px;
}

.ej-dato-etiqueta {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.ej-dato-valor {
  font-family: var(--titulos);
  font-size: 1.5rem;
  color: var(--azul-profundo);
  line-height: 1.2;
}

.ej-dato-pie { font-size: 11.5px; color: var(--tinta-suave); }


/* ---------- 10. LAS CUATRO PUERTAS ---------- */
/* Rejilla de hairline: el fondo gris se ve entre las celdas
   y hace de línea divisoria. Sin sombras ni bordes de tarjeta. */

.ej-puertas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--borde);
  border: 1px solid var(--borde);
}

.ej-puerta {
  display: block;
  padding: 40px 38px;
  background: var(--papel);
  text-decoration: none;
  transition: background 0.18s ease;
}

.ej-puerta:hover { background: var(--crema); }
.ej-puerta-destacada { background: var(--crema); }
.ej-puerta-destacada:hover { background: var(--papel); }

.ej-puerta h3 { font-size: 1.6rem; margin-bottom: 12px; }

.ej-puerta p {
  font-family: var(--lectura);
  font-size: 1.2rem;
  line-height: 1.66;
  color: var(--tinta-suave);
}


/* ---------- 10b. LAS SALAS DE UNA PUERTA ---------- */
/* Rejilla de dos columnas con filete entre medio, como las
   cuatro puertas de la portada, pero con cuenta y pie. Una sala
   que todavía no existe se muestra apagada y sin enlace. */

.ej-salas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--borde);
  border: 1px solid var(--borde);
}

.ej-sala {
  display: block;
  padding: 36px 34px;
  background: var(--papel);
  text-decoration: none;
  transition: background 0.18s ease;
}

a.ej-sala:hover { background: var(--crema); }

.ej-sala-cuenta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dorado-texto);
  margin-bottom: 12px;
}

.ej-sala-titulo {
  font-size: 1.6rem;
  line-height: 1.22;
  margin-bottom: 12px;
}

.ej-sala-bajada {
  font-family: var(--lectura);
  font-size: 1.18rem;
  line-height: 1.66;
  color: var(--tinta-suave);
  margin-bottom: 20px;
}

.ej-sala-pie {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dorado-texto);
}

a.ej-sala:hover .ej-sala-pie { color: var(--azul-profundo); }

/* Sala que todavía no está construida */
.ej-sala-destacada { background: var(--crema); }
a.ej-sala-destacada:hover { background: var(--papel); }

.ej-sala-pronto { background: var(--crema); }
.ej-sala-pronto .ej-sala-cuenta,
.ej-sala-pronto .ej-sala-titulo { color: var(--tinta-suave); }
.ej-sala-pronto .ej-sala-pie { color: var(--tinta-suave); font-weight: 500; }

@media (max-width: 760px) {
  .ej-salas { grid-template-columns: 1fr; }
  .ej-sala { padding: 30px 26px; }
}


/* ---------- 11. BLOQUE OSCURO (preguntas) ---------- */

.ej-bloque-azul { background: var(--azul-profundo); }
.ej-bloque-azul h2 { color: var(--papel); }

.ej-bloque-azul-cuerpo {
  display: flex;
  flex-wrap: wrap;
  gap: 48px 72px;
}

.ej-lista-preguntas a {
  display: block;
  padding-block: 20px;
  border-bottom: 1px solid var(--azul-linea);
  font-family: var(--titulos);
  font-size: 1.22rem;
  line-height: 1.35;
  color: var(--papel);
  text-decoration: none;
}

.ej-lista-preguntas a:last-child { border-bottom: 0; }
.ej-lista-preguntas a:hover { color: var(--dorado); }


/* ---------- 12. ARTÍCULOS ---------- */

.ej-articulos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px;
}

.ej-articulo-tema {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dorado-texto);
  margin-bottom: 10px;
}

.ej-articulo h3 {
  font-size: 1.35rem;
  line-height: 1.26;
  margin-bottom: 10px;
}

.ej-articulo h3 a { color: inherit; text-decoration: none; }
.ej-articulo h3 a:hover { color: var(--dorado-texto); }

.ej-articulo-bajada {
  font-family: var(--lectura);
  font-size: 1.12rem;
  line-height: 1.64;
  color: var(--tinta-suave);
  margin-bottom: 12px;
}

.ej-articulo-fecha { font-size: 11px; color: var(--tinta-suave); }

/* Cabecera de sección con enlace a la derecha */
.ej-cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: baseline;
  margin-bottom: 44px;
}

.ej-cabecera .ej-enlace { margin-inline-start: auto; }


/* ---------- 12b. PÁGINA DE TEXTO ---------- */
/* Para los estudios, artículos y páginas de lectura larga.
   La columna se mantiene angosta a propósito: una línea de más
   de 70 caracteres cansa la vista y se pierde el renglón. */

.ej-titulo-pagina { border-bottom: 1px solid var(--borde); }

.ej-texto { max-width: 68ch; }

.ej-texto p {
  font-family: var(--lectura);
  font-size: 1.32rem;
  line-height: 1.88;
  color: var(--tinta-media);
  margin-bottom: 1.5em;
}

.ej-texto p:last-child { margin-bottom: 0; }

/* El primer párrafo, un punto más grande y más oscuro */
.ej-texto .ej-entrada {
  font-size: 1.5rem;
  line-height: 1.74;
  color: var(--tinta);
}

/* Palabra hebrea transliterada dentro del texto */
.ej-texto i { font-style: italic; color: var(--tinta); }


/* ---------- 12b-bis. HORARIOS DE REUNIÓN ---------- */
/* Cuándo a la izquierda, qué a la derecha, filete entre medio.
   Sin tarjetas ni iconos: una reunión se lee en dos segundos. */

.ej-horarios { border-top: 1px solid var(--borde); }

.ej-horario {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 40px;
  padding-block: 26px;
  border-bottom: 1px solid var(--borde);
}

.ej-horario-cuando {
  flex: 0 0 230px;
  font-family: var(--titulos);
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--azul-profundo);
}

.ej-horario-que {
  flex: 999 1 380px;
  min-width: 0;
  font-family: var(--lectura);
  font-size: 1.18rem;
  line-height: 1.72;
  color: var(--tinta-suave);
}

@media (max-width: 600px) {
  .ej-horario-cuando { flex: 1 1 100%; }
}


/* ---------- 12b-ter. LISTA DE DESCARGAS ---------- */
/* Para las parashot en PDF y cualquier otra lista de archivos.
   Cada fila es un enlace completo: se puede pinchar en cualquier
   parte, no solo en el título. */

.ej-descargas { border-top: 1px solid var(--borde); }

.ej-descarga {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  align-items: baseline;
  padding: 26px 20px 26px 0;
  border-bottom: 1px solid var(--borde);
  text-decoration: none;
  transition: background 0.16s ease, padding-left 0.16s ease;
}

.ej-descarga:hover {
  background: var(--crema);
  padding-inline-start: 20px;
}

.ej-descarga-cuerpo { flex: 999 1 360px; min-width: 0; }

.ej-descarga-titulo {
  font-family: var(--titulos);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--azul-profundo);
  margin: 0;
}

.ej-descarga:hover .ej-descarga-titulo { color: var(--dorado-texto); }

.ej-descarga-cita {
  margin-top: 6px;
  font-family: var(--lectura);
  font-size: 1.15rem;
  color: var(--tinta-suave);
}

.ej-descarga-dato {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: end;
  font-size: 11.5px;
  color: var(--tinta-suave);
}

/* La más reciente, con un filete dorado que la distingue */
.ej-descarga-nueva {
  border-inline-start: 2px solid var(--dorado);
  padding-inline-start: 22px;
}

.ej-descarga-nueva:hover { padding-inline-start: 26px; }

@media (max-width: 600px) {
  .ej-descarga { padding-inline-end: 0; }
  .ej-descarga-dato { flex: 1 1 100%; flex-direction: row; gap: 14px; text-align: start; }
}


/* ---------- 12b-quater. CUERPO DE UN ESTUDIO ---------- */
/* Todo lo que puede aparecer dentro de un estudio: títulos de
   sección, párrafos, listas, citas, recuadros y tablas.
   Una sola definición para los 83 estudios del portal. */

.ej-estudio { max-width: 70ch; }

/* ---------------------------------------------------------------
   DONDE EMPIEZA CADA SECCION

   Una persona de fuera reviso el portal y dijo que las paginas se
   leian como un texto corrido, sin que se notara donde terminaba
   una seccion y empezaba otra. Tenia razon.

   El remedio es tipografico, no decorativo: aire, una linea fina
   que cruza la medida de lectura y una marca dorada que la abre.
   No se agregan cajas ni tarjetas: a escala de 133 paginas eso
   satura, que es justo lo que el portal viejo hacia mal.
   --------------------------------------------------------------- */
.ej-estudio > h2 {
  font-size: clamp(1.55rem, 2.5vw, 2rem);
  line-height: 1.22;
  color: var(--azul-profundo);
  margin: 3.4em 0 0.9em;
  padding-top: 1.4em;
  border-top: 1px solid var(--borde);
  position: relative;
}

/* La marca dorada que abre la seccion */
.ej-estudio > h2::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline-start: 0;
  width: 52px;
  height: 3px;
  background: var(--dorado);
}

/* El primero abre la pagina: no necesita linea ni aire arriba */
.ej-estudio > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.ej-estudio > h2:first-child::before { display: none; }

/* El "volver al indice" ya separo: la seccion siguiente no
   necesita el aire completo encima */
.ej-estudio > .ej-volver-indice + h2 { margin-top: 2em; }

/* Si el indice abre la pagina, el primer titulo tampoco lleva linea */
.ej-estudio > .ej-indice + h2 {
  margin-top: 0.6em;
  padding-top: 0;
  border-top: 0;
}
.ej-estudio > .ej-indice + h2::before { display: none; }

.ej-estudio > h3 {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--azul-institucional);
  margin: 2em 0 0.6em;
}

.ej-estudio p {
  font-family: var(--lectura);
  font-size: 1.3rem;
  line-height: 1.88;
  color: var(--tinta-media);
  margin: 0 0 1.1em;
}

.ej-estudio ul,
.ej-estudio ol { margin: 0 0 1.3em; padding-inline-start: 1.4em; }

.ej-estudio li {
  font-family: var(--lectura);
  font-size: 1.26rem;
  line-height: 1.8;
  color: var(--tinta-media);
  margin-bottom: 0.55em;
}

.ej-estudio li::marker { color: var(--dorado); }

.ej-estudio strong { font-weight: 600; color: var(--tinta); }
.ej-estudio em { font-style: italic; }

/* Hebreo suelto dentro del texto */
.ej-estudio .he {
  font-family: var(--hebreo);
  direction: rtl;
  unicode-bidi: isolate;
}

/* Filete separador entre tramos */
.ej-estudio hr {
  border: 0;
  height: 1px;
  width: 64px;
  background: var(--dorado);
  margin: 2.4em auto;
}

/* Cita bíblica */
.ej-estudio blockquote,
.ej-cita-estudio {
  margin: 1.8em 0;
  padding: 22px 26px;
  background: var(--crema);
  border-inline-start: 2px solid var(--dorado);
}

.ej-estudio blockquote p,
.ej-cita-estudio p {
  font-family: var(--titulos);
  font-style: italic;
  font-size: 1.24rem;
  line-height: 1.56;
  color: var(--azul-profundo);
  margin-bottom: 0;
}

.ej-cita-ref {
  display: block;
  margin-top: 10px;
  font-family: var(--interfaz);
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dorado-texto);
}

/* Recuadro con etiqueta: Talmud, perspectiva mesiánica, ejemplo */
.ej-recuadro {
  margin: 1.8em 0;
  padding: 24px 28px;
  border: 1px solid var(--borde);
  border-radius: 3px;
}

.ej-recuadro-oscuro {
  background: var(--azul-profundo);
  border-color: var(--azul-profundo);
}

.ej-recuadro-oscuro p { color: var(--tinta-clara); }
.ej-recuadro-oscuro .ej-recuadro-lbl { color: var(--dorado); }
.ej-recuadro-oscuro .he { color: var(--dorado); }

.ej-recuadro-lbl {
  font-family: var(--interfaz);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dorado-texto);
  margin-bottom: 12px;
}

.ej-recuadro p:last-child { margin-bottom: 0; }

/* Línea de diálogo en las historias para niños */
.ej-dicho {
  font-family: var(--titulos);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--azul-profundo);
  margin: 1.2em 0 1.4em;
  padding-inline-start: 22px;
  border-inline-start: 2px solid var(--dorado);
}

/* Línea de cálculo: hebreo y números mezclados.
   'plaintext' deja que cada tramo corra en su propio sentido,
   el hebreo de derecha a izquierda y los números al revés, sin
   que la línea entera se dé vuelta. */
.ej-formula {
  unicode-bidi: plaintext;
  font-family: var(--hebreo);
  font-size: 1.3rem;
  line-height: 1.8;
  color: var(--azul-profundo);
  background: var(--crema);
  padding: 10px 16px;
  border-inline-start: 2px solid var(--dorado);
  margin: 0 0 0.8em;
}

/* Video incrustado: se adapta al ancho y guarda su proporcion */
.ej-video {
  position: relative;
  margin: 1.8em 0;
  padding-bottom: 56.25%;        /* proporcion 16 a 9 */
  height: 0;
  overflow: hidden;
  border-radius: 3px;
  background: var(--azul-profundo);
}

.ej-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Tablas (alefbet, valores numéricos) */
.ej-estudio-tabla { overflow-x: auto; margin: 1.8em 0; }

.ej-estudio table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--interfaz);
  font-size: 13px;
}

.ej-estudio th,
.ej-estudio td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--borde);
  text-align: start;
  color: var(--tinta-media);
}

.ej-estudio th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dorado-texto);
  border-bottom: 1px solid var(--dorado);
}

/* Pie de un estudio: tema, fecha y vuelta */
.ej-estudio-pie {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--borde);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: baseline;
  font-size: 12px;
  color: var(--tinta-suave);
}


/* ---------- 12c. EL SHEMÁ ---------- */
/* Bloque de apertura, azul y centrado. */

.ej-shema { background: var(--azul-profundo); text-align: center; }

.ej-shema-he {
  display: block;
  font-family: var(--hebreo);
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1.5;
  color: var(--dorado);
  direction: rtl;
}

.ej-shema-tr {
  display: block;
  margin-top: 14px;
  font-family: var(--lectura);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--tinta-clara);
}

.ej-shema p {
  max-width: 56ch;
  margin: 26px auto 0;
  font-family: var(--lectura);
  font-size: 1.22rem;
  line-height: 1.78;
  color: var(--tinta-clara);
}


/* ---------- 12d. LISTA DE PRINCIPIOS ---------- */
/* Filas editoriales separadas por un filete. Se eligió esta
   forma en vez de tarjetas: quince tarjetas serían un muro de
   cajas, y estos textos se leen, no se ojean. */

.ej-principios { border-top: 1px solid var(--borde); }

.ej-principio {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  padding-block: 30px;
  border-bottom: 1px solid var(--borde);
}

.ej-principio-num {
  flex: 0 0 160px;
  padding-top: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dorado-texto);
}

.ej-principio-cuerpo { flex: 999 1 420px; min-width: 0; }

.ej-principio h3 { font-size: 1.32rem; margin-bottom: 8px; }

.ej-principio p {
  font-family: var(--lectura);
  font-size: 1.18rem;
  line-height: 1.72;
  color: var(--tinta-suave);
}

@media (max-width: 600px) {
  .ej-principio { gap: 6px; padding-block: 24px; }
  .ej-principio-num { flex: 1 1 100%; padding-top: 0; }
}


/* ---------- 13. CITA ---------- */

.ej-cita {
  padding: 4px 0 4px 26px;
  border-inline-start: 2px solid var(--dorado);
}

.ej-cita p {
  font-family: var(--titulos);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.46;
  color: var(--azul-profundo);
}


/* ---------- 14. EL PIE ---------- */

.ej-footer {
  background: var(--crema);
  border-top: 1px solid var(--borde);
}

.ej-footer .ej-ancho { padding-block: 72px 32px; }

.ej-footer-cuerpo {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 64px;
}

.ej-footer-marca { flex: 1 1 300px; min-width: 0; }
.ej-footer-columna { flex: 0 1 200px; }

.ej-footer-nombre {
  font-family: var(--titulos);
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--azul-profundo);
  line-height: 1;
}

.ej-footer-hebreo {
  font-family: var(--lectura);
  font-size: 1.1rem;
  color: var(--dorado-texto);
  margin: 4px 0 18px;
  direction: rtl;
}

.ej-footer-cita {
  max-width: 40ch;
  font-family: var(--lectura);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.62;
  color: var(--tinta-suave);
}

.ej-footer-cita cite {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-family: var(--interfaz);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dorado-texto);
}

.ej-footer-columna a {
  display: block;
  padding-block: 7px;
  font-size: 13px;
  color: var(--tinta-media);
  text-decoration: none;
}

.ej-footer-columna a:hover { color: var(--dorado-texto); }

.ej-footer-legal {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--borde);
  font-size: 11.5px;
  color: var(--tinta-suave);
}


/* ============================================================
   15. PANTALLAS ANGOSTAS
   Un solo punto de quiebre para el menú (900px) y otro para
   las rejillas (760px). Menos puntos de quiebre, menos sorpresas.
   ============================================================ */

@media (max-width: 900px) {

  /* El menú se esconde detrás del botón */
  .ej-menu-boton { display: block; }

  .ej-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--papel);
    border-bottom: 1px solid var(--borde);
    box-shadow: 0 18px 32px rgba(60,20,24,0.10);
    padding: 8px var(--margen) 20px;
  }

  .ej-nav.ej-abierto { display: flex; }

  .ej-nav a {
    padding-block: 15px;
    border-bottom: 1px solid var(--borde);
    font-size: 15px;
  }

  .ej-nav a[aria-current="page"] {
    border-bottom: 1px solid var(--borde);
    padding-bottom: 15px;
    color: var(--dorado-texto);
  }

  .ej-nav .ej-boton {
    margin-top: 16px;
    border-bottom: 1px solid var(--dorado);
    text-align: center;
  }
}

@media (max-width: 760px) {

  /* El velo del hero se vuelve parejo: el texto manda */
  .ej-hero-velo {
    background: linear-gradient(180deg,
      rgba(255,255,255,0.92) 0%,
      rgba(255,255,255,0.86) 55%,
      rgba(255,255,255,0.80) 100%);
  }

  .ej-hero-cuerpo { align-items: stretch; }
  .ej-tarjeta-parasha { max-width: none; }

  /* Las rejillas se apilan */
  .ej-puertas      { grid-template-columns: 1fr; }
  .ej-articulos    { grid-template-columns: 1fr; gap: 40px; }
  .ej-franja-datos { grid-template-columns: 1fr 1fr; }

  .ej-cabecera .ej-enlace { margin-inline-start: 0; }
  .ej-footer .ej-ancho { padding-block: 56px 28px; }
  .ej-footer-legal { margin-top: 40px; }
}

@media (max-width: 460px) {
  .ej-franja-datos { grid-template-columns: 1fr; }
  .ej-puerta { padding: 32px 26px; }
  .ej-tarjeta-parasha { padding: 26px; }
}


/* ---------- 16. IMPRESIÓN ---------- */

@media print {
  .ej-topbar, .ej-nav, .ej-menu-boton, .ej-hero-foto { display: none; }
  .ej-hero-velo { background: none; }
  body { color: #000; }
  a { color: #000; text-decoration: underline; }
}

/* ---------------------------------------------------------------
   INDICE DE LA PAGINA
   Fila de enlaces que lleva a las secciones de la misma pagina.
   Antes era una columna de parrafos sueltos.
   --------------------------------------------------------------- */
.ej-indice{
  margin:26px 0 40px; padding:18px 22px;
  background:var(--crema); border:1px solid var(--borde); border-radius:4px;
}

/* Cuando el indice abre la pagina, no necesita aire arriba */
.ej-estudio > .ej-indice:first-child{ margin-top:0; }

.ej-indice-rotulo{
  font-family:var(--interfaz); font-size:10px; font-weight:600;
  letter-spacing:0.13em; text-transform:uppercase;
  color:var(--dorado-texto); margin:0 0 10px;
}

/* Rejilla: los titulos cortos se reparten en columnas y los
   largos ocupan su linea sin desarmar nada. */
.ej-indice-lista{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:0 26px;
}

.ej-indice-lista a{
  display:block;
  font-family:var(--interfaz); font-size:13.5px; font-weight:500;
  line-height:1.35; color:var(--azul-institucional);
  text-decoration:none; padding-block:7px;
}

.ej-indice-lista a:hover{
  color:var(--dorado-texto);
  text-decoration:underline; text-underline-offset:3px;
}

/* ---------------------------------------------------------------
   AUDIO
   Las grabaciones del Beit Midrash. El reproductor es el del
   navegador: no se le pone decoracion encima para que siga
   funcionando igual en computador y en celular.
   --------------------------------------------------------------- */
.ej-audio{
  display:block; width:100%; max-width:560px;
  margin:14px 0 30px; height:40px;
}

/* ===============================================================
   EL MENU DESPLEGABLE Y LA LINEA DE ORIENTACION
   Agregado el 22 de octubre de 2026.

   Por que existe
   --------------
   El menú mostraba cinco palabras. Para saber que existía Tanaj,
   Yeshúa o Brit HaDashá había que entrar a Estudio y recorrer la
   página entera. Un visitante que llega de fuera se perdía en la
   entrada. Estas reglas abren las salas de cada puerta sin tocar
   la estructura del portal: la muestran.

   No hay JavaScript. El panel se abre al pasar el cursor y
   también al llegar con el teclado (:focus-within). En el
   teléfono, donde no existe el cursor, las salas se muestran
   abiertas dentro del menú.
   =============================================================== */

.ej-nav-puerta { position: relative; }

/* La flecha que avisa que la puerta tiene salas detrás */
.ej-nav-puerta-salas > .ej-nav-puerta-nombre::after {
  content: "";
  display: inline-block;
  margin-inline-start: 7px;
  border: 4px solid transparent;
  border-top-color: var(--dorado);
  transform: translateY(2px);
}

/* El panel. El relleno de arriba es el puente que impide que el
   cursor "caiga" entre el nombre de la puerta y el panel. */
.ej-panel {
  position: absolute;
  top: 100%;
  /* Se ancla al borde de ARRANQUE de su puerta y crece hacia el
     otro lado. Anclado al final, el panel ancho de Estudio se
     salia por la izquierda de la hoja. */
  inset-inline-start: 0;
  padding-top: 22px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease;
  z-index: 40;
}

/* La ultima puerta con salas queda muy a la derecha: su panel se
   ancla al borde contrario para no salirse de la hoja. */
.ej-nav-puerta:nth-last-of-type(2) > .ej-panel {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.ej-nav-puerta:hover > .ej-panel,
.ej-nav-puerta:focus-within > .ej-panel { opacity: 1; visibility: visible; }

.ej-panel-cuerpo {
  display: flex;
  gap: 30px;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-top: 2px solid var(--dorado);
  border-radius: 3px;
  box-shadow: 0 20px 44px rgba(60,20,24,0.13);
  padding: 22px 24px;
}

.ej-panel-grupo { min-width: 158px; }

.ej-panel-rotulo {
  font-family: var(--interfaz);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dorado-texto);
  margin: 0 0 12px;
}

.ej-nav .ej-panel a {
  display: block;
  white-space: normal;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--tinta);
  padding-block: 7px;
}

.ej-nav .ej-panel a:hover {
  color: var(--dorado-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ---------------------------------------------------------------
   DONDE ESTOY
   Una línea bajo el encabezado: la puerta de la que cuelga esta
   página, enlazada, y el nombre de la página. Antes el único
   camino de vuelta estaba al final y había que recorrer la
   página entera para encontrarlo.
   --------------------------------------------------------------- */
.ej-donde {
  background: var(--crema);
  border-bottom: 1px solid var(--borde);
}

.ej-donde .ej-ancho {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 11px;
  font-family: var(--interfaz);
  font-size: 12.5px;
}

.ej-donde a {
  color: var(--dorado-texto);
  font-weight: 600;
  text-decoration: none;
}

.ej-donde a:hover { text-decoration: underline; text-underline-offset: 3px; }

.ej-donde-sep  { color: var(--tinta-suave); }
.ej-donde-aqui { color: var(--tinta-media); }


@media (max-width: 900px) {

  /* En el teléfono no hay cursor: las salas se muestran abiertas
     dentro del menú, indentadas bajo su puerta. */
  .ej-nav-puerta { display: block; }

  .ej-nav-puerta-salas > .ej-nav-puerta-nombre::after { display: none; }

  .ej-panel {
    position: static;
    opacity: 1;
    visibility: visible;
    padding-top: 0;
  }

  .ej-panel-cuerpo {
    flex-direction: column;
    gap: 14px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 6px 0 10px 16px;
    border-inline-start: 2px solid var(--borde);
    margin-block: 4px 10px;
  }

  .ej-panel-grupo { min-width: 0; }
  .ej-panel-rotulo { margin-bottom: 6px; }

  .ej-nav .ej-panel a {
    padding-block: 9px;
    border-bottom: 0;
    font-size: 14px;
  }

  .ej-donde .ej-ancho { padding-block: 10px; font-size: 12px; }
}

@media print {
  .ej-donde { display: none; }
}

/* ---------------------------------------------------------------
   AJUSTES FINOS DEL MENU NUEVO
   --------------------------------------------------------------- */

/* El titulo de la pagina en la linea de orientacion puede ser
   largo. Se recorta con puntos suspensivos antes que partirse
   en dos lineas. */
.ej-donde a      { flex: 0 0 auto; }
.ej-donde-sep    { flex: 0 0 auto; }
.ej-donde-aqui {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  /* En el telefono el nombre de la puerta manda sobre sus salas */
  .ej-nav .ej-nav-puerta-nombre {
    font-size: 16px;
    font-weight: 600;
    color: var(--azul-profundo);
    border-bottom: 0;
    padding-bottom: 6px;
  }
}

/* ===============================================================
   LA SALIDA SIEMPRE A LA VISTA
   Agregado el 22 de octubre de 2026.

   Por que existe
   --------------
   El portal tiene 93 paginas largas. En todas ellas el unico
   camino de vuelta estaba al final: habia que recorrer la pagina
   entera para encontrarlo. En las mas largas, estudios de tres
   mil palabras sin secciones, eso son varios minutos de scroll
   sin una sola salida.

   La linea de orientacion ahora queda fija arriba. Ocupa poco y
   siempre ofrece el camino de vuelta.
   =============================================================== */

.ej-donde {
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 1px 0 var(--borde), 0 6px 14px rgba(60,20,24,0.05);
}


/* ---------------------------------------------------------------
   VOLVER AL INDICE
   En las 30 paginas que tienen indice propio, al terminar cada
   seccion. Discreto y alineado al margen de cierre: acompana, no
   interrumpe la lectura.
   --------------------------------------------------------------- */
.ej-volver-indice {
  margin: 34px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
  text-align: end;
}

.ej-volver-indice a {
  font-family: var(--interfaz);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--dorado-texto);
  text-decoration: none;
}

.ej-volver-indice a::before {
  content: "\2191";
  margin-inline-end: 6px;
}

.ej-volver-indice a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* El ancla no queda pegada al borde superior cuando la linea
   fija esta encima */
.ej-indice, .ej-estudio h2[id], .ej-estudio h3[id] { scroll-margin-top: 64px; }

/* ---------------------------------------------------------------
   EL ORDEN DE LAS CAPAS

   La franja de orientacion quedaba pintada ENCIMA del panel del
   menu: el desplegable se abria debajo de ella y, al bajar el
   cursor para entrar, la franja lo interceptaba y el panel se
   cerraba sin alcanzar a usarlo.

   La causa: .ej-header crea su propia capa con z-index 20, asi
   que el 40 del panel solo vale DENTRO del encabezado. Frente a
   la franja, que vale 30, el encabezado entero perdia.

   Se corrige subiendo el encabezado por sobre la franja. Orden
   definitivo, de arriba hacia abajo:

      50   el encabezado y su panel desplegable
      30   la franja de orientacion
       0   el contenido de la pagina
   --------------------------------------------------------------- */
.ej-header { z-index: 50; }

/* ---------------------------------------------------------------
   EL LOGO DE LA KEHILA
   Agregado el 22 de octubre de 2026.

   El logo lleva tres lineas de caligrafia hebrea y un arbol de
   raices finas. A 60 px, el tamano del encabezado, todo eso se
   vuelve una mancha gris. Por eso el encabezado conserva el
   nombre tipografico y el logo va solo donde tiene aire:
   el pie, la pagina de Comunidad y la tarjeta de compartir.
   --------------------------------------------------------------- */
.ej-footer-logo {
  display: block;
  width: 88px; height: 88px;
  margin-bottom: 18px;
}

/* Comunidad: el logo abre la pagina, junto al titulo */
.ej-portada-marca {
  display: flex;
  align-items: center;
  gap: 38px;
  flex-wrap: wrap;
}

.ej-marca-logo {
  width: 190px; height: 190px;
  flex: 0 0 auto;
}

@media (max-width: 680px) {
  .ej-portada-marca { gap: 22px; }
  .ej-marca-logo { width: 120px; height: 120px; }
  .ej-footer-logo { width: 72px; height: 72px; }
}

/* ---------------------------------------------------------------
   EL HEBREO BAJO EL NOMBRE

   Un bloque con direction:rtl alinea su texto al borde derecho de
   SU CAJA, no del texto. En el pie la caja ocupaba todo el ancho
   de la columna, asi que "עץ חיים" se iba al centro de la pagina,
   despegado del nombre al que acompaña.

   La caja se encoge al tamaño de su texto y el hebreo vuelve a su
   sitio, justo debajo de "Ets Jayim".
   --------------------------------------------------------------- */
.ej-footer-hebreo,
.ej-logo-hebreo { width: fit-content; }

/* ---------------------------------------------------------------
   ROTULOS DE SECCION
   Los estudios anuncian cada seccion con un rotulo pequeño
   ("Introduccion", "Parte 2"), a veces la palabra hebrea, y luego
   el titulo. La linea y la marca dorada que abren la seccion van
   sobre el rotulo, no sobre el titulo: si no, el rotulo queda
   colgando de la seccion anterior.
   --------------------------------------------------------------- */
.ej-estudio > .ej-sec-etiqueta {
  font-family: var(--interfaz);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dorado-texto);
  margin: 3.4em 0 0.5em;
  padding-top: 1.6em;
  border-top: 1px solid var(--borde);
  position: relative;
}
.ej-estudio > .ej-sec-etiqueta::before {
  content: ""; position: absolute; top: -1px; inset-inline-start: 0;
  width: 52px; height: 3px; background: var(--dorado);
}
.ej-estudio > .ej-sec-etiqueta:first-child,
.ej-estudio > .ej-indice + .ej-sec-etiqueta,
.ej-estudio > .ej-volver-indice + .ej-sec-etiqueta { margin-top: 2em; }
.ej-estudio > .ej-sec-etiqueta:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.ej-estudio > .ej-sec-etiqueta:first-child::before { display: none; }

/* El titulo que sigue al rotulo ya no lleva linea propia */
.ej-estudio > .ej-sec-etiqueta + h2,
.ej-estudio > .ej-sec-etiqueta + .he + h2,
.ej-estudio > .ej-sec-etiqueta + h3,
.ej-estudio > .ej-sec-etiqueta + .he + h3 {
  margin-top: 0.2em;
  padding-top: 0;
  border-top: 0;
}
.ej-estudio > .ej-sec-etiqueta + h2::before,
.ej-estudio > .ej-sec-etiqueta + .he + h2::before { display: none; }
.ej-estudio > .ej-sec-etiqueta + .he { margin: 0.1em 0 0.2em; }

/* ===============================================================
   CORRECCIONES DE LA AUDITORIA · 22 de octubre de 2026
   =============================================================== */

/* EL BOTON "COMIENZA AQUI" DEL MENU
   La regla general de los enlaces del menu (.ej-nav a) pesaba mas
   que la del boton: el texto quedaba gris sobre dorado (3,66:1,
   bajo el minimo de 4,5:1) y al pasar el cursor, azul sobre azul.
   Ahora el boton manda dentro del menu en sus tres estados.
   Azul profundo sobre dorado: 7,9:1. */
.ej-nav a.ej-boton            { color: var(--azul-profundo); }
.ej-nav a.ej-boton:hover,
.ej-nav a.ej-boton:focus-visible {
  color: var(--papel);
  background: var(--azul-profundo);
  border-color: var(--azul-profundo);
}

/* SALAS IMPARES
   Tres salas en una rejilla de dos columnas dejaban un hueco gris
   (Calendario, y ahora Estudio en "Para ir mas lejos"). Con tres,
   la rejilla pasa a tres columnas; con otro numero impar, la ultima
   ocupa el ancho completo. */
.ej-salas:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ej-salas > :last-child:nth-child(odd):not(:nth-child(3)) { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .ej-salas:has(> :nth-child(3):last-child) { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   LA LECTURA
   Decision del Rabino: "la que sea mas clara y legible". Se
   compararon tres opciones con las fuentes reales, en computador y
   en telefono. Montserrat es la mas clara, sobre todo en pantallas
   chicas, y es lo que la regla del portal ya decia: Montserrat para
   los textos, Cormorant para frases destacadas y tono editorial.

   El cuerpo de lectura pasa a Montserrat, oscuro y con aire.
   Cormorant se queda donde su trazo luce: las entradas, las
   bajadas y las frases destacadas, y ahora mas firme y oscura.
   Las citas siguen en Playfair cursiva.
   --------------------------------------------------------------- */
.ej-estudio p:not([class]),
.ej-estudio li,
.ej-texto p:not([class]) {
  font-family: var(--interfaz);
  font-weight: 400;
  font-size: 1.06rem;
  line-height: 1.8;
  color: var(--tinta);
}
.ej-estudio strong, .ej-texto strong { font-weight: 600; color: var(--azul-profundo); }

/* La entrada de un texto conserva el tono editorial */
.ej-estudio .ej-entrada,
.ej-texto .ej-entrada {
  font-family: var(--lectura);
  font-weight: 500;
  font-size: 1.45rem;
  line-height: 1.6;
  color: var(--tinta);
}

/* Bajadas y descripciones: Cormorant, pero firme y oscura.
   Antes iban en gris #55637A con trazo fino y se leian palidas. */
.ej-lectura,
.ej-sala-bajada,
.ej-descarga-cita {
  font-weight: 500;
  color: var(--tinta-media);
}
.ej-lectura-oscura { color: var(--tinta); }
.ej-lectura-clara  { color: var(--tinta-clara); }

/* Dentro de un estudio, las descripciones de las filas no deben
   heredar el tamaño del cuerpo */
.ej-estudio .ej-descarga-cita { font-family: var(--lectura); font-size: 1.12rem; line-height: 1.5; }


/* ---------------------------------------------------------------
   LA COLUMNA DE LECTURA, CENTRADA
   El texto ocupaba la mitad izquierda de la hoja y la derecha
   quedaba vacia: la pagina se veia cargada a un lado. Ahora la
   columna y su titulo van al centro, con el mismo ancho.
   44rem son unos 70 caracteres por linea: la medida comoda.
   --------------------------------------------------------------- */
.ej-estudio,
.ej-texto,
.ej-estudio-pie { max-width: 44rem; margin-inline: auto; }

.ej-cabeza-columna {
  padding-inline: max(var(--margen), calc((100% - 44rem) / 2));
}


/* ---------------------------------------------------------------
   CLASES QUE REEMPLAZAN ESTILOS ESCRITOS DENTRO DE LAS PAGINAS
   La hoja de estilos dice "no escribas estilos dentro de las
   paginas", y habia unos 1.300. Los que se repetian ahora son
   clases con nombre: se cambian aqui una vez y cambian en todo
   el portal.
   --------------------------------------------------------------- */
.ej-cabeza                     { padding-block: 52px; }
.ej-cabeza .ej-etiqueta,
.ej-etiqueta-aire              { margin-bottom: 14px; }
.ej-cabeza .ej-hebreo-frase    { font-size: 1.6rem; color: var(--dorado-texto); margin-bottom: 10px; }
.ej-cabeza-bajada              { max-width: 60ch; margin-top: 16px; }
.ej-cabeza-ref                 { margin-top: 14px; font-family: var(--lectura); font-style: italic; font-weight: 500; font-size: 1.2rem; color: var(--tinta-media); }
.ej-pie-volver                 { margin-inline-start: auto; }
.ej-cita-ref-suelta            { margin-top: -0.6em; }
.ej-recuadro-lbl               { margin: 1.8em 0 -0.5em; }
.ej-estudio .he.ej-he-frase    { font-size: 1.5rem; color: var(--dorado-texto); }
.ej-aviso                      { margin-bottom: 40px; padding: 26px 30px; background: var(--crema); border-inline-start: 2px solid var(--dorado); }
.ej-aviso-rotulo               { margin-bottom: 8px; }
.ej-aviso-texto                { margin-bottom: 16px; }
.ej-rotulo-lista               { margin-bottom: 24px; }
.ej-sala-vacia                 { padding: 40px 36px; background: var(--crema); border: 1px solid var(--borde); max-width: 62ch; }
.ej-tras-lista                 { margin-top: 44px; }
.ej-descargas-separadas        { margin-bottom: 46px; }
.ej-banda-crema                { background: var(--crema); border-top: 1px solid var(--borde); }
.ej-rotulo-seccion             { margin-bottom: 12px; }
.ej-titulo-seccion             { margin-bottom: 32px; }
.ej-descarga-fija              { cursor: default; }
.ej-descarga-enlace            { color: inherit; text-decoration: none; }
.ej-etiqueta-pdf               { color: var(--dorado-texto); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ej-serie-titulo               { margin-top: 2.2em; }
.ej-fila-enlaces               { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.ej-horario-hora               { font-family: var(--interfaz); font-size: 13px; color: var(--tinta-suave); }

/* ---------------------------------------------------------------
   PARRAFOS CON NOMBRE DENTRO DE LA COLUMNA
   La regla general del cuerpo (.ej-estudio p) pesaba mas que la
   clase propia de cada parrafo: "En esta pagina" salia grande y
   gris en vez de pequeño y dorado. Aqui cada clase recupera su
   estilo dentro de la columna de lectura.
   --------------------------------------------------------------- */
.ej-estudio .ej-indice-rotulo {
  font-family:var(--interfaz); font-size:10px; font-weight:600;
  letter-spacing:0.13em; text-transform:uppercase;
  color:var(--dorado-texto); margin:0 0 10px;
}

.ej-estudio .ej-volver-indice {
  margin: 34px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
  text-align: end;
}

.ej-estudio .ej-recuadro-lbl {
  font-family: var(--interfaz);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dorado-texto);
  margin-bottom: 12px;
  margin: 1.8em 0 -0.5em;
}

.ej-estudio .ej-cita-ref {
  display: block;
  margin-top: 10px;
  font-family: var(--interfaz);
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dorado-texto);
}

.ej-estudio .ej-cita-ref-suelta {
  margin-top: -0.6em;
}

.ej-estudio .ej-formula {
  unicode-bidi: plaintext;
  font-family: var(--hebreo);
  font-size: 1.3rem;
  line-height: 1.8;
  color: var(--azul-profundo);
  background: var(--crema);
  padding: 10px 16px;
  border-inline-start: 2px solid var(--dorado);
  margin: 0 0 0.8em;
}

.ej-estudio .ej-dicho {
  font-family: var(--titulos);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--azul-profundo);
  margin: 1.2em 0 1.4em;
  padding-inline-start: 22px;
  border-inline-start: 2px solid var(--dorado);
}

/* ===============================================================
   LA PORTADA · 22 de octubre de 2026
   =============================================================== */

/* EL HERO, NITIDO
   La foto estaba cubierta por un velo blanco del 68 al 88 %: se veia
   lavada, casi sepia, con el titulo en dorado oscuro encima. Ahora el
   texto descansa sobre crema a la izquierda y la foto se ve limpia a
   la derecha, detras de la tarjeta de la parasha. */
.ej-hero-velo {
  background: linear-gradient(90deg,
    rgba(250,246,239,0.97) 0%,
    rgba(250,246,239,0.95) 44%,
    rgba(250,246,239,0.55) 58%,
    rgba(250,246,239,0)    72%);
}
.ej-hero-titulo     { color: var(--azul-profundo); margin: 20px 0; }
.ej-hero-titulo em  { color: var(--dorado-texto); }
.ej-hero-versiculo  { margin-bottom: 24px; }
.ej-hero-bajada     { max-width: 48ch; margin-bottom: 32px; }
.ej-hero-botones    { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* La tarjeta del Shabat: cada dato una sola vez */
.ej-tarjeta-parasha-nombre { margin: 10px 0 4px; }
.ej-tarjeta-parasha-fecha  { font-size: 13px; font-style: italic; color: var(--tinta-clara); margin-bottom: 24px; }
.ej-velas-horas p          { margin: 0 0 4px; }
.ej-velas-hora             { font-size: 1.25rem; margin-inline-start: 6px; color: var(--papel); font-weight: 500; }
.ej-velas-ciudad           { font-size: 12px; color: var(--tinta-clara); margin-top: 6px !important; }
.ej-tarjeta-moed           { margin-top: 18px; font-size: 13px; color: var(--tinta-clara); }
.ej-tarjeta-moed b         { color: var(--papel); font-weight: 600; }
.ej-tarjeta-boton          { margin-top: 22px; }

/* Las cuatro puertas dicen "Entrar", igual que las salas */
.ej-titulo-puertas          { margin-bottom: 52px; }
.ej-puerta .ej-sala-pie     { margin-top: 18px; font-family: var(--interfaz); font-size: 11px; line-height: 1; color: var(--dorado-texto); }
a.ej-puerta:hover .ej-sala-pie { color: var(--azul-profundo); }

/* El bloque azul de primeros pasos */
.ej-bloque-izq     { flex: 1 1 340px; min-width: 0; }
.ej-bloque-rotulo  { font-size: 12px; margin-bottom: 20px; }
.ej-bloque-titulo  { line-height: 1.18; margin-bottom: 24px; }
.ej-bloque-texto   { margin-bottom: 32px; }
.ej-lista-preguntas { flex: 999 1 420px; min-width: 0; }

/* En el telefono la foto va arriba, entera y sin velo; el texto
   debajo sobre crema. Antes quedaba casi invisible bajo un velo
   blanco del 80 al 92 %, y aun asi pesaba 747 KB. */
@media (max-width: 760px) {
  .ej-hero-foto {
    position: relative;
    inset: auto;
    display: block;
    height: 200px;
  }
  .ej-hero-velo { background: var(--crema); }
}


/* ===============================================================
   MENU DEL TELEFONO PLEGADO Y LETRA DE LECTURA CLARA
   Agregado el 23 de octubre de 2026, a pedido del Rabino.

   1. En el telefono el menu mostraba las 31 entradas abiertas.
      Ahora muestra solo las puertas; cada una se despliega con la
      flecha de su derecha. El nombre sigue llevando a la puerta.
      La puerta donde esta el visitante viene abierta.
   2. Las descripciones de las cuatro puertas y el parrafo del
      bloque azul pasan de Cormorant a Montserrat, que en pantalla
      chica se lee mucho mejor.
   =============================================================== */

.ej-nav-abrir { display: none; }

@media (max-width: 900px) {

  .ej-nav-puerta {
    border-bottom: 1px solid var(--borde);
  }

  .ej-nav-puerta-salas {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .ej-nav .ej-nav-puerta-nombre,
  .ej-nav .ej-nav-puerta-nombre[aria-current="page"] {
    display: block;
    padding-block: 15px;
    border-bottom: 0;
  }

  .ej-nav-abrir {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-inline-end: -12px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--dorado-texto);
  }

  /* La flecha: un angulo dibujado con dos bordes */
  .ej-nav-abrir::before {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .18s ease;
  }

  .ej-desplegada > .ej-nav-abrir::before {
    transform: translateY(2px) rotate(-135deg);
  }

  .ej-nav-abrir:focus-visible {
    outline: 2px solid var(--dorado);
    outline-offset: -4px;
  }

  .ej-nav-puerta-salas > .ej-panel {
    grid-column: 1 / -1;
    display: none;
  }

  .ej-nav-puerta-salas.ej-desplegada > .ej-panel { display: block; }

  .ej-panel-cuerpo { margin-block: 0 14px; }

  .ej-nav .ej-boton { border-bottom: 1px solid var(--dorado); }
}

/* 2. Letra de lectura clara en la portada */
.ej-puerta p,
.ej-bloque-texto {
  font-family: var(--interfaz);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75;
}

.ej-puerta p    { color: var(--tinta-media); }
.ej-bloque-texto { font-size: 1.06rem; color: var(--tinta-clara); }


/* La entrada "Todo Estudio" (etc.) dentro de lo desplegado: solo en
   el telefono. En el computador el nombre de la puerta ya lleva ahi. */
.ej-nav .ej-panel a.ej-panel-puerta { display: none; }

@media (max-width: 900px) {
  .ej-nav .ej-panel a.ej-panel-puerta {
    display: block;
    font-weight: 600;
    color: var(--dorado-texto);
  }
}


/* ===============================================================
   ESTUDIO REORDENADO · 25 de octubre de 2026
   1. La fila de los siete temas (Estudios y cada tema)
   2. Las tarjetas de tema y la tarjeta ancha de la Parasha
   3. Los reproductores de Parasha y Haftara
   =============================================================== */

/* 1. Fila de temas: en el computador se reparte en lineas; en el
      telefono se desliza de lado para no ocupar media pantalla. */
.ej-temas {
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  background: var(--papel);
}
.ej-temas-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding-block: 14px;
}
.ej-temas a {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-family: var(--interfaz);
  font-size: 13px;
  font-weight: 500;
  color: var(--tinta-media);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease;
}
.ej-temas a:hover { border-color: var(--dorado); color: var(--azul-profundo); }
.ej-temas a[aria-current="page"] {
  background: var(--azul-profundo);
  border-color: var(--azul-profundo);
  color: var(--papel);
}
@media (max-width: 760px) {
  .ej-temas-fila {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
}

/* 2. Tarjetas */
.ej-tema-lista {
  list-style: none;
  margin: 4px 0 18px;
  padding: 0;
  font-family: var(--interfaz);
  font-size: 14px;
  line-height: 1.55;
  color: var(--tinta-media);
}
.ej-tema-lista li { padding-block: 3px; }
.ej-tema-lista li::before { content: "· "; color: var(--dorado-texto); }
.ej-tema-lista .ej-tema-mas { color: var(--tinta-suave); }
.ej-tema-lista .ej-tema-mas::before { content: ""; }

.ej-sala-ancha {
  border: 1px solid var(--borde);
  max-width: 760px;
}
.ej-fila-enlaces-aire { margin-top: 28px; }
.ej-video-texto { margin-bottom: 4px; }

/* 3. Reproductores */
.ej-reps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
@media (max-width: 760px) { .ej-reps { grid-template-columns: 1fr; } }

.ej-rep {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 4px;
  padding: 26px 26px 22px;
}
.ej-rep-rotulo { margin-bottom: 14px; }

.ej-rep-imagen {
  margin: 0 -26px 18px;
  background: var(--azul-profundo);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.ej-rep-imagen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ej-rep-sin-imagen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
  font-family: var(--titulos);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--papel);
  text-align: center;
  border-bottom: 3px solid var(--dorado);
}

.ej-rep-titulo {
  font-size: 1.45rem;
  margin: 0 0 4px;
  color: var(--azul-profundo);
}
.ej-rep-fecha {
  font-family: var(--interfaz);
  font-size: 13px;
  color: var(--tinta-suave);
  margin: 0;
}
.ej-rep .ej-audio { max-width: none; margin: 16px 0 0; }

.ej-rep-vacio {
  font-family: var(--interfaz);
  font-size: 15px;
  color: var(--tinta-media);
  margin: 0;
}

.ej-rep-anteriores { margin: 24px 0 8px; }

/* Cinco a la vista; el resto, desplazando dentro de la lista */
.ej-rep-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--borde);
  max-height: calc(5 * 52px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ej-rep-lista a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  min-height: 52px;
  padding: 14px 4px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--borde);
  font-family: var(--interfaz);
  font-size: 14px;
  font-weight: 500;
  color: var(--tinta);
  text-decoration: none;
}
.ej-rep-lista a small {
  font-size: 12px;
  font-weight: 400;
  color: var(--tinta-suave);
  white-space: nowrap;
}
.ej-rep-lista a:hover { color: var(--dorado-texto); }
.ej-rep-lista a[aria-current="true"] { color: var(--dorado-texto); font-weight: 600; }


/* ===============================================================
   SERIES DE AUDIO (series.php) · 28 de octubre de 2026
   =============================================================== */
.ej-serie-uso .ej-titulo-seccion { max-width: 30ch; }
.ej-serie-cuenta {
  font-family: var(--interfaz);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dorado-texto);
  margin: 14px 0 26px;
}
.ej-serie {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--borde);
}
.ej-serie-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  padding: 26px 0;
  border-bottom: 1px solid var(--borde);
}
.ej-serie-num {
  font-family: var(--titulos);
  font-size: 2rem;
  line-height: 1;
  color: var(--dorado-texto);
}
.ej-serie-ord {
  font-family: var(--interfaz);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0 0 6px;
}
.ej-serie-titulo {
  font-size: 1.45rem;
  color: var(--azul-profundo);
  margin: 0 0 6px;
}
.ej-serie-desc {
  font-family: var(--interfaz);
  font-size: 15px;
  line-height: 1.7;
  color: var(--tinta-media);
  margin: 0;
  max-width: 62ch;
}
.ej-serie .ej-audio { margin: 16px 0 0; }
.ej-serie-pendiente .ej-serie-num,
.ej-serie-pendiente .ej-serie-titulo { color: var(--tinta-suave); }
@media (max-width: 760px) {
  .ej-serie-item { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .ej-serie-num { font-size: 1.5rem; }
}
.ej-serie-intro { margin-top: 14px; }


/* ===============================================================
   SHAAR HARAJAMIM · CAPA FINAL DEL DISEÑO
   Versión 1.0 · 9 de noviembre de 2026 · Proyecto Nehemías

   Esta capa va al final a propósito: repinta todo el portal con el
   mundo visual nuevo sin tocar el HTML de cada página. Las reglas
   de arriba siguen ordenando la estructura; estas deciden el aspecto.
   Referencia: Nehemias/06-sistema-diseno/2026-11-09_propuesta-shaar-harajamim
   =============================================================== */

/* --- La hoja de piedra sobre el color de la muralla --- */
.ej-hoja {
  border: 1px solid var(--borde-hoja);
  border-radius: 4px;
  box-shadow: none;
}
@media (max-width: 760px) {
  .ej-hoja { border: 0; border-radius: 0; }
}
.ej-topbar { display: none; }
::selection { background: #EBD6A8; color: var(--tinta); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--tejelet); outline-offset: 3px; border-radius: 4px; }
.ej-bloque-azul :focus-visible, .ej-cierre :focus-visible, .ej-semana :focus-visible,
.ej-shema :focus-visible, .ej-footer :focus-visible { outline-color: var(--dorado); }

/* --- El sillar herodiano: cara lisa rodeada de un margen cincelado.
       Es la forma de todas las tarjetas y recuadros del portal. --- */
.ej-sillar,
.ej-sala, .ej-recuadro, .ej-sala-vacia, .ej-aviso {
  background: var(--crema);
  border: 1px solid var(--junta);
  border-radius: 3px;
  box-shadow: inset 0 0 0 9px var(--margen-sillar), inset 0 0 0 10px rgba(181,157,116,.35);
}
.ej-sala, .ej-recuadro, .ej-aviso { padding: clamp(26px, 3vw, 34px); }

/* --- Encabezado: logo + nombre a la izquierda, menú a la derecha --- */
.ej-header { background: var(--papel); border-bottom: 1px solid var(--junta); }
.ej-header .ej-ancho { min-height: 96px; padding-block: 12px; }
.ej-logo { display: flex; flex-direction: row; align-items: center; gap: 16px; text-decoration: none; min-height: var(--toque); }
.ej-logo-img { width: 56px; height: 56px; flex: none; display: block; }
.ej-logo-texto { display: flex; flex-direction: column; }
.ej-logo .ej-logo-nombre { font-family: var(--titulos); font-weight: 500; font-size: 25px; line-height: 1.1; letter-spacing: -0.01em; color: var(--tinta); }
.ej-logo-lema { font-family: var(--interfaz); font-size: 14px; line-height: 1.3; color: var(--tinta-suave); margin-top: 2px; }
.ej-nav a.ej-nav-puerta-nombre { font-size: 16.5px; font-weight: 600; color: var(--tinta); }
.ej-nav a.ej-nav-puerta-nombre[aria-current] { color: var(--tejelet); box-shadow: inset 0 -2px 0 var(--dorado); }
.ej-nav .ej-panel a { font-size: 15.5px; }
.ej-panel-rotulo { font-size: 13.5px; color: var(--dorado-texto); }

/* --- Botones: píldoras de tejelet --- */
.ej-boton,
.ej-nav a.ej-boton,
.ej-boton-azul,
.ej-boton-contorno {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  font-family: var(--interfaz); font-size: 16px; font-weight: 600;
  letter-spacing: 0; text-transform: none; text-decoration: none;
  transition: transform var(--rapido) var(--ease-out);
}
.ej-boton, .ej-nav a.ej-boton { background: var(--tejelet); border: 1px solid var(--tejelet); color: #fff; }
.ej-boton-azul { background: transparent; border: 1px solid var(--tejelet); color: var(--tejelet); }
.ej-boton-contorno { background: transparent; border: 1px solid rgba(238,240,247,.6); color: #fff; }
.ej-boton-claro, .ej-nav a.ej-boton-claro { background: var(--papel); border-color: var(--papel); color: var(--tejelet); }
.ej-boton:active, .ej-boton-azul:active, .ej-boton-contorno:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .ej-boton:hover, .ej-nav a.ej-boton:hover { background: var(--tejelet-hondo); border-color: var(--tejelet-hondo); color: #fff; }
  .ej-boton-azul:hover { background: var(--tejelet); color: #fff; }
  .ej-boton-contorno:hover { background: rgba(238,240,247,.12); color: #fff; }
  .ej-boton-claro:hover { background: #fff; color: var(--tejelet); }
}
.ej-enlace, .ej-enlace-suelto {
  display: inline-flex; align-items: center; min-height: var(--toque);
  font-family: var(--interfaz); font-size: 16px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--tejelet);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  border-bottom: 0; padding-block: 0;
}
.ej-titulo-h2 { color: var(--tinta); }

/* --- Rótulos: sin mayúsculas espaciadas, tamaño legible --- */
.ej-etiqueta, .ej-etiqueta-gris, .ej-etiqueta-dorada, .ej-sala-pie, .ej-articulo-tema,
.ej-indice-rotulo, .ej-panel-rotulo, .ej-dato-etiqueta, .ej-recuadro-lbl, .ej-sala-cuenta,
.ej-serie-cuenta, .ej-serie-ord, .ej-cita-ref, .ej-etiqueta-pdf, .ej-principio-num,
.ej-estudio > .ej-sec-etiqueta, .ej-estudio .ej-indice-rotulo, .ej-estudio .ej-cita-ref,
.ej-estudio .ej-recuadro-lbl, .ej-estudio th, .ej-footer-cita cite, .ej-menu-boton, .ej-bloque-rotulo {
  text-transform: none; letter-spacing: 0; font-size: 14.5px;
}

/* --- Ningún texto bajo 14px --- */
.ej-articulo-fecha, .ej-dato-pie, .ej-descarga-dato, .ej-footer-legal, .ej-donde .ej-ancho,
.ej-rep-lista a small, .ej-velas-ciudad, .ej-volver-indice a, .ej-estudio-pie { font-size: 14px; }
.ej-nav a, .ej-footer-columna a, .ej-temas a, .ej-indice-lista a, .ej-rep-fecha,
.ej-horario-hora, .ej-estudio table, .ej-tarjeta-moed, .ej-tarjeta-parasha-fecha { font-size: 15px; }

/* --- Frank Ruhl Libre no tiene cursiva: los adornos van rectos --- */
.ej-cabeza-ref, .ej-footer-cita, .ej-tarjeta-parasha-fecha, .ej-shema-tr, .ej-cita p, .ej-dicho, .ej-estudio .ej-dicho { font-style: normal; }
.ej-lectura, .ej-sala-bajada, .ej-descarga-cita, .ej-cabeza-ref { font-weight: 400; }

/* --- La línea de orientación --- */
.ej-donde { background: var(--crema); box-shadow: none; border-bottom: 1px solid var(--borde); }

/* --- Los campos de tejelet van dentro de la hoja, nunca de borde a borde --- */
.ej-bloque-azul, .ej-shema {
  width: calc(100% - 2 * var(--margen));
  max-width: calc(var(--ancho) - 2 * var(--margen));
  margin: 0 auto var(--seccion);
  border-radius: var(--radio);
  overflow: hidden;
}

/* --- Títulos de sección: una junta de piedra debajo --- */
.ej-titulo-regla {
  font-family: var(--titulos); font-weight: 500; font-size: clamp(32px, 3.8vw, 46px);
  line-height: 1.15; color: var(--tinta); margin: 0 0 40px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--junta);
}

/* ===============================================================
   LA NOCHE: el pie de todas las páginas, cuando salen las tres
   estrellas que cierran el Shabat.
   =============================================================== */
.ej-footer { background: var(--tejelet); color: var(--tinta-clara-suave); border-top: 0; }
.ej-footer .ej-ancho { padding-block: 40px 32px; }
.ej-estrellas { display: flex; justify-content: center; gap: 28px; padding-top: 56px; }
.ej-estrellas svg { width: 14px; height: 14px; fill: var(--dorado); }
.ej-estrellas svg:nth-child(2) { transform: translateY(-10px); }
.ej-footer-logo { border-radius: 50%; background: var(--papel); padding: 6px; }
.ej-footer-nombre { font-size: 1.6rem; color: #fff; }
.ej-footer-hebreo { color: var(--dorado); }
.ej-footer-cita { color: var(--tinta-clara); }
.ej-footer-cita cite { color: var(--dorado); }
.ej-footer .ej-etiqueta-gris { color: var(--dorado); font-weight: 600; }
.ej-footer-columna a { display: flex; align-items: center; min-height: var(--toque); padding-block: 0; color: var(--tinta-clara); }
.ej-footer .ej-dato-pie, .ej-footer-legal { color: var(--tinta-clara-suave); }
.ej-footer-legal { border-top-color: rgba(195,200,221,.25); }
@media (hover: hover) and (pointer: fine) { .ej-footer-columna a:hover { color: #fff; } }

/* ===============================================================
   PORTADA
   =============================================================== */

/* La muralla al atardecer */
.ej-muralla { position: relative; overflow: hidden; background: var(--papel); border-bottom: 1px solid var(--junta); }
.ej-muralla-piedras { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ej-muralla-luz { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 78% 18%, rgba(214,168,82,.20), rgba(214,168,82,0) 70%); }
.ej-portada {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(40px, 5vw, 64px); align-items: end;
  padding-block: clamp(48px, 6vw, 80px) clamp(56px, 6vw, 88px);
}
.ej-portada-texto { align-self: center; max-width: 560px; }
.ej-portada-verso { display: block; font-size: 28px; line-height: 1.4; color: var(--dorado-texto); text-align: left; unicode-bidi: plaintext; }
.ej-portada-titulo { margin: 16px 0 0; font-family: var(--titulos); font-weight: 500; font-size: clamp(42px, 5vw, 66px); line-height: 1.08; letter-spacing: -0.015em; color: var(--tinta); }
.ej-portada-titulo em { font-style: normal; color: var(--dorado-texto); }
.ej-portada-bajada { margin-top: 20px; font-size: 18px; line-height: 1.65; color: var(--tinta-media); max-width: 46ch; }
.ej-portada-acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; margin-top: 32px; }

/* La puerta de la ciudad: la foto dentro de un arco de piedra */
.ej-puerta-ciudad { display: flex; flex-direction: column; }
.ej-arco { position: relative; padding: 14px; background: var(--crema); border: 1px solid var(--junta);
  border-radius: 260px 260px 3px 3px; box-shadow: inset 0 0 0 9px var(--margen-sillar); }
.ej-arco img { display: block; width: 100%; height: 380px; object-fit: cover; object-position: 30% 62%; border-radius: 246px 246px 2px 2px; }

/* La tarjeta de la semana: tejelet, compacta, apoyada en la puerta */
.ej-semana {
  position: relative; margin: -120px 26px 0;
  background: var(--tejelet); color: var(--tinta-clara);
  border-radius: var(--radio); padding: 24px 28px 20px;
  box-shadow: 0 0 0 1px var(--tejelet), 0 0 0 6px var(--papel), 0 0 0 7px var(--junta);
}
.ej-semana-rotulo { font-size: 15px; font-weight: 600; color: var(--dorado); }
.ej-semana-nombre { margin-top: 2px; }
.ej-semana-nombre h2 { font-family: var(--titulos); font-weight: 500; font-size: 48px; line-height: 1.05; color: #fff; letter-spacing: -0.01em; }
.ej-semana-fecha { margin-top: 4px; font-size: 15px; color: var(--tinta-clara-suave); }
.ej-semana-horas { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; padding: 14px 0;
  border-top: 1px solid rgba(201,154,69,.45); border-bottom: 1px solid rgba(201,154,69,.45); }
.ej-semana-hora span { display: block; font-size: 14.5px; font-weight: 600; color: #fff; }
.ej-semana-hora b { display: block; margin-top: 4px; font-family: var(--titulos); font-weight: 500; font-size: 34px; line-height: 1.1; color: #fff; font-variant-numeric: lining-nums tabular-nums; }
.ej-semana-hora + .ej-semana-hora { border-left: 1px solid rgba(201,154,69,.45); padding-left: 20px; }
.ej-semana-audio { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-top: 16px;
  padding: 8px 20px 8px 8px; border: 1px solid rgba(201,154,69,.45); border-radius: 999px; }
.ej-semana-audio b { display: block; font-size: 16px; font-weight: 600; color: #fff; line-height: 1.3; }
.ej-semana-audio span { display: block; font-size: 14px; color: var(--tinta-clara-suave); line-height: 1.35; }
.ej-semana-play { width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--dorado); display: grid; place-items: center; cursor: pointer;
  transition: transform var(--rapido) var(--ease-out); }
.ej-semana-play:active { transform: scale(.95); }
.ej-semana-play svg { width: 18px; height: 18px; fill: var(--tejelet); }
.ej-semana-play .ej-icono-play { margin-left: 3px; }
.ej-semana-play .ej-icono-pausa, .ej-semana-play.ej-sonando .ej-icono-play { display: none; }
.ej-semana-play.ej-sonando .ej-icono-pausa { display: block; }
.ej-semana-moed { margin-top: 14px; font-size: 15px; color: var(--tinta-clara-suave); }
.ej-semana-moed b { color: #fff; font-weight: 600; }
.ej-semana-hoy { margin-top: 2px; font-size: 14px; color: var(--tinta-clara-suave); }
.ej-semana-enlaces { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 4px; }
.ej-semana-enlaces a { display: inline-flex; align-items: center; min-height: var(--toque); font-size: 15px; font-weight: 600; color: var(--dorado); text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .ej-semana-enlaces a:hover { color: #fff; } }

/* Las puertas del portal: cada una con forma de puerta de la ciudad */
.ej-entrada-seccion { margin: -24px 0 0; font-size: 19px; color: var(--tinta-media); max-width: 58ch; }
.ej-mapa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.ej-mapa-puerta { padding: 64px 26px 26px; border-radius: 200px 200px 3px 3px / 110px 110px 3px 3px; }
.ej-mapa-puerta h3 { text-align: center; font-size: 29px; line-height: 1.2; }
.ej-mapa-puerta h3 a { display: inline-flex; align-items: center; min-height: var(--toque); color: var(--tejelet); text-decoration: none; }
.ej-mapa-puerta p { margin-top: 6px; text-align: center; font-size: 15.5px; line-height: 1.55; color: var(--tinta-media); }
.ej-mapa-puerta ul { list-style: none; margin: 20px 0 0; padding: 12px 0 0; border-top: 1px solid var(--junta); }
.ej-mapa-puerta li a { display: flex; align-items: center; min-height: var(--toque); font-size: 16px; font-weight: 600; color: var(--tinta); text-decoration: none;
  transition: transform var(--rapido) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .ej-mapa-puerta li a:hover { color: var(--tejelet); transform: translateX(4px); } }
/* Las líneas de las cuatro puertas quedan a la misma altura (subgrid) */
.ej-mapa-puerta { display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; }
.ej-mapa-puerta ul { align-self: start; }

/* Shaar HaRajamim: la puerta que espera */
.ej-espera { background: var(--crema); border-top: 1px solid var(--junta); border-bottom: 1px solid var(--junta); }
.ej-espera-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.ej-espera-dibujo { display: block; width: 100%; height: auto; }
.ej-espera-hebreo { display: block; font-size: 30px; line-height: 1.4; color: var(--dorado-texto); text-align: left; unicode-bidi: plaintext; }
.ej-espera-titulo { margin-top: 10px; font-family: var(--titulos); font-weight: 500; font-size: clamp(32px, 3.8vw, 46px); line-height: 1.15; color: var(--tinta); }
.ej-espera-texto { margin-top: 20px; font-size: 18.5px; line-height: 1.65; color: var(--tinta-media); max-width: 50ch; }
.ej-espera-ref { margin-top: 16px; font-size: 15px; font-weight: 600; color: var(--olivo); }
.ej-espera-acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; margin-top: 32px; }

/* Estudiamos juntos: una hilada de dos sillares */
.ej-juntos-filas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ej-juntos-item { padding: 36px 40px; }
.ej-juntos-item b { display: block; font-family: var(--titulos); font-weight: 500; font-size: 42px; line-height: 1.1; color: var(--tejelet); }
.ej-juntos-item span { display: block; margin-top: 8px; font-size: 17px; font-weight: 600; color: var(--tinta); }
.ej-juntos-item p { margin-top: 8px; font-size: 17px; line-height: 1.6; color: var(--tinta-media); max-width: 42ch; }
.ej-juntos-nota { margin-top: 32px; font-size: 17px; color: var(--tinta-media); }
.ej-juntos-nota a { color: var(--tejelet); font-weight: 600; }

/* Lo último publicado: una hilada de sillares (el HTML lo escribe conv/portada.py) */
.ej-ultimos .ej-articulos { gap: 12px; }
.ej-ultimos .ej-articulo { padding: 32px 32px 28px; background: var(--crema); border: 1px solid var(--junta); border-radius: 3px;
  box-shadow: inset 0 0 0 9px var(--margen-sillar), inset 0 0 0 10px rgba(181,157,116,.35); }
.ej-ultimos .ej-articulo-tema { color: var(--dorado-texto); }

/* El cierre de la portada: la noche empieza aquí y sigue en el pie */
.ej-cierre { background: var(--tejelet); color: var(--tinta-clara); border-radius: 0; overflow: visible; padding: 0; }
.ej-cierre .ej-estrellas { padding-top: 56px; }
.ej-cierre-cuerpo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 96px); align-items: start;
  padding-block: 40px var(--seccion); }
.ej-cierre-titulo { font-size: clamp(32px, 3.8vw, 46px); line-height: 1.15; color: #fff; }
.ej-cierre-texto { margin-top: 16px; font-size: 18px; line-height: 1.65; color: var(--tinta-clara); max-width: 46ch; }
.ej-cierre .ej-boton { margin-top: 32px; }
.ej-cierre-preguntas { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(201,154,69,.5); border-bottom: 1px solid rgba(201,154,69,.5); }
.ej-cierre-preguntas li + li { border-top: 1px solid rgba(201,154,69,.5); }
.ej-cierre-preguntas a { display: flex; align-items: center; min-height: 64px; padding: 14px 0; font-family: var(--titulos); font-size: 21px; line-height: 1.35; color: #fff; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .ej-cierre-preguntas a:hover { color: var(--dorado); } }
.ej-footer-continua { border-top: 1px solid rgba(201,154,69,.35); }
.ej-footer-continua .ej-ancho { padding-top: 56px; }

/* Celular */
@media (max-width: 767.98px) {
  .ej-header .ej-ancho { min-height: 72px; }
  .ej-logo-img { width: 46px; height: 46px; }
  .ej-logo .ej-logo-nombre { font-size: 19px; }
  .ej-logo-lema { display: none; }
  .ej-portada { grid-template-columns: 1fr; gap: 0; padding-block: 28px 48px; }
  .ej-puerta-ciudad { order: -1; }
  .ej-arco { padding: 10px; border-radius: 180px 180px 3px 3px; }
  .ej-arco img { height: 230px; border-radius: 170px 170px 2px 2px; }
  .ej-semana { margin: -64px 10px 0; padding: 22px 20px 18px; }
  .ej-semana-nombre h2 { font-size: 42px; }
  .ej-semana-hora b { font-size: 30px; }
  .ej-portada-texto { padding-top: 40px; }
  .ej-portada-verso { font-size: 24px; }
  .ej-portada-titulo { font-size: 38px; }
  .ej-solo-ancho { display: none; }
  .ej-mapa { grid-template-columns: 1fr; gap: 16px; }
  .ej-mapa-puerta { display: block; padding: 56px 22px 20px; border-radius: 200px 200px 3px 3px / 80px 80px 3px 3px; }
  .ej-mapa-puerta ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .ej-espera-cuerpo { grid-template-columns: 1fr; gap: 32px; }
  .ej-juntos-filas { grid-template-columns: 1fr; }
  .ej-juntos-item { padding: 28px 24px; }
  .ej-ultimos .ej-articulo { padding: 28px 24px 24px; }
  .ej-cierre-cuerpo { grid-template-columns: 1fr; }
  .ej-cierre-preguntas a { font-size: 19px; }
}
@media (min-width: 768px) and (max-width: 1080px) {
  .ej-mapa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .ej-boton, .ej-mapa-puerta li a, .ej-semana-play { transition: none; } }
.ej-menu-boton { border-radius: 999px; min-height: var(--toque); padding-inline: 18px; font-size: 15px; }
/* Áreas de toque de al menos 44px en menú, ruta, índices y listas */
.ej-nav a.ej-nav-puerta-nombre { display: inline-flex; align-items: center; min-height: var(--toque); }
.ej-nav .ej-panel a { display: flex; align-items: center; min-height: var(--toque); }
.ej-donde a { display: inline-flex; align-items: center; min-height: var(--toque); }
.ej-indice-lista a { display: flex; align-items: center; min-height: var(--toque); }
.ej-articulo h3 a, a.ej-descarga-enlace { display: block; padding-block: 9px; }


/* ===============================================================
   AJUSTES DEL 9 DE NOVIEMBRE DE 2026 (versión 4.1)
   =============================================================== */

/* --- Estudiamos juntos: la próxima reunión, con fecha real --- */
.ej-juntos-item .ej-juntos-proxima {
  display: inline-block; margin-top: 14px; padding: 6px 14px;
  border: 1px solid var(--junta); border-radius: 6px; background: var(--papel);
  font-size: 15px; font-weight: 600; color: var(--tejelet);
}
.ej-juntos-item [hidden] { display: none; }

/* --- La puerta en las páginas interiores ---
   La cabecera de cada página (Estudio, Vida judía, Calendario, los
   estudios, los temas...) lleva el mismo lenguaje de la portada: la
   muralla que se desvanece hacia el texto y la foto dentro de un arco
   de piedra. Se hace solo con CSS: ninguna página cambia su HTML.
   En teléfono no se muestra, para no quitar espacio de lectura. */
@media (min-width: 900px) {
  .ej-titulo-pagina {
    position: relative; overflow: hidden;
    border-bottom-color: var(--junta);
    background:
      linear-gradient(90deg, var(--papel) 0%, var(--papel) 46%, rgba(251,247,239,.35) 100%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='112'%3E%3Cpath d='M0 .5H240M0 56.5H240M.5 0V56M120.5 0V56M60.5 56V112M180.5 56V112' fill='none' stroke='%23C9B48F'/%3E%3Cpath d='M8 8.5H113M8 48.5H113M128 8.5H233M128 48.5H233M68 64.5H173M68 104.5H173' fill='none' stroke='%23DCCDB0'/%3E%3C/svg%3E") right top / 240px 112px,
      var(--papel);
  }
  .ej-titulo-pagina > .ej-ancho:not(.ej-portada-marca) {
    position: relative; min-height: 272px; padding-right: calc(var(--margen) + 250px);
    display: flex; flex-direction: column; justify-content: center;
  }
  /* En los estudios el texto sigue alineado con la columna de lectura */
  .ej-titulo-pagina > .ej-cabeza-columna:not(.ej-portada-marca) { padding-right: calc(var(--margen) + 230px); }
  .ej-titulo-pagina > .ej-ancho:not(.ej-portada-marca)::after {
    content: ""; position: absolute; right: var(--margen); top: 50%; transform: translateY(-50%);
    width: 190px; height: 216px; box-sizing: border-box; padding: 8px;
    border: 1px solid var(--junta); border-radius: 95px 95px 3px 3px;
    background:
      url("../img/hero-jerusalem-movil.webp") 30% 62% / cover no-repeat content-box,
      var(--margen-sillar);
  }
  /* Quiénes somos lleva el logo de la kehilá: ahí no va el arco. */
}

/* --- La tarjeta de la semana: cita de la porción y haftará --- */
.ej-semana-lecturas { margin: 14px 0 0; display: grid; gap: 4px; font-size: 15px; line-height: 1.45; }
.ej-semana-lecturas[hidden] { display: none; }
.ej-semana-lecturas div { display: flex; gap: 10px; align-items: baseline; }
.ej-semana-lecturas dt { flex: none; min-width: 62px; font-weight: 600; color: var(--dorado); }
.ej-semana-lecturas dd { margin: 0; color: #fff; }

/* --- Estudios: el versículo destacado, dentro de un sillar --- */
.ej-estudio .ej-verso { margin: 2.2em 0; padding: 40px 36px 34px; text-align: center; }
.ej-estudio .ej-verso > p { margin: 0; max-width: none; }
.ej-estudio .ej-verso .he { font-size: 1.9rem; line-height: 1.6; color: var(--tinta); text-align: center; direction: rtl; }
.ej-estudio .ej-verso .ej-verso-translit { margin-top: 8px; font-family: var(--interfaz); font-size: 16px; color: var(--tinta-media); }
.ej-estudio .ej-verso .ej-verso-texto { margin-top: 14px; font-family: var(--titulos); font-size: 1.45rem; line-height: 1.45; color: var(--tinta); }
.ej-estudio .ej-verso > .ej-verso-texto:first-child { margin-top: 0; }
.ej-estudio .ej-verso .ej-cita-ref { margin-top: 14px; color: var(--dorado-texto); font-weight: 600; }
/* Las citas en bloque siguen la misma piedra, sin la raya lateral */
.ej-estudio blockquote, .ej-cita-estudio {
  border: 1px solid var(--junta); border-inline-start: 1px solid var(--junta); border-radius: 3px;
  padding: 28px 32px; background: var(--crema);
  box-shadow: inset 0 0 0 9px var(--margen-sillar), inset 0 0 0 10px rgba(181,157,116,.35);
}
.ej-estudio blockquote p, .ej-cita-estudio p { font-style: normal; color: var(--tinta); }
@media (max-width: 767.98px) {
  .ej-estudio .ej-verso { padding: 32px 22px 28px; }
  .ej-estudio .ej-verso .ej-verso-texto { font-size: 1.25rem; }
  .ej-estudio .ej-verso .he { font-size: 1.6rem; }
}

/* --- Estudios: la barra de progreso de lectura --- */
.ej-progreso { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 50; pointer-events: none; }
.ej-progreso span { display: block; height: 100%; background: var(--dorado); transform: scaleX(0); transform-origin: left center; }
@media print { .ej-progreso { display: none; } }


/* ============================================================
   Muro de saludos (13-nov-2026): el cuadro "Déjanos un saludo"
   ============================================================ */
.ej-muro-intro { margin-top: 14px; max-width: 60ch; font-size: 18px; line-height: 1.6; color: var(--tinta-media); }
.ej-muro-cuerpo { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ej-muro-form[hidden] { display: none; }
.ej-muro-form, .ej-muro-lista { padding: 36px 40px; }
.ej-muro-tipo { border: 0; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; }
.ej-muro-tipo legend { padding: 0; margin-bottom: 10px; font-weight: 600; color: var(--tinta); font-size: 17px; }
.ej-muro-tipo label { display: inline-flex; align-items: center; gap: 10px; min-height: var(--toque); padding: 6px 16px; border: 1px solid var(--junta); border-radius: var(--radio); background: var(--papel); font-size: 17px; color: var(--tinta); cursor: pointer; }
.ej-muro-tipo input { width: 18px; height: 18px; accent-color: var(--tejelet); margin: 0; }
.ej-muro-tipo label:has(input:checked) { border-color: var(--tejelet); box-shadow: inset 0 0 0 1px var(--tejelet); }
.ej-muro-campo { margin-bottom: 18px; }
.ej-muro-campo label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 17px; color: var(--tinta); }
.ej-muro-campo label span { font-weight: 400; color: var(--tinta-suave); }
.ej-muro-campo input, .ej-muro-campo textarea { display: block; width: 100%; min-height: var(--toque); padding: 10px 14px; font: inherit; font-size: 17px; line-height: 1.5; color: var(--tinta); background: #fff; border: 1px solid #B9A98B; border-radius: var(--radio); }
.ej-muro-campo textarea { resize: vertical; min-height: 120px; }
.ej-muro-campo input:focus-visible, .ej-muro-campo textarea:focus-visible { outline: 2px solid var(--tejelet); outline-offset: 2px; border-color: var(--tejelet); }
.ej-muro-campo [aria-invalid="true"] { border-color: #8B2E2E; }
.ej-muro-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ej-muro-nota { margin: 4px 0 22px; font-size: 16px; line-height: 1.55; color: var(--tinta-media); }
.ej-muro-nota a { color: var(--tejelet); font-weight: 600; }
.ej-muro-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.ej-muro-pie button { cursor: pointer; min-height: var(--toque); }
.ej-muro-pie button[disabled] { opacity: .6; cursor: default; }
.ej-muro-estado { margin: 0; flex: 1 1 220px; font-size: 16px; line-height: 1.5; color: var(--tinta-media); }
.ej-muro-estado.ej-ok { color: var(--olivo); font-weight: 600; }
.ej-muro-estado.ej-error { color: #8B2E2E; font-weight: 600; }
.ej-muro-privacidad { margin: 22px 0 0; font-size: 15px; line-height: 1.55; color: var(--tinta-suave); }
.ej-muro-privacidad a { color: var(--tejelet); font-weight: 600; }
.ej-muro-lista h3 { margin: 0 0 18px; font-family: var(--titulos); font-weight: 500; font-size: 26px; line-height: 1.2; color: var(--tejelet); }
.ej-muro-items { list-style: none; margin: 0; padding: 0; }
.ej-muro-items li { padding: 14px 0; border-top: 1px solid var(--junta); }
.ej-muro-items li:first-child { border-top: 0; padding-top: 0; }
.ej-muro-items b { display: block; font-size: 17px; color: var(--tinta); }
.ej-muro-items p { margin: 4px 0 0; font-size: 16px; line-height: 1.55; color: var(--tinta-media); overflow-wrap: anywhere; }
.ej-muro-vacio { margin: 0; font-size: 17px; line-height: 1.6; color: var(--tinta-media); }
.ej-muro-vacio[hidden] { display: none; }
@media (max-width: 767.98px) {
  .ej-muro-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .ej-muro-form, .ej-muro-lista { padding: 28px 22px; }
}
.ej-muro-pie button { padding: 12px 30px; background: var(--tejelet); color: #fff; border: 1px solid var(--tejelet); border-radius: var(--radio); font-family: var(--interfaz); font-size: 16px; font-weight: 600; letter-spacing: .02em; text-transform: none; }
.ej-muro-pie button:hover:not([disabled]) { background: var(--tejelet-hondo); border-color: var(--tejelet-hondo); color: #fff; }
.ej-muro-pie button:focus-visible { outline: 2px solid var(--tejelet); outline-offset: 3px; }