/* =========================================================================
   Escuela Judicial — rediseño 2026
   Unidades relativas (WCAG 1.4.4 «Redimensionar el texto»)
   Bootstrap 3 fija «html { font-size: 10px }», lo que impide que el tamaño de
   letra preferido por la persona usuaria tenga efecto. Se devuelve el valor al
   100 % del navegador y toda la tipografía de esta hoja se expresa en rem.
   ========================================================================= */
html { font-size: 100%; }

/* =========================================================================
   Escuela Judicial — Sistema de diseño del rediseño 2026
   Tokens extraídos del archivo de Figma «Página Escuela Judicial (copia)».
   Se carga después de las hojas de la plantilla, por lo que las reglas de
   aquí mandan sobre el CSS de 2013 cuando coinciden en especificidad.
   ========================================================================= */

/* El CSS de Font Awesome que trae Joomla define las clases pero no las fuentes;
   se declaran aquí apuntando a los archivos del propio núcleo. */
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../../../media/vendor/fontawesome-free/webfonts/fa-solid-900.woff2") format("woff2"),
       url("../../../media/vendor/fontawesome-free/webfonts/fa-solid-900.ttf") format("truetype");
}

@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../../../media/vendor/fontawesome-free/webfonts/fa-regular-400.woff2") format("woff2"),
       url("../../../media/vendor/fontawesome-free/webfonts/fa-regular-400.ttf") format("truetype");
}

@font-face {
  font-family: "Font Awesome 6 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../../../media/vendor/fontawesome-free/webfonts/fa-brands-400.woff2") format("woff2"),
       url("../../../media/vendor/fontawesome-free/webfonts/fa-brands-400.ttf") format("truetype");
}

:root {
  /* --- Color: azules institucionales --- */
  --ej-navy-900: #0b2042;   /* Downriver  — títulos y fondos profundos */
  --ej-navy-800: #163563;   /* Biscay     — azul institucional */
  --ej-navy-700: #1e3a8a;   /* barra superior */
  --ej-blue-200: #bfdbfe;
  --ej-blue-100: #dbeafe;
  --ej-blue-50:  #eff6ff;

  /* --- Color: dorados --- */
  --ej-gold:     #d4af37;   /* Old Gold — acento institucional */
  --ej-gold-500: #f59e0b;
  --ej-gold-600: #d97706;
  --ej-gold-800: #92400e;
  --ej-gold-100: #fef3c7;

  /* --- Color: neutros --- */
  --ej-slate-700: #334155;
  --ej-slate-600: #475569;
  --ej-slate-500: #64748b;
  --ej-slate-400: #94a3b8;
  --ej-slate-300: #cbd5e1;
  --ej-slate-200: #e2e8f0;
  --ej-slate-100: #f1f5f9;
  --ej-slate-50:  #f8fafc;
  --ej-white: #ffffff;

  /* --- Color: páginas internas --- */
  --ej-tinta: #102d45;        /* títulos de sección */
  --ej-texto: #526575;        /* cuerpo de texto */
  --ej-bronce: #8b6a2f;       /* antetítulos y numeración */
  --ej-crema: #fbf5de;
  --ej-linea: #e4ebef;

  /* --- Color: estado --- */
  --ej-green-600: #059669;
  --ej-green-800: #065f46;
  --ej-green-100: #d1fae5;

  /* --- Tipografía --- */
  --ej-font-sans: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --ej-font-display: "Playfair Display", Georgia, "Times New Roman", serif;

  --ej-text-xs:  0.75rem; /* 12px */
  --ej-text-sm:  0.875rem; /* 14px */
  --ej-text-base:1rem; /* 16px */
  --ej-text-lg:  1.125rem; /* 18px */
  --ej-text-xl:  1.5rem; /* 24px */
  --ej-text-2xl: 1.875rem; /* 30px */
  --ej-text-3xl: 2.25rem; /* 36px */

  /* --- Espaciado --- */
  --ej-space-1: 4px;
  --ej-space-2: 8px;
  --ej-space-3: 12px;
  --ej-space-4: 16px;
  --ej-space-5: 20px;
  --ej-space-6: 24px;
  --ej-space-8: 32px;
  --ej-space-10: 40px;
  --ej-space-16: 64px;

  /* --- Radios --- */
  --ej-radius-sm: 8px;
  --ej-radius: 12px;
  --ej-radius-lg: 16px;
  --ej-radius-xl: 24px;
  --ej-radius-full: 9999px;

  /* --- Contenedor --- */
  --ej-container: 1280px;        /* max-w-7xl del Figma, para el contenido */
  --ej-container-ancho: 1440px;  /* barra superior, navegación y pie */
  --ej-gutter: 32px;

  /* --- Sombras --- */
  --ej-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --ej-shadow: 0 4px 16px rgba(11, 32, 66, 0.08);
  --ej-shadow-lg: 0 12px 32px rgba(11, 32, 66, 0.14);
}

/* =========================================================================
   Contenedor
   ========================================================================= */
.ej-container {
  width: 100%;
  max-width: var(--ej-container);
  margin-inline: auto;
  padding-inline: var(--ej-gutter);
  box-sizing: border-box;
}

/* La barra superior, la navegación y el pie van a 1440px; el contenido a 1280px */
.ej-topbar > .ej-container,
.ej-nav > .ej-container,
.ej-footer > .ej-container {
  max-width: var(--ej-container-ancho);
}

/* =========================================================================
   Barra superior institucional
   ========================================================================= */
.ej-topbar {
  background: var(--ej-navy-700);
  border-bottom: 2px solid var(--ej-gold);
  padding-block: 10px;
  font-family: var(--ej-font-sans);
}

.ej-topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ej-space-2) var(--ej-space-4);
}

.ej-topbar__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ej-space-2) var(--ej-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ej-topbar__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ej-space-1);
  color: var(--ej-slate-300);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}

.ej-topbar__link:hover,
.ej-topbar__link:focus {
  color: var(--ej-white);
  text-decoration: none;
}

.ej-topbar__link i,
.ej-topbar__link .fa,
.ej-topbar__link .fas {
  color: var(--ej-gold);
  font-size: var(--ej-text-xs);
}

.ej-topbar__social {
  display: flex;
  align-items: center;
  gap: var(--ej-space-3);
  padding-left: var(--ej-space-3);
  border-left: 1px solid var(--ej-slate-700);
  margin: 0;
  list-style: none;
}

.ej-topbar__social a {
  color: var(--ej-slate-300);
  font-size: var(--ej-text-sm);
  line-height: 1;
  text-decoration: none;
}

.ej-topbar__social a:hover,
.ej-topbar__social a:focus {
  color: var(--ej-white);
}

/* En móvil la barra superior se compacta: los enlaces secundarios se guardan
   y queda la fila esencial. Pendiente de ajustar contra la página «movil» de Figma. */
@media (max-width: 47.9375em) {
  .ej-topbar { padding-block: 6px; }
  .ej-topbar__inner { gap: var(--ej-space-1) var(--ej-space-3); }
  .ej-topbar__link { font-size: 0.75rem; }
  .ej-topbar__group li.ej-topbar--opcional { display: none; }
  .ej-topbar__social { padding-left: var(--ej-space-2); gap: var(--ej-space-2); }
}

/* =========================================================================
   Navegación principal
   ========================================================================= */
.ej-nav {
  position: sticky;
  top: 0;
  z-index: 1020;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: var(--ej-shadow-sm);
  font-family: var(--ej-font-sans);
}

/* El desenfoque va en una capa de fondo y no en la barra: Chrome recorta los
   descendientes de un elemento con backdrop-filter y los submenús quedaban
   escondidos detrás del contenido. */
.ej-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.ej-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--ej-space-6);
  min-height: 80px;
  padding-block: var(--ej-space-2);
}

/* La plantilla de 2013 añade un triángulo propio a los elementos con submenú */
.ej-nav__menu .caret { display: none !important; }

.ej-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--ej-space-5);
  flex-shrink: 0;
}

.ej-nav__brand img {
  display: block;
  width: auto;
  max-width: 100%;
}

.ej-nav__brand .ej-logo-pj { width: 111px; height: auto; }
.ej-nav__brand .ej-logo-ej { width: 173px; height: auto; }

/* Botón hamburguesa (solo móvil y tableta) */
.ej-nav__toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--ej-slate-200);
  border-radius: var(--ej-radius-sm);
  background: var(--ej-white);
  color: var(--ej-navy-900);
  font-size: var(--ej-text-lg);
  line-height: 1;
  cursor: pointer;
}

.ej-nav__toggle:focus-visible {
  outline: 2px solid var(--ej-navy-700);
  outline-offset: 2px;
}

/* El menú viene del módulo de Joomla: <ul class="nav menu ..."> */
.ej-nav__menu {
  margin-left: auto;
}

.ej-nav__menu ul.nav,
.ej-nav__menu ul.menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ej-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  float: none;
}

.ej-nav__menu ul.nav > li,
.ej-nav__menu ul.menu > li {
  position: relative;
  float: none;
  list-style: none;
}

.ej-nav__menu ul.nav > li > a,
.ej-nav__menu ul.menu > li > a,
.ej-nav__menu ul.nav > li > span,
.ej-nav__menu ul.menu > li > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--ej-space-2) 14px;
  border: 1px solid transparent;
  border-radius: var(--ej-radius);
  color: var(--ej-slate-700);
  font-size: var(--ej-text-sm);
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1rem;
  text-transform: none;
  text-decoration: none;
  background: transparent;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ej-nav__menu ul.nav > li > a:hover,
.ej-nav__menu ul.menu > li > a:hover,
.ej-nav__menu ul.nav > li > a:focus,
.ej-nav__menu ul.menu > li > a:focus {
  background: var(--ej-slate-100);
  color: var(--ej-navy-900);
  text-decoration: none;
}

.ej-nav__menu ul.nav > li.current > a,
.ej-nav__menu ul.menu > li.current > a,
.ej-nav__menu ul.nav > li.active > a,
.ej-nav__menu ul.menu > li.active > a {
  background: rgba(239, 246, 255, 0.8);
  border-color: var(--ej-blue-100);
  color: var(--ej-navy-900);
}

/* Indicador de submenú */
.ej-nav__menu li.parent > a::after,
.ej-nav__menu li.parent > span::after,
.ej-nav__menu li.deeper > span::after,
.ej-nav__menu li.deeper > a::after {
  content: "\f078"; /* chevron-down */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
  font-weight: 900;
  font-size: 0.5625rem;
  line-height: 0.5625rem;
  color: currentColor;
}

/* Submenús */
.ej-nav__menu ul.nav ul,
.ej-nav__menu ul.menu ul {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1030;
  display: none;
  min-width: 254px;
  margin: 0;
  padding: var(--ej-space-3) 0;
  list-style: none;
  background: var(--ej-slate-50);
  border: 0;
  border-radius: var(--ej-radius-lg);
  box-shadow: 0 18px 40px -12px rgba(11, 32, 66, 0.18), 0 2px 6px rgba(11, 32, 66, 0.06);
}

/* Puente invisible sobre el espacio de 6px: sin él el desplegable se cierra
   al mover el ratón del elemento hacia sus opciones */
.ej-nav__menu ul.nav ul::before,
.ej-nav__menu ul.menu ul::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

/* El JavaScript de la plantilla de 2013 marca estos submenús como .dropdown-menu,
   y aquel CSS los deja en opacity:0 a la espera de la clase .open de Bootstrap 3.
   Aquí se neutraliza para que basten las reglas de arriba. */
.ej-nav__menu .dropdown-menu,
.ej-nav__menu ul ul {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
  margin: 0;
  float: none;
  min-width: 240px;
  max-height: none;   /* el CSS de 2013 lo dejaba en 0 para animarlo */
  overflow: visible;
}

.ej-nav__menu li:hover > ul,
.ej-nav__menu li:focus-within > ul,
.ej-nav__menu li.is-open > ul {
  display: block;
}

/* Los últimos elementos del menú abren hacia la izquierda para no salirse */
@media (min-width: 75em) {
  .ej-nav__menu > nav > ul > li:nth-last-child(-n+3) > ul {
    left: auto;
    right: 0;
  }
}

/* El CSS de 2013 flota los elementos del menú, y eso colapsaba el desplegable */
.ej-nav__menu ul ul,
.ej-nav__menu ul ul > li {
  float: none;
  overflow: visible;
}

.ej-nav__menu ul ul > li {
  display: block;
  width: 100%;
}

.ej-nav__menu ul ul > li > a {
  display: block;
  padding: 10px var(--ej-space-4);
  border-radius: 0;
  color: var(--ej-slate-700);
  font-size: var(--ej-text-sm);
  font-weight: 400;
  line-height: 1.25rem;
  text-decoration: none;
  white-space: normal;
}

.ej-nav__menu ul ul > li > a:hover,
.ej-nav__menu ul ul > li > a:focus {
  background: var(--ej-white);
  color: var(--ej-navy-900);
}

/* Entre 1200px y 1500px el menú actual (títulos largos en mayúsculas) no cabe
   en una línea: se comprimen los elementos antes de permitir que se parta */
@media (min-width: 75em) {
  .ej-nav__menu ul.nav,
  .ej-nav__menu ul.menu { flex-wrap: nowrap; gap: 2px; }

  .ej-nav__menu ul.nav > li > a,
  .ej-nav__menu ul.menu > li > a,
  .ej-nav__menu ul.nav > li > span,
  .ej-nav__menu ul.menu > li > span { padding-inline: 11px; }
}

@media (min-width: 75em) and (max-width: 93.75em) {
  .ej-nav__menu ul.nav > li > a,
  .ej-nav__menu ul.menu > li > a,
  .ej-nav__menu ul.nav > li > span,
  .ej-nav__menu ul.menu > li > span {
    padding-inline: 8px;
    font-size: 0.8125rem;
    letter-spacing: 0;
  }

  .ej-nav__brand .ej-logo-pj { width: 95px; }
  .ej-nav__brand .ej-logo-ej { width: 148px; }
  .ej-nav__inner { gap: var(--ej-space-4); }
}

/* Utilidades del encabezado: buscador, tamaño de letra y traductor */
.ej-nav__utils {
  display: flex;
  align-items: center;
  gap: var(--ej-space-3);
  margin-top: var(--ej-space-2);
  justify-content: flex-end;
}

.ej-nav__utils:empty { display: none; }

.ej-nav__utils input[type="text"],
.ej-nav__utils input[type="search"] {
  height: 36px;
  padding: 0 var(--ej-space-3);
  border: 1px solid var(--ej-slate-200);
  border-radius: var(--ej-radius-sm);
  background: var(--ej-white);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-sm);
  color: var(--ej-slate-700);
}

/* --- Navegación en tableta y móvil --- */
@media (max-width: 74.9375em) {
  .ej-nav__toggle { display: inline-flex; align-items: center; justify-content: center; }

  .ej-nav__inner { flex-wrap: wrap; }

  .ej-nav__menu {
    display: none;
    flex-basis: 100%;
    margin-left: 0;
    padding-bottom: var(--ej-space-4);
  }

  .ej-nav__menu.is-open {
    display: block;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--ej-white);
    border-top: 1px solid var(--ej-slate-200);
    padding-top: var(--ej-space-2);
  }

  .ej-nav__menu ul.nav,
  .ej-nav__menu ul.menu {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
  }

  .ej-nav__menu ul.nav > li > a,
  .ej-nav__menu ul.menu > li > a {
    width: 100%;
    white-space: normal;
  }

  /* Los submenús van en línea dentro del menú, cerrados hasta que se tocan.
     Con posición absoluta se montaban encima de los demás elementos. */
  .ej-nav__menu ul.nav ul,
  .ej-nav__menu ul.menu ul,
  .ej-nav__menu .dropdown-menu {
    position: static !important;
    transform: none !important;
    inset: auto !important;
    display: none;
    min-width: 0;
    width: auto;
    margin: 2px 0 var(--ej-space-2) var(--ej-space-4);
    padding: 0;
    border: 0;
    border-left: 2px solid var(--ej-blue-100);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  /* El toque abre; el ratón no interviene en esta anchura */
  .ej-nav__menu li:hover > ul,
  .ej-nav__menu li:focus-within > ul { display: none; }

  .ej-nav__menu li.is-open > ul,
  .ej-nav__menu li.is-open > .dropdown-menu { display: block !important; }

  /* La flecha gira cuando el submenú está abierto */
  .ej-nav__menu li.is-open > a::after,
  .ej-nav__menu li.is-open > span::after { transform: rotate(180deg); }

  .ej-nav__menu ul ul > li > a { padding: 10px var(--ej-space-3); }
}

