/* =====================================================================
   ePrilux · Páginas institucionales en la línea de la portada (25/10/2026)
   Karen: «hay que arreglar las páginas institucionales, que son un poco feas»; seguir la línea de
   la portada, las categorías, las fichas en estilo fino y las páginas del 22/10: rótulo pequeño con
   raya amarilla, título fino con la palabra clave en negrita, líneas finas, mucho aire, sin cajas.
   Solo estilos: no cambia textos ni estructura (eso va en Elementor, tarea F10 del plan).
   ===================================================================== */

:root {
  --epx-i-n: #06163d;
  --epx-i-b: #23a7d6;
  --epx-i-h: #FDCF63;
  --epx-i-tx: #3e4655;
  --epx-i-mu: #5b6270;
  --epx-i-bd: #e4e6e9;
  --epx-i-light: #f7f7f5;
}

/* ---------- Ruta de navegación (widget de Unlimited Elements fuera de las categorías) ----------
   Igual que en las categorías: pequeña, gris, la página actual en navy y «ePrilux» como inicio
   (el widget escribe «Home»; el texto se cambia aquí hasta sustituir el widget, tarea F8). */
html body .uc-breadcrumbs .uc-breadcrumbs-list {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
html body .uc-breadcrumbs .uc-breadcrumb-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
}
html body .uc-breadcrumbs :is(.uc-breadcrumb-item, .uc-breadcrumb-item a, .uc-item-title, .uc-item-title-inner) {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  text-decoration: none !important;
  color: var(--epx-i-mu) !important;
}
html body .uc-breadcrumbs .uc-breadcrumb-item a:hover .uc-item-title-inner { color: var(--epx-i-n) !important; }
html body .uc-breadcrumbs .uc-breadcrumb-current :is(.uc-item-title, .uc-item-title-inner) { color: var(--epx-i-n) !important; }
html body .uc-breadcrumbs .uc-breadcrumb-separator { color: var(--epx-i-bd) !important; margin: 0 !important; font-size: 12px !important; }
/* «Home» → «ePrilux», como en las categorías */
html body .uc-breadcrumbs .uc-breadcrumb-item:first-child a .uc-item-title-inner { font-size: 0 !important; }
html body .uc-breadcrumbs .uc-breadcrumb-item:first-child a .uc-item-title-inner::before {
  content: "ePrilux";
  font-size: 12px;
}

/* ---------- Páginas institucionales: rótulos, títulos, texto y fondos ----------
   Desde el 26/10/2026 viven en Elementor: CSS propio de las clases globales tag-line, hero-h1, hero-h2 y text
   (limitado a las páginas, como antes) y fondos gris de marca en cada sección. Lo hizo scripts/institucionales-a-clases.php. */

/* ---------- Migas en la cabecera de las institucionales (modulos/institucional-migas.php) ----------
   Mismo tamaño y orden que las de las categorías; en blanco porque van sobre la foto oscura. La franja de migas
   que había debajo de la cabecera se oculta en esas páginas. */
html body .epx-migas-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.5;
  color: rgba(255, 255, 255, .72);
}
html body .epx-migas-hero a { color: rgba(255, 255, 255, .72) !important; text-decoration: none !important; }
html body .epx-migas-hero a:hover { color: #fff !important; }
html body .epx-migas-hero [aria-current="page"] { color: #fff; }
html body .epx-migas-hero__sep { color: rgba(255, 255, 255, .4); }
html body:has(.epx-migas-hero) .e-con:has(> .e-con-inner > .elementor-widget-ucaddon_breadcrumbs_widget),
html body:has(.epx-migas-hero) .elementor-widget-ucaddon_breadcrumbs_widget {
  display: none !important;
}