@media (max-width: 47.9375em) {
  /* Medidas tomadas de la pantalla «movil» del Figma */
  :root { --ej-gutter: 20px; }

  .ej-nav__brand .ej-logo-pj { width: 100px; height: auto; }
  .ej-nav__brand .ej-logo-ej { width: 134px; height: auto; }
  .ej-nav__brand { gap: 10px; }
  .ej-nav__inner { min-height: 70px; gap: var(--ej-space-2); padding-block: 10px; }

  .ej-nav__toggle {
    width: 56px;
    height: 56px;
    font-size: var(--ej-text-xl);
    border-radius: 14px;
    flex-shrink: 0;
  }
}

/* =========================================================================
   Primitivas de contenido (para las páginas de SP Page Builder)
   ========================================================================= */
.ej-eyebrow {
  display: inline-block;
  padding: 6px var(--ej-space-3);
  border-radius: var(--ej-radius-full);
  background: var(--ej-gold-100);
  color: var(--ej-gold-800);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-xs);
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 1rem;
  text-transform: uppercase;
}

.ej-section-title {
  margin: var(--ej-space-4) 0 var(--ej-space-3);
  color: var(--ej-navy-900);
  font-family: var(--ej-font-display);
  font-size: var(--ej-text-3xl);
  font-weight: 700;
  letter-spacing: -0.9px;
  line-height: 2.5rem;
}

.ej-section-lead {
  margin: 0 auto;
  max-width: 672px;
  color: var(--ej-slate-600);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-base);
  line-height: 1.5rem;
}

.ej-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ej-space-2);
  padding: var(--ej-space-3) var(--ej-space-6);
  border: 1px solid transparent;
  border-radius: var(--ej-radius-sm);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-sm);
  font-weight: 600;
  line-height: 1.25rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ej-btn--primary {
  background: var(--ej-navy-800);
  color: var(--ej-white);
}

.ej-btn--primary:hover,
.ej-btn--primary:focus {
  background: var(--ej-navy-900);
  color: var(--ej-white);
  text-decoration: none;
}

.ej-btn--gold {
  background: var(--ej-gold);
  color: var(--ej-navy-900);
}

.ej-btn--gold:hover,
.ej-btn--gold:focus {
  background: var(--ej-gold-500);
  color: var(--ej-navy-900);
  text-decoration: none;
}

.ej-btn--ghost {
  background: transparent;
  border-color: var(--ej-slate-300);
  color: var(--ej-slate-700);
}

.ej-btn--ghost:hover,
.ej-btn--ghost:focus {
  background: var(--ej-slate-100);
  color: var(--ej-navy-900);
  text-decoration: none;
}

.ej-card {
  padding: var(--ej-space-6);
  border: 1px solid var(--ej-slate-200);
  border-radius: var(--ej-radius-lg);
  background: var(--ej-white);
  box-shadow: var(--ej-shadow-sm);
}

/* Secciones centradas, patrón que se repite en toda la portada */
.ej-section-head {
  text-align: center;
  margin-bottom: var(--ej-space-10);
}

@media (max-width: 47.9375em) {
  .ej-section-title { font-size: var(--ej-text-xl); line-height: 2rem; }
}

/* =========================================================================
   Ajustes sobre la plantilla de 2013
   ========================================================================= */
/* El encabezado nuevo ya no es de altura fija: se quita el relleno que la
   plantilla aplicaba al cuerpo para compensar el header anterior */
body.ej-rediseno #wrap { padding-top: 0 !important; }
body.ej-rediseno { font-family: var(--ej-font-sans); }

/* =========================================================================
   Portada — Hero
   ========================================================================= */
.ej-hero {
  position: relative;
  display: flex;
  align-items: center;
  aspect-ratio: 1920 / 620;   /* proporción del banner de escritorio */
  padding-block: var(--ej-space-16);
  color: var(--ej-white);
  overflow: hidden;
}

/* Carrusel del hero: cada diapositiva define su imagen con --ej-hero-img */
.ej-hero__slides { position: absolute; inset: 0; }

.ej-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms ease;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.32) 100%),
    linear-gradient(90deg, rgba(30, 58, 138, 0.921) 0%, rgba(30, 58, 138, 0.757) 62%, rgba(30, 58, 138, 0.213) 100%),
    var(--ej-hero-img);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.ej-hero__slide.is-activa { opacity: 1; }

.ej-hero__dots {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  gap: 10px;
  padding: var(--ej-space-2) var(--ej-space-3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--ej-radius-full);
  background: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.ej-hero__dots button {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: var(--ej-radius-full);
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}

.ej-hero__dots button[aria-current="true"] { background: var(--ej-white); }

@media (prefers-reduced-motion: reduce) {
  .ej-hero__slide { transition: none; }
}

@media (max-width: 74.9375em) {
  .ej-hero__slide { background-image:
      linear-gradient(90deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.32) 100%),
      linear-gradient(90deg, rgba(30, 58, 138, 0.921) 0%, rgba(30, 58, 138, 0.757) 62%, rgba(30, 58, 138, 0.213) 100%),
      var(--ej-hero-img-tablet, var(--ej-hero-img)); }
}

@media (max-width: 47.9375em) {
  .ej-hero__slide { background-image:
      linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%),
      linear-gradient(180deg, rgba(30, 58, 138, 0.93) 0%, rgba(30, 58, 138, 0.6) 100%),
      var(--ej-hero-img-movil, var(--ej-hero-img)); }
}

.ej-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--ej-container);   /* el texto sigue la columna de contenido, no el ancho completo */
  display: flex;
  flex-direction: column;
  gap: var(--ej-space-6);
  align-items: flex-start;
}

.ej-hero__title {
  max-width: 960px;   /* el Figma corta tras «Judicial»; con 857px rompía antes */
  margin: 0;
  color: var(--ej-white);
  font-family: var(--ej-font-display);
  font-size: 4rem;
  font-weight: 700;
  line-height: 4rem;
  letter-spacing: -1.2px;
}

.ej-hero__lead {
  max-width: 968px;
  margin: 0;
  color: var(--ej-slate-200);
  font-family: var(--ej-font-sans);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.8125rem;
  letter-spacing: -0.576px;
}

@media (max-width: 74.9375em) {
  .ej-hero { aspect-ratio: 3334 / 1418; }   /* banner de tableta */
  .ej-hero__title { font-size: 2.5rem; line-height: 2.75rem; }
  .ej-hero__lead { font-size: 1.25rem; line-height: 1.625rem; }
}

@media (max-width: 47.9375em) {
  .ej-hero {
    aspect-ratio: auto;            /* en móvil manda el contenido */
    min-height: 1676 / 1417 * 1px; /* referencia del banner vertical */
    min-height: 68vw;
    padding-block: var(--ej-space-10);
  }
  .ej-hero__title { font-size: 1.5625rem; line-height: 1.15; letter-spacing: -0.4px; }
  .ej-hero__lead { font-size: 0.875rem; line-height: 1.5; font-weight: 400; }
}

/* =========================================================================
   Portada — Secciones
   ========================================================================= */
.ej-section {
  padding-block: 61px;
  background: var(--ej-white);
  border-bottom: 1px solid var(--ej-slate-100);
}

.ej-section--alt { background: var(--ej-slate-50); }

.ej-section__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 672px;
  margin: 0 auto 64px;
  text-align: center;
}

/* Antetítulo de sección: píldora azul (el dorado se reserva para «Oferta educativa») */
.ej-pill {
  display: inline-flex;
  align-items: center;
  padding: 7.5px var(--ej-space-4);
  border: 1px solid var(--ej-blue-200);
  border-radius: var(--ej-radius-full);
  background: rgba(219, 234, 254, 0.8);
  color: var(--ej-navy-800);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-xs);
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 1rem;
  text-transform: uppercase;
}

.ej-pill--gold {
  background: var(--ej-gold-100);
  border-color: rgba(253, 230, 138, 0.8);
  color: var(--ej-gold-800);
}

.ej-section__title {
  margin: 0;
  color: var(--ej-navy-900);
  font-family: var(--ej-font-display);
  font-size: var(--ej-text-3xl);
  font-weight: 700;
  line-height: 2.5rem;
  letter-spacing: -0.9px;
  text-wrap: balance;
}

.ej-section__lead {
  margin: 6px 0 0;
  color: var(--ej-slate-600);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-sm);
  line-height: 1.25rem;
}

/* --- Rejilla de dos tarjetas --- */
.ej-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ej-space-8);
}

/* --- Tarjeta destacada sobre fondo azul con foto --- */
.ej-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: var(--ej-radius-xl);
  background-image: linear-gradient(144deg, #1e3a8a 0%, #0d1e4e 100%);
  box-shadow: 0 20px 40px -15px rgba(11, 32, 66, 0.08), 0 0 1px 1px rgba(11, 32, 66, 0.05);
  color: var(--ej-white);
}

.ej-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ej-feature-img);
  background-size: cover;
  background-position: center;
  opacity: 0.2;
  pointer-events: none;
}

.ej-feature__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ej-space-4);
  padding: var(--ej-space-10) var(--ej-space-10) var(--ej-space-16);
}

.ej-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(253, 230, 138, 0.8);
  border-radius: var(--ej-radius-lg);
  background: rgba(212, 175, 55, 0.2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  color: var(--ej-gold);
  font-size: var(--ej-text-xl);
  line-height: 2rem;
}

.ej-feature__title {
  margin: var(--ej-space-2) 0 0;
  color: var(--ej-white);
  font-family: var(--ej-font-display);
  font-size: var(--ej-text-2xl);
  font-weight: 700;
  line-height: 2.25rem;
  letter-spacing: -0.75px;
}

.ej-feature__text {
  margin: 0;
  color: var(--ej-slate-200);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-sm);
  line-height: 1.25rem;
}

.ej-feature__foot {
  position: relative;
  padding: var(--ej-space-10);
}

.ej-btn--block {
  display: flex;
  width: 100%;
  padding-block: var(--ej-space-4);
  border-radius: var(--ej-radius-lg);
  background: var(--ej-gold);
  color: #020617;
  font-weight: 700;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.ej-btn--block:hover,
.ej-btn--block:focus {
  background: var(--ej-gold-500);
  color: #020617;
  text-decoration: none;
}

@media (max-width: 61.9375em) {
  .ej-grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 47.9375em) {
  .ej-section { padding-block: var(--ej-space-10); }
  .ej-section__head { margin-bottom: var(--ej-space-8); }
  .ej-section__title { font-size: var(--ej-text-xl); line-height: 2rem; letter-spacing: -0.5px; }
  .ej-feature__body { padding: var(--ej-space-6) var(--ej-space-6) var(--ej-space-8); }
  .ej-feature__foot { padding: var(--ej-space-6); }
  .ej-feature__title { font-size: var(--ej-text-xl); line-height: 1.875rem; }
}

/* =========================================================================
   Páginas del rediseño a todo el ancho
   La plantilla de 2013 encierra el componente en .container > .row > .col-sm-*;
   en estas páginas cada sección trae su propio contenedor.
   ========================================================================= */
body.ej-rediseno #wrap .container,
body.ej-rediseno #main.row,
body.ej-rediseno #container.cont,
body.ej-rediseno #main-box {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  float: none;
}

body.ej-rediseno #main.row { display: block; }
body.ej-rediseno #breadcrumbs { display: none; }

/* La plantilla fija el encabezado sobre el contenido y headroom.js lo desplaza
   con un transform al hacer scroll; ese transform rompía los submenús. En el
   rediseño el <header> deja de tener caja propia: así la barra institucional y
   la navegación quedan en el flujo de la página y la segunda puede pegarse
   arriba sin quedar presa de la altura del encabezado. */
body.ej-rediseno #header.header--fixed {
  display: contents;
}

body.ej-rediseno #header.headroom {
  transform: none !important;
  transition: none !important;
}
body.ej-rediseno .sp-page-builder .page-content > .sppb-section { margin: 0; }
body.ej-rediseno .sppb-row-container { max-width: none; padding: 0; }
body.ej-rediseno #wrap { overflow-x: hidden; }

/* SP Page Builder limita el ancho de sus filas: aquí cada sección se encarga */
body.ej-rediseno .sppb-row-container,
body.ej-rediseno .sppb-container-inner {
  max-width: none !important;
  width: 100%;
  padding-inline: 0;
}

body.ej-rediseno .sppb-section,
body.ej-rediseno .sppb-row,
body.ej-rediseno .sppb-addon,
body.ej-rediseno .sppb-addon-content { margin: 0; padding: 0; }

/* =========================================================================
   Portada — Videoteca y Podcast
   ========================================================================= */
.ej-section--audiovisual {
  position: relative;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
  background: var(--ej-white);
}

.ej-section--audiovisual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../../images/rediseno/portada/patron-audiovisual.png");
  background-position: center bottom;
  background-size: cover;
  opacity: 0.54;
  pointer-events: none;
}

.ej-section--audiovisual > .ej-container { position: relative; }

/* Tarjeta clara con miniatura */
.ej-media-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--ej-space-8);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: var(--ej-radius-xl);
  background: var(--ej-white);
  box-shadow: 0 20px 40px -15px rgba(11, 32, 66, 0.08), 0 0 1px 1px rgba(11, 32, 66, 0.05);
}

.ej-media-card__thumb {
  position: relative;
  display: block;
  height: 208px;
  border-radius: var(--ej-radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.ej-media-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ej-media-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 16, 34, 0.5);
  color: #020617;
}

.ej-media-card__play span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--ej-radius-full);
  background: var(--ej-gold);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  font-size: 1.25rem;
  line-height: 1.25rem;
}

.ej-media-card__title {
  margin: var(--ej-space-3) 0 0;
  color: var(--ej-navy-900);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-base);
  font-weight: 700;
  line-height: 1.5rem;
}

.ej-media-card__text {
  margin: 6px 0 var(--ej-space-6);
  color: var(--ej-slate-600);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-sm);
  line-height: 1.25rem;
}

.ej-btn--soft {
  display: flex;
  width: 100%;
  padding-block: 14px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: var(--ej-radius-lg);
  background: var(--ej-slate-100);
  color: var(--ej-navy-900);
  font-weight: 700;
}

.ej-btn--soft:hover,
.ej-btn--soft:focus {
  background: var(--ej-blue-50);
  color: var(--ej-navy-900);
  text-decoration: none;
}

/* =========================================================================
   Portada — Transparencia
   ========================================================================= */
.ej-section--transparencia {
  background: rgba(241, 245, 249, 0.6);
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
  padding-block: 60px;
}

.ej-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ej-space-4);
  justify-content: center;
  padding-top: 26px;
}

.ej-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: var(--ej-radius-lg);
  background: var(--ej-white);
  color: var(--ej-navy-900);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-sm);
  font-weight: 700;
  line-height: 1.25rem;
  text-decoration: none;
}

.ej-chip:hover,
.ej-chip:focus {
  background: var(--ej-blue-50);
  border-color: var(--ej-blue-200);
  color: var(--ej-navy-900);
  text-decoration: none;
}

/* La sección de transparencia centra su encabezado sin margen inferior grande */
.ej-section--transparencia .ej-section__head { margin-bottom: 0; }

/* =========================================================================
   Pie de página
   ========================================================================= */
.ej-footer {
  padding-block: 56px;
  background: var(--ej-navy-700);
  color: var(--ej-slate-300);
  font-family: var(--ej-font-sans);
}

.ej-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ej-space-10);
  align-items: start;
}

.ej-footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--ej-space-3);
}

/* Versiones en blanco del Figma, directamente sobre el azul */
.ej-footer__brand .ej-logo-pj { width: 111px; height: auto; }
.ej-footer__brand .ej-logo-ej { width: 173px; height: auto; }

.ej-footer__title {
  margin: 0 0 var(--ej-space-3);
  color: var(--ej-white);
  font-family: var(--ej-font-display);
  font-size: var(--ej-text-base);
  font-weight: 700;
  line-height: 1.5rem;
}

.ej-footer__text {
  margin: 0;
  color: var(--ej-slate-400);
  font-size: var(--ej-text-sm);
  line-height: 1.25rem;
}

.ej-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7.5px;
}

.ej-footer__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--ej-space-2);
  color: var(--ej-slate-300);
  font-size: var(--ej-text-xs);
  line-height: 1rem;
}

.ej-footer__list i { color: var(--ej-gold); font-size: var(--ej-text-xs); line-height: 1rem; }

.ej-footer__list a { color: var(--ej-slate-300); text-decoration: none; }
.ej-footer__list a:hover,
.ej-footer__list a:focus { color: var(--ej-white); text-decoration: underline; }

.ej-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ej-space-4);
  margin-top: var(--ej-space-10);
  padding-top: var(--ej-space-8);
  border-top: 1px solid rgba(30, 41, 59, 0.8);
}

.ej-footer__copy {
  margin: 0;
  color: var(--ej-slate-400);
  font-size: var(--ej-text-xs);
  line-height: 1rem;
}

.ej-footer__legal,
.ej-footer__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ej-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ej-footer__legal a {
  color: var(--ej-slate-300);
  font-size: var(--ej-text-xs);
  line-height: 1rem;
  text-decoration: none;
}

.ej-footer__legal a:hover,
.ej-footer__legal a:focus { color: var(--ej-white); text-decoration: underline; }

@media (max-width: 61.9375em) {
  .ej-footer__cols { grid-template-columns: 1fr; gap: var(--ej-space-8); }
}

/* =========================================================================
   Portada — Programas Académicos
   ========================================================================= */
.ej-section--programas {
  background: rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

.ej-section--programas .ej-section__head { margin-bottom: var(--ej-space-10); }

.ej-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ej-space-3);
  justify-content: center;
  padding-top: var(--ej-space-4);
  margin-bottom: var(--ej-space-10);
}

.ej-tab {
  padding: 12px var(--ej-space-6);
  border: 1px solid var(--ej-slate-200);
  border-radius: var(--ej-radius-lg);
  background: var(--ej-white);
  color: var(--ej-slate-700);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-xs);
  font-weight: 700;
  line-height: 1rem;
  cursor: pointer;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
}

.ej-tab[aria-selected="true"] {
  background: var(--ej-navy-700);
  border-color: var(--ej-navy-700);
  color: var(--ej-white);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.ej-panel {
  max-width: 896px;
  margin-inline: auto;
  padding: var(--ej-space-10);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: var(--ej-radius-xl);
  background: var(--ej-white);
  box-shadow: 0 20px 40px -15px rgba(11, 32, 66, 0.08), 0 0 1px 1px rgba(11, 32, 66, 0.05);
}

.ej-panel[hidden] { display: none; }

.ej-panel__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ej-space-8);
  align-items: center;
}

.ej-badge {
  display: inline-block;
  padding: 3.5px var(--ej-space-3);
  border-radius: var(--ej-radius-sm);
  background: var(--ej-blue-50);
  color: var(--ej-navy-800);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-xs);
  font-weight: 700;
  letter-spacing: 0.6px;
  line-height: 1rem;
  text-transform: uppercase;
}

.ej-panel__title {
  margin: 7px 0 0;
  color: var(--ej-navy-900);
  font-family: var(--ej-font-display);
  font-size: var(--ej-text-2xl);
  font-weight: 700;
  line-height: 2.25rem;
  letter-spacing: -0.75px;
}

.ej-panel__text {
  margin: 9px 0 0;
  color: var(--ej-slate-600);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-sm);
  line-height: 1.25rem;
}

.ej-checklist {
  display: grid;
  gap: 9.5px;
  margin: 17px 0 25px;
  padding: 0;
  list-style: none;
}

.ej-checklist li {
  display: flex;
  align-items: center;
  gap: var(--ej-space-2);
  color: var(--ej-slate-700);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-sm);
  font-weight: 500;
  line-height: 1.25rem;
}

.ej-checklist i { color: var(--ej-green-600); font-size: var(--ej-text-sm); }

.ej-panel__media {
  overflow: hidden;
  border: 1px solid var(--ej-slate-100);
  border-radius: var(--ej-radius-lg);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.ej-panel__media img {
  display: block;
  width: 100%;
  height: 288px;
  object-fit: cover;
}

.ej-btn--navy {
  padding: 14px var(--ej-space-6);
  border-radius: var(--ej-radius-lg);
  background: var(--ej-navy-700);
  color: var(--ej-white);
  font-size: var(--ej-text-xs);
  line-height: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.ej-btn--navy:hover,
.ej-btn--navy:focus { background: var(--ej-navy-900); color: var(--ej-white); text-decoration: none; }

/* =========================================================================
   Portada — Banda institucional CEIJ
   ========================================================================= */
.ej-banda {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;          /* alto exacto del Figma */
  padding-block: 66px;
  background-color: #000;
  overflow: hidden;
}

.ej-banda::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(190deg, rgba(5, 16, 34, 0.012) 23%, rgba(5, 16, 34, 0.58) 104%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.83), rgba(255, 255, 255, 0.83)),
    url("../../../images/rediseno/portada/ceij-fondo.jpg");
  background-size: cover;
  background-position: center;
}

.ej-banda img {
  position: relative;
  display: block;
  max-width: 100%;
  max-height: 168px;      /* 300px menos el respiro de 66px arriba y abajo */
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 47.9375em) {
  .ej-banda { height: 200px; padding-block: var(--ej-space-8); }
  .ej-banda img { max-height: 120px; }
}

@media (max-width: 61.9375em) {
  .ej-panel__grid { grid-template-columns: 1fr; }
  .ej-panel { padding: var(--ej-space-6); }
}

/* =========================================================================
   Portada — Matrícula y calendario
   ========================================================================= */
.ej-section--matricula {
  position: relative;
  background: var(--ej-slate-50);
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

.ej-section--matricula::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../../images/rediseno/portada/patron-matricula.png");
  background-size: cover;
  background-position: center;
  opacity: 0.35;
  pointer-events: none;
}

.ej-section--matricula > .ej-container { position: relative; }

.ej-matricula {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--ej-space-8);
  align-items: start;
}

.ej-card {
  padding: var(--ej-space-6);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: var(--ej-radius-lg);
  background: var(--ej-white);
  box-shadow: 0 20px 40px -15px rgba(11, 32, 66, 0.08), 0 0 1px 1px rgba(11, 32, 66, 0.05);
}

.ej-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ej-space-4);
  margin-bottom: var(--ej-space-4);
}

.ej-card__title {
  display: flex;
  align-items: center;
  gap: var(--ej-space-2);
  margin: 0;
  color: var(--ej-navy-900);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-sm);
  font-weight: 700;
  line-height: 1.25rem;
}

.ej-card__title i { color: var(--ej-navy-700); }

/* --- Calendario --- */
.ej-cal__nav { display: flex; gap: 6px; }

.ej-cal__nav button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--ej-slate-200);
  border-radius: var(--ej-radius-sm);
  background: var(--ej-white);
  color: var(--ej-slate-600);
  font-size: var(--ej-text-xs);
  line-height: 1;
  cursor: pointer;
}

.ej-cal__nav button:hover { background: var(--ej-slate-100); color: var(--ej-navy-900); }

.ej-cal__filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--ej-space-4); }

.ej-cal__filtro {
  padding: 6px var(--ej-space-3);
  border: 1px solid var(--ej-slate-200);
  border-radius: var(--ej-radius-sm);
  background: var(--ej-white);
  color: var(--ej-slate-600);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-xs);
  font-weight: 600;
  line-height: 1rem;
  cursor: pointer;
}

.ej-cal__filtro[aria-pressed="true"] {
  background: var(--ej-navy-900);
  border-color: var(--ej-navy-900);
  color: var(--ej-white);
}

.ej-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.ej-cal__dow {
  padding-block: 6px;
  color: var(--ej-slate-500);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-xs);
  font-weight: 600;
  text-align: center;
}

.ej-cal__dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 42px;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: var(--ej-radius);
  background: transparent;
  color: var(--ej-slate-600);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-xs);
  line-height: 1rem;
}

.ej-cal__dia--vacio { visibility: hidden; }

.ej-cal__dia--evento {
  border-color: rgba(253, 230, 138, 0.8);
  background: var(--ej-gold-100);
  color: var(--ej-navy-900);
  font-weight: 700;
  cursor: pointer;
}

.ej-cal__dia--evento::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: var(--ej-radius-full);
  background: var(--ej-gold-600);
}

.ej-cal__dia--sel {
  background: var(--ej-navy-900);
  border-color: var(--ej-navy-900);
  color: var(--ej-white);
}

.ej-cal__dia--sel::after { background: var(--ej-gold); }

.ej-cal__leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ej-space-4);
  margin-top: var(--ej-space-4);
  padding-top: var(--ej-space-3);
  border-top: 1px solid var(--ej-slate-100);
  color: var(--ej-slate-500);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-xs);
  line-height: 1rem;
}

.ej-cal__leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.ej-cal__punto { width: 8px; height: 8px; border-radius: var(--ej-radius-full); }
.ej-cal__punto--evento { background: var(--ej-gold-600); }
.ej-cal__punto--sel { background: var(--ej-navy-900); }

/* --- Avisos --- */
.ej-aviso {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ej-space-3);
  padding: var(--ej-space-3);
  border: 1px solid var(--ej-slate-100);
  border-left: 3px solid var(--ej-gold);
  border-radius: var(--ej-radius-sm);
  background: #fffbeb;
}

.ej-aviso + .ej-aviso { margin-top: var(--ej-space-2); }

.ej-aviso__nombre {
  margin: 0;
  color: var(--ej-navy-900);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-xs);
  font-weight: 700;
  line-height: 1rem;
}

.ej-aviso__periodo {
  margin: 2px 0 0;
  color: var(--ej-slate-500);
  font-family: var(--ej-font-sans);
  font-size: 0.6875rem;
  line-height: 0.875rem;
}

.ej-estado {
  flex-shrink: 0;
  padding: 2px var(--ej-space-2);
  border-radius: var(--ej-radius-full);
  font-family: var(--ej-font-sans);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1rem;
  text-transform: none;
}

.ej-estado--abierta { background: var(--ej-green-100); color: var(--ej-green-800); }
.ej-estado--proxima { background: var(--ej-gold-100); color: var(--ej-gold-800); }

/* --- Campus --- */
.ej-campus { margin-top: var(--ej-space-5); }
.ej-campus__texto {
  margin: 0 0 var(--ej-space-3);
  color: var(--ej-slate-600);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-xs);
  line-height: 1.125rem;
}
.ej-campus img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: var(--ej-radius-sm);
  margin-bottom: var(--ej-space-3);
}

.ej-btn--campus {
  display: flex;
  width: 100%;
  padding-block: var(--ej-space-3);
  border-radius: var(--ej-radius-sm);
  background: var(--ej-navy-900);
  color: var(--ej-white);
  font-size: var(--ej-text-xs);
}

.ej-btn--campus:hover,
.ej-btn--campus:focus { background: var(--ej-navy-800); color: var(--ej-white); text-decoration: none; }

@media (max-width: 61.9375em) {
  .ej-matricula { grid-template-columns: 1fr; }
}

/* Calendario: ayuda bajo el mes, rejilla en recuadro y flechas redondas (Figma) */
.ej-cal__ayuda {
  margin: 4px 0 0;
  color: var(--ej-slate-500);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-xs);
  line-height: 1rem;
}

.ej-card__head { align-items: flex-start; }

.ej-cal__nav button {
  width: 32px;
  height: 32px;
  border-radius: var(--ej-radius-full);
}

.ej-cal__caja {
  padding: var(--ej-space-4);
  border: 1px solid var(--ej-slate-200);
  border-radius: var(--ej-radius);
  background: var(--ej-white);
}

/* =========================================================================
   Páginas internas — Portada editorial
   Cada página define su imagen con --ej-portada-img (y la de móvil/tableta).
   ========================================================================= */
.ej-portada {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  min-height: 420px;
  padding-block: 54px 58px;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.31) 0%, rgba(0, 0, 0, 0.31) 100%),
    linear-gradient(90deg, rgba(30, 58, 138, 0.969) 0%, rgba(30, 58, 138, 0.88) 58%, rgba(30, 58, 138, 0.3) 100%),
    var(--ej-portada-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--ej-white);
}

.ej-portada__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}

.ej-ruta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--ej-white);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-xs);
  font-weight: 600;
  line-height: 1rem;
}

.ej-ruta a { color: var(--ej-white); text-decoration: none; }
.ej-ruta a:hover, .ej-ruta a:focus { text-decoration: underline; color: var(--ej-white); }
.ej-ruta i { font-size: 0.625rem; opacity: 0.8; }

.ej-portada__mensaje {
  display: flex;
  flex-direction: column;
  gap: var(--ej-space-4);
  align-items: flex-start;
  max-width: 860px;
}

.ej-sello {
  display: inline-flex;
  align-items: center;
  gap: var(--ej-space-2);
  padding: var(--ej-space-2) 14px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--ej-radius-full);
  background: rgba(255, 255, 255, 0.08);
  color: var(--ej-white);
  font-family: var(--ej-font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.ej-sello i { font-size: 0.8125rem; }

.ej-portada__titulo {
  margin: 0;
  color: var(--ej-white);
  font-family: var(--ej-font-display);
  font-size: var(--ej-text-3xl);
  font-weight: 700;
  line-height: 1.03;
  text-wrap: balance;
}

.ej-portada__texto {
  margin: 0;
  max-width: 760px;
  color: var(--ej-slate-200);
  font-family: var(--ej-font-sans);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.45;
}

@media (max-width: 74.9375em) {
  .ej-portada { min-height: 340px; padding-block: var(--ej-space-10); }
  .ej-portada__titulo { font-size: 1.875rem; }
  .ej-portada__texto { font-size: 1.125rem; }
  .ej-portada { background-image:
      linear-gradient(90deg, rgba(0, 0, 0, 0.31) 0%, rgba(0, 0, 0, 0.31) 100%),
      linear-gradient(90deg, rgba(30, 58, 138, 0.969) 0%, rgba(30, 58, 138, 0.88) 58%, rgba(30, 58, 138, 0.3) 100%),
      var(--ej-portada-img-tablet, var(--ej-portada-img)); }
}

@media (max-width: 47.9375em) {
  .ej-portada { min-height: 260px; padding-block: var(--ej-space-8); }
  .ej-portada__titulo { font-size: var(--ej-text-xl); }
  .ej-portada__texto { font-size: var(--ej-text-base); }
  .ej-portada { background-image:
      linear-gradient(180deg, rgba(0, 0, 0, 0.31) 0%, rgba(0, 0, 0, 0.31) 100%),
      linear-gradient(180deg, rgba(30, 58, 138, 0.95) 0%, rgba(30, 58, 138, 0.75) 100%),
      var(--ej-portada-img-movil, var(--ej-portada-img)); }
}

/* =========================================================================
   Ajustes de tableta y móvil (pantallas «movil» y «tablet» del Figma)
   ========================================================================= */

/* El sello del hero solo aparece en tableta y móvil */
.ej-solo-compacto { display: none; }

.ej-sello--claro {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.92);
  color: var(--ej-navy-900);
}

@media (max-width: 74.9375em) {
  .ej-solo-compacto { display: inline-flex; }

  /* Botón del menú: azul institucional con el icono en blanco */
  .ej-nav__toggle {
    background: var(--ej-navy-700);
    border-color: var(--ej-navy-700);
    color: var(--ej-white);
    border-radius: var(--ej-radius);
  }

  /* Videoteca y Podcast se muestran como tarjetas azules, igual que Biblioteca */
  .ej-media-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(226, 232, 240, 0.4);
    background-image: linear-gradient(144deg, #1e3a8a 0%, #0d1e4e 100%);
    color: var(--ej-white);
  }

  .ej-media-card > div { position: relative; }

  .ej-media-card__thumb {
    position: absolute;
    inset: 0;
    height: auto;
    border-radius: 0;
    box-shadow: none;
    opacity: 0.22;
  }

  .ej-media-card__thumb .ej-media-card__play { display: none; }

  .ej-media-card__title {
    margin-top: 0;
    color: var(--ej-white);
    font-family: var(--ej-font-display);
    font-size: var(--ej-text-xl);
    line-height: 1.875rem;
  }

  .ej-media-card__text { color: var(--ej-slate-200); }

  .ej-media-card .ej-btn--soft {
    position: relative;
    background: var(--ej-gold);
    border-color: var(--ej-gold);
    color: #020617;
  }

  .ej-media-card .ej-btn--soft:hover,
  .ej-media-card .ej-btn--soft:focus { background: var(--ej-gold-500); }
}

@media (max-width: 47.9375em) {
  /* Barra superior: una columna por grupo, como en el diseño móvil */
  .ej-topbar__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ej-space-3);
    align-items: start;
  }

  .ej-topbar__group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .ej-topbar__group li.ej-topbar--opcional { display: none; }
  .ej-topbar__group > li { line-height: 1.125rem; }
  .ej-topbar__link { font-size: 0.75rem; line-height: 1.125rem; }

  .ej-topbar__social {
    padding-left: 0;
    border-left: 0;
    gap: var(--ej-space-3);
  }

  .ej-topbar__social a { font-size: var(--ej-text-base); }

  /* Avisos de inscripción: el estado va en la misma línea del periodo */
  .ej-aviso { display: block; }
  .ej-aviso .ej-estado {
    display: inline;
    padding: 0;
    background: none;
    font-size: 0.6875rem;
  }
  .ej-aviso .ej-estado--abierta { color: var(--ej-green-800); }
  .ej-aviso .ej-estado--proxima { color: var(--ej-gold-800); }
  .ej-aviso .ej-estado::before { content: "· "; }

  /* Programas: la imagen va debajo del texto */
  .ej-panel__grid { display: flex; flex-direction: column; }
  .ej-panel__media img { height: 220px; }

  /* Transparencia: accesos a todo el ancho */
  .ej-chips { flex-direction: column; }
  .ej-chip { width: 100%; }
}

/* Acciones dentro de la portada interior */
.ej-portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.ej-btn--oro {
  padding: 14px 22px;
  border-radius: var(--ej-radius);
  background: var(--ej-gold);
  color: #041525;
  font-weight: 700;
}

.ej-btn--oro:hover,
.ej-btn--oro:focus { background: var(--ej-gold-500); color: #041525; text-decoration: none; }

.ej-btn--translucido {
  padding: 14px 22px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--ej-radius);
  background: rgba(255, 255, 255, 0.3);
  color: var(--ej-white);
  font-weight: 700;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.ej-btn--translucido:hover,
.ej-btn--translucido:focus { background: rgba(255, 255, 255, 0.45); color: var(--ej-white); text-decoration: none; }

/* Tarjetas de datos dentro de la portada interior */
.ej-portada__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: var(--ej-space-6);
}

.ej-dato {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 175px;
  padding: 14px var(--ej-space-4);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: #0d1f50;
}

.ej-dato__cifra {
  margin: 0;
  color: var(--ej-gold);
  font-family: var(--ej-font-display);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
}

.ej-dato__texto {
  margin: 0;
  color: var(--ej-slate-200);
  font-family: var(--ej-font-sans);
  font-size: 1.25rem;
  line-height: 1.625rem;
}

@media (max-width: 47.9375em) {
  .ej-portada__datos { gap: var(--ej-space-3); }
  .ej-dato { min-width: 0; flex: 1 1 calc(50% - var(--ej-space-3)); padding: 10px 12px; }
  .ej-dato__cifra { font-size: 1.75rem; }
  .ej-dato__texto { font-size: 0.875rem; line-height: 1.25rem; }
}

/* Portada interior con titular grande (Podcast, Videoteca, Organigrama) */
.ej-portada--grande .ej-portada__titulo { font-size: 4rem; line-height: 1.03; letter-spacing: -1.2px; }

@media (max-width: 74.9375em) {
  .ej-portada--grande .ej-portada__titulo { font-size: 2.75rem; }
}

@media (max-width: 47.9375em) {
  .ej-portada--grande .ej-portada__titulo { font-size: 1.75rem; letter-spacing: -0.4px; }
}

/* =========================================================================
   Páginas internas — secciones de contenido
   ========================================================================= */
.ej-bloque {
  padding-block: 104px 110px;
  background: var(--ej-white);
}

.ej-bloque--claro { background: var(--ej-slate-50); }

.ej-bloque__titulo {
  display: flex;
  flex-direction: column;
  gap: var(--ej-space-3);
  max-width: 760px;
  margin-bottom: 52px;
}

.ej-antetitulo {
  margin: 0;
  color: var(--ej-bronce);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-xs);
  font-weight: 700;
  letter-spacing: 0.8px;
  line-height: 1.4;
  text-transform: uppercase;
}

.ej-titular {
  margin: 0;
  color: var(--ej-tinta);
  font-family: var(--ej-font-display);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.12;
  text-wrap: balance;
}

.ej-entrada {
  margin: 0;
  color: var(--ej-texto);
  font-family: var(--ej-font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* --- Pareja de tarjetas numeradas (Misión / Visión) --- */
.ej-par {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

.ej-proposito {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--ej-space-10);
  overflow: hidden;
  padding: 48px;
  border-radius: var(--ej-radius-xl);
  background: var(--ej-white);
  border: 1px solid var(--ej-linea);
  box-shadow: 0 18px 40px -14px rgba(8, 35, 59, 0.07);
}

.ej-proposito--oscuro {
  border-color: transparent;
  background: var(--ej-navy-700);
  box-shadow: 0 18px 40px -12px rgba(8, 35, 59, 0.13);
  color: var(--ej-white);
}

/* Destello dorado de la esquina */
.ej-proposito--oscuro::after {
  content: "";
  position: absolute;
  top: -70px;
  right: -40px;
  width: 220px;
  height: 220px;
  border-radius: var(--ej-radius-full);
  background: radial-gradient(circle, rgba(212, 175, 55, 0.32) 0%, rgba(212, 175, 55, 0) 70%);
  pointer-events: none;
}

.ej-proposito > * { position: relative; }

.ej-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: var(--ej-radius-full);
  background: var(--ej-crema);
  color: var(--ej-bronce);
  font-family: var(--ej-font-display);
  font-size: 1.3125rem;
  font-weight: 700;
}

.ej-proposito--oscuro .ej-numero {
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.4);
}

.ej-proposito__titulo {
  margin: 0;
  color: var(--ej-tinta);
  font-family: var(--ej-font-display);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.08;
}

.ej-proposito--oscuro .ej-proposito__titulo { color: var(--ej-white); }

.ej-raya {
  width: 64px;
  height: 3px;
  margin-bottom: 18px;
  border-radius: var(--ej-radius-full);
  background: var(--ej-gold);
}

.ej-proposito__texto {
  margin: 0;
  color: var(--ej-texto);
  font-family: var(--ej-font-sans);
  font-size: 1.1875rem;
  line-height: 1.62;
}

.ej-proposito--oscuro .ej-proposito__texto { color: var(--ej-slate-200); }

@media (max-width: 61.9375em) {
  .ej-par { grid-template-columns: 1fr; }
}

@media (max-width: 47.9375em) {
  .ej-bloque { padding-block: var(--ej-space-10); }
  .ej-bloque__titulo { margin-bottom: var(--ej-space-8); }
  .ej-titular { font-size: 1.75rem; }
  .ej-entrada { font-size: 1rem; }
  .ej-proposito { padding: var(--ej-space-6); gap: var(--ej-space-6); }
  .ej-proposito__titulo { font-size: 1.75rem; }
  .ej-proposito__texto { font-size: 1rem; }
}

/* --- Rejilla de valores --- */
.ej-valores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.ej-valor {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px;
  border: 1px solid var(--ej-linea);
  border-radius: var(--ej-radius-lg);
  background: var(--ej-white);
  box-shadow: 0 12px 28px -14px rgba(8, 35, 59, 0.05);
}

.ej-valor__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--ej-radius-lg);
  background: var(--ej-crema);
  color: var(--ej-bronce);
  font-size: 1.375rem;
}

.ej-valor__titulo {
  margin: 0 0 8px;
  color: var(--ej-tinta);
  font-family: var(--ej-font-display);
  font-size: var(--ej-text-xl);
  font-weight: 700;
  line-height: 1.2;
}

.ej-valor__texto {
  margin: 0;
  color: var(--ej-texto);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-sm);
  line-height: 1.55;
}

@media (max-width: 74.9375em) { .ej-valores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 47.9375em)  { .ej-valores { grid-template-columns: 1fr; } .ej-valor { padding: var(--ej-space-5); } }

/* Iconos exactos del Figma (SVG en línea, coloreados con currentColor) */
.ej-icono {
  display: inline-flex;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.ej-icono svg { width: 100%; height: 100%; display: block; }

.ej-ruta .ej-icono { width: 14px; height: 14px; opacity: 0.85; }
.ej-sello .ej-icono { width: 15px; height: 15px; }
.ej-valor__icono .ej-icono { width: 22px; height: 22px; }
.ej-btn .ej-icono { width: 16px; height: 16px; }

/* --- Bloque a dos columnas: imagen editorial + lista de principios --- */
.ej-bloque--duo .ej-container {
  display: flex;
  gap: 80px;
  align-items: center;
}

.ej-figura {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 0 0 520px;
  height: 610px;
  padding: 30px;
  border-radius: var(--ej-radius-xl);
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.ej-figura::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 46, 74, 0) 18%, rgba(5, 24, 43, 0.57) 100%);
}

.ej-figura__pie {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--ej-space-6);
  border-radius: var(--ej-radius-lg);
  background: rgba(5, 24, 43, 0.95);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.4);
}

.ej-figura__texto {
  margin: 0;
  color: var(--ej-white);
  font-family: var(--ej-font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.ej-figura__pie .ej-raya { margin: 0; }

.ej-bloque--duo .ej-bloque__titulo { margin-bottom: 26px; }

/* Lista numerada de principios */
.ej-principios { margin: 0; padding: 0; list-style: none; }

.ej-principios li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding-block: 20px;
  border-bottom: 1px solid var(--ej-linea);
}

.ej-principios__numero {
  flex: 0 0 34px;
  color: var(--ej-bronce);
  font-family: var(--ej-font-display);
  font-size: 1.0625rem;
  font-weight: 700;
}

.ej-principios__titulo {
  margin: 0 0 6px;
  color: var(--ej-tinta);
  font-family: var(--ej-font-sans);
  font-size: 1.0625rem;
  font-weight: 700;
}

.ej-principios__texto {
  margin: 0;
  color: var(--ej-texto);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-sm);
  line-height: 1.55;
}

@media (max-width: 74.9375em) {
  .ej-bloque--duo .ej-container { gap: var(--ej-space-10); }
  .ej-figura { flex-basis: 380px; height: 460px; }
}

@media (max-width: 61.9375em) {
  .ej-bloque--duo .ej-container { flex-direction: column; align-items: stretch; }
  .ej-figura { flex: 1 1 auto; height: 360px; }
  .ej-figura__texto { font-size: var(--ej-text-xl); }
}

/* --- Compromiso: mensaje + idea destacada --- */
.ej-bloque--compromiso { padding-block: 92px 96px; }

.ej-bloque--compromiso .ej-container {
  display: flex;
  gap: 76px;
  align-items: center;
}

.ej-bloque--compromiso .ej-titular { font-size: 2.875rem; }
.ej-bloque--compromiso .ej-entrada { line-height: 1.65; }

.ej-idea {
  flex: 0 0 440px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 34px;
  border: 1px solid #e9d58f;
  border-radius: var(--ej-radius-xl);
  background: var(--ej-crema);
  color: var(--ej-bronce);
}

.ej-idea .ej-icono { width: 30px; height: 30px; }

.ej-idea__texto {
  margin: 0;
  color: var(--ej-tinta);
  font-family: var(--ej-font-display);
  font-size: 1.5625rem;
  font-weight: 700;
  line-height: 1.35;
}

/* --- Llamada a la acción con imagen --- */
.ej-llamada {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ej-space-10);
  min-height: 330px;
  padding-block: 66px;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.37) 0%, rgba(0, 0, 0, 0.37) 100%),
    linear-gradient(90deg, rgba(30, 58, 138, 0.969) 0%, rgba(30, 58, 138, 0.937) 72%, rgba(18, 49, 227, 0.659) 100%),
    var(--ej-llamada-img);
  background-size: cover;
  background-position: center;
  color: var(--ej-white);
}

.ej-llamada .ej-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ej-space-10);
}

.ej-llamada__texto { max-width: 760px; display: flex; flex-direction: column; gap: 14px; }
.ej-llamada__titulo {
  margin: 0;
  color: var(--ej-white);
  font-family: var(--ej-font-display);
  font-size: 2.6875rem;
  font-weight: 700;
  line-height: 1.1;
}
.ej-llamada__entrada { margin: 0; max-width: 680px; color: var(--ej-slate-200); font-size: var(--ej-text-base); line-height: 1.55; }

.ej-btn--llamada {
  flex-shrink: 0;
  min-height: 82px;
  padding: var(--ej-space-4) var(--ej-space-6);
  border-radius: var(--ej-radius-lg);
  background: var(--ej-navy-700);
  color: var(--ej-white);
  font-size: var(--ej-text-xl);
  font-weight: 700;
  text-align: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.ej-btn--llamada:hover,
.ej-btn--llamada:focus { background: var(--ej-navy-900); color: var(--ej-white); text-decoration: none; }

@media (max-width: 61.9375em) {
  .ej-bloque--compromiso .ej-container { flex-direction: column; align-items: stretch; gap: var(--ej-space-8); }
  .ej-idea { flex: 1 1 auto; }
  .ej-llamada .ej-container { flex-direction: column; align-items: flex-start; }
  .ej-llamada__titulo { font-size: 1.875rem; }
  .ej-btn--llamada { width: 100%; font-size: var(--ej-text-base); min-height: 60px; }
}

/* --- Accesos institucionales: rejilla de tarjetas con enlace --- */
.ej-accesos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 18px;
}

.ej-acceso {
  display: flex;
  flex-direction: column;
  gap: var(--ej-space-4);
  min-height: 156px;
  padding: var(--ej-space-6);
  border: 1px solid var(--ej-linea);
  border-radius: var(--ej-radius-lg);
  background: var(--ej-white);
  box-shadow: 0 12px 28px -14px rgba(8, 35, 59, 0.05);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.ej-acceso:hover,
.ej-acceso:focus-visible {
  border-color: var(--ej-gold);
  text-decoration: none;
  transform: translateY(-2px);
}

.ej-acceso__cabeza {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ej-acceso__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--ej-crema);
  color: var(--ej-bronce);
}

.ej-acceso__icono .ej-icono { width: 22px; height: 22px; }

.ej-acceso__titulo {
  display: block;
  margin: 0;
  color: var(--ej-tinta);
  font-family: var(--ej-font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
}

.ej-acceso__texto {
  display: block;
  margin: 0;
  color: var(--ej-texto);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-sm);
  line-height: 1.55;
}

.ej-bloque--accesos .ej-bloque__titulo { margin-bottom: var(--ej-space-8); }

@media (max-width: 74.9375em) { .ej-accesos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 47.9375em)  { .ej-accesos { grid-template-columns: 1fr; } }

/* =========================================================================
   Internas — piezas compartidas (Historia y siguientes)
   ========================================================================= */
.ej-bloque--medio { padding-block: 72px; }
.ej-bloque--gris { background: #f4f7f9; }

/* Encabezado de sección en variante compacta (36px) */
.ej-bloque__titulo--compacto { max-width: 790px; gap: var(--ej-space-2); margin-bottom: var(--ej-space-8); }
.ej-bloque__titulo--compacto .ej-antetitulo { font-size: 0.6875rem; }
.ej-bloque__titulo--compacto .ej-titular { font-size: var(--ej-text-3xl); }
.ej-bloque__titulo--compacto .ej-entrada { font-size: var(--ej-text-base); line-height: 1.55; }

/* --- Avisos en crema --- */
.ej-avisos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }

.ej-nota {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 28px;
  border: 1px solid #e9d58f;
  border-radius: var(--ej-radius-xl);
  background: var(--ej-crema);
}

.ej-nota__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--ej-radius-lg);
  background: var(--ej-white);
  color: var(--ej-bronce);
}

.ej-nota__icono .ej-icono { width: 24px; height: 24px; }

.ej-nota__titulo {
  margin: 0 0 6px;
  color: var(--ej-tinta);
  font-family: var(--ej-font-display);
  font-size: 1.375rem;
  font-weight: 700;
}

.ej-nota__texto { margin: 0; color: var(--ej-texto); font-family: var(--ej-font-sans); font-size: var(--ej-text-sm); line-height: 1.55; }

/* --- Línea de tiempo --- */
.ej-cronologia { margin: 0; padding: 0; list-style: none; }

.ej-cronologia li {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding-block: 18px;
  border-bottom: 1px solid #dce5ea;
}

.ej-cronologia__fecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 168px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--ej-navy-700);
  color: var(--ej-white);
  font-family: var(--ej-font-display);
  font-size: var(--ej-text-lg);
  font-weight: 700;
  text-align: center;
}

.ej-cronologia__titulo {
  margin: 0 0 6px;
  color: var(--ej-tinta);
  font-family: var(--ej-font-display);
  font-size: 1.3125rem;
  font-weight: 700;
}

.ej-cronologia__texto { margin: 0; color: var(--ej-texto); font-family: var(--ej-font-sans); font-size: var(--ej-text-sm); line-height: 1.55; }

/* --- Direcciones históricas --- */
.ej-personas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ej-persona {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 18px;
  border: 1px solid #dce5ea;
  border-radius: 14px;
  background: #f4f7f9;
}

.ej-persona__inicial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: var(--ej-radius-full);
  background: var(--ej-crema);
  color: var(--ej-bronce);
  font-family: var(--ej-font-display);
  font-size: var(--ej-text-base);
  font-weight: 700;
}

.ej-persona__nombre { margin: 0; color: var(--ej-tinta); font-family: var(--ej-font-sans); font-size: 0.9375rem; line-height: 1.35; }

@media (max-width: 87.4375em) { .ej-personas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 61.9375em)  { .ej-personas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 35.9375em)  { .ej-personas { grid-template-columns: 1fr; } }

@media (max-width: 61.9375em) {
  .ej-avisos { grid-template-columns: 1fr; }
  .ej-cronologia li { flex-direction: column; gap: var(--ej-space-3); }
  .ej-cronologia__fecha { flex: 0 0 auto; align-self: flex-start; }
}

/* --- Buscador y filtros del repositorio --- */
.ej-buscador {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 62px;
  padding: 0 8px 0 20px;
  border: 1px solid #dce5ea;
  border-radius: var(--ej-radius-lg);
  background: var(--ej-white);
  box-shadow: 0 4px 8px -4px rgba(8, 35, 59, 0.07), 0 16px 40px -12px rgba(8, 35, 59, 0.08);
}

.ej-buscador .ej-icono { width: 20px; height: 20px; color: var(--ej-texto); }

.ej-buscador input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--ej-tinta);
  font-family: var(--ej-font-sans);
  font-size: 0.9375rem;
}

.ej-buscador input::placeholder { color: var(--ej-texto); }
.ej-buscador input:focus { outline: none; }

.ej-buscador button {
  flex-shrink: 0;
  padding: 12px 18px;
  border: 0;
  border-radius: var(--ej-radius);
  background: #082e4a;
  color: var(--ej-white);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-xs);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.ej-filtros { display: flex; flex-wrap: wrap; gap: var(--ej-space-2); margin-top: 14px; }

.ej-filtro {
  padding: var(--ej-space-2) 13px;
  border: 1px solid #dce5ea;
  border-radius: var(--ej-radius-full);
  background: var(--ej-white);
  color: var(--ej-tinta);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-xs);
  font-weight: 600;
  cursor: pointer;
}

.ej-filtro[aria-pressed="true"] { background: #082e4a; border-color: #082e4a; color: var(--ej-white); }

/* --- Tarjetas de colección --- */
.ej-colecciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: var(--ej-space-8); }

.ej-coleccion {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 210px;
  padding: 26px;
  border: 1px solid #dce5ea;
  border-radius: var(--ej-radius-lg);
  background: var(--ej-white);
  box-shadow: 0 4px 8px -4px rgba(8, 35, 59, 0.07), 0 16px 40px -12px rgba(8, 35, 59, 0.08);
  text-decoration: none;
}

.ej-coleccion[hidden] { display: none; }

.ej-coleccion__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--ej-crema);
  color: var(--ej-bronce);
}

.ej-coleccion__icono .ej-icono { width: 22px; height: 22px; }

.ej-coleccion__titulo { display: block; margin: 0 0 8px; color: var(--ej-tinta); font-family: var(--ej-font-display); font-size: 1.375rem; font-weight: 700; line-height: 1.2; }
.ej-coleccion__texto { display: block; margin: 0; color: var(--ej-texto); font-family: var(--ej-font-sans); font-size: var(--ej-text-sm); line-height: 1.55; }

.ej-coleccion__pie {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
  color: #082e4a;
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-xs);
  font-weight: 700;
}

.ej-coleccion:hover .ej-coleccion__pie,
.ej-coleccion:focus-visible .ej-coleccion__pie { text-decoration: underline; }

.ej-vacio { margin-top: var(--ej-space-6); color: var(--ej-texto); font-family: var(--ej-font-sans); font-size: var(--ej-text-sm); }

@media (max-width: 74.9375em) { .ej-colecciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 47.9375em)  { .ej-colecciones { grid-template-columns: 1fr; } .ej-buscador { height: auto; flex-wrap: wrap; padding: 10px; } .ej-buscador input { height: 40px; } }

/* --- Directorio de personal: rejilla de cuatro y pie con metadato --- */
.ej-colecciones--cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ej-coleccion__pie--doble { justify-content: space-between; align-items: center; gap: var(--ej-space-3); }
.ej-coleccion__meta { color: var(--ej-texto); font-weight: 400; }
.ej-coleccion__accion { color: #082e4a; font-weight: 700; }

/* El aviso de orientación cierra la sección y lleva botón a la derecha */
.ej-nota--ancha { margin-top: var(--ej-space-8); }
.ej-nota--ancha > div { flex: 1 1 auto; min-width: 0; }
.ej-nota__texto a { color: var(--ej-bronce); }
.ej-nota__accion { flex-shrink: 0; }

@media (max-width: 74.9375em) { .ej-colecciones--cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 47.9375em) {
  .ej-colecciones--cuatro { grid-template-columns: 1fr; }
  .ej-nota--ancha { flex-direction: column; align-items: flex-start; }
}

/* En el Figma las tarjetas de directorio miden 300 px y el pie va pegado al
   texto, no al fondo de la tarjeta. */
@media (min-width: 48em) {
  .ej-colecciones--alta .ej-coleccion { min-height: 300px; }
  .ej-colecciones--alta .ej-coleccion__pie { margin-top: 0; }
}

/* --- Catálogo de programas --- */
/* Encabezado de sección con acción a la derecha */
.ej-encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ej-space-6); }
.ej-encabezado .ej-bloque__titulo { margin-bottom: 0; }
.ej-encabezado + .ej-colecciones { margin-top: var(--ej-space-8); }

.ej-coleccion__cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--ej-space-3); }

.ej-coleccion__chip {
  padding: var(--ej-space-2) 13px;
  border: 1px solid #dce5ea;
  border-radius: var(--ej-radius-full);
  background: var(--ej-crema);
  color: var(--ej-tinta);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.ej-coleccion--ancha { grid-column: 1 / -1; }

/* Pasos numerados */
.ej-pasos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ej-paso {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border: 1px solid #dce5ea;
  border-radius: var(--ej-radius-lg);
  background: var(--ej-white);
}

.ej-paso__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--ej-radius-full);
  background: var(--ej-navy-700);
  color: var(--ej-gold);
  font-family: var(--ej-font-display);
  font-size: var(--ej-text-lg);
  font-weight: 700;
}

.ej-paso__titulo { margin: 0; color: var(--ej-tinta); font-family: var(--ej-font-display); font-size: 1.3125rem; font-weight: 700; }
.ej-paso__texto { margin: 0; color: var(--ej-texto); font-family: var(--ej-font-sans); font-size: var(--ej-text-sm); line-height: 1.55; }

/* Aviso sobre fondo azul */
.ej-nota--navy { border-color: rgba(255, 255, 255, 0.16); background: var(--ej-navy-700); }
.ej-nota--navy .ej-nota__icono { background: rgba(255, 255, 255, 0.07); color: var(--ej-gold); }
.ej-nota--navy .ej-nota__titulo { color: var(--ej-white); }
.ej-nota--navy .ej-nota__texto { color: #dce5ea; }

@media (max-width: 61.9375em) {
  .ej-encabezado { flex-direction: column; align-items: flex-start; gap: var(--ej-space-5); }
  .ej-pasos { grid-template-columns: 1fr; }
}

/* Realimentación al pasar el ratón por los filtros */
.ej-filtro:hover,
.ej-filtro:focus-visible { border-color: var(--ej-navy-700); color: var(--ej-navy-700); }
.ej-filtro[aria-pressed="true"]:hover { color: var(--ej-white); }

/* --- Listado documental --- */
.ej-listado {
  margin: var(--ej-space-8) 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid #dce5ea;
  border-radius: var(--ej-radius-lg);
  background: var(--ej-white);
  box-shadow: 0 18px 40px -14px rgba(8, 35, 59, 0.07);
  overflow: hidden;
}

.ej-documento {
  display: flex;
  gap: 16px;
  align-items: center;
  min-height: 78px;
  padding: 16px 20px;
  border-bottom: 1px solid #dce5ea;
}

.ej-documento:last-child { border-bottom: 0; }
.ej-documento[hidden] { display: none; }

.ej-documento__tipo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: var(--ej-radius);
  background: var(--ej-crema);
  color: var(--ej-bronce);
}

.ej-documento__tipo .ej-icono { width: 20px; height: 20px; }

.ej-documento__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ej-documento__titulo { color: var(--ej-tinta); font-family: var(--ej-font-sans); font-size: 0.9375rem; }
.ej-documento__glosa { color: var(--ej-texto); font-family: var(--ej-font-sans); font-size: var(--ej-text-xs); }

.ej-documento__formato {
  flex-shrink: 0;
  color: var(--ej-texto);
  font-family: var(--ej-font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
}

.ej-documento__descarga {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #082e4a;
  color: var(--ej-white);
}

.ej-documento__descarga .ej-icono { width: 18px; height: 18px; }
.ej-documento__descarga:hover,
.ej-documento__descarga:focus-visible { background: var(--ej-navy-900); color: var(--ej-white); }

@media (max-width: 47.9375em) {
  .ej-documento { flex-wrap: wrap; }
  .ej-documento__info { flex-basis: calc(100% - 58px); }
  .ej-documento__formato { margin-left: 58px; }
}

/* --- Tabla institucional --- */
.ej-tabla__marco {
  margin-top: var(--ej-space-8);
  border: 1px solid #dce5ea;
  border-radius: var(--ej-radius-lg);
  background: var(--ej-white);
  overflow: hidden;
}

/* En pantallas angostas la tabla se desplaza en horizontal */
@media (max-width: 47.9375em) { .ej-tabla__marco { overflow-x: auto; } }

.ej-tabla {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ej-font-sans);
  text-align: left;
}

.ej-tabla th,
.ej-tabla td { padding: 16px 18px; font-weight: 400; vertical-align: top; }

.ej-tabla thead th {
  padding-block: 14px;
  background: var(--ej-navy-700);
  color: var(--ej-white);
  font-size: var(--ej-text-xs);
  font-weight: 700;
  width: 33.33%;
}

.ej-tabla tbody tr { border-bottom: 1px solid #dce5ea; }
.ej-tabla tbody tr:nth-child(even) { background: #f4f7f9; }
.ej-tabla tbody th { color: var(--ej-tinta); font-size: 0.8125rem; line-height: 1.45; }
.ej-tabla tbody td { color: var(--ej-texto); font-size: 0.8125rem; line-height: 1.45; }

/* --- Banda azul de cierre con llamada a la acción --- */
.ej-bloque--azul { padding-block: 48px; background: #0f2461; }
.ej-bloque--azul .ej-antetitulo { color: var(--ej-gold); }
.ej-bloque--azul .ej-titular { color: var(--ej-white); }
.ej-bloque--azul .ej-entrada { color: #dce5ea; }

.ej-encabezado--centrado { align-items: center; }

.ej-btn--grande {
  min-width: 224px;
  min-height: 64px;
  padding: 12px 18px;
  font-size: var(--ej-text-2xl);
}

/* --- Esquema del organigrama --- */
.ej-esquema {
  margin-top: var(--ej-space-8);
  padding: 26px;
  border: 1px solid #dce5ea;
  border-radius: var(--ej-radius-lg);
  background: var(--ej-slate-50);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ej-esquema__etiqueta {
  margin: 0 0 12px;
  color: var(--ej-bronce);
  font-family: var(--ej-font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ej-esquema__fila { display: grid; gap: 18px; }
.ej-esquema__fila--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ej-esquema__fila--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ej-esquema__fila--centro { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.ej-esquema__fila--centro .ej-nodo { width: min(100%, 470px); }

.ej-nodo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  min-height: 64px;
  padding: 18px 22px;
  border: 1px solid #dce5ea;
  border-radius: var(--ej-radius);
  background: var(--ej-white);
  text-align: center;
}

.ej-nodo__titulo { margin: 0; color: var(--ej-tinta); font-family: var(--ej-font-display); font-size: var(--ej-text-xl); font-weight: 700; }
.ej-nodo__texto { margin: 0; color: var(--ej-texto); font-family: var(--ej-font-sans); font-size: 0.8125rem; line-height: 1.45; }

.ej-nodo--jefe { border-color: #082e4a; background: #082e4a; }
.ej-nodo--mando { border-color: var(--ej-navy-700); background: var(--ej-navy-700); }
.ej-nodo--jefe .ej-nodo__titulo,
.ej-nodo--mando .ej-nodo__titulo { color: var(--ej-white); }
.ej-nodo--jefe .ej-nodo__texto,
.ej-nodo--mando .ej-nodo__texto { color: #dce5ea; }

/* --- Fichas en crema con lista y acción --- */
.ej-fichas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: var(--ej-space-8); }

.ej-ficha {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border: 1px solid #e9d58f;
  border-radius: var(--ej-radius-xl);
  background: var(--ej-crema);
}

.ej-ficha__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--ej-radius);
  background: var(--ej-white);
  color: var(--ej-bronce);
}

.ej-ficha__icono .ej-icono { width: 22px; height: 22px; }
.ej-ficha__titulo { margin: 0; color: var(--ej-tinta); font-family: var(--ej-font-display); font-size: 1.375rem; font-weight: 700; }

.ej-ficha__lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ej-ficha__lista li { color: var(--ej-texto); font-family: var(--ej-font-sans); font-size: var(--ej-text-sm); line-height: 1.5; }

.ej-ficha__accion { align-self: center; margin-top: var(--ej-space-2); }

@media (max-width: 61.9375em) {
  .ej-fichas { grid-template-columns: 1fr; }
  .ej-esquema__fila--tres { grid-template-columns: 1fr; }
}
@media (max-width: 35.9375em) { .ej-esquema__fila--dos { grid-template-columns: 1fr; } }

/* --- Franja destacada en azul (dirección, responsables) --- */
.ej-destacado {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-top: var(--ej-space-8);
  padding: 24px 28px;
  border-radius: var(--ej-radius-xl);
  background: var(--ej-navy-700);
}

.ej-destacado__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--ej-radius);
  background: rgba(255, 255, 255, 0.07);
  color: var(--ej-gold);
}

.ej-destacado__icono .ej-icono { width: 24px; height: 24px; }
.ej-destacado__titulo { margin: 0 0 6px; color: var(--ej-white); font-family: var(--ej-font-display); font-size: 1.375rem; font-weight: 700; }
.ej-destacado__texto { margin: 0; color: #dce5ea; font-family: var(--ej-font-sans); font-size: var(--ej-text-sm); line-height: 1.55; }

.ej-destacado + .ej-colecciones { margin-top: 18px; }

@media (max-width: 35.9375em) { .ej-destacado { flex-direction: column; align-items: flex-start; } }

/* --- Biblioteca virtual --- */
/* Marca de actualización en el encabezado */
.ej-marca {
  display: inline-flex;
  gap: var(--ej-space-2);
  align-items: center;
  margin: 0;
  padding: var(--ej-space-2) 14px;
  border: 1px solid #dce5ea;
  border-radius: var(--ej-radius-full);
  background: var(--ej-white);
  color: var(--ej-tinta);
  font-family: var(--ej-font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ej-marca .ej-icono { width: 14px; height: 14px; color: var(--ej-bronce); }

.ej-filtros--centro { justify-content: center; }

/* Tarjeta destacada: foto + panel azul */
.ej-destacada {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  margin-top: var(--ej-space-8);
  border-radius: var(--ej-radius-xl);
  background: var(--ej-navy-700);
  overflow: hidden;
}

.ej-destacada__imagen { width: 100%; height: 100%; object-fit: cover; display: block; }
.ej-destacada__panel { display: flex; flex-direction: column; gap: 14px; padding: 36px 40px; }

.ej-destacada__sello {
  display: flex;
  gap: var(--ej-space-3);
  align-items: center;
  margin: 0;
  color: #dce5ea;
  font-family: var(--ej-font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ej-destacada__pastilla {
  padding: 6px 14px;
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: var(--ej-radius-full);
  color: var(--ej-gold);
}

.ej-destacada__titulo { margin: 0; color: var(--ej-white); font-family: var(--ej-font-display); font-size: var(--ej-text-3xl); font-weight: 700; line-height: 1.12; }
.ej-destacada__texto { margin: 0; max-width: 62ch; color: #dce5ea; font-family: var(--ej-font-sans); font-size: var(--ej-text-base); line-height: 1.55; }
.ej-destacada__acciones { display: flex; flex-wrap: wrap; gap: var(--ej-space-3); }
.ej-destacada__datos { display: flex; flex-wrap: wrap; gap: var(--ej-space-4); margin-top: var(--ej-space-2); }

.ej-btn--humo {
  padding: 14px var(--ej-space-6);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--ej-radius-lg);
  background: rgba(255, 255, 255, 0.08);
  color: var(--ej-white);
  font-size: var(--ej-text-xs);
}

.ej-btn--humo:hover,
.ej-btn--humo:focus { background: rgba(255, 255, 255, 0.16); color: var(--ej-white); text-decoration: none; }

.ej-cifra {
  min-width: 126px;
  padding: 14px 18px;
  border-radius: var(--ej-radius);
  background: rgba(255, 255, 255, 0.07);
}

.ej-cifra__numero { margin: 0; color: var(--ej-gold); font-family: var(--ej-font-display); font-size: var(--ej-text-2xl); font-weight: 700; }
.ej-cifra__texto { margin: 0; color: #dce5ea; font-family: var(--ej-font-sans); font-size: var(--ej-text-xs); }

/* Rejilla de colecciones con portada */
.ej-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: var(--ej-space-8); }

.ej-tarjeta {
  display: flex;
  flex-direction: column;
  border: 1px solid #dce5ea;
  border-radius: var(--ej-radius-lg);
  background: var(--ej-white);
  box-shadow: 0 16px 40px -12px rgba(8, 35, 59, 0.08);
  overflow: hidden;
  text-decoration: none;
}

.ej-tarjeta[hidden] { display: none; }
.ej-tarjeta__imagen { width: 100%; height: 174px; object-fit: cover; display: block; }
.ej-tarjeta__cuerpo { display: flex; flex-direction: column; gap: 6px; padding: 20px; }

.ej-tarjeta__etiqueta {
  color: var(--ej-bronce);
  font-family: var(--ej-font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ej-tarjeta__titulo { color: var(--ej-tinta); font-family: var(--ej-font-display); font-size: var(--ej-text-xl); font-weight: 700; line-height: 1.2; }
.ej-tarjeta__texto { color: var(--ej-texto); font-family: var(--ej-font-sans); font-size: var(--ej-text-xs); line-height: 1.5; }

.ej-tarjeta__accion {
  display: inline-flex;
  gap: var(--ej-space-2);
  align-items: center;
  margin-top: var(--ej-space-3);
  color: var(--ej-tinta);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-xs);
  font-weight: 700;
}

.ej-tarjeta__accion .ej-icono {
  width: 26px;
  height: 26px;
  padding: 6px;
  border-radius: var(--ej-radius-full);
  background: #eef3f7;
  color: var(--ej-navy-700);
}

.ej-mas { margin: var(--ej-space-6) 0 0; text-align: center; }
.ej-mas .ej-btn--humo { border-color: #dce5ea; background: var(--ej-slate-50); color: var(--ej-tinta); }
.ej-mas .ej-btn--humo:hover { background: #eef3f7; color: var(--ej-tinta); }
.ej-mas .ej-icono { width: 14px; height: 14px; vertical-align: -2px; }

/* Banda nocturna con rutas temáticas */
.ej-bloque--noche { background: linear-gradient(180deg, #0a1b33 0%, #0f2461 100%); }
.ej-bloque--noche .ej-antetitulo { color: var(--ej-gold); }
.ej-bloque--noche .ej-titular { color: var(--ej-white); }
.ej-bloque--noche .ej-entrada { color: #c6d2e0; }

.ej-temas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin-top: var(--ej-space-8); }

.ej-tema {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--ej-radius-lg);
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
}

.ej-tema:hover, .ej-tema:focus-visible { background: rgba(255, 255, 255, 0.09); text-decoration: none; }

.ej-tema__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: var(--ej-space-5);
  border-radius: var(--ej-radius);
  background: rgba(255, 255, 255, 0.07);
  color: var(--ej-gold);
}

.ej-tema__icono .ej-icono { width: 18px; height: 18px; }

.ej-tema__etiqueta { color: var(--ej-gold); font-family: var(--ej-font-sans); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ej-tema__titulo { color: var(--ej-white); font-family: var(--ej-font-display); font-size: var(--ej-text-lg); font-weight: 700; }
.ej-tema__texto { color: #c6d2e0; font-family: var(--ej-font-sans); font-size: var(--ej-text-xs); }

.ej-etiquetas { display: flex; flex-wrap: wrap; gap: var(--ej-space-3); margin-top: var(--ej-space-6); }

.ej-etiqueta {
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--ej-radius-full);
  color: var(--ej-white);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-sm);
  text-decoration: none;
}

.ej-etiqueta:hover, .ej-etiqueta:focus-visible { background: rgba(255, 255, 255, 0.1); color: var(--ej-white); text-decoration: none; }

@media (max-width: 74.9375em) {
  .ej-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ej-temas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 61.9375em) {
  .ej-destacada { grid-template-columns: 1fr; }
  .ej-destacada__imagen { height: 260px; }
}
@media (max-width: 47.9375em) {
  .ej-rejilla { grid-template-columns: 1fr; }
  .ej-temas { grid-template-columns: 1fr; }
  .ej-destacada__panel { padding: 26px 22px; }
}

/* El encabezado con marca a la derecha necesita aire antes del buscador */
.ej-encabezado + .ej-buscador { margin-top: 28px; }

/* El recorte del contenedor no siempre alcanza a la imagen: se le da el radio
   a ella misma para que las esquinas coincidan con la tarjeta. */
.ej-destacada { isolation: isolate; }
.ej-destacada__imagen { border-radius: var(--ej-radius-xl) 0 0 var(--ej-radius-xl); }
.ej-destacada__panel { min-width: 0; border-radius: 0 var(--ej-radius-xl) var(--ej-radius-xl) 0; }

@media (max-width: 61.9375em) {
  .ej-destacada__imagen { border-radius: var(--ej-radius-xl) var(--ej-radius-xl) 0 0; }
  .ej-destacada__panel { border-radius: 0 0 var(--ej-radius-xl) var(--ej-radius-xl); }
}

/* --- Revista Judicial --- */
.ej-bloque--angosto { padding-block: 32px; }

/* Encabezado sin antetítulo, un punto más pequeño */
.ej-bloque__titulo--menor { max-width: 790px; gap: var(--ej-space-2); margin-bottom: var(--ej-space-6); }
.ej-bloque__titulo--menor .ej-titular { font-size: 1.875rem; }
.ej-bloque__titulo--menor .ej-entrada { font-size: var(--ej-text-sm); }

/* La tarjeta de edición va centrada y más angosta que el contenedor */
.ej-destacada--centrada { max-width: 1080px; margin-inline: auto; }
.ej-destacada--centrada .ej-destacada__titulo { font-size: var(--ej-text-2xl); line-height: 1.2; }

.ej-marcas { display: flex; flex-wrap: wrap; gap: var(--ej-space-2); }

.ej-marca--humo {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  color: #dce5ea;
  font-size: var(--ej-text-xs);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.ej-btn--blanco {
  padding: 14px var(--ej-space-6);
  border-radius: var(--ej-radius-lg);
  background: var(--ej-white);
  color: #082e4a;
  font-size: var(--ej-text-xs);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.ej-btn--blanco:hover,
.ej-btn--blanco:focus { background: var(--ej-slate-50); color: #082e4a; text-decoration: none; }

/* Áreas jurídicas */
.ej-materias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

.ej-materia {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px;
  border: 1px solid #dce5ea;
  border-radius: var(--ej-radius-lg);
  background: var(--ej-white);
  text-decoration: none;
}

.ej-materia[hidden] { display: none; }
.ej-materia:hover, .ej-materia:focus-visible { border-color: #c4d2dc; text-decoration: none; }

.ej-materia__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: var(--ej-space-6);
  border-radius: var(--ej-radius);
  background: #eef3f8;
  color: var(--ej-tinta);
}

.ej-materia__icono .ej-icono { width: 20px; height: 20px; }
.ej-materia__etiqueta { color: var(--ej-bronce); font-family: var(--ej-font-sans); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ej-materia__titulo { color: var(--ej-tinta); font-family: var(--ej-font-display); font-size: var(--ej-text-lg); font-weight: 700; }
.ej-materia__texto { color: var(--ej-texto); font-family: var(--ej-font-sans); font-size: var(--ej-text-xs); }

/* Panel azul con filas de archivo */
.ej-panel-azul {
  padding: 36px 40px;
  border-radius: var(--ej-radius-xl);
  background: var(--ej-navy-700);
}

.ej-panel-azul__titulo { margin: 0 0 6px; color: var(--ej-white); font-family: var(--ej-font-display); font-size: 1.625rem; font-weight: 700; }
.ej-panel-azul__texto { margin: 0; color: #c6d2e0; font-family: var(--ej-font-sans); font-size: var(--ej-text-sm); }
.ej-panel-azul .ej-etiquetas { margin-top: var(--ej-space-5); }

.ej-filas { display: flex; flex-direction: column; gap: 14px; margin-top: var(--ej-space-5); }

.ej-fila {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--ej-radius-lg);
  background: rgba(255, 255, 255, 0.05);
}

.ej-fila__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--ej-radius);
  background: rgba(255, 255, 255, 0.08);
  color: var(--ej-gold);
}

.ej-fila__icono .ej-icono { width: 20px; height: 20px; }
.ej-fila__texto { flex: 1 1 auto; min-width: 0; }
.ej-fila__titulo { margin: 0 0 4px; color: var(--ej-white); font-family: var(--ej-font-display); font-size: var(--ej-text-lg); font-weight: 700; }
.ej-fila__detalle { margin: 0; color: #c6d2e0; font-family: var(--ej-font-sans); font-size: var(--ej-text-xs); line-height: 1.5; }

@media (max-width: 74.9375em) { .ej-materias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 47.9375em) {
  .ej-materias { grid-template-columns: 1fr; }
  .ej-panel-azul { padding: 26px 22px; }
  .ej-fila { flex-wrap: wrap; }
}

/* --- Videoteca --- */
.ej-container--medio { max-width: 1240px; } /* columna de contenido del Figma en podcast */

.ej-apunte { margin: 0; color: var(--ej-tinta); font-family: var(--ej-font-sans); font-size: var(--ej-text-xs); font-weight: 700; }

/* Tarjeta destacada con reproductor */
.ej-destacada--video { grid-template-columns: minmax(0, 58%) minmax(0, 1fr); }
.ej-destacada__media { position: relative; display: block; }

.ej-reproducir {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--ej-radius-full);
  background: rgba(255, 255, 255, 0.18);
  color: var(--ej-white);
}

.ej-reproducir .ej-icono { width: 26px; height: 26px; }

.ej-destacada__titulo--sans { font-family: var(--ej-font-sans); font-size: 2.125rem; line-height: 1.15; }
.ej-destacada__pastilla--humo { border-color: rgba(255, 255, 255, 0.28); color: var(--ej-white); }

/* Tarjetas numeradas */
.ej-numerados { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

.ej-numerado {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  border: 1px solid #dce5ea;
  border-radius: var(--ej-radius-lg);
  background: var(--ej-white);
  text-decoration: none;
}

.ej-numerado:hover, .ej-numerado:focus-visible { border-color: #c4d2dc; text-decoration: none; }

.ej-numerado__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: var(--ej-space-5);
  border-radius: var(--ej-radius);
  background: #eef3f8;
  color: var(--ej-tinta);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-xs);
  font-weight: 700;
}

.ej-numerado__titulo { color: var(--ej-tinta); font-family: var(--ej-font-sans); font-size: var(--ej-text-base); font-weight: 700; }
.ej-numerado__texto { color: var(--ej-texto); font-family: var(--ej-font-sans); font-size: var(--ej-text-xs); }

/* Listado de videos con columna de recomendaciones */
.ej-videos { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; margin-top: var(--ej-space-6); align-items: start; }
.ej-videos__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

.ej-video {
  display: flex;
  flex-direction: column;
  border: 1px solid #dce5ea;
  border-radius: var(--ej-radius-lg);
  background: var(--ej-white);
  overflow: hidden;
}

.ej-video[hidden] { display: none; }
.ej-video__imagen { width: 100%; height: 196px; object-fit: cover; display: block; border-radius: var(--ej-radius-lg) var(--ej-radius-lg) 0 0; }
.ej-video__cuerpo { display: flex; flex-direction: column; gap: 8px; padding: 20px; }

.ej-video__etiqueta { margin: 0; color: var(--ej-bronce); font-family: var(--ej-font-sans); font-size: var(--ej-text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.ej-video__titulo { margin: 0; color: var(--ej-tinta); font-family: var(--ej-font-sans); font-size: var(--ej-text-lg); font-weight: 700; line-height: 1.25; }
.ej-video__texto { margin: 0; color: var(--ej-texto); font-family: var(--ej-font-sans); font-size: var(--ej-text-sm); line-height: 1.5; }

.ej-video__meta,
.ej-video__pie {
  display: flex;
  gap: var(--ej-space-3);
  align-items: center;
  justify-content: space-between;
  margin: 0;
  color: var(--ej-texto);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-xs);
}

.ej-video__meta { margin-top: var(--ej-space-2); }
.ej-video__pie { margin-top: var(--ej-space-3); }

.ej-recomendaciones {
  padding: 22px;
  border: 1px solid #dce5ea;
  border-radius: var(--ej-radius-lg);
  background: var(--ej-white);
}

.ej-recomendaciones__titulo { margin: 0 0 6px; color: var(--ej-tinta); font-family: var(--ej-font-display); font-size: var(--ej-text-lg); font-weight: 700; }
.ej-recomendaciones__texto { margin: 0 0 var(--ej-space-4); color: var(--ej-texto); font-family: var(--ej-font-sans); font-size: var(--ej-text-xs); }

.ej-sugerencia { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; }
.ej-sugerencia__imagen { width: 84px; height: 56px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.ej-sugerencia__titulo { display: block; color: var(--ej-tinta); font-family: var(--ej-font-sans); font-size: var(--ej-text-sm); font-weight: 700; line-height: 1.3; }
.ej-sugerencia__meta { display: block; margin-top: 4px; color: var(--ej-texto); font-family: var(--ej-font-sans); font-size: var(--ej-text-xs); }

.ej-btn--linea {
  padding: 10px 16px;
  border: 1px solid var(--ej-tinta);
  border-radius: var(--ej-radius);
  background: var(--ej-white);
  color: var(--ej-tinta);
  font-size: var(--ej-text-xs);
  cursor: pointer;
}

.ej-btn--linea:hover, .ej-btn--linea:focus { background: var(--ej-slate-50); color: var(--ej-tinta); }

@media (max-width: 74.9375em) {
  .ej-numerados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ej-videos { grid-template-columns: 1fr; }
}
@media (max-width: 61.9375em) {
  .ej-destacada--video { grid-template-columns: 1fr; }
}
@media (max-width: 47.9375em) {
  .ej-numerados { grid-template-columns: 1fr; }
  .ej-videos__lista { grid-template-columns: 1fr; }
}

/* --- Catálogo de podcasts --- */
.ej-creditos {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--ej-radius-full);
  background: rgba(255, 255, 255, 0.07);
  color: var(--ej-white);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-xs);
}

.ej-destacada__acciones .ej-icono { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }

/* Episodios recientes */
.ej-episodios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: var(--ej-space-6); }

.ej-episodio {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  border: 1px solid #dce5ea;
  border-radius: var(--ej-radius-lg);
  background: var(--ej-white);
  overflow: hidden;
}

.ej-episodio[hidden] { display: none; }
.ej-episodio__imagen { width: 100%; height: 100%; object-fit: cover; display: block; }
.ej-episodio__cuerpo { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; }

.ej-episodio__cabeza { display: flex; gap: var(--ej-space-3); align-items: baseline; justify-content: space-between; margin: 0; }
.ej-episodio__programa { color: var(--ej-bronce); font-family: var(--ej-font-sans); font-size: var(--ej-text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.ej-episodio__fecha { color: var(--ej-texto); font-family: var(--ej-font-sans); font-size: var(--ej-text-xs); white-space: nowrap; }
.ej-episodio__titulo { margin: 0; color: var(--ej-tinta); font-family: var(--ej-font-display); font-size: var(--ej-text-lg); font-weight: 700; line-height: 1.25; }
.ej-episodio__tema { margin: 0; color: var(--ej-texto); font-family: var(--ej-font-sans); font-size: var(--ej-text-xs); }
.ej-episodio__pie { margin: var(--ej-space-3) 0 0; }

.ej-escuchar {
  display: inline-flex;
  gap: var(--ej-space-2);
  align-items: center;
  color: var(--ej-tinta);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-xs);
  font-weight: 700;
  text-decoration: none;
}

.ej-escuchar .ej-icono {
  width: 28px;
  height: 28px;
  padding: 8px;
  border-radius: var(--ej-radius-full);
  background: #eef3f8;
  color: var(--ej-navy-700);
}

.ej-episodio--destacado { border-color: var(--ej-navy-700); background: var(--ej-navy-700); }
.ej-episodio--destacado .ej-episodio__programa { color: var(--ej-gold); }
.ej-episodio--destacado .ej-episodio__fecha,
.ej-episodio--destacado .ej-episodio__tema { color: #c6d2e0; }
.ej-episodio--destacado .ej-episodio__titulo { color: var(--ej-white); }
.ej-episodio--destacado .ej-escuchar { color: var(--ej-white); }
.ej-episodio--destacado .ej-escuchar .ej-icono { background: var(--ej-gold); color: #05182b; }

/* Programas */
.ej-programas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: var(--ej-space-6); }

.ej-programa {
  display: flex;
  flex-direction: column;
  border: 1px solid #dce5ea;
  border-radius: var(--ej-radius-lg);
  background: var(--ej-white);
  overflow: hidden;
}

.ej-programa__portada { position: relative; display: block; }
.ej-programa__portada img { width: 100%; height: 190px; object-fit: cover; display: block; }

.ej-programa__sello {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 14px;
  border-radius: var(--ej-radius-full);
  background: rgba(5, 24, 43, 0.72);
  color: var(--ej-gold);
  font-family: var(--ej-font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ej-programa__play {
  position: absolute;
  right: 16px;
  bottom: -22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--ej-radius-full);
  background: var(--ej-gold);
  color: #05182b;
}

.ej-programa__play .ej-icono { width: 18px; height: 18px; }
.ej-programa__cuerpo { display: flex; flex-direction: column; gap: 8px; padding: 22px 20px 20px; }
.ej-programa__cabeza { display: flex; align-items: baseline; justify-content: space-between; margin: 0; }
.ej-programa__cuenta { color: var(--ej-bronce); font-family: var(--ej-font-sans); font-size: var(--ej-text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.ej-programa__ritmo { color: var(--ej-texto); font-family: var(--ej-font-sans); font-size: var(--ej-text-xs); }
.ej-programa__titulo { margin: 0; color: var(--ej-tinta); font-family: var(--ej-font-display); font-size: var(--ej-text-2xl); font-weight: 700; }
.ej-programa__texto { margin: 0; color: var(--ej-texto); font-family: var(--ej-font-sans); font-size: var(--ej-text-sm); line-height: 1.5; }
.ej-programa__enlace { margin: var(--ej-space-2) 0 0; }
.ej-programa__enlace a { color: var(--ej-tinta); font-family: var(--ej-font-sans); font-size: var(--ej-text-xs); font-weight: 700; text-decoration: none; }
.ej-programa__cuerpo p:last-child { margin: var(--ej-space-2) 0 0; }

.ej-btn--bronce { padding: 10px 18px; border-radius: var(--ej-radius); background: #8b6a2f; color: var(--ej-white); font-size: var(--ej-text-xs); }
.ej-btn--bronce:hover, .ej-btn--bronce:focus { background: #74571f; color: var(--ej-white); text-decoration: none; }
.ej-btn--bronce .ej-icono { width: 13px; height: 13px; margin-right: 6px; vertical-align: -2px; }

/* Series menores */
.ej-series { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }

.ej-serie {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid #dce5ea;
  border-radius: var(--ej-radius-lg);
  background: var(--ej-white);
  text-decoration: none;
}

.ej-serie__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--ej-radius);
  background: #eef3f8;
  color: var(--ej-tinta);
}

.ej-serie__icono .ej-icono { width: 18px; height: 18px; }
.ej-serie__cuerpo { flex: 1 1 auto; min-width: 0; }
.ej-serie__cabeza { display: flex; gap: var(--ej-space-3); align-items: baseline; justify-content: space-between; }
.ej-serie__titulo { color: var(--ej-tinta); font-family: var(--ej-font-sans); font-size: var(--ej-text-sm); font-weight: 700; }
.ej-serie__cuenta { color: var(--ej-texto); font-family: var(--ej-font-sans); font-size: var(--ej-text-xs); white-space: nowrap; }
.ej-serie__texto { display: block; margin-top: 2px; color: var(--ej-texto); font-family: var(--ej-font-sans); font-size: var(--ej-text-xs); }

/* Rutas temáticas */
.ej-rutas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin-top: var(--ej-space-6); }

.ej-ruta-tema {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  border: 1px solid #dce5ea;
  border-radius: var(--ej-radius-lg);
  background: var(--ej-slate-50);
  text-decoration: none;
}

.ej-ruta-tema__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: var(--ej-space-5);
  border-radius: var(--ej-radius);
  background: #e3ecf4;
  color: var(--ej-tinta);
}

.ej-ruta-tema__icono .ej-icono { width: 18px; height: 18px; }
.ej-ruta-tema__cuenta { color: var(--ej-bronce); font-family: var(--ej-font-sans); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.ej-ruta-tema__titulo { color: var(--ej-tinta); font-family: var(--ej-font-display); font-size: var(--ej-text-lg); font-weight: 700; line-height: 1.2; }
.ej-ruta-tema__texto { color: var(--ej-texto); font-family: var(--ej-font-sans); font-size: var(--ej-text-xs); }

/* Banda de suscripción */
.ej-bloque--escucha {
  position: relative;
  padding-block: 72px;
  background-color: #0a1b33;
  background-image: linear-gradient(0deg, rgba(10, 27, 51, 0.82), rgba(10, 27, 51, 0.82)), url("../../../images/rediseno/podcast/banda.jpg");
  background-size: cover;
  background-position: center;
}

.ej-escucha { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: center; }
.ej-escucha__mensaje .ej-antetitulo { color: var(--ej-gold); }
.ej-escucha__mensaje .ej-titular { margin: var(--ej-space-2) 0; color: var(--ej-white); font-size: 2.375rem; }
.ej-escucha__mensaje .ej-entrada { color: #c6d2e0; }

.ej-suscripcion { padding: 24px; border-radius: var(--ej-radius-xl); background: var(--ej-white); }
.ej-suscripcion__cabeza { display: flex; gap: 14px; align-items: center; }

.ej-suscripcion__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--ej-radius);
  background: var(--ej-crema);
  color: var(--ej-bronce);
}

.ej-suscripcion__icono .ej-icono { width: 20px; height: 20px; }
.ej-suscripcion__titulo { margin: 0; color: var(--ej-tinta); font-family: var(--ej-font-sans); font-size: var(--ej-text-base); font-weight: 700; }
.ej-suscripcion__texto { margin: 0; color: var(--ej-texto); font-family: var(--ej-font-sans); font-size: var(--ej-text-xs); }

.ej-suscripcion__forma {
  display: flex;
  gap: var(--ej-space-2);
  align-items: center;
  margin-top: var(--ej-space-5);
  padding: 6px;
  border: 1px solid #dce5ea;
  border-radius: var(--ej-radius-lg);
}

.ej-suscripcion__forma input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--ej-tinta); font-family: var(--ej-font-sans); font-size: var(--ej-text-sm); padding: 10px 12px; }
.ej-suscripcion__forma input:focus { outline: none; }

.ej-suscripcion__tambien {
  display: inline-flex;
  gap: var(--ej-space-2);
  align-items: center;
  margin: var(--ej-space-4) 0 0;
  padding: 8px 14px;
  border: 1px solid #dce5ea;
  border-radius: var(--ej-radius-full);
  color: var(--ej-tinta);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-xs);
}

.ej-suscripcion__tambien .ej-icono { width: 14px; height: 14px; }

@media (max-width: 74.9375em) {
  .ej-programas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ej-series { grid-template-columns: 1fr; }
  .ej-rutas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ej-escucha { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 47.9375em) {
  .ej-episodios { grid-template-columns: 1fr; }
  .ej-episodio { grid-template-columns: 1fr; }
  .ej-episodio__imagen { height: 180px; }
  .ej-programas { grid-template-columns: 1fr; }
  .ej-rutas { grid-template-columns: 1fr; }
}

/* =========================================================================
   Matrícula de actividades académicas
   ========================================================================= */

/* Dos rutas de matrícula (personal interno / público externo) */
.ej-colecciones--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* El proceso de inscripción del Figma son cuatro pasos, no tres */
.ej-pasos--cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ej-encabezado + .ej-pasos { margin-top: var(--ej-space-8); }
.ej-encabezado + .ej-avisos { margin-top: var(--ej-space-8); }

/* Los avisos de esta pantalla van más juntos que los de la portada */
.ej-avisos--juntos { gap: 18px; }
.ej-avisos .ej-nota > div { flex: 1 1 auto; min-width: 0; }

/* Botón de 48 px del aviso de convocatorias */
.ej-btn--medio { min-width: 255px; min-height: 48px; font-size: var(--ej-text-base); }

@media (max-width: 74.9375em) {
  .ej-pasos--cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 47.9375em) {
  .ej-colecciones--dos { grid-template-columns: 1fr; }
  .ej-pasos--cuatro { grid-template-columns: 1fr; }
  .ej-avisos { grid-template-columns: 1fr; }
  .ej-avisos .ej-nota { flex-wrap: wrap; }
  .ej-btn--medio { min-width: 0; width: 100%; }
}

/* =========================================================================
   Calendario semanal de cursos
   ========================================================================= */

.ej-semana {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: var(--ej-space-8) 0 0;
  padding: 0;
  list-style: none;
}

.ej-dia {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dce5ea;
  border-radius: 18px;
  background: #f4f7f9;
}

.ej-dia__fecha {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--ej-radius-lg);
  background: var(--ej-navy-700);
  color: var(--ej-white);
  font-family: var(--ej-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  text-align: center;
}

.ej-curso {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 128px;
  padding: 16px;
  border: 1px solid #dce5ea;
  border-radius: 14px;
  background: var(--ej-white);
}

.ej-curso__estado {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ej-bronce);
  font-family: var(--ej-font-sans);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ej-curso__estado .ej-icono { width: 15px; height: 15px; }

.ej-curso__titulo { margin: 0; color: var(--ej-tinta); font-family: var(--ej-font-display); font-size: 1.0625rem; font-weight: 700; line-height: 1.25; }
.ej-curso__limite { margin: 0; color: var(--ej-texto); font-family: var(--ej-font-sans); font-size: 0.6875rem; }

@media (max-width: 74.9375em) { .ej-semana { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 47.9375em)  { .ej-semana { grid-template-columns: 1fr; } }

.ej-dia__cursos { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }

/* El botón dorado del aviso en azul comparte la geometría del de SAGA */
.ej-nota--navy .ej-btn--gold {
  padding: 12px 18px;
  border-radius: var(--ej-radius-lg);
  font-size: var(--ej-text-xs);
  line-height: 1rem;
}

/* =========================================================================
   Plataforma de cursos virtuales
   ========================================================================= */

.ej-aula {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: var(--ej-space-8);
}

.ej-aula__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 360px;
  padding: 32px;
  overflow: hidden;
  border-radius: var(--ej-radius-xl);
  background: #05182b center / cover no-repeat;
  text-decoration: none;
}

/* El velo del Figma arranca translúcido y cierra en el azul noche */
.ej-aula__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(5, 24, 43, 0.22) 15%, #05182b);
}

.ej-aula__contenido { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; }
.ej-aula__titulo { margin: 0; color: var(--ej-white); font-family: var(--ej-font-display); font-size: 1.875rem; font-weight: 700; line-height: 1.15; }
.ej-aula__texto { margin: 0; color: #e2e8f0; font-family: var(--ej-font-sans); font-size: var(--ej-text-sm); line-height: 1.5; }
.ej-aula__accion { color: var(--ej-gold); font-family: var(--ej-font-sans); font-size: var(--ej-text-xs); font-weight: 700; }
.ej-aula__panel:hover .ej-aula__accion { text-decoration: underline; }

.ej-aula__avisos { display: flex; flex-direction: column; justify-content: center; gap: 36px; }

.ej-btn--ingreso { min-width: 318px; min-height: 83px; font-size: 1.5rem; }

@media (max-width: 61.9375em) {
  .ej-aula { grid-template-columns: 1fr; }
  .ej-aula__avisos { gap: 18px; }
}

@media (max-width: 47.9375em) {
  .ej-btn--ingreso { min-width: 0; width: 100%; min-height: 56px; font-size: var(--ej-text-lg); }
}

/* =========================================================================
   Informes de labores
   ========================================================================= */

/* Pastilla con el año, a la izquierda del formato */
.ej-documento__anio {
  flex-shrink: 0;
  padding: var(--ej-space-2) 13px;
  border: 1px solid #dce5ea;
  border-radius: var(--ej-radius-full);
  background: var(--ej-crema);
  color: var(--ej-tinta);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-xs);
  font-weight: 600;
}

@media (max-width: 47.9375em) {
  .ej-documento__anio { margin-left: 58px; }
  .ej-documento__formato { margin-left: var(--ej-space-2); }
}

/* El botón de descarga sin archivo aún publicado conserva la forma del diseño */
.ej-documento__descarga--pendiente { background: #9fb3c2; cursor: default; }

/* =========================================================================
   Datos abiertos
   ========================================================================= */

/* Pastillas de formato bajo la tabla de metadatos: sin versalitas */
.ej-marca--formato {
  padding: var(--ej-space-2) 13px;
  font-size: var(--ej-text-xs);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.ej-marcas--formatos { margin-top: var(--ej-space-6); }

/* En móvil el aviso con botón se apila: si el botón no encoge, el ancho mínimo
   del aviso arrastra toda la página y aparece desplazamiento horizontal. */
@media (max-width: 47.9375em) {
  .ej-nota { flex-wrap: wrap; }
  .ej-nota__accion { width: 100%; }
  .ej-aula__panel { min-height: 300px; padding: 24px; }
  .ej-aula__titulo { font-size: var(--ej-text-2xl); }
}

/* En Datos abiertos el encabezado de sección ocupa toda la columna (1440 en el
   Figma), no los 790 habituales: los títulos y la entradilla van en una línea. */
.ej-bloque__titulo--ancho { max-width: none; }

/* El Figma no equilibra los títulos: llena la primera línea y corta al final.
   «text-wrap: balance» repartía las palabras y movía el corte de sitio. */
.ej-titular,
.ej-portada__titulo { text-wrap: wrap; }

/* =========================================================================
   Podcast — barra de reproducción y detalles del Figma
   ========================================================================= */

.ej-reproductor { border-bottom: 1px solid #dce5ea; background: var(--ej-white); }

.ej-reproductor__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  min-height: 176px;
  padding-block: 24px;
}

.ej-reproductor__pista { display: flex; align-items: center; gap: 18px; max-width: 510px; }

.ej-reproductor__miniatura {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: var(--ej-radius);
  object-fit: cover;
}

.ej-reproductor__programa { margin: 0; color: var(--ej-bronce); font-family: var(--ej-font-sans); font-size: var(--ej-text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.ej-reproductor__titulo { margin: 4px 0; color: var(--ej-tinta); font-family: var(--ej-font-display); font-size: var(--ej-text-lg); font-weight: 700; line-height: 1.25; }
.ej-reproductor__creditos { margin: 0; color: var(--ej-texto); font-family: var(--ej-font-sans); font-size: var(--ej-text-xs); }

.ej-reproductor__controles { display: flex; align-items: center; gap: 12px; }

.ej-reproductor__tiempo {
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--ej-radius-full);
  background: #f4f7f9;
  color: var(--ej-texto);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-xs);
  font-variant-numeric: tabular-nums;
}

.ej-reproductor__progreso { width: 220px; height: 6px; border-radius: var(--ej-radius-full); background: #dce5ea; }
.ej-reproductor__avance { display: block; height: 100%; border-radius: var(--ej-radius-full); background: var(--ej-gold); }

.ej-reproductor__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #dce5ea;
  border-radius: var(--ej-radius-full);
  background: var(--ej-white);
  color: var(--ej-tinta);
  cursor: pointer;
}

.ej-reproductor__boton--activo { border-color: var(--ej-gold); background: var(--ej-gold); color: #05182b; }
.ej-reproductor__boton .ej-icono { width: 16px; height: 16px; }

/* Retratos de las personas invitadas dentro de la pastilla de créditos */
.ej-creditos__avatares { display: inline-flex; margin-right: 10px; }
.ej-creditos__avatares img {
  width: 34px;
  height: 34px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  object-fit: cover;
}
.ej-creditos__avatares img + img { margin-left: -8px; }

/* Aviso de que el episodio está cargado en la barra de reproducción */
.ej-conectado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--ej-radius-full);
  color: #c6d2e0;
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-xs);
}
.ej-conectado .ej-icono { width: 12px; height: 12px; }

/* Selector de orden a la derecha del encabezado de episodios */
.ej-orden {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid #dce5ea;
  border-radius: var(--ej-radius-full);
  background: var(--ej-white);
  color: var(--ej-tinta);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-xs);
  white-space: nowrap;
}
.ej-orden__etiqueta { color: var(--ej-texto); }
.ej-orden__valor { font-weight: 700; }
.ej-orden .ej-icono { width: 14px; height: 14px; }

/* Más opciones en cada tarjeta de episodio */
.ej-episodio__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--ej-space-3); }
.ej-episodio__mas { color: #9fb3c2; }
.ej-episodio__mas .ej-icono { width: 18px; height: 18px; }
.ej-episodio--destacado .ej-episodio__mas { color: rgba(255, 255, 255, 0.6); }

/* El botón de «ver más» va dentro de una banda clara */
.ej-mas--banda { padding: 8px; border-radius: var(--ej-radius-lg); background: #f4f7f9; }

@media (max-width: 61.9375em) {
  .ej-reproductor__inner { flex-direction: column; align-items: flex-start; gap: var(--ej-space-5); min-height: 0; }
  .ej-reproductor__controles { flex-wrap: wrap; }
  .ej-reproductor__progreso { width: 140px; }
}

/* Ambas pastillas se ajustan a su contenido; el panel es una columna estirada */
.ej-creditos,
.ej-conectado { align-self: flex-start; }

/* El arte de portada del Figma ya trae el sello, las ondas y el botón de
   reproducción, así que la tarjeta no los repite en HTML. La proporción del
   Figma es 397 × 238. */
.ej-programa__portada img { height: auto; aspect-ratio: 397 / 238; }

/* El enlace y el botón se alinean entre las tres tarjetas aunque la
   descripción ocupe distinto número de renglones. */
.ej-programa { height: 100%; }
.ej-programa__cuerpo { flex: 1 1 auto; }
.ej-programa__enlace { margin-top: auto; }

/* =========================================================================
   Tablet (768–991 px) — pantallas «tablet» del Figma, 834 px
   ========================================================================= */
@media (min-width: 48em) and (max-width: 61.9375em) {
  :root { --ej-gutter: 40px; }

  /* Barra superior: dos filas centradas y sin el enlace opcional */
  .ej-topbar { padding-block: 10px; }
  .ej-topbar__inner { justify-content: center; gap: 6px var(--ej-space-5); }
  .ej-topbar__group { flex: 0 1 auto; justify-content: center; }
  .ej-topbar__group li.ej-topbar--opcional { display: none; }

  /* La portada deja ver la fotografía: el mensaje ocupa poco más de la mitad */
  .ej-portada { min-height: 356px; padding-block: 40px; }
  .ej-portada__mensaje { max-width: 62%; }
  .ej-portada__titulo { font-size: 2.125rem; }
  .ej-portada--grande .ej-portada__titulo { font-size: 2.5rem; }
  .ej-portada__texto { max-width: none; font-size: var(--ej-text-lg); }

  /* Las parejas de tarjetas y los avisos pasan a una sola columna */
  .ej-colecciones--dos,
  .ej-avisos { grid-template-columns: 1fr; }

  /* El aviso con botón lo coloca debajo del texto, alineado con él */
  .ej-nota { flex-wrap: wrap; }
  .ej-nota__accion { margin-left: 72px; }
  .ej-btn--medio { min-width: 0; }

  /* El botón grande del campus no necesita el ancho de escritorio */
  .ej-btn--ingreso { min-width: 0; min-height: 64px; font-size: var(--ej-text-xl); }

  /* Títulos de sección: el ancho lo manda el contenedor, no los 790 px */
  .ej-bloque__titulo,
  .ej-bloque__titulo--compacto { max-width: none; }

  /* «Explorar por temas» conserva las cuatro columnas del diseño de tablet */
  .ej-numerados { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* La plantilla de 2013 impone line-height: 3.75rem en el cuerpo y eso inflaba la
   barra superior a 82 px en escritorio y a 150 px en tablet: en el Figma mide 42. */
.ej-topbar__group,
.ej-topbar__group > li,
.ej-topbar__social,
.ej-topbar__social li { line-height: 1.25rem; }

/* =========================================================================
   Móvil (≤767 px) — pantallas «movil» del Figma, 390 px
   Va al final porque «.ej-bloque__titulo--compacto .ej-titular» tiene más
   especificidad que la regla de móvil que había más arriba y la anulaba.
   ========================================================================= */
@media (max-width: 47.9375em) {
  .ej-portada__titulo { font-size: 1.5625rem; line-height: 1.12; }
  .ej-portada__texto { font-size: 0.9375rem; line-height: 1.5; }

  .ej-bloque__titulo--compacto .ej-titular,
  .ej-bloque__titulo--menor .ej-titular { font-size: 1.75rem; }
  .ej-bloque__titulo--compacto .ej-entrada,
  .ej-bloque__titulo--menor .ej-entrada { font-size: 0.9375rem; }

  .ej-coleccion__titulo { font-size: 1.1875rem; }
  .ej-coleccion__texto { font-size: 0.8438rem; }
  .ej-nota__titulo { font-size: 1.1875rem; }
  .ej-paso__titulo { font-size: 1.1875rem; }
  .ej-documento__titulo { font-size: 0.875rem; }
}

/* Al apilarse, el encabezado centrado también alinea a la izquierda */
@media (max-width: 74.9375em) {
  .ej-encabezado--centrado { align-items: flex-start; }
}

/* «1fr» conserva el mínimo de contenido: el campo de correo de la banda de
   suscripción ensanchaba la columna por encima del ancho del teléfono. */
@media (max-width: 74.9375em) {
  .ej-escucha { grid-template-columns: minmax(0, 1fr); }
  .ej-escucha > * { min-width: 0; }
  .ej-suscripcion input { min-width: 0; }
}

/* En tablet el catálogo de programas mantiene las tres columnas del Figma */
@media (min-width: 48em) and (max-width: 61.9375em) {
  .ej-programas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .ej-programa__cuerpo { padding: 18px 16px 16px; }
  .ej-programa__titulo { font-size: 1.3125rem; }
  .ej-programa__texto { font-size: 0.8125rem; }
}

/* =========================================================================
   Portada en tablet
   En la pantalla «tablet» del Figma (834 px) la portada conserva sus dos
   columnas: calendario + columna de avisos, y las parejas de tarjetas de
   Biblioteca/Revista y Videoteca/Podcast siguen lado a lado. Solo se apilan
   en móvil.
   ========================================================================= */
@media (min-width: 48em) and (max-width: 61.9375em) {
  .ej-matricula { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--ej-space-6); }
  .ej-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ej-space-6); }
}

/* El pie acompaña la columna de contenido: a 1440 px de pantalla el ancho de
   1440 dejaba el texto pegado al borde. */
.ej-footer > .ej-container { max-width: var(--ej-container); }

/* =========================================================================
   Calendario de la portada — ajustes contra el Figma
   ========================================================================= */

/* La tarjeta del calendario va en gris y la rejilla de días en blanco */
.ej-matricula > .ej-card:first-child {
  border-color: #e4eaf0;
  background: #f1f5f9;
  box-shadow: none;
}

/* Día con evento: borde dorado visible sobre relleno crema muy claro */
.ej-cal__dia--evento {
  border-color: var(--ej-gold);
  background: #fdf8e8;
}

/* En el diseño la leyenda no lleva línea divisoria */
.ej-cal__leyenda { padding-top: 0; border-top: 0; }

/* =========================================================================
   Portada en tablet — columna derecha del calendario
   La pantalla «tablet» del Figma simplifica las dos tarjetas: títulos en
   Playfair sin icono, avisos como texto corrido («Nombre · Estado») sin caja
   ni pastilla, y la tarjeta del campus sin fotografía.
   ========================================================================= */
@media (min-width: 48em) and (max-width: 61.9375em) {
  .ej-matricula .ej-card { padding: var(--ej-space-6); }

  .ej-matricula .ej-card__title {
    color: var(--ej-tinta);
    font-family: var(--ej-font-display);
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .ej-matricula .ej-card__title i { display: none; }

  /* Los avisos pierden la caja y fluyen como una línea de texto */
  .ej-aviso {
    display: block;
    margin-top: var(--ej-space-4);
    padding: 0;
    border: 0;
    background: transparent;
  }
  .ej-aviso > div { display: inline; }
  .ej-aviso__nombre {
    display: inline;
    color: var(--ej-texto);
    font-size: var(--ej-text-sm);
    font-weight: 400;
    line-height: 1.5;
  }
  .ej-aviso__nombre::after { content: " ·"; }
  .ej-aviso__periodo { display: none; }
  .ej-estado {
    display: inline;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ej-texto);
    font-size: var(--ej-text-sm);
    font-weight: 400;
    line-height: 1.5;
  }

  /* La tarjeta del campus va sin fotografía */
  .ej-campus img { display: none; }
  .ej-campus__texto { margin: var(--ej-space-3) 0 var(--ej-space-5); font-size: var(--ej-text-sm); line-height: 1.5; }
}

/* =========================================================================
   Accesibilidad — correcciones de la revisión WCAG 2.1 AA
   ========================================================================= */

/* --- 2.4.7 Foco visible -------------------------------------------------
   La plantilla de 2013 aplica «outline: none» a todos los elementos, así que
   no existía ningún indicador de foco. Se restituye un anillo dorado de
   3 px, visible tanto sobre fondo claro como sobre azul institucional. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ej-gold) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* Sobre crema o dorado el anillo dorado no contrastaría: allí va en tinta */
.ej-bloque--crema a:focus-visible,
.ej-nota a:focus-visible,
.ej-btn--gold:focus-visible,
.ej-btn--oro:focus-visible,
.ej-coleccion__chip:focus-visible { outline-color: var(--ej-tinta) !important; }

/* Navegadores sin :focus-visible (fallback) */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus { outline-color: var(--ej-gold); }

/* --- 1.4.3 Contraste ----------------------------------------------------
   Texto del pie: #94a3b8 sobre #1e3a8a daba 4,04:1. Con #c2ccdb sube a 6,39:1. */
.ej-footer__text,
.ej-footer__copy,
.ej-footer__legal a { color: #c2ccdb; }

/* Ayuda y leyenda del calendario: #64748b sobre #f1f5f9 daba 4,34:1.
   Con el gris de texto del sistema (#526575) sube a 5,51:1. */
.ej-cal__ayuda,
.ej-cal__leyenda { color: var(--ej-texto); }

/* Número de paso sobre azul: el bronce daba 2,07:1; el dorado da 4,93:1.
   Solo en la variante oscura: sobre fondo claro el dorado bajaría a 1,9:1 y
   allí el bronce (#8b6a2f) ya cumple con 5,00:1. */
.ej-proposito--oscuro .ej-numero,
.ej-bloque--azul .ej-numero,
.ej-bloque--noche .ej-numero { color: var(--ej-gold); }

/* --- 1.4.1 / 1.4.3 Botón translúcido sobre fondo claro -------------------
   «ej-btn--humo» está pensado para fondos oscuros; sobre una sección blanca
   el texto blanco quedaba invisible (1:1). */
.ej-bloque:not(.ej-bloque--azul):not(.ej-bloque--noche):not(.ej-bloque--escucha) .ej-encabezado > .ej-btn--humo {
  border-color: #dce5ea;
  background: var(--ej-slate-50);
  color: var(--ej-tinta);
}

/* --- Utilidad para texto solo para lectores de pantalla ------------------ */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Enlace para saltar al contenido (2.4.1) ----------------------------- */
.ej-saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1100;
  padding: 12px 20px;
  background: var(--ej-navy-900);
  color: var(--ej-white);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-sm);
  font-weight: 700;
  text-decoration: none;
}
.ej-saltar:focus {
  left: 8px;
  top: 8px;
  color: var(--ej-white);
}

/* --- Mapa del sitio (requisito de la revisión de accesibilidad) ---------- */
.ej-mapa {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: var(--ej-space-8) 0 0;
  padding: 0;
  list-style: none;
}

.ej-mapa__grupo {
  padding: 24px;
  border: 1px solid #dce5ea;
  border-radius: var(--ej-radius-lg);
  background: var(--ej-white);
}

.ej-mapa__titulo {
  display: block;
  margin-bottom: var(--ej-space-3);
  color: var(--ej-tinta);
  font-family: var(--ej-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
}
a.ej-mapa__titulo:hover, a.ej-mapa__titulo:focus-visible { text-decoration: underline; }

.ej-mapa__lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ej-mapa__lista a {
  color: var(--ej-texto);
  font-family: var(--ej-font-sans);
  font-size: var(--ej-text-sm);
  text-decoration: none;
}
.ej-mapa__lista a:hover, .ej-mapa__lista a:focus-visible { color: var(--ej-tinta); text-decoration: underline; }

@media (max-width: 61.9375em) { .ej-mapa { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 47.9375em) { .ej-mapa { grid-template-columns: 1fr; } }
.ej-mapa { align-items: start; }

/* --- Elemento de menú sin página propia (Transparencia) ------------------
   Joomla lo genera como <span> porque el ítem no tiene enlace. Sin estas
   reglas no mostraba el cursor de mano ni el realce al pasar por encima,
   y se veía distinto al resto de pestañas. */
.ej-nav__menu ul.nav > li > span,
.ej-nav__menu ul.menu > li > span { cursor: pointer; }

.ej-nav__menu ul.nav > li > span:hover,
.ej-nav__menu ul.menu > li > span:hover,
.ej-nav__menu ul.nav > li > span:focus,
.ej-nav__menu ul.menu > li > span:focus,
.ej-nav__menu ul.nav > li:focus-within > span,
.ej-nav__menu ul.menu > li:focus-within > span {
  background: var(--ej-slate-100);
  color: var(--ej-navy-900);
}

/* Cuando alguna de sus páginas hijas está activa, se resalta igual que un
   enlace de primer nivel activo */
.ej-nav__menu ul.nav > li.active > span,
.ej-nav__menu ul.menu > li.active > span,
.ej-nav__menu ul.nav > li.current > span,
.ej-nav__menu ul.menu > li.current > span {
  background: rgba(239, 246, 255, 0.8);
  border-color: var(--ej-blue-100);
  color: var(--ej-navy-900);
}